@charset "UTF-8";
/* マークダウン練習帳  共通スタイル
   スマートフォンを基準に作り、画面が広いときだけ左右に分ける。 */

:root {
  --primary: #2D6A4F;
  --primary-light: #52B788;
  --primary-pale: #D8F3DC;
  --accent: #E76F51;
  --accent-light: #F4A261;
  --warm-bg: #FDF8F0;
  --warm-bg-alt: #FFF5E8;
  --text: #2C2C2C;
  --text-light: #5A5A5A;
  --text-mute: #8A8A8A;
  --white: #FFFFFF;
  --line: #E4DDD0;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 4px 20px rgba(45, 106, 79, 0.08);
  --bar-h: 52px;
}

* { box-sizing: border-box; }
html { font-size: 17px; }
body {
  margin: 0;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  color: var(--text);
  background: var(--warm-bg);
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
}

/* ---------- 上のバー ---------- */
.bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-height: var(--bar-h);
  padding: 6px 12px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.brand { color: var(--primary); font-weight: 700; text-decoration: none; font-size: .95rem; white-space: nowrap; }
.brand small { font-weight: 500; color: var(--text-light); margin-left: .4em; font-size: .78rem; }
.bar .grow { flex: 1; }
.bar a.manual { font-size: .82rem; color: var(--primary); white-space: nowrap; }

/* ---------- ボタン ---------- */
button {
  font-family: inherit; font-size: .86rem; line-height: 1.3;
  border-radius: 999px; cursor: pointer;
  padding: 8px 14px; min-height: 40px;
  border: 1px solid var(--line); background: var(--white); color: var(--text);
  white-space: nowrap;
}
button:hover { border-color: var(--primary-light); background: var(--primary-pale); }
button:focus-visible { outline: 3px solid #9ecbdc; outline-offset: 2px; }
button.primary { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
button.primary:hover { background: #245b43; }
button.quiet { border-color: transparent; background: transparent; color: var(--text-light); }
button.quiet:hover { background: var(--warm-bg-alt); color: var(--text); }
button[disabled] { opacity: .4; cursor: default; }

/* ---------- ブロックのボタン列（書く欄の上） ---------- */
.blocks {
  display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px;
  background: var(--warm-bg-alt); border-bottom: 1px solid var(--line);
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.blocks .lbl { font-size: .78rem; color: var(--text-light); white-space: nowrap; align-self: center; margin-right: 4px; }
.blocks button { font-size: .84rem; padding: 6px 12px; min-height: 38px; flex: 0 0 auto; }
.blocks button b { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--primary); margin-right: .35em; font-weight: 700; }

/* ---------- チャレンジ（書く欄の上の小さなカード） ---------- */
.challenge {
  padding: 8px 12px 10px; background: var(--white);
  border-bottom: 1px solid var(--line);
}
.challenge[hidden] { display: none; }
.ch-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ch-tag { font-size: .72rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
.ch-title { font-weight: 700; font-size: .95rem; }
.ch-head .grow { flex: 1; }
.ch-head button { min-height: 30px; padding: 2px 10px; font-size: .95rem; }
.ch-hint { margin: 2px 0 6px; font-size: .8rem; color: var(--text-light); }
.ch-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ch-checks li {
  font-size: .78rem; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--warm-bg); color: var(--text-light);
}
.ch-checks li::before { content: "○ "; }
.ch-checks li.is-ok { background: var(--primary-pale); border-color: var(--primary-light); color: var(--primary); font-weight: 700; }
.ch-checks li.is-ok::before { content: "✓ "; }
.challenge.is-clear { background: var(--primary-pale); }
.challenge.is-clear .ch-title::after { content: "　クリア！"; color: var(--primary); }

/* ---------- 見本のボタン列 ---------- */
.samples {
  display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px;
  background: var(--warm-bg-alt); border-bottom: 1px solid var(--line);
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.samples .lbl { font-size: .78rem; color: var(--text-light); white-space: nowrap; align-self: center; margin-right: 4px; }
.samples button { font-size: .8rem; padding: 6px 12px; min-height: 36px; flex: 0 0 auto; }
.samples button.is-on { background: var(--primary-pale); border-color: var(--primary); font-weight: 700; }

/* ---------- 本体：スマホは上に入力、下に整形後 ----------
   スマホでは画面の高さに押し込まない。押し込むと、下半分に入力欄の見出し・
   ブロックの列・チャレンジのカードが積み上がって、打つ場所が消えた（実際に踏んだ）。
   整形後は高さを抑えて中でスクロール、書く欄は広めに取り、ページ全体は普通に流す */
.work { display: flex; flex-direction: column; }   /* order で上下を入れ替えるため flex */
/* min-width: 0 が無いと、横に流れるボタン列が列の幅を押し広げて、右の欄がつぶれる */
.pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.preview-pane .preview { max-height: 38dvh; }
.pane-head {
  flex-wrap: wrap;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; font-size: .8rem; color: var(--text-light);
  border-bottom: 1px solid var(--line); background: var(--white);
}
.pane-head .name { font-weight: 700; color: var(--text); }
.pane-head .grow { flex: 1; }
.pane-head button { min-height: 32px; padding: 4px 10px; font-size: .78rem; }
.pane-head .msg { font-size: .76rem; color: var(--primary); }
.pane-head .file-name { color: var(--text); font-weight: 700; }
.pane-head .file-name.is-dirty::before { content: "● "; color: var(--accent); }

/* スマホは書く欄が上、整形後が下（書いて、下に流れて見る）。
   最初は逆にしていたが、ページを縦に流す作りに変えたら、書く欄が上のほうが自然だった */
.editor-pane { order: 1; border-bottom: 3px solid var(--line); }
.preview-pane { order: 2; }

textarea#editor {
  flex: 1; min-height: 0; width: 100%; resize: none;
  padding: 14px 14px 40px;
  border: 0; outline: none;
  font: 16px/1.7 ui-monospace, "SF Mono", Menlo, Consolas, "Yu Gothic", monospace;
  color: var(--text); background: #FFFDF8;
}
textarea#editor { min-height: 52dvh; }   /* スマホ。上の flex:1 の指定より後に置いて効かせる */
textarea#editor:focus { background: #fff; }
textarea#editor::placeholder { color: var(--text-mute); }

.preview {
  flex: 1; min-height: 0; overflow: auto;
  padding: 14px 18px 40px;
  background: var(--white);
  font-size: .98rem;
}
.preview.is-empty { color: var(--text-mute); }

/* ---------- 整形後の見た目（書き出すHTMLにも同じものを入れる） ---------- */
.md { overflow-wrap: anywhere; }
.md h1 { font-size: 1.5rem; line-height: 1.4; margin: .2em 0 .6em; padding-bottom: .25em; border-bottom: 2px solid var(--primary); }
.md h2 { font-size: 1.2rem; margin: 1.4em 0 .5em; padding-left: .5em; border-left: 5px solid var(--primary-light); }
.md h3 { font-size: 1.05rem; margin: 1.2em 0 .4em; }
.md h4, .md h5, .md h6 { font-size: 1rem; margin: 1em 0 .3em; }
.md p { margin: .5em 0; }
.md ul, .md ol { margin: .5em 0; padding-left: 1.6em; }
.md li { margin: .15em 0; }
.md blockquote {
  margin: .8em 0; padding: .6em 1em;
  border-left: 4px solid var(--accent-light); background: var(--warm-bg-alt);
  color: var(--text-light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.md blockquote p { margin: .3em 0; }
.md code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; background: #F1EDE4; padding: .1em .4em; border-radius: 5px; }
.md pre { background: #2C2C2C; color: #F5F0E6; padding: .9em 1em; border-radius: var(--radius-sm); overflow-x: auto; font-size: .88em; line-height: 1.6; }
.md pre code { background: transparent; padding: 0; color: inherit; }
/* そのまま枠の右上の「コピー」（画面の中だけ。書き出すHTMLには入らない） */
.md .codebox { position: relative; }
.md .codebox pre { padding-top: 2.2em; }
.md .codebox .copy-code {
  position: absolute; top: .5em; right: .6em;
  min-height: 0; padding: 2px 10px; font-size: .74rem;
  border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #F5F0E6;
}
.md .codebox .copy-code:hover { background: rgba(255,255,255,.28); }
/* チェックボックス。押せるようにし、済んだものは打ち消し線 */
.md input[type=checkbox] { width: 1.05em; height: 1.05em; margin: 0 .35em 0 0; vertical-align: -.15em; accent-color: var(--primary); cursor: pointer; }
.md li:has(> input[type=checkbox]) { list-style: none; margin-left: -1.3em; }
.md li:has(> input[type=checkbox]:checked) { text-decoration: line-through; color: var(--text-mute); }
.md li:has(> input[type=checkbox]:checked) > ul, .md li:has(> input[type=checkbox]:checked) > ol { text-decoration: none; color: var(--text); }
.md table { border-collapse: collapse; width: 100%; margin: .8em 0; font-size: .95em; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--line); padding: .45em .7em; text-align: left; vertical-align: top; }
.md th { background: var(--warm-bg-alt); font-weight: 700; }
.md hr { border: 0; border-top: 2px dashed var(--line); margin: 1.4em 0; }
.md a { color: var(--primary); }
.md img { max-width: 100%; }
.md strong { color: #1f4d38; }

/* ---------- お知らせ ---------- */
.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60;
  background: var(--text); color: #fff; font-size: .85rem;
  padding: 10px 18px; border-radius: 999px; max-width: 90vw; text-align: center;
}
.toast[hidden] { display: none; }

/* ---------- 下の説明 ---------- */
.foot {
  padding: 12px 16px 28px; font-size: .78rem; color: var(--text-light);
  border-top: 1px solid var(--line); background: var(--warm-bg);
}
.foot p { margin: .3em 0; }

/* ---------- 画面が広いとき：左に入力、右に整形後 ---------- */
@media (min-width: 900px) {
  .work {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: calc(100dvh - var(--bar-h) - 53px);
    min-height: 480px;
  }
  .preview-pane .preview { max-height: none; }
  textarea#editor { min-height: 0; }
  .editor-pane { border-right: 3px solid var(--line); border-bottom: 0; }
}

/* ---------- 画像に書き出すときの一時的な置き場 ---------- */
.shot {
  position: absolute; left: -10000px; top: 0;
  width: 760px; padding: 32px 36px; background: #fff; color: #2C2C2C;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 17px; line-height: 1.8;
}

/* ---------- PDF（印刷）：整形後だけを紙に出す ---------- */
@media print {
  .bar, .samples, .editor-pane, .foot, .toast, .challenge { display: none !important; }
  body { background: #fff; }
  .work { display: block; height: auto; min-height: 0; }
  .preview-pane { border: 0; }
  .pane-head { display: none; }
  .preview { overflow: visible; height: auto; padding: 0; }
  .md pre { white-space: pre-wrap; }
  .md a { color: inherit; text-decoration: underline; }
}