@charset "utf-8";

/* ======================================================
   BLOG PAGE ONLY
   front.css 수정 없이 안전하게 동작
====================================================== */

.page-blog {
  background: #fff;
}

/* ======================================================
   SUB VISUAL
====================================================== */

/* header가 fixed이므로 아래로 밀어줌 */
.page-blog .sub-visual {
  margin-top: 80px;
}

@media (max-width:768px){
  .page-blog .sub-visual {
    margin-top: 50px;
  }
}

/* 16:9 유지 + PC 최대 높이 제한 */
.page-blog .sub-visual.sub-visual-blog{
  position: relative;
  width: 100%;

  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 560px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: url("../img/main/blog/blog-head.png") no-repeat 50% 50%;
  background-size: cover;
  background-position: center center;
}

/* 오버레이 */
.page-blog .sub-visual.sub-visual-blog::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

.page-blog .sub-visual.sub-visual-blog .inner{
  position: relative;
  z-index: 1;
  text-align: center;
}

.page-blog .sub-visual.sub-visual-blog h2{
  color: #fff;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* 모바일도 16:9 유지 */
@media (max-width:768px){
  .page-blog .sub-visual.sub-visual-blog{
    aspect-ratio: 16 / 9;
    max-height: none;
  }

  .page-blog .sub-visual.sub-visual-blog h2{
    font-size: 28px;
  }
}

/* ======================================================
   CONTENT AREA
====================================================== */

.page-blog .sub-content{
  padding: 70px 0 120px;
}

.page-blog .sub-content .inner{
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ======================================================
   BLOG TABS
====================================================== */

.page-blog .blog-head{
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.page-blog .blog-head .tabs{
  display: flex;
  gap: 36px;
}

.page-blog .blog-head .tab{
  background: none;
  border: 0;
  font-size: 18px;
  font-weight: 700;
  color: #262626;
  cursor: pointer;
  position: relative;
  padding: 6px 0;
}

.page-blog .blog-head .tab::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.page-blog .blog-head .tab.active{
  color: var(--red);
}

.page-blog .blog-head .tab.active::after{
  transform: scaleX(1);
}

/* ======================================================
   BLOG GRID
====================================================== */

.page-blog .blog-grid{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 46px 40px;
}

/* ======================================================
   BLOG CARD
====================================================== */

.page-blog .blog-card{
  display: block;
  text-decoration: none;
  color: #262626;
  transition: transform 0.3s ease;
  min-width: 0;               /* 그리드 내 아이템 가로 넘침 방지 */
}

/* 썸네일 16:9 (패딩 해크 방식으로 구형/모바일 브라우저 호환성 100% 보장) */
.page-blog .blog-card .thumb{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 비율 (9 / 16 = 56.25%) */
  height: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #eee;
}

.page-blog .blog-card .thumb img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* =========================
   제목 2줄 말줄임 + 균일한 높이 유지 (정렬 및 완벽 노출 보장)
========================= */
.page-blog .blog-card .title{
  margin-top: 14px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  height: 2.8em;              /* 1.4 line-height * 2 lines = 2.8em (그리드 정렬 유지) */

  display: -webkit-box;
  -webkit-line-clamp: 2;      /* 최대 2줄 표시 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;    /* 초과 시 ... 처리 */
  word-break: break-all;      /* 한글/영문 줄바꿈 최적화 */

  transition: color 0.3s ease;
}

/* 날짜 */
.page-blog .blog-card .meta{
  font-size: 14px;
  color: #9a9a9a;
}

/* Hover 효과 */
@media (hover:hover){
  .page-blog .blog-card:hover{
    transform: translateY(-6px);
  }

  .page-blog .blog-card:hover .thumb img{
    transform: scale(1.05);
  }

  .page-blog .blog-card:hover .title{
    color: var(--red);
  }
}

/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width:1024px){
  .page-blog .blog-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 34px 26px;
  }

  .page-blog .blog-card .title{
    font-size: 16px;
  }
}

@media (max-width:768px){
  .page-blog .sub-content{
    padding: 50px 0 90px;
  }

  .page-blog .blog-grid{
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .page-blog .blog-head .tabs{
    gap: 22px;
  }
}