/* 민공방 게임즈 홈 — 페이지 CSS. 시스템(assets/system.css)이 모르는 것만: 시각물 안쪽, 카드 묶음의 --p-h,
   작품별 바탕색(Soul Saver 남색), 머리의 언어·회원 조각, 한글 글꼴 덧대기. 격자·여백·단추·카드는 kit 그대로. */

/* 한글: Urbanist는 라틴만 있으므로 한글은 Pretendard가 받는다(라틴은 Urbanist 우선) */
:root { --font-display: "Urbanist", "Pretendard Variable", Pretendard, system-ui, sans-serif;
        --font-text: "Urbanist", "Pretendard Variable", Pretendard, system-ui, sans-serif; }
body { word-break: keep-all; }

/* 머리: 언어 전환과 회원 단추가 주 단추 왼쪽에 선다 */
.nav__actions .lang, .nav__actions .auth { flex: none; }
@media (max-width: 1023px) {
  .nav.is-open .nav__actions { grid-template-columns: auto auto 1fr; align-items: center; }
  .nav.is-open .nav__actions .btn { grid-column: 1 / -1; }
}

/* 히어로: 게임 로고(워드마크)가 h1 위에 선다; 어두운 지층 위라 밝은 판 */
.hero__wordmark { display: block; width: min(100%, 500px); height: auto; margin-bottom: var(--s-5); }
@media (max-width: 1023px) { .hero__wordmark { width: min(100%, 300px); margin-bottom: var(--s-4); } }

/* 하루의 흐름·Soul Saver 카드 묶음: 3:2 캡처 패널(카드 위) */
#how .panel--top, #ss-play .panel--top { aspect-ratio: 4 / 3; --p-h: 0px; }

/* 분할 사진 틀: 4:3 */
.frame--split { --ratio: 75%; }

/* Soul Saver: 그 게임 세계의 남색 밤 (dark-band) */
#soulsaver { --p-inv-bg: #120d2a; --p-inv-surface: #1d1540; --p-inv-ink: #f3f0ff; --p-inv-muted: #b8b0d8; }

/* 공방 소개: 일정 표의 날짜 */
#studio .rows__value { color: var(--muted); }

/* 소식 타일: 날짜 줄 */
.tile__date { color: var(--muted); font-size: var(--t-small); }

/* 푸터 법적 줄의 상표 문구 */
.footer__legal .legal-note { flex-basis: 100%; }

/* 폰 히어로: 사진을 조금 낮춰 글·단추가 첫 화면 안에 끝나게 */
@media (max-width: 1023px) { .hero--photo { --photo: min(38svh, 56vw); } }
@media (max-width: 639px) { .hero__wordmark { width: min(100%, 220px); } }


/* 폰·태블릿: 사진이 머리 아래 층이 되고 글은 바탕 위에 선다. kit의 data-box="none"+data-tone="dark" 규칙이
   이 폭에서도 흰 글자를 남기므로(흰 글자가 크림 바탕에 1.09:1) 페이지 잉크로 되돌린다 */
@media (max-width: 1023px) {
  .hero--photo[data-box="none"][data-tone="dark"] { --ink: var(--p-ink); --muted: var(--p-muted); color: var(--p-ink);
    --line: color-mix(in oklab, var(--p-ink) 11%, transparent); --line-strong: color-mix(in oklab, var(--p-ink) 20%, transparent); }
}
/* 아주 좁은 폰(320~399): 로고는 마크만 보이고 이름은 읽기 전용으로 남긴다 */
@media (max-width: 399px) {
  .nav__logo > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* 폰: 한글은 전각이라 44px h1이 한 줄에 7자뿐이다. 32px이면 32자(kit의 스트레스 길이)가 3줄에 든다; h2(30px)보다 크다 */
@media (max-width: 639px) { .hero--photo h1 { font-size: 32px; } }

/* 날짜·가격은 줄 중간에서 끊지 않는다 */
time, .tile__price { white-space: nowrap; }

/* ================================================================ 7차 (2026-11-09): 다듬기와 애니메이션 ================ */

/* 구역 높이: kit의 '한 화면 한 섹션' 상자(height: 100svh)를 풀고 내용만큼만. 위아래 여백은 80~112px 리듬 */
body main > .section:not(.hero) { height: auto; min-height: 0; padding-block: clamp(80px, 8vw, 112px); }
body main > .section:not(.hero) > .wrap { height: auto; flex: none; }
body main > .section.ground-inverse { padding-block: clamp(88px, 9vw, 128px); }   /* 어두운 띠는 숨 쉴 자리를 조금 더 */
body main > .section--contact { padding-block: clamp(56px, 6vw, 80px); border-top: 1px solid var(--line); }
.section--contact .section-head--split { align-items: center; }
.section--contact .btn-row { flex: none; }
/* 분할 구역(글 | 사진)은 사진 높이에 글을 가운데 맞춘다 */
#deepfold .grid--top, #letters .grid--top, #soulsaver .grid--top { align-items: center; }
/* 앵커로 올 때 고정 머리(72px) 아래에 제목이 선다 */
main > .section { scroll-margin-top: var(--nav); }

/* 히어로: 100svh 고정이 아니라 '최소 한 화면'. 키가 낮은 창(1366×768, 1536×674)에서는 내용만큼 자라고,
   사실 줄은 절대 위치 대신 격자의 둘째 줄에 선다 → 단추와 겹치지 않는다 */
body main > .hero { height: auto; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: clip; }
body main > .hero > .wrap { height: auto; }
.hero--photo[data-calm="left"] > .wrap .hero__facts { position: static; margin: 0; }
/* 키 낮은 데스크톱: 워드마크와 제목을 한 단계 줄여 첫 화면에 더 많이 들어오게 */
@media (min-width: 1024px) and (max-height: 760px) {
  .hero__wordmark { width: min(100%, 340px); margin-bottom: var(--s-4); }
  .hero--photo h1 { font-size: clamp(40px, 4vw, 56px); }
  .hero__text > * + * { margin-top: var(--s-4); }
}
/* 히어로 사진 위의 글이 더 잘 읽히게: 왼쪽 아래로 갈수록 아주 옅은 먹색 */
.hero--photo::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, rgb(20 16 30 / .34) 0%, rgb(20 16 30 / .14) 46%, transparent 70%); }
@media (max-width: 1023px) { .hero--photo::before { display: none; } }

/* Soul Saver 숫자 띠(카운트업은 kit motion.js의 data-m-count) */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4) var(--gutter); margin: 0; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.facts > div { display: grid; gap: var(--s-1); }
.facts dd { margin: 0; font: var(--display-weight) var(--t-stat)/1 var(--font-display); letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; }
.facts dt { font-size: var(--t-small); color: var(--muted); }

/* 타일·사진 틀 호버: 그림은 kit가 1.03 키운다; 여기서는 틀이 2px 뜨고 그늘이 생긴다 */
@media (hover: hover) and (pointer: fine) {
  html:not([data-motion="off"]) :is(.tile__media, .frame--photo) { transition: translate var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  html:not([data-motion="off"]) a.tile:hover .tile__media { translate: 0 -2px; box-shadow: 0 16px 32px -16px rgb(23 24 28 / .28); }
}

/* 구역 입자: Deepfold 구역은 종이 먼지가 아주 천천히 떠오르고, Soul Saver 구역은 도트 별이 깜빡인다.
   그림 한 장을 translate·opacity로만 움직인다(합성만, 리페인트 없음). 보일 때만(in-view), 모션 줄이기에서는 정지 */
[data-ambient]::before, [data-ambient="stars"]::after { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 0; pointer-events: none; }
[data-ambient="dust"]::before { bottom: -1680px; opacity: .3;   /* 타일 높이의 최소공배수(240·280·336·420 → 1680)만큼 올라가면 처음 그림: 이음새 없음 */
  background-image: radial-gradient(circle, rgb(150 110 60 / .4) 1px, transparent 1.9px), radial-gradient(circle, rgb(150 110 60 / .3) .8px, transparent 1.6px),
                    radial-gradient(circle, rgb(150 110 60 / .24) .7px, transparent 1.4px);
  background-size: 311px 240px, 223px 280px, 457px 336px; background-position: 37px 61px, 149px 23px, 251px 197px; }
[data-ambient="stars"]::before, [data-ambient="stars"]::after { bottom: 0; opacity: .42;
  background-image: radial-gradient(circle, rgb(235 228 255 / .95) 1px, transparent 1.6px), radial-gradient(circle, rgb(130 220 255 / .8) .8px, transparent 1.4px), radial-gradient(circle, rgb(235 228 255 / .7) .7px, transparent 1.3px);
  background-size: 263px 211px, 347px 293px, 419px 181px; background-position: 23px 41px, 157px 113px, 71px 229px; }
[data-ambient="stars"]::after { background-position: 131px 151px, 43px 239px, 283px 67px; background-size: 229px 251px, 383px 331px, 197px 401px; opacity: .22; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) [data-ambient="dust"]::before { animation: mg-dust 240s linear infinite; }   /* 7px/s */
  html:not([data-motion="off"]) [data-ambient="stars"]::before { animation: mg-twinkle 4.2s ease-in-out infinite alternate; }
  html:not([data-motion="off"]) [data-ambient="stars"]::after { animation: mg-twinkle 5.4s ease-in-out -2.1s infinite alternate-reverse; }
  [data-ambient]:not(.in-view)::before, [data-ambient]:not(.in-view)::after { animation-play-state: paused; }
}
@keyframes mg-dust { to { translate: 0 -1680px; } }   /* 240·280·336의 최소공배수 */
@keyframes mg-twinkle { from { opacity: .15; } to { opacity: .5; } }

/* 켄 번스: 키 아트가 22초에 걸쳐 1.00→1.05. kit의 진입(1.05→1 settle, 1.1초)이 끝난 뒤 시작. 데스크톱만(폰에서는 사진이 띠라 새어 나간다) */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  html:not([data-motion="off"]) .hero--photo > .hero__bg { animation: mg-kb 22s var(--ease) 1.2s forwards; }
}
@keyframes mg-kb { from { transform: scale(1); } to { transform: scale(1.05); } }

/* 스크롤 등장: home.js가 .rv를 붙이고 보이면 .is-in. JS가 없거나 모션 줄이기면 .rv-on이 없어 그대로 보인다 */
@media (prefers-reduced-motion: no-preference) {
  html.rv-on .rv { opacity: 0; translate: 0 24px; transition: opacity 600ms var(--ease), translate 700ms var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
  html.rv-on .rv.is-in { opacity: 1; translate: 0 0; }
}

/* ================================================================ 7차 2라운드: 대형 게임사 홈의 문법 ================ */

/* 머리: 첫 화면 위에서는 투명(흰 글자), 스크롤하면 바탕색으로(home.js가 .is-top을 켜고 끈다). 데스크톱만 — 폰은 사진이 머리 아래 띠라 바탕 위에 선다 */
.nav { transition: background-color 320ms var(--ease), border-color 320ms var(--ease), color 320ms var(--ease); }
@media (min-width: 1024px) {
  .nav.is-top { background: transparent; border-bottom-color: transparent; color: #fff; --ink: #fff; --muted: rgb(255 255 255 / .8); --line: rgb(255 255 255 / .28); --line-strong: rgb(255 255 255 / .6);
    --mg-ink: #fff; --mg-muted: rgb(255 255 255 / .8); --mg-line: rgb(255 255 255 / .35); --mg-bg: #17181c; --mg-surface: rgb(255 255 255 / .12); }
  .nav.is-top .nav__logo, .nav.is-top .nav__link { color: #fff; }
  .nav.is-top .nav__logo { text-shadow: 0 1px 8px rgb(0 0 0 / .35); }
  .nav.is-top .auth-btn:hover { border-color: #fff; background: rgb(255 255 255 / .12); }
  .nav.is-top .nav__menu { color: var(--p-ink); --ink: var(--p-ink); --muted: var(--p-muted); --line: color-mix(in oklab, var(--p-ink) 11%, transparent); }
  .nav.is-top .nav__menu .nav__link { color: var(--p-ink); }
  /* 머리 뒤의 사진 위쪽을 살짝 가라앉혀 흰 글자가 읽히게 */
  .hero--photo::before { background: linear-gradient(180deg, rgb(20 16 30 / .55) 0%, rgb(20 16 30 / 0) 22%), linear-gradient(100deg, rgb(20 16 30 / .34) 0%, rgb(20 16 30 / .14) 46%, transparent 70%); }
}

/* 히어로: 한 줄 제목(h1은 리드 크기와 제목 크기 사이), 주 단추 하나와 글 링크, 아래로 힌트 */
.hero--photo h1 { font-size: clamp(26px, 1.5vw + 16px, 38px); line-height: 1.2; max-width: none; letter-spacing: var(--display-tracking); }
.hero__text > h1 + .hero__lead { margin-top: var(--s-4); }
.hero .hero__lead { max-width: 46ch; }
.hero__link { color: #fff; }
@media (max-width: 1023px) { .hero__link { color: var(--p-ink); } }
.hero--photo .btn-row { align-items: center; gap: var(--s-5); }
.hero__scroll { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; z-index: 2; display: none; width: 40px; height: 40px; border-radius: 50%; place-items: center; color: rgb(255 255 255 / .75); }
.hero__scroll:hover { color: #fff; }
@media (min-width: 1024px) and (min-height: 700px) { .hero__scroll { display: grid; } }
@media (prefers-reduced-motion: no-preference) { html:not([data-motion="off"]) .hero__scroll svg { animation: mg-nudge 2.2s var(--ease) infinite; } }
@keyframes mg-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
/* 사진은 사방 14px 크게 두어 포인터 시차(±10px)에도 가장자리가 비지 않는다 */
@media (min-width: 1024px) {
  .hero--photo > .hero__bg { inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); translate: calc(var(--mx, 0) * 10px) calc(var(--my, 0) * 8px); transition: translate 600ms var(--ease); will-change: transform, translate; }
}
@media (min-width: 1024px) and (max-height: 760px) { .hero__wordmark { width: min(100%, 380px); } .hero--photo h1 { font-size: clamp(24px, 1.4vw + 14px, 30px); } }

/* 포스터 카드: 세로로 긴 그림, 아래쪽 어두운 그늘 위에 꼬리표·제목·한 줄; 호버하면 그림이 1.04 커지고 설명 한 줄이 올라온다 */
.poster { position: relative; display: block; overflow: clip; border-radius: var(--r-lg); background: #1b1b1b; color: #fff; aspect-ratio: 10 / 11; isolation: isolate; }
@media (max-width: 639px) { .poster { aspect-ratio: 4 / 5; } }
.poster__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; z-index: 0; transition: transform 700ms var(--ease); }
.poster::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(10 9 16 / 0) 38%, rgb(10 9 16 / .55) 68%, rgb(10 9 16 / .9) 100%); }
.poster__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(20px, 2.4vw, 32px); display: grid; gap: var(--s-2); }
.poster__body h3 { font: var(--display-weight) var(--t-h3)/1.15 var(--font-display); letter-spacing: var(--display-tracking); color: #fff; }
.poster__tag { display: inline-flex; align-items: center; justify-self: start; gap: var(--s-2); height: 26px; padding: 0 var(--s-3); border-radius: var(--r-sm); font-size: var(--t-label); font-weight: 500; letter-spacing: .01em; background: rgb(255 255 255 / .16); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.poster__tag--live { background: #FFC63A; color: #17181c; }
.poster__sub { color: rgb(255 255 255 / .82); font-size: var(--t-small); }
.poster__more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 420ms var(--ease), opacity 320ms var(--ease); }
.poster__more > p { overflow: hidden; color: rgb(255 255 255 / .9); font-size: var(--t-small); line-height: 1.5; max-width: 44ch; }
.poster__plat { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); color: rgb(255 255 255 / .78); font-size: var(--t-label); }
@media (hover: hover) and (pointer: fine) {
  html:not([data-motion="off"]) .poster:hover .poster__img { transform: scale(1.04); }
  .poster:hover .poster__more, .poster:focus-visible .poster__more { grid-template-rows: 1fr; opacity: 1; }
}
@media (hover: none) { .poster__more { grid-template-rows: 1fr; opacity: 1; } }
.poster:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }

/* Soul Saver 워드마크(제목 글자 대신) */
.ss__wordmark { display: block; width: min(100%, 300px); height: auto; margin-bottom: var(--s-2); image-rendering: pixelated; }

/* 소식: 대표 카드 1 + 줄 카드 2 */
.news-grid { align-items: start; }
.news-feat { display: grid; gap: var(--s-4); color: inherit; }
.news-feat__media { position: relative; overflow: clip; aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: var(--surface); }
.news-feat__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.news-feat__body { display: grid; gap: var(--s-2); }
.news-feat__body h3 { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
.news-feat__body > p:last-child, .news-row > div > p:last-child { color: var(--muted); max-width: 56ch; }
.news__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--t-label); color: var(--muted); }
.news__meta time { font-variant-numeric: tabular-nums; }
.news__tag { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s-2); border-radius: var(--r-sm); background: color-mix(in oklab, var(--action) 12%, transparent); color: var(--action); font-weight: 500; letter-spacing: .01em; }
.news__tag--ss { background: color-mix(in oklab, #6d3be0 14%, transparent); color: #5b2fc9; }
.news-side { display: grid; gap: var(--s-5); align-content: start; }
.news-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); color: inherit; padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
.news-row:last-child { border-bottom: 0; padding-bottom: 0; }
.news-row > div { display: grid; gap: var(--s-2); align-content: start; }
.news-row h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
.news-row__media { position: relative; overflow: clip; aspect-ratio: 16 / 9; border-radius: var(--r-md); background: var(--surface); }
.news-row__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
@media (min-width: 640px) { .news-row { grid-template-columns: 200px minmax(0, 1fr); } .news-row__media { aspect-ratio: 4 / 3; } }
@media (hover: hover) and (pointer: fine) {
  html:not([data-motion="off"]) :is(.news-feat, .news-row):hover :is(.news-feat__media, .news-row__media) > img { transform: scale(1.03); }
  html:not([data-motion="off"]) :is(.news-feat, .news-row):hover h3 { color: var(--action); transition: color var(--dur) var(--ease); }
}

/* 푸터: 어두운 바탕, 로고 락업·링크 열·소셜·언어·법적 고지 */
.footer--dark.ground-inverse { --p-inv-bg: #17181c; --p-inv-surface: #242428; --p-inv-ink: #f6f5f2; --p-inv-muted: #a0a0a3; --p-inv-action: #7c99ff; padding-block: var(--s-9) var(--s-6); }
.footer--dark .footer__lede { font-size: var(--t-lead); max-width: 28ch; }
.footer--dark .socials a { border-radius: var(--r-sm); }
.footer--dark .socials a:hover { background: var(--surface); }
.footer--dark .footer__col ul a { color: var(--muted); }
.footer--dark .footer__col ul a:hover { color: var(--ink); }
.footer__lang { margin-top: var(--s-5); --mg-line: rgb(255 255 255 / .22); --mg-ink: #f6f5f2; --mg-bg: #17181c; --mg-muted: #a0a0a3; --mg-action: #7c99ff; }
.footer--dark .footer__legal { color: var(--muted); }
@media (max-width: 639px) { .footer--dark.ground-inverse { padding-top: var(--s-8); } }