/* =============================================================
   I-AHN CREATIVE — style.css
   구성: 1)폰트규칙  2)디자인 토큰(색·크기)  3)공통  4)유틸
        5)네비  6)히어로/슬라이드  7)섹션공통  8)핵심지표
        9)서비스  10)발매작  11)CTA/푸터  12)반응형  13)모션최소화

   ※ 폰트 규칙
     - 한글/본문 : Pretendard
     - 영문 큰 제목 : Anton
     - 영문 라벨·카탈로그번호 : 'Space Mono' (한글에는 절대 쓰지 않음)
   ============================================================= */


/* ============ 2) 디자인 토큰 : 색과 크기를 여기서 한 번에 관리 ============ */
:root{
  --ink:#0d0d10;                     /* 배경(가장 어두운) */
  --ink-2:#131318;                   /* 카드 배경 */
  --line:rgba(237,234,227,.12);      /* 경계선 */
  --paper:#edeae3;                   /* 기본 글자색(밝은) */
  --muted:#8f8f99;                   /* 보조 글자색(회색) */
  --gold:#e8b84b;                    /* 포인트 색 — 바꾸려면 여기만 수정 */
  --gold-soft:rgba(232,184,75,.4);

  --font-kr:'Pretendard',system-ui,sans-serif;   /* 한글·본문 */
  --font-display:'Anton',sans-serif;             /* 영문 큰 제목 */
  --font-mono:'Space Mono',monospace;            /* 영문 라벨 전용 */

  --maxw:1180px;
}


/* ============ 3) 공통(리셋) ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-kr);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}


/* ============ 4) 유틸리티 ============ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.gold{color:var(--gold)}

/* 영문 소제목 라벨 (예: "Revenue Share") — 영문 전용이라 mono 사용 */
.eyebrow{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);
}
.eyebrow.center{text-align:center}

/* 작은 각주 (한글 포함) — Pretendard 유지 */
.fine{font-size:12px;color:var(--muted)}

/* 공통 버튼 */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--gold);color:var(--ink);font-weight:700;
  padding:15px 30px;border-radius:100px;font-size:15px;
  transition:transform .2s,box-shadow .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(232,184,75,.28)}
.btn span{transition:transform .2s}
.btn:hover span{transform:translateX(4px)}


/* ============ 5) 네비게이션 ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  backdrop-filter:blur(10px);
  background:linear-gradient(to bottom,rgba(13,13,16,.85),rgba(13,13,16,.35));
  border-bottom:1px solid transparent;transition:border-color .3s;
}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}

.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.01em}
.brand.small{font-size:14px}

/* 로고 옆 이퀄라이저(파형) — 막대 4개를 높이만 애니메이션 */
.eq{display:flex;align-items:flex-end;gap:2px;height:16px}
.eq span{width:3px;background:var(--gold);animation:eq 1s ease-in-out infinite}
.eq span:nth-child(1){height:40%;animation-delay:0s}
.eq span:nth-child(2){height:100%;animation-delay:.2s}
.eq span:nth-child(3){height:60%;animation-delay:.4s}
.eq span:nth-child(4){height:85%;animation-delay:.1s}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

.nav-links{display:flex;gap:32px;align-items:center;font-size:14px}
.nav-links a{color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--paper)}
.nav-cta{
  border:1px solid var(--gold);color:var(--gold);padding:9px 18px;border-radius:100px;
  font-size:13px;font-weight:600;transition:all .2s;
}
.nav-cta:hover{background:var(--gold);color:var(--ink)}

.burger{display:none;background:none;border:0;color:var(--paper);font-size:24px;cursor:pointer}


/* ============ 6) 히어로 / 슬라이드 ============ */
.hero{position:relative;height:100svh;min-height:640px}

/* 뒤에서 퍼지는 동심원 */
.rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:1;overflow:hidden}
.rings i{
  position:absolute;border:1px solid var(--gold);border-radius:50%;opacity:0;
  width:340px;height:340px;animation:ring 6s linear infinite;
}
.rings i:nth-child(2){animation-delay:1.5s}
.rings i:nth-child(3){animation-delay:3s}
.rings i:nth-child(4){animation-delay:4.5s}
@keyframes ring{0%{transform:scale(.2);opacity:.55}100%{transform:scale(3.4);opacity:0}}

.hero-swiper{height:100%}
.slide{height:100%;display:flex;align-items:center;position:relative;z-index:2}
.slide-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%}

/* 슬라이드 큰 영문 제목 */
.slide h1{
  font-family:var(--font-display);font-weight:400;line-height:.92;letter-spacing:-.01em;
  font-size:clamp(46px,9vw,132px);text-transform:uppercase;margin-top:20px;
}

/* 슬라이드 한글 설명 (기준 폰트) */
.slide .kr{
  margin-top:26px;font-size:clamp(16px,2.2vw,22px);color:var(--paper);
  max-width:560px;font-weight:500;
}
.slide .kr b{color:var(--gold);font-weight:700}

/* "100%" 큰 숫자 */
.slide .num{
  font-family:var(--font-display);font-size:clamp(60px,13vw,180px);line-height:.85;
  color:var(--gold);letter-spacing:-.02em;margin-top:10px;
}
/* 숫자 아래 한글 캡션 — Pretendard로 통일(예전엔 mono여서 어색했음) */
.slide .num small{
  display:block;font-family:var(--font-kr);font-size:15px;font-weight:500;
  letter-spacing:0;color:var(--paper);text-transform:none;margin-top:14px;
}
.slide .kr{margin-top:28px}

/* 페이지네이션(하단 인디케이터) */
.swiper-pagination{
  text-align:left!important;bottom:42px!important;
  padding-left:max(24px,calc((100vw - var(--maxw))/2 + 24px))!important;
}
.swiper-pagination-bullet{background:var(--paper);opacity:.35;width:26px;height:3px;border-radius:0;transition:opacity .3s}
.swiper-pagination-bullet-active{background:var(--gold);opacity:1}

/* 스크롤 안내 */
.scrollcue{
  position:absolute;bottom:38px;right:max(24px,calc((100vw - var(--maxw))/2 + 24px));
  z-index:5;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
  color:var(--muted);text-transform:uppercase;display:flex;align-items:center;gap:8px;
}
.scrollcue .bar{width:1px;height:36px;background:linear-gradient(var(--gold),transparent);animation:drop 2s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.3;transform:translateY(-4px)}50%{opacity:1;transform:translateY(4px)}}


/* ============ 7) 섹션 공통 ============ */
section{padding:110px 0;position:relative}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:56px}
.sec-head h2{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(30px,5vw,58px);line-height:.95;letter-spacing:-.01em;
}
.sec-head p{color:var(--muted);max-width:380px;font-size:15px}


/* ============ 8) 핵심 지표 스트립 ============ */
.thesis{padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.thesis-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.thesis .cell{padding:48px 32px;border-right:1px solid var(--line)}
.thesis .cell:last-child{border-right:0}
.thesis .big{font-family:var(--font-display);font-size:clamp(40px,6vw,72px);color:var(--gold);line-height:1}
.thesis .lbl{margin-top:12px;color:var(--muted);font-size:14px}


/* ============ 9) 서비스 카드 ============ */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{
  background:var(--ink-2);border:1px solid var(--line);border-radius:18px;padding:40px;
  position:relative;transition:border-color .3s,transform .3s;overflow:hidden;
}
.card:hover{border-color:var(--gold-soft);transform:translateY(-4px)}
.card .idx{font-family:var(--font-mono);font-size:13px;color:var(--gold);letter-spacing:.2em}
.card h3{font-size:26px;font-weight:800;margin:18px 0 6px;letter-spacing:-.01em}
.card .en{font-family:var(--font-mono);font-size:12px;color:var(--muted);letter-spacing:.15em;text-transform:uppercase}
.card p{color:var(--muted);margin:20px 0 28px;font-size:15px}

.price-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-top:1px solid var(--line);font-size:15px}
/* 가격/값 — 한글 포함이라 Pretendard 유지(굵고 골드색) */
.price-row .p{color:var(--gold);font-weight:700}
.note{margin-top:20px;font-size:12.5px;color:var(--muted)}


/* ============ 10) 발매작(옆으로 흐르는 목록) ============ */
.releases{padding-top:40px}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rel-track{display:flex;gap:20px;width:max-content;animation:marq 40s linear infinite}
.marquee:hover .rel-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

.rel{width:240px;flex:0 0 auto}
.rel .cover{
  aspect-ratio:1;border-radius:12px;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;padding:16px;border:1px solid var(--line);
}
/* 자켓 자리 색면 — 실제 이미지 <img>로 교체 시 이 배경은 무시됨 */
.rel:nth-child(3n+1) .cover{background:linear-gradient(135deg,#2a2140,#e8b84b22)}
.rel:nth-child(3n+2) .cover{background:linear-gradient(135deg,#402129,#e8b84b22)}
.rel:nth-child(3n)   .cover{background:linear-gradient(135deg,#1c2e33,#e8b84b22)}
.rel .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rel .cat{font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;color:var(--paper);opacity:.65;position:relative}
.rel .meta{margin-top:14px}
.rel .t{font-weight:700;font-size:16px}
.rel .a{color:var(--muted);font-size:13px}


/* ============ 10-b) 발매 플랫폼 (이름이 흐름, Releases 반대 방향) ============ */
.platforms{padding:66px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.plat-label{text-align:center;color:var(--muted);font-size:13px;margin-bottom:32px}
.logo-track{display:flex;gap:58px;width:max-content;align-items:center;animation:marq-rev 32s linear infinite}
.logos:hover .logo-track{animation-play-state:paused}
/* Releases는 왼쪽으로, 플랫폼은 오른쪽으로 흐르게 해서 변화를 줌 */
@keyframes marq-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.logo{
  font-size:24px;font-weight:700;color:var(--muted);white-space:nowrap;
  opacity:.7;letter-spacing:-.01em;transition:color .2s,opacity .2s;
}
.logo:hover{color:var(--paper);opacity:1}
/* 실제 로고 이미지를 넣을 때: 높이를 26px로 통일, 폭은 자동 */
.logo img{height:26px;width:auto;display:block;opacity:.75;transition:opacity .2s}
.logo:hover img{opacity:1}
/* 컬러 로고를 어두운 배경에 맞춰 흰색으로 바꾸고 싶으면 아래 주석을 해제:
.logo img{filter:brightness(0) invert(1);} */


/* ============ 9-b) 요금 플랜 ============ */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.plan{
  background:var(--ink-2);border:1px solid var(--line);border-radius:18px;padding:36px 32px;
  position:relative;transition:border-color .3s,transform .3s;
}
.plan:hover{border-color:var(--gold-soft);transform:translateY(-4px)}
.plan.featured{border-color:var(--gold)}
.plan-badge{
  position:absolute;top:-11px;left:32px;background:var(--gold);color:var(--ink);
  font-size:11px;font-weight:800;letter-spacing:.04em;padding:5px 12px;border-radius:100px;
}
.plan-name{font-family:var(--font-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.plan-track{color:var(--muted);font-size:14px;margin:14px 0 24px;min-height:42px}
.plan-price{font-family:var(--font-display);font-size:44px;color:var(--paper);line-height:1}
.plan-price small{display:block;font-family:var(--font-kr);font-size:13px;font-weight:500;color:var(--muted);margin-top:8px}
.note.center{text-align:center;margin-top:28px}
.pricing-cta{text-align:center;margin-top:40px}


/* ============ 9-c) 발매 절차 (실제 순서 3단계라 번호 사용) ============ */
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{border-top:1px solid var(--line);padding-top:28px}
.step-no{font-family:var(--font-mono);font-size:14px;color:var(--gold);letter-spacing:.1em}
.step h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:30px;margin:16px 0 4px;letter-spacing:-.01em}
.step-en{color:var(--muted);font-size:14px;margin-bottom:16px}
.step p{color:var(--muted);font-size:14.5px}


/* ============ 9-d) 발매 전 안내 (Notice & FAQ) 3블록 ============ */
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* 카드 전체가 클릭 링크 */
.guide-card{display:block;padding:28px 26px;position:relative}
.guide-card .idx{font-family:var(--font-mono);font-size:13px;color:var(--gold);letter-spacing:.2em}
.guide-card h3{font-size:20px;font-weight:800;margin:14px 0 0;letter-spacing:-.01em}
/* 우상단 화살표 */
.guide-card .arrow{position:absolute;top:26px;right:26px;color:var(--gold);font-size:18px;transition:transform .2s}
.guide-card:hover .arrow{transform:translate(3px,-3px)}
/* 요약 키워드 칩 */
.g-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.g-tags span{font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:5px 11px;transition:border-color .2s,color .2s}
.guide-card:hover .g-tags span{border-color:var(--gold-soft);color:var(--paper)}
/* 하단 안내 한 줄 */
.g-hint{margin-top:18px;font-size:12.5px;color:#6f6f77;font-family:var(--font-mono);letter-spacing:.03em}


/* ============ 11) CTA / 푸터 ============ */
.cta{text-align:center;border-top:1px solid var(--line)}
.cta h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(34px,7vw,86px);line-height:.95;margin-top:18px}
.cta p{color:var(--muted);margin:22px auto 40px;max-width:460px}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn.ghost{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.btn.ghost:hover{background:var(--gold);color:var(--ink);box-shadow:none}
.contact-info{
  margin-top:46px;display:flex;gap:36px;justify-content:center;flex-wrap:wrap;
  color:var(--muted);font-size:14px;
}
.contact-info .ci-label{color:var(--gold);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;margin-right:8px}

footer{border-top:1px solid var(--line);padding:44px 0;color:var(--muted);font-size:13px}
.foot-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.foot-inner a{color:var(--muted);transition:color .2s}
.foot-inner a:hover{color:var(--gold)}


/* ============ 12) 반응형 ============ */

/* 태블릿 이하 */
@media(max-width:900px){
  section{padding:84px 0}
  .sec-head{margin-bottom:40px}
}

/* 모바일 */
@media(max-width:820px){
  .nav-links{
    display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;
    gap:0;background:var(--ink-2);border-bottom:1px solid var(--line);padding:8px 0;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 24px;width:100%}
  .nav-cta{margin:8px 24px;text-align:center}
  .burger{display:block}

  .thesis-grid{grid-template-columns:1fr}
  .thesis .cell{border-right:0;border-bottom:1px solid var(--line);padding:32px 24px}
  .thesis .cell:last-child{border-bottom:0}

  .svc{grid-template-columns:1fr}
  .card{padding:32px 26px}
  .pricing-grid,.step-grid{grid-template-columns:1fr}
  .guide-grid{grid-template-columns:1fr}
  .contact-info{flex-direction:column;gap:14px;align-items:center}

  .slide h1{font-size:clamp(38px,11vw,64px)}
  .slide .num{font-size:19vw}
  .swiper-pagination{padding-left:24px!important;bottom:32px!important}
  .scrollcue{display:none}

  .foot-inner{flex-direction:column;text-align:center;align-items:flex-start}
}

/* 아주 작은 화면 */
@media(max-width:400px){
  .wrap{padding:0 18px}
  .rel{width:200px}
}


/* ============ 13) 모션 최소화 설정 존중 ============ */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important;transition:none!important}
  .marquee{mask-image:none}
  .rel-track,.logo-track{flex-wrap:wrap;width:auto;justify-content:center}
}