@page { size: A4; margin: 15mm 14mm 16mm 14mm; }
:root{
  --paper:#FBF6E9; --paper-2:#F8F1E0;
  --surface:#F4ECD8; --surface-2:#EDE2CC;
  --ink:#2E2A22; --muted:#6B6354;
  --accent:#1b3a5a; --accent-dark:#0f2740;
  --accent-2:#2d6e7a; --accent-3:#5fa3b2;
  --line:#D6C8A8; --line-2:#E6DCC2;
  --callout:#F6EFDC;
  --green:#2d5e3e; --teal:#2d6e7a;
  --plum:#6a4a8a; --terra:#b56b3f;
  --gold:#c9a449; --gold-deep:#8a6d22;
  --red:#b13e3e;
  --shadow:0 18px 46px rgba(15,39,64,0.10);
}
*{box-sizing:border-box}
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(circle at top left, rgba(45,110,122,0.08), transparent 26%),
    radial-gradient(circle at 85% 14%, rgba(27,58,90,0.08), transparent 22%),
    linear-gradient(180deg, #F4ECD8 0%, #EFE5D0 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(95,163,178,0.24), transparent 16%),
    linear-gradient(135deg, #0f2740 0%, #1b3a5a 36%, #082030 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:#cfe5ec; 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,246,248,0.96));
  border:1px solid rgba(45,110,122,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%, #F6EFDC 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-color .18s ease, box-shadow .18s ease;
  border-left:3px solid transparent;
}
.toc-items a:hover{
  transform:translateY(-2px);
  border-color:rgba(27,58,90,0.40); border-left-color:var(--accent-2);
  box-shadow:0 12px 24px rgba(15,39,64,0.06);
}
.chapter-card{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, #0f2740 0%, #1b3a5a 50%, #082030 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(95,163,178,0.45) 0%, rgba(95,163,178,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(45,110,122,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(95,163,178,0.28), transparent 26%),
    linear-gradient(135deg, #0f2740 0%, #1b3a5a 50%, #082030 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(45,110,122,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, #154366 0%, #1b3a5a 52%, #2d6e7a 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, #F4ECD8, 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(15,39,64,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, #F4ECD8 0%, #cee2e8 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);
  border-right:1px solid var(--line-2);
}
table.vocab-table thead th:last-child{ border-right:none; }
table.vocab-table tbody td{
  padding:14px 14px; vertical-align:top;
  border-bottom:1px solid var(--line-2);
  border-right:1px solid var(--line-2);
  line-height:1.65;
}
table.vocab-table tbody td:last-child{ border-right:none; }
table.vocab-table tbody tr:last-child td{ border-bottom:none; }
table.vocab-table tbody tr:nth-child(even) td{ background:#FAF5E8; }
.jp-term{
  font-family:"Noto Serif JP","Yu Mincho",serif;
  font-size:1.062rem; font-weight:700; color:#222; line-height:1.3;
}
.jp-term ruby rt{ font-size:0.5938rem; color:#7a8590; font-family:"Be Vietnam Pro",sans-serif; font-weight:500;}
.hanviet{
  display:block; margin-top:5px;
  font-size:0.6875rem; color:var(--accent-2); font-weight:800;
  letter-spacing:1.2px; font-family:"Be Vietnam Pro",sans-serif;
}
.meaning{ color:var(--accent); font-weight:700; line-height:1.5; font-size:0.8438rem;}
.explain{
  margin-top:8px; padding:10px 12px;
  background:linear-gradient(180deg, #fcfffe, #f3f9fa);
  border-left:3px solid var(--accent-3);
  border-radius:0 10px 10px 0;
  font-size:0.7812rem; color:#2d4a5a; line-height:1.7;
}
.example-box{
  margin-top:8px;
  background:linear-gradient(180deg, #FBF6E9, #F0E6CE);
  border-left:3px solid var(--gold);
  padding:9px 12px; border-radius:0 10px 10px 0;
  font-size:0.7812rem; font-style:italic; color:#5a4520;
}
.example-box strong{ color:var(--gold-deep); font-style:normal;}
.tip-box{
  margin:14px 0;
  background:linear-gradient(180deg, #fff5f8, #faeaf0);
  border:1px solid #f0d8e2; border-left:4px solid #b13e6a;
  border-radius:12px; padding:12px 16px;
  font-size:0.8125rem; color:#5a3a4a; line-height:1.7;
}
.tip-box strong{ color:#b13e6a; }
.formula-box{
  margin:14px 0;
  background:linear-gradient(180deg, #fffbef, #f8eed4);
  border:1px solid #d9bb88; border-left:4px solid var(--gold);
  border-radius:12px; padding:14px 18px;
  font-size:0.8438rem; color:#5a4520; line-height:1.8;
  font-family:"Noto Serif JP",serif;
}
.formula-box strong{ color:var(--gold-deep); font-size:0.9062rem;}
.formula-box .formula{
  display:inline-block; padding:6px 12px; margin:4px 0;
  background:#fff; border:1px dashed var(--gold-deep);
  border-radius:8px; color:var(--accent-dark); font-weight:700;
}
.warning-box{
  margin:14px 0;
  background:linear-gradient(180deg, #fff0eb, #ffe2d4);
  border:1px solid #f4c4a8; border-left:4px solid var(--terra);
  border-radius:12px; padding:12px 16px;
  font-size:0.8125rem; color:#5a3520; line-height:1.7;
}
.warning-box strong{ color:var(--terra); }
.compare-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:12px; margin:14px 0;
}
.compare-card{
  background:#fff; border:1px solid var(--line-2);
  border-left:4px solid var(--accent-2);
  border-radius:12px; padding:12px 14px;
  font-size:0.8125rem;
}
.compare-card .ttl{
  font-family:"Noto Serif JP",serif;
  font-weight:800; color:var(--accent); font-size:0.9375rem;
  margin-bottom:6px;
}
.compare-card .desc{ color:#3a4a55; line-height:1.6;}
.country-card{
  background:#fff; border:1px solid #d8e2c8;
  border-left:4px solid var(--green);
  border-radius:12px; padding:14px 16px; margin:8px 0;
  font-size:0.8125rem;
}
.country-card .cname{
  font-family:"Noto Serif JP",serif;
  font-weight:800; color:var(--green); font-size:1rem;
  margin-bottom:6px;
}
.country-card .cstats{
  font-size:0.7188rem; color:var(--muted); margin-bottom:6px;
  font-family:"Be Vietnam Pro",sans-serif;
}
.country-card .cdesc{ color:#2d4030; line-height:1.65;}
.exercise-block{
  margin:28px 0 22px;
  background:linear-gradient(180deg, #FBF6E9 0%, #F0E6CE 100%);
  border:1px solid #D6C8A8;
  border-radius:18px; overflow:hidden;
  box-shadow:0 10px 24px rgba(15,39,64,0.05);
}
.exercise-block h4{
  margin:0; padding:16px 22px;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  color:#fff; font-family:"Noto Serif JP",serif;
  font-size:1.062rem; font-weight:700; border:none;
}
.exercise-block ol{ margin:0; padding:18px 22px 6px 44px;}
.exercise-block li{ margin:14px 0; line-height:1.8; font-family:"Noto Serif JP",serif;}
.exercise-block .options{
  display:block; margin:6px 0 4px 0;
  font-family:"Be Vietnam Pro",sans-serif; font-size:0.8125rem; color:var(--accent-dark);
}
.exercise-block .options span{
  display:inline-block; margin-right:18px; margin-top:4px;
}
.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 6px 14px rgba(27,58,90,0.18);
}
.answer-box{
  display:none; margin:6px 22px 22px;
  padding:14px 16px;
  background:linear-gradient(180deg, #fffbef, #f8eed4);
  border:1px solid #d9bb88;
  border-left:4px solid var(--gold);
  border-radius:10px;
  font-family:"Be Vietnam Pro", "Be Vietnam Pro","Noto Sans JP", sans-serif;
  font-size:0.8125rem; line-height:1.75;
}
.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:#3a4530;}
.diagram-desc{
  margin:14px 0; padding:14px 18px;
  background:linear-gradient(180deg, #F6EFDC, #d8e8ed);
  border:1px solid #b9d2da; border-radius:14px;
  font-size:0.8125rem; color:#1f3a4a; line-height:1.75;
}
.diagram-desc .label{
  display:inline-block; padding:3px 10px; border-radius:6px;
  background:var(--accent-2); color:#fff;
  font-size:0.6875rem; font-weight:800; letter-spacing:0.05em;
  margin-bottom:8px; text-transform:uppercase;
}
.kv-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:10px; margin:12px 0;}
.kv-item{
  background:linear-gradient(180deg,#fff,#F6EFDC);
  border:1px solid var(--line-2); border-left:3px solid var(--accent-3);
  border-radius:10px; padding:10px 12px; font-size:0.8125rem;
}
.kv-item .kv-k{ font-family:"Noto Serif JP",serif; color:var(--accent); font-weight:700;}
.kv-item .kv-v{ color:#3a4a55; margin-top:3px;}
.summary-box{
  margin:18px 0; padding:16px 20px;
  background:linear-gradient(135deg, #1b3a5a 0%, #2d6e7a 100%);
  color:#fff; border-radius:16px;
}
.summary-box h5{
  margin:0 0 10px; font-family:"Noto Serif JP",serif;
  font-size:1rem; color:#fff;
}
.summary-box ul{ margin:0; padding-left:20px;}
.summary-box li{ margin:4px 0; font-size:0.8125rem; line-height:1.7;}
@media(max-width:720px){
  .toc-items{ grid-template-columns:1fr;}
  .doc-body{ padding:18px 16px 8px;}
}