/* =============================================================
   ksakademi — 学術集会 演題登録システム デザインシステム
   学術的な品格と信頼感:濃紺 × 明朝体見出し × Noto Sans JP
   ============================================================= */

:root {
  /* Brand — 第29回大会テーマ(2027jgb HP 準拠): 濃紺 × 金 × 臙脂 × 和紙 */
  --navy-900: #0E2238;   /* primary-deep */
  --primary-deep: #0E2238;
  --navy-800: #13314f;
  --navy-700: #1B3A5C;   /* primary — 濃紺 */
  --navy-600: #2c5277;
  --navy-500: #5C7FA8;   /* primary-light */
  /* Accent — 金 / 臙脂 */
  --gold: #B89968;
  --gold-soft: #d8c39a;
  --gold-deep: #9a7d4e;
  --crimson: #A8332B;    /* accent-red(臙脂) */
  --crimson-hover: #8A2922;
  /* Ink & 和紙 neutrals */
  --sumi: #1A1A1A;       /* 墨 */
  --ink: #20272e;
  --body: #3a3630;
  --muted: #7a7264;
  --line: #d9cfbc;       /* border-light(和紙の縁) */
  --line-soft: #e7ddca;
  --bg-washi: #F4EFE6;   /* 和紙 */
  --bg-warm: #FAF6EE;
  --bg-cool: #EEF1F4;
  --bg: #ece4d6;         /* 全体背景(和紙の深め) */
  --paper: #fbf8f1;      /* カード=生成りの和紙 */
  --paper-edge: #f1ead9;
  /* States — エラーは臙脂 */
  --danger: #A8332B;
  --danger-bg: #f8e9e6;
  --danger-line: #e3bdb7;
  --success: #2f7d4f;
  --success-bg: #e9f3ec;
  --warn: #b8862f;
  /* Type — 見出し明朝(Noto Serif JP)、本文 Noto Sans JP、テーマに行書 Yuji Mai */
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-gyosho: "Yuji Mai", "Shippori Mincho B1", "Noto Serif JP", serif;
  /* Shape */
  --radius: 6px;
  --radius-sm: 4px;
  --shadow-card: 0 1px 2px rgba(26, 26, 26, .05), 0 22px 48px -22px rgba(14, 34, 56, .30);
  --shadow-soft: 0 1px 3px rgba(26, 26, 26, .06), 0 8px 22px -12px rgba(14, 34, 56, .20);
  --ring: 0 0 0 3px rgba(184, 153, 104, .30);
  --maxw: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.8;
  letter-spacing: .02em;
  color: var(--body);
  background-color: var(--bg);
  /* 和紙: 縦の淡いグラデ + 金/紺のごく薄い染み */
  background-image:
    radial-gradient(120% 90% at 8% 0%, rgba(184, 153, 104, .10), rgba(184, 153, 104, 0) 42%),
    radial-gradient(120% 90% at 100% 8%, rgba(27, 58, 92, .07), rgba(27, 58, 92, 0) 46%),
    linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 和紙の繊維感: SVG フラクタルノイズを全面にごく薄く重ねる */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .035;
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.82" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)"/%3E%3C/svg%3E');
}

::selection { background: rgba(184, 153, 104, .38); text-shadow: none; }

a { color: var(--navy-700); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--crimson); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* リンクをボタン/ブランドとして使う場合は本文リンクの色変化を打ち消す(文字を読めるまま保つ) */
.btn:hover, .app-bar__brand:hover { color: inherit; text-decoration: none; }
.btn--primary, .btn--primary:hover { color: #fff; }

.muted { color: var(--muted); }
.link { color: var(--navy-600); font-weight: 500; }

/* -------------------------------------------------------------
   認証画面(ログイン等)
   ------------------------------------------------------------- */
.auth-wrap {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: 40px 20px 8px;
  /* 落ち着いた光と微細なテクスチャで奥行きを出す */
  background:
    radial-gradient(1100px 520px at 50% -8%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(800px 500px at 88% 8%, rgba(58, 134, 179, .10), rgba(58, 134, 179, 0) 55%),
    linear-gradient(180deg, var(--bg-warm) 0%, var(--bg-washi) 100%);
  position: relative;
}
.auth-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(29, 78, 111, .06) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 70%);
  pointer-events: none;
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 432px;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .6);
  animation: card-rise .55s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes card-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.auth-card__head {
  padding: 30px 34px 24px;
  text-align: center;
  color: var(--sumi);
  /* HP 準拠: 和紙地に墨文字。和紙テクスチャを敷く */
  background-color: var(--bg-warm);
  background-image:
    linear-gradient(rgba(250, 246, 238, .55), rgba(244, 239, 230, .68)),
    url('/images/washi-texture.png');
  background-size: auto, 702px 427px;
  background-repeat: no-repeat, repeat;
  border-bottom: 1px solid var(--line);
}
.auth-card__head--admin {
  background-color: var(--bg-washi);
}
.auth-card__logo {
  display: block;
  height: 60px;
  width: auto;
  margin: 0 auto 12px;
  filter: drop-shadow(0 1px 2px rgba(14, 34, 56, .12));
}
.auth-card__brand {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20.5px;
  letter-spacing: .05em;
  line-height: 1.5;
  color: var(--primary-deep);
}
.auth-card__rule {
  display: block;
  width: 46px;
  height: 2px;
  margin: 13px auto;
  background: linear-gradient(90deg, transparent, var(--gold-soft), var(--gold), var(--gold-soft), transparent);
}
.auth-card__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .16em;
  color: var(--gold-deep);
}

.auth-card__body { padding: 30px 34px 26px; }

.auth-links {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-size: 15.5px;
}

.auth-foot {
  margin: 22px 0 14px;
  font-size: 13.5px;
  letter-spacing: .04em;
  color: var(--muted);
  text-align: center;
}
.auth-foot--recaptcha { margin-top: 16px; font-size: 11.5px; line-height: 1.6; }

/* -------------------------------------------------------------
   フォーム
   ------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 18px; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field__label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--ink);
}
.field__control {
  width: 100%;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 17px;
  color: var(--ink);
  background: #fbfcfd;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field__control::placeholder { color: #aab4bd; }
.field__control:hover { border-color: #bcc8d2; }
.field__control:focus {
  outline: none;
  background: #fff;
  border-color: var(--navy-600);
  box-shadow: var(--ring);
}

/* -------------------------------------------------------------
   ボタン
   ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn--block { width: 100%; }
.btn--sm { padding: 7px 14px; font-size: 14.5px; }

/* プライマリボタン: ホバーで金の光沢が左から右へ一筋流れる */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 70%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(216, 195, 154, .55), transparent);
  transform: skewX(-18deg);
  transition: left .55s cubic-bezier(.2,.9,.3,1);
  pointer-events: none;
}
.btn--primary:hover::after { left: 130%; }

.btn--primary {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-600) 100%);
  box-shadow: 0 8px 18px -10px rgba(29, 78, 111, .8);
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-700) 100%);
  box-shadow: 0 10px 22px -10px rgba(29, 78, 111, .9);
}

.btn--ghost {
  color: var(--primary-deep);
  background: rgba(255, 255, 255, .5);
  border-color: var(--line);
}
.btn--ghost:hover { background: #fff; border-color: var(--gold-deep); color: var(--navy-800); }

/* -------------------------------------------------------------
   アラート
   ------------------------------------------------------------- */
.alert {
  margin: 0 0 18px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 15.5px;
  border: 1px solid transparent;
}
.alert--error { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.alert--success { color: var(--success); background: var(--success-bg); border-color: #bfe2cd; }

/* -------------------------------------------------------------
   認証後レイアウト(アプリ)
   ------------------------------------------------------------- */
.theme-app { display: flex; flex-direction: column; min-height: 100dvh; }

.app-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  color: var(--sumi);
  /* HP トップ準拠: 濃紺ではなく和紙地(墨文字)。和紙テクスチャを敷き、薄い生成りで覆う */
  background-color: var(--bg-washi);
  background-image:
    linear-gradient(rgba(244, 239, 230, .55), rgba(244, 239, 230, .62)),
    url('/images/washi-texture.png');
  background-size: auto, 702px 427px;
  background-repeat: no-repeat, repeat;
  background-position: center, center;
  box-shadow: 0 1px 0 var(--line), 0 2px 12px rgba(14, 34, 56, .05);
  border-bottom: 2px solid var(--gold);
}
.app-bar__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.app-bar__brand { display: flex; flex-direction: row; align-items: center; gap: 12px; line-height: 1.25; color: var(--sumi); }
.app-bar__brand:hover { text-decoration: none; opacity: .85; }
.app-bar__logo { height: 44px; width: auto; display: block; filter: drop-shadow(0 1px 2px rgba(14, 34, 56, .12)); }
.app-bar__brand-text { display: flex; flex-direction: column; }
.app-bar__brand-name { font-family: var(--font-serif); font-weight: 700; font-size: 23px; letter-spacing: .06em; color: var(--primary-deep); }
.app-bar__user { display: flex; align-items: center; gap: 14px; }
.app-bar__username { font-size: 14.5px; color: var(--body); }

.app-main {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 34px 24px 48px;
}

.page-head { margin: 0 0 22px; }
.page-head__title {
  position: relative;
  margin: 0;
  padding-bottom: 12px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 27px;
  letter-spacing: .03em;
  color: var(--navy-800);
}
.page-head__title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 52px; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  border-radius: 2px;
}

.panel {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 26px 28px;
}

.placeholder-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.placeholder-list li {
  position: relative;
  padding: 10px 14px 10px 34px;
  background: var(--bg-warm);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 16px;
}
.placeholder-list li::before {
  content: "";
  position: absolute;
  left: 14px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--gold);
}

.site-foot {
  padding: 18px 24px;
  text-align: center;
  font-size: 13.5px;
  letter-spacing: .04em;
  color: var(--muted);
  background: var(--paper-edge);
  border-top: 1px solid var(--line);
}

/* -------------------------------------------------------------
   レスポンシブ & アクセシビリティ
   ------------------------------------------------------------- */
@media (max-width: 520px) {
  .auth-card__head, .auth-card__body { padding-left: 24px; padding-right: 24px; }
  .app-bar__inner { padding: 0 16px; }
  .app-bar__brand-name { font-size: 17px; }
  .app-bar__logo { height: 32px; }
  .app-main { padding: 24px 16px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* -------------------------------------------------------------
   規約ページ(個人情報の取り扱い 等)
   ------------------------------------------------------------- */
.legal__lead { margin: 0 0 22px; }
.legal__sec { margin: 0 0 22px; }
.legal__h {
  position: relative;
  margin: 0 0 10px;
  padding: 0 0 8px 12px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--navy-800);
  border-bottom: 1px solid var(--line-soft);
}
.legal__h::before {
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 4px; height: 18px;
  background: linear-gradient(var(--gold), var(--gold-deep));
  border-radius: 2px;
}
.legal__list { margin: 0; padding-left: 1.4em; }
.legal__list li { margin: 5px 0; }
.legal__sign { margin: 26px 0 0; text-align: right; color: var(--muted); }
.legal__agree {
  margin: 18px 0 0;
  padding: 12px 15px;
  font-weight: 700;
  color: var(--navy-800);
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.legal__actions { margin-top: 24px; }

/* -------------------------------------------------------------
   入力フォーム(演題登録など 長尺フォーム)
   ------------------------------------------------------------- */
.ks-form { display: flex; flex-direction: column; gap: 20px; }

.form-section {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 22px 24px 24px;
}
.form-section__title {
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-serif);
  font-size: 19.5px;
  font-weight: 600;
  color: var(--navy-800);
}
.form-section__title::before {
  content: "";
  display: inline-block;
  width: 4px; height: 16px;
  margin-right: 10px;
  vertical-align: -2px;
  background: linear-gradient(var(--gold), var(--gold-soft));
  border-radius: 2px;
  transition: height .28s cubic-bezier(.19,1,.22,1);
}
.form-section__note { font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--muted); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 22px;
}
.field--full { grid-column: 1 / -1; }

/* 氏名: 姓/名 を列・漢字/ふりがな を段にした 2 段レイアウト(docs/参考 準拠) */
.name-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px 16px;
  align-items: start;
  margin-top: 2px;
}
.name-grid__col {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--navy-800);
  text-align: center;
}
.name-grid__row {
  padding-top: 13px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  text-align: right;
}
/* 入力欄右肩の ✓/! マークは上にラベルが無いぶん位置を上に補正する */
.name-grid .field--has-mark > .field__mark { top: 16px; }

@media (max-width: 520px) {
  .name-grid { gap: 7px 9px; }
}

.req {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: var(--danger);
  border-radius: 999px;
  vertical-align: 1px;
}
.help { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.field__error { margin: 6px 0 0; font-size: 14px; font-weight: 500; color: var(--danger); }
/* セクション直下に縦に積んだ項目(演題: 応募区分/演題分類/演題名/本文)は .form-grid の行間と同じだけ離す。
   エラー文は自分の項目の直下に詰め、次の項目と紛れないようにする */
.form-section > .field + .field { margin-top: 16px; }
.form-section > .field > .field__error { margin-top: 0; }
.field__control--narrow { max-width: 22rem; }

.terms-box {
  max-height: 150px;
  overflow-y: auto;
  padding: 14px 16px;
  margin-bottom: 14px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--body);
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.check { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--crimson); }
.check--inline { margin-right: 12px; }
/* 演題分類: 分類名を折り返さない。列幅 = 最長の分類名の文字数(--cat-name-chars。1字=1em で見積もる)
   + チェックボックス分。1列でも収まらない狭い画面でだけ折り返す */
.category-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--cat-name-chars, 8) * 1em + 2.5em)), 1fr));
  gap: 8px 16px;
  margin-top: 4px;
}

.orgcheck { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; }
.orgcheck__label { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-right: 8px; }

.ks-subtable { width: 100%; border-collapse: collapse; font-size: 16px; }
.ks-subtable th {
  padding: 8px 10px;
  text-align: left;
  font-size: 14px;
  color: var(--navy-800);
  background: var(--bg-warm);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.ks-subtable td { padding: 7px 8px; border: 1px solid var(--line-soft); vertical-align: top; }
.ks-subtable td .field__control { padding: 8px 10px; }
/* 表の中の入力欄はラベルが無いので、✓/! マークを欄の縦中央(高さ 43px)に置く */
.ks-subtable .field--has-mark > .field__mark { top: 12px; }
.ks-subtable__no { text-align: center; color: var(--muted); font-weight: 700; background: var(--paper-edge); }
.ks-subtable__orgs { white-space: nowrap; }
.ks-subtable__orgs .check--inline { margin-right: 6px; }
.ks-subtable__act { text-align: center; white-space: nowrap; }

/* 共同演者: 1 名ごとに 漢字 / ふりがな / 所属 を縦に積む 3 段ブロック(docs/参考 準拠) */
.co-list { display: flex; flex-direction: column; gap: 16px; }
.co-block {
  padding: 14px 16px 16px;
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.co-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-soft);
}
.co-block__no { font-size: 14px; font-weight: 700; color: var(--navy-800); }
.co-block__no .js-rownum { margin-left: 2px; color: var(--gold-deep); }
.co-block__orgs {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 13px;
}

/* 動的行: 追加ボタン・削除ボタン・所属チェック群 */
.rowtable-actions { margin-top: 10px; }
.btn--add {
  color: var(--navy-700);
  background: linear-gradient(180deg, #fffdf8, var(--paper-edge));
  border: 1px dashed var(--gold-deep);
  font-weight: 700;
}
.btn--add:hover { color: var(--navy-800); border-style: solid; box-shadow: var(--shadow-soft); }
.btn--add:disabled { opacity: .45; cursor: not-allowed; border-style: dashed; box-shadow: none; }
.btn--ghost-line {
  color: var(--crimson);
  background: transparent;
  border: 1px solid var(--danger-line);
  padding: 5px 12px;
  font-size: 14px;
}
.btn--ghost-line:hover { color: #fff; background: var(--crimson); border-color: var(--crimson); }
.orgcheck__boxes { display: inline-flex; flex-wrap: wrap; gap: 6px 4px; }
/* 行の登場(追加時にふわっと) */
.js-aff-row, .js-co-row { animation: ks-rise .3s ease both; }
@media (prefers-reduced-motion: reduce) { .js-aff-row, .js-co-row { animation: none !important; } }

.form-actions { margin-top: 6px; display: flex; justify-content: center; }
.form-actions--split { justify-content: space-between; align-items: center; gap: 12px; }
.btn--lg { padding: 13px 40px; font-size: 17.5px; }

/* 確認・完了 */
.kv {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 0;
  margin: 4px 0 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.kv dt {
  padding: 12px 16px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy-800);
  background: var(--bg-warm);
  border-bottom: 1px solid var(--line-soft);
}
.kv dd {
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
}
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: 0; }
.pre { white-space: pre-wrap; }

.panel--center { text-align: center; }
.finish-lead { font-family: var(--font-serif); font-size: 22.5px; color: var(--navy-800); margin: 8px 0 16px; }
.finish-id { font-size: 18px; margin: 0 0 8px; }
.finish-id strong { color: var(--navy-700); font-size: 22.5px; margin-left: 6px; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
  .kv dd { border-left: 0; }
  .form-actions--split { flex-direction: column-reverse; }
  .form-actions--split .btn, .form-actions--split form { width: 100%; }
  .form-actions--split .btn--lg { width: 100%; }
}

/* マイページ・郵便番号検索・読み取り専用表示 */
.field__static { margin: 0; padding: 11px 2px; font-weight: 700; color: var(--ink); }
.zip-row { display: flex; gap: 8px; align-items: stretch; }
.zip-row .field__control { flex: 1; }
.zip-row .btn { white-space: nowrap; }
.mypage-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.mypage-head__title { margin: 0; font-family: var(--font-serif); font-size: 20.5px; color: var(--navy-800); }
@media (max-width: 640px) {
  .mypage-head { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   第29回大会 — 和の意匠 オーバーレイ(質感・演出・入力インジケータ)
   ベース定義の後に置き、変数経由で上書きする。
   ============================================================= */

/* --- カード(panel / form-section / auth-card)を生成りの和紙に。金の天罫を一筋 --- */
.panel,
.form-section,
.auth-card {
  position: relative;
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-edge) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.panel::before,
.form-section::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-soft) 18%, var(--gold) 50%, var(--gold-soft) 82%, transparent);
  opacity: .9;
  transform: scaleX(.55);
  transition: transform .45s cubic-bezier(.19,1,.22,1), opacity .3s ease;
}

/* --- フォーカス中/ホバー中のセクションを際立たせる ---
   入力中(focus-within)は強め、マウスオーバー(hover)は控えめに浮かせる。 */
.form-section {
  transition: box-shadow .28s ease, border-color .28s ease, transform .28s ease;
}
.form-section:hover {
  border-color: var(--gold-soft);
  box-shadow: 0 2px 4px rgba(26,26,26,.05), 0 18px 40px -22px rgba(14,34,56,.34);
  transform: translateY(-1px);
}
.form-section:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold-soft), 0 14px 40px -18px rgba(184,153,104,.5);
}
/* 天罫(金のライン)を hover/focus で全幅に伸ばして光らせる */
.form-section:hover::before { transform: scaleX(.82); opacity: 1; }
.form-section:focus-within::before { transform: scaleX(1); opacity: 1; }
/* 見出しの前罫(縦バー)を focus 中に少し伸ばす */
.form-section:focus-within .form-section__title::before { height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .form-section, .form-section::before, .panel::before { transition: none !important; transform: none !important; }
  .form-section:hover { transform: none; }
}

/* --- 見出しは明朝で品格を。section タイトルの前罫を金+紺の二色に --- */
.form-section__title,
.page-head__title,
.mypage-head__title,
.finish-lead { font-family: var(--font-serif); letter-spacing: .04em; }

.form-section__title::before {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep)) !important;
  box-shadow: 1px 0 0 var(--navy-700);
}

/* --- 大会名は明朝・字間ゆったり --- */
.app-bar__brand-name { font-family: var(--font-serif); font-weight: 600; letter-spacing: .06em; }

/* --- フッターも和紙トーンに --- */
.site-foot { background: var(--paper-edge); border-top: 1px solid var(--line); color: var(--muted); }

/* --- 入力コントロール: 和紙の地・金のフォーカスリング・墨の文字 --- */
.field__control {
  background: #fffdf8;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.field__control:hover { border-color: var(--gold-deep); }
.field__control:focus {
  outline: none;
  border-color: var(--gold);
  background: #fff;
  box-shadow: var(--ring);
}

/* --- ボタン: 濃紺の重ね刷り + 金の縁。押下で沈む --- */
.btn--primary {
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-800) 100%);
  border: 1px solid rgba(184, 153, 104, .55);
  box-shadow: 0 10px 22px -12px rgba(14, 34, 56, .6);
  letter-spacing: .08em;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.btn--primary:hover { filter: brightness(1.08); box-shadow: 0 14px 28px -12px rgba(14, 34, 56, .7); }
.btn--primary:active { transform: translateY(1px); }

/* 必須/任意バッジ */
.req {
  background: var(--crimson);
  color: #fff;
  letter-spacing: .08em;
}
.opt-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--muted);
  background: var(--bg-cool);
  border: 1px solid var(--line);
  border-radius: 999px;
  vertical-align: 1px;
}

/* =============================================================
   入力インジケータ(リアルタイム検証 ✓/✗・パスワード強度・文字数)
   ============================================================= */
.field { position: relative; }

/* 検証状態の細い側罫(左)で「整った/要確認」を静かに伝える */
.field--ok > .field__control { border-color: var(--success); }
.field--ng > .field__control { border-color: var(--danger); }
.field--ok > .field__control:focus { box-shadow: 0 0 0 3px rgba(47, 125, 79, .22); }
.field--ng > .field__control:focus { box-shadow: 0 0 0 3px rgba(168, 51, 43, .20); }

/* 入力欄の右肩に出る ✓ / ! マーク */
.field__mark {
  position: absolute;
  right: 12px;
  width: 20px; height: 20px;
  display: none;
  align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 13.5px; font-weight: 700;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s ease, transform .2s cubic-bezier(.2,1.4,.4,1);
}
.field--has-mark > .field__mark { display: inline-flex; }
.field--ok > .field__mark { background: var(--success); opacity: 1; transform: scale(1); }
.field--ng > .field__mark { background: var(--danger); opacity: 1; transform: scale(1); }
.field--ok > .field__mark::after { content: "✓"; }
.field--ng > .field__mark::after { content: "!"; }
/* ラベル付きフィールドではラベル分だけ下げる(label→control の縦並び) */
.field--has-mark > .field__mark { top: 33px; }

/* パスワード強度メーター */
.pw-meter { margin-top: 8px; }
.pw-meter__track {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-cool);
  border: 1px solid var(--line);
  overflow: hidden;
}
.pw-meter__bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--danger);
  transition: width .35s cubic-bezier(.2,.9,.3,1), background .35s ease;
}
.pw-meter__label { margin-top: 5px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.pw-meter[data-level="1"] .pw-meter__bar { width: 25%; background: var(--danger); }
.pw-meter[data-level="2"] .pw-meter__bar { width: 50%; background: var(--warn); }
.pw-meter[data-level="3"] .pw-meter__bar { width: 78%; background: #4f9a6a; }
.pw-meter[data-level="4"] .pw-meter__bar { width: 100%; background: var(--success); }
.pw-meter[data-level="1"] .pw-meter__label { color: var(--danger); }
.pw-meter[data-level="2"] .pw-meter__label { color: var(--warn); }
.pw-meter[data-level="3"] .pw-meter__label,
.pw-meter[data-level="4"] .pw-meter__label { color: var(--success); }

/* 文字数カウンタ(超過で臙脂) */
.help .count { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--navy-700); }
.help .count--over { color: var(--danger); }

/* =============================================================
   登場アニメ(ページロードのスタガー) prefers-reduced-motion で停止
   ============================================================= */
@keyframes ks-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ks-fade { from { opacity: 0; } to { opacity: 1; } }

.app-main > * { animation: ks-rise .6s cubic-bezier(.19,1,.22,1) both; }
.ks-form .form-section { animation: ks-rise .62s cubic-bezier(.19,1,.22,1) both; }
.ks-form .form-section:nth-child(1) { animation-delay: .04s; }
.ks-form .form-section:nth-child(2) { animation-delay: .10s; }
.ks-form .form-section:nth-child(3) { animation-delay: .16s; }
.ks-form .form-section:nth-child(4) { animation-delay: .22s; }
.ks-form .form-section:nth-child(5) { animation-delay: .28s; }
.ks-form .form-section:nth-child(6) { animation-delay: .34s; }
.ks-form .form-actions { animation: ks-rise .6s .4s cubic-bezier(.19,1,.22,1) both; }
.auth-card { animation: ks-rise .7s cubic-bezier(.19,1,.22,1) both; }
.app-bar { animation: ks-fade .8s ease both; }

@media (prefers-reduced-motion: reduce) {
  .app-main > *, .ks-form .form-section, .ks-form .form-actions,
  .auth-card, .app-bar, .field__mark, .pw-meter__bar { animation: none !important; }
}