/* =============================================
   /thinking/technology-peace-war
   技術の力を、戦争の拡大につなげない — 考察 + 比較年表（調査資料）
   Source styles are scoped under .tpw so they cannot leak into the
   shared nav / footer / chat bubble.
   ============================================= */

.tpw {
  --bg:#f5f3ed;
  --ink:#202e3c;
  --muted:#586675;
  --line:#d8ddd9;
  --blue:#245478;
  --green:#24634d;
  --rust:#934c3c;
  --white:#fff;
  --softblue:#edf3f8;
  --softgreen:#edf5ef;
  --softrust:#f8efeb;
}
.tpw,
.tpw * {
  box-sizing:border-box;
}
.tpw {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  line-height:1.85;
}
.tpw a {
  color:var(--blue);
  text-underline-offset:4px;
}
.tpw button,
.tpw input,
.tpw select {
  font:inherit;
}
.tpw button {
  cursor:pointer;
}
.tpw a:focus-visible,
.tpw button:focus-visible,
.tpw input:focus-visible,
.tpw select:focus-visible {
  outline:3px solid #d99b35;
  outline-offset:3px;
}
.tpw [hidden] {
  display:none!important;
}
.tpw .wrap {
  max-width:1440px;
  margin:auto;
  padding:0 48px;
}
.tpw .masthead {
  border-bottom:1px solid var(--line);
  font-size:12px;
  letter-spacing:.1em;
  padding:17px 0;
  display:flex;
  justify-content:space-between;
  gap:15px;
}
.tpw .hero {
  padding:64px 0 44px;
  max-width:1020px;
}
.tpw .eyebrow {
  color:var(--blue);
  font-size:13px;
  font-weight:700;
  letter-spacing:.13em;
}
.tpw .hero h1 {
  font-size:clamp(30px,4.2vw,56px);
  line-height:1.4;
  letter-spacing:.03em;
  margin:16px 0 26px;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
}
.tpw .hero .lead {
  font-size:19px;
  max-width:900px;
}
.tpw .statement {
  border-left:4px solid var(--blue);
  padding:15px 24px;
  background:var(--softblue);
  margin-top:28px;
  font-size:17px;
}
.tpw .statement strong {
  display:block;
}
.tpw .guide {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin:0 0 34px;
}
.tpw .guide article {
  border-top:2px solid var(--line);
  padding:15px 0;
}
.tpw .guide b {
  font-size:15px;
}
.tpw .guide p {
  font-size:14px;
  color:var(--muted);
  margin:8px 0;
}
.tpw .toolbar {
  position:sticky;
  top:calc(var(--banner-h,0px) + 72px);
  z-index:5;
  background:rgba(245,243,237,.97);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:14px 0;
}
.tpw .toolbar-inner {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.tpw .toolbar label {
  font-size:13px;
  font-weight:bold;
}
.tpw input,
.tpw select,
.tpw button {
  border:1px solid #b6c1c5;
  border-radius:5px;
  background:white;
  color:var(--ink);
  padding:8px 11px;
  font-size:14px;
}
.tpw input {
  width:280px;
  max-width:100%;
}
.tpw .count {
  font-size:13px;
  color:var(--muted);
  margin-left:auto;
}
.tpw .nav {
  display:flex;
  gap:9px 20px;
  flex-wrap:wrap;
  padding:18px 0;
  font-size:13px;
}
.tpw .era {
  margin:40px 0 72px;
}
.tpw .era-header {
  padding:24px 0;
  border-top:1px solid #aebbbf;
}
.tpw .era-header>p {
  font-family:Georgia,serif;
  font-size:24px;
  color:var(--blue);
  margin:0;
}
.tpw .era-header h2 {
  font-size:27px;
  margin:7px 0;
}
.tpw .era-header>div {
  color:var(--muted);
  font-size:14px;
}
.tpw .parallel {
  display:grid;
  grid-template-columns:minmax(280px,.75fr) minmax(0,1.6fr);
  gap:34px;
  align-items:start;
}
.tpw .parallel h3 {
  font-size:15px;
  border-bottom:1px solid var(--line);
  padding-bottom:12px;
  margin:0 0 20px;
  display:flex;
  align-items:center;
  gap:9px;
}
.tpw .dot {
  display:inline-block;
  width:9px;
  height:9px;
  border-radius:50%;
}
.tpw .blue {
  background:var(--blue);
}
.tpw .rust {
  background:var(--rust);
}
.tpw .tech-stack {
  position:sticky;
  top:calc(var(--banner-h,0px) + 150px);
}
.tpw .technology {
  align-self:stretch;
}
.tpw .tech-card {
  background:var(--white);
  border:1px solid var(--line);
  border-top:3px solid var(--blue);
  padding:21px;
  margin-bottom:18px;
  border-radius:5px;
}
.tpw .tech-date {
  font-size:12px;
  color:var(--blue);
  font-weight:bold;
  margin:0;
}
.tpw .tech-card h4 {
  font-size:20px;
  margin:7px 0 12px;
}
.tpw .tech-card>p:not(.tech-date) {
  font-size:14px;
}
.tpw .use {
  padding:13px 15px;
  margin-top:12px;
  border-radius:4px;
  font-size:13px;
}
.tpw .use b {
  font-size:12px;
}
.tpw .use p {
  margin:5px 0 0;
}
.tpw .peace {
  background:var(--softgreen);
  border-left:3px solid var(--green);
}
.tpw .peace b {
  color:var(--green);
}
.tpw .military {
  background:var(--softrust);
  border-left:3px solid var(--rust);
}
.tpw .military b {
  color:var(--rust);
}
.tpw .source {
  font-size:12px;
  display:inline-block;
  margin-top:12px;
  overflow-wrap:anywhere;
}
.tpw .reading-note {
  color:var(--muted);
  font-size:12px;
  padding:10px 4px;
}
.tpw .reading-note p {
  margin:5px 0;
}
.tpw .event {
  background:white;
  border:1px solid var(--line);
  border-left:3px solid var(--rust);
  padding:23px 27px;
  margin-bottom:20px;
  border-radius:5px;
}
.tpw .event-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.tpw .war-date {
  font-size:17px;
  color:var(--rust);
  font-weight:700;
}
.tpw .event-number {
  color:var(--muted);
  font-size:11px;
  letter-spacing:.1em;
}
.tpw .event h4 {
  font-size:20px;
  line-height:1.65;
  margin:9px 0 15px;
}
.tpw dl {
  margin:0;
}
.tpw dl>div {
  display:grid;
  grid-template-columns:140px minmax(0,1fr);
  gap:13px;
  border-top:1px solid #e9ece9;
  padding:11px 0;
  font-size:14px;
}
.tpw dt {
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}
.tpw dd {
  margin:0;
}
.tpw .affected {
  background:var(--softrust);
  margin-top:7px;
  padding:12px 14px;
  border:0;
  border-radius:4px;
}
.tpw .affected dt {
  color:var(--rust);
}
.tpw .empty {
  color:var(--muted);
  font-size:14px;
}
.tpw .proposal {
  border-top:2px solid var(--blue);
  padding:36px 0;
  margin:60px 0;
}
.tpw .proposal h2 {
  font-size:30px;
  margin:0 0 18px;
}
.tpw .proposal-intro {
  max-width:960px;
  font-size:17px;
}
.tpw .risk-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin:25px 0;
}
.tpw .risk {
  background:white;
  border:1px solid var(--line);
  padding:23px;
  border-radius:5px;
}
.tpw .risk .status {
  font-size:11px;
  color:var(--blue);
  font-weight:bold;
}
.tpw .risk h3 {
  font-size:19px;
  margin:6px 0;
}
.tpw .risk p {
  font-size:14px;
}
.tpw .risk .question {
  font-weight:bold;
  border-top:1px solid var(--line);
  padding-top:12px;
}
.tpw .choices {
  background:var(--softgreen);
  padding:24px 30px;
  border-radius:5px;
}
.tpw .choices h3 {
  margin:0 0 9px;
  font-size:19px;
}
.tpw .choices li {
  margin:7px 0;
}
.tpw .method {
  border-top:1px solid var(--line);
  padding:30px 0;
  font-size:13px;
  color:var(--muted);
}
.tpw .method h2 {
  font-size:18px;
  color:var(--ink);
}
.tpw footer {
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--muted);
  padding:25px 0 40px;
}
.tpw.single .parallel {
  grid-template-columns:1fr;
}
.tpw.single .technology {
  display:none;
}
.tpw.single .war {
  max-width:1040px;
}
.tpw .back {
  position:fixed;
  left:18px;
  bottom:18px;
  background:var(--ink);
  color:white;
  padding:9px 13px;
  border-radius:5px;
  text-decoration:none;
  font-size:12px;
}
.tpw .noscript {
  padding:12px;
  background:#fff4d8;
  font-size:14px;
}
@media(min-width:1100px) {
  .tpw .tech-stack {
      position:sticky;
      top:calc(var(--banner-h,0px) + 150px);
    }
}
@media(max-width:1099px) {
  .tpw .tech-stack {
      position:static;
    }
  .tpw .wrap {
      padding:0 28px;
    }
  .tpw .parallel {
      gap:20px;
      grid-template-columns:minmax(250px,.8fr) minmax(0,1.4fr);
    }
  .tpw dl>div {
      grid-template-columns:1fr;
      gap:2px;
    }
  .tpw .event {
      padding:20px;
    }
}
@media(max-width:760px) {
  .tpw .wrap {
      padding:0 19px;
    }
  .tpw .masthead {
      font-size:10px;
    }
  .tpw .hero {
      padding:35px 0 25px;
    }
  .tpw .hero .lead {
      font-size:16px;
    }
  .tpw .statement {
      padding:13px 16px;
      font-size:15px;
    }
  .tpw .guide {
      grid-template-columns:1fr;
      gap:0;
    }
  .tpw .guide article {
      padding:12px 0;
    }
  .tpw .parallel {
      grid-template-columns:1fr;
    }
  .tpw .era {
      margin:25px 0 45px;
    }
  .tpw .era-header h2 {
      font-size:23px;
    }
  .tpw .era-header>p {
      font-size:21px;
    }
  .tpw .technology {
      margin-bottom:12px;
    }
  .tpw .tech-card {
      padding:18px;
    }
  .tpw .toolbar-inner {
      gap:8px;
    }
  .tpw input {
      width:100%;
    }
  .tpw .toolbar label {
      width:100%;
    }
  .tpw .toolbar select {
      max-width:48%;
      font-size:12px;
    }
  .tpw .count {
      margin-left:0;
      font-size:12px;
    }
  .tpw .event h4 {
      font-size:18px;
    }
  .tpw .event {
      padding:18px;
    }
  .tpw .risk-grid {
      grid-template-columns:1fr;
    }
  .tpw .proposal h2 {
      font-size:25px;
    }
  .tpw .choices {
      padding:18px;
    }
  .tpw .back {
      left:10px;
      bottom:10px;
    }
  .tpw .nav {
      gap:8px 14px;
    }
}
@media print {
  .tpw {
      background:white;
      font-size:10pt;
    }
  .tpw .wrap {
      max-width:none;
      padding:0;
    }
  .tpw .toolbar,
  .tpw .nav,
  .tpw .back,
  .tpw .noscript {
      display:none!important;
    }
  .tpw .hero {
      padding:0 0 15px;
    }
  .tpw .hero h1 {
      font-size:25pt;
    }
  .tpw .hero .lead,
  .tpw .statement {
      font-size:11pt;
    }
  .tpw .guide {
      gap:12px;
    }
  .tpw .era {
      margin:12px 0 20px;
      break-before:page;
    }
  .tpw .era-header {
      padding:10px 0;
    }
  .tpw .era-header h2 {
      font-size:18pt;
    }
  .tpw .parallel {
      display:block;
    }
  .tpw .technology {
      margin-bottom:20px;
    }
  .tpw .tech-stack {
      position:static;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
  .tpw .tech-card {
      margin:0;
    }
  .tpw .reading-note {
      grid-column:1/-1;
    }
  .tpw .event {
      break-inside:avoid;
      padding:13px 16px;
      margin-bottom:10px;
    }
  .tpw .event h4 {
      font-size:13pt;
    }
  .tpw dl>div {
      grid-template-columns:125px 1fr;
      font-size:10pt;
    }
  .tpw .source {
      font-size:8pt;
    }
  .tpw .risk-grid {
      gap:10px;
    }
  .tpw .risk {
      break-inside:avoid;
    }
  .tpw .proposal {
      break-before:page;
    }
  .tpw .tech-card,
  .tpw .use,
  .tpw .affected,
  .tpw .statement,
  .tpw .choices {
      -webkit-print-color-adjust:exact;
      print-color-adjust:exact;
    }
  .tpw .source:after {
      content:' (' attr(href) ')';
      font-size:7pt;
    }
  .tpw .masthead {
      padding:5px 0;
    }
  .tpw.single .technology {
      display:none;
    }
  .tpw .tech-card {
      break-inside:avoid;
    }
}
.tpw .event-description {
  font-size:15px;
  line-height:1.8;
  margin:6px 0 10px;
  color:#3d4c55;
}
.tpw .name-aliases {
  font-size:13px;
  margin:6px 0;
  color:#415a69;
}
.tpw .name-note {
  font-size:13px;
  line-height:1.8;
  margin:8px 0 12px;
  border-left:3px solid #d1dadd;
  padding:5px 10px;
  background:#f7f9fa;
}
.tpw .kind {
  display:inline-block;
  font-size:11px;
  padding:1px 8px;
  margin:0;
  border:1px solid #d9cbc5;
  border-radius:20px;
  color:#794c40;
  background:#faf4ef;
}
.tpw .relation {
  margin:16px 0 18px;
  border:1px solid #cadbdc;
  border-radius:12px;
  background:#f3f8f7;
  overflow:hidden;
  padding:14px 16px;
}
.tpw .relation-head {
  font-weight:700;
  color:#244f56;
  font-size:13px;
}
.tpw .relation-head > span:not([data-ja]):not([data-en]) {
  font-weight:400;
  font-size:11px;
  margin-left:6px;
}
.tpw .relation-date {
  margin:8px 0 2px;
  color:#576c70;
  font-size:12px;
}
.tpw .relation h5 {
  font-size:16px;
  margin:0 0 12px;
  color:#193f47;
  line-height:1.55;
}
.tpw .relation-step {
  display:grid;
  grid-template-columns:105px 1fr;
  gap:10px;
  padding:9px 0;
  border-top:1px solid #d6e4e1;
  font-size:13px;
  line-height:1.7;
}
.tpw .relation-step p {
  margin:0;
}
.tpw .relation-step b {
  color:#305962;
}
.tpw .relation-peace b {
  color:#367259;
}
.tpw .relation-note {
  font-size:11px;
  color:#576c70;
  margin:10px 0 0;
  line-height:1.7;
}
.tpw .tech-link {
  background:none;
  border:0;
  padding:8px 0 0;
  color:#285f68;
  font-size:12px;
  text-decoration:underline;
  cursor:pointer;
}
.tpw .tech-overview>summary {
  font-weight:700;
  font-size:17px;
  color:#285f68;
  padding:0 0 14px;
  cursor:pointer;
}
.tpw .open-hint {
  font-size:11px;
  font-weight:400;
  white-space:nowrap;
}
.tpw .tech-overview .tech-stack {
  position:static;
}
.tpw.single .relation {
  display:none;
}
@media(max-width:760px) {
  .tpw .toolbar {
      position:static;
    }
  .tpw .technology {
      margin-bottom:12px;
    }
  .tpw .tech-overview {
      border:1px solid #ccdcd8;
      border-radius:12px;
      padding:12px;
      background:#f4f8f6;
    }
  .tpw .tech-overview>summary {
      font-size:14px;
      padding:0;
    }
  .tpw .tech-overview[open]>summary {
      padding-bottom:12px;
    }
  .tpw .tech-stack {
      display:block!important;
    }
  .tpw .tech-card {
      margin-bottom:12px;
    }
  .tpw .war>h3 {
      font-size:16px;
    }
  .tpw .event {
      padding:16px 14px;
    }
  .tpw .relation {
      margin:12px -3px 16px;
      padding:12px;
    }
  .tpw .relation-step {
      grid-template-columns:1fr;
      gap:3px;
    }
  .tpw .relation-step b {
      font-size:12px;
    }
  .tpw .relation h5 {
      font-size:15px;
    }
  .tpw .toolbar-inner {
      gap:8px;
    }
  .tpw .toolbar input {
      min-width:0;
      width:100%;
    }
  .tpw .relation-head {
      font-size:12px;
    }
  .tpw .relation-head > span:not([data-ja]):not([data-en]) {
      display:block;
      margin:2px 0 0;
    }
  .tpw .event-number {
      white-space:nowrap;
    }
  .tpw dl>div {
      min-width:0;
    }
  .tpw dd {
      overflow-wrap:anywhere;
    }
  .tpw .source {
      overflow-wrap:anywhere;
    }
}
@media print {
  .tpw .tech-link,
  .tpw .open-hint {
      display:none;
    }
  .tpw .relation {
      break-inside:avoid;
      padding:10px;
    }
  .tpw .relation-step {
      grid-template-columns:115px 1fr;
    }
  .tpw .tech-overview>summary {
      list-style:none;
    }
  .tpw .relation,
  .tpw .relation-peace {
      -webkit-print-color-adjust:exact;
      print-color-adjust:exact;
    }
}

/* =============================================
   Site integration
   ============================================= */
html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.tpw [id] { scroll-margin-top: calc(var(--banner-h, 0px) + 150px); }

.tpw {
  padding-top: calc(var(--banner-h, 0px) + 96px);
  padding-bottom: clamp(48px, 8vw, 96px);
}
.tpw .tpw-back {
  display: inline-block;
  font-family: var(--font-display-en);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 24px;
}
.tpw .tpw-back:hover { color: var(--blue); }
.tpw .tpw-header { max-width: 1100px; padding: 8px 0 28px; }
.tpw .tpw-title {
  font-family: var(--font-display-jp);
  font-size: clamp(28px, 4.6vw, 52px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.03em;
  margin: 12px 0 14px;
  max-width: 1100px;
  text-wrap: balance;
}
html[lang="en"] .tpw .tpw-title {
  font-family: var(--font-display-en);
  font-style: italic;
  font-weight: 500;
}
.tpw .tpw-date { font-size: 12px; letter-spacing: 0.16em; color: var(--muted); }

.tpw .tpw-part-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin: 0 0 6px;
}
.tpw .tpw-reflection {
  max-width: 760px;
  margin: 0 0 clamp(40px, 7vw, 72px);
  font-family: var(--font-body-jp);
}
.tpw .tpw-reflection h2 {
  font-family: var(--font-display-jp);
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.5;
  margin: 8px 0 22px;
}
.tpw .tpw-reflection p {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 2;
  margin: 0 0 1.4em;
}
.tpw .tpw-research-title {
  font-family: var(--font-display-jp);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.5;
  margin: 8px 0 6px;
}
.tpw .tpw-research-note { font-size: 14px; color: var(--muted); margin: 0; }
.tpw .hero { padding-top: 24px; }
.tpw .tpw-footer { text-align: left; }
.tpw .toolbar label { white-space: nowrap; }
.tpw .toolbar button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.tpw .noscript[hidden] { display: none !important; }

@media (max-width: 760px) {
  .tpw { padding-top: calc(var(--banner-h, 0px) + 80px); }
  .tpw [id] { scroll-margin-top: calc(var(--banner-h, 0px) + 80px); }
  .tpw .toolbar button,
  .tpw .toolbar input,
  .tpw .toolbar select { min-height: 44px; }
  .tpw .toolbar input,
  .tpw .toolbar select { font-size: 16px; }
  .tpw .tpw-reflection p { line-height: 1.95; }
}

@media print {
  .skip-link,
  .site-banner,
  .site-nav-primary,
  .site-footer,
  .ai-bubble,
  .vcb,
  .tpw .tpw-back { display: none !important; }
  .tpw { padding-top: 0; padding-bottom: 0; }
  .tpw .tpw-reflection { break-after: auto; max-width: none; }
  .tpw .tpw-reflection p { font-size: 11pt; line-height: 1.8; }
}