/* ============================================================
   ANINA — 전면 재개편
   조각 수정으로 규칙이 무너져서 백지에서 다시 쓴다.

   [규칙] 이 파일은 아래 스케일 밖의 값을 쓰지 않는다.
   · 타이포 6단계  : 12 / 14 / 16 / 20 / 28 / 40  (그 외 금지)
   · 간격 8배수    : 8 16 24 32 48 64 80         (그 외 금지)
   · 라운드 1종    : 6px                          (원형 아바타 제외)
   · 보더 1종      : 1px var(--line)
   · 그림자        : 없음 (층은 배경색 차이로만)
   · 그라디언트    : 히어로 배경 1개 + 메탈릭 텍스트 1개, 그 외 금지
   · 액센트        : 스카이 1색. 강조는 색이 아니라 크기·굵기로.
   ============================================================ */

:root{
  --bg:      #07080B;
  --bg-alt:  #0B0C10;
  --surface: #101216;
  --line:    #24272E;

  --fg:      #F5F7FA;
  --fg-2:    #A7ADB8;
  --fg-3:    #727883;

  --accent:  #4EA8FF;
  --accent-ink:#07080B;

  --t-xs: 12px;
  --t-sm: 14px;
  --t-md: 16px;
  --t-lg: 20px;
  --t-xl: 28px;
  --t-2xl:40px;

  --s-1: 8px;  --s-2:16px; --s-3:24px; --s-4:32px;
  --s-6: 48px; --s-8:64px; --s-10:80px;

  --radius:6px;
  --shell:1120px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; scroll-padding-top:64px }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:var(--t-md); line-height:1.65; letter-spacing:-.01em;
  word-break:keep-all; overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ margin:0; font-weight:700; line-height:1.25; letter-spacing:-.025em }
p{ margin:0 } ul,ol{ margin:0; padding:0; list-style:none }
a{ color:inherit; text-decoration:none }
svg{ display:block } img{ max-width:100% }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius) }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--s-3) }
.ico{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }

.skip-link{ position:fixed; top:-80px; left:var(--s-2); z-index:200; background:var(--accent); color:var(--accent-ink);
  padding:var(--s-1) var(--s-2); border-radius:var(--radius); font-weight:700; font-size:var(--t-sm); transition:top .15s }
.skip-link:focus{ top:var(--s-2) }

/* 메탈릭 — 허용된 그라디언트 1 */
.metal{
  background:linear-gradient(176deg,#FFF 0%,#E3E8F0 40%,#98A2B3 56%,#FBFCFE 84%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------- 헤더 ---------- */
.site-header{ position:sticky; top:0; z-index:100; background:rgba(7,8,11,.88);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .2s }
.site-header.is-scrolled{ border-bottom-color:var(--line) }
.header-inner{ display:flex; align-items:center; gap:var(--s-2); height:64px }
.brand{ display:inline-flex; align-items:center; gap:var(--s-1); font-weight:700; margin-inline-end:auto }
.brand-word{ font-size:var(--t-lg); letter-spacing:.04em }
.mark{ width:24px; height:24px; flex:none; color:var(--accent) }
.nav{ display:none }
.header-cta{ display:none }
.icon-btn{ display:grid; place-items:center; width:44px; height:44px; margin-inline-end:-8px;
  background:none; border:0; color:var(--fg); cursor:pointer; border-radius:var(--radius) }

/* ---------- 버튼 (형태 1종, 크기 3단) ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s-1);
  min-height:44px; padding:0 var(--s-3); border:1px solid transparent; border-radius:var(--radius);
  font-size:var(--t-sm); font-weight:700; cursor:pointer; white-space:nowrap;
  transition:background-color .18s, border-color .18s, color .18s }
.btn .ico{ width:16px; height:16px }
.btn-lg{ min-height:48px; padding:0 var(--s-4); font-size:var(--t-md) }
.btn-sm{ min-height:36px; padding:0 var(--s-2); font-size:var(--t-sm) }
.btn-accent{ background:var(--accent); color:var(--accent-ink) }
.btn-ghost{ background:transparent; color:var(--fg); border-color:var(--line) }
.btn-onDark{ background:var(--fg); color:var(--bg) }
@media (hover:hover) and (pointer:fine){
  .btn-accent:hover{ background:#6FB8FF }
  .btn-ghost:hover{ border-color:var(--accent); color:var(--accent) }
  .btn-onDark:hover{ background:#fff }
  .icon-btn:hover{ color:var(--accent) }
  .nav a:hover{ color:var(--fg) }
}

/* ---------- 섹션 공통 ---------- */
.section{ padding-block:var(--s-10) }
.section + .section{ border-top:1px solid var(--line) }
#why{ background:var(--bg-alt) }
.kicker{ font-size:var(--t-xs); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent) }
.sec-title{ margin-top:var(--s-2); font-size:var(--t-xl) }
.sec-sub{ font-size:var(--t-md); color:var(--fg-2) }
.sec-sub-block{ margin-top:var(--s-2); max-width:60ch }

/* ---------- ① 히어로 ---------- */
.hero{ position:relative; overflow:hidden; padding-block:var(--s-10);
  background:linear-gradient(180deg,#0C0E13 0%,var(--bg) 62%);
  border-bottom:1px solid var(--line) }
.hero-fx{ display:none }
.hero-inner{ max-width:720px }
.hero .kicker{ margin-bottom:var(--s-2) }
.hero-title{ font-size:var(--t-2xl); line-height:1.2 }
.hero-lead{ margin-top:var(--s-2); font-size:var(--t-md); color:var(--fg-2); max-width:52ch }
.hero-actions{ margin-top:var(--s-4); display:flex; flex-wrap:wrap; gap:var(--s-1) }

/* ---------- ② 커리큘럼 ---------- */
.showcase{ display:grid; gap:var(--s-2); margin-top:var(--s-6); grid-template-columns:1fr }
.show-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden }
.show-media{ position:relative; aspect-ratio:16/10; display:flex; align-items:flex-end;
  padding:var(--s-2); background:var(--bg-alt); border-bottom:1px solid var(--line) }
.tone-1 .show-media,.tone-2 .show-media,.tone-3 .show-media,.tone-4 .show-media{ background:var(--bg-alt) }
.show-idx{ font-size:var(--t-lg); font-weight:700; color:var(--fg-3) }
.show-body{ padding:var(--s-2) }
.show-body h3{ font-size:var(--t-md) }
.show-body p{ margin-top:var(--s-1); font-size:var(--t-sm); color:var(--fg-2) }

/* ---------- ③ 강점 ---------- */
.steps{ margin-top:var(--s-6) }
.step{ display:grid; grid-template-columns:auto 1fr; gap:var(--s-3);
  padding-block:var(--s-3); border-top:1px solid var(--line) }
.step:last-child{ border-bottom:1px solid var(--line) }
.step-num{ font-size:var(--t-lg); font-weight:700; color:var(--accent) }
.step h3{ font-size:var(--t-md) }
.step p{ margin-top:var(--s-1); font-size:var(--t-sm); color:var(--fg-2); max-width:64ch }

/* ---------- ④ LMS 배너 ---------- */
@media (hover:hover) and (pointer:fine){  }


/* ---------- 푸터 ---------- */
.site-footer{ border-top:1px solid var(--line); padding-top:var(--s-6) }
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s-2); padding-bottom:var(--s-3) }
.footer-brand{ display:flex; align-items:center; gap:var(--s-1); font-size:var(--t-md); font-weight:700; letter-spacing:.04em }
.footer-brand .mark{ color:var(--accent) }
.footer-nav{ display:flex; flex-wrap:wrap; gap:var(--s-3); font-size:var(--t-sm); color:var(--fg-2) }
.footer-legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s-1);
  padding-block:var(--s-2); border-top:1px solid var(--line); font-size:var(--t-xs); color:var(--fg-3) }
@media (hover:hover) and (pointer:fine){ .footer-nav a:hover{ color:var(--fg) } }

/* ---------- 스크롤 등장 ---------- */
.reveal-group > *{ opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease }
.reveal-group.is-in > *{ opacity:1; transform:none }
.reveal-group.is-in > :nth-child(2){ transition-delay:.05s }
.reveal-group.is-in > :nth-child(3){ transition-delay:.1s }
.reveal-group.is-in > :nth-child(4){ transition-delay:.15s }

/* ---------- 반응형 ---------- */
@media (min-width:768px){
  .showcase{ grid-template-columns:repeat(2,1fr) }
  .step{ grid-template-columns:64px 1fr }
    }
@media (min-width:1024px){
  .nav-toggle{ display:none }
  .nav{ display:flex; gap:var(--s-4); margin-inline:auto; font-size:var(--t-sm); color:var(--fg-2) }
  .header-cta{ display:inline-flex }
  .brand{ margin-inline-end:0 }
  .showcase{ grid-template-columns:repeat(4,1fr) }
}

/* 모바일 메뉴 */
.nav.is-open{ display:flex; flex-direction:column; position:absolute; inset-inline:0; top:64px;
  background:var(--bg-alt); border-bottom:1px solid var(--line); padding:0 var(--s-3) var(--s-2) }
.nav.is-open a{ display:flex; align-items:center; min-height:48px; font-size:var(--t-md);
  color:var(--fg); border-bottom:1px solid var(--line) }
.nav.is-open a:last-child{ border-bottom:0 }

/* 모션 최소화 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important }
  .reveal-group > *{ opacity:1; transform:none }
}

/* ============================================================
   모션 — 규칙 안에서 의미 있는 움직임만
   · easing 2종: --e(표준) / --e-out(감속)  · duration 3단: .18s .32s .6s
   · 움직임은 transform·opacity 만 (레이아웃 흔들지 않음)
   ============================================================ */
:root{ --e:cubic-bezier(.4,0,.2,1); --e-out:cubic-bezier(.16,1,.3,1); }

/* ---- 히어로: 진입 시 순차 등장 ---- */
@keyframes rise{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
.hero .kicker{ animation:rise .6s var(--e-out) both }
.hero-title{ animation:rise .6s var(--e-out) .08s both }
.hero-lead{ animation:rise .6s var(--e-out) .16s both }
.hero-actions{ animation:rise .6s var(--e-out) .24s both }

/* 메탈릭 헤드라인에 천천히 흐르는 광택 */
@keyframes sheen{ 0%{ background-position:0% 50% } 100%{ background-position:200% 50% } }
.metal{ background-size:200% auto; animation:sheen 8s linear infinite }

/* ---- 커리큘럼 카드: 떠오름 + 이미지 자리 줌 + 번호 강조 ---- */
.show-card{ transition:transform .32s var(--e-out), border-color .32s var(--e) }
.show-media{ overflow:hidden }
.show-media::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 50% 0%, rgba(78,168,255,.16), transparent 70%);
  opacity:0; transition:opacity .32s var(--e) }
.show-idx{ transition:color .32s var(--e), transform .32s var(--e-out) }
.show-body h3{ transition:color .18s var(--e) }
@media (hover:hover) and (pointer:fine){
  .show-card:hover{ transform:translateY(-4px); border-color:var(--accent) }
  .show-card:hover .show-media::after{ opacity:1 }
  .show-card:hover .show-idx{ color:var(--accent); transform:translateY(-2px) }
  .show-card:hover .show-body h3{ color:var(--accent) }
}

/* ---- 강점 스텝: 좌측 라인이 차오르고 번호가 밀린다 ---- */
.step{ position:relative; transition:background-color .32s var(--e) }
.step::before{ content:""; position:absolute; left:0; top:-1px; height:1px; width:0;
  background:var(--accent); transition:width .6s var(--e-out) }
.step-num{ transition:transform .32s var(--e-out) }
@media (hover:hover) and (pointer:fine){
  .step:hover::before{ width:100% }
  .step:hover .step-num{ transform:translateX(4px) }
}

/* ---- LMS 배너: 아이콘 반전 + 화살표 이동 ---- */
@media (hover:hover) and (pointer:fine){
    }

/* ---- 버튼: 눌림 반응 + 화살표 ---- */
.btn{ transition:background-color .18s var(--e), border-color .18s var(--e), color .18s var(--e), transform .18s var(--e) }
.btn .ico{ transition:transform .32s var(--e-out) }
.btn:active{ transform:translateY(1px) }
@media (hover:hover) and (pointer:fine){
  .btn-accent:hover .ico,.btn-onDark:hover .ico{ transform:translateX(3px) }
}

/* ---- 네비: 밑줄이 좌→우로 그어진다 ---- */
@media (min-width:1024px){
  .nav a{ position:relative; padding-block:4px; transition:color .18s var(--e) }
  .nav a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
    background:var(--accent); transition:width .32s var(--e-out) }
  .nav a:hover::after{ width:100% }
}

/* ---- 강사 카드 ---- */
@media (hover:hover) and (pointer:fine){
}

/* ---- 푸터 링크 ---- */
.footer-nav a{ transition:color .18s var(--e) }

/* ---- 스크롤 등장(JS 가 .is-in 부여) — 더 또렷하게 ---- */
.reveal-group > *{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--e-out), transform .6s var(--e-out) }
.reveal-group.is-in > *{ opacity:1; transform:none }
.reveal-group.is-in > :nth-child(2){ transition-delay:.08s }
.reveal-group.is-in > :nth-child(3){ transition-delay:.16s }
.reveal-group.is-in > :nth-child(4){ transition-delay:.24s }

/* 모션 최소화 — 위 애니메이션 전부 정지 */
@media (prefers-reduced-motion:reduce){
  .hero .kicker,.hero-title,.hero-lead,.hero-actions,.metal{ animation:none }
  .metal{ background-position:0 50% }
  .step::before{ transition:none }
}

/* ============================================================
   보정 — 히어로 우선 노출 / 강사 정리
   ============================================================ */

/* ① 히어로: 첫 화면을 채운다. 헤더(64px)를 뺀 높이. */
.hero{ min-height:calc(100svh - 64px); display:flex; align-items:center; padding-block:var(--s-8) }
/* 스크롤 유도 힌트 */
.hero::after{ content:""; position:absolute; left:50%; bottom:var(--s-4); width:1px; height:32px;
  background:linear-gradient(180deg,transparent,var(--accent)); opacity:.5;
  animation:hint 2.4s var(--e) infinite }
@keyframes hint{ 0%,100%{ transform:translateY(0); opacity:.2 } 50%{ transform:translateY(8px); opacity:.6 } }

/* ② 강사: 문의와 좌우로 붙어 어지러웠다. 세로로 풀고 담백하게. */
/* 카드 테두리를 없애고 텍스트만 — 배경 위에 얹힌 상자가 시선을 분산시켰다 */

@media (min-width:768px){
  }

/* 모션 최소화 */
@media (prefers-reduced-motion:reduce){ .hero::after{ animation:none } }

/* ============================================================
   히어로 독점 — 첫 화면에 다음 섹션이 걸쳐 보이지 않게
   ============================================================ */
/* 헤더가 sticky(투명 배경)라 히어로가 그 아래로 흐른다. 뷰포트 전체 높이를 쓴다. */
.hero{ min-height:100svh; }
/* 다음 섹션이 아래에서 살짝 보이던 것 차단: 히어로 하단에 페이드 아웃 */
.hero::before{ content:""; position:absolute; inset-inline:0; bottom:0; height:var(--s-8);
  background:linear-gradient(180deg,transparent,var(--bg)); pointer-events:none; z-index:1 }
.hero-inner{ position:relative; z-index:2 }
/* 스크롤 힌트는 페이드 위로 */
.hero::after{ z-index:2 }

/* 첫 화면이 꽉 차야 하므로 세로 여백을 히어로에서만 늘린다 */
@media (min-height:720px){
  .hero{ padding-block:var(--s-10) }
}

/* ============================================================
   히어로 채우기 — 전체화면인데 글씨가 작아 공허했다.
   화면 크기에 비례해 키우고(clamp), 본문 폭도 넓힌다.
   ============================================================ */
.hero-inner{ max-width:900px }
.hero .kicker{ font-size:var(--t-sm); letter-spacing:.2em; margin-bottom:var(--s-3) }
.hero-title{ font-size:clamp(40px,7.5vw,88px); line-height:1.1; letter-spacing:-.03em }
.hero-lead{ margin-top:var(--s-3); font-size:clamp(16px,1.9vw,20px); line-height:1.7; max-width:56ch }
.hero-actions{ margin-top:var(--s-6) }
.hero .btn-lg{ min-height:56px; padding:0 var(--s-4); font-size:var(--t-md) }

/* ============================================================
   문의 — 강사 제거 후 단독 섹션. 중앙 정렬로 마무리 임팩트.
   ============================================================ */

/* ============================================================
   섹션당 한 화면 — 스크롤 스냅
   각 섹션이 뷰포트를 채우고, 스크롤하면 다음 섹션에 정확히 맞춰 멈춘다.
   proximity(가까울 때만 스냅)를 쓴다 — mandatory 는 내용이 화면보다 길 때
   중간을 못 읽고 튕겨서 위험하다.
   ============================================================ */
@media (min-width:768px) and (min-height:600px){
  .hero,
  main > .section{
    min-height:100svh;
    display:flex; flex-direction:column; justify-content:center;
  }
  main > .section{ padding-block:var(--s-8) }
}
/* 스냅은 마우스/키보드 스크롤 모두에서 자연스러워야 한다 */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
}

/* ============================================================
   ④ LMS — 기능 목록 (카드 대신 담백한 리스트)
   ============================================================ */
.lms-list{ display:grid; gap:0; margin-top:var(--s-6); grid-template-columns:1fr }
.lms-list li{ padding-block:var(--s-3); border-top:1px solid var(--line) }
.lms-list li:last-child{ border-bottom:1px solid var(--line) }
.lms-list h3{ font-size:var(--t-md) }
.lms-list p{ margin-top:var(--s-1); font-size:var(--t-sm); color:var(--fg-2) }
.lms-go{ margin-top:var(--s-6) }

/* ============================================================
   한 화면 = 한 섹션 — 내용이 화면에 알맞게 담기도록 배치 조정
   ============================================================ */
@media (min-width:768px) and (min-height:600px){
  /* 섹션 내부를 세로 중앙에 모으고, 제목/본문 간격을 화면 높이에 비례 */
  main > .section > .shell{ width:100%; }
  .showcase{ margin-top:var(--s-4) }
  .steps,.lms-list{ margin-top:var(--s-4) }
  .lms-go{ margin-top:var(--s-4) }
}
@media (min-width:1024px){
  /* LMS 기능 6개는 2열이 한 화면에 잘 맞는다 */
  .lms-list{ grid-template-columns:repeat(2,1fr); column-gap:var(--s-6) }
  .lms-list li{ border-top:1px solid var(--line) }
  .lms-list li:nth-last-child(-n+2){ border-bottom:1px solid var(--line) }
  /* 커리큘럼 4개는 한 줄, 카드 높이를 낮춰 화면에 담기게 */
  .show-media{ aspect-ratio:16/9 }
}
/* 화면이 낮으면(노트북 등) 여백을 줄여 잘리지 않게 */
@media (min-width:768px) and (max-height:800px){
  main > .section{ padding-block:var(--s-6) }
  .showcase,.steps,.lms-list{ margin-top:var(--s-3) }
}

/* ============================================================
   히어로 배경 — Maya 뷰포트식 격자
   HTML 에 이미 있는 .hero-fx 를 되살려 쓴다(요소 추가 없음).
   · 격자는 아주 연하게(2~4% 흰색) — 배경이지 그림이 아니다
   · 중앙에서 밝고 가장자리로 갈수록 사라지는 그라데이션 마스크
   · 원근감: 아래쪽 큰 격자 + 위쪽 미세 격자 두 겹
   ============================================================ */
.hero-fx{ display:block; position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden }

/* ① 미세 격자 — 화면 전체에 깔리는 기본 그리드 */
.hero-fx::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(214,224,240,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,224,240,.045) 1px, transparent 1px);
  background-size:40px 40px;
  /* 중앙만 보이고 가장자리로 사라진다 */
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%, #000 10%, transparent 72%);
          mask-image:radial-gradient(120% 90% at 50% 40%, #000 10%, transparent 72%);
}

/* ② 큰 격자 — 원근으로 눕혀 바닥면(ground plane) 느낌 */
.hero-fx::after{
  content:""; position:absolute; inset-inline:-50%; bottom:-10%; height:70%;
  background-image:
    linear-gradient(rgba(214,224,240,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,224,240,.07) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(520px) rotateX(72deg);
  transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 55%, transparent 92%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 55%, transparent 92%);
  opacity:.9;
}

/* 격자 위에 은은한 광원 하나 — 격자가 균일해서 밋밋해지는 걸 막는다 */
.hero-fx span:first-child{
  position:absolute; left:50%; top:34%; width:min(90vw,900px); aspect-ratio:2/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(78,168,255,.10), transparent 65%);
  filter:blur(40px);
}
.hero-fx span:last-child{ display:none }

/* 본문이 격자 위에 오도록 */
.hero-inner{ position:relative; z-index:2 }

/* ============================================================
   스크린샷 피드백 — 여백 과다 / 카드 비율 / 줄바꿈
   ============================================================ */

/* ① 스냅 섹션의 위아래 공백 축소.
   100svh 를 채우되 내용을 중앙에 두고, 세로 패딩은 최소로. */
@media (min-width:768px) and (min-height:600px){
  main > .section{ padding-block:var(--s-6) }
  main > .section > .shell{ margin-block:auto }   /* 내용을 세로 중앙 */
}

/* ② 카드 미디어가 너무 높아 빈 상자가 커 보였다 → 납작하게 */
.show-media{ aspect-ratio:16/7 }
@media (min-width:1024px){ .show-media{ aspect-ratio:3/2 } }
.show-idx{ font-size:var(--t-md); color:var(--fg-3) }

/* ③ 한글 줄바꿈 — 본문 폭을 좁혀 어절이 줄 끝에 걸치지 않게.
   keep-all 만으로는 64ch 처럼 넓으면 마지막 어절이 다음 줄로 떨어져 보인다. */
.step p{ max-width:52ch }
.lms-list p{ max-width:44ch }
.show-body p{ max-width:34ch }
.sec-sub-block{ max-width:48ch }
/* 문장 끝이 한 단어만 남는 것(고아) 방지 */
.step p, .lms-list p, .show-body p, .sec-sub{ text-wrap:pretty }

/* 헤더: CTA 제거로 nav 가 우측에 붙도록 */
@media (min-width:1024px){
  .nav{ margin-inline-start:auto; margin-inline-end:0 }
}

/* ============================================================
   헤더 — 메뉴 제거, 문의하기 하나만. 누르면 메일 주소가 드러난다.
   ============================================================ */
.contact-box{ position:relative; margin-inline-start:auto }
.contact-pop{
  position:absolute; right:0; top:calc(100% + 8px); z-index:110;
  min-width:240px; padding:var(--s-2);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  animation:pop .18s var(--e-out) both;
}
.contact-pop[hidden]{ display:none }
@keyframes pop{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }
.contact-label{ font-size:var(--t-xs); color:var(--fg-3) }
.contact-mail{ display:block; margin-top:var(--s-1); font-size:var(--t-md); font-weight:700; color:var(--accent); word-break:break-all }
@media (hover:hover) and (pointer:fine){ .contact-mail:hover{ text-decoration:underline } }

/* ============================================================
   히어로 정렬 — 좌측 정렬인데 화면 중앙에 떠 있어 어중간했다.
   가로는 완전 중앙 정렬, 세로는 광학적 중심(살짝 위)으로.
   ============================================================ */
.hero{ text-align:center }
.hero-inner{ margin-inline:auto; display:flex; flex-direction:column; align-items:center }
.hero-lead{ margin-inline:auto }
.hero-actions{ justify-content:center }

/* 세로: 정중앙보다 살짝 위가 안정적으로 보인다(광학적 중심).
   아래쪽 스크롤 힌트 공간도 확보된다. */
.hero{ justify-content:center; padding-bottom:var(--s-10) }
@media (min-height:700px){
  .hero-inner{ margin-bottom:var(--s-8) }   /* 위로 끌어올림 */
}

/* ============================================================
   커리큘럼 · 강점 섹션 확대
   섹션이 100svh 를 차지하는데 내용은 본문 14px·제목 28px 라
   화면 대비 작아 공허했다. 타이포 6단계 안에서 한 칸씩 올린다
   (새 크기를 만들지 않아 규칙을 유지).
   ============================================================ */
@media (min-width:768px){
  .sec-title{ font-size:var(--t-2xl); line-height:1.2 }
  .sec-sub{ font-size:var(--t-lg) }
  .sec-sub-block{ margin-top:var(--s-3); max-width:52ch }

  /* 커리큘럼 카드 */
  .show-body{ padding:var(--s-3) }
  .show-body h3{ font-size:var(--t-lg) }
  .show-body p{ font-size:var(--t-md); margin-top:var(--s-2); max-width:40ch }
  .show-idx{ font-size:var(--t-xl) }
  .showcase{ gap:var(--s-3); margin-top:var(--s-6) }

  /* 강점 목록 — 행이 커진 만큼 여백도 키운다 */
  .step{ gap:var(--s-4); padding-block:var(--s-4) }
  .step-num{ font-size:var(--t-xl) }
  .step h3{ font-size:var(--t-lg) }
  .step p{ font-size:var(--t-md); margin-top:var(--s-2); max-width:64ch }
  .steps{ margin-top:var(--s-6) }
}

/* ============================================================
   LMS 섹션 확대 — 커리큘럼·강점만 키우고 여기를 빠뜨려 혼자 작았다.
   같은 기준(타이포 한 칸 위)으로 맞춘다.
   ============================================================ */
@media (min-width:768px){
  .lms-list li{ padding-block:var(--s-4) }
  .lms-list h3{ font-size:var(--t-lg) }
  .lms-list p{ font-size:var(--t-md); margin-top:var(--s-2); max-width:44ch }
  .lms-list{ margin-top:var(--s-6); column-gap:var(--s-8) }
  .lms-go{ margin-top:var(--s-6) }
}

/* ============================================================
   문의 토글 · 버튼 톤 — 실제 사이트 관행에 맞춤
   헤더에 채워진 액센트 버튼을 두면 부트스트랩/템플릿 기본값처럼
   보인다. 실무에서는 채운 버튼을 "전환 목표 1개"에만 쓰고(여기선
   히어로의 LMS 시작하기), 헤더는 조용한 텍스트 링크로 둔다.
   토글도 마찬가지 — 라벨 + 회전하는 셰브런이 관행이고,
   패널은 설명 문구 없이 값(메일 주소)만 보여 준다.
   ============================================================ */
.contact-trigger{
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:0 4px;
  background:none; border:0; cursor:pointer;
  font-size:var(--t-sm); font-weight:500; color:var(--fg-2);
  transition:color .18s var(--e);
}
.contact-trigger .chev{ width:14px; height:14px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .24s var(--e-out) }
.contact-trigger[aria-expanded="true"]{ color:var(--fg) }
.contact-trigger[aria-expanded="true"] .chev{ transform:rotate(180deg) }
@media (hover:hover) and (pointer:fine){ .contact-trigger:hover{ color:var(--fg) } }

/* 패널: 라벨 없이 주소만. 밑줄은 hover 에서만 */
.contact-pop{ min-width:0; padding:var(--s-2) }
.contact-mail{ margin-top:0; font-size:var(--t-sm); font-weight:500; color:var(--fg);
  text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px;
  transition:border-color .18s var(--e), color .18s var(--e) }
@media (hover:hover) and (pointer:fine){
  .contact-mail:hover{ color:var(--accent); border-bottom-color:var(--accent); text-decoration:none }
}

/* 버튼 라벨 굵기 700 은 무거워 유치해 보인다 — 실무 관행은 500~600 */
.btn{ font-weight:600; letter-spacing:-.005em }

/* ---------- 푸터 정리 ---------- */
/* "창의적 여정을 응원합니다" 같은 빈 슬로건을 저작권 줄에 두면
   광고 문구처럼 읽힌다. 삭제하고 연락처를 그대로 노출한다. */
.footer-inner{ align-items:flex-start }
.footer-desc{ margin-top:4px; font-size:var(--t-sm); color:var(--fg-3) }
.footer-nav{ align-items:center; gap:var(--s-3) }
.footer-nav a{ text-decoration:none; transition:color .18s var(--e) }
.footer-legal{ justify-content:flex-start }

/* 팝오버 폭 수정 — min-width 를 지우면서 패널이 쪼그라들었고,
   앞선 규칙의 word-break:break-all 이 남아 메일 주소가 글자 단위로
   끊겼다. 내용 폭에 맞추고 한 줄로 고정한다. */
.contact-pop{ width:max-content; max-width:calc(100vw - var(--s-4)) }
.contact-mail{ display:inline-block; word-break:normal; overflow-wrap:normal; white-space:nowrap }

/* 푸터 최종 — 로고·소개 문구·링크 줄을 걷어내고 저작권 한 줄만 남긴다.
   윗 섹션과 구분선 하나로만 나뉘고, 스크롤 끝에서 조용히 닫히게. */
.site-footer{ padding-top:0 }
.footer-legal{ justify-content:center; border-top:0; padding-block:var(--s-3);
  font-size:var(--t-xs); color:var(--fg-3) }

/* 문의 패널에 담당자 — 명함 순서(소속 → 이름·직함 → 연락처)로 쌓는다.
   앞서 지운 "이메일로 문의해 주세요"와 달리 이건 실제 정보라 남긴다. */
.contact-pop{ padding:var(--s-2) }
.contact-org{ font-size:var(--t-xs); color:var(--fg-3); letter-spacing:.02em; white-space:nowrap }
.contact-who{ margin-top:2px; font-size:var(--t-md); font-weight:600; color:var(--fg); white-space:nowrap }
.contact-who span{ margin-inline-start:6px; font-size:var(--t-xs); font-weight:500; color:var(--fg-2) }
.contact-mail{ margin-top:var(--s-2) }

/* ============================================================
   CTA 재설계 — 히어로 버튼이 AI 랜딩 기본형이었다.
   ① 파스텔 하늘색 채움 = "다크테마 + 연한 액센트" 생성형 조합.
      실무는 흰색(고대비) 또는 진한 브랜드색을 쓴다. 연한 파스텔은
      약해 보인다. → 거의 흰색으로 채워 대비를 세운다.
   ② 채운 박스 + 테두리 박스 두 개 나란히 = 가장 흔한 템플릿 배치.
      Apple·Linear·Stripe 모두 "채운 버튼 1개 + 텍스트 링크 1개".
      → 보조 CTA 의 박스를 없앤다.
   ③ 라운드 6px = 부트스트랩 기본 구간. 엔터프라이즈는 2px 안팎의
      각진 형태나 완전한 알약형으로 간다. → 2px.
   ④ 채운 버튼 안의 화살표 아이콘은 생성형 랜딩의 전형이라 뺀다.
      화살표는 텍스트 링크 쪽에서만 의미를 갖는다.
   ============================================================ */
:root{ --radius:2px }

.btn-solid{ background:var(--fg); color:var(--bg); border-color:var(--fg) }
@media (hover:hover) and (pointer:fine){
  .btn-solid:hover{ background:#FFF; border-color:#FFF }
}
.btn-lg{ padding:0 var(--s-3) }

/* 보조 CTA — 박스 없이 텍스트 링크. 화살표는 hover 에서만 움직인다 */
.textlink{
  display:inline-flex; align-items:center; gap:6px; min-height:48px;
  font-size:var(--t-md); font-weight:500; color:var(--fg-2);
  transition:color .18s var(--e);
}
.textlink .ico{ width:16px; height:16px; transition:transform .32s var(--e-out) }
@media (hover:hover) and (pointer:fine){
  .textlink:hover{ color:var(--fg) }
  .textlink:hover .ico{ transform:translateX(4px) }
}
.hero-actions{ align-items:center; gap:var(--s-3) }

/* ============================================================
   히어로 격자 재작업 — "너무 정직하다"의 원인 2가지
   ① 간격·굵기·밝기가 전부 균일 = 모눈종이. 실제 3D 뷰포트 격자는
      가는 선(minor) 위에 5칸마다 굵은 선(major)이 얹히는 이중
      구조다. 그 위계가 없어서 기계적으로 보였다.
   ② 마스크가 중앙 기준 방사형이라 위아래가 대칭 = 평평하다.
      위로 갈수록 사라지고 아래로 갈수록 짙어지면 공간에 바닥이
      생기고 깊이가 읽힌다.
   ============================================================ */
.hero-fx::before{
  background-image:
    /* major — 5칸(200px)마다, 더 밝게 */
    linear-gradient(rgba(214,224,240,.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,224,240,.085) 1px, transparent 1px),
    /* minor — 40px, 아주 흐리게 */
    linear-gradient(rgba(214,224,240,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,224,240,.028) 1px, transparent 1px);
  background-size:200px 200px, 200px 200px, 40px 40px, 40px 40px;

  /* 위 → 아래로 짙어진다. 가장자리는 따로 둥글게 깎는다 */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.10) 26%, rgba(0,0,0,.45) 58%, rgba(0,0,0,.85) 82%, #000 100%),
    radial-gradient(150% 120% at 50% 92%, #000 45%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.10) 26%, rgba(0,0,0,.45) 58%, rgba(0,0,0,.85) 82%, #000 100%),
    radial-gradient(150% 120% at 50% 92%, #000 45%, transparent 100%);
  mask-composite:intersect;
}

/* 원근 바닥면도 같은 위계로. 아래쪽에서 가장 또렷하게 남는다 */
.hero-fx::after{
  background-image:
    linear-gradient(rgba(214,224,240,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,224,240,.13) 1px, transparent 1px),
    linear-gradient(rgba(214,224,240,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,224,240,.05) 1px, transparent 1px);
  background-size:320px 320px, 320px 320px, 64px 64px, 64px 64px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 38%, #000 72%, #000 100%);
          mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 38%, #000 72%, #000 100%);
  opacity:1;
}

/* 히어로 CTA 가 하나만 남았다 — 회색(fg-2)이면 큰 제목 아래에서
   묻혀 버려서, 단독 동작인 만큼 본문 색으로 세운다. */
.hero-actions .textlink{ color:var(--fg) }
@media (hover:hover) and (pointer:fine){ .hero-actions .textlink:hover{ color:var(--accent) } }

/* ============================================================
   문의 패널을 명함으로 — 실제 명함 비율(90×50mm ≒ 1.8:1)과
   정보 순서(브랜드 → 이름·직함 → 소속 → 연락처)를 그대로 따른다.
   그림자는 규칙상 금지라 테두리와 배경 차이로만 층을 만든다.
   ============================================================ */
.contact-pop{
  width:320px; max-width:calc(100vw - var(--s-4));
  padding:var(--s-3);
  background:var(--surface); border:1px solid var(--line);
}
/* 명함 윗변에 얇은 액센트 — 인쇄물의 박 두른 느낌 */
.contact-pop::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, var(--accent), transparent 70%);
}
.card-head{ display:flex; align-items:center; gap:6px }
.card-head .mark{ width:18px; height:18px }
.card-brand{ font-size:var(--t-sm); font-weight:700; letter-spacing:.1em; color:var(--fg-2) }

.card-name{ margin-top:var(--s-3); font-size:var(--t-lg); font-weight:600; color:var(--fg); letter-spacing:-.01em }
.card-name span{ margin-inline-start:8px; font-size:var(--t-xs); font-weight:500; color:var(--fg-3); letter-spacing:0 }
.card-org{ margin-top:2px; font-size:var(--t-sm); color:var(--fg-2) }

.contact-mail{
  display:block; margin-top:var(--s-3); padding-top:var(--s-2);
  border-top:1px solid var(--line); border-bottom:0;
  font-size:var(--t-sm); font-weight:500; color:var(--fg-2);
}
@media (hover:hover) and (pointer:fine){
  .contact-mail:hover{ color:var(--accent); border-bottom:0 }
}

/* 비율 보정 — 1.45:1 은 명함보다 정사각에 가깝다.
   실제 명함(90×50mm)은 1.8:1. 폭을 넓히고 세로 간격을 줄인다. */
.contact-pop{ width:360px }
.card-name{ margin-top:var(--s-2) }
.contact-mail{ margin-top:var(--s-2); padding-top:12px }

/* ============================================================
   기기별 반응형 보정 — iPhone·iPad 실측에서 나온 것만 고친다.
   (가로 스크롤·요소 넘침·작은 글씨는 전 기기 0건이었다)
   ============================================================ */

/* ① 터치 타깃 44px — 브랜드 링크 33px, 건너뛰기 링크 39px 였다 */
.brand{ min-height:44px }
.skip-link{ display:inline-flex; align-items:center; min-height:44px }

/* ② 가로 모드 아이폰(844×390): 히어로 내용이 490px 라 화면(390)을
   넘어 잘렸다. 세로가 짧으면 제목·여백을 줄이고 높이 강제를 푼다. */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto; padding-block:var(--s-4) }
  .hero-title{ font-size:var(--t-xl); line-height:1.15 }
  .hero-lead{ font-size:var(--t-sm); margin-top:var(--s-1) }
  .hero-actions{ margin-top:var(--s-2) }
  .hero .kicker{ margin-bottom:4px }
  .hero-inner{ margin-bottom:0 }
  main > .section{ min-height:auto; padding-block:var(--s-6) }
}

/* ③ iPad mini 세로(744px)가 768 문턱에 걸려 1열·작은 타이포로 떨어졌다.
   태블릿 취급 문턱을 720px 로 낮춘다. */
@media (min-width:720px){
  .showcase{ grid-template-columns:repeat(2,1fr) }
  .step{ grid-template-columns:64px 1fr }
  .sec-title{ font-size:var(--t-2xl); line-height:1.2 }
  .sec-sub{ font-size:var(--t-lg) }
  .show-body h3, .step h3, .lms-list h3{ font-size:var(--t-lg) }
  .show-body p, .step p, .lms-list p{ font-size:var(--t-md) }
  .step-num, .show-idx{ font-size:var(--t-xl) }
}

/* ④ LMS 목록이 1024px 부터 2열이라 iPad Air·Pro 세로(820~834)가
   1열로 남아 한쪽이 비었다. 태블릿부터 2열로 올린다. */
@media (min-width:720px){
  .lms-list{ grid-template-columns:repeat(2,1fr); column-gap:var(--s-6) }
  .lms-list li{ border-top:1px solid var(--line) }
  .lms-list li:nth-last-child(-n+2){ border-bottom:1px solid var(--line) }
}

/* 720px 규칙이 뒤에 와서 데스크톱 4열까지 2열로 덮었다. 원래대로 복구 */
@media (min-width:1024px){ .showcase{ grid-template-columns:repeat(4,1fr) } }

/* ============================================================
   Gemini 비평 반영 (코드로 실재 확인한 3건만)
   ============================================================ */

/* ① .metal 의 8초 무한 반짝임 제거.
   "반사되는 느낌"은 그라디언트 자체가 만든다. 헤드라인이 계속
   반짝이는 건 저가 템플릿의 대표적 신호라 정지 상태로 둔다. */
.metal{ animation:none; background-size:100% auto; background-position:0 50% }

/* ② 카드 hover 의 translateY(-4px) 제거.
   요소가 둥실 떠오르는 건 2018년 부트스트랩 랜딩의 관용구다.
   프리미엄 쪽은 위치를 안 옮기고 테두리 밝기와 내부 요소로 반응한다. */
@media (hover:hover) and (pointer:fine){
  .show-card:hover{ transform:none; border-color:rgba(245,247,250,.28) }
  .show-card:hover .show-idx{ color:var(--fg-2); transform:none }
  .show-card:hover .show-body h3{ color:var(--fg) }
}
.show-card{ transition:border-color .4s var(--e) }

/* ③ 영문 요소에만 디스플레이 폰트.
   Pretendard 하나로 전부 돌리면 UI 앱 같은 밋밋함이 남는다.
   한글에는 적용하지 않는다 — 폴백되며 얻는 게 없고 혼용 위험만 는다. */
.brand-word, .kicker, .show-idx, .step-num{
  font-family:'Space Grotesk', 'Pretendard Variable', Pretendard, sans-serif;
  font-feature-settings:'tnum' 1;
}
.brand-word{ letter-spacing:.06em }
.kicker{ letter-spacing:.2em }
.show-idx, .step-num{ letter-spacing:.02em }

/* ============================================================
   커리큘럼 카드 이미지
   숫자(01~04)가 이미지 위에 얹히므로 좌하단을 어둡게 눌러
   밝은 렌더 위에서도 읽히게 한다.
   ============================================================ */
.show-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transition:transform .6s cubic-bezier(.16,1,.3,1), opacity .4s var(--e);
  opacity:.92;
}
/* 좌하단 그라디언트 — 숫자 가독성 확보 */
.show-media::before{
  content:""; position:absolute; inset:auto 0 0 0; height:56%; z-index:1;
  background:linear-gradient(to top, rgba(7,8,11,.85), transparent);
  pointer-events:none;
}
.show-idx{ position:relative; z-index:2 }
@media (hover:hover) and (pointer:fine){
  .show-card:hover .show-media img{ transform:scale(1.04); opacity:1 }
}

/* ============================================================
   LMS 시작하기 — 채운 흰 블록이 페이지에서 유일한 "면"이라 겉돌았다.
   주변 목록이 전부 1px 선으로 만들어져 있으므로 같은 언어로 맞춘다.
   전체 폭 한 줄 = 목록의 마지막 행처럼 읽히고, 폭이 넓어 무게도 선다.
   ============================================================ */
.lms-go{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-2);
  width:100%; margin-top:var(--s-6);
  padding:var(--s-3) 0;
  background:none; border:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  border-radius:0; min-height:auto;
  font-size:var(--t-lg); font-weight:600; letter-spacing:-.01em;
  color:var(--fg);
  transition:border-color .32s var(--e), color .18s var(--e);
}
.lms-go .ico{ width:20px; height:20px; transition:transform .32s var(--e-out) }
@media (hover:hover) and (pointer:fine){
  .lms-go:hover{ color:var(--accent); border-color:var(--accent) }
  .lms-go:hover .ico{ transform:translateX(6px) }
}
@media (max-width:767px){
  .lms-go{ margin-top:var(--s-4); font-size:var(--t-md); padding:var(--s-2) 0 }
}

/* ============================================================
   LMS 시작하기 — 전체 폭 라인은 목록의 한 행처럼 읽혀서
   클릭 가능한 티가 사라졌다. 경계를 되살리되 채우지는 않는다.
   테두리 버튼: 버튼으로 읽히면서, 선 기반 페이지 언어와도 맞는다.
   ============================================================ */
.lms-go{
  display:inline-flex; width:auto; justify-content:center;
  gap:var(--s-2); margin-top:var(--s-6);
  padding:0 var(--s-4); min-height:56px;
  border:1px solid var(--accent); border-radius:var(--radius);
  background:none; color:var(--accent);
  font-size:var(--t-md); font-weight:600;
  transition:background-color .24s var(--e), color .24s var(--e), border-color .24s var(--e);
}
.lms-go .ico{ width:18px; height:18px }
@media (hover:hover) and (pointer:fine){
  .lms-go:hover{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent) }
  .lms-go:hover .ico{ transform:translateX(4px) }
}
@media (max-width:767px){
  .lms-go{ display:flex; width:100%; margin-top:var(--s-4); min-height:52px; font-size:var(--t-md); padding:0 var(--s-3) }
}

/* 푸터 — 저작권과 호스팅 표기를 양 끝으로. 둘 다 법적·관례적 고지라
   본문보다 조용하게 두되, 호스팅 링크만 hover 에서 반응한다. */
.footer-legal{ display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:var(--s-1) var(--s-3) }
.footer-host a{ color:var(--fg-2); text-decoration:none;
  border-bottom:1px solid transparent; transition:color .18s var(--e), border-color .18s var(--e) }
@media (hover:hover) and (pointer:fine){
  .footer-host a:hover{ color:var(--accent); border-bottom-color:var(--accent) }
}
@media (max-width:640px){
  .footer-legal{ justify-content:center; text-align:center; flex-direction:column }
}

/* 호스팅 링크 터치 타깃 — 15px 이라 44px 최소치에 못 미쳤다.
   푸터 줄 높이를 키우지 않으면서 히트 영역만 넓힌다. */
.footer-host a{ display:inline-flex; align-items:center; min-height:44px; padding-inline:2px }
.footer-legal{ padding-block:var(--s-1) }

/* ============================================================
   스크롤 광원
   · .metal 은 배경 그라디언트를 넓혀 두고 위치만 옮긴다 —
     새 그라디언트를 만들지 않아 "그라디언트 2개" 규칙을 지킨다.
   · 히어로 광원은 --beam(0~1) 을 받아 위로 흐르며 옅어진다.
     transform/opacity 만 움직여 매 프레임 재계산을 피한다.
   ============================================================ */
.metal{
  background-size:220% auto;
  transition:background-position .12s linear;
}

.hero-fx{ --beam:0 }
.hero-fx span:first-child{
  background:radial-gradient(ellipse at center, rgba(78,168,255,.16), transparent 66%);
  filter:blur(48px);
  opacity:calc(1 - var(--beam) * .75);
  transform:translate(-50%,-50%) translate3d(0, calc(var(--beam) * -22vh), 0);
  will-change:transform, opacity;
}
/* 두 번째 광원 — 아래에서 위로 올라오며 바닥면을 밝힌다 */
.hero-fx span:last-child{
  display:block; position:absolute; left:50%; bottom:-14%;
  width:min(120vw,1400px); aspect-ratio:3/1;
  background:radial-gradient(ellipse at center, rgba(78,168,255,.10), transparent 70%);
  filter:blur(60px);
  transform:translateX(-50%) translate3d(0, calc(var(--beam) * -10vh), 0);
  opacity:calc(.35 + var(--beam) * .5);
  will-change:transform, opacity;
}

@media (prefers-reduced-motion:reduce){
  .metal{ background-position:50% 50% !important; transition:none }
  .hero-fx span{ transform:translate(-50%,-50%) !important; opacity:.5 !important }
  .hero-fx span:last-child{ transform:translateX(-50%) !important }
}

/* 아래쪽 광원이 120vw 라 좌우로 삐져나왔다. .hero 의 overflow:hidden 이
   잘라주긴 하지만 요소 자체를 뷰포트 안에 두는 편이 안전하다
   (일부 브라우저에서 overflow 계산 전에 스크롤이 잡히는 경우가 있다). */
.hero-fx span:last-child{ width:min(100%,1400px) }

/* ============================================================
   광원 강도 보정 — 실측으로 잡았다.
   기존값(알파 .16 + blur 48px)은 배경 대비 밝기 차가 최대 18/255,
   평균 1.85 라 사실상 보이지 않았다. 알파를 올리고 blur 를 줄여
   에너지가 퍼지지 않게 한다.
     알파 .16 → 최대차 18   안 보임
     알파 .30 → 최대차 35   은은함
     알파 .45 → 최대차 54   은은함, 채택
     알파 .60 → 최대차 73   뚜렷함(과함)
   ============================================================ */
.hero-fx span:first-child{
  background:radial-gradient(ellipse at center, rgba(78,168,255,.45), transparent 66%);
  filter:blur(36px);
}
.hero-fx span:last-child{
  background:radial-gradient(ellipse at center, rgba(78,168,255,.30), transparent 70%);
  filter:blur(48px);
}

/* 광원 강도 재조정 — .45 는 셌다. 측정 단계에서 한 칸 아래(.30)로 내린다.
   .30 → 배경 대비 최대차 35/255 (측정값). blur 를 다시 키워 가장자리를 부드럽게. */
.hero-fx span:first-child{
  background:radial-gradient(ellipse at center, rgba(78,168,255,.30), transparent 66%);
  filter:blur(44px);
}
.hero-fx span:last-child{
  background:radial-gradient(ellipse at center, rgba(78,168,255,.18), transparent 72%);
  filter:blur(56px);
}

/* ============================================================
   커리큘럼 6장 — 실제 제작 파이프라인 순서
   (스컬프팅 → 텍스처링 → 리깅·애니 → FX → 렌더링 → 컴포지팅)
   4열 1줄이던 것을 3열 2줄로 바꾼다. 6장은 4열에서 2장이 다음 줄에
   남아 배치가 깨진다. 3열이면 카드 폭도 248→336px 로 넓어져
   이미지가 제대로 보인다.
   ============================================================ */
@media (min-width:1024px){
  .showcase{ grid-template-columns:repeat(3,1fr) }
}
.tone-5 .show-media, .tone-6 .show-media{ background:var(--bg-alt) }

/* 도구명 태그 — 새 컴포넌트를 만들지 않는다.
   테두리 1px·라운드 2px 로 기존 규칙 안에서 처리하고,
   영문이라 랜딩의 디스플레이 서체(Space Grotesk)를 쓴다. */
.tools{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--s-1) }
.tools span{
  font-family:'Space Grotesk','Pretendard Variable',Pretendard,sans-serif;
  font-size:var(--t-xs); font-weight:500; letter-spacing:.02em;
  color:var(--accent);
  border:1px solid rgba(78,168,255,.32); border-radius:var(--radius);
  padding:2px 7px; line-height:1.5;
}
.show-body p:not(.tools){ margin-top:var(--s-2) }

/* 도구 태그를 제목 우측 끝으로.
   제목 아래에 두면 본문까지 세 덩이가 세로로 쌓여 카드가 길어졌다.
   같은 줄 양 끝으로 보내면 시선이 "무엇을 / 무엇으로" 로 한 번에 읽힌다.
   카드가 좁아지면 자연스럽게 아래로 떨어지게 wrap 을 열어 둔다. */
.show-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-1) var(--s-2); flex-wrap:wrap;
}
.show-head h3{ flex:0 1 auto }
.show-head .tools{ margin-top:0; flex:0 0 auto }

/* 1024px 3열에서 카드 폭이 가장 좁아진다(가용 259px).
   가장 긴 조합(스컬프팅·모델링 + ZBrush + Maya)이 259px 로 딱 맞아
   반올림 한 픽셀에 줄바꿈됐다. 간격과 태그 여백을 조금 줄여 여유를 만든다. */
@media (min-width:1024px) and (max-width:1199px){
  .show-head{ gap:var(--s-1) 10px }
  .tools span{ padding:2px 6px; letter-spacing:0 }
  .tools{ gap:4px }
}

/* ============================================================
   커리큘럼 가로 이동
   6장을 3열 2줄로 두니 섹션이 1.17화면(모바일 2.38화면)이 되어
   이 섹션만 유독 길었다. 한 줄로 눕히고, 세로 스크롤 진행률을
   카드의 가로 이동으로 옮긴다.
   자동 회전이 아니라 사용자 동작에 묶여 있어 읽는 속도를 뺏지 않는다.
   ============================================================ */
@media (min-width:1024px){
  .work-track{ height:300vh }
  #work{
    position:sticky; top:0; height:100vh; min-height:100vh;
    display:flex; align-items:center; overflow:hidden;
  }
  .showcase{
    display:flex; grid-template-columns:none;
    gap:var(--s-3); width:max-content; will-change:transform;
  }
  .show-card{ width:min(31vw,420px); flex:0 0 auto }
}

/* 태블릿·모바일: 네이티브 가로 스와이프 */
@media (max-width:1023px){
  .showcase{
    display:flex; grid-template-columns:none; gap:var(--s-2);
    overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(var(--s-2)*-1); padding-inline:var(--s-2);
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .showcase::-webkit-scrollbar{ display:none }
  .show-card{ width:78vw; max-width:420px; flex:0 0 auto; scroll-snap-align:center }
}

/* 모션을 줄이라고 한 사용자에겐 원래의 격자 배치로 돌려준다 */
@media (prefers-reduced-motion:reduce){
  .work-track{ height:auto }
  #work{ position:static; height:auto; min-height:100svh; overflow:visible }
  .showcase{ transform:none!important }
}

/* 카드 이미지 비율을 원본과 맞춘다.
   16/7 은 카드가 세로 1열로 쌓이던 시절 세로 길이를 줄이려고 넣은 값이다.
   가로 스와이프로 바뀌면서 그 이유가 사라졌는데 값만 남아,
   3:2 이미지가 모바일에서 세로 34% 잘려 나갔다. 전 구간 3:2 로 통일한다. */
.show-media{ aspect-ratio:3/2 }