@charset "utf-8";

/*───────────────────────────────────────────────────────────────
  ONWEB 리빌더 헤더 · 투명 오버레이형 · 텍스트 유틸 (gt_hd_over2) · style.css
  v1.0.0 / 2026-08-30 / ONWEB

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


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

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

/* 투명(최상단) 상태 */
.gthdov2.gthdov2_over:not(.scrolling) {
    --gthdov2-fg     : #ffffff;
    --gthdov2-fg-dim : rgba(255, 255, 255, .72);
    --gthdov2-line   : rgba(255, 255, 255, .16);
    --gthdov2-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.gthdov2 와 특이도가 같은데(둘 다 1,1,0) 소스가
     뒤라서 이긴다. 뒤엣것은 특이도부터 더 높다.
     그래서 !important 없이는 투명 헤더가 흰 배경으로 덮인다.
     (실제로 밟았다 — 오버레이가 동작하는데도 헤더만 흰색으로 나왔다)

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

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

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

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

/* 드롭다운이 헤더 밖으로 나가야 하므로 잘림을 푼다 */
#header.gthdov2,
#header.gthdov2 .gthdov2_bar,
#header.gthdov2 .gthdov2_gnb {
    overflow: visible;
}


/*───────────────────────────────────────────────────────────────
  3. 가로 배치
  로고 길이가 달라져도 GNB 가 정확히 가운데 오도록 1fr auto 1fr 로
  나눈다. 30% / 40% / 30% 같은 비율은 좌우 내용 길이가 다르면
  가운데가 어긋난다.
───────────────────────────────────────────────────────────────*/
.gthdov2 .gthdov2_bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;

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

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

    transition: height .35s ease;
}

#header.gthdov2.scrolling .gthdov2_bar {
    height: var(--gthdov2-hs, 76px);
}

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

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

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

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


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

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

.gthdov2 .gthdov2_logo {
    position: relative;
    display: block;
    line-height: 0;
}

.gthdov2 .gthdov2_logo picture {
    display: block;
    transition: opacity .35s ease;
}

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

.gthdov2 .gthdov2_logo .lg_w {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.gthdov2.gthdov2_over:not(.scrolling) .gthdov2_logo .lg_w { opacity: 1; }
.gthdov2.gthdov2_over:not(.scrolling) .gthdov2_logo .lg_c { opacity: 0; }

#header.gthdov2.scrolling .gthdov2_logo img {
    max-height: var(--gthdov2-logos, 32px);
}


/*───────────────────────────────────────────────────────────────
  5. PC GNB
───────────────────────────────────────────────────────────────*/
.gthdov2 .gthdov2_gnb_ul {
    display: flex;
    align-items: center;
    gap: var(--gthdov2-gap, 46px);

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

.gthdov2 .gthdov2_gnb_li {
    position: relative;
    float: none;
    list-style: none;
}

.gthdov2 .gthdov2_gnb_li > a {
    position: relative;
    display: block;
    padding-top: 8px;
    padding-bottom: 8px;

    font-size: var(--gthdov2-gnb, 16px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: var(--gthdov2-track, 0px);
    white-space: nowrap;
    color: var(--gthdov2-fg);

    transition: color .25s ease;
}

/* 밑줄 — 지금 보고 있는 메뉴와 마우스를 올린 메뉴에 함께 나온다 */
.gthdov2 .gthdov2_gnb_li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;

    background: var(--gthdov2-point);
    transform: scaleX(0);
    transform-origin: center center;
    transition: transform .3s ease;
}

.gthdov2 .gthdov2_gnb_li:hover > a::after,
.gthdov2 .gthdov2_gnb_li:focus-within > a::after,
.gthdov2 .gthdov2_gnb_li.is_on > a::after {
    transform: scaleX(1);
}

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


/*── 드롭다운 ───────────────────────────────────────────────*/
.gthdov2 .gthdov2_sub {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 5;

    min-width: var(--gthdov2-submin, 190px);
    margin-top: 12px;
    padding-top: 12px;
    padding-bottom: 12px;

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

    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

/* 대메뉴와 드롭다운 사이 12px 틈에서 마우스가 빠지지 않도록
   보이지 않는 다리를 놓는다. */
.gthdov2 .gthdov2_sub::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

.gthdov2 .gthdov2_gnb_li:hover > .gthdov2_sub,
.gthdov2 .gthdov2_gnb_li:focus-within > .gthdov2_sub {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* 양 끝 메뉴는 가운데 정렬하면 화면 밖으로 나갈 수 있다.
   첫 항목은 왼쪽에, 마지막 항목은 오른쪽에 붙인다. */
.gthdov2 .gthdov2_gnb_li:first-child > .gthdov2_sub {
    left: 0;
    transform: translate(0, 8px);
}

.gthdov2 .gthdov2_gnb_li:last-child > .gthdov2_sub {
    left: auto;
    right: 0;
    transform: translate(0, 8px);
}

.gthdov2 .gthdov2_gnb_li:first-child:hover > .gthdov2_sub,
.gthdov2 .gthdov2_gnb_li:first-child:focus-within > .gthdov2_sub,
.gthdov2 .gthdov2_gnb_li:last-child:hover > .gthdov2_sub,
.gthdov2 .gthdov2_gnb_li:last-child:focus-within > .gthdov2_sub {
    transform: translate(0, 0);
}

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

.gthdov2 .gthdov2_sub li {
    float: none;
    list-style: none;
}

.gthdov2 .gthdov2_sub a {
    display: block;
    padding: 9px 22px;

    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    color: #5a5f66;

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

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


/*───────────────────────────────────────────────────────────────
  6. 오른쪽 아이콘 — 전체메뉴 · 검색 · 회원
  gt_hd_C 의 구성을 따르되 아이콘은 인라인 SVG 로 넣는다.
  (gt_hd_C 는 Material Icons 폰트에 기대는데, 그 폰트가 없는
   테마에서는 아이콘 자리에 글자가 그대로 보인다)
───────────────────────────────────────────────────────────────*/
.gthdov2 .gthdov2_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(--gthdov2-fg);

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

.gthdov2 .gthdov2_ico:hover,
.gthdov2 .gthdov2_ico:focus { opacity: .62; }

.gthdov2 .gthdov2_ico svg {
    display: block;
    width: 20px;
    height: 20px;
}

.gthdov2 .gthdov2_snb > li { position: relative; }


/*── 3줄 메뉴 아이콘 (모바일 버튼 · PC 전체메뉴 공용) ───────
   색은 클래스로만 받는다. 강조컬러를 인라인 변수로 내려보내면
   아래 var(--rb-point, ...) 대체 경로가 함께 막힌다. */
/* 버튼 상자는 아이콘보다 항상 크게. PHP 가 아이콘 크기에 맞춰
   --gthdov2-icobox 를 계산해 내려보낸다. 고정 40px 로 두면 아이콘을
   키웠을 때 삐져나온다. */
.gthdov2 .gthdov2_mtog,
.gthdov2 .gthdov2_maptog {
    width: var(--gthdov2-icobox, 42px);
    height: var(--gthdov2-icobox, 42px);
}

.gthdov2 .gthdov2_mtog svg,
.gthdov2 .gthdov2_maptog svg {
    width: var(--gthdov2-icosize, 28px);
    height: var(--gthdov2-icosize, 28px);
}

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

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

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

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

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

.gthdov2.gthdov2_over:not(.scrolling) .gthdov2_ico.has_chip {
    --gthdov2-chip: rgba(255, 255, 255, .90);
}

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


/*── 전체메뉴 (3줄 아이콘) ──────────────────────────────────
   색은 위쪽 ico_point / ico_auto / ico_fixed 클래스가 정한다.
   (예전에는 여기서 강조컬러로 못박아 두어, 설정의 ico_color 를
    바꿔도 이 버튼만 안 바뀌었다) */
.gthdov2 .gthdov2_maptog .ic_close { display: none; }
.gthdov2 .gthdov2_maptog.is_on .ic_open  { display: none; }
.gthdov2 .gthdov2_maptog.is_on .ic_close { display: block; }

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


/*── 공통 드롭다운 카드 ─────────────────────────────────────*/
.gthdov2 .gthdov2_pop {
    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: translateY(8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}

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

.gthdov2 .gthdov2_pop.is_on {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/*── 검색 ───────────────────────────────────────────────────*/
.gthdov2 .gthdov2_searchbox { width: 300px; }

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

.gthdov2 .gthdov2_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;
}

.gthdov2 .gthdov2_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(--gthdov2-point);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

.gthdov2 .gthdov2_searchbox button svg {
    display: block;
    width: 17px;
    height: 17px;
}


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

.gthdov2.gthdov2_over:not(.scrolling) .gthdov2_mytog { color: #ffffff; }

.gthdov2 .gthdov2_mytog svg {
    width: 22px;
    height: 22px;
}

.gthdov2 .gthdov2_mymenu { min-width: 150px; }

.gthdov2 .gthdov2_mymenu a {
    display: block;
    padding: 10px 20px;

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

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

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

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


/*── 연도 배지 ──────────────────────────────────────────────
   테마의 .beta_ico 는 배경색이 #AA20FF 로 하드코딩되어 있어
   테마컬러를 따라가지 않는다. 전용 클래스로 새로 만든다. */
.gthdov2 .gthdov2_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(--gthdov2-point);
    border-radius: 5px;
}


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

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

.gthdov2 .gthdov2_mtog .ic_close { display: none; }
.gthdov2 .gthdov2_mtog.is_on .ic_open  { display: none; }
.gthdov2 .gthdov2_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; }
}


/*───────────────────────────────────────────────────────────────
  7. 전체화면 메뉴
  #header 바깥에 있으므로 헤더의 인라인 변수를 물려받지 못한다.
  배경색은 sitemap.php 가 자기 요소에 직접 내려보낸다.
───────────────────────────────────────────────────────────────*/
.gthdov2_map {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9800;

    overflow-y: auto;

    /* 배경색은 sitemap.php 가 rgba 로 계산해 내려보낸다.
       투명도를 요소 자체의 opacity 로 주면 안쪽 글자까지 함께 흐려지므로,
       배경색의 알파값으로만 준다. */
    background-color: var(--gthdov2-mapbg, rgba(23, 24, 26, .94));
    -webkit-backdrop-filter: blur(var(--gthdov2-mapblur, 6px));
    backdrop-filter: blur(var(--gthdov2-mapblur, 6px));

    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility .4s ease;
}

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

.gthdov2_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;
}

.gthdov2_map_in {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding: 180px 40px 100px;
}

.gthdov2_map_lead {
    margin-top: 0;
    margin-bottom: 60px;
}

.gthdov2_map_lead span {
    display: block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .24em;
    color: var(--rb-point, var(--point-color, #ffffff));
}

.gthdov2_map_lead b {
    display: block;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.4;
    color: #ffffff;
}

.gthdov2_map_list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 28px;

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

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

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

    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.gthdov2_map_list > li.is_on .gthdov2_map_1st {
    color: var(--rb-point, var(--point-color, #ffffff));
}

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

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

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

    font-size: 15px;
    color: rgba(255, 255, 255, .60);
    transition: color .2s ease, padding-left .2s ease;
}

.gthdov2_map_list ul a:hover,
.gthdov2_map_list ul a:focus,
.gthdov2_map_list ul a.is_on {
    color: #ffffff;
    padding-left: 6px;
}


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

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


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

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

    .gthdov2 .gthdov2_bar {
        padding-left: 24px;
        padding-right: 24px;
    }

    .gthdov2 .gthdov2_gnb_ul { gap: 28px; }

    .gthdov2 .gthdov2_gnb_li > a { font-size: 15px; }

    .gthdov2 .gthdov2_maptog_wrap {
        margin-left: 12px;
        padding-left: 12px;
    }
}


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

    .gthdov2 .gthdov2_bar {
        display: flex;
        align-items: center;
        justify-content: space-between;

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

    #header.gthdov2.scrolling .gthdov2_bar {
        height: var(--gthdov2-hmo, 64px);
    }

    .gthdov2 .gthdov2_gnb { display: none; }

    .gthdov2 .gthdov2_tog { display: block; }

    .gthdov2 .gthdov2_logo img,
    #header.gthdov2.scrolling .gthdov2_logo img {
        max-height: var(--gthdov2-logomo, 28px);
        max-width: var(--gthdov2-logowmo, 150px);
    }

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

    .gthdov2 .gthdov2_ico {
        width: 36px;
        height: 36px;
    }

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

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

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

    .gthdov2 .gthdov2_mytog {
        width: 32px;
        height: 32px;
    }

    .gthdov2 .gthdov2_pop { right: -4px; }

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


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

  ★ 이 사이트들의 "모바일" 기준선은 500px 이다.
    테마의 1360px 은 PC 메뉴를 숨기는 지점일 뿐, 그 아래로도
    501~1360 은 태블릿·작은 노트북이라 화면이 넉넉하다.
    헤더 높이·로고·아이콘을 실제로 줄여야 하는 구간은 여기다.
───────────────────────────────────────────────────────────────*/
@media all and (max-width: 500px) {

    /* 높이와 로고는 여기서 다시 줄이지 않는다.
       거래처들이 원하는 건 "모바일에서 로고가 잘 보이는 것"이고,
       헤더 높이는 header.php 가 로고 크기에 맞춰 이미 계산해 둔다.
       여기서 56px·24px 로 못박으면 로고를 키워도 다시 작아진다.
       좁아진 화면에서 줄일 것은 좌우 여백과 보조 아이콘뿐이다. */
    .gthdov2 .gthdov2_bar {
        padding-left: 12px;
        padding-right: 12px;
    }

    .gthdov2 .gthdov2_left { gap: 8px; }

    .gthdov2 .gthdov2_ico {
        width: 32px;
        height: 32px;
    }

    .gthdov2 .gthdov2_ico svg {
        width: 18px;
        height: 18px;
    }

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

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

    .gthdov2 .gthdov2_mytog {
        width: 28px;
        height: 28px;
    }

    .gthdov2 .gthdov2_mytog svg {
        width: 18px;
        height: 18px;
    }

    .gthdov2_map_in { padding: 90px 16px 60px; }
    .gthdov2_map_lead b { font-size: 19px; }

    .gthdov2_map_in { padding: 110px 20px 70px; }
    .gthdov2_map_lead { margin-bottom: 36px; }
    .gthdov2_map_lead b { font-size: 22px; }
    .gthdov2_map_list { gap: 20px; }
    .gthdov2_map_1st { font-size: 17px; }
}


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

    #header.gthdov2,
    .gthdov2 .gthdov2_bar,
    .gthdov2 .gthdov2_logo img,
    .gthdov2 .gthdov2_logo picture,
    .gthdov2 .gthdov2_gnb_li > a,
    .gthdov2 .gthdov2_gnb_li > a::after,
    .gthdov2 .gthdov2_sub,
    .gthdov2 .gthdov2_pop,
    .gthdov2 .gthdov2_ico,
    .gthdov2_map,
    .gthdov2_map_list ul a {
        transition: none;
    }
}


/*───────────────────────────────────────────────────────────────
  10. gt_hd_over2 고유 — 텍스트 유틸 · 메가패널 · 실선 끄기

  아래 규칙은 파일 맨 끝에 둔다. 위쪽 8-1(모바일) 블록보다 뒤이지만
  새 선택자뿐이라 충돌하지 않고, 필요한 화면 크기 대응은 이 절 안에서
  스스로 처리한다. (앞 블록에 끼워 넣으면 다음에 gt_hd_over1 의
  수정분을 옮겨 올 때 대조가 어려워진다)
───────────────────────────────────────────────────────────────*/

/*── 대메뉴 굵기 — 설정값을 따른다 ──────────────────────────
   위쪽 5절의 font-weight:500 과 특이도가 같고 소스가 뒤라서 이긴다. */
.gthdov2 .gthdov2_gnb_li > a {
    font-weight: var(--gthdov2-gnbw, 500);
}


/*── 투명 상태에서 실선을 긋지 않는다 ───────────────────────
   #header.gthdov2 의 border-bottom 에 !important 가 걸려 있으므로
   (리빌더 set.header.css 를 이기기 위한 것이다) 여기서도 같은
   강도로 되돌려야 한다. 흰 배경으로 바뀐 뒤에는 원래대로
   그림자가 경계를 만든다. */
#header.gthdov2.no_line.gthdov2_over:not(.scrolling) {
    border-bottom-color: transparent !important;
}


/*───────────────────────────────────────────────────────────────
  10-1. 오른쪽 유틸 — 아이콘 + 글자 링크
───────────────────────────────────────────────────────────────*/
.gthdov2.snb_text .gthdov2_snb {
    gap: var(--gthdov2-snbgap, 22px);
}

.gthdov2 .gthdov2_txt {
    display: inline-flex;
    align-items: center;
    gap: 6px;

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

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

.gthdov2 .gthdov2_txt:hover,
.gthdov2 .gthdov2_txt:focus {
    opacity: .62;
}

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

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

.gthdov2.gthdov2_over:not(.scrolling) .gthdov2_txtico {
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .35));
}

/* 글자 링크 방식일 때 전체메뉴·검색 아이콘은 글자보다 왼쪽에 서고,
   그 사이에만 세로 구분선을 둔다. */
.gthdov2.snb_text .gthdov2_maptog_wrap + li .gthdov2_txt,
.gthdov2.snb_text .gthdov2_search_wrap + li .gthdov2_txt {
    padding-left: var(--gthdov2-snbgap, 22px);
    border-left: 1px solid var(--gthdov2-line);
}


/*───────────────────────────────────────────────────────────────
  10-2. 메가패널 (sub_mode = 'mega')

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

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

.gthdov2 .gthdov2_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;
}

.gthdov2.sub_mega .gthdov2_gnb:hover .gthdov2_mega,
.gthdov2.sub_mega .gthdov2_gnb:focus-within .gthdov2_mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

.gthdov2 .gthdov2_mega_in {
    display: flex;
    align-items: flex-start;
    gap: 24px;

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

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

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

.gthdov2 .gthdov2_mega_1st {
    display: block;
    padding-bottom: 14px;
    margin-bottom: 14px;

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

    transition: color .2s ease;
}

.gthdov2 .gthdov2_mega_col.is_on .gthdov2_mega_1st,
.gthdov2 .gthdov2_mega_col.is_hot .gthdov2_mega_1st {
    color: var(--gthdov2-point);
}

.gthdov2 .gthdov2_mega_col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gthdov2 .gthdov2_mega_col li {
    float: none;
    list-style: none;
}

.gthdov2 .gthdov2_mega_col li a {
    display: block;
    padding-top: 7px;
    padding-bottom: 7px;

    font-size: 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;
}

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


/*───────────────────────────────────────────────────────────────
  10-3. 화면 크기별
───────────────────────────────────────────────────────────────*/
/* 1361~1560 은 로고 + 대메뉴 + 유틸이 한 줄에 겨우 들어가는 구간이다.
   글자 링크를 한 단계 줄여 대메뉴 간격을 지킨다. */
@media all and (min-width: 1361px) and (max-width: 1560px) {

    .gthdov2.snb_text .gthdov2_snb { gap: 14px; }

    .gthdov2 .gthdov2_txt { font-size: 13px; }

    .gthdov2.snb_text .gthdov2_maptog_wrap + li .gthdov2_txt,
    .gthdov2.snb_text .gthdov2_search_wrap + li .gthdov2_txt {
        padding-left: 14px;
    }
}

/* 테마가 모바일 메뉴로 넘어가는 구간.
   로그인·회원가입은 모바일 전체메뉴 안에 이미 있으므로 헤더에서는
   감춘다. 왼쪽 햄버거 하나만 남는 참고 디자인과 같은 구성이다. */
@media all and (max-width: 1360px) {

    .gthdov2.snb_text .gthdov2_snb > li { display: none; }

    .gthdov2 .gthdov2_mega { display: none; }
}


/*───────────────────────────────────────────────────────────────
  10-4. 모션 최소화 설정 존중 (10절에서 새로 생긴 것)
───────────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {

    .gthdov2 .gthdov2_txt,
    .gthdov2 .gthdov2_mega,
    .gthdov2 .gthdov2_mega_1st,
    .gthdov2 .gthdov2_mega_col li a {
        transition: none;
    }
}


/*───────────────────────────────────────────────────────────────
  11. 회원 버튼 · 추가 아이콘 (gt_hd_C / gt_hd_D 구성)

  이 절도 파일 맨 끝에 둔다. 앞 절과 같은 이유다 —
  새 선택자뿐이라 위쪽 블록과 충돌하지 않고, 화면 크기 대응은
  이 절 안에서 스스로 처리한다.
───────────────────────────────────────────────────────────────*/

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

/* 안 읽은 쪽지 개수.
   숫자가 두 자리 이상이면 알약 모양으로 늘어나야 하므로
   width 를 고정하지 않고 min-width + 좌우 padding 으로 잡는다. */
.gthdov2 .gthdov2_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(--gthdov2-point);
    border-radius: 8px;
}

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


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

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

.gthdov2 .gthdov2_nick  { color: var(--gthdov2-fg); }

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

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

.gthdov2.gthdov2_over:not(.scrolling) .gthdov2_nick {
    text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}

.gthdov2 .gthdov2_nick:hover,
.gthdov2 .gthdov2_point:hover { opacity: .65; }


/*── 회원 버튼 (snb_style = 'btn') ──────────────────────────
   원형 테두리 안에 사람 아이콘 또는 프로필 사진.
   참고 이미지의 오른쪽 끝 버튼이다. */
.gthdov2.snb_btn .gthdov2_mytog {
    box-sizing: border-box;
    width: var(--gthdov2-snbbtn, 40px);
    height: var(--gthdov2-snbbtn, 40px);
    margin-left: 8px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
}

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

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

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

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

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


/*───────────────────────────────────────────────────────────────
  12. 드롭다운 카드 (sub_card)

  왼쪽 아이콘 블록 + 오른쪽 (주메뉴 이름 / 구분선 / 하위 메뉴).

  ★ 이 규칙은 .gthdov2_sub 의 기본 규칙(3절)보다 뒤에 있어야 한다.
    특이도가 같은 자리가 있어서 소스 순서로 이긴다.
───────────────────────────────────────────────────────────────*/
.gthdov2 .gthdov2_sub.is_card {
    display: flex;
    align-items: flex-start;
    gap: 20px;

    min-width: 0;                     /* 아래 폭 계산이 이기도록 풀어 준다 */
    padding: 22px;
    border-radius: var(--gthdov2-subrad, 16px);
}

/* 카드 위쪽 강조컬러 선.
   border-top 으로 그리면 border-radius 안쪽에서 색이 번져 보인다.
   ::before 로 얹어 모서리 둥글기를 그대로 따라가게 한다. */
.gthdov2.sub_topline .gthdov2_sub.is_card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;

    background-color: var(--gthdov2-point);
    border-top-left-radius: var(--gthdov2-subrad, 16px);
    border-top-right-radius: var(--gthdov2-subrad, 16px);
}

/*── 아이콘 블록 ────────────────────────────────────────────*/
.gthdov2 .gthdov2_sub_ico {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;

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

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

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

/*── 오른쪽 본문 ────────────────────────────────────────────*/
.gthdov2 .gthdov2_sub_body {
    flex: 1 1 auto;
    min-width: var(--gthdov2-submin, 190px);
}

.gthdov2 .gthdov2_sub_ttl {
    display: block;
    padding-bottom: 12px;
    margin-bottom: 10px;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    color: #25282b;

    /* 참고 디자인의 점선 구분선 */
    border-bottom: 1px dashed rgba(0, 0, 0, .16);
}

/* 카드 안에서는 목록 좌우 여백을 아이콘 쪽에 맞춰 다시 잡는다.
   3절의 .gthdov2_sub a 는 좌우 22px 을 쓰는데, 카드는 이미
   바깥에서 22px 을 줬으므로 그대로 두면 두 배가 된다. */
.gthdov2 .gthdov2_sub.is_card a {
    padding-left: 14px;
    padding-right: 14px;
}

/*───────────────────────────────────────────────────────────────
  12-1. 지금 보고 있는 하위 메뉴 (sub_pill)

  카드(is_card)를 쓰든 안 쓰든 똑같이 동작해야 한다.
  그래서 .is_card 를 선택자에 넣지 않는다 — 넣으면 기본 상태
  (카드 꺼짐)에서 알약이 아예 안 나온다.

  알약이 카드 가장자리에 딱 붙지 않도록 목록에 좌우 여백을 주고,
  글자 위치는 그대로 두려고 a 의 좌우 패딩을 그만큼 줄인다.
    카드 밖  ul 10 + a 12 = 22   (기본 규칙의 22 와 같다)
    카드 안  ul  0 + a 14 = 14   (카드가 이미 22 를 갖고 있다)
───────────────────────────────────────────────────────────────*/
/* ★ 여백은 sub_pill 과 sub_hover 중 "하나라도" 켜져 있으면 준다.
     둘 중 어느 쪽이든 배경이 칠해지는 순간 가장자리에 붙기 때문이다.
     sub_pill 에만 걸어 두면, 알약을 끄고 호버만 켠 조합에서
     호버 배경이 카드 좌우 끝에 딱 붙는다. */
.gthdov2.sub_pill .gthdov2_sub_body > ul,
.gthdov2.sub_hover .gthdov2_sub_body > ul {
    padding-left: 10px;
    padding-right: 10px;
}

.gthdov2.sub_pill .gthdov2_sub a,
.gthdov2.sub_hover .gthdov2_sub a {
    padding-left: 12px;
    padding-right: 12px;
}

/* 카드 안에서는 바깥 여백을 이미 카드가 갖고 있다 */
.gthdov2.sub_pill .gthdov2_sub.is_card .gthdov2_sub_body > ul,
.gthdov2.sub_hover .gthdov2_sub.is_card .gthdov2_sub_body > ul {
    padding-left: 0;
    padding-right: 0;
}

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

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

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

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

/* 메가패널에도 같은 표시를 준다.
   pc_rbmenu_over2.php 가 드롭다운과 같은 규칙으로 is_on 을 붙인다. */
.gthdov2.sub_pill .gthdov2_mega_col li a.is_on {
    padding-left: 12px;
    padding-right: 12px;

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

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

/* sub_hover 를 끈 상태에서도 현재 메뉴 위 호버가 뒤집히지 않게.

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

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

/* sub_pill 만 켜고 sub_hover 는 껐을 때, 알약이 열 가장자리에
   붙지 않도록 목록을 12px 되돌린다. (sub_hover 를 켜면 12-2 가
   같은 값을 다시 주므로 겹쳐도 결과가 같다) */
.gthdov2.sub_pill .gthdov2_mega_col ul {
    margin-left: -12px;
    margin-right: -12px;
}

.gthdov2.sub_pill .gthdov2_mega_col li a {
    padding-left: 12px;
    padding-right: 12px;
}


/*───────────────────────────────────────────────────────────────
  12-2. 마우스를 올린 하위 메뉴 (sub_hover)

  지금 보고 있는 메뉴(12-1)와 같은 모양으로 만든다.
  눈이 익혀야 할 규칙이 하나로 줄어든다.

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

  마지막 줄이 중요하다. 지금 보고 있는 메뉴 위에 마우스를 올렸을 때
  모양이 흔들리지 않아야 "여기가 현재 위치" 라는 신호가 유지된다.
───────────────────────────────────────────────────────────────*/
.gthdov2.sub_hover .gthdov2_sub a:hover,
.gthdov2.sub_hover .gthdov2_sub a:focus {
    color: #ffffff;
    background-color: var(--gthdov2-point);
    border-radius: 8px;
}

/* 새 글 아이콘은 여기서도 뒤집어야 한다.
   안 하면 강조컬러 배경 위에 강조컬러 배지가 얹혀 사라진다. */
.gthdov2.sub_hover .gthdov2_sub a:hover .gnb_new_ico,
.gthdov2.sub_hover .gthdov2_sub a:focus .gnb_new_ico {
    color: var(--gthdov2-point) !important;
    background-color: #ffffff !important;
}

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

   기본 호버(12절)는 padding-left 를 5px 밀어 글자를 움직이는데,
   배경을 칠하면 그 움직임이 배경까지 함께 흔들어 산만하다.
   채우는 쪽을 쓸 때는 밀기를 되돌린다. */
.gthdov2.sub_hover .gthdov2_mega_col li a:hover,
.gthdov2.sub_hover .gthdov2_mega_col li a:focus {
    padding-left: 12px;
    padding-right: 12px;

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

/* 밀기를 없앤 만큼 평상시에도 같은 좌우 여백을 줘야
   마우스를 올릴 때 글자가 옆으로 튀지 않는다. */
.gthdov2.sub_hover .gthdov2_mega_col li a {
    padding-left: 12px;
    padding-right: 12px;
}

/* 그만큼 열 전체를 왼쪽으로 되돌려 대메뉴와 세로선을 맞춘다 */
.gthdov2.sub_hover .gthdov2_mega_col ul {
    margin-left: -12px;
    margin-right: -12px;
}

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

/* 지금 보고 있는 메뉴는 메가패널에서도 유지된다 */
.gthdov2.sub_pill.sub_hover .gthdov2_mega_col li a.is_on:hover,
.gthdov2.sub_pill.sub_hover .gthdov2_mega_col li a.is_on:focus {
    opacity: .92;
}


/*───────────────────────────────────────────────────────────────
  13. 화면 크기별 (11 · 12 절에서 새로 생긴 것)
───────────────────────────────────────────────────────────────*/
/* 1361~1560 은 로고 + 대메뉴 + 유틸이 한 줄에 겨우 들어가는 구간이다.
   닉네임을 먼저 접는다 — 포인트·아이콘보다 자리를 많이 차지하고
   없어도 아쉬움이 가장 적다. */
@media all and (min-width: 1361px) and (max-width: 1560px) {

    .gthdov2 .gthdov2_nick { display: none; }

    .gthdov2 .gthdov2_meta { margin-left: 4px; }

    .gthdov2 .gthdov2_point { font-size: 13px; }

    .gthdov2.snb_btn .gthdov2_mytog {
        width: calc(var(--gthdov2-snbbtn, 40px) - 4px);
        height: calc(var(--gthdov2-snbbtn, 40px) - 4px);
        margin-left: 4px;
    }

    .gthdov2 .gthdov2_sub.is_card { gap: 14px; padding: 18px; }

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

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

/* 테마가 모바일 메뉴로 넘어가는 구간.
   스크랩·쪽지·포인트는 모바일 전체메뉴 안에서 다루므로 헤더에서는
   감춘다. 회원 버튼만 남겨 로그인 여부를 알 수 있게 한다.

   ★ 10-3 절의 `.gthdov2.snb_text .gthdov2_snb > li { display:none }`
     과 짝이 되는 규칙이다. 그쪽은 글자 링크 방식일 때만 걸린다. */
@media all and (max-width: 1360px) {

    .gthdov2 .gthdov2_meta { display: none; }

    .gthdov2 .gthdov2_quick { display: none; }

    /* memo_mo 를 켠 쪽지만 남긴다. PHP 가 그 li 에 keep_mo 를 붙인다.

       바로 위 규칙이 a(.gthdov2_quick)를 감추므로, li 만 되살려서는
       아무것도 안 보인다. 안쪽 a 까지 함께 되살려야 한다. */
    .gthdov2 .gthdov2_snb > li.keep_mo { display: block; }

    .gthdov2 .gthdov2_snb > li.keep_mo .gthdov2_quick { display: flex; }

    .gthdov2.snb_btn .gthdov2_mytog {
        width: calc(var(--gthdov2-snbbtn, 40px) - 6px);
        height: calc(var(--gthdov2-snbbtn, 40px) - 6px);
        margin-left: 4px;
    }
}


/*───────────────────────────────────────────────────────────────
  14. 모션 최소화 설정 존중 (11 · 12 절에서 새로 생긴 것)
───────────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {

    .gthdov2 .gthdov2_nick,
    .gthdov2 .gthdov2_point,
    .gthdov2 .gthdov2_mytog {
        transition: none;
    }
}