/* ===== アドレス帳（ad- 接頭辞） =====
   色は app.css の変数を使う（直書きは白と、淡い枠・淡い背景だけ。文字色には使わない）。
   文字の大きさ: 一覧 14px（幅 720px 以下は app.css で本文・入力欄とも 16px）、よみがな・件数・補足 13px、
   件数バッジなどの短いラベル 12px 太字。12px 未満は使わない。太さは 400 と 700 の 2 段。
   フォーカスの輪郭は app.css の :focus-visible（var(--c-focus)）に任せ、消さない。
   タッチ端末（pointer: coarse）で押せる部分を大きくする指定は、ファイルの末尾にまとめている。 */
.ad-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ad-inline-ico { width: 14px; height: 14px; vertical-align: -2px; }

/* ---- 上部（サブナビ＋検索） ---- */
.ad-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ad-subnav { display: flex; gap: 2px; padding: 3px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 999px; }
.ad-subnav a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; color: var(--c-text-2); font-weight: 700; white-space: nowrap; }
.ad-subnav a .ico { width: 16px; height: 16px; }
.ad-subnav a:hover { text-decoration: none; background: var(--c-surface-2); color: var(--c-text); }
.ad-subnav a.active { background: var(--c-primary); color: #fff; }
.ad-search-wrap { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 1 1 380px; justify-content: flex-end; min-width: 0; }
.ad-search { position: relative; display: flex; gap: 6px; flex: 1; max-width: 560px; min-width: 0; }
/* 虫めがねは検索欄の高さ（タッチ端末では高くなる）の中央に置く */
.ad-search > .ico { position: absolute; left: 10px; top: calc(50% - 8px); width: 16px; height: 16px; color: var(--c-text-3); pointer-events: none; }
.ad-search .input { padding-left: 32px; flex: 1; min-width: 0; }
.ad-search .select { width: auto; flex: none; }

/* ---- ブックの切替 ---- */
/* 横にスクロールする枠はフォーカスの輪郭（外側 4px）を切ってしまうので、内側に 4px の余白を取り、外側の余白で位置を戻す */
.ad-books { display: flex; gap: 6px; margin: -4px -4px 8px; padding: 4px; overflow-x: auto; scrollbar-width: thin; }
.ad-book {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 14px;
  border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-surface); color: var(--c-text-2); font-weight: 700; cursor: pointer;
}
.ad-book .ico { width: 16px; height: 16px; }
.ad-book:hover { border-color: var(--c-border-strong); color: var(--c-text); }
/* 選択中は淡い青の地に青い文字（4.73:1）と青い枠 */
.ad-book.active { background: var(--c-primary-weak); border-color: var(--c-primary); color: var(--c-primary); }
.ad-book-ro { display: inline-flex; color: var(--c-text-3); }
.ad-book-ro .ico { width: 13px; height: 13px; }

/* ---- 一覧カード ---- */
.ad-listcard { overflow: hidden; }
.ad-listhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px 0 8px; border-bottom: 1px solid var(--c-border); }
.ad-kindtabs { display: flex; gap: 2px; margin-right: auto; }
.ad-kindtabs > button, .ad-kindtabs > a {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px 10px; border: 0; background: none; color: var(--c-text-2);
  font-weight: 700; border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px;
}
.ad-kindtabs .ico { width: 16px; height: 16px; }
.ad-kindtabs > :hover { color: var(--c-text); text-decoration: none; }
.ad-kindtabs > .active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.ad-count { font-size: 12px; font-weight: 700; padding: 0 7px; border-radius: 10px; background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text-2); line-height: 18px; }
.ad-kindtabs .active .ad-count { background: var(--c-primary-weak); border-color: #c9daf8; color: var(--c-primary); }
.ad-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-bottom: 8px; }
.ad-group-sel { max-width: 220px; min-height: 28px; height: 28px; padding: 2px 8px; font-size: 13px; }
.ad-toggle.on { background: var(--c-warn-weak); border-color: #f3dcae; color: var(--c-warn); }

/* 五十音の索引 */
.ad-index { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--c-border); background: var(--c-surface-2); }
.ad-idx {
  min-width: 34px; height: 30px; padding: 0 8px; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-text); font-weight: 700; cursor: pointer;
}
.ad-idx:hover:not(:disabled):not(.active) { border-color: var(--c-primary); color: var(--c-primary); }
.ad-idx.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.ad-idx.none { color: var(--c-text-3); background: transparent; border-style: dashed; cursor: default; }
/* 該当のない行（押せないボタン）だけを淡い灰に */
.ad-idx:disabled { color: var(--c-text-disabled); }
.ad-idx.all { display: inline-flex; align-items: center; gap: 6px; }
/* 「すべて」の件数。薄くせず、細い字で区別する */
.ad-idx .n { font-size: 13px; font-weight: 400; }

/* 選択中の操作バー */
.ad-selbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; background: var(--c-primary-weak); border-bottom: 1px solid #c9daf8; }

.ad-listbody { transition: opacity .12s; }
.ad-listbody.ad-dim { opacity: .55; }
.ad-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* 一覧の表 */
.ad-table td { vertical-align: middle; }
.ad-table tbody tr.ad-selected td { background: #f3f7fe; }
.ad-col-check { width: 36px; padding-right: 0 !important; }
.ad-col-check input { width: 16px; height: 16px; cursor: pointer; }
.ad-col-btns { width: 1%; white-space: nowrap; text-align: right !important; }
.ad-col-addr { max-width: 280px; }
.ad-col-mail a, .ad-col-addr { word-break: break-all; }
.ad-name-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ad-name-text { min-width: 0; }
.ad-name { font-weight: 700; color: var(--c-text); }
.ad-name:hover { color: var(--c-primary); }
.ad-kana { font-size: 13px; color: var(--c-text-3); }
.ad-title-sm { color: var(--c-text-2); }
/* 会社名の行（幅 720px 以下で会社名の列の代わりに出す） */
.ad-sub-company { display: none; font-size: 14px; color: var(--c-text-2); }
.ad-lock { display: inline-flex; margin-left: 4px; color: var(--c-warn); vertical-align: -2px; }
.ad-lock .ico { width: 14px; height: 14px; }
.ad-tel { white-space: nowrap; }

/* 頭文字の丸。背景色は inc/address/view.php がユーザーのアバターと同じ見本（白い文字で 4.5:1 以上）から付ける */
.ad-initial {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--c-primary); color: #fff; font-weight: 700; font-size: 14px;
}
.ad-initial.company { border-radius: 8px; }
.ad-initial .ico { width: 18px; height: 18px; }

/* 丸い連絡ボタン（広い画面では電話・メールは列に出ているので控えめに） */
.ad-contact-btns { display: inline-flex; gap: 4px; }
.ad-round-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-primary);
}
.ad-round-btn:hover { background: var(--c-primary-weak); text-decoration: none; }
.ad-round-btn .ico { width: 16px; height: 16px; }

/* ページ送り */
.ad-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--c-border); }
.ad-page-no { pointer-events: none; min-width: 64px; }

/* ---- 詳細画面 ---- */
.ad-crumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; color: var(--c-text-3); }
.ad-crumb .sep { color: var(--c-text-disabled); }
.ad-crumb span:last-child { color: var(--c-text-2); }
.ad-hero { padding: 18px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 14px; }
.ad-hero-main { display: flex; align-items: flex-start; gap: 14px; }
.ad-hero .ad-initial, .ad-hero .avatar.lg { width: 56px; height: 56px; font-size: 22px; }
.ad-hero .ad-initial .ico { width: 26px; height: 26px; }
.ad-hero-text { flex: 1; min-width: 0; }
.ad-hero-text h1 { font-size: 22px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; word-break: break-word; }
.ad-hero-text .ad-kana { margin-top: 2px; }
.ad-hero-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; color: var(--c-text-2); }
.ad-private-badge { gap: 3px; }
.ad-private-badge .ico { width: 12px; height: 12px; }
.ad-head-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ad-quicks { display: flex; gap: 8px; flex-wrap: wrap; }
/* 「電話」「メール」など: 淡い青の地に青い文字（4.73:1）。押したときは地が濃くなるので文字も濃くする（5.05:1） */
.ad-quick {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px;
  background: var(--c-primary-weak); color: var(--c-primary); font-weight: 700; border: 1px solid #c9daf8;
}
.ad-quick:hover { background: #dbe7fb; color: var(--c-primary-hover); text-decoration: none; }
.ad-quick .ico { width: 18px; height: 18px; }

.ad-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ad-section .card-body { padding: 4px 16px 14px; }
.ad-dl { margin: 0; }
.ad-dl-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--c-border); }
.ad-dl-row:last-child { border-bottom: 0; }
.ad-dl-row dt { color: var(--c-text-2); font-weight: 700; font-size: 13px; }
.ad-dl-row dd { margin: 0; word-break: break-word; }
.ad-dl-row.full dd .pre { background: var(--c-surface-2); border-radius: var(--radius-sm); padding: 8px 10px; }
.ad-stamp { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--c-border); }
.ad-mini-list > li { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.ad-mini-list .ad-initial { width: 28px; height: 28px; font-size: 12px; }
.ad-check-list { gap: 8px; }

/* ---- 登録・変更 ---- */
.ad-form-card { max-width: 920px; }
.ad-form-sec { font-size: 13px; color: var(--c-text-2); padding: 10px 0 4px; border-bottom: 1px solid var(--c-border); margin-top: 6px; }
.ad-form-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: sticky; bottom: 0; z-index: 5; }
/* 下に固定した「登録する」の帯の裏に、フォーカスした入力欄が隠れないように */
html:has(.ad-form-foot) { scroll-padding-bottom: 80px; }
.ad-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; max-width: 520px; }
.ad-w-date { max-width: 200px; }
.ad-w-zip { max-width: 160px; }
.ad-w-code { max-width: 220px; }
.ad-check-row { display: flex; gap: 8px 18px; flex-wrap: wrap; padding-top: 7px; }
/* 所属会社の「所属なし／選ぶ／新しく入力」は .btn-group（app.css）の見た目のまま */
.ad-company-chooser { display: flex; flex-direction: column; gap: 10px; }
.ad-gap-sm { gap: 8px; }
.ad-chosen { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #c9daf8; background: var(--c-primary-weak); border-radius: var(--radius-sm); }
.ad-chosen > .ico { width: 20px; height: 20px; color: var(--c-primary); }
.ad-suggest-wrap { position: relative; max-width: 560px; }
.ad-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 280px; overflow: auto; list-style: none; margin: 0; padding: 4px;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.ad-suggest li { display: flex; flex-direction: column; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.ad-suggest li:hover { background: var(--c-primary-weak); }
/* 矢印キーで選んでいる候補: 地の色に加えて輪郭を出す（スクロールする枠に切られないよう内側に描く） */
.ad-suggest li:focus { background: var(--c-primary-weak); outline: 2px solid var(--c-focus); outline-offset: -2px; }
.ad-suggest li.faint { cursor: default; background: none; }
.ad-subform { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px dashed var(--c-border-strong); border-radius: var(--radius-sm); background: var(--c-surface-2); }
.ad-dup-list > li { padding: 8px 0; }

/* ---- 詳細検索 ---- */
.ad-adv-top { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ad-conds { display: flex; flex-direction: column; gap: 8px; }
/* --ad-del: 条件を削除するボタンの列の幅（タッチ端末では 44px） */
.ad-cond { --ad-del: 36px; display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) minmax(120px, 170px) var(--ad-del); gap: 8px; align-items: center; }

/* ---- CSV ---- */
.ad-notes { margin: 0; padding-left: 18px; }
.ad-notes li { margin: 2px 0; }
.ad-preview-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.ad-preview-sum > div { display: flex; flex-direction: column; align-items: center; padding: 10px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface-2); }
.ad-preview-sum strong { font-size: 22px; }
.ad-preview-sum span { font-size: 13px; color: var(--c-text-2); text-align: center; }
.ad-preview-sum .warn { background: var(--c-warn-weak); border-color: #f3dcae; }
.ad-preview-sum .err { background: var(--c-danger-weak); border-color: #f5caca; }
.ad-preview-table { max-height: 340px; overflow: auto; border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.ad-preview-table th { position: sticky; top: 0; z-index: 1; }
.ad-row-err td { background: #fff8f8; }
.ad-warn-text { color: var(--c-warn); }

/* ---- 管理 ---- */
.ad-add-form { flex: 1; justify-content: flex-end; min-width: 260px; }
.ad-add-form .input { max-width: 380px; }
.ad-scroll-x { overflow-x: auto; }
.ad-admin-table td { vertical-align: middle; }
.ad-row-actions { text-align: right !important; }
.ad-row-actions .btn { margin-left: 4px; }
.ad-sm-icon { width: 28px; height: 28px; font-weight: 700; }
.ad-disabled-row td { color: var(--c-text-3); }
.ad-group-list > li { padding: 8px 4px; }

/* ===== 画面幅が狭いとき ===== */
/* 表の列を減らし、検索欄を 1 段に（表は列が多いので 960px のまま） */
@media (max-width: 960px) {
  .ad-hide-md { display: none; }
  .ad-search-wrap { flex-basis: 100%; }
}
/* 詳細の 2 列 → 1 列（app.css の .split と同じ 840px。1920px の画面を左右に分けた 960px のウィンドウでは 2 列を保つ） */
@media (max-width: 840px) {
  .ad-detail-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .ad-top { gap: 8px; }
  .ad-subnav { width: 100%; }
  /* サブナビと索引は操作の部品なので 14px のまま（16px だと管理者の 3 つのタブや「その他」が幅に入らない） */
  .ad-subnav a { flex: 1; justify-content: center; padding: 6px 8px; font-size: 14px; }
  .ad-search-wrap { margin-left: 0; }
  .ad-search { max-width: none; }
  .ad-search .btn { padding: 0 10px; }
  .ad-adv-link { display: none; }
  .ad-hide-sm { display: none; }
  .ad-listhead { padding: 4px 8px 0 4px; }
  .ad-tools { width: 100%; justify-content: flex-end; }
  /* 入力欄は 16px（iOS がフォーカスしたときに画面を拡大しないように） */
  .ad-group-sel { max-width: none; flex: 1; font-size: 16px; }
  .ad-index { gap: 3px; padding: 8px; }
  .ad-idx { min-width: 0; flex: 1 0 calc(100% / 7 - 4px); padding: 0 2px; font-size: 14px; }

  /* 一覧はカード状に（名前＋会社 と 連絡ボタン）。名前は本文と同じ 16px */
  .ad-table thead { display: none; }
  .ad-table, .ad-table tbody { display: block; }
  .ad-table tr { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--c-border); }
  .ad-table td { display: none; border: 0; padding: 0; }
  .ad-table td.ad-col-name { display: block; flex: 1; min-width: 0; }
  .ad-table td.ad-col-check { display: block; }
  .ad-table td.ad-col-btns { display: block; width: auto; flex: none; } /* 表用の width: 1% を打ち消す（カード状ではボタンがはみ出すため） */
  .ad-sub-company { display: block; }
  .ad-round-btn { width: 40px; height: 40px; }
  .ad-round-btn .ico { width: 18px; height: 18px; }

  .ad-hero { padding: 14px; }
  .ad-hero-main { flex-wrap: wrap; }
  .ad-head-actions { width: 100%; justify-content: flex-start; }
  .ad-quick { flex: 1; justify-content: center; height: 44px; }
  .ad-dl-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ad-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ad-cond { grid-template-columns: minmax(0, 1fr) var(--ad-del); }
  .ad-cond > :nth-child(2) { grid-column: 1 / 2; }
  .ad-cond > :nth-child(3) { grid-column: 1 / 2; }
  .ad-cond > :nth-child(4) { grid-row: 1; grid-column: 2; }
  .ad-seg { flex-wrap: wrap; }
  .ad-seg .btn { flex: 1 0 auto; }
}
@media (min-width: 721px) {
  /* 広い画面では電話・メールは列にあるので、丸ボタンは地図だけを目立たせない程度に */
  .ad-person-table .ad-round-btn, .ad-user-table .ad-round-btn { width: 28px; height: 28px; border-color: transparent; }
  .ad-company-table .ad-round-btn { width: 28px; height: 28px; border-color: transparent; }
}
@media print {
  .ad-top, .ad-books, .ad-index, .ad-tools, .ad-head-actions, .ad-quicks, .ad-col-btns, .ad-pager .btn-group { display: none !important; }
}

/* ===== PHP 版で追加（リンクやフォームで出す部品） ===== */
a.ad-idx { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.ad-seg label { cursor: pointer; }
/* 所属会社の切り替え: ラジオボタンは見えないので、キーボードで選んでいるときはボタン（label）に輪郭を出す */
.ad-seg label:has(:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 2px; position: relative; z-index: 2; }
.ad-dup-list { margin: 0; }
.notice.warn .ad-dup-list > li { border-bottom-color: #f3dcae; }
.ad-group-list form .input { max-width: 320px; }

/* ===== タッチ端末（指で操作する画面。幅ではなく入力方法で切り替える） =====
   アドレス帳だけの押せる部分を 44px 以上（一覧の行は 48px）にし、横に並ぶ部品の間を 8px 以上空ける。
   .btn・.icon-btn・.btn-primary・.input・.select・.list > li の大きさは app.css が決める */
@media (pointer: coarse) {
  .ad-subnav a, .ad-book, .ad-kindtabs > a, .ad-kindtabs > button { min-height: 44px; }
  .ad-books, .ad-tools, .ad-head-actions { gap: 8px; }
  .ad-group-sel { height: auto; min-height: 44px; }
  /* 五十音の索引（30px → 44px） */
  .ad-index { gap: 8px; }
  .ad-idx { min-width: 44px; min-height: 44px; }
  /* 丸い連絡ボタン（40px → 44px）と「電話」「メール」 */
  .ad-contact-btns { gap: 8px; }
  .ad-round-btn { min-width: 44px; min-height: 44px; }
  .ad-quick { min-height: 44px; }
  .ad-col-check input { width: 20px; height: 20px; }
  .ad-suggest li { min-height: 48px; justify-content: center; }
  .ad-cond { --ad-del: 44px; }
  .ad-row-actions .btn { margin-left: 8px; }
  .ad-sm-icon + .ad-sm-icon { margin-left: 4px; }
}
@media (pointer: coarse) and (min-width: 721px) {
  /* 表のままの一覧（タブレット）: 行を 48px 以上に（表のセルの height は最小の高さとして働く） */
  .ad-table td { height: 48px; }
}
@media (pointer: coarse) and (max-width: 720px) {
  /* スマホの一覧（カード状）: 行を 48px 以上に、チェック・名前・連絡ボタンの間を 8px に */
  .ad-table tr { min-height: 48px; gap: 8px; }
  /* 索引は 6 列のマス目に（44px のボタンを 8px 空けて並べると 1 行に 6 つ。「すべて」を 1 段目、あ〜その他の 12 個を 2 段に） */
  .ad-index { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ad-idx { min-width: 0; }
  .ad-idx.all { grid-column: 1 / -1; }
}