/* CSS_VERSION: 20260720-2 (画像lazy読み込み不具合修正版) */
/* 漫画公開サイトテンプレート 共通スタイル */
:root{
  --paper:#f7f5f0;      /* 生成紙 */
  --card:#ffffff;
  --ink:#1b1b1a;        /* 墨 */
  --sub:#6a675f;
  --line:#d9d4c7;
  --seal:#c8452f;       /* 朱 */
  --seal-soft:#f0d9d2;
  --serif:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --sans:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --mono:"SFMono-Regular",Consolas,Menlo,monospace;
  --maxw:960px;
  --page-maxw:880px;    /* 話ページの画像最大幅 */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);line-height:1.65;
}
body.no-scroll{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------- ヘッダー ---------- */
.site-header{
  border-bottom:2px solid var(--ink);
  padding:clamp(14px,3vw,24px) clamp(16px,4vw,32px);
  display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap;
}
.site-title{margin:0;font-family:var(--serif);font-size:clamp(1.3rem,4vw,1.7rem);
  letter-spacing:.06em;font-weight:700}
.site-title a{text-decoration:none}
.site-title::before{
  content:"";display:inline-block;width:.55em;height:.55em;background:var(--seal);
  margin-right:.5em;transform:translateY(-.05em);
}
.site-header .crumb{color:var(--sub);font-size:.85rem;text-decoration:none}
.site-header .crumb:hover{color:var(--seal)}

main{max-width:var(--maxw);margin:0 auto;padding:clamp(16px,4vw,36px)}

/* ---------- 汎用 ---------- */
.muted{color:var(--sub)}
.sec{
  font-size:.8rem;letter-spacing:.18em;color:var(--sub);
  border-bottom:1px solid var(--line);padding-bottom:6px;margin:34px 0 14px;
  font-weight:700;
}
.loading-box{
  border:1px dashed var(--line);border-radius:6px;background:var(--card);
  color:var(--sub);text-align:center;padding:48px 16px;letter-spacing:.15em;
  font-family:var(--mono);font-size:.85rem;
}
.error{
  border-left:3px solid var(--seal);background:var(--card);
  padding:16px 20px;border-radius:0 6px 6px 0;
}
.error a{color:var(--seal)}

/* ---------- トップ: 作品グリッド ---------- */
.works{
  display:grid;gap:clamp(12px,2.5vw,22px);
  grid-template-columns:repeat(auto-fill,minmax(min(44vw,190px),1fr));
  padding:0;margin:0;
}
.card{
  font:inherit;text-align:left;padding:0;border:1px solid var(--line);
  border-radius:6px;background:var(--card);cursor:pointer;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .15s, transform .15s, box-shadow .15s;
}
.card:hover,.card:focus-visible{
  border-color:var(--seal);transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(27,27,26,.08);
}
.card:focus-visible{outline:2px solid var(--seal);outline-offset:2px}
.thumb{aspect-ratio:3/4;background:var(--paper);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.noimg{color:var(--sub);font-family:var(--mono);font-size:.75rem;letter-spacing:.1em}
.card-title{padding:10px 12px 2px;font-weight:700;font-size:.92rem;line-height:1.4}
.card-author{padding:0 12px 10px;color:var(--sub);font-size:.78rem}
.card-title:last-child{padding-bottom:10px}

/* ---------- モーダル ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(27,27,26,.55);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(8px,3vw,32px);z-index:10;
}
.modal-overlay[hidden]{display:none}
.modal{
  background:var(--card);border-radius:8px;max-width:560px;width:100%;
  max-height:min(86vh,720px);overflow:auto;position:relative;
  padding:clamp(16px,4vw,28px);
  box-shadow:0 18px 50px rgba(27,27,26,.3);
}
.modal-close{
  position:sticky;top:0;float:right;margin-left:8px;
  font:inherit;font-size:1.15rem;line-height:1;border:none;background:none;
  cursor:pointer;color:var(--sub);padding:4px 8px;border-radius:4px;
}
.modal-close:hover{color:var(--seal);background:var(--seal-soft)}
.modal-head{display:flex;gap:16px;margin-bottom:14px}
.modal-thumb{flex:0 0 110px;aspect-ratio:3/4;border:1px solid var(--line);
  border-radius:4px;overflow:hidden;background:var(--paper);
  display:flex;align-items:center;justify-content:center}
.modal-thumb img{width:100%;height:100%;object-fit:cover}
.modal-info h2{margin:0 0 .2em;font-family:var(--serif);font-size:1.2rem;line-height:1.4}
.btn-link{
  display:inline-block;margin-top:10px;text-decoration:none;font-weight:700;
  font-size:.85rem;color:#fff;background:var(--seal);
  padding:.5em 1.1em;border-radius:4px;letter-spacing:.04em;
}
.btn-link:hover{opacity:.88}

/* ---------- 話一覧 ---------- */
.chapters{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.chapters a{
  display:flex;align-items:baseline;gap:12px;text-decoration:none;
  padding:11px 6px;border-bottom:1px solid var(--line);
}
.chapters a:hover{background:var(--seal-soft)}
.ch-no{
  font-family:var(--mono);color:var(--seal);font-weight:700;
  min-width:2.2em;text-align:right;font-size:.9rem;
}
.ch-title{flex:1;font-size:.95rem}
.ch-pages{color:var(--sub);font-family:var(--mono);font-size:.78rem}

/* ---------- 作品詳細 ---------- */
.work-head{display:flex;gap:clamp(16px,4vw,32px);align-items:flex-start;flex-wrap:wrap}
.work-cover{
  flex:0 1 240px;min-width:160px;aspect-ratio:3/4;border:1px solid var(--line);
  border-radius:6px;overflow:hidden;background:var(--card);
  display:flex;align-items:center;justify-content:center;
}
.work-cover img{width:100%;height:100%;object-fit:cover}
.work-info{flex:1 1 300px}
.work-info h1{margin:0 0 .25em;font-family:var(--serif);font-size:clamp(1.4rem,4.5vw,1.9rem);line-height:1.35}
.work-author{color:var(--sub);margin:0 0 1em}
.work-desc{margin:0;font-size:.95rem}

/* ---------- 話ページ ---------- */
.ep-head{max-width:var(--page-maxw);margin:0 auto}
.ep-head .ep-work{color:var(--sub);font-size:.85rem;text-decoration:none}
.ep-head .ep-work:hover{color:var(--seal)}
.ep-head h1{margin:.15em 0 .6em;font-family:var(--serif);font-size:clamp(1.2rem,4vw,1.6rem)}

.ep-nav{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  max-width:var(--page-maxw);margin:14px auto;
}
.nav-btn{
  font-size:.85rem;font-weight:700;text-decoration:none;letter-spacing:.03em;
  border:1px solid var(--ink);border-radius:4px;padding:.5em 1em;background:var(--card);
}
.nav-btn:hover{background:var(--ink);color:var(--paper)}
.nav-btn.prev,.nav-btn.next{border-color:var(--seal);color:var(--seal)}
.nav-btn.prev:hover,.nav-btn.next:hover{background:var(--seal);color:#fff}
.nav-btn.disabled{
  border-color:var(--line);color:var(--line);background:none;pointer-events:none;
}

.pages{max-width:var(--page-maxw);margin:0 auto;padding:0}
.page{
  margin:0 0 6px;position:relative;background:var(--card);
  border:1px solid var(--line);border-radius:2px;
}
.page .ph{
  display:flex;align-items:center;justify-content:center;
  min-height:60vh;color:var(--sub);font-family:var(--mono);
  font-size:.85rem;letter-spacing:.2em;
}
.page img{width:100%;height:auto;opacity:0;transition:opacity .15s ease-out}
.page.loaded .ph{display:none}
.page.loaded img{opacity:1}
.page.failed .ph{min-height:20vh;color:var(--seal)}
.page.failed img{display:none}

/* ---------- フッター ---------- */
.site-footer{
  border-top:1px solid var(--line);margin-top:48px;
  padding:18px clamp(16px,4vw,32px);color:var(--sub);font-size:.78rem;
  text-align:center;
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}