/* css/genko-reader.css
   作品閲覧ページ（works.html / work.html）用の原稿用紙グリッド見た目。
   index.html の <style> 内にある同名クラス（.sheet/.frame/.pad/.col/.cel/.rubystrip/.bouten/
   .hanshin/.gyobi/.gbar）の見た目定義を一字一句転記したもの。index.html 自体は変更していない。
   （js/genko-engine.js が出力するHTMLは index.html の gridInnerHtml() と同一構造なので、
     このCSSも同一のものを流用できる） */

:root{
  --paper: #fffcf3;
  --ink: #17140f;
  --rule: #ddab86;
  --rule-dot: #ecc9ac;
  --frame: #c4703f;
  --cell: 30px;
  --gut: 11px;
}

.reader-stage{
  background:#211f1d; padding:24px 16px; display:flex; justify-content:center;
  overflow-x:auto;
}
.sheet{
  position:relative; background:var(--paper); color:var(--ink);
  box-shadow:0 3px 18px rgba(0,0,0,.45);
  font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho","ＭＳ 明朝","MS Mincho",serif;
  flex:0 0 auto;
}
.frame{position:absolute; border:1.4px solid var(--frame)}
.frame::before{
  content:""; position:absolute; inset:3px; border:.7px solid var(--frame); opacity:.75;
}
.sheet .pad{position:absolute; overflow:visible}

.hanshin{position:absolute; top:0}
.gyobi{
  position:absolute; left:50%; transform:translateX(-50%);
  background:var(--frame);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 55%,0 100%);
}
.gbar{position:absolute; left:50%; transform:translateX(-50%); background:var(--frame)}

.col{
  position:absolute; top:0; box-shadow:0 0 0 1px var(--rule);
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(var(--cell) - 1px),
      var(--rule) calc(var(--cell) - 1px), var(--rule) var(--cell)),
    repeating-linear-gradient(to bottom,
      var(--rule-dot) 0, var(--rule-dot) 2.5px, transparent 2.5px, transparent 6px);
  background-size:100% 100%, 1px 100%;
  background-position:0 0, 50% 0;
  background-repeat:repeat, repeat-y;
}
.cel{
  position:absolute; width:var(--cell); height:var(--cell);
  writing-mode:vertical-rl; text-orientation:mixed;
  font-size:calc(var(--cell) * 0.88); line-height:var(--cell);
  text-align:center; white-space:pre; z-index:3;
}
.cel.tcy{text-combine-upright:all; font-size:calc(var(--cell)*0.8)}
.cel.mergeA,.cel.mergeB{z-index:3}
.cel.hang{opacity:.95}
.rubystrip{position:absolute; pointer-events:none; z-index:4}
.rubystrip span{
  position:absolute; display:block; writing-mode:vertical-rl; text-orientation:mixed;
  text-align:center; color:#241d15;
  font-family:"Hiragino Mincho ProN","Yu Mincho","ＭＳ 明朝",serif;
}
.bouten{position:absolute; pointer-events:none; z-index:4}
.bouten i{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--ink); border-radius:50%;
}

/* ページ送りUI */
.reader-nav{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  padding:1rem 0; flex-wrap:wrap;
}
.reader-pageinfo{ color:var(--text-sub); font-size:0.9rem; }

@media (max-width: 640px){
  :root{ --cell: 22px; --gut: 8px; }
}