@page { size: A4; margin: 15mm 14mm 16mm 14mm; }
:root{
  --paper:#FBF6E9; --paper-2:#F8F1E0;
  --surface:#F4ECD8; --surface-2:#EDE2CC;
  --ink:#2E2A22; --muted:#6B6354;
  --accent:#1a5d3a; --accent-dark:#0d3a22;
  --accent-2:#3a8a5c; --accent-3:#7fbe98;
  --line:#c5e0d0; --line-2:#dceee4;
  --callout:#f0f8f3;
  --green:#1a5d3a; --teal:#2d6e7a;
  --plum:#6a4a8a; --terra:#b56b3f;
  --gold:#c9a449; --gold-deep:#8a6d22;
  --red:#b13e3e; --navy:#1b3a5a;
  --shadow:0 18px 46px rgba(13,58,34,0.10);
}
*{box-sizing:border-box}
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(circle at top left, rgba(58,138,92,0.08), transparent 26%),
    radial-gradient(circle at 85% 14%, rgba(26,93,58,0.08), transparent 22%),
    linear-gradient(180deg, #eef4f0 0%, #e4ebe6 100%);
  font-family: "Be Vietnam Pro", "Be Vietnam Pro","Noto Sans JP", "Segoe UI", sans-serif;
  line-height:1.7; font-size:0.875rem;
  -webkit-font-smoothing:antialiased;
  padding:24px 12px; min-height:100vh;
}
.page-shell{ max-width:1180px; margin:0 auto; background:var(--paper); border:1px solid var(--line-2); border-radius:24px; padding:36px 32px 48px; box-shadow:var(--shadow);}
.main-header{ position:relative; overflow:hidden;
  background: radial-gradient(circle at 18% 18%, rgba(255,255,255,0.09), transparent 22%), radial-gradient(circle at 88% 20%, rgba(127,190,152,0.30), transparent 16%), linear-gradient(135deg, #0d3a22 0%, #1a5d3a 36%, #082818 100%);
  color:#fff; border-radius:22px; box-shadow:var(--shadow);
  padding:40px 40px 36px; margin-bottom:30px; text-align:center;
}
.main-header::after{ content:"経済"; position:absolute; right:-12px; bottom:-50px; font-family:"Noto Serif JP","Yu Mincho",serif; font-weight:900; font-size:clamp(7rem, 14vw, 12rem); color:rgba(255,255,255,0.07); line-height:1; pointer-events:none;}
.main-header .badge{ display:inline-block; padding:8px 18px; border-radius:999px; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.20); color:#d5ecdb; letter-spacing:0.18em; font-size:0.6875rem; font-weight:700; text-transform:uppercase;}
.main-header h1{ font-family:"Cormorant Garamond","Noto Serif JP",serif; font-weight:700; font-size:2.625rem; line-height:1.1; letter-spacing:-0.01em; margin:18px 0 8px; color:#fff;}
.main-header h1 .jp{ color:var(--accent-3); font-family:"Noto Serif JP",serif;}
.main-header .subtitle{ margin:0 auto; max-width:780px; color:rgba(255,255,255,0.85); font-size:0.9062rem; font-style:italic;}
.toc{ background:linear-gradient(180deg, rgba(255,253,250,0.96), rgba(240,248,243,0.96)); border:1px solid rgba(26,93,58,0.20); border-radius:22px; box-shadow:var(--shadow); padding:26px 28px; margin-bottom:32px;}
.toc h2{ margin:0 0 14px; padding:0; font-family:"Cormorant Garamond","Noto Serif JP",serif; font-size:1.75rem; line-height:1.1; color:var(--accent); font-weight:700; border:none;}
.toc-items{ list-style:none; padding-left:0; margin:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;}
.toc-items li{ margin:0;}
.toc-items a{ display:block; padding:11px 14px; text-decoration:none; color:inherit; background:linear-gradient(180deg, #FBF6E9 0%, #f0f8f3 100%); border:1px solid var(--line-2); border-radius:12px; font-weight:600; color:var(--accent); font-size:0.8438rem; transition:transform .18s ease; border-left:3px solid transparent;}
.toc-items a:hover{ transform:translateY(-2px); border-color:rgba(26,93,58,0.40); border-left-color:var(--accent-2); box-shadow:0 12px 24px rgba(13,58,34,0.08);}
.chapter-card{ position:relative; overflow:hidden; background:linear-gradient(135deg, #0d3a22 0%, #1a5d3a 50%, #082818 100%); border-radius:22px; box-shadow:var(--shadow); padding:32px 40px 28px; margin:50px 0 22px; color:#fff;}
.chapter-card::after{ content:""; position:absolute; right:-80px; top:-90px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(127,190,152,0.45) 0%, rgba(127,190,152,0.08) 48%, transparent 68%); pointer-events:none;}
.chapter-card h2{ margin:0 0 6px; font-family:"Noto Serif JP",serif; font-size:1.875rem; font-weight:700; color:#fff; position:relative; z-index:1;}
.chapter-card h2 .num{ color:var(--accent-3); margin-right:6px;}
.chapter-card .ch-sub{ font-size:0.875rem; color:rgba(255,255,255,0.82); font-style:italic; position:relative; z-index:1;}
.document{ background:var(--paper); border:1px solid rgba(26,93,58,0.16); border-radius:24px; box-shadow:var(--shadow); padding:0 0 32px; margin-bottom:36px; overflow:hidden;}
.lesson-banner{ position:relative; overflow:hidden; display:flex; align-items:center; gap:14px; padding:24px 36px 22px; background: radial-gradient(circle at 88% 30%, rgba(127,190,152,0.28), transparent 26%), linear-gradient(135deg, #0d3a22 0%, #1a5d3a 50%, #082818 100%); color:#fff;}
.lesson-banner .lesson-no{ flex-shrink:0; width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg, var(--accent-3) 0%, var(--accent-2) 100%); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.875rem; box-shadow:0 6px 14px rgba(26,93,58,0.30); font-family:"Cormorant Garamond",serif;}
.lesson-banner h3{ margin:0; flex:1; font-family:"Noto Serif JP",serif; font-size:1.375rem; font-weight:700; color:#fff;}
.lesson-banner h3 .vn{ display:block; margin-top:3px; font-family:"Be Vietnam Pro",sans-serif; font-size:0.8125rem; font-weight:500; color:rgba(255,255,255,0.82); font-style:italic;}
.doc-body{ padding:24px 32px 12px;}
.section-head{ position:relative; overflow:hidden; margin:18px 0 16px; padding:14px 22px 14px 20px; border-radius:18px; background: linear-gradient(90deg, rgba(255,255,255,0.08), transparent 36%), linear-gradient(135deg, #2a6a44 0%, #1a5d3a 52%, #3a8a5c 100%); color:#fff; font-weight:700;}
.section-head::before{ content:attr(data-mark); margin-right:10px; font-size:1.125rem;}
.subsection-head{ margin:16px 0 10px; padding:8px 14px; border-left:4px solid var(--accent-2); background:linear-gradient(90deg, #e4f0e8, transparent); font-weight:700; color:var(--accent); font-family:"Noto Serif JP",serif; font-size:0.9375rem; border-radius:0 8px 8px 0;}
.intro-text{ background:linear-gradient(180deg, #fdfcf6, #f7f0e0); border-left:4px solid var(--gold); padding:12px 16px; margin:10px 0 16px; border-radius:0 12px 12px 0; font-size:0.8438rem; line-height:1.75;}
.table-shell{ margin:14px 0 22px; border:1px solid var(--line-2); border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 10px 26px rgba(13,58,34,0.05);}
table.vocab-table{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; font-size:0.8438rem;}
table.vocab-table thead{ background:linear-gradient(180deg, #d8ead8 0%, #b5d6bc 100%); color:var(--accent);}
table.vocab-table thead th{ padding:13px 14px; text-align:left; font-weight:800; font-size:0.7812rem; letter-spacing:0.02em; border-bottom:1px solid var(--line-2);}
table.vocab-table tbody td{ padding:11px 14px; border-bottom:1px solid var(--line-2); vertical-align:top;}
table.vocab-table tbody tr:nth-child(even){ background:#f6faf7;}
table.vocab-table tbody tr:last-child td{ border-bottom:none;}
.year-col{ font-family:"Cormorant Garamond",serif; font-weight:800; color:var(--accent); white-space:nowrap;}
.callout{ background:var(--callout); border:1px solid var(--line); border-left:5px solid var(--accent-2); border-radius:0 14px 14px 0; padding:14px 18px; margin:12px 0 18px; font-size:0.8438rem;}
.callout strong{ color:var(--accent);}
.tip-box{ background:linear-gradient(180deg, #fffbe6, #fff3b8); border-left:5px solid var(--gold); border-radius:0 14px 14px 0; padding:14px 18px; margin:12px 0 18px; font-size:0.8125rem;}
.quiz-list{ counter-reset:q; padding-left:0; list-style:none;}
.quiz-list > li{ counter-increment:q; margin:14px 22px; padding:14px 16px 12px 50px; position:relative; background:linear-gradient(180deg, #fff, #f6faf7); border:1px solid var(--line-2); border-radius:14px; font-size:0.8438rem;}
.quiz-list > li::before{ content:counter(q); position:absolute; left:14px; top:14px; width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.8125rem;}
.options{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px 14px; margin-top:8px;}
.options span{ font-size:0.8125rem; color:#1d3025;}
.answer-btn{ margin:8px 22px 12px; padding:9px 22px; background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color:#fff; border:none; border-radius:999px; font-weight:700; font-size:0.8125rem; cursor:pointer; box-shadow:0 4px 10px rgba(13,58,34,0.20);}
.answer-btn:hover{ filter:brightness(1.1);}
.answer-box{ display:none; margin:6px 22px 22px; padding:14px 16px; background:linear-gradient(180deg, #fffbef, #f8eed4); border-left:4px solid var(--gold); border-radius:0 12px 12px 0; font-size:0.8125rem;}
.answer-box.visible{ display:block;}
.answer-box .ans-key{ color:var(--gold-deep); font-weight:800; font-size:0.9062rem; display:block; margin-bottom:6px;}
.answer-box .ans-exp{ color:#1d3025;}
.svg-gallery{ display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; margin:16px 0 24px;}
@media (max-width: 720px){ .svg-gallery{ grid-template-columns:1fr;}}
.svg-card{ background:#fff; border:1px solid var(--line-2); border-radius:16px; padding:14px 16px 12px; box-shadow:0 8px 18px rgba(13,58,34,0.06);}
.svg-card h4{ margin:0 0 8px; font-family:"Noto Serif JP",serif; color:var(--accent); font-size:0.9062rem; font-weight:700;}
.svg-card .svg-cap{ font-size:0.7188rem; color:var(--muted); margin-top:6px; line-height:1.5;}
.svg-card svg{ width:100%; height:auto; display:block;}
.trap-list{ background:linear-gradient(180deg, #fff6e6, #ffe9c8); border-left:5px solid var(--terra); border-radius:0 14px 14px 0; padding:16px 20px; margin:14px 0 20px;}
.trap-list h4{ margin:0 0 10px; color:#8a4a1c; font-weight:800; font-size:0.9375rem;}
.trap-list ul{ margin:0; padding-left:22px;}
.trap-list li{ margin-bottom:8px; font-size:0.8125rem; line-height:1.7;}
.trap-list em{ color:var(--red); font-style:normal; font-weight:700;}
.must-know{ background:linear-gradient(180deg, #efeaff, #ded3ff); border-left:5px solid var(--plum); border-radius:0 14px 14px 0; padding:16px 20px; margin:14px 0 20px;}
.must-know h4{ margin:0 0 10px; color:var(--plum); font-weight:800; font-size:0.9375rem;}
.must-know table{ width:100%; border-collapse:collapse; font-size:0.7812rem;}
.must-know th, .must-know td{ padding:6px 8px; border:1px solid #c8b6e6; text-align:left;}
.must-know th{ background:rgba(106,74,138,0.12); font-weight:700; color:var(--plum);}
.formula{ background:#1a3025; color:#d5ecdb; padding:8px 14px; border-radius:8px; font-family:"Cormorant Garamond",serif; font-size:0.875rem; display:inline-block; margin:6px 0;}