/* R4 home + housing visual layer | editable text & independent raster/SVG.
   Demo match is a visual design review, not measured browser acceptance. */
.phone[data-route="home"], .phone[data-route="housing"]{
  --paper:#fff3e3;--brown:#251b16;--red:#c30b22;
  background:radial-gradient(ellipse at 75% 15%,#ffe6bb 0,transparent 53%),
             radial-gradient(ellipse at 5% 78%,#ffe0b8 0,transparent 44%),#fff4e3;
}
.phone[data-route="home"]::before,.phone[data-route="housing"]::before{
  opacity:.8;z-index:0;pointer-events:none;
}
.phone[data-route="home"] #masthead{height:58px;padding:7px 16px;gap:7px;justify-content:space-between}
.r4-brand{display:flex;align-items:center;gap:5px;font-size:15px;white-space:nowrap;color:#291a13;letter-spacing:-.04em}
.r4-brand-seal{font:800 21px/1 "Noto Serif CJK SC","STSong",serif;color:#fff;
  background:linear-gradient(145deg,#ef352a,#b60821);width:28px;height:29px;border:1px solid #f3b761;
  border-radius:9px;display:grid;place-items:center;box-shadow:0 2px 5px #b42f253d}
.r4-year{white-space:nowrap;border:1px solid #f3ae51;box-shadow:0 3px 8px #a43f2740;
  padding:6px 12px;border-radius:99px;background:linear-gradient(180deg,#e63b29,#b80824);
  color:#fff8e8;font:800 14px/1.2 "Noto Serif CJK SC","STSong",serif}
.r4-dots{border:0;background:#fff9ec;border-radius:99px;width:42px;height:42px;color:#574133;font-size:20px;flex:0 0 auto}
.phone[data-route="home"] .page{padding:0 16px 13px;overflow-y:auto; height:calc(100% - 92px)}
.phone[data-route="home"] .sceneRoot{position:relative}
.phone[data-route="home"] .sceneRoot:before{content:"";position:absolute;top:19px;left:-18px;
  width:80px;height:102px;background:radial-gradient(ellipse at bottom right,#e4aa72b7 0,transparent 64%);opacity:.43;pointer-events:none}
.phone[data-route="home"] .sceneRoot:after{content:"✿";position:absolute;top:15px;right:-10px;color:#d9916c;
  font:32px/1 serif;opacity:.4;pointer-events:none}
.r4-home-hero{position:relative;z-index:1}
.r4-home-title{text-align:center;font-family:"Kaiti SC","STKaiti","AR PL KaitiM GB","Noto Serif CJK SC","Songti SC",serif;
  font-size:clamp(27px,7.4vw,34px);font-weight:900;line-height:1.13;letter-spacing:-.035em;
  color:#1d1715;margin:0 auto 6px;max-width:100%;text-shadow:0 1px #fff3dd}
.r4-home-title span{display:block;white-space:nowrap}
.r4-home-title em{font-style:normal;color:#b90620;font-weight:900}
.r4-title-first em{font-size:1.15em;margin-right:.05em}
.r4-title-second em{font-size:1.25em;margin-right:.045em}
.r4-home-intro{font-family:"Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif;
  text-align:center;line-height:1.5;font-size:11.5px;color:#58463c;margin:3px 0 3px}
.r4-plan-art{position:relative;margin:0 -10px;overflow:visible;aspect-ratio:1.49/1;isolation:isolate}
.r4-plan-art>img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0px 7px 7px #5f432647)}
.r4-ping{position:absolute;z-index:4;border-radius:9px;box-shadow:0 2px 6px #50351e38;
  font-family:"Noto Sans CJK SC","Microsoft YaHei",sans-serif;letter-spacing:-.01em;white-space:nowrap}
.r4-ping b{font-weight:900;display:block}.r4-ping small{display:block;font-size:8.5px;line-height:1.25;margin-top:2px}
.r4-kitchen{left:1%;top:1%;font-size:10px;line-height:1.22;color:#be1729;background:#fff8f0;border:1.5px solid #e9534a;padding:5px 7px}
.r4-health{right:5%;top:16%;color:#fff;background:linear-gradient(110deg,#42bb7b,#118b55);padding:6px 9px;font-size:12px;font-weight:900}
.r4-wealth{left:3%;bottom:33%;color:#fff;background:linear-gradient(90deg,#ce942a,#a66e0b);padding:5px 9px;font-size:12px;font-weight:900}
.r4-peach{right:1%;bottom:34%;color:#fff;background:linear-gradient(90deg,#f23e69,#c31243);padding:6px 9px;font-size:11px;font-weight:900}
.r4-bedroom{right:0;bottom:8%;padding:5px 6px;background:#edf7ff;border:1.5px solid #307ac6;color:#1459a4;font-size:9.5px;line-height:1.2}
.r4-locator{position:absolute;z-index:3;display:block;width:17px;height:17px;border:3px solid #fff;
  border-radius:50%;box-shadow:0 0 0 2px currentColor,0 0 0 8px color-mix(in srgb,currentColor 22%,transparent)}
.r4-loc-red{color:#f32237;background:#f32237;left:36%;top:29%}
.r4-loc-green{color:#20b66a;background:#20b66a;right:28%;top:35%}
.r4-loc-gold{color:#d7ac23;background:#d7ac23;left:24%;bottom:29%}
.r4-loc-pink{color:#f04d85;background:#f04d85;right:18%;bottom:31%}
.r4-loc-blue{color:#2579d7;background:#2579d7;right:27%;bottom:22%}
.r4-decor-rule{margin:4px 0 7px;padding:5px 3px;text-align:center;color:#684d36;
  background:linear-gradient(180deg,#fff7e7,#ffedcf);border:1px solid #e8c492;
  border-radius:99px;font-size:11px;line-height:1.25}
.r4-decor-rule strong{color:#be0a24;font:900 17px/1 "Noto Serif CJK SC",serif}
.r4-main-cta{display:flex;align-items:center;justify-content:center;gap:8px;
  border-color:#ff7562;min-height:47px;padding:8px 14px;font-size:15px;
  background:linear-gradient(#f0222b,#ba0020);box-shadow:0 5px 9px #c51b2833}
.r4-main-cta span{font-size:25px;font-weight:400;line-height:.65}
.r4-home-upload{display:flex;align-items:center;justify-content:center;gap:2px;margin:4px 0 7px;
  font-size:11px;line-height:1.4;color:#654936}
.r4-home-upload button{background:none;border:0;color:#36251b;font-weight:700;padding:4px 6px;min-height:29px;font-size:11px}
.r4-home-houses{position:relative;margin-top:1px}
.r4-home-house-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.r4-home-house{display:flex;align-items:center;min-width:0;min-height:60px;gap:6px;padding:5px 7px 5px 5px;
  background:#fffdfa;border:1px solid #f2e1cd;border-radius:13px;text-align:left;box-shadow:0 3px 9px #9b734014}
.r4-home-house img{width:67px;height:48px;min-width:67px;object-fit:cover;border-radius:8px;background:#f8e9d2}
.r4-home-house b{font-size:11px;line-height:1.35;color:#2a2019;white-space:nowrap;letter-spacing:-.05em}
.r4-home-house span{font-size:19px;color:#70513d;margin-left:auto}
.r4-home-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0 0}
.r4-home-benefits>div{min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;
  color:#5f4734;font-size:9px;line-height:1.42}
.r4-home-benefits img{width:31px;height:31px;border-radius:50%;background:#fff0d6;border:1px solid #eac487;padding:5px;flex-shrink:0}

/* Housing selection — only selection/upload live here. Orientation/annotation
   remain existing subsequent pages, not concealed inside a clipped scroll area. */
.phone[data-route="housing"] .page{padding:2px 16px 98px;overflow-y:auto}
.r4-housing-view{position:relative}
.r4-housing-top{position:relative}
.r4-step{color:#a42c21;font-size:11px;line-height:1.25;font-weight:850;letter-spacing:.05em;margin:1px 0 7px}
.r4-housing-top h1{font:900 26px/1.18 "Noto Serif CJK SC","Source Han Serif SC","Songti SC",serif;letter-spacing:-.035em;margin:0;color:#241b16}
.r4-housing-top em{font-style:normal;color:#bd0b23}
.r4-housing-top>p:last-child{font-size:11px;line-height:1.45;color:#876d55;margin:6px 0 10px}
.r4-region-switch{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:12px;
  background:#f1e7d9;gap:4px;margin:0 0 11px}
.r4-region-switch button{border:0;min-height:42px;padding:5px 4px;font-size:13px;font-weight:750;border-radius:10px;background:transparent;color:#a48a77}
.r4-region-switch button.active{background:linear-gradient(100deg,#db2329,#b9071e);color:white;box-shadow:0 2px 7px #bd2d3035}
.r4-housing-caption,.r4-upload-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 7px}
.r4-housing-caption b,.r4-upload-heading b{font-size:13px;color:#32231b}
.r4-housing-caption span,.r4-upload-heading span{font-size:11px;color:#a68771}
.r4-housing-grid{gap:8px}
.r4-house-card{border-radius:15px;padding:6px 6px 8px;box-shadow:0 4px 11px #8d633b12;background:linear-gradient(#fffdfa,#fffaf6);border:1.5px solid #efd9b8}
.r4-house-card.selected{border:2px solid #c30d28;padding:5.5px 5.5px 7.5px}
.r4-house-card img{height:79px;width:100%;display:block;object-fit:cover;aspect-ratio:auto;border-radius:9px}
.r4-house-card strong{font-size:12.5px;line-height:1.2;margin:7px 5px 3px;color:#241a15}
.r4-house-card small{font-size:10px;line-height:1.25;margin:0 5px;color:#a8866b;min-height:12px}
.r4-house-card .houseCheck{top:7px;right:7px;width:25px;height:25px;font-size:17px}
.r4-floor-chooser{margin-top:11px;border:1px solid #f0dbc0;background:#fffaf2;padding:7px 10px;border-radius:13px}
.r4-floor-line{display:flex;justify-content:space-between;align-items:center;gap:6px}
.r4-floor-line>b{font-size:13px}
.r4-floor-buttons{display:flex;gap:5px}
.r4-floor-buttons button{min-width:77px;min-height:37px;border:1px solid #dfc8a7;border-radius:9px;background:#fff8ed;color:#885f40;padding:6px 9px;font-size:12px;font-weight:750}
.r4-floor-buttons button.active{border-color:#c31225;background:#fff0ed;color:#bd0d21}
.r4-floor-extra{margin:8px 0 1px;border-top:1px dashed #dfbf9b;padding-top:7px}
.r4-floor-head{display:flex;align-items:center;justify-content:space-between;gap:4px}
.r4-floor-head .floorbar{margin:0;display:flex;gap:4px;flex-wrap:nowrap;flex:1;overflow-x:auto}
.r4-floor-head .floorbar button{min-height:37px;padding:6px 10px;font-size:11px}
.r4-add-floor{min-height:37px;border:0;background:transparent;padding:6px 4px;color:#ba2430;text-align:right;font-size:11px;white-space:nowrap}
.r4-sheet-buttons{display:flex;gap:5px;margin-top:7px}
.r4-sheet-buttons button{flex:1;min-height:37px;border:1px solid #e5cda8;border-radius:9px;background:#fff9ee;color:#8c7257;font-size:11px;padding:4px}
.r4-sheet-buttons button.active{color:#b9102a;border-color:#bf3544;background:#fff0ed}
.r4-upload-section{margin-top:10px}
.r4-upload-link{min-height:62px;display:flex;gap:9px;align-items:center;
  border:1px dashed #d9a15d;background:#fff7e8;padding:9px 11px;border-radius:12px;cursor:pointer}
.r4-upload-link img{width:35px;height:35px;flex-shrink:0;border:1px solid #e6bc75;border-radius:10px;background:white;padding:6px}
.r4-upload-link>span{flex:1;min-width:0;line-height:1.3}
.r4-upload-link b{display:block;font-size:13px;max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.r4-upload-link small{display:block;font-size:10px;color:#a38567;margin-top:4px}
.r4-upload-link i{font-style:normal;color:#bd1728;font-size:24px}
.r4-upload-preview{margin-top:6px;display:flex;align-items:center;gap:9px;font-size:10px;color:#9b795f}
.r4-upload-preview img{width:48px;height:42px;object-fit:contain}
.r4-housing-hint{margin:8px 0 3px;font-size:10px;line-height:1.45;color:#ad9073}
.phone[data-route="housing"] .sticky-action{left:15px;right:15px;bottom:6px;gap:4px}
.phone[data-route="housing"] .sticky-action .mainBtn{height:48px;font-size:15px}
.phone[data-route="housing"] .sticky-action .fineprint{font-size:10px}

/* Responsive art direction for compact and wide phone sizes. */
@media (max-width:800px){
  .phone[data-route="home"] .page{height:calc(100% - 58px)}
  .phone[data-route="housing"] .page{padding-bottom:105px}
}
@media(max-width:370px){
  .r4-home-title{font-size:27px;letter-spacing:-.045em}
  .r4-home-intro{font-size:10.5px}
  .r4-plan-art{margin:0 -7px;aspect-ratio:1.55/1}
  .r4-ping{transform:scale(.88)}.r4-kitchen{transform-origin:top left}.r4-bedroom{transform-origin:bottom right}
  .r4-home-house{gap:4px;padding:4px}.r4-home-house img{width:56px;min-width:56px;height:45px}
  .r4-home-house b{font-size:10px}
  .r4-house-card img{height:67px}
  .r4-housing-top h1{font-size:24px}
}
@media(max-height:780px){
  .r4-home-title{font-size:27px}.r4-home-intro{font-size:10.5px}
  .r4-plan-art{aspect-ratio:1.56/1}
  .r4-home-house{min-height:53px}.r4-home-house img{height:43px}
  .r4-housing-top>p:last-child{margin-bottom:6px}
  .r4-region-switch{margin-bottom:7px}.r4-house-card img{height:66px}
}
@media (prefers-reduced-motion:reduce){.r4-plan-art *{animation:none!important}}


/* R4 home visual delta — photoreal residence + separate ornament + ink hierarchy.
 * Scope is HOME ONLY. Housing selections, photos, upload and routing unchanged.
 * The hero is separately replaceable webp. Text, pings and controls stay native DOM. */
.phone[data-route="home"]{
  background-image:url("./assets/home-paper-grain.png"),
    radial-gradient(ellipse at 90% 28%,rgba(244,196,132,.32),transparent 50%),
    radial-gradient(ellipse at 0% 71%,rgba(251,216,159,.19),transparent 42%),
    linear-gradient(180deg,#fff5e8,#fff1db 72%,#fff4e8);
  background-size:192px 192px,auto,auto,auto;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat;
}
.phone[data-route="home"] .sceneRoot::before,
.phone[data-route="home"] .sceneRoot::after{content:none!important}
.r4-home-ornament{position:absolute;z-index:0;left:-16px;top:-58px;
  width:calc(100% + 32px);height:auto;max-width:none;pointer-events:none;
  user-select:none;opacity:.98}
.phone[data-route="home"] .r4-home-houses{position:relative;z-index:1}
/* calligraphic family: local editable font fallback, not a bundled unlicensed font */
.phone[data-route="home"] .r4-home-title{
  font-family:"STKaiti","Kaiti SC","KaiTi","DFKai-SB","AR PL KaitiM GB","Noto Serif CJK SC",serif;
  line-height:1.10;letter-spacing:-.045em;font-weight:950;
  color:#18110f;text-shadow:.42px 0 currentColor,-.18px 0 currentColor;
  margin-top:1px;margin-bottom:5px;
}
.phone[data-route="home"] .r4-home-title em{color:#b5081d;
  text-shadow:.4px 0 currentColor, -.15px .2px currentColor}
.phone[data-route="home"] .r4-title-first em{font-size:1.22em;letter-spacing:-.05em;display:inline-block;transform:rotate(-1deg)}
.phone[data-route="home"] .r4-title-second em{font-size:1.39em;letter-spacing:-.05em;display:inline-block;transform:skew(-2.5deg)}
/* ornate but still native, editable year text */
.phone[data-route="home"] .r4-year{
  position:relative;border:1.5px solid #d79733;
  background:linear-gradient(180deg,#db361b 0%,#bf0e19 56%,#a60d21 100%);
  box-shadow:inset 0 0 0 1px #fcbe5e,0 3px 8px #a43f2740;
  padding-left:14px;padding-right:14px;
}
.phone[data-route="home"] .r4-year::before,.phone[data-route="home"] .r4-year::after{
  content:"";position:absolute;top:50%;width:7px;height:7px;border:1px solid #e2ad5f;
  background:linear-gradient(135deg,#d52b1c,#a5101d);transform:translateY(-50%) rotate(45deg)}
.phone[data-route="home"] .r4-year::before{left:-5px}
.phone[data-route="home"] .r4-year::after{right:-5px}
.phone[data-route="home"] .r4-plan-art{
  background:radial-gradient(ellipse at 50% 58%,#f7d39a44 0%,transparent 72%);
  aspect-ratio:1.45/1;isolation:isolate;overflow:visible;
}
.phone[data-route="home"] .r4-plan-art .r4-floor-photo{
  display:block;width:100%;height:100%;object-fit:fill;
  filter:drop-shadow(0 7px 6px rgba(89,55,34,.30)) saturate(1.06);
}
.phone[data-route="home"] .r4-plan-art::before{
  content:"";position:absolute;inset:7% 3% 2%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at 52% 59%,rgba(207,160,80,.30),transparent 70%);
  filter:blur(14px)
}
.phone[data-route="home"] .r4-locator{
  box-shadow:0 0 0 2px currentColor,0 0 0 8px color-mix(in srgb,currentColor 18%,transparent),0 0 18px currentColor;
}
.phone[data-route="home"] .r4-decor-rule{
  background:linear-gradient(180deg,#fff8e8f5,#ffedd0f5);
  border-color:#dfb87f;
}
@media(max-width:375px){.phone[data-route="home"] .r4-home-title{font-size:27px}}