/* =========================================================================
   jiyucho-core.css
   -------------------------------------------------------------------------
   添付の完成版デザインHTML(UI微調整版②.html)の <style> をそのまま移植したもの。
   デザイン・数値は一切変更していない。

   ★ 唯一変更した2箇所(安全のためのスコープ調整。見た目は同じ)
     1. 元の `*{ ... user-select:none; ... }` は全ページに影響するため、
        `.jiyucho-root, .jiyucho-root *` にスコープした。
     2. 元の `body{ background-image:...; display:flex; ... }` は
        サイト全体の<body>を壊してしまうため、このファイルには含めず、
        jiyucho-archive-embed.css 側で `.jiyucho-archive-page` に付け替えた。
     3. `:root{ --kraft-1:... }` も他プラグイン/テーマの変数と衝突しないよう
        `.jiyucho-root` にスコープした(値は無変更)。
   ========================================================================= */

.jiyucho-root{
  --kraft-1:#cdb28c;
  --kraft-2:#b8996f;
  --kraft-3:#8f7350;
  --paper:#faf6ec;
  --paper-edge:#eedebd;
  --paper-back:#e9dfc8;
  --ink:#3c3226;
  --ink-soft:#6b5c47;

  /* UI強調カラー */
  --ui-yellow: #ffe869;
  --ui-yellow-hover: #ffd83d;
  --ui-orange: #ff9326;
  --ui-orange-active: #e67e00;
  --ui-text-dark: #3a2800;
}

.jiyucho-root, .jiyucho-root *{
  box-sizing:border-box;
  margin:0;
  padding:0;
  user-select:none;
  -webkit-user-select:none;
}

.jiyucho-root{
  width:100%;
  max-width:440px;
  margin-left:auto !important;
  margin-right:auto !important;
  font-family:"Noto Sans JP", sans-serif;
  color:var(--ink);
}

/* ---------- ヘッダー(すっきりした角丸丸型座布団) ---------- */
.jiyucho-header{
  display:flex;
  justify-content:center;
  margin-bottom:10px;
}

.jiyucho-title-capsule{
  position: relative;
  background: var(--ui-yellow);
  color: var(--ui-text-dark);
  padding: 10px 32px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.jiyucho-title{
  font-family:"Mochiy Pop P One", sans-serif;
  font-size:1.45rem;
  letter-spacing:.05em;
  line-height: 1.3;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
  /* 背景色(黄色)で文字のフチを軽くくり抜いて線の重なりを解消 */
  -webkit-text-stroke: 1.2px #ffd859;
  paint-order: stroke fill; /* フチを下に回して文字が細くなりすぎるのを防ぐ */
}

/* ルビ(ふりがな)のスタイル */
.jiyucho-root ruby rt {
  font-size: 0.48em;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-4px);
}

/* ---------- 並び順トグル(読む順番: 最新から / 最初から) ---------- */
.jiyucho-order-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 14px;
}
.jiyucho-order-icon{
  font-size:.95rem;
  line-height:1;
}
.jiyucho-order-label{
  font-family:"Klee One", sans-serif;
  font-weight:600;
  font-size:.78rem;
  color:#fffaf0;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
  margin-right:2px;
}
.jiyucho-order-btn{
  border:none;
  cursor:pointer;
  font-family:"Mochiy Pop P One", sans-serif;
  font-size:.76rem;
  color:var(--ui-text-dark);
  background:var(--ui-yellow);
  padding:6px 14px;
  border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  transition:all .15s ease;
}
.jiyucho-order-btn:hover{
  background:var(--ui-yellow-hover);
}
.jiyucho-order-btn.active{
  background:var(--ui-orange);
  color:#ffffff;
  text-shadow:0 1px 2px rgba(0,0,0,0.3);
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.jiyucho-order-btn.active:hover{
  background:var(--ui-orange-active);
}

/* ---------- カテゴリタブ ---------- */
.jiyucho-tabs{
  display:flex;
  gap:6px;
  margin-bottom:16px;
  padding:0 4px;
}
.jiyucho-tab{
  flex:1;
  min-width:0;
  border:none;
  cursor:pointer;
  padding:10px 4px 8px;
  font-family:"Mochiy Pop P One", sans-serif;
  font-size:.88rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--ui-text-dark);
  background:var(--ui-yellow);
  border-radius:12px 12px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.2);
  transform:translateY(3px);
  transition:all .18s ease;
}
.jiyucho-tab:hover{
  background:var(--ui-yellow-hover);
}
.jiyucho-tab .dot{
  width:7px; height:7px; border-radius:50%;
  background:currentColor;
  opacity:.6;
}

.jiyucho-tab.active{
  background:var(--ui-orange);
  color:#ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  transform:translateY(0);
  box-shadow:0 -4px 10px rgba(0,0,0,.25);
}
.jiyucho-tab.active:hover{
  background:var(--ui-orange-active);
}

/* ---------- ステージ ---------- */
.jiyucho-stage{
  display:flex;
  align-items:center;
  gap:8px;
}

.jiyucho-nav-btn{
  flex:0 0 auto;
  width:38px; height:38px;
  border-radius:50%;
  border:2px solid #ffffff;
  background:var(--ui-orange);
  color:#ffffff;
  font-size:1.2rem;
  font-weight:900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,.35);
  transition:transform .12s ease, background .15s ease, opacity .12s ease;
  z-index: 15;
}
.jiyucho-nav-btn:hover{
  background:var(--ui-orange-active);
}
.jiyucho-nav-btn:active{
  transform:scale(.92);
}
.jiyucho-nav-btn:disabled{
  opacity:.3;
  cursor:default;
  background:#aaa;
  border-color:transparent;
}

/* 土台(スケッチブック台紙) */
.jiyucho-stand{
  position:relative;
  flex:1 1 auto;
  background:
    linear-gradient(180deg, var(--kraft-1), var(--kraft-2) 60%, var(--kraft-3));
  border-radius:6px 6px 14px 14px;
  padding:16px 14px 16px;
  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    0 1px 0 rgba(255,255,255,.25) inset;
}

/* 10個の黒ツインリングと四角い穴(SVG) */
.rings-binding-overlay {
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 48px;
  z-index: 20;
  pointer-events: none;
}

.jiyucho-used-pile{
  position:absolute;
  left:16px; right:16px; top:12px;
  height:6px;
  border-radius:3px;
  background:linear-gradient(180deg,#00000018,transparent);
  transform-origin:top;
  transform:scaleY(0);
  transition:transform .4s ease;
  z-index:4;
  pointer-events:none;
}

/* ---------- ページスロット ＆ 紙の束 ---------- */
.jiyucho-page-slot{
  position:relative;
  width:100%;
  aspect-ratio: 1 / 1.32;
  border-radius:3px;
  overflow:visible;
  cursor: pointer;
}

.jiyucho-page-slot::before,
.jiyucho-page-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: var(--paper-edge);
  pointer-events: none;
  z-index: 0;
}
.jiyucho-page-slot::before {
  transform: translate(2px, 3px) rotate(0.2deg);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.12);
  border-right: 1px solid #e2d3b5;
  border-bottom: 1px solid #e2d3b5;
}
.jiyucho-page-slot::after {
  transform: translate(4px, 5px) rotate(-0.1deg);
  box-shadow: 2px 2px 4px rgba(0,0,0,0.18);
  background: #eddcb7;
  border-right: 1px solid #dad0b6;
  border-bottom: 1px solid #dad0b6;
}

.jiyucho-peek-scene{
  position:absolute; inset:0;
  z-index:1;
  border-radius:3px;
  overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
}

.jiyucho-scene{
  position:absolute; inset:0;
  z-index:2;
  perspective:1400px;
}
.jiyucho-scene.is-behind{ z-index:0; }

.jiyucho-page{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform-origin:50% 0px;
  transform:rotateX(0deg);
  will-change:transform;
  border-radius:3px;
}

.jiyucho-face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  border-radius:3px;
  overflow:hidden;
  background:var(--paper);
  box-shadow:
    1px 1px 3px rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.15);
}
.jiyucho-face.back{
  transform:rotateX(180deg);
  background:
    repeating-linear-gradient(0deg, var(--paper-back) 0 26px, #e2d7bd 26px 27px);
}

/* ---------- 画像 ＆ キャプション領域 ----------
   ★ 修正: キャプションが「試作版です。クロッキー帳をめくるように…」で
     切れてしまう問題への対応。
     440px幅(.jiyucho-root)は変更せず、その内側の配分だけを
     画像側→キャプション側へ寄せている。
       - 画像エリア上部の余白: 16px → 8px
       - 画像エリア内側の余白: 8px → 4px
       - キャプションエリアの高さ: 68px(固定・作品番号1行分) →
         172px(作品番号+タイトルの横並びバー ＋ キャプション2〜3行 が
         line-height:2.8のルビ運用でも収まる高さ)
     作品番号とタイトルを横並び1行にまとめたことで、以前(縦積み・190px)
     より少し画像側に余白を戻せている。
     この結果、画像の表示面積は元のデザインよりは小さくなるが、これは
     「440pxは変えず、余白配分を見直して表示領域を確保する」という
     ご指示に沿った意図的な調整。 */
.jiyucho-img-wrap{
  position:absolute;
  top:8px; left:0; right:0;
  bottom:172px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fffdf7;
  overflow:hidden;
  padding:4px;
}
.jiyucho-img-wrap svg, .jiyucho-img-wrap img{
  width:100%; height:100%;
  object-fit:contain;
}

.jiyucho-caption-bar{
  position:absolute;
  left:0; right:0; bottom:0;
  height:172px;
  display:flex;
  flex-direction:column;
  padding:8px 14px 10px;
  gap:6px;
  background:var(--paper);
  border-top:1px dashed #d8c9a5;
  /* 通常運用(2〜3行)では発生しない想定だが、万一収まりきらない
     長文が入力された場合に「見えない切れ方」をしないための保険。
     固定高さの枠内でスクロールできるようにしておく。 */
  overflow-y:auto;
}

/* 作品番号＋タイトルの横並びバー(山吹色の座布団で見出しらしさを出す) */
.jiyucho-title-bar{
  display:flex;
  align-items:flex-start;
  gap:8px;
  background:#ffb833;
  border-radius:6px;
  padding:6px 10px 5px;
  flex:0 0 auto;
}
/* タイトル未入力(titleJp/titleEn未設定)のときは、JS側が
   jiyucho-title-bar--empty クラスを付与する(：hasはブラウザ互換性の
   懸念があるため使用しない)。作品番号だけをプレーン表示に戻す。 */
.jiyucho-title-bar.jiyucho-title-bar--empty{
  background:none;
  padding:0;
}
.jiyucho-work-num{
  font-family:"Zen Kurenaido", sans-serif;
  font-weight:700;
  font-size:.72rem;
  color:#8a5a34;
  margin-right:2px;
  margin-top:.25em; /* タイトル1文字目のベースラインに揃うよう軽く下げる */
  flex:0 0 auto;
  white-space:nowrap;
}
.jiyucho-title-bar--empty .jiyucho-work-num{
  margin-top:0;
}
.jiyucho-title-text{
  font-family:"Mochiy Pop P One", sans-serif;
  font-weight:700;
  font-size:.98rem;
  color:var(--ink);
  line-height:1.5;
  flex:1 1 auto;
  min-width:0;
  /* 「…」省略ではなく、折り返して最後まで読めるようにする。
     タイトルバー自体もこれに合わせて高さが自動で伸びる。 */
  white-space:normal;
  overflow-wrap:break-word;
}
.jiyucho-title-text.lang-ja{
  line-height:1.9; /* ルビ(<rt>)がタイトル上に乗っても座布団からはみ出ないための余白 */
}
.jiyucho-title-text.lang-en{
  line-height:1.4;
}

.jiyucho-caption-text{
  font-family:"Klee One", sans-serif;
  font-size:.82rem;
  color:var(--ink);
  line-height:1.35;
  flex:0 0 auto;
}
/* 追加仕様: 日本語(ルビ表示前提)は行間2.8、英語は通常行間のまま。
   言語ごとにJSがこのクラスを付け替える。
   ※以前あった -webkit-line-clamp:2 / overflow:hidden による
     2行切り捨ては、本文が途中で見えなくなる原因だったため撤廃した。 */
.jiyucho-caption-text.lang-ja{
  line-height:2.8;
}
.jiyucho-caption-text.lang-en{
  line-height:1.35;
}

/* ---------- フッター ---------- */
.jiyucho-footer-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:14px;
  background:var(--ui-yellow);
  padding:6px 18px;
  border-radius:999px;
  box-shadow:0 3px 10px rgba(0,0,0,.3);
}
.jiyucho-counter{
  font-family:"Zen Kurenaido", sans-serif;
  font-size:.85rem;
  font-weight:700;
  color:var(--ui-text-dark);
}
.jiyucho-hint{
  font-size:.72rem;
  font-weight:700;
  color:var(--ui-text-dark);
}

@media (prefers-reduced-motion: reduce){
  .jiyucho-page{ transition:none !important; }
}
