/* 設定のメニュー：セキュリティ（パスワード・2FA・パスキー）とお知らせ（LINE）のモーダル */

/* ===== セキュリティ設定モーダル =====
   枠・見出し・欄・ボタンは共通の部品（css/parts/modal.css の .md-* / .md-sec、.fxc-field / .fxc-input、.btn）。
   ここはパスキーの一覧・2FA の QR・コード欄など、セキュリティだけの中身 */
.sec-pill { margin-left:auto; font-size:var(--text-2xs); font-weight:var(--fw-bold); padding:3px 11px; border-radius:var(--radius-pill); letter-spacing:.03em; }
.sec-pill-on { background:rgba(16,185,129,.14); color:var(--color-success-text); }
.sec-pill-off { background:var(--color-bg); color:var(--color-text-subtle); }
.sec-fields { display:flex; flex-direction:column; gap:11px; margin-bottom:14px; }
.sec-code { letter-spacing:5px; font-variant-numeric:tabular-nums; font-weight:var(--fw-semibold); text-align:center; }
.sec-note { font-size:var(--text-xs); line-height:1.65; color:var(--color-text-muted); margin:0 0 12px; }
.sec-note-sm { display:block; font-size:var(--text-2xs); color:var(--color-text-subtle); margin-top:4px; }
.sec-ok { color:var(--color-success-text); font-weight:var(--fw-semibold); }
.sec-msg { margin-top:12px; font-size:var(--text-sm); font-weight:var(--fw-semibold); padding:9px 12px; border-radius:var(--radius-md); }
.sec-msg-ok { background:rgba(16,185,129,.12); color:var(--color-success-text); }
.sec-msg-ng { background:rgba(239,68,68,.10); color:var(--color-danger-text); }
.sec-steps { list-style:none; counter-reset:s; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:18px; }
.sec-steps > li { counter-increment:s; position:relative; padding-left:34px; }
.sec-steps > li::before { content:counter(s); position:absolute; left:0; top:-1px; width:24px; height:24px; border-radius:var(--radius-circle); background:var(--color-primary-light); color:var(--color-primary); font-size:var(--text-xs); font-weight:var(--fw-bold); display:flex; align-items:center; justify-content:center; }
.sec-steps > li > b { display:block; font-size:var(--text-sm); color:var(--color-text); margin-bottom:9px; }
.sec-qr-frame { width:176px; padding:12px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); margin:0 0 10px; }
.sec-qr-frame img { width:100%; height:auto; display:block; }
.sec-key { display:inline-flex; align-items:center; gap:8px; background:#f5f7fb; border:1px solid var(--color-border); border-radius:var(--radius-md); padding:6px 8px 6px 12px; max-width:100%; }
.sec-key code { font-size:var(--text-xs); letter-spacing:1px; word-break:break-all; color:var(--color-text); }
.sec-key-copy { background:var(--color-primary-light); color:var(--color-primary); border:none; border-radius:var(--radius-md); padding:5px 11px; font-size:var(--text-2xs); font-weight:var(--fw-bold); cursor:pointer; white-space:nowrap; transition:background .15s; }
.sec-key-copy:hover { background:var(--color-primary-border); }
.sec-pk-list { list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:6px; }
.sec-pk-list:empty { display:none; }
.sec-pk-list li { display:flex; align-items:center; gap:10px; padding:9px 10px 9px 12px; border:1px solid var(--color-border); border-radius:var(--radius-md); }
.sec-pk-name { font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--color-text); }
.sec-pk-meta { display:block; font-size:var(--text-2xs); color:var(--color-text-subtle); margin-top:2px; font-variant-numeric:tabular-nums; }
.sec-pk-del { margin-left:auto; background:transparent; border:none; color:var(--color-text-subtle); font-size:var(--text-xs); padding:6px 8px; border-radius:var(--radius-md); cursor:pointer; white-space:nowrap; }
.sec-pk-del:hover { background:rgba(239,68,68,.10); color:var(--color-danger-text); }
.sec-inline { display:flex; gap:8px; align-items:center; }
.sec-inline .fxc-input { width:150px; }
@media (max-width:520px) { .sec-inline { flex-wrap:wrap; } .sec-inline .fxc-input { width:100%; } }

/* ══ お知らせ（LINE）の設定モーダル ══ */
/* 3種類ぶんを縦に積むと画面より長くなるので、タブで1つずつ出す */
.ntf-modal-inner { max-width: 560px; }
.ntf-body {
  padding: 16px 24px 20px;
  max-height: calc(100vh - 260px);
  overflow-y: auto;
}
.ntf-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 14px 0 18px;
  padding: 4px;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
}
.ntf-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px;
  border: none; border-radius: var(--radius-md);
  background: transparent; color: var(--color-text-muted);
  font-family: var(--font); cursor: pointer;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.ntf-tab:hover { color: var(--color-text); }
.ntf-tab.active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-xs);
}
.ntf-tab-ttl { font-size: var(--text-xs); font-weight: var(--fw-semibold); }
/* どれが動いているかはタブの上で分かるようにする（1つずつしか見えないため） */
.ntf-tab-state {
  font-size: var(--text-3xs); font-weight: var(--fw-bold); letter-spacing: 0.04em;
  padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--color-bg); color: var(--color-text-subtle);
  border: 1px solid var(--color-border);
}
.ntf-tab .ntf-tab-state--on {
  background: var(--color-success-light);
  color: var(--color-success-text); border-color: transparent;
}

/* 枠は3種類で共通なのでタブの外（上）に出す */
.ntf-quota {
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}
.ntf-quota-top { display: flex; align-items: baseline; gap: var(--sp-2); }
.ntf-quota-lbl { font-size: var(--text-2xs); color: var(--color-text-muted); flex: 1; }
.ntf-quota-num { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.ntf-quota-num b { font-size: var(--text-md); color: var(--color-text); }
.ntf-quota-bar {
  height: 5px; margin: 8px 0 6px; border-radius: var(--radius-pill);
  background: var(--color-border); overflow: hidden;
}
.ntf-quota-bar span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--color-primary); }
/* 枠は食うが設定はここに無いもの（GAS のメール自動登録）＝枠の内側に1行だけ */
.ntf-quota-src {
  display: flex; align-items: baseline; gap: var(--sp-2);
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--color-border);
}
.ntf-quota-src-ttl { font-size: var(--text-2xs); color: var(--color-text-muted); font-weight: var(--fw-semibold); }
.ntf-warn {
  margin: 10px 0 0; padding: 10px 12px;
  border-radius: var(--radius-lg);
  background: var(--color-danger-light);
  color: var(--color-danger-text);
  font-size: var(--text-2xs); line-height: 1.6;
}
.ntf-note { font-size: var(--text-2xs); color: var(--color-text-subtle); font-weight: var(--fw-medium); margin: 6px 0 0; }

/* 各タブの主役＝そもそも送るかどうか。他の項目より一段大きく置く */
.ntf-main {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 12px 14px; margin: 0 0 16px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); cursor: pointer;
}
.ntf-main:hover { border-color: var(--color-primary-border); }
.ntf-main-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ntf-main-ttl { font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--color-text); }
.ntf-main-sub { font-size: var(--text-2xs); color: var(--color-text-muted); line-height: 1.55; }

/* 時刻(24)・日(32)は数が多いので、折り返しではなく格子で詰める */
.ntf-grid { display: grid; gap: 5px; }
.ntf-grid .fxc-mchip { min-width: 0; width: 100%; height: 30px; padding: 0; }
.ntf-grid--hour { grid-template-columns: repeat(12, 1fr); }
.ntf-grid--day { grid-template-columns: repeat(8, 1fr); }
.ntf-grid--dow { grid-template-columns: repeat(7, 1fr); }

/* 除外する語。カンマ区切りの1行入力の置き換え＝入れたらタグになり、✕で外せる */
.ntf-tagbox {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 7px 8px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ntf-tagbox:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.ntf-tagbox #ucn-exclude-tags { display: contents; }
.ntf-taginput {
  flex: 1; min-width: 140px;
  border: none; outline: none; background: transparent;
  font-family: var(--font); font-size: var(--text-xs); color: var(--color-text);
  padding: 3px 2px;
}
.ntf-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 9px; border-radius: var(--radius-pill);
  background: var(--color-primary-light); color: var(--color-primary);
  font-size: var(--text-2xs); font-weight: var(--fw-semibold);
}
.ntf-tag button {
  border: none; background: transparent; cursor: pointer;
  color: inherit; opacity: 0.6; font-size: var(--text-3xs); line-height: 1;
  padding: 3px; border-radius: var(--radius-pill);
}
.ntf-tag button:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }

/* タブの下端＝「最後に送ったもの」と試し送り。フッタのボタンを増やさない */
.ntf-foot {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: 18px; padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.ntf-last { flex: 1; min-width: 0; }
.ntf-last .ntf-note, .ntf-foot .ntf-note { margin: 0; }
.ntf-testbtn {
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text-muted);
  font-family: var(--font); font-size: var(--text-2xs); font-weight: var(--fw-semibold);
  padding: 6px 12px; cursor: pointer; white-space: nowrap;
  transition: all 0.12s;
}
.ntf-testbtn:hover:not([disabled]) { border-color: var(--color-primary-border); color: var(--color-primary); }
.ntf-testbtn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* 通知設定: 選んだ時刻ごとの「やることが無い日は送らない」 */
.ntf-slot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px 12px;
  margin-top: 6px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
}
.ntf-slot-hour {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  min-width: 44px;
}
.ntf-slot-label {
  flex: 1;
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}