/* 二十年目のタイムカプセル：本番スタイル。
   design/preview/preview.css（12〜13章の改訂版の見本）を土台に、
   実装で必要な状態（判定中・通信エラー）、拡大ビューア、いちらん表の固定列、
   連絡ボードの一覧、案内の帯、スクロール案内などを追加している。
   媒体ごとに CSS変数・書体・余白を別々に持つ（design-guide.md 12章の方針）。
   共通なのはゲームの枠（.g-*）と、リセットの数行だけ。 */

/* ===== 共通の最低限（リセット） ===== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; color-scheme:light; height:100%}
body{margin:0; min-height:100%; font-size:1rem; line-break:strict; overflow-wrap:anywhere;
  color-scheme:light; background:#fff; color:#111;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Yu Gothic","Meiryo",sans-serif;}
/* 媒体ごとの地色・文字色・書体は body[data-medium=...] で切り替える（design-guide 1-3・7章 C-1）。
   JS（app.js）は body.dataset.medium を frame/site/board/inbox/bunshu に設定するだけで、
   クラスは付与しないため、CSS側はクラスではなく data-medium 属性セレクタで対応させている。 */
img,svg{max-width:100%; height:auto; display:block}
button{font-family:inherit}
:focus-visible{outline:3px solid #ffb000; outline-offset:2px}
.visually-hidden{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.has-tabbar{padding-bottom:calc(60px + env(safe-area-inset-bottom) + 20px)}
.env-badge{position:fixed; top:4px; left:4px; background:#333; color:#fff; font-size:11px; padding:2px 6px; border-radius:4px; z-index:99; opacity:.7}

/* ===================================================================
   ゲームの枠（全媒体共通。design-guide 5章・12-2）
   =================================================================== */
:root{
  --ui-ink:#22304a; --ui-primary:#2d5f9a; --ui-primary-hover:#244d7e;
  --ui-bg:#f3f5f9; --ui-panel:#ffffff; --ui-soft:#e8eef7; --ui-line:#b8c4d6;
  --ui-sub:#56617a; --ui-tab-text:#c9d3e3; --ui-tab-active:#ffd36b;
  --ui-ng:#a33a2c; --ui-ng-bg:#fdf0ee; --ui-focus:#ffb000;
}

.g-tabbar{position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--ui-ink); padding-bottom:env(safe-area-inset-bottom)}
.g-tabbar ul{display:flex; max-width:640px; margin:0 auto; padding:0; list-style:none}
.g-tabbar li{flex:1; min-width:0; position:relative}
/* タブの文字がすき間なく並ぶと隣とくっついて1語に見えるため、タブどうしの間に縦の区切り線を入れる。 */
.g-tabbar li + li::before{content:""; position:absolute; left:0; top:14px; bottom:14px; width:1px; background:rgba(255,255,255,.16)}
.g-tabbar button,.g-tabbar a{display:flex; width:100%; align-items:center; justify-content:center; gap:4px; height:60px; padding:0 2px; color:var(--ui-tab-text);
  text-decoration:none; background:none; border:0; cursor:pointer; text-align:center;
  font:700 12px/1.3 "Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; white-space:nowrap; letter-spacing:-.01em}
.g-tabbar button[aria-current="page"],.g-tabbar a[aria-current="page"]{color:#fff}
.g-tabbar button[aria-current="page"] span:first-child,.g-tabbar a[aria-current="page"] span:first-child{box-shadow:0 3px 0 var(--ui-tab-active); padding-bottom:3px}
.g-count{display:inline-block; min-width:18px; padding:0 4px; border-radius:3px; background:#fff; color:var(--ui-ink); font-size:11px; line-height:17px; text-align:center}

.g-panel{position:relative; margin:30px 0 18px; padding:18px 16px 16px; background:var(--ui-panel); border:2px solid var(--ui-ink); border-radius:10px;
  color:var(--ui-ink); font:16px/1.6 "Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}
.g-panel__tag{position:absolute; top:-12px; left:12px; padding:0 8px; background:var(--ui-ink); color:#fff; border-radius:5px; font-size:12px; font-weight:700; line-height:22px}
.g-panel label{display:block; font-size:15px; font-weight:700; margin-bottom:8px}
.g-panel label small{font-size:13px; font-weight:400; color:var(--ui-sub)}
.g-row{display:flex; flex-wrap:wrap; gap:8px}
.g-input{flex:1 1 11em; min-width:0; height:48px; padding:0 12px; font-size:18px; font-family:inherit; border:2px solid var(--ui-line); border-radius:8px; color:#111; background:#fff}
.g-input:focus{border-color:var(--ui-primary); outline:3px solid var(--ui-focus); outline-offset:1px}
.g-btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px; border:0; border-radius:10px; background:var(--ui-primary); color:#fff;
  font:700 16px/1 "Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif; cursor:pointer; text-decoration:none}
.g-btn:hover{background:var(--ui-primary-hover)}
.g-btn:disabled{opacity:.6; cursor:default}
.g-btn--sub{min-height:44px; background:#fff; color:var(--ui-ink); border:2px solid var(--ui-ink); font-size:15px}
.g-btn--block{display:flex; width:100%}
.g-msg{margin:10px 0 0}
.g-msg:empty{display:none}
.g-panel[data-state="wrong"] .g-msg,.g-panel[data-state="error"] .g-msg{display:flex; gap:8px; align-items:flex-start; padding:9px 12px; border-radius:6px}
.g-panel[data-state="wrong"] .g-msg{background:var(--ui-ng-bg); color:var(--ui-ng)}
.g-panel[data-state="error"] .g-msg{background:var(--ui-soft); color:var(--ui-sub)}
.g-panel[data-state="checking"] .g-msg{display:flex; gap:8px; align-items:center; color:var(--ui-sub)}
.g-msg .ic{flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:currentColor; font-size:13px; font-weight:700; line-height:20px; text-align:center}
.g-panel[data-state="wrong"] .g-msg .ic,.g-panel[data-state="error"] .g-msg .ic{color:#fff}
.g-panel[data-state="wrong"] .g-msg .ic{background:var(--ui-ng)}
.g-panel[data-state="error"] .g-msg .ic{background:var(--ui-sub)}
.g-spin{display:inline-block; width:16px; height:16px; border:2px solid var(--ui-line); border-top-color:var(--ui-sub); border-radius:50%; animation:g-spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){.g-spin{animation:none}}
@keyframes g-spin{to{transform:rotate(360deg)}}
.g-msg-more{margin:8px 0 0; font-size:13px; color:var(--ui-sub)}
.g-done{margin:8px 0 0; font-size:16px}
.g-hint-toggle{margin-top:12px}
.g-hint{margin-top:8px; padding:12px; background:var(--ui-soft); border-radius:8px}
.g-hint h4{margin:0 0 4px; font-size:14px}
.g-hint p{margin:0 0 .6em}
.g-hint .route-hints{margin:0 0 10px; padding-bottom:8px; border-bottom:1px dotted var(--ui-line)}
.g-hint .route-hints h4{color:var(--ui-sub)}
.g-hint-item{padding:8px 0; border-top:1px dotted var(--ui-line)}
.g-hint-item:first-of-type{border-top:0; padding-top:0}
.g-hint-item--error p{color:var(--ui-ng)}
.g-guide{display:flex; align-items:center; gap:8px; min-height:48px; margin:18px 0; padding:8px 14px; background:var(--ui-soft); border-radius:10px; color:var(--ui-ink);
  font:700 14px/1.5 "Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif; text-decoration:none; border:0; cursor:pointer; width:100%; text-align:left}
.g-guide::before{content:"→"}
.g-textver{margin-top:12px}
.g-textver > summary{list-style:none; display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:2px solid currentColor; border-radius:10px;
  font:700 15px/1 "Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif; cursor:pointer}
.g-textver > summary::-webkit-details-marker{display:none}
.g-textver[open] > summary{margin-bottom:10px}
/* 正解後の「よくできました」は、ゲームの枠の色ではなく作中の赤ペンのはんこに見せる（design-guide 4-8・L5）。 */
.g-stamp{display:inline-flex; align-items:center; gap:4px; margin-left:8px; color:#c0392b; font-size:14px; font-weight:600; font-family:"Klee One","Hiragino Mincho ProN",serif}
.g-stamp .ring{display:inline-block; width:16px; height:16px; border:2px solid #c0392b; border-radius:50%; transform:rotate(-8deg)}

/* 拡大ビューア */
.g-zoom{position:fixed; inset:0; background:rgba(10,14,22,.92); z-index:50; display:flex; flex-direction:column; padding:16px}
.g-zoom[hidden]{display:none}
.g-zoom__close{align-self:flex-end; min-height:44px; min-width:44px; background:none; border:0; color:#fff; font-size:20px; cursor:pointer}
.g-zoom__body{flex:1; overflow:auto; display:flex; align-items:center; justify-content:center}
.g-zoom__body img,.g-zoom__body svg{max-width:100%; max-height:80vh; width:auto; height:auto}
.g-zoom__cap{color:#fff; font-size:13px; text-align:center; margin-top:10px}

/* 横スクロールの案内 */
.scroll-x{overflow-x:auto}
.scroll-hint{font-size:13px; color:var(--ui-sub); text-align:center; margin:4px 0}

/* 媒体をまたいで使う汎用の部品（投稿・メール本文の中の表・画像・仮枠） */
.block-table{width:100%; border-collapse:collapse; margin:.6em 0; font-size:15px}
.block-table th,.block-table td{border:1px solid #c8c8c2; padding:6px 9px; text-align:left; vertical-align:top}
.block-table th{background:#f1f1ee; font-weight:700; white-space:nowrap}
.media{margin:.6em 0; cursor:zoom-in}
.media figcaption{font-size:13px; color:var(--ui-sub); margin-top:6px}
.placeholder-img{background:repeating-linear-gradient(135deg,#eee,#eee 10px,#f5f5f0 10px,#f5f5f0 20px);
  border:1px dashed #bbb; border-radius:8px; padding:14px; color:#666; font-size:.85em; text-align:center; margin:.6em 0}
.quote{border-left:0; border-top:1px solid #d6d2c8; border-bottom:1px solid #d6d2c8; background:none; padding:.8em 0; margin:1em 0}

/* ===================================================================
   外側の層（導入・ホーム・作品について・クレジット。13-2）
   =================================================================== */
body[data-medium="frame"]{--fr-paper:#f6f2ea; --fr-paper-2:#fffdf8; --fr-ink:#22304a; --fr-sub:#5b5e6a; --fr-rule:#d8cfbf; --fr-accent:#8a5a2b;
  --fr-title:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  color-scheme:light; background:var(--fr-paper); color:var(--fr-ink); font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; line-height:1.7; min-height:100%}
body[data-medium="frame"].fr-white{background:#faf8f3}
.fr-photo{max-width:600px; margin:0 auto; height:min(42vw,220px); overflow:hidden; background:#b9ab93}
.fr-photo img{width:100%; height:100%; object-fit:cover}
.fr-photo .pv-pending{display:flex; height:100%; align-items:center; justify-content:center; padding:0 20px; color:#3b3226; font-size:13px; text-align:center; line-height:1.6}
body[data-medium="frame"] main,body[data-medium="frame"] .fr-main{max-width:600px; margin:0 auto; padding:0 18px 24px}
.fr-work{font-family:var(--fr-title); font-weight:600; font-size:15px; color:var(--fr-accent); letter-spacing:.08em; margin:14px 0 8px}
.fr-entries{list-style:none; margin:0; padding:0; border-top:1px solid var(--fr-rule)}
.fr-entries a,.fr-entries button{display:flex; width:100%; justify-content:space-between; align-items:flex-start; gap:12px; min-height:64px; padding:12px 2px 11px;
  border-bottom:1px solid var(--fr-rule); color:inherit; text-decoration:none; background:none; border-left:0; border-right:0; border-top:0; text-align:left; cursor:pointer; font-family:inherit}
.fr-entries b{display:block; font-family:var(--fr-title); font-weight:700; font-size:20px; line-height:1.4; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-color:#9aa3b5}
.fr-entries .d{display:block; font-size:14px; color:var(--fr-sub); margin-top:3px}
.fr-unread{flex:0 0 auto; margin-top:5px; padding:0 6px; background:var(--fr-ink); color:#fff; border-radius:2px; font-size:12px; font-weight:700; line-height:20px; white-space:nowrap}
body[data-medium="frame"] h1{font-family:var(--fr-title); font-size:22px}
body[data-medium="frame"] h2{display:flex; align-items:center; gap:12px; font-family:var(--fr-title); font-size:19px; font-weight:700; line-height:1.4; margin:38px 0 2px}
body[data-medium="frame"] h2::after{content:""; flex:1; height:1px; background:var(--fr-rule)}
.fr-lead{font-size:13px; color:var(--fr-sub); margin:0 0 6px}
.fr-todo{list-style:none; margin:0; padding:0}
.fr-todo li{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; min-height:44px; padding:11px 0; border-bottom:1px dotted #c4b9a5}
.fr-todo li > span:nth-child(2){flex:1 1 auto; min-width:0}
.fr-box{position:relative; flex:0 0 20px; width:20px; height:20px; margin-top:3px; border:1.5px solid var(--fr-ink); border-radius:1px}
.fr-box svg{position:absolute; left:-1px; top:-8px; width:26px; height:28px; overflow:visible}
.fr-todo .t{display:block; font-size:16px; line-height:1.55}
.fr-todo .s{display:block; font-size:13px; color:var(--fr-sub); line-height:1.6; margin-top:1px}
.fr-todo .open{flex:0 0 auto; min-height:44px; padding:0 4px; font-size:14px; color:var(--fr-accent); text-decoration:underline; background:none; border:0; cursor:pointer}
.fr-todo li.done .t{color:var(--fr-sub); text-decoration:line-through; text-decoration-thickness:1px}
.fr-note{font-size:14px; color:var(--fr-sub); margin:4px 0 10px; line-height:1.7}
.fr-memo{border:1px solid var(--fr-rule); background:var(--fr-paper-2); padding:0 12px 4px}
.fr-memo .memo-line{font-size:16px; line-height:32px; border-bottom:1px solid var(--fr-rule)}
.fr-memo .memo-line .place{display:block; font-size:13px; color:var(--fr-sub); line-height:32px; margin-top:-4px}
.fr-memo label{display:block; font-size:13px; color:var(--fr-sub); line-height:32px; border-bottom:1px solid var(--fr-rule)}
.fr-memo textarea{display:block; width:100%; min-height:128px; padding:0; border:0; resize:vertical; color:var(--fr-ink);
  font-family:inherit; font-size:16px; line-height:32px;
  background:transparent repeating-linear-gradient(180deg,transparent 0 31px,var(--fr-rule) 31px 32px); background-attachment:local}
.fr-memo textarea:focus{outline:3px solid var(--ui-focus); outline-offset:2px}
.fr-foot{margin:30px 0 0; font-size:14px}
.fr-foot a{color:var(--fr-ink); display:inline-flex; align-items:center; min-height:44px}

/* 導入画面 */
.fr-intro-top{display:flex; gap:16px; align-items:flex-end; padding:20px 18px 0; max-width:600px; margin:0 auto}
.fr-intro-photo{flex:0 0 46%; max-width:46%}
.fr-intro-photo img{width:100%; height:auto}
.fr-intro-title{font-family:var(--fr-title); font-weight:700; font-size:28px; line-height:1.3; letter-spacing:.12em; color:var(--fr-ink);
  writing-mode:vertical-rl; text-orientation:upright; margin:0}
.fr-can{width:56px; height:56px; margin:10px auto 0; display:block}
.fr-section h2{font-family:var(--fr-title); font-size:18px; margin:32px 0 8px; display:flex; align-items:center; gap:10px}
.fr-section h2::after{content:""; flex:1; height:1px; background:var(--fr-rule)}
.fr-fiction{font-size:16px; line-height:1.85; color:var(--fr-ink)}
.fr-fiction p,.fr-howto p{margin:0 0 1em}
.fr-fiction p:last-child,.fr-howto p:last-child{margin-bottom:0}
.fr-howto{font-size:16px; line-height:1.85}
.fr-list{margin:0; padding-left:1.3em; font-size:16px; line-height:1.85}
.fr-list li{margin-bottom:.35em}
.fr-list li:last-child{margin-bottom:0}

/* プロローグ・当日のつなぎ画面 */
.scene-dark{min-height:100svh; background:#1b2238; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 20px; text-align:left}
.scene-dark p{font-family:var(--fr-title,"Zen Old Mincho",serif); font-size:18px; line-height:2.1; max-width:20em; color:#fff; margin:0 0 .6em}
.scene-dark .g-btn{margin-top:24px}
.scene-paper{min-height:60svh; background:var(--fr-paper,#f6f2ea); color:var(--fr-ink,#22304a); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 20px; text-align:center}
.scene-paper p{font-family:"Klee One","Hiragino Mincho ProN",serif; font-size:22px; line-height:1.8}
.scene-paper .g-btn{margin-top:24px}

/* ===================================================================
   特設サイト（3-2・4-4〜4-9・12-2・13-2/13-3）
   =================================================================== */
body[data-medium="site"]{--site-kaki:#b0532a; --site-marker:#f6de8d; color-scheme:light; background:#eef0ea; color:#333; font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; min-height:100%}
.site-page{max-width:640px; margin:0 auto; background:#fff}
.site-top img{width:100%}
.site-credit{margin:3px 14px 0 0; text-align:right; font-size:12px; line-height:1.6; color:var(--site-kaki)}
.site-title{background:#4c7a38; color:#fff; padding:12px 16px 10px; position:relative}
.site-title p{margin:0}
.site-title .nm{font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif; font-weight:700; font-size:20px; line-height:1.35; display:inline-block; position:relative; padding-right:44px}
.site-title .org{font-size:13px; line-height:1.5; opacity:.95}
.site-title .doodle{position:absolute; right:0; top:-12px; width:40px; height:36px}
.site-nav{padding:6px 12px; border-bottom:1px solid #cfd8c6; font-size:15px; line-height:1}
.site-nav > summary{display:flex; align-items:center; min-height:44px; padding:0 2px; font-size:14px; color:#2f5f20; cursor:pointer}
.site-nav > summary::-webkit-details-marker{display:none}
.site-nav > p{padding:8px 2px; font-size:14px; color:#2f5f20; cursor:pointer}
.site-nav > summary .new{color:#b3261e; font-weight:700; font-size:12px; margin-left:6px}
.site-nav ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap}
.site-nav li{display:flex; align-items:center}
.site-nav li + li::before{content:"｜"; color:#a7b39c}
.site-nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 8px; color:#2f5f20; text-decoration:none}
.site-nav a[aria-current="page"]{font-weight:700; color:#333; text-decoration:underline; text-decoration-color:#4c7a38; text-decoration-thickness:2px; text-underline-offset:5px}
.site-nav .new{color:#b3261e; font-weight:700; font-size:12px; margin-left:4px}
.site-body{padding:14px 18px 26px; font-size:16px; line-height:1.85}
.site-body h2{font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif; font-size:19px; line-height:1.5; margin:30px 0 12px; padding-bottom:4px; border-bottom:1px solid #4c7a38; color:#2c4a1e}
.site-body h2:first-child{margin-top:8px}
.site-body h2::before{content:"■"; font-size:12px; color:#4c7a38; margin-right:6px; vertical-align:3px}
.site-body h3{font-size:16px; margin:22px 0 8px; color:#2c4a1e}
.site-body p{margin:0 0 14px}
.red{color:#b3261e; font-weight:700}
.site-sign{text-align:right}
.site-btn{display:inline-flex; align-items:center; min-height:44px; padding:0 16px; background:#4c7a38; color:#fff; border-radius:3px; text-decoration:none; font-size:15px; border:0; cursor:pointer}
.news{list-style:none; margin:0 0 6px; padding:0}
.news li{border-bottom:1px dotted #b8c2ae}
.news a,.news button{display:block; width:100%; text-align:left; padding:11px 0; min-height:44px; color:#2f5f20; line-height:1.55; background:none; border:0; cursor:pointer; font:inherit}
.news time{color:#666; margin-right:.6em; font-size:14px}
.news .new{color:#b3261e; font-weight:700; font-size:13px; margin-left:4px}
.more{display:inline-flex; align-items:center; min-height:44px; padding:0 4px; font-size:14px; color:#2f5f20; background:none; border:0; cursor:pointer}
.block-table td button.more{display:block; width:100%; min-height:44px; padding:8px 4px; text-align:left; font-size:15px}
.site-table{width:100%; border-collapse:collapse; font-size:15px; line-height:1.6}
.site-table th,.site-table td{border:1px solid #c8c8c2; padding:7px 10px; text-align:left; vertical-align:top}
.site-table th{background:#f1f1ee; white-space:nowrap; font-weight:700; width:4.5em}
.site-alert{color:#b3261e; font-size:14px}
.site-foot{background:#2f4d22; color:#fff; font-size:13px; line-height:1.8; padding:14px 18px 16px}
.site-foot p{margin:0 0 6px}
.site-foot a{display:inline-flex; align-items:center; min-height:44px; color:#fff}
.site-updated{font-size:13px; margin:0 0 8px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.35)}
.site-entry{background:#f6f7f2; border:1px solid #cfd8c6; border-radius:4px; padding:14px 16px; margin:16px 0}
.site-entry .name{font-weight:700}
.link-chip-row{display:flex; flex-wrap:wrap; gap:10px; margin:10px 0}
.link-chip{display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:0 14px; border:1px solid #4c7a38; border-radius:3px; color:#2f5f20; text-decoration:none; font-size:14px}
.link-chip::after{content:"›"}

/* 宿題提出箱：上部（見出し・前書きと、右の封筒2通） */
.submit-top{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-start}
.submit-top__text{flex:1 1 200px; min-width:0}
.submit-top__envelope{flex:0 0 auto; width:140px; margin-top:4px}

/* 封筒（素材一覧 G）：下から「ふた」→「便せんの紙」→「本体」の3層。閉じた姿はふたを scaleY(0) で隠す。 */
.envelope{position:relative; width:100%; aspect-ratio:520/820; margin:0 auto}
.envelope--top{max-width:140px}
.envelope--md{max-width:220px; margin:14px 0}
.envelope--sm{display:inline-block; width:84px; vertical-align:middle; margin:0 0 0 10px}
.envelope__flap,.envelope__body{position:absolute; inset:0; width:100%; height:100%}
.envelope__flap svg,.envelope__body svg,.envelope__flap img,.envelope__body img{width:100%; height:100%; display:block}
.envelope__flap{transform-origin:var(--env-origin,50% 25%); transform:scaleY(0); transition:transform .35s ease; z-index:1}
.envelope[data-open="1"] .envelope__flap{transform:scaleY(1)}
.envelope__paper{position:absolute; left:16%; top:18%; width:68%; height:0; background:#fbfaf6; border:1px solid #ddd6c4; box-shadow:0 1px 2px rgba(60,40,20,.12); z-index:2; overflow:hidden; transition:height .35s ease .35s}
.envelope[data-open="1"] .envelope__paper{height:56%}
.envelope__body{z-index:3}
.h-envelope{display:inline-block}
@media (prefers-reduced-motion:reduce){
  .envelope__flap,.envelope__paper{transition:none}
}
/* 先生の答え合わせ（4-9）：便せん風。赤ペン部分は renderBlock 側で .pen-red を付ける想定 */
.letter{background:#fff repeating-linear-gradient(180deg,transparent 0 33px,#dfe6f0 33px 34px); color:#22407a; font-family:"Klee One","Hiragino Mincho ProN",serif; font-size:17px; line-height:34px; padding:8px 18px; margin:14px 0}
.letter p{margin:0 0 .2em}
.letter hr{border:0; border-top:1px dashed #c7cfdd; margin:10px 0}
.letter .quote{border-top:1px dashed #c7cfdd; border-bottom:1px dashed #c7cfdd}
.chalk-lines{font-family:"Klee One","Hiragino Mincho ProN",serif; color:#333}
.cipher-box{border:2px dashed #4c7a38; border-radius:6px; padding:14px; text-align:center; font-weight:700; font-size:22px; letter-spacing:.3em; margin:16px 0; color:#2c4a1e}

/* 生活の痕跡（13-4）*/
.mk{background:linear-gradient(transparent 58%, var(--site-marker,#f6de8d) 58%)}
.kaki{color:var(--site-kaki,#b0532a)}
.site-notice{margin:6px 18px 0; padding:8px 0; border-top:1px dashed #d8c98a; border-bottom:1px dashed #d8c98a; font-size:14px; line-height:1.7}
.site-addendum{margin:22px 0 14px}
.site-addendum p{margin:0 0 6px}
.site-addendum .h{font-weight:700}
del.site-fix{color:#6b6b6b; text-decoration:line-through; text-decoration-thickness:1.5px}
ins.site-fix{color:#b3261e; font-weight:700; text-decoration:none}

/* 黒板（写真の下に、同じ内容の文字を常に表示） */
.chalk-photo{margin:0 0 10px}
.gojuon-text{color:#444; margin:0 0 10px}
.gojuon-dan{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px .6em; margin:0 0 16px; font-size:20px; line-height:1.5}
.gojuon-gyo{white-space:nowrap; letter-spacing:.15em; font-family:"Klee One","Hiragino Mincho ProN",serif}

/* ===================================================================
   連絡ボード（3-3・4-10・4-11・12-2・13-3/13-4）
   =================================================================== */
body[data-medium="board"]{color-scheme:light; color:#2b2620; font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  background:#fbf4dc repeating-linear-gradient(180deg,transparent 0 29px,#e6d9b0 29px 30px); min-height:100%}
body[data-medium="board"] main,body[data-medium="board"] .board-main{max-width:600px; margin:0 auto; padding:10px 14px 0}
.board-name{padding:14px 2px 10px; border-bottom:3px double #b59a6a; color:#5a3a1e}
.board-name b{display:block; font-size:19px; line-height:1.4}
.board-name span{font-size:13px}
.board-back{display:inline-flex; align-items:center; min-height:44px; color:#6a4424; font-size:15px; text-decoration:none; background:none; border:0; cursor:pointer; padding:0}
.board-title{font-size:18px; line-height:1.5; margin:4px 0 2px; color:#3b2a18}
.board-order{font-size:12px; color:#76684f; margin:0 0 18px}
.board-list{list-style:none; margin:0 0 18px; padding:0}
.board-list li{border-bottom:1px solid #e6d9b0}
.board-list button,.board-list a{display:flex; width:100%; align-items:center; gap:6px; min-height:56px; padding:10px 2px; text-align:left; background:none; border:0; color:#3b2a18; font-size:15px; cursor:pointer; text-decoration:none; line-height:1.5}
.board-list .pin{flex:0 0 auto; color:#9a4a26; display:inline-flex}
.board-list .new{flex:0 0 auto; color:#b3261e; font-weight:700; font-size:12px}
.board-list .unread-dot{flex:0 0 auto; width:10px; height:10px; border-radius:50%; background:#9a4a26; margin-left:auto}
.note{background:#fff2a8; margin:0 0 22px; padding:12px 14px 14px; box-shadow:0 2px 2px -1px rgba(70,55,20,.22); line-height:1.8}
.note__who{display:flex; flex-wrap:wrap; align-items:flex-end; gap:4px 8px; margin-bottom:6px; line-height:1.3}
.note__who svg{width:28px; height:28px; flex:0 0 auto}
.note__who b{font-size:16px}
.note__who small{font-size:12px; color:#6b5f48}
.note__who .role{font-size:13px; color:#6a4424}
.note time{display:block; font-size:12px; color:#6b5f48; margin:-2px 0 6px}
.note p{margin:0 0 .6em}
.note p:last-child{margin-bottom:0}
.note__edited{font-size:12px; color:#6b5f48}
.note__stamps{display:flex; gap:10px; margin-top:10px}
.stamp-item{display:flex; align-items:center; justify-content:center; width:34px; height:34px; border:2px solid; border-radius:50%; background:#fffaf0}
.stamp-item svg{width:20px; height:20px}
.note-sys{text-align:center; color:#76684f; font-size:13px; margin:0 0 18px}
.note__quote{font-size:14px; color:#76684f; margin:0 0 6px}

/* ===================================================================
   受信箱（3-4・4-12・4-13・12-2）
   =================================================================== */
body[data-medium="inbox"]{color-scheme:light; background:#fff; color:#222; font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; min-height:100%}
body[data-medium="inbox"] main,body[data-medium="inbox"] .inbox-main{max-width:680px; margin:0 auto}
.inbox-top{display:flex; justify-content:space-between; align-items:baseline; padding:14px 16px 8px; border-bottom:2px solid #333}
.inbox-top b{font-size:18px}
.inbox-top span{font-size:13px; color:#555}
.mails{list-style:none; margin:0; padding:0}
.mails li{border-bottom:1px solid #ddd}
.mails button,.mails a{display:block; width:100%; text-align:left; padding:10px 16px 11px 30px; color:#222; text-decoration:none; position:relative; min-height:64px; background:none; border:0; cursor:pointer; font:inherit}
.mails .l1{display:flex; justify-content:space-between; gap:10px; font-size:15px; line-height:1.5}
.mails time{font-size:13px; color:#666; white-space:nowrap}
.mails .l2{display:block; font-size:14px; color:#555; line-height:1.5}
.mails .un{position:absolute; left:12px; top:13px; color:#1f6570; font-size:11px}
.mails .unread .l1 span,.mails .unread .l2{font-weight:700; color:#111}
.att{font-size:12px; color:#1f6570; margin-left:4px; white-space:nowrap}
.inbox-note{font-size:13px; color:#666; padding:10px 16px}
.mail{padding:4px 16px 24px}
.mail-back{display:inline-flex; align-items:center; min-height:44px; color:#1f6570; font-size:15px; text-decoration:none; background:none; border:0; cursor:pointer; padding:0}
.mail h1{font-size:19px; line-height:1.5; margin:4px 0 8px}
.mail-h{margin:0; padding:0 0 10px; border-bottom:1px solid #ccc; font-size:13px; color:#555; line-height:1.7; display:grid; grid-template-columns:auto 1fr; column-gap:6px}
.mail-h dt{color:#666}
.mail-h dd{margin:0}
.mail-body{font-size:16px; line-height:1.85; max-width:36em; padding:14px 0 6px}
.mail-body p{margin:0 0 1em}
.mail-body .quote{border-left:0; border-top:1px solid #c7cfdd; border-bottom:1px solid #c7cfdd; background:none; padding:.8em 0; margin:1em 0}
.att-h{font-size:14px; margin:14px 0 10px; padding-top:12px; border-top:1px solid #ccc}
.att-item{margin:0 0 26px}
.att-name{font-size:13px; color:#555; margin:0 0 5px}
.att-item .pic{border:1px solid #ccc}
.att-text{font-size:16px; line-height:1.75; margin-top:12px}
.att-text p{margin:0 0 .8em}
.att-text table{border-collapse:collapse; width:100%; margin:0 0 .8em; font-size:15px}
.att-text th,.att-text td{border:1px solid #ccc; padding:6px 9px; text-align:left; vertical-align:top}
.att-text th{white-space:nowrap; font-weight:700; background:#f5f5f5}
.inbox-link{display:flex; align-items:center; justify-content:center; min-height:48px; margin-top:12px; background:#1f6570; color:#fff; border-radius:4px; font-weight:700; text-decoration:none; border:0; cursor:pointer; width:100%; font-size:16px}
body[data-medium="inbox"] .g-textver > summary{color:var(--ui-ink)}
.textbody{font-size:16px; line-height:1.8; padding:10px 12px; background:#f7f7f7}
.textbody ul{margin:.4em 0 0; padding-left:1.2em}
.textbody p{margin:0 0 .6em}

/* ===================================================================
   卒業文集ビューア（3-5・4-14・4-15）
   =================================================================== */
body[data-medium="bunshu"]{color-scheme:light; background:#3a352f; color:#f3efe6; font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; min-height:100%}
body[data-medium="bunshu"] main,body[data-medium="bunshu"] .bunshu-main{max-width:540px; margin:0 auto; padding:10px 12px 0}
body[data-medium="bunshu"].has-tabbar{padding-bottom:calc(60px + 66px + env(safe-area-inset-bottom) + 16px)}
.bunshu-top{padding:4px 2px 10px; line-height:1.5}
.bunshu-top small{display:block; font-size:12px}
.bunshu-top b{font-size:15px}
.bunshu-top .btn-inline{display:inline-flex; align-items:center; min-height:44px; margin-top:6px; padding:0 2px; font-size:13px; color:#f3efe6; text-decoration:underline; background:none; border:0; cursor:pointer}
.bunshu-page{background:#d6d4ce}
.bunshu-page img,.bunshu-page svg{width:100%; height:auto; display:block}
body[data-medium="bunshu"] .g-textver > summary{color:#f3efe6}
.bunshu-text{background:#fbf4e2; color:#4a4640; padding:12px 14px; line-height:1.9; font-size:16px}
.bunshu-text p{margin:0 0 .6em}
.pen-red{color:#c0392b; font-weight:700; text-decoration:underline; text-underline-offset:3px}
.masu-cap{font-size:13px; color:#5d564d; margin:10px 0 2px}
.masu{border-collapse:separate; border-spacing:0; font-family:"Klee One","Hiragino Mincho ProN",serif; margin:0 0 10px}
.masu th{font:400 11px/1 "Hiragino Sans",sans-serif; color:#736b61; height:15px; text-align:center; vertical-align:bottom; padding:0 0 2px}
.masu td{width:28px; min-width:28px; height:28px; padding:0; text-align:center; font-size:17px; line-height:28px; background:#fffaf0;
  border-top:1px solid #5d564d; border-bottom:1px solid #5d564d; border-right:1px solid #c9bfae}
.masu td:first-child{border-left:2px solid #5d564d}
.masu td.m5{border-right:2px dotted #8a8176}
.masu td.m10{border-right:3px solid #5d564d}
.masu.grayed td{background:#d9d4ca}
.bunshu-ctrl{position:fixed; left:0; right:0; bottom:calc(60px + env(safe-area-inset-bottom)); z-index:19; background:#26221e; border-top:1px solid #4a443c}
.bunshu-ctrl div{display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:8px; max-width:540px; margin:0 auto; padding:9px 12px}
.bunshu-ctrl button{min-height:48px; border:2px solid #f3efe6; border-radius:10px; background:transparent; color:#f3efe6; font:700 15px/1 "Hiragino Sans",sans-serif; cursor:pointer}
.bunshu-ctrl button:disabled{opacity:.35; cursor:default}
.sheet-overlay{position:fixed; inset:0; z-index:29; background:rgba(10,14,22,.45)}
.sheet-overlay[hidden]{display:none}
.sheet{position:fixed; left:0; right:0; bottom:0; z-index:30; background:#fff; color:var(--ui-ink); border-radius:14px 14px 0 0; padding:6px 0 calc(16px + env(safe-area-inset-bottom)); box-shadow:0 -6px 24px rgba(0,0,0,.35); max-height:70vh; overflow:auto}
.sheet[hidden]{display:none}
.sheet ul{list-style:none; margin:0; padding:0}
.sheet li button{display:flex; width:100%; min-height:48px; align-items:center; padding:0 20px; background:none; border:0; border-bottom:1px solid #e3e7ee; font:15px "Hiragino Sans",sans-serif; color:inherit; text-align:left; cursor:pointer}
.sheet li button[aria-current="true"]{font-weight:700}
.sheet li button[aria-current="true"]::after{content:"（いま見ているページ）"; font-weight:400; font-size:12px; margin-left:8px; color:var(--ui-sub)}
.sheet-head{display:flex; justify-content:space-between; align-items:center; padding:0 10px 4px 20px; font:700 15px "Hiragino Sans",sans-serif}
.sheet-head button{min-height:44px; background:none; border:0; font:inherit; color:inherit; cursor:pointer}

/* 「先生より」いちらん（固定列・横スクロール） */
.ichiran-wrap{margin:10px 0; position:relative}
/* まだ右にスクロールできることが伝わるよう、表の右端に薄いフェードを重ねる（design-review L9）。
   いちらんは .bunshu-text（地の色 #fbf4e2）の中に置かれる前提の色。 */
.ichiran-wrap::after{content:""; position:absolute; top:26px; right:0; bottom:0; width:26px; background:linear-gradient(to right, rgba(251,244,226,0), rgba(251,244,226,.95)); pointer-events:none}
.ichiran{border-collapse:separate; border-spacing:0; font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif; white-space:nowrap; background:#fff}
.ichiran th,.ichiran td{border-bottom:1px solid #c9bfae; padding:0; text-align:center; vertical-align:middle}
.ichiran .no,.ichiran .nm{position:sticky; left:0; z-index:2; background:#fff; padding:0 8px; height:30px; font-size:13px; box-shadow:2px 0 0 #5d564d}
.ichiran .no{width:44px; min-width:44px; max-width:44px; padding:0 4px; white-space:normal; line-height:1.2}
.ichiran .nm{left:44px; box-shadow:2px 0 0 #5d564d}
.ichiran thead th{position:sticky; top:0; z-index:3; background:#fff}
.ichiran thead .no,.ichiran thead .nm{z-index:4}
.ichiran .masucell{width:26px; min-width:26px; height:30px; font-size:17px; border-right:1px solid #c9bfae}
.ichiran .masucell.m5{border-right:1.5px solid #8a8176}
.ichiran .masucell.m10{border-right:3px solid #5d564d}
.ichiran .num{font-size:12px; color:#736b61}
.ichiran tr:nth-child(odd) td{background:#ffffff}
.ichiran tr:nth-child(even) td{background:#f6f3ec}
.ichiran tr.grayed td{background:#d9d4ca}
@media (min-width:600px){
  .ichiran .no,.ichiran .nm,.ichiran .masucell{height:30px}
  .ichiran .nm{width:7.5em}
  .masu td,.ichiran .masucell{width:30px; min-width:30px}
}
@media (max-width:599.98px){
  .ichiran .nm{width:7em; font-size:12px}
}