.nav-space-between-gnb {
  margin-top: 75px;
}

#register-comment-btn > .text-sm {
  display: none;
}

.register-and-cancel-button-group button.btn-primary span.title-s {
  display: inline;
}

.register-and-cancel-button-group button.btn-primary span.body-s {
  display: none;
}

.reply-register-and-cancel-button-group button.btn-secondary span.title-s {
  display: inline;
}

.reply-register-and-cancel-button-group button.btn-secondary span.body-s {
  display: none;
}

.reply-register-and-cancel-button-group button.btn-primary span.title-s {
  display: inline;
}

.reply-register-and-cancel-button-group button.btn-primary span.body-s {
  display: none;
}

.register-and-cancel-button-group button.btn-primary span.title-s {
  display: inline !important;
  font-size: 18px !important;
}

.register-and-cancel-button-group button.btn-primary span.body-s {
  display: none !important;
}

.header-nav {
  display: none;
}

.btn-primary:hover {
  background-color: var(--bs-primary) !important;
  color: var(--system-white) !important;
}

.post-content {
  max-width: 100%;
  width: 100%;
  /* overflow-x: hidden !important; */
  word-break: break-word;
  line-height: 160%;
}

.reply-content.title-l,
.comment-content.title-l {
  white-space: pre-line !important;
  margin-top: -18px;
  word-break: break-all;
}

.comment-slide-banner-next-button,
.comment-slide-banner-prev-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: auto;
}

.comment-slide-banner-prev-button {
  left: 0;
}

.comment-slide-banner-next-button {
  right: 0;
}

.comment-slide-banner-icon {
  font-size: 2.4rem;
  -webkit-text-stroke: 1px;
  color: #fff;
}

.banner-slider-container {
  position: relative;
}

/* ------------------------
    ql-editor 스타일을 외부에서 복사하여 붙여넣기하고 스타일을 적용할 수 있도록 일시적으로 개선.
------------------------- */
.ql-editor h1 {
  font-size: 2.5em;
  font-weight: bold;
  margin: 0.67em 0;
}
.ql-editor h2 {
  font-size: 2em;
  font-weight: bold;
  margin: 0.75em 0;
}
.ql-editor h3 {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0.83em 0;
}
.ql-editor h4 {
  font-size: 1.2em;
  font-weight: bold;
  margin: 1.12em 0;
}
.ql-editor h5 {
  font-size: 1em;
  font-weight: bold;
  margin: 1.5em 0;
}
.ql-editor h6 {
  font-size: 0.85em;
  font-weight: bold;
  margin: 1.67em 0;
}
.ql-editor blockquote {
  border-left: 4px solid #ccc;
  margin: 1em 0;
  padding: 0.5em 1em;
  color: #666;
  background: #f9f9f9;
}
.ql-editor pre {
  background: #f3f3f3;
  color: #222;
  padding: 0.8em 1em;
  border-radius: 4px;
  font-size: 1em;
  overflow-x: auto;
}
.ql-editor code {
  background: #f3f3f3;
  color: #c7254e;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 0.95em;
}
.ql-editor ul,
.ql-editor ol {
  margin: 1em 0 1em 2em;
}
.ql-editor li {
  margin-bottom: 0.3em;
}

@media (max-width: 500px) {
  /* Responsive 16:9 wrapper for YouTube videos and covers (모바일에서만 적용) */
  .responsive-video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
    background: #000;
  }
  .responsive-video-wrapper iframe,
  .responsive-video-wrapper .ytmVideoCoverHost,
  .responsive-video-wrapper img,
  .responsive-video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    display: block;
  }
  .header-nav {
    display: flex;
  }

  .row {
    display: block !important; /* flex 제거 */
    flex-wrap: nowrap !important; /* wrap 제거 */
    margin-left: 0 !important; /* 양쪽 마진 제거 */
    margin-right: 0 !important;
  }

  .row > .col-2,
  .row > .col-10 {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .sidebar {
    display: none !important;
  }

  .nav-space-between-gnb {
    margin-top: 0;
  }

  .width-desktop {
    max-width: 500px !important;
    min-width: 0 !important;
  }

  .post-detail-section.sp-px-9 {
    padding-left: var(--sp-4) !important; /* sp-px-4의 의미 */
    padding-right: var(--sp-4) !important;
  }

  .main-board {
    margin-top: 24px !important;
  }

  .display-s {
    font-size: var(--fts-title-l);
    line-height: 28px;
    letter-spacing: -0.5px;
  }

  .more-icon {
    width: 24px !important;
    height: 24px !important;
  }

  .profile-image {
    width: 28px !important;
    height: 28px !important;
    border-radius: 28px !important;
  }

  .writer-name.title-m {
    font-size: var(--fts-caption-m);
    line-height: 18px;
    letter-spacing: -0.325px;
    /* max-width: 65px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; */
  }

  .bullet-point.title-m {
    font-size: var(--fts-caption-m);
    line-height: 18px;
    letter-spacing: -0.325px;
  }

  .bullet-point.title-m,
  .written-time-part > .title-m,
  .view-count {
    font-size: var(--fts-caption-m);
    line-height: 18px;
    letter-spacing: -0.325px;
  }

  .post-content.heading-s {
    font-size: var(--fts-title-s);
    line-height: 24px;
    letter-spacing: -0.4px;
  }

  .heading-s {
    font-size: var(--fts-title-m);
    line-height: 26px;
    letter-spacing: -0.45px;
  }

  svg.comment-icon,
  svg.like-icon,
  svg.share-icon {
    width: 24px !important;
    height: 24px !important;
  }

  .horizontal-divider-two {
    width: calc(100% + 32px); /* 좌우 패딩 합 */
    margin-left: -16px;
  }

  #register-comment-btn > .body-s {
    display: none;
  }

  #register-comment-btn > .text-sm {
    display: inline;
  }

  #comment-textarea {
    padding-right: 80px !important;
  }

  .post-detail-section {
    padding-bottom: 160px !important;
  }

  .reply-register-and-cancel-button-group > :nth-child(2) {
    padding: 8px 12px !important;

    /* 원하는 스타일을 여기에 추가하세요 */
  }
  .cancel-button-for-reply.btn-xl,
  .cancel-button-for-edit.btn-xl {
    padding: 8px 12px !important;
    font-size: 18px !important;
  }

  .register-and-cancel-button-group button.btn-primary span.title-s {
    display: inline !important;
  }

  .register-and-cancel-button-group button.btn-primary span.body-s {
    display: none !important;
  }

  .reply-register-and-cancel-button-group button.btn-secondary span.title-s {
    display: inline;
  }

  .reply-register-and-cancel-button-group button.btn-secondary span.body-s {
    display: none;
  }

  .reply-register-and-cancel-button-group button.btn-primary span.title-s {
    display: inline;
  }

  .reply-register-and-cancel-button-group button.btn-primary span.body-s {
    display: none;
  }

  .comment-nickname {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .reply-content.title-l,
  .comment-content.title-l {
    font-size: var(--fts-body-l) !important;
    line-height: 24px !important;
    letter-spacing: -0.4px !important;
    white-space: pre-line !important;
    margin-top: -18px;
    word-break: break-all;
  }

  .writer-badge.body-l {
    font-size: var(--fts-caption-m) !important;
    line-height: 18px !important;
    letter-spacing: -0.325px !important;
  }

  .reply-textarea {
    padding-right: 120px !important;
  }
}

.seo-post-detail {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ------------------------
    글자 크기 (ql-size)
------------------------- */
.ql-size-small {
  font-size: 0.75em;
  line-height: normal;
}
.ql-size-large {
  font-size: 1.5em;
  line-height: normal;
}
.ql-size-huge {
  font-size: 2.5em;
  line-height: normal;
}

/* ------------------------
    글꼴 (ql-font)
------------------------- */
.ql-font-noto-sans-kr {
  font-family: "Noto Sans KR", sans-serif;
}
.ql-font-nanum-gothic {
  font-family: "Nanum Gothic", sans-serif;
}
.ql-font-nanum-myeongjo {
  font-family: "Nanum Myeongjo", serif;
}
.ql-font-sans-serif {
  font-family: sans-serif;
}
.ql-font-serif {
  font-family: serif;
}
.ql-font-monospace {
  font-family: monospace;
}

/* ------------------------
    텍스트 스타일 (ql-bold, etc)
------------------------- */
.ql-bold,
strong,
b {
  font-weight: bold;
}
.ql-italic,
em {
  font-style: italic;
}
.ql-underline,
u {
  text-decoration: underline;
}
.ql-strike,
s,
del {
  text-decoration: line-through;
}

/* ------------------------
    색상 (ql-color, ql-background)
    ※ 실제로 쓰인 색상 이름 기반으로 필요한 것만 정의
------------------------- */
.ql-color-red {
  color: red;
}
.ql-color-blue {
  color: blue;
}
.ql-color-green {
  color: green;
}
/* 배경색 예시 */
.ql-background-yellow {
  background-color: yellow;
}
.ql-background-gray {
  background-color: lightgray;
}

/* ------------------------
    인용구 (ql-blockquote)
------------------------- */
blockquote {
  border-left: 4px solid #ccc;
  margin: 0;
  padding-left: 1em;
  color: #666;
  /* font-style: italic; */
}

/* ------------------------
    리스트 (ql-list)
------------------------- */
.ql-ui {
  display: none;
}

ol,
ul {
  padding-left: 1.5em;
  margin: 1em 0;
}

/* Ordered list style: decimal > lower-alpha > lower-roman, 반복 */
li[data-list="ordered"] {
  list-style-type: none;
  position: relative;
  display: flex;
  align-items: flex-start;
}

li[data-list="ordered"]::before {
  content: counter(ol-decimal, decimal) ".";
  counter-increment: ol-decimal;
  margin-right: 0.5em;
  font-variant-numeric: tabular-nums;
}

ol {
  counter-reset: ol-decimal ol-alpha ol-roman;
}

li[data-list="ordered"] {
  counter-reset: ol-alpha ol-roman;
}

li[data-list="ordered"].ql-indent-1::before {
  content: counter(ol-alpha, lower-alpha) ".";
  counter-increment: ol-alpha;
}

li[data-list="ordered"].ql-indent-2::before {
  content: counter(ol-roman, lower-roman) ".";
  counter-increment: ol-roman;
}

li[data-list="ordered"].ql-indent-3::before {
  content: counter(ol-decimal, decimal) ".";
  counter-increment: ol-decimal;
}

li[data-list="ordered"].ql-indent-4::before {
  content: counter(ol-alpha, lower-alpha) ".";
  counter-increment: ol-alpha;
}

li[data-list="ordered"].ql-indent-5::before {
  content: counter(ol-roman, lower-roman) ".";
  counter-increment: ol-roman;
}

li[data-list="ordered"].ql-indent-6::before {
  content: counter(ol-decimal, decimal) ".";
  counter-increment: ol-decimal;
}

li[data-list="ordered"].ql-indent-7::before {
  content: counter(ol-alpha, lower-alpha) ".";
  counter-increment: ol-alpha;
}

li[data-list="ordered"].ql-indent-8::before {
  content: counter(ol-roman, lower-roman) ".";
  counter-increment: ol-roman;
}

li[data-list="bullet"] {
  list-style-type: none; /* 기존 점 제거 */
  display: flex;
  align-items: baseline; /* baseline 정렬로 변경 */
  position: relative;
}

/* bullet 리스트도 ordered와 같이 ql-indent 적용 */
li[data-list="bullet"].ql-indent-1 {
  padding-left: 3em;
}
li[data-list="bullet"].ql-indent-2 {
  padding-left: 4.5em;
}
li[data-list="bullet"].ql-indent-3 {
  padding-left: 6em;
}
li[data-list="bullet"].ql-indent-4 {
  padding-left: 7.5em;
}
li[data-list="bullet"].ql-indent-5 {
  padding-left: 9em;
}
li[data-list="bullet"].ql-indent-6 {
  padding-left: 10.5em;
}
li[data-list="bullet"].ql-indent-7 {
  padding-left: 12em;
}
li[data-list="bullet"].ql-indent-8 {
  padding-left: 13.5em;
}

li[data-list="bullet"]::before {
  content: "•";
  font-size: 1em;
  color: inherit;
  margin-right: 0.3em; /* 기존 0.6em에서 줄임 */
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}
li[data-list="bullet"] > span,
li[data-list="bullet"] > * {
  vertical-align: middle;
}

li[data-list] {
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.6;
}

/* 리스트 내 굵기 */
li[data-list] strong {
  font-weight: bold;
}
.ql-indent-1 {
  padding-left: 3em;
}
.ql-indent-2 {
  padding-left: 4.5em;
}
.ql-indent-3 {
  padding-left: 6em;
}
.ql-indent-4 {
  padding-left: 7.5em;
}
.ql-indent-5 {
  padding-left: 9em;
}
.ql-indent-6 {
  padding-left: 10.5em;
}
.ql-indent-7 {
  padding-left: 12em;
}
.ql-indent-8 {
  padding-left: 13.5em;
}

/* ------------------------
    정렬 (ql-align)
------------------------- */
.ql-align-center {
  text-align: center;
}
.ql-align-right {
  text-align: right;
}
.ql-align-justify {
  text-align: justify;
}

/* ------------------------
    링크, 이미지, 동영상
------------------------- */
.ql-editor a {
  color: #337ab7;
  text-decoration: underline;
}

.ql-editor img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.5em 0;
}

.ql-editor iframe {
  max-width: 100%;
  display: block;
  margin: 1em 0;
  aspect-ratio: 16/9;
}

em,
.ql-italic {
  font-style: italic;
  font-family: "Nanum Myeongjo", "Nanum Gothic", "Noto Sans KR", serif;
}

/* ------------------------
    Quill 에디터 이미지 정렬 및 레이아웃 보호
------------------------- */

/* 포스트 컨텐츠 영역 격리 */
.post-content {
  position: relative;
  overflow: visible;
  word-wrap: break-word;
  word-break: break-word;
  /* float 요소들을 포함하도록 clearfix 적용 */
}

.post-content::after {
  content: "";
  display: table;
  clear: both;
}

/* 텍스트가 이미지 주변을 제대로 감싸도록 */
.post-content p,
.post-content div {
  overflow: visible;
  word-wrap: break-word;
}

/* 이미지 다음에 오는 텍스트 요소들 */
.post-content .ql-resize-style-left + p,
.post-content .ql-resize-style-left + div,
.post-content .ql-resize-style-right + p,
.post-content .ql-resize-style-right + div {
  margin-top: 0;
}

/* Quill resize 핸들러와 관련된 요소들은 허용 */
.post-content .ql-resize-handle {
  position: absolute !important;
  z-index: 1000 !important;
}

.post-content img {
  /* 기본 이미지 스타일 - !important 제거하여 Quill 스타일이 적용되도록 함 */
  max-width: 100%;
  height: auto;
  position: static;
  transform: none;
  z-index: auto;
}

/* Quill 정렬 클래스들 허용 */
.post-content .ql-resize-style-left {
  float: left;
  margin: 0 16px 16px 0;
  display: block;
  max-width: 50%;
  clear: none;
}

.post-content .ql-resize-style-right {
  float: right;
  margin: 0 0 16px 16px;
  display: block;
  max-width: 50%;
  clear: none;
}

.post-content .ql-resize-style-center {
  float: none;
  margin: 16px auto;
  display: block;
  text-align: center;
  clear: both;
}

.post-content .ql-resize-style-full {
  float: none;
  margin: 16px 0;
  display: block;
  width: 100%;
  max-width: 100%;
  clear: both;
}

/* 정렬된 이미지를 감싸는 컨테이너가 있다면 */
.post-content .ql-align-left {
  text-align: left;
}

.post-content .ql-align-right {
  text-align: right;
}

.post-content .ql-align-center {
  text-align: center;
}

.post-content .ql-align-justify {
  text-align: justify;
}

/* 큰 이미지는 제한 */
.post-content img[width] {
  max-width: min(100%, 800px);
}

/* 댓글 영역 보호 - 매우 강력한 보호 */
.comment-icon-and-word,
.comment-list-container,
.writing-comment-input-part,
.no-comment-container {
  position: relative !important;
  z-index: 20 !important;
  clear: both !important;
  overflow: visible !important;
  width: 100% !important;
  float: none !important;
  /* display: block !important; */
  box-sizing: border-box !important;
}

/* 포스트 컨텐츠 바로 다음 요소에 clear 적용 */
.post-content + * {
  clear: both !important;
}

/* 포스트 컨텐츠 이후의 모든 요소들 보호 */
.post-content ~ * {
  clear: both !important;
  position: relative !important;
  z-index: 15 !important;
  float: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 좋아요/공유 영역도 보호 */
.like-and-share-part {
  clear: both !important;
  position: relative !important;
  z-index: 20 !important;
  width: 100% !important;
  float: none !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* 배너 영역 보호 */
.horizontal-divider-two,
.pc-comment-banner-section,
#banner-or-divider {
  clear: both !important;
  width: 100% !important;
  float: none !important;
  position: relative !important;
  z-index: 15 !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* 컨테이너 레벨에서 플로트 정리 */
.main-content-container::after {
  content: "";
  display: table;
  clear: both;
}

/* 모바일 반응형 처리 */
@media (max-width: 768px) {
  .post-content .ql-resize-style-left,
  .post-content .ql-resize-style-right {
    float: none !important;
    margin: 16px auto !important;
    max-width: 100% !important;
    display: block !important;
  }

  .post-content .ql-resize-style-left,
  .post-content .ql-resize-style-right,
  .post-content .ql-resize-style-center,
  .post-content .ql-resize-style-full {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 큰 화면에서 이미지 최대 크기 제한 강화 */
@media (min-width: 769px) {
  .post-content .ql-resize-style-left,
  .post-content .ql-resize-style-right {
    max-width: min(50%, 400px);
  }

  .post-content .ql-resize-style-center,
  .post-content .ql-resize-style-full {
    max-width: min(100%, 800px);
  }
}