/* 東京23区マンション価格ガイド — public beta visual system.
   Loaded after existing styles, only in the 3-page beta projection. */
:root {
  --paper:#f5f7fa;
  --white:#ffffff;
  --ink:#1b3548;
  --muted:#506678;
  --line:#d7e1e8;
  --green:#145a7a;
  --dark:#16394f;
  --mint:#eaf3f7;
  --amber:#70531a;
  --amber-bg:#fff8e9;
  --red:#943d32;
}
html { scroll-padding-top:24px; }
body.reference-page {
  line-height:1.75;
  letter-spacing:.005em;
  background:var(--paper);
}
.reference-page .site-header {
  width:min(1080px,calc(100% - 48px));
  min-height:84px;
  border-bottom-color:var(--line);
}
.reference-page main {
  width:min(1080px,calc(100% - 48px));
  padding-bottom:65px;
}
.reference-page .brand {
  color:var(--ink);
  gap:12px;
  line-height:1.4;
  font-size:12px;
}
.reference-page .brand strong { font-size:17px; font-weight:750; letter-spacing:-.025em; }
.reference-page .brand-mark {
  width:44px;
  height:44px;
  font-size:24px;
  background:var(--dark);
  border-radius:12px;
}
.reference-page h1 {
  font-size:clamp(29px,4.2vw,46px);
  font-weight:750;
  line-height:1.4;
  letter-spacing:-.035em;
  max-width:19ch;
}
.reference-page h2 { letter-spacing:-.025em; font-weight:700; }
.reference-page .intro { padding:36px 0 25px; }
.reference-page .eyebrow { color:var(--green); letter-spacing:.055em; font-weight:700; }
.reference-page .lead { max-width:58ch; }
.reference-page .notice {
  background:#fffaf0;
  border:1px solid #eadfbe;
  box-shadow:none;
  border-radius:12px;
  line-height:1.75;
}
.reference-page .notice + .notice { margin-top:12px; }
.reference-page :is(.source-card,.filter-card,.trend-card,.candidate-card,.cost-card,.owner-card,.support-card) {
  border-color:var(--line);
  box-shadow:0 3px 15px rgba(16,48,67,.025);
}
.reference-page :is(select,.candidate-card input,.cost-card input:not([type=checkbox]),.owner-card input) {
  border-color:#a4b9c6;
  background:#fff;
  border-radius:9px;
}
.reference-page :is(select,.candidate-card input,.cost-card input:not([type=checkbox]),.owner-card input):focus-visible {
  outline:3px solid #84c4e2;
  outline-offset:2px;
}
.reference-page :is(.candidate-actions button,.cost-submit-row button,.owner-submit-row button):not(:disabled) {
  background:var(--green);
  border-color:var(--green);
  border-radius:9px;
}
.reference-page :is(.candidate-actions button,.cost-submit-row button,.owner-submit-row button):not(:disabled):hover {
  background:#0e4662;
}
.reference-page .period-card:first-child { border-color:#8bb4c6; box-shadow:inset 0 3px 0 #317291; }
.reference-page .period-card,.reference-page .candidate-period-card { background:#fff; }
.reference-page .period-card:hover { border-color:#a0bfcf; }
.reference-page .source-strip { margin-top:15px; margin-bottom:25px; }
.reference-page .source-strip > div { border-left-color:#bdd3e1; }
.reference-page .section-heading { gap:14px; }
.reference-page :is(.cost-card,.owner-card)>summary:hover { background:#f8fbfd; }
.reference-page .source-card a { text-underline-offset:3px; }
.reference-page .source-card { line-height:1.85; }
.reference-page .source-card h2 { margin-bottom:10px; }
.reference-page .source-card p { max-width:88ch; }
.reference-page button:focus-visible,.reference-page a:focus-visible,.reference-page summary:focus-visible {
  outline-color:#217aa7;
  outline-offset:4px;
}
.beta-home .beta-header-note {
  border:1px solid var(--line);
  background:#fff;
  color:var(--muted);
  border-radius:40px;
  font-size:12px;
  font-weight:600;
  padding:6px 12px;
  white-space:nowrap;
}
.beta-home .intro {
  padding:56px 0 28px;
  max-width:920px;
}
.beta-home .intro > div { max-width:760px; }
.beta-home .intro h1 { max-width:24ch; }
.beta-home .intro p { max-width:57ch; font-size:16px; line-height:1.85; color:var(--muted); }
.beta-home .intro + .beta-steps { margin-top:6px; }
.beta-steps {
  padding:20px 22px;
  background:#eaf1f5;
  border:1px solid #d9e6ed;
  border-radius:16px;
}
.beta-steps h2 { font-size:15px; margin:0 0 13px; }
.beta-steps ol {
  margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
}
.beta-steps li { min-width:0; display:flex; gap:11px; align-items:flex-start; }
.beta-steps li > span {
  flex:0 0 26px; height:26px; display:grid; place-items:center;
  background:#fff; color:var(--green);
  border:1px solid #bbd2df;
  border-radius:50%; font-size:12px; font-weight:800;
}
.beta-steps li p { margin:0; line-height:1.5; }
.beta-steps li strong { display:block; font-size:13px; }
.beta-steps li small { display:block; font-size:12px; color:var(--muted); margin-top:3px; }
.beta-choice { padding:32px 0 0; }
.beta-choice h2 { font-size:clamp(22px,2.7vw,30px); }
.beta-choice-intro { font-size:14px; color:var(--muted); max-width:72ch; margin:9px 0 21px; }
.beta-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.beta-choice-card {
  min-width:0; display:flex; flex-direction:column;
  background:#fff; border:1px solid #cbdbe5;
  border-radius:17px; padding:26px 26px 23px;
  box-shadow:0 5px 22px rgba(24,60,88,.045);
}
.beta-choice-card:hover { border-color:#91b5c9; }
.beta-choice-kicker {
  width:fit-content;
  color:#145a7a; background:#eaf3f7;
  border-radius:4px; padding:4px 9px;
  font-size:12px; font-weight:700; margin:0 0 15px;
}
.beta-choice-card h3 { color:var(--ink); font-size:clamp(18px,2vw,23px); line-height:1.45; letter-spacing:-.025em; }
.beta-choice-card>p:not(.beta-choice-kicker) {
  font-size:13px; color:var(--muted); line-height:1.85; margin:12px 0 21px; flex:1;
}
.beta-choice-action {
  align-items:center; justify-content:space-between; display:flex;
  gap:12px; min-height:50px; border-radius:9px;
  padding:11px 16px;
  color:#fff; text-decoration:none;
  background:#145a7a; font-weight:700; font-size:14px;
}
.beta-choice-action:hover { background:#0d4765; color:#fff; }
.beta-choice-action span { font-size:20px; line-height:1; }
.beta-choice-foot { color:var(--muted); font-size:12px; margin:15px 0 23px; }
.beta-home .notice { margin-top:2px; }
.beta-home .beta-limit-details {
  margin-top:22px;
  background:transparent;
  box-shadow:none;
  border:1px solid var(--line);
  padding:0;
}
.beta-limit-details > summary {
  padding:17px 47px 17px 22px;
  color:var(--ink);
  font-size:14px;
  font-weight:700;
}
.beta-limit-details > summary:after { right:22px; }
.beta-limit-details .beta-limit-content { padding:0 22px 20px; font-size:13px; color:var(--muted); }
.beta-home .source-card[aria-label="用語の説明"] { margin-top:22px; }
.beta-home .source-card[aria-label="出典と免責"] { margin-top:18px; }
.beta-data-page .notice[aria-label="無料βの利用範囲"] { margin-top:0; }
.beta-data-page .notice[aria-label="無料βの利用範囲"] strong { display:block; margin-bottom:5px; }
.beta-data-page .intro-note { border-left:3px solid #b5d0dc; padding-left:14px; }
@media (max-width:760px) {
 .reference-page .site-header,.reference-page main { width:calc(100% - 32px); }
 .reference-page .brand strong { font-size:14px; }
 .reference-page .brand-mark { width:38px; height:38px; font-size:22px; }
 .reference-page h1 { font-size:clamp(27px,7vw,34px); max-width:none; }
 .beta-home .intro { padding:35px 0 17px; }
 .beta-home .intro p { font-size:15px; }
 .beta-steps { padding:17px; }
 .beta-steps ol { grid-template-columns:1fr; gap:13px; }
 .beta-choice { padding-top:24px; }
 .beta-choice-grid { grid-template-columns:1fr; gap:13px; }
 .beta-choice-card { padding:21px 19px 19px; }
 .beta-choice-card>p:not(.beta-choice-kicker) { margin-bottom:16px; }
 .beta-home .beta-header-note { font-size:10px; padding:6px 9px; }
 .beta-data-page .intro { padding-top:25px; }
}
@media (max-width:380px) {
 .reference-page .brand { gap:7px; }
 .reference-page .brand strong { font-size:12px; }
 .reference-page .brand-mark { width:34px; height:34px; font-size:19px; }
 .beta-home .beta-header-note { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) { .reference-page * { scroll-behavior:auto!important; } }
@media print {
 .reference-page .site-header,.reference-page main { width:100%; }
 .beta-choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .beta-choice-card { box-shadow:none; }
 .beta-choice-action { background:#fff; color:#111; border:1px solid #888; }
 .beta-limit-details:not([open]) { display:none; }
}

/* Concept C: adopted Canva page 3. All navigation uses existing real pages. */
:root{--paper:#f3f6f5;--ink:#102a3b;--muted:#49606c;--line:#d7e3df;--green:#08674f;--dark:#081f30;--mint:#e8f5ef}
.reference-page .site-header,.reference-page main{width:min(1240px,calc(100% - 64px))}
.reference-page .brand-mark{background:#081f30;color:#fff}
.reference-page a:focus-visible,.reference-page button:focus-visible,.reference-page summary:focus-visible{outline:3px solid #c27300;outline-offset:4px}
.reference-page :is(select,input):focus-visible{outline:3px solid #087255;outline-offset:3px}
.concept-hero{margin:28px 0 24px;padding:42px;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);gap:36px;background:#081f30;color:#fff;border-radius:22px;box-shadow:0 12px 36px #081f3014}
.concept-story{min-width:0;display:flex;flex-direction:column;justify-content:center}
.concept-label{color:#85e6bd;font-size:12px;font-weight:700;letter-spacing:.13em;margin:0 0 18px}
.beta-home .concept-hero .intro{padding:0;display:block}
.beta-home .concept-hero .intro h1{color:#fff;font-size:clamp(30px,3.7vw,46px);max-width:none;line-height:1.38;letter-spacing:-.035em}
.beta-home .concept-hero .intro p{color:#d3e3e7;font-size:15px;line-height:1.85;margin:16px 0 22px}
.concept-city{margin:0;position:relative;background:#1e4352;border-radius:12px;overflow:hidden;min-height:100px}
.concept-city img{display:block;width:100%;height:auto;aspect-ratio:2.6;object-fit:cover;object-position:center 47%}
.concept-city figcaption{padding:8px 10px;color:#cce2e7;font-size:10px;display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:space-between}
.concept-city a{color:#cce2e7;text-underline-offset:2px}
.concept-hero .beta-choice{padding:26px;border-radius:16px;background:#fff;color:var(--ink);align-self:center;min-width:0}
.concept-hero .beta-choice>.eyebrow{font-size:11px;color:#087255;margin:0 0 8px}
.concept-hero .beta-choice h2{font-size:23px;line-height:1.4}
.concept-hero .beta-choice-intro{font-size:12px;line-height:1.7;margin:10px 0 16px}
.concept-hero .beta-choice-grid{grid-template-columns:1fr;gap:12px}
.concept-hero .beta-choice-card{padding:16px;background:#f5f9f7;border:1px solid #d4e4dc;border-radius:10px;box-shadow:none}
.concept-hero .beta-choice-kicker{background:#e2f2e9;color:#08674f;margin:0 0 7px;padding:2px 6px;font-size:10px}
.concept-hero .beta-choice-card h3{font-size:16px;line-height:1.45}
.concept-hero .beta-choice-card>p:not(.beta-choice-kicker){font-size:12px;line-height:1.7;margin:7px 0 12px}
.concept-hero .beta-choice-action{background:#08674f;min-height:48px;font-size:13px;padding:10px 13px;color:#fff}
.concept-hero .beta-choice-action:hover{background:#064d3c}
.concept-hero .beta-choice-foot{margin:13px 0 0;font-size:11px;line-height:1.7}
.beta-steps{background:#e8f2ed;border-color:#d2e2d9}
.beta-data-page .filter-card{border-top:4px solid #087255;background:#fff;box-shadow:0 5px 22px #081f3008}
.beta-data-page .condition-tag{color:#075b46;background:#e8f5ef}
.reference-page .period-card:first-child{border-color:#8dbba8;box-shadow:inset 0 3px 0 #087255}
.reference-page :is(.candidate-actions button,.cost-submit-row button,.owner-submit-row button):not(:disabled){background:#08674f;border-color:#08674f}
.reference-page :is(.candidate-actions button,.cost-submit-row button,.owner-submit-row button):not(:disabled):hover{background:#064d3c}
@media(max-width:1000px){.concept-hero{gap:24px;padding:26px}.concept-hero .beta-choice{padding:20px}}
@media (max-width:760px){
 .reference-page .site-header,.reference-page main{width:calc(100% - 28px)}
 .reference-page .site-header{min-height:70px}
 .concept-hero{grid-template-columns:1fr;margin-top:16px;padding:18px;gap:16px;border-radius:16px}
 .concept-label{font-size:10px;margin-bottom:10px}
 .beta-home .concept-hero .intro h1{font-size:clamp(25px,7vw,34px);line-height:1.4}
 .beta-home .concept-hero .intro p{font-size:13px;line-height:1.65;margin:12px 0 14px}
 .concept-city img{height:84px;aspect-ratio:auto}
 .concept-city figcaption{font-size:12px;line-height:1.5;padding:6px 8px}
 .concept-hero .beta-choice{padding:18px}
 .concept-hero .beta-choice h2{font-size:20px}
 .concept-hero .beta-choice-intro{margin:8px 0 12px;font-size:11px}
 .concept-hero .beta-choice-card{padding:13px}
 .concept-hero .beta-choice-card h3{font-size:15px}
 .concept-hero .beta-choice-card>p:not(.beta-choice-kicker){font-size:13px;line-height:1.7}
 .concept-hero .beta-choice-action{font-size:14px;line-height:1.5}
}
@media print{.concept-hero{display:block;background:#fff;color:#111;box-shadow:none;padding:0}.concept-story .intro h1,.concept-story .intro p{color:#111!important}.concept-city{display:none}.concept-label{color:#111}.concept-hero .beta-choice{padding:12px 0}.concept-hero .beta-choice-action{color:#111;background:#fff;border:1px solid #666}}
@media(max-width:380px){
 .concept-hero{padding:16px;gap:16px}
 .concept-hero .beta-choice{padding:14px}
 .concept-city img{height:80px}
 .beta-home .concept-hero .intro h1{font-size:24px}
}
@media (max-width:760px){
 .beta-home .concept-hero .intro h1{text-wrap:balance}
 .beta-home .concept-hero .intro h1 br{display:none}
}