/* JOB-PaSS WA / OA — extends brity.css (.br) */
.jp .h2 { white-space: pre-line; }
.jp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.jp-chips span { height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; display: inline-flex; align-items: center; font-weight: 600; font-size: 13.5px; }
.jp-chips span:first-child { border-color: var(--accent); color: var(--accent); }
.jp-hero-img { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.jp-hero-img img { width: 100%; display: block; object-fit: contain; }

.jp-frame { margin: 0; border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); animation: aUp .45s both; display: grid; place-items: center; }
.jp-frame img { width: 100%; display: block; object-fit: contain; }

/* WA overview: list + image */
.jp-ov { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: start; }
.jp-ov-list { border-top: 1px solid var(--fg); }
.jp-ov-list button { display: block; width: 100%; text-align: left; padding: 20px 0; border-bottom: 1px solid var(--line); }
.jp-ov-list small { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); margin-right: 14px; }
.jp-ov-list b { font-size: 19px; letter-spacing: -0.02em; color: var(--muted); transition: color .2s; }
.jp-ov-list button.on b { color: var(--fg); }
.jp-ov-list button.on small { color: var(--accent); }
.jp-ov-list p { font-size: 14.5px; color: var(--muted); margin-top: 12px; animation: aUp .35s both; }
.jp-ov .jp-frame { position: sticky; top: 150px; }

/* OA overview: cycle */
.jp-cycle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.jp-cycle > div { background: var(--bg); padding: 28px; }
.jp-cycle .n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; }
.jp-cycle h4 { font-size: 19px; letter-spacing: -0.02em; margin: 22px 0 8px; }
.jp-cycle p { position: relative; padding: 4px 0 4px 18px; font-size: 14.5px; color: var(--muted); }
.jp-cycle p::before { content: ''; position: absolute; left: 0; top: 14px; width: 8px; height: 2px; background: var(--accent); }
.jp-cycle-note { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--muted); }
.jp-cycle-note b { color: var(--fg); }

/* WA value */
.jp-val { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.jp-val > div { background: var(--surface); border-radius: var(--radius); padding: 32px 28px; }
.jp-val > div.mid { background: var(--accent); color: #fff; }
.jp-val small { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent); }
.jp-val .mid small { color: rgba(255,255,255,.75); }
.jp-val h4 { font-size: 22px; letter-spacing: -0.03em; margin: 48px 0 10px; }
.jp-val p { font-size: 14.5px; color: var(--muted); }
.jp-val .mid p { color: rgba(255,255,255,.82); }

/* OA effects */
.jp-eff { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.jp-eff > div { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; }
.jp-eff > div:first-child { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.jp-eff small { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent); }
.jp-eff > div:first-child small { color: var(--accent-light); }
.jp-eff h4 { font-size: 18px; letter-spacing: -0.02em; line-height: 1.35; margin: 36px 0 14px; min-height: 2.7em; }
.jp-eff ul { list-style: none; }
.jp-eff li { font-size: 13.5px; color: var(--muted); padding: 8px 0; border-top: 1px solid var(--line); }
.jp-eff > div:first-child li { color: color-mix(in oklch, var(--bg) 72%, transparent); border-color: color-mix(in oklch, var(--bg) 18%, transparent); }

/* features */
.jp-ftabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 28px; }
.jp-ftabs.n6 { grid-template-columns: repeat(6, 1fr); }
.jp-ftabs button { text-align: left; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line); font-weight: 700; font-size: 15px; display: flex; flex-direction: column; gap: 2px; transition: .2s; }
.jp-ftabs button small { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.jp-ftabs button:hover { border-color: var(--fg); }
.jp-ftabs button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.jp-ftabs button.on small { color: var(--accent-light); }
.jp-fbody { display: grid; grid-template-columns: 1fr 1.7fr; gap: 48px; align-items: center; padding: 40px; background: var(--surface); border-radius: var(--radius); animation: aUp .45s both; }
.jp-fbody > div > small { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--accent); }
.jp-fbody h3 { font-size: 34px; letter-spacing: -0.04em; margin: 14px 0 16px; }
.jp-fbody p { font-size: 16px; color: var(--muted); }
.jp-fbody .jp-frame { animation: none; border: 0; }
.jp-fbody .jp-frame img { max-height: 420px; }
.jp-nav { display: flex; gap: 8px; margin-top: 32px; }
.jp-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); font-size: 16px; }
.jp-nav button:hover { border-color: var(--fg); }

/* architecture */
.jp-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface); }
.jp-seg button { height: 36px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); }
.jp-seg button.on { background: var(--fg); color: var(--bg); }
.jp-arch { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 32px; animation: aUp .45s both; }
.jp-arch img { width: 100%; max-height: 620px; object-fit: contain; display: block; }
.jp-arch figcaption { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }

/* requirements */
.jp-os { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 32px; }
.jp-os > div { background: var(--bg); padding: 24px 20px; }
.jp-os h4 { font-size: 17px; margin-bottom: 14px; }
.jp-os p { font-size: 13.5px; color: var(--muted); padding: 3px 0; }
.jp-hw { border-top: 1px solid var(--fg); }
.jp-hw > div { display: grid; grid-template-columns: 140px repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.jp-hw > div > span { padding: 18px 16px; display: flex; align-items: baseline; gap: 8px; font-size: 15px; }
.jp-hw > div > span:first-child { padding-left: 0; }
.jp-hw .hd > span { flex-direction: column; gap: 3px; }
.jp-hw .hd > span:first-child { font-size: 13px; font-weight: 700; color: var(--muted); justify-content: flex-end; }
.jp-hw .hd b { font-size: 15px; display: flex; gap: 8px; align-items: center; }
.jp-hw .hd em { font-style: normal; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--accent); color: #fff; }
.jp-hw .hd em.opt { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.jp-hw .hd small { font-size: 12.5px; color: var(--muted); }
.jp-hw .k { font-weight: 700; }
.jp-hw b { font-size: 20px; letter-spacing: -0.02em; }
.jp-hw > div:not(.hd) small { font-size: 12.5px; color: var(--muted); }

/* case */
.jp-case { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 48px; border-radius: var(--radius); background: var(--fg); color: var(--bg); }
.jp-case .q { font-size: 120px; line-height: .8; font-weight: 800; color: var(--accent-light); font-family: Georgia, serif; }
.jp-case h3 { font-size: 28px; letter-spacing: -0.03em; line-height: 1.35; }
.jp-case p { margin-top: 16px; font-size: 16.5px; line-height: 1.75; color: color-mix(in oklch, var(--bg) 75%, transparent); max-width: 860px; }

@container site (max-width: 900px) {
  .jp-chips span { height: 32px; font-size: 12.5px; padding: 0 12px; }
  .jp-ov { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .jp-ov .jp-frame { position: static; order: -1; }
  .jp-ov-list b { font-size: 17px; }
  .jp-cycle { grid-template-columns: minmax(0, 1fr); }
  .jp-cycle > div { padding: 20px; }
  .jp-cycle h4 { margin-top: 14px; font-size: 17px; }
  .jp-val { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .jp-val > div { padding: 22px; }
  .jp-val h4 { margin-top: 18px; font-size: 19px; }
  .jp-eff { grid-template-columns: 1fr 1fr; gap: 10px; }
  .jp-eff > div:first-child { grid-column: 1 / -1; }
  .jp-eff > div { padding: 18px; }
  .jp-eff h4 { margin-top: 16px; font-size: 16px; min-height: 0; }
  .jp-ftabs, .jp-ftabs.n6 { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -20px 20px; padding: 0 20px; }
  .jp-ftabs button { flex: none; font-size: 14px; padding: 10px 14px; }
  .jp-fbody { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px; }
  .jp-fbody .jp-frame { order: -1; }
  .jp-fbody h3 { font-size: 24px; margin: 8px 0 10px; }
  .jp-fbody p { font-size: 14.5px; }
  .jp-nav { margin-top: 20px; }
  .jp-arch { padding: 14px; }
  .jp-os { grid-template-columns: 1fr 1fr; }
  .jp-os > div { padding: 18px 16px; }
  .jp-hw { overflow-x: auto; }
  .jp-hw > div { min-width: 600px; }
  .jp-case { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 28px 22px; }
  .jp-case .q { font-size: 80px; height: 50px; }
  .jp-case h3 { font-size: 21px; }
  .jp-case p { font-size: 15px; }
}