@charset "UTF-8";

/* ============================================================
   LEGENDINO — 레전다이노 게임 소개 페이지 전용 스타일
   공통 style.css 와 충돌하지 않도록 모든 클래스에 ld- 접두사를 붙인다.
   헤더·푸터는 사이트 공통(.site-header/.site-footer)을 그대로 쓴다.

   조형 언어 — 렌타히어로 Z(잉크·하프톤 코믹)와 일부러 다르게 잡았다.
   레전다이노는 "스핀메달을 스캔하는 근미래 공룡 배틀"이라
   각진 클리핑 + 육각 그리드 + 홀로그램 스윕으로 간다.
   ============================================================ */

.ld-page{
  /* --- color --- */
  --ld-navy:      #070C22;
  --ld-navy-2:    #0E1738;
  --ld-navy-3:    #172247;
  --ld-cyan:      #2FD8FF;
  --ld-blue:      #3563FF;
  --ld-violet:    #7A3DFF;
  --ld-gold:      #FFC53D;
  --ld-magenta:   #FF3D77;
  --ld-lime:      #86E83C;
  --ld-paper:     #F3F6FC;
  --ld-paper-2:   #E4EAF6;
  --ld-steel:     #97A6C4;
  --ld-white:     #FFFFFF;

  /* --- typography --- */
  --ld-font-data: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ld-fs-hero:   clamp(2rem,5.4vw,4.4rem);
  --ld-fs-sect:   clamp(1.55rem,3.2vw,2.7rem);
  --ld-fs-lead:   clamp(1.05rem,1.55vw,1.35rem);
  --ld-fs-body:   clamp(.95rem,1.1vw,1.0625rem);
  --ld-fs-cap:    .8125rem;
  --ld-fs-micro:  .6875rem;

  /* --- structure --- */
  --ld-cut:  14px;                 /* 모서리 잘라내는 길이 */
  --ld-cut-s: 8px;
  --ld-edge: 2px;                  /* 발광 테두리 두께 */
  --ld-wrap: 1280px;

  --ld-sp-1:.625rem;  --ld-sp-2:1.25rem;  --ld-sp-3:2rem;
  --ld-sp-4:2.75rem;  --ld-sp-5:4.25rem;  --ld-sp-6:7rem;
  --ld-sp-7:10rem;

  font-size:var(--ld-fs-body);
  line-height:1.7;
  color:var(--ld-navy);
  background:var(--ld-paper);
  overflow-x:hidden;
}

/* 목업의 요소 셀렉터 우선순위를 유지하려고 :where() 로 감싼다 */
:where(.ld-page) img{max-width:100%;display:block}
:where(.ld-page) a{color:inherit}
:where(.ld-page) :focus-visible{outline:3px solid var(--ld-cyan);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .ld-page *{transition:none!important;animation:none!important}
}

.ld-wrap{width:min(100% - 2.5rem,var(--ld-wrap));margin-inline:auto}


/* ============================================================
   공통 조형
   ============================================================ */

/* 각진 모서리 — clip-path 는 border 를 지우므로,
   바깥 프레임(그라디언트) + 안쪽 면(단색)의 2겹으로 테두리를 만든다 */
.ld-u-clip{
  clip-path:polygon(
    0 var(--ld-cut), var(--ld-cut) 0,
    100% 0, 100% calc(100% - var(--ld-cut)),
    calc(100% - var(--ld-cut)) 100%, 0 100%);
}
.ld-frame{
  padding:var(--ld-edge);
  background:linear-gradient(135deg,var(--ld-cyan),var(--ld-blue) 55%,var(--ld-violet));
  clip-path:polygon(
    0 var(--ld-cut), var(--ld-cut) 0,
    100% 0, 100% calc(100% - var(--ld-cut)),
    calc(100% - var(--ld-cut)) 100%, 0 100%);
}
.ld-frame > *{
  clip-path:polygon(
    0 calc(var(--ld-cut) - var(--ld-edge)), calc(var(--ld-cut) - var(--ld-edge)) 0,
    100% 0, 100% calc(100% - var(--ld-cut) + var(--ld-edge)),
    calc(100% - var(--ld-cut) + var(--ld-edge)) 100%, 0 100%);
}
.ld-frame--gold{background:linear-gradient(135deg,var(--ld-gold),#FF8A3D)}

/* 육각 그리드 — 어두운 구간 바닥 무늬 */
.ld-u-hex{
  background-image:
    linear-gradient(30deg,rgba(47,216,255,.055) 12%,transparent 12.5%,transparent 87%,rgba(47,216,255,.055) 87.5%),
    linear-gradient(150deg,rgba(47,216,255,.055) 12%,transparent 12.5%,transparent 87%,rgba(47,216,255,.055) 87.5%),
    linear-gradient(30deg,rgba(47,216,255,.055) 12%,transparent 12.5%,transparent 87%,rgba(47,216,255,.055) 87.5%),
    linear-gradient(150deg,rgba(47,216,255,.055) 12%,transparent 12.5%,transparent 87%,rgba(47,216,255,.055) 87.5%);
  background-size:56px 98px;
  background-position:0 0,0 0,28px 49px,28px 49px;
}
/* 스캔 라인 — 메달을 읽는 인터페이스 느낌 */
.ld-u-scan{
  background-image:repeating-linear-gradient(
    0deg,rgba(47,216,255,.07) 0 1px,transparent 1px 4px);
}

/* 라벨 칩 — 각지고 데이터 폰트 */
.ld-chip{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.42em 1.1em .46em;
  font-family:var(--ld-font-data);
  font-size:var(--ld-fs-cap);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ld-navy);
  background:linear-gradient(100deg,var(--ld-cyan),#8BE7FF);
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.ld-chip--onDark{color:var(--ld-navy);box-shadow:0 0 22px rgba(47,216,255,.45)}
.ld-chip--gold{background:linear-gradient(100deg,var(--ld-gold),#FFE08A)}
.ld-chip--magenta{background:linear-gradient(100deg,var(--ld-magenta),#FF89AE);color:var(--ld-white)}

/* 섹션 머리 */
.ld-head{margin-bottom:var(--ld-sp-4)}
.ld-head__title{
  margin-top:.55em;
  font-size:var(--ld-fs-sect);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.02em;
}
.ld-head__lead{
  margin-top:.9em;
  max-width:46em;
  font-size:var(--ld-fs-lead);
  color:#465274;
}
.ld-head--onDark .ld-head__title{color:var(--ld-white)}
.ld-head--onDark .ld-head__lead{color:#A9B8DA}
/* 칩이 둘 이상 서는 머리 — inline-flex 칩끼리는 사이가 붙으므로 묶어서 띄운다. */
.ld-head__chips{display:flex;flex-wrap:wrap;gap:.5rem}
/* 항목 이름. 바로 아래 제목보다 작고 흐리게 두어야 제목의 윗줄로 읽힌다.
   같은 크기로 세우면 제목이 둘인 것처럼 보여 원래 문제로 되돌아간다. */
.ld-head__over{
  margin-top:.9em;
  font-family:var(--ld-font-data);
  font-size:var(--ld-fs-cap);
  font-weight:700;
  letter-spacing:.16em;
  color:var(--ld-gold);
}
/* 이름 줄이 붙은 머리에서는 제목이 이름에 바짝 붙어야 한 덩어리로 읽힌다. */
.ld-head__over + .ld-head__title{margin-top:.24em}

/* 이미지 프레임 */
.ld-media{display:block;overflow:hidden;background:var(--ld-navy-3)}
.ld-media img{width:100%;height:100%;object-fit:cover;display:block}
.ld-media--fit{background:transparent}
.ld-media--fit img{object-fit:contain}
/* 영상도 같은 칸을 쓴다. 위 img 규칙에 video 는 걸리지 않으므로 따로 적는다.
   cover 가 아니라 contain 인 이유는 컨트롤 바 때문이다 — 칸을 넘겨 잘라내면
   재생 막대가 프레임 밖으로 밀려난다. 칸(16/9)과 영상(1280x720)이 같은 비율이라
   contain 이어도 남는 자리는 생기지 않고, 검은 바닥은 보험으로만 깔아 둔다. */
.ld-media video{width:100%;height:100%;display:block;object-fit:contain;background:#000}

/* 미확정 정보 표시 — 확인되면 이 마크만 지우면 된다 */
.ld-tbd{
  font-family:var(--ld-font-data);
  font-size:.85em;
  padding:.1em .5em;
  color:#7A4B00;
  background:rgba(255,197,61,.35);
  border-bottom:2px solid var(--ld-gold);
}
/* 어두운 구간에서는 갈색 글자가 묻히므로 밝게 뒤집는다 */
.ld-collect .ld-tbd,
.ld-medal .ld-tbd{color:#FFE2A0;background:rgba(255,197,61,.14)}

/* 등장 애니메이션 (공통 .reveal 과 별개로 이 페이지 안에서만) */
.ld-page .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.ld-page .reveal.is-in{opacity:1;transform:none}


/* ============================================================
   HERO
   ============================================================ */
/* 키 비주얼을 걷어내고 타이틀 로고가 첫 화면의 주인공이라,
   헤더 아래로 숨 쉴 여백을 다시 준다. */
.ld-hero{
  position:relative;
  isolation:isolate;
  padding:clamp(56px,7vw,110px) 0 clamp(72px,9vw,130px);
  background:var(--ld-navy);
  overflow:hidden;
}
.ld-hero__bg{
  position:absolute;inset:0;z-index:-3;
  background:url("../images/legendino/trio.jpg") center/cover no-repeat;
  filter:saturate(1.15) blur(2px);
  transform:scale(1.08);
  opacity:.55;
}
.ld-hero__veil{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 90% at 50% 8%,rgba(7,12,34,.15),rgba(7,12,34,.86) 62%,var(--ld-navy) 100%),
    linear-gradient(180deg,rgba(7,12,34,.7),rgba(7,12,34,.35) 35%,var(--ld-navy) 96%);
}
.ld-hero__grid{position:absolute;inset:0;z-index:-1;opacity:.9}

.ld-hero__inner{position:relative;text-align:center;display:grid;justify-items:center;gap:var(--ld-sp-3)}

/* 제목은 글자가 아니라 타이틀 로고다.
   키 비주얼을 걷어내고 이 로고가 첫 화면의 주인공이 됐다.
   애니메이션은 세 겹으로 나눠 서로 밟지 않게 한다.
     1) 등장(scale)  → h1 이 맡는다
     2) 부유(translateY)+발광(filter) → img 가 맡는다
     3) 광택 쓸기    → ::after 가 맡는다
   등장과 부유가 둘 다 transform 이라 같은 요소에 얹으면 뒤엣것이 앞엣것을
   지운다. 그래서 층을 갈랐다. */
.ld-hero__title{
  position:relative;              /* 광택 쓸기(::after)의 기준칸 */
  font-size:0;                    /* 로고 이미지 아래 여백이 생기지 않게 */
  line-height:0;
  margin-bottom:-1rem;            /* 아래 카피와의 간격을 좁힌다 */
  animation:ld-logo-in 1.05s cubic-bezier(.16,.84,.32,1.06) both;
}
.ld-hero__logo{
  width:clamp(190px,26vw,400px);
  height:auto;
  filter:
    drop-shadow(0 12px 28px rgba(0,0,0,.6))
    drop-shadow(0 0 34px rgba(47,216,255,.38));
  /* 등장이 끝나는 지점(1.05s)부터 이어받는다 */
  animation:
    ld-logo-float 5.5s ease-in-out 1.05s infinite,
    ld-logo-glow  3.6s ease-in-out 1.05s infinite;
}
/* 광택은 로고 모양대로만 흘러야 한다. 그냥 덮으면 투명한 배경 위로
   네모난 빛 띠가 지나가 버리므로, 로고 이미지 자체를 마스크로 쓴다.
   ::after 칸(inset:0)은 h1 이 로고 크기로 줄어든 덕에 이미지와 정확히 겹친다. */
.ld-hero__title::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(
    105deg,
    transparent 42%,
    rgba(255,255,255,.75) 50%,
    rgba(190,244,255,.35) 56%,
    transparent 64%);
  background-size:260% 100%;
  background-repeat:no-repeat;
  -webkit-mask:url("../images/legendino/logo-title.png") center/contain no-repeat;
          mask:url("../images/legendino/logo-title.png") center/contain no-repeat;
  animation:ld-logo-shine 6.5s ease-in-out 1.5s infinite;
}
/* EN 에서는 로고 그림이 영문판으로 바뀐다(game-legendino.html 의 data-src-en).
   마스크는 CSS 에 박혀 있어 같이 바뀌지 않으므로 여기서 짝을 맞춘다 — 안 맞추면
   영문 로고 위로 한글 로고 모양의 빛 띠가 지나간다. 언어 표시는 js/i18n.js 가
   <html lang> 에 남긴다. mask-image 만 갈아 끼우고 center/contain no-repeat 는
   위 규칙 것을 그대로 쓴다. */
html[lang="en"] .ld-hero__title::after{
  -webkit-mask-image:url("../images/legendino/logo-title-en.png");
          mask-image:url("../images/legendino/logo-title-en.png");
}

@keyframes ld-logo-in{
  0%  {opacity:0;transform:scale(1.22) translateY(-14px);filter:blur(6px)}
  60% {opacity:1;filter:blur(0)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes ld-logo-float{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-9px)}
}
@keyframes ld-logo-glow{
  0%,100%{filter:drop-shadow(0 12px 28px rgba(0,0,0,.6)) drop-shadow(0 0 34px rgba(47,216,255,.38))}
  50%    {filter:drop-shadow(0 12px 28px rgba(0,0,0,.6)) drop-shadow(0 0 52px rgba(47,216,255,.72))}
}
/* 대부분의 시간은 화면 밖에 세워 두고, 한 주기에 한 번만 훑고 지나간다 */
@keyframes ld-logo-shine{
  0%      {background-position:150% 0}
  22%,100%{background-position:-60% 0}
}
.ld-hero__tag{
  font-size:clamp(1.15rem,2.4vw,1.9rem);
  font-weight:800;
  line-height:1.4;
  letter-spacing:-.01em;
  color:var(--ld-white);
  text-shadow:0 0 26px rgba(47,216,255,.6),0 4px 18px rgba(0,0,0,.75);
}
.ld-hero__tag em{
  font-style:normal;
  background:linear-gradient(100deg,var(--ld-cyan),var(--ld-gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ld-hero__sub{
  max-width:36em;
  color:#B7C6E6;
  font-size:var(--ld-fs-lead);
}
.ld-hero__cuts{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;
  margin-top:.4rem;
}

/* 히어로 하단 공룡 실루엣 줄 — 수집 게임이라는 걸 첫 화면에서 보여준다 */
.ld-hero__dinos{
  display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(.4rem,2.2vw,2.2rem);
  margin-top:var(--ld-sp-2);
  width:100%;
}
.ld-hero__dinos img{
  width:clamp(64px,11vw,148px);
  height:auto;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.55));
  animation:ld-bob 4.5s ease-in-out infinite;
}
.ld-hero__dinos img:nth-child(2){animation-delay:-1.1s}
.ld-hero__dinos img:nth-child(3){animation-delay:-2.2s}
.ld-hero__dinos img:nth-child(4){animation-delay:-3.3s}
@keyframes ld-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}


/* ============================================================
   STATS — 성과 스트립
   ============================================================ */
.ld-stats{
  position:relative;
  background:var(--ld-navy-2);
  border-block:1px solid rgba(47,216,255,.22);
  padding:clamp(34px,4vw,56px) 0;
}
.ld-stats__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:rgba(47,216,255,.18);
}
.ld-stat{
  background:var(--ld-navy-2);
  padding:var(--ld-sp-2) var(--ld-sp-1);
  text-align:center;
}
.ld-stat__num{
  display:block;
  font-family:var(--ld-font-data);
  font-size:clamp(1.7rem,3.6vw,3rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
  background:linear-gradient(120deg,var(--ld-cyan),var(--ld-white) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ld-stat__num small{font-size:.5em;font-weight:700;letter-spacing:0}
.ld-stat__label{
  display:block;margin-top:.5em;
  font-size:var(--ld-fs-cap);
  letter-spacing:.06em;
  color:#93A6CC;
}
@media (max-width:760px){
  .ld-stats__grid{grid-template-columns:repeat(2,1fr)}
}


/* ============================================================
   SPEC — 게임 제원
   ============================================================ */
.ld-spec{padding:var(--ld-sp-6) 0;background:var(--ld-paper)}
.ld-spec__card{
  display:grid;
  grid-template-columns:minmax(160px,240px) 1fr;
  gap:clamp(1.6rem,3.4vw,3.4rem);
  align-items:start;
  padding:clamp(1.6rem,3vw,2.6rem);
  background:var(--ld-white);
  box-shadow:0 24px 60px rgba(14,23,56,.13);
}
.ld-spec__icon{
  border-radius:26%;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(14,23,56,.28);
}
.ld-spec__title{
  margin-top:.5em;
  font-size:clamp(1.5rem,2.6vw,2.3rem);
  font-weight:800;
  letter-spacing:-.02em;
}
.ld-spec__title span{
  display:block;
  margin-top:.15em;
  font-family:var(--ld-font-data);
  font-size:.44em;
  font-weight:600;
  letter-spacing:.24em;
  color:var(--ld-steel);
}
.ld-spec__rows{
  margin-top:var(--ld-sp-3);
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0 clamp(1rem,3vw,3rem);
}
.ld-spec__row{
  display:flex;align-items:baseline;gap:1rem;
  padding:.85em 0;
  border-bottom:1px solid var(--ld-paper-2);
}
.ld-spec__key{
  flex:0 0 6.5em;
  font-family:var(--ld-font-data);
  font-size:var(--ld-fs-cap);
  font-weight:700;
  letter-spacing:.12em;
  color:var(--ld-blue);
}
.ld-spec__val{font-weight:600}
@media (max-width:820px){
  .ld-spec__card{grid-template-columns:1fr}
  .ld-spec__icon{width:min(180px,42vw)}
  .ld-spec__rows{grid-template-columns:1fr}
}


/* ============================================================
   COLLECTION — 150종 수집
   ============================================================ */
.ld-collect{
  position:relative;
  padding:var(--ld-sp-6) 0;
  background:var(--ld-navy);
  color:var(--ld-white);
  overflow:hidden;
}
.ld-collect__grid-bg{position:absolute;inset:0;opacity:.85;pointer-events:none}
.ld-collect__glow{
  position:absolute;left:50%;top:-18%;translate:-50% 0;
  width:min(1100px,120vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(53,99,255,.42),transparent 62%);
  pointer-events:none;
}
.ld-collect > .ld-wrap{position:relative}

/* 선택된 다이노 상세 */
.ld-dex{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.4rem,3.6vw,3.6rem);
  align-items:center;
  padding:clamp(1.4rem,3vw,2.8rem);
  background:
    radial-gradient(90% 120% at 12% 0%,rgba(53,99,255,.32),transparent 60%),
    var(--ld-navy-2);
}
/* JS 가 붙기 전에는 전부 세로로 나열되어 정보는 다 읽힌다 */
.ld-dex__list.is-tabbed .ld-dex{margin:0}
.ld-dex__list:not(.is-tabbed) .ld-dex + .ld-dex{margin-top:var(--ld-sp-2)}
/* display:grid 가 UA 의 [hidden]{display:none} 을 눌러버려서 명시적으로 되돌린다 */
.ld-dex[hidden]{display:none}

.ld-dex__art{
  position:relative;
  display:grid;place-items:center;
  aspect-ratio:1;
  background:
    radial-gradient(circle at 50% 55%,rgba(47,216,255,.3),transparent 62%);
}
.ld-dex__art::before{
  content:"";position:absolute;inset:8%;
  border:1px dashed rgba(47,216,255,.4);
  border-radius:50%;
  animation:ld-spin 24s linear infinite;
}
.ld-dex__art::after{
  content:"";position:absolute;inset:20%;
  border:1px solid rgba(47,216,255,.25);
  border-radius:50%;
}
.ld-dex__art img{
  position:relative;
  width:78%;height:auto;
  object-fit:contain;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.55));
}
@keyframes ld-spin{to{transform:rotate(360deg)}}

.ld-dex__name{
  font-size:clamp(1.4rem,2.6vw,2.1rem);
  font-weight:800;
  letter-spacing:-.02em;
  margin-top:.6em;
}
.ld-dex__name small{
  display:block;
  font-family:var(--ld-font-data);
  font-size:.42em;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--ld-cyan);
  margin-top:.4em;
}
.ld-dex__desc{margin-top:1em;color:#B9C7E6}
.ld-dex__stats{
  margin-top:var(--ld-sp-2);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:.6rem;
}
.ld-dex__stat{
  padding:.7em .8em;
  background:rgba(255,255,255,.05);
  border-left:2px solid var(--ld-cyan);
}
.ld-dex__stat b{
  display:block;
  font-family:var(--ld-font-data);
  font-size:var(--ld-fs-micro);
  font-weight:700;
  letter-spacing:.14em;
  color:#8FA3CC;
}
.ld-dex__stat span{
  display:block;
  font-family:var(--ld-font-data);
  font-size:1.15rem;
  font-weight:700;
  color:var(--ld-white);
}
@media (max-width:860px){
  .ld-dex{grid-template-columns:1fr}
}

/* 다이노 선택 카드 */
.ld-dexgrid{
  margin-top:var(--ld-sp-3);
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:.85rem;
}
.ld-dexcard{
  display:grid;
  gap:.5rem;
  padding:.8rem .6rem 1rem;
  text-align:center;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(47,216,255,.16);
  transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
  cursor:pointer;
}
.ld-dexcard:hover{transform:translateY(-5px);background:rgba(47,216,255,.12);border-color:rgba(47,216,255,.5)}
.ld-dexcard[aria-selected="true"]{
  background:linear-gradient(180deg,rgba(47,216,255,.22),rgba(53,99,255,.16));
  border-color:var(--ld-cyan);
  box-shadow:0 0 0 1px var(--ld-cyan),0 14px 30px rgba(47,216,255,.22);
}
.ld-dexcard__art{
  display:grid;place-items:center;
  aspect-ratio:1;
}
.ld-dexcard__art img{width:82%;height:auto;object-fit:contain}
.ld-dexcard__name{
  font-size:var(--ld-fs-cap);
  font-weight:700;
  color:var(--ld-white);
}
.ld-dexcard__no{
  font-family:var(--ld-font-data);
  font-size:var(--ld-fs-micro);
  letter-spacing:.14em;
  color:var(--ld-cyan);
}

.ld-collect__note{
  margin-top:var(--ld-sp-3);
  padding:1.1em 1.4em;
  font-size:var(--ld-fs-cap);
  color:#9FB2D8;
  background:rgba(255,255,255,.04);
  border-left:3px solid var(--ld-gold);
}


/* ============================================================
   BATTLE — 실시간 PVP · 스킬 조합
   ============================================================ */
.ld-battle{padding:var(--ld-sp-6) 0;background:var(--ld-paper)}
.ld-battle__cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.6rem,3.6vw,3.6rem);
  align-items:center;
}
.ld-battle__shot{aspect-ratio:16/10}
.ld-combo{display:grid;gap:.8rem}
.ld-combo__row{
  display:grid;
  grid-template-columns:auto auto auto auto 1fr;
  align-items:center;
  gap:.55rem;
  padding:.95em 1.1em;
  background:var(--ld-white);
  box-shadow:0 10px 26px rgba(14,23,56,.09);
}
.ld-combo__op{
  font-family:var(--ld-font-data);
  font-weight:700;
  color:var(--ld-steel);
}
.ld-combo__tk{
  display:inline-flex;align-items:center;
  padding:.34em .8em;
  font-size:var(--ld-fs-cap);
  font-weight:800;
  color:var(--ld-white);
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.ld-combo__tk--atk{background:linear-gradient(100deg,#FF4D4D,#FF8A3D)}
.ld-combo__tk--def{background:linear-gradient(100deg,#2E7BFF,#2FD8FF)}
.ld-combo__out{
  justify-self:start;
  margin-left:.3rem;
  font-weight:800;
  color:var(--ld-navy);
}
.ld-combo__out span{
  font-family:var(--ld-font-data);
  font-size:var(--ld-fs-micro);
  letter-spacing:.14em;
  color:var(--ld-blue);
  display:block;
}
@media (max-width:860px){
  .ld-battle__cols{grid-template-columns:1fr}
}

/* 배틀 특징 3분할 */
.ld-feats{
  margin-top:var(--ld-sp-5);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
.ld-feat{
  padding:clamp(1.2rem,2.2vw,1.9rem);
  background:var(--ld-white);
  box-shadow:0 14px 34px rgba(14,23,56,.09);
}
.ld-feat__no{
  font-family:var(--ld-font-data);
  font-size:var(--ld-fs-cap);
  font-weight:700;
  letter-spacing:.18em;
  color:var(--ld-blue);
}
.ld-feat__title{margin-top:.5em;font-size:1.15rem;font-weight:800}
.ld-feat__desc{margin-top:.6em;color:#4E5B7C;font-size:var(--ld-fs-cap);line-height:1.75}
@media (max-width:820px){
  .ld-feats{grid-template-columns:1fr}
}


/* ============================================================
   MEDAL — 스핀메달 스캔
   ============================================================ */
/* "게임과 완구" 는 따로 선 구간이 아니라 이 구간 머리 안의 한 줄(.ld-head__over)이다.
   같은 남색 판 위에 머리를 둘 세우면 제목이 연달아 나와 서로 힘을 깎았다. */

.ld-medal{
  position:relative;
  padding:var(--ld-sp-6) 0;
  background:var(--ld-navy-2);
  color:var(--ld-white);
  overflow:hidden;
}
.ld-medal__scan{position:absolute;inset:0;opacity:.7;pointer-events:none}
.ld-medal > .ld-wrap{position:relative}

.ld-medal__cols{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(1.6rem,4vw,4rem);
  align-items:center;
}
.ld-medal__discs{
  position:relative;
  display:flex;justify-content:center;align-items:center;
  gap:clamp(.6rem,2vw,1.8rem);
}
.ld-medal__discs img{
  width:min(34%,210px);
  height:auto;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.6));
}
.ld-medal__discs img:first-child{animation:ld-tilt 7s ease-in-out infinite}
.ld-medal__discs img:last-child{animation:ld-tilt 7s ease-in-out -3.5s infinite}
@keyframes ld-tilt{
  0%,100%{transform:rotate(-3deg) translateY(0)}
  50%{transform:rotate(3deg) translateY(-12px)}
}
.ld-medal__steps{
  margin-top:var(--ld-sp-3);
  display:grid;gap:.9rem;
}
.ld-medal__step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1rem;
  align-items:baseline;
  padding-bottom:.9rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.ld-medal__step b{
  font-family:var(--ld-font-data);
  font-size:1.1rem;
  color:var(--ld-cyan);
}
.ld-medal__step p{color:#B9C7E6;font-size:var(--ld-fs-cap)}
.ld-medal__step strong{color:var(--ld-white)}

/* 영상 프레임.
   위 단계 목록과의 간격은 프레임 바깥이 가진다. 한때 이 여백이 프레임 안쪽
   .ld-medal__shot 에 걸려 있었는데, 그러면 여백이 테두리 그라디언트 위에 생긴다 —
   위쪽 띠만 두꺼워지고 영상이 칸 안에서 아래로 밀려, 테두리와 영상이 어긋나 보였다.
   .ld-frame 은 padding 으로 테두리를 만드는 구조라 안쪽 자식에게 margin 을 주면
   무조건 이렇게 된다. 프레임 안 자식에는 margin 을 두지 않는다.

   폭은 본문 폭(1280)을 다 쓰지 않고 880 으로 줄여 가운데 세운다. 30초짜리
   프로모션 한 편이 구간 전체를 덮으면 위 01~04 단계가 곁다리로 밀린다. */
.ld-medal__video{
  margin:var(--ld-sp-4) auto 0;
  max-width:880px;
}
.ld-medal__shot{aspect-ratio:16/9}
@media (max-width:900px){
  .ld-medal__cols{grid-template-columns:1fr}
}


/* ============================================================
   GOODS — 완구 패키지
   ============================================================ */
.ld-goods{padding:var(--ld-sp-6) 0;background:var(--ld-paper)}
.ld-goods__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(.9rem,2vw,1.6rem);
}
.ld-good{
  display:grid;
  grid-template-rows:auto 1fr;
  background:var(--ld-white);
  box-shadow:0 16px 40px rgba(14,23,56,.1);
  overflow:hidden;
}
/* 패키지 사진은 세로·가로 비율이 제각각이라, 칸에 맞춰 늘리지 않고
   max-width/max-height 로 담기만 한다. width:100%+height:100% 를 쓰면
   가운데 정렬(place-items:center) 때문에 칸 높이가 미확정이 되어
   원본 크기로 삐져나온다. */
.ld-good__art{
  aspect-ratio:4/5;
  min-height:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(170deg,var(--ld-paper-2),var(--ld-white));
  padding:1.2rem;
  overflow:hidden;
}
.ld-good__art img{max-width:100%;max-height:100%;width:auto;height:auto}
.ld-good__body{padding:1.2rem 1.4rem 1.6rem}
.ld-good__name{font-size:1.1rem;font-weight:800}
.ld-good__desc{margin-top:.5em;font-size:var(--ld-fs-cap);color:#4E5B7C}
@media (max-width:820px){
  .ld-goods__grid{grid-template-columns:1fr}
  .ld-good__art{aspect-ratio:1}
}


/* ============================================================
   ART — 키 비주얼 갤러리
   ============================================================ */
/* CAST 섹션을 걷어내면서 GOODS(paper) 와 맞붙게 되어, 배경을 흰색으로 바꿔
   paper → white → navy 로 이어지는 밝기 리듬을 유지한다. */
.ld-art{padding:var(--ld-sp-6) 0 var(--ld-sp-5);background:var(--ld-white)}
.ld-art__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(.9rem,2vw,1.4rem);
}
.ld-art__item--wide{grid-column:1 / -1}
.ld-art__shot{aspect-ratio:16/9}
.ld-art__item--wide .ld-art__shot{aspect-ratio:2.8}
.ld-art__cap{
  margin-top:.7em;
  font-family:var(--ld-font-data);
  font-size:var(--ld-fs-micro);
  letter-spacing:.18em;
  color:var(--ld-steel);
}
@media (max-width:760px){
  .ld-art__grid{grid-template-columns:1fr}
  .ld-art__item--wide .ld-art__shot{aspect-ratio:16/9}
}


/* ============================================================
   CTA
   ============================================================ */
.ld-cta{
  position:relative;
  padding:clamp(64px,7vw,110px) 0;
  background:var(--ld-navy);
  color:var(--ld-white);
  text-align:center;
  overflow:hidden;
}
.ld-cta__grid{position:absolute;inset:0;opacity:.8;pointer-events:none}
.ld-cta > .ld-wrap{position:relative}
.ld-cta__title{
  font-size:clamp(1.5rem,3vw,2.4rem);
  font-weight:800;
  letter-spacing:-.02em;
}
.ld-cta__desc{margin-top:.9em;color:#A9B8DA}
.ld-cta__btns{
  margin-top:var(--ld-sp-3);
  display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;
}
.ld-btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.95em 2.1em;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ld-navy);
  background:linear-gradient(100deg,var(--ld-cyan),#8BE7FF);
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  transition:transform .2s var(--ease),filter .2s var(--ease);
}
.ld-btn:hover{transform:translateY(-3px);filter:brightness(1.08)}
/* clip-path 가 테두리를 잘라내므로, 고스트 버튼은 선 대신 면으로 만든다 */
.ld-btn--ghost{
  color:var(--ld-cyan);
  background:rgba(47,216,255,.14);
}
.ld-btn--ghost:hover{background:rgba(47,216,255,.24)}


/* ============================================================
   BOARD — 보드게임 (GOODS 하위 블록)
   ============================================================ */
.ld-board{
  margin-top:clamp(.9rem,2vw,1.6rem);
  display:grid;
  grid-template-columns:1.6fr .9fr;
  gap:clamp(1.2rem,3vw,2.6rem);
  align-items:center;
  padding:clamp(1.4rem,3vw,2.4rem);
  background:var(--ld-white);
  box-shadow:0 16px 40px rgba(14,23,56,.1);
  clip-path:polygon(
    var(--ld-cut) 0,100% 0,100% calc(100% - var(--ld-cut)),
    calc(100% - var(--ld-cut)) 100%,0 100%,0 var(--ld-cut));
}
.ld-board__title{margin-top:.5em;font-size:clamp(1.15rem,2vw,1.6rem);font-weight:800;letter-spacing:-.02em}
.ld-board__desc{margin-top:.7em;color:#4E5B7C;font-size:var(--ld-fs-cap);line-height:1.8}
.ld-board__note{
  margin-top:1em;
  display:inline-block;
  padding:.45em 1em;
  font-family:var(--ld-font-data);
  font-size:var(--ld-fs-micro);
  letter-spacing:.06em;
  color:var(--ld-magenta);
  background:rgba(255,61,119,.1);
}
.ld-board__nums{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.ld-board__num{
  padding:1.1rem 1rem;
  text-align:center;
  background:linear-gradient(170deg,var(--ld-paper-2),var(--ld-paper));
}
.ld-board__num b{
  display:block;
  font-family:var(--ld-font-data);
  font-size:clamp(1.6rem,3.4vw,2.4rem);
  font-weight:700;
  line-height:1.1;
  color:var(--ld-blue);
}
.ld-board__num span{
  display:block;margin-top:.4em;
  font-size:var(--ld-fs-micro);
  letter-spacing:.1em;
  color:#4E5B7C;
}
@media (max-width:820px){
  .ld-board{grid-template-columns:1fr}
}


/* ============================================================
   LINKS — 공식 채널 (CTA 하위 블록)
   ============================================================ */
.ld-links{
  margin-top:var(--ld-sp-3);
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.6rem 1.6rem;
  list-style:none;
}
.ld-links a{
  font-size:var(--ld-fs-cap);
  color:#A9B8DA;
  border-bottom:1px solid rgba(169,184,218,.35);
  padding-bottom:.15em;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.ld-links a:hover{color:var(--ld-cyan);border-color:var(--ld-cyan)}