:root { --ink: #2b2b2b; --muted: #8a8a8a; --line: #d8d4cc; --accent: #2f5d50; --bg: #f4f2ee; --paper: #fff; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: "Noto Sans JP", "Yu Gothic UI", sans-serif; color: var(--ink); background: var(--bg); }
a { color: var(--accent); text-decoration-color: #8ca79a; text-underline-offset: .18em; }
a:hover { color: #21483d; text-decoration-color: currentColor; }
a.primary { display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border-radius: 4px; background: var(--accent); color: #fff; text-decoration: none; }
.flow-header { display: flex; align-items: center; gap: 28px; padding: 10px 24px; border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: var(--shell-h, 62px); z-index: 4; }
.steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 13px; }
.steps li { padding: 4px 12px; border-radius: 12px; background: #eee; color: var(--muted); } .steps li.on { background: var(--accent); color: #fff; }
.muted { color: var(--muted); font-size: 13px; }
.page { max-width: 980px; margin: 24px auto 60px; padding: 0 20px; }

/* app shell: every page shares this menu and footer */
#app-shell-header { position: sticky; top: 0; z-index: 5; }
.app-menu { min-height: 62px; display: flex; align-items: stretch; gap: 18px; padding: 0 24px; border-bottom: 1px solid var(--line); background: #fff; box-shadow: 0 1px 6px rgba(30, 38, 32, .05); }
.app-menu-placeholder { align-items: center; }
.app-logo { display: flex; align-items: center; flex: 0 0 auto; color: var(--accent); text-decoration: none; font-weight: 800; font-size: 17px; letter-spacing: .01em; }
.app-menu-items { min-width: 0; display: flex; align-items: stretch; gap: 2px; list-style: none; margin: 0; padding: 0; }
.app-menu-items > li { position: relative; min-width: 0; }
.app-menu-direct > a, .app-menu-dropdown > summary { height: 100%; min-height: 61px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 13px; border-bottom: 3px solid transparent; color: #404541; text-decoration: none; font-size: 13px; white-space: nowrap; cursor: pointer; list-style: none; }
.app-menu-dropdown > summary::-webkit-details-marker { display: none; }
.app-menu-dropdown > summary span { color: #758078; font-size: 12px; transition: transform .15s ease; }
.app-menu-dropdown[open] > summary span { transform: rotate(180deg); }
.app-menu-direct > a:hover, .app-menu-dropdown > summary:hover, .app-menu-dropdown[open] > summary { background: #f6f8f6; }
.app-menu-direct > a.on, .app-menu-dropdown.active > summary { border-bottom-color: var(--accent); background: #f2f6f3; color: var(--accent); font-weight: 700; }
.app-menu-panel { position: absolute; z-index: 60; top: calc(100% + 1px); left: 0; min-width: 230px; display: grid; padding: 8px; border: 1px solid var(--line); border-radius: 0 0 10px 10px; background: #fff; box-shadow: 0 14px 34px #1f2d2633; }
.app-menu-dropdown:not([open]) .app-menu-panel { display: none; }
.app-menu-panel a { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 42px; padding: 8px 11px; border-radius: 6px; color: #404541; text-decoration: none; font-size: 13px; white-space: nowrap; }
.app-menu-panel a small { padding: 2px 6px; border-radius: 10px; background: #f0ede5; color: #716a5b; font-size: 10px; }
.app-menu-panel a:hover, .app-menu-panel a.on { background: #eef4f0; color: var(--accent); }
.app-menu-panel a.on { font-weight: 700; }
.app-menu-dropdown > summary:focus-visible, .app-menu-panel a:focus-visible, .app-menu-direct > a:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.app-account { min-width: 0; margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; }
.app-account span { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #555; }
.app-account button { padding: 6px 10px; border: 1px solid var(--line); background: #fff; color: #555; white-space: nowrap; }
.app-account button:disabled { opacity: .55; cursor: wait; }
.app-user-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: white !important; font-weight: 700; }
.app-account summary { list-style: none; cursor: pointer; } .app-account summary::-webkit-details-marker { display: none; }
.app-account { position: relative; }
.app-account-menu { position: absolute; z-index: 50; top: 54px; right: 0; width: 260px; display: grid; gap: 9px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: 0 12px 36px #1f2d2640; }
.app-account:not([open]) .app-account-menu { display: none; }
.app-account-menu small { overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.app-account-menu a { color: var(--accent); text-decoration: none; }
.app-account-menu button { text-align: left; }
@media (max-width: 1400px) { .app-menu { gap: 8px; padding-inline: 14px; } .app-logo { font-size: 15px; } .app-menu-direct > a, .app-menu-dropdown > summary { padding-inline: 9px; font-size: 12px; } }
.app-footer { padding: 22px 24px; border-top: 1px solid var(--line); background: #fff; color: #777; text-align: center; font-size: 12px; }
body[data-page-state]:not([data-page-state="ready"]) > :not(#app-shell-header):not(#app-page-state):not(#app-shell-footer):not(script) { display: none !important; }
.app-page-state { min-height: calc(100vh - var(--shell-h, 62px) - 59px); margin: 0; padding: 0 24px; display: grid; place-items: center; text-align: center; }
.app-page-state > div { min-width: 300px; padding: 38px 44px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(30, 38, 32, .06); }
.app-page-state p { margin: 12px 0 0; color: #5f6862; font-size: 15px; }
.app-page-state [data-page-failure] p { margin: 0 0 18px; color: var(--ink); }
.app-loading-spinner { display: inline-block; width: 27px; height: 27px; border: 3px solid #d8e1dc; border-top-color: var(--accent); border-radius: 50%; animation: app-loading-spin .8s linear infinite; }
@keyframes app-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .app-loading-spinner { animation-duration: 1.8s; } }

.login-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.login-page #app-shell-header { position: static; }
.login-main { width: min(440px, calc(100% - 48px)); margin: auto; padding: 64px 0; }
.login-card { padding: 36px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 10px 30px rgba(26, 33, 27, .07); }
.login-card h1 { margin: 0 0 10px; color: var(--accent); font-size: 25px; }
.login-card p { margin: 0 0 22px; line-height: 1.7; }
.login-card .login-next { margin: -7px 0 24px; padding: 10px 12px; border-left: 3px solid #9eb5a9; background: #f3f7f4; color: #4d5a52; font-size: 13px; }
.login-card button { width: 100%; border-radius: 6px; padding: 12px 18px; }
.login-card button:disabled { opacity: .6; cursor: wait; }
.login-card #error { min-height: 1.5em; margin: 14px 0 0; color: #a12a2a; font-size: 13px; }
.login-page #app-shell-footer { margin-top: auto; }
.placeholder-page { min-height: calc(100vh - var(--shell-h, 62px) - 146px); display: grid; align-items: start; }
.placeholder-page article { min-height: 240px; display: grid; place-content: center; text-align: center; }
.placeholder-page h1 { margin: 0 0 10px; font-size: 24px; color: var(--accent); }
.placeholder-page p { margin: 0; color: var(--muted); }
.directory-page { width: min(1120px, calc(100% - 64px)); min-height: calc(100vh - var(--shell-h, 62px) - 95px); margin: 0 auto; padding: 38px 0 70px; }
.directory-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.directory-head h1 { margin: 2px 0 7px; font-size: 30px; }
.directory-head p { margin: 0; color: var(--muted); }
.directory-eyebrow { margin: 0 !important; color: var(--accent) !important; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.directory-list { display: grid; gap: 12px; }
.directory-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 22px; border-radius: 10px; box-shadow: 0 3px 16px #24352d0d; }
.directory-card h2 { margin: 0 0 6px; font-size: 18px; }
.directory-card h2 a { text-decoration: none; }
.directory-card p { margin: 0; color: var(--muted); font-size: 13px; }
.directory-empty, .directory-panel { padding: 28px 30px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 3px 16px #24352d0d; }
.directory-empty { min-height: 210px; display: grid; place-content: center; text-align: center; }
.directory-empty h2 { margin-bottom: 8px; }
.directory-empty p { margin: 0; color: var(--muted); }
.directory-breadcrumb { display: flex; gap: 9px; margin-bottom: 20px; color: var(--muted); font-size: 13px; }
.directory-breadcrumb a { text-decoration: none; }
.directory-panel h2 { margin: 0 0 18px; font-size: 20px; }
.directory-table th { width: auto; white-space: nowrap; }
.series-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 4px 10px; border-radius: 20px; background: #eaf2ed; color: var(--accent); font-size: 12px; font-weight: 800; }
.series-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.series-heading > div { display: flex; align-items: center; gap: 12px; }
.series-heading h2 { margin: 0; }
.directory-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 24px 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--line); }
.directory-facts div { padding: 16px; background: #fff; }
.directory-facts dt { color: var(--muted); font-size: 12px; }
.directory-facts dd { margin: 5px 0 0; overflow-wrap: anywhere; }
.forbidden-page { min-height: calc(100vh - var(--shell-h, 62px) - 59px); display: grid; place-items: center; padding: 40px; }
.forbidden-page section { max-width: 560px; padding: 46px 52px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 8px 28px rgba(30, 38, 32, .08); text-align: center; }
.forbidden-page h1 { margin: 4px 0 12px; font-size: 28px; }
.forbidden-page p:not(.eyebrow) { margin: 0 0 24px; color: #59625d; line-height: 1.8; }
.forbidden-page .eyebrow { margin: 0; }
.button { display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; text-decoration: none; font: inherit; }
.button.primary { background: var(--accent); color: #fff; border: 0; padding: 9px 18px; }
h2 { font-size: 22px; margin: 0 0 6px; }
fieldset { border: 1px solid var(--line); border-radius: 8px; background: #fff; margin: 16px 0; padding: 12px 18px 16px; }
legend { padding: 0 6px; font-weight: bold; color: var(--accent); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 20px; }
label { display: grid; gap: 4px; font-size: 13px; }
input, select, textarea { padding: 7px 8px; border: 1px solid var(--line); border-radius: 4px; font: inherit; background: #fff; }
textarea { width: 100%; }
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 16px; margin-top: 10px; }
.checks label { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.actions { text-align: center; margin: 24px 0; }
button { font: inherit; cursor: pointer; border-radius: 4px; }
button.primary { background: var(--accent); color: #fff; border: 0; padding: 9px 18px; } button.big { padding: 14px 40px; font-size: 16px; }
button.ghost { background: #fff; border: 1px solid var(--line); padding: 9px 18px; }
.toolbar { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 12px; }

/* report */
article { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 28px 32px; }
.r-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid var(--accent); padding-bottom: 8px; margin-bottom: 18px; }
.r-head h2 { font-size: 24px; } .r-head .who { text-align: right; font-size: 13px; }
.r-sec { margin: 22px 0; break-inside: avoid; }
.r-sec h3 { font-size: 15px; color: var(--accent); border-left: 4px solid var(--accent); padding-left: 8px; margin: 0 0 10px; }
.img-main .img { aspect-ratio: 16 / 9; } .img-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .img-row .img { aspect-ratio: 4 / 3; }
.img { background: repeating-linear-gradient(45deg, #f1eee8, #f1eee8 12px, #ebe7df 12px, #ebe7df 24px); border-radius: 4px; display: grid; place-items: center; color: var(--muted); font-size: 13px; overflow: hidden; }
.img img { width: 100%; height: 100%; object-fit: cover; }
.plan-box svg { width: 100%; max-height: 520px; }
svg.plan .room { stroke: #4a4a4a; } svg.plan .grid { stroke: #e9e4da; }
svg.plan .label { text-anchor: middle; dominant-baseline: middle; fill: #333; }
svg.plan .floor-label { fill: #555; font-weight: bold; } svg.plan .north path { fill: #333; } svg.plan .north text { text-anchor: middle; fill: #333; }
svg.plan .road { fill: #dcdcdc; } svg.plan .site-line { fill: #f7f9f2; stroke: #6b6b6b; } svg.plan .site-dim { fill: #666; }
.site-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; } .site-plans svg { width: 100%; max-height: 520px; }
svg.plan .op-gap { stroke: #fff; } svg.plan .op-window { stroke: #5a9bd5; } svg.plan .op-leaf { stroke: #333; }
.caption { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { border-bottom: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
th { width: 34%; color: #555; font-weight: normal; background: #faf8f4; } td.num { text-align: right; white-space: nowrap; }
.price { font-size: 26px; color: var(--accent); font-weight: bold; }
.floors { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.floor-card { border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; }
.floor-card h4 { margin: 0 0 6px; font-size: 14px; }
.floor-card ul { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.floor-card li { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dotted #e5e0d6; }
.floor-card li.sub { padding-left: 14px; color: #555; } .floor-card li.sub .tee { color: #aaa; margin-right: 4px; }
.alts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.alt { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
.alt h4 { margin: 0 0 4px; font-size: 14px; } .alt svg { width: 100%; height: 190px; }
.met { color: var(--accent); } .missed { color: #b06a4a; }
.note { white-space: pre-wrap; font-size: 14px; }
.strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 6px; margin: 18px 0 0; }
.strip div { padding: 8px 10px; border-left: 1px solid var(--line); } .strip div:first-child { border-left: 0; }
.strip span { display: block; font-size: 11px; color: var(--muted); } .strip b { font-size: 14px; }
.strip div:last-child b { color: var(--accent); font-size: 16px; }
@media (max-width: 700px) { .strip { grid-template-columns: 1fr 1fr; } .strip div { border-left: 0; border-top: 1px solid var(--line); } }
/* hearing: two stages of sections (one panel at a time), cards, wishes with a priority, counts, the 基礎要件 summary */
.step-chips { margin: 0 0 14px; }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 700px) { .cards { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); } .card { padding: 8px 10px; } .chip-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } .chip, .stage-name, .chip-group { flex: none; white-space: nowrap; } }
.stage-name { font-weight: bold; color: var(--accent); font-size: 14px; margin-right: 6px; }
.chip-group { font-size: 11px; color: var(--muted); margin: 0 2px 0 8px; letter-spacing: .05em; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-top: 6px; }
.card { position: relative; display: grid; gap: 2px; align-content: start; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; background: #fff; cursor: pointer; font-size: 14px; }
.card input { position: absolute; opacity: 0; pointer-events: none; }
.card b { font-weight: bold; } .card small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.card:has(input:checked) { border-color: var(--accent); background: #edf3ef; box-shadow: inset 0 0 0 1px var(--accent); }
.card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.dlabel { display: block; font-size: 13px; margin-bottom: 2px; }
.wide-detail { grid-column: 1 / -1; }
.auto-tag { display: none; margin-left: 8px; font-size: 11px; font-weight: normal; color: #8a6d1c; background: #f3ead2; border-radius: 6px; padding: 1px 6px; vertical-align: middle; }
.wish[data-auto="1"] .auto-tag { display: inline-block; }
.nav-right { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-link { border-style: dashed; color: var(--accent); }
.zcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 16px 0; }
.zcard { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.zhead { display: flex; justify-content: space-between; align-items: baseline; } .zhead b { font-size: 18px; color: var(--accent); }
.ztags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ztags li { font-size: 11px; background: #eef3f0; color: var(--accent); border-radius: 8px; padding: 1px 7px; }
.zplan svg { width: 100%; height: auto; max-height: 260px; } .zcard .strip { grid-template-columns: repeat(3, 1fr); margin: 0; }
.zfoot { text-align: right; }
.zplan { position: relative; cursor: zoom-in; border-radius: 4px; } .zplan:hover, .zplan:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.zoom-hint { position: absolute; right: 4px; bottom: 4px; font-size: 11px; background: rgba(255, 255, 255, .9); color: var(--accent); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.zfoot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .zfoot button { width: 100%; padding: 10px 8px; }
/* 表紙: 外観を全面に、右寄せの白抜きの文字 */
.cover { position: relative; aspect-ratio: 210 / 297; max-height: 88vh; margin: 0 auto; overflow: hidden; border-radius: 4px; background: #3d3d3d; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .38) 100%); }
.cover-text { position: absolute; z-index: 1; right: 8%; top: 50%; transform: translateY(-50%); text-align: right; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
.cover-text p { margin: 0; } .cover-series { font-size: clamp(12px, 2.4vw, 18px); letter-spacing: .2em; }
.cover-text h2 { font-size: clamp(24px, 5.5vw, 44px); margin: 6px 0 4px; } .cover-sub { font-size: clamp(14px, 2.8vw, 22px); letter-spacing: .08em; }
.cover-meta { font-size: clamp(11px, 1.8vw, 13px); margin-top: 14px !important; opacity: .9; }
.est-total { display: flex; justify-content: space-between; align-items: baseline; border: 2px solid var(--accent); border-radius: 6px; padding: 10px 14px; margin: 8px 0 12px; }
.est-total b { font-size: 26px; color: var(--accent); }
/* 注意書きを一旦隠す（body.simple） */
body.simple .lead, body.simple .fld > small, body.simple .wish .note, body.simple .info, body.simple .caption:not(.plan-cap) { display: none; }
.zoom { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; flex-direction: column; gap: 6px;
  padding: max(10px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.zoom-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .zoom-bar b { font-size: 18px; color: var(--accent); }
.zoom-tabs, .zoom-tools { display: inline-flex; gap: 6px; align-items: center; } .zoom-tools { margin-left: auto; }
.zoom-tabs button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.zoom-tools button { min-width: 40px; } #zoom-level { min-width: 3.5em; text-align: center; font-size: 13px; }
#zoom-facts { margin: 0; }
.zoom-body { flex: 1; min-height: 0; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
.zoom-body .zfloor { margin: 0 0 14px; width: var(--zoom, 100%); }
.zoom-body .zfloor figcaption { font-weight: bold; color: var(--accent); margin-bottom: 4px; }
.zoom-body svg { width: 100%; height: auto; display: block; }
.zoom-body.fit { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.zoom-body.fit .zfloor { flex: 1 1 320px; width: auto; margin: 0; }
.zoom-body.fit svg { max-height: calc(100vh - 230px); }
.zoom-foot { display: flex; justify-content: flex-end; }
body.zoom-open { overflow: hidden; }
@media (max-width: 700px) { .steps { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; } .steps li { white-space: nowrap; padding: 3px 9px; font-size: 12px; } }
.paper-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-right: auto; } .paper-tabs button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
#paper-body { display: grid; gap: 18px; justify-items: center; padding: 6px 0 30px; }
.sheet { margin: 0; width: 100%; max-width: 820px; } .sheet.land { max-width: 1100px; }
.sheet img { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); border: 1px solid #ddd; }
.sheet figcaption { text-align: center; font-size: 12px; color: var(--muted); margin-top: 6px; }
.part-title { display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 4px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--accent); }
.part-title span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 16px; }
.zmini { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.zm { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; display: grid; gap: 6px; align-content: start; } .zm.chosen { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.zm b { color: var(--accent); } .zm-plan svg { width: 100%; height: auto; max-height: 150px; }
.part-tag { font-size: 12px; font-weight: bold; color: var(--accent); letter-spacing: .05em; margin: 0 0 4px; }
.spec2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin: 0; }
.spec2 > div { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; break-inside: avoid; }
.spec2 dt { color: #555; } .spec2 dd { margin: 0; }
.fin-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 18px; } .fin-cols table.fin { font-size: 12px; } .fin-cols table.fin th, .fin-cols table.fin td { padding: 3px 6px; }
@media (max-width: 700px) { .spec2 { grid-template-columns: 1fr; } }
h3.part { margin: 26px 0 4px; font-size: 17px; color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 4px; }
h3.part:first-of-type { margin-top: 4px; }
.r-head h2 small { font-size: 14px; font-weight: normal; color: var(--muted); margin-left: 6px; }
ol.rules { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 14px; line-height: 1.7; max-width: 80ch; }
ol.rules li b { display: inline-block; min-width: 9em; color: var(--accent); }
.rule-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 18px; }
.rule-cols h3 { font-size: 15px; color: var(--accent); border-left: 4px solid var(--accent); padding-left: 8px; margin: 0 0 8px; }
ul.cannot { margin: 0; padding-left: 20px; font-size: 14px; columns: 2; } ul.cannot li { margin: 2px 0; }
table.fin th { width: 30%; } .style-head { display: flex; gap: 10px; align-items: baseline; font-size: 18px; }
.tag.auto { background: #e3ece7; color: var(--accent); }
.cards.pics { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cards.pics .card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; margin-bottom: 4px; }
.img { position: relative; } .img-cap { position: absolute; left: 6px; bottom: 6px; font-size: 11px; background: rgba(255, 255, 255, .85); padding: 1px 6px; border-radius: 4px; color: #333; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.gallery figure { margin: 0; } .gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; display: block; }
.gallery figcaption { font-size: 11px; color: var(--muted); margin-top: 2px; }
.est tr.pend td { color: #7a6a3a; }
.toolbar.bottom { justify-content: center; margin: 16px 0 0; flex-wrap: wrap; }
.cand { font-size: 14px; margin: 10px 0 0; } .cand b { color: var(--accent); } .cand.zero b { color: #b06a4a; }
.basics { grid-column: 1 / -1; display: grid; gap: 12px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.kpi { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #faf8f4; display: grid; gap: 2px; }
.kpi span { font-size: 12px; color: var(--muted); } .kpi b { font-size: 20px; color: var(--accent); } .kpi small { font-size: 12px; color: #666; line-height: 1.5; }
.kpi em { font-style: normal; color: #9a7b22; font-weight: bold; } .kpi em.over { color: #b06a4a; }
.spaces summary { cursor: pointer; font-size: 14px; font-weight: bold; color: var(--accent); margin-bottom: 6px; }
.spaces table { font-size: 13px; } .spaces th { width: auto; } .spaces tr.total th { font-weight: bold; color: var(--ink); }
.notes { margin: 0; padding-left: 20px; font-size: 13px; color: #8a5a2b; } .notes li { margin: 2px 0; }
ul.life { list-style: none; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 16px; font-size: 13px; }
ul.life span { color: var(--muted); margin-right: 8px; }
.chip { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 5px 12px; font-size: 13px; color: var(--ink); }
.chip b { color: var(--accent); margin-right: 4px; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; } .chip.on b { color: #fff; }
.chip .badge:not(:empty) { margin-left: 6px; background: #e3ece7; color: var(--accent); border-radius: 8px; padding: 0 6px; font-size: 11px; }
.chip.on .badge:not(:empty) { background: rgba(255, 255, 255, .25); color: #fff; }
.step-panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px 20px; }
.step-panel h2 { display: flex; align-items: center; gap: 10px; text-wrap: balance; }
.step-panel h2 .num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 15px; flex: none; }
.lead { color: #555; font-size: 13px; line-height: 1.7; margin: 4px 0 16px; max-width: 70ch; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 20px; align-items: start; }
.items > * { min-width: 0; }
.items > .wide, .items > h3.sub, .items > .wish, .items > .info { grid-column: 1 / -1; }
.items select, .items input:not([type="checkbox"]) { width: 100%; }
h3.sub { font-size: 14px; color: var(--accent); margin: 8px 0 0; padding-top: 12px; border-top: 1px solid #ece8e0; }
.fld small, .wish .note { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
label.chk { display: flex; flex-direction: row; gap: 8px; align-items: center; font-size: 14px; min-height: 34px; }
label.chk input { flex: none; width: 18px; height: 18px; }
.pr { color: var(--muted); font-size: 12px; }
.cnt { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.stepper { display: inline-flex; align-items: center; flex: none; }
.items .stepper input { width: 48px; text-align: center; padding: 6px 2px; border-radius: 0; border-left: 0; border-right: 0; }
.stepper button { width: 34px; height: 34px; padding: 0; font-size: 18px; line-height: 1; }
.stepper button:first-child { border-radius: 4px 0 0 4px; } .stepper button:last-child { border-radius: 0 4px 4px 0; }
.wish { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.wish[data-pri="must"] { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.wish[data-pri="high"] { box-shadow: inset 4px 0 0 #5f8f80; } .wish[data-pri="low"] { box-shadow: inset 4px 0 0 #a9c4b9; }
.wish[data-pri="no"] { box-shadow: inset 4px 0 0 #c9a08c; background: #fbf7f4; }
.wish-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.wish-label { font-weight: bold; font-size: 15px; }
.pri { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.pri-btn { border: 0; border-left: 1px solid var(--line); background: #fff; padding: 7px 12px; font-size: 13px; color: #555; border-radius: 0; }
.pri-btn:first-child { border-left: 0; }
.pri-btn[aria-pressed="true"][data-v="must"] { background: var(--accent); color: #fff; }
.pri-btn[aria-pressed="true"][data-v="high"] { background: #5f8f80; color: #fff; }
.pri-btn[aria-pressed="true"][data-v="low"] { background: #dfeae5; color: var(--accent); font-weight: bold; }
.pri-btn[aria-pressed="true"][data-v="no"] { background: #f1e2da; color: #9a5a3c; font-weight: bold; }
.wish-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e5e0d6; }
.wish-body > * { min-width: 0; } .wish-body select { width: 100%; }
.wish:not([data-pri="must"]):not([data-pri="high"]):not([data-pri="low"]) .wish-body { display: none; }
.wish-body .note { grid-column: 1 / -1; }
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .presets > span { font-size: 13px; margin-right: 4px; }
.preset.on { border-color: var(--accent); color: var(--accent); font-weight: bold; }
.info { font-size: 13px; background: #f6f4ef; border-radius: 6px; padding: 8px 12px; margin: 0; }
.step-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding-top: 14px; border-top: 1px solid #ece8e0; }
@media (max-width: 700px) { input, select, textarea { font-size: 16px; } .step-panel { padding: 14px 14px 16px; } .pri-btn { padding: 8px 10px; } }
/* report: requests and estimate */
.tbl { overflow-x: auto; }
.req th { width: auto; } .req td.mark { text-align: center; white-space: nowrap; font-weight: bold; }
.mark.ok { color: var(--accent); } .mark.ng { color: #b06a4a; } .mark.unk { color: #9a7b22; font-size: 12px; }
.pri-tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 8px; background: #eee; white-space: nowrap; }
.pri-tag.must { background: var(--accent); color: #fff; } .pri-tag.high { background: #5f8f80; color: #fff; }
.pri-tag.low { background: #dfeae5; color: var(--accent); } .pri-tag.no { background: #f1e2da; color: #9a5a3c; }
.h4 { margin: 16px 0 6px; font-size: 14px; }
.est tr.grp th { background: #f1efe9; font-weight: bold; color: var(--accent); width: auto; }
.est tr.sub td { color: #666; font-size: 13px; text-align: right; } .est tr.sub td:first-child { text-align: right; }
.est tr.total th { font-size: 15px; font-weight: bold; color: var(--ink); }
.est .over { color: #b06a4a; font-weight: bold; }
.tag { display: inline-block; margin-left: 6px; font-size: 11px; padding: 0 6px; border-radius: 6px; background: #f3ead2; color: #8a6d1c; }
.pending { margin: 0; padding-left: 20px; font-size: 14px; } .pending li { margin: 3px 0; }
/* page groups: same order on screen and paper (cover / plans / details) */
.toolbar .paper { display: flex; flex-direction: row; align-items: center; gap: 6px; margin-right: auto; }
.sheet-page + .sheet-page { border-top: 1px dashed var(--line); margin-top: 28px; padding-top: 10px; }
.sheet-page::before { content: attr(data-page) " のページ"; display: block; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.plan-fig { margin: 0 0 18px; } .plan-fig svg { width: 100%; max-height: 85vh; } .plan-cap { text-align: center; }
svg.plan .scalebar line { stroke: #333; } svg.plan .scalebar text { fill: #333; text-anchor: middle; }
@page { size: A4 portrait; margin: 10mm; }
.print-only { display: none; }
@media print {
  body { background: #fff; } .no-print { display: none !important; } .page { margin: 0; max-width: none; padding: 0; }
  article { border: 0; padding: 0; } .r-sec { break-inside: avoid; } .r-sec.plans { break-inside: auto; }
  .img-main .img { aspect-ratio: 16 / 8.5; } .img-row .img { aspect-ratio: 3 / 2; }   /* cover = 1 page */
  .sheet-page:not([data-page="表紙"]) .r-sec { break-inside: auto; } tr, .floor-card { break-inside: avoid; }
  .r-sec.pb { break-before: page; margin-top: 0; }
  .sheet-page .r-sec.keep, .sheet-page div.keep { break-inside: avoid; } .r-sec h3, .r-sec h4 { break-after: avoid; }   /* 見出しだけがページの下に残らないように */
  .cover-page { page: cover; } .cover { width: var(--cover-w, 210mm); height: var(--cover-h, 297mm); max-height: none; aspect-ratio: auto; border-radius: 0; }
  .cover-text h2 { font-size: 34pt; } .cover-series { font-size: 13pt; } .cover-sub { font-size: 17pt; } .cover-meta { font-size: 10pt; }   /* プランニングの中の区切り（まとめられるものは同じページに） */
  .part-title { margin-top: 0; }
  .zmini { grid-template-columns: 1fr; gap: 3mm; } .zm { grid-template-columns: 1.5fr 1fr; grid-template-rows: auto 1fr; column-gap: 5mm; }
  .zm > b, .zm > .tag { grid-column: 1 / -1; } .zm-plan { grid-row: 2; } .zm-plan svg { max-height: 62mm; } .zm .ztags { grid-row: 2; align-content: start; }
  .spec2, .fin-cols { grid-template-columns: 1fr 1fr; } .spec2 > div { font-size: 9.5pt; padding: 1.2mm 0; }
  .gallery { grid-template-columns: repeat(4, 1fr); } .fin-cols table.fin { font-size: 8.5pt; }
  .r-sec .style-head + p + .gallery + table.fin { display: none; }   /* 仕上げの要約は全項目の表と重なるので紙では外す */
  .gallery img { aspect-ratio: 2 / 1; } .gallery figcaption { font-size: 7pt; } .gallery { margin: 2mm 0 3mm; }
  .fin-cols h4.h4 { margin: 1mm 0; font-size: 9pt; }
  .gallery figure:nth-child(n+5) { display: none; }   /* 紙ではスタイルの CG を 4 枚（外観・ダイニングキッチン・リビング・窓まわり）に */
  .fin-cols table.fin th, .fin-cols table.fin td { padding: 0.3mm 1.5mm; line-height: 1.15; } .fin-cols table.fin { font-size: 7.6pt; } .fin-cols table.fin th { width: 42%; }
  table.est { font-size: 9pt; } table.est th, table.est td { padding: 0.9mm 2mm; } table.est small { font-size: 7.5pt; }
  .sheet-page { break-after: page; } .sheet-page:last-child { break-after: auto; }
  .sheet-page + .sheet-page { border: 0; margin: 0; padding: 0; } .sheet-page::before { display: none; }
  .plan-fig { break-inside: avoid; text-align: center; margin: 0 0 4mm; }
  .plan-fig svg { width: var(--print-w) !important; max-width: none !important; max-height: none !important; height: auto; }
  .paper-A4 .plan-fig + .plan-fig { break-before: page; }
  .paper-A3 .plan-fig:nth-of-type(2n+1):not(:first-of-type) { break-before: page; }
  /* 3 案: 1 案ずつ A3 横 1 枚（見出し・平面図を大きく・要点・スタイルの CG） */
  .print-only { display: block; }
  .zoom { display: none !important; }
  body.print-zoning #basic-body > :not(.zcards):not(.zcover):not(.zsum) { display: none; }
  body.print-zoning .zcover { page: zcover; break-after: page; }
  body.print-zoning .zcover .cover { width: 420mm; height: 297mm; max-height: none; aspect-ratio: auto; border-radius: 0; }
  body.print-zoning .zcover .cover-text h2 { font-size: 44pt; } body.print-zoning .zcover .cover-series { font-size: 16pt; } body.print-zoning .zcover .cover-sub { font-size: 22pt; }
  body.print-zoning .zsum { break-after: page; height: 270mm; }
  body.print-zoning .zsum-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14mm; margin-top: 8mm; font-size: 11pt; }
  body.print-zoning .zsum h3 { font-size: 15pt; color: var(--accent); border-left: 4px solid var(--accent); padding-left: 3mm; margin: 0 0 4mm; }
  body.print-zoning .zsum h4 { font-size: 12pt; margin: 6mm 0 2mm; }
  body.print-zoning .zsum-t { width: 100%; border-collapse: collapse; } body.print-zoning .zsum-t th, body.print-zoning .zsum-t td { text-align: left; padding: 2mm 3mm; border-bottom: 1px solid var(--line); vertical-align: top; }
  body.print-zoning .zsum-t th { width: 38%; color: #555; font-weight: normal; }
  body.print-zoning .zsum-note { margin-top: 6mm; color: #555; }
  body.print-zoning .zsum-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
  body.print-zoning .zsum-imgs figure { margin: 0; } body.print-zoning .zsum-imgs img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 2mm; display: block; }
  body.print-zoning .zsum-imgs figcaption { font-size: 8pt; color: #777; margin-top: 1mm; }
  body.print-zoning .zcards { display: block; margin: 0; }
  body.print-zoning .zcard { display: grid; break-after: page; break-inside: avoid; border: 0; padding: 0; gap: 4mm; height: 270mm; grid-template-rows: auto auto auto 1fr auto auto; }
  body.print-zoning .zcard:last-child { break-after: auto; }
  body.print-zoning .zprint-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--accent); padding-bottom: 2mm; }
  body.print-zoning .zprint-head h2 { font-size: 20pt; margin: 0; } body.print-zoning .zprint-head span { font-size: 10pt; color: #555; }
  body.print-zoning .zhead { display: none; }
  body.print-zoning .ztags li { font-size: 10pt; padding: 1mm 3mm; }
  body.print-zoning .zplan { min-height: 0; } body.print-zoning .zplan svg { width: 100%; height: 100%; max-height: 165mm; }
  body.print-zoning .zoom-hint { display: none; }
  body.print-zoning .zcard .strip b { font-size: 13pt; }
  body.print-zoning .zprint-imgs { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3mm; }
  body.print-zoning .zprint-imgs .img { aspect-ratio: 16 / 9; }
  body.print-zoning .caption { display: none; }
}

/* 設定: 版つきの 9 グループを schema から描く */
.settings-page { max-width: 1440px; }
.settings-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.settings-head h1 { margin: 0; color: var(--accent); } .settings-head p { margin: 4px 0 0; color: var(--muted); }
.local-badge { padding: 6px 10px; border-radius: 14px; background: #fff4cf; color: #745700; font-size: 12px; font-weight: 700; }
.settings-tabs { display: flex; overflow-x: auto; gap: 4px; padding: 0 0 8px; border-bottom: 1px solid var(--line); }
.settings-tabs a { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 6px 6px 0 0; background: #fff; color: #555; text-decoration: none; font-size: 13px; }
.settings-tabs a span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #eee; font-size: 11px; }
.settings-tabs a.on { border-color: var(--accent); background: #eef3f0; color: var(--accent); font-weight: 700; }
.settings-tabs a.on span { background: var(--accent); color: #fff; }
#settings-content { margin-top: 18px; }
.setting-group-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.setting-group-head h1 { margin: 2px 0 4px; color: var(--accent); font-size: 24px; }
.setting-group-head p { margin: 0; color: var(--muted); font-size: 13px; }
.setting-group-no { color: var(--accent) !important; font-weight: 700; }
.setting-head-actions { display: flex; gap: 8px; }
.settings-form { display: grid; gap: 12px; margin-top: 14px; }
.setting-object { display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 10px 18px; }
.setting-section { grid-column: 1 / -1; margin: 0; padding: 0 14px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.setting-section > summary { margin: 0 -14px 12px; padding: 11px 14px; background: #f7f6f2; color: var(--accent); font-weight: 700; cursor: pointer; }
.setting-section > summary small { color: var(--muted); font-weight: 400; }
fieldset.setting-section > legend { margin-left: 4px; }
.setting-field { min-width: 0; display: grid; grid-template-columns: minmax(10em, .8fr) minmax(180px, 1.2fr); align-items: center; gap: 8px 14px; padding: 7px 0; border-bottom: 1px dotted #e7e2d8; }
.setting-label { font-size: 13px; font-weight: 700; } .setting-label small, .setting-help { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 400; }
.setting-control { display: flex; align-items: center; gap: 6px; min-width: 0; }
.setting-control input:not([type="checkbox"]), .setting-control select, .setting-control textarea { width: 100%; min-width: 0; }
.setting-unit { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.settings-error { grid-column: 2; color: #b4441c; font-size: 12px; }
.settings-notice { padding: 10px 12px; border-left: 4px solid var(--accent); background: #f6faf8; }
.setting-note { display: grid; grid-template-columns: 12em minmax(260px, 1fr); align-items: center; gap: 12px; margin: 14px 0; padding: 12px 16px; border: 1px solid #d9c57d; border-radius: 7px; background: #fffdf3; font-weight: 700; }
.setting-table-wrap { width: 100%; overflow: auto; max-height: 620px; border: 1px solid var(--line); }
.setting-table { min-width: 720px; font-size: 12px; background: #fff; }
.setting-table thead { position: sticky; top: 0; z-index: 1; }
.setting-table th { width: auto; white-space: nowrap; background: #eeece5; }
.setting-table td { min-width: 110px; padding: 3px 5px; }
.setting-table td input, .setting-table td select { width: 100%; min-width: 84px; padding: 4px 5px; }
.setting-table td textarea { min-width: 160px; padding: 4px 5px; }
.setting-table.compact { min-width: 1500px; }
.setting-table.compact td { min-width: 100px; }
.setting-table tr[hidden] { display: none; }
.setting-filter { display: flex; grid-template-columns: auto minmax(240px, 420px); align-items: center; gap: 10px; margin: 8px 0; }
button.small, .ghost.small, .primary.small { padding: 5px 9px; font-size: 12px; }
button.link { border: 0; background: none; color: var(--accent); text-decoration: underline; padding: 3px; }
button.link.danger { color: #a34b2b; }
.setting-section > button.small { margin-top: 9px; }
.settings-simulate { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--muted); font-size: 12px; }
.settings-history { margin-top: 28px; }
.settings-history h2 { color: var(--accent); }
.history-list { display: grid; gap: 8px; }
.history-item { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.history-item.active { border-color: var(--accent); box-shadow: inset 4px 0 var(--accent); }
.history-item p { margin: 4px 0; } .history-item small { color: var(--muted); }
.version-status { margin-left: 6px; padding: 1px 7px; border-radius: 8px; background: #e8eee9; color: var(--accent); font-size: 11px; }
.history-actions { display: flex; align-items: center; gap: 7px; }
.settings-diff { margin-top: 12px; padding: 14px; border: 1px solid var(--line); background: #fff; }
.settings-diff h3 { margin-top: 0; color: var(--accent); }
.settings-fatal { padding: 20px; border: 1px solid #e2a48f; border-radius: 7px; background: #fdf3ef; color: #8a3a20; }
#activate-dialog { border: 1px solid var(--line); border-radius: 8px; padding: 22px; } #activate-dialog::backdrop { background: rgba(0, 0, 0, .32); }
@media (max-width: 900px) { .setting-object { grid-template-columns: minmax(0, 1fr); } .setting-field { grid-template-columns: minmax(0, 1fr); } .settings-error { grid-column: 1; } }

/* 土地の相場（① の土地「これから探す」） */
.quote-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.quote-box { margin-top: 10px; border: 1px solid var(--line, #d8d4cc); border-radius: 10px; padding: 12px 14px; background: var(--card, #fff); }
.quote-box.stale { opacity: .6; }
.quote-box .warn { margin: 0 0 8px; color: #b4441c; font-weight: 600; }
.quote-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.quote-main span { color: var(--muted, #6b6b6b); }
.quote-main b { font-size: 1.5em; }
.quote-main small { width: 100%; color: var(--muted, #6b6b6b); }
.quote-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 10px 0 0; font-size: .92em; }
.quote-dl dt { color: var(--muted, #6b6b6b); }
.quote-dl dd { margin: 0; min-width: 0; }
.quote-dl .tag { margin-left: 6px; }

/* スタイルの画像: 1 ページに 2 × 2（2026-11-04） */
.gallery.big { grid-template-columns: 1fr 1fr; gap: 10px; }
.gallery.big img { aspect-ratio: 4 / 3; }
.gallery.big figcaption { font-size: 12px; }
.est .note-row td { color: var(--ink); background: #f8f7f4; line-height: 1.6; }
@media print {
  .gallery.big { grid-template-columns: 1fr 1fr; gap: 4mm; margin: 4mm 0 0; }
  .gallery.big img { aspect-ratio: 4 / 3; }
  .gallery.big figcaption { font-size: 9pt; margin-top: 1mm; }
  .gallery.big figure:nth-child(n+5) { display: none; }
}
.quote-msg { margin: 8px 0 0; font-size: .92em; color: var(--muted); } .quote-msg.widened { color: #8a5a00; }

/* ==== 2026-11-04 PC で見やすく（ユーザーの指示） ==== */
/* ヘッダー: 矢印で右へ進む進み具合（済み・いま・これから） */
.steps { gap: 0; }
.steps li { padding: 7px 22px 7px 26px; border-radius: 0; background: #ebe8e1; color: var(--muted); margin-right: -9px; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 13px 50%); }
.steps li:first-child { padding-left: 16px; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); }
.steps li.done { background: #d9e6df; color: var(--accent); }
.steps li.done::after { content: ' ✓'; }
.steps li.on { background: var(--accent); color: #fff; font-weight: bold; }
@media (max-width: 700px) { .steps li { padding: 5px 16px 5px 20px; font-size: 12px; } .steps li:first-child { padding-left: 12px; } }

/* 段の見出しの行と、区分のタブの行を分ける。タブは横にスクロール */
.step-chips { margin: 0 0 18px; }
.chip-row { display: block; }
.chip-row .stage-title { font-size: 20px; margin: 0 0 10px; color: var(--accent); }
.tabnav { display: flex; flex-wrap: nowrap; align-items: center; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; border-bottom: 1px solid var(--line); }
.tabnav .chip { flex: 0 0 auto; white-space: nowrap; position: relative; margin-right: 20px; }
.tabnav .chip:not(:last-child)::after { content: ''; position: absolute; right: -18px; top: 50%; width: 16px; border-top: 1px solid #cfc9bd; }
.tabnav .chip-group { flex: 0 0 auto; white-space: nowrap; margin: 0 10px 0 0; }

/* 入れる項目は上から 1 つずつ（1 列） */
.items { grid-template-columns: minmax(0, 1fr); max-width: 780px; gap: 18px; }
.items .fld > label { font-weight: bold; font-size: 15px; display: block; }
.items .fld > label > input, .items .fld > label > select, .items .fld > label > textarea { display: block; margin-top: 6px; max-width: 380px; font-weight: normal; }
.items .fld > label.chk { font-weight: normal; }
.dlabel { font-weight: bold; font-size: 15px; margin-bottom: 8px; color: var(--ink); }

/* 選択肢のカードに画像の枠（暮らし方・ゾーニング） */
.cards.with-pic { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.card.pic { padding: 0; overflow: hidden; gap: 0; }
.card-pic { display: grid; place-items: center; aspect-ratio: 4 / 3; border-bottom: 1px solid var(--line); color: #b3ad9f; font-size: 11px;
  background: repeating-linear-gradient(45deg, #f6f4ef, #f6f4ef 8px, #f0ede6 8px, #f0ede6 16px); }
.card-pic i { font-style: normal; letter-spacing: .15em; }
.card-pic img { width: 100%; height: 100%; object-fit: cover; }
.card-text { display: grid; gap: 2px; padding: 8px 12px 10px; }

/* スタイル: 1 行目に英語、2 行目にカタカナ。画像を大きく、2 列（スマホは 1 列） */
.cards.styles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.style-card { padding: 10px; }
.style-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; margin-bottom: 8px; }
.style-card b { font-size: 17px; letter-spacing: .04em; }
.style-card .kana { font-size: 12px; color: var(--muted); }
@media (max-width: 700px) { .cards.styles { grid-template-columns: minmax(0, 1fr); } }

/* ③ の部屋の区分の上に、空間のイメージの枠 */
.panel-pic { display: grid; place-items: center; aspect-ratio: 16 / 5; max-width: 780px; margin: 0 0 16px; border-radius: 8px; color: #b3ad9f; font-size: 12px;
  background: repeating-linear-gradient(45deg, #f6f4ef, #f6f4ef 10px, #f0ede6 10px, #f0ede6 20px); }
.panel-pic i { font-style: normal; letter-spacing: .15em; }

/* ルール概要: 見出し、番号つきの一覧（項目と説明を 2 列）、できること・できないことは縦に並べてカード（画像の枠つき） */
.rules-sec { margin-top: 24px; }
.rules-sec h3 { font-size: 16px; color: var(--accent); border-left: 4px solid var(--accent); padding-left: 8px; margin: 0 0 10px; }
.rule-list { margin: 0; border-top: 1px solid var(--line); }
.rule-list .rule { display: grid; grid-template-columns: 13em minmax(0, 1fr); gap: 18px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.rule-list dt { font-weight: bold; color: var(--accent); display: flex; gap: 8px; align-items: baseline; }
.rule-list dt .no { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; flex: 0 0 auto; }
.rule-list dd { margin: 0; line-height: 1.8; }
.rule-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.rule-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: #fff; }
.rule-ico { width: 64px; height: 64px; border-radius: 6px; display: grid; place-items: center; color: #b3ad9f; font-size: 10px;
  background: repeating-linear-gradient(45deg, #f6f4ef, #f6f4ef 6px, #f0ede6 6px, #f0ede6 12px); }
.rule-ico i { font-style: normal; }
.rule-card p { margin: 2px 0 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.rule-cards.no .rule-card b::before { content: '× '; color: #b4441c; }
@media (max-width: 700px) { .rule-list .rule { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* 1-4・1-5 の計算の結果と、相場の結果（シンプルに） */
.calc-box { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #fbfaf7; }
.calc-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.calc-main span { color: var(--muted); } .calc-main b { font-size: 1.5em; color: var(--accent); } .calc-main small { color: var(--muted); }
.calc-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin: 8px 0 0; font-size: .92em; }
.calc-dl dt { color: var(--muted); } .calc-dl dd { margin: 0; }
.calc-notes { margin: 8px 0 0; padding-left: 18px; font-size: .9em; color: #8a5a00; }
.quote-line { margin: 4px 0 0; }
.quote-more { margin-top: 8px; font-size: .9em; } .quote-more summary { cursor: pointer; color: var(--muted); } .quote-more p { margin: 6px 0 0; }
.card-pic { aspect-ratio: 16 / 10; }
.items > .fld.wide > .dlabel { border-left: 4px solid var(--accent); padding-left: 8px; font-size: 16px; line-height: 1.3; }
.items { row-gap: 26px; }
.items .fld > label > input[type="checkbox"], .items .fld > label.chk > input { display: inline-block; width: auto; margin: 0 6px 0 0; vertical-align: middle; }
.cards.with-pic { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

/* ==== 2026-11-04 その 2 ==== */
/* 選択肢は横幅いっぱいに、数に合わせて等分（左に寄らない） */
.items { max-width: none; }
.items > .fld:not(.wide) { max-width: 440px; }
.cards, .cards.with-pic, .cards.styles { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.card-pic { aspect-ratio: 16 / 9; }
@media (max-width: 700px) { .cards, .cards.with-pic { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards.styles { grid-template-columns: minmax(0, 1fr); } }
/* ③ のご要望: 1 つずつに空間のイメージ */
.wish.with-pic { display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.wish.with-pic > .wish-pic { grid-row: 1 / span 2; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 6px; color: #b3ad9f; font-size: 11px; text-align: center; padding: 6px;
  background: repeating-linear-gradient(45deg, #f6f4ef, #f6f4ef 8px, #f0ede6 8px, #f0ede6 16px); }
.wish.with-pic > .wish-pic i { font-style: normal; }
.wish.with-pic > .wish-head, .wish.with-pic > .wish-body { grid-column: 2; min-width: 0; }
@media (max-width: 700px) { .wish.with-pic { grid-template-columns: minmax(0, 1fr); } .wish.with-pic > .wish-pic { grid-row: auto; aspect-ratio: 16 / 7; margin-bottom: 8px; } .wish.with-pic > .wish-head, .wish.with-pic > .wish-body { grid-column: 1; } }
/* 3 案のカード: ボタンはどの案も下に同じ位置。数字は 2 × 2 で */
.zcard { display: flex; flex-direction: column; }
.zcard .zplan { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.zcard .zfoot { margin-top: auto; }
.zcard .strip.zfig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zcard .strip.zfig div { display: grid; gap: 1px; border-left: 0; border-top: 1px solid var(--line); padding: 6px 4px; }
.zcard .strip.zfig span { font-size: 11px; color: var(--muted); } .zcard .strip.zfig b { font-size: 15px; white-space: nowrap; }
/* タブ: スクロールバーを出さず、つかんで動かす */
.tabnav, .steps { scrollbar-width: none; } .tabnav::-webkit-scrollbar, .steps::-webkit-scrollbar { display: none; }
.tabnav { cursor: grab; } .tabnav.dragging, .steps.dragging { cursor: grabbing; user-select: none; }
.tabnav.dragging .chip { pointer-events: none; }
.cards.with-pic[style*="--cols:2"] .card-pic, .cards.with-pic[style*="--cols:1"] .card-pic { aspect-ratio: 3 / 1; }
.cards.with-pic[style*="--cols:3"] .card-pic { aspect-ratio: 2 / 1; }
.zcards { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

/* ==== 2026-11-04 その 3（ユーザーの指示） ==== */
/* 段の見出し（1-1 ご家族 など）: 枠の上を帯にして、番号は札、題は大きく。質問の見出し（左の縦棒）と見分けがつくように */
.step-panel h2.step-title { display: flex; align-items: center; gap: 12px; margin: -18px -20px 22px; padding: 14px 20px; font-size: 22px; line-height: 1.3;
  background: #eef3f0; border-bottom: 2px solid var(--accent); border-radius: 8px 8px 0 0; }
.step-panel h2.step-title .num { display: inline-block; width: auto; height: auto; padding: 4px 10px; border-radius: 6px; background: var(--accent); color: #fff;
  font-size: 14px; font-weight: bold; letter-spacing: .06em; line-height: 1.3; }
.step-panel h2.step-title .t { color: var(--ink); }
@media (max-width: 700px) { .step-panel h2.step-title { margin: -14px -14px 18px; padding: 12px 14px; font-size: 19px; } }
/* 質問の見出しは、カードの質問も数字・文字の質問も同じ形（左の縦棒） */
.items .fld > label > .flabel { display: block; border-left: 4px solid var(--accent); padding-left: 8px; font-size: 16px; line-height: 1.3; }
/* 相場を計算しているあいだ: 前の結果の上に重ねて「計算中」 */
#land-quote { position: relative; }
#land-quote.loading { min-height: 96px; }
#land-quote .busy { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px;
  background: rgba(255, 255, 255, .82); border-radius: 10px; color: var(--accent); font-weight: bold; }
#land-quote .spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #cfe0d7; border-top-color: var(--accent); animation: pp-spin .8s linear infinite; }
@keyframes pp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #land-quote .spin { animation-duration: 2s; } }
button[data-land-quote]:disabled { opacity: .6; cursor: progress; }
/* 段の中の区切り（キッチン・浴室・トイレ など）: 質問の見出し（16px）より大きく、下線で区切る。補足は下に小さく */
.items > h3.sub { font-size: 19px; color: var(--accent); margin: 14px 0 0; padding: 12px 0 8px; border-top: 0; border-bottom: 2px solid #d5e2db; }
.items > h3.sub:first-child { margin-top: 0; padding-top: 0; }
.items > h3.sub small { display: block; margin-top: 4px; font-size: 13px; font-weight: normal; color: var(--muted); }
/* オプションのチェックは、個数の ± と同じく項目の右に（± の真ん中にそろえる） */
.items > .fld > label.chk { display: flex; align-items: center; justify-content: space-between; max-width: 440px; gap: 12px; }
.items > .fld > label.chk > input { order: 2; width: 20px; height: 20px; margin: 0 48px 0 0; }
/* メモは横幅いっぱい */
.items .fld > label > textarea { max-width: none; width: 100%; }
/* ③ の延床の見込み: 画面の上に残る。商品の上限に近いと黄、超えると赤で、最終結果に進めない */
.area-meter { position: sticky; top: 56px; z-index: 3; margin: 0 0 16px; padding: 10px 14px; border: 1px solid #cfe0d7; border-radius: 10px; background: #f6faf8; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.area-meter .am-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.area-meter .am-title { font-weight: bold; color: var(--accent); }
.area-meter .am-total { font-size: 22px; color: var(--ink); }
.area-meter .am-max { color: var(--muted); }
.area-meter .am-left { margin-left: auto; font-weight: bold; color: var(--accent); }
.area-meter .am-bar { height: 8px; margin: 6px 0 4px; border-radius: 4px; background: #e4ece8; overflow: hidden; }
.area-meter .am-bar i { display: block; height: 100%; background: var(--accent); }
.area-meter .am-calc { margin: 0; font-size: 13px; color: var(--muted); }
.area-meter .am-warn { margin: 8px 0 0; font-weight: bold; color: #b4441c; }
.area-meter .am-items { margin-top: 6px; font-size: 13px; } .area-meter .am-items summary { cursor: pointer; color: var(--muted); }
.area-meter .am-items ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.area-meter .am-items li { display: grid; grid-template-columns: minmax(9em, auto) 6em minmax(0, 1fr); gap: 10px; align-items: baseline; }
.area-meter .am-items .plus { color: #b4441c; } .area-meter .am-items .minus { color: var(--accent); }
.area-meter button.link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; text-align: left; font: inherit; }
.area-meter.near { border-color: #e6c46a; background: #fffaeb; } .area-meter.near .am-bar i { background: #d39b1c; } .area-meter.near .am-left { color: #8a5a00; }
.area-meter.over { border-color: #e2a48f; background: #fdf3ef; } .area-meter.over .am-bar i { background: #b4441c; } .area-meter.over .am-left, .area-meter.over .am-total { color: #b4441c; }
.area-meter.flash, .wish.flash { animation: pp-flash 1.6s ease-out; }
@keyframes pp-flash { 0%, 40% { box-shadow: 0 0 0 4px rgba(180, 68, 28, .35); } 100% { box-shadow: 0 2px 6px rgba(0, 0, 0, .06); } }
.final-note { align-self: center; color: #b4441c; font-size: 13px; font-weight: bold; max-width: 32em; }
button[data-final]:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 700px) { .area-meter { top: 48px; } .area-meter .am-items li { grid-template-columns: minmax(0, 1fr) auto; } .area-meter .am-items li .muted { grid-column: 1 / -1; } }
/* ② の 3 案: ③ で広げられる残りの坪数 */
.zcard .zroom { margin: 6px 0 0; font-size: 13px; color: var(--muted); } .zcard .zroom.warn { color: #b4441c; font-weight: bold; }
.area-meter .am-out { margin: 6px 0 0; font-size: 13px; color: var(--muted); } .area-meter .am-out span { margin-right: 8px; }
/* ご要望の見出しの横: その項目で延床が増える・減る広さ */
.wish-area { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px; font-size: 13px; font-weight: bold; vertical-align: middle; white-space: nowrap; }
.wish-area.plus { background: #fdf3ef; color: #b4441c; border: 1px solid #e9b9a8; }
.wish-area.minus { background: #eef5f1; color: var(--accent); border: 1px solid #c9ddd2; }
.wish-area.out { background: #f4f2ee; color: var(--muted); border: 1px solid var(--line); font-weight: normal; }
/* チェックと個数の行: 項目名は左、操作は右の細い列（2026-11-04 のユーザーの指示）。
   個数は小さい数字の欄（幅 56px）。チェックの右端と数字の欄の右端をそろえる（右揃え）。行の幅は 500px まで（③ のご要望の中も同じ）で、
   名前が折り返さず、名前と操作が離れすぎない。名前と操作のあいだに点線を引いて、目でたどれるように */
.items > .fld.row { max-width: 500px; }
.items > .fld.row > label.chk { max-width: none; }
.wish-body > .row { grid-column: 1 / -1; max-width: 500px; }
.wish-body > label.chk.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.items > .fld > label.chk > input, .wish-body > label.chk.row > input { order: 2; width: 20px; height: 20px; margin: 0; }
.cnt { gap: 8px; }
.items .cnt input.num-mini { flex: none; width: 56px; padding: 5px 4px 5px 8px; text-align: right; font-size: 15px; }
/* 点線（リーダー）: 名前の後ろから操作の手前まで */
.cnt-label, .items > .fld.row > label.chk > span, .wish-body > label.chk.row > span { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.cnt-label::after, .items > .fld.row > label.chk > span::after, .wish-body > label.chk.row > span::after { content: ''; flex: 1 1 16px; min-width: 16px; border-bottom: 1px dotted #c9c3b7; transform: translateY(-4px); }
.cnt-label .pr, .items > .fld.row > label.chk .pr, .wish-body > label.chk.row .pr { white-space: nowrap; flex: none; }   /* 金額は途中で折り返さない */
/* 段の見出し・区分のタブ・延床の見込みを、ヘッダーの下に残す（ヘッダーの高さは app.js が --header-h に入れる） */
.hearing-top { position: sticky; top: var(--header-h, 54px); z-index: 3; background: var(--bg); margin: -8px -4px 0; padding: 8px 4px 2px; }
.hearing-top .step-chips { margin-bottom: 10px; }
.hearing-top .area-meter { position: static; margin-bottom: 12px; }
.hearing-top .chip-row .stage-title { margin-bottom: 6px; }
.wish, .step-panel { scroll-margin-top: calc(var(--header-h, 54px) + var(--top-h, 120px) + 12px); }
@media (max-width: 700px) { .hearing-top .chip-row .stage-title { display: none; } }
/* 資金計画の明細: 項目・内容・金額の 3 列（2026-11-04 のユーザーの指示） */
table.est3 { table-layout: fixed; }
table.est3 col.c-name { width: 34%; } table.est3 col.c-desc { width: auto; } table.est3 col.c-amt { width: 7.5em; }
table.est3 thead th { background: #f1efe9; color: var(--muted); font-size: 12px; font-weight: normal; width: auto; }
table.est3 td.e-name { font-weight: bold; } table.est3 td.e-desc { color: #555; font-size: 13px; }
table.est3 tr.sub td { text-align: right; } table.est3 tr.note-row td { font-size: 13px; }
table.est3 .tag { margin-left: 6px; }
/* 標準仕様も仕上げ表と同じ見た目（項目名に色・内容は白）。仕上げ表より行が少ないので、紙では少し大きめの字 */
.fin-cols.spec table.fin { font-size: 13px; } .fin-cols.spec table.fin th { width: 32%; }
@media print {
  table.est3 col.c-amt { width: 30mm; } table.est3 thead th { font-size: 7.5pt; } table.est3 td.e-desc { font-size: 8pt; }
  table.est3 td.num, table.est3 th.num { white-space: nowrap; }
  .fin-cols.spec table.fin { font-size: 9pt; } .fin-cols.spec table.fin th, .fin-cols.spec table.fin td { padding: 1mm 2mm; line-height: 1.35; } .fin-cols.spec table.fin th { width: 32%; }
  table.req2 { font-size: 9pt; } table.req2 th, table.req2 td { padding: 1mm 2mm; } .req-note { font-size: 9.5pt; }
}
/* ご要望の整理: ゾーニングの案 → ご提案（プランニング）。下に「最大限かなえるためのプランニング」の一言 */
table.req2 thead th { background: #f1efe9; color: var(--muted); font-size: 12px; font-weight: normal; }
table.req2 td.r-name { font-weight: bold; } table.req2 td.r-was { color: #777; } table.req2 td.num { white-space: nowrap; }
.req-note { margin: 10px 0 4px; padding: 10px 12px; border-left: 4px solid var(--accent); background: #f6faf8; font-size: 14px; line-height: 1.7; }

/* ご提案の最後: 確定・キャンペーン・一本の価格帯 */
.proposal-decision, .campaign-page, .proposal-error, .proposal-loading { margin-top: 28px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.proposal-decision h2, .campaign-page h2 { color: var(--accent); margin-bottom: 16px; }
.proposal-decision-actions, .product-actions, .campaign-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.proposal-decision-actions button { min-width: 260px; }
.proposal-decision-actions small, .product-actions small { display: block; margin-left: 8px; font-size: 11px; opacity: .82; }
.proposal-message { min-height: 1.4em; margin: 10px 0 0; text-align: center; color: #8a5a00; font-size: 13px; }
.campaign-kicker { color: var(--accent); font-weight: 700; letter-spacing: .04em; }
.campaign-conditions { min-height: 150px; margin: 18px 0 24px; padding: 22px; border-left: 4px solid var(--accent); background: #f6faf8; line-height: 1.9; white-space: normal; }
.campaign-discount { display: grid; justify-content: center; gap: 10px; margin: 28px 0; text-align: center; font-size: 16px; font-weight: 700; }
.campaign-discount input { width: 190px; font-size: 24px; text-align: right; }
.campaign-nav { margin-top: 22px; }
.campaign-minus td { color: #a34b2b; font-weight: 700; }
.campaign-total .total th { border-top: 2px solid var(--accent); background: #f2f6f3; }
.proposal-price-page { --price-basic: #a88b5a; --price-pro: var(--accent); --price-auto: #7a6a91; margin-top: 34px; }
.price-lead { margin: 4px 0 16px; color: #555; }
.price-band-picture { width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fbfaf7; padding: 14px; }
.price-band-picture svg { display: block; width: 100%; height: auto; }
.price-axis { stroke: var(--line); stroke-width: 1.5; }
.price-tick { stroke: var(--line); stroke-width: 1; }
.price-tick-label { fill: #666; font-size: 10px; }
.price-basic-fill { fill: var(--price-basic); } .price-pro-fill { fill: var(--price-pro); } .price-auto-fill { fill: var(--price-auto); }
.price-lane { font-size: 14px; font-weight: 700; fill: var(--ink); }
.price-value { font-size: 13px; font-weight: 700; fill: var(--ink); }
.price-note { font-size: 11px; fill: #666; }
.price-pro-marker { fill: var(--price-pro); stroke: #fff; stroke-width: 3; }
.price-before { fill: #fff; stroke: #777; stroke-width: 2; }
.price-campaign-line { stroke: #777; stroke-width: 1.5; stroke-dasharray: 4 4; }
.product-actions { margin-top: 18px; }
.product-actions > * { min-width: 280px; }
.product-actions button:disabled { opacity: .55; cursor: not-allowed; }
@media print {
  .proposal-price-page { break-before: page; min-height: 250mm; padding-top: 12mm; }
  .price-band-picture { margin-top: 12mm; padding: 6mm; }
  .price-band-picture svg { max-height: 120mm; }
}
/* ルール概要の「条件つきでできること」「できないこと」: 上に横長の画像、下に文字（画像が小さくて見えなかった。2026-11-04 のユーザーの指示） */
.rule-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.rule-card { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; align-items: start; }
.rule-card .rule-ico { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; font-size: 12px; }
.rule-card > div { padding: 10px 12px 12px; }
/* 画像の枠に素材が入ったとき（写真は枠いっぱい、図は全体が見えるように） */
.wish.with-pic > .wish-pic:has(img), .rule-ico:has(img) { padding: 0; overflow: hidden; }
.wish-pic img, .rule-ico img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-pic img.dia, .wish-pic img.dia, .rule-ico img.dia { object-fit: contain; background: #f6f4ef; }

/* ==== スマホ・タブレットのレイアウトの直し（2026-11-04） ==== */
/* 画像の本来の幅がカードの列幅より優先され、画像と文字が途中で切れるのを防ぐ。 */
.card.pic > .card-pic,
.card.pic > .card-text {
  width: 100%;
  min-width: 0;
}
.card.pic > .card-pic { overflow: hidden; }

@media (max-width: 700px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  .flow-header { gap: 8px; padding: 8px 10px; }
  .flow-header .steps { flex: 1 1 auto; min-width: 0; }

  .page { margin: 12px auto 40px; padding: 0 10px; }
  article { padding: 18px 14px; }
  button.big { max-width: 100%; padding-inline: 20px; }

  .hearing-top { margin-top: -4px; padding-top: 4px; }
  .hearing-top .step-chips { margin-bottom: 5px; }
  .tabnav { padding: 0 1px 5px; }
  .chip { padding: 4px 9px; font-size: 12px; }
  .hearing-top .area-meter { margin-bottom: 6px; padding: 7px 9px; }
  /* 案を未選択のときの案内文も、上に残る範囲を増やさない。 */
  .area-meter > .muted { margin: 0; }
  .area-meter .am-total { font-size: 18px; }
  .area-meter .am-bar { height: 6px; margin: 3px 0; }

  .toolbar { justify-content: flex-start; flex-wrap: wrap; }
  #report > .toolbar .paper { flex: 1 0 100%; min-width: 0; }
  #report > .toolbar .paper select { width: 100%; min-width: 0; }
  #report > .toolbar button { flex: 1 1 auto; padding-inline: 12px; }

  .zfoot { grid-template-columns: minmax(0, 1fr); }
  .zfoot button { min-width: 0; }

  th, td { padding: 5px 6px; }
  table { font-size: 13px; }
  table.est3 col.c-amt { width: 6.8em; }

  .zoom { gap: 4px; padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
  .zoom-bar { gap: 6px 8px; }
  .zoom-bar > b { flex: 1 0 100%; }
  .zoom-tools { margin-left: auto; }
  .zoom-tabs button,
  .zoom-tools button { padding: 8px 10px; min-width: 36px; }
  .zoom-body { padding: 6px; }
  .zoom-body.fit .zfloor { flex-basis: 280px; }
}