/* サイト共通の「ポップ」な見た目（2026-10-19 社長「イラスト増やしてポップなかんじに、AI感もなくしてね」）。
   各ページの css の後ろで読む（後から上書きする）。🔴 画面だけ＝印刷するプリントの見た目は変えない（@media screen の中に書く）。
   色：紺の太い線＋クリーム色の紙＋トマト・ひまわり・空・ミントの4色。字は見出しだけ教科書体（学校のプリントに近い手書きの形）。
   rika/（74番）・anaume/（73番）は写しなので、ここは読まない（直すと次に写した時に消える）。 */
:root {
  --pop-navy: #2a2350; --pop-cream: #fff8e7; --pop-tomato: #ff6b4a; --pop-sun: #ffc93c; --pop-sky: #4cb8f5; --pop-mint: #2fbf8f; --pop-grape: #9b7ede; --pop-pink: #ff8fb1;
  --pop-head: "UD デジタル 教科書体 N", "UD Digi Kyokasho N", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", sans-serif;
}
@media screen {
  html { background: var(--pop-cream); }
  body { background-color: var(--pop-cream); background-image: radial-gradient(rgba(42, 35, 80, .07) 1.2px, transparent 1.3px); background-size: 22px 22px; color: var(--pop-navy); }

  /* 上の帯：校舎のしるし＋サイト名（教科書体）＋今のページ */
  .top { align-items: center; padding-top: .9rem; padding-bottom: .4rem; }
  .brand { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--pop-head); font-weight: 700; color: var(--pop-navy); font-size: 1.12rem; }
  .brand::before { content: ""; width: 1.9rem; height: 1.9rem; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 18 L20 7 L34 18 V35 H6 Z' fill='%23ffc93c' stroke='%232a2350' stroke-width='3' stroke-linejoin='round'/%3E%3Crect x='16' y='24' width='8' height='11' fill='%23ff6b4a' stroke='%232a2350' stroke-width='2.5'/%3E%3Ccircle cx='20' cy='16' r='3.4' fill='%23fff' stroke='%232a2350' stroke-width='2.5'/%3E%3C/svg%3E") center / contain no-repeat; }
  .brand:hover { color: var(--pop-tomato); }
  .crumb { font-family: var(--pop-head); font-weight: 700; color: var(--pop-navy); background: #fff; border: 2px solid var(--pop-navy); border-radius: 999px; padding: .05rem .8rem; font-size: .92rem; }
  .crumb::before { content: none; }

  /* ---- プリントづくりの左の設定の欄 ---- */
  .panel { border: 3px solid var(--pop-navy); border-radius: 22px; box-shadow: 6px 6px 0 var(--pop-navy); padding: 1.1rem 1.2rem; }
  .panel h1 { font-family: var(--pop-head); font-weight: 700; color: var(--pop-navy); font-size: 1.55rem; display: inline; background: linear-gradient(transparent 62%, var(--pop-sun) 62%); padding: 0 .15rem; }
  .panel .lead { color: #4d476e; margin-top: .55rem; }
  .panel .step { border-top: 2px dashed #d9d3c4; }
  .panel .step h2 { font-family: var(--pop-head); font-weight: 700; font-size: 1.08rem; }
  .panel .n { width: 1.75rem; height: 1.75rem; border: 2px solid var(--pop-navy); background: var(--pop-tomato); color: #fff; font-weight: 700; font-size: .95rem; transform: rotate(-6deg); }
  .panel .step:nth-of-type(3n+2) .n { background: var(--pop-sky); transform: rotate(5deg); }
  .panel .step:nth-of-type(3n) .n { background: var(--pop-mint); }
  .panel .hint, .panel .field > span { color: #5d5780; }
  .panel .seg button, .panel button.sub, .panel .types button, .panel .dan button, .panel .krow button, .panel .kgrid button {
    border: 2px solid var(--pop-navy); background: #fff; color: var(--pop-navy); border-radius: 999px; font-weight: 600; transition: transform .06s; }
  .panel .kgrid button, .panel .krow button { border-radius: 10px; color: #8d88a8; }
  .panel .types button, .panel .dan button { border-radius: 12px; }
  .panel .seg button:hover, .panel button.sub:hover, .panel .types button:hover, .panel .dan button:hover { transform: translateY(-1px); }
  .panel .seg button[aria-pressed="true"], .panel button.sub[aria-pressed="true"], .panel .types button[aria-pressed="true"], .panel .dan button[aria-pressed="true"],
  .panel .krow button[aria-pressed="true"], .panel .kgrid button[aria-pressed="true"] { background: var(--pop-sun); border-color: var(--pop-navy); color: var(--pop-navy); font-weight: 800; box-shadow: 2px 2px 0 var(--pop-navy); }
  /* 字の表は数が多い＝選んだ字は薄い黄色だけ（全部が濃い黄色だと目がちかちかする） */
  .panel .krow button[aria-pressed="true"], .panel .kgrid button[aria-pressed="true"] { background: #fff1c9; box-shadow: none; }
  .panel .krow .rowhead { background: #fff1c9; color: var(--pop-navy); }
  .panel .field input:not([type]), .panel .field input[id="title"] { border: 2px solid var(--pop-navy); border-radius: 12px; }
  .panel .checks input { accent-color: var(--pop-tomato); }
  .panel button.main { border: 3px solid var(--pop-navy); border-radius: 16px; background: var(--pop-tomato); color: #fff; box-shadow: 4px 4px 0 var(--pop-navy); font-family: var(--pop-head); font-size: 1.12rem; letter-spacing: .04em; transition: transform .06s, box-shadow .06s; }
  .panel button.main.print { background: var(--pop-sky); color: var(--pop-navy); }
  .panel button.main:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--pop-navy); }
  .panel button.main:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--pop-navy); }

  /* 右のプリント（紙）：少しだけ紙らしく */
  .sheet { box-shadow: 0 0 0 2px var(--pop-navy), 8px 8px 0 rgba(42, 35, 80, .18); border-radius: 2px; }
  .item .tools button, .items li .tools button, .pgrid li .tools button, .hgrid li .tools button, .clocks li .tools button { border: 2px solid var(--pop-navy); color: var(--pop-navy); border-radius: 10px; background: var(--pop-sun); }
  .item:hover { background: #fff7dc; }
  dialog { border: 3px solid var(--pop-navy); border-radius: 20px; box-shadow: 6px 6px 0 var(--pop-navy); }

  /* ---- ブラウザ楽器（gakki/）：枠を太い紺の線に。鍵盤そのものは変えない（押した時の色・遅れの検品はそのまま） ---- */
  .inst-tabs button { border: 2px solid var(--pop-navy); color: var(--pop-navy); font-family: var(--pop-head); }
  .inst-tabs button[aria-selected="true"] { background: var(--pop-sun); border-color: var(--pop-navy); color: var(--pop-navy); box-shadow: 3px 3px 0 var(--pop-navy); }
  .inst-tabs ~ .tools, .stage, .lat { border: 3px solid var(--pop-navy); border-radius: 20px; }
  .stage { box-shadow: 6px 6px 0 var(--pop-navy); }
  .inst-tabs ~ .tools .seg button { border: 2px solid var(--pop-navy); border-radius: 999px; background: #fff; color: var(--pop-navy); }
  .inst-tabs ~ .tools .seg button[aria-pressed="true"] { background: var(--pop-sun); color: var(--pop-navy); font-weight: 800; }
  .inst-tabs ~ .tools .big-btn { border: 2px solid var(--pop-navy); background: var(--pop-tomato); color: #fff; border-radius: 999px; box-shadow: 3px 3px 0 var(--pop-navy); }
  .inst-tabs ~ .tools input[type="range"] { accent-color: var(--pop-tomato); }
  body.big { background-image: none; }

  /* 下：姉妹サイト一覧 */
  .foot, footer { color: #5d5780; }
  .sister a { color: var(--pop-navy); text-decoration-color: var(--pop-tomato); text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .sister a:hover { color: var(--pop-tomato); }
}