/* ============================================
   Millie Partners v4.0 — Blog Page Styles
   ============================================ */

.page-blog {
  background: var(--millie-cream);
  padding-top: var(--header-h-pc);
}

@media (max-width: 1024px) {
  .page-blog {
    padding-top: var(--header-h-mobile);
  }
}

/* --- Link wrappers (block-level <a> around cards) --- */
.blog-hero__main-link,
.blog-hero__side-link,
.blog-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.blog-hero__main-link:hover .blog-hero__main-img img,
.blog-hero__side-link:hover .blog-hero__side-img img {
  transform: scale(1.03);
}

.blog-card-link:hover .blog-card__img img {
  transform: scale(1.04);
}

.blog-card-link:hover .blog-card {
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

/* --- Blog Nav --- */
.blog-nav {
  position: sticky;
  top: var(--header-h-pc);
  z-index: var(--z-above);
  background: rgba(255, 253, 245, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-100);
  height: var(--blog-nav-h);
}

.blog-nav__inner {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.blog-nav__inner::-webkit-scrollbar {
  display: none;
}

.blog-nav__item {
  flex-shrink: 0;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--text-500);
  padding: 8px 18px;
  border-radius: var(--r-full);
  border: none;
  background: none;
  cursor: pointer;
  transition: all var(--t-base);
  white-space: nowrap;
}

.blog-nav__item:hover {
  color: var(--millie-dark);
}

.blog-nav__item.is-active {
  background: var(--millie-dark);
  color: var(--text-on-dark);
}


/* --- Blog Hero: 비대칭 그리드 --- */
.blog-hero {
  padding: 40px 0 0;
}

.blog-hero__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--blog-grid-gap);
  min-height: 400px;
}

.blog-hero__main {
  background: #fff;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), box-shadow var(--t-base);
  cursor: pointer;
}

.blog-hero__main:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.blog-hero__main-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.blog-hero__main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform var(--t-slow);
}

.blog-hero__main:hover .blog-hero__main-img img {
  transform: scale(1.03);
}

.blog-hero__main-body {
  padding: 28px;
}

.blog-hero__main-title {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  color: var(--millie-dark);
  line-height: var(--lh-snug);
  margin-bottom: 12px;
}

.blog-hero__main-excerpt {
  font-size: var(--fs-15);
  color: var(--text-500);
  line-height: var(--lh-relaxed);
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-hero__main-meta {
  display: flex;
  gap: 12px;
  font-size: var(--fs-13);
  color: var(--text-400);
}

.blog-hero__side {
  display: flex;
  flex-direction: column;
  gap: var(--blog-grid-gap);
}

.blog-hero__side-post {
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  flex: 1;
  transition: transform var(--t-base), box-shadow var(--t-base);
  cursor: pointer;
}

.blog-hero__side-post:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.blog-hero__side-img {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.blog-hero__side-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.blog-hero__side-title {
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  color: var(--millie-dark);
  line-height: var(--lh-snug);
  padding: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-hero__side-meta {
  padding: 0 16px 12px;
  font-size: var(--fs-12);
  color: var(--text-400);
}


/* --- Blog Badge --- */
.blog-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  padding: 4px 12px;
  border-radius: var(--r-full);
  color: #fff;
  z-index: 1;
}

.blog-badge--guide { background: var(--badge-guide); color: var(--millie-dark); }
.blog-badge--youtube { background: var(--badge-youtube); }
.blog-badge--interview { background: var(--badge-interview); }
.blog-badge--tips { background: var(--badge-tips); }
.blog-badge--sidejob { background: var(--badge-side-job); }

/* A-34: 그라데이션 썸네일 + 아이콘 */
[data-cat] .blog-hero__main-img img,
[data-cat] .blog-hero__side-img img,
[data-cat] .blog-card__img img { display: none; }

[data-cat="guide"] .blog-hero__main-img,
[data-cat="guide"] .blog-hero__side-img,
[data-cat="guide"] .blog-card__img     { background: linear-gradient(145deg, #FFD54F 0%, #FFCB00 40%, #F5A623 100%); }
[data-cat="youtube"] .blog-hero__main-img,
[data-cat="youtube"] .blog-hero__side-img,
[data-cat="youtube"] .blog-card__img   { background: linear-gradient(145deg, #FF6B6B 0%, #FF4444 40%, #E02D2D 100%); }
[data-cat="interview"] .blog-hero__main-img,
[data-cat="interview"] .blog-hero__side-img,
[data-cat="interview"] .blog-card__img { background: linear-gradient(145deg, #818CF8 0%, #6366F1 40%, #4F46E5 100%); }
[data-cat="tips"] .blog-hero__main-img,
[data-cat="tips"] .blog-hero__side-img,
[data-cat="tips"] .blog-card__img      { background: linear-gradient(145deg, #FFB74D 0%, #F5822A 40%, #E06B10 100%); }
[data-cat="sidejob"] .blog-hero__main-img,
[data-cat="sidejob"] .blog-hero__side-img,
[data-cat="sidejob"] .blog-card__img   { background: linear-gradient(145deg, #4ADE80 0%, #22C55E 40%, #16A34A 100%); }



/* --- CTA Banner --- */
.blog-cta-banner {
  padding: 48px 0;
}

.blog-cta-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--grad-cta);
  border-radius: var(--r-xl);
  padding: 28px 36px;
}

.blog-cta-banner__title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--millie-dark);
  margin-bottom: 4px;
}

.blog-cta-banner__desc {
  font-size: var(--fs-14);
  color: var(--millie-dark-soft);
}


/* --- 3열 포스트 그리드 --- */
.blog-grid-section {
  padding: 0 0 60px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--blog-grid-gap);
}

.blog-card {
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-base), box-shadow var(--t-base);
  cursor: pointer;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.blog-card__img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.blog-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform var(--t-slow);
}

.blog-card:hover .blog-card__img img {
  transform: scale(1.04);
}

.blog-card__body {
  padding: 20px;
}

.blog-card__title {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--millie-dark);
  line-height: var(--lh-snug);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__excerpt {
  font-size: var(--fs-14);
  color: var(--text-500);
  line-height: var(--lh-relaxed);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__meta {
  display: flex;
  gap: 10px;
  font-size: var(--fs-12);
  color: var(--text-400);
}


/* --- Blog Bottom CTA --- */
.blog-bottom-cta {
  padding: 0 0 80px;
}

.blog-bottom-cta__inner {
  background: var(--grad-dark);
  border-radius: var(--r-2xl);
  padding: 64px 40px;
  text-align: center;
}

.blog-bottom-cta__title {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  color: var(--text-on-dark);
  line-height: var(--lh-snug);
  margin-bottom: 12px;
}

.blog-bottom-cta__title strong {
  color: var(--millie-yellow);
}

.blog-bottom-cta__desc {
  font-size: var(--fs-15);
  color: rgba(255, 248, 225, 0.6);
  margin-bottom: 28px;
  letter-spacing: var(--ls-wide);
}


/* --- Active nav link --- */
.header__nav-link--active {
  color: var(--millie-dark);
}

.header__nav-link--active::after {
  width: 100%;
}


/* --- Blog Responsive --- */
@media (max-width: 1024px) {
  .blog-nav {
    top: var(--header-h-mobile);
  }

  .blog-hero__grid {
    grid-template-columns: 1fr;
  }

  .blog-hero__side {
    flex-direction: row;
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .blog-hero__main-body {
    padding: 20px;
  }

  .blog-hero__main-title {
    font-size: var(--fs-20);
  }

  .blog-hero__side {
    flex-direction: column;
  }

  .blog-cta-banner__inner {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 24px;
  }

  .blog-bottom-cta__inner {
    padding: 48px 24px;
  }

  .blog-bottom-cta__title {
    font-size: var(--fs-24);
  }
}

@media (max-width: 480px) {
  .blog-hero {
    padding: 24px 0 0;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-cta-banner {
    padding: 32px 0;
  }

  .blog-grid-section {
    padding-bottom: 40px;
  }

  .blog-bottom-cta {
    padding-bottom: 60px;
  }

  .blog-bottom-cta__inner {
    padding: 40px 20px;
    border-radius: var(--r-xl);
  }
}

/* --- 썸네일 입체 레이아웃 --- */
[data-cat] .blog-card__img,
[data-cat] .blog-hero__main-img,
[data-cat] .blog-hero__side-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

[data-cat] .blog-card__img::after,
[data-cat] .blog-hero__main-img::after,
[data-cat] .blog-hero__side-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 20%, rgba(255,255,255,0.25) 0%, transparent 65%);
  pointer-events: none;
}

.blog-thumb-icon {
  width: 56px;
  height: 56px;
  color: rgba(255, 255, 255, 0.92);
  stroke-width: 1.5;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
  z-index: 1;
}

.blog-hero__main-img .blog-thumb-icon {
  width: 72px;
  height: 72px;
}

[data-cat] .blog-badge {
  position: static;
  transform: none;
  top: auto; left: auto;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  padding: 6px 16px;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  z-index: 1;
}