/* WOSP BLOG 裏側テーマ — wospblog.net (SWELL) のDNAを踏襲
   紙: #fdfdfd / 文字: #333 / 見出し: #161616 / 角丸4px / ピル型ボタン
   フォント: M PLUS Rounded 1c（本家と同一）
   アクセントは本家のdeepカラー（赤/橙/緑/青）をTier表示にだけ使用 */
:root{
  --paper:#fdfdfd; --ink:#333; --head:#161616; --muted:#84878a;
  --border:#e8e8e8; --thin:rgba(28,28,28,.05);
  --deep-red:#e44141; --deep-orange:#f09f4d; --deep-green:#63a84d; --deep-blue:#3d79d5;
  --gold:#C9A96E; --black-tier:#161616;
  --radius:4px; --pill:9999px;
  --font:'M PLUS Rounded 1c','Noto Sans JP',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
body{
  font-family:var(--font); background:var(--paper); color:var(--ink);
  line-height:1.8; font-size:15px; -webkit-font-smoothing:antialiased;
}
a{color:var(--ink)}
.wrap{max-width:860px;margin:0 auto;padding:0 20px 80px}

/* ---- header（本家の白ヘッダー＋細ボーダーを踏襲） ---- */
.site-head{
  background:var(--paper); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
}
.site-head .in{
  max-width:860px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:14px;
}
.site-head img{height:26px; width:auto; display:block}
.site-head .area{
  font-size:.68rem; letter-spacing:.18em; color:var(--muted);
  border:1px solid var(--border); border-radius:var(--pill); padding:3px 12px;
}
.site-head .sp{flex:1}
.site-head a.hbtn{
  font-size:.76rem; text-decoration:none; color:var(--ink);
  border:1px solid var(--border); border-radius:var(--pill); padding:6px 16px;
  transition:background .2s;
}
.site-head a.hbtn:hover{background:var(--thin)}

/* ---- section ---- */
section{margin-top:44px}
.sec-title{
  font-size:1.02rem; color:var(--head); font-weight:700; letter-spacing:.04em;
  padding-bottom:10px; border-bottom:1px solid var(--border); margin-bottom:18px;
  display:flex; align-items:baseline; gap:10px;
}
.sec-title small{font-size:.7rem; color:var(--muted); font-weight:400; margin-left:auto}

/* ---- card / list ---- */
.card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:20px}
.muted{color:var(--muted); font-size:.8rem}

/* ---- buttons（本家のピル型） ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font); font-size:.86rem; font-weight:500; cursor:pointer;
  border:none; border-radius:var(--pill); padding:11px 28px;
  background:var(--head); color:#fff; text-decoration:none; transition:opacity .2s;
}
.btn:hover{opacity:.82}
.btn:focus-visible{outline:2px solid var(--deep-blue); outline-offset:2px}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--border)}
.btn.ghost:hover{background:var(--thin); opacity:1}
.btn.gold{background:var(--gold)}
.btn:disabled{opacity:.45; cursor:default}
.btn.small{padding:7px 18px; font-size:.78rem}

/* ---- tier badge ---- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.7rem; font-weight:700; letter-spacing:.12em;
  border-radius:var(--pill); padding:4px 14px;
}
.badge.free{background:var(--thin); color:var(--muted)}
.badge.gold{background:linear-gradient(135deg,#e8d5a3,#C9A96E); color:#4a3a18}
.badge.black{background:var(--black-tier); color:#e8d5a3}

/* ---- form ---- */
input[type=text], textarea, select{
  font-family:var(--font); font-size:.9rem; color:var(--ink);
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:10px 12px; width:100%;
}
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--deep-blue); outline-offset:1px;
}
textarea{resize:vertical; min-height:120px; line-height:1.7}
label{font-size:.78rem; color:var(--muted); display:block; margin-bottom:6px}

/* ---- tier list table ---- */
.tier-tag{
  display:inline-block; min-width:34px; text-align:center;
  font-weight:700; font-size:.78rem; border-radius:var(--radius);
  padding:2px 8px; color:#fff;
}
.tier-S{background:var(--deep-red)} .tier-A{background:var(--deep-orange)}
.tier-B{background:var(--deep-green)} .tier-C{background:var(--deep-blue)}
.tier-D,.tier-E{background:var(--muted)}

table.plain{border-collapse:collapse; width:100%; font-size:.84rem}
table.plain th, table.plain td{
  border-bottom:1px solid var(--border); padding:9px 10px; text-align:left; vertical-align:top;
}
table.plain th{color:var(--muted); font-weight:500; font-size:.72rem; letter-spacing:.06em}

/* ---- toast ---- */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  background:var(--head); color:#fff; font-size:.8rem;
  border-radius:var(--pill); padding:9px 22px; opacity:0; pointer-events:none;
  transition:opacity .25s; z-index:100; max-width:90vw;
}
.toast.on{opacity:1}
.toast.err{background:var(--deep-red)}

footer.site-foot{
  margin-top:70px; padding:26px 20px; border-top:1px solid var(--border);
  text-align:center; font-size:.72rem; color:var(--muted);
}
footer.site-foot a{color:var(--muted)}

@media(max-width:600px){
  body{font-size:14px}
  .site-head .area{display:none}
}