/* 커뮤니티 전용 스타일.
   레이아웃·타이포·버튼·페이지네이션은 style_new.css의 호스트 클래스를 그대로 쓴다.
   여기에는 호스트에 대응물이 없는 것만 둔다 — 답변 카드, byline, 아바타, 브레드크럼.
   style_new.css는 Webflow 내보내기라 재내보내기 때 덮어써진다. 그래서 별도 파일이다. */

/* ── 목록 ─────────────────────────────────────────── */

.community-item {
  border-bottom: 1px solid var(--line);
}

.community-item:last-child {
  border-bottom: 0;
}

.community-item .txt-insighttitle.big a {
  text-decoration: none;
  transition: color .2s;
}

.community-item .txt-insighttitle.big a:hover {
  color: var(--corsair-red);
}

.community-item p {
  margin: 0;
}

.community-meta {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
}

/* ── 아바타 ───────────────────────────────────────── */

.avatar {
  object-fit: cover;
  background-color: var(--background);
  border-radius: 50%;
  flex-shrink: 0;
}

.avatar-sm {
  width: 1.5em;
  height: 1.5em;
}

.avatar-md {
  width: 2.5em;
  height: 2.5em;
}

.avatar-lg {
  width: 6em;
  height: 6em;
}

/* 상세 태그 칩 — 제목과 byline 사이. 가운데 정렬 문맥이라 칩도 가운데로. */
.community-tags {
  flex-wrap: wrap;
  justify-content: center;
}

/* ── 태그 입력 보조 ───────────────────────────────── */

/* 칩은 호스트 .txt-label을 그대로 쓴다. 여기에는 버튼으로 쓰기 위한 것과
   선택 상태만 둔다. */

.tag-picker {
  grid-row-gap: 1em;
  flex-flow: column;
  width: 100%;
  display: flex;
}

.tag-picker-selected,
.tag-picker-suggest {
  grid-row-gap: .5em;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.tag-picker-label {
  color: var(--corsair-black);
  font-weight: 600;
}

.tag-picker-count {
  color: var(--corsair-black);
  font-variant-numeric: tabular-nums;
}

/* button은 브라우저 기본 스타일이 붙는다 — .txt-label 위로 덮어쓴다 */
.tag-picker-chip,
.tag-picker-chosen {
  cursor: pointer;
  background-color: var(--background);
  border: 1px solid #0000;
  font-family: inherit;
  transition: border-color .2s, background-color .2s, color .2s;
}

.tag-picker-chip:hover:not(:disabled),
.tag-picker-chosen:hover {
  border-color: var(--corsair-red);
  color: var(--corsair-red);
}

.tag-picker-chip[aria-pressed="true"] {
  background-color: #a30e2d12;
  border-color: var(--corsair-red);
  color: var(--corsair-red);
}

.tag-picker-chip:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.tag-picker-chosen {
  background-color: #a30e2d12;
  border-color: var(--corsair-red);
  color: var(--corsair-red);
}

.tag-picker-chip:focus-visible,
.tag-picker-chosen:focus-visible {
  outline: 2px solid var(--corsair-red);
  outline-offset: 2px;
}

/* ── 인기 태그 ─────────────────────────────── */

/* 화면에 나오는 숫자는 '그 태그가 붙은 질문 수' 한 종류뿐이고 항상 라벨을 단다.
   순위 숫자는 그리지 않는다 — 위에서 아래 순서가 이미 순위다.
   건수를 막대나 글자 크기로도 그리지 않는다: 초기에는 건수가 서로 붙어 있어서
   없는 차이를 지어내게 된다. */


.hottag-rank {
  grid-row-gap: .75em;
  flex-flow: column;
  width: 100%;
  display: flex;
}

/* 1위 — 큰 자리에는 순위가 아니라 건수가 들어간다.
   순위는 자리가 말하고, 자리로 알 수 없는 값은 건수뿐이다. */
.hottag-lead {
  grid-column-gap: 1em;
  background-color: #a30e2d0f;
  border: 1px solid #a30e2d1f;
  border-radius: 1.5em;
  justify-content: space-between;
  align-items: center;
  padding: 1.375em 1.75em;
  text-decoration: none;
  transition: background-color .2s;
  display: flex;
}

.hottag-lead:hover,
.hottag-lead[aria-current="page"] {
  background-color: #a30e2d1a;
}

.hottag-lead-word {
  color: var(--corsair-black);
  letter-spacing: -.03em;
  min-width: 0;
  font-size: 2.25em;
  font-weight: 700;
  line-height: 1.2em;
  overflow-wrap: anywhere;
}

.hottag-lead-metric {
  flex-flow: column;
  flex-shrink: 0;
  align-items: center;
  display: flex;
}

.hottag-lead-count {
  color: var(--corsair-red);
  font-size: 2em;
  font-weight: 700;
  line-height: 1em;
}

.hottag-lead-unit {
  color: var(--corsair-red);
  margin-top: .25em;
  font-size: .8125em;
  line-height: 1em;
}

/* 2위 이하 */
.hottag-grid {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.hottag-item {
  grid-column-gap: .625em;
  background-color: var(--background);
  border: 1px solid #0000;
  border-radius: 1em;
  justify-content: space-between;
  align-items: baseline;
  min-width: 0;
  padding: .875em 1.125em;
  text-decoration: none;
  transition: border-color .2s, background-color .2s;
  display: flex;
}

.hottag-item:hover,
.hottag-item[aria-current="page"] {
  border-color: var(--corsair-red);
  background-color: #a30e2d0f;
}

.hottag-word {
  color: var(--corsair-black);
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
}

/* --subtxt-gray는 --background(#f5f1f2) 위에서 4.1:1로 본문 기준에 못 미친다.
   색 대신 크기·굵기로 구분한다. */
.hottag-count {
  color: var(--corsair-black);
  flex-shrink: 0;
  font-size: .8125em;
  font-weight: 400;
  white-space: nowrap;
}

.hottag-empty {
  color: var(--corsair-black);
  margin: 0;
}

/* ── 브레드크럼 ───────────────────────────────────── */

/* 호스트 전역 규칙은 본문 목록 기준이다 — ol은 세로 + 빨강, li는 구분선 + 1.3em.
   본문(.w-richtext)에는 그게 맞지만 내비게이션 목록에는 꺼야 한다. */
.breadcrumb ol {
  flex-flow: wrap;
  color: inherit;
  gap: .5em;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.breadcrumb li,
.related-list li {
  border-bottom: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

.breadcrumb li + li:before {
  content: "/";
  margin-right: .5em;
  color: var(--line);
}

.breadcrumb a {
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--corsair-red);
}

/* ── byline (질문·답변 공통) ──────────────────────── */

.byline {
  grid-column-gap: .75em;
  align-items: center;
  display: flex;
}

.reply .byline {
  width: 100%;
}

.byline-text {
  grid-row-gap: .25em;
  flex-flow: column;
  min-width: 0;
  display: flex;
}

.byline-name {
  grid-column-gap: .5em;
  align-items: center;
  color: var(--corsair-black);
  flex-wrap: wrap;
  font-weight: 600;
  display: flex;
}

.byline-bio {
  min-width: 0;
}

/* 상세 byline — 본문 컬럼(.post-box, max-width 50em)과 왼쪽 끝을 맞춘다.
   부모가 가운데 정렬이라 그냥 두면 바로 아래 본문과 축이 어긋난다.
   .blog-post-meta는 호스트 마커 클래스라 자체 규칙이 없고, 블로그 상세는
   .byline을 쓰지 않으므로 이 조합은 커뮤니티 상세에만 걸린다. */
.byline.blog-post-meta {
  justify-content: flex-start;
  width: 100%;
  max-width: 44em;
}

.chip-expert {
  background-color: #a30e2d12;
  color: var(--corsair-red);
  min-height: 1.75em;
  padding: .25em .75em;
  font-size: .875em;
  font-weight: 600;
}

/* ── 답변 ─────────────────────────────────────────── */

.answers {
  grid-row-gap: 1.5em;
  flex-flow: column;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.answers-title,
.related-title {
  color: var(--corsair-black);
  margin: 0;
}

.answers-count {
  color: var(--corsair-red);
  margin-left: .25em;
}

.answers-waiting {
  margin: 0;
}

.reply {
  grid-row-gap: 1.25em;
  background-color: var(--background);
  border-radius: 1.5em;
  flex-flow: column;
  width: 100%;
  padding: 2em;
  display: flex;
}

.reply-body > :first-child {
  margin-top: 0;
}

.reply-body > :last-child {
  margin-bottom: 0;
}

.reply-form {
  width: 100%;
}

.reply-form .formbox {
  width: 100%;
}

/* 답변 코드블록 — 호스트 전역 규칙이 code를 본문 sans로 덮어써서(style_new.css의
   `code { font-family: Suit }`) 그대로 두면 코드블록이 산문과 구분되지 않는다.
   답변 본문 안에서만 되돌린다. */

.reply-body code,
.reply-body pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
}

.reply-body :not(pre) > code {
  background-color: #a30e2d12;
  color: var(--corsair-red);
  border-radius: .35em;
  padding: .1em .35em;
}

.reply-body pre,
.reply-body .highlight {
  background-color: #ffffff;
  border: 1px solid var(--line);
  border-radius: .75em;
  margin: 1em 0;
  overflow-x: auto;  /* 긴 줄은 블록 안에서만 스크롤 — body가 가로로 밀리면 안 된다 */
}

.reply-body .highlight pre {
  border: 0;
  border-radius: 0;
  margin: 0;
}

.reply-body pre code {
  background-color: #0000;
  color: inherit;
  padding: 0;
  line-height: 1.6;
  display: block;
  padding: 1em 1.25em;
}

/* ── 유사 질문 카드 ───────────────────────────────── */

.dup-card {
  grid-row-gap: .5em;
  border: 1px solid var(--line);
  border-radius: 1.5em;
  flex-flow: column;
  width: 100%;
  padding: 1.5em 2em;
  display: flex;
}

.dup-card-label {
  margin: 0;
}

.dup-card-link {
  color: var(--corsair-red);
  font-weight: 600;
  text-decoration: none;
}

.dup-card-link:hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* ── 관련 컨텐츠 (블로그 크로스링크) ──────────────── */

/* 질문 목록보다 위에 오고 카드로 나간다 — 커뮤니티에서 블로그로 넘어가는
   유일한 통로라 목록의 한 줄로 두면 눈에 걸리지 않는다. */

.related-contents {
  grid-row-gap: 1em;
  flex-flow: column;
  width: 100%;
  display: flex;
}

.related-cards {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  flex-flow: column;
  width: 100%;
  display: flex;
}

.related-card {
  grid-row-gap: .375em;
  background-color: var(--background);
  border: 1px solid #0000;
  border-radius: 1.25em;
  flex-flow: column;
  align-items: flex-start;
  padding: 1.5em 1.75em;
  text-decoration: none;
  transition: border-color .2s, background-color .2s;
  display: flex;
}

.related-card:hover {
  background-color: #a30e2d0a;
  border-color: var(--corsair-red);
}

.related-card-kind {
  color: var(--corsair-red);
  letter-spacing: .06em;
  font-size: .8125em;
  font-weight: 600;
  line-height: 1em;
}

.related-card-title {
  color: var(--corsair-black);
  letter-spacing: -.02em;
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.4em;
}

.related-card-excerpt {
  color: var(--subtxt-gray);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-card-more {
  color: var(--corsair-red);
  margin-top: .25em;
  font-size: .875em;
  font-weight: 600;
}

/* ── 관련 질문 ─────────────────────────────────────── */

.related {
  grid-row-gap: 1em;
  flex-flow: column;
  width: 100%;
  display: flex;
}

.related-list {
  grid-row-gap: .75em;
  color: inherit;
  flex-flow: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.related-list a {
  color: var(--corsair-black);
  text-decoration: none;
  transition: color .2s;
}

.related-list a:hover {
  color: var(--corsair-red);
}

/* ── 작성자 액션 ──────────────────────────────────── */

.owner-actions {
  grid-column-gap: 1em;
  width: 100%;
  display: flex;
}

.owner-actions a {
  min-height: 2.75rem;
  align-items: center;
  text-decoration: underline;
  text-underline-offset: .2em;
  display: inline-flex;
}

.owner-actions .danger {
  color: var(--corsair-red);
}

/* ── 폼 ───────────────────────────────────────────── */

.form-page {
  width: 100%;
  max-width: 40em;
}

.form-field {
  grid-row-gap: .5em;
  flex-flow: column;
  display: flex;
}

.form-field label {
  color: var(--corsair-black);
  font-weight: 600;
}

.form-help,
.form-error {
  margin: 0;
}

.form-error {
  color: var(--corsair-red);
}

/* ── 좁은 화면 ────────────────────────────────────── */

@media screen and (max-width: 767px) {
  .reply,
  .dup-card {
    border-radius: 1em;
    padding: 1.5em;
  }

  .avatar-lg {
    width: 4.5em;
    height: 4.5em;
  }
}

/* ── Q&A 본문 타이포그래피 — 한국어 가독성 기준 ──────────────
   행간 1.75(국문 본문 권장 1.6~1.8), 자간 -0.01em(한글은 살짝 좁혀야
   또렷하다), keep-all(어절 단위 줄바꿈) + break-word(긴 URL 넘침 방지).
   문장은 <br>(단일 줄바꿈), 문단은 <p>(빈 줄) — 간격을 계단식으로 준다. */

.post-body,
.reply-body {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty; /* body 전역 text-wrap: balance 상속 차단 — 조기 줄바꿈의 원인 */
}

.post-body p,
.reply-body p {
  margin: 0 0 1.3em;
}

.post-body p:last-child,
.reply-body p:last-child {
  margin-bottom: 0;
}

.reply-body ul,
.reply-body ol {
  margin: 1.3em 0;
  padding-left: 1.4em;
}

.reply-body li {
  margin: 0.5em 0;
  line-height: 1.7;
}

.reply-body li::marker {
  color: var(--corsair-red, #a30e2d);
}

.reply-body strong {
  color: var(--corsair-red, #a30e2d);
  font-weight: 700;
}

.reply-body h2,
.reply-body h3 {
  margin: 1.4em 0 0.6em;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

/* ── 상세 가독성 패스 — 제목·측정폭·Q/A 구분·메타 위계 ─────────
   body 전역(-0.05em 자간, text-wrap: balance)이 큰 글자를 뭉개고 본문
   줄을 일찍 끊는다. 커뮤니티 상세에서만 되돌린다. */

.qa-title {
  letter-spacing: -0.025em;
  line-height: 1.35;
  font-size: clamp(2em, 1.2em + 2.5vw, 3em);
  text-wrap: balance; /* 제목에는 balance가 맞다 — 두 줄 균형 */
}

/* 국문 본문 한 줄 35~42자 최적 — 850px는 눈이 되돌아오다 놓친다 */
.qa-post-box {
  max-width: 44em;
}

/* 답변 시작점이 스크롤 중에도 잡히게 — 좌측 브랜드 바 */
.reply {
  border-left: 3px solid var(--corsair-red, #a30e2d);
  border-top-left-radius: 0.5em;
  border-bottom-left-radius: 0.5em;
}

/* 메타(이름·시간·소개)를 본문에서 두 단계 분리 */
.byline-name {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.byline .txt-meta {
  color: #6b6b6b;
  letter-spacing: 0;
  font-size: 0.84375rem; /* 13.5px */
  line-height: 1.5;
}

@media (max-width: 767px) {
  .post-body,
  .reply-body {
    font-size: 1rem;
  }

  .reply {
    border-radius: 1em;
    border-top-left-radius: 0.4em;
    border-bottom-left-radius: 0.4em;
    padding: 1.25em;
  }
}