:root {
  color-scheme: light;
  --ink: #1f2b3a;
  --soft-ink: #4a5a6e;
  --muted: #5e6b7d;
  --navy: #1b3a5b;
  --navy-deep: #122a45;
  --blue: #3f7cc4;
  --blue-soft: #6fa3da;
  --sky: #bcd6f0;
  --paper: #eef3f9;
  --panel: rgba(255, 255, 255, 0.84);
  --panel-cool: rgba(236, 243, 251, 0.78);
  --line: rgba(40, 64, 92, 0.14);
  --line-strong: rgba(40, 64, 92, 0.26);
  --teal: #4bb3a6;
  --cyan: #1f8aa6;
  --amber: #e6a552;
  --coral: #df6b5e;
  --coral-deep: #c5503f;
  --violet: #8a7fc4;
  --white: #ffffff;
  --shadow-soft: 0 16px 38px rgba(20, 42, 69, 0.12);
  --shadow-float: 0 22px 58px rgba(18, 38, 64, 0.18);
  --inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.84);

  /* ===== テーマ切替用サーフェス（既定＝ライト） ===== */
  --amount-color: var(--navy);
  --decor-opacity: 0.62;
  --card-decor-opacity: 1;
  --app-bg:
    linear-gradient(145deg, rgba(188, 214, 240, 0.55) 0%, transparent 30%),
    linear-gradient(225deg, rgba(63, 124, 196, 0.18) 0%, transparent 40%),
    linear-gradient(180deg, #eef3f9 0%, #dde7f3 56%, #ccd9ea 100%);
  --topbar-bg:
    linear-gradient(100deg, rgba(27, 58, 91, 0.97) 0%, rgba(31, 67, 104, 0.92) 56%, rgba(63, 124, 196, 0.86) 100%);
  --glass-border: rgba(255, 255, 255, 0.72);
  --subpanel-bg: rgba(255, 255, 255, 0.46);
  --card-bg: rgba(255, 255, 255, 0.82);
  --input-bg: rgba(255, 255, 255, 0.7);
  --input-border: rgba(40, 64, 92, 0.2);
  --btn-quiet-bg: rgba(255, 255, 255, 0.62);
  --btn-quiet-border: rgba(255, 255, 255, 0.68);
  --chip-neutral-bg: rgba(255, 255, 255, 0.62);
  --track-bg: rgba(40, 64, 92, 0.1);
  --focus-strip-bg:
    linear-gradient(110deg, rgba(255, 255, 255, 0.76), rgba(236, 243, 251, 0.7)),
    rgba(255, 255, 255, 0.48);
  --cloud-bg:
    linear-gradient(95deg, rgba(236, 243, 251, 0.78), rgba(255, 255, 255, 0.82) 54%, rgba(214, 230, 246, 0.62)),
    rgba(255, 255, 255, 0.5);
}

/* =========================================================================
 * テーマ② Dark Analytics（画像再現・濃紺アナリティクス）
 * ========================================================================= */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e8eefc;
  --soft-ink: #aab6cf;
  --muted: #8290ab;
  --blue: #5b9bf5;
  --blue-soft: #7fb0f7;
  --sky: #9fc4ff;
  --paper: #131a2c;
  --panel: rgba(22, 30, 51, 0.72);
  --panel-cool: rgba(20, 27, 46, 0.7);
  --line: rgba(150, 175, 220, 0.14);
  --line-strong: rgba(150, 175, 220, 0.26);
  --teal: #34d3c0;
  --cyan: #45c0e0;
  --amber: #f0b760;
  --coral: #f08a7e;
  --coral-deep: #ff9b8e;
  --violet: #a99bf0;
  --shadow-soft: 0 16px 38px rgba(0, 0, 0, 0.45);
  --shadow-float: 0 22px 58px rgba(0, 0, 0, 0.55);
  --inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --amount-color: #cfe0ff;
  --decor-opacity: 0;
  --card-decor-opacity: 0;
  --app-bg:
    radial-gradient(1200px 600px at 80% -10%, rgba(59, 130, 246, 0.18), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(52, 211, 192, 0.1), transparent 55%),
    linear-gradient(180deg, #0a0e1a 0%, #0b1020 60%, #0a0e18 100%);
  --topbar-bg:
    linear-gradient(105deg, rgba(20, 30, 58, 0.96) 0%, rgba(28, 48, 96, 0.92) 52%, rgba(45, 98, 170, 0.85) 100%);
  --glass-border: rgba(120, 160, 230, 0.18);
  --subpanel-bg: rgba(20, 28, 48, 0.55);
  --card-bg: rgba(22, 30, 51, 0.66);
  --input-bg: rgba(13, 19, 34, 0.7);
  --input-border: rgba(120, 160, 230, 0.22);
  --btn-quiet-bg: rgba(40, 52, 82, 0.6);
  --btn-quiet-border: rgba(120, 160, 230, 0.22);
  --chip-neutral-bg: rgba(60, 76, 112, 0.5);
  --track-bg: rgba(150, 175, 220, 0.12);
  --focus-strip-bg:
    linear-gradient(110deg, rgba(28, 40, 72, 0.7), rgba(18, 26, 46, 0.6)),
    rgba(18, 26, 46, 0.5);
  --cloud-bg:
    linear-gradient(95deg, rgba(24, 34, 60, 0.8), rgba(18, 26, 46, 0.82) 54%, rgba(30, 44, 78, 0.7)),
    rgba(16, 22, 40, 0.6);
}

/* =========================================================================
 * テーマ③ Warm Sand（明るいウォーム系・エディトリアル）
 * ========================================================================= */
:root[data-theme="warm"] {
  --ink: #3b2f28;
  --soft-ink: #6b5a4d;
  --muted: #8a7666;
  --navy: #9c4221;
  --navy-deep: #7a3318;
  --blue: #c2703d;
  --blue-soft: #d98c54;
  --sky: #f0d9c2;
  --paper: #f7efe6;
  --panel: rgba(255, 250, 243, 0.86);
  --panel-cool: rgba(248, 238, 226, 0.8);
  --line: rgba(120, 80, 50, 0.16);
  --line-strong: rgba(120, 80, 50, 0.28);
  --teal: #5a9e7a;
  --cyan: #3f8f86;
  --amber: #d99a3f;
  --coral: #d96b54;
  --coral-deep: #b5482f;
  --violet: #a07bb0;
  --shadow-soft: 0 16px 38px rgba(90, 60, 35, 0.14);
  --shadow-float: 0 22px 58px rgba(90, 60, 35, 0.2);
  --inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --amount-color: var(--navy);
  --decor-opacity: 0.5;
  --card-decor-opacity: 1;
  --app-bg:
    linear-gradient(145deg, rgba(240, 217, 194, 0.5) 0%, transparent 30%),
    linear-gradient(225deg, rgba(194, 112, 61, 0.12) 0%, transparent 40%),
    linear-gradient(180deg, #faf3ea 0%, #f3e6d6 56%, #ecdcc8 100%);
  --topbar-bg:
    linear-gradient(100deg, rgba(124, 51, 24, 0.96) 0%, rgba(156, 66, 33, 0.92) 54%, rgba(194, 112, 61, 0.86) 100%);
  --glass-border: rgba(255, 250, 243, 0.7);
  --subpanel-bg: rgba(255, 250, 243, 0.5);
  --card-bg: rgba(255, 251, 245, 0.85);
  --input-bg: rgba(255, 252, 247, 0.75);
  --input-border: rgba(120, 80, 50, 0.2);
  --btn-quiet-bg: rgba(255, 250, 243, 0.66);
  --btn-quiet-border: rgba(255, 244, 232, 0.7);
  --chip-neutral-bg: rgba(255, 248, 238, 0.7);
  --track-bg: rgba(120, 80, 50, 0.1);
  --focus-strip-bg:
    linear-gradient(110deg, rgba(255, 250, 243, 0.78), rgba(248, 236, 222, 0.7)),
    rgba(255, 250, 243, 0.5);
  --cloud-bg:
    linear-gradient(95deg, rgba(248, 238, 226, 0.8), rgba(255, 250, 243, 0.84) 54%, rgba(240, 224, 205, 0.64)),
    rgba(255, 250, 243, 0.5);
}

/* =========================================================================
 * テーマ④ Midnight Emerald（濃緑×ゴールドのダーク）
 * ========================================================================= */
:root[data-theme="emerald"] {
  color-scheme: dark;
  --ink: #e7f3ec;
  --soft-ink: #a7c2b4;
  --muted: #7f9b8d;
  --blue: #34d399;
  --blue-soft: #5fe0b0;
  --sky: #9fe8c8;
  --paper: #0c1a14;
  --panel: rgba(16, 32, 26, 0.72);
  --panel-cool: rgba(14, 28, 22, 0.7);
  --line: rgba(140, 210, 180, 0.14);
  --line-strong: rgba(140, 210, 180, 0.26);
  --teal: #2dd4bf;
  --cyan: #4cc9b0;
  --amber: #e9c46a;
  --coral: #ef8a6b;
  --coral-deep: #ff9b7a;
  --violet: #9db8a8;
  --shadow-soft: 0 16px 38px rgba(0, 0, 0, 0.45);
  --shadow-float: 0 22px 58px rgba(0, 0, 0, 0.55);
  --inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --amount-color: #b9f0d4;
  --decor-opacity: 0;
  --card-decor-opacity: 0;
  --app-bg:
    radial-gradient(1100px 560px at 82% -10%, rgba(52, 211, 153, 0.16), transparent 60%),
    radial-gradient(800px 460px at -8% 18%, rgba(233, 196, 106, 0.08), transparent 55%),
    linear-gradient(180deg, #07140e 0%, #08160f 60%, #06120d 100%);
  --topbar-bg:
    linear-gradient(105deg, rgba(8, 28, 20, 0.96) 0%, rgba(12, 52, 38, 0.92) 52%, rgba(20, 110, 80, 0.82) 100%);
  --glass-border: rgba(120, 210, 175, 0.18);
  --subpanel-bg: rgba(14, 30, 24, 0.55);
  --card-bg: rgba(16, 32, 26, 0.66);
  --input-bg: rgba(8, 18, 14, 0.7);
  --input-border: rgba(120, 210, 175, 0.22);
  --btn-quiet-bg: rgba(28, 52, 42, 0.6);
  --btn-quiet-border: rgba(120, 210, 175, 0.22);
  --chip-neutral-bg: rgba(40, 70, 58, 0.5);
  --track-bg: rgba(140, 210, 180, 0.12);
  --focus-strip-bg:
    linear-gradient(110deg, rgba(20, 40, 32, 0.7), rgba(10, 22, 17, 0.6)),
    rgba(10, 22, 17, 0.5);
  --cloud-bg:
    linear-gradient(95deg, rgba(16, 38, 28, 0.8), rgba(10, 22, 17, 0.82) 54%, rgba(22, 52, 40, 0.7)),
    rgba(8, 18, 14, 0.6);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--app-bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Segoe UI", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 12%, rgba(255, 255, 255, 0.3) 12% 13%, transparent 13% 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 35%, rgba(63, 124, 196, 0.14));
  opacity: var(--decor-opacity);
}

body::after {
  content: "";
  position: fixed;
  left: -10vw;
  right: -10vw;
  bottom: -34vh;
  height: 46vh;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(27, 58, 91, 0.32), rgba(63, 124, 196, 0.12));
  border-radius: 55% 45% 0 0;
  transform: rotate(-3deg);
  opacity: var(--decor-opacity);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  position: relative;
  z-index: 1;
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: 30px 0 44px;
}

.topbar {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  min-height: 174px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--topbar-bg);
  box-shadow: var(--shadow-float), var(--inner-light);
}

.topbar::before {
  content: "";
  position: absolute;
  left: -4%;
  right: 28%;
  bottom: -42%;
  height: 64%;
  background: linear-gradient(120deg, rgba(111, 163, 218, 0.55), rgba(188, 214, 240, 0.28));
  border-radius: 50% 50% 0 0;
  transform: rotate(-4deg);
  opacity: 0.5;
}

.topbar::after {
  content: "";
  position: absolute;
  right: -6%;
  top: -28%;
  width: 48%;
  height: 86%;
  background: linear-gradient(150deg, rgba(75, 179, 166, 0.4), rgba(255, 255, 255, 0.12));
  border-radius: 0 0 0 62%;
  opacity: 0.4;
}

.topbar > div {
  position: relative;
  z-index: 1;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--sky);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  max-width: 720px;
  color: #ffffff;
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1;
  letter-spacing: 0;
  text-wrap: balance;
}

h2 {
  color: var(--ink);
  font-size: 16px;
  letter-spacing: 0;
}

.date-panel {
  position: relative;
  z-index: 1;
  min-width: 210px;
  display: grid;
  justify-items: end;
  gap: 4px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  color: #e7eff8;
  box-shadow: 10px 14px 34px rgba(10, 26, 46, 0.24), var(--inner-light);
  backdrop-filter: blur(18px);
}

.date-panel span {
  font-size: 13px;
}

.date-panel strong {
  color: #ffffff;
  font-size: 32px;
  line-height: 1.1;
}

.date-panel small {
  color: var(--sky);
  font-size: 12px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.summary-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  padding: 18px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  box-shadow: 14px 20px 46px rgba(20, 42, 69, 0.12), var(--inner-light);
  backdrop-filter: blur(18px);
}

.summary-cell::after {
  content: "";
  position: absolute;
  inset: auto -8% -42% 18%;
  height: 72%;
  background: linear-gradient(120deg, rgba(63, 124, 196, 0.2), rgba(255, 255, 255, 0.08));
  border-radius: 50% 50% 0 0;
  transform: rotate(-6deg);
  opacity: var(--card-decor-opacity);
}

.summary-cell.primary::after {
  background: linear-gradient(120deg, rgba(75, 179, 166, 0.26), rgba(255, 255, 255, 0.08));
}

.summary-cell.warn::after {
  background: linear-gradient(120deg, rgba(223, 107, 94, 0.24), rgba(255, 255, 255, 0.08));
}

.summary-icon {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #d7e6f6);
  color: var(--blue);
  font-weight: 950;
  font-size: 18px;
  box-shadow: 8px 10px 22px rgba(28, 52, 80, 0.16), inset 0 -8px 14px rgba(63, 124, 196, 0.16);
}

.summary-cell.primary .summary-icon {
  background: linear-gradient(145deg, #eefaf7, #bfe9e1);
  color: #2f9183;
}

.summary-cell.warn .summary-icon {
  background: linear-gradient(145deg, #fff0ed, #f6cbc3);
  color: var(--coral-deep);
}

.summary-cell p,
.project-meta,
.project-memo,
label span,
.focus-strip p {
  color: var(--soft-ink);
  font-size: 13px;
}

.summary-cell div {
  position: relative;
  z-index: 1;
}

.summary-cell strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.summary-cell small {
  color: var(--muted);
  font-size: 12px;
}

.goal-bar {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft), var(--inner-light);
  backdrop-filter: blur(18px);
}

.goal-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.goal-bar-head > span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  /* 設定欄が幅を取るとラベルが1〜4文字幅まで圧縮され縦折れするため、縮小させない */
  flex: 0 0 auto;
}

.goal-settings {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.goal-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

#businessNameInput {
  width: 180px;
}

.goal-input span {
  color: var(--soft-ink);
  font-size: 12px;
  white-space: nowrap;
}

.goal-input input {
  width: 130px;
  padding: 8px 10px;
}

.goal-input-bank {
  align-items: flex-start;
  flex-basis: 100%;
}

.goal-input-bank textarea {
  flex: 1;
  min-width: 240px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
}

.progress-track {
  position: relative;
  height: 30px;
  border-radius: 999px;
  background: var(--track-bg);
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(20, 42, 69, 0.12);
}

.progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  transition: width 360ms ease;
}

.progress-fill.over {
  background: linear-gradient(135deg, var(--teal), #2f9183);
}

.progress-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.cloud-panel {
  display: block;
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--cloud-bg);
  box-shadow: var(--shadow-soft), var(--inner-light);
  backdrop-filter: blur(18px);
}

.cloud-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
}

.cloud-summary::-webkit-details-marker {
  display: none;
}

.cloud-copy {
  display: grid;
  gap: 6px;
}

.cloud-copy .eyebrow {
  color: var(--blue);
}

.cloud-copy h2 {
  font-size: 20px;
}

.cloud-copy p:last-child {
  color: var(--soft-ink);
  font-size: 13px;
  line-height: 1.5;
}

.cloud-toggle {
  flex: 0 0 auto;
  min-width: 76px;
  padding: 9px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--btn-quiet-bg);
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.cloud-panel[open] .cloud-toggle::after {
  content: "を閉じる";
}

.cloud-panel:not([open]) .cloud-toggle::after {
  content: "を開く";
}

.cloud-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 14px;
  align-items: end;
  padding: 0 16px 16px;
}

.cloud-setup {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(80, 130, 220, 0.45);
  border-radius: 12px;
  background: rgba(80, 130, 220, 0.08);
}

.cloud-fields {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 0.9fr;
  gap: 10px;
}

.cloud-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.work-layout {
  display: grid;
  grid-template-columns: 372px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.project-form,
.board {
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft), var(--inner-light);
  backdrop-filter: blur(20px);
}

.project-form {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 14px;
  padding: 18px;
}

.project-form.editing {
  border-color: rgba(63, 124, 196, 0.6);
  box-shadow: 0 0 0 3px rgba(63, 124, 196, 0.16), var(--shadow-soft);
}

.form-head,
.section-title,
.project-topline,
.focus-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.form-head {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

label {
  display: grid;
  gap: 7px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
  padding: 12px 13px;
  box-shadow: inset 4px 5px 12px rgba(20, 42, 69, 0.05), var(--inner-light);
}

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: #9aa6b1;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(63, 124, 196, 0.26);
  border-color: rgba(63, 124, 196, 0.62);
}

button:focus-visible,
summary:focus-visible,
.cloud-summary:focus-visible {
  outline: 3px solid rgba(63, 124, 196, 0.55);
  outline-offset: 2px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.form-buttons {
  display: grid;
  gap: 8px;
}

.submit-button,
.quiet-button,
.icon-button {
  border: 0;
  border-radius: 8px;
  font-weight: 850;
}

.submit-button {
  min-height: 48px;
  background: linear-gradient(135deg, var(--blue), var(--navy));
  color: #ffffff;
  box-shadow: 12px 16px 32px rgba(27, 58, 91, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.quiet-button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--btn-quiet-border);
  background: var(--btn-quiet-bg);
  color: var(--ink);
  box-shadow: 6px 8px 18px rgba(20, 42, 69, 0.08), var(--inner-light);
}

.cloud-actions .quiet-button {
  min-height: 40px;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
}

.icon-button {
  width: 38px;
  height: 38px;
  background: linear-gradient(145deg, var(--blue-soft), var(--blue));
  color: #ffffff;
  font-size: 22px;
  box-shadow: 8px 10px 22px rgba(27, 58, 91, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.board {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 18px;
  overflow: hidden;
}

.board::before {
  content: "";
  position: absolute;
  left: -8%;
  right: 34%;
  bottom: -12%;
  height: 28%;
  background: linear-gradient(115deg, rgba(63, 124, 196, 0.22), rgba(255, 255, 255, 0.04));
  border-radius: 50% 50% 0 0;
  transform: rotate(-3deg);
  opacity: var(--card-decor-opacity);
}

.board > * {
  position: relative;
  z-index: 1;
}

.focus-strip {
  min-height: 86px;
  padding: 16px 18px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--focus-strip-bg);
  box-shadow: 10px 12px 26px rgba(20, 42, 69, 0.1), var(--inner-light);
}

.focus-list {
  display: grid;
  gap: 7px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.focus-list li {
  display: grid;
  gap: 2px;
  padding-left: 14px;
  border-left: 3px solid rgba(63, 124, 196, 0.4);
}

.focus-list strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.focus-list span {
  color: var(--soft-ink);
  font-size: 12px;
}

.board-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-width: 170px;
}

.board-actions .quiet-button {
  min-height: 44px;
}

.chart-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--subpanel-bg);
  box-shadow: 8px 10px 24px rgba(20, 42, 69, 0.08), var(--inner-light);
}

.chart-wrap {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  gap: 6px;
  height: 168px;
  padding-top: 18px;
}

.chart-col {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  gap: 6px;
  height: 100%;
  text-align: center;
}

.chart-bar-track {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
  height: 100%;
}

.chart-bar {
  width: 64%;
  min-height: 3px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--blue-soft), var(--blue));
  transition: height 360ms ease;
}

.chart-bar.current {
  background: linear-gradient(180deg, var(--teal), #2f9183);
}

.chart-bar-value {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--soft-ink);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.chart-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.chart-label.current {
  color: var(--blue);
}

.project-section {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--subpanel-bg);
  box-shadow: 8px 10px 24px rgba(20, 42, 69, 0.08), var(--inner-light);
}

.section-title {
  min-height: 32px;
}

.section-title h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title h2::before {
  content: "";
  width: 8px;
  height: 22px;
  border-radius: 99px;
  background: var(--blue);
}

[data-status="paid"] .section-title h2::before {
  background: var(--teal);
}

.section-title span {
  min-width: 32px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--chip-neutral-bg);
  color: var(--soft-ink);
  font-weight: 900;
  font-size: 13px;
  box-shadow: var(--inner-light);
}

.project-list {
  display: grid;
  gap: 9px;
  min-height: 24px;
}

.project-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 11px;
  align-items: start;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  background: var(--card-bg);
  box-shadow: 6px 8px 20px rgba(20, 42, 69, 0.08), var(--inner-light);
}

.project-card[data-state="lead"] { border-left-color: var(--violet); }
.project-card[data-state="ordered"] { border-left-color: var(--blue); }
.project-card[data-state="producing"] { border-left-color: var(--amber); }
.project-card[data-state="delivered"] { border-left-color: var(--cyan); }
.project-card[data-state="invoiced"] { border-left-color: var(--coral); }
.project-card[data-state="paid"] {
  border-left-color: var(--teal);
  opacity: 0.82;
}

.project-card.overdue {
  background: rgba(255, 244, 242, 0.9);
}

.project-main {
  min-width: 0;
}

.project-topline strong {
  min-width: 0;
  color: var(--ink);
  font-size: 16px;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.project-amount {
  flex: 0 0 auto;
  color: var(--amount-color);
  font-size: 16px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.project-meta {
  margin-top: 5px;
}

.status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}

.status-chip {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  background: rgba(63, 124, 196, 0.12);
  color: var(--blue);
}

.status-chip[data-state="lead"] { background: rgba(138, 127, 196, 0.16); color: var(--violet); }
.status-chip[data-state="ordered"] { background: rgba(63, 124, 196, 0.14); color: var(--blue); }
.status-chip[data-state="producing"] { background: rgba(230, 165, 82, 0.18); color: #b07b29; }
.status-chip[data-state="delivered"] { background: rgba(31, 138, 166, 0.16); color: var(--cyan); }
.status-chip[data-state="invoiced"] { background: rgba(223, 107, 94, 0.16); color: var(--coral-deep); }
.status-chip[data-state="paid"] { background: rgba(75, 179, 166, 0.18); color: #2f9183; }

.next-action {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.next-action.alert {
  color: var(--coral-deep);
  font-weight: 850;
}

.project-memo {
  margin-top: 8px;
  color: var(--soft-ink);
  line-height: 1.55;
}

.project-buttons {
  display: grid;
  gap: 6px;
  align-content: start;
}

.project-buttons button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--soft-ink);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: var(--inner-light);
}

.project-buttons .step-button {
  background: linear-gradient(135deg, var(--blue-soft), var(--blue));
  color: #ffffff;
  border: 0;
}

.project-card[data-state="paid"] .step-button {
  display: none;
}

.project-buttons .delete-button {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 18px;
}

.empty-state {
  padding: 10px 2px;
  color: var(--muted);
  font-size: 14px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  max-width: min(92vw, 460px);
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(18, 38, 64, 0.95);
  color: #eef3f9;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: 0 12px 30px rgba(10, 26, 46, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 50;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 請求書モーダル */
.invoice-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 28, 46, 0.5);
  backdrop-filter: blur(4px);
}

.invoice-overlay[hidden] {
  display: none;
}

.invoice-dialog {
  display: grid;
  gap: 0;
  width: min(720px, 100%);
  max-height: 90vh;
  overflow: auto;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--shadow-float);
}

.invoice-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: #ffffff;
}

.invoice-toolbar > div {
  display: flex;
  gap: 8px;
}

.invoice-sheet {
  /* 請求書は印刷物。テーマに関わらず常にライト配色へ固定 */
  --ink: #1f2b3a;
  --soft-ink: #4a5a6e;
  --navy: #1b3a5b;
  --paper: #eef3f9;
  --line: rgba(40, 64, 92, 0.14);
  padding: 40px;
  color: #1f2b3a;
}

.invoice-sheet h2 {
  font-size: 28px;
  letter-spacing: 0.3em;
  color: var(--navy);
}

.inv-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.inv-brand {
  text-align: right;
}

.inv-brand .inv-logo {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--navy);
}

.inv-brand p {
  color: var(--soft-ink);
  font-size: 12px;
  line-height: 1.7;
}

.inv-to {
  font-size: 18px;
  font-weight: 800;
  border-bottom: 2px solid var(--navy);
  padding-bottom: 6px;
  margin-bottom: 18px;
}

.inv-meta {
  display: flex;
  gap: 24px;
  color: var(--soft-ink);
  font-size: 13px;
  margin-bottom: 24px;
}

.inv-total-box {
  display: inline-block;
  padding: 12px 20px;
  margin-bottom: 24px;
  border-radius: 8px;
  background: var(--paper);
  border-left: 5px solid var(--navy);
}

.inv-total-box span {
  display: block;
  font-size: 12px;
  color: var(--soft-ink);
}

.inv-total-box strong {
  font-size: 28px;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.inv-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 14px;
}

.inv-table th {
  background: var(--navy);
  color: #ffffff;
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
}

.inv-table th:last-child,
.inv-table td:last-child {
  text-align: right;
}

.inv-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

.inv-summary {
  margin-left: auto;
  width: 260px;
  font-size: 14px;
}

.inv-summary div {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.inv-summary .inv-grand {
  border-top: 2px solid var(--navy);
  font-weight: 900;
  font-size: 18px;
  color: var(--navy);
}

.inv-warning {
  margin-bottom: 20px;
  padding: 12px 16px;
  border: 1px solid rgba(230, 165, 82, 0.5);
  border-radius: 8px;
  background: rgba(230, 165, 82, 0.16);
  color: #8a5a17;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.inv-bank {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.inv-bank h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
}

.inv-bank p {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  white-space: pre-line;
}

.inv-note {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--soft-ink);
  font-size: 12px;
  line-height: 1.7;
}

/* ===== テーマ切替ボタン（トップバー右上） ===== */
.theme-switch {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 16px rgba(10, 26, 46, 0.22);
}

.theme-switch:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

/* ダーク系テーマで遅延案件カードの背景が浮かないよう調整 */
:root[data-theme="dark"] .project-card.overdue {
  background: rgba(70, 32, 30, 0.5);
}

:root[data-theme="emerald"] .project-card.overdue {
  background: rgba(60, 36, 24, 0.5);
}

@media (hover: hover) {
  .theme-switch:hover {
    background: rgba(255, 255, 255, 0.26);
    transform: translateY(-1px);
  }

  .theme-switch {
    transition: background 180ms ease, transform 180ms ease;
  }

  .submit-button:hover,
  .quiet-button:hover,
  .icon-button:hover,
  .project-card:hover,
  .summary-cell:hover,
  .project-buttons button:hover {
    transform: translateY(-2px);
  }

  .submit-button,
  .quiet-button,
  .icon-button,
  .project-card,
  .summary-cell,
  .project-buttons button {
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }

  .project-card:hover {
    border-color: rgba(255, 255, 255, 0.92);
    box-shadow: 12px 16px 32px rgba(20, 42, 69, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }
}

@media (max-width: 880px) {
  .app-shell {
    width: min(100% - 20px, 680px);
    padding-top: 16px;
  }

  .topbar,
  .focus-strip {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar {
    min-height: 0;
    padding: 22px;
  }

  .date-panel {
    justify-items: start;
  }

  .summary-grid,
  .work-layout {
    grid-template-columns: 1fr;
  }

  .cloud-body,
  .cloud-fields,
  .cloud-setup {
    grid-template-columns: 1fr;
  }

  .cloud-actions {
    grid-template-columns: 1fr 1fr;
  }

  .project-form {
    position: static;
  }
}

@media (max-width: 520px) {
  .app-shell {
    width: min(100% - 14px, 680px);
  }

  .topbar {
    padding: 18px;
  }

  .cloud-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .cloud-toggle {
    align-self: start;
  }

  .summary-grid {
    gap: 8px;
  }

  .summary-cell {
    min-height: 80px;
    padding: 14px;
  }

  .goal-bar-head {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .goal-input input {
    width: 100%;
  }

  .goal-input-bank textarea {
    width: 100%;
    min-width: 0;
  }

  .field-row,
  .cloud-actions {
    grid-template-columns: 1fr;
  }

  .chart-wrap {
    gap: 3px;
  }

  .chart-bar-value {
    display: none;
  }

  .project-card {
    grid-template-columns: 1fr;
  }

  .project-buttons {
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  }

  .project-buttons button {
    white-space: normal;
  }

  .invoice-sheet {
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body * {
    visibility: hidden;
  }

  .invoice-overlay,
  .invoice-overlay * {
    visibility: visible;
  }

  .invoice-overlay {
    position: absolute;
    inset: 0;
    padding: 0;
    background: #ffffff;
    backdrop-filter: none;
  }

  .invoice-dialog {
    box-shadow: none;
    max-height: none;
    width: 100%;
  }

  .no-print {
    display: none !important;
  }
}

/* =========================================================================
 * 認証ゲート（ログイン / 新規登録）
 * ========================================================================= */
.auth-gate {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

/* display:grid が [hidden]{display:none} を上書きしてしまうため明示的に隠す。
 * これが無いとログイン後もログイン画面が残り、ダッシュボードが下に押し出される。 */
.auth-gate[hidden] {
  display: none;
}

/* ログイン直後にダッシュボードがパッと現れる切り替え演出 */
@keyframes app-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.app-shell.app-enter {
  animation: app-enter 0.32s ease-out both;
}

.auth-card {
  width: min(420px, 100%);
  padding: 34px 30px 30px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-float), var(--inner-light);
  backdrop-filter: blur(8px);
}

.auth-title {
  margin: 6px 0 6px;
  font-size: 1.42rem;
  line-height: 1.34;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.auth-lead {
  margin: 0 0 22px;
  font-size: 0.92rem;
  color: var(--muted);
}

.auth-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  margin-bottom: 20px;
  border-radius: 10px;
  background: var(--track-bg);
}

.auth-tab {
  flex: 1;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.auth-tab.is-active {
  background: var(--card-bg);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}

.auth-form {
  display: grid;
  gap: 14px;
}

/* display 指定が hidden 属性を上書きしてしまうのを防ぐ
   （auth-gate で一度踏んだのと同じ罠。再設定モードの出し分けに必須） */
.auth-form[hidden],
.auth-tabs[hidden],
.auth-forgot[hidden] {
  display: none;
}

.auth-form label {
  display: grid;
  gap: 6px;
  font-size: 0.84rem;
  color: var(--soft-ink);
}

.auth-form input {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--input-border);
  border-radius: 9px;
  background: var(--input-bg);
  color: var(--ink);
  font-size: 1rem;
}

.auth-form input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(63, 124, 196, 0.22);
}

.auth-hint {
  margin: -4px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.auth-form .submit-button {
  margin-top: 4px;
  width: 100%;
  padding: 13px;
  font-size: 1rem;
}

/* 「パスワードをお忘れですか？」控えめなリンク風。legal-links と同系のトーン。 */
.auth-forgot {
  display: block;
  margin: 12px auto 0;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}

.auth-forgot:hover {
  color: var(--blue);
}

.auth-recovery-title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: var(--ink);
}

.auth-message {
  margin: 16px 0 0;
  min-height: 1.2em;
  font-size: 0.9rem;
  color: var(--soft-ink);
  text-align: center;
}

/* 内容があるときだけ、見落とさないようボックス表示にする */
.auth-message:not(:empty) {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(91, 155, 245, 0.1);
  color: var(--ink, #1b2436);
  font-weight: 700;
  line-height: 1.65;
  text-align: left;
}

.auth-message.is-error:not(:empty) {
  color: var(--coral-deep);
  border-color: var(--coral-deep);
  background: rgba(240, 138, 126, 0.12);
}

/* ===== アカウントバー（ログイン後・ヘッダー直下） ===== */
.account-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--subpanel-bg);
}

.account-status {
  font-size: 0.84rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-bar .quiet-button {
  flex: 0 0 auto;
}

/* ===== プランバッジ ===== */
.plan-badge {
  flex: 0 0 auto;
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--soft-ink);
  background: var(--chip-neutral-bg);
  white-space: nowrap;
}

.plan-badge.is-pro {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(100deg, var(--navy) 0%, var(--blue) 100%);
}

/* ===== 起動スプラッシュ ===== */
.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background: var(--app-bg);
}

.boot-splash[hidden] {
  display: none;
}

.boot-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid var(--line-strong);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: boot-spin 0.8s linear infinite;
}

@keyframes boot-spin {
  to { transform: rotate(360deg); }
}

/* ===== 法的リンク・フッター ===== */
.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-top: 20px;
}

.legal-links a {
  font-size: 0.76rem;
  color: var(--muted);
  text-decoration: none;
}

.legal-links a:hover {
  color: var(--blue);
  text-decoration: underline;
}

.app-footer {
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* ===== 規約・ポリシーの文書ページ ===== */
.legal-doc {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100% - 32px));
  margin: 0 auto;
  padding: 36px 0 60px;
}

.legal-doc .doc-card {
  padding: 34px 32px 38px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-soft), var(--inner-light);
}

.legal-doc h1 {
  margin: 6px 0 4px;
  font-size: 1.5rem;
  color: var(--ink);
}

.legal-doc .doc-updated {
  margin: 0 0 22px;
  font-size: 0.8rem;
  color: var(--muted);
}

.legal-doc h2 {
  margin: 26px 0 8px;
  font-size: 1.05rem;
  color: var(--ink);
}

.legal-doc p,
.legal-doc li {
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--soft-ink);
}

.legal-doc ul,
.legal-doc ol {
  margin: 6px 0 10px;
  padding-left: 22px;
}

.legal-doc table {
  width: 100%;
  margin: 10px 0 14px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.legal-doc th,
.legal-doc td {
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  text-align: left;
  vertical-align: top;
  color: var(--soft-ink);
  line-height: 1.7;
}

.legal-doc th {
  width: 32%;
  color: var(--ink);
  background: var(--subpanel-bg);
  font-weight: 600;
}

.legal-doc .placeholder {
  color: var(--coral-deep);
  font-weight: 600;
}

.legal-doc .back-link {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 0.84rem;
  color: var(--blue);
  text-decoration: none;
}

.legal-doc .back-link:hover {
  text-decoration: underline;
}

/* ===== 初回設定ナッジ（P-3・2026-07-08） =====
   請求書用の事業者情報が未設定のあいだ、account-bar の下に表示する案内。
   inv-warning と同じ琥珀系トーンで「警告だが怖くない」見た目に揃える。 */
.setup-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(230, 165, 82, 0.5);
  border-radius: 10px;
  background: rgba(230, 165, 82, 0.14);
  color: var(--ink);
  font-size: 13px;
}

.setup-nudge .quiet-button {
  flex: 0 0 auto;
}

/* display:flex が hidden 属性のブラウザ既定(display:none)より強く効いてしまうため、
   hidden 時は明示的に非表示へ戻す。これが無いと事業者名を設定してもナッジが消えない。 */
.setup-nudge[hidden] {
  display: none;
}

/* ===== 源泉徴収チェックボックス（P-2・2026-07-08） ===== */
.goal-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.goal-check span {
  color: var(--soft-ink);
  font-size: 12px;
  white-space: nowrap;
}

.goal-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent, #3b6fd6);
  cursor: pointer;
}