/* ============================================================
   mailtoui のモーダルを一橋祭サイトの見た目に合わせる上書き。

   mailtoui.js は <style> を head の先頭に挿入するので、
   このファイルを common_head.php で後から読めば確実に勝つ。
   js/mailtoui.js 本体は書き換えない（配布物の改変を最小に保つ）。
   ============================================================ */

:root {
  --mtui-ink: #324e5a;        /* 本文 */
  --mtui-accent: #0c5f81;     /* 見出し・アクセント。サイトの h2 と同色 */
  --mtui-tint: #e6f1f4;       /* 淡い水色。ヘッダー帯・ホバー */
  --mtui-ground: #f4f5f5;     /* ページ地色と同じ */
  --mtui-line: #d3dfe4;       /* 区切り線 */
  --mtui-quiet: #7d8e97;      /* 補助テキスト */
}

/* ---- オーバーレイ ---------------------------------------- */
/* mailtoui は開閉を style.display="block"/"none" で切り替えるので、
   display には触れない。中身側を position:fixed で画面中央に置く */
.mailtoui-modal {
  background-color: rgba(20, 40, 50, .45);
}

/* ---- モーダル本体 ---------------------------------------- */
.mailtoui-modal-content {
  /* 画面中央に固定。元の CSS は right:-45% で中央がずれ、
     縦が詰まると上端に張り付いていたので置き換えた */
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 420px;
  max-height: calc(100vh - 48px);
  background-color: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(20, 40, 50, .22);
  -webkit-box-shadow: 0 18px 48px rgba(20, 40, 50, .22);
  overflow: hidden auto;
  animation: mtui-rise .22s cubic-bezier(.2, .8, .3, 1);
  -webkit-animation: mtui-rise .22s cubic-bezier(.2, .8, .3, 1);
}

/* transform は中央寄せに使うのでアニメーションでは触らない。
   代わりに不透明度だけを動かす（calc を含む translate は
   キーフレームで正しく補間されず、位置がずれたまま止まる） */
@keyframes mtui-rise {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@-webkit-keyframes mtui-rise {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mailtoui-modal-content { animation: none; -webkit-animation: none; }
}

/* ---- 見出し ---------------------------------------------- */
.mailtoui-modal-head {
  background-color: var(--mtui-tint);
  border-bottom: 1px solid var(--mtui-line);
  padding: 16px 20px;
  align-items: center;
}
.mailtoui-modal-title {
  font-family: "Kiwi Maru", sans-serif;   /* サイトの見出しと同じ */
  font-size: 17px;
  font-weight: 500;
  color: var(--mtui-accent);
  letter-spacing: .02em;
}
.mailtoui-modal-close {
  /* mailtoui は <button> なので、ブラウザ既定の枠線と灰色地を打ち消す */
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font-size: 0;                 /* 元の × 文字を隠して自前で描く */
  line-height: 0;
  width: 30px;
  height: 30px;
  margin-left: 12px;
  top: 0;
  border-radius: 50%;
  color: var(--mtui-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background-color .15s;
}
.mailtoui-modal-close::before {
  content: "";
  width: 15px;
  height: 15px;
  background-color: currentColor;
  /* 細い × を mask で描く。フォント依存の字形ズレを避ける */
  -webkit-mask: no-repeat center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2 L14 14 M14 2 L2 14' stroke='black' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  mask: no-repeat center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2 L14 14 M14 2 L2 14' stroke='black' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}
.mailtoui-modal-close:hover {
  background-color: rgba(12, 95, 129, .12);
  color: var(--mtui-accent);
  font-weight: 400;
}
/* モーダルを開くと ✕ に自動でフォーカスが当たる。マウスで開いた人に
   リングを見せない代わり、キーボード操作のときだけ出す */
.mailtoui-modal-close:focus {
  background-color: transparent;
  color: var(--mtui-accent);
  font-weight: 400;
  outline: 0;
}
.mailtoui-modal-close:focus-visible {
  background-color: rgba(12, 95, 129, .12);
  outline: 2px solid var(--mtui-accent);
  outline-offset: 2px;
}

/* ---- 本体の余白 ------------------------------------------ */
.mailtoui-modal-body {
  padding: 8px 0 16px;
  background-color: #fff;
}

/* ---- 選択肢 ---------------------------------------------- */
/* 影で浮かせるカードをやめ、左端の線が反応する行にする。
   Webメール3つとメールアプリは動作が違うので、境目に余白を置く */
.mailtoui-button {
  display: block;
  color: var(--mtui-ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.mailtoui-button-content {
  background-color: #fff;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
  margin: 0;
  padding: 14px 20px;
  font-size: 15px;
  transition: background-color .15s, border-color .15s;
}
.mailtoui-button-content:hover,
.mailtoui-button:focus .mailtoui-button-content {
  background-color: var(--mtui-tint);
  border-left-color: var(--mtui-accent);
  color: var(--mtui-ink);
}
.mailtoui-button:focus-visible .mailtoui-button-content {
  outline: 2px solid var(--mtui-accent);
  outline-offset: -2px;
}
/* 4つめ（デフォルトのメールアプリ）だけ性質が違うので線で区切る */
#mailtoui-button-4 .mailtoui-button-content {
  border-top: 1px solid var(--mtui-line);
  margin-top: 8px;
  padding-top: 15px;
}
.mailtoui-button-icon {
  top: 0;
  color: var(--mtui-quiet);
  vertical-align: middle;
}
.mailtoui-button-icon svg { height: 20px; width: 20px; }
.mailtoui-button-content:hover .mailtoui-button-icon,
.mailtoui-button:focus .mailtoui-button-icon { color: var(--mtui-accent); }
.mailtoui-button-text {
  top: 0;
  margin-left: 10px;
  vertical-align: middle;
}

/* ---- コピー欄 -------------------------------------------- */
/* 元は「ボタン | 入力欄」の貼り合わせで役割が読めなかった。
   アドレスを主役にし、コピーは右端の小さなアクションにする */
.mailtoui-copy {
  position: relative;
  height: auto;
  margin: 12px 20px 0;
  padding: 0;
  border: 1px solid var(--mtui-line);
  border-radius: 8px;
  background-color: var(--mtui-ground);
  box-shadow: none;
  -webkit-box-shadow: none;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.mailtoui-email-address {
  position: static;
  order: 1;                      /* アドレスを左に */
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  width: auto;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: 12px 14px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  color: var(--mtui-ink);
  display: flex;
  align-items: center;
}
.mailtoui-button-copy {
  position: static;
  order: 2;                      /* コピーは右端 */
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  bottom: auto;
  left: auto;
  top: auto;
  padding: 12px 16px;
  background-color: transparent;
  border: 0;
  border-left: 1px solid var(--mtui-line);
  cursor: pointer;
  border-radius: 0;
  color: var(--mtui-accent);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 13px;
  transition: background-color .15s;
}
.mailtoui-button-copy:hover,
.mailtoui-button-copy:focus {
  background-color: var(--mtui-tint);
  color: var(--mtui-accent);
}
.mailtoui-button-copy:focus-visible {
  outline: 2px solid var(--mtui-accent);
  outline-offset: -2px;
}
.mailtoui-button-copy .mailtoui-button-icon { top: 0; color: inherit; }
.mailtoui-button-copy .mailtoui-button-icon svg { height: 16px; width: 16px; }
.mailtoui-button-copy .mailtoui-button-text { top: 0; margin-left: 6px; }
/* コピー完了。元の CSS も .mailtoui-button-copy-clicked を単一クラスで
   指定しているので、こちらは詳細度を1段上げて確実に勝たせる */
.mailtoui-copy .mailtoui-button-copy.mailtoui-button-copy-clicked,
.mailtoui-copy .mailtoui-button-copy.mailtoui-button-copy-clicked:hover,
.mailtoui-copy .mailtoui-button-copy.mailtoui-button-copy-clicked:focus {
  background-color: var(--mtui-accent);
  color: #fff;
}
.mailtoui-button-copy-clicked .mailtoui-button-text { top: 0; color: #fff; }

/* ---- 出典表記 -------------------------------------------- */
.mailtoui-brand {
  margin: 14px 20px 0;
  padding-top: 10px;
  border-top: 1px solid var(--mtui-line);
  font-size: 11px;
  color: var(--mtui-quiet);
}
.mailtoui-brand a { color: var(--mtui-quiet); text-decoration: none; }
.mailtoui-brand a:hover,
.mailtoui-brand a:focus { color: var(--mtui-accent); font-weight: 400; text-decoration: underline; }

/* ---- スマホ ---------------------------------------------- */
@media screen and (max-width: 480px) {
  .mailtoui-modal-content {
    width: calc(100% - 24px);
    max-width: none;
    max-height: calc(100vh - 32px);
  }
  .mailtoui-modal-title { font-size: 16px; }
  .mailtoui-button-content { padding: 15px 18px; font-size: 15px; }
  .mailtoui-copy { margin: 12px 18px 0; }
  .mailtoui-brand { margin: 14px 18px 0; }
}