:root {
    --chalk-board: #2d4a3e;
    --chalk-board-dark: #1f342b;
    --chalk: #f4f1e8;
    --chalk-yellow: #f6e27a;
    --chalk-pink: #f5a5b8;
    --chalk-blue: #8fd3e8;

    --cork: #c99868;
    --cork-dark: #a67240;
    --cork-deep: #8a5a30;

    --paper: #fbf7ec;
    --paper-cream: #f5ecd4;
    --paper-aged: #ede2c4;
    --paper-line: #b8c7d1;
    --paper-red: #d85a5a;
    --paper-blue: #4a72a8;
    --ink: #223039;
    --ink-soft: #4a5a64;

    --wood: #a57042;
    --wood-mid: #8a5a30;
    --wood-dark: #6b3f1e;
    --wood-deep: #4e2c15;

    --tape-yellow: #f5d76e;
    --tape-mint: #9fd8b8;
    --tape-pink: #f3a5b5;
    --tape-blue: #9cc4e0;
    --tape-washi: #d4c7a0;

    --pin-red: #d94a3e;
    --pin-blue: #2e6fb8;
    --pin-yellow: #e8b63a;
    --pin-green: #4a9e6a;

    --hallway: #d6c4a0;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: "Klee One", "Yusei Magic", "Zen Kurenaido", system-ui, sans-serif;
    color: var(--ink);
    background: var(--hallway);
    min-height: 100vh;
    overflow-x: hidden;
  }
  /* hallway wall pattern behind everything */
  body::before {
    content: "";
    position: fixed; inset: 0;
    background:
      linear-gradient(180deg, transparent 0 60%, rgba(90,50,20,.12) 60% 63%, transparent 63% 100%),
      repeating-linear-gradient(90deg, transparent 0 119px, rgba(90,50,20,.05) 119px 120px),
      linear-gradient(180deg, #e8d6b0 0%, #d6c09a 60%, #bfa782 100%);
    z-index: -1;
  }

  /* ============================================================
     BLACKBOARD HEADER
     ============================================================ */
  .board-area {
    position: relative;
  }
  .blackboard {
    position: relative;
    background:
      radial-gradient(ellipse 80% 50% at 50% 20%, rgba(255,255,255,.06), transparent 60%),
      radial-gradient(ellipse 60% 40% at 80% 80%, rgba(255,255,255,.04), transparent 60%),
      linear-gradient(180deg, var(--chalk-board) 0%, var(--chalk-board-dark) 100%);
    padding: 28px 40px 20px;
    margin: 0;
    box-shadow:
      inset 0 0 80px rgba(0,0,0,.25),
      inset 0 4px 0 rgba(255,255,255,.04);
    overflow: hidden;
  }
  .blackboard::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(244,241,232,.04) 0, transparent 2px),
      radial-gradient(circle at 70% 60%, rgba(244,241,232,.03) 0, transparent 2px),
      radial-gradient(circle at 40% 80%, rgba(244,241,232,.05) 0, transparent 2px),
      radial-gradient(circle at 85% 20%, rgba(244,241,232,.03) 0, transparent 2px);
    background-size: 80px 80px, 60px 60px, 100px 100px, 70px 70px;
    pointer-events: none;
    opacity: .8;
  }
  .blackboard::after {
    content: "";
    position: absolute; inset: 0;
    background:
      repeating-linear-gradient(95deg, transparent 0 140px, rgba(244,241,232,.015) 140px 141px, transparent 141px 280px),
      repeating-linear-gradient(-88deg, transparent 0 200px, rgba(244,241,232,.012) 200px 201px, transparent 201px 400px);
    pointer-events: none;
  }
  .board-inner {
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 32px;
    align-items: center;
    z-index: 2;
  }
  .school-crest {
    position: relative;
    width: 140px; height: 140px;
    display: grid; place-items: center;
    color: var(--chalk);
    font-family: "Shippori Mincho", serif;
  }
  .school-crest svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .school-crest .crest-img {
    width: 100%; height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)) drop-shadow(0 0 6px rgba(255,255,255,.12));
  }
  .school-crest .mark {
    position: relative;
    font-size: 30px; font-weight: 800;
    letter-spacing: .05em;
    line-height: 1;
  }
  .school-title { color: var(--chalk); }
  .school-title .kanji {
    font-family: "Shippori Mincho", serif;
    font-size: 14px;
    letter-spacing: .4em;
    opacity: .7;
    margin-bottom: 6px;
    display: block;
  }
  /* ===== Chalk texture: dusty, hand-drawn feel ===== */
  .blackboard .school-title .kanji,
  .blackboard .school-title h1,
  .blackboard .school-title h1 .dot,
  .blackboard .school-title .sub,
  .blackboard .today .label,
  .blackboard .today .date,
  .blackboard .today .weather,
  .blackboard .chalk-decor,
  .school-crest .mark {
    filter: url(#chalk-rough);
    -webkit-font-smoothing: antialiased;
    letter-spacing: .02em;
  }
  /* Chalk dust halo */
  .blackboard .school-title .kanji,
  .blackboard .today .date-val,
  .blackboard .today .weather,
  .blackboard .today .label,
  .blackboard .chalk-decor,
  .school-crest .mark {
    text-shadow:
      0 0 1px rgba(255,255,255,.4),
      0 0 5px rgba(255,255,255,.12),
      0 1px 0 rgba(0,0,0,.2);
  }
  .blackboard .school-title .sub {
    text-shadow:
      0 0 1px rgba(143,211,232,.3),
      0 0 4px rgba(255,255,255,.1);
  }
  .blackboard .school-title h1 {
    text-shadow:
      0 0 2px rgba(255,255,255,.5),
      0 0 10px rgba(255,255,255,.18),
      2px 2px 0 rgba(0,0,0,.25),
      -1px 0 0 rgba(255,255,255,.12);
  }

  .school-title h1 {
    font-family: "Caveat", cursive;
    font-size: 68px;
    margin: 0;
    font-weight: 700;
    line-height: .9;
    color: var(--chalk);
  }
  .school-title h1 .dot { color: var(--chalk-yellow); }
  .school-title .sub {
    margin-top: 10px;
    font-family: "Zen Kurenaido", cursive;
    color: var(--chalk-blue);
    font-size: 18px;
  }
  .school-title .sub .u { text-decoration: underline wavy rgba(143,211,232,.5); text-underline-offset: 5px; }
  .blackboard .today {
    color: var(--chalk);
    font-family: "Shippori Mincho", "Zen Kurenaido", serif;
    padding: 0 14px;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 14px;
    min-height: 0;
  }
  .blackboard .today .date-line {
    display: flex;
    margin: 0;
  }
  .blackboard .today .date-val {
    font-family: "Shippori Mincho", serif;
    font-size: 20px; line-height: 1.05;
    letter-spacing: .02em;
    writing-mode: vertical-rl;
    text-orientation: upright;
    margin: 0;
    filter: url(#chalk-rough);
    text-shadow: 0 0 1px rgba(255,255,255,.4), 0 0 5px rgba(255,255,255,.12), 0 1px 0 rgba(0,0,0,.2);
  }
  .blackboard .today .duty-line {
    display: flex; flex-direction: row; align-items: flex-end; gap: 10px;
    align-self: flex-end;
    margin: 0;
  }
  .blackboard .today .duty-names {
    display: flex; flex-direction: row-reverse; gap: 10px;
  }
  .blackboard .today .label {
    font-size: 11px; color: var(--chalk-yellow);
    letter-spacing: .25em;
    writing-mode: vertical-rl;
    text-orientation: upright;
    border: 1px solid rgba(244,241,232,.45);
    padding: 3px 2px;
    margin: 0;
    align-self: flex-start;
  }
  .blackboard .today .duty-name {
    font-family: "Shippori Mincho", "Klee One", serif;
    font-size: 14px; line-height: 1.05;
    color: var(--chalk);
    letter-spacing: .02em;
    writing-mode: vertical-rl;
    text-orientation: upright;
    filter: url(#chalk-rough);
    text-shadow: 0 0 1px rgba(255,255,255,.4), 0 0 5px rgba(255,255,255,.12), 0 1px 0 rgba(0,0,0,.2);
    margin: 0;
  }
  .blackboard .today .duty-name .san {
    font-size: 11px; opacity: .8; color: var(--chalk-yellow);
  }
  .chalk-decor {
    position: absolute;
    font-family: "Caveat", cursive;
    pointer-events: none; z-index: 2;
  }
  .chalk-decor.eq { top: 40px; right: 80px; font-size: 22px; transform: rotate(-4deg); color: var(--chalk-blue); }
  .chalk-decor.note { bottom: 22px; left: 60px; font-size: 18px; transform: rotate(2deg); color: var(--chalk-pink); }

  /* ============================================================
     CHALK TRAY — 黒板下の木製チョーク受け(立体棚)
     構造: 上面(シェルフ)/前縁リップ/前面(木目) - 側光で陰影
     ============================================================ */
  .chalk-tray {
    position: relative;
    width: 100%;
    height: 24px;
    margin: 0;
    z-index: 3;
    /* 前面(垂直パネル) */
    background:
      /* 細い縦の木目(経年汚れ線) */
      repeating-linear-gradient(91deg,
        rgba(30,15,4,.22) 0 1px, transparent 1px 60px,
        rgba(30,15,4,.12) 60px 61px, transparent 61px 140px,
        rgba(30,15,4,.18) 140px 141px, transparent 141px 230px),
      /* 大きなウェーブ状の木目 */
      repeating-linear-gradient(89deg,
        rgba(80,40,12,.08) 0 14px, rgba(50,25,8,.12) 14px 16px, transparent 16px 80px),
      /* 前面の基調色 - 上から下へ暗く */
      linear-gradient(180deg,
        #8a5a2a 0%,
        #6e4418 30%,
        #533312 65%,
        #3e2510 100%);
    box-shadow:
      inset 0 -2px 4px rgba(0,0,0,.55),
      0 4px 6px rgba(0,0,0,.35),
      0 9px 14px rgba(0,0,0,.2);
  }
  /* 上面(シェルフ - ここに黒板消しが乗る) */
  .chalk-tray::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 8px;
    background:
      /* 木目(横方向・上面視点) */
      repeating-linear-gradient(90deg,
        rgba(70,36,12,.35) 0 1px, transparent 1px 55px,
        rgba(70,36,12,.2) 55px 56px, transparent 56px 130px,
        rgba(70,36,12,.3) 130px 131px, transparent 131px 200px),
      /* さらに細かい線目 */
      repeating-linear-gradient(90deg,
        rgba(40,20,6,.15) 0 1px, transparent 1px 8px),
      /* 上面の基調色 - 黒板に接する奥側は暗く、手前ほど明るい */
      linear-gradient(180deg,
        #6b4520 0%,       /* 黒板と接する奥=暗い(影に入る) */
        #88582a 20%,
        #9c6632 45%,
        #7e5022 75%,
        #543412 100%);
    box-shadow:
      inset 0 2px 3px rgba(0,0,0,.7),            /* 黒板の影が奥側に落ちる */
      inset 0 -1px 2px rgba(0,0,0,.45);          /* 手前のエッジ陰 */
  }
  /* 前縁リップ(上面と前面の境界) */
  .chalk-tray::after {
    content: "";
    position: absolute;
    top: 8px; left: 0; right: 0;
    height: 2px;
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.75) 0%,
        rgba(0,0,0,.35) 50%,
        rgba(120,75,40,.3) 100%);
    box-shadow:
      0 1px 0 rgba(255,220,180,.15);
  }
  /* 節目(木の節)- ランダム配置で自然さを演出 */
  .tray-knot {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
  }
  .tray-knot.k1 {
    top: 14px; left: 18%;
    width: 8px; height: 5px;
    background:
      radial-gradient(ellipse, rgba(30,15,4,.6) 0%, rgba(50,25,8,.3) 50%, transparent 85%);
    transform: rotate(-3deg);
  }
  .tray-knot.k2 {
    top: 18px; right: 32%;
    width: 6px; height: 4px;
    background:
      radial-gradient(ellipse, rgba(30,15,4,.5) 0%, rgba(50,25,8,.25) 55%, transparent 85%);
    transform: rotate(4deg);
  }
  /* 棚の上に付着した古いチョーク粉(自然な汚れ) */
  .tray-chalk-dust {
    position: absolute;
    top: 2px;
    height: 3px;
    background: radial-gradient(ellipse, rgba(245,245,240,.55), transparent 75%);
    border-radius: 50%;
    filter: blur(.7px);
    pointer-events: none;
  }
  .tray-chalk-dust.td1 { left: 12%; width: 40px; opacity: .6; }
  .tray-chalk-dust.td2 { left: 42%; width: 26px; opacity: .45; top: 4px; }
  .tray-chalk-dust.td3 { right: 18%; width: 55px; opacity: .55; top: 3px; }

  /* ============================================================
     BLACKBOARD ERASER — リアル黒板消し(画像参考)
     構造: [上] オレンジ硬質プラスチック / [下] 紺フェルト(毛羽)
          [側面] 金属リベット / [横] 黒ゴム帯
     ============================================================ */
  .eraser {
    position: absolute;
    right: 260px;
    bottom: 18px;   /* チョーク受けの上面(シェルフ・8px)に乗る高さ */
    width: 72px;
    height: 26px;
    z-index: 5;
    transform: rotate(-2deg);
    pointer-events: none;
  }
  .eraser-body {
    position: relative;
    width: 100%; height: 100%;
    filter:
      drop-shadow(0 4px 4px rgba(0,0,0,.35))
      drop-shadow(0 8px 10px rgba(0,0,0,.25));
  }

  /* ---- 紺フェルト消しパッド (下層/台座) ----
     フェルトは繊維が毛羽立つため、
     ノイズ(繰り返し放射グラデ)+微細ドットで再現 */
  .eraser-felt {
    position: absolute;
    left: -1px; right: -1px;
    bottom: 0;
    height: 56%;
    border-radius: 2px 2px 3px 3px;
    background:
      /* 表面の微細な毛羽(小さな明暗点を繰り返し) */
      radial-gradient(circle at 12% 22%, rgba(255,255,255,.10) 0 .7px, transparent 1.2px),
      radial-gradient(circle at 38% 58%, rgba(255,255,255,.08) 0 .6px, transparent 1.1px),
      radial-gradient(circle at 72% 30%, rgba(255,255,255,.09) 0 .6px, transparent 1.1px),
      radial-gradient(circle at 88% 78%, rgba(255,255,255,.07) 0 .5px, transparent 1px),
      radial-gradient(circle at 55% 82%, rgba(0,0,0,.22) 0 .6px, transparent 1.1px),
      radial-gradient(circle at 28% 72%, rgba(0,0,0,.20) 0 .5px, transparent 1px),
      /* フェルト下端の圧縮感(地面と接触) */
      linear-gradient(180deg,
        #2c3a66 0%,
        #243359 25%,
        #1a2547 60%,
        #121a36 90%,
        #0c1329 100%);
    background-size:
      6px 6px, 7px 7px, 5px 5px, 8px 8px, 6px 6px, 7px 7px, 100% 100%;
    background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),           /* 上端の薄いフェルトのくぼみ光 */
      inset 0 -2px 2px rgba(0,0,0,.45),              /* 底の接地陰 */
      inset 2px 0 3px rgba(0,0,0,.3),
      inset -2px 0 3px rgba(0,0,0,.3);
    overflow: hidden;
  }
  /* フェルトの大きめ毛羽(層を重ねて立体感) */
  .felt-fiber {
    position: absolute;
    background: radial-gradient(circle, rgba(255,255,255,.35), transparent 70%);
    border-radius: 50%;
    filter: blur(.6px);
    pointer-events: none;
  }
  .felt-fiber.f1 { width: 14px; height: 4px;  left: 8%;  top: 18%; opacity: .3; }
  .felt-fiber.f2 { width: 10px; height: 3px;  left: 48%; top: 42%; opacity: .25; transform: rotate(4deg); }
  .felt-fiber.f3 { width: 16px; height: 3px;  right: 10%; bottom: 18%; opacity: .28; transform: rotate(-3deg); }
  /* フェルトに付着したチョーク粉の白い染み */
  .felt-chalk {
    position: absolute;
    background: radial-gradient(ellipse, rgba(245,245,240,.7), rgba(245,245,240,.1) 60%, transparent 80%);
    border-radius: 50%;
    pointer-events: none;
    filter: blur(.8px);
  }
  .felt-chalk.c1 { width: 22px; height: 7px;  left: 12%;  top: 35%; opacity: .55; transform: rotate(-4deg); }
  .felt-chalk.c2 { width: 14px; height: 5px;  left: 42%;  bottom: 22%; opacity: .45; transform: rotate(3deg); }
  .felt-chalk.c3 { width: 28px; height: 6px;  right: 8%;  top: 48%; opacity: .5; transform: rotate(-2deg); }
  .felt-chalk.c4 { width: 10px; height: 3px;  left: 65%;  top: 20%; opacity: .4; }

  /* ---- オレンジ硬質プラスチック(上層・フェルトにかぶさる) ---- */
  .eraser-orange {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 55%;
    border-radius: 5px 5px 1px 1px;
    background:
      /* 下端のプラスチックの影(フェルトとの接合段差) */
      linear-gradient(180deg, transparent 78%, rgba(80,25,0,.35) 100%),
      /* 本体オレンジ(中央が最も明るい) */
      linear-gradient(180deg,
        #ff9a55 0%,
        #f6823a 20%,
        #ee6b1f 55%,
        #d85712 85%,
        #b84710 100%);
    box-shadow:
      inset 0 1.5px 0 rgba(255,230,200,.65),         /* 上端の樹脂ハイライト */
      inset 0 -1.5px 0 rgba(90,30,5,.6),             /* 下端の樹脂陰 */
      inset 2px 0 2px rgba(255,220,180,.15),
      inset -2px 0 2px rgba(0,0,0,.15),
      0 1px 0 rgba(255,255,255,.08);
    overflow: hidden;
  }
  /* 広く広がる鏡面反射 */
  .orange-gloss {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40%;
    background: linear-gradient(180deg,
      rgba(255,245,225,.55) 0%,
      rgba(255,220,180,.2) 60%,
      transparent 100%);
    border-radius: 5px 5px 50% 50% / 5px 5px 100% 100%;
    pointer-events: none;
  }
  /* さらに光を乗せる細めのハイライト(樹脂らしい鋭い光) */
  .orange-highlight {
    position: absolute;
    top: 12%; left: 10%; right: 32%;
    height: 22%;
    background: linear-gradient(180deg,
      rgba(255,252,240,.85),
      rgba(255,245,220,.3) 60%,
      transparent);
    border-radius: 50%;
    filter: blur(2.5px);
    pointer-events: none;
  }
  /* 両端の暗いカーブ影(丸みのある樹脂のエッジ) */
  .orange-edge-shadow {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(70,20,0,.35) 0%, transparent 8%, transparent 92%, rgba(70,20,0,.35) 100%);
    pointer-events: none;
  }
  /* 印字ロゴ(バーコードの代わりに控えめなブランド刻印) */
  .orange-brand {
    position: absolute;
    top: 28%;
    left: 12%;
    font-family: "Yusei Magic", sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .8px;
    color: rgba(90,28,5,.55);
    text-shadow:
      0 .5px 0 rgba(255,240,215,.5),
      0 -.5px 0 rgba(60,18,0,.3);
    transform: skewX(-2deg);
    pointer-events: none;
  }
  /* 側面下端の横ストライプ(装飾ライン) */
  .orange-stripe {
    position: absolute;
    left: 0; right: 0;
    bottom: 12%;
    height: 1.5px;
    background:
      linear-gradient(90deg,
        transparent 0%,
        rgba(90,28,5,.4) 10%,
        rgba(90,28,5,.45) 90%,
        transparent 100%);
    pointer-events: none;
  }
  /* ---- 側面のリベット(オレンジ樹脂の下縁に並ぶ金属鋲) ---- */
  .rivet {
    position: absolute;
    width: 4.5px; height: 4.5px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 35% 28%,
        #f0efec 0%,
        #c9c8c4 22%,
        #8a8a86 55%,
        #5a5a56 80%,
        #2a2a26 100%);
    box-shadow:
      0 0 0 .5px rgba(10,5,0,.7),
      inset -.5px -.5px .8px rgba(0,0,0,.5),
      inset .4px .4px .4px rgba(255,255,255,.8),
      0 1px 1px rgba(0,0,0,.35);
    bottom: 3px;
    z-index: 5;
  }
  .rivet.r1 { left: 7px; }
  .rivet.r2 { left: 27%; }
  .rivet.r3 { left: 50%; transform: translateX(-50%); }
  .rivet.r4 { right: 27%; }
  .rivet.r5 { right: 7px; }

  /* ---- 黒ゴム帯(持ち手ストラップ・上面を横断) ---- */
  .eraser-strap {
    position: absolute;
    top: -2px;
    left: 44%;
    width: 15px;
    height: calc(55% + 4px);
    background:
      linear-gradient(90deg,
        #080604 0%,
        #1a1612 20%,
        #2d2822 48%,
        #1a1612 80%,
        #080604 100%);
    border-radius: 1.5px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -1px 1px rgba(0,0,0,.8),
      inset 1px 0 1px rgba(255,255,255,.05),
      inset -1px 0 1px rgba(0,0,0,.5),
      0 1px 2px rgba(0,0,0,.6);
    z-index: 4;
  }
  /* ゴム表面のうっすらしたマット質感 */
  .strap-texture {
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(90deg,
        transparent 0 2px,
        rgba(255,255,255,.04) 2px 2.5px),
      radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.12), transparent 70%);
    border-radius: 1.5px;
    pointer-events: none;
  }
  .strap-edge-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(180deg, rgba(80,70,60,.6), transparent);
    border-radius: 1.5px 1.5px 0 0;
  }
  .strap-edge-bottom {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(0deg, rgba(0,0,0,.7), transparent);
    border-radius: 0 0 1.5px 1.5px;
  }
  /* ストラップが落とす左右の影(オレンジ面とフェルト面の両方) */
  .strap-shadow-left,
  .strap-shadow-right {
    position: absolute;
    top: -1px;
    width: 5px;
    height: calc(55% + 3px);
    background: linear-gradient(90deg, rgba(0,0,0,.45), transparent);
    filter: blur(1px);
    pointer-events: none;
    z-index: 3;
  }
  .strap-shadow-left  { left: calc(44% - 5px); }
  .strap-shadow-right { left: calc(44% + 15px); transform: scaleX(-1); }

  /* ---- 木枠(チョーク受け)に落ちる接地影 ---- */
  .eraser-shadow {
    position: absolute;
    left: 4px; right: 4px;
    bottom: -5px;
    height: 8px;
    background: radial-gradient(ellipse at center,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.3) 40%,
      transparent 75%);
    filter: blur(2.5px);
    z-index: -1;
  }
  /* ---- 周囲に舞うチョーク粉 ---- */
  .eraser-chalk-dust {
    position: absolute;
    background: radial-gradient(circle, rgba(255,255,255,.7), transparent 70%);
    border-radius: 50%;
    filter: blur(1px);
    pointer-events: none;
  }
  .eraser-chalk-dust.dd1 { width: 12px; height: 12px; left: -8px; top: 10px; opacity: .4; }
  .eraser-chalk-dust.dd2 { width: 7px;  height: 7px;  left: -16px; top: 26px; opacity: .3; }
  .eraser-chalk-dust.dd3 { width: 16px; height: 7px;  right: -12px; bottom: 8px; opacity: .35; }
  .eraser-chalk-dust.dd4 { width: 5px;  height: 5px;  left: 50%;   top: -6px;   opacity: .3; }

  /* ============================================================
     BULLETIN BOARD — real school style: heavy wooden frame +
     glass-doored title strip on top, cork inside with shadow depth
     ============================================================ */
  .hallway {
    padding: 60px 28px 80px;
    position: relative;
  }

  .bulletin {
    max-width: 1340px;
    margin: 0 auto;
    position: relative;
    /* outer wooden frame */
    padding: 0 0 22px;
    background:
      /* wood grain on the frame */
      repeating-linear-gradient(90deg, rgba(60,30,10,.15) 0 1px, transparent 1px 40px),
      repeating-linear-gradient(90deg, rgba(255,230,180,.05) 0 2px, transparent 2px 90px),
      linear-gradient(180deg, var(--wood) 0%, var(--wood-mid) 50%, var(--wood-dark) 100%);
    border-radius: 6px;
    box-shadow:
      /* wall shadow */
      0 30px 50px rgba(60,30,10,.35),
      0 10px 20px rgba(60,30,10,.25),
      /* frame highlight/shadow */
      inset 0 2px 0 rgba(255,230,180,.25),
      inset 0 -2px 0 rgba(0,0,0,.3),
      inset 2px 0 0 rgba(0,0,0,.1),
      inset -2px 0 0 rgba(0,0,0,.1);
  }

  /* mounting screws at frame corners */
  .screw {
    position: absolute;
    width: 14px; height: 14px;
    border-radius: 50%;
    background:
      linear-gradient(135deg, #8a8885 0%, #5a5856 100%);
    box-shadow: inset -1px -1px 2px rgba(0,0,0,.5), inset 1px 1px 2px rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.4);
    z-index: 5;
  }
  .screw::after {
    content: "";
    position: absolute;
    inset: 4px;
    background:
      linear-gradient(90deg, transparent 45%, #2a2a28 45% 55%, transparent 55%),
      linear-gradient(0deg, transparent 45%, #2a2a28 45% 55%, transparent 55%);
    border-radius: 50%;
  }
  .screw.tl { top: 14px; left: 14px; }
  .screw.tr { top: 14px; right: 14px; }
  .screw.bl { bottom: 14px; left: 14px; }
  .screw.br { bottom: 14px; right: 14px; }

  /* Title strip — looks like a glass-fronted door with sliding label */
  .bulletin-title {
    position: relative;
    margin: 22px 40px 0;
    height: 64px;
    background:
      linear-gradient(180deg, #f8f5ea 0%, #ede4cd 100%);
    border: 3px solid var(--wood-deep);
    border-radius: 3px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 22px 0 28px;
    box-shadow:
      inset 0 3px 0 rgba(255,255,255,.6),
      inset 0 -3px 0 rgba(0,0,0,.15),
      /* subtle glass reflection */
      inset 40px 0 60px rgba(255,255,255,.35);
    overflow: hidden;
  }
  .bulletin-title::before {
    /* diagonal glass glare */
    content: "";
    position: absolute;
    top: -20%; left: -10%;
    width: 50%; height: 160%;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.2) 55%, transparent 65%);
    transform: rotate(-2deg);
    pointer-events: none;
  }
  .bulletin-title .label {
    position: relative;
    font-family: "Shippori Mincho", serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .3em;
    color: var(--ink);
  }
  .bulletin-title .label::before {
    /* vermilion seal to the left of the label */
    content: "学";
    display: inline-block;
    width: 34px; height: 34px;
    background: #c23c3c;
    color: white;
    font-size: 20px;
    text-align: center; line-height: 34px;
    letter-spacing: 0;
    margin-right: 14px;
    border-radius: 3px;
    transform: translateY(-2px) rotate(-3deg);
    box-shadow: 1px 2px 0 rgba(0,0,0,.2);
    vertical-align: middle;
    font-family: "Shippori Mincho", serif;
  }
  .bulletin-title .en {
    position: relative;
    font-family: "Caveat", cursive;
    font-size: 20px;
    color: var(--ink-soft);
    letter-spacing: .05em;
    white-space: nowrap;
  }
  @media (max-width: 980px) {
    .bulletin-title .en { display: none; }
  }
  .bulletin-title .room-no {
    position: relative;
    font-family: "DotGothic16", monospace;
    background: var(--chalk-board);
    color: var(--chalk-yellow);
    padding: 4px 12px;
    border-radius: 2px;
    font-size: 13px;
    letter-spacing: .15em;
    box-shadow: inset 0 0 0 2px rgba(244,241,232,.15);
  }

  /* cork surface inside the frame */
  .cork {
    position: relative;
    margin: 18px 22px 0;
    padding: 34px 28px 30px;
    min-height: 600px;
    background:
      radial-gradient(ellipse at 10% 10%, rgba(255,255,255,.06) 0 1.5px, transparent 2.5px),
      radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.1) 0 2px, transparent 3px),
      radial-gradient(ellipse at 80% 70%, rgba(255,255,255,.05) 0 1.5px, transparent 2.5px),
      radial-gradient(ellipse at 30% 80%, rgba(0,0,0,.08) 0 2px, transparent 3px),
      radial-gradient(ellipse at 70% 20%, rgba(255,255,255,.06) 0 1.5px, transparent 2.5px),
      radial-gradient(ellipse at 15% 60%, rgba(0,0,0,.07) 0 2px, transparent 3px),
      radial-gradient(ellipse at 60% 85%, rgba(255,255,255,.04) 0 1.5px, transparent 2.5px),
      linear-gradient(135deg, var(--cork) 0%, var(--cork-dark) 100%);
    background-size: 22px 22px, 17px 17px, 26px 26px, 20px 20px, 24px 24px, 19px 19px, 28px 28px, 100% 100%;
    border-radius: 3px;
    box-shadow:
      inset 0 0 0 3px var(--wood-deep),
      inset 0 10px 22px rgba(60,30,10,.5),
      inset 0 -10px 22px rgba(60,30,10,.45);
  }

  /* =========================================================
     MASONRY via CSS columns — naturally allows variable heights
     ========================================================= */
  .masonry {
    column-count: 3;
    column-gap: 26px;
  }
  @media (max-width: 1100px) { .masonry { column-count: 2; } }
  @media (max-width: 680px)  { .masonry { column-count: 1; } }

  .pin-item {
    position: relative;
    break-inside: avoid;
    margin-bottom: 26px;
    transform: rotate(var(--tilt, 0deg));
    transition: transform .32s cubic-bezier(.2,.9,.3,1.3), filter .32s;
  }

  /* =========================================================
     APP CARD — learning "プリント" with red margin line, notebook
     ruling, stamp, and a tear strip at the bottom like a handout
     ========================================================= */
  .app {
    display: block;
    color: var(--ink);
    text-decoration: none;
    position: relative;
    padding: 22px 22px 20px;
    background: var(--paper);
    background-image:
      linear-gradient(var(--paper), var(--paper)),
      repeating-linear-gradient(180deg, transparent 0 31px, var(--paper-line) 31px 32px);
    background-blend-mode: multiply;
    box-shadow:
      0 2px 0 rgba(0,0,0,.06),
      8px 14px 22px rgba(60,30,10,.35),
      inset 0 0 40px rgba(180,150,100,.06);
  }
  .app::before {
    content: ""; position: absolute;
    left: 46px; top: 0; bottom: 0; width: 1px;
    background: var(--paper-red); opacity: .35;
  }
  .app-title-row {
    padding-left: 14px;
    display: flex; align-items: flex-start; gap: 14px;
    margin-bottom: 12px;
  }
  .app-icon {
    position: relative;
    width: 72px; height: 72px;
    border-radius: 14px;
    overflow: hidden;
    background: #eee;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.4);
    transform: rotate(calc(var(--tilt, 0deg) * -0.7));
    transition: transform .32s;
  }
  .app-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .app-title-main { min-width: 0; flex: 1; }
  .app-en {
    font-family: "Caveat", cursive;
    font-size: 18px;
    color: var(--ink-soft);
    line-height: 1;
  }
  .app-ja {
    font-family: "Klee One", serif;
    font-weight: 600;
    font-size: 21px;
    letter-spacing: .02em;
    margin: 2px 0 0;
    line-height: 1.2;
  }
  .app-stamp {
    position: absolute;
    top: 16px; right: 14px;
    width: 62px; height: 62px;
    border: 2.5px solid var(--paper-red);
    border-radius: 50%;
    color: var(--paper-red);
    font-family: "Shippori Mincho", serif;
    font-weight: 800;
    font-size: 14px;
    display: grid; place-items: center;
    transform: rotate(-12deg);
    opacity: .78;
    background: rgba(216,90,90,.04);
    pointer-events: none;
    letter-spacing: .05em;
  }
  .app-stamp::after {
    content: "";
    position: absolute; inset: -5px;
    border: 1px dashed var(--paper-red);
    border-radius: 50%;
    opacity: .4;
  }
  .app-catch {
    padding-left: 14px;
    margin-bottom: 6px;
    font-family: "Yusei Magic", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ink);
    letter-spacing: .02em;
  }
  .app-desc {
    padding-left: 14px;
    font-family: "Zen Kurenaido", cursive;
    font-size: 15px;
    line-height: 1.75;
    color: var(--ink-soft);
  }
  .app-meta {
    padding-left: 14px;
    margin-top: 12px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  }
  .subject-chip {
    font-family: "Yusei Magic", sans-serif;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--chip-bg, #e7e1cf);
    color: var(--chip-fg, var(--ink));
    letter-spacing: .08em; font-weight: 700;
  }
  .app-url {
    font-family: "DotGothic16", monospace;
    font-size: 11px;
    color: var(--ink-soft);
    margin-left: auto;
    opacity: .7;
  }
  .app-visit {
    padding-left: 14px;
    margin-top: 14px;
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1.5px dashed var(--paper-line);
    padding-top: 12px;
  }
  .visit-btn {
    font-family: "Yusei Magic", sans-serif;
    font-size: 13px; font-weight: 700; color: var(--ink);
    display: flex; align-items: center; gap: 6px;
  }
  .arrow { display: inline-block; transition: transform .3s; }
  .app-no {
    font-family: "DotGothic16", monospace;
    font-size: 11px; color: var(--ink-soft); opacity: .6;
  }

  /* Pin (top-center) */
  .pin-dot {
    position: absolute;
    top: -12px; left: 50%; transform: translateX(-50%);
    width: 26px; height: 26px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), transparent 42%), var(--pin-color, var(--pin-red));
    box-shadow: 0 2px 0 rgba(0,0,0,.2), 0 6px 10px rgba(0,0,0,.3), inset -2px -3px 4px rgba(0,0,0,.3);
    z-index: 4;
  }
  .pin-dot::after {
    content: "";
    position: absolute; left: 50%; top: 100%;
    width: 3px; height: 14px;
    background: linear-gradient(180deg, #999, #444);
    transform: translate(-50%, -2px);
    border-radius: 0 0 2px 2px;
  }

  /* Masking tape (alt fixing) */
  .tape {
    position: absolute;
    top: -14px; left: 50%;
    width: 92px; height: 26px;
    transform: translateX(-50%) rotate(-4deg);
    background: var(--tape-color, var(--tape-mint));
    opacity: .88;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
    z-index: 4;
    border-left: 1px dashed rgba(0,0,0,.08);
    border-right: 1px dashed rgba(0,0,0,.08);
  }
  .tape::before, .tape::after {
    content: ""; position: absolute;
    top: 0; bottom: 0; width: 7px;
    background: inherit; opacity: .65;
  }
  .tape::before { left: -7px; clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 92%); }
  .tape::after  { right: -7px; clip-path: polygon(0 0, 100% 12%, 100% 88%, 0 100%); }
  .tape.horizontal-pattern {
    background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.08) 6px 7px);
  }

  /* Hover for apps */
  .pin-item.is-app:hover {
    transform: rotate(calc(var(--tilt, 0deg) * 0.25)) translateY(-6px) scale(1.02);
    filter: drop-shadow(0 12px 22px rgba(60,30,10,.45));
    z-index: 10;
  }
  .pin-item.is-app:hover .app-icon { transform: rotate(0deg) scale(1.05); }
  .pin-item.is-app:hover .arrow { transform: translateX(6px); }

  /* =========================================================
     DECOR ITEMS (non-clickable, purely atmospheric)
     ========================================================= */

  /* ------- お知らせ紙（校長先生から） ------- */
  .decor-notice {
    position: relative;
    padding: 22px 24px 24px;
    background: var(--paper-cream);
    background-image:
      radial-gradient(circle at 15% 20%, rgba(110,80,40,.05) 0 1px, transparent 2px),
      radial-gradient(circle at 70% 60%, rgba(110,80,40,.04) 0 1px, transparent 2px);
    box-shadow: 0 2px 0 rgba(0,0,0,.05), 8px 12px 20px rgba(60,30,10,.3);
  }
  .decor-notice .hdr {
    display: flex; justify-content: space-between; align-items: flex-start;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 8px;
    margin-bottom: 12px;
  }
  .decor-notice .hdr h3 {
    margin: 0;
    font-family: "Shippori Mincho", serif;
    font-size: 22px;
    letter-spacing: .1em;
  }
  .decor-notice .date-small {
    font-family: "DotGothic16", monospace;
    font-size: 11px;
    color: var(--ink-soft);
    text-align: right;
    line-height: 1.4;
  }
  .decor-notice .body {
    font-family: "Klee One", serif;
    font-size: 14px; line-height: 1.85;
    color: var(--ink);
  }
  .decor-notice .body .indent { display: block; text-indent: 1em; }
  .decor-notice .sig {
    margin-top: 12px;
    text-align: right;
    font-family: "Shippori Mincho", serif;
    font-size: 14px;
  }
  .decor-notice .seal {
    display: inline-block;
    width: 34px; height: 34px;
    border: 2px solid #c23c3c;
    color: #c23c3c;
    font-family: "Shippori Mincho", serif;
    font-size: 14px; font-weight: 800;
    text-align: center; line-height: 30px;
    margin-left: 8px;
    transform: rotate(-4deg);
    vertical-align: middle;
    background: rgba(194,60,60,.04);
  }

  /* ------- 時間割表 ------- */
  .decor-timetable {
    position: relative;
    padding: 16px 16px 18px;
    background: var(--paper);
    box-shadow: 0 2px 0 rgba(0,0,0,.05), 8px 12px 20px rgba(60,30,10,.3);
  }
  .decor-timetable h3 {
    margin: 0 0 10px;
    font-family: "Shippori Mincho", serif;
    font-size: 16px;
    letter-spacing: .2em;
    text-align: center;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--ink);
  }
  .decor-timetable table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Klee One", serif;
    font-size: 11px;
  }
  .decor-timetable th, .decor-timetable td {
    border: 1px solid #bbb;
    padding: 6px 4px;
    text-align: center;
    height: 26px;
  }
  .decor-timetable th {
    background: #2d4a3e;
    color: var(--chalk);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .1em;
  }
  .decor-timetable td.period {
    background: #f0e8d4;
    font-family: "DotGothic16", monospace;
    font-size: 10px;
    color: var(--ink-soft);
    width: 32px;
  }
  .decor-timetable td.lunch {
    background: #f5d76e;
    font-size: 10px;
    font-weight: 700;
  }
  .decor-timetable td.subject-eng { color: #c23c3c; }
  .decor-timetable td.subject-jp { color: #2a5b8e; }
  .decor-timetable td.subject-math { color: #4a7a3e; }
  .decor-timetable td.subject-art { color: #a75c9e; }
  .decor-timetable td.subject-info { color: #0e7a8a; }
  .decor-timetable td.subject-hr { color: #888; font-size: 10px; }
  .decor-timetable .caption {
    margin-top: 8px;
    font-family: "Zen Kurenaido", cursive;
    font-size: 11px;
    color: var(--ink-soft);
    text-align: right;
  }

  /* ------- 勉強五箇条ポスター ------- */
  .decor-poster.study-tips {
    aspect-ratio: 3 / 4.2;
    background:
      radial-gradient(ellipse at 20% 0%, rgba(255,220,160,.15) 0%, transparent 50%),
      radial-gradient(ellipse at 100% 100%, rgba(255,220,160,.1) 0%, transparent 50%),
      repeating-linear-gradient(90deg, transparent 0 40px, rgba(0,0,0,.04) 40px 41px),
      linear-gradient(180deg, #f3e8cb 0%, #e8d8b0 100%);
    color: #2a1a0a;
    padding: 14px;
    overflow: hidden;
  }
  .decor-poster.study-tips::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 2px solid #2a1a0a;
    pointer-events: none;
    z-index: 1;
  }
  .decor-poster.study-tips::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid #2a1a0a;
    opacity: .3;
    pointer-events: none;
    z-index: 1;
  }
  .decor-poster.study-tips .tips-frame {
    position: relative;
    padding: 18px 18px 14px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 2;
  }
  .decor-poster.study-tips .tips-badge {
    align-self: center;
    text-align: center;
    padding: 6px 14px 5px;
    background: #2a1a0a;
    color: #f3e8cb;
    margin-bottom: 12px;
    line-height: 1.2;
  }
  .decor-poster.study-tips .tips-badge .b-ja {
    display: block;
    font-family: "Shippori Mincho", serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .35em;
    padding-right: .05em;
    padding-left: .35em;
  }
  .decor-poster.study-tips .tips-badge .b-num {
    display: block;
    font-family: "Shippori Mincho", serif;
    font-size: 8px;
    letter-spacing: .3em;
    opacity: .75;
    margin-top: 2px;
    padding-left: .3em;
  }
  .decor-poster.study-tips .tips-title {
    text-align: center;
    margin: 4px 0 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .decor-poster.study-tips .tips-title .t-sub {
    font-family: "Klee One", serif;
    font-size: 10px;
    color: #5a3e1e;
    letter-spacing: .15em;
  }
  .decor-poster.study-tips .tips-title .t-main {
    font-family: "Shippori Mincho", serif;
    font-weight: 800;
    font-size: 30px;
    letter-spacing: .12em;
    line-height: 1;
    color: #2a1a0a;
    padding-left: .12em;
    position: relative;
  }
  .decor-poster.study-tips .tips-title .t-main::before,
  .decor-poster.study-tips .tips-title .t-main::after {
    content: "";
    display: inline-block;
    width: 24px; height: 2px;
    background: #a83030;
    vertical-align: middle;
    margin: 0 10px 6px;
  }
  .decor-poster.study-tips .tips-title .t-en {
    font-family: "Shippori Mincho", serif;
    font-size: 9px;
    letter-spacing: .5em;
    color: #a83030;
    padding-left: .5em;
  }
  .decor-poster.study-tips .tips-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    counter-reset: tips;
  }
  .decor-poster.study-tips .tips-list li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(42,26,10,.25);
  }
  .decor-poster.study-tips .tips-list li:last-child { border: none; }
  .decor-poster.study-tips .tips-list .num {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    background: #a83030;
    color: #f3e8cb;
    font-family: "Shippori Mincho", serif;
    font-weight: 800;
    font-size: 18px;
    border-radius: 2px;
    box-shadow: 2px 2px 0 rgba(42,26,10,.7);
  }
  .decor-poster.study-tips .tips-list .body b {
    display: block;
    font-family: "Shippori Mincho", serif;
    font-weight: 700;
    font-size: 15px;
    color: #2a1a0a;
    letter-spacing: .05em;
    line-height: 1.2;
  }
  .decor-poster.study-tips .tips-list .body em {
    display: block;
    font-family: "Klee One", serif;
    font-style: normal;
    font-size: 10px;
    color: #5a3e1e;
    margin-top: 3px;
    letter-spacing: .02em;
    line-height: 1.4;
  }
  .decor-poster.study-tips .tips-foot {
    margin-top: 10px;
    text-align: center;
  }
  .decor-poster.study-tips .foot-line {
    height: 1px;
    background: #2a1a0a;
    margin: 0 auto 6px;
    width: 60%;
    opacity: .4;
  }
  .decor-poster.study-tips .foot-text {
    font-family: "Shippori Mincho", serif;
    font-size: 10px;
    letter-spacing: .18em;
    color: #5a3e1e;
  }
  .decor-poster.study-tips .foot-text .dot { opacity: .5; margin: 0 4px; }
  .decor-poster.study-tips .tips-stamp {
    position: absolute;
    bottom: 14px;
    right: 10px;
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    border: 2px solid #a83030;
    color: #a83030;
    font-family: "Shippori Mincho", serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .1em;
    line-height: 1.1;
    text-align: center;
    transform: rotate(-8deg);
    border-radius: 4px;
    opacity: .9;
    z-index: 3;
    background: rgba(243,232,203,.8);
  }

  /* ------- ポスター（読書週間など） ------- */
  .decor-poster {
    position: relative;
    aspect-ratio: 3 / 4;
    padding: 24px 20px;
    color: white;
    overflow: hidden;
    box-shadow: 0 2px 0 rgba(0,0,0,.05), 8px 12px 20px rgba(60,30,10,.3);
  }
  .decor-poster.reading {
    background:
      radial-gradient(circle at 30% 30%, #f5c66a 0%, transparent 50%),
      radial-gradient(circle at 70% 80%, #c85a3c 0%, transparent 55%),
      linear-gradient(135deg, #7a2e1e 0%, #4a1a0e 100%);
  }
  .decor-poster.health {
    background:
      radial-gradient(circle at 80% 20%, #fff4c2 0%, transparent 40%),
      linear-gradient(160deg, #6cb5a8 0%, #3d7d73 100%);
  }
  .decor-poster.bousai {
    background:
      repeating-linear-gradient(45deg, #f4b94a 0 20px, #e69a2a 20px 40px);
    color: #2a1e0a;
  }
  .decor-poster .poster-big {
    font-family: "Shippori Mincho", serif;
    font-weight: 800;
    font-size: 44px;
    line-height: 1;
    letter-spacing: .02em;
    text-shadow: 2px 2px 0 rgba(0,0,0,.2);
    writing-mode: vertical-rl;
    position: absolute;
    top: 20px; right: 20px;
    bottom: 60px;
  }
  .decor-poster .poster-big.horizontal {
    writing-mode: horizontal-tb;
    position: static;
    font-size: 38px;
    margin-bottom: 8px;
  }
  .decor-poster .poster-sub {
    font-family: "Klee One", serif;
    font-size: 13px; line-height: 1.6;
    position: absolute; bottom: 20px; left: 20px; right: 20px;
    opacity: .95;
  }
  .decor-poster .poster-period {
    position: absolute;
    top: 18px; left: 18px;
    font-family: "DotGothic16", monospace;
    font-size: 11px;
    letter-spacing: .2em;
    padding: 4px 10px;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.4);
  }
  .decor-poster.bousai .poster-period {
    background: #2a1e0a; color: #f4b94a; border-color: #2a1e0a;
  }
  .decor-poster svg.decor-svg {
    position: absolute;
    left: 20px; bottom: 64px;
    width: 90px; height: 90px;
    opacity: .9;
  }

  /* ------- 写真（運動会・遠足のスナップ） ------- */
  .decor-photo {
    background: white;
    padding: 12px 12px 34px;
    box-shadow: 0 2px 0 rgba(0,0,0,.05), 8px 12px 20px rgba(60,30,10,.3);
    position: relative;
  }
  .decor-photo .frame {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(160deg, #87c8d8 0%, #c2dd92 100%);
  }
  .decor-photo .frame.sunset {
    background:
      linear-gradient(180deg, #f5a56c 0%, #e8603c 50%, #8a2e1e 100%);
  }
  .decor-photo .frame.classroom {
    background:
      linear-gradient(180deg, #d4c9a8 0%, #a89878 100%);
  }
  .decor-photo .caption {
    font-family: "Zen Kurenaido", cursive;
    font-size: 13px;
    color: #333;
    text-align: center;
    margin-top: 8px;
    letter-spacing: .05em;
  }
  .decor-photo .date-stamp {
    position: absolute;
    bottom: 10px; right: 12px;
    font-family: "DotGothic16", monospace;
    font-size: 9px;
    color: #c23c3c;
    background: rgba(255,255,255,.9);
    padding: 1px 4px;
  }
  /* photo svg "scenery" */
  .decor-photo .frame svg { width: 100%; height: 100%; display: block; }

  /* ------- カレンダー切り抜き ------- */
  .decor-calendar {
    position: relative;
    background: #fffdf7;
    box-shadow: 0 2px 0 rgba(0,0,0,.05), 8px 12px 20px rgba(60,30,10,.3);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(60,30,10,.1);
  }
  .decor-calendar .cal-header {
    background: linear-gradient(180deg, #c23c3c 0%, #a83030 100%);
    color: #fff8e8;
    padding: 14px 16px 12px;
    font-family: "Shippori Mincho", serif;
    text-align: center;
    font-weight: 700;
    position: relative;
  }
  .decor-calendar .cal-header .cal-month-num {
    font-family: "Shippori Mincho", serif;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
  }
  .decor-calendar .cal-header .cal-month-sub {
    font-family: "Shippori Mincho", serif;
    font-size: 11px;
    letter-spacing: .4em;
    margin-top: 4px;
    opacity: .85;
  }
  .decor-calendar .cal-header .cal-year {
    position: absolute;
    top: 10px; right: 12px;
    font-family: "DotGothic16", monospace;
    font-size: 11px;
    letter-spacing: .15em;
    opacity: .75;
  }
  .decor-calendar .cal-body { padding: 14px 14px 16px; }
  .decor-calendar .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    font-family: "Shippori Mincho", serif;
    font-size: 14px;
    text-align: center;
    row-gap: 2px;
  }
  .decor-calendar .cal-grid .dow {
    font-family: "Shippori Mincho", serif;
    font-weight: 700;
    font-size: 12px;
    color: var(--ink-soft);
    padding: 4px 0 6px;
    border-bottom: 1px solid #d9cfb4;
    margin-bottom: 4px;
    letter-spacing: 0;
  }
  .decor-calendar .cal-grid .dow.sun { color: #c23c3c; }
  .decor-calendar .cal-grid .dow.sat { color: #2a5b8e; }
  .decor-calendar .cal-grid .day {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    font-weight: 500;
    position: relative;
    line-height: 1;
  }
  .decor-calendar .cal-grid .day.sun { color: #c23c3c; }
  .decor-calendar .cal-grid .day.sat { color: #2a5b8e; }
  .decor-calendar .cal-grid .day.event {
    font-weight: 700;
  }
  .decor-calendar .cal-grid .day.today {
    color: #fff8e8;
    font-weight: 800;
  }
  .decor-calendar .cal-grid .day.today::before {
    content: "";
    position: absolute;
    width: 28px; height: 28px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--paper-red);
    border-radius: 50%;
    z-index: -1;
  }
  .decor-calendar .cal-grid .day.today {
    isolation: isolate;
  }
  .decor-calendar .cal-foot {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed #bbb;
    font-family: "Klee One", serif;
    font-size: 11px;
    color: var(--ink-soft);
    text-align: center;
    letter-spacing: .1em;
  }
  .decor-calendar .events {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #bbb;
    font-family: "Klee One", serif;
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.6;
  }
  .decor-calendar .events b { color: var(--paper-red); }
  .decor-calendar .cal-foot {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px dashed #bbb;
    font-family: "Klee One", serif;
    font-size: 12px;
    color: var(--ink-soft);
    text-align: center;
  }

  /* ------- 名言 カード ------- */
  .decor-meishi {
    position: relative;
    padding: 20px 18px 22px;
    box-shadow: 0 2px 0 rgba(0,0,0,.06), 8px 12px 20px rgba(60,30,10,.3);
    overflow: hidden;
  }
  .decor-meishi.m1 {
    background:
      repeating-linear-gradient(0deg, transparent 0 22px, rgba(60,30,10,.05) 22px 23px),
      var(--paper-cream);
    border: 1px solid rgba(60,30,10,.12);
  }
  .decor-meishi.m2 {
    background:
      radial-gradient(circle at 10% 10%, rgba(120,180,160,.2), transparent 50%),
      #f3ecd8;
    border: 1px solid rgba(60,30,10,.12);
  }
  .decor-meishi.m3 {
    background: #f5ecd4;
    border: 2px solid #2a1e0a;
    box-shadow:
      inset 0 0 0 3px #f5ecd4,
      inset 0 0 0 4px #2a1e0a,
      0 2px 0 rgba(0,0,0,.05), 8px 12px 20px rgba(60,30,10,.3);
  }
  .decor-meishi.m4 {
    background: var(--paper-red);
    color: #f5ecd4;
  }
  .decor-meishi .meishi-mark {
    position: absolute;
    top: 10px; left: 10px;
    font-family: "Shippori Mincho", serif;
    font-size: 10px;
    letter-spacing: .4em;
    color: var(--paper-red);
    padding: 2px 6px;
    border: 1px solid currentColor;
    opacity: .8;
  }
  .decor-meishi.m4 .meishi-mark { color: #f5ecd4; }
  .decor-meishi .meishi-body {
    font-family: "Shippori Mincho", serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.75;
    letter-spacing: .05em;
    color: var(--ink);
    text-align: center;
    margin: 28px 8px 14px;
  }
  .decor-meishi.m4 .meishi-body { color: #fff6e0; font-size: 26px; letter-spacing: .18em; }
  .decor-meishi.m3 .meishi-body { font-size: 18px; }
  .decor-meishi .meishi-sub {
    font-family: "Zen Kurenaido", cursive;
    font-size: 12px;
    color: var(--ink-soft);
    text-align: center;
    margin: -4px 4px 10px;
    line-height: 1.6;
  }
  .decor-meishi.m4 .meishi-sub { color: #f3e5c0; }
  .decor-meishi .meishi-who {
    font-family: "Shippori Mincho", serif;
    font-size: 11px;
    color: var(--ink-soft);
    text-align: right;
    letter-spacing: .15em;
    padding-right: 6px;
  }
  .decor-meishi.m4 .meishi-who { color: #f5d8a8; }

  /* ------- 忘れ物届 ------- */
  .decor-lost {
    background: var(--paper-cream);
    padding: 18px 18px 20px;
    box-shadow: 0 2px 0 rgba(0,0,0,.05), 8px 12px 20px rgba(60,30,10,.3);
    position: relative;
  }
  .decor-lost h3 {
    margin: 0 0 10px;
    text-align: center;
    font-family: "Shippori Mincho", serif;
    font-size: 18px;
    letter-spacing: .2em;
    padding: 4px 0;
    background: var(--ink);
    color: var(--paper-cream);
  }
  .decor-lost .item {
    font-family: "Klee One", serif;
    font-size: 13px;
    line-height: 1.6;
    padding: 6px 2px;
    border-bottom: 1px dashed #aaa;
    display: flex; justify-content: space-between; gap: 8px;
  }
  .decor-lost .item:last-child { border: none; }
  .decor-lost .item .when {
    font-family: "DotGothic16", monospace;
    font-size: 10px;
    color: var(--ink-soft);
    white-space: nowrap;
  }

  /* ------- 部活勧誘の短冊 ------- */
  .decor-tanzaku {
    background: var(--club-color, #e67a7a);
    color: white;
    padding: 18px 14px;
    text-align: center;
    font-family: "Shippori Mincho", serif;
    box-shadow: 0 2px 0 rgba(0,0,0,.05), 6px 10px 16px rgba(60,30,10,.3);
  }
  .decor-tanzaku .ttl {
    font-size: 22px;
    letter-spacing: .2em;
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1.3;
  }
  .decor-tanzaku .body {
    font-family: "Klee One", serif;
    font-size: 12px;
    line-height: 1.6;
    opacity: .95;
  }
  .decor-tanzaku .footer-note {
    margin-top: 10px;
    font-family: "DotGothic16", monospace;
    font-size: 10px;
    letter-spacing: .1em;
    opacity: .8;
  }

  /* ------- 校歌・四字熟語 の短い紙 ------- */
  .decor-quote {
    background: #f0e4c8;
    padding: 20px 18px;
    text-align: center;
    box-shadow: 0 2px 0 rgba(0,0,0,.05), 6px 10px 16px rgba(60,30,10,.3);
    font-family: "Shippori Mincho", serif;
    position: relative;
  }
  .decor-quote::before, .decor-quote::after {
    content: "";
    position: absolute; left: 8px; right: 8px; height: 1px;
    background: var(--ink); opacity: .3;
  }
  .decor-quote::before { top: 8px; }
  .decor-quote::after { bottom: 8px; }
  .decor-quote .kanji4 {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: .2em;
    color: var(--ink);
    margin-bottom: 8px;
  }
  .decor-quote .reading {
    font-family: "Yusei Magic", sans-serif;
    font-size: 11px;
    color: var(--ink-soft);
    letter-spacing: .2em;
    margin-bottom: 6px;
  }
  .decor-quote .mean {
    font-family: "Klee One", serif;
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.6;
  }

  /* Corner stickers for playful decor */
  .corner-sticker {
    position: absolute;
    width: 48px; height: 48px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-family: "Yusei Magic", sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: white;
    box-shadow: 0 3px 6px rgba(0,0,0,.25);
    z-index: 3;
    top: -14px; right: -14px;
    transform: rotate(14deg);
    line-height: 1.1;
    text-align: center;
  }

  /* ------- 学習時間ランキング ------- */
  .decor-ranking {
    background: var(--paper);
    padding: 18px 18px 18px;
    box-shadow: 0 2px 0 rgba(0,0,0,.05), 8px 12px 20px rgba(60,30,10,.3);
  }
  .decor-ranking h3 {
    margin: 0 0 4px;
    font-family: "Shippori Mincho", serif;
    font-size: 17px;
    letter-spacing: .18em;
    text-align: center;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--ink);
  }
  .decor-ranking .rank-sub {
    font-family: "Zen Kurenaido", cursive;
    font-size: 11px;
    color: var(--ink-soft);
    text-align: center;
    margin: 6px 0 10px;
  }
  .decor-ranking .rank-row {
    display: grid;
    grid-template-columns: 20px 70px 1fr 36px;
    gap: 8px;
    align-items: center;
    padding: 5px 2px;
    font-family: "Klee One", serif;
    font-size: 12px;
    border-bottom: 1px dashed #ccc;
  }
  .decor-ranking .rank-row:last-of-type { border: none; }
  .decor-ranking .rk {
    font-family: "DotGothic16", monospace;
    font-weight: 800;
    text-align: center;
    color: var(--ink-soft);
  }
  .decor-ranking .rank-1 .rk { color: #d4a82e; font-size: 15px; }
  .decor-ranking .rank-2 .rk { color: #8a8a92; font-size: 14px; }
  .decor-ranking .rank-3 .rk { color: #c08758; font-size: 13px; }
  .decor-ranking .nm { font-weight: 600; }
  .decor-ranking .bar {
    height: 10px;
    background: linear-gradient(90deg, var(--paper-red) 0 var(--w), #e8ddc4 var(--w) 100%);
    border-radius: 2px;
  }
  .decor-ranking .hr {
    font-family: "DotGothic16", monospace;
    font-size: 11px;
    text-align: right;
    color: var(--ink-soft);
  }
  .decor-ranking .rank-note {
    margin-top: 10px;
    font-family: "Zen Kurenaido", cursive;
    font-size: 10px;
    color: var(--ink-soft);
    line-height: 1.5;
  }

  /* ------- 検定合格者掲示 ------- */
  .decor-kentei {
    background: var(--paper-cream);
    padding: 16px 16px 18px;
    box-shadow: 0 2px 0 rgba(0,0,0,.05), 8px 12px 20px rgba(60,30,10,.3);
    border: 1px solid rgba(60,30,10,.15);
  }
  .decor-kentei h3 {
    margin: 0 0 4px;
    text-align: center;
    font-family: "Shippori Mincho", serif;
    font-size: 17px;
    letter-spacing: .2em;
    padding: 6px 0;
    border-top: 3px double var(--ink);
    border-bottom: 3px double var(--ink);
  }
  .decor-kentei .kentei-sub {
    font-family: "Zen Kurenaido", cursive;
    font-size: 11px;
    color: var(--ink-soft);
    text-align: center;
    margin: 8px 0 10px;
  }
  .decor-kentei .kentei-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 6px 2px;
    border-bottom: 1px dotted #aaa;
    font-family: "Klee One", serif;
    font-size: 13px;
  }
  .decor-kentei .kentei-item:last-of-type { border: none; }
  .decor-kentei .kt {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
  }
  .decor-kentei .kn {
    font-family: "Shippori Mincho", serif;
    color: #c23c3c;
    text-align: right;
    letter-spacing: .05em;
  }
  .decor-kentei .kentei-foot {
    margin-top: 10px;
    font-family: "Zen Kurenaido", cursive;
    font-size: 11px;
    color: var(--ink-soft);
    text-align: center;
  }

  /* ============================================================
     PEEL-OFF TRANSITION (on app click)
     ============================================================ */
  .peeling .pin-item:not(.is-peeling) {
    transition: opacity .4s ease, filter .4s ease;
    opacity: .4;
    filter: blur(1px) saturate(.7);
    pointer-events: none;
  }
  .pin-item.is-peeling {
    z-index: 1000;
    animation: peel-off 1100ms cubic-bezier(.5,.05,.7,.4) forwards;
    transform-origin: 50% -10px;
  }
  .pin-item.is-peeling .pin-dot,
  .pin-item.is-peeling .tape {
    /* pin stays on the board — keep it in place while paper falls */
    animation: pin-stay 1100ms ease forwards;
  }
  @keyframes peel-off {
    0%   { transform: rotate(var(--tilt, 0deg)) translate(0,0) scale(1); filter: drop-shadow(0 4px 10px rgba(0,0,0,.2)); }
    15%  { transform: rotate(calc(var(--tilt, 0deg) + 4deg)) translate(4px, -4px) scale(1.02); }
    35%  { transform: rotate(-14deg) translate(30px, 40px) scale(1); filter: drop-shadow(20px 30px 20px rgba(0,0,0,.35)); }
    70%  { transform: rotate(-48deg) translate(80px, 300px) scale(.92); opacity: .95; }
    100% { transform: rotate(-80deg) translate(140px, 900px) scale(.8); opacity: 0; filter: drop-shadow(40px 60px 30px rgba(0,0,0,.3)); }
  }
  @keyframes pin-stay {
    0%   { transform: translateX(-50%) rotate(0deg); }
    12%  { transform: translateX(-50%) rotate(0deg) scale(1.2); }
    100% { transform: translateX(-50%) rotate(0deg); }
  }
  /* When peeling, detach the pin from the paper by keeping it in the original card position.
     We duplicate the pin visually via a leftover pin on the cork. */
  .pin-leftover {
    position: absolute;
    width: 26px; height: 26px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), transparent 42%), var(--pin-color, var(--pin-red));
    box-shadow: 0 2px 0 rgba(0,0,0,.2), 0 6px 10px rgba(0,0,0,.3), inset -2px -3px 4px rgba(0,0,0,.3);
    z-index: 999;
    pointer-events: none;
    animation: pin-leftover-in .3s ease;
  }
  .pin-leftover.is-tape {
    width: 92px; height: 26px; border-radius: 0;
    background: var(--tape-color, var(--tape-mint));
    opacity: .88;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
    transform: rotate(-4deg);
  }
  @keyframes pin-leftover-in {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }
  .pin-item.is-peeling .pin-dot,
  .pin-item.is-peeling .tape { display: none; }

  /* Transition overlay (darken during redirect) */
  .transit-veil {
    position: fixed; inset: 0;
    background: rgba(30,20,10,0);
    pointer-events: none; z-index: 9998;
    transition: background .9s ease;
  }
  .transit-veil.on { background: rgba(30,20,10,.55); }

  /* ============================================================
     FOOTER
     ============================================================ */
  .footer {
    background:
      repeating-linear-gradient(90deg, var(--wood-deep) 0 1px, transparent 1px 120px),
      linear-gradient(180deg, var(--wood) 0%, var(--wood-dark) 100%);
    color: #f5ecd4;
    padding: 22px 40px 40px;
    font-family: "Yusei Magic", sans-serif;
    font-size: 13px;
    border-top: 8px solid var(--wood-deep);
    box-shadow: inset 0 6px 12px rgba(0,0,0,.3);
  }
  .footer-inner {
    max-width: 1320px; margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center;
    gap: 20px; flex-wrap: wrap;
  }
  .footer .bell { display: inline-flex; align-items: center; gap: 8px; opacity: .85; }
  .footer .sig { font-family: "Caveat", cursive; font-size: 22px; }

  /* ============================================================
     DARK "AFTER SCHOOL" MODE
     ============================================================ */
  body[data-dark="true"] { background: #1a1d24; }
  body[data-dark="true"]::before { filter: brightness(.25) saturate(.6); }
  body[data-dark="true"] .hallway { filter: brightness(.78) saturate(.85); }
  body[data-dark="true"] .blackboard { filter: brightness(.85); }
  body[data-dark="true"] .footer { filter: brightness(.7); }
  body[data-dark="true"]::after {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 50% 30% at 80% 20%, rgba(255,200,100,.08), transparent 70%);
    z-index: 100;
  }

  /* ============================================================
     TWEAKS PANEL
     ============================================================ */
  .tweaks {
    position: fixed; right: 24px; bottom: 24px;
    width: 280px;
    background: #fbf7ec;
    border: 3px solid #2d4a3e;
    border-radius: 4px; padding: 16px 18px;
    font-family: "Yusei Magic", sans-serif;
    box-shadow: 6px 6px 0 rgba(0,0,0,.2);
    z-index: 1000; display: none;
  }
  .tweaks[data-open="true"] { display: block; }
  .tweaks h3 {
    margin: 0 0 12px;
    font-family: "Shippori Mincho", serif;
    font-size: 16px;
    border-bottom: 2px dashed #2d4a3e;
    padding-bottom: 8px;
    display: flex; justify-content: space-between; align-items: center;
  }
  .tweaks h3 small { font-family: "Caveat", cursive; font-weight: 400; opacity: .6; font-size: 14px; }
  .tweak-row { margin-bottom: 12px; }
  .tweak-row label { display: block; font-size: 11px; letter-spacing: .15em; color: #4a5a64; margin-bottom: 6px; font-weight: 700; }
  .tweak-toggle { display: flex; justify-content: space-between; align-items: center; }
  .tweak-toggle .switch {
    width: 40px; height: 22px; background: #ccc; border-radius: 999px;
    position: relative; cursor: pointer; transition: background .2s;
  }
  .tweak-toggle .switch::after {
    content: ""; position: absolute; width: 18px; height: 18px;
    background: white; border-radius: 50%; top: 2px; left: 2px;
    transition: left .2s;
  }
  .tweak-toggle.on .switch { background: #2d4a3e; }
  .tweak-toggle.on .switch::after { left: 20px; }

  /* Responsive */
  @media (max-width: 720px) {
    .board-inner { grid-template-columns: 1fr; gap: 16px; text-align: center; }
    .blackboard .today { text-align: center; min-width: 0; }
    .school-title h1 { font-size: 48px; }
    .hallway { padding: 30px 12px 40px; }
    .bulletin-title { margin: 18px 14px 0; padding: 0 14px; height: 52px; }
    .bulletin-title .label { font-size: 18px; letter-spacing: .15em; }
    .bulletin-title .en { display: none; }
    .cork { margin: 14px 10px 0; padding: 24px 14px 18px; }
    .tweaks { width: calc(100% - 32px); right: 16px; bottom: 16px; }
  }