/* ========================================
   Layout Styles
   ======================================== */

/* 전체 레이아웃 */
#wrapper {
  display: flex;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-4);
  gap: var(--space-4);
}

/* ========================================
   Header
   ======================================== */
#hd {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

/* 팝업 레이어 스타일은 default.css에서 관리 */

/* 상단 배너 */
#top_banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-primary);
  color: white;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
}

#top_banner .inner {
  flex: 1;
}

#top_banner a {
  color: white;
}

#top_banner #hd_login_msg {
  position: static;
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: var(--font-size-sm);
}

/* 헤더 래퍼 */
#hd_wrapper {
  display: flex;
  align-items: center;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-4);
}

/* 로고 */
#logo {
  flex-shrink: 0;
}

#logo a {
  display: block;
}

#logo img {
  height: 40px;
  width: auto;
}

/* 메인 메뉴 */
#gnb {
  flex: 1;
}

#gnb ul {
  display: flex;
  list-style: none;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
}

#gnb li {
  position: relative;
}

#gnb a {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

#gnb a:hover {
  background: var(--color-bg-gray);
  text-decoration: none;
}

/* 검색 */
#hd_sch {
  display: flex;
  gap: var(--space-2);
}

#hd_sch input[type="text"] {
  width: 200px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

#hd_sch button {
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}

#hd_sch button:hover {
  background: var(--color-primary-dark);
}

/* 로그인/회원 버튼 */
.hd_login {
  display: flex;
  list-style: none;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

.hd_login a {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.hd_login a:hover {
  color: var(--color-primary);
}

/* ========================================
   Sidebar (왼쪽)
   ======================================== */
#aside_left,
#main_aside_left {
  width: 220px;
  flex-shrink: 0;
}

/* ========================================
   Container (메인 콘텐츠)
   ======================================== */
#container,
#main_content {
  flex: 1;
  min-width: 0;
}


/* ========================================
   Sidebar (오른쪽)
   ======================================== */
#aside_right,
#main_aside_right {
  width: var(--sidebar-right-width);
  flex-shrink: 0;
}

/* ========================================
   Sidebar Widget
   ======================================== */
.aside_widget {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.aside_widget h3 {
  padding: var(--space-3) var(--space-4);
  margin: 0;
  background: var(--color-primary);
  color: white;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.aside_widget ul {
  list-style: none;
  margin: 0;
  padding: var(--space-3);
}

.aside_widget li {
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--color-border);
}

.aside_widget li:last-child {
  border-bottom: none;
}

.aside_widget a {
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.aside_widget a:hover {
  color: var(--color-primary);
}

/* 광고 배너 */
.aside_ad img {
  width: 100%;
  display: block;
}

/* ========================================
   Footer
   ======================================== */
#ft {
  background: var(--color-bg-gray);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-8);
}

#ft_wrapper {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

#ft_link {
  margin-bottom: var(--space-4);
}

#ft_link a {
  margin: 0 var(--space-2);
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

#ft_link a:hover {
  color: var(--color-primary);
}

#ft_copy {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Top 버튼 */
#top_btn {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-fast);
}

#top_btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}

/* ========================================
   Main Page
   ======================================== */
#main,
#group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
}

/* 그룹 페이지 */
#group > h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text, #333);
  margin: 0 0 var(--space-4, 16px);
  padding-bottom: var(--space-3, 12px);
  border-bottom: 2px solid var(--color-primary, #8BC34A);
}

.main_section {
  margin-bottom: var(--space-2);
}

/* 인기검색어는 skin/popular/basic/style.css에서 관리 */

/* 접속자 통계는 skin/visit/basic/style.css에서 관리 */

/* 카테고리 리스트 */
.category_list {
  list-style: none;
  padding: var(--space-3);
  margin: 0;
}

.category_list li {
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--color-border);
}

.category_list li:last-child {
  border-bottom: none;
}

/* 카테고리 트리 (아코디언) */
.category_tree {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category_tree .tree-item {
  border-bottom: 1px solid var(--color-border-light);
}

.category_tree .tree-item:last-child {
  border-bottom: none;
}

.category_tree .tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
}

.category_tree .tree-header > a {
  flex: 1;
  color: var(--color-text);
  font-weight: 500;
}

.category_tree .tree-header > a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.category_tree .tree-toggle {
  background: none;
  border: none;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.category_tree .tree-toggle:hover {
  color: var(--color-primary);
}

.category_tree .tree-sub {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--color-bg-gray);
}

.category_tree .tree-sub li {
  border-top: 1px solid var(--color-border-light);
}

.category_tree .tree-sub li a {
  display: block;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-6);
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.category_tree .tree-sub li a:hover {
  background: var(--color-bg);
  color: var(--color-primary);
  text-decoration: none;
}

.category_tree .tree-item.active > .tree-header > a {
  color: var(--color-primary);
  font-weight: 600;
}

.category_tree .tree-sub li.active a {
  background: var(--color-primary);
  color: white;
}

/* 태그 클라우드 */
.tag_cloud {
  padding: var(--space-3);
}

.tag_cloud a {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  margin: 2px;
  background: var(--color-bg-gray);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}

.tag_cloud a:hover {
  background: var(--color-primary);
  color: white;
  text-decoration: none;
}