/* 暗所で長く見る前提の暖色ダーク。ゴシック一本。
   青黒＋ピンク＋角丸の組み合わせが「AIが作った見た目」なので、
   罫線主体・角丸ゼロ・通し番号・抑えた差し色はそのまま残す。
   文字は純白でなく暖かいオフホワイト（夜に目が痛くならない） */
:root{
  color-scheme:dark;
  --bg:#17161a; --panel:#1e1d22;
  --ink:#e7e3db; --sub:#928c84; --line:#32302f;
  --akane:#cf5266;          /* 差し色は罫・価格・ボタンだけ */
  --gothic:"Yu Gothic UI","Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN",
           "Noto Sans JP","Meiryo",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.9 var(--gothic);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block}

.bar{display:flex;align-items:baseline;gap:10px;padding:18px 20px 14px;
  border-bottom:2px solid var(--ink);position:sticky;top:0;background:var(--bg);z-index:5}
.brand{font-size:18px;font-weight:700;letter-spacing:.18em}
.pr{font-size:10px;letter-spacing:.18em;color:var(--sub);border:1px solid var(--line);
  padding:1px 6px}

main{max-width:860px;margin:0 auto;padding:22px 20px 60px}
.lead{color:var(--sub);font-size:13px;margin:0 0 22px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}

h1{font-size:20px;font-weight:700;line-height:1.7;margin:6px 0 8px;letter-spacing:.02em}
h2{font-size:13px;font-weight:700;letter-spacing:.16em;
  margin:34px 0 14px;padding-bottom:7px;border-bottom:1px solid var(--ink)}
h3{font-size:15px;font-weight:700;margin:24px 0 8px}
.sub{color:var(--sub);font-size:12.5px;margin:0}

/* ジャンルは丸いタグにしない。下線のテキストリンク */
.tags{font-size:12.5px;color:var(--sub);line-height:2.2;margin:0 0 26px}
.tag{border-bottom:1px solid var(--line);white-space:nowrap;display:inline-block}
.tag:hover{border-bottom-color:var(--akane);color:var(--akane)}
.tags .tag+.tag{margin-left:9px}

/* 作品は罫線で区切るだけ。カードの箱を描かない */
.grid{border-top:1px solid var(--line);counter-reset:rank}
.card{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:16px 2px;
  border-bottom:1px solid var(--line);align-items:start;counter-increment:rank}
.card:hover .t{color:var(--akane)}
.card img{width:96px;height:134px;object-fit:cover;background:var(--panel);
  border:1px solid var(--line)}
.meta{min-width:0}
.meta::before{content:counter(rank,decimal-leading-zero);
  font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--sub);
  display:block;margin-bottom:3px}
.t{font-weight:700;font-size:15px;line-height:1.65;margin:0 0 7px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.meta .sub{display:flex;gap:10px;align-items:baseline}
.price{color:var(--akane);font-weight:700;font-size:14px;margin:5px 0 0}

/* 作品ページ */
.work h1{font-size:19px;margin-bottom:10px}
.buy{display:block;text-align:center;font-weight:700;font-size:15px;letter-spacing:.1em;
  padding:15px;margin:24px 0;background:var(--akane);color:#fff;
  border:1px solid var(--akane)}
.buy:hover{background:#b23f51;border-color:#b23f51}
.shots{border-top:1px solid var(--line);padding-top:14px}
.shots img{width:100%;max-width:560px;margin:0 auto 12px;border:1px solid var(--line)}
.note{color:var(--sub);font-size:11.5px;line-height:1.8}

/* 読みもの */
.arts{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.arts li{padding:13px 2px;border-bottom:1px solid var(--line)}
.arts a{font-weight:700;font-size:14.5px}
.arts a:hover{color:var(--akane)}
.arts .sub{display:block;margin-top:3px}
.prose p{margin:0 0 1.5em}
.prose li{margin:0 0 .5em}
.prose ul{padding-left:1.3em}

footer{max-width:860px;margin:0 auto;padding:22px 20px 60px;color:var(--sub);
  font-size:11.5px;line-height:1.9;border-top:1px solid var(--line)}
footer a{border-bottom:1px solid var(--line)}
.credit{margin:14px 0}
.credit img{max-width:180px;height:auto}

/* 年齢確認 */
#gate{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;
  justify-content:center;padding:24px;z-index:9}
#gate>div{max-width:330px;text-align:center;border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);padding:30px 0}
.g-title{font-weight:700;font-size:15px;letter-spacing:.06em;margin:0 0 6px}
.g-sub{color:var(--sub);font-size:12.5px;margin:0 0 8px}
button{font:inherit;font-weight:700;letter-spacing:.08em;padding:11px 20px;
  margin:10px 5px 0;border:1px solid var(--ink);cursor:pointer}
.yes{background:var(--ink);color:var(--bg)}
.no{background:transparent;color:var(--sub);border-color:var(--line)}

@media(max-width:560px){
  main,footer{padding-left:16px;padding-right:16px}
  .card{grid-template-columns:78px 1fr;gap:13px}
  .card img{width:78px;height:110px}
  .t{font-size:14.5px}
}