/* ============================================================
   となりの英語 — Note Box / Quote
   INFO    .te-note--info     ティールソフト · 情報補足
   TIP     .te-note--tip      クリーム · コツ・裏技
   WARNING .te-note--warning  サーモンソフト · 注意喚起
   QUOTE   .te-note--quote    左ティール線 · 引用・名言

   役割: 読者への「解説」(吹き出しの"対話"とは独立)
   ============================================================ */

.te-note {
  position: relative;
  margin: 1.75rem 0;
  padding: 18px 22px 18px 56px;
  border-radius: var(--te-radius-md);
  font-family: var(--te-font-body);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--te-ink);
  background: var(--te-cream-warm);
  border: 1px solid var(--te-hairline-soft);
}
.te-note > :first-child { margin-top: 0; }
.te-note > :last-child  { margin-bottom: 0; }
.te-note p { margin: 0 0 0.6em; }
.te-note p:last-child { margin-bottom: 0; }
.te-note strong { color: var(--te-deep-green); font-weight: 600; }

/* ---------- 共通: ラベル ---------- */
.te-note__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--te-deep-green);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px dashed currentColor;
  border-bottom-color: rgba(31,90,76,.25);
}

/* ---------- 共通: アイコン (左肩 円形) ---------- */
.te-note::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid currentColor;
  display: grid;
  place-items: center;
}
.te-note__icon {
  position: absolute;
  left: 18px;
  top: 18px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-family: var(--te-font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: inherit;
  pointer-events: none;
}

/* =============================================================
   INFO — ティールソフト
   ============================================================= */
.te-note--info {
  background: var(--te-teal-soft);
  border-color: rgba(59,135,117,.32);
  color: var(--te-deep-green);
}
.te-note--info::before { color: var(--te-primary-teal); }
.te-note--info .te-note__icon { color: var(--te-primary-teal); }
.te-note--info .te-note__label { color: var(--te-primary-teal); border-bottom-color: rgba(59,135,117,.35); }

/* =============================================================
   TIP — クリーム
   ============================================================= */
.te-note--tip {
  background: var(--te-cream-deep);
  border-color: var(--te-hairline);
  color: var(--te-ink);
}
.te-note--tip::before { color: #B79454; }
.te-note--tip .te-note__icon { color: #B79454; }
.te-note--tip .te-note__label { color: #8A6A2E; border-bottom-color: rgba(183,148,84,.45); }

/* =============================================================
   WARNING — サーモンソフト
   ============================================================= */
.te-note--warning {
  background: var(--te-salmon-soft);
  border-color: rgba(216,133,117,.4);
  color: #7A3F33;
}
.te-note--warning::before { color: var(--te-salmon-deep); }
.te-note--warning .te-note__icon { color: var(--te-salmon-deep); }
.te-note--warning .te-note__label { color: var(--te-salmon-deep); border-bottom-color: rgba(216,133,117,.45); }

/* =============================================================
   QUOTE — 左ティール線、アイコンなしレイアウト
   ============================================================= */
.te-note--quote {
  background: transparent;
  border: none;
  border-left: 3px solid var(--te-primary-teal);
  border-radius: 0;
  padding: 6px 10px 6px 24px;
  font-family: var(--te-font-display);
  font-size: 17px;
  line-height: 1.95;
  color: var(--te-deep-green);
  font-style: normal;
  letter-spacing: 0.02em;
}
.te-note--quote::before { display: none; }
.te-note--quote .te-note__icon { display: none; }
.te-note--quote .te-note__label {
  display: block;
  font-family: var(--te-font-body);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--te-salmon);
  border-bottom: none;
  margin-bottom: 4px;
  padding-bottom: 0;
}
.te-note--quote .te-note__cite {
  display: block;
  margin-top: 10px;
  font-family: var(--te-font-body);
  font-size: 12.5px;
  font-style: normal;
  color: var(--te-ink-soft);
  letter-spacing: 0.05em;
}
.te-note--quote .te-note__cite::before { content: "— "; }

/* =============================================================
   水彩ブルームヒント (info / tip / warning) — 静的、控えめ
   ============================================================= */
.te-note--info::after,
.te-note--tip::after,
.te-note--warning::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 60%;
  height: 70%;
  pointer-events: none;
  opacity: .35;
  background: radial-gradient(ellipse 60% 70% at 90% 90%, rgba(255,255,255,.5), transparent 65%);
  border-radius: 0 0 var(--te-radius-md) 0;
}