@charset "UTF-8";
@font-face {
    font-family: 'DOSSaemmul';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/DOSSaemmul.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
   line-height: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

ul, ol {
  list-style-type: none;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000;
  font-family: 'DOSSaemmul', serif;
  font-size: 11px;    
}

/* 배경 스타일 */
#background {
  position: fixed; /* 뷰포트에 고정 */
  top: -20%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 다른 요소들보다 뒤에 배치 */
  overflow: hidden; /* 넘치는 이미지 부분 숨기기 */
}

#background img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 이미지가 컨테이너를 완전히 덮도록 */
}

a {
  color: rgb(209, 207, 180); 
  text-decoration: none;
}


#container {
  position: relative;
  width: 70%;
  max-width: 480px;
  aspect-ratio: 964 / 1068;
}

#sidebar {
  position: absolute;
  left: -40%;
  top: 0%;
  font-size: 1rem;
  padding-top: 10%;
}

#contents {
  position: absolute;
  left: 13%;
  top: 10%;
  width: 75%;
  height: 45%;
  background-color: #fff;
  padding: 15% 13% 2% 18%;
  overflow-y: auto;
  overflow-x: hidden;
  word-wrap: break-word;
  z-index: 1;
}

#contents .paging {
  display: flex;
  justify-content: center;
  column-gap: 20px;
}

#contents .paging .no-more-prev,
#contents .paging .no-more-next {
  color: #bbb;
}


#overlay {    
  position: absolute;
  bottom: 0;
  right: 0; 
  width: 100%; 
  height: 100%;
  pointer-events: none;
}

#overlay .floor {
  position: absolute;
  bottom: 0;
  left: -10%;
  width:150%;
}

#overlay .house {
  position: absolute;
  bottom: 35%;
  left: 60%;
  transform: translateX(-50%);
  margin-left: 5%;
  width: 150%;
  z-index:2;
}


#walkingAni {
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 150%;
  aspect-ratio: 2 / 1;
  pointer-events: none;
  overflow: hidden;
  z-index: 100; 
}

#walkingAni img {
  position: absolute; 
  top: 0;
  left: 0;
  height: 30%;
}

#walkingAni img:nth-of-type(1) {
  margin-top: 15%;
  z-index:2;
}

#walkingAni img:nth-of-type(2) {
  margin-top: 10%;
  z-index:1;
}
#walkingAni img:nth-of-type(3) {
  margin-top: 10%;
  z-index:3;
}


.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 30px;
}

.gallery a {
  aspect-ratio: 1;
  border: 1px solid rgb(255, 255, 255);
  display:flex;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.link_tit {
  display: none;
}

.post-list {
  margin-bottom: 30px;
}

.post-list.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.post-list .thumbnail {
  display:none;
}

.post-list .text {
  display: flex;
  column-gap: 4px;
  margin-bottom: 4px;
  font-weight: bold;
}

.post-list a.thumbnail {
  color: transparent;
}

.post-list.gallery .thumbnail {
  display: flex;
}

.post-list.gallery .text {
  display: none;
}

.list-gallery .text {
  display: none;
}

.list-gallery .pancake {
   display: none;
}

.lemon, .pancake {
  font-size: 12pt;
}

.tt-area-write {
  column-gap: 5px;
}

.tt-box-thumb {
  margin-right: 0px;
  flex: 0 0 20%;
}

.tt_wrap_write {
  flex: 0 0 calc(80% - 5px);
}

.tt-thumbnail {
  width:100%;
  height: auto;
  aspect-ratio: 1;
}

.tt-box-textarea .tt-inner-g {
  padding: 5%;
  font-size: 10px;
  box-sizing:border-box;
  min-height: 50px;
}

.tt-box-textarea .tt_txt_user {
  font-size: 11px;
  line-height: 1.1;
  
}

.tt-box-textarea textarea, .tt-box-textarea div {
  font-size: 10px;
}

.tt-btn_register {
  width: 44px;
  height: auto;
  aspect-ratio: 2 / 1;
  font-size: 11px;
}

.tt-item-reply .tt-box-thumb {
  width: 30%;
  max-width: 40px;
}

.tt-wrap-cmt {
  display: block;
}

.tt-wrap-cmt .tt-box-meta {
  position: absolute;
  left: 33%;
  top: 22px;
}

.tt-wrap-desc {
  margin-top: 10px;
}

.tt-wrap-cmt .tt-box-content {
  width: 100%;
}

.tt-item-reply {
  padding-top: 10px;
  padding-bottom: 0;
  padding-left: 0;
}

.tt-wrap-info {
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
}

.tt-wrap-cmt .tt_date {
  padding: 0;
  font-size: 10px;
}

.tt-wrap-cmt .tt_desc {
  font-size: 12px;
}

.tt-wrap-cmt .tt-wrap-link-comment {
  padding: 0;
  font-size: 10px;
  line-height: 1;
}

.tt-link-comment .tt_txt_g {
  padding: 0;
  font-size: 10px;
}

.tt-list-reply-comment .tt-item-reply {
  padding-left: 10px;
}

.tt-list-reply-comment .tt-item-reply:before {
  top: 15px;
  left: -5px;
}

.cover_content_scroll {
  white-space: pre-line; /* 입력한 줄바꿈을 그대로 유지 */
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: block;
  max-width: 100%;
}

.cover_item {
  white-space: pre-line; /* 줄바꿈 유지 */
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: block;
  max-width: 100%;
}

.post-list.gallery {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.post-list.gallery .text {
  display: none !important;
}

.post-list.gallery .thumbnail {
  display: flex !important;
}