/* =========================================================
   sppoX × YESSIR DRIBBLE ACADEMY skin  [data-skin="yessir"]
   Monochrome — BLACK main, WHITE active.
     INK BLACK   #0c0c0f
     PURE WHITE  #ffffff
   Logo usage:
     white logo × black bg  → hero / final / topbar / footer (watermark + lockup)
   ========================================================= */

[data-skin="yessir"] {
  --bg:        #f2f2f4;
  --bg-2:      #e7e7ea;
  --panel:     #ffffff;
  --panel-2:   #f4f4f6;
  --line:      rgba(12, 12, 15, .16);
  --line-soft: rgba(12, 12, 15, .08);

  --red:        #101014;   /* "brand" mapped to near-black */
  --red-deep:   #000000;
  --red-dark:   #000000;
  --platinum:   #ffffff;
  --platinum-2: #d3d3d8;

  --brand:     #101014;
  --brand-hi:  #3a3a43;
  --brand-deep:#000000;
  --accent:    #101014;
  --accent-hi: #3a3a43;
  --gold:      #c79a2b;
  --silver:    #8b9196;
  --bronze:    #b06a34;
  --lime:      #101014;

  --ink:   #0c0c0f;
  --ink-2: #3d3d44;
  --ink-3: #83838c;

  --glow-brand:  0 6px 18px rgba(12, 12, 15, .28);
  --glow-accent: 0 8px 22px rgba(12, 12, 15, .34);
  --band: #e7e7ea;

  --display-wt: 900;
}

/* ---------- Stage / column ---------- */
[data-skin="yessir"] .stage { background: #101014; }
[data-skin="yessir"] .lp {
  background: linear-gradient(180deg, #ffffff, #f2f2f4 42%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 40px 100px rgba(0,0,0,.5);
}
[data-skin="yessir"] .lp::before { opacity: .4; }
[data-skin="yessir"] .hud { color: var(--ink); }

/* section banding — WHITE × light graphite */
[data-skin="yessir"] .lp > section:not(.hero):not(.final) { background: #ffffff; }
[data-skin="yessir"] .lp > section:not(.hero):not(.final):nth-of-type(even) { background: #e9e9ec; }
[data-skin="yessir"] .sec-idx::before { background: linear-gradient(90deg, var(--ink) 0, var(--ink) 34px, rgba(12,14,17,.1) 34px, rgba(12,14,17,.1) 100%); }

/* ---------- Cards ---------- */
[data-skin="yessir"] .cut { background: var(--panel); box-shadow: 0 3px 12px rgba(12,14,17,.08), inset 0 0 0 1px var(--line); }
[data-skin="yessir"] .cut::before { display: none; }

/* ---------- Buttons ---------- */
[data-skin="yessir"] .btn-cta { color: #fff; background: linear-gradient(180deg, #26262c, #0c0c0f); box-shadow: var(--glow-accent), inset 0 1px 0 rgba(255,255,255,.14); }
[data-skin="yessir"] .btn-brand { color: #fff; background: linear-gradient(180deg, #26262c, #0c0c0f); box-shadow: var(--glow-brand), inset 0 1px 0 rgba(255,255,255,.14); }
[data-skin="yessir"] .btn-ghost { color: var(--ink); background: #fff; border: 1px solid var(--line); }

/* ---------- Topbar  [white logo on black] ---------- */
[data-skin="yessir"] .topbar {
  background: rgba(12,12,15,.96); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
[data-skin="yessir"] .topbar .jets-logo { height: 30px; width: auto; }
[data-skin="yessir"] .topbar .cobrand { display: flex; align-items: center; gap: 8px; }
[data-skin="yessir"] .topbar .club-tag { border-color: rgba(255,255,255,.4); color: #fff; }
[data-skin="yessir"] .topbar .btn-ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.3); }
[data-skin="yessir"] .topbar .spacer ~ * .btn-ghost { color: #fff; }

/* ---------- Sticky bottom CTA ---------- */
[data-skin="yessir"] .bottom-cta { background: linear-gradient(180deg, rgba(242,242,244,0), #f2f2f4 38%, #f2f2f4); }
[data-skin="yessir"] .bottom-cta .meta .k { color: var(--ink-3); }
[data-skin="yessir"] .bottom-cta .meta .v { color: var(--ink); }

/* =========================================================
   HERO  [white logo × BLACK bg]
   ========================================================= */
[data-skin="yessir"] .hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, #26262e, transparent 60%),
    linear-gradient(180deg, #16161b, #0a0a0d);
  margin-bottom: 2px;
}
[data-skin="yessir"] .hero-watermark {
  position: absolute; top: -40px; right: -110px; width: 440px; height: 440px; z-index: 0; pointer-events: none;
  background: url("../assets/yessir/logo-white.webp") no-repeat center / contain;
  opacity: .09;
}
[data-skin="yessir"] .hero > *:not(.hero-watermark) { position: relative; z-index: 1; }
[data-skin="yessir"] .hero .eyebrow { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.42); color: #fff; }
[data-skin="yessir"] .hero .eyebrow::before { background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.5); }
[data-skin="yessir"] .hero .tag { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
[data-skin="yessir"] .hero .tag b { color: #fff; }
[data-skin="yessir"] .hero .tag.hot { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.44); color: #fff; }
[data-skin="yessir"] .hero h1 { color: #fff; font-size: clamp(27px, 7.6vw, 35px); }
[data-skin="yessir"] .hero-catch { color: #fff; }
[data-skin="yessir"] .hero-catch .catch-hl { color: #0c0c0f; background: #fff; padding: 0 .2em; border-radius: 6px; }
/* big main catch on black hero — crisp white with soft glow */
[data-skin="yessir"] .hero-bigcatch { color: #fff; }
[data-skin="yessir"] .hero-bigcatch .catch-hl {
  background: none; padding: 0; box-shadow: none; border-radius: 0;
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 0 22px rgba(255,255,255,.55), 0 2px 4px rgba(0,0,0,.4);
  font-size: 1.16em;
}
[data-skin="yessir"] .hero h1 .hl1 { position: relative; display: inline-block; white-space: nowrap; margin-top: 6px; }
[data-skin="yessir"] .hero h1 .fes { font-size: 1.5em; padding: 3px 15px 7px; }
[data-skin="yessir"] .hero h1 .nw {
  position: absolute; top: -15px; right: -12px;
  font-size: .42em; line-height: 1;
  background: #fff; color: #0c0c0f;
  border: 2px solid #0c0c0f; border-radius: 999px;
  padding: 6px 12px; transform: rotate(-5deg);
  box-shadow: 0 5px 14px rgba(0,0,0,.5);
}
[data-skin="yessir"] .hero h1 .fes {
  background: #fff; color: #0c0c0f;
  box-shadow: 0 5px 0 rgba(255,255,255,.35); transform: skewX(-4deg);
}
[data-skin="yessir"] .hero h1 .cy { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
[data-skin="yessir"] .hero .sub { color: rgba(255,255,255,.82); }
[data-skin="yessir"] .hero .hero-note { color: rgba(255,255,255,.66); }
[data-skin="yessir"] .hero-info .info-cell { background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
[data-skin="yessir"] .hero-info .info-cell::before { display: none; }
[data-skin="yessir"] .hero .info-cell .k { color: var(--ink-3); }
[data-skin="yessir"] .hero .info-cell .v { color: var(--ink); }
[data-skin="yessir"] .hero .info-cell .v em,
[data-skin="yessir"] .hero .info-cell .v .free { color: var(--ink); }
/* hero CTA = white button, black text on black bg */
[data-skin="yessir"] .hero-cta .btn-cta {
  background: linear-gradient(180deg, #fff, #e6e6ea);
  color: #0c0c0f;
  box-shadow: 0 6px 0 var(--platinum-2), 0 12px 26px rgba(0,0,0,.5);
  animation: none;
}
[data-skin="yessir"] .hero-cta .btn-cta:hover { filter: brightness(1.02); }
[data-skin="yessir"] .hud-chip .v { color: #fff; }
[data-skin="yessir"] .hud-chip.rank .v { color: #fff; }

/* =========================================================
   GAME → LAUNCH
   ========================================================= */
[data-skin="yessir"] .game-sec { background: linear-gradient(180deg, transparent, rgba(12,14,17,.05), transparent); }
[data-skin="yessir"] .xp-hook-k { color: #fff; }
[data-skin="yessir"] .xp-score .num { color: #fff; text-shadow: 0 0 24px rgba(255,255,255,.4); }
[data-skin="yessir"] .xp-score small { color: rgba(255,255,255,.82); }
[data-skin="yessir"] .xp-rank { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.28); }
[data-skin="yessir"] .xp-rank b { color: #fff; }
[data-skin="yessir"] .xp-rank span { color: rgba(255,255,255,.55); }
[data-skin="yessir"] .sensor-badge { color: #0c0c0f; background: #fff; border-color: rgba(255,255,255,.6); }

/* =================== FES banner =================== */
[data-skin="yessir"] .fes-banner { background: radial-gradient(120% 100% at 50% 0%, rgba(12,14,17,.1), transparent 66%), var(--panel); }
[data-skin="yessir"] .fes-banner .vs { color: var(--ink); }
[data-skin="yessir"] .fes-banner h2 .out { -webkit-text-stroke: 1.5px var(--ink); }
[data-skin="yessir"] .prize.p1 { background: linear-gradient(100deg, rgba(12,14,17,.06), transparent); border-color: rgba(12,14,17,.4); }
[data-skin="yessir"] .prize.p1 .medal { color: var(--gold); }

/* =================== growth loop =================== */
[data-skin="yessir"] .slash-bg::after { background: linear-gradient(115deg, transparent 40%, rgba(12,14,17,.05) 40%, rgba(12,14,17,.05) 52%, transparent 52%); }
[data-skin="yessir"] .loop-result { background: radial-gradient(100% 100% at 50% 0%, rgba(12,14,17,.07), transparent), var(--panel); }
[data-skin="yessir"] .loop-result .v .lime { color: var(--ink); }

/* =================== unlock (club) =================== */
[data-skin="yessir"] .unlock .lock-badge.unlocked { background: linear-gradient(100deg, #26262c, #0c0c0f); color: #fff; }
[data-skin="yessir"] .unlock .club-k { color: var(--ink); }
[data-skin="yessir"] .unlock .feat::before { color: var(--ink); }
[data-skin="yessir"] .unlock .club-logo-ph { background: #fff; border: 1px solid var(--line); }
[data-skin="yessir"] .swap-note { color: var(--ink-3); }

/* =================== AI =================== */
[data-skin="yessir"] .ai-sec { background: radial-gradient(120% 60% at 50% 0%, rgba(12,14,17,.05), transparent); }
[data-skin="yessir"] .ai-step .ic { background: rgba(12,14,17,.06); border-color: var(--line); color: var(--ink); }
[data-skin="yessir"] .ai-menu .head .badge { background: var(--ink); color: #fff; }
[data-skin="yessir"] .ai-task.done .chk { background: var(--ink); border-color: var(--ink); color: #fff; }

/* =================== courses =================== */
[data-skin="yessir"] .ctab-nav { grid-template-columns: repeat(2, 1fr); }
[data-skin="yessir"] .cc-head, [data-skin="yessir"] .ctab-btn.active {
  background: linear-gradient(135deg, #26262c, #0c0c0f) !important;
}
[data-skin="yessir"] .ctab-btn.active::after { border-top-color: #0c0c0f; }
[data-skin="yessir"] .ctab-name { border-left-color: var(--ink); }
[data-skin="yessir"] .ctab-name span, [data-skin="yessir"] .cc-lvtag { background: var(--ink); }
[data-skin="yessir"] .cc-fit { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, var(--panel)); }
[data-skin="yessir"] .cc-fit li::before { background: var(--ink); }
[data-skin="yessir"] .cc-play { background: rgba(255,255,255,.92); color: #0c0c0f; }
[data-skin="yessir"] .cc-tag { background: var(--ink); }

/* =================== coach =================== */
[data-skin="yessir"] .coach-role { color: var(--ink); }
[data-skin="yessir"] .cstat b { color: var(--ink); }

/* =================== parents =================== */
[data-skin="yessir"] .parent-sec { background: var(--bg-2); }
[data-skin="yessir"] .preason .ic { background: linear-gradient(150deg, #3a3a43, #0c0c0f); border: none; color: #fff; box-shadow: var(--glow-brand); }
[data-skin="yessir"] .review .stars { color: var(--gold); }
[data-skin="yessir"] .review .rv-head { color: var(--ink); }
[data-skin="yessir"] .review .rtag { color: var(--ink); border-color: var(--line); }

/* =================== steps =================== */
[data-skin="yessir"] .step .marker .dot { color: var(--ink); }
[data-skin="yessir"] .step.is-last .marker .dot { color: #fff; }
[data-skin="yessir"] .step.is-last .txt h4 { color: var(--ink); }
[data-skin="yessir"] .goal-badge { color: var(--ink); border-color: var(--ink); }

/* =========================================================
   FINAL CTA  [white logo × BLACK bg]
   ========================================================= */
[data-skin="yessir"] .final {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 110%, #26262e, transparent 60%),
    linear-gradient(180deg, #16161b, #0a0a0d);
}
[data-skin="yessir"] .final-watermark {
  position: absolute; bottom: -70px; right: -110px; width: 420px; height: 420px; z-index: 0; pointer-events: none;
  background: url("../assets/yessir/logo-white.webp") no-repeat center / contain;
  opacity: .08;
}
[data-skin="yessir"] .final > *:not(.final-watermark) { position: relative; z-index: 1; }
[data-skin="yessir"] .final .eyebrow { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.42); color: #fff; }
[data-skin="yessir"] .final .eyebrow::before { background: #fff; box-shadow: none; }
[data-skin="yessir"] .final h2 { color: #fff; }
[data-skin="yessir"] .final h2 .cy { color: #fff; text-shadow: 0 0 20px rgba(255,255,255,.4); }
[data-skin="yessir"] .final p { color: rgba(255,255,255,.82); }
[data-skin="yessir"] .final .btn-cta {
  background: linear-gradient(180deg, #fff, #e6e6ea); color: #0c0c0f;
  box-shadow: 0 6px 0 var(--platinum-2), 0 12px 28px rgba(0,0,0,.55); animation: none;
}
[data-skin="yessir"] .final .trust .t { border-color: rgba(255,255,255,.42); color: rgba(255,255,255,.82); }

/* =================== footer  [white logo × dark] =================== */
[data-skin="yessir"] .lp-foot { background: #0c0c0f; border-top: 1px solid rgba(255,255,255,.1); }
[data-skin="yessir"] .lp-foot .foot-jets { height: 42px; width: auto; margin: 0 auto 14px; }
[data-skin="yessir"] .lp-foot .links { color: rgba(255,255,255,.7); }
[data-skin="yessir"] .lp-foot .links a { color: rgba(255,255,255,.7); }
[data-skin="yessir"] .lp-foot .links a:hover { color: #fff; }
[data-skin="yessir"] .lp-foot .cp { color: rgba(255,255,255,.5); }

/* =================== pricing =================== */
[data-skin="yessir"] .price-card { background: #fff; border: none; box-shadow: 0 12px 36px rgba(12,14,17,.14), inset 0 0 0 1px var(--line); }
[data-skin="yessir"] .price-was { color: var(--ink-3); }
[data-skin="yessir"] .price-now { color: var(--ink); }
[data-skin="yessir"] .price-now small { border-color: var(--ink); color: var(--ink); }
[data-skin="yessir"] .price-row small { border-color: var(--ink); color: var(--ink); }
[data-skin="yessir"] .price-trial em { color: var(--ink); }
[data-skin="yessir"] .price-ribbon { background: var(--ink); }

/* coach video tag */
[data-skin="yessir"] .coach-video .vtag { color: #fff; }

/* special-challenge badge cards */
[data-skin="yessir"] .spbadge {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--sp, var(--ink)) 92%, transparent);
  box-shadow:
    0 12px 30px rgba(12,14,17,.28),
    0 0 0 3px rgba(255,255,255,.92),
    inset 0 0 26px color-mix(in srgb, var(--sp, var(--ink)) 14%, transparent);
}

/* AI TRY: 白背景のループノード内で番号バッジを視認できるように */
[data-skin="yessir"] .loop-step .node .n { color: #fff; border: 1.5px solid #fff; }