/* MagicTree Games — 전부 새로 쓴 스타일이다.
   레이아웃 관습(카드 격자·상단 칩·히어로·플레이 화면 옆 추천)은 다른 포털에서
   가져왔지만 그건 저작권 대상이 아니다. 파일과 문구는 여기서 지었다.

   기준: 모바일 375px 우선. 게임 포털 방문의 다수가 폰이다.
   색: 어두운 바탕 — 게임 화면이 밝아서 주변이 어두워야 게임이 앞으로 나온다. */

:root{
  --bg:#0f1117;        /* 바탕 */
  --bg2:#171a24;       /* 카드 */
  --bg3:#1f2430;       /* 눌린 것·경계 */
  --tx:#eef1f7;        /* 본문 — 바탕 대비 15.8:1 */
  --tx2:#a6adbb;       /* 보조 — 바탕 대비 7.1:1 (AA 통과) */
  --ac:#5ee6a8;        /* 강조(민트) — 어두운 바탕에서 눈에 띄고 채도가 낮다 */
  --ac2:#2fbf82;
  --rad:14px;
  --gap:18px;
  --maxw:1180px;
  --shadow:0 6px 24px rgba(0,0,0,.42);
  --font:"Pretendard","Noto Sans KR",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--tx);font-family:var(--font);
  font-size:16px;line-height:1.65;
  /* 🔴 가로 스크롤은 폰에서 사이트를 망가진 것처럼 보이게 한다. 뿌리에서 막는다. */
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.25;margin:0 0 .4em;letter-spacing:-.01em}
h1{font-size:clamp(26px,5vw,40px);font-weight:800}
h2{font-size:clamp(19px,3vw,25px);font-weight:700}
h3{font-size:17px;font-weight:700}
p{margin:0 0 .8em}
/* 🔴 한국어는 기본값이 글자 단위로 끊긴다 — "30레벨" 이 "30레 / 벨" 로 갈라졌다.
   keep-all 은 낱말을 안 쪼갠다. 대신 긴 영어 낱말이 넘칠 수 있어 break-word 를 같이 준다. */
h1,h2,h3,p,.meta p,.lead,.chip,.tag{word-break:keep-all;overflow-wrap:break-word}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.wrap.narrow{max-width:720px}
.dim{color:var(--tx2)}
.sm{font-size:14px}
.sec{margin:34px 0 16px;font-size:20px}

/* ── 상단 ────────────────────────────────────────────────── */
.top{
  position:sticky;top:0;z-index:50;
  background:rgba(15,17,23,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--bg3);
}
.topbar{display:flex;align-items:center;gap:16px;min-height:60px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.mark{
  width:26px;height:26px;border-radius:8px;
  background:linear-gradient(140deg,var(--ac),var(--ac2));
  box-shadow:0 0 0 3px rgba(94,230,168,.14);
}
.bname{font-weight:800;font-size:17px;letter-spacing:-.02em;white-space:nowrap}

/* 카테고리 칩은 가로로 스크롤한다 — 줄바꿈시키면 폰에서 헤더가 두 줄이 돼 화면을 먹는다 */
.chips{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding:6px 0;min-width:0;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;padding:7px 14px;border-radius:999px;background:var(--bg2);
  color:var(--tx2);font-size:14px;font-weight:600;white-space:nowrap;
  border:1px solid transparent;transition:.15s;
}
.chip:hover{color:var(--tx);background:var(--bg3)}
.chip.on{background:rgba(94,230,168,.14);color:var(--ac);border-color:rgba(94,230,168,.3)}

/* ── 히어로 ──────────────────────────────────────────────── */
.hero{
  display:grid;grid-template-columns:1fr;gap:20px;
  padding:26px 16px 6px;align-items:center;
}
.hero-art{
  position:relative;border-radius:var(--rad);overflow:hidden;
  box-shadow:var(--shadow);aspect-ratio:16/9;background:var(--bg2);
}
.hero-art img{width:100%;height:100%;object-fit:cover}
.hero-art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(15,17,23,.55),transparent 55%);
}
.kicker{
  color:var(--ac);font-weight:700;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;margin:0 0 6px;
}
.lead{font-size:17px;color:var(--tx2);margin-bottom:1em}
.btn{
  display:inline-block;padding:13px 30px;border-radius:999px;
  background:linear-gradient(140deg,var(--ac),var(--ac2));
  color:#06251a;font-weight:800;font-size:16px;
  box-shadow:0 6px 18px rgba(47,191,130,.32);transition:.15s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(47,191,130,.42)}
.btn:active{transform:translateY(0)}

/* ── 카드 격자 ───────────────────────────────────────────── */
.grid{
  display:grid;gap:var(--gap);
  /* auto-fill + minmax — 화면 폭에 따라 열 수가 알아서 바뀐다.
     🔴 minmax 의 min 을 0 이 아니라 실제 최소폭으로 둬야 폰에서 카드가 안 찌그러진다. */
  grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));
}
.card{
  background:var(--bg2);border-radius:var(--rad);overflow:hidden;
  border:1px solid var(--bg3);transition:.18s;display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-4px);border-color:rgba(94,230,168,.34);box-shadow:var(--shadow)}
.card.dis{opacity:.5;pointer-events:none}
.card.big{grid-column:span 2}
@media (max-width:560px){.card.big{grid-column:span 1}}
.thumb{position:relative;aspect-ratio:16/9;background:var(--bg3);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;transition:.3s}
.card:hover .thumb img{transform:scale(1.05)}
.soon{
  position:absolute;top:9px;right:9px;padding:4px 10px;border-radius:999px;
  background:rgba(15,17,23,.86);font-size:12px;font-weight:700;color:var(--tx2);
}
.meta{padding:13px 14px 15px;display:flex;flex-direction:column;gap:6px;flex:1}
.meta h3{margin:0}
/* 설명은 두 줄로 자른다 — 길이가 제각각이면 카드 높이가 들쭉날쭉해져 격자가 지저분해진다 */
.meta p{
  margin:0;font-size:14px;color:var(--tx2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.tag{
  font-size:12px;padding:3px 9px;border-radius:6px;
  background:var(--bg3);color:var(--tx2);font-weight:600;
}
a.tag:hover{color:var(--ac)}

/* ── 플레이 화면 ─────────────────────────────────────────── */
.play{padding-top:16px}
.stage-wrap{
  background:var(--bg2);border:1px solid var(--bg3);border-radius:var(--rad);
  overflow:hidden;box-shadow:var(--shadow);
}
.stage{position:relative;width:100%;background:#000}
.stage-wrap.landscape .stage{aspect-ratio:16/9}
/* 세로 게임은 16:9 에 넣으면 양옆이 시커멓게 남는다. 비율을 게임에 맞춘다.
   단 폰에서 세로 비율을 그대로 쓰면 화면을 넘어가므로 높이를 제한한다. */
.stage-wrap.portrait .stage{aspect-ratio:9/16;max-height:78vh;margin:0 auto;max-width:calc(78vh*9/16)}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.stage-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border-top:1px solid var(--bg3);
}
.gname{font-weight:700;font-size:15px}
.ghost{
  background:var(--bg3);color:var(--tx);border:1px solid transparent;
  padding:8px 16px;border-radius:9px;font-weight:700;font-size:14px;
  cursor:pointer;font-family:inherit;transition:.15s;
}
.ghost:hover{border-color:rgba(94,230,168,.35);color:var(--ac)}

.cols{display:grid;grid-template-columns:1fr;gap:28px;margin:28px 0 10px}
.about-game h1{margin-top:0}
.side .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr))}

/* ── 바닥 ────────────────────────────────────────────────── */
.foot{margin-top:56px;padding:28px 0 44px;border-top:1px solid var(--bg3);color:var(--tx2);font-size:14px}
.foot a{color:var(--ac)}
.foot p{margin:0 0 .35em}

/* ── 넓은 화면 ───────────────────────────────────────────── */
@media (min-width:800px){
  .hero{grid-template-columns:1.25fr 1fr;gap:34px;padding-top:38px}
  .cols{grid-template-columns:1fr 330px;gap:34px}
  .side .grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  :root{--gap:13px}
  .bname{display:none}          /* 폰에서는 로고만 — 칩 자리를 벌어준다 */
  .hero{padding-top:18px}
}

/* 움직임을 줄여 달라는 설정을 존중한다 */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .card:hover{transform:none}
  .card:hover .thumb img{transform:none}
}
/* 🔴 포커스 테두리를 강조색 하나로만 그렸더니 **강조색 버튼 위에서 안 보였다**
   (실측: 「지금 플레이」에 포커스가 갔는데 화면상 표시가 없었다 —
    민트 버튼에 민트 테두리였다).
   키보드로만 쓰는 사람은 지금 어디에 있는지를 이것 하나로 안다.
   두 겹으로 그린다: 안쪽 어두운 띠가 배경과 떼어내고, 바깥 밝은 띠가 보인다.
   어느 배경에서도 한 겹은 반드시 대비가 난다. */
:focus-visible{
  outline:none;border-radius:8px;
  box-shadow:0 0 0 3px var(--bg), 0 0 0 6px var(--ac);
}
/* 카드는 모서리가 둥그니 그에 맞춘다 */
.card:focus-visible{border-radius:var(--rad)}

/* 광고 자리 — 높이를 미리 잡아 둔다. 광고가 늦게 뜨며 글을 밀면
   누르려던 것을 잘못 누르게 된다(레이아웃 밀림). */
.adbox{
  min-height:100px;margin:26px 0;border-radius:var(--rad);
  background:var(--bg2);border:1px dashed var(--bg3);overflow:hidden;
}
.adbox:empty{display:none}

/* ── 벤치마킹 반영 (3곳 실측) ─────────────────────────────── */

/* ① 카드 제목은 마우스 올릴 때만 — 3곳이 전부 그렇게 한다.
   🔴 단 **모바일에서는 항상 보인다.** 손가락에는 hover 가 없어서,
      폰에서 숨기면 제목을 영영 못 본다(CrazyGames 도 모바일에서만 켠다). */
@media (hover:hover) and (min-width:800px){
  .meta{
    position:absolute;left:0;right:0;bottom:0;
    background:linear-gradient(to top,rgba(10,12,17,.96),rgba(10,12,17,.8) 70%,transparent);
    opacity:0;transform:translateY(6px);transition:.18s;
    /* 🔴 처음엔 padding 14px + 태그까지 두었더니 패널이 **카드의 77%** 를 덮었다
       (실측: 패널 117px / 카드 155px). 게임 그림을 보여주려고 만든 카드인데
       그림이 거의 다 가려졌다. 제목 + 한 줄로 줄여 얇은 띠로 만든다. */
    padding:9px 12px 10px;gap:2px;
  }
  .card{position:relative}
  .card .thumb{aspect-ratio:16/9}
  .card:hover .meta,.card:focus-within .meta{opacity:1;transform:translateY(0)}
  .meta h3{font-size:15px;line-height:1.3}
  .meta p{-webkit-line-clamp:1;font-size:13px;line-height:1.4}
  /* 태그는 카드에서 뺀다 — 작은 카드에서 세 줄째는 그림만 더 가린다.
     태그는 게임 페이지와 카테고리 칩에 이미 있다. */
  .meta .tags{display:none}
}

/* ② 컨트롤 바 — Poki·Y8 이 게임 바로 밑에 둔다.
   CrazyGames 는 SDK 안에 넣었는데 우리는 SDK 가 없으니 밖에 둔다. */
.bar-acts{display:flex;gap:8px;flex-wrap:wrap}
.ghost.like.on{color:var(--ac);border-color:rgba(94,230,168,.45)}
@media (max-width:520px){
  .stage-bar{flex-direction:column;align-items:stretch;gap:9px}
  .bar-acts{justify-content:stretch}
  .bar-acts .ghost{flex:1;text-align:center}
}

/* ③ FAQ — 구조화 데이터만 있고 화면에 없으면 구글이 감점한다 */
.faq{margin:0 0 18px}
.faq dt{font-weight:700;margin-top:14px}
.faq dd{margin:4px 0 0;color:var(--tx2)}

/* ④ 설명글은 페이지 맨 아래. 첫 화면은 게임 그림이어야 한다 */
.seo{margin-top:34px;padding-top:24px;border-top:1px solid var(--bg3);max-width:760px}
.seo h2{font-size:19px}
.seo p{color:var(--tx2);font-size:15px}

/* ── 시작 게이트 ──────────────────────────────────────────────
   🔴 예전엔 페이지를 열자마자 게임 45MB 를 받았다.
      4G 실측 235~285초. 그동안 화면은 검은 사각형이고, 그냥 둘러보다
      나간 사람에게도 45MB 가 나갔다. 눌러야 받도록 바꿨다. */
.starter{
  position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;margin:0;
  background:var(--bg3);cursor:pointer;font-family:inherit;color:var(--tx);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  overflow:hidden;
}
.starter img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.45) saturate(.85);transition:.35s;
}
.starter:hover img{filter:brightness(.55) saturate(.95);transform:scale(1.03)}
.play-ico{
  position:relative;width:78px;height:78px;border-radius:50%;
  background:linear-gradient(140deg,var(--ac),var(--ac2));
  box-shadow:0 8px 30px rgba(47,191,130,.45);transition:.2s;
}
/* 삼각형은 CSS 테두리로 그린다 — 아이콘 파일 하나를 안 받는다 */
.play-ico::after{
  content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:15px 0 15px 25px;
  border-color:transparent transparent transparent #06251a;
}
.starter:hover .play-ico{transform:scale(1.08)}
.start-txt{position:relative;font-size:19px;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.start-sub{position:relative;font-size:13px;color:var(--tx2);text-shadow:0 2px 10px rgba(0,0,0,.8)}

/* 404 — 사과하는 페이지가 아니라 되돌려 보내는 페이지다 */
.nf{padding:48px 0 8px;max-width:620px}
.nf .kicker{font-size:15px;letter-spacing:.12em}
.nf h1{margin-bottom:.35em}

/* 소개처럼 좁은 글 페이지는 **왼쪽을 헤더와 맞춘다**.
   가운데 정렬하면 로고는 왼쪽 끝인데 본문만 가운데라 시선이 어긋난다. */
.wrap.narrow{margin-left:0;max-width:min(720px,100%)}
@media (min-width:1220px){.wrap.narrow{margin-left:calc((100vw - var(--maxw)) / 2 + 16px);padding-left:0}}

/* 404 는 한 장이 두 언어를 담는다 — Cloudflare 가 루트 404 하나만 쓰기 때문이다 */
.en2{font-size:15px;padding-top:4px;border-top:1px solid var(--bg3);margin-top:14px}
.btn.ghost2{
  background:none;color:var(--tx);box-shadow:none;
  border:1px solid var(--bg3);margin-left:8px;
}
.btn.ghost2:hover{border-color:var(--ac);color:var(--ac);box-shadow:none;transform:translateY(-2px)}

/* ── 폰: 카드 2열 + 정사각 썸네일 ──────────────────────────────
   🔴 폰에서 1열이라 첫 화면에 게임이 1~2개뿐이었다.
      벤치마킹 실측: CrazyGames 8개 · Poki 13개 · Y8 6개.
      게임이 4개뿐인데 그마저 안 보이면 훑어볼 수가 없다.
   16:9 를 2열로 넣으면 높이가 93px 로 찌그러진다 → 정사각으로 바꾼다.
   CrazyGames 도 모바일만 정사각을 따로 만든다. */
@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .card .thumb{aspect-ratio:1/1}
  .card picture{display:contents}
  .meta{padding:9px 10px 11px;gap:3px}
  .meta h3{font-size:14px}
  .meta p{font-size:12px;-webkit-line-clamp:2}
  .meta .tags{display:none}      /* 좁은 칸에서 태그는 줄만 늘린다 */
  /* 옆줄 추천은 그대로 2열 */
  .side .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── 등장 움직임 ────────────────────────────────────────────────────
   사장 지시(2026-09-01): *"항상 비주얼에 신경써 풍성한 애니메이션화 해야돼!"*

   🔴 포털은 **정지 화면**이었다. 손을 올려야만 반응했다.
      게임은 움직이는데 그 게임을 고르는 화면이 멈춰 있으면,
      사람은 여기가 **덜 만든 곳**이라고 느낀다. 첫인상이 거기서 정해진다.

   🔑 그런데 화면 전체를 흔들면 오히려 싸구려로 보인다. 규칙 셋을 지킨다:
     ① 등장은 **한 번만.** 스크롤할 때마다 다시 나타나면 멀미가 난다
     ② 시간은 **짧게(0.4초).** 길면 기다리게 된다 — 목록은 훑는 화면이다
     ③ **누를 것 하나**에만 시선을 끈다(플레이 버튼). 다 빛나면 아무것도 안 빛난다

   ⚠️ 움직임을 줄여 달라는 설정은 아래 @media 가 **전부 끈다.**
      멀미·전정기관 문제가 있는 사람에게 움직임은 불편이 아니라 증상이다. */
.card{opacity:1}
.js-anim .card{opacity:0;transform:translateY(14px)}
.js-anim .card.seen{opacity:1;transform:none;
  transition:opacity .4s ease-out,transform .4s cubic-bezier(.2,.8,.3,1)}

/* 플레이 버튼 — 화면에서 **눌러야 할 것 하나**라 여기만 빛난다 */
@keyframes mtg-pulse{
  0%{box-shadow:0 8px 30px rgba(47,191,130,.45),0 0 0 0 rgba(94,230,168,.42)}
  70%{box-shadow:0 8px 30px rgba(47,191,130,.45),0 0 0 22px rgba(94,230,168,0)}
  100%{box-shadow:0 8px 30px rgba(47,191,130,.45),0 0 0 0 rgba(94,230,168,0)}
}
.starter .play-ico{animation:mtg-pulse 2.6s ease-out infinite}
.starter:disabled .play-ico{animation:none}   /* 누른 뒤엔 멈춘다 */

/* 큰 추천 그림이 아주 천천히 밀린다. 20초에 3% — 눈치채기 전에 「살아 있다」로 읽힌다 */
@keyframes mtg-drift{
  0%{transform:scale(1) translate(0,0)}
  100%{transform:scale(1.03) translate(-.6%,-.6%)}
}
.hero-art img{animation:mtg-drift 20s ease-in-out infinite alternate}

@media (prefers-reduced-motion:reduce){
  .js-anim .card{opacity:1;transform:none}
  .starter .play-ico,.hero-art img{animation:none}
}