@charset "UTF-8";
/* 外部サイト確認モーダル。<dialog>に、reset.cssが外した分と読みやすさの最小限だけを足す。
   色はcommon.cssの実値(common.cssがカスタムプロパティで公開していない)。 */
.external-confirm {
  --ec-ink: #0B2545;
  --ec-paper: #fff;
  --ec-rule: #D8DADF;

  /* reset.cssの * { margin: 0 } がUA既定のdialog{margin:auto}を打ち消し、左上に出る。 */
  margin: auto;
  /* UA既定のwidth:fit-contentだと一文が長いときビューポート幅まで伸びる。 */
  width: min(100% - 32px, 480px);
  /* 余白は__innerが持つ。dialogに持たせると余白へのクリックが背景クリック扱いになる。 */
  padding: 0;
  border: 1px solid var(--ec-rule);
  border-radius: 4px;
  /* UA既定はCanvas/CanvasTextのシステム色。片方だけ実値にすると配色の対が環境依存で崩れる。 */
  background: var(--ec-paper);
  color: var(--ec-ink);
}

.external-confirm::backdrop {
  background: rgb(0 0 0 / 50%);
}

.external-confirm__inner {
  /* 折り返し判定をこの要素の内寸で行う。ビューポート幅だとスクロールバーと
     UA既定のdialog:modal{max-width:calc(100% - 6px - 2em)}の分ずれる。 */
  container-type: inline-size;
  padding: 24px;
}

.external-confirm__title {
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 1.4;
}

.external-confirm__text {
  font-size: 14px;
  line-height: 1.8;
}

.external-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

/* reset.cssがbuttonの枠と背景を、aの下線を外すので押せることが見た目に出ない。
   buttonはcolorを継承せずUA既定の黒になるためinheritで受ける。
   高さ42pxはWCAG 2.5.8の24pxを満たす。 */
.external-confirm__btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--ec-ink);
  border-radius: 4px;
  color: inherit;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
}

/* 濃い背景の上ではUA既定のフォーカスリングが接して見づらい。 */
.external-confirm__btn:focus-visible {
  outline-offset: 2px;
}

.external-confirm__go {
  background: var(--ec-ink);
  color: var(--ec-paper);
}

/* 1行に置くには112 + gap12 + 182 = 306pxが要る。下回ると幅の違う2つが段になる。 */
@container (max-width: 306px) {
  .external-confirm__btn {
    width: 100%;
  }
}

/* コンテナクエリはSafari 16・Firefox 110からで<dialog>の下限(15.4・98)より新しい。
   その帯では上が無視されるのでビューポート幅での近似を併記する。385pxは概算。 */
@media (max-width: 385px) {
  .external-confirm__btn {
    width: 100%;
  }
}