:root{
  --bg:#f6f4ef; --panel:#fff; --ink:#22201c; --sub:#6d675e; --line:#e2ddd2;
  --accent:#8c2f27; --accent2:#0f5c52; --gold:#b08d3f;
  --best:#0f7a5a; --good:#4a9a5e; --neutral:#8a8578; --bad:#c07a1f; --worst:#a8322a;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.05);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased}
h2{font-size:20px;margin:0 0 4px;letter-spacing:.02em}
h3{font-size:16px;margin:26px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
u{text-underline-offset:3px}

/* --- topbar --- */
.topbar{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding:10px 20px;background:#fffdf9;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.06em}
.mark{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:15px}
.topactions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.toggle{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--sub);cursor:pointer}

main{max-width:1040px;margin:0 auto;padding:22px 18px 90px}

/* --- buttons --- */
button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--line);
  background:#fff;padding:8px 16px;transition:.15s}
button:hover{border-color:#c9c1b2;background:#fbf9f5}
.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.primary:hover{background:#76251e;border-color:#76251e}
.big{padding:13px 34px;font-size:17px;font-weight:700}
.ghost{color:var(--sub)}

/* --- steps --- */
.steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.step{font-size:13px;padding:6px 13px;border-radius:20px;color:var(--sub)}
.step.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* --- panels --- */
.panel{display:none;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:24px 26px;box-shadow:var(--shadow)}
.panel.on{display:block}
.lead{color:var(--sub);margin:2px 0 16px}
.note{background:#fbf7ec;border:1px solid #ece2c9;border-left:3px solid var(--gold);
  border-radius:8px;padding:12px 15px;font-size:13.5px;margin:16px 0;color:#5b5346}
label{display:block;margin:12px 0;font-size:13.5px;font-weight:600}
.hint{display:block;font-weight:400;color:var(--sub);font-size:12px;margin-top:2px}
input[type=text],input[type=number],input[type=date],input[type=datetime-local],input:not([type]),select{
  width:100%;padding:9px 11px;margin-top:5px;border:1px solid var(--line);border-radius:7px;
  font:inherit;background:#fff;font-weight:400}
input:focus,select:focus{outline:2px solid #d8cbb0;outline-offset:-1px}
/* 数値欄の上下ボタンは消す（年や角度を1ずつ上下させても使い道がなく、
   空欄で押すと 1 が入ってしまうため） */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input.bad{border-color:var(--worst);background:#fdf6f5}
.fielderr{color:var(--worst);font-size:12px;font-weight:400;margin-top:4px;display:none}
.fielderr.on{display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px}
@media(max-width:700px){.grid2,.grid3{grid-template-columns:1fr}}
.chk{display:flex;align-items:center;gap:8px;font-weight:400}
.chk input{width:auto;margin:0}
details{margin:10px 0;font-size:13.5px}
summary{cursor:pointer;color:var(--sub)}
.navbar{display:flex;justify-content:space-between;margin-top:16px}
.runbar{display:flex;gap:12px;align-items:center;margin-top:26px;flex-wrap:wrap}

/* --- 建物の種類と「正面」の説明 --- */
.btype{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 14px}
.btlabel{font-size:13.5px;font-weight:600;margin-right:2px}
.bt{font-size:13px;padding:7px 14px;border-radius:20px;color:var(--sub)}
.bt.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.frontexp{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;
  background:#fcfbf8;border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin-bottom:16px}
.fleft{flex:0 0 auto}
.fsvg{width:260px;height:170px;display:block}
.fright{flex:1 1 260px;min-width:250px;font-size:13.5px}
.fright>b{display:block;color:var(--accent);margin-bottom:4px}
.fright p{margin:0 0 8px}
@media(max-width:620px){.fsvg{width:230px;height:150px}}

/* --- 方角の入力方法 --- */
.methods{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.method{text-align:left;line-height:1.35;padding:9px 16px;color:var(--sub)}
.method em{display:block;font-style:normal;font-size:11px;opacity:.8}
.method.on{background:var(--accent2);color:#fff;border-color:var(--accent2)}
.mbox{display:none}
.mbox.on{display:block}
hr.thin{border:none;border-top:1px solid #e5dcc4;margin:10px 0}
.degref{width:auto;margin:10px 0;border-collapse:collapse;font-size:12.5px}
.degref td,.degref th{border:1px solid #e0d6bd;padding:4px 10px;text-align:center;background:#fff}
.degref td{color:var(--sub);font-size:12px}
.degref th{font-weight:700;color:var(--accent)}
.note ol{margin:6px 0 8px;padding-left:1.3em}
.note li{margin-bottom:3px}
/* 住所検索 */
.addrrow{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 8px}
.addrrow input{flex:1 1 260px;margin:0}
.addrrow button{white-space:nowrap}
.findmsg{display:none;font-size:13px;margin-bottom:10px;padding:8px 12px;border-radius:7px}
.findmsg.on{display:block;background:#f4f1ea;color:var(--sub)}
.findmsg.ok{background:#eaf4ee;color:#1d6b45}
.findmsg.bad{background:#fbeceb;color:#8f342c}
.cands{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.cands .cand{text-align:left;font-size:13px;padding:8px 12px;white-space:normal}

/* 地図 */
.maprow{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;
  background:#fcfbf8;border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.mapbox{flex:1 1 420px;min-width:0}
#map{height:380px;border-radius:9px;border:1px solid var(--line);z-index:1}
.mapfallback{padding:22px;background:#fbeceb;color:#8f342c;border-radius:9px;font-size:13.5px;line-height:1.8}
.mk-center{display:grid;place-items:center}
.mk-center span{display:block;width:18px;height:18px;border-radius:50%;
  background:#0f5c52;border:3px solid #fff;box-shadow:0 0 0 1px #0f5c52,0 2px 6px rgba(0,0,0,.35)}
.mk-head span{display:block;width:26px;height:26px;border-radius:50%;
  background:#8c2f27;border:3px solid #fff;box-shadow:0 0 0 1px #8c2f27,0 2px 8px rgba(0,0,0,.4);cursor:grab}
.leaflet-container{font:inherit}
.arrowtgt{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.arrowtgt .atlabel{font-size:12px;color:var(--sub);font-weight:700}
.arrowtgt button{text-align:left;font-size:12.5px;padding:8px 10px;line-height:1.4;color:var(--sub)}
.arrowtgt button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.toupreview{margin-top:8px;padding:10px 12px;border-radius:8px;background:#f4f1ea;font-size:13.5px}
.mk-head{cursor:grab}
.mk-head:active{cursor:grabbing}
.mapfigwrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:14px 0 4px;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.mapfigwrap .tip{flex:1 1 240px;margin:0;font-size:13px;line-height:1.8}
.mfig{width:240px;max-width:100%;height:auto;display:block}

.dialwrap{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:16px;
  background:#fcfbf8;border:1px solid var(--line);border-radius:10px;padding:16px 20px}
#dial{touch-action:pan-y;cursor:grab;flex:0 0 auto}
#dial:active{cursor:grabbing}
.dialside{flex:0 1 220px;min-width:200px}
.dialside label{margin-top:0}
.degbig{margin-bottom:10px}
.degbig span{font-size:34px;font-weight:700;letter-spacing:.02em;color:var(--accent)}
.degbig em{display:block;font-style:normal;font-size:12px;color:var(--sub);margin-top:-2px}

/* --- 方角プレビュー --- */
.dirpreview{margin-top:14px;padding:14px 16px;border:1px dashed var(--line);border-radius:8px;
  background:#fcfbf8;font-size:13.5px;min-height:52px}
.dirpreview b{color:var(--accent2)}
.dirwarn{color:var(--worst);font-weight:600}

/* --- 人 --- */
.person{border:1px solid var(--line);border-radius:9px;padding:6px 16px 14px;margin-bottom:12px;background:#fcfbf8}
.person .grid3{align-items:end}
.person .del{float:right;margin-top:10px;font-size:12px;padding:4px 10px}

/* --- 部屋グリッド --- */
.roomgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:520px}
.roomcell{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fcfbf8}
.roomcell.center{background:#f1ede4;color:var(--sub);display:grid;place-items:center;font-size:12px}
.roomcell span{display:block;font-size:12px;font-weight:700;color:var(--sub)}
.roomcell select{margin-top:3px;padding:5px 7px;font-size:13px}

/* --- チップ --- */
.palchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{font-size:13px;padding:5px 12px;border-radius:16px;border:1px solid var(--line);background:#fff;font-weight:400}
.chip.on{background:var(--accent2);color:#fff;border-color:var(--accent2)}

/* --- チェックリスト --- */
.checklist{display:grid;gap:8px}
.q{border:1px solid var(--line);border-radius:9px;padding:10px 14px;background:#fcfbf8}
.q>label{margin:0;font-weight:400;display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.q input[type=checkbox]{width:auto;margin:5px 0 0}
.q .qname{font-weight:700;font-size:12.5px;color:var(--accent);display:block}
.radios{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.radios label{margin:0;font-weight:400;display:flex;gap:8px;align-items:center;cursor:pointer;font-size:13.5px}
.radios input{width:auto;margin:0}

/* --- 間取り図 --- */
.planwrap{margin-top:14px}
#planCanvas{width:100%;max-width:900px;border:1px solid var(--line);border-radius:10px;background:#fff;
  touch-action:none;cursor:grab}
.plancontrols{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:10px;font-size:12.5px}
.plancontrols label{margin:0;display:flex;align-items:center;gap:7px;font-weight:400}
.plancontrols input[type=range]{width:110px;margin:0}
.plancontrols select{width:auto;margin:0;padding:5px 8px}
.plancontrols .plc{display:flex;align-items:center;gap:6px}
.plancontrols .stepbtn{padding:4px 11px;font-size:15px;line-height:1.2;min-width:34px}
.plancontrols output{min-width:3.2em}
.tip{color:var(--sub)}

/* ============ 結果 ============ */
.rsec{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px 26px;
  margin-bottom:16px;box-shadow:var(--shadow)}
.hero{background:linear-gradient(160deg,#2b2723,#403830);color:#f4efe4;border:none}
.hero h1{font-size:23px;margin:0 0 6px}
.hero .sub{color:#c8bfae;font-size:13px}
.starline{font-size:26px;color:var(--gold);letter-spacing:4px;margin:12px 0 4px}
.hero p{margin:8px 0 0;font-size:15.5px;line-height:1.8}
.metarow{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  border-radius:16px;padding:4px 13px;font-size:12.5px}

/* マンションの見方の切り替え（鑑定書そのものが2通りある） */
.basisbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px;
  background:#efe9dc;border:1px solid #ded5c3;border-radius:10px;padding:10px 14px}
.blabel{flex:1 1 100%;font-size:12.5px;color:#6b6152;font-weight:700}
.bbtn{font-size:13px;padding:7px 14px;line-height:1.3;text-align:left;color:var(--sub);background:#fff}
.bbtn em{display:block;font-style:normal;font-size:10.5px;opacity:.75}
.bbtn.on{background:var(--accent2);color:#fff;border-color:var(--accent2)}

/* 流派タブ */
.schooltabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;position:sticky;top:52px;z-index:20;
  background:var(--bg);padding:8px 0}
.stab{font-size:13px;padding:7px 14px;border-radius:8px;color:var(--sub);line-height:1.3;text-align:left}
.stab em{display:block;font-style:normal;font-size:10.5px;opacity:.75}
.stab.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.excl{font-size:11.5px;background:#f1ede4;color:var(--sub);border-radius:12px;padding:2px 10px;margin-left:10px;vertical-align:middle}

/* 流派くらべ表 */
.ctablewrap{overflow-x:auto;margin-top:10px}
.ctable{border-collapse:collapse;font-size:12.5px;min-width:720px}
.ctable th,.ctable td{border:1px solid var(--line);padding:6px 8px;text-align:center;white-space:nowrap}
.ctable th{background:#faf8f3;font-weight:600;color:var(--sub);font-size:11.5px}
.ctable th em{display:block;font-style:normal;font-size:10px;color:var(--bad)}
.ctable .rh{background:#f4f1ea;color:var(--ink);font-size:13px}
.ctable .tot{background:#fdfbf6}
.pip{display:inline-block;min-width:64px;padding:2px 8px;border-radius:11px;color:#fff;font-size:11.5px}

.warn{border-left:3px solid var(--worst);background:#fdf3f2;border-radius:8px;padding:12px 15px;margin:10px 0}
.warn.lv1{border-left-color:var(--bad);background:#fdf8ee}
.warn b{display:block;margin-bottom:3px}

/* 方位カード */
.dirgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:760px){.dirgrid{grid-template-columns:1fr}}
.dcard{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.dhead{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;color:#fff}
.dhead .n{font-weight:700;font-size:16px}
.dhead .g{font-size:12px;opacity:.92}
.g-best{background:var(--best)}.g-good{background:var(--good)}.g-neutral{background:var(--neutral)}
.g-none{background:#bdb6aa}
.g-na{background:#cfc9be}
.vote.off{opacity:.55}
.taglabel{display:block;width:100%;font-size:11.5px;color:var(--sub);margin-bottom:2px}
.vote.off em{font-style:normal;font-size:11px;color:var(--sub)}
.roomok{margin-top:6px;padding:6px 10px;border-radius:7px;background:#eaf4ee;color:#1d6b45;font-size:13px}
.g-bad{background:var(--bad)}.g-worst{background:var(--worst)}
.dbody{padding:13px 15px;font-size:13.5px}
.dbody .h{font-weight:600;margin-bottom:7px}
.tagrow{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.tag{font-size:11.5px;padding:2px 9px;border-radius:12px;background:#f1ede4;color:#5b5346}
.tag.no{background:#fbeceb;color:#8f342c}
table.bd{margin:6px 0 2px;font-size:12.5px}
table.bd td{padding:5px 6px;border-bottom:1px dashed var(--line);vertical-align:top}
table.bd tr:last-child td{border-bottom:none}
.bm{width:20px;text-align:center;font-weight:700}
.m-good{color:var(--best)}.m-mid{color:var(--neutral)}.m-bad{color:var(--worst)}
.bl{width:104px;color:var(--sub);white-space:nowrap}
.remedy{background:#f7f5ef;border-radius:7px;padding:9px 12px;margin-top:9px;font-size:12.5px;white-space:pre-line}
.conflict{background:#fff8e8;border:1px solid #ecdcb4;border-radius:7px;padding:8px 11px;
  margin-top:9px;font-size:12.5px;color:#6b5a2e}
.votes{margin-top:9px;font-size:12.5px;display:none}
.pro .votes{display:block}
.vote{display:flex;gap:8px;padding:4px 0;border-top:1px dashed var(--line)}
.vote .s{flex:0 0 108px;color:var(--sub);font-size:11.5px;padding-top:2px}

/* 対策 */
.action{display:flex;gap:14px;padding:13px 0;border-top:1px solid var(--line)}
.action:first-child{border-top:none}
.pri{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:#fff;background:var(--neutral)}
.pri.p1{background:var(--worst)}.pri.p2{background:var(--bad)}.pri.p3{background:var(--good)}
.action .t{font-weight:700;margin-bottom:3px}
.action .c{font-size:11.5px;color:var(--sub)}

table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:8px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#faf8f3;font-size:12.5px;color:var(--sub);font-weight:600}

.pro-only{display:none}
.pro .pro-only{display:block}
.chart9{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;max-width:420px;margin-top:10px;
  font-family:ui-monospace,monospace}
.cell9{border:1px solid var(--line);border-radius:6px;padding:8px;text-align:center;background:#fcfbf8}
.cell9 .p{font-size:10.5px;color:var(--sub)}
.cell9 .m{font-size:17px;font-weight:700;letter-spacing:2px}
.cell9 .b{font-size:11px;color:var(--sub)}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:grid;place-items:center;z-index:100}
[hidden]{display:none!important}
.modalbox{background:#fff;border-radius:12px;padding:22px 26px;max-width:460px;width:90%;max-height:70vh;overflow:auto}
.firstnote{background:#fbf7ec;border:1px solid #ece2c9;border-left:3px solid var(--gold);
  border-radius:9px;padding:14px 18px;margin:0 0 20px;font-size:13.5px;color:#5b5346}
.firstnote>b{display:block;margin-bottom:6px;color:var(--accent);font-size:14px}
.firstnote ol{margin:0 0 10px;padding-left:1.3em}
.firstnote li{margin-bottom:6px}
.modalfoot{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.caseitem{display:flex;justify-content:space-between;align-items:center;gap:8px 10px;flex-wrap:wrap;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.caseitem .acts{display:flex;gap:6px;flex-wrap:wrap}
.printnote{display:inline-block;margin-left:10px;color:var(--sub);font-size:12px;vertical-align:middle}
.advset{margin:14px 0 6px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:#fff}
.advset summary{cursor:pointer;font-size:13.5px}
.advset[open] summary{margin-bottom:6px}
.savedbox{background:#fff;border:2px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.savedbox .hint{display:block;margin:4px 0 6px;color:var(--sub);font-size:12.5px}

/* --- スマホ --- */
@media(max-width:560px){
  body{font-size:14.5px}
  main{padding:14px 12px 70px}
  .topbar{padding:8px 12px;gap:8px;flex-wrap:nowrap}
  .brand{font-size:13px;gap:7px;white-space:nowrap}
  .brand span:last-child{display:none}
  .brand::after{content:"風水鑑定";font-weight:700;letter-spacing:.04em}
  .topactions{gap:6px}
  .topactions button{padding:6px 10px;font-size:12.5px}
  .toggle{font-size:12px}
  .panel{padding:18px 15px}
  .steps{gap:5px}
  .step{padding:5px 11px;font-size:12.5px}
  .schooltabs{top:44px;padding:6px 0;gap:5px}
  .stab{padding:6px 11px;font-size:12.5px}
  .stab em{display:none}
  .rsec{padding:18px 15px}
  .hero h1{font-size:19px}
  .roomgrid{gap:6px}
  .roomcell{padding:6px 7px}
  .roomcell select{font-size:12px;padding:4px 5px}
  th,td{padding:7px 6px}
  table.bd .bl{width:82px;white-space:normal}
  .plancontrols{gap:10px}
  .plancontrols input[type=range]{width:84px}
}

@media print{
  .topbar,.steps,.navbar,.runbar,#formPane,.plancontrols,.modal,.schooltabs,.basisbar,.savebar{display:none!important}
  .dcard,.action,.vote{break-inside:avoid}
  body{background:#fff}
  .rsec{break-inside:avoid;box-shadow:none;border:1px solid #ccc}
  .hero{background:#2b2723!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .dhead{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}