@charset "UTF-8";

.button {
  align-items: center;
  background-color: var(--color-bg-dark);
  border-radius: var(--border-radius);
  color: inherit;
  display: inline-flex;
  flex-direction: column;
  font-size: small;
  gap: 4px;
  height: 48px;
  justify-content: center;
  text-decoration: none;
  transition: color 0.2s ease;
  padding: 4px;
  width: 48px;
}

.button:hover {
  background-color: var(--color-bg-light);
  color: var(--color-accent);
}

.button--medium {
  gap: 4px;
  height: 48px;
  width: 48px;
}

.button--medium .button__icon {
  height: 24px;
  width: auto;
}

.button--medium .button__text {
  font-size: small;
}

.button--large {
  gap: 8px;
  height: 128px;
  width: 128px;
}

.button--large .button__icon {
  height: 64px;
  width: auto;
}

.button--large .button__text {
  font-size: medium;
}

.scroll-to-top-button {
  border: none;
  bottom: var(--space-large);
  cursor: pointer;
  position: fixed;
  right: var(--space-large);
}

/* 댓글 입력 폼 */
.tt-comment-cont {
  box-sizing: border-box;
  margin: 0 auto;
  padding: var(--space-large) 0px;
  width: 774px;
}

.tt-comment-cont .tt-box-total {
  border: none;
  padding-bottom: var(--space-x-small);
}

.tt-comment-cont .tt-box-account input {
  background-color: var(--color-bg-dark);
  border-color: transparent;
  border-radius: var(--border-radius);
  color: var(--color-primary);
  outline: none;
}

.tt-comment-cont .tt-area-reply {
  margin-bottom: 0;
}

.tt-comment-cont .tt-list-reply {
  border: none;
  margin: 0;
}

.tt_ico_profile {
  display: none;
}

/* 텍스트 에디트 */
.tt-box-textarea .tt-inner-g {
  background-color: var(--color-bg-dark);
  border: none;
  border-color: transparent;
  text-align: left;
}

.tt-box-textarea .tt-inner-g textarea {
  background-color: var(--color-bg-dark);
  font-family: 'Pretendard';
}

/* 내용 입력칸 */
.tt-box-textarea .tt-cmt {
  color: var(--color-primary);
  font-size: medium;
  max-height: 15em;
  overflow-y: auto;
  overscroll-behavior: contain;
  word-wrap: break-word;
}

/* 플레이스홀더 */
.tt-box-textarea .tt-cmt[contenteditable=true]:empty:before {
  color: var(--color-info);
}

.tt-box-textarea .tt-cmt div {
  color: var(--color-primary);
  font-size: medium;
}

/* 댓글, 방명록 작성자 닉네임 */
.tt-area-write .tt_txt_user,
.tt-area-reply .tt-link-user {
  color: var(--color-primary);
  font-size: medium;
  font-weight: bold;
  margin-bottom: 12px;
}

/* 댓글 등록 버튼 */
.tt-area-write .tt-btn_register {
  background-color: var(--color-bg-dark);
  background-image: url('plain.svg');
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  border-radius: var(--border-radius);
  color: transparent;
  height: 48px;
  margin: 0;
  padding: 0;
  user-select: none;
  width: 48px;
}

/* 답글 작성 취소 버튼 */
.tt-area-write .tt-btn-cancel {
  background-color: var(--color-bg-dark);
  background-image: url('close.svg');
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  border-radius: var(--border-radius);
  color: transparent;
  margin-right: var(--space-small);
  height: 48px;
  user-select: none;
  width: 48px;
}

/* 비밀 댓글 버튼 */
.tt-area-write .tt_img_area_reply {
  background-color: var(--color-bg-dark);
  background-image: url('unlocked.svg');
  background-position: center !important;
  background-repeat: no-repeat;
  background-size: auto;
  border-radius: var(--border-radius);
  margin-right: var(--space-small);
  height: 48px;
  width: 48px;
}

/* 비밀 댓글 버튼 - 비밀 모드 */
.tt-comment-cont .tt-area-write:has(.tt-btn_register[data-tiara-custom*="secret=true"]) .tt_img_area_reply {
  background-image: url('lock.svg');
  background-position: center !important;
}

/* 댓글 리스트 */
.tt-area-reply .tt-box-content {
  background-color: var(--color-bg-dark);
  border-radius: var(--border-radius);
  padding: var(--space-medium);
  /* text-align: left; */
}

/* 댓글 내용 높이 제한 */
.tt-area-reply .tt_desc {
  color: var(--color-primary) !important;
  max-height: 15em;
  overflow-y: auto;
  overscroll-behavior: contain;
  word-wrap: break-word;
}

/* 댓글 답글 간 간격 */
.tt-area-reply .tt-list-reply-comment li {
  border: none;
  padding-bottom: 0px;
  padding-top: var(--space-large);
}

.tt-area-reply .tt-item-reply:before {
  display: none;
}

/* 댓글 리스트 */
.tt-area-reply .tt-item-reply.rp_general {
  border-top: 1px solid var(--color-info) !important;
  padding: var(--space-large) 0;
}

.tt-area-reply .tt-list-reply-comment {
  border: none;
  margin: 0;
}

/* 댓글 남긴 시각 */
.tt-area-reply .tt_date {
  color: var(--color-info);
  font-size: small;
}

/* 댓글 남긴 시각, 답글 사이 여백 */
.tt-area-reply .tt-wrap-link-comment {
  padding-left: var(--space-small);
}

/* 도트 */
.tt-area-reply .tt-wrap-link-comment:before {
  display: none !important;
}

/* 수정 버튼 */
.tt-area-reply .tt-button-modify {
  background-image: url('menu-dots.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  border-radius: var(--border-radius);
  cursor: default;
  height: 24px;
  margin: var(--space-medium);
  width: 24px;
}

.tt-area-reply .tt-button-modify:hover,
.tt-area-reply .tt-box-modify.tt-box-modify-open .tt-button-modify {
  background-color: transparent;
}

.tt-area-reply .tt-button-modify:hover {
  background-color: var(--color-bg-light);
}

.tt-area-reply .tt-list-modify {
  background: var(--color-bg-dark);
  border-radius: var(--border-radius);
  top: 48px;
  right: -48px;
}

.tt-area-reply .tt-list-modify li {
  padding: 0;
}

.tt-area-reply .tt-list-modify a {
  color: var(--color-primary);
}

.tt-area-reply .tt-list-modify a:hover {
  background-color: var(--color-bg-light);
  color: var(--color-accent);
}

/* 답글 텍스트 버튼 */
.tt-area-reply .tt-wrap-info .tt_txt_g {
  color: var(--color-info);
  font-family: 'Pretendard';
  font-size: small;
  padding-top: 15px;
  transition: color 0.2s ease;
  vertical-align: middle;
}

/* 답글 텍스트 버튼 마우스 오버 시 하이라이트 */
.tt-area-reply .tt-wrap-info .tt_txt_g:hover {
  color: var(--color-accent);
}

/* 멘션 */
.tt-area-reply .tt-txt-mention {
  background-color: transparent;
  color: var(--color-accent);
}

/* 비밀 댓글 아이콘 */
.tt_ico_lock {
  background-image: url('lock.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--space-medium) var(--space-medium);
  height: var(--space-medium) !important;
  margin: 0px 0px 12px var(--space-x-small);
  width: var(--space-medium) !important;
}

/* 팝업 */
.tt-box-modify .tt-box-tooltip {
  background-color: var(--color-bg-dark) !important;
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius) !important;
  box-sizing: border-box;
  padding: var(--space-small) 0;
  position: fixed;
  bottom: 24px;
  top: unset;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
}

.tt-box-modify .tt-box-tooltip .tt_img_area_reply {
  display: none;
}

.tt-box-modify .tt-box-tooltip .tt_txt_g {
  color: var(--color-primary) !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.layer_tooltip {
  background-color: var(--color-bg-dark) !important;
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius) !important;
  box-sizing: border-box;
  padding: var(--space-small) 0;
}