/* lifeinjapan —— embed.css（/embed/* 可嵌入计算器视图专用，2026-10-13 建立）

   加载者是 make-embed.py 生成的 /embed/* 页面（三语 × 3 个工具 + 说明页）。

   为什么单独一份、而不是塞进 type-content.css：
   /embed/* 是**给外部站点 <iframe> 用的轻量视图**，不是站内内容页 ——
   它的形态（无站头/侧栏/页脚/目次，外层只有一张卡 + 一行署名）与内容页不同，
   属于**新的页型**。按本站「一个页型一个 CSS」的既有约定（type-tool / type-hsp /
   type-takehome / type-iryohi-calc …），这里就是它的落点。

   计算器本体的样式**仍然复用页型 CSS**：make-embed.py 会从被嵌入的源页面
   （/takehome、/hsp）读它的 <link rel="stylesheet">，剔除 v2.css 与 fx-widget.css
   后原样带过来（base.css + type-takehome*.css / type-hsp.css）。
   所以本文件只放「嵌入形态」独有的规则，不放计算器本身的样式。 */

/* base.css 给 body 定了 `min-height:100vh`。在 iframe 里 vh = 宿主给的高度，
   于是文档高度永远不小于 iframe 高度 —— 后果有两个：
     ① 量不出真实内容高度，`embed.js` 的 postMessage 自动高度永远只增不减；
     ② 宿主给高了就会在底部留一大片空白。
   嵌入视图里把它清掉，让文档高度 = 内容高度。 */
body{min-height:0;background:var(--bg)}

.embed-wrap{padding:14px 16px 12px}
.embed-wrap .calc-box{margin-bottom:0}
.embed-credit{margin:10px 0 0;font-size:11px;line-height:1.6;color:var(--muted);text-align:right}
.embed-credit a{color:var(--accent2);font-weight:600;text-decoration:none}
.embed-credit a:hover{text-decoration:underline}

/* hsp 嵌入视图：宽 iframe 下两列排，把整块高度压到约一半。
   （站上的 /hsp 是单栏长表单，直接搬进 iframe 会有 800px+ 高，嵌入方不好放。） */
.hsp-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:620px){.hsp-grid{grid-template-columns:1fr}}

/* fx 嵌入视图：站上只有「pill + 弹窗」一种形态（fx-widget.css），
   这里的**平铺换算器**是嵌入专用组件 —— 弹窗在 iframe 里没有意义。 */
.fx-inline{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.fx-inline{grid-template-columns:1fr}}
.fx-inline label{display:block;font-size:13px;font-weight:700;color:var(--accent2);margin-bottom:6px}
.fx-inline input,.fx-inline select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:6px;font-size:14px;font-family:inherit;background:var(--bg);color:var(--text)}
.fx-inline input:focus,.fx-inline select:focus{outline:none;border-color:var(--accent2)}
.fx-inline-res{grid-column:1/-1;padding:12px;background:var(--card2);border-radius:6px;font-size:17px;font-weight:700;color:var(--accent);text-align:center;min-height:20px}
.fx-inline-note{grid-column:1/-1;margin:0;font-size:11px;color:var(--muted);text-align:center;line-height:1.6}

/* ---------- /embed/ 说明页（.embed-guide）----------
   和嵌入视图同属 /embed 这一族，所以样式也放这里（它不进 sitemap、不参与 SEO 审计）。 */
.embed-guide h1{margin-bottom:10px}
.embed-guide .subtitle{margin-bottom:28px}
.embed-guide h2{margin:36px 0 12px}
.embed-guide p{font-size:15px;line-height:1.85;margin-bottom:10px}
.guide-back{margin:0 0 18px}
.guide-back a{color:var(--accent);text-decoration:none;font-weight:600;font-size:14px}
.guide-back a:hover{text-decoration:underline}
.embed-meta{font-size:13px;color:var(--muted)}
.embed-meta a{color:var(--accent2);font-weight:600;text-decoration:none}
.embed-meta a:hover{text-decoration:underline}
.embed-code{position:relative;background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:16px;margin:12px 0 4px;overflow-x:auto}
.embed-code code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.75;color:var(--text);white-space:pre;padding-top:26px}
.embed-copy{position:absolute;top:8px;right:8px;background:var(--card);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-size:12px;font-weight:700;color:var(--accent2);cursor:pointer;font-family:inherit}
.embed-copy:hover{border-color:var(--accent2)}
.embed-copy.is-done{border-color:#c4e5cd;background:#e9f5ec;color:#237a3c}
.embed-rules li{font-size:15px}
.embed-rules strong{color:var(--accent)}
.embed-foot{font-size:14px;color:var(--muted);margin-top:28px}
.embed-foot a{color:var(--accent2);font-weight:600;text-decoration:none}