@charset "UTF-8";
/* CSS Document */


/*
/theme/henallte/design/css/golfstar-ui.css

작은 UI 부품(버튼/폼/뱃지 등)

.gs-btn-* 버튼류

.gs-tag, .gs-pill, .gs-badge-*

.gs-input, .gs-select, .gs-field, 폼 요소

공통 카드 스타일 .gs-card, .gs-chip 등

자주 쓰는 유틸: .text-muted, .flex-center 등

👉 여러 메뉴에서 재사용되는 “부품” 스타일은 여기.
*/


/* === App Bar === */
.app-bar{
  position:sticky;
  top:0;
  z-index:1000;
  display:flex;
  align-items:center;
  gap:0;
  height:25px;
  padding:0 calc(var(--space-lg) + var(--safe-top));
  /* background:var(--card); */
  border-bottom:1px solid var(--line);
}
.app-title{
  font-family:'GmarketSansMedium', system-ui, -apple-system, sans-serif !important;
  font-size:13px;
  width:100%;
  margin:0 auto;
  text-align:center;
  color:#84c3f6;
}
.app-actions{
  margin-left:auto;
  display:flex;
  gap:8px;
}

/* 상단 로고 */
.top_logo{
  width:120px;
  height:auto;
  margin:0 auto;
  padding:5px 0;
}
.top_logo img{width:100%;}

/* === Tabbar (bottom navigation) === */
.tabbar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:9999;
  height:var(--tabbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 8px;
  background:var(--card);
  border-top:1px solid var(--line);
}
.tab-item{
  flex:1 1 20%;
  min-width:64px;
  text-align:center;
  border:0;
  background:none;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:11px;
  color:var(--muted);
  text-decoration:none;
}
.tab-item i{font-size:18px; line-height:1;}
.tab-item span{display:block; line-height:1;}
.tab-item span b{margin-right:5px;}
.tab-item:active{opacity:.9;}
.tab-item:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}
.tab-item:hover,
.tab-item.active{
  color:var(--brand);
  font-weight:700;
}

/* 중앙 브랜드 버튼 */
.tab-item.brand{
  position:relative;
  top:-18px;
  flex:0 0 auto;
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  box-shadow:0 8px 18px rgba(37,170,225,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:800;
  border:4px solid var(--card);
}
.tab-item.brand .brand-text{transform:translateY(1px);}

/* 다크 변형 */
html[data-theme="dark"] .tabbar{
  background:var(--card);
  border-color:var(--line);
}
html[data-theme="dark"] .tab-item.brand{
  border-color:var(--card);
}

/* === App Footer (모바일에서도 문서 맨 아래에 붙도록) === */
.app-foot{
  padding-bottom: calc(var(--tabbar-h) + 20px + var(--safe-bottom));
}
.app-foot .foot-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* 모바일에서도 떠있지 않고, 일반 footer처럼 동작 */
@media (max-width:768px){
  .app-foot{
    position: static;        /* 절대 위치 → 일반 흐름으로 */
    right: auto;
    left: auto;
    bottom: auto;
    padding: 10px 14px 0;    /* 필요하면 조정 */
    background: transparent;
    z-index: auto;
  }

  .app-foot small{
    display:none;            /* 모바일에서 카피라이트 숨길거면 유지, 보여주려면 block 으로 */
  }

  .app-foot .foot-inner{
    padding:0;
    justify-content:space-between;
  }
}

/* 탭바에 가려지지 않도록 여유 공간 확보 */
footer.app-foot{
  padding-bottom: calc(84px + var(--safe-bottom)) !important;
}