/* ========== Base ========== */
:root{
  --bg:#fffdf9;--ink:#0f172a;--ink2:#334155;--line:#e5e7eb;
  --muted:#64748b;--accent:#0ea5e9;--card:#ffffff;--chip:#f1f5f9;--pop:#ffe8cc
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue','Hiragino Sans','Noto Sans JP',Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:#0ea5e9;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1120px;margin:0 auto;padding:0 20px}

/* ========== Header ========== */
.site-header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;gap:8px;align-items:center;font-weight:700}
.brand-logo{border-radius:8px}

/* ========== Hero ========== */
.hero{position:relative;overflow:hidden;padding:64px 0 40px;border-bottom:1px solid var(--line);background:radial-gradient(1000px 400px at 50% -200px,#e6f7ff 0%,#fffdf9 60%)}
.hero h1{font-size:clamp(22px,4vw,34px);margin:8px 0 10px}
.hero .lead{color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:6px;background:var(--pop);border:1px solid #ffd8a8;color:#7c4a03;font-weight:700;border-radius:999px;padding:6px 10px;font-size:12px}
.decor{position:absolute;inset:0;pointer-events:none}
.blob{position:absolute;width:220px;height:220px;filter:blur(24px);opacity:.35;border-radius:50%;animation:float 10s ease-in-out infinite}
.b1{background:#b3e5fc;top:-40px;left:8%}
.b2{background:#fde2e4;top:10px;right:12%;animation-delay:1.5s}
.b3{background:#e9ffd7;bottom:-60px;left:30%;animation-delay:.8s}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(18px)}100%{transform:translateY(0)}}
.searchbar{display:flex;gap:10px;border:1px solid var(--line);background:#fff;border-radius:14px;padding:10px;justify-content:center;max-width:520px;margin:16px auto 0}
.searchbar input{flex:1;border:none;font-size:16px;outline:none}
.searchbar button{border:none;background:var(--ink);color:#fff;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;justify-content:center}
.chip{padding:8px 12px;border-radius:999px;background:var(--chip);border:1px solid var(--line);color:var(--ink2);font-weight:500;font-size:14px}

/* ========== Sections & Cards ========== */
section{padding:36px 0;border-bottom:1px solid var(--line)}
.sec-title{text-align:center;font-size:clamp(18px,3vw,22px);margin:0 0 18px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{grid-column:span 4;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.thumb{aspect-ratio:16/9;background:#e2e8f0}
.body{padding:14px}
.kicker{color:var(--muted);font-size:12px;letter-spacing:.04em}
.card h3{margin:6px 0 6px;font-size:16px}
.card p{color:var(--ink2);font-size:14px}
.note{color:var(--muted);font-style:normal;display:block;margin-top:4px}
.timeline{border-left:2px solid var(--line);padding-left:18px}
.tl-item{margin-bottom:16px}
.tl-item time{display:inline-block;font-size:12px;color:var(--muted)}
.tl-item h4{margin:4px 0}
.grid.two .card{grid-column:span 6}

@media(min-width:0px) and (max-width:820px){
  .card{grid-column:span 12}
  .grid.two .card{grid-column:span 12}
}

/* ========== Footer ========== */
.site-footer{padding:40px 0;color:var(--muted)}


/* ==== Article Page ==== */
.breadcrumb ol { list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 12px; }
.breadcrumb li::after { content: '›'; margin-left:8px; color: var(--muted); }
.breadcrumb li:last-child::after { content:''; }
.breadcrumb a { color: var(--ink2); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.article-title { font-size: clamp(20px, 4vw, 30px); margin: 0 0 6px; }
.article-meta { color: var(--muted); font-size: 14px; }

.toc { border: 1px solid var(--line); border-radius: 12px; background:#fff; padding:12px; }
.toc .toc-list, .toc .toc-sub { list-style: none; padding-left: 0; margin: 0; }
.toc .toc-list > li { margin: 6px 0; }
.toc .toc-sub { margin-top: 6px; padding-left: 16px; }
.toc a { text-decoration: none; color: var(--accent); }

.references ol { padding-left: 18px; }
.references li { margin: 6px 0; }

.disclaimer { font-size: 14px; color: var(--ink2); }
/* ==== Thumbs (card背景用) ==== */
.thumb { background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #e2e8f0; }
.thumb-wuxing    { background-image: url('../img/wuxing.png'); }
.thumb-meridians { background-image: url('../img/meridians.png'); }
.thumb-timeline  { background-image: url('../img/timeline.png'); }
.thumb-huangdi { background-image: url('../img/huangdi-neijing.png'); }
.thumb-tools     { background-image: url('/assets/img/thumb-tools.svg'); }
.thumb-who       { background-image: url('/assets/img/thumb-who.svg'); }
.thumb-article   { background-image: url('/assets/img/thumb-article.svg'); }
/* ==== Perf: below-the-fold を遅延描画 ==== */
#features, #timeline, #policy {
  content-visibility: auto;
  contain-intrinsic-size: 800px 1200px; /* 仮サイズでCLS回避 */
}
.sec-title,.article-title{ font-family:"Zen Antique Soft","Noto Sans JP",system-ui,sans-serif; }
body{ font-family:"Noto Sans JP",system-ui,sans-serif; }

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none !important; }
}
/* ===== Global page gutter ===== */
:root{
  /* 端の余白：画面幅に応じて 16px〜48px で可変 */
  --page-gutter: clamp(16px, 4vw, 48px);
  /* 本文の最大幅（お好みで 1040~1280px） */
  --container-max: 1120px;
}

/* すべての .container に左右の余白を付与＋中央寄せ */
.container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-left:  max(var(--page-gutter), env(safe-area-inset-left));  /* iOS安全域対応 */
  padding-right: max(var(--page-gutter), env(safe-area-inset-right));
}

/* ヒーローなどフル幅セクションでも内側の .container に効く */
/* =======================
   モバイルの読みやすさ最適化
   ======================= */

/* 1) ベース：スマホは本文サイズを15px相当へ */
@media (max-width: 480px){
  html{ font-size: 15px; }           /* 既定16px → 15pxに */
  body{ line-height: 1.7; }          /* 行間をやや広めに */
}

/* 2) 見出しを一段スリムに（fluid＋上限） */
@media (max-width: 480px){
  .hero h1{ font-size: clamp(1.20rem, 6vw, 1.80rem); letter-spacing: .01em; }
  h2{       font-size: clamp(1.05rem, 4.2vw, 1.35rem); }
  h3{       font-size: clamp(1.00rem, 3.6vw, 1.20rem); }
  .lead{    font-size: .98rem; line-height: 1.6; max-width: 36em; margin-inline:auto; }
}

/* 3) ヒーロー検索（入力は16px維持でiOSズーム回避） */
@media (max-width: 480px){
  .hero .searchbar{ max-width: 640px; padding: 4px; gap: 6px; }
  .hero .searchbar input{ font-size: 16px; height: 40px; padding: 0 10px; } /* ←16px固定 */
  .hero .searchbar button{ height: 40px; padding: 0 14px; font-size: .95rem; }
}

/* 4) ナビ・バッジ・チップも小さめに */
@media (max-width: 480px){
  .site-header .brand{ font-size: .98rem; }
  nav[aria-label="主要ナビゲーション"] a{ font-size: .95rem; }
  .badge, .hanko{ transform: scale(.94); transform-origin: left center; }
  .chip{ font-size: .88rem; padding: 6px 10px; }
  .kicker{ font-size: .9rem; }
}

/* 5) カード内テキストの圧縮 */
@media (max-width: 480px){
  .card .body p{ font-size: .95rem; line-height: 1.55; }
  .card h3{ font-size: 1.05rem; }
  .grid{ gap: 14px; } /* つめ気味 */
}

/* 6) 余白の見直し（上部の余白を少しだけ圧縮） */
@media (max-width: 480px){
  section.hero .container{ padding-top: 10px; padding-bottom: 16px; }
  .sec-title{ margin-top: 10px; margin-bottom: 8px; }
}
:root{
  --font-sans: 'Noto Sans JP', system-ui, -apple-system, 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', sans-serif;
  --font-display: 'Zen Antique Soft', var(--font-sans);
}
body{ font-family: var(--font-sans); line-height: 1.75; letter-spacing: .02em; }
h1, h2, .sec-title, .brand{ font-family: var(--font-display); letter-spacing: .02em; }