/* よんこま 共通の見た目。スマホが先、900px から PC */
:root{--ac:#ff6b35;--ac2:#e2521d;--ink:#222;--sub:#6b6b6b;--line:#e6e6e6;--bg:#fff;--soft:#fff4ec;--top:52px;--tab:58px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:60px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 "Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,system-ui,sans-serif;padding-top:var(--top);padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom))}
body.lock{overflow:hidden}
a{color:#0b62c4}
img{max-width:100%;height:auto}
h1{font-size:1.4rem;line-height:1.4;margin:.6em 0 .5em}
h2{font-size:1.15rem;line-height:1.4;margin:1.6em 0 .6em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:960px;margin:0 auto;padding:8px 14px 40px}
.lead{color:var(--sub);margin:.2em 0 1em}
.empty{color:var(--sub);text-align:center;padding:40px 10px}
.notice{background:#fff7d6;border:1px solid #f0d77a;border-radius:10px;padding:10px 14px;margin:10px 12px}
.loading{color:var(--sub);text-align:center;padding:24px}
button{font:inherit;color:inherit;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;border:2px solid var(--ac);background:var(--ac);color:#fff;font-weight:700;text-decoration:none;line-height:1.2}
.btn:hover{background:var(--ac2);border-color:var(--ac2)}
.btn.ghost{background:#fff;color:var(--ac2)}
.btn.ghost:hover{background:var(--soft)}
.btn.sm{min-height:36px;padding:0 14px;font-size:.9rem}
.linkbtn{background:none;border:0;padding:6px 4px;color:var(--sub);text-decoration:underline;font-size:.85rem}
:focus-visible{outline:3px solid #1a73e8;outline-offset:2px}

/* 上のバー・下のメニュー（読むときは隠れる） */
.top{position:fixed;top:0;left:0;right:0;height:var(--top);z-index:30;display:flex;align-items:center;gap:10px;padding:0 12px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);transition:transform .25s}
.logo{display:flex;align-items:center;gap:6px;font-weight:800;font-size:1.15rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.gnav{display:none}
.topr{margin-left:auto;display:flex;align-items:center;gap:8px}
.topr .btn{min-height:36px;padding:0 14px;font-size:.9rem}
.topr .post{display:none}
.me img{border-radius:50%;display:block;border:1px solid var(--line)}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;height:calc(var(--tab) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(255,255,255,.97);border-top:1px solid var(--line);transition:transform .25s}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.68rem;color:var(--sub);text-decoration:none;line-height:1.2}
.tabbar b{font-size:1.35rem;line-height:1.1;font-weight:400}
.tabbar a[aria-current]{color:var(--ac2);font-weight:700}
.tabbar .mk b{background:var(--ac);color:#fff;border-radius:10px;width:40px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:700}
body.down .top{transform:translateY(-100%)}
body.down .tabbar{transform:translateY(100%)}
.foot{border-top:1px solid var(--line);padding:20px 14px 30px;text-align:center;color:var(--sub);font-size:.85rem}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center}
.foot a{color:var(--sub)}

/* タブ・チップ */
.ytabs,.chips{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ytabs::-webkit-scrollbar,.chips::-webkit-scrollbar{display:none}
.ytabs a,.chips a{flex:none;padding:6px 14px;border-radius:999px;background:#f3f3f3;color:var(--ink);text-decoration:none;font-size:.92rem;white-space:nowrap;min-height:36px;display:flex;align-items:center}
.ytabs a[aria-current],.chips a[aria-current]{background:var(--ink);color:#fff;font-weight:700}
.wrap .ytabs,.wrap .chips{padding-left:0;padding-right:0}

/* 読む画面 */
.reader{max-width:640px;margin:0 auto}
.comic{position:relative;border-bottom:10px solid #f1f1f1;padding-bottom:6px}
.chead{display:flex;align-items:center;gap:10px;padding:12px 12px 8px}
.chead .av img{border-radius:50%;display:block;border:1px solid var(--line)}
.ct{flex:1;min-width:0}
.ttl{font-size:1.08rem;line-height:1.35;margin:0;font-weight:800}
.ttl a{color:var(--ink);text-decoration:none}
.by{font-size:.82rem;color:var(--sub);text-decoration:none}
.follow{flex:none;min-height:34px;padding:0 14px;border-radius:999px;border:2px solid var(--ac);background:#fff;color:var(--ac2);font-weight:700;font-size:.85rem}
.follow.on{background:#f1f1f1;border-color:#f1f1f1;color:var(--sub)}
.panels{display:flex;flex-direction:column;gap:6px;padding:0 6px}
.panel{margin:0;border:3px solid #222;background:#fff;line-height:0}
.panel img{display:block;width:100%;height:auto}
.panel.tall{border-width:0}
.acts{position:relative;z-index:5;display:flex;justify-content:space-around;align-items:center;background:rgba(255,255,255,.96);border-top:1px solid var(--line);margin-top:6px;transition:bottom .25s}
/* いま読んでいる作品のボタンだけ、画面の下に付いてくる */
.comic.cur .acts{position:sticky;bottom:calc(var(--tab) + env(safe-area-inset-bottom))}
body.down .comic.cur .acts{bottom:0}
.acts button{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;min-height:48px;background:none;border:0;font-size:.82rem;color:#444}
.acts svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.acts .on{color:#e0245e}
.acts [data-act=save].on{color:var(--ac2)}
.acts .on svg{fill:currentColor}
.acts .pop svg{animation:pop .4s}
.acts .dots{flex:.5;font-size:1.4rem}
@keyframes pop{50%{transform:scale(1.45)}}
.cmeta{padding:4px 14px 10px}
.desc{margin:.3em 0;font-size:.95rem}
.tags{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:.4em 0;font-size:.88rem}
.tags a{text-decoration:none}
.tags .cat{background:var(--soft);color:var(--ac2);font-weight:700;padding:2px 10px;border-radius:999px}
.tags .vw{color:var(--sub);margin-left:auto;font-size:.8rem}
.tags.big a{background:#f3f3f3;padding:6px 12px;border-radius:999px;color:var(--ink)}
.lines{font-size:.88rem;color:#444}
.lines summary{cursor:pointer;color:var(--sub);padding:6px 0}
.lines ol{margin:.2em 0;padding:0;list-style:none}
.nexth{padding:0 14px;margin:1em 0 0}
.rel{padding:6px 14px 16px;border-bottom:10px solid #f1f1f1}
.morelink{text-align:right}
#more{padding:26px 14px 60px;text-align:center;color:var(--sub)}
#more .fin{display:none}
#more.end .loading{display:none}
#more.end .fin{display:block}
#more.err .loading::after{content:"（読み込めませんでした。少し待つともう一度ためします）"}

/* 広告の枠：コマに重ねず、作品と作品の間に置く */
.ad{min-height:120px;margin:0;padding:10px 12px 14px;border-bottom:10px solid #f1f1f1;text-align:center;overflow:hidden}
.ad>span{display:block;font-size:.7rem;color:#999;margin-bottom:4px}
.wrap .ad{border:0;margin-top:24px}

/* 一覧 */
.cgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 10px}
.cgrid a{display:block;color:var(--ink);text-decoration:none}
.cgrid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border:2px solid #222;border-radius:4px;background:#f1f1f1}
.cgrid b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.92rem;line-height:1.35;margin-top:5px}
.cgrid span{font-size:.78rem;color:var(--sub)}
.catlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.catlist a{display:flex;flex-direction:column;padding:14px;border:2px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none}
.catlist a:hover{border-color:var(--ac)}
.catlist span{font-size:.8rem;color:var(--sub)}
.crumbs ol{list-style:none;margin:0;padding:8px 12px 0;display:flex;flex-wrap:wrap;font-size:.8rem;color:var(--sub)}
.wrap .crumbs ol{padding-left:0}
.crumbs li+li::before{content:"›";margin:0 6px}
.crumbs a{color:var(--sub)}
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:26px 0}
.pager a,.pager b,.pager span{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0 10px;border-radius:10px;text-decoration:none}
.pager a{border:1px solid var(--line);color:var(--ink)}
.pager b{background:var(--ink);color:#fff}
.search{display:flex;gap:8px;margin:10px 0 16px}
.search input{flex:1;min-width:0;height:48px;border:2px solid var(--line);border-radius:999px;padding:0 18px;font:inherit}
.prof{display:flex;gap:14px;align-items:flex-start;margin:10px 0}
.prof img{border-radius:50%;border:1px solid var(--line);flex:none}
.prof h1{margin:0}
.prof .hd{margin:.2em 0;color:var(--sub);font-size:.88rem}
.prof .bio{margin:.4em 0}
.doc h2{border-left:5px solid var(--ac);padding-left:10px}

/* 下から出るシート */
.ysheet{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center}
.ysheet-box{width:100%;max-width:560px;max-height:82vh;background:#fff;border-radius:18px 18px 0 0;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom);animation:up .2s}
@keyframes up{from{transform:translateY(40px);opacity:.4}}
.ysheet-head{display:flex;align-items:center;justify-content:space-between;padding:12px 8px 8px 18px;border-bottom:1px solid var(--line)}
.ysheet-head .x{width:44px;height:44px;border:0;background:none;font-size:1.6rem;line-height:1}
.ysheet-p{padding:12px 18px;margin:0;color:#444}
.ysheet-btns{display:flex;gap:10px;padding:8px 18px 20px;flex-wrap:wrap}
.ysheet-btns.col{flex-direction:column}
.ysheet-btns .btn{flex:1}
.cm-scroll{overflow-y:auto;flex:1;min-height:120px;padding:4px 16px;text-align:center}
.cm-list{list-style:none;margin:0;padding:0;text-align:left}
.cm-list li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #f1f1f1}
.cm-list img{border-radius:50%;flex:none;width:36px;height:36px}
.cm-list p{margin:0}
.cm-who{font-size:.8rem;color:var(--sub)}
.cm-who a{color:var(--ink);font-weight:700;text-decoration:none}
.cm-body{white-space:pre-wrap;overflow-wrap:anywhere}
.cm-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.cm-form textarea,.rp-form textarea,.rp-form select{flex:1;font:inherit;border:2px solid var(--line);border-radius:12px;padding:8px 12px;min-height:48px;width:100%;background:#fff}
.rp-form{display:flex;flex-direction:column;gap:10px;padding:4px 18px 20px}
#toast{position:fixed;left:50%;bottom:calc(var(--tab) + 70px);transform:translate(-50%,20px);z-index:80;background:rgba(30,30,30,.94);color:#fff;padding:10px 18px;border-radius:999px;font-size:.92rem;opacity:0;pointer-events:none;transition:.2s;max-width:90vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* エディターの画面は下のメニューとフッターを出さない */
body.ed{padding-bottom:0}
body.ed .tabbar,body.ed .foot{display:none}

@media (min-width:900px){
  :root{--top:60px;--tab:0px}
  body{padding-bottom:0}
  .tabbar{display:none}
  body.down .top{transform:none}
  .gnav{display:flex;gap:4px;margin-left:18px}
  .gnav a{padding:8px 14px;border-radius:999px;color:var(--ink);text-decoration:none;font-weight:700;font-size:.95rem}
  .gnav a:hover{background:#f3f3f3}
  .gnav a[aria-current]{background:var(--soft);color:var(--ac2)}
  .topr .post{display:inline-flex}
  h1{font-size:1.7rem}
  .reader{max-width:680px}
  .reader .ytabs{justify-content:center}
  .comic{display:grid;grid-template-columns:minmax(0,1fr) 84px;column-gap:8px;border-bottom:0;margin-bottom:46px;padding-bottom:0}
  .comic>*{grid-column:1}
  .panels{padding:0}
  .chead{padding-left:0;padding-right:0}
  .acts,.comic.cur .acts,body.down .comic.cur .acts{grid-column:2;grid-row:1/span 3;align-self:start;position:sticky;top:calc(50vh - 150px);bottom:auto;flex-direction:column;gap:6px;border:0;background:none;margin:70px 0 0}
  .acts button{flex:none;flex-direction:column;gap:2px;width:68px;height:62px;border-radius:16px;background:#f5f5f5}
  .acts button:hover{background:#ececec}
  .acts .dots{flex:none;height:44px}
  .cmeta{padding-left:0;padding-right:0}
  .cgrid{grid-template-columns:repeat(4,1fr);gap:20px 16px}
  .catlist{grid-template-columns:repeat(5,1fr)}
  .ysheet{align-items:center}
  .ysheet-box{border-radius:18px}
  #toast{bottom:40px}
  .rel{border:0;padding-left:0;padding-right:0}
  .rel .cgrid{grid-template-columns:repeat(3,1fr)}
  .ad{border:0}
}