/* =========================================================================
   AIシゴト図鑑 Premium Article Design System (pa-*)
   Base: ~/.claude/skills/premium-article-builder/references/design-system.css
   Brand tokens: navy (#0f172a) x amber (#d97706)
   Scope: single post content (.post_content) — enqueued via functions.php
   ========================================================================= */
:root{
  --pa-deep:#0f172a;     /* darkest: heading text / dark panels */
  --pa-brand:#b45309;    /* links / accent (amber, AA on white) */
  --pa-brand2:#d97706;   /* bars / checks / accent 2 */
  --pa-accent:#fbbf24;   /* bright accent (emphasis on dark panels) */
  --pa-h3bar:#e8b563;    /* h3 left bar */
  --pa-line:#dbe3ee;     /* borders */
  --pa-line2:#e6ebf3;    /* light borders */
  --pa-panel:#f5f8fc;    /* soft panel (lead box etc.) */
  --pa-zebra:#f6f9fd;    /* table zebra */
  --pa-ink:#28344a;      /* body ink */
  --pa-ink2:#5c6b82;     /* secondary ink */
  --pa-thA:#111f38;      /* table header gradient start */
  --pa-thB:#2c4166;      /* table header gradient end */
  --pa-radius:2px;       /* 2026-07-24 面の角丸2px統一（エディトリアル調） */
}

/* --- body --- */
.post_content{overflow-wrap:break-word;word-break:break-word}
.post_content p{line-height:1.9}
.post_content a{color:var(--pa-brand);text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--pa-brand) 45%,#fff)}
.post_content ul li::marker{color:var(--pa-brand2)}
.post_content ol li::marker{color:var(--pa-brand2);font-weight:700}
.post_content blockquote{border-left:4px solid var(--pa-h3bar);background:var(--pa-panel);border-radius:0 2px 2px 0;padding:14px 18px;margin:20px 0;color:#35425c}

/* --- headings (override theme defaults) --- */
.post_content h2{background:none!important;border:0!important;border-left:5px solid var(--pa-brand2)!important;border-bottom:2px solid var(--pa-line2)!important;border-radius:0!important;padding:2px 0 12px 16px!important;margin:46px 0 20px!important;color:var(--pa-deep)!important;font-size:clamp(19px,4.8vw,21px)!important;line-height:1.45!important;box-shadow:none!important}
.post_content h2::before,.post_content h2::after{display:none!important;content:none!important}
.post_content h3{background:none!important;border:0!important;border-left:3px solid var(--pa-h3bar)!important;border-radius:0!important;padding:0 0 0 12px!important;color:#1a2b4a!important;font-size:clamp(16px,4.2vw,17px)!important;line-height:1.55!important;margin:30px 0 12px!important}
.post_content h3::before,.post_content h3::after{display:none!important;content:none!important}

/* --- tables --- */
.post_content table{border-collapse:collapse!important;width:100%;font-size:14px;margin:14px 0!important;border:1px solid var(--pa-line)!important;border-radius:2px;overflow:hidden}
.post_content table th,.post_content table td{text-align:left;padding:11px 14px!important;border:0!important;border-bottom:1px solid var(--pa-line2)!important;vertical-align:top}
.post_content table th{background:linear-gradient(135deg,var(--pa-thA),var(--pa-thB))!important;color:#fff!important;font-weight:700!important}
.post_content table tbody tr:nth-child(even){background:var(--pa-zebra)}
.post_content table tbody tr:last-child td{border-bottom:0!important}

/* --- images --- */
.post_content img{border-radius:var(--pa-radius)}
.post_content .wp-block-image img{border-radius:var(--pa-radius)}
.p-articleThumb img{border-radius:var(--pa-radius)}
.c-postThumb__figure{border-radius:2px!important;overflow:hidden!important}
.c-postThumb__img{border-radius:0}
.c-postThumb__figure{background:transparent!important}

/* --- components --- */
.post_content .pa-lead{font-size:16px;line-height:1.95;color:var(--pa-ink);background:linear-gradient(135deg,var(--pa-panel),#eef3fa);border:1px solid #dbe4f2;border-left:4px solid var(--pa-brand2);border-radius:2px;padding:20px 22px;margin:0 0 26px}
.post_content .pa-keys{background:#fff;border:1px solid var(--pa-line);border-radius:2px;padding:20px 22px;margin:0 0 26px;box-shadow:0 4px 16px rgba(15,23,42,.05)}
/* ラベルはピル背景をやめ「短い線＋トラッキング文字」のエディトリアル調 */
.post_content .pa-keys .lbl{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.13em;color:var(--pa-brand);background:none;padding:0;border-radius:0;margin:0 0 14px}
.post_content .pa-keys .lbl::before{content:"";width:18px;height:2px;background:currentColor;flex:none}
.post_content .pa-keys ul{list-style:none!important;margin:0!important;padding:0!important}
.post_content .pa-keys li{position:relative;padding:0 0 0 30px!important;margin:0 0 11px!important;font-size:14.5px;line-height:1.7;color:var(--pa-ink);list-style:none!important}
.post_content .pa-keys li::before{content:""!important;position:absolute;left:2px;top:3px;width:17px;height:17px;border-radius:50%;background:var(--pa-brand2)}
.post_content .pa-keys li::after{content:""!important;position:absolute;left:7.5px;top:6px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.post_content .pa-vs{display:grid;grid-template-columns:1fr;gap:14px;margin:10px 0 28px}
@media(min-width:600px){.post_content .pa-vs{grid-template-columns:1fr 1fr}}
.post_content .pa-vs .col{border-radius:2px;padding:18px 18px 16px;border:1px solid}
.post_content .pa-vs .neg{background:#fdf6ec;border-color:#f0dcbb}
.post_content .pa-vs .pos{background:#eef3fb;border-color:#ccdaee}
.post_content .pa-vs .cap{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;margin:0 0 10px}
.post_content .pa-vs .neg .cap{color:#b06a12}.post_content .pa-vs .pos .cap{color:#1d3f77}
.post_content .pa-vs .cap .dot{width:10px;height:10px;border-radius:50%;flex:none}
.post_content .pa-vs .neg .dot{background:#d68a24}.post_content .pa-vs .pos .dot{background:#2b5aa8}
.post_content .pa-vs p{margin:0;font-size:13.5px;line-height:1.8;color:#35425c}
.post_content .pa-steps{margin:10px 0 28px;display:grid;gap:14px}
.post_content .pa-step{display:grid;grid-template-columns:44px 1fr;gap:15px;align-items:start;background:#fff;border:1px solid var(--pa-line);border-radius:2px;padding:16px 18px;box-shadow:0 3px 12px rgba(15,23,42,.04)}
.post_content .pa-step .num{width:44px;height:44px;border-radius:2px;background:linear-gradient(135deg,var(--pa-brand2),var(--pa-brand));color:#fff;font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center}
.post_content .pa-step .ttl{margin:3px 0 6px;font-size:16px;font-weight:800;color:var(--pa-deep);line-height:1.45}
.post_content .pa-step p{margin:0;font-size:14px;line-height:1.8;color:#35425c}
.post_content .pa-take{background:linear-gradient(135deg,var(--pa-deep),#1e2f4d);color:#fff;border-radius:2px;padding:22px;margin:12px 0 26px}
.post_content .pa-take .lbl{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.13em;color:var(--pa-accent);background:none;padding:0;border-radius:0;margin:0 0 12px}
.post_content .pa-take .lbl::before{content:"";width:18px;height:2px;background:currentColor;flex:none}
.post_content .pa-take p{margin:0;font-size:15px;line-height:1.9;color:#e8eefa}
.post_content .pa-take strong{color:var(--pa-accent)}
/* 記事内CTAボタン（wp-block-button）も角丸2pxに統一 */
.post_content .wp-block-button__link{border-radius:2px!important}

/* --- mobile-first tweaks --- */
@media (max-width:600px){
  .post_content{font-size:15.5px}
  .post_content h2{margin:34px 0 15px!important;padding:2px 0 10px 13px!important}
  .post_content h3{margin:26px 0 10px!important}
  .post_content table{font-size:13px}
  .post_content table th,.post_content table td{padding:9px 11px!important}
  .post_content .pa-lead,.post_content .pa-keys,.post_content .pa-take{padding:16px 15px!important}
}