@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Serif+SC:wght@500;600;700&display=swap');
:root{--ink:#18251f;--forest:#315b46;--muted:#637267;--paper:#fffefa;--ground:#f4f3ed;--line:#dbe2d7;--shadow:0 22px 56px rgba(22,45,32,.13)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ground);color:var(--ink);font-family:'Noto Sans SC','Microsoft YaHei',sans-serif}button{font:inherit;cursor:pointer}a{color:inherit}.wrap{width:min(1392px,calc(100% - 48px));margin-inline:auto}[hidden]{display:none!important}
.site-header{height:68px;padding:0 clamp(20px,3vw,52px);display:flex;justify-content:space-between;align-items:center;background:var(--paper);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-size:18px;font-weight:700;line-height:1.1}.brand small{display:block;margin-top:3px;color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.07em}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--forest);color:#fff;font-size:29px;line-height:1}.header-info{border:0;background:transparent;color:var(--forest);font-size:13px;font-weight:700}
.future-home-stage{padding:16px 0 28px}.stage-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:14px}.eyebrow{margin:0 0 6px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6e8875}.stage-heading h1{margin:0;font-family:'Noto Serif SC','Songti SC',serif;font-size:clamp(28px,3.1vw,43px);font-weight:600;line-height:1.25;letter-spacing:-.04em}.stage-heading h1 em{font-style:normal;color:var(--forest)}.view-count{color:var(--muted);font-size:13px;font-weight:700;white-space:nowrap}
.stage-shell{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--paper);box-shadow:var(--shadow)}.stage-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:9px 15px;background:var(--paper)}.room-nav{display:flex;align-items:center;gap:3px;min-width:0;overflow-x:auto;scrollbar-width:thin}.room-button{white-space:nowrap;border:0;border-radius:8px;background:none;padding:9px 13px;color:var(--muted);font-size:13px;font-weight:700;transition:background .2s,color .2s}.room-button:hover{background:#edf2ea;color:var(--forest)}.room-button.is-active{background:var(--forest);color:white}.mode-switch{display:flex;gap:3px;flex:none;padding:3px;border:1px solid var(--line);border-radius:9px;background:#f0f4ee}.mode-button{white-space:nowrap;border:0;border-radius:6px;background:transparent;padding:7px 12px;color:#657b68;font-size:12px;font-weight:700}.mode-button.is-active{background:white;color:var(--forest);box-shadow:0 1px 5px #2c4b3220}
.stage-media{position:relative;height:clamp(450px,calc(100vh - 285px),680px);overflow:hidden;background:#27342c}.stage-media:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent 36%,rgba(8,20,14,.56));pointer-events:none}.stage-media img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 48%;opacity:1;transition:opacity .4s ease}.stage-media img.is-before{object-position:center 49%}.stage-media img.is-switching{opacity:.36}.stage-topline{position:absolute;z-index:2;top:20px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;gap:12px;pointer-events:none}.stage-badge,.stage-room-status{display:inline-flex;align-items:center;min-height:30px;padding:6px 11px;border-radius:99px;background:#fffdf2eb;color:#254632;font-size:11px;font-weight:700}.stage-room-status{background:#1d3422ae;color:white}.stage-caption{position:absolute;z-index:2;bottom:23px;left:31px;right:31px;color:white;pointer-events:none;text-shadow:0 1px 12px rgba(0,0,0,.35)}.stage-caption p{margin:0;font-size:13px}.stage-caption p:first-child{font-size:11px;letter-spacing:.12em}.stage-caption h2{margin:5px 0;font-family:'Noto Serif SC','Songti SC',serif;font-size:clamp(29px,4vw,49px);line-height:1.13}.stage-error{position:absolute;z-index:3;inset:45% auto auto 50%;transform:translate(-50%,-50%);padding:14px 20px;background:#fffdf6;border-radius:10px;font-size:13px}
.stage-bottom{display:flex;align-items:center;gap:16px;padding:12px 15px}.view-switch{display:flex;gap:5px;flex:none}.view-button{padding:7px 10px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--muted);font-size:11px}.view-button.is-active{border-color:#9fbaa0;background:#e7efe4;color:var(--forest);font-weight:700}.journey-controls{display:flex;align-items:center;justify-content:center;gap:5px;flex:1;min-width:0}.journey-controls button{border:0;border-radius:8px;background:#edf2eb;padding:9px 12px;color:var(--forest);font-size:12px;font-weight:700;white-space:nowrap}.journey-controls button:hover{background:#dce9d9}.journey-controls #previous-view,.journey-controls #next-view{min-width:35px;font-size:18px;line-height:16px}.journey-controls #auto-tour{background:var(--forest);color:white}.journey-controls #auto-tour:hover{background:#254c37}.journey-controls button:disabled{opacity:.5;cursor:not-allowed}.plan-trigger{flex:none;border:0;border-radius:8px;background:#e8e2d2;padding:10px 14px;color:#514a35;font-size:12px;font-weight:700}.plan-trigger:hover{background:#dcd2bb}.stage-foot{display:flex;justify-content:space-between;gap:18px;color:#6f7b70;font-size:11px}.stage-foot p{margin:9px 1px 0}.stage-foot p:first-child{font-weight:700;color:#365944}.site-footer{display:flex;justify-content:space-between;gap:15px;padding:15px 0 22px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}.site-footer a{color:var(--forest);font-weight:700;text-decoration:none}
button:focus-visible,a:focus-visible{outline:3px solid #b58d45;outline-offset:3px}dialog{color:var(--ink);background:var(--paper);border:0;box-shadow:0 20px 80px #06150d60}dialog::backdrop{background:#0a1b13a8}.plan-drawer{position:fixed;top:0;right:0;left:auto;bottom:0;width:min(520px,100vw);height:100dvh;max-height:100dvh;margin:0;padding:23px 24px 35px;border-radius:16px 0 0 16px;overflow-y:auto}.drawer-head{display:flex;align-items:start;justify-content:space-between;gap:14px}.drawer-head h2{margin:0;font-family:'Noto Serif SC','Songti SC',serif;font-size:29px}.drawer-head button{border:0;background:transparent;color:var(--forest);font-size:12px;font-weight:700}.goal-note,.drawer-explainer,.media-plan-note,.boundary-note{color:var(--muted);font-size:12px;line-height:1.6}.goal-note{padding:11px 13px;background:#edf3eb;border-radius:9px}.drawer-mode{margin:15px 0 10px;width:max-content}.drawer-explainer{margin:0}.action-summary{margin:20px 0 10px;color:var(--forest);font-size:12px;font-weight:700}.action-list{display:grid;grid-template-columns:1fr;gap:8px}.action-card{padding:12px 14px;background:#f6f8f3;border:1px solid #dce6d9;border-radius:10px}.action-card.is-conditional{background:#fbf8ef;border-color:#e6ddc8}.action-card.is-preserved{background:#edf5ed}.action-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.action-top strong{font-size:13px}.action-tag{border-radius:99px;background:#dce9dc;padding:3px 8px;color:#285342;font-size:10px;font-weight:700}.is-conditional .action-tag{background:#f1e5cb;color:#755b26}.action-card p{margin:6px 0 0;color:#53645a;font-size:12px}.action-card small{display:block;margin-top:4px;color:#7c887f;font-size:11px}.plan-cautions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.plan-cautions>div{padding:12px;background:#eef4eb;border-radius:9px}.plan-cautions>div:last-child{background:#faf6e9}.plan-cautions h3{margin:0 0 5px;font-size:12px}.plan-cautions ul{margin:0;padding-left:16px;color:#56675b;font-size:11px}.plan-cautions li+li{margin-top:4px}.boundary-note{padding:12px;border-left:3px solid #b8c9b5;background:#f3f6ef}.drawer-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:17px}.drawer-links button{border:1px solid #aac1ad;border-radius:8px;background:white;color:var(--forest);padding:8px 11px;font-size:12px;font-weight:700}
.info-dialog,.plan-dialog,.image-dialog{width:min(680px,calc(100vw - 26px));max-height:90dvh;padding:24px;border-radius:14px;overflow-y:auto}.info-dialog p,.plan-dialog p{color:#526358;font-size:13px;line-height:1.7}.plan-dialog img{display:block;max-width:100%;max-height:65dvh;object-fit:contain;margin:10px auto}.plan-dialog a,.image-dialog a{font-size:12px;color:var(--forest);font-weight:700}.image-dialog{width:min(1120px,calc(100vw - 26px));height:90dvh;display:flex;flex-direction:column}.image-dialog:not([open]){display:none}.image-dialog img{min-height:0;max-width:100%;flex:1;object-fit:contain;margin:12px auto}
@media(max-width:1050px){.stage-toolbar{display:block}.mode-switch:not(.drawer-mode){margin-top:8px;width:max-content}.stage-bottom{flex-wrap:wrap}.journey-controls{order:3;width:100%;flex:auto;justify-content:flex-start;overflow-x:auto}.plan-trigger{margin-left:auto}.stage-media{height:clamp(450px,58vh,650px)}}
@media(max-width:650px){.wrap{width:calc(100% - 24px)}.site-header{height:60px;padding:0 13px}.brand{font-size:16px}.brand small{font-size:9px}.stage-heading{margin-bottom:10px}.stage-heading h1{font-size:30px}.future-home-stage{padding-top:17px}.stage-shell{border-radius:13px}.stage-toolbar{padding:8px}.room-nav{gap:1px}.room-button{padding:8px 10px;font-size:11px}.mode-switch:not(.drawer-mode){margin-top:7px}.mode-button{font-size:11px;padding:6px 11px}.stage-media{height:clamp(390px,55svh,560px)}.stage-topline{top:11px;left:11px;right:11px}.stage-badge,.stage-room-status{min-height:25px;padding:5px 8px;font-size:9px}.stage-caption{bottom:15px;left:16px;right:16px}.stage-caption h2{font-size:34px}.stage-caption p{font-size:11px}.stage-bottom{gap:8px;padding:10px}.view-button{font-size:10px}.journey-controls{order:3;gap:4px;padding-bottom:2px}.journey-controls button{padding:8px 10px;font-size:10px}.journey-controls #previous-view,.journey-controls #next-view{min-width:30px}.plan-trigger{font-size:11px;padding:9px 10px}.stage-foot{display:block;font-size:10px}.stage-foot p{margin-top:6px}.site-footer{display:block;font-size:10px}.site-footer a{display:block;margin-top:7px}.plan-drawer{padding:20px 16px;border-radius:0}.plan-cautions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.stage-media img,.room-button{transition:none}}
.stage-heading-actions{display:flex;align-items:center;gap:16px}.spatial-start{display:inline-flex;align-items:center;min-height:37px;padding:8px 13px;border-radius:9px;background:#315b46;color:#fff;text-decoration:none;font-size:12px;font-weight:700;white-space:nowrap}.spatial-start:hover{background:#254c37}.spatial-return-note{margin:0 auto 11px;padding:9px 12px;border-left:3px solid #7baa8c;background:#e9f2e7;color:#315b46;font-size:12px}@media(max-width:650px){.stage-heading{align-items:start}.stage-heading-actions{display:grid;gap:5px;justify-items:end}.spatial-start{font-size:10px;padding:7px 9px;min-height:32px}}

.spatial-return-note a{color:#245743;font-weight:700;text-underline-offset:2px}.stage-error{max-width:min(380px,calc(100% - 24px));line-height:1.6;box-shadow:0 8px 30px #13291e66}.stage-error button{margin-left:8px;border:0;border-radius:6px;padding:6px 9px;background:#315b46;color:white;cursor:pointer}

/* M9: photo comparison, kept separate from the plan-specific concept stage. */
.comparison-panel{padding:22px 24px 26px;background:#fffefa;border-top:1px solid var(--line)}
.comparison-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;max-width:980px;margin:0 auto 12px}
.comparison-heading h3{margin:0;font:600 clamp(20px,2.4vw,29px)/1.25 'Noto Serif SC','Songti SC',serif}
.comparison-heading p:last-child{max-width:400px;margin:0;color:var(--muted);font-size:11px;line-height:1.5}
.comparison-media{--reveal:50%;position:relative;width:min(980px,100%);aspect-ratio:4/3;margin:auto;overflow:hidden;border-radius:12px;background:#e7e8df;touch-action:none;user-select:none}
.comparison-media>img,.comparison-after-mask,.comparison-after-mask img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.comparison-after-mask{clip-path:inset(0 0 0 var(--reveal));pointer-events:none}
.comparison-label{position:absolute;z-index:2;top:14px;padding:7px 10px;border-radius:7px;background:#102118ba;color:white;font-size:11px;font-weight:700;pointer-events:none}
.comparison-label-before{left:14px}.comparison-label-after{right:14px}
.comparison-divider{position:absolute;z-index:3;top:0;bottom:0;left:var(--reveal);width:2px;transform:translateX(-1px);background:#fff;box-shadow:0 0 0 1px #1e2c2070,0 0 13px #18251f85;pointer-events:none}
.comparison-divider span{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:44px;height:44px;transform:translate(-50%,-50%);border:2px solid white;border-radius:50%;background:#315b46;color:white;font-size:19px;box-shadow:0 2px 12px #10211888}
.comparison-media input[type=range]{position:absolute;z-index:4;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.comparison-media:focus-within{outline:3px solid #b58d45;outline-offset:3px}
.comparison-skeleton{position:absolute;z-index:5;inset:0;display:grid;place-items:center;background:linear-gradient(105deg,#e4e8dd 20%,#f7f7ef 45%,#e4e8dd 70%);background-size:250% 100%;animation:comparison-shimmer 1.5s linear infinite;color:#49624f;font-size:13px;font-weight:700;pointer-events:none}
.comparison-skeleton[hidden]{display:none}
.comparison-error{max-width:980px;margin:10px auto 0;color:#8a3b28;font-size:12px}
@keyframes comparison-shimmer{to{background-position-x:-250%}}
@media(max-width:650px){.comparison-panel{padding:16px 10px 20px}.comparison-heading{display:block}.comparison-heading p:last-child{margin-top:7px;font-size:10px}.comparison-media{border-radius:8px}.comparison-label{top:8px;padding:5px 6px;font-size:9px}.comparison-label-before{left:8px}.comparison-label-after{right:8px}}
@media(prefers-reduced-motion:reduce){.comparison-skeleton{animation:none}}

/* M10: animate only the reviewed concept in the stage; comparison images stay registered. */
.stage-media img.motion-active{animation:stage-ken-burns 7.5s ease-in-out infinite;will-change:transform}
.stage-media img.motion-active.motion-paused{animation-play-state:paused;will-change:auto}
@keyframes stage-ken-burns{0%,100%{transform:translate3d(0,0,0) scale(1.04)}50%{transform:translate3d(-.8%,-.5%,0) scale(1.10)}}
@media(prefers-reduced-motion:reduce){.stage-media img.motion-active{animation:none;transform:none;will-change:auto}}