/* こわいはなし — 旧Windows アプリUI 風スタイル（依存ゼロ・自前記述） */
:root{
  --face:#c0c0c0;
  --face-light:#dfdfdf;
  --hilite:#ffffff;
  --shadow:#808080;
  --dark:#000000;
  --title-a1:#000080;
  --title-a2:#1a4fa0;
  --title-i1:#7f7f7f;
  --title-i2:#a8a8a8;
  --title-text:#ffffff;
  --desktop:#0b3b3f;
  --paper:#ffffff;
  --ink:#111111;
  --link:#00007a;
  --link-visited:#4b0082;
  --ui-font:"MS Sans Serif","MS PGothic","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,system-ui,sans-serif;
  --read-font:"Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--desktop);
  color:var(--ink);
  font-family:var(--ui-font);
  font-size:15px;
  line-height:1.7;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;}

.wrap{width:100%;max-width:840px;margin:0 auto;padding:0 12px;}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--face);color:var(--ink);
  padding:8px 12px;z-index:100;
}
.skip-link:focus{left:8px;top:8px;}

/* --- ベベル（旧UIの立体枠）--------------------------------------------- */
.window,.btn,.menubar,.tb-btn{
  border-style:solid;
  border-width:2px;
  border-color:var(--hilite) var(--shadow) var(--shadow) var(--hilite);
  background:var(--face);
}
.window{
  margin:16px 0;
  padding:3px;
  box-shadow:1px 1px 0 var(--dark);
}
.window-body{
  background:var(--face);
  padding:12px;
}

/* --- タイトルバー ------------------------------------------------------- */
.titlebar{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(90deg,var(--title-a1),var(--title-a2));
  color:var(--title-text);
  padding:4px 6px;
  font-weight:700;
  font-size:14px;
  min-width:0;
}
.titlebar--inactive{background:linear-gradient(90deg,var(--title-i1),var(--title-i2));}
.titlebar-text{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.titlebar-buttons{display:flex;gap:2px;flex:0 0 auto;}
.tb-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:18px;color:var(--ink);font-size:11px;line-height:1;
  border-width:2px;
}
.titlebar--brand{margin-top:12px;}
.brand-link{color:var(--title-text);text-decoration:none;}
.brand-link:hover{text-decoration:underline;}

/* --- メニューバー（グローバルナビ）-------------------------------------- */
.menubar{
  display:flex;flex-wrap:wrap;gap:2px;
  padding:3px;
  border-top-width:0;
}
.menu-item{
  display:inline-block;
  padding:5px 10px;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
  border:2px solid transparent;
}
.menu-item:hover,.menu-item:focus-visible{
  border-color:var(--hilite) var(--shadow) var(--shadow) var(--hilite);
}
.menu-item.is-active{
  background:var(--title-a1);color:var(--title-text);
}

/* --- ボタン ------------------------------------------------------------- */
.btn{
  display:inline-block;
  padding:6px 12px;
  margin:4px 6px 4px 0;
  color:var(--ink);
  text-decoration:none;
  font-size:14px;
  cursor:pointer;
}
.btn:hover{background:var(--face-light);}
.btn:active,.btn.is-current{
  border-color:var(--shadow) var(--hilite) var(--hilite) var(--shadow);
  background:var(--face-light);
}
.btn-primary{font-weight:700;box-shadow:0 0 0 1px var(--dark);}
.actions{margin:14px 0 0;}

/* --- テキスト ----------------------------------------------------------- */
a{color:var(--link);}
a:visited{color:var(--link-visited);}
h1,h2,h3{line-height:1.4;margin:0 0 10px;}
h1{font-size:22px;}
h2{font-size:17px;margin-top:20px;border-bottom:1px solid var(--shadow);padding-bottom:4px;}
h3{font-size:16px;}
p{margin:0 0 12px;}
.lead{font-size:16px;font-weight:700;}
.muted{color:#3a3a3a;}
.empty{
  background:var(--paper);border:2px inset var(--shadow);
  padding:12px;margin:0;
}

/* --- 本文（可読性優先。枠は"らしさ"、中身は読みやすさ）------------------ */
.prose{
  background:var(--paper);
  color:var(--ink);
  border-style:solid;border-width:2px;
  border-color:var(--shadow) var(--hilite) var(--hilite) var(--shadow);
  padding:20px 18px;
  margin:16px 0;
  font-family:var(--read-font);
  font-size:17px;
  line-height:2.0;
}
.prose p{margin:0 0 1.4em;}
.prose p:last-child{margin-bottom:0;}
.story-title{font-family:var(--read-font);font-size:24px;}
.story-meta{font-size:13px;color:#333;margin-bottom:8px;}
.disclaimer{font-size:12px;color:#333;margin:12px 0 0;}
.story-nav{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 16px;}
.story-nav .btn{margin:0;}

/* --- 一覧 --------------------------------------------------------------- */
.story-list{list-style:none;margin:0;padding:0;}
.story-card{
  background:var(--paper);
  border-style:solid;border-width:2px;
  border-color:var(--shadow) var(--hilite) var(--hilite) var(--shadow);
  padding:12px;margin:0 0 10px;
}
.story-card-meta{font-size:12px;color:#333;margin:0 0 4px;}
.story-card-title{font-size:17px;margin:0 0 6px;font-family:var(--read-font);}
.story-card-title a{text-decoration:none;}
.story-card-title a:hover{text-decoration:underline;}
.story-card-summary{margin:0 0 8px;font-size:14px;}
.link-list{margin:0;padding:0 0 0 20px;}
.link-list li{margin:0 0 6px;}

/* --- タグ --------------------------------------------------------------- */
.tag-list{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;}
.tag{
  display:inline-block;
  padding:2px 8px;
  font-size:13px;
  color:var(--ink);
  text-decoration:none;
  background:var(--face);
  border-style:solid;border-width:2px;
  border-color:var(--hilite) var(--shadow) var(--shadow) var(--hilite);
}
.tag:visited{color:var(--ink);}
.tag:hover{background:var(--face-light);}

/* --- パンくず / ページャ ------------------------------------------------ */
.breadcrumb{margin:12px 0 0;font-size:13px;color:#e8e8e8;}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;}
.breadcrumb li+li::before{content:"\003E";margin-right:6px;color:#bdbdbd;}
.breadcrumb a{color:#ffffff;}
.pager{display:flex;flex-wrap:wrap;gap:4px;margin:14px 0 0;}
.pager .btn{margin:0;min-width:36px;text-align:center;}
.pager-gap{padding:6px 4px;}

/* --- ダイアログ（404）--------------------------------------------------- */
.dialog-row{display:flex;gap:14px;align-items:flex-start;}
.dialog-icon{
  flex:0 0 auto;
  width:36px;height:36px;line-height:32px;text-align:center;
  font-size:22px;font-weight:700;color:#ffffff;background:#a80000;
  border-radius:50%;margin:0;
}
.dialog-text{font-weight:700;margin:0 0 6px;}

/* --- フッタ ------------------------------------------------------------- */
.site-footer{margin:24px 0 32px;}
.footer-nav{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0 0 12px;font-size:13px;}
.footer-heading{font-weight:700;margin:0 0 6px;font-size:13px;}
.footer-desc{margin:0 0 10px;}
.footer-note{font-size:12px;color:#333;margin:8px 0 6px;}
.copyright{font-size:12px;color:#333;margin:0;}
.contact-mail{font-size:16px;font-weight:700;}

/* --- フォーカス可視（旧UIの点線フォーカス）------------------------------ */
:focus-visible{outline:2px dotted var(--dark);outline-offset:1px;}
.menu-item:focus-visible,.brand-link:focus-visible{outline-color:var(--hilite);}

/* --- モバイル（375px で横スクロールを出さない）-------------------------- */
@media (max-width:480px){
  body{font-size:15px;}
  .wrap{padding:0 8px;}
  .menubar{gap:1px;padding:2px;}
  .menu-item{padding:6px 8px;font-size:13px;}
  .window-body{padding:10px;}
  .prose{padding:16px 12px;font-size:16px;line-height:1.95;}
  .story-title{font-size:20px;}
  h1{font-size:19px;}
  .btn{padding:7px 10px;}
  .story-nav .btn{flex:1 1 auto;text-align:center;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
}