/*!
 * Pay Compass (소침반) — Global Shell
 * OWNER: shell-architect (Phase 1). FROZEN — references css/tokens.css + base.css.
 * SHELL-A tab bar · mini compass mark · SHELL-B FAB · SHELL-C bottom CTA bar ·
 * SHELL-E reader overlay · SHELL-F footer · SHELL-H toast · tab panel switching.
 * Blue tokens only. red reserved for 먹튀/risk (not used here).
 */

/* ════════════════════════════════════════════════════════════════════
 * TAB PANEL SWITCHING (JS-driven — app.js toggles .is-active)
 * Each frozen mount container is a .pc-tabpanel; only one is shown.
 * ════════════════════════════════════════════════════════════════════ */
.pc-app{ min-height:100vh; }
.pc-tabpanel{ display:none; }
.pc-tabpanel.is-active{ display:block; }
/* Give feature modules a floor so an empty (not-yet-hydrated) container still
 * occupies space during progressive load. */
.pc-tabpanel:empty{ min-height:60vh; }

/* ── W-1: chapter-crossing tab transition (CSS side) ───────────────────
 * motion-impl (app.js showTab) toggles these on the .pc-tabpanel ONLY when
 * crossing the light↔dark narrative seam (ranking↔about, ranking↔verify);
 * same-register switches stay instant. Opacity/transform only — composited;
 * the global reduced-motion kill-switch collapses the animation to instant. */
@keyframes pc-chapter-enter{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}
@keyframes pc-chapter-leave{
  from{ opacity:1; }
  to{ opacity:0; }
}
.pc-tabpanel.is-chapter-enter{ animation:pc-chapter-enter 200ms var(--e-out-quint); }
.pc-tabpanel.is-chapter-leave{ animation:pc-chapter-leave 200ms var(--e-out-quint); }

/* ════════════════════════════════════════════════════════════════════
 * SHELL-A — sticky top tab bar
 * Ghost (transparent, sky text) over the ranking dark hero; hardens to opaque
 * cool-white when scrolled / on any non-ranking tab. Contrast ≥4.5:1 in both.
 * ════════════════════════════════════════════════════════════════════ */
.pc-topbar{
  position:sticky; top:0; z-index:var(--z-topbar);
  min-height:calc(var(--topbar-h) + env(safe-area-inset-top));
  display:flex; align-items:center; gap:var(--space-4);
  padding-inline:var(--shell-pad);
  padding-top:env(safe-area-inset-top);   /* notch/PWA/landscape safe-area (P2-D8) */
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--d-base) var(--e-out-quart),
             border-color var(--d-base) var(--e-out-quart),
             color var(--d-base) var(--e-out-quart);
  color:var(--text-on-inverse-2);   /* ghost: sky text on the dark hero */
}
.pc-topbar.is-solid{
  background:color-mix(in srgb, var(--cool-white) 92%, transparent);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom-color:var(--border-default);
  color:var(--text-primary);
}

/* Logo lockup: mini compass mark + wordmark */
.pc-logo{ display:inline-flex; align-items:center; gap:var(--space-2); flex:0 0 auto; }
.pc-logo__word{
  font-size:var(--fs-title); font-weight:var(--fw-extrabold);
  letter-spacing:var(--tr-title); color:inherit; white-space:nowrap;
}
.pc-mark{ width:28px; height:28px; flex:0 0 auto; display:block; }
.pc-mark__svg{ width:100%; height:100%; display:block; }
/* Mini mark needle: LOCKED INSTRUMENT pose everywhere in the shell (no autonomous
 * waver — narrative-free chrome must not shimmer; §11-3). Points to true north. */
.pc-mark__needle{
  transform-box:view-box; transform-origin:32px 41px;
  transform:rotate(var(--pc-ang, 0deg));
}

/* Tab strip — horizontal-scroll sticky strip (mobile) → inline row (desktop).
 * No hamburger: tabs stay discoverable via horizontal swipe. Below 768px the
 * strip overflows (7 tabs don't fit ≤375px) with no other signal that more
 * tabs exist off-screen, so a right-edge gradient MASK fades the trailing
 * edge of the last visible tab (01 §0-3 discoverability-first horizontal
 * strip). This is an opacity mask on the content itself, not a color
 * overlay, so it reads correctly whether the topbar is ghost (ranking dark
 * hero) or solid (every other tab/state) — no color to keep in sync. */
.pc-tabbar{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; gap:2px;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  scroll-snap-type:x proximity;
  scroll-padding-right:24px;
  padding-right:8px;   /* G-6a: small right pad so the fade cuts INTO the last tab
                        * (mid-glyph = strongest "more exists" scent), not a blank gap */
  -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 40px), transparent 100%);
          mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 40px), transparent 100%);
}
.pc-tabbar::-webkit-scrollbar{ display:none; }
.pc-tab{
  flex:0 0 auto; scroll-snap-align:start;
  display:inline-flex; align-items:center;
  padding:10px 12px; min-height:44px; border-radius:10px;   /* ≥44px touch target (P2-D7) */
  font-size:var(--fs-label); font-weight:var(--fw-semibold);
  color:currentColor; opacity:.72; white-space:nowrap;
  transition:opacity var(--d-fast) var(--e-out-quart),
             background var(--d-fast) var(--e-out-quart),
             color var(--d-fast) var(--e-out-quart);
}
.pc-tab:hover{ opacity:1; }
.pc-tab[aria-selected="true"]{
  opacity:1; color:var(--brand); background:var(--brand-soft);
}
/* On the ghost (dark) topbar the active tab reads on-inverse. */
.pc-topbar:not(.is-solid) .pc-tab[aria-selected="true"]{
  color:var(--text-on-inverse); background:color-mix(in srgb, var(--brand) 40%, transparent);
}

/* ════════════════════════════════════════════════════════════════════
 * SHELL-C — bottom sticky CTA bar (wizard launcher, all tabs)
 * ════════════════════════════════════════════════════════════════════ */
.pc-ctabar{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-ctabar);
  min-height:var(--ctabar-h);
  display:flex; align-items:center; justify-content:center;
  padding:12px var(--shell-pad) calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--cool-white) 94%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid var(--border-default);
}
.pc-cta{
  width:100%; max-width:520px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 20px; border-radius:14px;
  background:var(--brand); color:var(--text-on-inverse);
  font-size:var(--fs-label); font-weight:var(--fw-bold);
  box-shadow:var(--sh-brand);
  transition:background var(--d-fast) var(--e-out-quart), transform var(--d-instant) var(--e-out-quart);
}
.pc-cta:hover{ background:var(--brand-strong); }
.pc-cta:active{ transform:scale(.97); }   /* W-6 press feedback (100ms via --d-instant on transition) */
.pc-cta__spark{ font-size:1.05em; }

/* ════════════════════════════════════════════════════════════════════
 * SHELL-B — FAB (문의 safety-net). Sits above the CTA bar.
 * ════════════════════════════════════════════════════════════════════ */
.pc-fab{
  position:fixed; right:var(--space-5);
  bottom:calc(var(--space-5) + env(safe-area-inset-bottom));
  z-index:var(--z-fab);
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--brand); color:var(--text-on-inverse);
  box-shadow:var(--fab-shadow);
  transition:transform var(--d-fast) var(--e-out-quart), background var(--d-fast) var(--e-out-quart);
}
.pc-fab:hover{ transform:translateY(-2px); background:var(--brand-strong); }
.pc-fab svg{ width:24px; height:24px; }
.pc-fab__badge{
  position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--surface-inverse); color:var(--text-on-inverse);
  font-size:11px; font-weight:var(--fw-bold); line-height:18px; text-align:center;
  border:2px solid var(--cool-white);
}

/* ════════════════════════════════════════════════════════════════════
 * SHELL-E — reader overlay host (legal full text / articles / evidence)
 * Slides in from the right. Utility mode — no compass/spectacle.
 * ════════════════════════════════════════════════════════════════════ */
.pc-reader{
  position:fixed; inset:0; z-index:var(--z-overlay);
  display:flex; flex-direction:column;
  background:var(--surface-raised); color:var(--text-primary);
  transform:translateX(100%);
  transition:transform var(--d-slow) var(--e-out-expo);
  visibility:hidden;
}
.pc-reader.is-open{ transform:translateX(0); visibility:visible; }
.pc-reader__bar{
  flex:0 0 auto; height:var(--topbar-h);
  display:flex; align-items:center; gap:var(--space-3);
  padding-inline:var(--shell-pad);
  border-bottom:1px solid var(--border-default);
  background:var(--surface-raised);
}
.pc-reader__back{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-label); font-weight:var(--fw-semibold); color:var(--text-secondary);
}
.pc-reader__back svg{ width:20px; height:20px; }
.pc-reader__title{
  font-size:var(--fs-title); font-weight:var(--fw-bold); letter-spacing:var(--tr-title);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pc-reader__body{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:var(--space-6) var(--shell-pad) var(--space-9);
}
.pc-reader__body > *{ max-width:640px; margin-inline:auto; }
.pc-reader__body p{ font-size:var(--fs-body-lg); line-height:var(--lh-body-lg); margin-top:var(--space-4); color:var(--text-secondary); }
.pc-reader__body h2{ font-size:var(--fs-headline); font-weight:var(--fw-bold); letter-spacing:var(--tr-headline); margin-top:var(--space-6); }
.pc-reader__body h3{ font-size:var(--fs-title); font-weight:var(--fw-bold); margin-top:var(--space-5); }

/* ════════════════════════════════════════════════════════════════════
 * SHELL-F — footer (disclaimer + legal links + mini nameplate)
 * NOT low-contrast / hidden: text ≥4.5:1 (§1-2 / §3-4).
 * ════════════════════════════════════════════════════════════════════ */
.pc-footer{
  background:var(--surface-inverse); color:var(--text-on-inverse);
  padding:var(--space-8) var(--shell-pad);
}
.pc-footer__inner{ max-width:1200px; margin-inline:auto; }
.pc-footer__brand{ display:inline-flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-3); }
.pc-footer__brand .pc-mark{ width:24px; height:24px; }
.pc-footer__brand-word{ font-size:var(--fs-title); font-weight:var(--fw-extrabold); }
.pc-footer__mission{ font-size:var(--fs-body-lg); color:var(--text-on-inverse-2); max-width:46ch; text-wrap:balance; margin-bottom:var(--space-5); }
.pc-footer__links{ display:flex; flex-wrap:wrap; gap:var(--space-4); margin-bottom:var(--space-5); }
.pc-footer__link{
  display:inline-flex; align-items:center; min-height:44px;   /* touch target (P2-D7) */
  font-size:var(--fs-label); font-weight:var(--fw-semibold);
  color:var(--blue-150); text-decoration:underline; text-underline-offset:3px;
}
.pc-footer__link:hover{ color:var(--text-on-inverse); }
.pc-footer__disclaimer{
  font-size:var(--fs-caption); line-height:1.7; letter-spacing:var(--tr-caption);
  color:var(--blue-200);   /* ≥4.5:1 on navy-900 — legible, not buried */
  max-width:70ch;
}

/* ════════════════════════════════════════════════════════════════════
 * SHELL-H — toast host (empty / loading / error / 준비중 states)
 * ════════════════════════════════════════════════════════════════════ */
.pc-toast-host{
  position:fixed; left:50%; bottom:calc(var(--space-5) + env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:var(--z-toast);
  display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
  pointer-events:none; width:max-content; max-width:calc(100vw - 2*var(--shell-pad));
}
.pc-toast{
  background:var(--surface-inverse); color:var(--text-on-inverse);
  font-size:var(--fs-body-sm); font-weight:var(--fw-medium);
  padding:10px 16px; border-radius:12px; box-shadow:var(--sh-l);
  opacity:0; transform:translateY(8px);
  transition:opacity var(--d-base) var(--e-out-quart), transform var(--d-base) var(--e-out-quart);
}
.pc-toast.is-show{ opacity:1; transform:none; }

/* ════════════════════════════════════════════════════════════════════
 * Responsive
 * ════════════════════════════════════════════════════════════════════ */
@media (min-width:768px){
  .pc-topbar{ gap:var(--space-6); padding-inline:var(--space-6); }
  .pc-tabbar{
    justify-content:flex-end; overflow-x:visible; padding-right:0;
    -webkit-mask-image:none; mask-image:none;   /* all 7 tabs fit — no fade needed */
  }
  .pc-tab{ padding:10px 14px; }
}
@media (max-width:767px){
  .pc-logo__word{ font-size:var(--fs-body-lg); }
  /* Tab strip stays a horizontal scroll rail; keep the logo compact. */
  /* Reserve clearance so the fixed FAB + bottom CTA bar never cover the last
   * row's 바로가기 money CTA (P1-5). */
  .pc-app{ padding-bottom:calc(72px + env(safe-area-inset-bottom)); }

  /* G-6a: positive scroll affordance — a non-interactive `›` cue at the topbar's
   * right edge over the mask fade, so the off-screen 검증기준/블랙리스트 tabs read
   * as "scroll for more," not "text ending." Fades out once JS marks the strip
   * scrolled-to-end (adds .is-tabs-end to .pc-topbar). pointer-events:none so it
   * never blocks a tab tap. Inherits currentColor → correct on ghost & solid. */
  .pc-topbar::after{
    content:"\203A";   /* › */
    position:absolute; right:6px; top:50%;
    transform:translateY(-50%); pointer-events:none;
    font-size:20px; line-height:1; font-weight:var(--fw-bold);
    color:currentColor; opacity:.6;
    transition:opacity var(--d-base) var(--e-out-quart);
  }
  .pc-topbar.is-tabs-end::after{ opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .pc-topbar,.pc-reader,.pc-toast,.pc-fab,.pc-cta{ transition-duration:.001ms; }
}