/* ============================================================================
   lifeinjapan —— v2.css（V1 版式改版 · 轨道 A）
   ----------------------------------------------------------------------------
   加载顺序：base.css → type-content.css / type-tool.css / index.css → fx-widget.css
             → **v2.css（本文件，最后 → 同特异性下本文件胜出）**
   所以：**这里只做「覆盖与新增」，不去改 base.css / type-content.css**。
   好处是出问题时删掉这一条 <link> 就能整体回滚，且不影响其它任务的改动
   （2026-10-12：另一个任务在 /css/type-iryohi-calc.css 里加了计算器样式）。

   ⚠️ 两条不能破的约束（check.sh 会验）：
     1. `.hero-img` 与 `.guide-card img` 的规则里必须保留 `height:auto`
        —— HTML 的 height 属性优先于 aspect-ratio，漏了会把图片拉变形（1g 项）。
     2. 断点（@media）**统一放在文件最后** —— 曾经把它们放在基础规则之前，
        后面同特异性的规则把 display:none 覆盖掉，窄屏侧栏照样显示。
   ============================================================================ */

/* ---------- 1. 设计令牌 v2 ---------- */
:root{
  --bg:#fafaf8;
  --surface:#fff;
  --surface-2:#f5f2ed;
  --card:#fff;
  --card2:#f5f2ed;
  --border:#e7e2da;
  --text:#24242e;
  --muted:#6d6d7a;                 /* 原 #8c8c99 太浅，小字长文里读着累 */
  /* 2026-10-18：这两个色**作文字色**时不达 WCAG AA。
     实测 #c44d4d 在浅底上只有 4.0–4.45:1（阈值 4.5），全站 200+ 处
     <strong>/<a>/<h3> 中招 —— 中文/日文长文里读着明显发虚。
     压暗到 #b84242 / #44639c 后：白底 5.42 / 5.94，最差浅色底 4.67 / 5.12。
     色相不变、明度只降 3%，肉眼几乎看不出；logo 方块与按钮渐变里仍硬编码
     #c44d4d，所以视觉标识原样不动。判据见 ui-audit.js 的「对比度」一项。 */
  --accent:#b84242;
  --accent2:#44639c;
  --r:14px;                        /* 圆角统一 14 / 10 / pill */
  --r-sm:10px;
  --r-pill:999px;
  --sh:0 1px 2px rgba(0,0,0,.04),0 2px 8px rgba(0,0,0,.04);
  --sh-hover:0 2px 6px rgba(0,0,0,.05),0 14px 34px rgba(0,0,0,.07);
  --shell:1080px;
  --side:300px;
}

/* ---------- 2. 骨架与基准排版 ---------- */
/* 兜底：页脚 full-bleed 用 50vw 计算，Windows 经典滚动条会让它比可视区宽约 15px。
   `clip` 而非 `hidden` —— hidden 会创建滚动容器、让 sticky 站头失效，clip 不会。 */
html{overflow-x:clip}
body{font-size:16px;line-height:1.9;letter-spacing:.01em;-webkit-font-smoothing:antialiased}
.container{max-width:var(--shell);padding:0 24px 72px}
h1{font-size:34px;line-height:1.42;font-weight:800;margin:8px 0 14px}
.subtitle{font-size:16px;color:#55555f;line-height:1.9;margin-bottom:20px}
h2{font-size:23px;line-height:1.5;font-weight:800;margin:46px 0 18px;
   padding:0 0 0 16px;border-bottom:none;position:relative}
h2::before{content:"";position:absolute;left:0;top:.28em;width:5px;height:1.05em;
   border-radius:3px;background:linear-gradient(180deg,#d96868,#c44d4d)}
h2[id]{scroll-margin-top:88px}
h3{font-size:17.5px;font-weight:700}
p{margin-bottom:16px}
ul,ol{padding-left:22px}
li{font-size:15.5px;line-height:1.85;margin-bottom:9px}
a{text-decoration:none}
.body a,.col-main a{text-decoration:none}
.col-main p a,.col-main li a{font-weight:600;border-bottom:1px solid rgba(74,111,165,.3)}
.col-main p a:hover,.col-main li a:hover{border-bottom-color:var(--accent2)}

/* ---------- 3. 站头（contained sticky：与正文同列宽，所以不会外溢） ---------- */
/* ⚠️ 必须写 display:block —— base.css 有一条裸 `header{display:flex;justify-content:space-between}`，
   它会作用到本页的 <header class="site-head">，把它变成 flex 容器；于是 .bar 成了收缩宽度的
   flex item（实测 781px 而非 1032px），导航的 margin-left:auto 完全失效、右侧空出 251px。
   这个 bug 只在**真实渲染**里看得见，check.sh / seo-audit 都读不出来（2026-10-12 实测抓到）。 */
.site-head{display:block;position:sticky;top:0;z-index:60;background:rgba(250,250,248,.93);
  -webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);margin:0 calc(50% - 50vw) 6px;padding:0 24px}
/* 站头同样 full-bleed：否则那 1px 底边框只有 1080 宽，宽视口下会在两侧断开
   （页脚上边框已通栏，上下不对称会很明显）。内容列自己居中到 1032。 */
.site-head .bar{display:flex;align-items:center;gap:24px;height:64px;width:100%;
  max-width:calc(var(--shell) - 48px);margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);flex-shrink:0}
.brand .mark{width:30px;height:30px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(160deg,#d96868,#c44d4d);color:#fff;font-size:15px;
  font-weight:800;display:grid;place-items:center}
.brand .bt b{font-size:16.5px;font-weight:800;display:block;line-height:1.25}
.brand .bt span{font-size:12px;color:var(--muted);font-weight:600;display:block;line-height:1.3}
/* 同样要中和 index.css 那条裸 `nav{…padding-bottom:32px;border-bottom:…}` —— 它会给站内导航
   多加 32px 下内边距和一条边框（实测 .site-nav 高 42px 而不是 10px 左右）。 */
.site-nav{display:flex;gap:2px;margin-left:auto;padding-bottom:0;border-bottom:0;
  overflow-x:auto;scrollbar-width:none}
.site-nav::-webkit-scrollbar{display:none}
.site-nav a{font-size:13.5px;font-weight:600;color:#4c4c58;padding:8px 12px;line-height:1.25;
  border-radius:var(--r-pill);white-space:nowrap}
.site-nav a:hover{background:var(--surface-2);color:var(--accent2)}
.site-nav a.on{background:rgba(74,111,165,.1);color:var(--accent2)}
/* 语言切换：类名必须是 lang-bar（check.sh 4b/4d 靠它剔除），只改外观。
   `margin-left:auto` 是必须的 —— ≤900px 时 .site-nav 被隐藏，它的 auto margin 一起消失，
   语言切换就会紧贴站名、右侧空出一块（2026-10-12 实测）。两个 auto margin 并存时
   可用空间在两者间均分 → 站名居左、主题导航居中、语言切换贴右，正是想要的三段式。 */
.lang-bar{display:flex;gap:2px;background:var(--surface-2);border-radius:var(--r-pill);
  padding:3px;flex-shrink:0;margin-left:auto}
.lang-bar a{font-size:12px;font-weight:700;color:#5c5c68;padding:5px 11px;line-height:1.25;
  border:0;border-radius:var(--r-pill)}
.lang-bar a.active{background:var(--surface);color:var(--accent);box-shadow:var(--sh)}
.lang-bar a:hover:not(.active){color:var(--accent2);border:0}

/* ---------- 4. 双栏骨架 ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.layout-side{grid-template-columns:minmax(0,1fr) var(--side);gap:44px;align-items:start;
  padding:14px 0 8px}
.col-main{min-width:0}
.col-side{position:sticky;top:88px;display:flex;flex-direction:column;gap:18px;align-self:start}
.sbox{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--sh);padding:16px 18px 18px}
.sbox .side-h{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.08em;
  margin:0 0 12px}
.sbox a{display:block;font-size:14px;color:#3f3f4b;font-weight:600;padding:7px 0;
  border-bottom:1px dashed var(--border);line-height:1.6;
  /* 侧栏标签从各页 <title> 派生，长度不可控 —— 兜底截到 2 行，
     避免个别长标签把侧栏撑得很高（2026-10-12 实测最长 45 字符）。 */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sbox a:last-child{border-bottom:none}
.sbox a:hover{color:var(--accent2)}
.sbox a.cur{color:var(--accent2)}
.sbox a .now{font-size:12px;color:var(--muted);font-weight:600}
.sbox.hub{background:linear-gradient(160deg,rgba(74,111,165,.07),rgba(74,111,165,.02));
  border-color:#d8e0ee}
.sbox.hub .hub-link{display:block;font-size:15.5px;font-weight:800;color:var(--accent2);
  padding:0 0 6px;border-bottom:none}
.sbox .side-note{font-size:12.5px;color:var(--muted);margin:0;line-height:1.7}

/* ---------- 5. 页脚（3 栏） ---------- */
/* 2026-10-13 修「底部布局」三处（真实 Chrome 几何实测，视口 1440 / 1280）：
   ① 不通栏 —— 原来是 `margin-top:48px;padding:32px 0 30px`，没有负 margin，
      于是页脚只有 1032px 宽（= container 内容区），左右各露 204px 米白；
      而站头 `.site-head` 是 `margin:0 -24px` **通栏**的 → 上通栏、下不通栏，明显不对称。
      修法：`margin:48px -24px -72px` —— 左右各外扩 24px 抵消 container 的左右 padding。
   ② 下方多 72px 空白 —— `.container` 的 `padding:0 24px 72px` 底部内边距没有被吸收，
      页脚白块下面再拖一条米白。修法：负 `margin-bottom:-72px`，让页脚吃掉它、贴到页面底。
      （不改 container 本身：404.html / embed/* 没有页脚，去掉 padding 会让它们内容贴底。）
   ③ 顶部圆角 —— 原 `border-radius:var(--r) var(--r) 0 0` 是为「悬空卡片」准备的，
      通栏后左右圆角会露出底色显得被裁角。通栏块用直角，与站头的直角上下呼应。
   ⚠️ 耦合：这里的 24 / 72 必须与 `.container` 的 `padding:0 24px 72px` 一致；
      窄屏 16 / 56 必须与 ≤640px 的 `.container{padding:0 16px 56px}` 一致。
      改 container 内边距时**必须同步这里**，否则通栏与贴底会破。 */
.site-foot{border-top:1px solid var(--border);background:var(--surface);
  border-radius:0;
  /* full-bleed：左右各拉到视口边缘。
     `calc(50% - 50vw)` 里 50% 相对包含块 **content 宽度**（1080-48=1032），
     50vw 是视口的一半 —— 两者之差恰好是「容器边缘到视口边缘」的距离，
     所以页脚总能精确铺满视口，且**不依赖 --shell / padding 的具体数值**
     （原来写死 -24px，改容器宽度就得同步改这里，是两处硬耦合之一）。
     ⚠️ 50vw 含经典滚动条宽度（Windows），可能比可视区宽 ~15px →
        已在 html 上加 overflow-x:clip 兜底，不会出横向滚动条。 */
  margin:48px calc(50% - 50vw) -72px;padding:32px 24px 30px}
/* 通栏后内容列自己居中，宽度对齐站头内容列（1032 = 1080 - 左右各 24） */
.site-foot .shell{max-width:calc(var(--shell) - 48px);margin:0 auto}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:28px}
.fcol .fh{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.08em;
  margin:0 0 10px}
.fcol a{display:block;font-size:13.5px;color:#4c4c58;padding:4px 0;font-weight:500}
.fcol a:hover{color:var(--accent2)}
/* ⚠️ 这里必须写 `.fcol .brand`（0,2,0）而不是只靠 `.brand`（0,1,0）：
   上面的 `.fcol a{display:block}` 特异度是 (0,1,1)，**会压过** `.brand{display:flex}`，
   于是页脚里的品牌锁定被打回 block —— logo 独占一行、站名和副标题掉到下一行
   （实测 .mark 与 .bt 相差 30px）。顺带把 `.fcol a` 带进来的字号/内边距/颜色复位。 */
.fcol .brand{display:flex;align-items:center;gap:10px;margin-bottom:12px;
  color:var(--text);font-size:inherit;font-weight:inherit;padding:0}
.fcol .brand:hover{color:var(--text)}
.fnote{font-size:12.5px;color:var(--muted);line-height:1.8;margin:0}
.fbot{border-top:1px solid var(--border);margin-top:22px;padding-top:14px;
  text-align:center;color:var(--muted);font-size:12.5px}
.fbot .footer-updated{margin-top:4px;font-size:12px}

/* ---------- 6. 目次 ---------- */
.toc{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
  padding:16px 20px 18px;margin:0 0 32px}
.toc-h{font-size:13px;font-weight:800;color:#5c5c68;letter-spacing:.06em;margin:0 0 10px}
.toc ol{list-style:none;padding:0;margin:0;columns:2;column-gap:26px}
.toc li{break-inside:avoid;margin:0}
.toc a{display:block;font-size:14px;color:#3f3f4b;padding:5px 8px;border-radius:8px;
  line-height:1.6;border-bottom:none}
.toc a:hover{background:var(--surface);color:var(--accent2)}
.toc a.cur{background:var(--surface);color:var(--accent2);font-weight:700;
  box-shadow:inset 3px 0 0 var(--accent2)}
.toc .n{color:var(--muted);font-weight:700;font-size:12px;margin-right:7px}

/* ---------- 7. 组件对齐新令牌 ---------- */
.quick-answer{border-radius:var(--r);border-left:none;border-top:3px solid var(--accent2);
  padding:18px 22px;margin:0 0 26px}
.quick-answer .qa-label{font-size:12px;letter-spacing:.06em;margin-bottom:8px}
.quick-answer p{font-size:15.5px;line-height:1.85}

.steps>li{padding:0 0 22px 60px}
.steps>li::before{width:36px;height:36px;border-radius:12px;font-size:15px;
  background:linear-gradient(160deg,#6a8fc0,#4a6fa5);line-height:36px}
.steps>li::after{left:17px;top:42px;width:2px}
.steps .step-body{font-size:15px;line-height:1.85}
.steps .step-title{font-size:16.5px;font-weight:800;margin-bottom:8px}
.steps .step-meta{border-radius:var(--r-pill);padding:3px 11px;font-size:12px;font-weight:700}

.warn-box,.guide-section{border-radius:var(--r)}
.warn-box{border-left-width:4px;padding:18px 22px}
.warn-box h3{font-size:16.5px}
.warn-box p{font-size:15px;line-height:1.85}
.guide-section{border-left-width:4px;padding:18px 22px;margin-bottom:12px}
.guide-section h3{font-size:16px}

.tool-cta{border-radius:var(--r);background:linear-gradient(135deg,#f7f4ef,#fbfaf7);
  padding:20px 24px;margin:12px 0 34px}
.tool-cta h3{font-size:16px}
.tool-cta p{font-size:13.5px}
.tool-cta a{border-radius:var(--r-sm);padding:12px 20px;font-size:14px;font-weight:700}

.hsp-table{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);
  border:1px solid var(--border);border-collapse:separate;border-spacing:0;font-size:14.5px}
.hsp-table th,.hsp-table td{border:0;border-bottom:1px solid var(--border);padding:12px 14px}
.hsp-table th{background:var(--surface-2);font-size:13.5px}
.hsp-table tr:last-child td{border-bottom:0}

.updated-note,.topic-crumb{border-radius:var(--r-pill);font-size:12px;padding:4px 11px}
.topic-crumb{margin:0 0 14px}
.recommendations{border-radius:var(--r);padding:22px 24px;margin-top:44px}
.recommendations h2{font-size:17px;padding-left:0;margin:0 0 14px}
.recommendations h2::before{display:none}
.rec-card{border-radius:var(--r-sm);padding:14px 16px;margin-bottom:8px;
  border:1px solid var(--border);background:var(--bg);transition:box-shadow .18s}
.rec-card:hover{box-shadow:var(--sh-hover)}
.rec-card:last-child{margin-bottom:0}
.rec-card a{border-radius:var(--r-sm);padding:9px 16px;font-size:13.5px}

/* ---------- 7b. 相关页「带图卡片网格」（PRODUCT-BACKLOG A5b，2026-10-27） ----------
   只有「目标页存在 img/card-<slug>.jpg」的推荐卡才进网格，判定在 make-rec-cards.py 里，
   从文件系统推导。其余（外链 / /embed/ / /guide/*）仍用上面的 .rec-card 行式 ——
   它们没有配图，强行混进网格会一半有一半没有。
   顺序**按原文**：只有「连续出现的带图卡」才聚成网格，不去重排作者写的先后。
   ⚠️ `.recc img` 必须写 height:auto：`<img>` 上的 height 属性会压过 aspect-ratio
   （2026-10-06 的图片拉伸事故就是这么来的），check.sh 1g 也把这条钉住了。 */
.rec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:2px 0 4px}
.rec-grid.cols3{grid-template-columns:repeat(3,1fr)}
.recc{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);overflow:hidden;text-decoration:none;color:inherit;
  transition:box-shadow .18s,transform .18s}
.recc:hover{box-shadow:var(--sh-hover);transform:translateY(-2px)}
.recc img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.recc-in{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.recc h3{font-size:14.5px;font-weight:700;line-height:1.5;margin:0;color:var(--text)}
.recc p{font-size:12.5px;color:var(--muted);line-height:1.65;margin:0}
.recc-cta{margin-top:auto;padding-top:4px;font-size:13px;font-weight:700;color:var(--accent2)}
/* 网格与行式卡相邻时留一点间距（两个方向都要，因为顺序按原文可能反过来）。
   不额外包容器 —— check-html-structure.py 要求 .rec-card 的父是 .recommendations。 */
.rec-grid+.rec-card,.rec-card+.rec-grid{margin-top:12px}

.hero-img{border-radius:var(--r);box-shadow:var(--sh);height:auto}

/* ---------- 8. FAQ 折叠 ---------- */
details.faq{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--sh);margin-bottom:10px;overflow:hidden}
details.faq summary{cursor:pointer;list-style:none;padding:16px 52px 16px 20px;
  font-size:15.5px;font-weight:700;position:relative;line-height:1.6}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;
  border-right:2.2px solid var(--muted);border-bottom:2.2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s}
details.faq[open] summary::after{transform:translateY(-30%) rotate(225deg)}
details.faq[open] summary{color:var(--accent2)}
details.faq .ans{padding:14px 20px 18px;border-top:1px solid var(--border);
  font-size:15px;line-height:1.85;color:#3d3d48}
details.faq .ans p{margin-bottom:8px}
details.faq .ans p:last-child{margin-bottom:0}

/* ============================================================================
   9. 断点 —— 必须在文件最后（见头部约束 2）
   ============================================================================ */
@media(max-width:1000px){
  .layout-side{grid-template-columns:minmax(0,1fr);gap:0}
  .col-side{display:none}          /* 窄屏用「本主题的页面」在文末的推荐位承担导航 */
}
@media(max-width:900px){
  /* 4 个主题标签在窄屏放不下（样张实测 500px 时溢出）→ 收起导航行，只留站名+语言。
     正式做法是抽屉菜单，留作后续（见 PRODUCT-BACKLOG 的 V1 待办）。 */
  .site-nav{display:none}
  .site-head .bar{gap:14px}
}
@media(max-width:640px){
  body{font-size:15.5px}
  .container{padding:0 16px 56px}
  .site-head{margin:0 calc(50% - 50vw) 6px;padding:0 16px}
  /* 与上面的 .container 内边距同步（16 / 56），否则通栏与贴底会破 —— 见第 5 节注释 */
  .site-foot{margin:40px calc(50% - 50vw) -56px;padding:26px 16px 24px}
  .brand .bt span{display:none}
  h1{font-size:26px}
  h2{font-size:20px;margin:38px 0 14px}
  .toc ol{columns:1}
  .fcols{grid-template-columns:1fr;gap:20px}
  .steps>li{padding-left:46px}
  .steps>li::before{width:30px;height:30px;border-radius:10px;font-size:13px;line-height:30px}
  .steps>li::after{left:14px;top:36px}
  .hsp-table{font-size:13px}
  .hsp-table th,.hsp-table td{padding:9px 10px}
}

/* ---------- 8. 卡片内底部留白归零（2026-10-18） ---------- */
/* 根因：全局 `*{margin:0}` 之后，各文件又分别给 `p` 写了 margin-bottom
   （index.css 16px / type-content.css 8px / .calc-note 16px / .calc-row 12px）。
   这些值在**卡片内部**会漏成一块看不见的底部空白 —— 上下内边距因此不对称。

   实测 .faq-item（就是截图上那几张卡）：padding 20/20，
   但最后一个 <p> 带 margin-bottom:16px → 视觉上「上 21px、下 37px」，
   6 张 FAQ 卡每张都多 16px 死白，整块看起来往下坠、又长又空。
   同类：.warn-box 18/18 多 8px、.calc-box 24/24 多 12–16px、.why-item 24/24 多 16px。

   ⚠️ 不要图省事写成全局 `p{margin:0}` —— 正文长页（renewal-2026、kosodate 等）
      完全依赖段落间距，那样会把长文糊成一坨。
   ⚠️ 这份类清单会随新组件增长而漏。`ui-audit.js` 的「卡片下边距泄漏」判据
      直接从 DOM 量 computed style，新冒出来的类会被它抓出来 —— 别靠记清单。 */
.faq-item>*:last-child,
.why-item>*:last-child,
.tool-card>*:last-child,
.warn-box>*:last-child,
.calc-box>*:last-child,
.rec-card>*:last-child,
.guide-section>*:last-child,
.result>*:last-child,
.sbox>*:last-child,
.chk-box>*:last-child,
.quick-answer>*:last-child{margin-bottom:0}

/* .calc-box 的特殊情况：它的最后一个子元素往往是**隐藏的**结果面板
   （#xxxResult 之类，display:none 等 JS 显示），所以 CSS 的 `:last-child`
   落在结果面板上、而不是**视觉上**最后那行输入控件 —— 于是 `.calc-row` 的
   margin-bottom:12px 照样漏出来（实测 /license 底部空白 24+12=36，上边只有 24）。

   ⚠️ 别用 `:last-of-type`：它匹配的是「同**标签名**的最后一个」，而结果面板
   同样是 `div`，规则会被它吃掉、**静默失效**（2026-10-18 实测踩过一次）。
   `:has()` 才能直说「后面紧跟结果面板的那一行」。浏览器不支持时整条忽略，
   属渐进增强，不会更糟。 */
.calc-box>.calc-row:has(+ .calc-result){margin-bottom:0}

/* ---------- 相关页卡片网格：窄屏单列（A5b，2026-10-27） ---------- */
/* 放在文件最后，理由同头部约束 2：同特异性下后写的才生效。 */
@media(max-width:640px){
  .rec-grid,.rec-grid.cols3{grid-template-columns:1fr}
}