/* ══════════════════════════════════════════════════════════════
   A 사이트 메인 — 대표홈페이지와 같은 흐름

   한 화면에 한 덩어리씩 넘어간다.
     1) 비주얼   두 장이 6초마다 바뀌며 카피가 떠오른다
     2) PREMIUM7 일곱 장이 배경으로 넘어간다
     3) 클래스   왼쪽 제목 + 오른쪽 카드 넷
     4) 푸터

   원본의 CSS·JS 를 가져다 쓴 게 아니라 같은 움직임을 직접 짠 것이다.
   (원본은 jquery.fullpage + swiper 를 쓴다. 여기서는 한 화면 높이와 짧은 스크립트로 푼다)
   ══════════════════════════════════════════════════════════════ */

.jam{--jam-nav:78px}

/* 스크롤 스냅은 쓰지 않는다.
   붙여 놨더니 푸터까지 내려가지지 않고 위로 되튕겼다.
   한 화면씩 보이는 느낌은 아래 min-height:100vh 만으로 충분하다. */
.jam__sec{position:relative;min-height:100vh;display:flex;align-items:center;
  overflow:hidden;color:#fff}
.jam__sec--light{color:var(--ink);background:var(--bg)}

/* ── 1) 비주얼 ─────────────────────────────── */
.jam__slides{position:absolute;inset:0;z-index:0}
.jam__slide{position:absolute;inset:0;background:center/cover no-repeat;
  opacity:0;transform:scale(1.06);
  transition:opacity 1.4s ease,transform 7s linear}
.jam__slide.is-on{opacity:1;transform:scale(1)}
.jam__sec--visual::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(20,16,22,.62) 0%, rgba(20,16,22,.30) 46%, rgba(20,16,22,.06) 100%)}

.jam__in{position:relative;z-index:2;width:100%;max-width:1200px;
  margin:0 auto;padding:0 56px}
@media (max-width:1080px){ .jam__in{padding:0 22px} }

.jam__t1,.jam__t2{margin:0;font-size:clamp(15px,1.5vw,20px);font-weight:500;
  letter-spacing:-.02em;color:rgba(255,255,255,.9);
  opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s ease}
.jam__t2{margin-top:6px}
.jam__cal{display:flex;align-items:flex-end;gap:18px;margin-top:26px}
.jam__cal img{width:clamp(120px,13vw,212px);height:auto;
  opacity:0;transform:translateY(22px);transition:opacity 1s ease,transform 1s ease;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.45)) invert(1)}
.jam__cal img:last-child{width:clamp(88px,9.5vw,153px)}

.jam__sec--visual.is-in .jam__t1{opacity:1;transform:none;transition-delay:.2s}
.jam__sec--visual.is-in .jam__t2{opacity:1;transform:none;transition-delay:.4s}
.jam__sec--visual.is-in .jam__cal img{opacity:1;transform:none}
.jam__sec--visual.is-in .jam__cal img:nth-child(1){transition-delay:.7s}
.jam__sec--visual.is-in .jam__cal img:nth-child(2){transition-delay:.95s}

.jam__note{position:absolute;left:0;right:0;bottom:22px;z-index:2;margin:0;
  padding:0 56px;font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.62)}
@media (max-width:1080px){ .jam__note{padding:0 22px;font-size:10.5px;bottom:14px} }

/* 슬라이드 표시 점 */
.jam__dots{position:absolute;left:56px;bottom:74px;z-index:3;display:flex;gap:10px}
.jam__dots button{width:34px;height:3px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.32);transition:background .3s}
.jam__dots button.is-on{background:var(--wine-soft)}
@media (max-width:1080px){ .jam__dots{left:22px;bottom:60px} }

/* ── 2) PREMIUM7 ───────────────────────────── */
.jam__sec--p7::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,16,22,.30) 0%,rgba(20,16,22,.72) 100%)}
.jam__ptitle{position:absolute;left:0;right:0;top:calc(var(--jam-nav) + 40px);z-index:2;
  text-align:center;margin:0;font-family:var(--font-en,inherit);
  font-size:clamp(28px,4vw,54px);font-weight:800;letter-spacing:.06em;
  color:rgba(255,255,255,.92)}
.jam__pitem{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 56px}
.jam__pno{margin:0 0 14px;font-size:clamp(38px,4.6vw,64px);font-weight:800;
  line-height:1;color:var(--wine-soft);letter-spacing:-.03em}
.jam__ph{margin:0 0 14px;font-size:clamp(22px,2.6vw,36px);font-weight:700;
  letter-spacing:-.035em}
.jam__pp{margin:0;font-size:clamp(14px,1.4vw,17px);line-height:1.8;
  color:rgba(255,255,255,.82)}
.jam__pitem{opacity:0;transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease}
.jam__pitem.is-on{opacity:1;transform:none}
@media (max-width:1080px){ .jam__pitem{padding:0 22px} }

.jam__pdots{position:absolute;left:0;right:0;bottom:56px;z-index:3;
  display:flex;justify-content:center;gap:8px}
.jam__pdots button{width:9px;height:9px;border:0;padding:0;border-radius:50%;
  background:rgba(255,255,255,.32);cursor:pointer;transition:background .3s,transform .3s}
.jam__pdots button.is-on{background:var(--wine-soft);transform:scale(1.25)}

/* ── 3) 클래스 ─────────────────────────────── */
.jam__sec--class{background:var(--bg);color:var(--ink)}
.jam__class{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:56px;
  align-items:center;max-width:1200px;margin:0 auto;padding:120px 56px 90px;width:100%}
@media (max-width:1080px){
  .jam__class{grid-template-columns:1fr;gap:34px;padding:100px 22px 70px}
}
.jam__ctit{margin:0 0 22px;font-family:var(--font-serif);
  font-size:clamp(30px,3.4vw,46px);font-weight:700;line-height:1.28;
  letter-spacing:-.035em;color:var(--ink)}
.jam__ctit b{color:var(--wine)}
.jam__ctxt{margin:0 0 26px;font-size:15.5px;line-height:1.85;color:var(--ink-soft)}
.jam__ctxt div + div{margin-top:16px}
.jam__clogo{width:150px;height:auto}

.jam__cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media (max-width:640px){ .jam__cards{grid-template-columns:1fr} }
.jam__card{background:#fff;border:1px solid var(--line);padding:24px}
.jam__card em{display:block;font-style:normal;font-size:11.5px;font-weight:700;
  letter-spacing:.22em;color:var(--wine);margin-bottom:10px}
.jam__card h3{margin:0 0 14px;font-size:17px;font-weight:700;letter-spacing:-.03em}
.jam__card img{width:100%;height:150px;object-fit:cover;margin-bottom:14px}
.jam__card p{margin:0;font-size:13.5px;line-height:1.75;color:var(--ink-soft)}

/* ── 4) 푸터 자리 ──────────────────────────── */
.jam__sec--foot{min-height:0;display:block;color:inherit}