@charset "utf-8";

/*───────────────────────────────────────────────────────────────
  ONWEB 리빌더 헤더 · 가로메뉴 종합판 (gt_hd_garo2) · style.css
  v1.0.0 / 2026-09-03 / ONWEB

  · 모든 규칙은 .gthdg2 / .gthdg2_map 하위로만 스코프한다.
  · 단위는 px 로 쓴다. 테마마다 html font-size 가 다르다.
  · 수치는 header.php 가 인라인 변수로 내려보낸다.
    여기 적힌 값은 변수가 없을 때의 대비값이다.
  · 강조컬러는 인라인으로 받지 않는다. --rb-point(:root, 강조컬러
    엔진이 심는다) → --point-color → 고정 대비값 순으로 CSS 가
    직접 찾아간다. 그래야 PHP 쪽이 전부 실패해도 화면이 산다.
  · margin 은 단축으로 쓰지 않는다. 미디어쿼리 안에서 특이도 높은
    단축 선언이 앞 규칙의 한쪽 방향을 조용히 지운다.
  · 브레이크포인트는 768 이 아니라 1360px 이다.
    (테마 rb.css/mobile.css 가 1360 에서 PC/모바일을 가른다)
    그 아래 501~1360 은 태블릿·작은 노트북이라 화면이 넉넉하다.
    높이·아이콘을 실제로 줄이는 구간은 500px 이하다.

  ── 이 파일의 차례 ───────────────────────────────────────────
   1. 색 토큰
   2. 헤더 본체
   3. 가로 배치 (center / left / right / row2)
   4. 로고 · 연도 배지
   5. 대메뉴 + 따라다니는 인디케이터
   6. 서브메뉴 — 공통 카드
   7. 서브메뉴 — 세로 목록 · 아이콘 카드 (sub_mode = drop)
   8. 서브메뉴 — 가로 태그 + 물방울 (sub_mode = tag)
   9. 서브메뉴 — 메가패널 (sub_mode = mega / mega_card)
  10. 현재 메뉴 · 호버 채우기 (sub_pill / sub_hover)
  11. 오른쪽 유틸 — 아이콘 · 검색 · 회원 · 글자 링크
  12. 전체메뉴 (full / drop, dark / light)
  13. 화면 크기별
  14. 모션 최소화 설정 존중
───────────────────────────────────────────────────────────────*/


/*───────────────────────────────────────────────────────────────
  1. 색 토큰 — 상태에 따라 이 다섯 개만 뒤집는다
───────────────────────────────────────────────────────────────*/
.gthdg2 {
    /* style.css 가 실제로 최신인지 header.php 가 확인하는 표식 */
    --gthdg2-ver: 7;

    --gthdg2-fg     : #25282b;
    --gthdg2-fg-dim : rgba(37, 40, 43, .62);
    --gthdg2-line   : rgba(0, 0, 0, .09);
    --gthdg2-bg     : var(--gthdg2-solid, #ffffff);
    --gthdg2-point  : var(--rb-point, var(--point-color, #25282b));
}

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

/* 투명(오버레이 최상단) 상태 — 글자가 사진 위로 올라간다 */
.gthdg2.gthdg2_over:not(.scrolling) {
    --gthdg2-fg     : #ffffff;
    --gthdg2-fg-dim : rgba(255, 255, 255, .72);
    --gthdg2-line   : rgba(255, 255, 255, .16);
    --gthdg2-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.gthdg2 와 특이도가 같은데(둘 다 1,1,0) 소스가
     뒤라서 이긴다. 뒤엣것은 특이도부터 더 높다.
     그래서 !important 없이는 설정한 배경색이 통째로 덮인다.

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

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

    background-color: var(--gthdg2-bg) !important;
    border-bottom: 1px solid var(--gthdg2-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.gthdg2:not(.gthdg2_over),
#header.gthdg2.scrolling {
    -webkit-backdrop-filter: blur(var(--gthdg2-blur, 12px));
    backdrop-filter: blur(var(--gthdg2-blur, 12px));
}

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

/* 실선 끄기.
   #header.gthdg2 의 border-bottom 에 !important 가 걸려 있으므로
   (리빌더 set.header.css 를 이기기 위한 것이다) 되돌리는 쪽도 같은
   강도로 써야 한다. */
#header.gthdg2.no_line:not(.scrolling) {
    border-bottom-color: transparent !important;
}

#header.gthdg2.no_line_over.gthdg2_over:not(.scrolling) {
    border-bottom-color: transparent !important;
}

/* 드롭다운·메가패널이 헤더 밖으로 나가야 하므로 잘림을 푼다 */
#header.gthdg2,
#header.gthdg2 .gthdg2_bar,
#header.gthdg2 .gthdg2_gnb {
    overflow: visible;
}


/*───────────────────────────────────────────────────────────────
  3. 가로 배치

  네 가지를 grid-template-areas 로 가른다. DOM 순서는 하나뿐이고
  (왼쪽 · 메뉴 · 유틸) 배치만 바뀌므로, 설정을 바꿔도 마크업과
  낭독 순서는 그대로다.

  center 는 1fr auto 1fr 로 나눈다. 30% / 40% / 30% 같은 비율은
  좌우 내용 길이가 다르면 가운데가 어긋난다.
───────────────────────────────────────────────────────────────*/
.gthdg2 .gthdg2_bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "left nav snb";
    align-items: center;
    gap: 20px;

    box-sizing: border-box;
    width: 100%;
    max-width: var(--gthdg2-inner, 1600px);
    height: var(--gthdg2-h, 84px);

    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gthdg2-side, 40px);
    padding-right: var(--gthdg2-side, 40px);

    transition: height .35s ease;
}

#header.gthdg2.scrolling .gthdg2_bar {
    height: var(--gthdg2-hs, 66px);
}

.gthdg2 .gthdg2_left { grid-area: left; }
.gthdg2 .gthdg2_gnb  { grid-area: nav; }
.gthdg2 .gthdg2_snb  { grid-area: snb; }

/* 로고 바로 옆에 붙는 배치 */
.gthdg2.gthdg2_left .gthdg2_bar,
.gthdg2.gthdg2_right .gthdg2_bar {
    grid-template-columns: auto 1fr auto;
}

.gthdg2.gthdg2_left  .gthdg2_gnb_ul { justify-content: flex-start; }
.gthdg2.gthdg2_right .gthdg2_gnb_ul { justify-content: flex-end; }

/* 2행 배치 — 첫 줄에 로고와 유틸, 둘째 줄에 대메뉴가 폭 전체로.
   메뉴가 많거나 이름이 긴 사이트에서 한 줄이 터질 때 쓴다. */
.gthdg2.gthdg2_row2 .gthdg2_bar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "left snb"
        "nav  nav";
    grid-template-rows: var(--gthdg2-h, 84px) var(--gthdg2-h2, 54px);
    height: auto;
}

#header.gthdg2.gthdg2_row2.scrolling .gthdg2_bar {
    grid-template-rows: var(--gthdg2-hs, 66px) var(--gthdg2-h2s, 46px);
    height: auto;
}

.gthdg2.gthdg2_row2 .gthdg2_gnb {
    align-self: stretch;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--gthdg2-line);
}

.gthdg2.gthdg2_row2 .gthdg2_gnb_ul { justify-content: center; }

.gthdg2 .gthdg2_left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.gthdg2 .gthdg2_gnb { min-width: 0; }

.gthdg2 .gthdg2_snb {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;

    float: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gthdg2 .gthdg2_snb > li {
    position: relative;
    float: none;
    list-style: none;
}


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

  투명 상태에서는 흰 로고, 배경이 깔린 상태에서는 기본 로고.
  filter: invert() 를 쓰지 않는다 — 로고에 브랜드 색이 있으면
  반전에서 엉뚱한 색이 된다. 두 장을 겹쳐 두고 투명도만 바꾼다.
───────────────────────────────────────────────────────────────*/
.gthdg2 .gthdg2_logowrap {
    float: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gthdg2 .gthdg2_logowrap > li {
    float: none;
    list-style: none;
}

.gthdg2 .gthdg2_logo {
    position: relative;
    display: block;
    line-height: 0;
}

.gthdg2 .gthdg2_logo picture {
    display: block;
    transition: opacity .35s ease;
}

/* 높이와 가로폭을 둘 다 "최대값"으로 건다.
   height 를 고정하고 width:auto 로 두면 가로로 긴 로고가 폭을
   무한정 차지해 가운데 대메뉴를 밀어낸다. max-height + max-width 로
   두면 둘 중 먼저 걸리는 쪽에 맞춰 비율 그대로 줄어든다. */
.gthdg2 .gthdg2_logo img {
    display: block;
    width: auto;
    height: auto;
    max-height: var(--gthdg2-logo, 36px);
    max-width: var(--gthdg2-logow, 220px);
    transition: max-height .35s ease;
}

.gthdg2 .gthdg2_logo .lg_w {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.gthdg2.gthdg2_over:not(.scrolling) .gthdg2_logo .lg_w { opacity: 1; }
.gthdg2.gthdg2_over:not(.scrolling) .gthdg2_logo .lg_c { opacity: 0; }

#header.gthdg2.scrolling .gthdg2_logo img {
    max-height: var(--gthdg2-logos, 30px);
}

/* 연도 배지.
   테마의 .beta_ico 는 배경색이 #AA20FF 로 하드코딩되어 있어
   테마컬러를 따라가지 않는다. 전용 클래스로 새로 만든다. */
.gthdg2 .gthdg2_year {
    display: inline-block;
    padding: 2px 8px;

    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .02em;

    color: #ffffff;
    background-color: var(--gthdg2-point);
    border-radius: 5px;
}


/*───────────────────────────────────────────────────────────────
  5. 대메뉴 + 따라다니는 인디케이터

  ★ position:relative 는 UL 에만 준다.
    nav 에 주면 메가패널 absolute 의 기준이 nav 로 바뀌어, 화면 폭
    전체가 아니라 "메뉴 글자 폭"만큼으로 줄어든다. 메가패널은 UL 의
    형제이므로 UL 에 relative 를 줘도 영향을 받지 않는다.
───────────────────────────────────────────────────────────────*/
.gthdg2 .gthdg2_gnb_ul {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gthdg2-gap, 10px);

    float: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gthdg2 .gthdg2_gnb_li {
    position: relative;
    float: none;
    list-style: none;
}

.gthdg2 .gthdg2_gnb_li > a {
    position: relative;
    z-index: 1;                       /* 인디케이터 위에 글자가 온다 */
    display: block;
    padding: 15px var(--gthdg2-gnbpad, 16px);

    font-size: var(--gthdg2-gnb, 17px);
    font-weight: var(--gthdg2-gnbw, 600);
    line-height: 1.4;
    letter-spacing: var(--gthdg2-track, 0px);
    white-space: nowrap;
    color: var(--gthdg2-fg);

    /* 아주 짧게 늦춘다. 인디케이터가 옮겨가는 동안 글자색이 먼저
       바뀌면 색만 앞질러 가는 것처럼 보인다. */
    transition: color .25s ease .05s;
}

/* plain · underline · dot 은 배경이 없으므로 좌우 여백이 넓을 이유가
   없다. 항목 사이 간격(gnb_gap)으로 벌리는 편이 자연스럽다. */
.gthdg2.gnb_plain .gthdg2_gnb_li > a,
.gthdg2.gnb_underline .gthdg2_gnb_li > a,
.gthdg2.gnb_dot .gthdg2_gnb_li > a {
    padding-left: 4px;
    padding-right: 4px;
}

/*── 따라다니는 인디케이터 (gnb_blob) ───────────────────────
   위치·폭은 header.php 의 스크립트가 잡는다. 모양은 여기서 정한다.
   실제 도형은 ::after 가 그린다 — 그래야 네 가지 모양이 같은
   좌표 계산을 공유하면서 서로 다른 크기·위치를 가질 수 있다. */
.gthdg2 .gthdg2_gnb_ind {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    z-index: 0;

    float: none;
    list-style: none;
    pointer-events: none;
    opacity: 0;

    transition: left .32s cubic-bezier(.34, 1.35, .64, 1),
                width .32s cubic-bezier(.34, 1.35, .64, 1),
                opacity .18s ease;
}

.gthdg2 .gthdg2_gnb_ind::after {
    content: "";
    position: absolute;
}

/* 알약 */
.gthdg2.gnb_pill .gthdg2_gnb_ind::after {
    left: 0;
    right: 0;
    top: 50%;
    height: calc(var(--gthdg2-gnb, 17px) + 22px);
    transform: translateY(-50%);
    background-color: var(--gthdg2-point);
    border-radius: var(--gthdg2-gnbrad, 20px);
}

/* 사각(작은 라운드) */
.gthdg2.gnb_box .gthdg2_gnb_ind::after {
    left: 0;
    right: 0;
    top: 50%;
    height: calc(var(--gthdg2-gnb, 17px) + 22px);
    transform: translateY(-50%);
    background-color: var(--gthdg2-point);
    border-radius: 8px;
}

/* 밑줄 */
.gthdg2.gnb_underline .gthdg2_gnb_ind::after {
    left: 0;
    right: 0;
    bottom: 6px;
    height: 2px;
    background-color: var(--gthdg2-point);
}

/* 점 */
.gthdg2.gnb_dot .gthdg2_gnb_ind::after {
    left: 50%;
    bottom: 6px;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background-color: var(--gthdg2-point);
    border-radius: 50%;
}

/* 투명 상태에서는 강조컬러가 사진에 묻힐 수 있어 흰색을 쓴다.
   클래스로만 바꾸므로 CSS 대체 경로를 막지 않는다. */
.gthdg2.gthdg2_over:not(.scrolling) .gthdg2_gnb_ind::after {
    background-color: #ffffff;
}

/* 채워지는 모양(알약·사각)에서는 글자를 뒤집는다 */
.gthdg2.gnb_pill .gthdg2_gnb_li:hover > a,
.gthdg2.gnb_pill .gthdg2_gnb_li:focus-within > a,
.gthdg2.gnb_pill .gthdg2_gnb_li.is_on > a,
.gthdg2.gnb_box .gthdg2_gnb_li:hover > a,
.gthdg2.gnb_box .gthdg2_gnb_li:focus-within > a,
.gthdg2.gnb_box .gthdg2_gnb_li.is_on > a {
    color: #ffffff;
}

/* 투명 상태에서는 인디케이터가 흰색이라 그 위 글자가 어두워야 한다 */
.gthdg2.gnb_pill.gthdg2_over:not(.scrolling) .gthdg2_gnb_li:hover > a,
.gthdg2.gnb_pill.gthdg2_over:not(.scrolling) .gthdg2_gnb_li.is_on > a,
.gthdg2.gnb_box.gthdg2_over:not(.scrolling) .gthdg2_gnb_li:hover > a,
.gthdg2.gnb_box.gthdg2_over:not(.scrolling) .gthdg2_gnb_li.is_on > a {
    color: #25282b;
}

/* ★ 인디케이터가 다른 항목으로 옮겨간 동안, 원래 자리(현재 메뉴)가
     흰 글씨로 남아 있으면 배경 없이 흰 글자만 떠 보인다.
     메뉴 줄에 마우스가 올라와 있고 그 항목이 대상이 아닐 때는
     평상시 색으로 되돌린다. */
.gthdg2.gnb_blob.gnb_pill .gthdg2_gnb_ul:hover .gthdg2_gnb_li.is_on:not(:hover) > a,
.gthdg2.gnb_blob.gnb_box .gthdg2_gnb_ul:hover .gthdg2_gnb_li.is_on:not(:hover) > a {
    color: var(--gthdg2-fg);
}

/*── 인디케이터를 쓰지 않을 때 — 항목마다 각자 표시 ─────────
   gnb_blob 이 꺼진 사이트를 위한 규칙이다. 모양은 위와 같다. */
.gthdg2:not(.gnb_blob) .gthdg2_gnb_li > a::after {
    content: "";
    position: absolute;
    z-index: -1;
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
}

.gthdg2:not(.gnb_blob).gnb_pill .gthdg2_gnb_li > a::after,
.gthdg2:not(.gnb_blob).gnb_box .gthdg2_gnb_li > a::after {
    left: 0;
    right: 0;
    top: 50%;
    height: calc(var(--gthdg2-gnb, 17px) + 22px);
    transform: translateY(-50%);
    background-color: var(--gthdg2-point);
}

.gthdg2:not(.gnb_blob).gnb_pill .gthdg2_gnb_li > a::after { border-radius: var(--gthdg2-gnbrad, 20px); }
.gthdg2:not(.gnb_blob).gnb_box .gthdg2_gnb_li > a::after  { border-radius: 8px; }

.gthdg2:not(.gnb_blob).gnb_underline .gthdg2_gnb_li > a::after {
    left: 0;
    right: 0;
    bottom: 6px;
    height: 2px;
    background-color: var(--gthdg2-point);
    opacity: 1;
    transform: scaleX(0);
    transform-origin: center center;
}

.gthdg2:not(.gnb_blob).gnb_dot .gthdg2_gnb_li > a::after {
    left: 50%;
    bottom: 6px;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background-color: var(--gthdg2-point);
    border-radius: 50%;
}

.gthdg2:not(.gnb_blob) .gthdg2_gnb_li:hover > a::after,
.gthdg2:not(.gnb_blob) .gthdg2_gnb_li:focus-within > a::after,
.gthdg2:not(.gnb_blob) .gthdg2_gnb_li.is_on > a::after {
    opacity: 1;
}

.gthdg2:not(.gnb_blob).gnb_underline .gthdg2_gnb_li:hover > a::after,
.gthdg2:not(.gnb_blob).gnb_underline .gthdg2_gnb_li:focus-within > a::after,
.gthdg2:not(.gnb_blob).gnb_underline .gthdg2_gnb_li.is_on > a::after {
    transform: scaleX(1);
}

.gthdg2:not(.gnb_blob).gthdg2_over:not(.scrolling) .gthdg2_gnb_li > a::after {
    background-color: #ffffff;
}

/* plain 은 글자색만 바뀐다 */
.gthdg2.gnb_plain .gthdg2_gnb_li:hover > a,
.gthdg2.gnb_plain .gthdg2_gnb_li:focus-within > a,
.gthdg2.gnb_plain .gthdg2_gnb_li.is_on > a,
.gthdg2.gnb_underline .gthdg2_gnb_li.is_on > a,
.gthdg2.gnb_dot .gthdg2_gnb_li.is_on > a {
    color: var(--gthdg2-point);
}

.gthdg2.gnb_plain.gthdg2_over:not(.scrolling) .gthdg2_gnb_li:hover > a,
.gthdg2.gnb_plain.gthdg2_over:not(.scrolling) .gthdg2_gnb_li.is_on > a,
.gthdg2.gnb_underline.gthdg2_over:not(.scrolling) .gthdg2_gnb_li.is_on > a,
.gthdg2.gnb_dot.gthdg2_over:not(.scrolling) .gthdg2_gnb_li.is_on > a {
    color: #ffffff;
}


/*───────────────────────────────────────────────────────────────
  6. 서브메뉴 — 공통 카드
───────────────────────────────────────────────────────────────*/
.gthdg2 .gthdg2_sub {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 5;

    /* ★ width:max-content 가 반드시 필요하다.

       절대배치 요소의 폭은 "shrink-to-fit" 으로 정해지는데, 그 계산에
       쓰이는 available 은 담는 상자(.gthdg2_gnb_li = 대메뉴 한 칸)의
       폭에서 left:50% 를 뺀 값이다. 대메뉴 한 칸이 100px 남짓이므로
       available 이 50px 밖에 안 되고, 결과적으로 카드가 min-content
       까지 쭈그러든다.

       세로 목록에서는 min-content 가 곧 가장 긴 항목이라 티가 안
       나지만, 가로 태그(sub_mode='tag')에서는 태그 한 개 폭까지
       줄어들어 나머지가 전부 줄바꿈된다. 실제로 그랬다.
       max-content 로 못박으면 "줄바꿈 없이 필요한 폭"을 먼저 잡고,
       그 다음 아래 max-width 가 화면 밖으로 나가는 것만 막는다. */
    width: -webkit-max-content;
    width: max-content;

    min-width: var(--gthdg2-submin, 190px);
    max-width: var(--gthdg2-submax, none);
    margin-top: var(--gthdg2-subgap, 14px);
    padding-top: var(--gthdg2-subpad, 16px);
    padding-bottom: var(--gthdg2-subpad, 16px);

    background: #ffffff;
    border-radius: var(--gthdg2-subrad, 14px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .10);

    opacity: 0;
    visibility: hidden;

    /* 좌우 위치를 --sub-x 하나로 뺀다.
       기본은 대메뉴 가운데(-50%), 양 끝 항목과 fullbar 스킨은 0 이다.
       이 값이 닫힘·열림 두 규칙의 transform 에 함께 들어가므로,
       변수로 두면 정렬을 바꿀 때 한 줄만 고치면 된다.
       (규칙마다 transform 을 통째로 다시 쓰면 한 곳을 빠뜨렸을 때
        카드가 열리는 순간 옆으로 튄다) */
    --sub-x: -50%;

    transform: translate(var(--sub-x), 8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

/* 대메뉴와 카드 사이의 틈에서 마우스가 빠지지 않도록 보이지 않는
   다리를 놓는다. 안 놓으면 내려가는 도중 :hover 가 풀려 닫힌다. */
.gthdg2 .gthdg2_sub::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--gthdg2-subbridge, 18px));
    left: 0;
    right: 0;
    height: var(--gthdg2-subbridge, 18px);
}

.gthdg2 .gthdg2_gnb_li:hover > .gthdg2_sub,
.gthdg2 .gthdg2_gnb_li:focus-within > .gthdg2_sub {
    opacity: 1;
    visibility: visible;
    transform: translate(var(--sub-x), 0);
}

/* 양 끝 메뉴를 어디에 붙일지 — 설정 sub_align

   'edge'   (기본) 첫 항목은 왼쪽에, 마지막 항목은 오른쪽에 붙인다.
            가운데 정렬하면 화면 밖으로 나갈 수 있기 때문이다.
   'center' 전부 대메뉴 가운데. 줄이 반듯해 보이는 대신 양 끝
            메뉴에서 카드가 화면을 넘칠 수 있는데, 그때는 header.php
            의 스크립트가 실제 좌표로 밀어 넣는다(그 보정은 두 방식
            모두에서 늘 돈다).

   ★ 아래 규칙에 .sal_edge 를 함께 적어 'center' 에서는 아예
     걸리지 않게 한다. 이 선택자만 지우면 안 된다 — 그러면
     양 끝 카드가 화면 밖으로 나간 채로 스크립트 보정만 남는다.

   ★ :first-child / :last-child 를 쓰지 않는다.
     인디케이터(.gthdg2_gnb_ind)도 같은 UL 의 li 라서, 그것이 첫째
     자식이 되는 순간 :first-child 가 아무 대메뉴에도 안 걸린다.
     pc_rbmenu_garo2.php 가 is_first / is_last 를 붙여 준다. */
.gthdg2.sal_edge .gthdg2_gnb_li.is_first > .gthdg2_sub {
    --sub-x: 0;
    left: 0;
}

.gthdg2.sal_edge .gthdg2_gnb_li.is_last > .gthdg2_sub {
    --sub-x: 0;
    left: auto;
    right: 0;
}

/* 카드 위쪽 강조컬러 선.
   border-top 으로 그리면 border-radius 안쪽에서 색이 번져 보인다.
   ::after 로 얹어 모서리 둥글기를 그대로 따라가게 한다.
   (::before 는 이미 호버 다리로 쓰고 있다) */
/* ★ 선을 둥글기만큼 안쪽으로 들인다.

   전에는 선에도 같은 border-radius 를 걸었는데, 선은 높이가 3px 뿐이라
   브라우저가 반지름을 높이의 절반(1.5px)까지 깎아 버린다. 결과적으로
   카드만 둥글고 선은 각진 채로 남아, 선의 양 끝이 둥근 모서리 밖으로
   삐져나와 들떠 보인다. (실제로 그랬다)

   둥글기가 0 이면 좌우 0 이 되어 종전과 똑같이 폭 전체를 채운다. */
.gthdg2.sub_topline .gthdg2_sub::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(var(--gthdg2-subrad, 0px) * .62);
    right: calc(var(--gthdg2-subrad, 0px) * .62);
    height: var(--gthdg2-toplineh, 3px);

    background-color: var(--gthdg2-point);
    border-radius: 0 0 2px 2px;
}

.gthdg2 .gthdg2_sub ul {
    float: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gthdg2 .gthdg2_sub li {
    float: none;
    list-style: none;
}

.gthdg2 .gthdg2_sub a {
    display: block;
    padding: 9px 22px;

    font-size: var(--gthdg2-subsize, 14px);
    line-height: 1.4;
    white-space: nowrap;
    color: #5a5f66;

    transition: color .2s ease, background-color .2s ease;
}

.gthdg2 .gthdg2_sub a:hover,
.gthdg2 .gthdg2_sub a:focus {
    color: var(--gthdg2-point);
    background-color: rgba(0, 0, 0, .035);
}


/*───────────────────────────────────────────────────────────────
  7. 서브메뉴 — 아이콘 카드 (sub_mode = drop · sub_card)

  왼쪽 아이콘 블록 + 오른쪽 (주메뉴 이름 / 구분선 / 하위 메뉴).
───────────────────────────────────────────────────────────────*/
.gthdg2 .gthdg2_sub.is_card {
    display: flex;
    align-items: flex-start;
    gap: 20px;

    min-width: 0;                     /* 아래 폭 계산이 이기도록 풀어 준다 */
    padding: 22px;
}

.gthdg2 .gthdg2_sub_ico {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    width: var(--gthdg2-subicobox, 92px);
    height: var(--gthdg2-subicobox, 92px);
    margin-top: 4px;

    color: #ffffff;
    background-color: var(--gthdg2-point);
    border-radius: calc(var(--gthdg2-subrad, 14px) * .85);
}

.gthdg2 .gthdg2_sub_ico svg {
    display: block;
    width: var(--gthdg2-subicosize, 44px);
    height: var(--gthdg2-subicosize, 44px);
}

.gthdg2 .gthdg2_sub_body {
    flex: 1 1 auto;
    min-width: var(--gthdg2-submin, 190px);
}

.gthdg2 .gthdg2_sub_ttl {
    display: block;
    padding-bottom: 12px;
    margin-bottom: 10px;

    font-size: calc(var(--gthdg2-subttl, 16px) + 1px);
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    color: #25282b;

    border-bottom: 1px dashed rgba(0, 0, 0, .16);
}

/* 카드 안에서는 목록 좌우 여백을 다시 잡는다. 위 6절의 22px 은
   카드가 이미 바깥에서 22px 을 줬으므로 그대로 두면 두 배가 된다. */
.gthdg2 .gthdg2_sub.is_card a {
    padding-left: 14px;
    padding-right: 14px;
}


/*───────────────────────────────────────────────────────────────
  8. 서브메뉴 — 가로 태그 + 물방울 (sub_mode = tag)

  ★ gt_hd_B 의 서브메뉴 방식이다.
    태그마다 각자 배경을 켜고 끄면 여러 개가 동시에 깜빡여 산만하다.
    덩어리 하나가 옮겨다니게 하면 눈이 그것 하나만 좇는다.

  ul / li 에 display:contents 를 걸어, 그리드·flex 가 li 를 건너뛰고
  a 에 직접 걸리게 한다. (gt_hd_B 와 같은 방식)
───────────────────────────────────────────────────────────────*/
/* 위아래는 설정(sub_pad)을 따르고 좌우만 고정.
   margin 과 달리 padding 은 단축으로 쓰면 위아래까지 덮어써서
   설정값이 조용히 사라진다. */
.gthdg2 .gthdg2_sub.is_tag {
    padding-left: 16px;
    padding-right: 16px;
}

.gthdg2 .gthdg2_tagwrap {
    position: relative;               /* 물방울의 기준 */
    display: flex;
    gap: 8px;
    padding: 3px;
    width: 100%;

    /* 한 줄로 놓되, 카드 최대폭(--gthdg2-submax)에 걸리면 줄을 바꾼다.
       nowrap 으로 두면 항목이 많은 대메뉴에서 카드 밖으로 삐져나온다.
       물방울은 top 도 함께 옮기므로 여러 줄에서도 따라온다. */
    flex-wrap: wrap;
}

/* 칸 수를 지정한 경우. 칸 개수는 pc_rbmenu_garo2.php 가 인라인으로
   내려보낸다(설정에 적힌 고정값이라 인라인으로 내려도 안전하다). */
.gthdg2 .gthdg2_tagwrap.is_grid {
    display: grid;
}

.gthdg2 .gthdg2_taglist,
.gthdg2 .gthdg2_taglist li {
    display: contents;
}

.gthdg2 .gthdg2_sub.is_tag .gthdg2_taglist a {
    position: relative;
    z-index: 1;
    display: block;
    width: auto;
    padding: 8px 14px;

    font-size: var(--gthdg2-subsize, 14px);
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    color: #555a61;

    border-radius: 10px;
    transition: color .18s ease;
}

/* 물방울. 태그 자신이 이미 여백을 갖고 있으므로 크기를 그대로 쓴다.
   위치·크기는 header.php 의 스크립트가 잡는다. */
.gthdg2 .gthdg2_tagpill {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;

    background: rgba(0, 0, 0, .05);
    border: 1px solid rgba(0, 0, 0, .09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 4px rgba(0, 0, 0, .07);
    border-radius: 10px;

    pointer-events: none;
    opacity: 0;

    transition: left .28s cubic-bezier(.34, 1.5, .64, 1),
                top .28s cubic-bezier(.34, 1.5, .64, 1),
                width .28s cubic-bezier(.34, 1.5, .64, 1),
                height .28s cubic-bezier(.34, 1.5, .64, 1),
                opacity .16s ease;
}

/* 그리드에서는 태그가 칸을 꽉 채운다. 가로 한 줄일 때 이렇게 하면
   짧은 메뉴 이름까지 전부 같은 폭이 되어 어색하다. */
.gthdg2 .gthdg2_tagwrap.is_grid .gthdg2_taglist a { width: 100%; }

/* 물방울이 배경을 맡으므로 태그 자신은 글자색만 바꾼다.
   둘 다 칠하면 배경이 두 겹으로 겹쳐 탁해진다. */
.gthdg2 .gthdg2_sub.is_tag .gthdg2_taglist a:hover,
.gthdg2 .gthdg2_sub.is_tag .gthdg2_taglist a:focus {
    color: var(--gthdg2-point);
    background-color: transparent;
}


/*───────────────────────────────────────────────────────────────
  8-1. 가로 서브메뉴 스킨 7종 (tag_skin)

  gt_hd_garo 의 스킨 7가지를 옮겨 왔다. 뼈대(태그 목록 + 물방울)는
  위 8절 그대로이고, 이 절은 그 위에 껍데기만 갈아 끼운다.

  ★ 모든 규칙을 .gthdg2.tsk_XXX 로 시작한다.
    8절의 기본 규칙보다 클래스가 하나 많아 항상 이긴다.
    (미디어쿼리 안이라고 이기는 게 아니라는 것을 13-1 에서 한 번 밟았다)
───────────────────────────────────────────────────────────────*/

/*── B. solid — 강조컬러 알약 + 흰 글씨 ─────────────────────*/
.gthdg2.tsk_solid .gthdg2_tagpill {
    background: var(--gthdg2-point);
    border-color: transparent;
    box-shadow: none;
}

/* 물방울이 강조컬러로 차 있으므로 그 위 글자는 흰색이어야 한다.
   8절의 "글자색만 강조컬러로" 규칙을 같은 강도로 눌러 둔다. */
.gthdg2.tsk_solid .gthdg2_sub.is_tag .gthdg2_taglist a:hover,
.gthdg2.tsk_solid .gthdg2_sub.is_tag .gthdg2_taglist a:focus {
    color: #ffffff;
}

/* 물방울이 미끄러지는 동안 글자색이 먼저 바뀌면 색만 앞질러 간다.
   대메뉴 인디케이터와 같은 이유로 아주 짧게 늦춘다. */
.gthdg2.tsk_solid .gthdg2_sub.is_tag .gthdg2_taglist a {
    transition: color .18s ease .05s;
}

/*── C. underline — 배경 없이 밑줄만 ────────────────────────
   물방울의 배경을 지우고, 그 자리에 밑줄 하나만 남긴다.
   위치·크기는 스크립트가 물방울에 잡아 주므로 밑줄도 함께 따라온다. */
.gthdg2.tsk_underline .gthdg2_tagpill {
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

.gthdg2.tsk_underline .gthdg2_tagpill::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 3px;
    height: 2px;
    background: var(--gthdg2-point);
}

/*── E. divider — 세로 구분선으로만 나눔 ────────────────────*/
.gthdg2.tsk_divider .gthdg2_tagwrap { gap: 0; }

.gthdg2.tsk_divider .gthdg2_sub.is_tag .gthdg2_taglist a {
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 999px;
}

/* 구분선은 "뒤 항목의 ::before" 가 아니라 앞 항목 쪽에 두면 첫 칸에
   선이 생긴다. li+li 로 두 번째부터 붙인다.
   (li 는 display:contents 라 상자가 없지만, 선택자로는 정상 동작한다) */
.gthdg2.tsk_divider .gthdg2_taglist li + li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 12px;
    margin-top: -6px;
    background: rgba(0, 0, 0, .14);
}

.gthdg2.tsk_divider .gthdg2_tagpill { border-radius: 999px; }

/*── F. sidelabel — 왼쪽 라벨 + 오른쪽 항목 ─────────────────*/
.gthdg2.tsk_sidelabel .gthdg2_sub_body {
    display: flex;
    align-items: center;
    gap: 26px;
}

.gthdg2 .gthdg2_sidelabel {
    flex: none;
    max-width: 220px;
    padding-right: 24px;
    border-right: 1px solid rgba(0, 0, 0, .09);
}

.gthdg2 .gthdg2_sidelabel strong {
    display: block;
    font-size: var(--gthdg2-subttl, 16px);
    font-weight: 700;
    line-height: 1.4;
    color: #25282b;
    white-space: nowrap;
}

.gthdg2 .gthdg2_sidelabel span {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(37, 40, 43, .55);
    word-break: keep-all;
}

.gthdg2.tsk_sidelabel .gthdg2_tagwrap { flex: 1 1 auto; }

/*── G. fullbar — 화면 폭 전체를 쓰는 띠 ────────────────────

  ★ CSS 만으로는 안 된다 — 실제로 밟았다.

    처음에는 대메뉴 li 의 position 을 static 으로 되돌리면 absolute 의
    기준이 position:fixed 인 #header 가 되어 left:0/right:0 만으로
    끝날 줄 알았다. 그런데 그 사이에 .gthdg2_gnb_ul 이 있고, 그것은
    따라다니는 인디케이터의 기준을 만들려고 position:relative 다.
    그래서 기준이 헤더가 아니라 UL(= 메뉴 글자 폭)이 되어, 띠가 딱
    메뉴 폭만큼만 그려졌다.

    UL 의 relative 를 풀면 이번엔 인디케이터가 화면 밖으로 날아간다.
    둘 다 살리려면 UL 의 화면 좌표를 알아야 하는데 그건 CSS 가 모른다.
    그래서 header.php 의 스크립트가 마우스를 올릴 때 UL 좌표를 재서
    margin-left 와 width 를 넣어 준다.

    아래 left:0 / right:0 은 스크립트가 실패했을 때의 폴백이다 —
    띠가 메뉴 폭으로 나오더라도 메뉴 자체는 정상 동작한다.

  ★ 선택자에 .is_first / .is_last 를 함께 적는다.

    6절의 양 끝 정렬 규칙은 클래스가 많아 이 절의 짧은 선택자를 이긴다.
    그래서 마지막 대메뉴에서만 `left:auto; right:0` 이 살아남아, 띠가
    화면 오른쪽 끝이 아니라 메뉴 오른쪽 끝을 기준으로 잡히고 왼쪽으로
    삐져나갔다. (실제로 그랬다 — 다른 메뉴는 멀쩡한데 맨 끝 메뉴에서만
    어긋나면 이 자리를 의심한다)

    지금은 6절 규칙에 `.sal_edge` 가 붙어 (0,5,0) 이고 여기 마지막
    선택자도 (0,5,0) 이라 **소스 순서로 갈린다** — 이 절이 6절보다
    뒤에 있어야 이긴다. 위로 옮기면 그 버그가 그대로 되살아난다.    */
.gthdg2.tsk_fullbar .gthdg2_gnb_li { position: static; }

.gthdg2.tsk_fullbar .gthdg2_gnb_li > .gthdg2_sub,
.gthdg2.tsk_fullbar .gthdg2_gnb_li.is_first > .gthdg2_sub,
.gthdg2.tsk_fullbar .gthdg2_gnb_li.is_last > .gthdg2_sub {
    --sub-x: 0;
    left: 0;
    right: auto;
    width: auto;
    max-width: none;
    border-radius: 0;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .07);
}

/* 띠는 화면 끝까지 가지만 항목은 본문 폭 안에 서야 로고·유틸과
   좌우 선이 맞는다. */
.gthdg2.tsk_fullbar .gthdg2_sub_body {
    box-sizing: border-box;
    max-width: var(--gthdg2-inner, 1600px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gthdg2-side, 40px);
    padding-right: var(--gthdg2-side, 40px);
}

.gthdg2.tsk_fullbar .gthdg2_tagwrap { justify-content: center; }

.gthdg2.tsk_fullbar .gthdg2_sub.is_tag .gthdg2_taglist a {
    padding-left: 18px;
    padding-right: 18px;
    border-radius: 999px;
}

.gthdg2.tsk_fullbar .gthdg2_tagpill { border-radius: 999px; }

/* 위쪽 강조컬러 선은 띠에서는 모서리가 둥글지 않다 */
.gthdg2.tsk_fullbar.sub_topline .gthdg2_sub::after {
    border-radius: 0;
}



/*───────────────────────────────────────────────────────────────
  9. 서브메뉴 — 메가패널 (sub_mode = mega / mega_card)

  ★ .gthdg2_gnb 에는 position 을 주지 않는다.
    주는 순간 absolute 의 기준이 nav 로 바뀌어, 화면 폭 전체가 아니라
    "메뉴 글자 폭"만큼으로 줄어든다. 기준은 position:fixed 인
    #header 여야 한다.

  ★ nav 를 헤더 높이만큼 늘린다(align-self:stretch).
    안 늘리면 nav 아래끝과 패널 윗변 사이에 헤더 여백만큼 틈이 생겨,
    대메뉴에서 패널로 마우스를 내리는 도중 :hover 가 풀려 닫힌다.
───────────────────────────────────────────────────────────────*/
.gthdg2.sub_mega .gthdg2_gnb {
    align-self: stretch;
    display: flex;
    align-items: center;
}

.gthdg2 .gthdg2_mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 4;

    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 22px 44px rgba(0, 0, 0, .10);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);

    transition: opacity .28s ease, transform .28s ease, visibility .28s;
}

.gthdg2.sub_mega .gthdg2_gnb:hover .gthdg2_mega,
.gthdg2.sub_mega .gthdg2_gnb:focus-within .gthdg2_mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

.gthdg2 .gthdg2_mega_in {
    display: flex;
    align-items: stretch;
    gap: 24px;

    box-sizing: border-box;
    width: 100%;
    max-width: var(--gthdg2-inner, 1600px);

    margin-left: auto;
    margin-right: auto;
    padding-top: var(--gthdg2-megapad, 46px);
    padding-bottom: var(--gthdg2-megapad, 46px);
    padding-left: var(--gthdg2-side, 40px);
    padding-right: var(--gthdg2-side, 40px);
}

/* 열은 폭을 똑같이 나눈다. min-width:0 을 빼면 긴 메뉴 이름이
   자기 열을 넓혀 나머지 열이 밀린다. */
.gthdg2 .gthdg2_mega_col {
    flex: 1 1 0;
    min-width: 0;
}

/* 열 사이 세로 구분선 (mega_line).
   첫 열에는 붙지 않으므로 왼쪽 끝이 대메뉴와 어긋나지 않는다. */
.gthdg2.mega_line .gthdg2_mega_col + .gthdg2_mega_col {
    padding-left: 24px;
    border-left: 1px solid rgba(0, 0, 0, .07);
}

.gthdg2 .gthdg2_mega_1st {
    display: block;
    padding-bottom: 14px;
    margin-bottom: 14px;

    font-size: var(--gthdg2-subttl, 16px);
    font-weight: 600;
    line-height: 1.4;
    color: #25282b;
    border-bottom: 1px solid rgba(0, 0, 0, .10);

    transition: color .2s ease;
}

.gthdg2 .gthdg2_mega_col.is_on .gthdg2_mega_1st,
.gthdg2 .gthdg2_mega_col.is_hot .gthdg2_mega_1st {
    color: var(--gthdg2-point);
}

.gthdg2 .gthdg2_mega_col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gthdg2 .gthdg2_mega_col li {
    float: none;
    list-style: none;
}

.gthdg2 .gthdg2_mega_col li a {
    display: block;
    padding-top: 7px;
    padding-bottom: 7px;

    font-size: var(--gthdg2-subsize, 14px);
    font-weight: 400;
    line-height: 1.5;
    color: rgba(37, 40, 43, .72);
    word-break: keep-all;

    transition: color .2s ease, padding-left .2s ease;
}

.gthdg2 .gthdg2_mega_col li a:hover,
.gthdg2 .gthdg2_mega_col li a:focus {
    padding-left: 5px;
    color: var(--gthdg2-point);
}

/*── mega_card — 열 머리에 아이콘과 설명문 ──────────────────
   크기·둥글기는 설정(mcard_ico*)에서 변수로 내려온다.
   칠하는 방식은 헤더에 붙는 mci_soft / mci_point / mci_line /
   mci_none 클래스가 정한다 — 색은 클래스로만 넘기므로 강조컬러의
   CSS 대체 경로(var(--rb-point, ...))를 막지 않는다. */
.gthdg2 .gthdg2_mega_ico {
    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    width: var(--gthdg2-mcbox, 52px);
    height: var(--gthdg2-mcbox, 52px);
    margin-bottom: 14px;

    color: var(--gthdg2-point);
    background-color: transparent;
    border: 0;
    border-radius: var(--gthdg2-mcrad, 14px);

    transition: color .22s ease, background-color .22s ease, border-color .22s ease;
}

.gthdg2 .gthdg2_mega_ico svg {
    display: block;
    width: var(--gthdg2-mcsize, 26px);
    height: var(--gthdg2-mcsize, 26px);
}

/* 옅은 회색 바탕 + 강조컬러 아이콘 */
.gthdg2.mci_soft .gthdg2_mega_ico {
    background-color: rgba(0, 0, 0, .04);
}

/* 강조컬러로 꽉 채우고 아이콘은 흰색 */
.gthdg2.mci_point .gthdg2_mega_ico {
    color: #ffffff;
    background-color: var(--gthdg2-point);
}

/* 테두리만. 상자가 커 보이지 않도록 선은 얇게 둔다. */
.gthdg2.mci_line .gthdg2_mega_ico {
    border: 1.5px solid rgba(0, 0, 0, .12);
}

/* 상자 없이 아이콘만.
   상자를 지우면서 크기까지 상자값을 그대로 두면 아이콘 옆에
   빈 공간이 남는다. 크기를 아이콘에 맞춰 줄인다. */
.gthdg2.mci_none .gthdg2_mega_ico {
    width: auto;
    height: auto;
    justify-content: flex-start;
    margin-bottom: 12px;
    border-radius: 0;
}

/* 마우스가 올라간 열(과 지금 보고 있는 열)의 아이콘을 채운다 —
   지금 어느 열을 보고 있는지가 글자색보다 훨씬 먼저 눈에 들어온다. */
.gthdg2.mci_hot .gthdg2_mega_col.is_hot .gthdg2_mega_ico,
.gthdg2.mci_hot .gthdg2_mega_col.is_on .gthdg2_mega_ico {
    color: #ffffff;
    background-color: var(--gthdg2-point);
    border-color: var(--gthdg2-point);
}

/* 상자가 없는 방식은 채울 배경이 없다. 흰색으로 두면 아무것도
   안 보이므로 색만 강조컬러로 남긴다. */
.gthdg2.mci_hot.mci_none .gthdg2_mega_col.is_hot .gthdg2_mega_ico,
.gthdg2.mci_hot.mci_none .gthdg2_mega_col.is_on .gthdg2_mega_ico {
    color: var(--gthdg2-point);
    background-color: transparent;
}

.gthdg2.sub_megacard .gthdg2_mega_1st {
    padding-bottom: 0;
    margin-bottom: 6px;
    font-size: calc(var(--gthdg2-subttl, 16px) + 2px);
    border-bottom: 0;
}

.gthdg2 .gthdg2_mega_desc {
    margin-top: 0;
    margin-bottom: 14px;

    font-size: 13px;
    line-height: 1.6;
    color: rgba(37, 40, 43, .55);
    word-break: keep-all;
}

/* ★ 구분선은 하위 목록의 위쪽에 건다.
     설명문(mega_desc)은 설정에 적은 열에만 나오므로, 거기에 선을
     걸면 설명이 없는 열만 선이 빠져 열마다 높이가 어긋난다.
     "제목 다음이 마지막 a 면" 같은 조건(:last-of-type)으로는 갈리지
     않는다 — 열 안의 a 는 어차피 제목 하나뿐이라 항상 참이다. */
.gthdg2.sub_megacard .gthdg2_mega_col > ul {
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, .09);
}


/*───────────────────────────────────────────────────────────────
  10. 현재 메뉴 · 호버 채우기 (sub_pill / sub_hover)

  특이도 정리 — 아래로 갈수록 강하다.
    (0,3,1)  6절 기본 호버         회색 배경 + 강조컬러 글씨
    (0,4,1)  sub_hover             강조컬러 배경 + 흰 글씨
    (0,5,1)  sub_pill 의 is_on:hover  지금 보고 있는 메뉴는 그대로 유지

  마지막 줄이 중요하다. 지금 보고 있는 메뉴 위에 마우스를 올렸을 때
  모양이 흔들리지 않아야 "여기가 현재 위치" 라는 신호가 유지된다.
───────────────────────────────────────────────────────────────*/

/* 알약·호버 배경이 카드 가장자리에 딱 붙지 않도록 목록에 좌우 여백을
   주고, 글자 위치는 그대로 두려고 a 의 좌우 패딩을 그만큼 줄인다.
     카드 밖  ul 10 + a 12 = 22   (기본 규칙의 22 와 같다)
     카드 안  ul  0 + a 14 = 14   (카드가 이미 22 를 갖고 있다)

   ★ 여백은 sub_pill 과 sub_hover 중 "하나라도" 켜져 있으면 준다.
     어느 쪽이든 배경이 칠해지는 순간 가장자리에 붙기 때문이다. */
.gthdg2.sub_pill .gthdg2_sub_body > ul,
.gthdg2.sub_hover .gthdg2_sub_body > ul {
    padding-left: 10px;
    padding-right: 10px;
}

.gthdg2.sub_pill .gthdg2_sub a,
.gthdg2.sub_hover .gthdg2_sub a {
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 8px; 
}

.gthdg2.sub_pill .gthdg2_sub.is_card .gthdg2_sub_body > ul,
.gthdg2.sub_hover .gthdg2_sub.is_card .gthdg2_sub_body > ul {
    padding-left: 0;
    padding-right: 0;
}

.gthdg2.sub_pill .gthdg2_sub.is_card a,
.gthdg2.sub_hover .gthdg2_sub.is_card a {
    padding-left: 14px;
    padding-right: 14px;
    border-radius: 8px;
}

/* 태그형은 자기 여백(8절)을 그대로 쓴다. 위 규칙이 그것을 덮으면
   물방울과 글자 위치가 어긋난다. */
.gthdg2.sub_pill .gthdg2_sub.is_tag .gthdg2_taglist a,
.gthdg2.sub_hover .gthdg2_sub.is_tag .gthdg2_taglist a {
    padding-left: 14px;
    padding-right: 14px;
    font-weight:600;
}

/*── 지금 보고 있는 하위 메뉴 (sub_pill) ────────────────────
   채우고 글씨를 희게 한다. 테두리형에 짙은 강조컬러를 글자색으로
   쓰면 사이트에 따라 묻힌다. */
.gthdg2.sub_pill .gthdg2_sub a.is_on {
    color: #ffffff;
    background-color: var(--gthdg2-point);
    border-radius: 8px;
}

/* 호버 규칙(6절)이 색을 되돌리지 못하게 같은 강도로 눌러 둔다.
   그냥 두면 마우스를 올리는 순간 흰 글씨가 강조컬러로 바뀌어
   배경과 같은 색이 되어 글자가 사라진다. */
.gthdg2.sub_pill .gthdg2_sub a.is_on:hover,
.gthdg2.sub_pill .gthdg2_sub a.is_on:focus {
    color: #ffffff;
    background-color: var(--gthdg2-point);
    opacity: .92;
    border-radius: 8px;
}

/* 새 글 아이콘이 알약 위에 올라가면 강조컬러끼리 겹쳐 안 보인다.
   흰 배경 · 강조컬러 글씨로 뒤집는다. */
.gthdg2.sub_pill .gthdg2_sub a.is_on .gnb_new_ico {
    color: var(--gthdg2-point) !important;
    background-color: #ffffff !important;
}

/* 태그형에서도 같은 규칙. 물방울이 이 위를 지나가더라도 현재 메뉴는
   자기 색을 유지한다(물방울은 z-index 0, 태그는 1 이다). */
.gthdg2.sub_pill .gthdg2_sub.is_tag .gthdg2_taglist a.is_on,
.gthdg2.sub_pill .gthdg2_sub.is_tag .gthdg2_taglist a.is_on:hover,
.gthdg2.sub_pill .gthdg2_sub.is_tag .gthdg2_taglist a.is_on:focus {
    color: #ffffff;
    background-color: var(--gthdg2-point);
}

/*── 마우스를 올린 하위 메뉴 (sub_hover) ────────────────────
   지금 보고 있는 메뉴(sub_pill)와 같은 모양으로 만든다.
   눈이 익혀야 할 규칙이 하나로 줄어든다.

   ★ 태그형은 제외한다. 거기서는 물방울이 이미 그 역할을 하고 있어서,
     배경까지 칠하면 두 겹으로 겹친다. */
.gthdg2.sub_hover .gthdg2_sub:not(.is_tag) a:hover,
.gthdg2.sub_hover .gthdg2_sub:not(.is_tag) a:focus {
    color: #ffffff;
    background-color: var(--gthdg2-point);
    border-radius: 8px;
}

.gthdg2.sub_hover .gthdg2_sub:not(.is_tag) a:hover .gnb_new_ico,
.gthdg2.sub_hover .gthdg2_sub:not(.is_tag) a:focus .gnb_new_ico {
    color: var(--gthdg2-point) !important;
    background-color: #ffffff !important;
}

/*── 메가패널에도 같이 건다 ─────────────────────────────────
   한쪽만 적용하면 "왜 여기선 다르지" 가 된다.

   기본 호버(9절)는 padding-left 를 5px 밀어 글자를 움직이는데,
   배경을 칠하면 그 움직임이 배경까지 함께 흔들어 산만하다.
   채우는 쪽을 쓸 때는 밀기를 되돌리고 열 전체를 그만큼 되맞춘다. */
.gthdg2.sub_hover .gthdg2_mega_col li a {
    padding-left: 12px;
    padding-right: 12px;
}

.gthdg2.sub_hover .gthdg2_mega_col ul {
    margin-left: -12px;
    margin-right: -12px;
}

.gthdg2.sub_hover .gthdg2_mega_col li a:hover,
.gthdg2.sub_hover .gthdg2_mega_col li a:focus {
    padding-left: 12px;
    padding-right: 12px;

    color: #ffffff;
    background-color: var(--gthdg2-point);
    border-radius: 8px;
}

.gthdg2.sub_hover .gthdg2_mega_col li a:hover .gnb_new_ico,
.gthdg2.sub_hover .gthdg2_mega_col li a:focus .gnb_new_ico {
    color: var(--gthdg2-point) !important;
    background-color: #ffffff !important;
}

/* sub_pill 만 켜고 sub_hover 는 껐을 때도 알약이 열 가장자리에
   붙지 않도록 같은 값을 준다. (둘 다 켜면 값이 같아 겹쳐도 무해하다) */
.gthdg2.sub_pill .gthdg2_mega_col ul {
    margin-left: -12px;
    margin-right: -12px;
}

.gthdg2.sub_pill .gthdg2_mega_col li a {
    padding-left: 12px;
    padding-right: 12px;
}

.gthdg2.sub_pill .gthdg2_mega_col li a.is_on {
    padding-left: 12px;
    padding-right: 12px;

    color: #ffffff;
    background-color: var(--gthdg2-point);
    border-radius: 8px;
}

/* padding 도 함께 눌러야 한다. 기본 호버가 padding-left 를 5px 로
   밀기 때문에, 그냥 두면 마우스를 올리는 순간 알약 안에서 글자만
   왼쪽으로 튄다. */
.gthdg2.sub_pill .gthdg2_mega_col li a.is_on:hover,
.gthdg2.sub_pill .gthdg2_mega_col li a.is_on:focus {
    padding-left: 12px;
    padding-right: 12px;

    color: #ffffff;
    background-color: var(--gthdg2-point);
}

.gthdg2.sub_pill .gthdg2_mega_col li a.is_on .gnb_new_ico {
    color: var(--gthdg2-point) !important;
    background-color: #ffffff !important;
}

.gthdg2.sub_pill.sub_hover .gthdg2_mega_col li a.is_on:hover,
.gthdg2.sub_pill.sub_hover .gthdg2_mega_col li a.is_on:focus {
    opacity: .92;
}


/*───────────────────────────────────────────────────────────────
  10-1. 열 기둥형 메가패널 (sub_mode = 'mega_col')

  대메뉴 칸과 그 아래 패널 열이 같은 폭으로 서서, 세로 구분선이
  헤더 위에서 패널 아래까지 한 줄로 이어진다.

  ★ 이 스킨에서는 nav 에 position:relative 를 준다.
    9절에서 "nav 에 position 을 주지 말라"고 한 것은 패널을 화면 폭
    전체로 펼치기 위해서였다. 여기서는 반대로 패널이 대메뉴 줄과
    정확히 같은 폭이어야 하므로, 기준이 nav 인 것이 맞다.

  ★ 대메뉴 칸과 패널 열에 같은 고정폭(--gthdg2-mcolw)을 준다.
    한쪽만 1fr 로 두면 글자 길이에 따라 폭이 달라져 세로선이
    위아래로 어긋난다. 두 곳 다 같은 변수를 쓰는 것이 핵심이다.

  ★ 이 절은 10절보다 뒤에 있어야 한다.
    아래 규칙 중 몇 개는 10절(sub_pill / sub_hover)과 특이도가 같아
    소스 순서로 이긴다. 앞으로 옮기면 현재 메뉴가 다시 알약으로 채워진다.
───────────────────────────────────────────────────────────────*/
.gthdg2.mcol_dark {
    --mcol-bg   : rgba(28, 29, 31, .62);
    --mcol-hot  : rgba(0, 0, 0, .30);
    --mcol-line : rgba(255, 255, 255, .14);
    --mcol-fg   : #ffffff;
    --mcol-dim  : rgba(255, 255, 255, .66);
}

.gthdg2.mcol_light {
    --mcol-bg   : rgba(255, 255, 255, .96);
    --mcol-hot  : rgba(0, 0, 0, .05);
    --mcol-line : rgba(0, 0, 0, .10);
    --mcol-fg   : #25282b;
    --mcol-dim  : rgba(37, 40, 43, .62);
}

.gthdg2.sub_megacol .gthdg2_gnb { position: relative; }

/*── 띠는 화면 폭 전체로 ────────────────────────────────────
   ★ nav 자신에 background 를 주면 딱 메뉴 폭만큼만 칠해진다.
     기둥(열)은 대메뉴 칸과 폭이 맞아야 하므로 nav 기준이어야 하고,
     띠는 화면 끝까지 가야 한다 — 두 요구가 반대다.
     그래서 띠만 ::before 로 떼어 내 100vw 로 늘린다.

     #header 가 position:fixed 라, 그 안에서 화면보다 넓은 요소가
     있어도 문서에 가로 스크롤이 생기지 않는다. */
.gthdg2.sub_megacol .gthdg2_gnb::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;

    background-color: var(--mcol-bg);
    pointer-events: none;

    /* 기둥은 패널이 열려 있을 때만 나타난다. 닫혀 있을 때도 띠와
       세로선이 남아 있으면, 메뉴를 열지 않은 평상시 헤더에 정체 모를
       줄무늬가 그어져 보인다. */
    opacity: 0;
    transition: opacity .28s ease;
}

.gthdg2.sub_megacol .gthdg2_gnb:hover::before,
.gthdg2.sub_megacol .gthdg2_gnb:focus-within::before {
    opacity: 1;
}

/* 띠보다 메뉴가 위에 오게 한다. z-index 를 안 주면 ::before 가
   나중에 그려져 글자를 덮는다. */
.gthdg2.sub_megacol .gthdg2_gnb_ul {
    z-index: 1;
    gap: 0;
    align-items: stretch;
}

.gthdg2.sub_megacol .gthdg2_gnb_li {
    flex: 0 0 var(--gthdg2-mcolw, 190px);
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: transparent;
    transition: background-color .22s ease;
}

/*── 마우스를 올린 칸 ───────────────────────────────────────
   대메뉴 칸과 그 아래 열이 같이 진해져 기둥 하나가 통째로 살아난다.
   패널 열 쪽은 스크립트가 붙여 주는 is_hot 을 쓴다(대메뉴에 마우스를
   올렸을 때 그 아래 열까지 따라 진해져야 하므로, :hover 만으로는
   안 된다 — 마우스는 대메뉴 칸에 있고 열은 그 아래에 있다). */
.gthdg2.sub_megacol .gthdg2_gnb_li:hover,
.gthdg2.sub_megacol .gthdg2_gnb_li:focus-within,
.gthdg2.sub_megacol .gthdg2_gnb_li.is_hot,
.gthdg2.sub_megacol .gthdg2_mega_col.is_hot {
    background-color: var(--mcol-hot);
}

.gthdg2.sub_megacol .gthdg2_gnb_li > a {
    width: 100%;
    text-align: center;
}

/* 따라다니는 인디케이터는 쓰지 않는다. 칸 전체가 이미 기둥으로
   나뉘어 있어서, 그 안에서 알약이 또 미끄러지면 신호가 겹친다.
   현재 칸 표시는 아래 mcol_head 의 밑줄이 맡는다. */
.gthdg2.sub_megacol .gthdg2_gnb_ind { display: none; }

/*── 세로 구분선 ────────────────────────────────────────────*/
.gthdg2.sub_megacol.mcol_line .gthdg2_gnb_li,
.gthdg2.sub_megacol.mcol_line .gthdg2_mega_col {
    border-left: 1px solid transparent;
    transition: border-color .28s ease;
}

.gthdg2.sub_megacol.mcol_line .gthdg2_gnb_li.is_last,
.gthdg2.sub_megacol.mcol_line .gthdg2_mega_col:last-child {
    border-right: 1px solid transparent;
}

.gthdg2.sub_megacol.mcol_line .gthdg2_gnb:hover .gthdg2_gnb_li,
.gthdg2.sub_megacol.mcol_line .gthdg2_gnb:focus-within .gthdg2_gnb_li {
    border-left-color: var(--mcol-line);
    border-right-color: var(--mcol-line);
}

.gthdg2.sub_megacol.mcol_line .gthdg2_mega_col {
    border-left-color: var(--mcol-line);
}

.gthdg2.sub_megacol.mcol_line .gthdg2_mega_col:last-child {
    border-right-color: var(--mcol-line);
}

/*── 대메뉴 글자 ────────────────────────────────────────────
   어두운 기둥 위에서는 헤더 글자색(검정일 수 있다)이 묻힌다.
   기둥이 깔린 동안만 흰색으로 뒤집는다. */
.gthdg2.sub_megacol.mcol_dark .gthdg2_gnb:hover .gthdg2_gnb_li > a,
.gthdg2.sub_megacol.mcol_dark .gthdg2_gnb:focus-within .gthdg2_gnb_li > a {
    color: #ffffff;
}

/*── 현재 칸 밑줄 (mcol_head) ───────────────────────────────
   ★ top:auto / transform:none / border-radius:0 을 반드시 적는다.
     gnb_style 이 pill · box 이면 5절이 같은 ::after 에 top:50% 와
     translateY(-50%) 를 걸어 두는데, 그걸 안 지우면 밑줄이 칸
     한가운데에 알약 모양으로 뜬다. (top 과 height 가 같이 잡히면
     bottom 은 무시된다) */
.gthdg2.sub_megacol.mcol_head .gthdg2_gnb_li > a::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: auto;
    bottom: -1px;
    height: 2px;

    background-color: var(--gthdg2-point);
    border-radius: 0;
    transform: none;
    opacity: 0;
    transition: opacity .2s ease;
}

/* 아래 열 위에 마우스가 있어도 대메뉴 밑줄이 함께 켜지도록
   is_hot 을 같이 본다(스크립트가 붙여 준다). */
.gthdg2.sub_megacol.mcol_head .gthdg2_gnb_li:hover > a::after,
.gthdg2.sub_megacol.mcol_head .gthdg2_gnb_li:focus-within > a::after,
.gthdg2.sub_megacol.mcol_head .gthdg2_gnb_li.is_hot > a::after,
.gthdg2.sub_megacol.mcol_head .gthdg2_gnb_li.is_on > a::after {
    opacity: 1;
}

/*── 패널 ───────────────────────────────────────────────────*/
.gthdg2.sub_megacol .gthdg2_mega {
    background: transparent;
    border-top: 0;
    box-shadow: none;
}

/* 패널 배경도 화면 폭 전체로. 위 nav 의 띠와 같은 방식이다 —
   열은 대메뉴와 폭이 맞아야 하고 배경은 화면 끝까지 가야 한다. */
.gthdg2.sub_megacol .gthdg2_mega::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;

    background-color: var(--mcol-bg);
    pointer-events: none;
}

.gthdg2.sub_megacol .gthdg2_mega_in {
    position: relative;
    z-index: 1;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    gap: 0;
}

.gthdg2.sub_megacol .gthdg2_mega_col {
    flex: 0 0 var(--gthdg2-mcolw, 190px);
    box-sizing: border-box;
    padding: 24px 14px var(--gthdg2-megapad, 46px);
    text-align: center;
    background-color: transparent;
    transition: background-color .22s ease;
}

/* 대메뉴 이름은 바로 위 칸에 이미 있다. 패널에서 한 번 더 쓰면
   같은 글자가 세로로 두 번 겹쳐 보인다. */
.gthdg2.sub_megacol .gthdg2_mega_1st { display: none; }

.gthdg2.sub_megacol .gthdg2_mega_col ul {
    margin-left: 0;
    margin-right: 0;
}

.gthdg2.sub_megacol .gthdg2_mega_col li a {
    padding: 9px 6px;
    text-align: center;
    color: var(--mcol-dim);
}

/*── 채우기(알약)를 쓰지 않는다 ─────────────────────────────
   기둥 안에서는 알약이 칸 폭을 꽉 채워 기둥과 구분이 안 된다.
   현재 메뉴와 호버는 글자색만으로 나타낸다.
   위 10절과 특이도가 같은 규칙이 있어 이 절이 뒤에 와야 이긴다. */
.gthdg2.sub_hover.sub_megacol .gthdg2_mega_col li a:hover,
.gthdg2.sub_hover.sub_megacol .gthdg2_mega_col li a:focus,
.gthdg2.sub_megacol .gthdg2_mega_col li a:hover,
.gthdg2.sub_megacol .gthdg2_mega_col li a:focus {
    padding-left: 6px;
    padding-right: 6px;
    color: var(--mcol-fg);
    background-color: transparent;
    border-radius: 0;
}

.gthdg2.sub_pill.sub_megacol .gthdg2_mega_col li a.is_on,
.gthdg2.sub_pill.sub_megacol .gthdg2_mega_col li a.is_on:hover,
.gthdg2.sub_pill.sub_megacol .gthdg2_mega_col li a.is_on:focus,
.gthdg2.sub_pill.sub_hover.sub_megacol .gthdg2_mega_col li a.is_on:hover,
.gthdg2.sub_pill.sub_hover.sub_megacol .gthdg2_mega_col li a.is_on:focus {
    padding-left: 6px;
    padding-right: 6px;
    color: var(--gthdg2-point);
    background-color: transparent;
    border-radius: 0;
    opacity: 1;
}

/* 새 글 아이콘은 배경을 안 칠하므로 뒤집을 필요가 없다.
   10절이 흰 배경으로 뒤집어 둔 것을 되돌린다. */
.gthdg2.sub_pill.sub_megacol .gthdg2_mega_col li a.is_on .gnb_new_ico,
.gthdg2.sub_hover.sub_megacol .gthdg2_mega_col li a:hover .gnb_new_ico,
.gthdg2.sub_hover.sub_megacol .gthdg2_mega_col li a:focus .gnb_new_ico {
    color: #ffffff !important;
    background-color: var(--gthdg2-point) !important;
}


/*───────────────────────────────────────────────────────────────
  10-2. 가로 스킨에서의 현재 메뉴 표시 (10절 보정)

  underline · card 는 "채우기"가 어울리지 않는다.
  10절보다 뒤에 두어 같은 특이도에서 이기게 한다.
───────────────────────────────────────────────────────────────*/
/* underline — 채우지 않고 글자색 + 밑줄로 */
.gthdg2.sub_pill.tsk_underline .gthdg2_sub.is_tag .gthdg2_taglist a.is_on,
.gthdg2.sub_pill.tsk_underline .gthdg2_sub.is_tag .gthdg2_taglist a.is_on:hover,
.gthdg2.sub_pill.tsk_underline .gthdg2_sub.is_tag .gthdg2_taglist a.is_on:focus {
    color: var(--gthdg2-point);
    background-color: transparent;
}

.gthdg2.sub_pill.tsk_underline .gthdg2_taglist a.is_on::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 3px;
    height: 2px;
    background: var(--gthdg2-point);
}



/*───────────────────────────────────────────────────────────────
  11. 오른쪽 유틸 — 아이콘 · 검색 · 회원 · 글자 링크
───────────────────────────────────────────────────────────────*/
.gthdg2 .gthdg2_ico {
    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 0;

    background: none;
    border: 0;
    cursor: pointer;
    color: var(--gthdg2-fg);

    transition: color .25s ease, opacity .2s ease;
}

.gthdg2 .gthdg2_ico:hover,
.gthdg2 .gthdg2_ico:focus { opacity: .62; }

.gthdg2 .gthdg2_ico svg {
    display: block;
    width: 20px;
    height: 20px;
}

/*── 3줄 메뉴 아이콘 (모바일 버튼 · PC 전체메뉴 공용) ───────
   색은 클래스로만 받는다. 강조컬러를 인라인 변수로 내려보내면
   아래 var(--rb-point, ...) 대체 경로가 함께 막힌다.

   버튼 상자는 아이콘보다 항상 크게. PHP 가 아이콘 크기에 맞춰
   --gthdg2-icobox 를 계산해 내려보낸다. 고정 40px 로 두면 아이콘을
   키웠을 때 삐져나온다. */
.gthdg2 .gthdg2_mtog,
.gthdg2 .gthdg2_maptog {
    width: var(--gthdg2-icobox, 42px);
    height: var(--gthdg2-icobox, 42px);
}

.gthdg2 .gthdg2_mtog svg,
.gthdg2 .gthdg2_maptog svg {
    width: var(--gthdg2-icosize, 26px);
    height: var(--gthdg2-icosize, 26px);
}

/* Material Icons 로 그릴 때. 글리프는 글자라 크기를 font-size 로 준다.
   ligature 가 켜져 있어야 'notes' 가 아이콘으로 바뀐다. */
.gthdg2 .gthdg2_ico .material-icons {
    display: block;
    font-size: var(--gthdg2-icosize, 26px);
    line-height: 1;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    user-select: none;
    -webkit-user-select: none;
}

/* Material 의 notes 는 왼쪽 정렬 계단이다. 오른쪽 정렬은 좌우 반전 */
.gthdg2 .gthdg2_ico .material-icons.gt_flip { transform: scaleX(-1); }

.gthdg2 .gthdg2_ico.ico_point { color: var(--gthdg2-point); }
.gthdg2 .gthdg2_ico.ico_auto  { color: var(--gthdg2-fg); }
.gthdg2 .gthdg2_ico.ico_fixed { color: var(--gthdg2-ico, #ff5a5a); }

/* 사진 위에서 윤곽이 살도록. 흰 아이콘이 밝은 사진에 묻히는 것을 막는다.
   배경이 깔린 상태에서는 그림자가 지저분하므로 걷어 낸다. */
.gthdg2.gthdg2_over:not(.scrolling) .gthdg2_ico.has_shadow svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .38));
}

/* 그림자로도 부족한 아주 밝은 사진용. 아이콘 뒤에 둥근 배경을 깐다. */
.gthdg2 .gthdg2_ico.has_chip {
    background-color: var(--gthdg2-chip, rgba(0, 0, 0, .05));
    border-radius: 10px;
}

.gthdg2.gthdg2_over:not(.scrolling) .gthdg2_ico.has_chip {
    --gthdg2-chip: rgba(255, 255, 255, .90);
}

/* 배경칩 위에서는 그림자를 다시 뺀다 — 이중으로 겹쳐 탁해진다 */
.gthdg2 .gthdg2_ico.has_chip.has_shadow svg { filter: none; }

/* 전체메뉴 버튼의 열림/닫힘 아이콘 교체 */
.gthdg2 .gthdg2_maptog .ic_close { display: none; }
.gthdg2 .gthdg2_maptog.is_on .ic_open  { display: none; }
.gthdg2 .gthdg2_maptog.is_on .ic_close { display: block; }

/* 전체메뉴가 열려 있을 때는 헤더 자신의 글자색을 따른다.
   흰색으로 박아 두면 배경이 깔린 상태에서 X 표시가 흰 바탕에
   흰색으로 겹쳐 보이지 않는다.
   --gthdg2-fg 는 투명 상태에서 흰색, 배경 상태에서 검정이다. */
.gthdg2 .gthdg2_maptog.is_on { color: var(--gthdg2-fg); }

/* 전체메뉴 버튼 왼쪽에 세로 구분선을 둔다 — 회원 영역과 성격이
   다른 버튼이라 시각적으로 한 칸 떨어뜨린다.

   앞에 형제가 있을 때만 긋는다. 유틸을 전부 꺼서 이 버튼 하나만
   남으면, 아무것도 없는 왼쪽에 선만 하나 떠 있게 된다. */
.gthdg2 .gthdg2_snb > li + .gthdg2_maptog_wrap {
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--gthdg2-line);
}

/*── 공통 드롭다운 카드 (검색 · 회원) ───────────────────────*/
.gthdg2 .gthdg2_pop {
    /* 좌우 위치를 --pop-x 하나로 뺀다.
       기본은 오른쪽 끝 정렬(--pop-x:0), 회원 메뉴만 아이콘 가운데
       정렬(-50%)로 바꾼다. 화면 크기에 따라 다시 오른쪽 정렬로
       되돌려야 하는데, 변수를 쓰면 그때 한 줄만 고치면 된다.
       (transform 을 규칙마다 통째로 다시 쓰면 열림/호버/미디어쿼리
        세 군데를 늘 같이 고쳐야 하고, 한 곳을 빠뜨리면 메뉴가
        열리는 순간 옆으로 튄다) */
    --pop-x: 0;

    position: absolute;
    top: 100%;
    right: 0;
    z-index: 20;

    margin-top: 10px;
    padding-top: 8px;
    padding-bottom: 8px;

    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .14);

    opacity: 0;
    visibility: hidden;
    transform: translate(var(--pop-x, 0), 8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}

/* 아이콘과 카드 사이 틈에서 마우스가 빠지지 않도록 다리를 놓는다 */
.gthdg2 .gthdg2_pop::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

.gthdg2 .gthdg2_pop.is_on {
    opacity: 1;
    visibility: visible;
    transform: translate(var(--pop-x, 0), 0);
}

/*── 검색 ───────────────────────────────────────────────────*/
.gthdg2 .gthdg2_searchbox { width: 300px; }

.gthdg2 .gthdg2_searchbox form {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 14px;
}

.gthdg2 .gthdg2_searchbox input[type="text"] {
    flex: 1 1 auto;
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    padding: 0;

    font-size: 15px;
    color: #25282b;

    background: none;
    border: 0;
    outline: none;
}

.gthdg2 .gthdg2_searchbox button {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;

    color: #ffffff;
    background-color: var(--gthdg2-point);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

.gthdg2 .gthdg2_searchbox button svg {
    display: block;
    width: 17px;
    height: 17px;
}

/*── 회원 ───────────────────────────────────────────────────*/
.gthdg2 .gthdg2_mytog {
    width: 34px;
    height: 34px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    color: var(--gthdg2-point);
}

.gthdg2.gthdg2_over:not(.scrolling) .gthdg2_mytog { color: #ffffff; }

.gthdg2 .gthdg2_mytog svg { width: 22px; height: 22px; }

/* 회원 메뉴는 아이콘의 가로 중앙에 맞춘다.
   오른쪽 끝 정렬로 두면 아이콘보다 한참 왼쪽으로 치우쳐 보인다 —
   메뉴가 아이콘보다 훨씬 넓기 때문이다.
   (검색창은 300px 라 가운데 정렬하면 화면 오른쪽으로 넘치므로
    그쪽은 오른쪽 끝 정렬 그대로 둔다) */
.gthdg2 .gthdg2_mymenu {
    --pop-x: -50%;
    left: 50%;
    right: auto;
    min-width: 150px;
}

.gthdg2 .gthdg2_mymenu a {
    display: block;
    padding: 10px 20px;

    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    color: #444444;

    transition: color .2s ease, background-color .2s ease;
}

.gthdg2 .gthdg2_mymenu a:hover,
.gthdg2 .gthdg2_mymenu a:focus {
    color: var(--gthdg2-point);
    background-color: #f2f3f4;
    font-weight: 700;
}

/* 마우스만 쓰는 환경에서는 올려두기만 해도 열린다.
   터치 기기에서는 header.php 의 클릭 토글이 .is_on 을 붙인다. */
.gthdg2 .gthdg2_my_wrap:hover .gthdg2_mymenu,
.gthdg2 .gthdg2_my_wrap:focus-within .gthdg2_mymenu {
    opacity: 1;
    visibility: visible;
    transform: translate(var(--pop-x, 0), 0);
}

/*── 회원 버튼 (snb_style = 'btn') ──────────────────────────*/
.gthdg2.snb_btn .gthdg2_mytog {
    box-sizing: border-box;
    width: var(--gthdg2-snbbtn, 38px);
    height: var(--gthdg2-snbbtn, 38px);
    margin-left: 8px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
}

.gthdg2.snb_btn.snb_ring .gthdg2_mytog {
    border: 2px solid var(--gthdg2-line);
}

/* 투명 상태에서는 테두리가 안 보인다. 흰 선으로 바꾼다. */
.gthdg2.snb_btn.snb_ring.gthdg2_over:not(.scrolling) .gthdg2_mytog {
    border-color: rgba(255, 255, 255, .62);
}

.gthdg2.snb_btn.snb_ring .gthdg2_mytog:hover,
.gthdg2.snb_btn.snb_ring .gthdg2_mytog:focus {
    border-color: var(--gthdg2-point);
    opacity: 1;
}

/* 아이콘은 원 안에 여유를 두고 앉는다. 지름의 62% 가 가장 안정적이다. */
.gthdg2.snb_btn .gthdg2_mytog svg {
    width: calc(var(--gthdg2-snbbtn, 38px) * .62);
    height: calc(var(--gthdg2-snbbtn, 38px) * .62);
}

/* 프로필 사진은 원을 꽉 채운다.
   object-fit 을 빼면 세로로 긴 사진이 찌그러진다. */
.gthdg2 .gthdg2_avatar {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/*── 글자 링크 (snb_style = 'text') ─────────────────────────*/
.gthdg2.snb_text .gthdg2_snb { gap: var(--gthdg2-snbgap, 18px); }

.gthdg2 .gthdg2_txt {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-size: var(--gthdg2-snbsize, 14px);
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    color: var(--gthdg2-fg);

    transition: opacity .22s ease, color .25s ease;
}

.gthdg2 .gthdg2_txt:hover,
.gthdg2 .gthdg2_txt:focus { opacity: .62; }

/* 아이콘은 글자 크기를 따라간다. 숫자로 박으면 snb_size 를 키웠을 때
   아이콘만 그대로 남아 균형이 깨진다.
   flex:none 을 빼면 좁은 폭에서 아이콘이 먼저 찌그러진다. */
.gthdg2 .gthdg2_txtico {
    flex: none;
    display: block;
    width: calc(var(--gthdg2-snbsize, 14px) + 4px);
    height: calc(var(--gthdg2-snbsize, 14px) + 4px);
}

/* 사진 위(투명 상태)에서는 흰 글자가 밝은 사진에 묻힌다.
   아이콘 쪽은 text-shadow 가 듣지 않으므로 drop-shadow 로 따로 건다. */
.gthdg2.gthdg2_over:not(.scrolling) .gthdg2_txt {
    text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}

.gthdg2.gthdg2_over:not(.scrolling) .gthdg2_txtico {
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .35));
}

/*── 스크랩 · 쪽지 (링크형 아이콘) ──────────────────────────
   .gthdg2_ico 는 원래 button 용이라 a 태그에는 flex 정렬이 빠진다.
   그것만 채워 준다. */
.gthdg2 .gthdg2_quick {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gthdg2-fg);
}

/* 안 읽은 쪽지 개수.
   숫자가 두 자리 이상이면 알약 모양으로 늘어나야 하므로 width 를
   고정하지 않고 min-width + 좌우 padding 으로 잡는다. */
.gthdg2 .gthdg2_badge {
    position: absolute;
    top: 2px;
    right: 2px;

    box-sizing: border-box;
    min-width: 16px;
    height: 16px;
    padding-left: 4px;
    padding-right: 4px;

    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    line-height: 16px;
    text-align: center;
    white-space: nowrap;

    color: #ffffff;
    background-color: var(--gthdg2-point);
    border-radius: 8px;
}

/* 사진 위에서 배지가 묻히지 않도록 흰 테두리를 한 겹 두른다 */
.gthdg2.gthdg2_over:not(.scrolling) .gthdg2_badge {
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .75);
}

/*── 닉네임 · 포인트 ────────────────────────────────────────*/
.gthdg2 .gthdg2_meta {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.gthdg2 .gthdg2_nick,
.gthdg2 .gthdg2_point {
    font-size: var(--gthdg2-snbsize, 14px);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: opacity .2s ease;
}

.gthdg2 .gthdg2_nick { color: var(--gthdg2-fg); }

/* 포인트는 강조컬러. 색은 여기서 찾아간다 —
   PHP 가 인라인으로 내려보내면 CSS 대체 경로가 함께 막힌다. */
.gthdg2 .gthdg2_point { color: var(--gthdg2-point); }

/* 투명 상태(사진 위)에서는 짙은 강조컬러가 묻힌다. 흰 글자로 두고
   그림자를 얹는다. 밝기를 계산할 방법이 CSS 에는 없으므로
   "사진 위에서는 무조건 흰색" 이 가장 안전하다. */
.gthdg2.gthdg2_over:not(.scrolling) .gthdg2_point,
.gthdg2.gthdg2_over:not(.scrolling) .gthdg2_nick {
    color: #ffffff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}

.gthdg2 .gthdg2_nick:hover,
.gthdg2 .gthdg2_point:hover { opacity: .65; }

/*── 모바일 토글은 PC 에서 숨긴다 ───────────────────────────*/
.gthdg2 .gthdg2_tog {
    display: none;
    float: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gthdg2 .gthdg2_tog > li {
    float: none;
    list-style: none;
}

.gthdg2 .gthdg2_mtog .ic_close { display: none; }
.gthdg2 .gthdg2_mtog.is_on .ic_open  { display: none; }
.gthdg2 .gthdg2_mtog.is_on .ic_close { display: block; }


/*── 테마 버그 보정 : 모바일 메뉴를 닫을 수 없던 구간 ───────
   테마 rb.css/mobile.css 에 이런 규칙이 있다.

       @media all and (min-width:1025px) { #m_gnb_close_btn.active {display:none} }

   그런데 모바일 메뉴는 1360px 까지 쓰인다(.mobile 이 보이는 구간).
   게다가 메뉴가 열리면 header 에 .moves 가 붙어 헤더 자체가
   화면 밖(left:100%)으로 밀려나므로, 여는 버튼도 같이 사라진다.
   결국 1025~1360px 에서는 메뉴를 열면 닫을 방법이 없다.

   테마 파일을 고치지 않고 그 구간에서만 닫기 버튼을 되살린다. */
@media all and (min-width: 1025px) and (max-width: 1360px) {
    #m_gnb_close_btn.active { display: block !important; }
}


/*───────────────────────────────────────────────────────────────
  12. 전체메뉴 (full / drop, dark / light)

  full 은 #header 바깥에, drop 은 #header 안에 놓인다.
  그래서 헤더의 인라인 변수를 물려받지 못할 수 있어, 배경색·안쪽폭은
  sitemap.php 가 자기 요소에 직접 내려보낸다.
───────────────────────────────────────────────────────────────*/
.gthdg2_map {
    --map-fg    : #ffffff;
    --map-dim   : rgba(255, 255, 255, .60);
    --map-line  : rgba(255, 255, 255, .14);
    --map-point : var(--rb-point, var(--point-color, #ffffff));

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

    opacity: 0;
    visibility: hidden;
}

/* 밝은 스킨. 흰 바탕에 흰 강조컬러가 오면 안 보이므로 대비값을
   어두운 쪽으로 바꾼다. */
.gthdg2_map.is_light {
    --map-fg    : #22252a;
    --map-dim   : rgba(34, 37, 42, .58);
    --map-line  : rgba(0, 0, 0, .10);
    --map-point : var(--rb-point, var(--point-color, #22252a));
}

.gthdg2_map.is_on {
    opacity: 1;
    visibility: visible;
}

/*── 화면을 덮는 방식 ───────────────────────────────────────*/
.gthdg2_map.is_full {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9800;

    overflow-y: auto;
    transition: opacity .4s ease, visibility .4s ease;
}

/*── 헤더 아래로 내려오는 방식 ──────────────────────────────
   #header 가 position:fixed 이므로 그 안의 absolute 는 헤더 바로
   아래에 붙는다. 화면보다 길어지면 패널 자신이 스크롤한다 —
   뒤 페이지까지 잠그면 읽던 자리를 잃는다. */
.gthdg2_map.is_drop {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;

    max-height: calc(100vh - var(--gthdg2-hs, 66px));
    overflow-y: auto;

    border-top: 1px solid var(--map-line);
    box-shadow: 0 22px 44px rgba(0, 0, 0, .12);

    transform: translateY(-10px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}

.gthdg2_map.is_drop.is_on { transform: translateY(0); }

.gthdg2_map_photo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    filter: grayscale(1);
    opacity: .10;
}

.gthdg2_map_in {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    max-width: var(--gthdg2-inner, 1600px);
    margin-left: auto;
    margin-right: auto;
    padding: 180px var(--gthdg2-side, 40px) 100px;
}

.gthdg2_map.is_drop .gthdg2_map_in {
    padding-top: 44px;
    padding-bottom: 48px;
}

.gthdg2_map_lead {
    margin-top: 0;
    margin-bottom: 54px;
}

.gthdg2_map_lead span {
    display: block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .24em;
    color: var(--map-point);
}

.gthdg2_map_lead b {
    display: block;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--map-fg);
}

/*── 전체메뉴 안 검색창 ─────────────────────────────────────*/
.gthdg2_map_search {
    display: flex;
    align-items: center;
    gap: 8px;

    box-sizing: border-box;
    max-width: 520px;
    margin-bottom: 44px;
    padding: 6px 8px 6px 18px;

    border: 1px solid var(--map-line);
    border-radius: 999px;
}

.gthdg2_map_search input[type="text"] {
    flex: 1 1 auto;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0;

    font-size: 15px;
    color: var(--map-fg);

    background: none;
    border: 0;
    outline: none;
}

.gthdg2_map_search button {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;

    color: #ffffff;
    background-color: var(--map-point);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.gthdg2_map_search button svg { display: block; width: 18px; height: 18px; }

/*── 메뉴 목록 ──────────────────────────────────────────────*/
.gthdg2_map_list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 28px;

    float: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gthdg2_map_list > li {
    float: none;
    list-style: none;
}

/* 대메뉴 앞 번호. 장식이므로 크게 키우고 아주 흐리게 둔다 —
   눈에 먼저 들어오면 정작 메뉴 이름을 가린다. */
.gthdg2_map_no {
    display: block;
    margin-bottom: 6px;

    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--map-point);
    opacity: .7;
}

.gthdg2_map_1st {
    display: block;
    padding-bottom: 16px;
    margin-bottom: 12px;

    font-size: var(--gthdg2-map1st, 20px);
    font-weight: 500;
    color: var(--map-fg);
    border-bottom: 1px solid var(--map-line);

    transition: color .2s ease;
}

.gthdg2_map_list > li.is_on .gthdg2_map_1st,
.gthdg2_map_1st:hover,
.gthdg2_map_1st:focus {
    color: var(--map-point);
}

.gthdg2_map_list ul {
    float: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gthdg2_map_list ul li {
    float: none;
    list-style: none;
}

.gthdg2_map_list ul a {
    display: block;
    padding-top: 7px;
    padding-bottom: 7px;

    font-size: var(--gthdg2-mapsize, 15px);
    color: var(--map-dim);
    transition: color .2s ease, padding-left .2s ease;
}

/* 마우스를 올리면 밀려나면서 강조컬러로 바뀌고, 왼쪽에 짧은 막대가
   선다. 밀림만으로는 어느 줄을 짚었는지 한눈에 안 들어온다.

   ★ 강조컬러를 인라인으로 내려보내지 않는다. --map-point 는 파일 위쪽
     에서 var(--rb-point, var(--point-color, ...)) 로 스스로 찾아간다.
     밝은 스킨(is_light)은 그 대체값만 어두운 쪽으로 바꿔 두었으므로,
     강조컬러가 없는 사이트에서도 흰 바탕에 흰 글씨가 되지 않는다. */
.gthdg2_map_list ul a {
    position: relative;
}

.gthdg2_map_list ul a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--map-point);
    transform: translateY(-50%);
    transition: width .2s ease;
}

.gthdg2_map_list ul a:hover,
.gthdg2_map_list ul a:focus,
.gthdg2_map_list ul a.is_on {
    color: var(--map-point);
    padding-left: 16px;
}

.gthdg2_map_list ul a:hover::before,
.gthdg2_map_list ul a:focus::before,
.gthdg2_map_list ul a.is_on::before {
    width: 10px;
}

/*── 아래쪽 회사정보 · SNS ──────────────────────────────────
   값은 rb_builder(관리자 > 리빌더 > 하단 회사정보)에서 온다.
   빈 항목은 sitemap.php 가 줄째로 빼므로 여기서는 모양만 잡는다. */
.gthdg2_map_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;

    margin-top: 60px;
    padding-top: 28px;
    border-top: 1px solid var(--map-line);
}

/* ★ 리스트 리셋(.gthdg2_map ul,li)이 이 여백을 잡아먹지 않도록
     클래스를 두 개 쓴다. 한 개짜리 선택자는 리셋에 진다. */
.gthdg2_map .gthdg2_map_biz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    margin: 0;
    padding: 0;
    list-style: none;
}

.gthdg2_map .gthdg2_map_biz li {
    display: flex;
    align-items: center;

    font-size: 13px;
    line-height: 1.6;
    color: var(--map-dim);
    list-style: none;
}

/* 구분선은 "앞 항목의 ::after" 로 그린다.
   li+li::before 로 절대배치하면 줄바꿈됐을 때 다음 줄 첫머리에
   막대만 홀로 남는다. ::after 는 구조적으로 앞 항목을 따라간다. */
.gthdg2_map .gthdg2_map_biz li:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    margin: 0 14px;
    vertical-align: -1px;
    background: currentColor;
    opacity: .30;
}

/* b 를 inline-block 으로 두면 가상요소 끝의 공백이 잘려
   "상호 :값" 처럼 붙는다. 줄바꿈 안 되는 공백으로 못박는다. */
.gthdg2_map .gthdg2_map_biz li b {
    font-weight: 500;
    color: var(--map-fg);
    opacity: .8;
}

.gthdg2_map .gthdg2_map_biz li b::after { content: "\00a0:\00a0"; }

.gthdg2_map .gthdg2_map_biz li a { color: inherit; }
.gthdg2_map .gthdg2_map_biz li a:hover { color: var(--map-fg); }

.gthdg2_map_sns {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* sns_g 의 g_* 파일은 이름과 달리 브랜드 컬러 원형 배지다.
   무채색 화면에 그냥 넣으면 그 부분만 튄다. 평상시에는 눌러 두고
   마우스를 올리면 원래 색으로 돌아온다. */
.gthdg2_map_sns img {
    display: block;
    width: 28px;
    height: 28px;
    filter: grayscale(1) brightness(1.7);
    opacity: .6;
    transition: opacity .2s ease, filter .2s ease;
}

.gthdg2_map.is_light .gthdg2_map_sns img {
    filter: grayscale(1);
    opacity: .5;
}

/* 🔴 특이도를 맞춰 둔다.

   전에는 이 규칙이 `.gthdg2_map_sns a:hover img` (0,2,1) 이었는데,
   바로 위 밝은 스킨 규칙이 `.gthdg2_map.is_light .gthdg2_map_sns img`
   (0,3,1) 이라 **밝은 스킨에서만 마우스를 올려도 아무 변화가 없었다.**
   소스 순서를 뒤로 미뤄도 소용없다 — 특이도 싸움이다.

   어두운 스킨용은 `.gthdg2_map` 을 붙여 (0,3,1),
   밝은 스킨용은 `.is_light` 까지 붙여 (0,4,1) 로 올린다. */
.gthdg2_map .gthdg2_map_sns a:hover img,
.gthdg2_map .gthdg2_map_sns a:focus img {
    filter: none;
    opacity: 1;
}

.gthdg2_map.is_light .gthdg2_map_sns a:hover img,
.gthdg2_map.is_light .gthdg2_map_sns a:focus img {
    filter: none;
    opacity: 1;
}

/* 색이 돌아오는 것만으로는 약해서 살짝 떠오르게 한 가지 신호를 더 준다.
   ★ 들어올리는 것은 img 가 아니라 a 다. img 에 걸면 위 filter 규칙과
     같은 요소를 두 곳에서 다루게 되어, 나중에 한쪽만 고치면 어긋난다. */
.gthdg2_map .gthdg2_map_sns a {
    display: block;
    transition: transform .2s ease;
}

.gthdg2_map .gthdg2_map_sns a:hover,
.gthdg2_map .gthdg2_map_sns a:focus { transform: translateY(-2px); }


/*───────────────────────────────────────────────────────────────
  12-1. 고정 헤더 아래로 앵커가 숨지 않게
  #아이디 링크로 이동하면 대상이 헤더에 가려진다.
  :target 은 주소의 # 뒤 아이디와 맞는 요소에만 걸리므로
  다른 요소에는 아무 영향이 없다.
───────────────────────────────────────────────────────────────*/
:target {
    scroll-margin-top: calc(var(--gthdg2-hs, 66px) + 20px);
}

@media all and (max-width: 1360px) {
    :target { scroll-margin-top: calc(var(--gthdg2-hmo, 64px) + 16px); }
}


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

  PC 메뉴가 보이는 구간은 1361px 위쪽뿐이다(그 아래는 테마가
  모바일로 전환한다). 1361~1560 구간은 로고 + 대메뉴 5~6개 +
  아이콘 3개가 한 줄에 다 들어가야 해서 가장 빡빡하다.
───────────────────────────────────────────────────────────────*/
@media all and (min-width: 1361px) and (max-width: 1560px) {

    .gthdg2 .gthdg2_bar {
        padding-left: 24px;
        padding-right: 24px;
    }

    .gthdg2 .gthdg2_gnb_li > a {
        font-size: 15px;
        padding-left: calc(var(--gthdg2-gnbpad, 16px) - 4px);
        padding-right: calc(var(--gthdg2-gnbpad, 16px) - 4px);
    }

    /* 선택자를 위(11절)와 같은 모양으로 맞춘다.
       .gthdg2 .gthdg2_maptog_wrap (0,2,0) 로 쓰면 특이도가 낮아
       이 미디어쿼리 안인데도 위 규칙에 진다. */
    .gthdg2 .gthdg2_snb > li + .gthdg2_maptog_wrap {
        margin-left: 8px;
        padding-left: 8px;
    }

    /* 닉네임을 먼저 접는다 — 포인트·아이콘보다 자리를 많이 차지하고
       없어도 아쉬움이 가장 적다. */
    .gthdg2 .gthdg2_nick { display: none; }

    .gthdg2 .gthdg2_meta { margin-left: 4px; }
    .gthdg2 .gthdg2_point { font-size: 13px; }

    .gthdg2.snb_text .gthdg2_snb { gap: 12px; }
    .gthdg2 .gthdg2_txt { font-size: 13px; }

    .gthdg2.snb_btn .gthdg2_mytog {
        width: calc(var(--gthdg2-snbbtn, 38px) - 4px);
        height: calc(var(--gthdg2-snbbtn, 38px) - 4px);
        margin-left: 4px;
    }

    .gthdg2 .gthdg2_sub.is_card { gap: 14px; padding: 18px; }

    .gthdg2 .gthdg2_sub_ico {
        width: calc(var(--gthdg2-subicobox, 92px) * .8);
        height: calc(var(--gthdg2-subicobox, 92px) * .8);
    }

    .gthdg2 .gthdg2_sub_ico svg {
        width: calc(var(--gthdg2-subicosize, 44px) * .8);
        height: calc(var(--gthdg2-subicosize, 44px) * .8);
    }

    .gthdg2 .gthdg2_mega_in { gap: 16px; }
    .gthdg2.mega_line .gthdg2_mega_col + .gthdg2_mega_col { padding-left: 16px; }
}


/*───────────────────────────────────────────────────────────────
  13-1. 모바일 (테마 기준 1360px)
───────────────────────────────────────────────────────────────*/
@media all and (max-width: 1360px) {

    .gthdg2 .gthdg2_bar,
    .gthdg2.gthdg2_row2 .gthdg2_bar {
        display: flex;
        align-items: center;
        justify-content: space-between;

        grid-template-columns: none;
        grid-template-rows: none;
        grid-template-areas: none;

        height: var(--gthdg2-hmo, 64px);
        padding-left: var(--gthdg2-sidemo, 16px);
        padding-right: var(--gthdg2-sidemo, 16px);
    }

    #header.gthdg2.scrolling .gthdg2_bar,
    #header.gthdg2.gthdg2_row2.scrolling .gthdg2_bar {
        height: var(--gthdg2-hmo, 64px);
    }

    /* ★ 선택자를 세 벌로 쓴다.

       .gthdg2 .gthdg2_gnb (0,2,0) 한 줄로는 아래 두 규칙에 진다.
         .gthdg2.sub_mega  .gthdg2_gnb { display:flex }   (0,3,0)
         .gthdg2.gthdg2_row2 .gthdg2_gnb { display:flex } (0,3,0)
       둘 다 메가패널·2행 배치가 nav 를 헤더 높이만큼 늘리려고 건
       규칙인데, 미디어쿼리는 특이도를 올려 주지 않는다. 그래서
       sub_mode 를 mega/mega_card 로 두거나 layout 을 row2 로 두면
       휴대폰에서도 대메뉴가 그대로 남아 로고 위로 쏟아진다.
       (실제로 그랬다 — 미디어쿼리 안이니 당연히 이길 거라고 넘겼다) */
    .gthdg2 .gthdg2_gnb,
    .gthdg2.sub_mega .gthdg2_gnb,
    .gthdg2.gthdg2_row2 .gthdg2_gnb { display: none; }

    .gthdg2 .gthdg2_tog { display: block; }

    .gthdg2 .gthdg2_logo img,
    #header.gthdg2.scrolling .gthdg2_logo img {
        max-height: var(--gthdg2-logomo, 34px);
        max-width: var(--gthdg2-logowmo, 170px);
    }

    /* 좁은 화면에서는 왼쪽 햄버거가 전체메뉴 역할을 하므로 중복을 없앤다 */
    .gthdg2 .gthdg2_maptog_wrap,
    .gthdg2 .gthdg2_search_wrap,
    .gthdg2 .gthdg2_year { display: none; }

    /* 스크랩·쪽지·포인트·닉네임은 모바일 전체메뉴 안에서 다룬다 */
    .gthdg2 .gthdg2_meta,
    .gthdg2 .gthdg2_quick { display: none; }

    /* memo_mo 를 켠 쪽지만 남긴다. PHP 가 그 li 에 keep_mo 를 붙인다.
       바로 위 규칙이 a(.gthdg2_quick)를 감추므로, li 만 되살려서는
       아무것도 안 보인다. 안쪽 a 까지 함께 되살려야 한다. */
    .gthdg2 .gthdg2_snb > li.keep_mo { display: block; }
    .gthdg2 .gthdg2_snb > li.keep_mo .gthdg2_quick { display: flex; }

    /* 글자 링크는 모바일 전체메뉴 안에 이미 있으므로 헤더에서는 감춘다 */
    .gthdg2.snb_text .gthdg2_snb > li { display: none; }

    .gthdg2 .gthdg2_ico { width: 36px; height: 36px; }

    /* 모바일 메뉴 버튼만 따로 키운다. 손가락으로 누르는 자리이고,
       여기서 안 보이면 메뉴를 열 방법 자체가 없다. */
    .gthdg2 .gthdg2_mtog {
        width: var(--gthdg2-icoboxmo, 42px);
        height: var(--gthdg2-icoboxmo, 42px);
    }

    .gthdg2 .gthdg2_mtog svg {
        width: var(--gthdg2-icosizemo, 30px);
        height: var(--gthdg2-icosizemo, 30px);
    }

    .gthdg2 .gthdg2_mtog .material-icons {
        font-size: var(--gthdg2-icosizemo, 30px);
    }

    .gthdg2.snb_btn .gthdg2_mytog {
        width: calc(var(--gthdg2-snbbtn, 38px) - 6px);
        height: calc(var(--gthdg2-snbbtn, 38px) - 6px);
        margin-left: 4px;
    }

    .gthdg2 .gthdg2_pop { right: -4px; }

    /* 좁은 화면에서는 회원 메뉴도 오른쪽 끝 정렬로 되돌린다.
       아이콘이 화면 가장자리에 붙어 있어서, 가운데 정렬하면 메뉴
       절반이 화면 밖으로 나간다.
       ★ left 를 auto 로 되돌리는 것을 빠뜨리면 left 와 right 가
         둘 다 잡혀 상자가 그 사이로 늘어난다. */
    .gthdg2 .gthdg2_mymenu {
        --pop-x: 0;
        left: auto;
        right: -4px;
    }

    /* 검색창이 화면 밖으로 나가지 않게 */
    .gthdg2 .gthdg2_searchbox {
        width: calc(100vw - 24px);
        max-width: 300px;
    }

    /* 전체메뉴 버튼을 껐으므로 내려오는 패널도 뜰 일이 없다 */
    .gthdg2_map.is_drop { display: none; }
}


/*───────────────────────────────────────────────────────────────
  13-2. 휴대폰 (500px 이하)

  ★ 이 사이트들의 "모바일" 기준선은 500px 이다.
    테마의 1360px 은 PC 메뉴를 숨기는 지점일 뿐, 501~1360 은
    태블릿·작은 노트북이라 화면이 넉넉하다.

  높이와 로고는 여기서 다시 줄이지 않는다. 거래처들이 원하는 건
  "모바일에서 로고가 잘 보이는 것"이고, 헤더 높이는 header.php 가
  로고 크기에 맞춰 이미 계산해 둔다. 여기서 56px·24px 로 못박으면
  로고를 키워도 다시 작아진다. 줄일 것은 좌우 여백과 보조 아이콘뿐이다.
───────────────────────────────────────────────────────────────*/
@media all and (max-width: 500px) {

    .gthdg2 .gthdg2_bar {
        padding-left: 12px;
        padding-right: 12px;
    }

    .gthdg2 .gthdg2_left { gap: 8px; }

    .gthdg2 .gthdg2_ico { width: 32px; height: 32px; }
    .gthdg2 .gthdg2_ico svg { width: 18px; height: 18px; }

    /* 메뉴 버튼만은 작게 만들지 않는다 */
    .gthdg2 .gthdg2_mtog {
        width: var(--gthdg2-icoboxmo, 42px);
        height: var(--gthdg2-icoboxmo, 42px);
    }

    .gthdg2 .gthdg2_mtog svg {
        width: var(--gthdg2-icosizemo, 30px);
        height: var(--gthdg2-icosizemo, 30px);
    }

    .gthdg2 .gthdg2_mytog { width: 28px; height: 28px; }
    .gthdg2 .gthdg2_mytog svg { width: 18px; height: 18px; }

    .gthdg2_map_in { padding: 110px 20px 70px; }
    .gthdg2_map_lead { margin-bottom: 36px; }
    .gthdg2_map_lead b { font-size: 22px; }
    .gthdg2_map_search { margin-bottom: 30px; }
    .gthdg2_map_list { gap: 20px; }
    .gthdg2_map_1st { font-size: calc(var(--gthdg2-map1st, 20px) * .85); }

    .gthdg2_map_info {
        margin-top: 40px;
        padding-top: 22px;
    }

    /* 좁은 화면에서 한 줄에 하나씩 쌓을 때는 구분선을 감춘다 */
    .gthdg2_map .gthdg2_map_biz { flex-direction: column; align-items: flex-start; }
    .gthdg2_map .gthdg2_map_biz li:not(:last-child)::after { display: none; }
}


/*───────────────────────────────────────────────────────────────
  14. 모션 최소화 설정 존중
───────────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {

    #header.gthdg2,
    .gthdg2 .gthdg2_bar,
    .gthdg2 .gthdg2_logo img,
    .gthdg2 .gthdg2_logo picture,
    .gthdg2 .gthdg2_gnb_li > a,
    .gthdg2 .gthdg2_gnb_li > a::after,
    .gthdg2 .gthdg2_gnb_ind,
    .gthdg2 .gthdg2_tagpill,
    .gthdg2 .gthdg2_gnb,
    .gthdg2.sub_megacol .gthdg2_gnb::before,
    .gthdg2.sub_megacol .gthdg2_gnb_li,
    .gthdg2.sub_megacol .gthdg2_mega_col,
    .gthdg2.sub_megacol.mcol_head .gthdg2_gnb_li > a::after,
    .gthdg2 .gthdg2_sub,
    .gthdg2 .gthdg2_pop,
    .gthdg2 .gthdg2_ico,
    .gthdg2 .gthdg2_txt,
    .gthdg2 .gthdg2_nick,
    .gthdg2 .gthdg2_point,
    .gthdg2 .gthdg2_mytog,
    .gthdg2 .gthdg2_mega,
    .gthdg2 .gthdg2_mega_1st,
    .gthdg2 .gthdg2_mega_ico,
    .gthdg2 .gthdg2_mega_col li a,
    .gthdg2_map,
    .gthdg2_map_1st,
    .gthdg2_map_list ul a,
    .gthdg2_map_sns img {
        transition: none;
    }
}