:root{
  --bg:#faf8f5; --card:#ffffff; --ink:#2c2a28; --sub:#6b6660;
  --line:#ece7e0; --accent:#b08968; --accent-deep:#8a6748;
  --keiji:#c45b6b; --keiji-bg:#fdeef0;
  --buji:#5a6b7a; --buji-bg:#eef1f4;
  --shadow:0 6px 24px rgba(60,45,30,.08);
}
*{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;
  line-height:1.7; -webkit-text-size-adjust:100%;
}
.wrap{max-width:640px; margin:0 auto; padding:24px 18px 64px}

/* site nav */
.brand{font-size:.8rem; color:var(--sub); font-weight:700; letter-spacing:.05em; margin-bottom:10px}
.brand a{color:var(--sub); text-decoration:none}
.sitenav{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px}
.sitenav a{
  font-size:.82rem; font-weight:600; text-decoration:none; color:var(--accent-deep);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 14px;
}
.sitenav a.active{background:var(--accent); color:#fff; border-color:var(--accent)}

header h1{font-size:1.35rem; margin:.2em 0 .15em; letter-spacing:.02em}
header p.lead{color:var(--sub); font-size:.92rem; margin:.2em 0 1.4em}

.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow); padding:20px 18px; margin-bottom:18px;
}
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
label.lbl{display:block; font-size:.82rem; color:var(--sub); margin-bottom:6px; font-weight:600}
select, input.amt-input{
  width:100%; padding:13px 14px; font-size:1rem; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:11px;
}
select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b08968' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center;
}
select:focus, input.amt-input:focus{outline:none; border-color:var(--accent)}
input.amt-input{font-size:1.2rem; font-weight:700; letter-spacing:.02em}

/* buttons */
.btn{
  display:inline-block; border:none; cursor:pointer; font-weight:700; font-size:.9rem;
  padding:11px 20px; border-radius:11px; background:var(--accent); color:#fff;
}
.btn:hover{background:var(--accent-deep)}
.btn:disabled{background:#d8cfc4; cursor:default}
.quick{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.quick button{
  font-size:.82rem; font-weight:600; cursor:pointer; padding:7px 12px; border-radius:999px;
  background:#fbf7f1; border:1px solid var(--line); color:var(--accent-deep);
}
.quick button:hover{background:var(--keiji-bg)}

/* result (相場tool) */
#result{display:none}
#result.show{display:block; animation:fade .25s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.badge{
  display:inline-block; font-size:.74rem; font-weight:700; padding:3px 11px;
  border-radius:999px; margin-bottom:12px;
}
.badge.keiji{background:var(--keiji-bg); color:var(--keiji)}
.badge.buji{background:var(--buji-bg); color:var(--buji)}
.amount-box{text-align:center; padding:6px 0 14px; border-bottom:1px dashed var(--line); margin-bottom:16px}
.amount-box .cap{font-size:.8rem; color:var(--sub)}
.amount-box .amt{font-size:2.5rem; font-weight:800; letter-spacing:.01em; margin:.1em 0; color:var(--accent-deep)}
.amount-box .hint{font-size:.82rem; color:var(--sub)}

dl.spec{margin:0; display:grid; grid-template-columns:auto 1fr; gap:0}
dl.spec dt{
  font-size:.82rem; color:var(--sub); font-weight:600; padding:11px 14px 11px 0;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
dl.spec dd{
  margin:0; padding:11px 0; border-bottom:1px solid var(--line); font-size:.95rem;
}
dl.spec .pill{
  display:inline-block; font-size:.78rem; padding:2px 9px; border-radius:7px;
  background:var(--keiji-bg); color:var(--keiji); font-weight:700; margin-left:2px;
}
dl.spec .pill.no{background:#f0eeec; color:var(--sub)}

.tip{
  margin-top:16px; background:#fbf7f1; border-left:3px solid var(--accent);
  border-radius:8px; padding:11px 14px; font-size:.86rem; color:#5e524a;
}
.tip b{color:var(--accent-deep)}

.empty{color:var(--sub); font-size:.92rem; text-align:center; padding:18px 6px}

/* daiji result */
.daiji-result{text-align:center; padding:6px 0 4px}
.daiji-result .label{font-size:.8rem; color:var(--sub)}
.daiji-result .value{
  font-size:2rem; font-weight:800; color:var(--accent-deep); margin:.15em 0;
  letter-spacing:.06em; word-break:break-all; min-height:1.4em;
}
.daiji-result .reading{font-size:.85rem; color:var(--sub); min-height:1.2em}
.copy-row{display:flex; justify-content:center; gap:12px; margin-top:16px; align-items:center}
.copy-msg{font-size:.82rem; color:var(--accent); font-weight:700; opacity:0; transition:opacity .2s}
.copy-msg.show{opacity:1}

footer{margin-top:8px; font-size:.78rem; color:var(--sub); line-height:1.6}
footer .disc{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px}
footer .disc a{color:var(--accent-deep)}
h2.sec{font-size:.95rem; margin:28px 0 10px; color:var(--accent-deep)}

/* article / guide */
article h2{font-size:1.12rem; margin:32px 0 10px; color:var(--accent-deep); border-bottom:2px solid var(--keiji-bg); padding-bottom:7px}
article h2:first-child{margin-top:4px}
article h3{font-size:.98rem; margin:20px 0 4px; color:var(--ink)}
article p{margin:.5em 0; font-size:.95rem}
article ul, article ol{margin:.4em 0; padding-left:1.4em; font-size:.95rem}
article li{margin:.32em 0}
article b{color:var(--accent-deep)}
.gtable{width:100%; border-collapse:collapse; margin:12px 0; font-size:.9rem}
.gtable th, .gtable td{border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top}
.gtable th{background:#fbf7f1; color:var(--accent-deep); font-weight:700; white-space:nowrap}
.toc{background:#fbf7f1; border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin-bottom:6px}
.toc .toc-ttl{font-size:.82rem; font-weight:700; color:var(--accent-deep); margin-bottom:6px}
.toc ol{margin:0; padding-left:1.3em; font-size:.9rem}
.toc li{margin:.25em 0}
.toc a{color:var(--accent-deep); text-decoration:none}
.toc a:hover{text-decoration:underline}
.callout{background:#fff; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:8px; padding:11px 14px; font-size:.9rem; margin:14px 0; color:#5e524a}
.callout b{color:var(--accent-deep)}
.tool-links{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 0}
.tool-links a{font-size:.85rem; font-weight:600; text-decoration:none; color:#fff; background:var(--accent); border-radius:10px; padding:9px 14px}
.tool-links a:hover{background:var(--accent-deep)}