/* ============================================================
   FRONTLENS Post Pages
   카테고리 목록과 게시글 상세 화면 전용 규칙을 분리한 파일이다.
   공통 컴포넌트는 style.css에 두고, 화면별 레이아웃 보정만 이 파일에 모은다.
   ============================================================ */

/* 페이지 상단 hero는 카테고리/상세 공통 상단 소개 영역에 사용한다. */
.page-hero {
  padding: 26px 0 14px;
  border-bottom: 1px solid var(--border-light);
  min-width: 0;
}

.page-hero .kicker {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gray);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.page-hero h1 {
  margin: 10px 0 6px;
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.page-hero p {
  margin: 0;
  color: var(--gray);
  /* max-width: 78ch; */
}

/* 20260501
 * 상세 페이지 본문,사이드바 간격 및 상하 패딩 축소
 * gap 34px->20px, 상단 padding 26px->16px, 하단 60px->48px
 */
.article-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  padding: 16px 0 48px;
}

/* 20260501
 * 본문 상단 패딩 축소
 padding-top 18px->12px
 */
.article-body {
  min-width: 0;
  border-top: 1.5px solid var(--border-light);
  padding-top: 12px;
}

.article-title {
  margin: 10px 0 12px;
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.08;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.article-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px;
}

.article-lede {
  color: var(--gray);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 75ch;
}

.article-content {
  font-size: 15px;
  line-height: 1.85;
  /*max-width: 78ch;*/
}

.article-content p {
  margin: 0 0 14px;
}

.article-content ul {
  margin: 0 0 14px 18px;
}

.article-content li {
  margin: 6px 0;
}

.side-card h3 {
  margin: 0 0 12px;
  font-family: var(--mono);
  /* font-size: 12px; */
  /* letter-spacing: .08em; */
  font-size: 14px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gray);
}

.side-list {
  display: grid;
  gap: 12px;
}

.side-item {
  display: grid;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.side-item a {
  text-decoration: none;
  color: inherit;
}

.side-item .t {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.side-item .m {
  font-size: 12px;
  color: var(--gray);
  display: flex;
  gap: 10px;
}

/* 댓글/연관 게시글 목록 비어있을 때 안내 문구 */
.empty-data-text {
  padding: 8px 0;
  color: var(--gray);
  font-size: 14px;
}

/* 카테고리 hero는 제목/설명 길이가 달라도 상단 리듬이 크게 흔들리지 않게 맞춘다. */
.category-hero .kicker {
  display: block;
  line-height: 1;
  min-height: 12px;
}

.category-hero.tag-1 .kicker,
.category-hero.tag-1 .chip.active {
  color: var(--tag-1);
}

.category-hero.tag-1 .chip.active {
  border-color: rgba(29, 78, 216, 0.24);
  background: var(--tag-1-bg);
}

.category-hero.tag-2 .kicker,
.category-hero.tag-2 .chip.active {
  color: var(--tag-2);
}

.category-hero.tag-2 .chip.active {
  border-color: rgba(124, 58, 237, 0.24);
  background: var(--tag-2-bg);
}

.category-hero.tag-3 .kicker,
.category-hero.tag-3 .chip.active {
  color: var(--tag-3);
}

.category-hero.tag-3 .chip.active {
  border-color: rgba(219, 39, 119, 0.24);
  background: var(--tag-3-bg);
}

.category-hero.tag-4 .kicker,
.category-hero.tag-4 .chip.active {
  color: var(--tag-4);
}

.category-hero.tag-4 .chip.active {
  border-color: rgba(217, 119, 6, 0.24);
  background: var(--tag-4-bg);
}

.category-hero.tag-5 .kicker,
.category-hero.tag-5 .chip.active {
  color: var(--tag-5);
}

.category-hero.tag-5 .chip.active {
  border-color: rgba(5, 150, 105, 0.24);
  background: var(--tag-5-bg);
}

.category-hero.tag-6 .kicker,
.category-hero.tag-6 .chip.active {
  color: var(--tag-6);
}

.category-hero.tag-6 .chip.active {
  border-color: rgba(220, 38, 38, 0.24);
  background: var(--tag-6-bg);
}

.category-hero h1 {
  min-height: 1.05em;
}

.category-hero p {
  line-height: 1.6;
  min-height: 3.2em;
}

/* 카테고리 화면 전용 보정:
   공통 카드 스타일은 유지하되, 목록 화면에서만 필요한 칩/그리드/카드 높이 보정을 둔다. */
.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  max-width: 100%;
}

.category-feed-wrap {
  padding-top: 22px;
  padding-bottom: 60px;
}

.category-feed-grid {
  align-items: stretch;
}

.category-feed-link {
  display: block;
  height: 100%;
  min-width: 0;
}

.category-feed-card {
  height: 100%;
}

.category-feed-excerpt {
  min-height: 62px;
}

/* 상세 화면 날짜, 본문 간격, 대표 이미지 표현을 JSP 인라인 스타일 대신 CSS로 통일한다. */
.article-date {
  font-size: 14px;
  color: #444;
}

.article-meta-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-author {
    font-size: 12px;
}

.article-author-row {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    text-align: right;
}

.article-content-spaced {
  margin-top: 16px;
}

.article-media {
  border-top: none;
  padding-top: 0;
}

.article-image {
 /* border-radius: 18px;*/
}

/* 20260501
 상세 페이지 대표 이미지 잘림 수정
 */
.article-body .fc-thumb {
  aspect-ratio: auto;
  height: auto;       /* 고정 높이 제거: 이미지 원본 비율에 맞게 확장 */
  min-height: 0;      /* home.css에서 상속되는 높이값 초기화 */
  max-height: none;   /* 최대 높이 제한 해제 */
  overflow: visible;  /* 이미지가 컨테이너에 의해 잘리지 않도록 해제 */
  margin-bottom: 20px;
}

.article-body .fc-thumb img {
  width: 100%;
  height: auto;       /* 이미지 원본 비율 유지 */
  max-height: none;   /* 높이 제한 해제 */
  object-fit: initial; /* cover(자르기) 대신 자연 비율 표시 */
  display: block;
}

.related-thumb {
  width: 72px;
  height: 54px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--bg-subtle);
  flex: 0 0 72px;
}

.side-item a {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: start;
}

.related-copy {
  min-width: 0;
}

/* 수정 textarea */
.edit-textarea {
  width: 100%;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  outline: none;
  resize: vertical;
  min-height: 72px;
  box-sizing: border-box;
  display: block;
}

.edit-textarea:focus {
  border-color: #111;
}

.inline-textarea {
  width: 100%;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  outline: none;
  resize: vertical;
  min-height: 72px;
  box-sizing: border-box;
  display: block;
}

.inline-textarea:focus {
  border-color: #111;
}


.article-shell .side-card {
  border-top: 1.5px solid var(--border-light);
  padding-top: 18px;
  align-self: start;
  position: sticky; /* 추가 */
  top: 50px;        /* 추가 - 상단에서 얼마나 떨어질지 */
}

.side-item a.no-thumb {
    grid-template-columns: 1fr;
}

@media (max-width: 1100px) {
  .category-feed-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .article-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page-hero {
    padding: 20px 0 12px;
  }

  .page-hero p {
    max-width: none;
  }

  .category-chips {
    gap: 6px;
  }

  .category-feed-wrap {
    padding-top: 18px;
    padding-bottom: 44px;
  }

  .category-feed-grid {
    grid-template-columns: 1fr;
  }

  .category-feed-excerpt {
    min-height: 0;
  }

  /* 20260501
   *모바일(768px) 상세 이미지 높이 제한 해제
   *min/max-height 제거, height:auto + overflow:visible 유지
   */
  .article-body .fc-thumb {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    margin-bottom: 16px;
  }

  .article-body .fc-thumb img {
    max-height: none;
    object-fit: initial;
  }
}

@media (max-width: 480px) {
  .page-hero {
    padding: 18px 0 10px;
  }

  /* 20260501
   * 모바일(480px) 상세 페이지 간격 및 이미지 잘림 수정
   * gap 24px->14px, padding 20px/40px->14px/32px
   */
  .article-shell {
    gap: 14px;
    padding: 14px 0 32px;
  }

  .article-lede,
  .article-content {
    font-size: 14px;
  }

  .article-body .fc-thumb {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .article-body .fc-thumb img {
    max-height: none;
    object-fit: initial;
  }

  .side-item a {
    grid-template-columns: 64px 1fr;
    gap: 10px;
  }

  .related-thumb {
    width: 64px;
    height: 48px;
    flex-basis: 64px;
  }
}