/*!
 * Pay Compass (소침반) — home.css (랭킹 홈 · 리스트 우선)
 * OWNER: home module worker (Phase 2 → v2 changeset). References tokens.css + base.css.
 * Blue 3-layer only. red = 먹튀/risk education (S4) ONLY. Numbers = tabular-nums.
 *
 * v2: the navy scroll-scrub compass hero + founder confession teaser + inline wizard
 * CTA were removed from ranking (hero relocated to the About tab). Ranking now opens
 * straight to: orientation head → big paytype segmented control → ranking list.
 * Sections: S2 ranking table · S3 calculator · S3d verify teaser · S4 fraud signals
 * (red isolation) · S5 log tail.
 */

/* ════════════════════════════════════════════════════════════════════
 * LIGHT CHAPTER — ranking rides the cool-white reading surface. No navy
 * hero behind the topbar anymore, so the topbar stays solid on ranking
 * (home.js keeps .is-solid). Content flows normally below the sticky topbar.
 * ════════════════════════════════════════════════════════════════════ */
.pc-home__light{ position:relative; z-index:1; background:var(--surface-daylight); }

.pc-home .pc-section{ padding-block:var(--space-7); }
.pc-home__eyebrow{
  display:block; color:var(--brand); margin-bottom:var(--space-2);
}
.pc-home__lede{ color:var(--text-secondary); margin-top:var(--space-3); max-width:52ch; }

/* ════════════════════════════════════════════════════════════════════
 * S2 — RANKING. New top anchor: orientation head + BIG paytype segmented
 * control (소액/콘텐츠/카드) + table columns
 * [순위 · 업체 · 지급률(feebar+%) · 입금속도(N분,시계) · 바로가기]
 * ════════════════════════════════════════════════════════════════════ */
.pc-rank__intro{ margin-bottom:var(--space-6); }
.pc-rank__q{
  color:var(--text-primary); margin:var(--space-2) 0 var(--space-3);
  max-width:14ch; line-height:var(--lh-display-2); letter-spacing:var(--tr-display-2);
}

/* guided finder card (ITEM 2 · restored) — inline wizard launcher. Sits between
 * the ranking intro and the paytype control. Light white card with brand accents
 * so it invites without competing with the SOLID-blue segmented control below. */
.pc-rank-finder{
  width:100%; display:flex; align-items:center; gap:var(--space-4);
  padding:15px 18px; margin-bottom:var(--space-4);
  background:var(--surface-raised); border:1px solid var(--border-brand);
  border-radius:16px; box-shadow:var(--sh-s); text-align:left;
  transition:box-shadow var(--d-fast) var(--e-out-quart),
             border-color var(--d-fast) var(--e-out-quart),
             transform var(--d-instant) var(--e-out-quart);
}
.pc-rank-finder:hover{ box-shadow:var(--sh); border-color:var(--brand); }
.pc-rank-finder:active{ transform:scale(.99); }
.pc-rank-finder__ico{
  flex:0 0 auto; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand);
}
.pc-rank-finder__ico svg{ width:24px; height:24px; }
.pc-rank-finder__text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pc-rank-finder__title{
  font-size:var(--fs-title); font-weight:var(--fw-bold);
  color:var(--text-primary); letter-spacing:var(--tr-title);
}
.pc-rank-finder__sub{ font-size:var(--fs-caption); color:var(--text-muted); }
.pc-rank-finder__arrow{
  flex:0 0 auto; width:32px; height:32px; border-radius:999px;
  display:grid; place-items:center;
  background:var(--brand); color:var(--text-on-inverse);
  font-size:16px; font-weight:var(--fw-bold);
}

/* enlarged segmented control (ITEM 3) — ICON + label; active = SOLID BLUE fill,
 * white icon+label. This is the ranking tab's de-facto top anchor now. */
.pc-subtabs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  background:var(--surface-sunken); padding:8px; border-radius:18px;
  margin-bottom:var(--space-6);
}
.pc-subtab{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  padding:18px 10px; border-radius:14px; text-align:center;
  font-size:var(--fs-label); font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label); color:var(--text-muted);
  transition:background var(--d-fast) var(--e-out-quart),
             color var(--d-fast) var(--e-out-quart),
             box-shadow var(--d-fast) var(--e-out-quart),
             transform var(--d-instant) var(--e-out-quart);
}
.pc-subtab__icon{ width:28px; height:28px; display:grid; place-items:center; }
.pc-subtab__icon svg{ width:100%; height:100%; display:block; }
.pc-subtab:hover{ color:var(--text-secondary); }
.pc-subtab[aria-selected="true"]{
  background:var(--brand); color:var(--white); box-shadow:var(--sh-brand);
}
.pc-subtab[aria-selected="true"]:hover{ color:var(--white); }
.pc-subtab:active{ transform:scale(.985); }

.pc-table{ display:flex; flex-direction:column; gap:8px; }
.pc-table__colhead,.pc-row{
  display:grid;
  grid-template-columns:44px minmax(0,1.5fr) minmax(120px,2fr) 92px 84px;
  align-items:center; gap:var(--space-3);
}
.pc-table__colhead{
  padding:0 var(--space-4); font-size:var(--fs-label-sm);
  font-weight:var(--fw-semibold); color:var(--text-muted);
}
.pc-table__colhead span:nth-child(3),
.pc-table__colhead span:nth-child(4),
.pc-table__colhead span:nth-child(5){ text-align:center; }
.pc-table__colhead span:last-child{ text-align:right; }

.pc-row{
  padding:var(--space-4);
  background:var(--surface-raised); border:1px solid var(--border-subtle);
  border-radius:var(--rs); box-shadow:var(--sh-s);
}
.pc-row--1{ background:var(--rank1-bg); box-shadow:var(--rank1-ring), var(--sh); }
.pc-row__rank{
  font-size:var(--fs-data-title); font-weight:var(--fw-bold);
  color:var(--text-secondary); font-variant-numeric:tabular-nums; text-align:center;
}
.pc-row--1 .pc-row__rank{ color:var(--brand); }
.pc-row__vendor{ min-width:0; }
.pc-row__name{ display:flex; align-items:center; gap:8px; }
.pc-row__name b{ font-size:var(--fs-title); font-weight:var(--fw-bold); letter-spacing:var(--tr-title); }
.pc-badge-top{
  font-size:var(--fs-overline); font-weight:var(--fw-bold);
  letter-spacing:var(--tr-overline); text-transform:uppercase;
  color:var(--brand); background:var(--brand-soft);
  border:1px solid var(--blue-100); border-radius:999px; padding:2px 8px; white-space:nowrap;
}
.pc-row__summary{
  margin-top:2px; font-size:var(--fs-caption); color:var(--text-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pc-row__tags{ margin-top:5px; display:flex; gap:5px; flex-wrap:wrap; }
.pc-tag{
  font-size:var(--fs-overline); font-weight:var(--fw-semibold);
  color:var(--text-muted); background:var(--surface-sunken);
  border-radius:6px; padding:2px 7px; white-space:nowrap;
}
.pc-row__pay{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.pc-row__pct{
  font-size:var(--fs-data-title); font-weight:var(--fw-bold);
  color:var(--rank-pct); font-variant-numeric:tabular-nums; line-height:1;
}
.pc-row__pct small{ font-size:.5em; font-weight:var(--fw-bold); margin-left:1px; }
.pc-feebar{ width:100%; max-width:120px; height:7px; border-radius:5px;
  background:var(--feebar-track); overflow:hidden; }
.pc-feebar i{ display:block; height:100%; border-radius:5px; background:var(--feebar-fill); }

/* 입금속도 — clock icon + N분 */
.pc-row__speed{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--text-secondary);
}
.pc-row__speed svg{ width:16px; height:16px; color:var(--brand); }
.pc-row__speed b{ font-size:var(--fs-title); font-weight:var(--fw-bold); font-variant-numeric:tabular-nums; }
.pc-row__speed b small{ font-size:.6em; font-weight:var(--fw-semibold); color:var(--text-muted); margin-left:1px; }

.pc-row__go{
  justify-self:end;
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 14px; min-height:44px; border-radius:10px;   /* ≥44px touch target (P2-D7) */
  background:var(--brand); color:var(--text-on-inverse);
  font-size:var(--fs-label-sm); font-weight:var(--fw-bold); white-space:nowrap;
  transition:background var(--d-fast) var(--e-out-quart), transform var(--d-instant) var(--e-out-quart);
}
.pc-row__go:hover{ background:var(--brand-strong); }
.pc-row__go:active{ transform:scale(.97); }   /* W-6 press feedback */

/* ════════════════════════════════════════════════════════════════════
 * RESPONSIVE
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  .pc-rank-finder{ padding:13px 14px; gap:12px; }
  .pc-rank-finder__ico{ width:40px; height:40px; }
  .pc-rank-finder__sub{ display:none; }   /* single tight line — keep the list high */
  .pc-subtab{ padding:14px 6px; gap:7px; font-size:var(--fs-label-sm); }
  .pc-subtab__icon{ width:24px; height:24px; }
  .pc-table__colhead{ display:none; }         /* header labels hidden; rows self-describe */
  .pc-row{
    grid-template-columns:36px 1fr auto;
    grid-template-areas:
      "rank vendor pay"
      "rank speed go";
    row-gap:10px;
  }
  .pc-row__rank{ grid-area:rank; align-self:start; }
  .pc-row__vendor{ grid-area:vendor; }
  .pc-row__pay{ grid-area:pay; align-items:flex-end; }
  .pc-row__speed{ grid-area:speed; flex-direction:row; align-items:center; justify-self:start; }
  .pc-row__go{ grid-area:go; }
}
/* 320–360px: give the vendor name the full content width so rank-1 ("호호페이")
 * no longer breaks 1 char/line. Stack pay/speed/go below vendor. NO
 * overflow-wrap:anywhere (banned on Hangul display). (P2-D3) */
@media (max-width:360px){
  .pc-row{
    grid-template-columns:32px 1fr;
    grid-template-areas:
      "rank vendor"
      "rank pay"
      "rank speed"
      "rank go";
    row-gap:8px;
  }
  .pc-row__pay{ align-items:flex-start; }
  .pc-row__go{ justify-self:start; }
}
@media (min-width:768px) and (max-width:1023px){
  .pc-table__colhead,.pc-row{ grid-template-columns:44px minmax(0,1.3fr) minmax(110px,1.6fr) 88px 78px; }
}
@media (min-width:1024px){
  /* G-2: cap the data instrument so the % sits next to the vendor cluster, not
   * across a 1440 void. Fixed 220px feebar column kills the 2fr balloon;
   * centered 920px reads as a considered desktop table. */
  .pc-table__colhead,.pc-row{
    grid-template-columns:56px minmax(0,1.2fr) 220px 96px 96px;
    column-gap:var(--space-5);
    /* width:100% so rows resolve to the 920 cap uniformly — inside the flex
     * column (.pc-table) auto side-margins otherwise disable stretch and each
     * row collapses to its own content width (rank-1's badge made it widest). */
    width:100%; max-width:920px; margin-inline:auto;
  }
  /* A-1a: with the cluster capped, promote the #1 payout to the page's hero
   * number (ranks 2..N stay --fs-data-title). Enabled by G-2's width cap. */
  .pc-row--1 .pc-row__pct{
    font-size:clamp(2.5rem, 1.6rem + 2.2vw, 3.25rem);
    letter-spacing:var(--tr-hero);
  }
}