/* gt_sidebanner5 — 플로팅 퀵메뉴 사이드배너
   버전 표식(파일이 바뀌면 아래 숫자도 함께 올려서 캐시를 끊는다) */
.gt_sb5 { --sb5-ver: 10; }

/* 화면 아래쪽에서부터 띄운다(위쪽 중앙 정렬 대신).
   리빌더 관리자에게만 보이는 우측 하단 관리 아이콘(설정·모듈함·환경설정, rb/rb.config/right.php)이
   항상 화면 오른쪽 아래 bottom:50px 부근에 떠 있기 때문에, 이 배너를 세로 중앙(50%)에 두면
   메뉴 항목이 많아질수록(또는 창 높이가 낮을수록) 그 관리 아이콘과 겹친다.
   bottom 기준으로 고정하면 항목이 늘어나도 아래쪽 끝은 항상 같은 자리를 지키므로
   위쪽으로만 늘어나 관리 아이콘 영역과 절대 겹치지 않는다. */
.gt_sb5 {
    position: fixed;
    bottom: var(--sb5-bottom, 190px);
    z-index: 400;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    opacity: 0;
    pointer-events: none;
    transform: translateY(var(--sb5-ty, 0)) translateX(16px);
    transition: opacity .35s ease, transform .35s ease;
    font-family: inherit;
}
.gt_sb5.gt_sb5_pos-left { transform: translateY(var(--sb5-ty, 0)) translateX(-16px); }
.gt_sb5.is_shown { opacity: 1; pointer-events: auto; transform: translateY(var(--sb5-ty, 0)) translateX(0); }

.gt_sb5.gt_sb5_pos-right { right: 16px; }
.gt_sb5.gt_sb5_pos-left  { left: 16px; }

/* anchor=middle 일 때 — 화면 세로 중앙에 둔다(관리자 아이콘과 겹칠 수 있어 기본값은 아니다) */
.gt_sb5.gt_sb5_anchor-middle { top: 50%; bottom: auto; --sb5-ty: -50%; }

@media (prefers-reduced-motion: reduce) {
    .gt_sb5, .gt_sb5_body, .gt_sb5_item, .gt_sb5_top, .gt_sb5_fab .material-icons {
        transition: opacity .35s ease !important;
    }
    .gt_sb5, .gt_sb5.is_shown { transform: translateY(var(--sb5-ty, 0)) !important; }
    .gt_sb5_skin-speed_dial .gt_sb5_item,
    .gt_sb5_skin-speed_dial .gt_sb5_top { transform: none !important; }
}

/* ---------- 내용 래퍼(기본은 특별한 동작 없음. speed_dial 에서만 여닫힌다) ---------- */
.gt_sb5_body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* ---------- 목록(실제 카드 배경) ---------- */
.gt_sb5_list {
    display: flex;
    flex-direction: column;
    background: var(--sb5-bg, #ffffff);
    color: var(--sb5-fg, #333333);
    box-shadow: 0 8px 28px rgba(0,0,0,.14);
    overflow: hidden;
}

.gt_sb5_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 78px;
    padding: 14px 8px;
    color: var(--sb5-fg, #333333);
    text-decoration: none;
    border-bottom: 1px solid var(--sb5-line, rgba(0,0,0,.08));
    transition: background-color .15s ease, color .15s ease;
}
.gt_sb5_item:last-child { border-bottom: 0; }
.gt_sb5_item:hover,
.gt_sb5_item:focus-visible { background: var(--sb5-hover, rgba(0,0,0,.045)); }
.gt_sb5_item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sb5-accent, #333); }

.gt_sb5_item.is_accent { background: var(--sb5-accent, #333333); color: var(--sb5-accentfg, #ffffff); }
.gt_sb5_item.is_accent:hover,
.gt_sb5_item.is_accent:focus-visible { filter: brightness(1.08); box-shadow: none; }

.gt_sb5_item.has_custom { background: var(--sb5-item-accent, var(--sb5-accent, #333333)); color: var(--sb5-item-fg, #ffffff); }
.gt_sb5_item.has_custom:hover { filter: brightness(1.08); }

.gt_sb5_ico .material-icons { font-size: 22px; line-height: 1; display: block; }
.gt_sb5_txt { font-size: 11px; line-height: 1.3; letter-spacing: -.2px; font-weight: 600; white-space: nowrap; }

/* ---------- 맨 위로 버튼 ---------- */
.gt_sb5_top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 0;
    background: var(--sb5-accent, #333333);
    color: var(--sb5-accentfg, #ffffff);
    border: 0;
    cursor: pointer;
    transition: filter .15s ease;
}
.gt_sb5_top .material-icons { font-size: 20px; }
.gt_sb5_top:hover,
.gt_sb5_top:focus-visible { filter: brightness(1.08); }
.gt_sb5_top:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sb5-accentfg, #fff); }

/* ---------- 상단 포인트 바(설정으로 켤 때만) ---------- */
.gt_sb5_has_topbar .gt_sb5_list::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--sb5-accent, #333333);
}

/* ---------- SNS 바로가기(완전히 독립된 .gt_sb5 블록) ---------- */
.gt_sb5_sns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.gt_sb5_snsitem {
    position: relative;
    width: 54px;
    height: 54px;
    padding: 0;
    border-bottom: 0;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.08);
}
.gt_sb5_snsitem.has_custom { border-color: rgba(0,0,0,.06); }
.gt_sb5_snsitem .gt_sb5_ico .material-icons { font-size: 24px; }
.gt_sb5_snsitem .gt_sb5_txt {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(20,20,20,.92);
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
    pointer-events: none;
}
.gt_sb5.gt_sb5_pos-right .gt_sb5_snsitem .gt_sb5_txt { right: calc(100% + 10px); }
.gt_sb5.gt_sb5_pos-left  .gt_sb5_snsitem .gt_sb5_txt { left: calc(100% + 10px); }
.gt_sb5_snsitem:hover .gt_sb5_txt,
.gt_sb5_snsitem:focus-visible .gt_sb5_txt { opacity: 1; visibility: visible; }
.gt_sb5_snsitem:hover,
.gt_sb5_snsitem:focus-visible { filter: brightness(1.06); }
.gt_sb5_snsitem:focus-visible { outline: none; box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--sb5-item-accent, #333333); }

/* ---------- 반투명 유리 질감(glass_dock 스킨 또는 tone=glass 에서 공통으로 켜짐) ----------
   흰 배경 위에서는 순백(rgba(255,255,255,.55))을 쓰면 뒤 배경과 거의 구분이 안 되므로,
   아주 옅은 회색을 섞은 유리색을 쓰고 위/아래 테두리에 미세한 하이라이트·그림자를
   안쪽으로(inset) 그려 "판유리 두께" 느낌을 준다 — 카드를 띄우는 바깥 그림자(box-shadow)는 쓰지 않는다.
   backdrop-filter 는 사진·컬러 배경 위에서만 실제 블러 효과가 보이고, 흰 배경에서는
   최소한 이 미세한 색·하이라이트 차이로 다른 스킨과 구분된다. */
.gt_sb5.is_glass .gt_sb5_list {
    background: rgba(244,244,244,.62);
    border: 1px solid rgba(0,0,0,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(0,0,0,.04);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
}
.gt_sb5.is_glass.is_dark_tone .gt_sb5_list {
    background: rgba(24,26,32,.58);
    border-color: rgba(255,255,255,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.3);
}
/* 호버 시 배경 대신 글자·아이콘 색만 바뀐다 (이미 강조색으로 채워진 accent/custom 버튼은 제외) */
.gt_sb5.is_glass .gt_sb5_item:not(.is_accent):not(.has_custom):hover,
.gt_sb5.is_glass .gt_sb5_item:not(.is_accent):not(.has_custom):focus-visible { background: transparent; color: var(--sb5-accent, #333333); }

/* =============================================================================
   스킨 5종 — 배치·상호작용 방식 자체가 다르다
   ============================================================================= */

/* ----- pill_stack : 항목마다 독립된 가로형 알약 버튼, 아이콘 왼쪽·글자 오른쪽 (그림자 없이 테두리로만 구분) -----
   "알약" 이 이 스킨의 정체성이라 모서리는 항상 완전히 둥글게 고정한다(--sb5-radius 의 영향을 받지 않음).
   버튼 사이 간격은 --sb5-gap 공용 설정을 따른다. */
.gt_sb5_skin-pill_stack .gt_sb5_list { background: transparent; box-shadow: none; gap: var(--sb5-gap, 10px); }
.gt_sb5_skin-pill_stack .gt_sb5_item {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    width: auto;
    min-width: 140px;
    padding: 10px 18px 10px 10px;
    border-radius: 999px;
    background: var(--sb5-bg, #ffffff);
    border: 1px solid var(--sb5-line, rgba(0,0,0,.1));
    border-bottom: 1px solid var(--sb5-line, rgba(0,0,0,.1));
    box-shadow: none;
}
.gt_sb5_skin-pill_stack .gt_sb5_item.is_accent {
    background: var(--sb5-accent, #333333);
    border-color: transparent;
}
.gt_sb5_skin-pill_stack .gt_sb5_item.has_custom {
    background: var(--sb5-item-accent, var(--sb5-accent, #333333));
    border-color: transparent;
}
.gt_sb5_skin-pill_stack .gt_sb5_item:not(.is_accent):not(.has_custom):hover,
.gt_sb5_skin-pill_stack .gt_sb5_item:not(.is_accent):not(.has_custom):focus-visible {
    background: var(--sb5-accent, #333333);
    color: var(--sb5-accentfg, #ffffff);
    border-color: transparent;
}
.gt_sb5_skin-pill_stack .gt_sb5_ico { flex: none; }
.gt_sb5_skin-pill_stack .gt_sb5_txt { font-size: 12px; }
.gt_sb5_skin-pill_stack .gt_sb5_top {
    margin-top: 10px;
    width: 46px;
    height: 46px;
    align-self: center;
    border-radius: 50%;
    box-shadow: none;
}

/* ----- glass_dock : 반투명 유리 카드(효과는 위 .is_glass 공통 규칙, 여기선 모양만) -----
   항목 사이 구분선은 실선 대신 2/3 길이의 점선을 가운데에 그린다. */
.gt_sb5_skin-glass_dock .gt_sb5_list { border-radius: var(--sb5-radius, 22px); }
.gt_sb5_skin-glass_dock .gt_sb5_item { position: relative; border-bottom: 0; }
.gt_sb5_skin-glass_dock .gt_sb5_item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 16.5%;
    right: 16.5%;
    bottom: 0;
    border-bottom: 1px dashed var(--sb5-line, rgba(0,0,0,.18));
}
.gt_sb5_skin-glass_dock .gt_sb5_top {
    margin-top: 10px;
    width: 46px;
    height: 46px;
    align-self: center;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* ----- neumorphic : 흰 바탕 + 테두리, 그림자 없음 (그림자를 쓰면 카드 폭에 가려 오른쪽이 잘려 보이는 문제가 있었다) -----
   라벨을 카드 안에 늘어놓지 않고 아이콘만 작은 정사각형에 담아, 다른 스킨과 뚜렷이 다르게 보이게 한다.
   글자는 speed_dial · SNS 와 같은 방식으로 호버 말풍선으로 뺀다.
   호버 시 배경은 그대로 두고 글자·아이콘 색만 강조색으로 바뀐다.
   버튼 사이 간격은 --sb5-gap, 모서리 둥근 정도는 --sb5-radius 공용 설정을 따른다. */
.gt_sb5_skin-neumorphic .gt_sb5_list { background: transparent; box-shadow: none; gap: var(--sb5-gap, 10px); }
.gt_sb5_skin-neumorphic .gt_sb5_item {
    position: relative;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: var(--sb5-radius, 16px);
    border: 1px solid rgba(0,0,0,.14);
    background: #ffffff;
    color: #444444;
    box-shadow: none;
    transition: color .15s ease, border-color .15s ease;
}
.gt_sb5_skin-neumorphic .gt_sb5_item:not(.is_accent):not(.has_custom):hover,
.gt_sb5_skin-neumorphic .gt_sb5_item:not(.is_accent):not(.has_custom):focus-visible {
    color: var(--sb5-accent, #333333);
    border-color: var(--sb5-accent, #333333);
}
.gt_sb5_skin-neumorphic.is_dark_tone .gt_sb5_item {
    background: #1c1c1e;
    color: #e4e4e4;
    border-color: rgba(255,255,255,.18);
}
.gt_sb5_skin-neumorphic .gt_sb5_item.is_accent {
    background: var(--sb5-accent, #333333); color: var(--sb5-accentfg, #ffffff);
    border-color: transparent;
}
.gt_sb5_skin-neumorphic .gt_sb5_item.has_custom {
    background: var(--sb5-item-accent, var(--sb5-accent, #333333)); color: var(--sb5-item-fg, #ffffff);
    border-color: transparent;
}
.gt_sb5_skin-neumorphic .gt_sb5_item.is_accent:hover,
.gt_sb5_skin-neumorphic .gt_sb5_item.has_custom:hover { filter: brightness(1.08); }
.gt_sb5_skin-neumorphic .gt_sb5_txt {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(20,20,20,.92);
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
    pointer-events: none;
    white-space: nowrap;
}
.gt_sb5_skin-neumorphic.gt_sb5_pos-right .gt_sb5_txt { right: calc(100% + 10px); }
.gt_sb5_skin-neumorphic.gt_sb5_pos-left  .gt_sb5_txt { left: calc(100% + 10px); }
.gt_sb5_skin-neumorphic .gt_sb5_item:hover .gt_sb5_txt,
.gt_sb5_skin-neumorphic .gt_sb5_item:focus-visible .gt_sb5_txt { opacity: 1; visibility: visible; }

/* 맨위로 버튼도 다른 원들과 같은 간격(목록의 gap 값)을 두도록, margin-top 을 0 이 아니라
   --sb5-gap 과 같은 값으로 둔다 — 0 으로 두면 위 버튼들과만 유독 다닥다닥 붙어 보인다. */
.gt_sb5_skin-neumorphic .gt_sb5_top {
    margin-top: var(--sb5-gap, 10px);
    width: 48px;
    height: 48px;
    align-self: center;
    border-radius: var(--sb5-radius, 16px);
    background: var(--sb5-accent, #333333);
    color: var(--sb5-accentfg, #ffffff);
    box-shadow: none;
}

/* ----- speed_dial : 평소엔 둥근 버튼 하나, 누르면 위로 부채꼴처럼 펼쳐짐 (그림자 없이 테두리로만 구분, 버튼 크기 통일) ----- */
.gt_sb5_skin-speed_dial { align-items: center; }
.gt_sb5_skin-speed_dial .gt_sb5_body { position: relative; width: 48px; height: 0; }
/* .gt_sb5_list 의 기본 규칙(overflow:hidden)이 원래는 카드처럼 내용을 가두려는 목적인데,
   여기서는 항목들이 이 nav 밖(.gt_sb5_body 기준)으로 멀리 떨어져 절대 위치로 떠야 하므로
   그대로 두면 화면에 전혀 안 보이게 잘려나간다. display:contents 로 nav 자신의 박스를
   아예 없애 항목들이 .gt_sb5_body 의 직계 자식처럼 렌더링되게 한다. */
.gt_sb5_skin-speed_dial .gt_sb5_list {
    display: contents;
}
.gt_sb5_skin-speed_dial .gt_sb5_item,
.gt_sb5_skin-speed_dial .gt_sb5_top {
    position: absolute;
    right: 0;
    /* .gt_sb5_body 는 높이 0 이라, 이 body 의 아래쪽 끝은 곧 그 뒤에 오는 .gt_sb5_fab 의 윗변과 같은 자리다.
       8px 는 그 fab 윗변에서부터의 첫 간격, 56px(48 원 지름 + 8 간격)씩 쌓아올린다. */
    bottom: calc(8px + (var(--i, 0) * 56px));
    width: 48px;
    height: 48px;
    padding: 0;
    border-bottom: 0;
    border-radius: 50%;
    box-shadow: none;
    opacity: 0;
    transform: scale(.5) translateY(10px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, filter .15s ease;
    transition-delay: calc(var(--i, 0) * 30ms);
}
/* 메뉴 항목(흰 원)과 맨위로 버튼(강조색 원)은 배경이 서로 달라야 한다 — 위 공용 규칙에
   배경을 같이 넣으면 두 요소가 같은 색이 되어 버튼이 배경에 묻혀 안 보이는 사고가 난다. */
.gt_sb5_skin-speed_dial .gt_sb5_item {
    background: var(--sb5-bg, #ffffff);
    border: 1px solid var(--sb5-line, rgba(0,0,0,.1));
}
.gt_sb5_skin-speed_dial .gt_sb5_top {
    background: var(--sb5-accent, #333333);
    color: var(--sb5-accentfg, #ffffff);
}
.gt_sb5_skin-speed_dial.gt_sb5_pos-left .gt_sb5_item,
.gt_sb5_skin-speed_dial.gt_sb5_pos-left .gt_sb5_top { right: auto; left: 0; }
.gt_sb5_skin-speed_dial .gt_sb5_item.is_accent { background: var(--sb5-accent, #333333); border-color: transparent; }
.gt_sb5_skin-speed_dial .gt_sb5_item.has_custom { background: var(--sb5-item-accent, var(--sb5-accent, #333333)); border-color: transparent; }
.gt_sb5_skin-speed_dial .gt_sb5_item:hover,
.gt_sb5_skin-speed_dial .gt_sb5_item:focus-visible,
.gt_sb5_skin-speed_dial .gt_sb5_top:hover,
.gt_sb5_skin-speed_dial .gt_sb5_top:focus-visible { filter: brightness(.95); }
.gt_sb5_skin-speed_dial.is_open .gt_sb5_item,
.gt_sb5_skin-speed_dial.is_open .gt_sb5_top {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}
.gt_sb5_skin-speed_dial .gt_sb5_txt {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(20,20,20,.92);
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
    pointer-events: none;
    white-space: nowrap;
}
.gt_sb5_skin-speed_dial.gt_sb5_pos-right .gt_sb5_txt { right: calc(100% + 10px); }
.gt_sb5_skin-speed_dial.gt_sb5_pos-left  .gt_sb5_txt { left: calc(100% + 10px); }
.gt_sb5_skin-speed_dial .gt_sb5_item:hover .gt_sb5_txt,
.gt_sb5_skin-speed_dial .gt_sb5_item:focus-visible .gt_sb5_txt,
.gt_sb5_skin-speed_dial .gt_sb5_top:hover .gt_sb5_txt,
.gt_sb5_skin-speed_dial .gt_sb5_top:focus-visible .gt_sb5_txt { opacity: 1; visibility: visible; }

.gt_sb5_fab {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--sb5-accent, #333333);
    color: var(--sb5-accentfg, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    box-shadow: none;
    flex: none;
}
.gt_sb5_fab .material-icons { font-size: 24px; transition: transform .25s ease; }
.gt_sb5_skin-speed_dial.is_open .gt_sb5_fab .material-icons { transform: rotate(45deg); }
.gt_sb5_fab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sb5-accentfg, #fff); }

/* ----- float_pill : 하나로 이어붙은 부드러운 카드 (가장 기본형) -----
   라운드 정도는 --sb5-radius 공용 설정을 따른다. 호버 시 배경이 강조색으로 채워지고
   글자·아이콘은 흰색(정확히는 강조색 위에서 읽히는 자동 대비색)이 된다. */
.gt_sb5_skin-float_pill .gt_sb5_list { border-radius: var(--sb5-radius, 20px); }
.gt_sb5_skin-float_pill .gt_sb5_item:not(.is_accent):not(.has_custom):hover,
.gt_sb5_skin-float_pill .gt_sb5_item:not(.is_accent):not(.has_custom):focus-visible {
    background: var(--sb5-accent, #333333);
    color: var(--sb5-accentfg, #ffffff);
}
.gt_sb5_skin-float_pill .gt_sb5_top {
    margin-top: 10px;
    width: 46px;
    height: 46px;
    align-self: center;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* ----- glass_pills : 옅은 회색 반투명 바탕의 카드 안에, 아이콘들이 각자 원으로 떠 있음. 맨위로 버튼 없음 -----
   카드 자체에 여백(--sb5-pillpad)·테두리·라운드(공용 설정)를 주고, 그 안에서 원형 버튼(--sb5-pillsize)들이
   간격(공용 설정)을 두고 늘어선다. */
.gt_sb5_skin-glass_pills .gt_sb5_list {
    background: rgba(120,120,120,.12);
    border: 1px solid rgba(120,120,120,.1);
    border-radius: var(--sb5-radius, 20px);
    box-shadow: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: var(--sb5-pillpad, 14px);
    gap: var(--sb5-gap, 10px);
    align-items: center;
    overflow: visible; /* 말풍선(.gt_sb5_txt)이 카드 바깥으로 나가야 하므로, 카드를 가두던 overflow:hidden 을 이 스킨만 푼다 */
}
.gt_sb5_skin-glass_pills.is_dark_tone .gt_sb5_list {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.2);
}
.gt_sb5_skin-glass_pills .gt_sb5_item {
    position: relative;
    width: var(--sb5-pillsize, 44px);
    height: var(--sb5-pillsize, 44px);
    padding: 0;
    border-bottom: 0;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.08);
    color: #444444;
    transition: color .15s ease, border-color .15s ease;
}
.gt_sb5_skin-glass_pills .gt_sb5_ico .material-icons { font-size: calc(var(--sb5-pillsize, 44px) * 0.5); }
.gt_sb5_skin-glass_pills.is_dark_tone .gt_sb5_item {
    background: #1c1c1e;
    color: #e4e4e4;
    border-color: rgba(255,255,255,.16);
}
.gt_sb5_skin-glass_pills .gt_sb5_item:not(.is_accent):not(.has_custom):hover,
.gt_sb5_skin-glass_pills .gt_sb5_item:not(.is_accent):not(.has_custom):focus-visible {
    background: var(--sb5-accent, #333333);
    color: var(--sb5-accentfg, #ffffff);
    border-color: transparent;
}
.gt_sb5_skin-glass_pills .gt_sb5_item.is_accent {
    background: var(--sb5-accent, #333333); color: var(--sb5-accentfg, #ffffff); border-color: transparent;
}
.gt_sb5_skin-glass_pills .gt_sb5_item.has_custom {
    background: var(--sb5-item-accent, var(--sb5-accent, #333333)); color: var(--sb5-item-fg, #ffffff); border-color: transparent;
}
.gt_sb5_skin-glass_pills .gt_sb5_item.is_accent:hover,
.gt_sb5_skin-glass_pills .gt_sb5_item.has_custom:hover { filter: brightness(1.08); }
.gt_sb5_skin-glass_pills .gt_sb5_txt {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(20,20,20,.92); color: #ffffff; padding: 6px 10px; border-radius: 6px;
    font-size: 11px; opacity: 0; visibility: hidden; transition: opacity .2s ease; pointer-events: none; white-space: nowrap;
}
.gt_sb5_skin-glass_pills.gt_sb5_pos-right .gt_sb5_txt { right: calc(100% + 10px); }
.gt_sb5_skin-glass_pills.gt_sb5_pos-left  .gt_sb5_txt { left: calc(100% + 10px); }
.gt_sb5_skin-glass_pills .gt_sb5_item:hover .gt_sb5_txt,
.gt_sb5_skin-glass_pills .gt_sb5_item:focus-visible .gt_sb5_txt { opacity: 1; visibility: visible; }

/* ----- emboss_pills : 흰 바탕 카드 안에, 아이콘들이 안쪽 하이라이트로 도드라져 보이는 사각 버튼으로 떠 있음(뒤 배경이
   무엇이든 항상 또렷함). 맨위로 버튼 없음. 카드 자체는 그림자 없이 테두리만으로 단순하게 구분한다. */
.gt_sb5_skin-emboss_pills .gt_sb5_list {
    background: #ffffff;
    border: 0px solid rgba(0,0,0,.07);
    border-radius: var(--sb5-radius, 20px);
    box-shadow: none;
    padding: var(--sb5-pillpad, 14px);
    gap: var(--sb5-gap, 10px);
    align-items: center;
    overflow: visible; /* 말풍선(.gt_sb5_txt)이 카드 바깥으로 나가야 하므로, 카드를 가두던 overflow:hidden 을 이 스킨만 푼다 */
}
.gt_sb5_skin-emboss_pills .gt_sb5_item {
    position: relative;
    width: var(--sb5-pillsize, 44px);
    height: var(--sb5-pillsize, 44px);
    padding: 0;
    border-bottom: 0;
    border-radius: 14px;
    background: #f2f0eb;
    border: 0;
    box-shadow: -4px -4px 8px rgba(255,255,255,.9), 4px 4px 8px rgba(0,0,0,.18);
    color: #444444;
    transition: color .15s ease, box-shadow .15s ease;
}
.gt_sb5_skin-emboss_pills .gt_sb5_ico .material-icons { font-size: calc(var(--sb5-pillsize, 44px) * 0.5); }
/* 호버 시 테두리·배경은 그대로 두고, 그림자만 눌린 듯(inset) 반대로 바꿔 입체감을 강조하고
   아이콘 색만 강조색으로 바뀐다 (글자는 따로 없어 아이콘에만 적용되는 셈이다). */
.gt_sb5_skin-emboss_pills .gt_sb5_item:not(.is_accent):not(.has_custom):hover,
.gt_sb5_skin-emboss_pills .gt_sb5_item:not(.is_accent):not(.has_custom):focus-visible {
    color: var(--sb5-accent, #333333);
    box-shadow: inset -3px -3px 6px rgba(255,255,255,.8), inset 3px 3px 6px rgba(0,0,0,.16);
}
.gt_sb5_skin-emboss_pills .gt_sb5_item.is_accent {
    background: var(--sb5-accent, #333333); color: var(--sb5-accentfg, #ffffff);
    box-shadow: -4px -4px 8px rgba(255,255,255,.18), 4px 4px 8px rgba(0,0,0,.3);
}
.gt_sb5_skin-emboss_pills .gt_sb5_item.has_custom {
    background: var(--sb5-item-accent, var(--sb5-accent, #333333)); color: var(--sb5-item-fg, #ffffff);
    box-shadow: -4px -4px 8px rgba(255,255,255,.18), 4px 4px 8px rgba(0,0,0,.3);
}
.gt_sb5_skin-emboss_pills .gt_sb5_item.is_accent:hover,
.gt_sb5_skin-emboss_pills .gt_sb5_item.has_custom:hover { filter: brightness(1.08); }
.gt_sb5_skin-emboss_pills .gt_sb5_txt {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(20,20,20,.92); color: #ffffff; padding: 6px 10px; border-radius: 6px;
    font-size: 11px; opacity: 0; visibility: hidden; transition: opacity .2s ease; pointer-events: none; white-space: nowrap;
}
.gt_sb5_skin-emboss_pills.gt_sb5_pos-right .gt_sb5_txt { right: calc(100% + 10px); }
.gt_sb5_skin-emboss_pills.gt_sb5_pos-left  .gt_sb5_txt { left: calc(100% + 10px); }
.gt_sb5_skin-emboss_pills .gt_sb5_item:hover .gt_sb5_txt,
.gt_sb5_skin-emboss_pills .gt_sb5_item:focus-visible .gt_sb5_txt { opacity: 1; visibility: visible; }