/* Cloudflare 版だけの部品: 上のバーのアカウント表示・ログイン前の画面・注意書き・プラン。値は style.css の変数（DESIGN.md が正本）。 */
.topbar { flex-wrap: wrap; }
body[data-screen="login"] .topbar nav { visibility: hidden; }
body[data-screen="login"] .topbar h1 { visibility: hidden; }

.account-bar { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px 8px; margin-left: auto; min-width: 0; }
.account-plan { padding: 2px 14px; background: var(--yellow-soft); border: 1px solid #f1e0a0; border-radius: var(--radius-pill); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }

.test-banner { margin: 0 0 16px; padding: 8px 14px; border: 1px solid #f1e0a0; border-left-width: 4px; border-radius: 10px; background: var(--yellow-soft); font-size: 15px; }
.notice-ok { margin: 0 0 16px; padding: 8px 14px; border: 1px solid var(--good); border-left-width: 4px; border-radius: 10px; color: var(--good); font-weight: 700; background: var(--card); }
.data-list li, .notice-list li { margin: 6px 0; }

.iv-notice { width: min(100%, 680px); margin: 16px auto 0; border: 2px solid var(--ink); }
.iv-notice .q-title { margin-bottom: 4px; }
.notice-list { margin: 0 0 8px; padding-left: 1.3em; font-size: 15px; line-height: 1.6; }
.iv-notice .check-row { margin: 8px 0 0; }

.privacy-card { background: var(--paper-2); }
.privacy-card p { margin: 0; }
.home-privacy { max-width: 1232px; margin: 12px auto 0; }

.plan-row { align-items: center; }
.plan-row button { margin-left: auto; min-height: 40px; padding: 0 18px; font-size: 15px; }
.plan-row.current { border-color: var(--ink); background: var(--yellow-soft); }
.history td.del { text-align: right; }
.history td.del button { min-height: 32px; padding: 0 12px; font-size: 13px; }

/* 新しい面接の入口（種類と話題）。選択肢は幅いっぱいに並べ、説明文が折り返せるようにする */
.pick-line { margin: 0 0 12px; font-weight: 700; color: var(--ink); }
#screen-new fieldset.card { margin: 0 0 16px; }
#screen-new legend { font-weight: 800; font-size: 17px; padding: 0 6px; }
#new-kinds .choice, #new-topics .choice { flex: 1 1 100%; }
#new-topics .choice { flex-basis: calc(50% - 5px); }
#new-kinds .choice-body, #new-topics .choice-body { height: 100%; }
#new-kinds .choice-body b, #new-topics .choice-body b { font-size: 16px; }
#new-kinds .choice-body .small, #new-topics .choice-body .small { color: var(--ink-2); font-size: 14px; }
#iv-item-row { margin: 10px 0 0; }
#iv-item { display: block; margin-top: 4px; width: 100%; font-weight: 400; }

/* 面接中の残り時間。締めの合図の少し前から赤くして、注意書きを出す */
.timecard[data-low="true"] { border-color: var(--bad); }
.timecard[data-low="true"] b { color: var(--bad); }
.time-note { width: min(100%, 680px); margin: 10px auto 0; padding: 6px 14px; text-align: center; font-weight: 700; background: var(--yellow-soft); border: 1px solid #f1e0a0; border-radius: 10px; }

/* 1 つの話題だけの練習で、見ていない軸の行 */
.axis-row.not-observed .axis-head { grid-template-columns: minmax(11em, 14em) minmax(0, 1fr); }
.axis-skip { color: var(--ink-2); font-size: 14px; font-weight: 700; }

/* 画面の下の法務リンクと、法務ページ（terms / privacy / tokushoho）。長い文章を読むためのページなので、幅を絞って行間を保つ */
.site-footer { max-width: 1280px; margin: 0 auto; padding: 16px 24px 32px; border-top: 1px solid var(--line); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; }
.site-footer a, .legal a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }
.site-footer a:hover, .legal a:hover { background: var(--yellow-soft); }
.legal { max-width: 760px; }
.legal h2.title { margin-bottom: 8px; }
.legal h3 { margin: 28px 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--yellow); font-size: 18px; }
.legal h4 { margin: 16px 0 4px; font-size: 16px; }
.legal ol, .legal ul { margin: 4px 0 12px; padding-left: 1.6em; }
.legal li { margin: 6px 0; overflow-wrap: anywhere; }
.legal .meta { margin: 0 0 16px; font-size: 14px; color: var(--ink-2); }
.legal .back { margin: 0 0 12px; font-size: 14px; }
.legal .legal-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 32px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.legal .legal-nav a[aria-current="page"] { font-weight: 800; }
.legal .table-wrap { overflow-x: auto; margin: 8px 0 16px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.legal th, .legal td { padding: 8px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.legal thead th { background: var(--paper-2); font-size: 14px; }
.legal tbody th { width: 11em; background: var(--paper-2); font-weight: 700; }

@media (max-width: 760px) {
  .site-footer { padding: 12px 16px 24px; }
  .legal table, .legal tbody, .legal tr, .legal th, .legal td { display: block; width: auto; }
  .legal thead { display: none; }
  .legal tbody th { width: auto; border-bottom: 0; }
  .legal tr { margin: 0 0 12px; }
  .legal td { border-top: 0; }
  .legal td[data-label]::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); }
  .legal tr:has(td[data-label]) { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .legal tr:has(td[data-label]) td { border: 0; }
}

@media (max-width: 760px) {
  #new-topics .choice { flex-basis: 100%; }
  .axis-row.not-observed .axis-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "skip"; }
  .axis-skip { grid-area: skip; }
  .topbar { gap: 4px 12px; }
  .topbar nav { order: 3; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .account-bar { justify-content: flex-start; margin-left: 0; width: 100%; order: 2; }
  .plan-row button { margin-left: 0; width: 100%; }
  .history td.del { text-align: left; }
}

/* プラン画面の一番下の「退会する」 */
.delete-zone { margin-top: 28px; border-color: var(--bad); }
.delete-zone input[type="text"] { width: 14em; max-width: 100%; }
.delete-zone label { display: block; margin-top: 12px; }
#login-consent { margin: 12px 0 8px; }