:root{
  --paper:#f7f3ea; --ink:#2e2a25; --muted:#746b60; --line:#ddd4c5;
  --blue:#365f73; --deep:#1e3038; --pale:#e9f0f2; --accent:#8b5e3c;
  --shadow:0 18px 50px rgba(49,38,24,.12);
}
*{box-sizing:border-box}
body{
  margin:0;
  background:linear-gradient(180deg,#fbf8f1 0%,#f4efe4 42%,#eee6d8 100%);
  color:var(--ink);
  font-family: "Hiragino Mincho ProN","Yu Mincho","YuMincho","Times New Roman",serif;
  line-height:1.85;
}
a{color:var(--deep); text-decoration-thickness:1px; text-underline-offset:4px}
.sitebar{
  position:sticky; top:0; z-index:10;
  background:rgba(247,243,234,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  max-width:1120px; margin:auto; display:flex; align-items:center; gap:22px;
  padding:14px 22px;
}
.brand{font-size:18px; letter-spacing:.12em; font-weight:700; text-decoration:none; color:var(--ink)}
.navlinks{margin-left:auto; display:flex; gap:14px; flex-wrap:wrap; font-size:13px}
.navlinks a{color:var(--muted); text-decoration:none}
.hero{
  max-width:1120px; margin:0 auto; padding:64px 22px 42px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:end;
}
.hero h1{font-size:clamp(36px,6vw,76px); line-height:1.05; margin:0 0 16px; letter-spacing:.08em}
.hero p{font-size:16px; color:var(--muted); max-width:620px}
.searchbox{
  background:#fffaf1; border:1px solid var(--line); box-shadow:var(--shadow); padding:22px; border-radius:22px;
}
.searchbox label{font-size:13px; color:var(--muted); display:block; margin-bottom:8px}
.searchrow{display:flex; gap:10px}
input,button{
  font:inherit; border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:white;
}
input{width:100%}
button{background:var(--deep); color:white; cursor:pointer; border-color:var(--deep)}
button.ghost{background:transparent; color:var(--deep)}
.container{max-width:1120px; margin:0 auto; padding:20px 22px 80px}
.grid{display:grid; grid-template-columns:2fr 1fr; gap:28px; align-items:start}
.card{
  background:#fffaf1; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); padding:26px;
}
.card h2,.card h3{margin-top:0}
.entries{display:grid; gap:14px}
.entry{
  display:block; background:rgba(255,255,255,.55); border:1px solid var(--line); border-radius:18px; padding:18px 20px; text-decoration:none; color:var(--ink);
}
.entry:hover{border-color:#b8aa96; transform:translateY(-1px)}
.entry small,.meta{color:var(--muted); font-size:13px}
.chiplist{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  display:inline-block; border:1px solid var(--line); background:#fbf8f1; color:var(--deep); border-radius:999px;
  padding:5px 10px; font-size:13px; text-decoration:none;
}
.article{
  max-width:820px; margin:38px auto 90px; background:#fffaf1; border:1px solid var(--line);
  border-radius:26px; box-shadow:var(--shadow); padding:clamp(24px,5vw,54px);
}
.article h1{font-size:clamp(30px,5vw,54px); line-height:1.18; margin:8px 0 20px}
.article-body{font-size:17px}
.article-body p{margin:1.1em 0}
.notice{
  border-left:4px solid var(--blue); padding:14px 18px; background:var(--pale); color:#233840; border-radius:10px;
}
.sideblock{position:sticky; top:76px}
.progressbar{height:10px; background:#eee3d2; border-radius:999px; overflow:hidden}
.progressbar span{display:block; height:100%; background:linear-gradient(90deg,var(--blue),#9fb7bd); width:0%}
.footer{
  border-top:1px solid var(--line); padding:34px 22px; color:var(--muted); text-align:center; font-size:13px;
}
.formpanel{
  display:grid; gap:14px; max-width:680px;
}
.kv{display:grid; grid-template-columns:140px 1fr; gap:10px; border-bottom:1px solid var(--line); padding:9px 0}
.tools{display:grid; gap:10px}
.tool{display:none; padding:13px 14px; border-radius:14px; background:#f1ece2; border:1px solid var(--line); color:var(--deep); font-size:14px}
.tool.on{display:block}
.result-page{
  min-height:100vh; display:grid; place-items:center; padding:40px 22px;
  background:linear-gradient(180deg,#f9f5ec,#ebe2d3);
}
.ending{
  max-width:780px; background:#fffaf1; border:1px solid var(--line); border-radius:26px; padding:48px; box-shadow:var(--shadow);
}
.ending h1{font-size:42px}
@media(max-width:800px){
  .hero,.grid{grid-template-columns:1fr}
  .nav{align-items:flex-start; flex-direction:column}
  .navlinks{margin-left:0}
  .sideblock{position:static}
}