*,*::before,*::after{box-sizing:border-box;}
:root{
  /* Container */
  --npc-container:1230px;
  --npc-gutter:15px;

  --npc-accent:#111827;
  --npc-muted:#6b7280;
  --npc-border:rgba(17,24,39,.12);
  /* Cards should follow Core's surface token when available */
  --npc-card: var(--npc-surface, #fff);
  /* UI settings are provided by NPC Core via CSS variables.
     Keep fallbacks so patterns still look OK even if Core is disabled. */
  --npc-radius: var(--npc-radius-card, 16px);
  /* --npc-radius-btn is provided by NPC Core (fallback handled at usage sites) */

  /* Category backgrounds (override-friendly) */
  --npc-cat-web-bg:#f6f7fb;
  --npc-cat-measure-bg:#f3fff7;
  --npc-cat-seo-bg:#fff7f3;
  /* Category / badge backgrounds (override-friendly) */
  --npc-cat-neutral-bg:var(--npc-surface, rgba(0,0,0,.04));

  /* Style knobs (preset-driven) */
  --npc-card-border-width: 1px;
  --npc-card-shadow: var(--npc-shadow-card, 0 10px 30px rgba(17,24,39,.06));

  /* Heading accent (controlled by variables; presets may override) */
  --npc-heading-pad-left: 0px;
  --npc-heading-before-w: 0px;
  --npc-heading-before-h: 0px;
  --npc-heading-before-radius: 999px;
  --npc-heading-before-top: 0.35em;
  --npc-heading-before-left: 0px;
  --npc-heading-before-opacity: 0;

  --npc-heading-after-w: 56px;
  --npc-heading-after-h: 3px;
  --npc-heading-after-mt: 10px;
  --npc-heading-after-radius: 999px;
  --npc-heading-after-opacity: .9;
  --npc-heading-after-shadow: none;

}

/* Section + category background */
/* Container rules (NPC sections only) */
.npc-section > .wp-block-group__inner-container{
  max-width: var(--npc-container);
  margin-left: auto;
  margin-right: auto;
}
/* Fallback: some themes don't output .wp-block-group__inner-container */
.npc-section.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
  max-width: var(--npc-container);
  margin-left: auto;
  margin-right: auto;
  /* horizontal gutters are handled by .npc-section itself */
  padding-left: 0;
  padding-right: 0;
}

.npc-section{
  padding:clamp(28px,4vw,56px) 0;
  background:transparent;
  padding-left:var(--npc-gutter);
  padding-right:var(--npc-gutter);
  /* Prevent 100vw / rounding issues from causing horizontal overflow */
  overflow-x: clip;
}

/*
  IMPORTANT (v1 rule):
  - Section background is NOT controlled by npc-cat.
  - npc-cat is used as a small badge/label only.
*/
.npc-cat{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:1;padding:6px 10px;border-radius:999px;white-space:nowrap;border:var(--npc-card-border-width) solid var(--npc-border);background:var(--npc-cat-neutral-bg);color:var(--npc-main, var(--npc-accent));}
.npc-cat--web{background:var(--npc-cat-web-bg);}
.npc-cat--measure{background:var(--npc-cat-measure-bg);}
.npc-cat--seo{background:var(--npc-cat-seo-bg);}
.npc-cat--neutral{background:var(--npc-cat-neutral-bg);}

/* Optional section surfaces (use only when you really want a panel) */
.npc-section--surface{background:var(--npc-surface);}
.npc-section--muted{background:rgba(0,0,0,.04);}

/* Utility */
.npc-stack{display:flex;flex-direction:column;gap:14px;}
.npc-grid-3{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width: 960px){.npc-grid-3{grid-template-columns:1fr;}}
.npc-lead{color:var(--npc-muted);line-height:1.8;}

.npc-section__title{margin:0 0 14px;letter-spacing:.02em;}
.npc-card{
 padding:clamp(16px,2.6vw,24px);
 border:var(--npc-card-border-width) solid var(--npc-border);
 border-radius:var(--npc-radius);
 background:var(--npc-card);
 box-shadow:var(--npc-card-shadow);
}
.npc-card__title{margin:0 0 10px;}

/* Card (no background) - padding only */
.npc-card-none{
 padding: clamp(16px, 2.6vw, 24px);
 background: transparent !important;
 border: 0 !important;
 border-radius: 0 !important;
 box-shadow: none !important;
}
.npc-hero__title{margin:0 0 14px;}
.npc-hero__lead{margin:0 0 18px;color:var(--npc-muted);line-height:1.8;}
.npc-hero__buttons{gap:12px;}



/* ----------------------------------------
 * Preset-specific style tuning
 * Requires NPC Core to output data-npc-preset (html) or npc-preset--* (body).
 * These only change "shape/strength" (not colors), so they stay safe for selling.
 * ---------------------------------------- */

:where(html[data-npc-preset], body[class*="npc-preset--"]){
  /* fallback: keep defaults if no match */
}

/* 和風 */
html[data-npc-preset="wafu"], body.npc-preset--wafu{
  --npc-card-border-width: 1px;
  --npc-heading-pad-left: 14px;
  --npc-heading-before-w: 4px;
  --npc-heading-before-h: 1.15em;
  --npc-heading-before-radius: 999px;
  --npc-heading-before-top: .2em;
  --npc-heading-before-opacity: .95;
  --npc-heading-after-w: 0px;
  --npc-heading-after-h: 0px;
  --npc-heading-after-opacity: 0;
}

/* ビューティー・キュート */
html[data-npc-preset="beauty"], body.npc-preset--beauty{
  --npc-card-border-width: 1px;
  --npc-heading-after-w: 64px;
  --npc-heading-after-h: 4px;
  --npc-heading-after-opacity: .9;
  --npc-heading-after-shadow: none;
}

/* ポップ */
html[data-npc-preset="pop"], body.npc-preset--pop{
  --npc-card-border-width: 2px;
  --npc-heading-before-w: 10px;
  --npc-heading-before-h: 10px;
  --npc-heading-before-radius: 999px;
  --npc-heading-before-top: .42em;
  --npc-heading-before-opacity: .95;
  --npc-heading-pad-left: 16px;
  --npc-heading-after-w: 44px;
  --npc-heading-after-h: 3px;
}

/* クール */
html[data-npc-preset="cool"], body.npc-preset--cool{
  --npc-card-border-width: 1px;
  --npc-heading-after-w: 72px;
  --npc-heading-after-h: 2px;
  --npc-heading-after-opacity: .7;
}

/* アース */
html[data-npc-preset="earth"], body.npc-preset--earth{
  --npc-card-border-width: 1px;
  --npc-heading-pad-left: 12px;
  --npc-heading-before-w: 3px;
  --npc-heading-before-h: 1.1em;
  --npc-heading-before-top: .22em;
  --npc-heading-before-opacity: .9;
  --npc-heading-after-w: 0px;
  --npc-heading-after-h: 0px;
  --npc-heading-after-opacity: 0;
}

/* ネオン */
html[data-npc-preset="neon"], body.npc-preset--neon{
  --npc-card-border-width: 1px;
  --npc-heading-after-w: 70px;
  --npc-heading-after-h: 3px;
  --npc-heading-after-opacity: .95;
  --npc-heading-after-shadow: 0 0 18px rgba(0,0,0,.18);
}

/* エネルギッシュ */
html[data-npc-preset="energetic"], body.npc-preset--energetic{
  --npc-card-border-width: 2px;
  --npc-heading-after-w: 60px;
  --npc-heading-after-h: 5px;
  --npc-heading-after-opacity: .95;
}

/* クリーン */
html[data-npc-preset="clean"], body.npc-preset--clean{
  --npc-card-border-width: 1px;
  --npc-heading-after-w: 56px;
  --npc-heading-after-h: 2px;
  --npc-heading-after-opacity: .65;
}

/* ナチュラル */
html[data-npc-preset="natural"], body.npc-preset--natural{
  --npc-card-border-width: 1px;
  --npc-heading-before-w: 6px;
  --npc-heading-before-h: 6px;
  --npc-heading-before-radius: 999px;
  --npc-heading-before-top: .5em;
  --npc-heading-before-opacity: .85;
  --npc-heading-pad-left: 14px;
  --npc-heading-after-w: 42px;
  --npc-heading-after-h: 3px;
}

/* エレガント */
html[data-npc-preset="elegant"], body.npc-preset--elegant{
  --npc-card-border-width: 1px;
  --npc-heading-after-w: 88px;
  --npc-heading-after-h: 2px;
  --npc-heading-after-opacity: .75;
}

/* Utilities */
.npc-text-left{text-align:left;}
.npc-text-center{text-align:center;}