/* ─────────────────────────────────────────────────────────────
   woonagi showcase — 글 목록 섹션
   기하·인터랙션 규격: MotionSites `blog-showcase` 프롬프트에서 추출
   색·타이포: assets/woonagi.css 토큰 (클랭 블루 x 테라코타)
   클래스는 전부 wn-sc- 네임스페이스 (기존 .cat/.loop-entry 와 충돌 회피)
   ───────────────────────────────────────────────────────────── */

.wn-sc {
  --sc-line: #E5E1D8;
  --sc-surface: var(--woonagi-cream, #FAF8F4);
  --sc-muted: #5B5B54;
  --sc-cat: #5B5B54;        /* 카테고리 미배정 기본값 */
  --sc-cat-deep: #42423C;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
  font-family: var(--woonagi-body);
  color: var(--woonagi-ink, #1A1A1A);
}

/* ── 카테고리 색: 브랜드 팔레트 안에서만 배정. deep 은 color-mix 대신 미리 계산한 값 ── */
.wn-sc [data-cat="making"]    { --sc-cat: #0B3ED2; --sc-cat-deep: #082D97; }  /* 만들기 */
.wn-sc [data-cat="agent"]     { --sc-cat: #8A3F24; --sc-cat-deep: #632D1A; }  /* 에이전트 */
.wn-sc [data-cat="ontology"]  { --sc-cat: #0E6B5A; --sc-cat-deep: #0A4D41; }  /* 온톨로지 */
.wn-sc [data-cat="knowledge"] { --sc-cat: #5B5B54; --sc-cat-deep: #42423C; }  /* 지식 */
.wn-sc [data-cat="career"]    { --sc-cat: #08309F; --sc-cat-deep: #062372; }  /* 커리어 */
.wn-sc [data-cat="harness"]   { --sc-cat: #C66846; --sc-cat-deep: #8F4B32; }  /* 하네스 엔지니어링 */

/* ── 헤더 ── */
.wn-sc__badge {
  display: inline-block; background: #F2EFE9; border-radius: 8px;
  padding: 6px 14px; font-size: 13px; font-weight: 600; color: #444;
}
.wn-sc__title {
  font-family: var(--woonagi-display);
  font-size: 60px; font-weight: 700; letter-spacing: -1.5px;
  line-height: 1.18; margin: 24px 0 0;
}
.wn-sc__header-bottom {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; margin-top: 28px;
}
.wn-sc__subtitle {
  max-width: 480px; color: var(--sc-muted); font-size: 17px;
  font-weight: 500; line-height: 1.7; margin: 0;
}
.wn-sc__all {
  flex: none; background: var(--woonagi-ink, #1A1A1A); color: #fff;
  border: 0; border-radius: 40px; padding: 14px 28px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: inherit; text-decoration: none; white-space: nowrap;
  transition: transform .25s ease, background .25s ease;
}
.wn-sc__all:hover { transform: scale(1.02); background: var(--woonagi-blue, #0B3ED2); color: #fff; }

/* ── 미디어 (커버 있음 / 없음 공통) ── */
.wn-sc__media { text-decoration: none; position: relative; overflow: hidden; background: var(--sc-cat); display: block; }
.wn-sc__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.33, 1, .68, 1);
}
/* 커버 없는 글 — 폴백이 아니라 정식 타이포 커버다. 발행 글 대다수가 여기 해당한다 */
.wn-sc__media--text {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px 22px 20px;
  background: linear-gradient(150deg, var(--sc-cat) 0%, var(--sc-cat-deep) 100%);
  transition: transform .5s cubic-bezier(.33, 1, .68, 1);
}
/* 라틴은 Instrument Serif, 한글은 Wanted Sans 로 글자별 폴백된다 */
.wn-sc__cover-kicker {
  font-family: "Instrument Serif", "Wanted Sans Variable", Georgia, serif;
  font-style: italic; color: rgba(255, 255, 255, .74);
  font-size: 14px; line-height: 1.25; margin-bottom: 8px;
}
.wn-sc__cover-title {
  font-family: var(--woonagi-display);
  font-weight: 700; color: #fff; font-size: 21px;
  line-height: 1.42; letter-spacing: -.3px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .18);
}
.wn-sc__featured .wn-sc__media--text { padding: 44px 40px 40px; }
.wn-sc__featured .wn-sc__cover-kicker { font-size: 18px; margin-bottom: 14px; }
.wn-sc__featured .wn-sc__cover-title { font-size: 34px; -webkit-line-clamp: 4; }
.wn-sc__overlay {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .25);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.wn-sc__plus {
  position: absolute; top: 50%; left: 50%; width: 70px; height: 70px;
  margin: -35px 0 0 -35px; border-radius: 50%; background: rgba(255, 255, 255, .2);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 28px; font-weight: 300; line-height: 1;
  transform: scale(.7); opacity: 0; pointer-events: none;
  transition: transform .3s ease, opacity .3s ease;
}
.wn-sc__br { position: absolute; width: 12px; height: 12px; opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.wn-sc__br--tl { top: 15px; left: 15px;  border-top: 1.5px solid #fff; border-left: 1.5px solid #fff; }
.wn-sc__br--tr { top: 15px; right: 15px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; }
.wn-sc__br--bl { bottom: 15px; left: 15px;  border-bottom: 1.5px solid #fff; border-left: 1.5px solid #fff; }
.wn-sc__br--brr{ bottom: 15px; right: 15px; border-bottom: 1.5px solid #fff; border-right: 1.5px solid #fff; }
.wn-sc__media:hover img,
.wn-sc__media:hover.wn-sc__media--text { transform: scale(1.08); }
.wn-sc__media:hover .wn-sc__overlay { opacity: 1; }
.wn-sc__media:hover .wn-sc__plus { transform: scale(1); opacity: 1; }
.wn-sc__media:hover .wn-sc__br { opacity: 1; }

/* ── 카테고리 배지 ── */
.wn-sc__cat {
  display: inline-block; border-radius: 20px; background: var(--sc-cat);
  color: #fff; font-size: 11px; font-weight: 600; padding: 4px 12px;
  white-space: nowrap; text-decoration: none;
}

/* ── 대표 글 ── */
.wn-sc__featured {
  display: grid; grid-template-columns: 1fr 1fr; border-radius: 20px;
  border: 1px solid var(--sc-line); background: var(--sc-surface);
  min-height: 480px; overflow: hidden; margin-top: 56px;
}
.wn-sc__featured .wn-sc__content {
  padding: 56px 60px; display: flex; flex-direction: column;
  justify-content: center;   /* 하단 고정 대신 세로 가운데 — 한국어 발췌가 짧아 생기던 빈칸을 없앤다 */
}
.wn-sc__must {
  display: inline-block; align-self: flex-start; background: var(--woonagi-ink, #1A1A1A);
  color: #fff; border-radius: 20px; font-size: 12px; font-weight: 600; padding: 5px 14px;
}
.wn-sc__kicker {
  display: block; margin: 22px 0 8px; font-size: 13px; font-weight: 600;
  letter-spacing: .3px; color: var(--sc-cat);
}
.wn-sc__featured h2 {
  font-family: var(--woonagi-display); font-size: 38px; font-weight: 700;
  letter-spacing: -1px; line-height: 1.32; margin: 0;
}
.wn-sc__featured h2 a { color: inherit; text-decoration: none; }
.wn-sc__excerpt {
  color: var(--sc-muted); font-size: 16px; line-height: 1.75; margin: 18px 0 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.wn-sc__foot {
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--sc-line);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.wn-sc__by { font-size: 14px; font-weight: 600; color: #444; }

/* ── 카드 3종 ── */
.wn-sc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: 25px; }
.wn-sc__card .wn-sc__media { aspect-ratio: 16 / 10; border-radius: 20px; }
.wn-sc__meta { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 14px; min-height: 26px; }
.wn-sc__date { font-size: 13px; font-weight: 500; color: var(--sc-muted); font-variant-numeric: tabular-nums; }
.wn-sc__card h3 {
  font-family: var(--woonagi-display); font-size: 17px; font-weight: 700;
  line-height: 1.55; margin: 0; letter-spacing: -.2px;
  /* 실제 제목이 길다 — 3줄에서 자른다 */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.wn-sc__card h3 a { color: inherit; text-decoration: none; }
.wn-sc__card h3 a:hover { color: var(--woonagi-blue, #0B3ED2); }

@media (max-width: 1024px) {
  .wn-sc__featured { grid-template-columns: 1fr; }
  .wn-sc__featured .wn-sc__media { min-height: 340px; }
  .wn-sc__featured .wn-sc__content { padding: 40px; }
  .wn-sc__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .wn-sc__title { font-size: 38px; letter-spacing: -1px; }
  .wn-sc__header-bottom { flex-direction: column; align-items: flex-start; gap: 20px; }
  .wn-sc__grid { grid-template-columns: 1fr; }
  .wn-sc__featured h2 { font-size: 27px; }
  .wn-sc__featured .wn-sc__content { padding: 28px; }
  .wn-sc__cover-title { font-size: 19px; }
  .wn-sc__featured .wn-sc__cover-title { font-size: 25px; }
  .wn-sc__featured .wn-sc__media--text { padding: 28px; }
}