.main-container {
  display: flex;
  flex-direction: column;
  gap: 3.7rem;
}

.main-tit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.main-tit .txt {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
}
.main-tit .txt .icon {}
.main-tit .txt .icon img {}
.main-tit .txt b {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-dark);
}
.main-tit > a {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
}
.main-tit > a .icon {}
.main-tit > a .icon img {}
.main-tit > a span {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-gray);
}

/* link-section */
#link-section {}
#link-section .list {}
#link-section .list li {}
#link-section .list {}
#link-section .box {
  padding-top: 8.9rem;
  overflow: hidden;
  padding: 3rem
}
#link-section .box.link-box-1 {
  background: url('../img/link-box-1.png') no-repeat center/cover;
}
#link-section .box.link-box-2 {
  background: url('../img/link-box-2.png') no-repeat center/cover;
}
#link-section .link-list {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}
#link-section .link-btn {
  display: grid;
  place-items: center;
  border-radius: .8rem;
  text-align: center;
  background: #fff;
  width: 100%;
  padding: 1rem 2rem;
  margin-top: 2rem;
}

#link-section .link-btn span {
  color: var(--color-dark);
  font-size: 1.5rem
}

#link-section .link-meta h2,
#link-section .link-meta p {
  line-height: 1.4;
  color: #fff;
}
#link-section .link-meta p {
  margin-top: 1rem
}

/*  */


/* ============================
   home.php — UI 구조 placeholder
   (기존 정의된 선택자는 제외)
============================ */

/* common section */
.main-section {}
.main-con {}

/* link-section 추가 */
#link-section .inner {}
#link-section .link-box {}
#link-section .link-meta {}

/* community-section */
#community-section {
  /* margin-right: -2rem; */
}
#community-section .main-tit {}
#community-section .main-con {
    /* width: calc(100% + 2rem); */
    margin-right: -2rem;
}

.community-swiper {}
/* 방어 1: wrapper 차원에서 슬라이드들을 동일 높이로 stretch */
.community-swiper .swiper-wrapper {
    align-items: stretch;
}
/* 방어 2: 슬라이드 자체가 콘텐츠를 flex로 펼치도록 */
.community-swiper .swiper-slide {
    height: auto;
    display: flex;
}
/* 방어 3: 카드(a)가 슬라이드 높이를 100% 채우도록 */
.community-swiper .swiper-slide > a {
    background: var(--bg-light-gray);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 2.4rem 2rem
}

.community-swiper .swiper-slide > a * {
  transition: 0.1s ease-in-out
}

.community-meta {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
}
.community-meta date {
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-gray);
}
.community-meta b {
    margin: 0.8rem 0 1.4rem;
    color: var(--color-dark);
    font-size: 1.6rem;
    font-weight: 600;
    /* 1줄 일립시스 */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}
.community-meta p {
    color: var(--color-gray);
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.5;
    /* 3줄 일립시스 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
    /* 방어 4: 콘텐츠가 1줄이어도 항상 3줄 분량(line-height 1.5 × 3 = 4.5em) 차지 → 슬라이드 높이 균일 */
    min-height: 4.5em;
}

.community-comment {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.2rem;
}
.community-comment .icon {}
.community-comment .icon img {}
.community-comment span {
    color: var(--color-gray);
    font-size: 1.3rem;
    font-weight: 300;
}

/* === is-current: 활성 슬라이드 강조 (스타일은 직접 작성) === */
.community-swiper .swiper-slide.is-current {
    background: var(--);
}
.community-swiper .swiper-slide.is-current > a {
    background: var(--bg-dark);
}
.community-swiper .swiper-slide.is-current .community-meta {}
.community-swiper .swiper-slide.is-current .community-meta date {
    color: #fff;
}
.community-swiper .swiper-slide.is-current .community-meta b {
    color: #fff;
}
.community-swiper .swiper-slide.is-current .community-meta p {
    color: #fff;
}
.community-swiper .swiper-slide.is-current .community-comment {}
.community-swiper .swiper-slide.is-current .community-comment .icon {}
.community-swiper .swiper-slide.is-current .community-comment .icon img {}
.community-swiper .swiper-slide.is-current .community-comment span {
    color: #fff;
}

/* view-section */
#view-section {}
#view-section .main-tit {}
#view-section .main-con {}

.page-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
}
.page-list li {}
.page-list li > a {
    background: var(--bg-light-gray);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.4rem;
}
.page-list .icon {
    flex-shrink: 0;
}
.page-list .icon img {}

.page-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.page-meta b {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-dark);
}
.page-meta span {
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-gray);
    line-height: 1.4;
}