:root{
  --jp-bg:#f5f7fa;
  --jp-card:#fff;
  --jp-ink:#16202c;
  --jp-muted:#6d7886;
  --jp-line:#dfe5eb;
  --jp-navy:#163d66;
  --jp-blue:#2b6fae;
  --jp-soft:#edf3f8;
  --jp-radius:14px;
  --jp-shadow:0 8px 22px rgba(20,48,78,.07);
}

*{box-sizing:border-box}
body.jp-knowledge{
  margin:0;
  background:var(--jp-bg);
  color:var(--jp-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC","Noto Sans JP","Helvetica Neue",Arial,sans-serif;
  line-height:1.45;
}
body.jp-knowledge a{text-decoration:none;color:inherit}
body.jp-knowledge .topbar{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--jp-line);
  box-shadow:none;
  backdrop-filter:blur(12px);
}
body.jp-knowledge .nav{padding:9px 0}
body.jp-knowledge .brand-mark{width:34px;height:34px;border-radius:11px}
body.jp-knowledge .language-switcher{box-shadow:none;background:#fff}
body.jp-knowledge .language-switcher button{min-height:30px;padding:5px 9px}
body.jp-knowledge .nav-links{box-shadow:none}

.utility-shell{
  width:min(1040px,calc(100% - 28px));
  margin:0 auto;
  padding:20px 0 36px;
}
.utility-head{
  margin-bottom:14px;
}
.crumbs{
  display:flex;
  gap:7px;
  align-items:center;
  margin-bottom:8px;
  color:var(--jp-muted);
  font-size:.78rem;
}
.crumbs a{color:var(--jp-blue)}
.utility-title-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.utility-title-row h1{
  margin:0;
  color:var(--jp-navy);
  font-size:clamp(1.65rem,3.2vw,2.35rem);
  line-height:1.1;
}
.utility-title-row p{
  margin:5px 0 0;
  color:var(--jp-muted);
  font-size:.9rem;
}
.count-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 9px;
  border-radius:999px;
  background:var(--jp-soft);
  color:var(--jp-navy);
  font-size:.72rem;
  font-weight:800;
}

.topic-list{display:grid;gap:9px}
.topic-row{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 20px;
  gap:12px;
  align-items:center;
  min-height:72px;
  padding:12px 14px;
  border:1px solid var(--jp-line);
  border-radius:var(--jp-radius);
  background:var(--jp-card);
  box-shadow:var(--jp-shadow);
}
.topic-row:hover{border-color:#c6d5e3;background:#fbfdff}
.topic-row.featured{
  border-color:#c9d8e6;
  box-shadow:0 9px 24px rgba(22,61,102,.09);
}
.topic-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:var(--jp-soft);
  color:var(--jp-navy);
  font-weight:900;
}
.topic-copy{min-width:0}
.topic-copy strong{
  display:block;
  color:var(--jp-navy);
  font-size:1rem;
  line-height:1.25;
}
.topic-copy small{
  display:block;
  margin-top:3px;
  color:var(--jp-muted);
  font-size:.79rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.topic-arrow{
  color:#9aa6b3;
  font-size:1.5rem;
  line-height:1;
}
.compact-footer{
  width:min(1040px,calc(100% - 28px));
  margin:0 auto;
  padding:0 0 26px;
  color:#8a96a3;
  font-size:.72rem;
}

/* corporate titles */
.position-page .utility-shell{width:min(1180px,calc(100% - 28px))}
.position-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}
.position-head-main{min-width:0}
.position-head h1{
  margin:0;
  color:var(--jp-navy);
  font-size:clamp(1.55rem,3vw,2.15rem);
  line-height:1.12;
}
.position-head p{
  margin:5px 0 0;
  color:var(--jp-muted);
  font-size:.84rem;
}
.compare-control{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:7px;
}
.compare-label{
  color:var(--jp-muted);
  font-size:.7rem;
  font-weight:800;
  white-space:nowrap;
}
.compare-switch{
  flex:0 0 auto;
  display:inline-flex;
  gap:3px;
  padding:3px;
  border:1px solid var(--jp-line);
  border-radius:10px;
  background:#fff;
}
.compare-switch button{
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--jp-muted);
  padding:7px 10px;
  font:inherit;
  font-size:.76rem;
  font-weight:800;
  cursor:pointer;
}
.compare-switch button.active,
.compare-switch button[aria-pressed="true"]{
  background:var(--jp-navy);
  color:#fff;
}

.quick-warning{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.quick-warning span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 9px;
  border:1px solid #e5d9bd;
  border-radius:999px;
  background:#fffaf0;
  color:#795f28;
  font-size:.72rem;
  font-weight:750;
}

.position-chart{
  width:min(900px,100%);
  margin:0 auto 12px;
}
.position-chart a{
  position:relative;
  display:block;
  border:1px solid var(--jp-line);
  border-radius:var(--jp-radius);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--jp-shadow);
}
.position-chart img{
  display:block;
  width:100%;
  height:auto;
  background:#fff;
}
.position-chart a:hover{
  border-color:#bfd0df;
}
.chart-zoom{
  position:absolute;
  right:9px;
  bottom:9px;
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:8px;
  background:rgba(14,38,65,.78);
  color:#fff;
  font-size:.68rem;
  font-weight:850;
  backdrop-filter:blur(7px);
}

.position-layout{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:12px;
  align-items:start;
}
.panel{
  border:1px solid var(--jp-line);
  border-radius:var(--jp-radius);
  background:#fff;
  box-shadow:var(--jp-shadow);
}
.tree-panel{padding:14px}
.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:9px;
}
.panel-head h2{
  margin:0;
  color:var(--jp-navy);
  font-size:1rem;
}
.panel-head small{
  color:var(--jp-muted);
  font-size:.7rem;
}
.tree-block + .tree-block{margin-top:12px}
.tree-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
  color:#5e6b79;
  font-size:.72rem;
  font-weight:850;
}
.role-stack{
  position:relative;
  display:grid;
  gap:5px;
  padding-left:13px;
}
.role-stack::before{
  content:"";
  position:absolute;
  left:5px;
  top:10px;
  bottom:10px;
  width:1px;
  background:#d5dde6;
}
.role-node{
  position:relative;
  width:100%;
  min-height:44px;
  display:grid;
  grid-template-columns:minmax(100px,.6fr) minmax(0,1.4fr);
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border:1px solid #e3e8ee;
  border-radius:10px;
  background:#fff;
  text-align:left;
  font:inherit;
  cursor:pointer;
}
.role-node::before{
  content:"";
  position:absolute;
  left:-11px;
  top:50%;
  width:10px;
  height:1px;
  background:#d5dde6;
}
.role-node:hover{border-color:#bfd0df;background:#fbfdff}
.role-node.active{
  border-color:#9ebbd3;
  background:#f3f8fc;
  box-shadow:inset 3px 0 0 var(--jp-blue);
}
.role-node .jp{
  color:var(--jp-navy);
  font-size:.88rem;
  font-weight:900;
  line-height:1.2;
}
.role-node .translation{
  color:var(--jp-muted);
  font-size:.78rem;
  line-height:1.3;
}
.role-node .level{display:none}

.detail-slot{
  position:sticky;
  top:62px;
}
.role-detail{
  padding:14px;
  border:1px solid var(--jp-line);
  border-radius:var(--jp-radius);
  background:#fff;
  box-shadow:var(--jp-shadow);
}
.role-detail-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:10px;
}
.role-detail h3{
  margin:0;
  color:var(--jp-navy);
  font-size:1.18rem;
}
.role-romaji{
  margin-top:2px;
  color:var(--jp-muted);
  font-size:.7rem;
}
.role-detail-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.role-type-badge{
  display:inline-flex;
  padding:4px 7px;
  border-radius:999px;
  background:var(--jp-soft);
  color:var(--jp-navy);
  font-size:.64rem;
  font-weight:800;
}
.role-copy{
  min-height:26px;
  padding:4px 7px;
  border:1px solid var(--jp-line);
  border-radius:8px;
  background:#fff;
  color:var(--jp-blue);
  font:inherit;
  font-size:.64rem;
  font-weight:850;
  cursor:pointer;
}
.role-copy:hover{background:#f6f9fc}
.role-pairs{
  display:grid;
  gap:5px;
  margin-bottom:8px;
}
.role-pair{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:8px;
  align-items:start;
  padding:6px 0;
  border-bottom:1px solid #edf0f3;
}
.role-pair:last-child{border-bottom:0}
.role-pair span{
  color:var(--jp-muted);
  font-size:.68rem;
  font-weight:800;
}
.role-pair strong{
  color:var(--jp-ink);
  font-size:.82rem;
  line-height:1.35;
}
.role-note{
  margin:7px 0 0;
  padding:8px 10px;
  border-radius:9px;
  background:#f7f9fb;
  color:#566374;
  font-size:.76rem;
  line-height:1.45;
}
.role-note.tip{background:#fffaf0;color:#6f5a2d}

.reference-section{margin-top:12px}
.reference-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
}
.reference-head h2{
  margin:0;
  color:var(--jp-navy);
  font-size:1rem;
}
.role-search{
  width:min(270px,100%);
  min-height:36px;
  padding:7px 10px;
  border:1px solid var(--jp-line);
  border-radius:9px;
  background:#fff;
  color:var(--jp-ink);
  font:inherit;
  font-size:.78rem;
}
.reference-list{
  display:grid;
  border:1px solid var(--jp-line);
  border-radius:var(--jp-radius);
  background:#fff;
  overflow:hidden;
  box-shadow:var(--jp-shadow);
}
.reference-row{
  display:grid;
  grid-template-columns:minmax(120px,.65fr) minmax(0,1.35fr) 90px;
  gap:10px;
  align-items:center;
  min-height:44px;
  padding:8px 11px;
  border:0;
  border-bottom:1px solid #edf0f3;
  background:#fff;
  text-align:left;
  font:inherit;
  cursor:pointer;
}
.reference-row:last-child{border-bottom:0}
.reference-row:hover{background:#fafcff}
.reference-row strong{
  color:var(--jp-navy);
  font-size:.82rem;
}
.reference-row span{
  color:#5f6c7a;
  font-size:.76rem;
}
.reference-row small{
  justify-self:end;
  color:#8794a1;
  font-size:.66rem;
  font-weight:750;
}
.reference-actions{
  display:flex;
  justify-content:center;
  margin-top:6px;
}
.reference-toggle{
  min-height:30px;
  padding:5px 11px;
  border:1px solid var(--jp-line);
  border-radius:999px;
  background:#fff;
  color:var(--jp-blue);
  font:inherit;
  font-size:.7rem;
  font-weight:850;
  cursor:pointer;
}
.reference-toggle:hover{background:#f8fbfd}
.reference-toggle[hidden]{display:none}
.empty-result{
  padding:18px;
  text-align:center;
  color:var(--jp-muted);
  font-size:.78rem;
}

@media(max-width:820px){
  body.jp-knowledge .nav-links{display:none}
  body.jp-knowledge .nav{width:min(100% - 18px,1160px);padding:7px 0}
  body.jp-knowledge .brand{font-size:.9rem}
  body.jp-knowledge .brand-mark{width:30px;height:30px;border-radius:10px}
  body.jp-knowledge .language-switcher{padding:3px}
  body.jp-knowledge .language-switcher button{min-height:27px;padding:4px 7px;font-size:.72rem}

  .utility-shell,
  .position-page .utility-shell{
    width:min(100% - 16px,760px);
    padding:12px 0 24px;
  }
  .utility-head{margin-bottom:9px}
  .crumbs{margin-bottom:5px;font-size:.7rem}
  .utility-title-row{align-items:center}
  .utility-title-row h1{font-size:1.42rem}
  .utility-title-row p{font-size:.78rem;margin-top:3px}
  .count-badge{min-height:26px;padding:4px 7px;font-size:.66rem}
  .topic-list{gap:7px}
  .topic-row{
    grid-template-columns:36px minmax(0,1fr) 16px;
    min-height:62px;
    padding:9px 10px;
    gap:9px;
    border-radius:11px;
  }
  .topic-icon{width:34px;height:34px;border-radius:9px;font-size:.85rem}
  .topic-copy strong{font-size:.9rem}
  .topic-copy small{font-size:.72rem}
  .compact-footer{width:min(100% - 16px,760px);padding-bottom:18px}

  .position-head{
    align-items:center;
    margin-bottom:8px;
  }
  .position-head h1{font-size:1.34rem}
  .position-head p{font-size:.72rem;margin-top:3px}
  .compare-control{gap:5px}
  .compare-label{font-size:.64rem}
  .compare-switch button{padding:6px 8px;font-size:.7rem}
  .quick-warning{
    gap:5px;
    margin-bottom:8px;
    overflow-x:auto;
    flex-wrap:nowrap;
    scrollbar-width:none;
  }
  .quick-warning::-webkit-scrollbar{display:none}
  .quick-warning span{
    flex:0 0 auto;
    min-height:26px;
    padding:4px 7px;
    font-size:.65rem;
  }

  .position-chart{margin-bottom:8px}
  .position-chart a{border-radius:11px}
  .chart-zoom{right:6px;bottom:6px;min-height:25px;padding:4px 7px;font-size:.62rem}
  .position-layout{grid-template-columns:1fr;gap:8px}
  .tree-panel{padding:10px;border-radius:11px}
  .panel-head{margin-bottom:6px}
  .panel-head h2{font-size:.9rem}
  .panel-head small{font-size:.64rem}
  .tree-block + .tree-block{margin-top:9px}
  .tree-label{margin-bottom:5px;font-size:.66rem}
  .role-stack{gap:4px;padding-left:11px}
  .role-stack::before{left:4px}
  .role-node{
    min-height:40px;
    grid-template-columns:minmax(82px,.55fr) minmax(0,1.45fr);
    gap:7px;
    padding:6px 8px;
    border-radius:8px;
  }
  .role-node::before{left:-9px;width:8px}
  .role-node .jp{font-size:.8rem}
  .role-node .translation{font-size:.7rem}

  .detail-slot{position:static}
  .role-detail{
    display:none;
    margin:4px 0 1px;
    padding:10px;
    border-radius:9px;
    box-shadow:none;
    background:#fbfcfd;
  }
  .role-detail[data-open="true"]{display:block}
  .role-detail-top{margin-bottom:7px}
  .role-detail h3{font-size:1rem}
  .role-detail-actions{gap:4px}
  .role-type-badge{font-size:.6rem}
  .role-copy{min-height:24px;padding:3px 6px;font-size:.6rem}
  .role-pair{grid-template-columns:52px minmax(0,1fr);padding:4px 0}
  .role-pair span{font-size:.62rem}
  .role-pair strong{font-size:.74rem}
  .role-note{padding:7px 8px;font-size:.7rem;margin-top:5px}

  .reference-section{margin-top:8px}
  .reference-head{margin-bottom:5px}
  .reference-head h2{font-size:.9rem}
  .role-search{min-height:34px;font-size:.72rem;padding:6px 8px}
  .reference-list{border-radius:10px}
  .reference-row{
    grid-template-columns:minmax(88px,.7fr) minmax(0,1.3fr);
    gap:6px;
    min-height:40px;
    padding:7px 9px;
  }
  .reference-row strong{font-size:.75rem}
  .reference-row span{font-size:.69rem}
  .reference-row small{display:none}
  .reference-actions{margin-top:5px}
  .reference-toggle{min-height:28px;padding:4px 10px;font-size:.66rem}
}

@media(max-width:480px){
  .position-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
  }
  .position-head p{max-width:220px}
  .compare-switch{align-self:start}
  .compare-switch button{padding:5px 7px}
}