@charset "utf-8";

/*───────────────────────────────────────────────────────────────
  ONWEB 리빌더 헤더 · 로고 중앙 2행 (gt_hd_C_1) · style.css
  v2.0.0 / 2026-09-05 / ONWEB

  ── 특이도 규칙 ──────────────────────────────────────────────
     gt_hd_core/core.css   .gthd .x           (0,2,0)
     이 파일                .gthd.gthd_C1 .x   (0,3,0)  ← 항상 이긴다

  · 수치는 header.php 가 인라인 변수로 내려보낸다.
  · 강조컬러는 인라인으로 받지 않는다(CSS 가 var 로 찾아간다).
  · 브레이크포인트는 1360px. PC 대메뉴 숨김은 core.css 담당.
  · 전체메뉴 CSS 는 core.css 10절에 공용으로 있다.
───────────────────────────────────────────────────────────────*/

.gthd.gthd_C1 {
    --gthd-skin-ver: 3;

    --c1-fg    : #25282b;
    --c1-dim   : rgba(37, 40, 43, .72);
    --c1-point : var(--rb-point, var(--point-color, #25282b));

    /* 따라다니는 물방울의 둥글기 — .c1_list a 와 같은 값 */
    --gthd-subblobr: 6px;
}


/*───────────────────────────────────────────────────────────────
  1. 1행 — 보조정보 · 로고 · SNS/로그인

  ★ 좌우 칸을 1fr, 가운데를 auto 로 둔다.
    좌우 내용 길이가 달라도 로고가 정확히 화면 가운데에 온다.
    30%/40%/30% 같은 고정 비율로는 한쪽이 길어지는 순간 어긋난다.
───────────────────────────────────────────────────────────────*/
.gthd.gthd_C1 .c1_row1 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.gthd.gthd_C1 .c1_side { display: flex; align-items: center; min-width: 0; }
.gthd.gthd_C1 .c1_side_l { justify-content: flex-start; }
.gthd.gthd_C1 .c1_side_r { justify-content: flex-end; }

.gthd.gthd_C1 .c1_logo { display: flex; align-items: center; justify-content: center; }

/* 유틸 줄이 이 헤더에서는 두 군데다 — core 의 margin-left:auto 를 푼다 */
.gthd.gthd_C1 .c1_row1 .gthd_snb { margin-left: 0; }

/* 1행 높이는 core 가 .gthd_bar 로 잡는다(h / h_scroll).
   scroll 하면 로고가 함께 작아진다(logo_h_scroll). */


/*───────────────────────────────────────────────────────────────
  2. 2행 — 대메뉴 + 오른쪽 끝 전체메뉴
───────────────────────────────────────────────────────────────*/
.gthd.gthd_C1 .c1_row2 {
    width: 100%;
    height: var(--gthd-h2, 56px);
    transition: height .3s ease, background-color .3s ease;
}
.gthd.gthd_C1.scrolling .c1_row2 { height: var(--gthd-h2s, 48px); }

.gthd.gthd_C1.r2bg_tint .c1_row2 { background: rgba(0, 0, 0, .028); }
.gthd.gthd_C1.r2bg_none .c1_row2 { background: transparent; }
.gthd.gthd_C1.r2bg_line .c1_row2 { background: transparent; }
.gthd.gthd_C1.r2_line   .c1_row2 { border-top: 1px solid var(--gthd-line); }

/* ★ position:relative 는 여기(안쪽 상자)에만 준다.
     전체메뉴 버튼을 오른쪽 끝에 절대배치해야 대메뉴가 "화면 가운데"
     에 정확히 온다. 버튼을 흐름 안에 두면 그 폭만큼 메뉴가 왼쪽으로
     밀린다.
     드롭다운은 li 를 기준으로 잡으므로 이 relative 와 무관하다. */
.gthd.gthd_C1 .c1_row2_in {
    position: relative;
    display: flex;
    align-items: stretch;   /* 대메뉴가 줄 높이를 꽉 채워 클릭 영역이 넓어진다 */
    justify-content: center;

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

.gthd.gthd_C1 .c1_row2_in .gthd_snb {
    position: absolute;
    right: var(--gthd-side, 40px);
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
}

/* 스크롤하면 로고 줄을 접는 설정(shrink).
   ★ 기본은 꺼짐 — 로고가 사라지면 "여기가 어느 사이트인지" 단서가
     없어진다. 대신 로고가 작아지는 것으로 충분한 경우가 많다. */
.gthd.gthd_C1.c2_shrink.scrolling .c1_row1 {
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}


/*───────────────────────────────────────────────────────────────
  3. 대메뉴 (알약 · 밑줄 · 점 — 모양은 core 의 gnb_* 가 정한다)
───────────────────────────────────────────────────────────────*/
.gthd.gthd_C1 .c1_gnb { height: 100%; }

.gthd.gthd_C1 .c1_ul {
    display: flex;
    align-items: stretch;
    gap: var(--gthd-gap, 8px);
    height: 100%;
}

.gthd.gthd_C1 .c1_li {
    position: relative;   /* 카드의 기준. nav 나 ul 이 아니라 li 다 */
    display: flex;
    align-items: center;
}

.gthd.gthd_C1 .c1_a {
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: var(--gthd-gnbpad, 18px);
    padding-right: var(--gthd-gnbpad, 18px);

    color: var(--gthd-fg);
    white-space: nowrap;
    transition: color .2s ease;
}

.gthd.gthd_C1 .c1_name {
    position: relative;
    display: inline-block;
    font-size: var(--gthd-gnb, 17px);
    font-weight: var(--gthd-gnbw, 700);
    letter-spacing: var(--gthd-track, 0px);
    line-height: 1.25;
}

/* 표시(밑줄 · 점). 알약(pill)일 때는 core 가 이 가상요소를 끈다. */
.gthd.gthd_C1 .c1_name::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: calc(-1 * var(--gthd-markgap, 8px));
    height: 0;
    border-radius: 0;
    background: var(--c1-point);
    opacity: 0;
    transform: none;
    transition: opacity .22s ease, height .22s ease;
    pointer-events: none;
}
.gthd.gthd_C1.gnb_plain .c1_name::after { content: none; }

.gthd.gthd_C1.gnb_underline .c1_li:hover > .c1_a .c1_name::after,
.gthd.gthd_C1.gnb_underline .c1_li:focus-within > .c1_a .c1_name::after,
.gthd.gthd_C1.gnb_underline .c1_li.is_on > .c1_a .c1_name::after {
    height: var(--gthd-markh, 2px);
    opacity: 1;
}

.gthd.gthd_C1.gnb_dot .c1_name::after {
    left: 50%;
    right: auto;
    bottom: calc(-1 * var(--gthd-markgap, 8px) - 2px);
    width: calc(var(--gthd-markh, 2px) * 2.5);
    height: calc(var(--gthd-markh, 2px) * 2.5);
    margin-left: calc(var(--gthd-markh, 2px) * -1.25);
    border-radius: 50%;
}
.gthd.gthd_C1.gnb_dot .c1_li:hover > .c1_a .c1_name::after,
.gthd.gthd_C1.gnb_dot .c1_li:focus-within > .c1_a .c1_name::after,
.gthd.gthd_C1.gnb_dot .c1_li.is_on > .c1_a .c1_name::after { opacity: 1; }

.gthd.gthd_C1 .c1_li:hover > .c1_a,
.gthd.gthd_C1 .c1_li:focus-within > .c1_a,
.gthd.gthd_C1 .c1_li.is_on > .c1_a { color: var(--c1-point); }

.gthd.gthd_C1.gthd_over:not(.scrolling) .c1_li:hover > .c1_a,
.gthd.gthd_C1.gthd_over:not(.scrolling) .c1_li.is_on > .c1_a { color: #fff; }
.gthd.gthd_C1.gthd_over:not(.scrolling) .c1_name::after { background: #fff; }


/*───────────────────────────────────────────────────────────────
  4. 세로 목록 드롭다운

  ★ width:max-content 가 핵심이다. 절대배치 요소의 폭은 "담는 상자
    폭 − left 오프셋" 으로 정해지는데, 담는 상자가 대메뉴 한 칸이라
    그대로 두면 카드가 min-content 까지 쭈그러든다.
  ★ 좌우 정렬은 --sub-x 변수 하나로 뺀다.
───────────────────────────────────────────────────────────────*/
.gthd.gthd_C1 .c1_sub {
    --sub-x: -50%;

    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 30;

    width: -webkit-max-content;
    width: max-content;
    min-width: var(--gthd-submin, 180px);
    max-width: var(--gthd-submax, calc(100vw - 48px));

    margin-top: var(--gthd-subgap, 0px);
    padding: var(--gthd-subpad, 12px);
    border-radius: var(--gthd-subrad, 0px);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .13);

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

.gthd.gthd_C1 .c1_li:hover > .c1_sub,
.gthd.gthd_C1 .c1_li:focus-within > .c1_sub {
    opacity: 1;
    visibility: visible;
    transform: translate(var(--sub-x), 0);
}

/* 양 끝 정렬. ★ left:auto 를 반드시 함께 되돌린다 — left 와 right 가
   동시에 잡히면 상자가 그 사이로 늘어나 width 가 무시된다. */
.gthd.gthd_C1.sal_edge .c1_li.is_first > .c1_sub { --sub-x: 0; left: 0; right: auto; }
.gthd.gthd_C1.sal_edge .c1_li.is_last  > .c1_sub { --sub-x: 0; left: auto; right: 0; }

.gthd.gthd_C1 .c1_bridge {
    position: absolute;
    top: calc(-1 * var(--gthd-subbridge, 6px));
    left: 0;
    right: 0;
    height: var(--gthd-subbridge, 6px);
}

/* 카드 위쪽 강조컬러 선.
   ★ top:-1px 로 카드의 위 테두리를 덮는다. top:0 으로 두면 테두리
     1px 이 선 위에 흰 줄로 남는다(실제로 그 지적이 나왔다).
   ★ 얇은 선에 큰 둥글기를 주면 브라우저가 반지름을 높이의 절반까지
     깎아 양 끝이 모서리 밖으로 들뜬다. 둥글기만큼 안쪽으로 들인다. */
.gthd.gthd_C1.sub_topline .c1_sub::after {
    content: "";
    position: absolute;
    top: -1px;
    left: calc(var(--gthd-subrad, 0px) * .62);
    right: calc(var(--gthd-subrad, 0px) * .62);
    height: var(--gthd-toplineh, 2px);
    background: var(--c1-point);
}

.gthd.gthd_C1 .c1_list { margin: 0; padding: 0; list-style: none; }

.gthd.gthd_C1 .c1_list a {
    display: flex;
    align-items: center;
    gap: 5px;

    padding: 9px 12px;
    border-radius: 6px;

    color: var(--c1-dim);
    font-size: var(--gthd-subsize, 14px);
    font-weight: var(--gthd-subw, 500);
    line-height: 1.4;
    white-space: nowrap;
    transition: color .18s ease, background-color .18s ease;
}

/* 항목 사이 얇은 구분선. 마지막 항목에는 넣지 않는다 —
   카드 아래 여백에 선만 남는다. */
.gthd.gthd_C1.sub_line .c1_list > li + li { border-top: 1px solid rgba(0, 0, 0, .055); }

.gthd.gthd_C1.sub_hover .c1_list a:hover,
.gthd.gthd_C1.sub_hover .c1_list a:focus-visible { background: var(--c1-point); color: #fff; }
.gthd.gthd_C1:not(.sub_hover) .c1_list a:hover,
.gthd.gthd_C1:not(.sub_hover) .c1_list a:focus-visible { background: rgba(0, 0, 0, .045); color: var(--c1-point); }

.gthd.gthd_C1.sub_pill .c1_list a.is_on { background: var(--c1-point); color: #fff; }
.gthd.gthd_C1:not(.sub_pill) .c1_list a.is_on { color: var(--c1-point); font-weight: 700; }

.gthd.gthd_C1 .c1_list .gnb_new_ico {
    display: inline-block;
    margin-left: 2px;
    padding: 0 4px;
    border-radius: 3px;
    background-color: var(--c1-point) !important;
    color: #fff;
    font-size: 9px;
    line-height: 15px;
    vertical-align: middle;
}
.gthd.gthd_C1.sub_hover .c1_list a:hover .gnb_new_ico,
.gthd.gthd_C1.sub_pill .c1_list a.is_on .gnb_new_ico {
    background-color: #fff !important;
    color: var(--c1-point);
}


/*───────────────────────────────────────────────────────────────
  5. 유틸
───────────────────────────────────────────────────────────────*/
.gthd.gthd_C1 .gthd_snb > li { display: flex; align-items: center; }

/* 아이콘 크기는 core.css 가 설정(snb_ico_size)으로 잡는다.
   ★ 규칙을 여기에도 두는 이유 — gt_hd_core 를 안 올린 상태에서는
     아이콘이 3줄 메뉴와 같은 26px 로 부푼다. var() 대비값이 막는다. */
.gthd.gthd_C1 .gthd_snb .gthd_ico svg {
    width: var(--gthd-snbico, 20px);
    height: var(--gthd-snbico, 20px);
}
.gthd.gthd_C1 .gthd_snb .gthd_ico .gthd_mi { font-size: var(--gthd-snbicomi, 22px); }
.gthd.gthd_C1 .gthd_snb .gthd_ico svg.gthd_pv18 {
    width: calc(var(--gthd-snbico, 20px) * .9);
    height: calc(var(--gthd-snbico, 20px) * .9);
}
.gthd.gthd_C1 .gthd_snb .gthd_maptog svg {
    width: var(--gthd-icosize, 22px);
    height: var(--gthd-icosize, 22px);
}
.gthd.gthd_C1 .gthd_snb .gthd_maptog .gthd_mi { font-size: var(--gthd-icosize, 22px); }

.gthd.gthd_C1 .gthd_snb .gthd_ico:hover { color: var(--c1-point); }


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

  ★ 1360px 이하에서는 대메뉴가 숨으므로(core.css) 2행 자체를 없앤다.
    안 없애면 빈 띠만 남아 헤더가 괜히 두꺼워진다.
───────────────────────────────────────────────────────────────*/
@media all and (max-width: 1360px) {
    #header.gthd.gthd_C1 .c1_row2 { display: none; }

    /* 1행만 남으므로 좌우 칸이 좁아진다 — 로고는 그대로 가운데 */
    .gthd.gthd_C1 .c1_row1 { gap: 8px; }
    .gthd.gthd_C1 .c1_side_l .gthd_snb { display: none; }
}

@media all and (max-width: 500px) {
    .gthd.gthd_C1 .gthd_snb { gap: calc(var(--gthd-snbgap, 14px) * .4); }
}