/* こどもカード 共通スタイル（B287）
   4枚（朝の支度・かんしゃく・メディア・宿題）で共有する。
   印刷まわりを直すときはこのファイル1か所を直せば全枚に効く。 */

/* Zen Maru Gothic (c) 2021 The Zen Maru Gothic Project Authors / SIL OFL 1.1
   このページで使う文字だけを残したサブセット版。ライセンス全文は assets/fonts/OFL.txt */
@font-face{
  font-family:"Zen Maru Gothic";
  src:url("fonts/ZenMaruGothic-Regular.woff2") format("woff2");
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:"Zen Maru Gothic";
  src:url("fonts/ZenMaruGothic-Bold.woff2") format("woff2");
  font-weight:700; font-display:swap;
}

:root{
  --ink:#4a3728;
  --ink-soft:#6b5644;
  --line:#c9b8a5;
  --cream:#fdfaf4;
  --paper:#ffffff;
  --accent:#b5714a;
  --accent-soft:#f3e6da;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN W4",sans-serif;
  line-height:1.8;
}

/* ---------- 画面まわり ---------- */
.toolbar{
  position:sticky; top:0; z-index:10;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center;
  padding:14px 16px;
  background:rgba(253,250,244,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.print-btn{
  font:inherit; font-weight:700; font-size:1.05rem;
  color:#fff; background:var(--accent);
  border:none; border-radius:999px;
  padding:12px 28px; cursor:pointer;
}
.print-btn:hover{background:#9d5e3b;}
.toolbar p{margin:0; font-size:.9rem; color:var(--ink-soft);}

.wrap{max-width:820px; margin:0 auto; padding:24px 16px 80px;}

/* ---------- 子ども面（印刷対象） ---------- */
.sheet{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  padding:28px 26px 22px;
  box-shadow:0 2px 18px rgba(74,55,40,.08);
}
.sheet h1{
  margin:0 0 6px;
  font-size:2.5rem; font-weight:700; letter-spacing:.06em;
  text-align:center; color:var(--ink);
}
.sheet .lead{
  margin:0 0 22px; text-align:center;
  font-size:1rem; color:var(--ink-soft);
}

.steps{list-style:none; margin:0; padding:0;}
.steps li{
  display:flex; align-items:center; gap:18px;
  padding:14px 12px;
  border-bottom:1px dashed var(--line);
}
.steps li:last-child{border-bottom:none;}
.num{
  flex:0 0 auto;
  width:44px; height:44px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  font-size:1.4rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.steps img{
  flex:0 0 auto;
  width:96px; height:96px; object-fit:contain;
  border-radius:8px;
}
.steps .label{
  font-size:1.9rem; font-weight:700; letter-spacing:.04em;
  /* 折り返しは分かち書きの空白だけで起こす（語の途中で切らない） */
  word-break:keep-all;
}

.choose{
  margin:18px 0 6px;
  padding:14px 12px 10px;
  border:2px dashed var(--line); border-radius:10px;
}
.choose .caption{
  margin:0 0 10px;
  font-size:1.05rem; color:var(--ink-soft);
}
.choose .blank{
  height:52px;
  /* 「文字を書く欄」に見えすぎないよう細く薄い線にする。
     絵を描く・写真を貼るスペースとしても使うため。 */
  border-bottom:1px solid #e3d9cb;
}

.closing{
  margin:20px 0 0;
  padding:14px 10px;
  text-align:center;
  font-size:1.25rem; font-weight:700; line-height:2;
  color:var(--accent);
  background:var(--accent-soft); border-radius:10px;
  word-break:keep-all;
}
.closing span{display:block;}

.fields{
  display:flex; flex-wrap:wrap; gap:28px;
  margin-top:20px; padding-top:14px;
  border-top:1px solid var(--line);
  font-size:1rem; color:var(--ink-soft);
}
.fields div{flex:1 1 220px; display:flex; align-items:flex-end; gap:8px;}
.fields .rule{flex:1; border-bottom:1px solid var(--line); height:1.4em;}

.sheet-footer{
  margin-top:14px;
  font-size:.62rem; line-height:1.6; color:#9c8b7a;
  text-align:center;
}

.calib{margin-top:10px; text-align:center;}
/* 実寸確認用の目盛り。background だと Chrome の「背景のグラフィック」オフで
   印刷されないため、必ず border で描く（box-sizing:border-box なので
   左右の枠線を含めた外側の幅がちょうど20mm）。 */
.calib .bar{
  display:inline-block; width:20mm; height:2.6mm;
  border:0.35mm solid var(--line);
  background:transparent; vertical-align:middle;
}
.calib .cap{font-size:.6rem; color:#9c8b7a; margin-left:8px;}

/* ---------- 保護者面（画面のみ） ---------- */
.parent{
  margin-top:40px;
  background:var(--paper);
  border:1px solid var(--line); border-radius:8px;
  padding:28px 26px;
}
.parent h2{
  margin:0 0 4px; font-size:1.5rem; font-weight:700;
  padding-bottom:10px; border-bottom:2px solid var(--accent-soft);
}
.parent h3{
  margin:30px 0 10px; font-size:1.15rem; font-weight:700; color:var(--accent);
}
.parent p{margin:0 0 14px; font-size:1rem;}
.parent .quote{
  margin:0 0 14px; padding:14px 18px;
  background:var(--accent-soft); border-radius:10px;
  font-size:1.05rem; font-weight:700; line-height:2;
}
.parent .quote span{display:block;}
.parent .note{font-size:.9rem; color:var(--ink-soft);}
.parent .pair{
  margin:0 0 14px; padding-left:18px;
  border-left:3px solid var(--accent-soft);
  font-size:1.05rem; font-weight:700; line-height:2.1;
}
.parent .pair span{display:block;}
.parent .origin{
  margin:0 0 18px; padding:12px 16px;
  background:#f7f3ec; border-radius:8px;
  font-size:.92rem; color:var(--ink-soft);
}
.disclaimer{
  margin-top:34px; padding-top:18px;
  border-top:1px solid var(--line);
  font-size:.82rem; line-height:1.9; color:var(--ink-soft);
}
.disclaimer p{font-size:.82rem; margin:0 0 12px;}

/* ---------- スマホ（面談の場で一緒に見る画面） ---------- */
@media (max-width:480px){
  .wrap{padding:14px 10px 60px;}
  .sheet{padding:20px 14px 16px;}
  .sheet h1{font-size:2rem;}
  .sheet .lead{font-size:.9rem; margin-bottom:16px;}
  .steps li{gap:12px; padding:12px 2px;}
  .num{width:34px; height:34px; font-size:1.15rem;}
  .steps img{width:68px; height:68px;}
  .steps .label{font-size:1.5rem;}
  .closing{font-size:1.05rem;}
  .fields{gap:14px;}
  .parent{padding:22px 16px;}
  .toolbar{padding:10px 12px;}
  .toolbar p{flex-basis:100%; text-align:center;}
}

/* 選択肢型（かんしゃく）。番号を持たない＝手順ではなく並列の選択肢であることを示す。
   .num が無いぶん絵が左端に来るので、手順型と絵の位置を揃えるための余白だけ取る。 */
.steps.choices li{padding-left:62px;}

/* 絵つき項目が2つのカード（メディア・宿題）では、空欄が実質「3つ目の項目」になる。
   書き込む余地を項目1つぶんに近づける。 */
.choose.wide .blank{height:90px;}
@media (max-width:480px){ .steps.choices li{padding-left:46px;} }

/* ---------- 印刷 ---------- */
@page{ size:A4 portrait; margin:12mm; }

@media print{
  body{background:#fff;}
  .toolbar, .parent, .screen-only{display:none !important;}
  .wrap{max-width:none; margin:0; padding:0;}
  .sheet{
    border:none; border-radius:0; box-shadow:none;
    padding:0;
  }
  .sheet h1{font-size:30pt;}
  .steps li{padding:11pt 6pt; break-inside:avoid;}
  .steps.choices li{padding-left:14mm;}
  .steps img{width:32mm; height:32mm;}
  .steps .label{font-size:26pt;}
  /* Chromeの「背景のグラフィック」は既定でオフ。背景色に頼らず罫線で形を出す
     （設定をオンにしても二重にはならず、同じ見た目になる） */
  .num{
    width:12mm; height:12mm; font-size:16pt;
    background:transparent; color:var(--ink);
    border:0.4mm solid var(--line);
  }
  .closing{
    font-size:14pt;
    background:transparent;
    border:0.4mm solid var(--line); border-radius:3mm;
  }
  .choose .blank{height:14mm;}
  .choose.wide .blank{height:30mm;}
  a{text-decoration:none; color:inherit;}
}