/* 976 720 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: rgb(236, 244, 251);
}

a {
    text-decoration: none;
}

body {
    /* background-color: rgb(23, 24, 25); */
    background-color: #0d1117;
}

/********************/
/****** common ******/
/********************/
#wrapper {
    width: 100vw;
    height: 100vh;
}


/**********************/
/****** side bar ******/
/**********************/

/***** head-bar *****/
#head-bar {
    position: fixed;
    display: none;
    background-color: rgba(0, 0, 0, 0.8);
    height: 3.5rem;

    @media (max-width: 1000px) {
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: center;

    }
}

#head-bar>.menu {
    position: absolute;
    left: 0;
    width: 2rem;
    height: 2rem;
    margin-left: 0.7rem;
    border-radius: 50%;
    object-fit: cover;
}

#head-bar>.title {
    position: absolute;
    align-items: center;
    font-size: large;
}

#head-bar>.img {
    position: absolute;
    right: 0;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    object-fit: cover;
}

/***** side-bar *****/

#sidebar {
    position: fixed;
    /* position: absolute; */
    display: flex;
    flex-direction: column;
    width: 16rem;
    height: 100%;
    background-color: rgb(31, 31, 34);

    transition: width 0.3s ease;

    overflow: scroll;

    margin-bottom: 2rem;

    /* @media (max-width: 1000px) {
        width: 100%;

        display: none;
    } */
}

/* #sidebar:hover {
    @media (min-width: 1000px) {
        width: 20rem;
    }
} */

#sidebar hr {
    border: 1px solid #4f4f4f;
    margin: 0 1rem;
}

/* #sidebar>.close {
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    top: 1rem;
    left: 1rem;
    display: none;

    @media (max-width: 1000px) {
        display: block;
    }

} */

#sidebar>.navi-wrapper {
    margin-bottom: 2rem;
}

#sidebar>#profile {
    display: flex;
    width: 100%;

    padding: 2rem 2rem 1rem 2rem;

    flex-direction: column;
    align-items: center;

}

#sidebar>#profile>a .img {
    width: 8rem;
    height: 8rem;
    margin-bottom: 1rem;
    background-color: gray;
    border-radius: 50%;
    object-fit: cover;
}

#sidebar>.search {
    display: flex;
    text-align: center;
    margin: 1rem;
    padding: 0.5rem 1rem;
    background-color: rgb(38, 38, 41);
    border-radius: 2rem;
}

#sidebar>.search>svg {
    /* height: 1rem;
    width: 1rem; */
    /* color: white; */
}

#sidebar>.search>.word {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background-color: inherit;
    /* background-color: gray; */
    margin-left: 0.5rem;
}


#sidebar>.navi {}

#sidebar>.navi>.tt_category {
    margin: 0 1rem;
}

#sidebar>.navi>.tt_category .link_tit {
    display: block;
    /* margin-bottom: 0.5rem; */
    margin: 0.75rem 0;
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 700;
    color: rgb(244 244 246 / var(--tw-text-opacity));
}

#sidebar>.navi>.tt_category a {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    /* color: rgb(244 244 246 / var(--tw-text-opacity)); */
    color: rgb(189, 197, 203);

}

#sidebar>.navi>.tt_category .category_list ul {
    margin: 0 1rem;
}

#sidebar>.navi>.tt_category ul>li {
    font-weight: bold;
}

#sidebar>.navi>.tt_category li {
    cursor: pointer;
    list-style: none;
    /* margin-bottom: 0.5rem; */
}

#sidebar>.recentPost {
    margin: 0.5rem 1rem;
}

#sidebar>.recentPost>.title {
    display: block;
    /* margin-bottom: 0.5rem; */
    margin: 0.75rem 0;
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 700;
    color: rgb(244 244 246 / var(--tw-text-opacity));
}

#sidebar>.recentPost li {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    color: rgb(189, 197, 203);
}

#sidebar>.recentPost li>* {
    color: rgb(189, 197, 203);
}

#sidebar>.recentPost li>.cate {
    font-size: 0.750rem;
}

#sidebar>.recentPost li>.title {
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    color: rgb(189, 197, 203);
}

/****** counter ******/
#sidebar>.counter {
    width: 100%;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

#sidebar>.counter>span {
    margin: 0 0.25rem;
}

#sidebar>.counter>.total {
    color: #dc3545;
}

#sidebar>.counter>.today {
    color: #ffc107;
}

#sidebar>.counter>.yesterday {
    color: #0d6efd;
}


/****** Copyright ******/
#sidebar>.copyright {
    width: 100%;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: rgb(236, 244, 251);
}

#sidebar>.copyright>.img {
    width: 0.8rem;
    height: 0.8rem;
    margin-right: 0.2rem
}

#sidebar>.copyright>a {
    cursor: pointer;
}

#sidebar>.copyright>a:hover {
    color: rgb(112, 202, 234) !important;
}

/********************/
/***** contents *****/
/********************/

#contents {
    margin-left: 16rem;
    height: 100%;
    /* padding: 2rem auto; */

    /* @media (max-width: 1000px) {
        margin-left: 0;
        padding-top: 2.5rem;
    } */
}

#contents>.main {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 2rem 0;
    overflow: scroll;
    max-width: 45rem;

    @media (max-width: 1000px) {
        margin: 0 2rem;
        width: auto;

    }
}

#contents>.main>.title {
    margin-bottom: 1rem;
}

#contents .main .desc {
    padding: 1rem;
    background-color: #161b22;
    border-radius: 0.8rem;
    margin-bottom: 1rem;
    line-height: 1.5rem;
}

#contents .main .main-page {
    margin-top: 1.5rem;
    width: 100%;
}

#contents>.main .card {
    float: left;
    display: flex;
    flex-direction: column;

    padding: 1rem 0.5rem;

    width: calc(100% / 3);
    height: 18rem;

    border-bottom: 1px solid gray;
}

#contents .main .card>.thumbnailBox {
    background-color: black;
    margin-bottom: 0.25rem;
    width: 100%;
    /* height: 10rem; */
    /* padding-top: 66.66%; */
    aspect-ratio: 3/2;
    overflow: hidden;
}

#contents .main .card>.thumbnailBox>.thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 이미지 비율 유지하며 컨테이너 채우기 */
}

#contents .main .card>.title {
    color: rgb(189, 197, 203);
}

#contents .main .card>.info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

#contents .main .card>.info>.cate {
    padding-right: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#contents .main .card>.info>.date {
    white-space: nowrap;
    color: rgb(189, 197, 203);
}

#contents .paging {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
    font-size: 1rem;
}

#contents .paging>a {
    margin: 0 0.5rem;
}

#contents .paging>.numbox {
    display: flex;
}

#contents .paging>.numbox>a {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

#contents .paging>.numbox>a:has(.selected) {
    background-color: rgb(65, 65, 70);
    /* background-color: gray; */
    border-radius: 50%;
}

/********** 글 화면 **********/
#contents>.main .content-page {
    display: block;
    width: 100%;
    float: left;
}

/* #contents:not(.tt-body-page) .main .page {
    display: none;
} */


/* 홈화면	tt-body-index
카테고리 글 리스트	tt-body-category
글화면	tt-body-page
보관함 글 리스트	tt-body-archive
태그 리스트	tt-body-tag
검색결과 리스트	tt-body-search
방명록	tt-body-guestbook
지역로그	tt-body-location */

#tt-body-index .t-base,
#tt-body-index .content-page {
    display: none !important;
}

#tt-body-search .t-index,
#tt-body-search pre.desc,
#tt-body-search .content-page {
    display: none !important;
}

#tt-body-category .t-index,
#tt-body-category pre.desc,
#tt-body-category .content-page {
    display: none !important;
}

#tt-body-page .t-index,
#tt-body-page pre.desc,
#tt-body-page .card {
    display: none !important;
}

.hljs {
    color: rgb(236, 244, 251) !important;
}

#contents .bookmark {
    top: 3rem;
    padding: 0.5rem;
    margin: 1rem;
    position: fixed;
    right: 0;

    @media (max-width: 1100px) {
        display: none;
    }
}

#contents .bookmark>.title {
    display: flex;
    justify-content: flex-end;

    font-size: 0.8rem;

    margin: 0.8rem 0;
}

#contents .bookmark>.t1>div>a,
#contents .bookmark>.t2>div>a {
    color: white;
    font-weight: bolder;
}

#contents .bookmark>.title>div {
    padding: 0.2rem 0.5rem;
    border: 0.5px solid #4f4f4f;
    border-radius: 0.3rem;

    /* background-color: rgba(47, 53, 63, 0.5); */

    background-color: rgb(13, 17, 23);

    height: 1.2rem;

    transform-origin: 0 100% 0;
    transform: rotateX(90deg);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;

    cursor: pointer;

    box-shadow: -0.3rem 0.4rem 0.3rem black;
}

#contents .bookmark>.title>div:hover {
    background-color: rgb(51, 55, 61);
}

#contents .bookmark>.title>p {
    padding: 0.2rem 0rem 0.2rem 0.2rem;
    height: 1.2rem;
}

#contents .bookmark:hover>.title>div {
    transform: rotateX(0deg);
    opacity: 1
}

#contents>.main>.temp {
    background-color: skyblue;
}



/**********************/
/****** comments ******/
/**********************/

/* 댓글 전체 영역 */
.tt_box_namecard {
    border-radius: 0.4rem;
    background-color: #161b22;
    min-height: 103px;
}

.tt_box_namecard .tt_cont {
    padding: 32px 0 32px 32px;
}

.tt_box_namecard .tt_tit_cont {
    color: rgb(244, 244, 246);
}

.comment-area {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #4f4f4f;
    /* 사이드바 hr과 동일한 색상 */
}

.comment-area h3 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    color: rgb(244, 244, 246);
}

/* 댓글 목록 */
.comment-list ul {
    list-style: none;
}

.comment-list>ul>li {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #30363d;
    /* 본문 배경보다 살짝 밝은 구분선 */
}

.comment-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.comment-info .name {
    font-weight: 700;
    color: rgb(244, 244, 246);
}

.comment-info .date {
    font-size: 0.8rem;
    color: rgb(139, 148, 158);
    /* 날짜는 조금 더 흐리게 */
}

.comment-desc {
    line-height: 1.6;
    margin-bottom: 0.5rem;
    word-break: break-all;
    color: rgb(236, 244, 251);
}

.comment-control {
    font-size: 0.8rem;
}

.comment-control a {
    color: rgb(189, 197, 203);
    margin-right: 0.75rem;
    cursor: pointer;
}

.comment-control a:hover {
    color: rgb(112, 202, 234);
    /* 사이드바 저작권 호버 색상과 통일 */
}

/* 대댓글 (답글) 스타일 */
.re-comment {
    margin-top: 1rem;
    margin-left: 1.5rem;
    padding-left: 1rem;
    border-left: 2px solid #30363d;
}

.re-comment li {
    margin-bottom: 1rem;
}

/* 댓글 입력 폼 */
.comment-form {
    background-color: #161b22;
    /* 본문 설명창(desc)과 동일한 배경색 */
    padding: 1.5rem;
    border-radius: 0.8rem;
    margin-top: 2rem;
}

.guest-info {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.guest-info input {
    flex: 1;
    background-color: #0d1117;
    /* 메인 배경색 */
    border: 1px solid #30363d;
    padding: 0.6rem 0.8rem;
    border-radius: 0.4rem;
    outline: none;
    color: white;
}

.guest-info input:focus {
    border-color: rgb(112, 202, 234);
}

.comment-write {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.comment-write textarea {
    width: 100%;
    min-height: 100px;
    background-color: #0d1117;
    border: 1px solid #30363d;
    padding: 0.8rem;
    border-radius: 0.4rem;
    resize: vertical;
    outline: none;
    color: white;
    font-family: inherit;
}

.comment-write textarea:focus {
    border-color: rgb(112, 202, 234);
}

.comment-write button {
    align-self: flex-end;
    background-color: #21262d;
    border: 1px solid #4f4f4f;
    padding: 0.5rem 1.5rem;
    border-radius: 0.4rem;
    cursor: pointer;
    font-weight: 700;
    color: white;
    transition: all 0.2s;
}

.comment-write button:hover {
    background-color: #30363d;
    border-color: #8b949e;
}

/**********************/
/****** guestbook ******/
/**********************/

.guestbook-area {
    margin-top: 1rem;
    width: 100%;
}

/* 방명록 입력 폼 (댓글 폼 스타일 계승) */
.guest-form {
    background-color: #161b22;
    padding: 1.5rem;
    border-radius: 0.8rem;
    margin-bottom: 2rem;
}

.guest-info {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.guest-info input {
    flex: 1;
    background-color: #0d1117;
    border: 1px solid #30363d;
    padding: 0.6rem 0.8rem;
    border-radius: 0.4rem;
    outline: none;
    color: white;
}

.guest-write {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.guest-write textarea {
    width: 100%;
    min-height: 80px;
    background-color: #0d1117;
    border: 1px solid #30363d;
    padding: 0.8rem;
    border-radius: 0.4rem;
    resize: vertical;
    outline: none;
    color: white;
}

.guest-write button {
    align-self: flex-end;
    background-color: #21262d;
    border: 1px solid #4f4f4f;
    padding: 0.5rem 1.5rem;
    border-radius: 0.4rem;
    cursor: pointer;
    font-weight: 700;
    color: white;
    transition: all 0.2s;
}

/* 방명록 목록 스타일 */
.guest-list ul {
    list-style: none;
}

.guest-list>ul>li {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #30363d;
}

.guest-info-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.guest-info-header .name {
    font-weight: 700;
    color: rgb(244, 244, 246);
}

.guest-info-header .date {
    font-size: 0.8rem;
    color: rgb(139, 148, 158);
}

.guest-desc {
    line-height: 1.6;
    margin-bottom: 0.5rem;
    color: rgb(236, 244, 251);
}

.guest-control a {
    font-size: 0.8rem;
    color: rgb(189, 197, 203);
    margin-right: 0.75rem;
}

.guest-control a:hover {
    color: rgb(112, 202, 234);
}

/* 방명록 답글 (Re-guest) */
.re-guest {
    margin-top: 1rem;
    margin-left: 1.5rem;
    padding-left: 1rem;
    border-left: 2px solid #30363d;
}

#tt-body-guestbook .t-index,
#tt-body-guestbook pre.desc,
#tt-body-guestbook .main-page,
/* 최근 글 리스트 영역 */
#tt-body-guestbook .paging {
    display: none !important;
}