/* いしだ眼科医院 印刷用ページ（print.html 専用）
 *
 * A4縦1枚に「医院名・住所・電話番号・診療時間・地図・アクセス」を収める。
 * サイト本体の style.css は読み込まない。固定ヘッダーやグリッドなど
 * 打ち消す指定ばかりになるうえ、サイト側の変更で紙のレイアウトが
 * 崩れるのを避けたいため、独立させている。
 *
 * ※色は style.css の :root と同じ値。片方を変えたらもう片方も揃えること。
 */

:root{
  --pink:#db5382;
  --pink-pale:#fdeef3;
  --ink:#000000;
  --line:#eee2e6;
  --table-line:#8a8a8a;
  --table-head:#ededed;
  --sans:'Zen Maru Gothic',-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}

/* ---------- 用紙の設定 ---------- */
@page{
  size:A4 portrait;
  margin:12mm;
}

body{
  font-family:var(--sans);
  font-weight:500;
  color:var(--ink);
  background:#f4f1f2;   /* 画面で見たとき、用紙との境が分かるように敷く */
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

img{display:block;max-width:100%;}

/* ---------- 用紙そのもの ---------- */
/* 画面ではA4の紙を模したカードとして見せ、印刷では余白を @page に任せる */
.sheet{
  width:186mm;             /* A4の210mm − 左右の余白12mm×2 */
  margin:24px auto;
  padding:0;
  background:#ffffff;
  box-shadow:0 2px 16px rgba(0,0,0,.14);
}

/* ---------- ヘッダー ---------- */
.sheet-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:8mm;
  padding-bottom:4mm;
  border-bottom:2px solid var(--pink);
}
.sheet-brand{display:flex;align-items:center;gap:5mm;}
.sheet-mark{width:22mm;height:auto;}
.sheet-logotext{width:52mm;height:auto;}
.sheet-en{
  margin-top:1.5mm;
  font-size:10pt;letter-spacing:.18em;color:var(--pink);
}
.sheet-tel{display:flex;flex-direction:column;align-items:flex-end;gap:1.5mm;}
.sheet-tel-label{font-size:10.5pt;letter-spacing:.04em;}
.sheet-tel-num{font-size:21pt;font-weight:700;letter-spacing:.04em;}

/* ---------- 住所 ---------- */
.sheet-address{
  margin-top:10mm;
  padding:2.5mm 4mm;
  background:var(--pink-pale);
  font-size:13pt;letter-spacing:.02em;text-align:center;
}

/* ---------- 見出し ---------- */
.sheet-h2{
  font-size:13pt;font-weight:700;letter-spacing:.1em;
  color:var(--pink);
  padding-left:2.5mm;
  border-left:4px solid var(--pink);
  margin-bottom:4mm;
}

/* ---------- 診療時間 ---------- */
/* break-inside:avoid … 表が途中で切れて2ページ目に流れるのを防ぐ */
.sheet-hours{margin-top:12mm;break-inside:avoid;}
.sheet-table{
  width:100%;border-collapse:collapse;
  font-size:12.5pt;text-align:center;
  /* 列幅を中身任せにすると、火曜だけ「○※」のぶん広がってしまうので固定にする。
     幅を指定しない月〜土の6列は、残りを均等に分け合う */
  table-layout:fixed;
  /* セル同士の罫線は1pxだが、表の外枠は太めにして、PDFビューアや
     プリンタによって細い罫線が見えにくくなるのを避ける
     （border-collapse では、重なる辺は太い方が優先される） */
  border:1.2pt solid var(--table-line);
}
.sheet-table th:first-child{width:27%;}   /* 「14:00〜17:30」が入る幅 */
.sheet-table th:last-child{width:17%;}    /* 「日・祝」が入る幅 */
.sheet-table th,.sheet-table td{
  border:1px solid var(--table-line);
  padding:2mm 1mm;
}
.sheet-table th{background:var(--table-head);font-weight:700;}
.sheet-table td:first-child{font-weight:700;white-space:nowrap;}
.sheet-note{margin-top:3mm;font-size:11pt;line-height:1.6;}

/* ---------- 地図とアクセス ---------- */
.sheet-access{
  margin-top:13mm;
  display:grid;grid-template-columns:112mm 1fr;gap:6mm;
  align-items:start;
  break-inside:avoid;
}
.sheet-mapbox{border:1px solid var(--line);}
.sheet-map{width:100%;height:auto;}
.sheet-ways{padding-top:1mm;}
.way + .way{margin-top:7mm;}
.way h3{font-size:12pt;font-weight:700;color:var(--pink);letter-spacing:.02em;}
.way p{margin-top:1.5mm;font-size:12pt;line-height:1.75;}

/* ---------- 画面で見たときだけ出す操作バー ---------- */
.screen-bar{
  max-width:186mm;margin:24px auto 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.screen-back{font-size:14px;color:var(--pink);text-decoration:none;}
.screen-back:hover{text-decoration:underline;}
.screen-print{
  font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.04em;
  color:#ffffff;background:var(--pink);
  border:none;border-radius:999px;padding:11px 28px;cursor:pointer;
}
.screen-print:hover{background:#c74672;}

/* ---------- 印刷時 ---------- */
@media print{
  body{background:#ffffff;}
  /* 操作バーは紙に出さない */
  .screen-bar{display:none;}
  /* 用紙の余白は @page が持つので、ここでは影も外側の余白も消す */
  .sheet{width:auto;margin:0;box-shadow:none;}
}