/* 꿈에그린학원 홈페이지 UI 정돈 패치 v38
   기존 styles.css를 덮어쓰지 않고 마지막에 추가 로드하는 override 전용 파일입니다. */

:root{
  --dg-ink:#24313b;
  --dg-navy:#26394b;
  --dg-cream:#fbf6ee;
  --dg-paper:#fffdf9;
  --dg-rose:#d98f88;
  --dg-line:rgba(36,49,59,.12);
  --dg-muted:#6f777c;
  --dg-shadow:0 18px 48px rgba(36,49,59,.08);
}

/* 전체 섹션 여백과 제목 균형 */
#stories.section,
.latest.section{
  padding-top:96px;
  padding-bottom:96px;
}

#stories .section-heading.split,
.latest .section-heading.split{
  align-items:flex-end;
  gap:48px;
}

#stories .section-heading.split > p,
.latest .section-heading.split > p{
  max-width:390px;
  font-size:15px;
  line-height:1.75;
  color:var(--dg-muted);
}

/* 블로그 대표 카드: 높이와 이미지 비율을 통일 */
#curatedGrid.story-grid{
  align-items:stretch;
}

#curatedGrid .story-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:0;
  overflow:hidden;
  border-radius:24px;
  background:linear-gradient(180deg,#fff 0%,#fffdf9 100%);
  border:1px solid var(--dg-line);
  box-shadow:0 1px 0 rgba(36,49,59,.02);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

#curatedGrid .story-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--dg-shadow);
  border-color:rgba(36,49,59,.18);
}

/* 현재 app.js에서 사용하는 이미지 구조 여러 경우를 모두 대응 */
#curatedGrid .story-card > img,
#curatedGrid .story-card .story-image,
#curatedGrid .story-card .story-thumb,
#curatedGrid .story-card .thumb,
#curatedGrid .story-card picture{
  width:100%;
}

#curatedGrid .story-card > img,
#curatedGrid .story-card .story-image img,
#curatedGrid .story-card .story-thumb img,
#curatedGrid .story-card .thumb img,
#curatedGrid .story-card picture img{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  height:auto;
  object-fit:cover;
  object-position:center;
  background:#f4f0ea;
}

/* 썸네일이 background-image인 구현도 대응 */
#curatedGrid .story-card .story-image,
#curatedGrid .story-card .story-thumb,
#curatedGrid .story-card .thumb{
  aspect-ratio:16 / 9;
  background-size:cover;
  background-position:center;
  background-color:#f4f0ea;
}

/* 카드 본문이 래퍼 없이 바로 들어가도 자연스럽게 보이도록 */
#curatedGrid .story-card > .story-top,
#curatedGrid .story-card > h3,
#curatedGrid .story-card > p,
#curatedGrid .story-card > .go{
  margin-left:26px;
  margin-right:26px;
}

#curatedGrid .story-card > .story-top{
  margin-top:24px;
}

#curatedGrid .story-top{
  min-height:24px;
}

#curatedGrid .story-tag{
  letter-spacing:.14em;
  font-size:10px;
}

#curatedGrid .story-date{
  font-size:11px;
  color:#9b9d9d;
}

#curatedGrid .story-card h3{
  margin-top:22px;
  margin-bottom:12px;
  min-height:3.0em;
  font-size:21px;
  line-height:1.48;
  letter-spacing:-.035em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

#curatedGrid .story-card p{
  margin-top:0;
  min-height:5.1em;
  color:var(--dg-muted);
  font-size:13px;
  line-height:1.72;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

#curatedGrid .story-card .go{
  margin-top:auto;
  margin-bottom:26px;
  padding-top:22px;
  font-size:12px;
  font-weight:750;
}

/* 이미지가 없는 카드라도 높이가 크게 무너지지 않도록 */
#curatedGrid .story-card.no-image::before{
  content:"꿈에그린학원";
  display:grid;
  place-items:center;
  aspect-ratio:16 / 9;
  background:
    radial-gradient(circle at 18% 22%,rgba(217,143,136,.16),transparent 25%),
    radial-gradient(circle at 84% 75%,rgba(158,173,153,.18),transparent 30%),
    #fbf6ee;
  color:#b98980;
  font-size:14px;
  font-weight:800;
  letter-spacing:.08em;
}

/* 최신글 영역: 지나치게 큰 카드 대신 읽기 좋은 뉴스 카드 */
.latest{
  background:#fbf6ee;
}

.latest .section-heading{
  margin-bottom:34px;
}

#latestRail.latest-rail{
  grid-auto-columns:minmax(300px, 1fr);
  gap:16px;
}

#latestRail .latest-card{
  min-height:220px;
  padding:27px 26px;
  border-radius:22px;
  background:#fff;
  border:1px solid var(--dg-line);
  transition:transform .22s ease, box-shadow .22s ease;
}

#latestRail .latest-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 38px rgba(36,49,59,.07);
}

#latestRail .latest-card h3{
  font-size:19px;
  line-height:1.52;
  letter-spacing:-.03em;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

#latestRail .latest-card small{
  margin-top:auto;
}

/* 원장소개: 전문성과 따뜻함의 균형 */
#director .director-wrap{
  gap:72px;
}

#director .director-copy .quote{
  padding-left:18px;
  border-left:2px solid rgba(217,143,136,.55);
}

#director .director-copy > p:not(.eyebrow):not(.quote){
  line-height:1.9;
}

#director .director-visual{
  box-shadow:0 20px 54px rgba(36,49,59,.10);
}

/* 텍스트 링크를 과하지 않게 정돈 */
.text-link{
  text-underline-offset:5px;
}

/* 태블릿 */
@media (max-width:980px){
  #stories .section-heading.split,
  .latest .section-heading.split{
    align-items:flex-start;
    gap:16px;
  }

  #curatedGrid.story-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* 모바일 */
@media (max-width:680px){
  #stories.section,
  .latest.section{
    padding-top:72px;
    padding-bottom:72px;
  }

  #stories .section-heading.split > p,
  .latest .section-heading.split > p{
    max-width:none;
    font-size:14px;
  }

  #curatedGrid.story-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  #curatedGrid .story-card{
    border-radius:20px;
  }

  #curatedGrid .story-card > .story-top,
  #curatedGrid .story-card > h3,
  #curatedGrid .story-card > p,
  #curatedGrid .story-card > .go{
    margin-left:22px;
    margin-right:22px;
  }

  #curatedGrid .story-card > .story-top{
    margin-top:21px;
  }

  #curatedGrid .story-card h3{
    font-size:20px;
    min-height:auto;
  }

  #curatedGrid .story-card p{
    min-height:auto;
  }

  #curatedGrid .story-card .go{
    margin-bottom:22px;
  }

  #latestRail.latest-rail{
    grid-auto-columns:85%;
  }

  #director .director-wrap{
    gap:42px;
  }
}