/* Maps for ホームライフ不動産（for お客様）：資料の枠と図（render.js）。拡張のパネルと資料のページで共通。
   すべて .cu-doc の中に限る（拡張では tools/pack_customer.js が #maps-panel .cu-doc に書き換える）。
   色の変数（--ink・--accent など）は、パネル（panel.css）とページ（viewer.css）が持つ */

.cu-doc .nw { white-space: nowrap; }

/* ページの見出し・節の切り替え・節の見出し */
.cu-doc .hd { position: relative; padding: 8px 18px 14px; }
.cu-doc .brand { font-size: 11px; letter-spacing: .06em; color: var(--accent); font-weight: 700; }
.cu-doc .hd h1 { margin: 4px 0; font-size: 26px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.cu-doc .hd.shr h1 { margin-right: 52px; }
.cu-doc .meta { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--ink-3); font-size: 12.5px; }
.cu-doc .share { position: absolute; top: 8px; right: 16px; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 14px; background: #fff; color: var(--accent); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); cursor: pointer; }
.cu-doc .share svg { width: 20px; height: 20px; }
/* 節の切り替えは、ページの上に載せる（周りに地を敷かず、後ろをページが通る）。上に張り付くときは上端から 14px */
.cu-doc .nav { position: sticky; top: 14px; z-index: 3; margin: 8px 0 4px; padding: 0 12px; pointer-events: none; }
.cu-doc .seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; background: #e3e8ec; border-radius: 12px; pointer-events: auto;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 6px 18px rgba(16, 24, 40, .12); }
.cu-doc .seg button { position: relative; z-index: 1; border: 0; background: none; padding: 8px 2px; border-radius: 9px; font-size: 14px; font-weight: 700; color: #627180; text-align: center; cursor: pointer; white-space: nowrap; transition: color .2s; }
.cu-doc .seg button.on { color: var(--ink); }
.cu-doc .seg .thumb { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 9px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 2px 6px rgba(16, 24, 40, .06); transition: transform .32s var(--ease), width .32s var(--ease); }
.cu-doc .sec { scroll-margin-top: 64px; }
.cu-doc .sh { display: flex; align-items: center; gap: 8px; margin: 16px 18px 10px; font-size: 20px; font-weight: 700; }
.cu-doc .sh .ic { width: 30px; height: 30px; }
.cu-doc .pc { margin: 0 12px 12px; padding: 16px; background: #fff; border-radius: 22px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px rgba(16, 24, 40, .05); }
.cu-doc .pc h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 16.5px; line-height: 1.35; }
.cu-doc .pc h3 small { margin-left: auto; color: var(--ink-3); font-size: 11.5px; font-weight: 400; text-align: right; }
.cu-doc .ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--c); }
.cu-doc .ic svg { width: 18px; height: 18px; }
.cu-doc .pn { margin: 12px 0 0; color: var(--ink-3); font-size: 11.5px; line-height: 1.6; }
.cu-doc .na { display: inline-block; padding: 3px 11px; border-radius: 999px; background: var(--tint); color: var(--ink-3); font-size: 12.5px; font-weight: 700; }
.cu-doc .hero { padding: 0; overflow: hidden; }
.cu-doc .hero svg { display: block; width: 100%; height: auto; background: #eef0ec; }
.cu-doc .lg { display: flex; flex-wrap: wrap; gap: 5px 12px; padding: 12px 16px 2px; color: var(--ink-2); font-size: 11.5px; }
.cu-doc .lg span { display: inline-flex; align-items: center; gap: 5px; }
.cu-doc .lg i { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.cu-doc .lg i.sq { border-radius: 3px; }
.cu-doc .hero .pn { margin: 8px 16px 16px; }
.cu-doc .stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin: 0 12px 14px; }
.cu-doc .stats:empty { display: none; }
.cu-doc .stat { padding: 12px 10px 10px; background: #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px rgba(16, 24, 40, .05); }
.cu-doc .stat .ic { width: 28px; height: 28px; border-radius: 9px; }
.cu-doc .stat .ic svg { width: 16px; height: 16px; }
.cu-doc .stat .num { margin-top: 8px; font-size: 32px; font-weight: 700; line-height: 1; }
.cu-doc .stat .num small { font-size: 13px; margin-left: 2px; }
.cu-doc .stat .num.na-num { font-size: 15px; color: var(--ink-3); }
.cu-doc .stat .lab { margin-top: 6px; color: var(--ink-3); font-size: 11.5px; line-height: 1.4; }

/* 現れる動き。描き直したとき（quiet）は動かさない */
.cu-doc.quiet *, .cu-doc.quiet *::before, .cu-doc.quiet *::after { transition: none !important; }
.cu-doc .rv { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.cu-doc .rv.in { opacity: 1; transform: none; }
.cu-doc .band { opacity: 0; transition: opacity .9s var(--ease); transition-delay: var(--d); }
.cu-doc .in .band { opacity: 1; }
.cu-doc .route { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease) .7s; }
.cu-doc .in .route { stroke-dashoffset: 0; }
.cu-doc .mk { opacity: 0; transition: opacity .5s var(--ease) .6s; }
.cu-doc .in .mk { opacity: 1; }
.cu-doc .pulse { transform-box: fill-box; transform-origin: center; animation: cu-pulse 2.4s var(--ease) infinite; }
@keyframes cu-pulse { 0% { transform: scale(.6); opacity: .5; } 70%, 100% { transform: scale(2.4); opacity: 0; } }

/* 徒歩の行 */
.cu-doc .wk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line-2); }
.cu-doc .wk:first-of-type { border-top: 0; padding-top: 0; }
.cu-doc .wk .nm { font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.cu-doc .wk .sb { color: var(--ink-3); font-size: 12px; }
.cu-doc .wk .mn { text-align: right; font-size: 29px; font-weight: 700; line-height: 1; white-space: nowrap; }
.cu-doc .wk .mn em { display: block; margin-bottom: 3px; font-style: normal; font-size: 11px; color: var(--ink-3); font-weight: 400; }
.cu-doc .wk .mn small { font-size: 12.5px; margin-left: 2px; }
.cu-doc .wk .mn .na { font-size: 12px; }
.cu-doc .wk .bar { grid-column: 1 / -1; position: relative; height: 8px; margin-top: 9px; border-radius: 4px; background: var(--track); overflow: hidden; }
.cu-doc .wk .bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 4px; background: var(--c); transition: width 1.1s var(--ease) .2s; }
.cu-doc .in .wk .bar i { width: var(--w); }
.cu-doc .scale { display: flex; justify-content: space-between; margin-top: 4px; color: var(--ink-4); font-size: 10.5px; }
.cu-doc .slope { margin-top: 12px; padding: 10px 12px 6px; border-radius: 14px; background: var(--tint); }
.cu-doc .slope b { font-size: 13px; }
.cu-doc .slope span { color: var(--ink-3); font-size: 11.5px; margin-left: 8px; }
.cu-doc .slope svg { display: block; width: 100%; height: auto; margin-top: 4px; }
.cu-doc .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease) .3s; }
.cu-doc .in .draw { stroke-dashoffset: 0; }
.cu-doc .fill-in { opacity: 0; transition: opacity .8s var(--ease) .9s; }
.cu-doc .in .fill-in { opacity: 1; }

/* 施設の数 */
.cu-doc .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cu-doc .tile { padding: 12px 12px 11px; border-radius: 16px; background: color-mix(in srgb, var(--c) 8%, #fff); }
.cu-doc .tile .ic { background: #fff; }
.cu-doc .tile .n { margin-top: 8px; font-size: 32px; font-weight: 700; line-height: 1; }
.cu-doc .tile .n small { font-size: 12.5px; margin-left: 2px; }
.cu-doc .tile .n .na { font-size: 11.5px; }
.cu-doc .tile .l { margin-top: 6px; font-size: 13px; font-weight: 700; }
.cu-doc .tile .s { color: var(--ink-3); font-size: 11.5px; line-height: 1.45; }

/* 災害 */
.cu-doc .house svg { display: block; width: 100%; height: auto; }
.cu-doc .water { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform 1.3s var(--ease) .25s; }
.cu-doc .in .water { transform: none; }
.cu-doc .hzc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.cu-doc .hzc div { padding: 8px 10px; border-radius: 12px; background: var(--tint); }
.cu-doc .hzc div.on { background: color-mix(in srgb, var(--c) 55%, #fff); }
.cu-doc .hzc small { display: block; color: var(--ink-3); font-size: 11px; line-height: 1.35; }
.cu-doc .hzc b { font-size: 15.5px; }
.cu-doc .hzc div:not(.on) b { color: var(--ink-3); font-size: 13.5px; }
.cu-doc .zr { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.cu-doc .zr:first-of-type { border-top: 0; padding-top: 0; }
.cu-doc .zr b { flex: 1; font-size: 14.5px; line-height: 1.4; }
.cu-doc .st { flex: none; max-width: 52%; padding: 4px 12px; border-radius: 999px; background: var(--tint); color: var(--ink-2); font-size: 12.5px; font-weight: 700; text-align: right; }
.cu-doc .st.in { background: #fde8d7; color: #9a4a10; }
.cu-doc .st.lk { background: var(--accent-bg); color: var(--accent); text-decoration: none; }
.cu-doc .hzg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.cu-doc .hz { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 14px; background: var(--tint); color: var(--ink-4); text-align: center; }
.cu-doc .hz svg { width: 24px; height: 24px; }
.cu-doc .hz em { font-style: normal; font-size: 10.5px; line-height: 1.3; font-weight: 700; }
.cu-doc .hz.on { background: color-mix(in srgb, #d9822b 12%, #fff); color: #a35a10; }
.cu-doc .hz.on::after { content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #d9822b; }
.cu-doc .qk { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; align-items: center; }
.cu-doc .ring { position: relative; }
.cu-doc .ring svg { display: block; width: 116px; height: 116px; }
.cu-doc .ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 23px; }
.cu-doc .ring b small { font-size: 12px; }
.cu-doc .arc { transition: stroke-dasharray 1.4s var(--ease) .2s; }
.cu-doc .qk p { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.55; }
.cu-doc .gh2 { margin-top: 16px; }
.cu-doc .gh2 b { font-size: 13px; }
.cu-doc .gh2 span { color: var(--ink-3); font-size: 11.5px; margin-left: 8px; }
.cu-doc .gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.cu-doc .mark { transition: transform 1.3s var(--ease) .3s; }

/* 人口 */
.cu-doc .wf { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; }
.cu-doc .waffle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.cu-doc .waffle i { aspect-ratio: 1; border-radius: 3px; background: var(--c); opacity: 0; transform: scale(.4); transition: opacity .35s var(--ease), transform .35s var(--ease); transition-delay: calc(var(--i) * 9ms + .1s); }
.cu-doc .in .waffle i { opacity: 1; transform: none; }
.cu-doc .ages { display: grid; gap: 8px; }
.cu-doc .ages div { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 0 8px; align-items: baseline; }
.cu-doc .ages i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); align-self: center; }
.cu-doc .ages span { color: var(--ink-2); font-size: 12px; }
.cu-doc .ages b { grid-column: 2; font-size: 22px; line-height: 1.1; }
.cu-doc .ages b small { font-size: 11.5px; margin-left: 1px; }
.cu-doc .cmp { margin-top: 14px; display: grid; gap: 6px; }
.cu-doc .cmp > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 11.5px; color: var(--ink-2); }
.cu-doc .sb3 { display: flex; height: 12px; border-radius: 6px; overflow: hidden; }
.cu-doc .sb3 i { background: var(--c); }
.cu-doc .cols svg { display: block; width: 100%; height: auto; }
.cu-doc .col { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 70ms + .1s); }
.cu-doc .in .col { transform: none; }

/* 土地 */
.cu-doc .zone svg { display: block; width: 100%; height: auto; }
.cu-doc .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: var(--tint); font-size: 13px; font-weight: 700; }
.cu-doc .pill i { width: 10px; height: 10px; border-radius: 3px; }
.cu-doc .zmeta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cu-doc .zmeta .pill:not(:first-child) { color: var(--ink-2); font-weight: 400; }
.cu-doc .zmeta .pill b { margin-left: 2px; }
.cu-doc .law { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--tint); color: var(--ink-2); font-size: 12px; line-height: 1.7; }
.cu-doc .photo { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #dfe4e8; }
.cu-doc .photo svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .45s var(--ease); }
.cu-doc .era { display: flex; align-items: baseline; justify-content: space-between; margin: 12px 2px 4px; }
.cu-doc .era b { font-size: 21px; }
.cu-doc .era span { color: var(--ink-3); font-size: 11.5px; }
.cu-doc input.era-in { display: block; width: 100%; height: 30px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.cu-doc input.era-in::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) var(--p), var(--track) var(--p)); }
.cu-doc input.era-in::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .3), 0 0 0 1px rgba(16, 24, 40, .06); }
.cu-doc input.era-in::-moz-range-track { height: 6px; border-radius: 3px; background: var(--track); }
.cu-doc input.era-in::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
.cu-doc input.era-in::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .3); }
.cu-doc .ticks { display: flex; justify-content: space-between; color: var(--ink-4); font-size: 10.5px; }

/* 価格 */
.cu-doc .big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cu-doc .big b { font-size: 31px; line-height: 1.1; }
.cu-doc .big b small { font-size: 13px; margin-left: 2px; }
.cu-doc .chg { padding: 2px 9px; border-radius: 999px; background: #e7f3ec; color: #2f7a4f; font-size: 12.5px; font-weight: 700; }
.cu-doc .chg.dn { background: #fdecea; color: #a5352a; }
.cu-doc .big + .sb { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.cu-doc .line svg { display: block; width: 100%; height: auto; margin-top: 8px; }

/* 担当・出典 */
.cu-doc .agent { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.cu-doc .agent .ic { width: 44px; height: 44px; border-radius: 14px; }
.cu-doc .agent .ic svg { width: 22px; height: 22px; }
.cu-doc .agent b { display: block; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.cu-doc .agent span { color: var(--ink-3); font-size: 12.5px; }
.cu-doc .tel { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(28, 90, 122, .3); }
.cu-doc .tel svg { width: 21px; height: 21px; }
.cu-doc .memo { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--accent-bg); font-size: 13.5px; overflow-wrap: anywhere; }
.cu-doc .foot { margin: 14px 18px 0; color: var(--ink-3); font-size: 11px; line-height: 1.75; }
.cu-doc .foot p { margin: 0 0 6px; }
@media (prefers-reduced-motion: reduce) { .cu-doc *, .cu-doc *::before, .cu-doc *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; } }