/*
 * さくら事務所 報告書DX — 顧客カルテ（beta/karte.html）専用CSS
 * フェーズ2: sakura-karte.html のUIを移植。
 * 共有トークン・共通コンポーネント（.stage/.phone/.page/.sheet/#dim/.bj 等）は
 * assets/tokens.css を参照（このファイルでは重複定義しない）。
 */

/* ===================== スプラッシュ ===================== */
#splash{position:absolute;inset:0;z-index:100;background:linear-gradient(168deg,#0C5247 0%,#0E6B5C 48%,#1C8A72 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:40px 34px;transition:opacity .6s ease,visibility .6s}
#splash.hide{opacity:0;visibility:hidden}
.petal{width:78px;height:78px;margin-bottom:22px}
#splash .deliver{font-size:11px;letter-spacing:.3em;color:#BFE6D8;margin-bottom:12px}
#splash h2{font-size:22px;line-height:1.6;font-weight:700;margin-bottom:10px}
#splash .sub{font-size:12.5px;line-height:2;color:#D7EFE6}
#splash .stamp{margin:22px 0 28px;padding:11px 20px;border:1px solid rgba(255,255,255,.35);border-radius:99px;font-size:12px;letter-spacing:.06em;color:#EAF8F1}
.openBtn{appearance:none;border:none;background:#fff;color:var(--brand-deep);font-size:15px;font-weight:700;padding:16px 48px;border-radius:99px;box-shadow:0 14px 34px rgba(0,0,0,.28);cursor:pointer;font-family:inherit}
.openBtn:active{transform:scale(.97)}

/* ===================== ヘッダー / ヒーロー ===================== */
.khd{padding:14px 2px 0}
.khd .stbadge{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;padding:5px 12px;border-radius:99px;letter-spacing:.04em}
.khd .stbadge.draft{background:#F1EEE4;color:var(--sub)}
.khd .stbadge.submitted{background:var(--amber-soft);color:#A86E15}
.khd .stbadge.final{background:var(--brand-soft);color:var(--brand-deep)}
.fixBan{display:flex;gap:10px;align-items:flex-start;background:#FDF6E4;border:1px solid #EAD9A8;border-radius:14px;padding:12px 14px;margin-top:12px;font-size:11px;line-height:1.75;color:#6B5A28}
.fixBan b{color:#8A6D1D}
.fixBan svg{flex-shrink:0;margin-top:2px}

.hero{margin:12px -18px 0;padding:16px 26px 90px;background:linear-gradient(170deg,#0C5247,#0E6B5C 55%,#16805F);border-radius:0 0 38px 38px;color:#fff;position:relative;overflow:hidden}
.hero .who{display:flex;justify-content:space-between;align-items:flex-start;position:relative;gap:10px}
.hero .addr{font-size:11px;color:#A9D8C9;letter-spacing:.05em;margin-bottom:5px}
.hero h2{font-size:19px;font-weight:700;letter-spacing:.02em}
.hero .meta{font-size:11px;color:#BFE6D8;margin-top:7px;position:relative}

.scoreCard{margin:-72px 0 0;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-card);padding:24px 20px 20px;position:relative;text-align:center}
.scoreCard .lbl{font-size:11px;letter-spacing:.24em;color:var(--sub);font-weight:700}
.ring{width:180px;height:180px;margin:10px auto 2px;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .num b{font-size:52px;font-weight:800;letter-spacing:-.02em;color:var(--brand-deep);line-height:1}
.ring .num span{font-size:11px;color:var(--sub);margin-top:5px;letter-spacing:.12em}
.gradeTag{display:inline-flex;align-items:center;gap:7px;background:var(--brand-soft);color:var(--brand-deep);font-size:13px;font-weight:700;padding:8px 18px;border-radius:99px;margin-top:6px}
.scoreCard .verdict{font-size:12.5px;line-height:1.9;color:var(--sub);margin-top:13px;padding-top:13px;border-top:1px dashed var(--line)}
.scoreCard .betaNote{font-size:10px;color:#A6B0AC;margin-top:8px;line-height:1.7}
.subs{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}
.subs .s{background:#FAF8F3;border:1px solid var(--line);border-radius:14px;padding:11px 13px;text-align:left}
.subs .s .n{font-size:10.5px;color:var(--sub);font-weight:600}
.subs .s .v{font-size:18px;font-weight:800;color:var(--ink);margin:3px 0 6px}
.subs .s .v small{font-size:10px;font-weight:600;color:#A8B2AE}
.subs .bar{height:5px;background:#EBE6DB;border-radius:9px;overflow:hidden}
.subs .bar i{display:block;height:100%;border-radius:9px;background:var(--brand);width:0;transition:width 1.1s .3s ease}

.ageRow{display:flex;gap:10px;margin-top:16px}
.ageBox{flex:1;background:#F7F5EE;border-radius:14px;padding:12px 10px;text-align:center}
.ageBox .k{font-size:9.5px;font-weight:800;color:#8A948F;letter-spacing:.06em}
.ageBox .v{font-family:var(--font-serif);font-size:21px;font-weight:700;color:var(--brand-deep);margin-top:3px}
.ageBox .v small{font-size:10px}
.ageBox.hl{background:var(--brand-soft)}
.ageNote{font-size:10px;color:var(--sub);margin-top:9px;line-height:1.7;text-align:left}

/* ===================== セクション見出し ===================== */
.sec{margin-top:24px}
.sec>h3{font-size:15.5px;font-weight:800;display:flex;align-items:baseline;gap:9px;margin-bottom:4px;letter-spacing:.01em}
.sec>h3 em{font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--gold);font-weight:700}
.sec>.lead{font-size:11.5px;color:var(--sub);line-height:1.8;margin-bottom:13px}

/* ===================== 良いところ ===================== */
.goodWrap{background:linear-gradient(150deg,#FFFDF6,#FBF6E9);border:1px solid #EFE3C2;border-radius:var(--r);padding:16px 16px 6px;box-shadow:var(--shadow-card)}
.good{display:flex;gap:12px;padding:10px 4px;border-bottom:1px dashed #EBDFC0;align-items:flex-start}
.good:last-child{border-bottom:none}
.good .gi{width:30px;height:30px;border-radius:10px;background:#F3E9CF;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.good .gi svg{width:16px;height:16px}
.good p{font-size:12px;color:#4A4530;line-height:1.7}
.emptyNote{font-size:11.5px;color:var(--sub);padding:10px 4px}

/* ===================== 指摘カード（先に手当てしたいこと） ===================== */
.fcard{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-card);overflow:hidden;margin-bottom:14px;border:1px solid var(--line)}
.fcard .ph{height:118px;position:relative}
.fcard .ph svg{width:100%;height:100%;display:block}
.fcard .ph .tag{position:absolute;top:10px;left:10px;font-size:10px;font-weight:800;padding:5px 10px;border-radius:8px;letter-spacing:.03em;color:#fff}
.fcard .ph .tag.j1{background:var(--coral)}
.fcard .ph .tag.j4{background:#6B4FA0}
.fcard .ph .tag.j2{background:var(--amber)}
.fcard .ph .tag.j3{background:var(--blue)}
.fcard .ph .loc{position:absolute;bottom:8px;right:10px;font-size:10px;color:#fff;background:rgba(0,0,0,.45);padding:4px 9px;border-radius:7px}
.fcard .bd{padding:13px 15px 14px}
.fcard .bd b{font-size:14px;display:block}
.fcard .bd .pro{margin-top:9px;background:#F7F5EE;border-left:3px solid var(--brand);border-radius:0 10px 10px 0;padding:9px 12px;font-size:11.5px;line-height:1.8;color:#4A5853}
.fcard .bd .pro .nm{font-size:10px;color:var(--brand);font-weight:700;display:block;margin-bottom:2px;letter-spacing:.03em}
.fcard .row{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.kv{flex:1;min-width:88px;background:#FAF8F3;border:1px solid var(--line);border-radius:11px;padding:8px 10px}
.kv .k{font-size:9.5px;color:var(--sub);font-weight:600}
.kv .v{font-size:12.5px;font-weight:800;margin-top:2px}
.kv .v.c{color:var(--coral)}

/* ===================== 要経過観察カード ===================== */
.watchRow{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:9px;box-shadow:var(--shadow-card-sm)}
.watchRow .hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.watchRow b{font-size:12.5px}
.watchRow .loc2{font-size:10.5px;color:var(--sub)}
.watchRow p{font-size:11px;color:#5A6663;line-height:1.7;margin-top:6px}
.watchRow .when{font-size:10px;color:var(--brand-deep);font-weight:700;margin-top:6px}

/* ===================== まだ分かっていないこと ===================== */
.unkCard{background:#fff;border:1.5px dashed #D8D2C2;border-radius:18px;padding:14px 15px;margin-bottom:10px}
.unkCard .hd2{display:flex;align-items:center;gap:8px;font-weight:800;font-size:12px}
.unkCard p{font-size:11px;color:var(--sub);line-height:1.8;margin-top:6px}
.unkTag{font-size:9px;font-weight:800;background:#EFEDE6;color:#79837E;padding:4px 9px;border-radius:99px;margin-left:auto}

/* ===================== これからの住まい方（アドバイス） ===================== */
.advRow{background:linear-gradient(150deg,#FFFDF6,#FBF4E4);border:1px solid #EFE3C2;border-radius:16px;padding:13px 15px;margin-bottom:10px}
.advRow b{font-size:12.5px;display:block}
.advRow .loc2{font-size:10.5px;color:#8C7B4D}
.advRow p{font-size:11px;color:#6B5A28;line-height:1.75;margin-top:6px}
.advRow .cost{font-size:10.5px;font-weight:700;color:#8A6D1D;margin-top:6px}

.secNote{font-size:10px;color:#A8B2AE;text-align:center;margin-top:16px;line-height:1.8;padding:0 6px}

/* ===================== 図面ページ ===================== */
.planHead{display:flex;justify-content:space-between;align-items:center;margin:14px 2px 12px}
.planHead h3{font-size:16px;font-weight:800}
.floorSw{display:flex;background:#ECE8DD;border-radius:12px;padding:3px}
.floorSw button{appearance:none;border:none;background:none;font-size:12px;font-weight:700;color:var(--sub);padding:8px 15px;border-radius:10px;cursor:pointer;font-family:inherit}
.floorSw button.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.1)}
.planCard{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-card);padding:14px;border:1px solid var(--line)}
.planCard svg.plan{width:100%;display:block}
.planCard .rm{fill:#F7F5EE;stroke:#C9C2B0;stroke-width:1.5}
.planCard .rmT{font-size:10px;fill:#8B948F;font-weight:700;pointer-events:none;text-anchor:middle}
.pin{cursor:pointer}
.pin .halo{animation:halo 1.6s infinite}
@keyframes halo{0%{r:7;opacity:.5}100%{r:15;opacity:0}}
.legend{display:flex;gap:14px;justify-content:center;margin-top:12px;font-size:10.5px;color:var(--sub);font-weight:600}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}
.planHint{margin-top:12px;background:var(--brand-soft);border-radius:14px;padding:11px 14px;font-size:11.5px;color:var(--brand-deep);line-height:1.7;display:flex;gap:9px;align-items:flex-start}

/* ===================== 図面シート #planSheet ===================== */
.sheetTop{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
.sheetTag{font-size:11px;font-weight:800;padding:6px 13px;border-radius:99px}
.sheetLoc{font-size:10.5px;color:var(--sub);display:inline-flex;align-items:center;gap:4px}
.sheetTitle{font-size:15px;margin:12px 0 9px}
.sheetPro{background:#F7F5EE;border-left:3px solid var(--brand);border-radius:0 10px 10px 0;padding:11px 13px;font-size:12px;line-height:1.85;color:#4A5853}
.sheetPro .nm{font-size:10px;color:var(--brand);font-weight:700;display:block;margin-bottom:3px}

/* ===================== みらい（アドバイスのみタイムライン） ===================== */
.tl{position:relative;margin:6px 2px;padding-left:24px}
.tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2.5px;background:linear-gradient(180deg,var(--gold),#9FB8AE);border-radius:9px}
.tli{position:relative;margin-bottom:12px}
.tli::before{content:"";position:absolute;left:-21.5px;top:16px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--gold)}
.tli .tc{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 15px;box-shadow:var(--shadow-card)}
.tli .when{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--gold)}
.tli b{font-size:13px;display:block;margin:3px 0 4px}
.tli p{font-size:11px;color:var(--sub);line-height:1.7}
.tli .cost{margin-top:7px;display:inline-block;background:#FAF8F3;border:1px solid var(--line);border-radius:9px;padding:5px 10px;font-size:11.5px;font-weight:800}

/* ===================== 数字系フォント ===================== */
.ring .num b,.subs .s .v,.kv .v{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.ihint{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:currentColor}