/**
 * [커뮤니티 상세 디자인]
 * - 역할: 커뮤니티 8개 게시판의 제목·미디어·본문·리소스·댓글 읽기 흐름을 통일
 * - 작성/수정일: 2026-09-24
 */

.an-bo-detail--community {
  /* [커뮤니티 상세 그리드 정렬] 역할: 본문만 읽기 폭을 제한하고 상단·미디어·하단은 메인 열 전체를 사용 — 작성/수정일: 2026-09-24 */
  --an-cm-read-width: 760px;
}

.an-bo-detail--community.section-pad--sm {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(56px, 7vw, 88px);
}

.an-bo-detail--community .an-bo-detail__back {
  margin-bottom: clamp(26px, 3vw, 40px);
  color: var(--muted-color, #777);
}

.an-bo-detail--community .an-bo-detail__back:hover {
  color: var(--title-color, #171717);
}

.an-bo-detail--community .an-bo-detail__layout {
  gap: clamp(32px, 4vw, 48px);
}

.an-bo-detail--community .an-bo-detail__head,
.an-bo-detail--community .an-bo-detail__section-nav,
.an-bo-detail--community .an-bo-detail__media,
.an-bo-detail--community .an-bo-detail__nav,
.an-bo-detail--community .an-bo-detail__comments {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.an-bo-detail--community .an-bo-detail__head {
  margin-bottom: 0;
  padding-bottom: clamp(24px, 3vw, 34px);
  border-bottom: 1px solid var(--border-color, #e5e5e5);
}

.an-bo-detail--community .an-bo-detail__title-row {
  gap: 24px;
}

.an-bo-detail--community .an-bo-detail__title-main {
  max-width: 760px;
}

.an-bo-detail--community .an-bo-detail__eyebrow {
  margin-bottom: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--section-bg-color, #f5f5f5);
  color: var(--muted-color, #666);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.an-bo-detail--community .an-bo-detail__title {
  color: var(--title-color, #171717);
  font-size: clamp(30px, 3.5vw, 46px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.an-bo-detail--community .an-detail-byline--bo {
  margin-top: 18px;
}

.an-bo-detail--community .an-bo-detail__menu-btn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-color, #e5e5e5);
  border-radius: 50%;
  color: var(--muted-color, #666);
}

.an-bo-detail--community .an-bo-detail__menu-btn:hover,
.an-bo-detail--community .an-bo-detail__menu-btn[aria-expanded="true"] {
  border-color: var(--title-color, #171717);
  background: var(--surface-color, #fff);
  color: var(--title-color, #171717);
}

.an-bo-detail--community .an-bo-detail__menu-list {
  top: calc(100% + 8px);
  min-width: 180px;
  padding: 8px 0;
  border-radius: var(--radius-md, 10px);
  background: var(--surface-color, #fff);
  box-shadow: var(--shadow-md, 0 12px 36px rgba(0, 0, 0, 0.12));
}

.an-bo-detail--community .an-bo-detail__toolbar {
  justify-content: flex-start;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
}

.an-bo-detail--community .an-bo-detail__icons {
  gap: 8px;
}

.an-bo-detail--community .an-bo-detail__icon-btn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-color, #e5e5e5);
  border-radius: 50%;
  color: var(--muted-color, #777);
  text-decoration: none;
  transition:
    border-color var(--duration-base, 0.2s),
    background var(--duration-base, 0.2s),
    color var(--duration-base, 0.2s);
}

.an-bo-detail--community .an-bo-detail__icon-btn:hover {
  border-color: var(--border-color, #d5d5d5);
  background: var(--section-bg-color, #f5f5f5);
  color: var(--title-color, #404040);
}

.an-bo-detail--community .an-bo-detail__icon-btn[aria-pressed="true"],
.an-bo-detail--community .an-bo-detail__icon-btn.is-on,
.an-bo-detail--community .an-bo-detail__icon-btn.is-active {
  border-color: var(--border-color, #d5d5d5);
  background: transparent;
  color: #404040;
}

.an-bo-detail--community .an-bo-detail__icon-btn > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.an-bo-detail--community .an-bo-detail__icon-btn > i::before {
  vertical-align: 0;
}

.an-bo-detail--community .an-bo-detail__icon-count {
  top: -5px;
  right: -5px;
  background: var(--surface-color, #fff);
}

/* [커뮤니티 섹션 탐색] 역할: 긴 글의 실제 콘텐츠 구간을 고정형 가로 메뉴로 연결 — 작성/수정일: 2026-09-24 */
.an-bo-detail--community .an-bo-detail__section-nav {
  position: sticky;
  top: 57px;
  z-index: 6;
  display: flex;
  gap: 26px;
  margin-bottom: clamp(32px, 4vw, 48px);
  overflow-x: auto;
  border-bottom: 1px solid var(--border-color, #e5e5e5);
  background: var(--surface-color, #fff);
  scrollbar-width: none;
}

.an-bo-detail--community .an-bo-detail__section-nav::-webkit-scrollbar {
  display: none;
}

.an-bo-detail--community .an-bo-detail__section-nav a {
  position: relative;
  flex: none;
  padding: 17px 0 15px;
  color: var(--muted-color, #777);
  font-size: var(--fs-label, 14px);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.an-bo-detail--community .an-bo-detail__section-nav a:first-child {
  color: var(--title-color, #171717);
}

.an-bo-detail--community .an-bo-detail__section-nav a:first-child::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: currentColor;
}

.an-bo-detail--community .an-bo-detail__section-nav a:hover {
  color: var(--title-color, #171717);
}

/* [커뮤니티 첨부 이미지] 역할: 별도 박스 없이 원본 비율의 이미지를 메인 그리드에 직접 표시 — 작성/수정일: 2026-09-24 */
.an-bo-detail--community .an-bo-detail__media {
  box-sizing: border-box;
  margin-bottom: clamp(40px, 6vw, 72px);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.an-bo-detail--community .an-bo-detail__media a {
  display: block;
  max-width: 100%;
  width: fit-content;
  margin-inline: auto;
}

.an-bo-detail--community .an-bo-detail__media img {
  display: block;
  max-width: 100%;
  max-height: min(78vh, 900px);
  width: auto;
  height: auto;
  margin-inline: auto;
  border-radius: 0;
  object-fit: contain;
}

.an-bo-detail--community .an-bo-detail__media br {
  display: none;
}

/* [커뮤니티 본문 가독성] 역할: 장문 콘텐츠의 읽기 폭·문단·제목 리듬을 안정화하며 에디터 정렬을 보존 — 작성/수정일: 2026-09-24 */
.an-bo-detail--community .an-bo-detail__content,
.an-bo-detail--community .an-bo-detail__aside {
  margin-right: auto;
  margin-bottom: clamp(48px, 6vw, 72px);
  margin-left: auto;
  scroll-margin-top: 128px;
}

.an-bo-detail--community .an-bo-detail__content {
  width: min(100%, var(--an-cm-read-width));
}

/* [커뮤니티 관련 리소스 정렬] 역할: 관련 링크·첨부파일을 메인 그리드 좌우선에 맞춰 전체 폭으로 표시 — 작성/수정일: 2026-09-24 */
.an-bo-detail--community .an-bo-detail__aside {
  width: 100%;
}

.an-bo-detail--community .an-bo-detail__body {
  color: var(--text-color, #3f3f3f);
  font-size: clamp(15px, 1.25vw, 16px);
  line-height: 1.85;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

.an-bo-detail--community
  .an-bo-detail__body.g5-gurumi-view:not(.ProseMirror)
  :where(p) {
  margin-top: 0;
  margin-bottom: 1.25em;
}

.an-bo-detail--community
  .an-bo-detail__body.g5-gurumi-view:not(.ProseMirror)
  :where(h1, h2, h3, h4) {
  color: var(--title-color, #171717);
  letter-spacing: -0.025em;
  line-height: 1.4;
  word-break: keep-all;
}

.an-bo-detail--community
  .an-bo-detail__body.g5-gurumi-view:not(.ProseMirror)
  :where(h1, h2) {
  margin-top: 2.2em;
  margin-bottom: 0.8em;
}

.an-bo-detail--community
  .an-bo-detail__body.g5-gurumi-view:not(.ProseMirror)
  :where(h3, h4) {
  margin-top: 1.8em;
  margin-bottom: 0.65em;
}

.an-bo-detail--community
  .an-bo-detail__body.g5-gurumi-view:not(.ProseMirror)
  :where(blockquote) {
  margin: 2em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--title-color, #171717);
  color: var(--muted-color, #666);
}

.an-bo-detail--community
  .an-bo-detail__body.g5-gurumi-view:not(.ProseMirror)
  :where(ul, ol) {
  margin-top: 1em;
  margin-bottom: 1.4em;
}

.an-bo-detail--community
  .an-bo-detail__body.g5-gurumi-view:not(.ProseMirror)
  :where(a:not(.editor-link-preview__card)) {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

.an-bo-detail--community
  .an-bo-detail__body.g5-gurumi-view:not(.ProseMirror)
  :where(img, .editor-image) {
  border-radius: var(--radius-md, 10px);
}

.an-bo-detail--community .an-bo-detail__sec-title {
  margin-bottom: 16px;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 750;
  letter-spacing: -0.025em;
}

/* [커뮤니티 리소스 카드] 역할: 긴 링크·파일명을 모바일에서도 카드 안에 안전하게 표시 — 작성/수정일: 2026-09-24 */
.an-bo-detail--community .an-bo-resource-list {
  border-radius: var(--radius-md, 10px);
  background: var(--surface-color, #fff);
}

.an-bo-detail--community .an-bo-resource-list a {
  min-height: 72px;
  padding: 17px 18px;
}

.an-bo-detail--community .an-bo-resource-list__main strong {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.an-bo-detail--community .an-bo-detail__nav {
  gap: 14px;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.an-bo-detail--community .an-bo-detail__nav-item {
  min-height: 86px;
  padding: 18px 20px;
  border-radius: var(--radius-md, 10px);
  transition:
    border-color var(--duration-base, 0.2s),
    transform var(--duration-base, 0.2s);
}

.an-bo-detail--community .an-bo-detail__nav-item:hover {
  border-color: var(--title-color, #171717);
  transform: translateY(-2px);
}

.an-bo-detail--community .an-bo-detail__nav-thumb {
  flex-basis: 48px;
  width: 48px;
  border-radius: var(--radius-sm, 6px);
}

.an-bo-detail--community .an-bo-detail__nav-text strong {
  line-height: 1.45;
}

.an-bo-detail--community .an-bo-detail__comments {
  padding-top: clamp(28px, 4vw, 44px);
  scroll-margin-top: 128px;
}

.an-bo-detail--community .an-bo-detail__back:focus-visible,
.an-bo-detail--community .an-bo-detail__menu-btn:focus-visible,
.an-bo-detail--community .an-bo-detail__menu-list a:focus-visible,
.an-bo-detail--community .an-bo-detail__menu-list button:focus-visible,
.an-bo-detail--community .an-bo-detail__icon-btn:focus-visible,
.an-bo-detail--community .an-bo-detail__section-nav a:focus-visible,
.an-bo-detail--community .an-bo-resource-list a:focus-visible,
.an-bo-detail--community .an-bo-detail__nav-item:focus-visible {
  outline: 2px solid var(--title-color, #171717);
  outline-offset: 3px;
}

@media (max-width: 991.98px) {
  .an-bo-detail--community .an-bo-detail__layout {
    display: block;
  }

  .an-bo-detail--community .an-bo-detail__rail {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .an-bo-detail--community.section-pad--sm {
    padding-top: 22px;
    padding-bottom: 56px;
  }

  .an-bo-detail--community .an-bo-detail__back {
    margin-bottom: 24px;
  }

  .an-bo-detail--community .an-bo-detail__title-row {
    gap: 14px;
  }

  .an-bo-detail--community .an-bo-detail__title {
    font-size: clamp(27px, 8vw, 34px);
    line-height: 1.24;
  }

  .an-bo-detail--community .an-bo-detail__menu-btn,
  .an-bo-detail--community .an-bo-detail__icon-btn {
    width: 40px;
    height: 40px;
  }

  .an-bo-detail--community .an-bo-detail__section-nav {
    /* [커뮤니티 상세 모바일 탭] 역할: 모바일에서는 고정하지 않고 콘텐츠 흐름 안에서만 탐색 메뉴를 표시 — 작성/수정일: 2026-09-24 */
    position: static;
    top: auto;
    z-index: auto;
    gap: 22px;
    margin-bottom: 30px;
    padding-right: var(--layout-gutter, 20px);
    padding-left: var(--layout-gutter, 20px);
  }

  .an-bo-detail--community .an-bo-detail__section-nav a {
    padding-top: 15px;
    padding-bottom: 13px;
  }

  .an-bo-detail--community .an-bo-detail__media {
    margin-bottom: 44px;
    padding: 0;
    border-radius: 0;
  }

  .an-bo-detail--community .an-bo-detail__content,
  .an-bo-detail--community .an-bo-detail__aside {
    margin-bottom: 48px;
  }

  .an-bo-detail--community .an-bo-detail__body {
    line-height: 1.78;
    word-break: normal;
  }

  .an-bo-detail--community .an-bo-resource-list a {
    gap: 11px;
    min-height: 66px;
    padding: 15px 14px;
  }

  .an-bo-detail--community .an-bo-detail__nav {
    gap: 10px;
  }

  .an-bo-detail--community .an-bo-detail__nav-item,
  .an-bo-detail--community .an-bo-detail__nav-item.has-thumb {
    min-height: 76px;
    padding: 14px;
  }
}

/* [커뮤니티 상세 다크모드] 역할: 활성 액션과 미디어·리소스 표면의 대비를 유지 — 작성/수정일: 2026-09-24 */
html.dark .an-bo-detail--community .an-bo-detail__icon-btn[aria-pressed="true"],
html.dark .an-bo-detail--community .an-bo-detail__icon-btn.is-on,
html.dark .an-bo-detail--community .an-bo-detail__icon-btn.is-active,
body.dark .an-bo-detail--community .an-bo-detail__icon-btn[aria-pressed="true"],
body.dark .an-bo-detail--community .an-bo-detail__icon-btn.is-on,
body.dark .an-bo-detail--community .an-bo-detail__icon-btn.is-active {
  color: #d4d4d4;
}

@media (prefers-reduced-motion: reduce) {
  .an-bo-detail--community .an-bo-detail__icon-btn,
  .an-bo-detail--community .an-bo-detail__nav-item {
    transition: none;
  }

  .an-bo-detail--community .an-bo-detail__nav-item:hover {
    transform: none;
  }
}