/* ─────────────────────────────────────────────
   브랜드 토큰 — 전부 로고 SVG에서 추출한 값
   ───────────────────────────────────────────── */
:root{
  --red:#E22D2D;
  --crimson:#DE003E;
  --amber:#FFB849;
  --ink:#191919;
  --white:#FFFFFF;

  --red-deep:#B81F1F;          /* 호버·눌림 */
  --tint:#FBF2EF;              /* 레드+앰버 5% 틴트 패널 */
  --line:#EADFDA;              /* 웜 헤어라인 */
  --line-2:#D9CCC6;
  --muted:#6F6663;             /* 보조 텍스트 (웜 그레이) */
  --muted-2:#A0948F;

  --kr:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --wide:'Archivo','Pretendard Variable',sans-serif;

  --pad:clamp(20px,5vw,88px);
  --max:1360px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--white);color:var(--ink);
  font-family:var(--kr);font-size:17px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;
}
a{color:inherit}
svg{display:block}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* 와이드 라틴 — 워드마크의 자폭을 잇는 역할 */
.wide{font-family:var(--wide);font-stretch:125%;font-weight:800;letter-spacing:-.005em}

h1,h2,h3{font-family:var(--kr);font-weight:700;letter-spacing:-.03em;line-height:1.16}
h1{font-size:clamp(40px,6.6vw,86px);font-weight:800;letter-spacing:-.035em;line-height:1.08}
h2{font-size:clamp(30px,4.2vw,56px)}
h3{font-size:clamp(19px,1.6vw,22px);letter-spacing:-.02em;line-height:1.3}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.band{padding-block:clamp(72px,9.5vw,140px)}
.band--tint{background:var(--tint)}
.band--red{background:var(--red);color:var(--white)}
.band--ink{background:var(--ink);color:var(--white)}

.lede{font-size:clamp(16.5px,1.35vw,19.5px);line-height:1.75;color:var(--muted);max-width:44ch}
.sec-head{
  display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:end;
  padding-bottom:26px;margin-bottom:clamp(36px,4.6vw,64px);border-bottom:1px solid var(--line);
}
.sec-head p{max-width:46ch;color:var(--muted);font-size:16px;line-height:1.7;justify-self:end}
.band--red .sec-head{border-bottom-color:rgba(255,255,255,.28)}
.band--red .sec-head p{color:var(--white)}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--kr);font-weight:600;font-size:15.5px;letter-spacing:-.01em;
  padding:15px 26px;border-radius:4px;text-decoration:none;
  background:var(--red);color:var(--white);border:1px solid var(--red);
  transition:background .15s,border-color .15s,color .15s;
}
.btn:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn--line{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--line:hover{background:var(--tint);border-color:var(--ink)}
.band--red .btn--line{color:var(--white);border-color:rgba(255,255,255,.5)}
.band--red .btn--line:hover{background:var(--white);color:var(--red);border-color:var(--white)}

/* ─────────────── 헤더 ─────────────── */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:40px;height:78px}
.logo{display:block;width:176px;height:auto}
.logo svg{width:100%;height:auto}
.nav{display:flex;gap:28px;margin-left:auto;font-size:15px;font-weight:500;letter-spacing:-.01em}
.nav a{text-decoration:none;color:var(--muted);padding:6px 0;border-bottom:2px solid transparent;transition:color .15s}
.nav a:hover{color:var(--ink);border-bottom-color:var(--red)}
.lang{display:flex;gap:2px;font-family:var(--wide);font-stretch:112%;font-weight:600;font-size:12px;letter-spacing:.04em}
.lang a{text-decoration:none;color:var(--muted-2);padding:6px 8px;border-radius:3px}
.lang a[aria-current]{color:var(--ink);background:var(--tint)}
.lang a:hover{color:var(--ink)}

/* ─────────────── 히어로 ─────────────── */
.hero{padding-block:clamp(56px,7vw,112px) clamp(56px,7vw,104px)}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,5vw,84px);align-items:center}
.hero h1 em{font-style:normal;color:var(--red)}
.hero .lede{margin-top:28px}
.hero-cta{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap}
.figure{width:100%}
.figure svg{width:100%;height:auto}
.legend{display:flex;gap:22px;margin-top:14px;font-size:13px;color:var(--muted);justify-content:flex-end}
.legend i{display:inline-block;width:18px;height:2px;vertical-align:middle;margin-right:7px;background:var(--red)}
.legend i.p{background:var(--line-2)}

/* 다이어그램 타이포 & 애니메이션 */
.d-lbl{font-family:var(--kr);font-size:12.5px;font-weight:500;fill:var(--ink);letter-spacing:-.01em}
.d-cur{font-family:var(--wide);font-stretch:118%;font-weight:600;font-size:10.5px;fill:var(--muted);letter-spacing:.08em}
.d-core{font-family:var(--wide);font-stretch:125%;font-weight:700;font-size:11px;fill:var(--white);letter-spacing:.14em}
.d-line{fill:none;stroke:var(--red);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s cubic-bezier(.55,.05,.25,1) forwards}
.d-line.p{stroke:var(--line-2);stroke-width:1.3;animation:none;stroke-dashoffset:0}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .d-line{animation:none;stroke-dashoffset:0}
  html{scroll-behavior:auto}
}

/* ─────────────── 지표 ─────────────── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:clamp(28px,3.2vw,44px) clamp(18px,2.4vw,36px);border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat-n{font-family:var(--wide);font-stretch:125%;font-weight:800;font-size:clamp(34px,4.6vw,62px);line-height:1;letter-spacing:-.02em;display:flex;align-items:baseline;gap:2px}
.stat-n small{font-size:.44em;font-weight:700;color:var(--red);letter-spacing:0}
.stat-l{margin-top:14px;font-size:15px;color:var(--muted)}
.cover{display:grid;grid-template-columns:auto 1fr;gap:12px 28px;margin-top:30px;font-size:14.5px;align-items:baseline}
.cover dt{color:var(--muted)}
.cover dd{font-family:var(--wide);font-stretch:118%;font-weight:600;font-size:13px;letter-spacing:.02em;display:flex;gap:6px;flex-wrap:wrap}
.cover dd span{padding:4px 9px;border:1px solid var(--line-2);border-radius:3px}

/* ─────────────── 역량 ─────────────── */
.caps{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(40px,5.5vw,88px)}
.cap{border-top:1px solid var(--line);padding:28px 0 32px;display:grid;grid-template-columns:22px 1fr;gap:0 16px}
.cap-hex{width:22px;height:24px;margin-top:3px}
.cap-hex svg{width:22px;height:24px}
.cap h3{font-family:var(--wide);font-stretch:125%;font-weight:800;font-size:15.5px;letter-spacing:0;line-height:1.3;color:var(--red)}
.cap-ko{margin-top:8px;font-size:clamp(18px,1.5vw,21px);font-weight:700;letter-spacing:-.025em;line-height:1.3}
.cap p{margin-top:10px;font-size:15.5px;line-height:1.7;color:var(--muted);max-width:44ch}

/* ─────────────── 제공 범위 ─────────────── */
.prov{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px)}
.prov h3{font-family:var(--wide);font-stretch:125%;font-weight:800;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.01em}
.prov p{margin-top:12px;font-size:16px;line-height:1.7;color:var(--muted);max-width:46ch}
.shot{margin-top:28px;background:var(--white);border:1px solid var(--line);border-radius:6px;aspect-ratio:16/10;padding:18px 20px;overflow:hidden;display:flex;flex-direction:column;gap:12px}
.shot-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--wide);font-stretch:118%;font-weight:600;font-size:11.5px;letter-spacing:.06em;color:var(--muted);padding-bottom:12px;border-bottom:1px solid var(--line)}
.shot-head b{color:var(--red);font-weight:700}
.bars{display:flex;flex-direction:column;gap:9px}
.bars i{display:block;height:9px;border-radius:2px;background:var(--line)}
.bars i.r{background:var(--red);opacity:.28}
.tbl{display:grid;grid-template-columns:1.6fr 1fr 1fr .8fr;gap:10px 14px;align-items:center;font-size:11px}
.tbl i{display:block;height:9px;border-radius:2px;background:var(--line)}
.tbl .h{font-family:var(--wide);font-stretch:118%;font-weight:600;font-size:10.5px;letter-spacing:.06em;color:var(--muted-2)}
.hx{width:12px;height:13px}
.shot-cap{margin-top:10px;font-size:12.5px;color:var(--muted-2)}

/* ─────────────── 핵심가치 (유일한 전면 레드) ─────────────── */
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.28)}
.val{background:var(--red);padding:clamp(28px,3vw,44px) clamp(18px,2vw,32px) clamp(30px,3vw,48px) 0}
.val:not(:first-child){padding-left:clamp(18px,2vw,32px)}
.val h3{font-family:var(--wide);font-stretch:125%;font-weight:800;font-size:clamp(22px,2.3vw,32px);letter-spacing:.01em;color:var(--white)}
.val p{margin-top:16px;font-size:15.5px;line-height:1.65;color:var(--white);opacity:.92;max-width:26ch}

/* ─────────────── 일하는 기준 ─────────────── */
.phil{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,96px);align-items:start}
.phil-txt p{font-size:clamp(17px,1.35vw,19.5px);line-height:1.8;color:#2E2926;max-width:56ch}
.phil-txt p+p{margin-top:24px}

/* ─────────────── 문의 ─────────────── */
.cta{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center}
.cta p{margin-top:14px;color:var(--muted);max-width:40ch}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap}

/* ─────────────── 푸터 ─────────────── */
.foot{padding-block:clamp(48px,5.5vw,80px);font-size:14.5px;color:#B9B1AD}
.foot-in{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;align-items:flex-start}
.foot .logo{width:164px}
.foot-tag{margin-top:14px}
.foot-nav{display:flex;gap:22px;flex-wrap:wrap}
.foot-nav a{text-decoration:none}
.foot-nav a:hover{color:var(--white)}
.foot-legal{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#8C837F;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ─────────────── 반응형 ─────────────── */
@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:48px}
  .sec-head{grid-template-columns:1fr;gap:18px}
  .sec-head p{justify-self:start}
  .prov,.phil,.cta{grid-template-columns:1fr}
  .vals{grid-template-columns:repeat(2,1fr)}
  .val{padding-left:clamp(18px,2vw,32px)}
  .nav{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .top-in{height:66px;gap:16px}
  .logo{width:140px}
  .stats,.caps,.vals{grid-template-columns:1fr}
  .stat{border-left:0;padding-left:0;padding-right:0;border-top:1px solid var(--line)}
  .stat:first-child{border-top:0}
  .cap{padding:24px 0 26px}
  .cover{grid-template-columns:1fr;gap:6px 0}
  .legend{justify-content:flex-start}
}

/* ═══════════ 서브페이지 공통 ═══════════ */
.nav a[aria-current]{color:var(--ink);border-bottom-color:var(--red)}
.foot-nav a[aria-current]{color:var(--white)}

.phead{padding-block:clamp(52px,6.5vw,96px) clamp(40px,5vw,72px);border-bottom:1px solid var(--line)}
.phead-in{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:end}
.phead h1{font-size:clamp(36px,5.4vw,72px)}
.phead .lede{justify-self:end;max-width:42ch}

.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px)}
.list{list-style:none}
.list li{padding:16px 0;border-top:1px solid var(--line);font-size:16.5px;line-height:1.6;display:grid;grid-template-columns:18px 1fr;gap:14px;align-items:start}
.list li::before{content:"";width:12px;height:13px;margin-top:8px;background:var(--red);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.list.no li::before{background:var(--line-2)}
.list h3{font-size:clamp(20px,1.7vw,24px);margin-bottom:6px}

/* 연혁 — 실제 순서가 있는 콘텐츠 */
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px;position:relative;margin-top:6px}
.tl::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--line-2)}
.tl-i{padding-top:34px;position:relative}
.tl-i::before{content:"";position:absolute;left:0;top:0;width:19px;height:20px;background:var(--red);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.tl-i.soon::before{background:var(--white);border:0;box-shadow:inset 0 0 0 2px var(--red)}
.tl-y{font-family:var(--wide);font-stretch:125%;font-weight:800;font-size:clamp(22px,2.3vw,32px);line-height:1}
.tl-i p{margin-top:10px;font-size:15.5px;line-height:1.65;color:var(--muted);max-width:30ch}

/* 기준 3개 */
.rules{border-top:1px solid var(--ink)}
.rule{display:grid;grid-template-columns:.9fr 1.6fr 1.1fr;gap:28px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline}
.rule b{font-family:var(--wide);font-stretch:125%;font-weight:800;font-size:15px;color:var(--red)}
.rule strong{font-size:clamp(18px,1.5vw,21px);font-weight:700;letter-spacing:-.02em}
.rule span{font-size:15.5px;color:var(--muted);line-height:1.65}

/* 표 */
.tbl2{width:100%;border-collapse:collapse;font-size:15.5px;border-top:1px solid var(--ink)}
.tbl2 th,.tbl2 td{text-align:left;padding:16px 20px 16px 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6}
.tbl2 thead th{font-family:var(--wide);font-stretch:118%;font-weight:700;font-size:12.5px;color:var(--muted);letter-spacing:.02em;padding-top:14px;padding-bottom:12px}
.tbl2 tbody th{font-weight:600;color:var(--ink);width:22%}
.tbl2 td{color:#3A3431}
.tbl2 .y{color:var(--red);font-weight:600}
.tbl2 .n{color:var(--muted-2)}
.tbl2 .hxs{display:inline-block;width:11px;height:12px;background:var(--red);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);vertical-align:-1px;margin-right:6px}
.tbl2 .hxs.off{background:var(--line-2)}

/* 단계 — 순서가 있는 절차에만 사용 */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.step{background:var(--white);padding:28px 24px 34px}
.step-n{font-family:var(--wide);font-stretch:125%;font-weight:800;font-size:13px;color:var(--red)}
.step h3{margin-top:16px}
.step p{margin-top:10px;font-size:15px;line-height:1.65;color:var(--muted)}

/* 구성 4종 */
.offers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.5vw,56px) clamp(32px,4.5vw,72px)}
.offer h3{font-family:var(--wide);font-stretch:125%;font-weight:800;font-size:clamp(19px,1.7vw,24px);letter-spacing:-.01em;color:var(--red)}
.offer-ko{margin-top:8px;font-size:clamp(20px,1.7vw,24px);font-weight:700;letter-spacing:-.025em;line-height:1.3}
.offer p{margin-top:12px;font-size:15.5px;line-height:1.7;color:var(--muted);max-width:46ch}
.offer ul{list-style:none;margin-top:18px;border-top:1px solid var(--ink)}
.offer li{padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;display:grid;grid-template-columns:14px 1fr;gap:12px;align-items:center}
.offer li::before{content:"";width:10px;height:11px;background:var(--red);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

/* FAQ — 사용자의 동작에만 반응 */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 0;font-size:clamp(17px,1.4vw,19.5px);font-weight:600;letter-spacing:-.02em;display:grid;grid-template-columns:1fr 22px;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(45deg);justify-self:end;margin-top:-6px;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:6px}
.faq details p{padding:0 0 24px;font-size:16px;line-height:1.7;color:#3A3431;max-width:64ch}

/* 게임사 그리드 */
.vgroup+.vgroup{margin-top:clamp(36px,4vw,56px)}
.vgroup h3{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.vgroup h3 small{font-family:var(--wide);font-stretch:118%;font-weight:600;font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.vcell{border:1px solid var(--line);border-radius:6px;padding:20px;display:flex;align-items:center;gap:14px;min-height:88px}
.vcell.slot{border-style:dashed}
.vcell .hx2{width:22px;height:24px;flex:none;background:var(--red);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.vcell.slot .hx2{background:var(--line-2)}
.vcell b{font-weight:600;font-size:15.5px;letter-spacing:-.01em;display:block}
.vcell small{display:block;color:var(--muted-2);font-size:12.5px;margin-top:3px}

/* 폼 */
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px 22px}
.f{display:flex;flex-direction:column;gap:8px}
.f.full{grid-column:1/-1}
.f label{font-size:14px;font-weight:600;letter-spacing:-.01em}
.f label small{font-weight:400;color:var(--muted-2);margin-left:6px}
.f input,.f select,.f textarea{font:inherit;font-size:15.5px;padding:13px 14px;border:1px solid var(--line-2);border-radius:4px;background:var(--white);color:var(--ink);width:100%}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--red);outline-offset:0;border-color:var(--red)}
.f textarea{min-height:150px;resize:vertical}
.chk{display:flex;flex-wrap:wrap;gap:10px}
.chk label{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--line-2);border-radius:4px;font-weight:500;font-size:14.5px;cursor:pointer}
.chk input{accent-color:var(--red);width:auto;margin:0}
.form-foot{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.form-foot span{font-size:14px;color:var(--muted)}

/* 채널 */
.chans{border-top:1px solid var(--ink)}
.chan{padding:22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:baseline}
.chan b{font-family:var(--wide);font-stretch:118%;font-weight:700;font-size:13px;color:var(--muted);letter-spacing:.02em}
.chan strong{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em}
.chan span{display:block;margin-top:4px;color:var(--muted);font-size:15px;line-height:1.6}
.chan a{color:var(--red);text-decoration:none}
.chan a:hover{text-decoration:underline}

/* 시퀀스 다이어그램 (기술) */
.seq{border:1px solid var(--line);border-radius:6px;padding:clamp(16px,2.5vw,36px);background:var(--white)}
.seq svg{width:100%;height:auto}
.s-lane{font-family:var(--wide);font-stretch:125%;font-weight:800;font-size:12px;fill:var(--ink);letter-spacing:.04em}
.s-msg{font-family:var(--kr);font-size:12.5px;fill:var(--ink);font-weight:500}
.s-ph{font-family:var(--wide);font-stretch:118%;font-weight:700;font-size:11px;fill:var(--red);letter-spacing:.06em}
.s-life{stroke:var(--line-2);stroke-width:1}
.s-a{stroke:var(--red);stroke-width:1.5;fill:none}
.s-b{stroke:var(--ink);stroke-width:1.2;fill:none}

/* 안내 배너 (정보성) */
.bar{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:22px 26px;border:1px solid var(--line);border-radius:6px;background:var(--white)}
.bar .hx2{width:22px;height:24px;background:var(--red);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.bar p{color:var(--muted);font-size:15.5px}
.bar p strong{color:var(--ink);font-weight:600}

.img-slot{aspect-ratio:3/2;border:1px solid var(--line);border-radius:6px;background:var(--tint);display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:13px}

@media (max-width:1000px){
  .phead-in,.two,.offers{grid-template-columns:1fr}
  .phead .lede{justify-self:start}
  .tl{grid-template-columns:repeat(2,1fr);gap:28px 24px}
  .tl::before{display:none}
  .tl-i{padding-left:30px;padding-top:0}
  .tl-i::before{left:0;top:4px}
  .steps,.vgrid{grid-template-columns:repeat(2,1fr)}
  .rule{grid-template-columns:1fr;gap:6px}
}
@media (max-width:640px){
  .tl,.steps,.vgrid,.form{grid-template-columns:1fr}
  .f.full{grid-column:auto}
  .chan{grid-template-columns:1fr;gap:4px}
  .bar{grid-template-columns:auto 1fr}
  .bar .btn{grid-column:1/-1}
  .tbl2{font-size:14.5px}
  .tbl2 tbody th{width:32%}
}


/* ─────────────── 보조 텍스트 대비 ───────────────
   시안 값은 웜 틴트(#FBF2EF) 위에서 대비가 모자랐습니다.
     --muted-2  2.67:1  → 캡션·라벨이 12.5px 인데 AA(4.5:1) 미달
     --muted    5.07:1  → 통과하지만 웜 배경에서 흐릿하게 읽힘
   본문과 캡션을 각각 한 단계씩 내려 위계를 유지한 채 둘 다 AA 를 넘깁니다.
   틴트 기준 캡션 4.68 · 본문 6.47 (흰 배경 5.16 · 7.14). */
:root{
  --muted:#5F5653;
  --muted-2:#766B67;
}

/* 브랜드 레드는 흰 배경 4.52:1 로 겨우 통과하지만 웜 틴트 위에서는 4.10:1 로
   미달입니다. 작은 레드 라벨(.cap h3 15.5px · .tbl2 .y 15.5px)만 한 단계 진한
   브랜드 색(--red-deep, 이미 호버에 쓰는 값)으로 내립니다 — 틴트 5.85:1.
   제목급 큰 레드(.offer h3 등)는 큰 글씨 기준 3:1 을 넘으므로 그대로 둡니다. */
.cap h3,.tbl2 .y{color:var(--red-deep)}

/* ─────────────── 제공 범위 화면 목업 ─────────────── */
/* 시안 노트: 화이트 배경 · 잉크 텍스트 · 강조 토큰만 레드 · 두 슬롯 톤 통일.
   상자가 16:10 으로 폭에 따라 높이가 정해지므로, 내부 치수를 전부 컨테이너
   폭(cqw) 기준으로 잡아 어느 폭에서도 잘리지 않고 그림처럼 함께 줄어듭니다.

   여백만은 cqw 로 쓰면 안 됩니다 — 컨테이너를 만든 요소 자신은 그 컨테이너를
   질의할 수 없어서, 상자에 직접 쓴 cqw 는 상자 폭이 아니라 뷰포트 폭으로
   해석됩니다. 1600px 화면에서 3.4cqw 가 19px 이 아니라 54px 이 되어 안쪽
   내용이 상자 한가운데로 쪼그라들었습니다. 여백은 % 로 둡니다(같은 폭 기준,
   자기 자신을 질의하지 않음). 자손들의 cqw 는 정상이므로 그대로 둡니다. */
.shot--code,.shot--console{container-type:inline-size;gap:0;padding:3.4% 3.8%}
.shot--code .shot-head,.shot--console .shot-head{font-size:2.45cqw;padding-bottom:2.6cqw}
.shot .shot-head b:first-child{font-family:var(--wide);font-stretch:118%;font-weight:700;color:var(--red)}
.code{margin-top:2cqw;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:2.28cqw;line-height:1.52;color:var(--ink)}
.code-k{font-family:var(--wide);font-stretch:118%;font-weight:600;font-size:1.95cqw;letter-spacing:.1em;color:var(--muted-2);margin-bottom:.9cqw}
.code-k+pre{margin-bottom:1.5cqw}
.code pre{margin:0;white-space:pre;overflow:hidden}
.code .k{color:#4A4340}
.code .s{color:var(--muted)}
.code .n{color:var(--crimson)}
.ctbl{margin-top:3.05cqw;display:grid;grid-template-columns:1.5fr 1fr 1.2fr auto;gap:0 3.5cqw;font-size:2.7cqw;line-height:1.5;align-items:center}
.ctbl>*{padding:1.6cqw 0;border-bottom:1px solid var(--line)}
.ctbl .h{font-family:var(--wide);font-stretch:118%;font-weight:600;font-size:2.1cqw;letter-spacing:.1em;color:var(--muted-2);padding-top:0}
.ctbl .c-v{font-weight:600;letter-spacing:-.01em}
.ctbl .c-c{font-family:var(--wide);font-stretch:112%;font-size:2.45cqw;color:var(--muted)}
.ctbl .c-s{justify-self:end}
.ctbl .c-s svg{width:2.95cqw;height:3.2cqw}
.ctbl>*:nth-last-child(-n+4){border-bottom:0}

/* ─────────────── 게임사 로고 셀 ─────────────── */
/* 로고마다 가로세로 비가 달라 폭은 빌드에서 면적 기준으로 계산해 인라인으로 넣습니다. */
.vcell--logo{justify-content:center;padding:20px;min-height:128px}
.vcell--logo img{max-width:100%;height:auto;object-fit:contain}
/* 어두운 배경 전용 로고는 브랜드 색을 지키고 판을 깝니다 */
.vcell--logo img.on-dark{box-sizing:content-box;background:var(--ink);
  border-radius:4px;padding:9px 13px}
.vcell--name{min-height:128px}
.people h3{font-size:clamp(19px,1.6vw,22px)}
.people .phil-txt p{max-width:56ch}
/* 표는 좁은 화면에서 저 혼자 가로 스크롤되게 — 페이지가 옆으로 밀리지 않도록 */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-wrap>.tbl2{min-width:300px}
.vgrid--wall{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
@media (max-width:640px){.vgrid--wall{grid-template-columns:repeat(2,1fr)}}

/* ─────────────── 모바일 메뉴 (시안에서 "개발 단계에서 추가" 로 남긴 항목) ─────────────── */
.lang button{font:inherit;text-decoration:none;color:var(--muted-2);padding:6px 8px;border-radius:3px;background:none;border:0;cursor:pointer;transition:color .15s,background .15s}
.lang button[aria-current="true"]{color:var(--ink);background:var(--tint)}
.lang button:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--red)}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .2s,opacity .2s}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.drawer{display:none;border-top:1px solid var(--line);background:var(--white)}
.drawer.open{display:block}
.drawer-in{display:flex;flex-direction:column;padding-block:14px 22px}
.drawer a{text-decoration:none;padding:14px 0;font-size:17px;font-weight:600;letter-spacing:-.02em;border-bottom:1px solid var(--line)}
.drawer a:last-child{border-bottom:0}
.drawer a[aria-current="page"]{color:var(--red)}
@media (max-width:1000px){
  .burger{display:block;margin-left:auto}
  .lang{margin-left:8px}
}
/* ─────────────── 전면 레드 밴드 위의 대비 ───────────────
   시안에서 문의 CTA 는 틴트 밴드였습니다. 이 자리를 페이지의 유일한 전면
   레드로 바꾸면서 두 가지가 깨졌습니다.
     · 본문 p 가 웜 그레이(--muted) 그대로라 레드 위에서 거의 안 읽힘
     · 기본 버튼이 레드 배경에 레드 버튼이라 경계가 사라짐
   레드 위에서는 흰 글씨, 기본 버튼은 흰 바탕에 레드 글씨로 뒤집습니다. */
.band--red .cta p,.band--red .lede,.band--red p{color:var(--white)}
/* 외곽선 버튼(.btn--line)은 흰 테두리 그대로 두어야 하므로 제외합니다 */
.band--red .btn:not(.btn--line){background:var(--white);color:var(--red);border-color:var(--white)}
.band--red .btn:not(.btn--line):hover{background:var(--tint);color:var(--red-deep);border-color:var(--tint)}

/* ─────────────── 페이지 상단 배경 ───────────────
   로고 G 의 외곽 기하를 그대로 딴 육각형(꼭짓점 위) 격자입니다.
   그 위로 붉은 스캔이 지나가면서, 지나가는 자리의 육각형만 붉게 살아납니다.
   같은 격자를 색만 바꿔 한 겹 더 깔고 대각선 마스크로 잘라내는 방식이라
   요소는 두 개뿐입니다. 히어로 라우팅 선 · 연혁 빛줄기 · 순서도 신호 점과
   같은 어휘고, 사진도 그라데이션 히어로도 쓰지 않습니다. */
.hero,.phead{position:relative;isolation:isolate}
.hero>*,.phead>*{position:relative;z-index:1}
.topbg{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 92%);
          mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 92%)}
.topbg i{position:absolute;inset:-14% -14%;display:block;background-size:52px 90px}
.topbg-grid{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='51.96'%20height='90.00'%3E%3Cpath%20d='M0.00%20-30.00L25.98%20-15.00L25.98%2015.00L0.00%2030.00L-25.98%2015.00L-25.98%20-15.00ZM51.96%20-30.00L77.94%20-15.00L77.94%2015.00L51.96%2030.00L25.98%2015.00L25.98%20-15.00ZM25.98%2015.00L51.96%2030.00L51.96%2060.00L25.98%2075.00L0.00%2060.00L0.00%2030.00ZM0.00%2060.00L25.98%2075.00L25.98%20105.00L0.00%20120.00L-25.98%20105.00L-25.98%2075.00ZM51.96%2060.00L77.94%2075.00L77.94%20105.00L51.96%20120.00L25.98%20105.00L25.98%2075.00Z'%20fill='none'%20stroke='%23EADFDA'%20stroke-width='1.0'/%3E%3C/svg%3E");opacity:.6}
.js-anim .topbg-grid{animation:bgDrift 42s linear infinite}

/* 스캔 — 마스크를 못 쓰는 환경에서는 붉은 격자가 그대로 깔리므로 아예 숨깁니다 */
.topbg-scan{display:none}
@supports ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
  .topbg-scan{
    display:block;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='51.96'%20height='90.00'%3E%3Cpath%20d='M0.00%20-30.00L25.98%20-15.00L25.98%2015.00L0.00%2030.00L-25.98%2015.00L-25.98%20-15.00ZM51.96%20-30.00L77.94%20-15.00L77.94%2015.00L51.96%2030.00L25.98%2015.00L25.98%20-15.00ZM25.98%2015.00L51.96%2030.00L51.96%2060.00L25.98%2075.00L0.00%2060.00L0.00%2030.00ZM0.00%2060.00L25.98%2075.00L25.98%20105.00L0.00%20120.00L-25.98%20105.00L-25.98%2075.00ZM51.96%2060.00L77.94%2075.00L77.94%20105.00L51.96%20120.00L25.98%20105.00L25.98%2075.00Z'%20fill='none'%20stroke='%23E22D2D'%20stroke-width='1.3'/%3E%3C/svg%3E");opacity:.5;
    -webkit-mask-image:linear-gradient(101deg,transparent 40%,#000 49%,#000 51%,transparent 60%);
            mask-image:linear-gradient(101deg,transparent 40%,#000 49%,#000 51%,transparent 60%);
    -webkit-mask-size:250% 100%;mask-size:250% 100%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:-150% 0;mask-position:-150% 0}
  .js-anim .topbg-scan{animation:bgScan 7.6s linear infinite}
  /* 반 주기 먼저 출발해 3.8초마다 하나씩 지나가게 */
  .js-anim .topbg-scan--b{animation-delay:-3.8s}
}

@keyframes bgDrift{to{background-position:52px 90px}}
@keyframes bgScan{
  from{-webkit-mask-position:-150% 0;mask-position:-150% 0}
  to{-webkit-mask-position:150% 0;mask-position:150% 0}
}

@media (max-width:640px){
  .topbg i{background-size:38px 66px}
  .topbg-grid{opacity:.5}
}
@media (prefers-reduced-motion:reduce){
  .js-anim .topbg-grid,.js-anim .topbg-scan{animation:none}
  .topbg-scan{display:none}
}

/* ─────────────── 진입 연출 ───────────────
   페이지 상단은 로드 시점에 이미 보이는 자리라 스크롤 등장에서 빠집니다.
   그래서 첫 화면만 정적으로 남는데, 아래 스크롤 연출과 같은 움직임·같은 시간으로
   맞춰 들어오게 합니다. 대상은 히어로/페이지 헤드 두 블록뿐이라
   JS 가 멈춰도 비는 범위가 작고, main.js 가 보험 타이머로 반드시 되돌립니다. */
.js-anim .hero-in>div,.js-anim .phead-in>*{opacity:0;transform:translateY(16px)}
.js-anim.intro-in .hero-in>div,.js-anim.intro-in .phead-in>*{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.js-anim .hero-in>div:nth-child(2),.js-anim .phead-in>*:nth-child(2){transition-delay:110ms}

/* ─────────────── 순서도 · 연혁 연출 ───────────────
   히어로 라우팅 다이어그램의 선 그리기를 그대로 가져옵니다.
   화면에 들어올 때 .is-in 이 붙고, 지연 시간은 빌드가 요소마다 박아둡니다. */
@keyframes seqDraw{
  0%{opacity:0;stroke-dashoffset:1}
  1%{opacity:1;stroke-dashoffset:1}
  100%{opacity:1;stroke-dashoffset:0}
}
@keyframes seqFade{from{opacity:0}to{opacity:1}}
@keyframes tlPulse{
  0%,100%{box-shadow:inset 0 0 0 2px var(--red),0 0 0 0 rgba(226,45,45,.28)}
  55%{box-shadow:inset 0 0 0 2px var(--red),0 0 0 6px rgba(226,45,45,0)}
}

/* ─────────────── 한 판이 도는 길 ───────────────
   화살표 12개를 걷어내고 노드 3개와 신호 하나만 남겼습니다.
   신호가 가운데 패널에 들어갈 때 사라졌다 반대쪽에서 나오면서
   "여기서 처리된다"를 말합니다. 움직이는 것은 점 하나뿐입니다. */
.f-track{stroke:var(--line-2);stroke-width:1.5;stroke-linecap:round}
.f-node{fill:#fff;stroke:var(--line-2);stroke-width:1}
.f-core{fill:var(--tint);stroke:var(--red);stroke-width:1.5}
.f-name{font-family:var(--kr);font-size:14px;font-weight:600;fill:var(--ink);letter-spacing:-.02em}
.f-core-t{font-family:var(--wide);font-stretch:125%;font-weight:800;font-size:15px;
  fill:var(--ink);letter-spacing:.02em}
.f-core-s{font-family:var(--kr);font-size:11.5px;font-weight:500;fill:var(--muted);letter-spacing:-.015em}
.f-sig{fill:var(--red)}
.f-sig--tail{r:7}

.js-anim .seq .f-sig{opacity:0}
.js-anim .seq.is-in .f-sig{animation:flowSig 7.5s cubic-bezier(.45,0,.55,1) infinite}
.js-anim .seq.is-in .f-sig--tail{animation-name:flowSigTail}

/* 신호는 선 위에서만 보입니다 — 상자에 닿으면 테두리에서 사라지고,
   반대쪽 테두리에서 다시 나옵니다. 상자 안(파트너·게임사 이름, 가운데 패널)에
   빨간 원이 올라가 글자를 가리던 것을 없앤 것이고, "여기서 처리된다"는
   가운데 패널의 뜻도 양 끝 노드까지 같은 규칙으로 확장됩니다.
   좌표(translateX 기준): 75 = 파트너 상자 오른변 · 220 = 패널 왼변 ·
   360 = 패널 오른변 · 505 = 게임사 상자 왼변. */
@keyframes flowSig{
  0%   {transform:translateX(75px);opacity:0}
  2%   {transform:translateX(87px);opacity:1}
  19%  {transform:translateX(208px);opacity:1}
  21%  {transform:translateX(220px);opacity:0}
  24%  {transform:translateX(360px);opacity:0}
  26%  {transform:translateX(372px);opacity:1}
  43%  {transform:translateX(493px);opacity:1}
  45%  {transform:translateX(505px);opacity:0}
  54%  {transform:translateX(505px);opacity:0}
  56%  {transform:translateX(493px);opacity:1}
  73%  {transform:translateX(372px);opacity:1}
  75%  {transform:translateX(360px);opacity:0}
  78%  {transform:translateX(220px);opacity:0}
  80%  {transform:translateX(208px);opacity:1}
  97%  {transform:translateX(87px);opacity:1}
  100% {transform:translateX(75px);opacity:0}
}
/* 꼬리는 머리보다 옅어야 두 겹으로 읽힙니다. 애니메이션이 opacity 를 잡기 때문에
   .f-sig--tail 의 opacity 선언만으로는 덮이지 않아 키프레임을 따로 둡니다. */
@keyframes flowSigTail{
  0%   {transform:translateX(75px);opacity:0}
  2%   {transform:translateX(87px);opacity:.28}
  19%  {transform:translateX(208px);opacity:.28}
  21%  {transform:translateX(220px);opacity:0}
  24%  {transform:translateX(360px);opacity:0}
  26%  {transform:translateX(372px);opacity:.28}
  43%  {transform:translateX(493px);opacity:.28}
  45%  {transform:translateX(505px);opacity:0}
  54%  {transform:translateX(505px);opacity:0}
  56%  {transform:translateX(493px);opacity:.28}
  73%  {transform:translateX(372px);opacity:.28}
  75%  {transform:translateX(360px);opacity:0}
  78%  {transform:translateX(220px);opacity:0}
  80%  {transform:translateX(208px);opacity:.28}
  97%  {transform:translateX(87px);opacity:.28}
  100% {transform:translateX(75px);opacity:0}
}

/* 12단계 — 화살표 대신 글자로 읽습니다 */
.flowsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);
  margin-top:clamp(30px,3.6vw,50px)}
.fs{border-top:2px solid var(--ink);padding-top:18px}
.fs>b{font-family:var(--wide);font-stretch:118%;font-weight:700;font-size:12px;
  letter-spacing:.08em;color:var(--red);display:block}
.fs-do{display:block;margin-top:7px;font-size:15.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.fs ol{list-style:none;margin-top:14px}
.fs li{display:flex;gap:11px;align-items:baseline;padding:7px 0;
  font-size:14.5px;line-height:1.55;color:var(--muted);border-top:1px solid var(--line)}
.fs li:first-child{border-top:0}
.fs li i{font-family:var(--wide);font-stretch:118%;font-weight:700;font-size:10.5px;
  font-style:normal;color:var(--muted-2);letter-spacing:.05em;flex:none}
@media (max-width:1000px){.flowsteps{grid-template-columns:1fr}}

/* 연혁 — 빛줄기가 선을 타고 가다가 육각형에 닿으면 멈춥니다.
   멈춘 동안 그 항목이 채워지고 연도가 올라가고, 끝나면 다음 점으로 출발합니다.
   4개 항목이 균등 그리드라 i 번째 점은 i*(25% + 6px) 자리에 옵니다.

   3.10초 동안의 시간표 (앞의 0.25초는 출발 대기)
     0.00–0.50  2020 카운팅 (빛줄기 대기)
     0.50–1.00  2020 → 2025 이동
     1.00–1.55  2025 채워지고 카운팅
     1.55–2.05  2025 → 2026 이동
     2.05–2.60  2026 채워지고 카운팅
     2.60–3.10  2026 → 진행 중 이동, 도착과 함께 끝
   main.js 의 TL_AT 가 같은 시간표를 씁니다. */
.js-anim .tl .tl-beam{
  position:absolute;left:0;top:8px;height:3px;width:0;border-radius:2px;
  background:var(--red);pointer-events:none}
.js-anim .tl .tl-beam::after{
  content:"";position:absolute;right:-9px;top:50%;width:18px;height:18px;
  margin-top:-9px;border-radius:50%;
  background:radial-gradient(circle,rgba(226,45,45,.5),rgba(226,45,45,0) 68%)}
.js-anim .tl.is-in .tl-beam{animation:tlBeam 3.1s linear .25s both}

/* 2025 부터는 빈 육각형으로 시작해 빛이 닿을 때 채워집니다.
   2020 은 출발점이라 처음부터 채워져 있습니다. */
.js-anim .tl .tl-i:nth-child(n+2)::before{
  background:var(--white);box-shadow:inset 0 0 0 2px var(--red)}
.js-anim .tl.is-in .tl-i:nth-child(2)::before{animation:tlFill .5s ease-out 1.25s both}
.js-anim .tl.is-in .tl-i:nth-child(3)::before{animation:tlFill .5s ease-out 2.3s both}
/* "진행 중" 은 끝나지 않은 일이라 채우지 않습니다. 빛이 닿으면 뛰기 시작합니다. */
.js-anim .tl.is-in .tl-i.soon::before{
  animation:tlArrive .5s ease-out 3.35s both, tlPulse 2.6s 3.85s ease-in-out infinite}

/* 연도와 설명도 빛이 닿을 때 하나씩 올라옵니다.
   연도가 먼저, 설명이 0.08초 뒤 — 같이 튀어나오면 뭉쳐 보입니다. */
.js-anim .tl .tl-i .tl-y,.js-anim .tl .tl-i p{opacity:0}
.js-anim .tl.is-in .tl-i .tl-y,.js-anim .tl.is-in .tl-i p{
  animation:tlText .45s cubic-bezier(.22,.61,.36,1) both}
.js-anim .tl.is-in .tl-i:nth-child(1) .tl-y{animation-delay:.25s}
.js-anim .tl.is-in .tl-i:nth-child(1) p{animation-delay:.33s}
.js-anim .tl.is-in .tl-i:nth-child(2) .tl-y{animation-delay:1.25s}
.js-anim .tl.is-in .tl-i:nth-child(2) p{animation-delay:1.33s}
.js-anim .tl.is-in .tl-i:nth-child(3) .tl-y{animation-delay:2.3s}
.js-anim .tl.is-in .tl-i:nth-child(3) p{animation-delay:2.38s}
.js-anim .tl.is-in .tl-i:nth-child(4) .tl-y{animation-delay:3.35s}
.js-anim .tl.is-in .tl-i:nth-child(4) p{animation-delay:3.43s}

@keyframes tlText{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes tlBeam{
  0%     {width:0}
  16.13% {width:0}
  32.26% {width:calc(25% + 6px)}
  50%    {width:calc(25% + 6px)}
  66.13% {width:calc(50% + 12px)}
  83.87% {width:calc(50% + 12px)}
  100%   {width:calc(75% + 18px)}
}
@keyframes tlFill{
  0%{background:var(--white);box-shadow:inset 0 0 0 2px var(--red);transform:scale(1)}
  55%{background:var(--red);box-shadow:inset 0 0 0 2px var(--red);transform:scale(1.3)}
  100%{background:var(--red);box-shadow:inset 0 0 0 2px var(--red);transform:scale(1)}
}
@keyframes tlArrive{
  0%{transform:scale(1)}
  55%{transform:scale(1.35)}
  100%{transform:scale(1)}
}

/* 세로로 쌓이는 폭에서는 가로선이 없으므로 빛줄기도 빼고, 점만 순서대로 채웁니다 */
@media (max-width:1000px){
  .js-anim .tl .tl-beam{display:none}
}

@media (prefers-reduced-motion:reduce){
  .js-anim .seq .s-a,.js-anim .seq .s-b,.js-anim .seq .s-msg,
  .js-anim .tl .tl-i::before{animation:none}
  .js-anim .tl .tl-i .tl-y,.js-anim .tl .tl-i p{opacity:1;transform:none;animation:none}
  .js-anim .tl .tl-beam{display:none}
}

/* ─────────────── 세로 리듬 ───────────────
   시안 값(밴드 위아래 각 140px)은 1440px 화면에서 섹션 사이에 274px 를 만들어
   내용이 짧은 섹션이 절반 넘게 빈칸이 됐습니다. 반대로 너무 줄이면 밀도 높은
   섹션이 답답해집니다. 원본과 축소값 사이에서 잡습니다.
   짧은 섹션(문의 CTA)은 자체 인라인 여백을 따로 줄였습니다. */
.band{padding-block:clamp(64px,8.2vw,120px)}
.hero{padding-block:clamp(52px,6.4vw,100px) clamp(52px,6.4vw,92px)}
.phead{padding-block:clamp(52px,6.4vw,96px) clamp(38px,4.8vw,68px)}
.sec-head{padding-bottom:24px;margin-bottom:clamp(32px,4vw,58px)}

/* 지표는 숫자가 큰 만큼 위아래가 눌리면 답답해 보입니다 */
.stat{padding-block:clamp(32px,3.8vw,54px)}
.stat-l{margin-top:16px}
.cover{margin-top:36px;gap:14px 28px}

/* ─────────────── 게임 라이브러리 (연속 이동 레인) ───────────────
   타일 목록을 세 벌 이어 붙이고 한 벌 폭(--n × (타일+간격))만큼 밀어 되돌리면
   이음매가 보이지 않습니다. 두 벌만 쓰면 다 밀고 난 순간 오른쪽이 비므로
   레인보다 넓게 덮이도록 세 벌입니다. 타일마다 margin-right 로 간격을 주기
   때문에 한 벌 폭이 딱 떨어집니다(트랙 gap 을 쓰면 반 칸 어긋납니다).
   양 끝을 바탕으로 흘려보내야 "잘린 목록"이 아니라 "이어지는 목록"으로 읽힙니다. */
.lib{--lt:clamp(98px,10.5vw,156px);--lg:clamp(10px,1.1vw,15px);
  padding-block:clamp(6px,1vw,16px) clamp(54px,6.8vw,100px)}
.lib .sec-head{margin-bottom:clamp(22px,2.8vw,38px)}
.lib-lane{overflow:hidden}
@supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
  .lib-lane{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
}
.lib-track{
  display:flex;width:max-content;
  --period:calc(var(--n) * (var(--lt) + var(--lg)));
  animation:libRun var(--dur) linear infinite}
.lib-lane:hover .lib-track{animation-play-state:paused}
@keyframes libRun{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(var(--period) * -1),0,0)}
}
/* 같은 그림이 세 번 나오므로 <img> 대신 배경으로 깝니다 — 파일은 한 번만 참조됩니다 */
.lib-tile{
  display:block;flex:none;
  width:var(--lt);height:var(--lt);
  margin-right:var(--lg);
  border:1px solid var(--line);border-radius:4px;
  background:var(--tint) center/cover no-repeat}
.lib-g01{background-image:url(/assets/img/games/pragmatic-gates-of-olympus-1000.jpg)}
.lib-g02{background-image:url(/assets/img/games/playngo-book-of-dead-go-collect.jpg)}
.lib-g03{background-image:url(/assets/img/games/rrgaming-super-nova.jpg)}
.lib-g04{background-image:url(/assets/img/games/pragmatic-sugar-rush-1000.jpg)}
.lib-g05{background-image:url(/assets/img/games/playngo-wheel-of-mictlan.jpg)}
.lib-g06{background-image:url(/assets/img/games/rrgaming-jungle-rush.jpg)}
.lib-g07{background-image:url(/assets/img/games/pragmatic-5-lions-megaways.jpg)}
.lib-g08{background-image:url(/assets/img/games/playngo-tomb-of-gold-reimagined.jpg)}
.lib-g09{background-image:url(/assets/img/games/rrgaming-carnival-neko.jpg)}
.lib-g10{background-image:url(/assets/img/games/playngo-rise-of-olympus-1000.jpg)}
.lib-g11{background-image:url(/assets/img/games/pragmatic-sweet-burst.jpg)}
.lib-g12{background-image:url(/assets/img/games/rrgaming-shangrila-of-fortune.jpg)}
.lib-g13{background-image:url(/assets/img/games/playngo-mega-don-triple-threat.jpg)}
.lib-g14{background-image:url(/assets/img/games/pragmatic-starlight-wins.jpg)}
.lib-g15{background-image:url(/assets/img/games/rrgaming-fortune-of-ra.jpg)}

.lib-note{margin-top:clamp(14px,1.6vw,20px);font-size:12.5px;color:var(--muted-2)}

@media (prefers-reduced-motion:reduce){
  .lib-track{animation:none}
}

/* ─────────────── 파트너 상단 쇼케이스 (3D 회전) ───────────────
   현행 커스토머 페이지(gglabs.gg/?page_id=3116)가 쓰는 배치를 그대로 씁니다.
   처음에 반지름을 이미지 수(12장)로 잡았더니 옆 장이 30도씩 꺾여 찌그러져
   보였습니다. 원본은 이미지가 몇 장이든 "22칸짜리 원통" 간격으로 고정합니다.
     · 한 칸 16.36도(=360/22) — 옆 장이 살짝만 기울어 화면이 늘어선 것처럼 읽힘
     · 반지름 = (카드폭/2)/tan(π/22) + 15
     · perspective 는 카드폭에 비례 (506px 카드에 500px)
   원통을 반지름만큼 뒤로 밀어야 정면 카드가 z=0 에 옵니다. 이걸 빼면
   perspective/(perspective−z) 만큼 확대돼 정면 장이 몇 배로 부풀고 페이지가 밀립니다.
   회전은 원통을 돌리는 게 아니라 장마다 "정면에서 몇 칸 떨어졌는지"를 다시
   계산해 배치합니다 — 그래서 정면 장은 언제나 정확히 정면을 봅니다. */
.sc-band{padding-block:clamp(28px,3.4vw,52px) 0;overflow:hidden}
.sc{
  --sc-w:506px;--sc-h:260px;--sc-r:1775px;--sc-a:16.3636deg;
  position:relative;height:calc(var(--sc-h) + 40px);
  perspective:500px;perspective-origin:50% 50%;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;user-select:none}
.sc-stage{
  position:relative;list-style:none;
  width:var(--sc-w);height:var(--sc-h);
  transform-style:preserve-3d;
  transform:translateZ(calc(var(--sc-r) * -1));
  transition:transform .6s cubic-bezier(.25,1,.5,1)}
/* 원통을 반지름만큼 뒤로 밀어 놨으므로, 장마다 같은 크기를 앞으로 되밀어야
   제 크기로 보입니다. 이 기본값이 없으면 스크립트가 안 붙었을 때 카드가
   perspective/(perspective+r) 만큼(506px → 111px) 쪼그라듭니다. */
.sc-cell{
  position:absolute;inset:0;
  backface-visibility:hidden;
  transform:translateZ(var(--sc-r));
  transition:opacity .25s ease,transform .6s cubic-bezier(.25,1,.5,1)}
/* 스크립트가 없으면 맨 앞 한 장만 보입니다 — 20장이 겹쳐 보이지 않게 */
.sc-cell:not(:first-child){opacity:0}
.sc-cell img{
  display:block;width:100%;height:100%;object-fit:cover;
  border-radius:12px;
  box-shadow:0 15px 35px rgba(70,58,54,.28)}

@media (max-width:1100px){
  .sc{--sc-w:380px;--sc-h:195px;--sc-r:1336px;perspective:375px}
}
@media (max-width:640px){
  .sc{--sc-w:280px;--sc-h:144px;--sc-r:989px;perspective:277px}
  .sc-cell img{border-radius:9px;box-shadow:0 12px 26px rgba(70,58,54,.24)}
}
@media (prefers-reduced-motion:reduce){
  .sc-stage,.sc-cell{transition:none}
}

/* ─────────────── 진행 순서 (편집형 목록) ───────────────
   상자를 없애고 번호를 구조로 씁니다. 번호 칸은 내용 폭(max-content)이라
   두 자리 숫자가 절대 두 줄로 꺾이지 않고, 제목 윗선과 번호 윗선을 맞춥니다.
   기간은 상자 칩이 아니라 제목 옆 작은 라벨 — 이 사이트의 h3 small 어휘입니다. */
.proc{list-style:none}
.proc-i{
  display:grid;grid-template-columns:max-content 1fr;
  gap:0 clamp(24px,3.4vw,56px);align-items:start;
  padding:clamp(16px,1.8vw,22px) 0;border-top:1px solid var(--line)}
/* 기준은 섹션 윗변 → 제목 간격(= 밴드 위 여백). 04 아래 → 섹션 아랫변이 그와 같아야
   하므로 끝 행의 자체 여백을 없애고 밴드 아래 여백을 그대로 씁니다. 첫 행 위는
   구분선 여백 뒤에 작은 숨만 둡니다. */
.proc-i:first-child{border-top:0;padding-top:clamp(12px,1.4vw,16px)}
.proc-i:last-child{padding-bottom:0}
/* 최대 폭(125%)에 음수 자간을 겹치면 0 과 1 이 서로 파고들어 찌그러져 보입니다.
   폭을 한 단계 낮추고 자간을 풀어 숫자 속공간이 열리게 합니다. */
.proc-n{
  font-family:var(--wide);font-stretch:118%;font-weight:700;
  font-size:clamp(34px,3.9vw,54px);line-height:1;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap;min-width:2.3ch;
  /* --line-2 는 헤어라인 색이라 글자로 쓰면 1.42:1 로 안 보입니다.
     번호는 34~54px 큰 글씨라 3:1 이 기준 — 틴트 위 3.38:1. */
  color:#94807A}
.proc-b h3{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-size:clamp(20px,1.8vw,25px);line-height:1.15;margin-top:.18em}
.proc-dur{
  font-family:var(--wide);font-stretch:118%;font-weight:600;font-size:12.5px;
  letter-spacing:.02em;color:var(--muted)}
.proc-b p{margin-top:8px;font-size:16px;line-height:1.7;color:var(--muted);max-width:64ch}

/* 연출 — 두 층이 서로 다른 방식으로 움직입니다.
     · 번호(뒤): 스크롤에 그대로 붙습니다. --p 0→1 을 main.js 가 행마다 넣고,
       그만큼 워터마크가 제자리 크기로 내려앉습니다. 크게 떠 있는 동안은
       흐리고(제곱 곡선), 작아지면서 진해져 글자와 겹치는 구간이 짧습니다.
     · 제목·본문(앞): 행이 기준선을 넘을 때 한 번, 왼쪽에서 오른쪽으로 닦입니다.
   .js-steps 는 스크립트가 붙었을 때만 켜지므로, 스크립트가 없으면
   아무것도 숨겨지지 않고 완성 상태 그대로 보입니다. */
.proc-i{overflow:hidden}
.proc-n{position:relative;z-index:0;transform-origin:left center}
.proc-b{position:relative;z-index:1}

/* 번호 — 스크롤 진행도에 붙음 */
.js-steps .proc-i{--p:0}
.js-steps .proc-n{
  transform:scale(calc(1 + (1 - var(--p)) * (1 - var(--p)) * 1.5));
  opacity:calc(.1 + var(--p) * var(--p) * .9)}

/* 제목·본문 — 기준선을 넘을 때 한 번 닦입니다.
   마스크를 못 쓰는 브라우저에서는 이 블록 자체가 적용되지 않아 그냥 다 보입니다. */
@supports ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){
  .js-steps .proc-b h3,.js-steps .proc-b p{
    -webkit-mask-image:linear-gradient(90deg,#000 0 50%,transparent 58%);
            mask-image:linear-gradient(90deg,#000 0 50%,transparent 58%);
    -webkit-mask-size:300% 100%;mask-size:300% 100%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:100% 50%;mask-position:100% 50%}
  /* 전환은 도착 상태에만 겁니다. 시작 상태에도 걸면 .js-steps 가 붙는 순간
     한 번 닦이고 시작해, 스크롤하기도 전에 연출을 써버립니다. */
  .js-steps .proc-i.row-in .proc-b h3,
  .js-steps .proc-i.row-in .proc-b p{
    -webkit-mask-position:0% 50%;mask-position:0% 50%;
    transition:-webkit-mask-position .78s cubic-bezier(.22,.61,.36,1),
               mask-position .78s cubic-bezier(.22,.61,.36,1)}
  /* 본문은 제목보다 한 박자 늦게 — 같이 닦이면 한 덩어리로 뭉쳐 보입니다 */
  .js-steps .proc-i.row-in .proc-b p{transition-delay:.14s}
}

@media (max-width:640px){
  .proc-i{grid-template-columns:1fr;gap:6px}
  .proc-n{font-size:34px}
}
@media (prefers-reduced-motion:reduce){
  .js-steps .proc-n{transform:none;opacity:1}
  .js-steps .proc-b h3,.js-steps .proc-b p{-webkit-mask-image:none;mask-image:none}
}

/* ─────────────── 진행 순서 구분선의 별똥별 ───────────────
   레일(overflow:hidden)에 갇힌 꼬리 하나가 왼쪽에서 들어와 오른쪽으로 빠집니다.
   한 번에 하나만 존재하고, 하나가 빠져나가면 다음 것이 곧바로 들어옵니다.
   진행 순서 섹션 하나에만 넣습니다 — 모든 구분선에 넣으면 페이지가 반짝거립니다. */
.sec-head--comet{position:relative}
.comet-rail{
  position:absolute;left:0;right:0;bottom:-1px;height:1px;
  overflow:hidden;pointer-events:none}
/* 전면 레드 밴드 위에서는 붉은 꼬리가 안 보이므로 흰색으로 */
.band--red .comet-rail::after{background:linear-gradient(90deg,
  rgba(255,255,255,0),rgba(255,255,255,.18) 55%,rgba(255,255,255,.55) 88%,rgba(255,255,255,.9))}
.comet-rail::after{
  content:"";position:absolute;top:0;left:0;height:1px;width:26%;
  transform:translateX(-100%);
  background:linear-gradient(90deg,
    rgba(226,45,45,0),rgba(226,45,45,.12) 55%,rgba(226,45,45,.5) 88%,rgba(226,45,45,.85))}
.js-anim .sec-head--comet.is-in .comet-rail::after{
  animation:comet 6.2s linear infinite;animation-delay:inherit}

@keyframes comet{from{transform:translateX(-100%)}to{transform:translateX(385%)}}

@media (prefers-reduced-motion:reduce){
  .comet-rail{display:none}
}

/* ─────────────── 등장 효과 ───────────────
   .js-anim 은 JS 가 붙이고, .reveal 은 첫 화면 밖 요소에만 붙습니다.
   그래서 JS 가 없거나 모션을 끈 환경에서는 아무것도 숨겨지지 않습니다. */
.js-anim .reveal{opacity:0;transform:translateY(14px)}
.js-anim .reveal.is-in{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.stat-n{font-variant-numeric:tabular-nums}
.vcell--logo,.vcell--name{transition:border-color .18s,transform .18s}
.vcell--logo:hover,.vcell--name:hover{border-color:var(--line-2);transform:translateY(-2px)}
/* ─────────────── 모바일 대응 ───────────────
   메인 화면은 모바일입니다. 데스크탑에서 멀쩡하던 것이 폭이 줄면
   읽히지 않거나 누르기 어려워지는 지점을 여기서 정리합니다. */

/* 탭 타깃을 44px 이상으로 */
@media (max-width:1000px){
  .burger{min-width:44px;min-height:44px;padding:0;display:flex;flex-direction:column;
    justify-content:center;align-items:center}
  .lang a,.lang span{display:flex;align-items:center;min-height:44px;padding:0 9px}
  .lang{gap:0}
  /* 로고는 워드마크라 높이가 18~21px 밖에 안 됩니다. 그림은 그대로 두고
     위아래 여백으로 누를 수 있는 넓이만 44px 로 키웁니다. */
  .logo{display:flex;align-items:center;min-height:44px}
  .foot .logo{min-height:44px}
}

@media (max-width:640px){
  .foot-nav{gap:0 18px}
  .foot-nav a{padding-block:10px}

  /* 히어로 다이어그램 — 640×460 이 335px 로 줄면 안쪽 글자가 6px 대가 됩니다.
     SVG 좌표계 글자를 키우고, 통화 라벨은 바로 아래 "지원 통화" 와 겹치므로 뺍니다.
     (플랫폼 이름은 인라인 style 로 크기가 박혀 있어 !important 가 필요합니다.) */
  .figure text.d-lbl{font-size:20px}
  .figure text[style]{font-size:19px !important}
  .figure text.d-cur{display:none}
  .figure text.d-core{font-size:17px}

  /* 화면 목업 — 16:10 을 유지하면 글자가 6~7px 이 됩니다.
     높이를 내용에 맡기고 읽히는 크기로 되돌립니다. */
  .shot--code,.shot--console{aspect-ratio:auto;padding:16px}
  .shot--code .shot-head,.shot--console .shot-head{font-size:11.5px;padding-bottom:11px}
  .code{font-size:11px;margin-top:12px;line-height:1.6}
  .code-k{font-size:9.5px;margin-bottom:5px}
  .code-k+pre{margin-bottom:12px}
  .code pre{overflow-x:auto}
  .ctbl{font-size:13px;margin-top:12px;gap:0 10px}
  .ctbl>*{padding:9px 0}
  .ctbl .h{font-size:9.5px}
  .ctbl .c-c{font-size:11.5px}
  .ctbl .c-s svg{width:13px;height:14px}

  /* 게임사 셀은 로고만 들어가므로 2열이 훑기 좋습니다 */
  .vgrid{grid-template-columns:repeat(2,1fr)}
  .vcell--logo,.vcell--name{min-height:96px;padding:12px}
  .vgrid--wall .vcell--logo{min-height:88px;padding:12px}
}

/* 아주 좁은 화면 */
@media (max-width:359px){
  .vgrid,.vgrid--wall{grid-template-columns:1fr}
  .logo{width:124px}
  .top-in{gap:8px}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .js-anim .reveal{opacity:1;transform:none}
  .js-anim .hero-in>div,.js-anim .phead-in>*{opacity:1;transform:none}
}

@media (max-width:1000px){#cgrid{grid-template-columns:1fr!important}}