body {
    margin: 0;
    position: relative;
    background-color: #F7F7F7  ;
    overflow-x: hidden;
    
}


/* 뒤로가기 버튼 */
.back-button {
    position: fixed;
     top: 1vw;
    left: 2vw;

    font-family: "Noto Sans", sans-serif;
    font-size: 50px;
    font-weight: 400;

    color: #402108;
    text-decoration: none;

    z-index: 9999;
}


.back-button:hover {
    opacity: 0.6;
}

/* 배경 */
.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10%;

    z-index: -10;
}

.stage {
    position: relative;    
    width: 430px;
    height: 1700px;         
    left: 50%;
    margin-left: -215px;
    transform-origin: top center; 
    transform: scale(calc(100vw / 430px));
}

.guestbook {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  font-family: "Noto Sans", sans-serif;
    font-size: 12px;
}

.guestbook h2 {
  text-align: center;
  margin-bottom: 24px;
}

.guestbook-notice,
.owner-message {
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid #B09280;
  
  overflow-wrap: anywhere;
}

.guestbook-notice p,
.owner-message p {
  margin-bottom: 0;
  line-height: 1.6;
}

#guestbook-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#guestbook-form label {
  font-weight: bold;
  margin-top: 8px;
}

#nickname,
#comment {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #B09280;
  
  font: inherit;
  background: white;
}

#nickname {
  height: 44px;
}

#comment {
  height: 7em;
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
  overflow-wrap: anywhere;
}

.character-count {
  text-align: right;
  font-size: 12px;
  color: #B09280;
}

#guestbook-form button {
  padding: 12px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
}

#guestbook-list {
  margin-top: 24px;
}

.guestbook-comment {
  padding: 16px 0;
  border-bottom: 1px solid #B09280;
  overflow-wrap: anywhere;
}

.guestbook-comment .comment-name {
  font-weight: bold;
  margin-bottom: 8px;
}

.guestbook-comment .comment-text {
  margin: 0;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ========================================
   방명록 댓글 박스
======================================== */

.guestbook-comment {
    position: relative;

    width: 100%;
    box-sizing: border-box;

    background-color: #FFFFFF;

    border: 1px solid #402108;
    border-radius: 0;

    padding: 15px;
    margin-bottom: 12px;
}

/* 닉네임 + 날짜 */
.comment-name {
    padding-right: 90px;
    margin-bottom: 12px;

    font-size: 12px;
}

/* 댓글 내용 */
.comment-text {
    margin: 0;

    font-size: 12px;
    line-height: 1.7;

    white-space: pre-wrap;
    word-break: keep-all;
}

/* 관리자 삭제 버튼 */
.guestbook-comment button {
    position: absolute;

    top: 12px;
    right: 12px;

    padding: 3px 6px;

    font-size: 10px;
    font-family: inherit;

    background-color: #FFFFFF;
    color: #402108;

    border: 1px solid #402108;
    border-radius: 0;

    cursor: pointer;
}

/* ========================================
   글자 색상
======================================== */

/* 기본 글자 */
body {
    color: #402108;
}

/* 흐린 글자 */
.character-count,
.guestbook-notice p,
.owner-message p {
    color: #B09280;
}

/* 진한 글자 */
.guestbook h2,
.guestbook-notice h2,
.owner-message h2,
#guestbook-form label,
.comment-name,
.comment-text {
    color: #402108;
}

/* 입력창 글자 */
#nickname,
#comment {
    color: #402108;
}

/* 입력창 안내 문구 */
#nickname::placeholder,
#comment::placeholder {
    color: #B09280;
}

/* ========================================
   게시하기 버튼
======================================== */

#guestbook-form button {
    background-color: #B09280;
    color: #402108;
    border: 1px solid #402108;
    border-radius: 0;
    cursor: pointer;
}

/* ========================================
   댓글 박스
======================================== */

.guestbook-comment {
    background-color: #FFFFFF;
    border: 1px solid #402108;
    border-radius: 8px;

    padding: 15px;
    margin-bottom: 12px;
}

/* 댓글 닉네임 */
.guestbook-comment .comment-name {
    color: #402108;
}

/* 댓글 내용 */
.guestbook-comment .comment-text {
    color: #402108;
}

/* 관리자 삭제 버튼 */
.guestbook-comment button {
    color: #402108;
    border: 1px solid #402108;
    background-color: #FFFFFF;
    border-radius: 0;
}