@charset "utf-8";

/*───────────────────────────────────────────────────────────────
  ONWEB 리빌더 헤더 · 좌측 패널 드롭다운 (gt_hd_D_1) · style.css
  v1.0.0 / 2026-09-05 / ONWEB

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

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

.gthd.gthd_D1 {
    --gthd-skin-ver: 2;

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

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


/*───────────────────────────────────────────────────────────────
  1. 대메뉴
───────────────────────────────────────────────────────────────*/
.gthd.gthd_D1 .d1_ul {
    display: flex;
    align-items: stretch;
    gap: var(--gthd-gap, 36px);
    height: 100%;
}

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

.gthd.gthd_D1 .d1_a {
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: var(--gthd-gnbpad, 6px);
    padding-right: var(--gthd-gnbpad, 6px);

    color: var(--gthd-fg);
    font-size: var(--gthd-gnb, 18px);
    font-weight: var(--gthd-gnbw, 700);
    letter-spacing: var(--gthd-track, 0px);
    white-space: nowrap;
    transition: color .2s ease;
}
.gthd.gthd_D1 .d1_a > span { position: relative; display: inline-block; }

/* 표시 — 아래 gnb_* 블록이 모양을 정한다.
   ★ 각 블록이 앞 블록이 잡아 둔 속성을 전부 되돌려 적는다. */
.gthd.gthd_D1 .d1_a > span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: calc(-1 * var(--gthd-markgap, 9px));
    height: 0;
    border-radius: 0;
    background: var(--d1-point);
    opacity: 0;
    transform: none;
    transition: opacity .22s ease, height .22s ease;
    pointer-events: none;
}
.gthd.gthd_D1.gnb_plain .d1_a > span::after { content: none; }

.gthd.gthd_D1.gnb_underline .d1_li:hover > .d1_a > span::after,
.gthd.gthd_D1.gnb_underline .d1_li:focus-within > .d1_a > span::after,
.gthd.gthd_D1.gnb_underline .d1_li.is_on > .d1_a > span::after {
    height: var(--gthd-markh, 2px);
    opacity: 1;
}

.gthd.gthd_D1.gnb_dot .d1_a > span::after {
    left: 50%;
    right: auto;
    bottom: calc(-1 * var(--gthd-markgap, 9px) - 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_D1.gnb_dot .d1_li:hover > .d1_a > span::after,
.gthd.gthd_D1.gnb_dot .d1_li:focus-within > .d1_a > span::after,
.gthd.gthd_D1.gnb_dot .d1_li.is_on > .d1_a > span::after { opacity: 1; }

.gthd.gthd_D1 .d1_li:hover > .d1_a,
.gthd.gthd_D1 .d1_li:focus-within > .d1_a,
.gthd.gthd_D1 .d1_li.is_on > .d1_a { color: var(--d1-point); }

.gthd.gthd_D1.gthd_over:not(.scrolling) .d1_li:hover > .d1_a,
.gthd.gthd_D1.gthd_over:not(.scrolling) .d1_li:focus-within > .d1_a,
.gthd.gthd_D1.gthd_over:not(.scrolling) .d1_li.is_on > .d1_a { color: #fff; }
.gthd.gthd_D1.gthd_over:not(.scrolling) .d1_a > span::after { background: #fff; }


/*───────────────────────────────────────────────────────────────
  2. 좌측 패널 드롭다운

  ★ width:max-content 가 핵심이다. 절대배치 요소의 폭은 "담는 상자
    폭 − left 오프셋" 으로 정해지는데, 담는 상자가 대메뉴 한 칸이라
    그대로 두면 패널 한 장 폭까지 쭈그러들어 목록이 전부 줄바꿈된다.
  ★ 좌우 정렬은 --sub-x 변수 하나로 뺀다.
───────────────────────────────────────────────────────────────*/
.gthd.gthd_D1 .d1_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, 320px);
    max-width: var(--gthd-submax, calc(100vw - 48px));

    margin-top: var(--gthd-subgap, 12px);

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

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

.gthd.gthd_D1.sal_edge .d1_li.is_first > .d1_sub { --sub-x: 0; left: 0; right: auto; }
.gthd.gthd_D1.sal_edge .d1_li.is_last  > .d1_sub { --sub-x: 0; left: auto; right: 0; }

.gthd.gthd_D1 .d1_bridge {
    position: absolute;
    top: calc(-1 * var(--gthd-subbridge, 16px));
    left: 0;
    right: 0;
    height: var(--gthd-subbridge, 16px);
}

.gthd.gthd_D1 .d1_card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;

    padding: var(--gthd-subpad, 20px);
    border-radius: var(--gthd-subrad, 12px);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .12);
    color: var(--d1-fg);
}

.gthd.gthd_D1.sub_topline .d1_card::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(var(--gthd-subrad, 12px) * .62);
    right: calc(var(--gthd-subrad, 12px) * .62);
    height: var(--gthd-toplineh, 2px);
    background: var(--d1-point);
}

/*── 왼쪽 정사각 패널 ──*/
.gthd.gthd_D1 .d1_panel {
    flex: 0 0 var(--d1-panel, 92px);
    width: var(--d1-panel, 92px);
    height: var(--d1-panel, 92px);

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--d1-panelrad, 14px);
}

.gthd.gthd_D1 .d1_panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* 빼먹으면 세로로 긴 사진이 찌그러진다 */
    display: block;
}
.gthd.gthd_D1 .d1_panel svg {
    width: calc(var(--d1-panel, 92px) * .42);
    height: calc(var(--d1-panel, 92px) * .42);
}
.gthd.gthd_D1 .d1_num {
    font-size: calc(var(--d1-panel, 92px) * .34);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
}

/* 패널 칠하기 세 가지 */
.gthd.gthd_D1.pbg_soft  .d1_panel { background: rgba(0, 0, 0, .045); color: var(--d1-point); }
.gthd.gthd_D1.pbg_point .d1_panel { background: var(--d1-point); color: #fff; }
.gthd.gthd_D1.pbg_line  .d1_panel { border: 1px solid rgba(0, 0, 0, .12); color: var(--d1-point); }

/* 사진 패널은 배경을 칠하지 않는다 — 사진이 이미 그 자리를 채운다 */
.gthd.gthd_D1.pk_img .d1_panel { background: rgba(0, 0, 0, .045); }

/*── 오른쪽 ──*/
.gthd.gthd_D1 .d1_body { flex: 1 1 auto; min-width: 0; }

.gthd.gthd_D1 .d1_ttl {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    font-size: var(--gthd-subttl, 17px);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--d1-fg);
}

.gthd.gthd_D1 .d1_list { display: block; margin: 0; padding: 0; list-style: none; }

/* 칸을 나눌 때는 1fr 이 아니라 auto 로 나눈다.
   카드가 max-content 상자라 1fr 은 "남는 폭을 나눈다" 가 아니라
   "가장 긴 항목에 맞춰 모든 칸을 똑같이" 가 되어, 긴 항목이 하나
   있는 대메뉴에서만 카드가 유난히 넓어진다. */
.gthd.gthd_D1.sub_grid .d1_list {
    display: grid;
    grid-template-columns: repeat(var(--d1-cols, 2), auto);
    column-gap: 16px;
    align-items: start;
}

.gthd.gthd_D1 .d1_list > li { margin-bottom: 1px; }

.gthd.gthd_D1 .d1_list a {
    display: flex;
    align-items: center;
    gap: 5px;

    /* ★ padding 을 단축으로 쓰지 않는다 — 나중에 좌우만 바꾸려다
         위아래 설정값(sub_rowpad)까지 조용히 지운다. */
    padding-top: var(--d1-rowpad, 7px);
    padding-bottom: var(--d1-rowpad, 7px);
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 8px;

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

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

.gthd.gthd_D1.sub_pill .d1_list a.is_on { background: var(--d1-point); color: #fff; }
.gthd.gthd_D1:not(.sub_pill) .d1_list a.is_on { color: var(--d1-point); font-weight: 700; }

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


/*───────────────────────────────────────────────────────────────
  3. 오른쪽 유틸 — util_mini
───────────────────────────────────────────────────────────────*/
.gthd.gthd_D1 .gthd_snb > li { display: flex; align-items: center; }

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

.gthd.gthd_D1 .gthd_snb .gthd_ico::before {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .05);
    opacity: 0;
    transition: opacity .18s ease;
}
.gthd.gthd_D1 .gthd_snb .gthd_ico:hover::before,
.gthd.gthd_D1 .gthd_snb .gthd_ico.is_on::before { opacity: 1; }
.gthd.gthd_D1 .gthd_snb .gthd_ico svg,
.gthd.gthd_D1 .gthd_snb .gthd_ico img { position: relative; z-index: 1; }
.gthd.gthd_D1.gthd_over:not(.scrolling) .gthd_snb .gthd_ico::before { background: rgba(255, 255, 255, .18); }

.gthd.gthd_D1.snb_btn .gthd_mytog::before { display: none; }


/*───────────────────────────────────────────────────────────────
  4. 화면 크기별
───────────────────────────────────────────────────────────────*/
@media all and (max-width: 500px) {
    /* 대메뉴는 이 구간에서 숨으므로 카드 규칙은 손댈 것이 없다.
       전체메뉴(공용) 쪽 반응형은 core.css 가 맡는다. */
    .gthd.gthd_D1 .gthd_snb { gap: calc(var(--gthd-snbgap, 5px) * .6); }
}