@import url("./normalize.css");
@import url("./theme.css");
@import url("./base.css");


/*main.html*/


/* 공통 메인 컨텐츠 */

/* 공통 메인 콘텐츠 */
.appMain{
  width: 100%;
  max-width: var(--container-width);
  padding: var(--spacing-2xl) var(--spacing-lg);
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto;
  grid-template-areas: "hot-board"
                       "newest-board"
                    /*   "community-board"
                       "review-board"
                       "divide-container"*/;
}


.hot-board, .newest-board, .productInfo, .notice {
  width: 100%;
}


/* 공통 메인 콘텐츠 섹션 제목 */
.appMain [class*="__title"] {
  padding-left : var(--spacing-xl);
  padding-top: var(--spacing-base);
  padding-bottom: var(--spacing-base);
  font-weight: 700;
  font-size: var(--text-lg);

}

/* 공통 타이틀 옆 설명 */
.appMain .board-description{
  font-size: var(--text-md);
  font-weight: 400;
}

/* 공통 메인페이지 박스 컨테이너 */

.main-board-container{
    border-radius : 6px;
    margin-top : var(--spacing-xl);
    margin-bottom : var(--spacing-2xl);
  /*  box-shadow: 0 0 7px 0 rgba(0,0,0,.14);*/
}

/*공통 커뮤니티 게시물 목록 컨테이너 */
.community-board-container{
    border: thin solid var(--main-item-border-color);
    background : white;
    border-radius : 6px;
 /*   margin-top : var(--spacing-xl);*/
    box-shadow: 0 0 7px 0 rgba(0,0,0,.14);
}

.post-list{
    height : auto;
}

/*  */
.board__title.has-background{
    border-top-left-radius : 6px;
    border-top-right-radius : 6px;
    background : var(--secondary-color);
    color : white;
}

.community-board-container .board__more{
    color : white;
}

/* 섹션 이름 */
.hot-board{
  grid-area: hot-board;
}

/* 섹션 이름 */
.newest-board{
  grid-area: newest-board;
}

/* 섹션 이름 */
.community-board{
  grid-area: community-board;
}

/* 섹션 이름 */
.review-board{
  grid-area: review-board;
}

/* 섹션 이름 */
.divide-container{
  grid-area: divide-container;
}



/* 공통 게시판 */
.hot-board, .newest-board, .community-board, .review-board, divide-container {
  position: relative;
}


.board__list {
   /* padding-right : var(--spacing-base);*/

}

.board__item {
  display : flex;
  position : relative;
  height : 76px;
  align-items : center;
  word-break: break-word;
  word-wrap: break-word;
  padding-top: var(--spacing-2xs);
  padding-bottom: var(--spacing-2xs);
  padding-right : var(--spacing-2xs);
}



/* 홀수 번째 board__item에 스타일 적용 */
.board__list .board__link:nth-child(odd) .board__item{
    border-top : 1px solid var(--main-item-border-color);
    border-bottom : 1px solid var(--main-item-border-color);
}

/* 홀수 번째 board__item에 스타일 적용 */
.board__list .board__link:nth-child(even) .board__item{
}

.board__link {
  /* flex-grow: 1; */
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board__date {
  flex-grow: 1;
  padding-left: var(--spacing-xs);
  padding-right: var(--spacing-xs);
}

.board__more {
  position: absolute;
  top: 0;
  right: var(--spacing-base);
  padding: var(--spacing-sm);
 /* transform: translateX(var(--spacing-xs));*/
 /* color : white;*/
}

.title-box{
    display : flex;
}

/* 메인페이지 타이틀 글자 넘어가면 ... 줄임표시 */
.post-title{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-category{
    padding-left : var(--spacing-sm);
    padding-right : var(--spacing-xs);
    font-weight : 700;
}

/* 공통 작성자, 게시시간, 조회수  */
.post-meta-container{
    color: var(--silver-text-color);
    font-size: var(--text-sm);
    font-weight: 400;
    padding-top: var(--spacing-2xs);
    padding-left : var(--spacing-base);
    white-space : nowrap;
}

.text-area{
    display : flex;
    flex-direction : column;
    width : calc(100% - 120px);
}
/* 썸네일이 없는 경우 크기 조정 23.10.11 */
.text-area.no-thumbnail{
    width : calc(100% - 60px);
}


/*썸네일 영역*/
.thumbnail-area{
    position : absolute;
    right : 60px;
    margin: var(--spacing-sm) 0;
    width : 56px;
    height : 56px;
    overflow: hidden; /* 추가 */
}

.thumbnail-image{
    border-radius: 6px;
    /*이미지가 위 thumbnail-area에 꽉차도록하는 설정 시작*/
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*이미지가 위 thumbnail-area에 꽉차도록하는 설정 끝*/
}

/* 공통 댓글 영역 */
.comment-count-area{
    position : absolute;
    right : var(--spacing-2xs);
    display : flex;
    flex-direction : column;
    width: 44px;
    height: 60px;
    padding-top: 12px;
    border-radius: 6px;
    background : #f5f6f8;
    text-align : center;
}

.comment-count{
    word-break: break-word;
    word-wrap: break-word;
    font-weight : 700;
}
.comment-text-title{
    color : var(--silver-text-color);
    font-size : var(--text-sm);
    font-weight : 400;
}




/* 공통 게시물 등록 버튼 현재 미사용 */
.circle-button-wrap{
    padding: var(--spacing-xs);
    /*margin: 2px 0;*/
    width: 44px;
    height: 44px;
    border-radius : 50%;
    background-color : var(--pink-button-color);
    color : white;
    position: sticky;
    bottom : 40px;
  /*  left : calc(100% - 80px);*/
    display: flex;
    flex-flow: column;
    align-items: center;
    grid-area: circle-button-wrap;
    align-self: end; /* or align-self: flex-end; */
    cursor: pointer;
    transition : background-color .15s ease-out;
}

.circle-button-wrap:hover{
    background-color: var(--pink-button-hover-color);
}


.circle-button-icon{
    font-size : var(--text-xl);
}

.circle-button-text{
    color : var(--primary-color);
    white-space: nowrap;
    margin-top : var(--spacing-sm);
    font-weight : 500;
}

/*데스크탑 */
@media (min-width: 768px) {

    /*데스크탑 메인 전체 테두리 */
    .main-page-content{
        display : flex;
        justify-content: center;
        flex-wrap: wrap;
        width : 100%;
    }

    /* 데스크탑 메인 콘텐츠 */
    /* 24.6.19 구분선을 위한 추가 */
    .appMain{
        display: grid;
        width : calc(100% - 350px);
        margin-bottom : 120px;
        gap: var(--spacing-md);
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "hot-board hot-board hot-board hot-board hot-board hot-board hot-board hot-board"
                             "newest-board newest-board newest-board newest-board newest-board newest-board newest-board newest-board";
                           /*  "divide-container divide-container divide-container divide-container divide-container divide-container divide-container divide-container "
                             "community-board community-board community-board community-board review-board review-board review-board review-board"*/


    }

    /* 데스크탑 우측 콘텐츠 */
    .side-column{
        position : sticky;
        top : 0;
        height : 900px;
        float: left;
        width: 300px;
    }

    /* 데스크탑 우측 광고 컨테이너 */
    .side-column-ads-container {
        position: sticky;
        top: 20px;
        overflow: hidden;
    }


}



/*모바일 기기*/
@media (min-width: 320px) and (max-width: 767px){

    /* 모바일 메인 콘텐츠 */
    .appMain{
        display: grid;
        margin-bottom : 60px;
        gap: var(--spacing-md);
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: "hot-board hot-board hot-board"
                             "newest-board newest-board newest-board"
                           /*  "divide-container divide-container divide-container"
                             "community-board community-board community-board"
                             "review-board review-board review-board"*/;
    }


    /* 모바일 우측 광고 컨테이너 */
    .side-column-ads-container {
        overflow: hidden;
    }



}

/* 섹션 내비게이션 스타일 */
.board__title .nav-item {
    padding: var(--spacing-2xs) var(--spacing-sm);
    cursor: pointer;
    font-weight: normal;
    color: var(--silver-text-color); /* 기본 색상을 더 흐리게 */
    transition: color 0.3s ease, font-weight 0.3s ease;
}


.board__title .nav-item.active {
    color: var(--point-color-blue);
    font-weight: bold;
}


/* 섹션 간 여백 추가 */
.main-board-container {
    margin-bottom: var(--spacing-2xl); /* 각 섹션 하단에 여백 추가 */
}