/* products.css — /products/ 제품 소개(1030 형 49933). 그리는 쪽 = products.js, 머리줄 = /bl/a/site-head.*.css.
   값은 :root 토큰만(사이트 첫 화면과 같은 색: 바탕 #06070A · 판 #0C0E13 · 글자 #EDEFF3 · 강조 #C6FF3D). 보라-파랑 덮개·알약·광택 없음.
   기준 수치(1030 측정): Pragmatic Play 게임 쪽 = 머리 100 · 게임 화면 940 폭 바로 아래 · 제목 24/700 · 본문 16/1.6,
   Hacksaw 게임 쪽 = 머리 90 · 메뉴 18/700 흰색 · 단추 반경 4 · 큰 제목 48/48 · "GAME DATA" 표. */
:root{
  --pd-bg:#06070A; --pd-panel:#0C0E13; --pd-line:rgba(255,255,255,0.08); --pd-line2:rgba(255,255,255,0.14);
  --pd-white:#FFFFFF; --pd-ink:#EDEFF3; --pd-ink2:#C9CDD6; --pd-mut:#A4AAB8; --pd-acc:#C6FF3D; --pd-on-acc:#06070A; --pd-hover:#EDEFF3;
  --pd-max:1280px; --pd-gx:clamp(20px,4vw,56px); --pd-sec:clamp(88px,11vw,152px);
  --pd-r:6px; --pd-r2:12px; --pd-ease:cubic-bezier(.23,1,.32,1);
  --pd-display:Unbounded,'Pretendard Variable',Pretendard,system-ui,sans-serif;
  --pd-body:'Pretendard Variable',Pretendard,system-ui,sans-serif;
  --pd-mono:'JetBrains Mono',ui-monospace,monospace;
  --pd-shadow:0 24px 64px -24px rgba(0,0,0,0.8),0 2px 8px rgba(0,0,0,0.4);
}
html,body{margin:0;background:var(--pd-bg);color:var(--pd-ink);font-family:var(--pd-body);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
::selection{background:var(--pd-acc);color:var(--pd-on-acc)}
img,video{display:block;max-width:100%}
main{overflow-x:clip}
.pd-wrap{width:100%;max-width:calc(var(--pd-max) + 2 * var(--pd-gx));margin:0 auto;padding:0 var(--pd-gx)}

/* --- 첫 화면: 게임 소개 영상 꽉 차게 + 이름 + 한 줄 + 플레이 --- */
.pd-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:112px 0 40px;isolation:isolate}
.pd-hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--pd-bg)}
.pd-hero-media video,.pd-hero-media img{width:100%;height:100%;object-fit:cover}
/* 글자 쪽(왼쪽 아래)만 어둡게 — 색 덮개 아님, 바탕색 그대로 */
.pd-hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to top,var(--pd-bg) 0%,rgba(6,7,10,0.72) 30%,rgba(6,7,10,0.2) 62%,rgba(6,7,10,0.35) 100%),
  linear-gradient(to right,rgba(6,7,10,0.7) 0%,rgba(6,7,10,0) 60%)}
.pd-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:48px}
.pd-kick{margin:0 0 20px;font-family:var(--pd-mono);font-size:13px;font-weight:600;letter-spacing:0.14em;color:var(--pd-acc);text-transform:uppercase}
.pd-h1{margin:0;font-family:var(--pd-display);font-weight:800;font-size:clamp(48px,9.2vw,148px);line-height:0.9;letter-spacing:-0.035em;color:var(--pd-white)}
.pd-h1 span{display:block}
.pd-lead{margin:28px 0 0;max-width:560px;font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--pd-ink);text-wrap:pretty}
.pd-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.pd-phone{height:min(58vh,600px);width:auto;aspect-ratio:780/1688;border-radius:20px;overflow:hidden;border:1px solid var(--pd-line2);box-shadow:var(--pd-shadow);background:var(--pd-panel)}
.pd-phone img{width:100%;height:100%;object-fit:cover}
.pd-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:56px 0 0;border-top:1px solid var(--pd-line2)}
.pd-fact{padding:20px 20px 0 0;display:flex;flex-direction:column-reverse;gap:6px;min-width:0}
.pd-fact dt{font-size:13px;font-weight:500;color:var(--pd-ink2)}
.pd-fact dd{margin:0;font-family:var(--pd-display);font-size:clamp(22px,2.2vw,30px);font-weight:500;color:var(--pd-white);white-space:nowrap}

/* --- 단추: 각진 6px, 보이는 높이 44 --- */
.pd-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;border-radius:var(--pd-r);
  font:700 15px/1 var(--pd-body);white-space:nowrap;cursor:pointer;transition:transform 140ms var(--pd-ease),background-color 160ms ease,border-color 160ms ease,color 160ms ease}
.pd-btn svg{width:16px;height:16px;flex:none}
.pd-btn:active{transform:scale(.97)}
.pd-btn:focus-visible{outline:2px solid var(--pd-acc);outline-offset:3px}
.pd-btn-p{background:var(--pd-acc);color:var(--pd-on-acc)}
.pd-btn-g{border:1px solid var(--pd-line2);color:var(--pd-ink);background:rgba(6,7,10,0.35)}
@media (hover:hover) and (pointer:fine){
  .pd-btn-p:hover{background:var(--pd-hover)}
  .pd-btn-g:hover{border-color:var(--pd-acc);color:var(--pd-acc)}
}

/* --- 구역 공통 --- */
.pd-sec{padding:var(--pd-sec) 0 0}
.pd-sec:last-child{padding-bottom:var(--pd-sec)}
.pd-sk{margin:0 0 16px;font-family:var(--pd-mono);font-size:13px;font-weight:600;letter-spacing:0.14em;color:var(--pd-acc);text-transform:uppercase}
.pd-h2{margin:0;font-family:var(--pd-display);font-weight:700;font-size:clamp(26px,3.2vw,44px);line-height:1.12;letter-spacing:-0.02em;color:var(--pd-white);text-wrap:balance}
.pd-p{margin:20px 0 0;max-width:640px;font-size:17px;line-height:1.65;color:var(--pd-ink2);text-wrap:pretty}
.pd-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 48px;align-items:end;margin-bottom:48px}
.pd-head .pd-p{margin:0}

/* 01 게임 화면 */
.pd-shot{margin:0;border-radius:var(--pd-r2);overflow:hidden;border:1px solid var(--pd-line2);background:var(--pd-panel);box-shadow:var(--pd-shadow)}
.pd-shot img{width:100%;height:auto}

/* 02 한 판 */
.pd-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.pd-step{display:flex;flex-direction:column;gap:12px;min-width:0}
.pd-step-img{border-radius:var(--pd-r2);overflow:hidden;border:1px solid var(--pd-line);background:var(--pd-panel);aspect-ratio:520/770}
.pd-step-img img{width:100%;height:100%;object-fit:cover}
.pd-step-no{margin-top:8px;font-family:var(--pd-mono);font-size:13px;font-weight:600;color:var(--pd-acc)}
.pd-step-t{margin:0;font-size:19px;font-weight:700;line-height:1.3;color:var(--pd-white)}
.pd-step-p{margin:0;font-size:15px;line-height:1.6;color:var(--pd-ink2)}

/* 03 게임 정보 표 */
.pd-data-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:start}
.pd-dl{margin:0;border-top:1px solid var(--pd-line2)}
.pd-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--pd-line)}
.pd-row dt{font-size:15px;color:var(--pd-ink2)}
.pd-row dd{margin:0;font-size:16px;font-weight:600;color:var(--pd-white);overflow-wrap:anywhere}

/* 04 공정성 */
.pd-fair{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pd-fair li{background:var(--pd-panel);border:1px solid var(--pd-line);border-radius:var(--pd-r2);padding:28px;display:flex;flex-direction:column;gap:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.04)}
.pd-fair-no{font-family:var(--pd-mono);font-size:13px;font-weight:600;color:var(--pd-acc)}
.pd-fair h3,.pd-ops h3{margin:0;font-size:19px;font-weight:700;line-height:1.3;color:var(--pd-white)}
.pd-fair p,.pd-ops p{margin:0;font-size:15px;line-height:1.6;color:var(--pd-ink2)}
.pd-more{margin-top:32px}

/* 05 운영사 */
.pd-ops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px}
.pd-ops li{border-top:2px solid var(--pd-acc);padding-top:24px;display:flex;flex-direction:column;gap:12px}

/* 상태: 불러오는 중(빈 판) · 오류 */
.pd-state{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:120px 20px;text-align:center}
.pd-state p{margin:0;font-size:16px;color:var(--pd-ink)}
.pd-skel{width:min(560px,80vw);height:12px;border-radius:4px;background:linear-gradient(90deg,var(--pd-panel) 0%,#161922 50%,var(--pd-panel) 100%);background-size:200% 100%;animation:pd-sh 1.2s linear infinite}
@keyframes pd-sh{from{background-position:200% 0}to{background-position:-200% 0}}

/* 한·중·일 글자는 고정폭 글꼴·넓은 자간이 어색해 본문 글꼴로 */
:lang(ko) .pd-kick,:lang(ko) .pd-sk,:lang(ja) .pd-kick,:lang(ja) .pd-sk,:lang(zh) .pd-kick,:lang(zh) .pd-sk,:lang(th) .pd-kick,:lang(th) .pd-sk{font-family:var(--pd-body);font-weight:700;letter-spacing:0.04em}

/* --- 폭별 --- */
@media (max-width:1023px){
  .pd-hero-grid{grid-template-columns:1fr}
  .pd-phone{display:none}
  .pd-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-head,.pd-data-grid{grid-template-columns:1fr}
  .pd-fair,.pd-ops{grid-template-columns:1fr;gap:16px}
  .pd-ops{gap:32px}
}
@media (max-width:759px){
  .pd-hero{padding:96px 0 80px}   /* 아래 80 = 상담 단추(16+44) 자리 — 첫 화면 숫자와 안 겹치게 */
  .pd-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-fact{padding-bottom:16px}
  .pd-cta .pd-btn{flex:1 1 auto}
  .pd-steps{gap:16px 12px}
  .pd-step-t{font-size:17px}
  .pd-step-p{font-size:14px}
  .pd-row{grid-template-columns:1fr;gap:4px}
  .pd-fair li{padding:24px}
  .pd-shot{border-radius:16px;max-width:420px;margin:0 auto}
}
@media (prefers-reduced-motion:reduce){ .pd-btn{transition:none} .pd-skel{animation:none} }