/* gt_submenu8.css  v6  —  gt_submenu8.php / gt_submenu8_preview.html 이 함께 쓰는 스타일
 *
 * 색·크기는 전부 --sm8-* 변수로 흐른다. 디자인 6종(d_bar/d_line/d_seg/d_tile/d_dark/d_nav)은
 * 변수만 갈아끼우고 규칙은 한 벌이다. (특이도 다툼이 생길 자리를 없앴다)
 * 모바일 전환은 500px (온웹 사이트 공통 기준선).
 * PC 값 / 모바일 값은 서로 다른 이름(--sm8-opc / --sm8-omo …)으로 받는다 — 인라인 변수는 미디어쿼리가 못 이기므로.
 */

/* 기존 gt_submenu7 이 하던 페이지 전역 보정 (헤더 아래 구분선 제거, 타이틀 여백) */
.sub_title_wrap { padding-top: 15px !important; }
#sub_layer1 { border-bottom: 0 solid #DDD !important; }
.gt_submenu_bg_bar { background-color: transparent; }

.gtsm8 {
    --gtsm8-ver: 9;

    /* PHP 가 인라인으로 내려보내는 값 (없으면 아래 대체값) */
    --sm8-point: #0aa5ff;
    --sm8-on: #fff;
    --sm8-o: var(--sm8-opc, 0px);       /* 위로 걸치는 높이 */
    --sm8-g: var(--sm8-gpc, 0px);       /* 메뉴 아래 여백 */
    --sm8-fs: var(--sm8-fspc, 16px);

    /* 기본 = bar.  --sm8-u* 는 PHP 가 사용자 지정 색이 있을 때만 내려보낸다 (없으면 대체값) */
    --sm8-line: #e3e6ea;
    --sm8-fg: var(--sm8-ufg, #333);
    --sm8-listbg: var(--sm8-ubg, #fff);
    --sm8-cellbg: var(--sm8-ubg, #fff);
    --sm8-hbg: var(--sm8-uhbg, #111);
    --sm8-hfg: var(--sm8-uhfg, #fff);
    --sm8-cbg: var(--sm8-ucbg, var(--sm8-point));
    --sm8-cfg: var(--sm8-ucfg, var(--sm8-on));
    --sm8-fade: var(--sm8-ubg, #fff);
    --sm8-listsh: 0 3px 5px 0 rgba(0,0,0,.2);
    --sm8-listr: var(--sm8-ur, 0px);    /* --sm8-ur = PHP 설정 radius (PC). 모바일 규칙은 따로 정한다 */
    --sm8-sepw: 0px;
    --sm8-msepw: 1px;                   /* 모바일 격자 칸 사이 */
    --sm8-msepbg: #e3e6ea;
    --sm8-grow: 1;
    --sm8-basis: auto;
    --sm8-h: var(--sm8-uh, 54px);       /* --sm8-uh = PHP 설정 height (PC 만. 모바일은 아래 미디어쿼리가 다시 정한다) */
    --sm8-px: 28px;

    position: relative;
    display: flow-root;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    margin-bottom: calc(var(--sm8-g) - var(--sm8-o));
    padding: 0;
}

/* ── 디자인 : 변수만 다르다 ─────────────────────────────── */
.gtsm8.d_line {
    --sm8-listr: 0px;                   /* 밑줄 탭은 위가 열린 모양이라 둥글기를 받지 않는다 */
    --sm8-listsh: none;
    --sm8-lbb: 1px;
    --sm8-lw: 100%;
    --sm8-hbg: var(--sm8-uhbg, #fff);
    --sm8-hfg: var(--sm8-uhfg, var(--sm8-point));
    --sm8-cbg: var(--sm8-ubg, #fff);
    --sm8-cfg: var(--sm8-ucfg, var(--sm8-point));
    --sm8-cellsh: inset 0 -2px 0 transparent;
    --sm8-hsh: inset 0 -2px 0 var(--sm8-line);
    --sm8-csh: inset 0 -2px 0 var(--sm8-ucfg, var(--sm8-point));
}
/* seg : 회색 트랙 안에서 현재 메뉴만 흰 칸으로 도드라지는 분할 컨트롤 */
.gtsm8.d_seg {
    --sm8-listbg: var(--sm8-ubg, #f6f6f6);
    --sm8-cellbg: var(--sm8-umbg, transparent);
    --sm8-fg: var(--sm8-ufg, #4a5260);
    --sm8-fade: var(--sm8-ubg, #f6f6f6);
    --sm8-listsh: none;
    --sm8-listr: var(--sm8-sr, 14px);
    --sm8-lpad: var(--sm8-spad, 4px);
    --sm8-sepw: var(--sm8-sgap, 4px);
    --sm8-msepw: var(--sm8-sgap, 4px);
    --sm8-msepbg: var(--sm8-ubg, #f6f6f6);
    --sm8-h: var(--sm8-sh, 46px);
    --sm8-px: var(--sm8-spx, 26px);
    --sm8-cellr: var(--sm8-spr, 10px);
    --sm8-hbg: var(--sm8-uhbg, rgba(255,255,255,.65));
    --sm8-hfg: var(--sm8-ufg, #222);
    --sm8-cbg: var(--sm8-ucbg, #fff);
    --sm8-cfg: var(--sm8-ucfg, var(--sm8-point));
    --sm8-csh: 0 2px 6px rgba(0,0,0,.14);
}
.gtsm8.d_tile {
    --sm8-listbg: var(--sm8-line);
    --sm8-listsh: none;
    --sm8-listr: var(--sm8-ur, 10px);
    --sm8-lpad: 1px;
    --sm8-sepw: 1px;
    --sm8-px: 24px;
    --sm8-hbg: var(--sm8-uhbg, #f3f6f9);
    --sm8-hfg: var(--sm8-uhfg, var(--sm8-point));
}
.gtsm8.d_dark {
    --sm8-fg: var(--sm8-ufg, #fff);
    --sm8-listbg: var(--sm8-ubg, #232a3a);
    --sm8-cellbg: var(--sm8-ubg, #232a3a);
    --sm8-fade: var(--sm8-ubg, #232a3a);
    --sm8-hbg: var(--sm8-uhbg, rgba(255,255,255,.12));
    --sm8-hfg: var(--sm8-uhfg, #fff);
    --sm8-sepw: 1px;
    --sm8-msepbg: #3a4356;
    --sm8-listsh: 0 3px 8px 0 rgba(0,0,0,.28);
    --sm8-listr: var(--sm8-ur, 6px);
}

/* ── 본체 (목록형) ─────────────────────────────────────────── */
.gtsm8 .gtsm8_in {
    position: relative;
    top: calc(-1 * var(--sm8-o));
    display: flex;
    justify-content: var(--sm8-al, center);
    box-sizing: border-box;
    width: 100%;
    max-width: var(--sm8-mw, none);       /* line 등을 서브페이지 폭에 맞출 때 */
    margin: 0 auto;
    padding: 0 20px;
}
.gtsm8.d_line .gtsm8_in { padding: 0; }

.gtsm8 .gtsm8_list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sm8-sepw);
    box-sizing: border-box;
    width: var(--sm8-lw, fit-content);
    max-width: 100%;
    margin: 0;
    padding: var(--sm8-lpad, 0);
    list-style: none;
    text-align: center;
    background: var(--sm8-listbg);
    border-bottom: var(--sm8-lbb, 0px) solid var(--sm8-line);
    border-radius: var(--sm8-listr);
    box-shadow: var(--sm8-listsh);
    overflow: var(--sm8-listov, hidden);
}
.gtsm8 .gtsm8_list li {
    display: flex;
    float: none;
    flex-grow: var(--sm8-grow);
    flex-shrink: 1;
    flex-basis: var(--sm8-basis);
    min-width: var(--sm8-cellmin, 0);
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
}
.gtsm8 .gtsm8_list a {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0;
    min-height: var(--sm8-h);
    margin: 0;
    padding: 6px var(--sm8-px);
    font-size: var(--sm8-fs);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;                  /* PC 는 글자가 길어도 한 줄 — 칸이 글자 길이에 맞게 늘어난다 */
    color: var(--sm8-fg);
    background: var(--sm8-cellbg);
    border-radius: var(--sm8-cellr, 0);
    box-shadow: var(--sm8-cellsh, none);
    transition: background-color .25s, color .25s, box-shadow .25s;
}
.gtsm8 .gtsm8_list a:hover,
.gtsm8 .gtsm8_list a:focus-visible {
    color: var(--sm8-hfg);
    background: var(--sm8-hbg);
    box-shadow: var(--sm8-hsh, var(--sm8-cellsh, none));
    text-decoration: none;
}
.gtsm8 .gtsm8_list a:focus-visible { outline: 2px solid var(--sm8-point); outline-offset: -2px; }
.gtsm8 .gtsm8_list li.now_menu a,
.gtsm8 .gtsm8_list li.now_menu a:hover {
    color: var(--sm8-cfg, var(--sm8-on));
    background: var(--sm8-cbg, var(--sm8-point));
    box-shadow: var(--sm8-csh, var(--sm8-cellsh, none));
}

/* 모바일 전용 부품은 PC 에서 숨긴다 */
.gtsm8 .gtsm8_cur { display: none; }
/* "모바일에서만 nav" 를 고른 경우: 목록형은 PC 에서만, nav 는 모바일에서만 */
.gtsm8.m_navonly { display: none; }

/* ── 모바일 (500px 이하) ─────────────────────────────────── */
@media (max-width: 500px) {
    .gtsm8 {
        --sm8-o: var(--sm8-omo, 0px);
        --sm8-g: var(--sm8-gmo, 0px);
        --sm8-fs: var(--sm8-fsmo, 14px);
        --sm8-h: 44px;
        --sm8-px: 14px;
        --sm8-lpad: 0px;
    }
    .gtsm8 .gtsm8_in { max-width: none; padding: 0 var(--sm8-mpad, 0px); }
    .gtsm8 .gtsm8_list a { white-space: normal; word-break: keep-all; }

    .gtsm8.m_navswap { display: none; }
    .gtsm8.m_navonly { display: flow-root; }
    .gtsm8.m_hide { display: none; }

    /* 모바일 공통 : 좌우 여백 없이 화면 끝까지 채우고, 위·아래에 가는 선을 둬서 글자만 떠 보이지 않게 한다.
       --sm8-mpad(안쪽 여백)를 주면 둥근 카드 모양으로 바뀐다(.is_inset). */
    .gtsm8.m_grid .gtsm8_list,
    .gtsm8.m_scroll .gtsm8_list,
    .gtsm8.m_drop .gtsm8_list {
        border-top: 1px solid var(--sm8-line);
        border-bottom: 1px solid var(--sm8-line);
        border-radius: 0;
        box-shadow: none;
    }
    .gtsm8.is_inset.m_grid .gtsm8_list,
    .gtsm8.is_inset.m_scroll .gtsm8_list,
    .gtsm8.is_inset.m_drop .gtsm8_list {
        border: 1px solid var(--sm8-line);
        border-radius: 12px;
    }
    .gtsm8.d_dark.m_grid .gtsm8_list, .gtsm8.d_dark.m_scroll .gtsm8_list, .gtsm8.d_dark.m_drop .gtsm8_list { border-color: #3a4356; }
    /* seg 는 트랙 자체가 카드라 선을 두지 않는다 */
    .gtsm8.d_seg.m_grid .gtsm8_list,
    .gtsm8.d_seg.m_scroll .gtsm8_list,
    .gtsm8.d_seg.m_drop .gtsm8_list { border: var(--sm8-sbw, 1px) solid var(--sm8-sbc, #eee); border-radius: var(--sm8-listr); }

    /* 2) 격자 — 칸마다 배경이 채워지고 칸 사이는 가는 선 */
    .gtsm8.m_grid { --sm8-sepw: var(--sm8-msepw); --sm8-listbg: var(--sm8-msepbg); }
    .gtsm8.m_grid.d_line { --sm8-lbb: 0px; }
    .gtsm8.m_grid .gtsm8_list {
        display: grid;
        grid-template-columns: repeat(var(--sm8-mc, 2), minmax(0, 1fr));
        width: 100%;
        overflow: hidden;
    }
    .gtsm8.m_grid .gtsm8_list li { flex: none; min-width: 0; }
    .gtsm8.m_grid .gtsm8_list li:last-child { grid-column: span var(--sm8-lastspan, 1); }
    .gtsm8.m_grid .gtsm8_list a { min-height: 46px; padding: 8px 8px; }

    /* 3) 한 줄 스와이프 — 현재 메뉴는 JS 가 가운데로 */
    .gtsm8.m_scroll .gtsm8_list {
        position: relative;
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .gtsm8.m_scroll .gtsm8_list::-webkit-scrollbar { display: none; }
    .gtsm8.m_scroll .gtsm8_list li { flex: 0 0 auto; }
    .gtsm8.m_scroll .gtsm8_list a { white-space: nowrap; padding: 6px 18px; }
    .gtsm8.m_scroll .gtsm8_in::before,
    .gtsm8.m_scroll .gtsm8_in::after {
        content: "";
        position: absolute;
        top: 1px; bottom: 1px;
        z-index: 2;
        width: 28px;
        pointer-events: none;
        opacity: 0;
        transition: opacity .2s;
    }
    .gtsm8.m_scroll .gtsm8_in::before { left: var(--sm8-mpad, 0px);  background: linear-gradient(90deg,  var(--sm8-fade, #fff), transparent); }
    .gtsm8.m_scroll .gtsm8_in::after  { right: var(--sm8-mpad, 0px); background: linear-gradient(270deg, var(--sm8-fade, #fff), transparent); }
    .gtsm8.m_scroll .gtsm8_in.has_l::before { opacity: 1; }
    .gtsm8.m_scroll .gtsm8_in.has_r::after  { opacity: 1; }

    /* 4) 접이식 — 현재 메뉴 이름만 보이는 띠, 누르면 목록이 펼쳐진다 */
    .gtsm8.m_drop .gtsm8_in { flex-direction: column; align-items: stretch; }
    .gtsm8.m_drop .gtsm8_cur {
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        width: 100%;
        min-height: 50px;
        margin: 0;
        padding: 6px 18px;
        font: inherit;
        font-size: var(--sm8-fs);
        font-weight: 700;
        text-align: left;
        color: var(--sm8-fg);
        background: var(--sm8-cellbg);
        border: 0;
        border-top: 1px solid var(--sm8-line);
        border-bottom: 1px solid var(--sm8-line);
        border-radius: 0;
        box-shadow: 0 2px 6px rgba(0,0,0,.06);
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }
    .gtsm8.m_drop.d_seg .gtsm8_cur { background: var(--sm8-listbg); border: var(--sm8-sbw, 1px) solid var(--sm8-sbc, #eee); border-radius: var(--sm8-listr); box-shadow: none; }
    .gtsm8.m_drop.d_dark .gtsm8_cur { border-color: #3a4356; }
    .gtsm8.m_drop.is_inset .gtsm8_cur { border: 1px solid var(--sm8-line); border-radius: 12px; }
    .gtsm8.m_drop .gtsm8_cur:focus-visible { outline: 2px solid var(--sm8-point); outline-offset: -2px; }
    .gtsm8.m_drop .gtsm8_cur .gtsm8_arr {
        flex: 0 0 auto;
        width: 8px; height: 8px;
        margin: -3px 2px 0 12px;
        border: solid currentColor;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        transition: transform .2s, margin .2s;
    }
    .gtsm8.m_drop .gtsm8_in.is_open .gtsm8_cur .gtsm8_arr { margin-top: 4px; transform: rotate(-135deg); }

    .gtsm8.m_drop { --sm8-sepw: var(--sm8-msepw); --sm8-listbg: var(--sm8-msepbg); }
    .gtsm8.m_drop.d_line { --sm8-lbb: 0px; }
    .gtsm8.m_drop .gtsm8_list {
        display: none;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        margin-top: 0;
        border-top: 0;
        overflow: hidden;
    }
    .gtsm8.m_drop.d_seg .gtsm8_list { margin-top: 6px; }
    .gtsm8.m_drop .gtsm8_in.is_open .gtsm8_list { display: grid; }
    .gtsm8.m_drop .gtsm8_list li { flex: none; min-width: 0; }
    .gtsm8.m_drop .gtsm8_list a { justify-content: flex-start; padding: 8px 18px; text-align: left; }
    .gtsm8.m_drop.d_seg .gtsm8_list a { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .gtsm8 .gtsm8_list a, .gtsm8 .gtsm8_cur .gtsm8_arr { transition: none; }
}

/* ══ d_nav : 홈 버튼 + 대메뉴/서브메뉴 드롭다운 + 현재 위치(브레드크럼) ═══════════════
 * 마크업이 목록형(.gtsm8_list)과 다르다 — .gtsm8_bar 안에 홈, 드롭다운 둘, 위치 표시가 한 줄로 놓인다.
 * PC 는 마우스를 올리면, 터치·키보드는 눌러서 열린다.
 * 링크가 비어 있는 대메뉴(#, #none)는 눌러도 이동하지 않고 서브메뉴 칸이 그 대메뉴의 것으로 바뀐다(JS). */
.gtsm8.d_nav,
.gtsm8.m_navonly {
    --sm8-nh: var(--sm8-uh, 50px);      /* 패널의 "서브메뉴 높이"(PC). 모바일은 아래 500px 규칙이 46px 로 */
    --sm8-nbg: var(--sm8-ubg, #fff);
    --sm8-nfg: var(--sm8-ufg, #333);
    --sm8-nhome: #111;
}
.gtsm8.d_nav .gtsm8_in,
.gtsm8.m_navonly .gtsm8_in {
    display: block;
    max-width: none;
    padding: 0;
    background: var(--sm8-nbg);
    border-top: 1px solid var(--sm8-line);
    border-bottom: 1px solid var(--sm8-line);
}
.gtsm8_bar {
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    max-width: var(--sm8-nw, 1200px);
    height: var(--sm8-nh, 50px);
    margin: 0 auto;
}
.gtsm8_home {
    display: flex;
    flex: 0 0 var(--sm8-nh, 50px);
    align-items: center;
    justify-content: center;
    width: var(--sm8-nh, 50px);
    font-family: inherit;                  /* 사이트 글꼴을 그대로 (별도 글꼴 지정 없음) */
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    background: var(--sm8-nhome, #111);
}
.gtsm8_home:hover { color: #fff; background: var(--sm8-point); }
.gtsm8_home svg { width: 20px; height: 20px; fill: currentColor; }
.gtsm8_dd {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    border-right: 1px solid var(--sm8-line);
}
.gtsm8_ddb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;
    min-width: var(--sm8-ddw, 200px);
    margin: 0;
    padding: 0 22px;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--sm8-nfg);
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.gtsm8_ddb:focus-visible { outline: 2px solid var(--sm8-point); outline-offset: -2px; }
.gtsm8_dd .gtsm8_arr {
    flex: 0 0 auto;
    width: 7px; height: 7px;
    margin: -3px 0 0;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform .2s, margin .2s;
}
.gtsm8_dd.is_open .gtsm8_arr { margin-top: 3px; transform: rotate(-135deg); }
.gtsm8_ddl {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    box-sizing: border-box;
    min-width: calc(100% + 1px);
    width: max-content;
    max-width: min(320px, 90vw);
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--sm8-nbg);
    border: 1px solid var(--sm8-line);
    border-top: 0;
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
}
.gtsm8_dd.is_open > .gtsm8_ddl { display: block; }
.gtsm8_dd.is_shut > .gtsm8_ddl,
.gtsm8_ddl[hidden] { display: none !important; }
.gtsm8_ddl li { display: block; float: none; margin: 0; padding: 0; list-style: none; }
.gtsm8_ddl a {
    display: block;
    box-sizing: border-box;
    padding: 0 24px;
    font-size: 14px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    word-break: keep-all;
    color: var(--sm8-nfg);
    background: none;
    transition: background-color .2s, color .2s;
}
.gtsm8_ddl a:hover,
.gtsm8_ddl a:focus-visible { color: var(--sm8-point); background: rgba(128,128,128,.12); text-decoration: none; }
.gtsm8_ddl a:focus-visible { outline: 2px solid var(--sm8-point); outline-offset: -2px; }
.gtsm8_ddl li.now_menu a,
.gtsm8_ddl li.now_menu a:hover { color: var(--sm8-cfg); background: var(--sm8-cbg); }

.gtsm8_crumb {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    padding: 0 4px 0 16px;
    list-style: none;
    font-size: 13px;
    color: var(--sm8-nfg);
    opacity: .9;
    white-space: nowrap;
}
.gtsm8_crumb li { display: flex; align-items: center; margin: 0; padding: 0; float: none; list-style: none; }
.gtsm8_crumb li + li::before { content: "\203A"; margin: 0 9px; opacity: .6; }
.gtsm8_crumb a { color: inherit; text-decoration: none; }
.gtsm8_crumb a:hover { color: var(--sm8-point); }
.gtsm8_crumb .gtsm8_hm { padding: 3px 10px; font-size: 12px; line-height: 1.3; color: #fff; background: #333; border-radius: 999px; }
.gtsm8_crumb a.gtsm8_hm:hover { color: #fff; background: var(--sm8-point); }

@media (hover: hover) and (min-width: 501px) {
    .gtsm8_dd:hover > .gtsm8_ddl { display: block; }
    .gtsm8_dd:hover .gtsm8_arr { margin-top: 3px; transform: rotate(-135deg); }
}
@media (max-width: 900px) {
    .gtsm8_crumb { display: none; }
    .gtsm8_dd { flex: 1 1 0; min-width: 0; }
    .gtsm8_ddb { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 500px) {
    .gtsm8.d_nav, .gtsm8.m_navonly { --sm8-nh: 46px; }
    .gtsm8_ddb { gap: 8px; padding: 0 12px; font-size: 14px; }
    .gtsm8_ddb > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gtsm8_dd:last-of-type { border-right: 0; }
    .gtsm8_dd:last-of-type .gtsm8_ddl { right: 0; left: auto; }
    .gtsm8_ddl a { padding: 0 16px; line-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
    .gtsm8_ddl a, .gtsm8_dd .gtsm8_arr { transition: none; }
}

/* ══ v4 ═══════════════════════════════════════════════════════════════ */

/* seg : PC 에서는 흰 칸(.gtsm8_pill)이 마우스를 따라다닌다. JS 가 못 돌면 현재 메뉴 칸이 그대로 흰 칸이다. */
.gtsm8.d_seg .gtsm8_list { position: relative; }
.gtsm8_pill { display: none; }
@media (min-width: 501px) {
    .gtsm8.d_seg.has_pill .gtsm8_pill {
        display: block;
        position: absolute;
        z-index: 0;
        top: 0; left: 0;
        width: 0; height: 0;
        box-sizing: border-box;
        border-radius: var(--sm8-cellr, 10px);
        background: var(--sm8-cbg);
        box-shadow: var(--sm8-csh);
        opacity: 0;
        pointer-events: none;
    }
    .gtsm8.d_seg.has_pill .gtsm8_pill.is_on { opacity: 1; }
    .gtsm8.d_seg.has_pill .gtsm8_pill.is_ready { transition: left .32s cubic-bezier(.3,.7,.2,1), top .32s cubic-bezier(.3,.7,.2,1), width .32s cubic-bezier(.3,.7,.2,1), height .32s cubic-bezier(.3,.7,.2,1), opacity .2s; }
    .gtsm8.d_seg.has_pill .gtsm8_list li a { position: relative; z-index: 1; background: var(--sm8-cellbg); box-shadow: none; }
    .gtsm8.d_seg.has_pill .gtsm8_list li.is_hot a { background: transparent; }
    .gtsm8.d_seg.has_pill .gtsm8_list li.is_hot a { color: var(--sm8-cfg); }
    .gtsm8.d_seg.has_pill .gtsm8_list li.now_menu a { color: var(--sm8-fg); }
    .gtsm8.d_seg.has_pill .gtsm8_list li.now_menu.is_hot a { color: var(--sm8-cfg); }
}
@media (prefers-reduced-motion: reduce) {
    .gtsm8.d_seg.has_pill .gtsm8_pill.is_ready { transition: none; }
}

/* 모바일 drop : 폭·정렬을 고를 수 있다 (--sm8-dw / --sm8-dwal 은 PHP 가 값이 있을 때만 내려보낸다) */
@media (max-width: 500px) {
    .gtsm8.m_drop .gtsm8_cur,
    .gtsm8.m_drop .gtsm8_list { width: var(--sm8-dw, 100%); max-width: 100%; align-self: var(--sm8-dwal, stretch); }
    .gtsm8.m_drop.is_inset .gtsm8_list { margin-top: 6px; }
}

/* v5 · seg : 트랙 테두리(굵기·색) — 반지름은 --sm8-sr(트랙) / --sm8-spr(메뉴·흰 칸) */
.gtsm8.d_seg .gtsm8_list { border: var(--sm8-sbw, 1px) solid var(--sm8-sbc, #eee); }

/* ══ v7 ═══════════════════════════════════════════════════════════════ */

/* 드롭다운(nav)이 본문 뒤로 숨던 문제.
 * 바로 뒤에 오는 #contents_wrap 이 position:relative · z-index:1 · 흰 배경이라, 같은 z-index:1 인
 * 이 띠보다 DOM 순서상 뒤에 그려져 펼친 목록을 덮었다.
 * 사이트에 따라 본문 쪽 <style> 에 '.gt_submenu_bg_bar { z-index:1 !important; }'("서브메뉴가 z-index 무시하고
 * 올라올 경우 처리")가 따로 들어 있으므로 평소 높이는 건드리지 않고, 목록이 열려 있는 동안만 올린다.
 * #sub_layer1 을 앞세워 (1,2,0) — 그 (0,1,0) !important 를 이긴다. 헤더(9900)보다는 아래. */
#sub_layer1 .gt_submenu_bg_bar.sm8_raise { z-index: 50 !important; }
#sub_layer1 .gt_submenu_bg_bar:has(.gtsm8_dd:hover) { z-index: 50 !important; }   /* :has 를 못 읽는 브라우저는 이 줄만 무시 — 위 JS 클래스가 대신한다 */

/* tile : 바깥 선을 배경+안쪽 여백(1px)으로 그리면 둥근 모서리에서 칸의 네모난 귀퉁이가 선을 잘라 먹는다.
 * 진짜 border 로 그리면 선이 모서리를 따라 휘고, 안쪽 칸은 (반지름 - 1px) 로 매끄럽게 잘린다. */
@media (min-width: 501px) {   /* 모바일(격자·접이식)은 위·아래 선 방식을 그대로 쓴다 */
    .gtsm8.d_tile { --sm8-lpad: 0px; }
    .gtsm8.d_tile .gtsm8_list { border: 1px solid var(--sm8-line); }
}

/* line : 밑줄이 마우스를 따라다닌다 (seg 의 흰 칸과 같은 JS). 칸마다 그리던 밑줄은 PC 에서 끈다.
 * JS 가 못 돌거나 500px 이하이면 칸마다 그리는 밑줄(2px)이 그대로 남는다. */
.gtsm8.d_line .gtsm8_list { position: relative; }
@media (min-width: 501px) {
    .gtsm8.d_line.has_pill .gtsm8_pill {
        display: block;
        position: absolute;
        z-index: 2;
        top: 0; left: 0;
        width: 0; height: 0;
        box-sizing: border-box;
        border-bottom: 2px solid var(--sm8-ucfg, var(--sm8-point));
        opacity: 0;
        pointer-events: none;
    }
    .gtsm8.d_line.has_pill .gtsm8_pill.is_on { opacity: 1; }
    .gtsm8.d_line.has_pill .gtsm8_pill.is_ready { transition: left .32s cubic-bezier(.3,.7,.2,1), width .32s cubic-bezier(.3,.7,.2,1), opacity .2s; }
    .gtsm8.d_line.has_pill .gtsm8_list li a,
    .gtsm8.d_line.has_pill .gtsm8_list li a:hover,
    .gtsm8.d_line.has_pill .gtsm8_list li.now_menu a { box-shadow: none; }
    .gtsm8.d_line.has_pill .gtsm8_list li.now_menu a { color: var(--sm8-fg); }
    .gtsm8.d_line.has_pill .gtsm8_list li.is_hot a { color: var(--sm8-cfg); }
}
@media (prefers-reduced-motion: reduce) {
    .gtsm8.d_line.has_pill .gtsm8_pill.is_ready { transition: none; }
}