/* 랜딩페이지 (루트 "/") — PlayStation 디자인 시스템 명품 적용 (DESIGN-playstation.md 준수)
   컨셉: "명찰 글래머샷" — 사진 0장, CSS 렌더 명찰 카드를 product render로.
   - 3-캔버스(black/white/플랜베어 블루)만, 밴드 색 전환이 유일한 divider
   - 디스플레이 weight 300, CTA는 pill(9999px), 카드 8px 플랫(resting shadow 금지)
   - 96px 섹션 리듬, chrome 그라데이션 0, 라디우스 {0, 8px, 9999px} */

:root {
    --black: #000000;
    --white: #ffffff;
    --blue: #1E3C96;          /* PlayStation Blue → 플랜베어 메인 */
    --blue-press: #16306f;
    --cyan: #1D9DD8;          /* eyebrow/텍스트 링크 전용 (면 색 금지) */
    --brand-light: #E8F0FE;   /* 명찰 역할칩 등 콘텐츠 디테일만 */

    --on-dark: #ffffff;
    --body-dark: rgba(255,255,255,0.66);
    --mute-dark: rgba(255,255,255,0.50);

    --ink: #14181f;
    --body-light: #3a3a3a;
    --hairline: #e6e6e6;

    --r-card: 8px;
    --r-pill: 9999px;
    --maxw: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
    background: var(--black);
    color: var(--on-dark);
    line-height: 1.5;
    word-break: keep-all;        /* 한글을 단어 단위로 줄바꿈 (글자 중간 끊김 방지) */
    overflow-wrap: break-word;   /* 너무 긴 토큰만 예외적으로 분리 */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }

.ps-wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 48px; }

/* ===== 타이포 스케일 (전부 weight 300) ===== */
/* 한글 디스플레이는 라틴 SST보다 가늘게 읽혀, 트래킹을 더 조여 옵티컬 밀도 확보 (weight 300 시그니처 유지) */
.ps-display-xl { font-size: 54px; font-weight: 300; line-height: 1.25; letter-spacing: -0.5px; }
.ps-display-lg { font-size: 44px; font-weight: 300; line-height: 1.25; letter-spacing: -0.3px; }
.ps-display-md { font-size: 35px; font-weight: 300; line-height: 1.25; letter-spacing: -0.2px; }
.ps-eyebrow {
    display: inline-block; font-size: 12px; font-weight: 500;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan);
}
.ps-lead { font-size: 18px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }

/* ===== CTA (전부 pill, height 48) ===== */
.ps-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 48px; padding: 0 28px; border-radius: var(--r-pill);
    font-size: 18px; font-weight: 700; letter-spacing: 0.45px;
    border: 1px solid transparent; cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.ps-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
/* primary: 검정/흰 밴드 위 — 블루 fill */
.ps-btn-primary { background: var(--blue); color: var(--on-dark); border-color: var(--blue); }
.ps-btn-primary:hover { background: var(--blue-press); border-color: var(--blue-press); }
.ps-btn-primary:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(0,0,0,0.16); }
/* 블루 밴드 위 — 흰 fill + 잉크 텍스트 */
.ps-btn-onblue { background: var(--white); color: var(--blue); border-color: var(--white); }
.ps-btn-onblue:hover { background: rgba(255,255,255,0.88); border-color: rgba(255,255,255,0.88); }
.ps-btn-onblue:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(0,0,0,0.20); }

/* ===== 00 Nav (검정 플랫) ===== */
.ps-nav { position: sticky; top: 0; z-index: 30; background: var(--black); }
.ps-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.ps-brand { display: flex; align-items: center; gap: 9px; color: var(--on-dark); }
.ps-brand-logo { height: 26px; width: auto; display: block; filter: brightness(0) invert(1); }
.ps-brand-name { font-size: 18px; font-weight: 600; letter-spacing: 0.1px; }
.ps-nav-right { display: flex; align-items: center; gap: 26px; }
.ps-navlink { font-size: 15px; font-weight: 400; color: var(--cyan); }
.ps-navlink:hover { color: #4fb6e4; }
.ps-nav-right .ps-btn { height: 40px; padding: 0 20px; font-size: 14px; }

/* ===== 01 Hero (검정) — 명찰 글래머샷 ===== */
.ps-hero { background: var(--black); padding: 96px 0 104px; overflow: hidden; }
.ps-hero-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px;
    gap: 56px; align-items: center;
}
.ps-hero-copy .ps-eyebrow { margin-bottom: 26px; }
.ps-hero-copy .ps-display-xl { color: var(--on-dark); }
.ps-hero-copy .ps-lead { color: var(--body-dark); margin-top: 24px; max-width: 38ch; }
.ps-hero-copy .ps-btn { margin-top: 40px; }
.ps-hero-stage { display: flex; align-items: center; justify-content: center; }
.ps-hero-stage .badge-render { width: min(360px, 100%); }

/* ===== 명찰 렌더 컴포넌트 (.badge-render) — 재사용 ===== */
.badge-render { position: relative; width: 300px; margin-top: 76px; }
.badge-render.tilt-l { transform: rotate(-2deg); }
.badge-render.tilt-r { transform: rotate(2deg); }
/* 랜야드 (V자 끈) */
.badge-strap { position: absolute; top: -74px; left: calc(50% - 3px); width: 6px; height: 80px; background: var(--blue); transform-origin: bottom center; }
.badge-strap.l { transform: rotate(-19deg); }
.badge-strap.r { transform: rotate(19deg); }
.badge-clip { position: absolute; top: -10px; left: calc(50% - 16px); width: 32px; height: 14px; background: var(--blue-press); border-radius: 3px; z-index: 2; }
.badge-clip::after { content: ""; position: absolute; top: 4px; left: 8px; width: 16px; height: 4px; background: rgba(255,255,255,0.35); border-radius: 2px; }
/* 카드 본체 (흰 카드, resting shadow 대신 inset 림라이트) */
.badge-card {
    position: relative; background: var(--white); border-radius: var(--r-card);
    padding: 26px 24px 22px; color: var(--ink);
    /* 제품 렌더(=명찰)의 cast shadow — 순흑 무대 위에 사물을 앉힌다 (chrome 카드 아님) */
    box-shadow: 0 28px 64px rgba(0,0,0,0.55), 0 10px 22px rgba(0,0,0,0.40),
                inset 0 0 0 1px rgba(255,255,255,0.65), inset 0 -1px 0 rgba(0,0,0,0.08);
}
.badge-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.badge-logo { height: 20px; width: auto; display: block; opacity: 0.92; }
.badge-role {
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
    padding: 4px 9px; border-radius: 4px; border: 1px solid transparent;
}
.badge-role.vip { background: var(--blue); color: #fff; border-color: var(--blue); }
.badge-role.staff { background: transparent; color: var(--blue); border-color: rgba(30,60,150,0.38); }
.badge-role.guest { background: #eef0f3; color: #5a6472; border-color: #dfe3ea; }
.badge-qr { width: 150px; height: 150px; margin: 0 auto 18px; display: block; }
.badge-qr svg { display: block; width: 100%; height: 100%; }
.badge-id { text-align: center; }
.badge-name { font-size: 21px; font-weight: 300; letter-spacing: 0.5px; color: var(--ink); }
.badge-org { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; color: #6b7280; margin-top: 6px; }

/* ===== 02 기능 (흰색) ===== */
.ps-features { background: var(--white); color: var(--ink); padding: 96px 0; }
.ps-features .ps-display-md { color: var(--ink); }
.ps-feat-grid {
    margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.ps-feat-card {
    background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-card);
    padding: 32px 28px 34px;
}
.ps-feat-idx { display: block; font-size: 52px; font-weight: 300; line-height: 1; letter-spacing: -1px; color: #c2c9d6; margin-bottom: 24px; }
.ps-feat-title { font-size: 22px; font-weight: 300; letter-spacing: 0.1px; color: var(--ink); }
.ps-feat-desc { margin-top: 12px; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--body-light); }

/* ===== 03 쇼케이스 (검정) — 명찰 컬렉션 ===== */
.ps-showcase { background: var(--black); padding: 96px 0; overflow: hidden; }
.ps-showcase-grid { display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: 48px; align-items: center; }
.ps-showcase-copy .ps-display-md { color: var(--on-dark); }
.ps-showcase-copy .ps-lead { color: var(--body-dark); margin-top: 22px; max-width: 36ch; }
.ps-collection { display: flex; align-items: center; justify-content: center; gap: 26px; }
.ps-collection .badge-render { width: min(200px, 70vw); margin-top: 70px; }
.ps-collection .badge-card { padding: 18px 16px 16px; }
.ps-collection .badge-qr { width: 96px; height: 96px; margin-bottom: 12px; }
.ps-collection .badge-name { font-size: 15px; }
.ps-collection .badge-logo { height: 15px; }
/* 부채꼴 진열: 좌우 펼침, 중앙은 들어올려 위계 */
.ps-collection .tilt-l { transform: rotate(-6deg); }
.ps-collection .tilt-r { transform: rotate(6deg); }
.ps-collection .badge-mid { position: relative; z-index: 2; transform: translateY(-26px) scale(1.05); }

/* ===== 04 매니페스토 (흰색) ===== */
.ps-manifesto { background: var(--white); color: var(--ink); padding: 96px 0; }
.ps-manifesto .ps-display-lg { color: var(--ink); }
.ps-manifesto-sub { color: var(--body-light); margin-top: 26px; max-width: 46ch; }

/* ===== 05 도입 문의 + 푸터 (플랜베어 블루, 유일한 블루 밴드) ===== */
.ps-contact { background: var(--blue); color: var(--on-dark); padding: 96px 0 0; }
.ps-contact .ps-display-lg { color: var(--on-dark); }
.ps-contact-lines { margin-top: 44px; display: flex; gap: 56px; flex-wrap: wrap; }
.ps-contact-item { display: flex; flex-direction: column; gap: 10px; }
.ps-contact-label { font-size: 12px; font-weight: 600; letter-spacing: 0.22em; color: rgba(255,255,255,0.62); }
.ps-contact-value { font-size: 24px; font-weight: 300; letter-spacing: 0.2px; color: var(--on-dark); }
.ps-contact .ps-btn { margin-top: 44px; }
.ps-footer {
    margin-top: 88px; border-top: 1px solid rgba(255,255,255,0.16);
    display: flex; align-items: center; justify-content: space-between;
    padding: 26px 0 30px; flex-wrap: wrap; gap: 10px;
}
.ps-footer-info { font-size: 13px; color: rgba(255,255,255,0.66); }
.ps-footer-login { font-size: 13px; font-weight: 600; color: var(--on-dark); }
.ps-footer-login:hover { color: var(--brand-light); }

/* ===== 반응형 ===== */
@media (max-width: 960px) {
    .ps-hero-grid { grid-template-columns: 1fr; gap: 56px; }
    .ps-hero-copy { order: 1; }
    .ps-hero-stage { order: 2; }
    .ps-showcase-grid { grid-template-columns: 1fr; gap: 48px; }
    .ps-feat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .ps-wrap { padding: 0 24px; }
    .ps-nav-right { gap: 14px; }
    .ps-navlink { font-size: 13px; }
    .ps-hero { padding: 64px 0 72px; }
    .ps-display-xl { font-size: 36px; }
    .ps-display-lg { font-size: 30px; }
    .ps-display-md { font-size: 27px; }
    .ps-features, .ps-showcase, .ps-contact { padding-top: 64px; padding-bottom: 64px; }
    .ps-manifesto { padding: 72px 0; }
    .ps-feat-grid { grid-template-columns: 1fr; }
    .ps-collection { flex-wrap: wrap; gap: 16px; align-items: flex-start; }
    .ps-collection .tilt-l, .ps-collection .tilt-r, .ps-collection .badge-mid { transform: none; }
    .ps-contact { padding-bottom: 0; }
    .ps-contact-lines { gap: 28px; }
}