/* ============================================================
   SeePlay — 디자인 토큰
   색은 로고에서 추출: 보라 그라디언트 · 시안 · 캐릭터 앰버
   ============================================================ */
:root{
  /* ===== Bright Arcade — BIC 패널 덱의 디자인 시스템을 그대로 승계 ===== */
  --ink:#183153;
  --ink-2:#3a5478;
  --muted:#6b83a4;
  --bg:#f2f7ff;
  --surface:#ffffff;
  --line:rgba(65,102,150,.13);
  --line-2:rgba(65,102,150,.2);
  --deep:#0c1830;

  /* 채도 높은 원색은 면과 띠에, 어두운 짝은 글자에 쓴다 */
  --purple:#8a78f5;   --purple-ink:#6c5ce7;
  --blue:#5c7cfa;     --blue-ink:#4763d6;
  --cyan:#45d7e8;     --cyan-ink:#149dae;
  --yellow:#ffc857;   --yellow-ink:#d58a12;
  --coral:#ff7b7b;    --coral-ink:#e46262;
  --lime:#7ddb8a;     --lime-ink:#4aa85c;

  /* 하위 요소가 물려받는 섹션 포인트 색 */
  --accent:var(--purple);
  --accent-ink:var(--purple-ink);

  --shadow-s:0 3px 10px rgba(54,82,122,.05);
  --shadow-m:0 8px 20px rgba(54,82,122,.08);
  --shadow-soft:0 14px 36px rgba(54,82,122,.1);
  --shadow-l:0 28px 70px rgba(12,24,48,.18);

  --r-s:12px;
  --r-m:16px;
  --r-l:22px;
  --r-xl:30px;

  --container:min(1320px, calc(100% - 44px));
  --header-h:78px;

  /* 오프닝 연출 */
  --ease-rise:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 18px); }

body{
  margin:0;
  background:linear-gradient(180deg,#f7fbff 0%,#eef5ff 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.01em;
  /* 한글은 단어 중간에서 줄이 끊기지 않도록 한다 */
  word-break:keep-all;
  overflow-wrap:break-word;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3{ margin:0; letter-spacing:-.035em; line-height:1.14; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.container{ width:var(--container); margin-inline:auto; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
:focus-visible{ outline:3px solid var(--purple-ink); outline-offset:3px; border-radius:6px; }

/* ============================================================
   오프닝 연출 — BIC 덱의 계단식 등장을 스크롤에 맞춰 옮겼다
   ============================================================ */
.up{ opacity:0; transform:translateY(14px); }
.revealed .up,
.up.revealed{ animation:rise 560ms var(--ease-rise) forwards; }
.revealed .up.d1, .up.revealed.d1{ animation-delay:50ms; }
.revealed .up.d2, .up.revealed.d2{ animation-delay:140ms; }
.revealed .up.d3, .up.revealed.d3{ animation-delay:230ms; }
.revealed .up.d4, .up.revealed.d4{ animation-delay:320ms; }
@keyframes rise{ to{ opacity:1; transform:none; } }
/* 스크립트가 죽어도 내용은 보여야 한다 */
.no-js .up{ opacity:1; transform:none; }

/* 페이지 상단을 가로지르는 진행 레일 */
.rail{
  position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background:rgba(92,124,250,.1); overflow:hidden;
}
.rail i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--cyan),var(--purple),var(--coral));
  border-radius:999px;
}

/* 키워드 형광펜 — 덱의 .hl 을 그대로 가져왔다 */
.hl{
  background:linear-gradient(transparent 62%,rgba(255,200,87,.5) 62%);
  padding:0 .06em;
}

/* 아케이드 소품 도형 */
.deco{ position:absolute; pointer-events:none; z-index:0; }
.deco-square{
  width:88px; height:88px; border-radius:24%;
  border:10px solid rgba(92,124,250,.09);
  transform:rotate(18deg);
}
.deco-pill{
  width:78px; height:20px; border-radius:999px;
  background:linear-gradient(90deg,rgba(255,123,123,.2),rgba(255,200,87,.2));
  transform:rotate(-12deg);
}
.deco-dot{
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle,rgba(69,215,232,.18),transparent 68%);
}

/* ============================================================
   헤더 — 배경이 은은하게 비치는 밝은 메뉴판
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  color:var(--ink);
  transition:box-shadow .3s ease;
  /* 메뉴 글자 선택 중 브라우저가 I-beam으로 바꾸지 않도록 UI만 선택 제외. */
  -webkit-user-select:none; user-select:none;
  caret-color:transparent;
}
/* 헤더에 입력 요소가 추가되어도 입력 커서와 텍스트 선택은 유지한다. */
.site-header :where(input, textarea, :read-write){
  -webkit-user-select:text; user-select:text;
  caret-color:auto;
}
.site-header.is-solid{ box-shadow:0 6px 22px rgba(24,31,54,.07); }
.header-inner{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand img{ width:44px; height:auto; flex:none; }
.brand span{ font-size:21px; font-weight:800; letter-spacing:-.045em; }

/* 로고 도어 스토리 — 파란 외곽 + 민트 문, 발 구르기 → 접촉 → 충격·별·연보라 물결. */
.site-header .brand{
  position:relative; isolation:isolate;
  /* 4.2초 장면의 32%에서 접촉, 34%에서 공통 최대 충격(84ms 뒤). */
  --brand-hit-time:1.344s;
  --brand-impact-duration:1.2s;
}
.site-header .brand.is-brand-ready > img{ opacity:0; }
.site-header .brand-scene{
  position:absolute; left:0; top:0; width:44px; height:100%;
  pointer-events:none;
}
.site-header .brand-scene svg{ display:block; width:100%; height:100%; overflow:visible; }
.site-header .brand-door-leaf{ transform-box:view-box; transform-origin:84px 108px; }
.site-header .brand-runner{ transform-box:view-box; transform-origin:80px 171px; }
.site-header .brand-runner-stride{ transform-box:view-box; transform-origin:80px 171px; }
.site-header .brand-runner-elastic{ transform-box:view-box; transform-origin:80px 216px; }
.site-header .brand-run-body{ transform-box:view-box; transform-origin:80px 144px; }
.site-header .brand-leg-back{ transform-box:view-box; transform-origin:65px 150px; }
.site-header .brand-leg-front{ transform-box:view-box; transform-origin:117px 149px; }
.site-header .brand-door-light{ opacity:0; }
.site-header .brand-word{ position:relative; white-space:nowrap; }
.site-header .brand-letters{
  position:absolute; left:0; top:0; opacity:0; white-space:nowrap;
  pointer-events:none; color:var(--ink);
}
.site-header .brand-letter{
  display:inline-block; font-style:normal;
  --ripple-rise:-6px; --ripple-fall:3px;
}
.site-header .brand-letter:nth-child(2){ --ripple-rise:-6.5px; --ripple-fall:3.2px; }
.site-header .brand-letter:nth-child(3){ --ripple-rise:-7px; --ripple-fall:3.5px; }
.site-header .brand-letter:nth-child(4){ --ripple-rise:-6.4px; --ripple-fall:3.2px; }
.site-header .brand-letter:nth-child(5){ --ripple-rise:-6px; --ripple-fall:3px; }
.site-header .brand-letter:nth-child(6){ --ripple-rise:-6.5px; --ripple-fall:3.2px; }
.site-header .brand-letter:nth-child(7){ --ripple-rise:-7px; --ripple-fall:3.5px; }
.site-header .brand-fx{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.site-header .brand-particle{
  position:absolute; left:24px; top:15px; width:11px; height:11px;
  background:var(--yellow); opacity:0;
  clip-path:polygon(50% 0,64% 35%,100% 50%,64% 65%,50% 100%,36% 65%,0 50%,36% 35%);
}
.site-header .brand-particle:nth-child(1){ --burst-x:-24px; --burst-y:-15px; }
.site-header .brand-particle:nth-child(2){ --burst-x:-10px; --burst-y:-23px; width:8px; height:8px; background:var(--cyan); }
.site-header .brand-particle:nth-child(3){ --burst-x:17px; --burst-y:-20px; width:15px; height:15px; }
.site-header .brand-particle:nth-child(4){ --burst-x:34px; --burst-y:16px; width:9px; height:9px; background:#b398ef; }
.site-header .brand-particle:nth-child(5){ --burst-x:54px; --burst-y:-12px; width:13px; height:13px; background:var(--cyan); }
.site-header .brand-particle:nth-child(6){ --burst-x:72px; --burst-y:15px; width:8px; height:8px; }
.site-header .brand-particle:nth-child(7){ --burst-x:-17px; --burst-y:22px; width:7px; height:7px; background:#b398ef; }
.site-header .brand-particle:nth-child(8){ --burst-x:4px; --burst-y:25px; width:10px; height:10px; }
.site-header .brand-particle:nth-child(9){ --burst-x:34px; --burst-y:-24px; width:6px; height:6px; background:#b398ef; }
.site-header .brand-particle:nth-child(10){ --burst-x:86px; --burst-y:-6px; width:9px; height:9px; background:#b398ef; }
.site-header .brand-particle:nth-child(11){ --burst-x:51px; --burst-y:27px; width:6px; height:6px; background:var(--cyan); }
.site-header .brand-particle:nth-child(12){ --burst-x:69px; --burst-y:-23px; width:6px; height:6px; }
.site-header .brand-fx::before, .site-header .brand-fx::after{
  content:''; position:absolute; pointer-events:none; opacity:0;
}
.site-header .brand-fx::before{
  left:11px; top:0; width:38px; height:38px;
  border:2px solid var(--yellow); border-radius:50%;
  box-shadow:0 0 0 3px rgba(179,152,239,.2);
}
.site-header .brand-fx::after{
  left:2px; top:5px; width:73px; height:31px;
  background:linear-gradient(90deg,var(--yellow),transparent) 0 45% / 18px 2px no-repeat,
    linear-gradient(90deg,var(--cyan),transparent) 100% 35% / 22px 2px no-repeat,
    linear-gradient(90deg,#b398ef,transparent) 80% 92% / 16px 2px no-repeat;
}
.site-header .brand.is-brand-playing .brand-runner-stride{ animation:brand-run-hops 4.2s ease-out both; }
.site-header .brand.is-brand-playing .brand-runner-elastic{ animation:brand-character-elastic 4.2s cubic-bezier(.45,0,.55,1) both; }
.site-header .brand.is-brand-playing .brand-run-body{ animation:brand-body-follow 4.2s ease-in-out both; }
.site-header .brand.is-brand-playing .brand-leg-back{ animation:brand-step-back 4.2s ease-in-out both; }
.site-header .brand.is-brand-playing .brand-leg-front{ animation:brand-step-front 4.2s ease-in-out both; }
.site-header .brand.is-brand-playing .brand-door-leaf{ animation:brand-door-open 4.2s cubic-bezier(.22,.65,.3,1) both; }
.site-header .brand.is-brand-playing .brand-word{ color:transparent; }
.site-header .brand.is-brand-playing .brand-letters{ opacity:1; }
/* 충격·별·빛은 같은 시계. 글자는 색만 동시에 반응하고 움직임은 웨이브로 이어진다. */
.site-header .brand.is-brand-playing .brand-scene,
.site-header .brand.is-brand-playing .brand-runner,
.site-header .brand.is-brand-playing .brand-door-light,
.site-header .brand.is-brand-playing .brand-particle,
.site-header .brand.is-brand-playing .brand-fx::before,
.site-header .brand.is-brand-playing .brand-fx::after{
  animation-duration:var(--brand-impact-duration);
  animation-delay:var(--brand-hit-time);
  animation-timing-function:cubic-bezier(.16,.8,.25,1);
  animation-fill-mode:both;
}
.site-header .brand.is-brand-playing .brand-scene{ animation-name:brand-contact-jolt; }
.site-header .brand.is-brand-playing .brand-runner{ animation-name:brand-hand-recoil; }
.site-header .brand.is-brand-playing .brand-letter{
  animation:brand-letter-wave var(--brand-impact-duration) cubic-bezier(.45,0,.55,1) calc(var(--brand-hit-time) + var(--letter-index) * 35ms) both,
    brand-letter-tint var(--brand-impact-duration) cubic-bezier(.16,.8,.25,1) var(--brand-hit-time) both;
}
.site-header .brand.is-brand-playing .brand-door-light{ animation-name:brand-door-glow; }
.site-header .brand.is-brand-playing .brand-particle{ animation-name:brand-door-stars; }
.site-header .brand.is-brand-playing .brand-fx::before{ animation-name:brand-contact-ring; }
.site-header .brand.is-brand-playing .brand-fx::after{ animation-name:brand-contact-rays; }
@keyframes brand-contact-jolt{
  0%,100%{ transform:translateY(0); }
  7%{ transform:translateY(-3.5px); }
  24%{ transform:translateY(1.5px); }
  44%{ transform:translateY(-.65px); }
  65%{ transform:translateY(.2px); }
  86%{ transform:translateY(0); }
}
/* 손과 다리를 한 덩어리로 밀었다 튕긴다. 이동량은 SVG 좌표(화면에서 약 0.8~1.6px). */
@keyframes brand-hand-recoil{
  0%,65%,100%{ transform:translateX(0); }
  3%{ transform:translateX(5px); }
  7%{ transform:translateX(-10px); }
  24%{ transform:translateX(5px); }
  44%{ transform:translateX(-2px); }
}
/* 한 번의 포물선으로 상승·낙하한다. 다음 도약 전 84ms 동안은 발이 지면에 머문다. */
@keyframes brand-run-hops{
  0%,9%,15%,17%,23%,25%,31%,100%{ transform:translateY(0); animation-timing-function:cubic-bezier(.333333,.666667,.666667,1); }
  12%,20%{ transform:translateY(-36px); animation-timing-function:cubic-bezier(.333333,0,.666667,.333333); }
  28%{ transform:translateY(-40px); animation-timing-function:cubic-bezier(.333333,0,.666667,.333333); }
}
/* 접지 중에만 눌리고, 이륙 초반 한 번 늘어난 뒤 정점부터 착지까지 원형을 유지한다.
   늘어남의 복원도 상승과 같은 이차 곡선을 써서 머리가 공중에서 다시 튀지 않게 한다. */
@keyframes brand-character-elastic{
  0%,5%,9%,12%,15%,17%,20%,23%,25%,28%,31%,50%,100%{ transform:scale(1,1); }
  8%{ transform:scale(1.12,.8929); }
  9.75%,17.75%,25.75%{ transform:scale(.93458,1.07); animation-timing-function:cubic-bezier(.333333,.666667,.666667,1); }
  16%,24%{ transform:scale(1.14,.8772); }
  32%{ transform:scale(1.08,.9259); animation-timing-function:cubic-bezier(.16,.8,.25,1); }
  34%{ transform:scale(.86,1.1628); }
  38%{ transform:scale(1.075,.9302); }
  44%{ transform:scale(.98,1.0204); }
}
/* 몸은 충격 뒤에도 진행 방향으로 잠깐 따라가고, 작아지는 반동으로 정착한다. */
@keyframes brand-body-follow{
  0%,32%,60%,100%{ transform:rotate(0); }
  36%{ transform:rotate(5deg); }
  40%{ transform:rotate(-3deg); }
  46%{ transform:rotate(1.2deg); }
  54%{ transform:rotate(-.35deg); }
}
@keyframes brand-step-back{
  0%,9%,15%,17%,23%,25%,31%,32%,54%,100%{ transform:rotate(0); }
  12%,28%{ transform:rotate(42deg); }
  20%{ transform:rotate(-36deg); }
  36%{ transform:rotate(-18deg); }
  41%{ transform:rotate(9deg); }
  47%{ transform:rotate(-3.5deg); }
}
@keyframes brand-step-front{
  0%,9%,15%,17%,23%,25%,31%,32%,57%,100%{ transform:rotate(0); }
  12%,28%{ transform:rotate(-40deg); }
  20%{ transform:rotate(36deg); }
  38%{ transform:rotate(-14deg); }
  43%{ transform:rotate(7deg); }
  49%{ transform:rotate(-3deg); }
}
@keyframes brand-door-open{
  0%,32%,100%{ transform:perspective(550px) rotateY(0); animation-timing-function:cubic-bezier(.16,.8,.25,1); }
  34%{ transform:perspective(550px) rotateY(-105deg); animation-timing-function:cubic-bezier(.16,.8,.25,1); }
  39%{ transform:perspective(550px) rotateY(0); }
  42%{ transform:perspective(550px) rotateY(-3deg); }
  46%{ transform:perspective(550px) rotateY(0); }
}
@keyframes brand-door-glow{
  0%,100%{ opacity:0; }
  7%{ opacity:1; }
  30%{ opacity:.35; }
  70%{ opacity:0; }
}
@keyframes brand-letter-wave{
  0%,100%{ transform:translateY(0); }
  12%{ transform:translateY(var(--ripple-rise)); }
  36%{ transform:translateY(var(--ripple-fall)); }
  60%{ transform:translateY(calc(var(--ripple-rise) * .25)); }
  82%{ transform:translateY(calc(var(--ripple-fall) * .15)); }
}
@keyframes brand-letter-tint{
  0%,100%{ color:var(--ink); text-shadow:none; }
  7%{ color:#b398ef; text-shadow:0 2px 8px rgba(179,152,239,.3); }
  24%{ color:#aa8de6; }
  44%{ color:#8a78bf; }
  65%,86%{ color:var(--ink); text-shadow:none; }
}
@keyframes brand-door-stars{
  0%{ opacity:0; transform:translate(0,0) scale(.15) rotate(0); }
  7%{ opacity:1; transform:translate(calc(var(--burst-x) * .32),calc(var(--burst-y) * .32)) scale(1.3) rotate(12deg); }
  38%{ opacity:.7; transform:translate(var(--burst-x),var(--burst-y)) scale(.9) rotate(35deg); }
  92%,100%{ opacity:0; transform:translate(var(--burst-x),var(--burst-y)) scale(.3) rotate(70deg); }
}
@keyframes brand-contact-ring{
  0%{ opacity:0; transform:scale(.25); }
  7%{ opacity:.8; transform:scale(.65); }
  55%,100%{ opacity:0; transform:scale(1.25); }
}
@keyframes brand-contact-rays{
  0%{ opacity:0; transform:scale(.7); }
  7%{ opacity:.9; transform:scale(1); }
  34%,100%{ opacity:0; transform:scale(1.1); }
}
@media (prefers-reduced-motion:reduce){
  .site-header .brand-scene, .site-header .brand-scene *, .site-header .brand-word,
  .site-header .brand-letter, .site-header .brand-particle,
  .site-header .brand-fx::before, .site-header .brand-fx::after{
    animation:none !important; transform:none !important;
  }
  .site-header .brand.is-brand-ready > img{ opacity:1; }
  .site-header .brand.is-brand-playing .brand-word{ color:var(--ink); }
  .site-header .brand-scene, .site-header .brand-letters, .site-header .brand-fx{ display:none; }
}

.nav{ display:flex; gap:34px; font-size:15px; font-weight:650; color:var(--ink-2); }
.nav a{ position:relative; padding:6px 0; }
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--purple)); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); }

.header-right{ display:flex; align-items:center; gap:10px; }
.lang-btn{
  display:flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:999px;
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:700; box-shadow:var(--shadow-s);
}
.lang-btn .dot{
  width:9px; height:9px; border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
}

/* 햄버거 — 데스크톱에서는 숨김 */
.menu-btn{
  display:none;
  width:42px; height:42px; padding:0;
  border:1px solid var(--line); border-radius:12px; background:#fff;
  box-shadow:var(--shadow-s);
}
.menu-btn span{
  display:block; width:17px; height:2px; margin:3.5px auto;
  background:var(--ink); border-radius:2px;
  transition:transform .22s ease, opacity .18s ease;
}
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* ============================================================
   히어로 — 화면 전체를 게임 이미지로 채운다
   ============================================================ */
.hero{
  position:relative;
  height:min(calc(100vh - var(--header-h)),780px);
  min-height:540px;
  overflow:hidden;
  background:var(--deep);
  isolation:isolate;
}
.slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .7s ease, visibility .7s;
}
.slide.is-active{ opacity:1; visibility:visible; }
.slide-art{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  transform:scale(1.05);
  transition:transform 9s linear;
}
.slide.is-active .slide-art{ transform:scale(1); }
/* 글자 뒤쪽만 최소한으로 어둡게. 게임 아트는 최대한 원본 밝기로 둔다 */
.slide::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgba(5,8,14,.72) 0%,rgba(5,8,14,.4) 26%,rgba(5,8,14,.06) 52%,transparent 72%),
    linear-gradient(0deg,rgba(5,8,14,.68) 0%,rgba(5,8,14,.16) 24%,transparent 44%);
}

.hero-inner{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center;
  pointer-events:none;
}
.hero-copy{
  width:min(620px,52%); color:#fff; pointer-events:auto;
  /* 어두운 막을 옅게 한 대신 글자 자체에 그림자를 준다 */
  text-shadow:0 1px 3px rgba(3,6,12,.6), 0 2px 10px rgba(3,6,12,.5);
  /* 뒤 이미지가 천천히 확대되는 동안 글자까지 매 프레임 다시 그리지 않도록 별도 레이어로 올린다 */
  transform:translateZ(0);
  backface-visibility:hidden;
  animation:copyIn .55s cubic-bezier(.22,.9,.3,1) both;
}
.hero-copy .btn,
.hero-copy .slide-genre{ text-shadow:none; }
@keyframes copyIn{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}

/* 포인트 색은 data-accent 속성으로 지정한다 — 관리자에서 고른 값이 그대로 들어온다 */
[data-accent="cyan"]  { --g:var(--cyan);   --g-ink:var(--cyan-ink);   --accent:var(--cyan);   --accent-ink:var(--cyan-ink); }
[data-accent="purple"]{ --g:var(--purple); --g-ink:var(--purple-ink); --accent:var(--purple); --accent-ink:var(--purple-ink); }
[data-accent="blue"]  { --g:var(--blue);   --g-ink:var(--blue-ink);   --accent:var(--blue);   --accent-ink:var(--blue-ink); }
[data-accent="coral"] { --g:var(--coral);  --g-ink:var(--coral-ink);  --accent:var(--coral);  --accent-ink:var(--coral-ink); }
[data-accent="lime"]  { --g:var(--lime);   --g-ink:var(--lime-ink);   --accent:var(--lime);   --accent-ink:var(--lime-ink); }
[data-accent="yellow"]{ --g:var(--yellow); --g-ink:var(--yellow-ink); --accent:var(--yellow); --accent-ink:var(--yellow-ink); }

/* 장르 배지는 아래 카드와 같은 게임별 포인트 색을 쓴다 */
.slide-genre{
  display:inline-block; margin-bottom:16px;
  padding:7px 16px; border-radius:999px;
  background:var(--g,var(--purple)); color:#10233d;
  font-size:13px; font-weight:900; letter-spacing:.01em;
  box-shadow:0 6px 16px rgba(6,12,24,.34);
}
.slide-title{ font-size:clamp(38px,4.6vw,68px); font-weight:800; line-height:1.06; }
.slide-title em{
  display:block; font-style:normal;
  font-size:.3em; font-weight:700; letter-spacing:.14em;
  color:rgba(255,255,255,.6); margin-top:14px;
}
.slide-desc{
  margin-top:20px; max-width:46ch;
  font-size:16.5px; line-height:1.76; color:rgba(255,255,255,.84);
}
.slide-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 24px; border-radius:13px;
  font-size:15px; font-weight:750; border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-solid{ background:#fff; color:#12141b; }
.btn-solid:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.3); }
.btn-glass{
  border-color:rgba(255,255,255,.45); background:rgba(8,11,18,.52);
  color:#fff;
}
.btn-glass:hover{ background:rgba(8,11,18,.72); transform:translateY(-2px); }

/* 하단 컨트롤 — 카운터·화살표·게임 탭 */
.hero-bottom{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding-bottom:26px;
}
.stage-nav{
  display:flex; align-items:center; justify-content:flex-end;
  gap:10px; margin-bottom:14px;
}
.counter{
  font-size:13px; font-weight:750; letter-spacing:.1em;
  color:rgba(255,255,255,.7); margin-right:4px;
  font-variant-numeric:tabular-nums;
}
.counter b{ color:#fff; }
.arrow{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(10,14,22,.58);
  color:#fff; font-size:18px; line-height:1;
  transition:background .18s ease, transform .18s ease;
}
.arrow:hover{ background:rgba(255,255,255,.22); transform:scale(1.07); }

.tabs{ display:grid; grid-template-columns:repeat(6,1fr); gap:9px; }
.tab{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; text-align:left; color:#fff;
  background:rgba(10,14,22,.62);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-m);
  transition:background .22s ease, transform .22s ease, border-color .22s ease;
}
.tab:hover{ background:rgba(10,14,22,.62); transform:translateY(-2px); }
.tab img{
  /* 정사각 앱 아이콘. 스토어에서 보던 모양 그대로 */
  width:42px; height:42px; flex:none;
  object-fit:cover; border-radius:11px;
  opacity:.72; transition:opacity .22s ease;
}
.tab span{ display:block; min-width:0; }
.tab b{
  display:block; font-size:13.5px; font-weight:750;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tab small{
  display:block; font-size:10.5px; font-weight:650;
  letter-spacing:.07em; color:rgba(255,255,255,.6);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tab.is-active{ background:rgba(255,255,255,.94); color:var(--ink); border-color:transparent; }
.tab.is-active img{ opacity:1; }
.tab.is-active small{ color:var(--muted); }
/* 진행 표시 — 이 페이지에서 유일한 자동 모션 */
.tab-progress{
  position:absolute; left:0; bottom:0; height:2.5px; width:100%;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--cyan),var(--purple),var(--coral));
  /* 진행 정도는 자바스크립트가 매 프레임 직접 그린다.
     CSS 애니메이션과 따로 돌면 둘이 어긋나 막대가 멈춘 것처럼 보였다 */
}

/* ============================================================
   브랜드 소개 띠 — 히어로 바로 아래
   ============================================================ */
.intro{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 88% 20%,rgba(69,215,232,.14),transparent 24%),
    radial-gradient(circle at 12% 92%,rgba(255,200,87,.14),transparent 22%),
    var(--surface);
  border-bottom:1px solid var(--line);
}
.intro-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:48px; align-items:center;
  padding:42px 0;
}
.intro-kicker{
  font-size:12.5px; font-weight:900; letter-spacing:.18em;
  color:var(--purple-ink); margin-bottom:10px;
}
.intro h2{ font-size:clamp(22px,2.1vw,30px); font-weight:900; margin-bottom:10px; }
.intro p{ color:var(--ink-2); font-size:15px; line-height:1.74; max-width:62ch; font-weight:500; }
.intro-facts{ display:flex; gap:12px; flex:none; }
/* 덱의 KPI 타일 — 상단 컬러 띠가 이 디자인의 서명 */
.intro-facts div{
  position:relative; overflow:hidden;
  min-width:118px; padding:20px 20px 16px;
  border-radius:var(--r-l); border:1px solid var(--line);
  background:var(--surface); box-shadow:var(--shadow-m);
}
.intro-facts div::before{
  content:''; position:absolute; left:0; right:0; top:0; height:7px;
  background:var(--cyan);
}
.intro-facts div:nth-child(2)::before{ background:var(--yellow); }
.intro-facts div:nth-child(3)::before{ background:var(--coral); }
.intro-facts b{ display:block; font-size:28px; font-weight:900; letter-spacing:-.04em; color:var(--cyan-ink); }
.intro-facts div:nth-child(2) b{ color:var(--yellow-ink); }
.intro-facts div:nth-child(3) b{ color:var(--coral-ink); }
.intro-facts small{ font-size:12.5px; color:var(--muted); font-weight:700; }

/* ============================================================
   본문 섹션 공통 — 제목(좌) + 콘텐츠(우) 2단
   섹션마다 --accent 를 물려주고, 하위 요소가 그 색을 쓴다
   ============================================================ */
.section{ padding:78px 0 0; }
#games  { --accent:var(--cyan);   --accent-ink:var(--cyan-ink); }
#news   { --accent:var(--coral);  --accent-ink:var(--coral-ink); }
#company{ --accent:var(--purple); --accent-ink:var(--purple-ink); }

.panel{
  position:relative; overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:52px 46px;
  box-shadow:var(--shadow-soft);
}
.split{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:44px; }
.head{ align-self:start; position:relative; z-index:1; }
.head-tag{
  display:inline-block; margin-bottom:14px; padding:6px 14px;
  border-radius:999px;
  background:color-mix(in srgb, var(--accent) 16%, #fff);
  color:var(--accent-ink);
  font-size:12px; font-weight:900; letter-spacing:.04em;
}
/* 제목 왼쪽의 컬러 바 — 덱의 .title::before */
.head h1,
.head h2{
  position:relative; padding-left:18px;
  font-size:clamp(28px,2.4vw,36px); font-weight:900; margin-bottom:14px;
}
.head h1::before,
.head h2::before{
  content:''; position:absolute; left:0; top:.14em; bottom:.1em;
  width:7px; border-radius:999px; background:var(--accent);
  box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 34%, transparent);
}
.head p{ color:var(--ink-2); font-size:14.5px; line-height:1.76; padding-left:18px; font-weight:500; }
.head .link{
  display:inline-flex; align-items:center; gap:6px; margin:22px 0 0 18px;
  padding:12px 19px; border-radius:12px;
  border:1px solid var(--line-2); font-size:13.5px; font-weight:800;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.head .link:hover{
  background:color-mix(in srgb, var(--accent) 12%, #fff);
  border-color:color-mix(in srgb, var(--accent) 44%, transparent);
  color:var(--accent-ink);
}

/* --- 게임 카드 — 6종에 각각 다른 포인트 색을 준다 --- */
.games-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.game-card{
  position:relative; display:block; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-l);
  background:var(--surface);
  --g:var(--purple); --g-ink:var(--purple-ink);
  transition:transform .22s ease, box-shadow .22s ease;
}
.game-card::before{
  content:''; position:absolute; left:0; right:0; top:0; height:7px;
  background:var(--g); z-index:2;
}
.game-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-soft); }
.card-art{ position:relative; aspect-ratio:16/8; overflow:hidden; background:#0d1017; }
.card-art img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.game-card:hover .card-art img{ transform:scale(1.05); }
.card-body{
  padding:18px 20px 20px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--g) 11%, #fff) 0%, #fff 42%);
}
.card-genre{ font-size:12px; font-weight:900; color:var(--g-ink); letter-spacing:.02em; }
.card-body h3{ font-size:19px; font-weight:900; margin:7px 0 9px; }
.card-body p{
  font-size:13.5px; line-height:1.7; color:var(--ink-2); font-weight:500;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-more{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-size:13px; font-weight:800; color:var(--ink-2);
}
.card-more::after{
  content:''; width:16px; height:2px; border-radius:2px; background:var(--g);
  transition:width .22s ease;
}
.game-card:hover .card-more{ color:var(--g-ink); }
.game-card:hover .card-more::after{ width:26px; }

/* --- 뉴스 (카드 안에서 바로 재생) --- */
.news-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.news-card{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-l);
  background:var(--surface);
  transition:transform .22s ease, box-shadow .22s ease;
}
.news-card::before{
  content:''; position:absolute; left:0; right:0; top:0; height:7px;
  background:var(--g,var(--coral)); z-index:2;
}
.news-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-soft); }
.news-card.is-playing{ transform:none; box-shadow:var(--shadow-m); }
.news-media{
  position:relative; display:block; width:100%; margin-top:7px;
  aspect-ratio:16/9; overflow:hidden; background:#0d1017;
  padding:0; border:0; cursor:pointer;
}
.news-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.news-card:hover .news-media img{ transform:scale(1.05); }
.news-media iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:62px; height:44px; border-radius:12px;
  background:rgba(15,18,26,.78); backdrop-filter:blur(6px);
  display:grid; place-items:center;
  transition:background .2s ease, transform .2s ease;
}
.news-media:hover .play{ background:#ff2f36; transform:translate(-50%,-50%) scale(1.08); }
.play svg{ width:17px; height:17px; fill:#fff; margin-left:2px; }
.news-body{ padding:18px 20px 20px; }
.news-meta{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12px; font-weight:700; color:var(--muted); margin-bottom:9px;
}
.news-meta a{ color:var(--coral-ink); font-weight:800; }
.news-meta a:hover{ text-decoration:underline; }
.news-body h3{ font-size:17.5px; font-weight:900; }

/* --- 회사 소개 — 덱의 커버 슬라이드처럼 밝게 --- */
.about{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-xl);
  padding:56px 46px; box-shadow:var(--shadow-soft);
  background:
    radial-gradient(circle at 82% 22%,rgba(138,120,245,.16),transparent 26%),
    radial-gradient(circle at 94% 76%,rgba(255,123,123,.14),transparent 22%),
    radial-gradient(circle at 10% 88%,rgba(69,215,232,.14),transparent 22%),
    linear-gradient(135deg,#fbfdff 0%,#f5f8ff 58%,#faf7ff 100%);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:46px; align-items:center;
}
.about .deco-square{ left:calc(50% + 10px); bottom:-22px; }
.about .deco-pill{ left:7%; bottom:44px; }
.about .deco-dot{ right:-30px; top:-30px; }
.about > div{ position:relative; z-index:1; }
.about h1,
.about h2{
  position:relative; padding-left:18px;
  font-size:clamp(28px,2.5vw,38px); font-weight:900; margin-bottom:18px;
}
.about h1::before,
.about h2::before{
  content:''; position:absolute; left:0; top:.14em; bottom:.1em;
  width:7px; border-radius:999px; background:var(--purple);
  box-shadow:0 4px 12px rgba(138,120,245,.34);
}
.about p{
  color:var(--ink-2); font-size:15px; line-height:1.82; max-width:56ch;
  padding-left:18px; font-weight:500;
}
.facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.fact{
  position:relative; overflow:hidden;
  padding:22px 20px 18px; border-radius:var(--r-l);
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-m);
}
.fact::before{
  content:''; position:absolute; left:0; right:0; top:0; height:7px;
  background:var(--purple);
}
.fact:nth-child(2)::before{ background:var(--cyan); }
.fact:nth-child(3)::before{ background:var(--yellow); }
.fact:nth-child(4)::before{ background:var(--coral); }
.fact small{ display:block; font-size:11.5px; font-weight:900; letter-spacing:.1em; color:var(--muted); }
.fact b{ display:block; margin-top:7px; font-size:16.5px; font-weight:900; letter-spacing:-.02em; color:var(--ink); }

/* --- 푸터 — 페이지를 닫는 어두운 가로 띠 --- */
.footer{
  margin-top:74px;
  background:var(--deep);
  color:#fff;
}
.footer-inner{ padding:44px 0 40px; }
.footer-top{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:22px 30px;
  padding-bottom:26px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand{ display:flex; align-items:center; gap:10px; }
.footer-brand img{ width:36px; height:auto; }
.footer-brand span{ font-size:18px; font-weight:800; letter-spacing:-.04em; }
.footer-links{
  display:flex; flex-wrap:wrap; gap:26px;
  font-size:13.5px; font-weight:650; color:rgba(255,255,255,.8);
}
.footer-links a{ transition:color .18s ease; }
.footer-links a:hover{ color:var(--cyan); }

.footer-bottom{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:16px 40px; padding-top:24px;
}
.footer-bottom p{ font-size:12.5px; line-height:1.9; color:rgba(255,255,255,.46); }
.footer-copy{ font-size:12px; color:rgba(255,255,255,.34); white-space:nowrap; }

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:1160px){
  .hero{ height:min(80vh,760px); }
  .hero-copy{ width:min(560px,62%); }
  .tabs{ grid-template-columns:repeat(3,1fr); }
  .intro-inner{ grid-template-columns:1fr; gap:26px; }
  .intro-facts{ justify-content:flex-start; flex-wrap:wrap; }
  .intro-facts div{ flex:1 1 140px; }
  .split{ grid-template-columns:1fr; gap:30px; }
  .about{ grid-template-columns:1fr; }
}

@media (max-width:820px){
  :root{ --container:min(1320px,calc(100% - 28px)); --header-h:64px; }

  .menu-btn{ display:block; }
  .lang-btn{ padding:8px 12px; font-size:12px; }

  /* 접힌 상태의 모바일 메뉴 */
  .nav{
    position:absolute; left:0; right:0; top:var(--header-h);
    flex-direction:column; gap:0;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-m);
    padding:6px 20px 14px;
    color:var(--ink);
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:14px 0; border-bottom:1px solid var(--line); font-size:16px; opacity:1; }
  .nav a:last-child{ border-bottom:0; }
  .nav a::after{ display:none; }

  /* 세로 화면에서는 게임 아트가 더 잘 보이도록 인물 중심으로 자른다 */
  .hero{ height:auto; min-height:0; }
  .slide{ position:relative; }
  .slide:not(.is-active){ display:none; }
  .slide-art{ height:min(74vh,600px); min-height:430px; object-position:center 38%; }
  .hero-inner{ align-items:flex-end; padding-top:0; padding-bottom:148px; }
  .hero-copy{ width:100%; }
  .slide-title{ font-size:clamp(30px,7.4vw,40px); }
  .slide-genre{ margin-bottom:12px; padding:6px 12px; font-size:12px; }
  .slide-desc{ margin-top:14px; font-size:14.5px; max-width:none; }
  .slide-actions{ margin-top:20px; }
  .btn{ padding:13px 18px; font-size:14px; }

  .hero-bottom{ padding-bottom:16px; }
  .stage-nav{ margin-bottom:10px; }
  .arrow{ width:36px; height:36px; font-size:16px; }

  /* 탭은 한 줄짜리 가로 스크롤로 */
  .tabs{
    display:flex; gap:8px;
    overflow-x:auto; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* 컨테이너 여백 바깥까지 흘러나가게 해서 잘린 느낌을 준다 */
    margin-inline:-14px; padding-inline:14px;
  }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{ flex:0 0 auto; scroll-snap-align:center; padding:8px 14px 8px 9px; }
  .tab img{ width:42px; height:31px; }
  .tab small{ display:none; }

  .intro-inner{ padding:30px 0; }
  .intro-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%; }
  .intro-facts div{ min-width:0; padding:16px 14px 13px; border-radius:var(--r-m); }
  .intro-facts div::before{ height:6px; }
  .intro-facts b{ font-size:21px; }
  .intro-facts small{ font-size:11.5px; }

  .panel,.about{ padding:36px 24px; border-radius:var(--r-l); }
  .section{ padding:48px 0 0; }
  .games-grid,.news-grid{ grid-template-columns:1fr; }

  .footer{ margin-top:52px; }
  .footer-inner{ padding:34px 0 32px; }
  .footer-top{ align-items:flex-start; flex-direction:column; gap:18px; padding-bottom:20px; }
  .footer-links{ gap:14px 20px; font-size:13px; }
  .footer-bottom{ align-items:flex-start; gap:12px; padding-top:20px; }
  .footer-copy{ white-space:normal; }
}

@media (max-width:560px){
  .slide-art{ height:min(78vh,620px); min-height:460px; }
  .slide-desc{ display:none; }
  .hero-inner{ padding-bottom:132px; }
  .slide-actions{ flex-wrap:nowrap; }
  .btn{ padding:12px 15px; font-size:13.5px; }
  /* 좁은 화면에서 두 칸이면 회사명·전화번호가 잘린다 */
  .facts{ grid-template-columns:1fr; }
  .fact{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:15px 18px; }
  .fact b{ margin-top:0; font-size:15px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}
/* ============================================================
   하위 페이지 (게임 목록 · 게임 상세 · 404)
   ============================================================ */
.subpage{ padding-top:0; }
.page-head{ max-width:60ch; margin-bottom:34px; }
.page-head h1{
  position:relative; padding-left:18px;
  font-size:clamp(30px,3vw,42px); font-weight:900; margin-bottom:14px;
}
.page-head h1::before{
  content:''; position:absolute; left:0; top:.14em; bottom:.1em;
  width:7px; border-radius:999px; background:var(--accent,var(--purple));
  box-shadow:0 4px 12px color-mix(in srgb, var(--accent,var(--purple)) 34%, transparent);
}
.page-head p{ color:var(--ink-2); font-size:15.5px; line-height:1.76; padding-left:18px; font-weight:500; }
.games-grid-wide{ grid-template-columns:repeat(3,1fr); }

/* --- 게임 상세 히어로 --- */
.detail-hero{
  position:relative; overflow:hidden;
  height:min(62vh,560px); min-height:400px;
  background:var(--deep); isolation:isolate;
}
.detail-art{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
}
.detail-hero::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgba(5,8,14,.76) 0%,rgba(5,8,14,.44) 28%,rgba(5,8,14,.06) 56%,transparent 76%),
    linear-gradient(0deg,rgba(5,8,14,.6) 0%,transparent 42%);
}
.detail-inner{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:center;
  color:#fff;
  text-shadow:0 1px 3px rgba(3,6,12,.6), 0 2px 10px rgba(3,6,12,.5);
}
.detail-inner > *{ align-self:flex-start; }
.detail-inner .slide-desc{ max-width:46ch; }
.detail-inner .slide-title{ text-align:left; }
.detail-inner .slide-actions{ align-self:flex-start; }
.detail-inner .btn{ text-shadow:none; }
.detail-back{
  align-self:flex-start; margin-bottom:20px;
  padding:8px 15px; border-radius:999px;
  background:rgba(8,11,18,.5); border:1px solid rgba(255,255,255,.34);
  font-size:13px; font-weight:800; text-shadow:none;
}
.detail-back:hover{ background:rgba(8,11,18,.74); }

/* --- 상세 본문 --- */
.detail-body{ display:flex; flex-direction:column; gap:26px; }
.game-page .detail-inner .slide-desc{ max-width:44ch; }
.feature-list{ display:flex; flex-direction:column; gap:12px; }
.feature-list li{
  position:relative; padding-left:26px;
  font-size:16px; line-height:1.6; font-weight:600; color:var(--ink);
}
.feature-list li::before{
  content:''; position:absolute; left:0; top:.44em;
  width:11px; height:11px; border-radius:50%;
  background:var(--accent,var(--purple));
  box-shadow:0 0 0 5px color-mix(in srgb, var(--accent,var(--purple)) 14%, transparent);
}
.detail-video{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--shadow-m);
}
.detail-video .news-media{ margin-top:0; }

/* --- 이전/다음 --- */
.detail-nav{
  display:flex; justify-content:space-between; gap:14px;
  margin-top:44px;
}
.detail-step{
  display:flex; align-items:center; gap:10px;
  padding:16px 22px; border-radius:var(--r-l);
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-m);
  font-weight:800; font-size:15px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.detail-step:hover{ transform:translateY(-3px); box-shadow:var(--shadow-soft); }
.detail-step small{ font-size:20px; color:var(--accent,var(--purple)); line-height:1; }

/* --- 404 --- */
.notfound{ position:relative; overflow:hidden; text-align:center; padding:74px 40px; }
.notfound .deco-square{ left:8%; bottom:-20px; }
.notfound h1{ font-size:clamp(28px,3vw,40px); font-weight:900; margin-bottom:14px; }
.notfound p{ color:var(--ink-2); font-size:15.5px; margin-bottom:26px; font-weight:500; }
.notfound .link{
  display:inline-flex; padding:13px 22px; border-radius:12px;
  border:1px solid var(--line-2); font-size:14px; font-weight:800;
}
.notfound .link:hover{ background:#f6f9ff; }

@media (max-width:1160px){
  .games-grid-wide{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  .games-grid-wide{ grid-template-columns:1fr; }
  .detail-hero{ height:auto; min-height:0; }
  .detail-art{ height:52vh; min-height:340px; }
  .detail-inner{ justify-content:flex-end; padding-bottom:30px; }
  .detail-nav{ flex-direction:column; }
  .detail-step{ justify-content:center; }
}

/* ============================================================
   문의 · 회사 소개 · 법적 고지
   ============================================================ */

/* --- 문의 폼 --- */
/* 누르는 곳이 아니라 정보를 적어 두는 칸이다 */
.contact-direct{ display:flex; flex-direction:column; gap:10px; margin:24px 0 0; }
.contact-direct > div{
  padding:14px 18px; border-radius:var(--r-m);
  background:#f7faff; border:1px solid var(--line);
}
.contact-direct dt{
  font-size:11px; font-weight:900; letter-spacing:.1em;
  color:var(--muted); margin-bottom:5px;
}
.contact-direct dd{
  margin:0; font-size:15px; font-weight:900; color:var(--ink);
  letter-spacing:-.01em;
}

.contact-form .grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.contact-form .field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.contact-form label{ font-size:13px; font-weight:800; color:var(--ink-2); }
.contact-form label i{ color:var(--coral-ink); font-style:normal; }
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%; padding:13px 15px;
  border:1px solid var(--line-2); border-radius:12px;
  background:#fff; font:inherit; font-size:15px; color:var(--ink);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none; border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(138,120,245,.16);
}
.contact-form textarea{ resize:vertical; min-height:150px; line-height:1.7; }
.contact-form .agree{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13.5px; font-weight:600; color:var(--ink-2); margin-bottom:20px;
}
.contact-form .agree input{ width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--purple); }
.contact-form .agree a{ color:var(--purple-ink); font-weight:800; text-decoration:underline; }
.contact-form .btn-primary{
  background:linear-gradient(120deg,var(--purple),var(--blue));
  color:#fff; box-shadow:0 10px 22px rgba(108,92,231,.24);
  padding:15px 30px; font-size:15px;
}
.contact-form .btn-primary:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.form-msg{ margin-top:14px; font-size:13.5px; font-weight:800; min-height:1.4em; }
.form-msg.ok{ color:var(--lime-ink); }
.form-msg.err{ color:var(--coral-ink); }

/* --- 연혁 --- */
.timeline{ position:relative; padding-left:26px; }
.timeline::before{
  content:''; position:absolute; left:5px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg,var(--cyan),var(--purple),var(--coral));
  border-radius:2px;
}
.timeline li{
  position:relative; display:flex; gap:14px; align-items:baseline;
  padding:7px 0;
}
/* 해가 바뀌는 줄에만 큰 점을 찍는다 */
.timeline li::before{
  content:''; position:absolute; left:-23px; top:15px;
  width:7px; height:7px; border-radius:50%;
  background:var(--line-2);
}
.timeline li.is-year{ padding-top:18px; }
.timeline li.is-year:first-child{ padding-top:7px; }
.timeline li.is-year::before{
  left:-26px; top:calc(1em + 4px);
  width:12px; height:12px;
  background:#fff; border:3px solid var(--purple);
}
.timeline b{
  flex:none; width:48px; font-size:16px; font-weight:900;
  color:var(--purple-ink); letter-spacing:-.03em;
}
.timeline em{
  flex:none; width:38px; font-style:normal;
  font-size:12.5px; font-weight:800; color:var(--muted);
  text-align:right;
}
.timeline span{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.55; }

.company-photo,.company-map{
  width:100%; border-radius:var(--r-l);
  border:1px solid var(--line); box-shadow:var(--shadow-m);
}
.company-map{ transition:transform .22s ease; }
.company-map:hover{ transform:translateY(-3px); }

/* --- 법적 고지 --- */
.legal .page-head{ margin-bottom:28px; }
.legal-body{ max-width:78ch; }
.legal-body h2{
  font-size:17px; font-weight:900; margin:32px 0 10px;
  padding-left:14px; position:relative;
}
.legal-body h2::before{
  content:''; position:absolute; left:0; top:.2em; bottom:.15em;
  width:5px; border-radius:99px; background:var(--purple);
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{ font-size:14.5px; line-height:1.85; color:var(--ink-2); margin-bottom:10px; }
.legal-body ul{ margin:8px 0 12px; }
.legal-body li{
  position:relative; padding-left:18px; margin-bottom:6px;
  font-size:14.5px; line-height:1.8; color:var(--ink-2);
}
.legal-body li::before{
  content:''; position:absolute; left:2px; top:.72em;
  width:6px; height:6px; border-radius:50%; background:var(--cyan);
}
.legal-contact{
  margin-top:36px; padding:20px 22px; border-radius:var(--r-l);
  background:#f6f9ff; border:1px solid var(--line);
}
.legal-contact b{ display:block; font-size:14px; font-weight:900; margin-bottom:6px; }
.legal-contact p{ font-size:13.5px; color:var(--ink-2); font-weight:600; }

.news-grid-wide{ grid-template-columns:repeat(3,1fr); }

/* --- 푸터 법적 고지 줄 --- */
.footer-legal{
  display:flex; flex-wrap:wrap; gap:22px;
  padding-top:20px; font-size:12.5px; font-weight:700;
  color:rgba(255,255,255,.62);
}
.footer-legal a:hover{ color:#fff; }
.footer-legal b{ color:inherit; font-weight:inherit; }

@media (max-width:1160px){
  .news-grid-wide{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  .contact-form .grid-2{ grid-template-columns:1fr; }
  .news-grid-wide{ grid-template-columns:1fr; }
  .timeline{ padding-left:22px; }
  .timeline li{ gap:9px; }
  .timeline b{ width:40px; font-size:14.5px; }
  .timeline em{ width:32px; font-size:11.5px; }
  .timeline span{ font-size:14px; }
  .footer-legal{ gap:14px; }
}

/* --- 오시는 길 지도 --- */
.map-wrap{
  position:relative; overflow:hidden;
  border-radius:var(--r-l); border:1px solid var(--line);
  box-shadow:var(--shadow-m); background:#eef3fb;
}
.map-canvas{
  width:100%; aspect-ratio:2/1; min-height:300px;
}
.map-canvas iframe{ display:block; width:100%; height:100%; border:0; }
/* Leaflet 기본 글꼴이 페이지와 어긋나지 않도록 */
.map-canvas .leaflet-container{
  font-family:inherit; background:#eef3fb;
}
.map-canvas .leaflet-popup-content{ font-weight:800; font-size:13.5px; }
.map-canvas .leaflet-control-attribution{ font-size:10.5px; }
.map-hint{
  margin-top:10px; font-size:12px; color:var(--muted); font-weight:600;
}
@media (max-width:820px){
  .map-canvas{ aspect-ratio:4/3; min-height:260px; }
}

/* 네이버 회사 위치 — 외부 이미지 요청 없는 빨간 핀 */
.naver-company-pin{ width:40px; height:50px; }
.naver-company-pin svg{
  display:block; overflow:visible;
  filter:drop-shadow(0 2px 3px rgba(12,24,48,.25));
}

/* 대체 지도 마커 — 외부 이미지 없이 CSS 로만 그린다 */
.map-pin{ position:relative; }
.map-pin-dot{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:14px; height:14px; border-radius:50%;
  background:var(--purple,#8a78f5); border:3px solid #fff;
  box-shadow:0 2px 8px rgba(12,24,48,.4);
}
.map-pin-ring{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:26px; height:26px; border-radius:50%;
  background:rgba(138,120,245,.28);
}

/* --- 교통편 목록 --- */
.transit{ display:flex; flex-direction:column; gap:10px; margin:20px 0 4px; padding-left:18px; }
.transit li{
  display:flex; align-items:flex-start; gap:11px;
  padding:12px 14px; border-radius:var(--r-m);
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-s);
}
.transit .t-icon{
  flex:none; width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--t) 16%, #fff);
}
.transit .t-icon svg{ width:17px; height:17px; fill:var(--t); }
.transit b{ display:block; font-size:14px; font-weight:800; }
.transit small{ display:block; font-size:12.5px; color:var(--muted); font-weight:600; margin-top:2px; }
.transit .t-line{
  display:inline-block; margin-right:5px; padding:2px 7px;
  border-radius:999px; background:var(--t); color:#fff;
  font-size:11px; font-weight:900; font-style:normal; vertical-align:1px;
}

/* --- 지도 위 역 마커 --- */
.map-stop{ position:relative; white-space:nowrap; }
.map-stop-dot{
  position:absolute; left:0; top:2px;
  width:18px; height:18px; border-radius:50%;
  border:3px solid #fff; box-shadow:0 2px 6px rgba(12,24,48,.35);
}
.map-stop-label{
  position:absolute; left:24px; top:0;
  padding:2px 8px; border-radius:7px;
  background:rgba(255,255,255,.94); border:1px solid rgba(65,102,150,.2);
  font-size:11.5px; font-weight:800; color:var(--ink);
  box-shadow:0 2px 6px rgba(12,24,48,.14);
}

/* 구글 지도의 장소 카드를 화면 밖으로 밀어낸다 */
.map-canvas.no-card{ position:relative; overflow:hidden; }
.map-canvas.no-card iframe{
  position:absolute; left:0; right:0;
  top:-132px; height:calc(100% + 132px);
}
@media (max-width:820px){
  .map-canvas.no-card iframe{ top:-118px; height:calc(100% + 118px); }
}


/* ============================================================
   게임 상세 — 스토어 형식
   ============================================================ */

/* --- 게임 사이를 넘기는 띠 --- */
.game-switch{
  position:sticky; top:var(--header-h); z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.game-switch-in{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  height:62px;
}
.gs-side{
  display:flex; align-items:center; gap:10px; flex:none;
  padding:7px 14px; border-radius:12px;
  transition:background .18s ease;
}
.gs-side:hover{ background:#f1f5fd; }
.gs-side i{
  display:block; font-style:normal; font-size:10.5px; font-weight:900;
  letter-spacing:.1em; color:var(--muted); margin-bottom:1px;
}
.gs-side b{ display:block; font-size:13.5px; font-weight:800; }
.gs-side.is-next{ text-align:right; }
.gs-arrow{ font-size:22px; line-height:1; color:var(--accent,var(--purple)); }

.gs-dots{ display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding:4px; }
.gs-dots::-webkit-scrollbar{ display:none; }
.gs-dot{
  flex:none; width:11px; height:11px; border-radius:50%;
  background:var(--line-2); transition:all .2s ease;
}
.gs-dot span{ display:none; }
.gs-dot:hover{ transform:scale(1.3); background:var(--g,var(--purple)); }
.gs-dot.is-on{
  width:34px; border-radius:999px; background:var(--g,var(--purple));
}

/* --- 상단 --- */
.store-top{ padding-top:34px; }
.store-grid{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:30px; align-items:start;
}
.stage-media{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl); border:1px solid var(--line);
  box-shadow:var(--shadow-soft); background:#0a0e16;
}
.stage-media > img,
.stage-media .news-media{
  width:100%; display:block; margin-top:0;
  /* 영상이 있든 없든 같은 비율로 보이게 한다 */
  aspect-ratio:16/9; height:auto;
}
.stage-media > img{ object-fit:cover; object-position:center 42%; }
.stage-media .play{ width:84px; height:58px; border-radius:16px; }
.stage-media .play svg{ width:23px; height:23px; }
.stage-tag{
  position:absolute; left:16px; top:16px; z-index:3;
  padding:6px 13px; border-radius:999px;
  background:rgba(10,14,22,.62); color:#fff;
  font-size:11.5px; font-weight:900; letter-spacing:.06em;
}

/* --- 오른쪽 정보 --- */
.store-side{
  padding:26px 26px 24px; border-radius:var(--r-xl);
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  position:relative; overflow:hidden;
}
.store-side::before{
  content:''; position:absolute; left:0; right:0; top:0; height:6px;
  background:var(--accent,var(--purple));
}
.store-id{ display:flex; gap:15px; align-items:center; margin-bottom:16px; }
.store-icon{
  width:76px; height:56px; flex:none; object-fit:cover;
  border-radius:15px; border:1px solid var(--line);
  box-shadow:0 6px 16px rgba(54,82,122,.18);
}
.store-id h1{
  font-size:clamp(22px,2.1vw,28px); font-weight:900;
  letter-spacing:-.04em; line-height:1.2;
}
.store-en{
  font-size:11.5px; font-weight:800; letter-spacing:.12em;
  color:var(--muted); margin-top:4px;
}
.store-genre{
  display:inline-block; margin-top:8px; padding:4px 11px;
  border-radius:999px; font-size:11.5px; font-weight:800;
  background:color-mix(in srgb, var(--accent,var(--purple)) 16%, #fff);
  color:var(--accent-ink,var(--purple-ink));
}
.store-lead{
  font-size:14.5px; line-height:1.75; color:var(--ink-2);
  font-weight:500; margin-bottom:20px;
}

/* --- 스토어 바로가기 버튼 --- */
.store-buttons{ display:flex; flex-direction:column; gap:9px; }
.sbtn{
  display:flex; align-items:center; gap:12px;
  padding:12px 18px; border-radius:14px;
  background:var(--ink); color:#fff;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.sbtn:hover{ transform:translateY(-2px); box-shadow:0 14px 26px rgba(24,49,83,.3); }
.sbtn small{ display:block; font-size:10.5px; font-weight:700; opacity:.68; letter-spacing:.04em; }
.sbtn b{ display:block; font-size:16px; font-weight:800; letter-spacing:-.02em; }
.sbtn-mark{
  width:26px; height:26px; flex:none;
  background-repeat:no-repeat; background-size:contain; background-position:center;
}
/* 구글 플레이 삼각 재생 표식 */
.is-play .sbtn-mark{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300D4FF' d='M3.6 1.8 14 12 3.6 22.2A2 2 0 0 1 3 20.8V3.2c0-.5.2-1 .6-1.4z'/%3E%3Cpath fill='%23FFCE00' d='M18.2 8.2 21 9.9c1.3.8 1.3 2.6 0 3.4l-2.8 1.7L14 12z'/%3E%3Cpath fill='%23FF3A44' d='M3.6 1.8A2 2 0 0 1 5 1.6l13.2 6.6L14 12z'/%3E%3Cpath fill='%2300C853' d='M14 12l4.2 3.8L5 22.4a2 2 0 0 1-1.4-.2z'/%3E%3C/svg%3E");
}
/* 애플 로고 */
.is-ios .sbtn-mark{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M17.05 12.86c-.02-2.3 1.88-3.4 1.96-3.46-1.07-1.56-2.73-1.78-3.32-1.8-1.42-.14-2.76.83-3.48.83-.72 0-1.82-.81-2.99-.79-1.54.02-2.96.89-3.75 2.27-1.6 2.77-.41 6.87 1.15 9.12.76 1.1 1.67 2.34 2.86 2.29 1.15-.05 1.58-.74 2.97-.74 1.39 0 1.78.74 2.99.72 1.23-.02 2.01-1.12 2.76-2.23.87-1.28 1.23-2.52 1.25-2.58-.03-.01-2.39-.92-2.41-3.63zM14.9 5.4c.63-.77 1.06-1.83.94-2.9-.91.04-2.02.61-2.67 1.37-.58.68-1.09 1.77-.96 2.81 1.02.08 2.06-.52 2.69-1.28z'/%3E%3C/svg%3E");
}
.is-yt .sbtn-mark{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF0000' d='M23 12s0-3.8-.5-5.6a2.9 2.9 0 0 0-2-2C18.7 4 12 4 12 4s-6.7 0-8.5.4a2.9 2.9 0 0 0-2 2C1 8.2 1 12 1 12s0 3.8.5 5.6a2.9 2.9 0 0 0 2 2C5.3 20 12 20 12 20s6.7 0 8.5-.4a2.9 2.9 0 0 0 2-2C23 15.8 23 12 23 12z'/%3E%3Cpath fill='%23fff' d='M9.8 15.5V8.5L15.8 12z'/%3E%3C/svg%3E");
}
.store-soon{
  display:block; padding:14px 18px; border-radius:14px; text-align:center;
  background:#f2f6fd; border:1px dashed var(--line-2);
  font-size:12.5px; font-weight:700; color:var(--muted);
}

.store-facts{
  display:flex; flex-wrap:wrap; gap:12px 26px; margin:20px 0 0;
  padding-top:18px; border-top:1px solid var(--line);
}
.store-facts dt{
  font-size:10.5px; font-weight:900; letter-spacing:.1em;
  color:var(--muted); margin-bottom:3px;
}
.store-facts dd{ margin:0; font-size:13.5px; font-weight:800; }

/* --- 스크린샷 가로 스크롤 --- */
.shots-section{ padding-top:56px; }
.shots-head{ margin-bottom:20px; }
.shots-head h2{
  position:relative; padding-left:18px; margin-top:12px;
  font-size:clamp(24px,2.3vw,32px); font-weight:900;
}
.shots-head h2::before{
  content:''; position:absolute; left:0; top:.16em; bottom:.12em;
  width:7px; border-radius:999px; background:var(--accent,var(--purple));
}
.shots-head p{ margin-top:8px; padding-left:18px; font-size:13.5px; color:var(--muted); font-weight:600; }

.shots-rail{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  padding:6px 0 18px;
}
.shots-track{
  display:flex; gap:16px;
  /* 스크롤 영역 안에서는 max-content 와 transform 을 같이 쓰면
     화면이 제대로 그려지지 않는 경우가 있어 쓰지 않는다 */
  padding-inline:max(22px, calc((100vw - 1320px) / 2 + 22px));
  min-width:min-content;
}
.shots-track .shot{
  flex:none; margin:0; width:230px; scroll-snap-align:center;
}
.shots-track .shot img{
  /* 세로 사진이라 비율을 고정하지 않으면 원본 높이 그대로 늘어난다 */
  width:100%; height:auto; aspect-ratio:9/16; object-fit:cover;
  display:block; border-radius:20px;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  background:#0d1017; cursor:zoom-in;
  transition:transform .26s ease, box-shadow .26s ease;
}
.shots-track .shot img:hover{
  transform:translateY(-6px); box-shadow:0 26px 54px rgba(54,82,122,.24);
}
.shots-rail::-webkit-scrollbar{ height:9px; }
.shots-rail::-webkit-scrollbar-thumb{
  background:var(--line-2); border-radius:99px;
}
.shots-rail::-webkit-scrollbar-track{ background:transparent; }

/* --- 긴 소개글 --- */
/* 여섯 게임의 특징 목록은 공통 제목 열보다 넓게 배치한다. */
@media (min-width:1161px){
  .store-page .panel.split{
    grid-template-columns:minmax(0,420px) minmax(0,1fr);
  }
}
.about-text{ max-width:62ch; }
.about-text p{
  font-size:15.5px; line-height:1.92; color:var(--ink-2);
  font-weight:500; margin-bottom:20px;
}
.about-text p:last-child{ margin-bottom:0; }
.about-text .lead-para{
  font-size:18px; line-height:1.75; font-weight:700; color:var(--ink);
  padding-left:18px; border-left:5px solid var(--accent,var(--purple));
}

/* --- 소개 블록 --- */
.blocks-section{ padding-top:22px; }
.game-block{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:44px; align-items:center; margin-bottom:26px;
}
.game-block.is-flip > figure{ order:2; }
.game-block figure{
  position:relative; margin:0; overflow:hidden; width:100%; aspect-ratio:16/9;
  border-radius:var(--r-xl); border:1px solid var(--line);
  box-shadow:var(--shadow-soft); background:#f3f7ff;
}
.game-block figure img{
  /* Fit every uploaded size inside the chosen frame without stretching/cropping. */
  position:absolute; inset:0; width:100%; height:100%; display:block;
  object-fit:contain;
}
.blocks-section[data-block-orientation="portrait"] .game-block{
  width:100%; max-width:920px; margin:0 auto 28px;
  grid-template-columns:300px minmax(0,1fr); gap:36px;
}
.blocks-section[data-block-orientation="portrait"] .game-block.is-flip{
  grid-template-columns:minmax(0,1fr) 300px;
}
.blocks-section[data-block-orientation="portrait"] .game-block figure{
  aspect-ratio:9/16; max-width:300px; justify-self:center;
}
.blocks-section[data-block-orientation="portrait"] .game-block-text{
  width:100%; min-width:0;
}
.blocks-section[data-block-orientation="portrait"] .game-block-text p{
  max-width:none; overflow-wrap:anywhere;
}
.blocks-section[data-block-orientation="portrait"] .game-block:last-child{ margin-bottom:0; }
@media (min-width:821px) and (max-width:1024px){
  .blocks-section[data-block-orientation="portrait"] .game-block{
    grid-template-columns:260px minmax(0,1fr); gap:28px;
  }
  .blocks-section[data-block-orientation="portrait"] .game-block.is-flip{
    grid-template-columns:minmax(0,1fr) 260px;
  }
}
.blocks-section{ scroll-margin-top:150px; }
.game-block-no{
  display:inline-block; font-style:normal;
  font-size:15px; font-weight:900; line-height:1;
  letter-spacing:.06em; margin-bottom:14px;
  padding:7px 13px; border-radius:999px;
  color:#fff; background:var(--accent,var(--purple));
  box-shadow:0 6px 14px color-mix(in srgb, var(--accent,var(--purple)) 34%, transparent);
}
.game-block-text h3{
  font-size:clamp(21px,2vw,27px); font-weight:900;
  margin-bottom:12px; letter-spacing:-.035em;
}
.game-block-text p{
  font-size:16px; line-height:1.84; color:var(--ink-2); font-weight:500; max-width:44ch;
}

/* --- 마무리 --- */
.game-cta{
  position:relative; overflow:hidden;
  /* 문구는 왼쪽, 내려받기 버튼은 오른쪽 */
  display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
  padding:30px 34px; border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent,var(--purple)) 22%, transparent), transparent 30%),
    radial-gradient(circle at 12% 92%, rgba(255,200,87,.16), transparent 26%),
    linear-gradient(135deg,#fbfdff,#f4f8ff);
  box-shadow:var(--shadow-soft);
}
.game-cta > div,
.game-cta > .store-buttons{ position:relative; z-index:1; }
.game-cta .deco-square{ right:22%; top:-24px; }
.game-cta .deco-dot{ left:-30px; bottom:-40px; }
.game-cta h2{
  font-size:clamp(22px,2.2vw,30px); font-weight:900;
  letter-spacing:-.035em; margin-bottom:8px;
}
.game-cta p{ color:var(--ink-2); font-size:14.5px; font-weight:500; max-width:46ch; }
.game-cta .store-buttons{ flex-direction:row; flex-wrap:wrap; justify-content:flex-end; }

/* --- 화면 크게 보기 --- */
.zoom{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center; padding:36px;
  background:rgba(6,12,24,.92);
  opacity:0; pointer-events:none; transition:opacity .22s ease;
}
.zoom.on{ opacity:1; pointer-events:auto; }
.zoom img{
  max-width:min(92vw,520px); max-height:86vh;
  border-radius:20px; box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.zoom-close{
  position:absolute; right:22px; top:22px;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12);
  color:#fff; font-size:20px; cursor:pointer;
}
.zoom-close:hover{ background:rgba(255,255,255,.24); }
.zoom-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12);
  color:#fff; font-size:26px; line-height:1; cursor:pointer;
}
.zoom-nav:hover{ background:rgba(255,255,255,.24); }
.zoom-prev{ left:22px; }
.zoom-next{ right:22px; }
.zoom-count{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  color:rgba(255,255,255,.8); font-size:13px; font-weight:800;
  font-variant-numeric:tabular-nums;
}

@media (max-width:1160px){
  .store-grid{ grid-template-columns:1fr; gap:22px; }
  .store-side{ order:-1; }
  .shots-track{ padding-inline:22px; }
}
@media (max-width:820px){
  .game-block{ grid-template-columns:1fr; gap:22px; }
  .game-block.is-flip > figure{ order:0; }
  .blocks-section[data-block-orientation="portrait"] .game-block,
  .blocks-section[data-block-orientation="portrait"] .game-block.is-flip{
    grid-template-columns:minmax(0,1fr); gap:22px; margin-bottom:32px;
  }
  .blocks-section[data-block-orientation="portrait"] .game-block figure{ max-width:260px; }
  .blocks-section[data-block-orientation="portrait"] .game-block:last-child{ margin-bottom:0; }
  .game-switch{ top:var(--header-h); }
  .game-switch-in{ height:54px; gap:10px; }
  .gs-side span:not(.gs-arrow){ display:none; }
  .gs-side{ padding:6px 10px; }
  .store-top{ padding-top:22px; }
  .store-side{ padding:20px; }
  .store-icon{ width:62px; height:46px; }
  .shots-section{ padding-top:38px; }
  .shots-track{ gap:12px; padding-inline:16px; }
  .shots-track .shot{ width:180px; }
  .game-cta{ padding:32px 22px; }
  .about-text .lead-para{ font-size:16.5px; }
  .zoom{ padding:16px; }
  .zoom-nav{ width:44px; height:44px; font-size:22px; }
  .zoom-prev{ left:8px; } .zoom-next{ right:8px; }
}

/* --- 문의 폼 보조 --- */
.contact-note{
  margin-top:20px; padding:14px 16px; border-radius:var(--r-m);
  background:#f6f9ff; border:1px solid var(--line);
  font-size:12.5px; line-height:1.7; color:var(--muted); font-weight:600;
}
.hint-line{ font-size:12px; color:var(--muted); font-weight:600; line-height:1.6; }
.contact-form .field .hint-line + .hint-line{ margin-top:-3px; }

/* 첨부파일 자리 */
.dropzone{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
  padding:26px 20px; border-radius:var(--r-l);
  border:2px dashed var(--line-2); background:#fbfdff;
  text-align:center; cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.dropzone:hover{ border-color:var(--purple); background:#f7f5ff; }
.dropzone.is-over{ border-color:var(--purple); background:#f1edff; }
.dropzone input[type=file]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer;
}
.dropzone b{ font-size:14px; font-weight:800; color:var(--purple-ink); }
.dropzone span{ font-size:12.5px; color:var(--muted); font-weight:600; }

.filelist{ display:flex; flex-direction:column; gap:7px; margin:10px 0 8px; }
.filelist li{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--r-s);
  background:#fff; border:1px solid var(--line);
  font-size:13px;
}
.filelist .fl-name{
  flex:1; min-width:0; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.filelist .fl-size{ flex:none; color:var(--muted); font-size:11.5px; font-weight:700; }
.filelist button{
  flex:none; padding:5px 11px; border-radius:8px;
  border:1px solid var(--line-2); background:#fff;
  font-size:11.5px; font-weight:800; color:var(--coral-ink); cursor:pointer;
}
.filelist button:hover{ background:#fff5f5; }

/* ============================================================
   게임 소식 — 채널마다 울타리 하나
   ============================================================ */
.news-page .page-head{ margin-bottom:0; }
.channel-section{ padding-top:34px; }

.channel-box{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:
    radial-gradient(720px 260px at 8% 0%, color-mix(in srgb, var(--accent,var(--purple)) 13%, transparent), transparent 62%),
    var(--surface);
  box-shadow:var(--shadow-soft);
  padding:30px 30px 26px;
}
.channel-box::before{
  content:''; position:absolute; left:0; right:0; top:0; height:6px;
  background:var(--accent,var(--purple));
}

.ch-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:20px;
}
.ch-tag{
  display:inline-block; margin-bottom:9px; padding:5px 12px;
  border-radius:999px; font-size:11.5px; font-weight:900; letter-spacing:.05em;
  background:color-mix(in srgb, var(--accent,var(--purple)) 17%, #fff);
  color:var(--accent-ink,var(--purple-ink));
}
.ch-head h2{
  font-size:clamp(23px,2.2vw,31px); font-weight:900; letter-spacing:-.04em;
}
.ch-head p{ margin-top:7px; font-size:14px; color:var(--ink-2); font-weight:500; }
.ch-link{
  flex:none; padding:11px 18px; border-radius:12px;
  border:1px solid var(--line-2); font-size:13.5px; font-weight:800;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.ch-link:hover{
  background:color-mix(in srgb, var(--accent,var(--purple)) 12%, #fff);
  border-color:color-mix(in srgb, var(--accent,var(--purple)) 42%, transparent);
  color:var(--accent-ink,var(--purple-ink));
}

/* --- 대표 영상 --- */
.video-main{
  display:block; width:100%; padding:0; border:0; background:none;
  text-align:left; cursor:pointer;
}
/* 왼쪽에 대표 영상, 오른쪽에 채널 안내 */
.ch-feature{
  display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
  gap:26px; align-items:start;
}
.video-main .vc-thumb{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r-l); background:#0a0e16;
  box-shadow:0 16px 40px rgba(24,49,83,.16);
}
.video-main .vc-thumb img{
  /* 유튜브 썸네일은 4:3 이라 위아래 검은 띠가 있다. 잘라서 16:9 로 맞춘다 */
  width:100%; height:auto; display:block;
  aspect-ratio:16/9; object-fit:cover; object-position:center;
  transition:transform .5s ease;
}
.video-main:hover .vc-thumb img{ transform:scale(1.03); }
.video-main .vc-body{ display:block; padding:16px 4px 0; }
.video-main .vc-body b{ display:block; font-size:18px; font-weight:900; letter-spacing:-.03em; }
.video-main .vc-body small{
  display:block; margin-top:5px; font-size:12.5px; color:var(--muted); font-weight:700;
}

/* --- 지난 영상 울타리 --- */
.ch-more{
  margin-top:26px; padding-top:22px;
  border-top:1px dashed var(--line-2);
}
.ch-more-head{
  display:flex; align-items:baseline; gap:10px; margin-bottom:14px;
}
.ch-more-head b{ font-size:14.5px; font-weight:900; }
.ch-more-head small{ font-size:12px; color:var(--muted); font-weight:700; }


.ch-track{ display:flex; gap:14px; min-width:min-content; }
.video-mini{
  flex:none; width:236px;
  display:block; padding:0; border:0; background:none;
  text-align:left; cursor:pointer;
}

.video-mini .vc-thumb img{
  width:100%; height:auto; display:block;
  aspect-ratio:16/9; object-fit:cover; object-position:center;
}


.video-mini .vc-body b{
  display:block; font-size:13.5px; font-weight:800; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.video-mini .vc-body small{
  display:block; margin-top:4px; font-size:11.5px; color:var(--muted); font-weight:700;
}

.ch-rail::-webkit-scrollbar{ height:8px; }
.ch-rail::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; }
.ch-rail::-webkit-scrollbar-track{ background:transparent; }

/* 재생 중에는 카드가 아니라 영상이 자리를 차지한다 */
.vc-thumb iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.empty-note{ padding:44px 20px; text-align:center; color:var(--muted); font-size:14px; font-weight:600; }

@media (max-width:820px){
  .channel-section{ padding-top:24px; }
  .channel-box{ padding:22px 18px 20px; border-radius:var(--r-l); }
  .ch-head{ align-items:flex-start; }
  .ch-rail{ margin-inline:-18px; padding-inline:18px; }
  .video-mini{ width:190px; }
  .video-main .vc-body b{ font-size:16px; }
}

/* ============================================================
   채용 공고 — 오른쪽 칸에 공고를 그대로 펼친다
   ============================================================ */
.careers-image{
  margin:0;
  border-radius:var(--r-l);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  background:#fff;
  overflow:hidden;
}
.careers-image img{
  /* 안쪽 스크롤을 두지 않는다. 페이지를 내리면 그대로 이어서 보인다 */
  display:block;
  width:100%;
  height:auto;
}

.careers-apply{
  margin:22px 0 0 18px;
  padding:16px 18px; border-radius:var(--r-m);
  background:#f7faff; border:1px solid var(--line);
}
.careers-apply b{ display:block; font-size:14px; font-weight:900; margin-bottom:6px; }
.careers-apply p{
  font-size:13px; line-height:1.7; color:var(--ink-2);
  font-weight:500; padding-left:0;
}

@media (max-width:820px){
  .careers-image{ border-radius:var(--r-m); }
  .careers-apply{ margin-left:0; }
}

/* ============================================================
   게임 소식 — 채널마다 울타리 하나
   ============================================================ */
.news-page .page-head{ margin-bottom:0; }
.channel-section{ padding-top:34px; }

.channel-box{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:
    radial-gradient(720px 260px at 8% 0%, color-mix(in srgb, var(--accent,var(--purple)) 13%, transparent), transparent 62%),
    var(--surface);
  box-shadow:var(--shadow-soft);
  padding:30px 30px 26px;
}
.channel-box::before{
  content:''; position:absolute; left:0; right:0; top:0; height:6px;
  background:var(--accent,var(--purple));
}

.ch-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:20px;
}
.ch-tag{
  display:inline-block; margin-bottom:9px; padding:5px 12px;
  border-radius:999px; font-size:11.5px; font-weight:900; letter-spacing:.05em;
  background:color-mix(in srgb, var(--accent,var(--purple)) 17%, #fff);
  color:var(--accent-ink,var(--purple-ink));
}
.ch-head h2{
  font-size:clamp(23px,2.2vw,31px); font-weight:900; letter-spacing:-.04em;
}
.ch-head p{ margin-top:7px; font-size:14px; color:var(--ink-2); font-weight:500; }
.ch-link{
  flex:none; padding:11px 18px; border-radius:12px;
  border:1px solid var(--line-2); font-size:13.5px; font-weight:800;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.ch-link:hover{
  background:color-mix(in srgb, var(--accent,var(--purple)) 12%, #fff);
  border-color:color-mix(in srgb, var(--accent,var(--purple)) 42%, transparent);
  color:var(--accent-ink,var(--purple-ink));
}

/* --- 대표 영상 --- */
.video-main{
  display:block; width:100%; padding:0; border:0; background:none;
  text-align:left; cursor:pointer;
}
/* 왼쪽에 대표 영상, 오른쪽에 채널 안내 */
.ch-feature{
  display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
  gap:26px; align-items:start;
}
.video-main .vc-thumb{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r-l); background:#0a0e16;
  box-shadow:0 16px 40px rgba(24,49,83,.16);
}
.video-main .vc-thumb img{
  /* 유튜브 썸네일은 4:3 이라 위아래 검은 띠가 있다. 잘라서 16:9 로 맞춘다 */
  width:100%; height:auto; display:block;
  aspect-ratio:16/9; object-fit:cover; object-position:center;
  transition:transform .5s ease;
}
.video-main:hover .vc-thumb img{ transform:scale(1.03); }
.video-main .vc-body{ display:block; padding:16px 4px 0; }
.video-main .vc-body b{ display:block; font-size:18px; font-weight:900; letter-spacing:-.03em; }
.video-main .vc-body small{
  display:block; margin-top:5px; font-size:12.5px; color:var(--muted); font-weight:700;
}

/* --- 지난 영상 울타리 --- */
.ch-more{
  margin-top:26px; padding-top:22px;
  border-top:1px dashed var(--line-2);
}
.ch-more-head{
  display:flex; align-items:baseline; gap:10px; margin-bottom:14px;
}
.ch-more-head b{ font-size:14.5px; font-weight:900; }
.ch-more-head small{ font-size:12px; color:var(--muted); font-weight:700; }

.ch-rail{
  overflow-x:auto; overflow-y:hidden;
  /* 스냅을 쓰면 첫 칸이 어긋난 채로 멈추는 경우가 있어 쓰지 않는다 */
  -webkit-overflow-scrolling:touch;
  padding-bottom:12px;
  /* 위쪽 대표 영상과 같은 폭 안에 둔다. 좌우 벽에 붙지 않는다 */
  margin-inline:0; padding-inline:0;
}
.ch-track{ display:flex; align-items:flex-start; gap:14px; min-width:min-content; }
.video-mini{
  flex:none; width:236px;
  display:block; padding:0; border:0; background:none;
  text-align:left; cursor:pointer;
}
.video-mini .vc-thumb{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r-m); background:#0a0e16;
  border:1px solid var(--line);
  transition:box-shadow .22s ease;
}
.video-mini .vc-thumb img{
  width:100%; height:auto; display:block;
  aspect-ratio:16/9; object-fit:cover; object-position:center;
}
/* 카드는 제자리에 두고 안쪽 그림만 살짝 커진다 */
.video-mini .vc-thumb img{ transition:transform .32s ease; }
.video-mini:hover .vc-thumb{ box-shadow:var(--shadow-m); }
.video-mini:hover .vc-thumb img{ transform:scale(1.06); }
.video-mini .vc-body{ display:block; padding:11px 2px 0; }
.video-mini .vc-body b{
  display:block; font-size:13.5px; font-weight:800; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.video-mini .vc-body small{
  display:block; margin-top:4px; font-size:11.5px; color:var(--muted); font-weight:700;
}

.ch-rail::-webkit-scrollbar{ height:8px; }
.ch-rail::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; }
.ch-rail::-webkit-scrollbar-track{ background:transparent; }

/* 재생 중에는 카드가 아니라 영상이 자리를 차지한다 */
.vc-thumb iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.empty-note{ padding:44px 20px; text-align:center; color:var(--muted); font-size:14px; font-weight:600; }

@media (max-width:820px){
  .channel-section{ padding-top:24px; }
  .channel-box{ padding:22px 18px 20px; border-radius:var(--r-l); }
  .ch-head{ align-items:flex-start; }
  .ch-rail{ margin-inline:-18px; padding-inline:18px; }
  .video-mini{ width:190px; }
  .video-main .vc-body b{ font-size:16px; }
}

/* ============================================================
   채용 공고 — 세로로 긴 이미지를 잘림 없이 전부 보여 준다
   ============================================================ */
.careers-panel .page-head{ margin-bottom:26px; }

.careers-image{
  margin:0 0 26px;
  border-radius:var(--r-l);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  background:#fff;
  overflow:hidden;
}
.careers-image img{
  /* 안쪽 스크롤을 두지 않는다. 페이지를 내리면 그대로 이어서 보인다 */
  display:block;
  width:100%;
  height:auto;
}

.careers-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:26px; flex-wrap:wrap;
  padding:24px 26px; border-radius:var(--r-l);
  background:
    radial-gradient(circle at 90% 20%, rgba(138,120,245,.16), transparent 34%),
    linear-gradient(135deg,#fbfdff,#f4f8ff);
  border:1px solid var(--line);
}
.careers-foot b{ display:block; font-size:16px; font-weight:900; margin-bottom:6px; }
.careers-foot p{ font-size:14px; line-height:1.72; color:var(--ink-2); font-weight:500; max-width:56ch; }
.careers-foot .btn{ flex:none; }

@media (max-width:820px){
  .careers-image{ border-radius:var(--r-m); }
  .careers-foot{ padding:20px; }
  .careers-foot .btn{ width:100%; justify-content:center; }
}

/* ============================================================
   영상 재생 — 썸네일을 지우지 않고 그 위에 얹는다
   ============================================================ */
.vc-thumb.is-playing iframe,
.news-media.is-playing iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; z-index:2;
}
/* 영상이 뜨는 동안 재생 표시는 감춘다 */
.vc-thumb.is-playing .play,
.news-media.is-playing .play{ display:none; }

/* 재생이 막힌 환경에서는 눌렀을 때 유튜브가 새 창으로 열린다.
   가운데 재생 표시 하나로 충분하므로 따로 표시를 더하지 않는다 */
.is-external{ cursor:pointer; }

/* 문의 선택 상자 — 화살표가 테두리에 붙지 않도록 직접 그린다 */
.contact-form select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:46px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236b83a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 18px center;
  background-size:12px 8px;
}


/* 정사각 앱 아이콘 — 스토어에서 보던 그 모양으로 */
.store-icon.is-square{
  width:72px; height:72px; object-fit:cover;
  border-radius:18px;
}

/* --- 채널 안내 카드 — 게임 상세의 스토어 카드와 같은 짜임 --- */
.ch-about{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; min-height:0;
  /* 1.65:1 열 너비와 16:9 썸네일에 맞춘 카드 높이. 영상 제목·날짜는 제외한다. */
  aspect-ratio:320/297;
  padding:26px 26px 24px; border-radius:var(--r-xl);
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.ch-about::before{
  content:''; position:absolute; left:0; right:0; top:0; height:6px;
  background:var(--accent,var(--purple));
}

.ch-about-head{ display:flex; gap:15px; align-items:center; margin-bottom:18px; }
.ch-about-head, .ch-about > .ch-sub, .ch-about > .ch-stats{ flex-shrink:0; }
.ch-yt{
  width:56px; height:56px; flex:none; border-radius:16px;
  display:grid; place-items:center; background:#fff;
  border:1px solid var(--line);
  box-shadow:0 6px 16px rgba(54,82,122,.18);
}
.ch-yt svg{ width:30px; height:30px; }
.ch-about-head b{
  display:block; font-size:clamp(20px,1.9vw,25px); font-weight:900;
  letter-spacing:-.04em; line-height:1.2;
}
.ch-about-head small{
  display:inline-block; margin-top:8px; padding:4px 11px;
  border-radius:999px; font-size:11.5px; font-weight:800;
  background:color-mix(in srgb, var(--accent,var(--purple)) 16%, #fff);
  color:var(--accent-ink,var(--purple-ink));
}

.ch-about-body{
  flex:1 1 0; min-height:0;
  overflow-y:auto; overflow-x:hidden; overflow-wrap:anywhere;
  overscroll-behavior-y:contain;
  scrollbar-width:thin; scrollbar-color:#a7b6ce transparent;
}
.ch-about-body:focus-visible{
  outline:2px solid var(--accent,var(--purple)); outline-offset:-2px;
  border-radius:4px;
}
.ch-about-body p{
  font-size:14.5px; line-height:1.75; color:var(--ink-2);
  font-weight:500; margin-bottom:12px;
}
.ch-about-body p:last-child{ margin-bottom:0; }

/* 구독 버튼 — 스토어 버튼과 같은 생김새 */
.ch-sub{
  display:flex; align-items:center; gap:12px;
  margin-top:20px; padding:12px 18px; border-radius:14px;
  background:var(--ink); color:#fff;
  transition:transform .18s ease, box-shadow .18s ease;
}
.ch-sub::before{
  content:''; width:26px; height:26px; flex:none;
  background-repeat:no-repeat; background-size:contain; background-position:center;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF0000' d='M23 12s0-3.8-.5-5.6a2.9 2.9 0 0 0-2-2C18.7 4 12 4 12 4s-6.7 0-8.5.4a2.9 2.9 0 0 0-2 2C1 8.2 1 12 1 12s0 3.8.5 5.6a2.9 2.9 0 0 0 2 2C5.3 20 12 20 12 20s6.7 0 8.5-.4a2.9 2.9 0 0 0 2-2C23 15.8 23 12 23 12z'/%3E%3Cpath fill='%23fff' d='M9.8 15.5V8.5L15.8 12z'/%3E%3C/svg%3E");
}
.ch-sub:hover{ transform:translateY(-2px); box-shadow:0 14px 26px rgba(24,49,83,.3); }
.ch-sub small{ display:block; font-size:10.5px; font-weight:700; opacity:.68; letter-spacing:.04em; }
.ch-sub span{ display:block; font-size:16px; font-weight:800; letter-spacing:-.02em; }

/* 영상 수 · 마지막 업로드 — 스토어 카드의 기본 정보 줄과 같게 */
.ch-stats{
  display:flex; flex-wrap:wrap; gap:12px 26px; margin:20px 0 0;
  padding-top:18px; border-top:1px solid var(--line);
}
.ch-stats dt{
  font-size:10.5px; font-weight:900; letter-spacing:.1em;
  color:var(--muted); margin-bottom:3px;
}
.ch-stats dd{ margin:0; font-size:13.5px; font-weight:800; }

@media (max-width:1160px){
  .ch-feature{ grid-template-columns:1fr; }
  .ch-about{ aspect-ratio:auto; }
  .ch-about-body{ flex:0 1 auto; max-height:20rem; }
}
.ch-sub-text{ display:block; }

/* 네이버 지도 위 정보창 */
.nv-info{
  padding:11px 15px; border-radius:12px;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 8px 22px rgba(12,24,48,.18);
  white-space:nowrap;
}
.nv-info b{ display:block; font-size:14px; font-weight:900; color:var(--ink); }
.nv-info small{
  display:block; margin-top:3px; font-size:11.5px;
  font-weight:600; color:var(--muted);
}