@charset "UTF-8";
/* =========================================================
   USTOOL.jp  -  kanji-guide（漢字練習の使い方ページ）
   /kanji/jukujikun/ と /kanji/todofuken/ が読む。
   base.css → page.css のあとに読む。
   印刷用プリント / 練習のしかた / 注意。
   ========================================================= */

.guide{ max-width:720px; margin-inline:auto; }

/* =========================================================
   区切り
   ここから下は練習に必要ではない補足、ということを示す。
   点線を左右に伸ばし、真ん中にラベルを置く。
   ========================================================= */
.divider{
  display:flex; align-items:center; gap:clamp(12px,2vw,18px);
  margin:clamp(30px,4.2vw,46px) 0 clamp(4px,1vw,10px);
}
.divider::before,
.divider::after{
  content:""; flex:1; border-top:2px dotted var(--line);
}
.divider__label{
  display:flex; align-items:baseline; gap:8px;
  font-family:var(--font-round); font-weight:700; font-size:14px;
  color:var(--ink-soft); white-space:nowrap;
}
.divider__label [lang="en"]{
  font-family:var(--font-body); font-weight:400; font-size:11.5px;
  letter-spacing:.06em; color:var(--line);
}

/* =========================================================
   印刷して使うプリント
   ========================================================= */
.print{
  margin-top:clamp(18px,2.4vw,26px);
  padding:clamp(16px,2.2vw,22px) clamp(16px,2.2vw,24px);
  border:2px solid var(--line); border-radius:var(--radius);
  background:var(--white); box-shadow:var(--shadow-card);
  text-align:center;
}
.print__title{
  font-family:var(--font-round); font-weight:700;
  font-size:clamp(16px,1.9vw,18px); line-height:1.6; color:var(--teal);
}
.print__text{
  margin-top:6px; font-size:14px; color:var(--ink-soft); line-height:1.9;
}
.print__text [lang="en"]{ color:var(--teal); font-size:.92em; }

/* 漢字一覧PDFを開くボタン */
.print__btn{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:clamp(12px,1.8vw,16px);
  font-family:var(--font-round); font-weight:700; font-size:15px;
  color:var(--teal); background:var(--white);
  border:2px solid var(--teal); border-radius:12px;
  padding:10px 22px;
  transition:background-color .18s, color .18s;
}
.print__btn::before{ content:"🖨"; font-size:16px; }
.print__btn:hover{ background:var(--teal); color:var(--white); }

/* =========================================================
   練習のしかた
   ========================================================= */
.steps{ counter-reset:s; margin-top:clamp(16px,2.2vw,24px); }
.steps li{
  counter-increment:s; position:relative;
  padding:clamp(14px,2vw,18px) 0 clamp(14px,2vw,18px) clamp(44px,5vw,56px);
  border-bottom:1.5px dotted var(--line-soft);
}
.steps li::before{
  content:counter(s);
  position:absolute; left:0; top:clamp(14px,2vw,18px);
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-round); font-weight:700; font-size:14px;
  color:var(--teal); border:2px solid var(--teal); background:var(--white);
}
.steps h3{
  font-family:var(--font-round); font-weight:700;
  font-size:clamp(15px,1.8vw,17px); line-height:1.6;
}
.steps p{ margin-top:6px; font-size:14px; color:var(--ink-soft); line-height:1.95; }

/* 3つのモード */
.modes{ margin-top:10px; display:grid; gap:8px; }
.modes li{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 10px;
  padding:9px 12px;
  border:1.5px solid var(--line-soft); border-radius:10px;
  background:var(--paper-2);
  font-size:14px; line-height:1.8;
}
.modes__name{
  font-family:var(--font-round); font-weight:700; color:var(--ink);
  white-space:nowrap;
}
.modes__desc{ color:var(--ink-soft); }
.modes__rec{
  grid-column:1 / -1;
  font-size:12px; color:var(--teal);
}

/* =========================================================
   ブラウザの注意
   ========================================================= */
.browser-note{
  margin-top:clamp(18px,2.4vw,24px);
  padding:clamp(13px,1.8vw,16px) clamp(14px,2vw,18px);
  border:2px solid #e0c489; border-left-width:6px; border-radius:12px;
  background:var(--orange-soft);
  font-size:14px; line-height:1.9; color:var(--ink);
}
.browser-note b{ color:var(--orange); }
.browser-note [lang="en"]{ display:block; margin-top:4px; font-size:12.5px; color:var(--ink-soft); }

@media (max-width:600px){
  .modes li{ grid-template-columns:minmax(0,1fr); }
}