/* ==========================================================================
   app-parkgolf.css — 「파크골프 친구」 앱 소개 페이지 (/apps/parkgolf/)
   색은 앱 자체에서 가져온다: 잔디 딥그린 · 민트 · BLE 버튼의 라임
   ========================================================================== */

body[data-page="app-parkgolf"] {
    --pg-green-900: #0b3320;
    --pg-green-800: #14532d;
    --pg-green-600: #167a45;
    --pg-green-500: #1f9d55;
    --pg-mint: #7ee2a8;
    --pg-mint-soft: #d8f5e5;
    --pg-lime: #c8f24a;
    --pg-sand: #f6f4ec;
    --pg-ink: #17251d;
    --pg-ink-soft: #55655c;
    --pg-line: #dfe7e1;
    --pg-radius: 18px;
    background: #fff;
    color: var(--pg-ink);
}

body[data-page="app-parkgolf"] .pg-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

body[data-page="app-parkgolf"] h2,
body[data-page="app-parkgolf"] h3 {
    text-wrap: balance;
    letter-spacing: -0.02em;
}

/* ── 섹션 공통 ─────────────────────────────────────── */
.pg-section { padding: 84px 0; }
.pg-section--sand { background: var(--pg-sand); }
.pg-section--dark {
    background: linear-gradient(160deg, var(--pg-green-900), var(--pg-green-800));
    color: #eaf7f0;
}
.pg-eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pg-green-600);
    margin-bottom: 12px;
}
.pg-section--dark .pg-eyebrow { color: var(--pg-mint); }
.pg-h2 {
    font-size: clamp(1.65rem, 3.6vw, 2.5rem);
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 14px;
}
.pg-lead {
    font-size: 1.03rem;
    line-height: 1.85;
    color: var(--pg-ink-soft);
    max-width: 62ch;
    margin: 0;
}
.pg-section--dark .pg-lead { color: #b8dcc7; }

/* ── 히어로 ────────────────────────────────────────── */
.pg-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(1200px 520px at 78% 18%, #1c6b3f 0%, transparent 62%),
                linear-gradient(155deg, var(--pg-green-900) 0%, #0e4527 62%, var(--pg-green-800) 100%);
    color: #fff;
    padding: 92px 0 76px;
}
.pg-hero::after {
    content: "";
    position: absolute;
    inset: auto -10% -60% -10%;
    height: 220px;
    background: radial-gradient(60% 100% at 50% 0, rgba(126, 226, 168, .22), transparent 70%);
    pointer-events: none;
}
.pg-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 48px;
    align-items: center;
}
.pg-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(126, 226, 168, .45);
    color: var(--pg-mint);
    font-size: .84rem;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 999px;
    margin-bottom: 20px;
}
.pg-hero h1 {
    font-size: clamp(2.1rem, 5.4vw, 3.5rem);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -0.035em;
    margin: 0 0 18px;
}
.pg-hero h1 em { font-style: normal; color: var(--pg-mint); }
.pg-hero-sub {
    font-size: 1.05rem;
    line-height: 1.85;
    color: #c8e6d5;
    margin: 0 0 30px;
    max-width: 46ch;
}
.pg-hero-app {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}
.pg-hero-app img {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
.pg-hero-app div { font-size: .92rem; line-height: 1.5; color: #bfe3ce; }
.pg-hero-app strong { display: block; color: #fff; font-size: 1.05rem; }

/* 다운로드 버튼 */
.pg-dl {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.pg-dl a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    font-size: .98rem;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.pg-dl a i { font-size: 1.3rem; }
.pg-dl .pg-dl-primary { background: var(--pg-mint); color: #0b3320; box-shadow: 0 10px 26px rgba(126, 226, 168, .28); }
.pg-dl .pg-dl-ghost { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
.pg-dl a:hover { transform: translateY(-2px); }
.pg-dl a:focus-visible { outline: 3px solid var(--pg-lime); outline-offset: 3px; }
.pg-dl-note { margin: 14px 0 0; font-size: .84rem; color: #9ccdb2; }

.pg-hero-shot { justify-self: center; }
.pg-hero-shot img {
    width: min(300px, 76vw);
    border-radius: 22px;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .42);
    display: block;
}

/* ── 모션 스테이지 (핵심 설명) ─────────────────────── */
.pg-stage-outer { background: var(--pg-sand); padding: 84px 0; }
.pg-stage {
    position: relative;
    margin-top: 34px;
    border-radius: 24px;
    background: linear-gradient(170deg, #ffffff 0%, #f0f7f2 100%);
    border: 1px solid var(--pg-line);
    box-shadow: 0 18px 44px rgba(11, 51, 32, .08);
    padding: 30px 20px 22px;
    perspective: 1200px;
    overflow: hidden;
}
.pg-stage-scene {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.05fr 1fr;
    align-items: center;
    gap: 10px;
    min-height: 330px;
    transform-style: preserve-3d;
}

/* (1) BLE 버튼 — 손 아이콘은 3D 회전을 물려받지 않도록 버튼 밖에 둔다 */
.pg-actor {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding-top: 26px;
}
.pg-btn3d {
    position: relative;
    width: 140px;
    height: 140px;
    transform: rotateX(30deg) rotateZ(-8deg);
    transform-style: preserve-3d;
}
.pg-btn-body {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #eaff9a 0%, var(--pg-lime) 48%, #a5d128 100%);
    box-shadow: 0 13px 0 #7fa81d, 0 30px 34px rgba(11, 51, 32, .28);
}
.pg-btn-top {
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, #f7ffd0, #cbf055 72%);
    box-shadow: inset 0 3px 7px rgba(255, 255, 255, .9), inset 0 -3px 8px rgba(120, 160, 20, .35);
}
.pg-btn-hole {
    position: absolute;
    right: 12px;
    bottom: 20px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #f4f7ee;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35);
}
.pg-btn-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 3px solid rgba(31, 157, 85, .55);
    opacity: 0;
}
.pg-hand {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: 4px;
    color: var(--pg-green-800);
    font-size: 2.5rem;
    line-height: 1;
    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .22));
    z-index: 3;
}
.pg-actor-label {
    font-size: .84rem;
    font-weight: 700;
    color: var(--pg-ink-soft);
}
.pg-count {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    background: var(--pg-green-800);
    color: #fff;
    border-radius: 999px;
    padding: 6px 16px;
    font-weight: 800;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}
.pg-count small { font-size: .78rem; font-weight: 600; opacity: .8; }

/* (2) 무선 신호 */
.pg-signal { position: relative; height: 200px; }
.pg-signal svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* 정지 상태에서도 경로가 희미하게 보이도록 기본 투명도를 준다(GSAP가 덮어쓴다) */
.pg-wave { fill: none; stroke: var(--pg-green-500); stroke-width: 3; stroke-linecap: round; opacity: .16; }
.pg-dot {
    position: absolute;
    top: 0; left: 0;
    width: 15px;
    height: 15px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--pg-green-500);
    box-shadow: 0 0 0 6px rgba(31, 157, 85, .18);
    opacity: 0;
}
.pg-signal-label {
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    font-size: .8rem;
    font-weight: 700;
    color: var(--pg-green-600);
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 999px;
    padding: 5px 13px;
    white-space: nowrap;
    opacity: 0;
}

/* (3) 주머니 속 폰 */
/* 폰은 주머니 천 뒤에 두고, 위쪽 일부만 보이게 해서 '꽂혀 있는' 모습을 만든다 */
.pg-pocket-group { position: relative; transform-style: preserve-3d; padding-top: 92px; }
.pg-pocket {
    position: relative;
    width: min(230px, 60vw);
    height: 250px;
    margin: 0 auto;
    transform: rotateY(-10deg) rotateX(2deg);
    transform-style: preserve-3d;
}
.pg-pocket-cloth {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 158px;
    border-radius: 10px 10px 26px 26px;
    background: linear-gradient(170deg, #5478b4 0%, #3a5788 100%);
    box-shadow: 0 18px 34px rgba(11, 51, 32, .22), inset 0 3px 0 rgba(255, 255, 255, .22);
    z-index: 2;
}
.pg-pocket-seam {
    position: absolute;
    left: 14px; right: 14px; top: 18px;
    height: 0;
    border-top: 3px dashed rgba(255, 255, 255, .34);
}
.pg-phone {
    position: absolute;
    left: 50%;
    top: 0;
    width: 112px;
    height: 190px;
    margin-left: -56px;
    border-radius: 16px;
    background: #12211a;
    border: 3px solid #24352c;
    box-shadow: 0 12px 22px rgba(0, 0, 0, .32);
    overflow: hidden;
    z-index: 1;
}
.pg-phone-screen {
    position: absolute;
    inset: 4px;
    border-radius: 9px;
    background: linear-gradient(180deg, #dff3e6, #f3fbf6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 11px;
    gap: 2px;
    color: var(--pg-green-800);
}
.pg-phone-hole { font-size: .6rem; font-weight: 700; letter-spacing: .03em; color: #4d7a60; }
.pg-phone-score { font-size: 1.9rem; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pg-phone-tag { font-size: .64rem; font-weight: 800; color: #b45309; }
.pg-pocket-caption {
    text-align: center;
    margin-top: 14px;
    font-size: .84rem;
    color: var(--pg-ink-soft);
}

/* 음성 말풍선 */
.pg-voice {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-46%);
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 2px solid var(--pg-green-500);
    border-radius: 16px;
    padding: 10px 16px;
    box-shadow: 0 12px 26px rgba(11, 51, 32, .18);
    white-space: nowrap;
    opacity: 0;
    z-index: 3;
}
.pg-voice::after {
    content: "";
    position: absolute;
    left: 34px;
    bottom: -9px;
    width: 14px; height: 14px;
    background: #fff;
    border-right: 2px solid var(--pg-green-500);
    border-bottom: 2px solid var(--pg-green-500);
    transform: rotate(45deg);
}
.pg-voice-text { font-weight: 800; color: var(--pg-green-800); font-size: 1rem; }
.pg-eq { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.pg-eq i {
    display: block;
    width: 4px;
    height: 6px;
    border-radius: 2px;
    background: var(--pg-green-500);
}

/* 스텝 캡션 */
.pg-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 26px;
}
.pg-step {
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 14px;
    padding: 14px 16px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.pg-step.is-on {
    border-color: var(--pg-green-500);
    box-shadow: 0 10px 22px rgba(31, 157, 85, .16);
    transform: translateY(-3px);
}
.pg-step b { display: block; font-size: .95rem; margin-bottom: 3px; color: var(--pg-green-800); }
.pg-step span { font-size: .84rem; color: var(--pg-ink-soft); line-height: 1.6; }

.pg-stage-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 22px;
}
.pg-ctrl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--pg-green-500);
    background: #fff;
    color: var(--pg-green-800);
    font-weight: 700;
    font-size: .9rem;
    padding: 10px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.pg-ctrl:hover { background: var(--pg-green-500); color: #fff; }
.pg-ctrl:focus-visible { outline: 3px solid var(--pg-lime); outline-offset: 2px; }
/* display 지정이 [hidden]을 이기지 못하도록 — JS가 숨기는 버튼이 있다 */
.pg-ctrl[hidden] { display: none !important; }

/* 정지 상태에서도 음성 파형처럼 보이게 기본 높이를 준다 */
.pg-eq i:nth-child(1) { height: 8px; }
.pg-eq i:nth-child(2) { height: 15px; }
.pg-eq i:nth-child(3) { height: 21px; }
.pg-eq i:nth-child(4) { height: 13px; }
.pg-eq i:nth-child(5) { height: 7px; }

/* ── 입력 방식 3종 ─────────────────────────────────── */
.pg-ways {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 38px;
}
.pg-way {
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: var(--pg-radius);
    padding: 26px 24px;
    transition: transform .22s ease, box-shadow .22s ease;
}
.pg-way:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(11, 51, 32, .1); }
.pg-way-ico {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    color: #fff;
    background: linear-gradient(140deg, var(--pg-green-500), var(--pg-green-800));
    margin-bottom: 16px;
}
.pg-way h3 { font-size: 1.15rem; font-weight: 800; margin: 0 0 8px; }
.pg-way p { margin: 0; font-size: .94rem; line-height: 1.75; color: var(--pg-ink-soft); }

/* ── 기능 목록 ─────────────────────────────────────── */
.pg-feats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 34px;
}
.pg-feat {
    display: flex;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 14px;
    padding: 20px;
}
.pg-feat i { color: var(--pg-green-500); font-size: 1.15rem; margin-top: 3px; }
.pg-feat b { display: block; margin-bottom: 4px; font-size: .98rem; }
.pg-feat span { font-size: .89rem; line-height: 1.7; color: var(--pg-ink-soft); }

/* ── 스크린샷 ─────────────────────────────────────── */
.pg-shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px;
    margin-top: 34px;
}
.pg-shot { text-align: center; }
.pg-shot img {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .3);
    display: block;
}
.pg-shot figcaption { margin-top: 12px; font-size: .86rem; color: #b8dcc7; line-height: 1.6; }

/* ── 시니어 사용성 ─────────────────────────────────── */
.pg-senior {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 44px;
    align-items: center;
}
.pg-senior img { width: 100%; border-radius: var(--pg-radius); box-shadow: 0 16px 34px rgba(11, 51, 32, .14); }
.pg-list { margin: 22px 0 0; padding: 0; list-style: none; }
.pg-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 14px;
    font-size: .98rem;
    line-height: 1.75;
    color: var(--pg-ink-soft);
}
.pg-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--pg-green-500);
}
.pg-list li strong { color: var(--pg-ink); }

/* ── 가격 ──────────────────────────────────────────── */
.pg-price {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 34px;
}
.pg-price-card {
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: var(--pg-radius);
    padding: 26px 24px;
    text-align: center;
}
.pg-price-card.is-free { border-color: var(--pg-green-500); box-shadow: 0 12px 28px rgba(31, 157, 85, .14); }
.pg-price-card h3 { font-size: 1.02rem; margin: 0 0 10px; font-weight: 800; }
.pg-price-num { font-size: 1.85rem; font-weight: 900; color: var(--pg-green-800); font-variant-numeric: tabular-nums; }
.pg-price-card p { margin: 10px 0 0; font-size: .87rem; color: var(--pg-ink-soft); line-height: 1.7; }
.pg-price-note {
    margin: 22px 0 0;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--pg-line);
    border-left: 4px solid var(--pg-green-500);
    border-radius: 12px;
    font-size: .92rem;
    line-height: 1.8;
    color: var(--pg-ink-soft);
}
.pg-price-note strong { color: var(--pg-ink); }
.pg-price-note a { color: var(--pg-green-600); font-weight: 700; }

/* ── FAQ ───────────────────────────────────────────── */
.pg-faq { margin-top: 34px; display: grid; gap: 12px; }
.pg-faq details {
    background: #fff;
    border: 1px solid var(--pg-line);
    border-radius: 14px;
    padding: 18px 22px;
}
.pg-faq summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .8rem;
    color: var(--pg-green-500);
    transition: transform .2s ease;
}
.pg-faq details[open] summary::after { transform: rotate(180deg); }
.pg-faq p { margin: 12px 0 0; font-size: .94rem; line-height: 1.8; color: var(--pg-ink-soft); }

/* ── 하단 CTA ─────────────────────────────────────── */
.pg-cta { text-align: center; }
.pg-cta .pg-dl { justify-content: center; }
.pg-cta h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 900; margin: 0 0 12px; }
.pg-cta p { color: #b8dcc7; margin: 0 0 26px; line-height: 1.8; }

/* ── 반응형 ───────────────────────────────────────── */
@media (max-width: 900px) {
    .pg-hero-grid, .pg-senior { grid-template-columns: 1fr; gap: 34px; }
    .pg-hero { padding: 68px 0 56px; }
    .pg-stage-scene { grid-template-columns: 1fr; gap: 26px; min-height: 0; }
    .pg-signal { height: 108px; }
    .pg-steps { grid-template-columns: 1fr; }
    .pg-section, .pg-stage-outer { padding: 62px 0; }
    .pg-pocket { transform: none; }
}

/* 모션 최소화 설정 존중 — 최종 상태를 그대로 보여준다 */
@media (prefers-reduced-motion: reduce) {
    .pg-voice, .pg-signal-label, .pg-dot { opacity: 1 !important; }
    .pg-wave { opacity: .5 !important; }
    .pg-way, .pg-dl a, .pg-step { transition: none !important; }
}