@charset "utf-8";

/* 그룹 리스트 기본 스타일 */
.group_list {
    width: 100%;
    padding: 15px 0;
}

.list_row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
}

.group_list.editing .card_content {
    border: 2px dotted #ff6600;
    filter: contrast(0.7) drop-shadow(1px 3px 0px rgba(0, 0, 0, 0.7));
    transition: background-color 0.3s, border 0.3s;
    border-radius: 10px;
}

.group_list_controls {
    display: flex;
    flex: 1;
    justify-content: flex-end;
}

#edit-order-btn {
    border-radius: 5px;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 12px;
    font-family: 'NanumSquare';
    border: 2px groove var(--color-bg);
    width: 40px;
    padding: 0px 5px;
    height: 28px;
}

/* 편집 모드일 때 편집 버튼 강조 */
#edit-order-btn.editing {
    background-color: #ff6600;
    color: #fff;
}

/* 그룹 카드 스타일 */
.group_card {
    position: relative;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.group_card:hover, .group_card.hover {
}

.card_content {
    filter: brightness(0.8) drop-shadow(6px 5px 0px rgba(0, 0, 0, 0.5));
    transform: scale(1);
    transition: all 0.2s;
    width: 100%;
    height: 100%;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.card_content:hover {
    filter: brightness(1) drop-shadow(4px 3px 0px rgba(0, 0, 0, 0.7));
	transform: scale(1.03);
}

.card_link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    text-decoration: none;
    color: inherit;
    display: block;
}

.card_thumb {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
	border-radius: 10px;
}

.card_info {
    padding: 15px;
    position: absolute;
    top: 0;
}

/* 기본 스타일 */
.group_title {
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    white-space: nowrap;
    font-family: "Playfair Display", serif;
    text-shadow: 0 0 5px #555, 0 0 10px #fff, 0 0 25px #bbb;
}

/* 한자, 일본어 */
.group_title.cjk-ja {
    font-family: "Zen Antique", serif;
}

/* 중국어 */
.group_title.cjk-zh {
    font-family: "Noto Serif SC", serif;
}

/* 미니 캐릭터 이미지 스타일 */
.character-images {
    display: flex;
    position: absolute;
    bottom: -15px;
    right: 10px;
    gap: 3px;
    width: 100%;
    justify-content: flex-end;
    filter: drop-shadow(5px 1px 1px rgba(0, 0, 0, 0.5));
	z-index: 11;
}

.sd-thumb img {
    max-height: 100px;
}

/* 캐릭터 카드 점프 애니메이션 */
.sd-thumb {
    transition: transform 0.2s ease;
    position: relative;
    transform-origin: center bottom;
    padding: 20px;
    margin: -20px;
  }
  
  .sd-thumb:hover {
    animation: kong-jump 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
    animation-iteration-count: 1;
  }

  
  @keyframes kong-jump {
    0% {
      transform: translateY(0) scale(1);
    }
    30% {
      transform: translateY(-15px) scale(1.05);
    }
    50% {
      transform: translateY(-18px) scale(1.05);
    }
    80% {
      transform: translateY(-5px) scale(0.98);
    }
    100% {
      transform: translateY(0) scale(1);
    }
  }

/* 빈 리스트 스타일 */
.empty_list {
    width: 100%;
    padding: 40px 0;
    text-align: center;
    color: #888;
    font-size: 1.1em;
}

/* 그룹 리스트 컨트롤 영역 */
.group-list-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}

/* 반응형 스타일 */
@media (max-width: 768px) {
    .list_row {
        justify-content: center;
    }
    
    .group_card {
        width: calc(100% - 20px) !important;
    }
}

/* 그룹 가이드 영역 */
.group-guide {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.group-sch {
    flex: 1;
    min-width: 300px;
}

.up-ui-btn{
    display: flex;
    gap: 5px;
}

.up-ui-btn .up-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 4px;
    text-decoration: none;
}

.up-ui-btn .up-btn.point {
    background: var(--color-bg);
    color: var(--color-text);
    border: 1.5px groove var(--color-2);
}

.up-ui-btn .up-btn.admin {
    background: var(--color-acc);
    color: var(--color-bg);
    border: 1.5px groove var(--color-bg);
}

/* 카테고리 영역 */
.group-board-category {
    display: flex;
    gap: 3px;
    margin-bottom: 3px;
}

.cate-btn {
    display: block;
    border-radius: 10px;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px inset var(--color-bg);
    min-width: 30px;
    max-width: 80px;
    padding: 5px;
    text-align: center;
    font-size: 12px;
    font-family: 'NanumSquare';
}

.cate-btn.point {
    background: var(--color-acc);
    color: var(--color-bg);
}

.cate-btn:hover {
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px inset var(--color-bg);
    min-width: 30px;
    max-width: 80px;
    padding: 5px;
    text-align: center;
    font-size: 12px;
    font-family: 'NanumSquare';
}

/* 페이지네이션 */
.group-board .pg_wrap .pg_page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 4px;
    text-decoration: none;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1.5px groove var(--color-2);
    font-family: 'NanumSquare';
}

.group-board .pg_wrap .pg_current.pg_page {
    background: var(--color-7);
}