@charset "utf-8";

.c-cate-layout{
  height: calc(100dvh - (var(--header-h) + env(safe-area-inset-top)) - (var(--bottomnav-h) + env(safe-area-inset-bottom)));
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.c-cate-layout__top{
  flex: 0 0 auto;
  background: #fff;
  border-bottom: 1px solid #eee;
}

/* 메인 바디 (2단 레이아웃) - 핵심 */
  .c-split-layout {
  flex: 1; display: flex;
  overflow: hidden; height: 100%;
}

/* [왼쪽] 대분류 탭 - 140px로 확장 */
.c-split-layout__nav {
  flex: 2 0 0; /* content와 2:3 비율 */
  min-width: 140px;    /* 140px  */
  max-width: 360px;
  background: #f3f4f6;
  overflow-y: auto;
  padding-bottom: 40px;
  /* 스크롤바 숨기기 (핵심 코드) */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;    /* Firefox */
}
.c-split-layout__nav::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* 왼쪽 탭 메뉴 구분선 */
.c-side-divider {
  height: 1px;           /* 선 두께 */
  background-color: #e0e0e0; /* 선 색상 (배경보다 조금 진한 회색) */
  margin: 8px 16px;      /* 위아래 간격 8px, 좌우 여백 16px */
  flex-shrink: 0;        /* 찌그러짐 방지 */
}

/* 탭 버튼 스타일 */
.c-side-tab {
  display: flex; align-items: center;
  width: 100%; height: 52px;
  padding-left: 20px;
  text-align: left;
  font-size: 16px; color: #555; font-weight: 400;
  border: none; background: transparent;
  position: relative;
  letter-spacing: -0.5px;
}

/* 활성화 상태 (흰색으로 변하며 오른쪽 콘텐츠와 연결됨) */
.c-side-tab.is-active {
  background: #fff;
  color: #000; font-weight: 700;
  border-radius: 25px 0 0 25px;
  border-right: none;
  padding-left: 25px;
}

/* [오른쪽] 세부 콘텐츠 */
.c-split-layout__content {
  flex: 3 1 0;
  min-width: 0;
  background: #fff;
  overflow-y: auto;
  padding: 24px 20px; /*   */
  /* 스크롤바 숨기기 (핵심 코드) */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.c-split-layout__content::-webkit-scrollbar {
  display: none;
}

/* 1. 기본 패널 스타일 (숨김 해제) */
.c-panel {
  display: block; /* 항상 보임 */
  padding-top: 20px;
  padding-bottom: 30px; /* 패널 사이 간격 확보 */
  border-bottom: 1px solid #eaeaea; /* 구분선 (선택사항) */
}

/* 맨 마지막 패널은 밑줄 제거 */
.c-panel:last-child {
  border-bottom: none;
  padding-bottom: 50px; /* 하단 여백 넉넉히 */
}

/* 패널 내부 타이틀 */
.c-panel__title {
  display: block;
  font-size: 17px; font-weight: 700; color: #000;
  margin-bottom: 24px;
}

/* 서브 그룹 */
.c-sub-group { margin-bottom: 32px; }

/* 소분류 타이틀 (굵은 텍스트 + 화살표) */
.c-sub-group__title {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 16px; font-weight: 700; color: #000;
  margin-bottom: 15px; cursor: pointer;
}
.c-sub-group__title::after {
  content: 'chevron_right'; /* 구글 폰트 아이콘 코드 */
  font-family: 'Material Symbols Outlined';
  font-size: 18px; color: #999; font-weight: 500;
}

/* 리스트 아이템 */
.c-sub-list { list-style: none; padding: 0; margin: 0; }
.c-sub-list li { margin-bottom: 18px; } /* 간격 넓힘 */
.c-sub-list a {
  font-size: 16px; color: #555; letter-spacing: -0.3px; display: block;
}
.c-sub-list a:active { color: #d32f2f; } /* LG 레드 컬러 유사 */

/* 태블릿 대응 (너무 넓어지는 것 방지) */
@media (min-width: 768px) {
 /* cf) .c-drawer { max-width: 480px; box-shadow: 10px 0 40px rgba(0,0,0,0.1); } */
}


.c-login-link {
  font-size: 18px; font-weight: 700; color: #000; line-height: 35px; padding: 0 5px;
  display: flex; align-items: center; gap: 2px;
}
.c-login-link span { font-size: 20px; color: #000; }

.c-quick-scroller{
  flex: 0 0 auto;
  display: flex;
  gap: 14px;
  padding: 16px 16px 18px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.c-quick-scroller::-webkit-scrollbar{ display:none; }

.c-quick-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 56px;
}
.c-quick-item__circle{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.2;
}
.c-quick-item__label{
  font-size: 12px;
  color: #333;
  font-weight: 500;
  letter-spacing: -0.5px;
}
.c-quick-item.is-best .c-quick-item__circle { background: linear-gradient(135deg, #ff6b00, #ff9e43); }
.c-quick-item.is-event .c-quick-item__circle { background: linear-gradient(135deg, #b00020, #d32f2f); }
.c-quick-item.is-style .c-quick-item__circle { background: linear-gradient(135deg, #455a64, #607d8b); }