/* ══════════════════════════════════════════════════════════
   PG 건강검진 나라 — 공용 사이트 스타일 (상단 네비 + 캐릭터 카드 + 공통)
   styles.css 의 토큰을 사용. 각 페이지에서 styles.css 다음에 link.
   ══════════════════════════════════════════════════════════ */

/* ══ 상단 네비 (카테고리 탭) ══ */
.g-nav{position:sticky;top:0;z-index:120;background:rgba(255,255,255,.97);border-bottom:1px solid var(--s200)}
.g-nav-in{max-width:560px;margin:0 auto;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.g-nav-brand{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:900;color:var(--navy);letter-spacing:-.5px;white-space:nowrap;text-decoration:none}
.g-nav-brand .dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--azure),var(--azure-deep));box-shadow:0 0 0 4px var(--azure-soft);flex-shrink:0}
.g-nav-links{display:flex;align-items:center;gap:2px}
.g-tab{font-family:inherit;font-size:12px;font-weight:700;color:var(--s500);background:none;border:none;cursor:pointer;padding:7px 9px;border-radius:9px;white-space:nowrap;transition:color .15s,background .15s;text-decoration:none}
.g-tab:hover{color:var(--navy);background:var(--s100)}
.g-tab.on{color:var(--navy);background:var(--s100)}
.g-tab.go{color:#fff;background:linear-gradient(130deg,var(--navy),var(--azure-deep));padding:8px 12px;box-shadow:0 8px 18px -10px rgba(30,63,184,.7)}
.g-tab.go:hover{background:linear-gradient(130deg,var(--navy),var(--azure-deep))}
@media(max-width:380px){.g-tab{padding:7px 6px;font-size:11px}.g-nav-brand{font-size:12.5px}}

/* ══ 섹션 라벨 ══ */
.g-sec{padding:30px 22px 4px;max-width:560px;margin:0 auto}
.g-sec-lbl{font-size:11px;font-weight:700;color:var(--s400);letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.g-sec-lbl::after{content:'';flex:1;height:1px;background:var(--s200)}
.g-sec-t{font-size:20px;font-weight:900;color:var(--navy);letter-spacing:-.6px;margin-top:9px;line-height:1.32;text-wrap:pretty;word-break:keep-all}
.g-sec-d{font-size:13px;color:var(--s500);line-height:1.6;margin-top:7px;font-weight:500}

/* ══ 캐릭터 카드 팝업 (공용) ══ */
#cardOverlay .popup{position:relative}
.g-pop-top{background:radial-gradient(95% 85% at 50% 0%,color-mix(in srgb,var(--accent,#2F5BFF) 38%,#0F1733),#0F1733);margin:-24px -22px 0;padding:26px 22px 22px;text-align:center;color:#fff;border-radius:24px 24px 0 0}
.g-pop-chips{display:flex;gap:7px;justify-content:center;margin-bottom:12px}
.g-pop-chip{font-size:10.5px;font-weight:800;padding:5px 12px;border-radius:20px;white-space:nowrap}
.g-pop-chip.ghost{background:rgba(255,255,255,.12);color:rgba(255,255,255,.72)}
.g-pop-char{position:relative;width:108px;height:108px;margin:0 auto 4px}
.g-pop-halo{position:absolute;inset:0;border-radius:50%}
.g-pop-em{position:absolute;left:50%;top:50%;font-size:66px;line-height:1;text-shadow:0 8px 14px rgba(0,0,0,.4)}
.g-pop-name{font-size:25px;font-weight:900;letter-spacing:-.9px;margin-bottom:12px}
.g-evo{display:flex;align-items:center;justify-content:center;gap:5px}
.g-evo-em{font-size:20px;opacity:.3;line-height:1;transition:all .3s}
.g-evo-em.cur{font-size:27px;opacity:1;background:rgba(255,255,255,.1);border:1.5px solid rgba(200,162,74,.45);border-radius:11px;padding:5px 7px;box-shadow:0 0 20px rgba(200,162,74,.16)}
.g-evo-arr{font-size:12px;color:rgba(255,255,255,.3)}
.g-pop-body{padding:20px 2px 0}
.g-pop-desc{font-size:14.5px;color:var(--s700);line-height:1.8;font-weight:500;margin-bottom:16px;text-wrap:pretty}
.g-quote{border-left:3px solid var(--azure);background:var(--s50);border-radius:0 12px 12px 0;padding:13px 16px;margin-bottom:18px}
.g-quote-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.4px;padding:3px 9px;border-radius:7px;margin-bottom:8px;white-space:nowrap}
.g-quote-tx{font-size:14.5px;font-weight:700;color:var(--navy);line-height:1.6;letter-spacing:-.3px;text-wrap:pretty}
.g-facts{display:flex;flex-direction:column;gap:0;background:var(--white);border:1px solid var(--s200);border-radius:var(--radius);overflow:hidden;box-shadow:var(--sh-sm);margin-bottom:16px}
.g-fact{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px}
.g-fact+.g-fact{border-top:1px solid var(--s200)}
.g-fact-k{font-size:12px;font-weight:700;color:var(--s500);white-space:nowrap}
.g-fact-v{font-size:13.5px;font-weight:800;color:var(--navy);text-align:right;display:flex;align-items:center;gap:8px}
.g-dots{display:inline-flex;gap:4px}
.g-dot{width:7px;height:7px;border-radius:50%;background:var(--s200)}
.g-dot.on{background:var(--s400)}
.g-next{display:flex;align-items:center;gap:13px;background:linear-gradient(135deg,#fff,#F4F7FF);border:1px solid var(--s200);border-radius:var(--radius);padding:14px 16px;margin-bottom:18px;box-shadow:var(--sh-sm)}
.g-next-em{font-size:34px;line-height:1;flex-shrink:0}
.g-next-lbl{font-size:10px;font-weight:800;color:var(--azure);letter-spacing:.5px;text-transform:uppercase;margin-bottom:3px}
.g-next-nm{font-size:14.5px;font-weight:800;color:var(--navy);letter-spacing:-.3px;line-height:1.35}
.g-next-tag{margin-left:auto;font-size:18px;color:var(--azure);font-weight:800}
.g-next.final{background:linear-gradient(135deg,#FBF6E8,#fff)}
.g-pop-nav{display:flex;gap:9px;margin-bottom:12px}
.g-pnav{flex:1;height:46px;background:var(--white);border:1.5px solid var(--s200);border-radius:13px;font-family:inherit;font-size:13px;font-weight:700;color:var(--s700);cursor:pointer;transition:all .16s}
.g-pnav:hover:not(:disabled){border-color:var(--navy);color:var(--navy)}
.g-pnav:disabled{opacity:.35;cursor:default}
.g-pop-cta{display:flex;align-items:center;justify-content:center;width:100%;height:52px;background:linear-gradient(130deg,var(--navy),var(--azure-deep));color:#fff;font-size:14.5px;font-weight:700;border-radius:14px;text-decoration:none;box-shadow:0 12px 28px -12px rgba(30,63,184,.7);transition:transform .16s}
.g-pop-cta:hover{transform:translateY(-1px)}
.g-pop-close{position:absolute;top:14px;right:16px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.14);border:none;color:#fff;font-size:15px;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center}