:root {
  /* 入力画面・操作画面の色 */
  --ui-bg: #f2ede6;
  --ui-panel-bg: rgba(255, 250, 244, 0.88);
  --ui-header-bg: rgba(255, 250, 244, 0.78);
  --ui-card-bg: #fffdf8;
  --ui-control-bg: #fffefa;
  --ui-preview-bg: #e8e0d8;
  --ui-text: #3f3934;
  --ui-muted: #887b70;
  --ui-line: #d8c9bc;
  --ui-line-soft: #eadfd5;
  --ui-accent: #c47f71;
  --ui-accent-soft: #f2dcd5;
  --ui-accent-text: #80564d;
  --ui-accent-text-strong: #8d5b52;
  --ui-photo-note: #65735c;
  --ui-white: #ffffff;
  --ui-page-glow: rgba(255, 255, 255, 0.8);
  --ui-header-line: rgba(216, 201, 188, 0.75);
  --ui-form-card-bg: rgba(255, 255, 255, 0.82);
  --ui-legend-text: #88574e;
  --ui-empty-guide: rgba(216, 201, 188, 0.22);
  --ui-note-bg: rgba(255, 255, 255, 0.72);
  --ui-disabled-bg: #f5f0ea;
  --ui-status-line: rgba(196, 127, 113, 0.32);
  --ui-preview-highlight: rgba(255, 255, 255, 0.7);
  --ui-focus-ring: rgba(196, 127, 113, 0.14);
  --ui-shadow: 0 16px 40px rgba(75, 57, 43, 0.1);
  --ui-brand-font: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 20% 0%, var(--ui-page-glow), transparent 28rem),
    linear-gradient(135deg, #fffaf4 0%, #f4eee8 55%, #fffdf9 100%);
  color: var(--ui-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.7;
}

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

button,
input,
select,
textarea {
  color: var(--ui-text);
}

.site-header {
  padding: max(32px, env(safe-area-inset-top)) 20px 28px;
  background: var(--ui-header-bg);
  border-bottom: 1px solid var(--ui-header-line);
}

.site-header__inner,
.app-shell {
  width: min(100%, 1080px);
  margin-inline: auto;
}

.eyebrow,
.step-label {
  margin: 0;
  color: var(--ui-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-header h1 {
  margin: 2px 0 0;
  font-family: var(--ui-brand-font);
  font-size: clamp(1.85rem, 7vw, 2.65rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.tagline {
  margin: 1px 0 14px;
  color: var(--ui-muted);
  font-family: var(--ui-brand-font);
  font-size: 0.9rem;
}

.app-shell {
  padding: 28px 16px 56px;
}

.input-panel,
.preview-panel,
.review-guide {
  border: 1px solid var(--ui-line-soft);
  border-radius: 22px;
  background: var(--ui-panel-bg);
  box-shadow: var(--ui-shadow);
}

.input-panel,
.preview-panel {
  padding: 22px 16px;
}

.preview-panel,
.review-guide {
  margin-top: 26px;
}

.section-heading {
  margin-bottom: 22px;
}

.section-heading h2,
.review-guide h2 {
  margin: 2px 0 5px;
  font-size: clamp(1.25rem, 5vw, 1.65rem);
  line-height: 1.45;
}

.section-heading > p:last-child {
  max-width: 44rem;
  margin: 0;
  color: var(--ui-muted);
  font-size: 0.85rem;
}

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

.form-card {
  min-width: 0;
  margin: 0;
  padding: 17px 14px 16px;
  border: 1px solid var(--ui-line-soft);
  border-radius: 16px;
  background: var(--ui-form-card-bg);
}

.form-card legend {
  padding: 0 6px;
  font-weight: 800;
}

.form-card legend span {
  display: inline-grid;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  place-items: center;
  border-radius: 50%;
  background: var(--ui-accent-soft);
  color: var(--ui-legend-text);
  font-size: 0.76rem;
}

label,
.choice-group__label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.78rem;
  font-weight: 700;
}

input[type="text"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-control-bg);
  padding: 10px 12px;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.65;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.field-note,
.field-intro {
  margin: 7px 0 0;
  color: var(--ui-muted);
  font-size: 0.72rem;
}

.copy-lines > span,
.copy-lines > strong {
  display: block;
}

.box-field-title {
  margin: 0 0 5px;
  font-size: 0.78rem;
  font-weight: 700;
}

.todo-description {
  margin: 0 0 10px;
}

.todo-input-note {
  margin-top: 6px;
  line-height: 1.55;
}

.todo-input-list {
  display: grid;
  gap: 8px;
}

.todo-item-field {
  display: grid;
  margin: 0 !important;
  align-items: center;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 8px;
}

.todo-item-field > span:first-child {
  color: var(--ui-muted);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

.todo-item-field .todo-item-input {
  min-height: 40px;
  padding: 7px 10px;
}

.field-intro {
  margin: 0 0 13px;
}

.box-input-list {
  display: grid;
  gap: 12px;
}

.box-input {
  padding: 13px;
  border: 1px solid var(--ui-line-soft);
  border-radius: 12px;
  background: var(--ui-card-bg);
}

.box-input label:not(:first-of-type) {
  margin-top: 10px;
}

.box-input__number {
  margin: 0 0 9px;
  color: var(--ui-accent);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.field-label-row {
  display: flex;
  margin-top: 10px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.field-label-row label {
  margin: 0;
}

.char-count {
  flex: none;
  color: var(--ui-muted);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.custom-praise-fields {
  margin-top: 10px;
  padding-top: 1px;
}

.box-input[data-box-editor="good"] > label {
  margin-top: 10px;
}

.text-fit-warning {
  margin: 10px 0 0;
  color: var(--ui-muted);
  font-size: 0.72rem;
  line-height: 1.6;
}

.text-fit-warning {
  padding: 9px 10px;
  border: 1px solid var(--ui-status-line);
  border-radius: 8px;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-text-strong);
  font-weight: 700;
}

textarea.is-text-fit-warning,
input.is-text-fit-warning,
select.is-text-fit-warning {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.mock-upload {
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  border: 1px dashed var(--ui-line);
  border-radius: 10px;
  background: var(--ui-disabled-bg);
  color: var(--ui-muted);
  font-weight: 700;
}

.photo-file-input {
  width: 100%;
  min-height: 46px;
  padding: 8px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-control-bg);
  color: var(--ui-text);
}

.photo-file-input::file-selector-button {
  min-height: 34px;
  margin-right: 9px;
  padding: 5px 10px;
  border: 1px solid var(--ui-line);
  border-radius: 7px;
  background: var(--ui-white);
  color: var(--ui-text);
  font: inherit;
  font-weight: 700;
}

.photo-file-actions {
  display: flex;
  margin-top: 9px;
  justify-content: flex-end;
}

.secondary-button {
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  background: var(--ui-white);
  color: var(--ui-muted);
  font-weight: 700;
}

.primary-button,
.download-button {
  display: inline-flex;
  min-height: 46px;
  padding: 10px 18px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ui-accent);
  border-radius: 10px;
  background: var(--ui-accent);
  color: var(--ui-white);
  font-weight: 800;
  line-height: 1.4;
  text-decoration: none;
}

.primary-button {
  width: 100%;
  cursor: pointer;
}

.primary-button:disabled {
  cursor: wait;
}

.photo-file-info,
.photo-status,
.privacy-note {
  margin: 8px 0 0;
  font-size: 0.72rem;
  line-height: 1.6;
}

.photo-file-info {
  color: var(--ui-text);
  font-weight: 700;
}

.photo-status {
  min-height: 1.2em;
  color: var(--ui-photo-note);
}

.photo-status.is-error {
  color: var(--ui-accent-text-strong);
  font-weight: 700;
}

.privacy-note {
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--ui-note-bg);
  color: var(--ui-muted);
}

.choice-group + .choice-group {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--ui-line);
}

.mini-photo-intro {
  margin-bottom: 12px;
}

.mini-photo-category-label,
.mini-photo-photo-label {
  display: block;
  margin: 0 0 5px;
  color: var(--ui-text);
  font-size: 0.76rem;
  font-weight: 800;
}

.mini-photo-category-select {
  margin-bottom: 12px;
}

.mini-photo-picker {
  min-width: 0;
}

.mini-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.mini-photo-option {
  position: relative;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

.mini-photo-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.mini-photo-option__content {
  display: block;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--ui-card-bg);
  box-shadow: 0 0 0 1px var(--ui-line);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.mini-photo-option:hover .mini-photo-option__content {
  box-shadow: 0 0 0 1px var(--ui-accent);
}

.mini-photo-option > input:focus-visible + .mini-photo-option__content {
  box-shadow: 0 0 0 3px var(--ui-focus-ring), 0 0 0 1px var(--ui-accent);
}

.mini-photo-option > input:checked + .mini-photo-option__content {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 1px var(--ui-accent);
}

.mini-photo-option__thumbnail {
  display: grid;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  place-items: center;
  background: var(--ui-disabled-bg);
  color: var(--ui-muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.mini-photo-option__thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mini-photo-option__label {
  display: block;
  overflow: hidden;
  padding: 6px 7px 7px;
  color: var(--ui-text);
  font-size: 0.7rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deco-intro {
  margin-bottom: 12px;
}

.deco-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.deco-option {
  position: relative;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

.deco-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.deco-option__content {
  display: block;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--ui-card-bg);
  box-shadow: 0 0 0 1px var(--ui-line);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.deco-option:hover .deco-option__content {
  box-shadow: 0 0 0 1px var(--ui-accent);
}

.deco-option > input:focus-visible + .deco-option__content {
  box-shadow: 0 0 0 3px var(--ui-focus-ring), 0 0 0 1px var(--ui-accent);
}

.deco-option > input:checked + .deco-option__content {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 1px var(--ui-accent);
}

.deco-option__sample {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 1;
  overflow: hidden;
  place-items: center;
  color: var(--ui-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.deco-option__sample--none {
  background: var(--ui-disabled-bg);
}

.deco-option__label {
  display: block;
  overflow: hidden;
  padding: 6px 7px 7px;
  color: var(--ui-text);
  font-size: 0.7rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.choice-row {
  display: flex;
  min-height: 44px;
  margin: 0;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 500;
}

.choice-row input {
  width: 19px;
  height: 19px;
  accent-color: var(--ui-accent);
}

.auto-preview-note {
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--ui-status-line);
  border-radius: 10px;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-text);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

.page-stage {
  display: flex;
  min-width: 0;
  padding: 13px;
  justify-content: center;
  border: 1px solid var(--ui-line-soft);
  border-radius: 16px;
  background:
    linear-gradient(135deg, var(--ui-preview-highlight), transparent),
    var(--ui-preview-bg);
}

/*
 * 手帳ページのCreamテーマ。
 * Mono・Pink・Greenは、将来このブロックと同じ変数を別の
 * data-theme用セレクターで上書きします。
 */
.journal-page[data-theme="cream"],
.journal-page[data-theme="cute"],
.deco-picker[data-theme="cream"],
.deco-picker[data-theme="cute"] {
  /* 通常のマスキングテープ柄は手帳テーマと連動します。 */
  --tape-base-color: rgba(196, 127, 113, 0.28);
  --tape-pattern-color: #c47f71;
  --tape-border-color: #8f847a;
}

.journal-page[data-theme="cream"],
.journal-page[data-theme="cute"] {
  --journal-page-bg: #fffdf8;
  --journal-page-border: #ded3c8;
  --journal-page-guide: rgba(201, 188, 175, 0.13);
  --journal-page-shadow: 0 10px 24px rgba(64, 48, 36, 0.13);
  --journal-text: #403a35;
  --journal-muted-text: #887b70;
  --journal-heading: #6d6259;
  --journal-line: #8f847a;
  --journal-header-line: #897e74;
  --journal-accent: #c47f71;
  --journal-accent-soft: rgba(196, 127, 113, 0.28);
  --journal-praise-text: #a45f54;
  --journal-secondary: #9aa78f;
  --journal-blank-bg: rgba(255, 255, 255, 0.23);
  --journal-credit: #bab0a7;
  --journal-theme-tint: rgba(247, 220, 218, 0.22);

  /* Phase 3で実画像に置き換えるダミー領域の色 */
  --journal-mini-photo-border: rgba(126, 121, 113, 0.65);
  --journal-mini-photo-highlight: rgba(255, 255, 255, 0.5);
  --journal-mini-photo-tone-1: #c6cfbf;
  --journal-mini-photo-tone-2: #d8c7b5;
  --journal-mini-photo-tone-3: #b9cbd0;
  --journal-mini-photo-text: rgba(63, 57, 52, 0.65);
  --journal-photo-area-bg: #e2ddd6;
  --journal-photo-border: rgba(108, 96, 86, 0.55);
  --journal-photo-highlight: rgba(255, 255, 255, 0.52);
  --journal-photo-tone-1: #c9d1c2;
  --journal-photo-tone-2: #ddd0c0;
  --journal-photo-tone-3: #c4b7aa;
  --journal-photo-text: rgba(63, 57, 52, 0.72);

}

/* STEP 5の4テーマ。手帳本体とマスキングテープを同じ変数セットで切り替えます。 */
.journal-page[data-theme="cool"],
.deco-picker[data-theme="cool"] {
  --tape-base-color: rgba(115, 167, 190, 0.24);
  --tape-pattern-color: #78a7ba;
  --tape-border-color: #7c8d96;
}

.journal-page[data-theme="cool"] {
  --journal-page-bg: #fbfdfe;
  --journal-page-border: #cfdbe0;
  --journal-page-guide: rgba(126, 157, 170, 0.12);
  --journal-page-shadow: 0 10px 24px rgba(47, 73, 83, 0.12);
  --journal-text: #344047;
  --journal-muted-text: #71818a;
  --journal-heading: #536b77;
  --journal-line: #7d9098;
  --journal-header-line: #758a94;
  --journal-accent: #78a7ba;
  --journal-accent-soft: rgba(120, 167, 186, 0.25);
  --journal-praise-text: #527f94;
  --journal-secondary: #91aab5;
  --journal-blank-bg: rgba(255, 255, 255, 0.32);
  --journal-credit: #a8b5bb;
  --journal-theme-tint: rgba(205, 235, 246, 0.3);
  --journal-mini-photo-border: rgba(102, 127, 138, 0.62);
  --journal-photo-area-bg: #dfe8eb;
  --journal-photo-border: rgba(86, 111, 122, 0.5);
  --journal-photo-highlight: rgba(255, 255, 255, 0.55);
  --journal-photo-tone-1: #c9dce2;
  --journal-photo-tone-2: #dce7e9;
  --journal-photo-tone-3: #bfcfd5;
  --journal-photo-text: rgba(52, 64, 71, 0.72);
}

.journal-page[data-theme="natural"],
.deco-picker[data-theme="natural"] {
  --tape-base-color: rgba(137, 164, 125, 0.25);
  --tape-pattern-color: #819d76;
  --tape-border-color: #7e8877;
}

.journal-page[data-theme="natural"] {
  --journal-page-bg: #fffdf5;
  --journal-page-border: #d9d8c8;
  --journal-page-guide: rgba(143, 151, 120, 0.12);
  --journal-page-shadow: 0 10px 24px rgba(55, 67, 45, 0.12);
  --journal-text: #394036;
  --journal-muted-text: #788071;
  --journal-heading: #5d6b56;
  --journal-line: #7f8978;
  --journal-header-line: #778271;
  --journal-accent: #8aa17f;
  --journal-accent-soft: rgba(138, 161, 127, 0.25);
  --journal-praise-text: #647d59;
  --journal-secondary: #91a389;
  --journal-blank-bg: rgba(255, 255, 255, 0.28);
  --journal-credit: #adb1a2;
  --journal-theme-tint: rgba(222, 237, 210, 0.28);
  --journal-mini-photo-border: rgba(107, 120, 100, 0.62);
  --journal-photo-area-bg: #e3e7dc;
  --journal-photo-border: rgba(91, 106, 84, 0.5);
  --journal-photo-highlight: rgba(255, 255, 255, 0.5);
  --journal-photo-tone-1: #cbd8c5;
  --journal-photo-tone-2: #e5dfcb;
  --journal-photo-tone-3: #c4cdbd;
  --journal-photo-text: rgba(57, 64, 54, 0.72);
}

.journal-page[data-theme="simple"],
.deco-picker[data-theme="simple"] {
  --tape-base-color: rgba(70, 70, 70, 0.14);
  --tape-pattern-color: #696969;
  --tape-border-color: #747474;
}

.journal-page[data-theme="simple"] {
  --journal-page-bg: #ffffff;
  --journal-page-border: #d3d3d3;
  --journal-page-guide: rgba(65, 65, 65, 0.08);
  --journal-page-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
  --journal-text: #303030;
  --journal-muted-text: #707070;
  --journal-heading: #505050;
  --journal-line: #707070;
  --journal-header-line: #666666;
  --journal-accent: #696969;
  --journal-accent-soft: rgba(70, 70, 70, 0.16);
  --journal-praise-text: #4f4f4f;
  --journal-secondary: #969696;
  --journal-blank-bg: rgba(0, 0, 0, 0.015);
  --journal-credit: #aaaaaa;
  --journal-theme-tint: rgba(220, 220, 220, 0.16);
  --journal-mini-photo-border: rgba(70, 70, 70, 0.55);
  --journal-photo-area-bg: #e5e5e5;
  --journal-photo-border: rgba(65, 65, 65, 0.45);
  --journal-photo-highlight: rgba(255, 255, 255, 0.48);
  --journal-photo-tone-1: #d2d2d2;
  --journal-photo-tone-2: #e5e5e5;
  --journal-photo-tone-3: #bfbfbf;
  --journal-photo-text: rgba(48, 48, 48, 0.7);
}

/*
 * フォント比較。配色テーマとは独立した属性にしているため、
 * 将来data-themeを切り替えてもフォント構成には影響しません。
 */
.journal-page[data-font-set="a"] {
  --journal-date-font: "DM Serif Display", Georgia, "Times New Roman", serif;
  --journal-meta-font: "Zen Kaku Gothic New", "Yu Gothic", Meiryo, sans-serif;
  --journal-heading-font: "Zen Kaku Gothic New", "Yu Gothic", Meiryo, sans-serif;
  --journal-body-font: "Zen Kaku Gothic New", "Yu Gothic", Meiryo, sans-serif;
  --journal-praise-font: "Zen Kaku Gothic New", "Yu Gothic", Meiryo, sans-serif;
  --journal-credit-font: "DM Serif Display", Georgia, serif;
}

.journal-page[data-font-set="b"] {
  --journal-date-font: "Kaisei Decol", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --journal-meta-font: "Kaisei Decol", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --journal-heading-font: "Kaisei Decol", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --journal-body-font: "Kaisei Decol", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --journal-praise-font: "Kaisei Decol", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --journal-credit-font: "Kaisei Decol", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

.journal-page[data-font-set="c"] {
  --journal-date-font: Georgia, "Times New Roman", serif;
  --journal-meta-font: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --journal-heading-font: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --journal-body-font: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --journal-praise-font: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --journal-credit-font: Georgia, "Times New Roman", serif;
}

.journal-page[data-font-set="d"] {
  --journal-date-font: "Hina Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --journal-meta-font: "Kiwi Maru", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --journal-heading-font: "Kiwi Maru", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --journal-body-font: "Kiwi Maru", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --journal-praise-font: "Yomogi", "Yu Gothic", Meiryo, cursive;
  --journal-credit-font: "Hina Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

/* キウイ丸はMedium、よもぎはRegularの正規ウェイトで比較します。 */
.journal-page[data-font-set="d"] .journal-header__year,
.journal-page[data-font-set="d"] .journal-header__day,
.journal-page[data-font-set="d"] .journal-box h3 {
  font-weight: 500;
}

.journal-page[data-font-set="d"] .praise-line {
  font-weight: 400;
}

.journal-page {
  --user-photo-position: 50% 50%;
  position: relative;
  width: 100%;
  max-width: 430px;
  overflow: hidden;
  border: 1px solid var(--journal-page-border);
  background:
    linear-gradient(135deg, var(--journal-theme-tint, transparent), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 23px, var(--journal-page-guide) 23px 24px),
    var(--journal-page-bg);
  box-shadow: var(--journal-page-shadow);
  color: var(--journal-text);
  font-family: var(--journal-body-font);
}

.ratio-3-4 {
  aspect-ratio: 3 / 4;
}

.journal-header {
  position: absolute;
  top: 4.5%;
  right: 7.5%;
  left: 7.5%;
  display: flex;
  height: 14%;
  align-items: stretch;
  justify-content: space-between;
  border-bottom: 1px solid var(--journal-header-line);
}

.journal-header p {
  margin: 0;
  line-height: 1;
}

.journal-header__year {
  color: var(--journal-muted-text);
  font-family: var(--journal-meta-font);
  font-size: clamp(0.48rem, 2vw, 0.67rem);
  font-weight: 700;
  letter-spacing: 0.16em;
}

.journal-header__date-group {
  display: flex;
  width: 56%;
  padding-bottom: 3px;
  justify-content: flex-end;
  flex-direction: column;
}

.journal-header__date-line {
  display: flex;
  align-items: baseline;
  gap: clamp(5px, 1.8vw, 10px);
}

.journal-header__date {
  margin-top: 4px !important;
  font-family: var(--journal-date-font);
  font-size: clamp(1.55rem, 8.5vw, 3.2rem);
  letter-spacing: -0.04em;
}

.journal-header__day {
  color: var(--journal-muted-text);
  font-family: var(--journal-meta-font);
  font-size: clamp(0.52rem, 2.2vw, 0.72rem);
  font-weight: 800;
  letter-spacing: 0.13em;
}

.header-landscape-photo {
  display: grid;
  width: 38%;
  margin: 3.5% 0 4.5%;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--journal-mini-photo-border);
  border-radius: 4px;
  background: var(--journal-page-bg);
}

.header-landscape-photo__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--mini-photo-position, 50% 50%);
}

/* Safariではborderの内側に親背景が見えることがあるため、枠線を画像上の内側shadowで描きます。 */
@supports (-webkit-touch-callout: none) {
  .header-landscape-photo {
    border: 0;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--journal-mini-photo-border);
  }

  .header-landscape-photo__image {
    width: 100%;
    height: 100%;
  }
}

/* 確定済みの幅を維持し、写真の高さだけ約10〜12%広げます。 */
.journal-page[data-layout-variant="adjusted"] .header-landscape-photo {
  margin: 1.7% 0 2.4%;
}

.journal-grid {
  position: absolute;
  top: 21%;
  right: 7.5%;
  bottom: 14%;
  left: 7.5%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--journal-line);
  border-left: 1px solid var(--journal-line);
}

.journal-box {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 9% 8%;
  border-right: 1px solid var(--journal-line);
  border-bottom: 1px solid var(--journal-line);
}

.journal-box h3 {
  display: flex;
  margin: 0 0 8%;
  align-items: center;
  gap: 6px;
  color: var(--journal-heading);
  font-family: var(--journal-heading-font);
  font-size: clamp(0.48rem, 2.2vw, 0.75rem);
  letter-spacing: 0.16em;
}

.journal-box h3::before {
  content: "";
  width: 11px;
  height: 3px;
  border-radius: 99px;
  background: var(--journal-accent);
}

.journal-box p,
.journal-box li {
  font-family: var(--journal-body-font);
  font-size: clamp(0.48rem, 2.45vw, 0.82rem);
  line-height: 1.75;
}

.journal-box p {
  margin: 0;
}

.journal-box .journal-box__text {
  display: -webkit-box;
  max-height: 6.8em;
  overflow-wrap: anywhere;
  overflow: hidden;
  font-size: clamp(0.48rem, 2.35vw, 0.78rem);
  line-height: 1.7;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.journal-box .journal-box__text.is-measuring-text {
  display: block;
  max-height: none;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.journal-box--good {
  display: flex;
  flex-direction: column;
}

.journal-box--good h3 {
  flex: none;
}

.journal-box--good .journal-box__text {
  max-height: 5.1em;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.journal-box .praise-line {
  width: fit-content;
  margin-top: 10%;
  padding-bottom: 1px;
  border-bottom: 3px solid var(--journal-accent-soft);
  color: var(--journal-praise-text);
  font-family: var(--journal-praise-font);
  font-size: clamp(0.52rem, 2.7vw, 0.92rem);
  font-weight: 800;
  transform: rotate(-1.5deg);
}

.journal-box--good .praise-line {
  display: -webkit-box;
  flex: none;
  max-width: 100%;
  max-height: 2.9em;
  margin-top: auto;
  overflow: hidden;
  line-height: 1.45;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.journal-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.journal-box .journal-box__todo-list {
  display: block;
  white-space: normal;
}

.journal-box__todo-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

/* TODOは短い6項目を、1項目1行・折り返しなしで表示します。 */
.journal-box--todo h3 {
  margin-bottom: 4%;
}

.journal-box .journal-box__todo-list {
  max-height: none;
  font-size: clamp(0.44rem, 2.05vw, 0.7rem);
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.journal-box .journal-box__todo-list li {
  min-width: 0;
  font-size: clamp(0.44rem, 2.05vw, 0.7rem);
  line-height: 1.36;
  white-space: nowrap;
}

.journal-box__todo-list li span {
  min-width: 0;
  white-space: nowrap;
}

.journal-box__todo-list li + li {
  margin-top: 0.05em;
}

.journal-box li::before {
  content: "□";
  margin-right: 4px;
  color: var(--journal-secondary);
}

.journal-box--blank {
  background: var(--journal-blank-bg);
}

.journal-box--photo {
  padding: 5%;
  background: var(--journal-photo-area-bg);
}

.journal-box--photo-loaded {
  padding: 0;
}

.user-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--user-photo-position, 50% 50%);
}

.photo-placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px dashed var(--journal-photo-border);
  background:
    linear-gradient(145deg, var(--journal-photo-highlight), transparent 48%),
    linear-gradient(25deg, var(--journal-photo-tone-1) 0 32%, var(--journal-photo-tone-2) 32% 61%, var(--journal-photo-tone-3) 61%);
  color: var(--journal-photo-text);
  text-align: center;
}

/* 完成PNGでは、写真がないときにこの編集用ダミーだけを除外します。 */
.photo-placeholder--editing-only {
  pointer-events: none;
}

/* PNG生成時だけ、写真未選択の右下マスを完全な空白にします。 */
.journal-page.is-exporting .journal-box--photo:not(.journal-box--photo-loaded) {
  padding: 0;
  background: transparent;
}

.journal-page.is-exporting .photo-placeholder--editing-only {
  display: none;
}

.photo-placeholder__mark {
  position: relative;
  width: 23%;
  aspect-ratio: 1;
  margin-bottom: 5%;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.photo-placeholder__mark::before {
  content: "";
  position: absolute;
  width: 35%;
  height: 35%;
  top: 32%;
  left: 32%;
  border-radius: 50%;
  background: currentColor;
}

.photo-placeholder strong {
  font-size: clamp(0.5rem, 2.4vw, 0.8rem);
  letter-spacing: 0.14em;
}

.photo-placeholder small {
  margin-top: 2%;
  font-size: clamp(0.4rem, 1.9vw, 0.64rem);
}

.journal-bottom-decoration {
  position: absolute;
  right: 28%;
  bottom: 2%;
  left: 7.5%;
  height: 7%;
  overflow: hidden;
  border-radius: 2px;
  pointer-events: none;
}

.journal-bottom-decoration[data-deco="none"] {
  display: none;
}

.journal-bottom-decoration[data-deco="solid"],
.deco-option__sample[data-deco="solid"] {
  border: 1px solid var(--tape-border-color);
  background: var(--tape-base-color);
}

.journal-bottom-decoration[data-deco="dots"],
.deco-option__sample[data-deco="dots"] {
  border: 1px solid var(--tape-border-color);
  background:
    radial-gradient(circle, var(--tape-pattern-color) 0 2px, transparent 2.5px),
    var(--tape-base-color);
  background-size: 12px 12px;
}

.journal-bottom-decoration[data-deco="stripe"],
.deco-option__sample[data-deco="stripe"] {
  border: 1px solid var(--tape-border-color);
  background:
    repeating-linear-gradient(
      135deg,
      var(--tape-base-color) 0 7px,
      var(--tape-pattern-color) 7px 11px
    );
}

.journal-bottom-decoration[data-deco="check"],
.deco-option__sample[data-deco="check"] {
  border: 1px solid var(--tape-border-color);
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 11px,
      var(--tape-pattern-color) 11px 13px,
      transparent 13px 24px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 11px,
      var(--tape-pattern-color) 11px 13px,
      transparent 13px 24px
    ),
    var(--tape-base-color);
}

.journal-bottom-decoration[data-deco="grid"],
.deco-option__sample[data-deco="grid"] {
  border: 1px solid var(--tape-border-color);
  background: var(--tape-base-color);
}

.journal-bottom-decoration[data-deco="grid"]::before,
.deco-option__sample[data-deco="grid"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--tape-pattern-color) 1px, transparent 1px),
    linear-gradient(0deg, var(--tape-pattern-color) 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: 0.34;
}

/* B案：通常マステは左端から貼ったように見せ、わずかに傾けます。 */
.journal-page[data-layout-variant="adjusted"] .journal-bottom-decoration[data-deco="solid"],
.journal-page[data-layout-variant="adjusted"] .journal-bottom-decoration[data-deco="dots"],
.journal-page[data-layout-variant="adjusted"] .journal-bottom-decoration[data-deco="stripe"],
.journal-page[data-layout-variant="adjusted"] .journal-bottom-decoration[data-deco="check"],
.journal-page[data-layout-variant="adjusted"] .journal-bottom-decoration[data-deco="grid"] {
  right: 37%;
  bottom: 2.7%;
  left: -1.5%;
  clip-path: polygon(
    0 0,
    98.8% 0,
    100% 9%,
    98.7% 18%,
    100% 30%,
    98.9% 42%,
    100% 54%,
    98.6% 66%,
    100% 78%,
    98.8% 89%,
    100% 100%,
    0 100%
  );
  transform: rotate(-3deg);
  transform-origin: left center;
}

.journal-credit {
  position: absolute;
  right: 2.6%;
  bottom: 1.3%;
  margin: 0;
  color: var(--journal-credit);
  font-family: var(--journal-credit-font);
  line-height: 1.35;
  text-align: right;
}

.journal-credit span {
  display: block;
}

.journal-credit__tag {
  font-size: clamp(0.4rem, 1.75vw, 0.6rem);
  letter-spacing: 0.04em;
}

.journal-credit__brand {
  font-size: clamp(0.36rem, 1.55vw, 0.54rem);
  letter-spacing: 0.08em;
}

.png-generator {
  margin-top: 18px;
  padding: 17px 14px;
  border: 1px solid var(--ui-line-soft);
  border-radius: 16px;
  background: var(--ui-form-card-bg);
}

.png-generator__heading {
  margin-bottom: 13px;
}

.png-generator__heading h3 {
  margin: 2px 0 4px;
  font-size: 1.08rem;
}

.png-generator__heading > p:last-child,
.png-result__note {
  margin: 0;
  color: var(--ui-muted);
  font-size: 0.74rem;
  line-height: 1.6;
}

.png-status {
  min-height: 1.6em;
  margin: 8px 0 0;
  color: var(--ui-accent-text);
  font-size: 0.74rem;
  font-weight: 700;
}

.png-status.is-error {
  color: #9a4c45;
}

.png-result {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ui-line-soft);
  text-align: center;
}

.png-result__title {
  margin: 0 0 9px;
  font-weight: 800;
}

.png-result__message {
  margin: 0 0 12px;
  color: var(--ui-text);
  font-size: 0.8rem;
  line-height: 1.65;
}

.generated-png-image {
  display: block;
  width: min(100%, 430px);
  height: auto;
  margin: 0 auto 12px;
  border: 1px solid var(--ui-line-soft);
  background: var(--ui-white);
  box-shadow: 0 8px 20px rgba(75, 57, 43, 0.1);
  -webkit-touch-callout: default;
}

.download-button {
  width: min(100%, 430px);
}

.download-button--subtle {
  min-height: 40px;
  margin-top: 10px;
  border-color: var(--ui-line);
  background: var(--ui-white);
  color: var(--ui-muted);
  font-size: 0.74rem;
}

.png-result__note {
  margin: 0 auto 10px;
}

.png-result__note strong {
  display: block;
  margin-bottom: 5px;
  color: var(--ui-text);
}

.png-result__note span {
  display: block;
}

.png-result__sns,
.png-result__terms {
  width: min(100%, 430px);
  margin: 14px auto 0;
  color: var(--ui-muted);
  font-size: 0.72rem;
  line-height: 1.65;
}

.png-result__terms {
  padding-top: 12px;
  border-top: 1px solid var(--ui-line-soft);
  font-size: 0.66rem;
}

.png-result__terms span {
  display: block;
}

.png-result__terms span + span {
  margin-top: 3px;
}

.png-result__sns > p {
  margin: 0;
}

.hashtag-box {
  margin: 9px auto 0 !important;
  padding: 8px 10px;
  border: 1px solid var(--ui-accent-soft);
  border-radius: 9px;
  background: rgba(255, 248, 246, 0.9);
  color: var(--ui-accent-text-strong);
  font-weight: 700;
  overflow-wrap: anywhere;
  text-align: center;
}

.png-result__site-link {
  margin: 12px auto 0;
  color: var(--ui-muted);
  font-size: 0.68rem;
  line-height: 1.65;
}

.png-result__site-link strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ui-text);
  font-weight: 700;
}

.png-result__site-link span {
  display: block;
}

.png-result__site-link a {
  color: var(--ui-muted);
  text-underline-offset: 0.18em;
}

.review-guide {
  padding: 22px 18px;
}

.review-guide ol {
  display: grid;
  margin: 18px 0 0;
  padding: 0;
  gap: 9px;
  list-style: none;
  counter-reset: review;
}

.review-guide li {
  display: grid;
  grid-template-columns: 29px 1fr;
  column-gap: 9px;
  counter-increment: review;
}

.review-guide li::before {
  content: counter(review, decimal-leading-zero);
  grid-row: span 2;
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 50%;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-text-strong);
  font-size: 0.68rem;
  font-weight: 900;
}

.review-guide strong {
  font-size: 0.85rem;
}

.review-guide span {
  color: var(--ui-muted);
  font-size: 0.76rem;
}

.page-guide {
  width: min(calc(100% - 32px), 860px);
  margin: 0 auto 32px;
  padding: clamp(24px, 5vw, 42px);
  border: 1px solid var(--ui-line-soft);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ui-text);
  font-size: 0.94rem;
  line-height: 1.9;
}

.guide-section + .guide-section {
  margin-top: clamp(30px, 6vw, 46px);
  padding-top: clamp(30px, 6vw, 46px);
  border-top: 1px dashed var(--ui-line);
}

.guide-label {
  margin: 0 0 2px;
  color: var(--ui-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.5;
}

.guide-section h2 {
  margin: 0 0 18px;
  font-family: var(--ui-brand-font);
  font-size: clamp(1.15rem, 4vw, 1.3rem);
  line-height: 1.55;
}

.guide-prose,
.faq-answer {
  overflow-wrap: anywhere;
}

.guide-prose p,
.guide-steps p,
.faq-answer p,
.more-tool-card p {
  margin: 0;
}

.guide-prose p + p {
  margin-top: 14px;
}

.guide-uses {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 12px;
  list-style: none;
}

.guide-uses li {
  min-width: 0;
  overflow-wrap: anywhere;
}

.guide-steps {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 24px;
  list-style: none;
  counter-reset: guide-step;
}

.guide-steps li {
  position: relative;
  min-width: 0;
  padding-left: 44px;
  counter-increment: guide-step;
}

.guide-steps li::before {
  content: counter(guide-step);
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 50%;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-text-strong);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

.guide-steps h3,
.more-tool-card h3 {
  margin: 0 0 6px;
  font-family: var(--ui-brand-font);
  font-size: 1rem;
  line-height: 1.6;
}

.guide-steps p + p {
  margin-top: 8px;
}

.faq-list {
  border-top: 1px solid var(--ui-line-soft);
}

.faq-item {
  border-bottom: 1px solid var(--ui-line-soft);
}

.faq-item summary {
  display: flex;
  min-height: 50px;
  padding: 13px 34px 13px 2px;
  align-items: center;
  position: relative;
  font-family: var(--ui-brand-font);
  font-weight: 700;
  line-height: 1.55;
  cursor: pointer;
  list-style: none;
}

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

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 5px;
  color: var(--ui-accent);
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 400;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-answer {
  padding: 0 30px 16px 2px;
  color: var(--ui-muted);
}

.faq-answer p + p {
  margin-top: 10px;
}

.more-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.more-tool-card {
  display: flex;
  min-width: 0;
  min-height: 188px;
  padding: 20px;
  flex-direction: column;
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: var(--ui-card-bg);
}

.more-tool-card p {
  color: var(--ui-muted);
  overflow-wrap: anywhere;
}

.more-tool-card a,
.more-tools-link a,
.site-footer a {
  color: var(--ui-accent-text-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.more-tool-card a {
  display: inline-flex;
  min-height: 44px;
  margin-top: auto;
  align-items: flex-end;
  font-weight: 700;
}

.more-tools-link {
  margin: 22px 0 0;
  text-align: center;
}

.more-tools-link a {
  display: inline-flex;
  min-height: 44px;
  padding-inline: 8px;
  align-items: center;
}

.site-footer {
  display: grid;
  padding: 4px 20px max(32px, env(safe-area-inset-bottom));
  justify-items: center;
  gap: 2px;
  color: var(--ui-muted);
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: center;
}

.site-footer p {
  margin: 0;
}

.site-footer__label {
  font-weight: 700;
}

.site-footer a {
  display: inline-flex;
  min-height: 44px;
  padding-inline: 8px;
  align-items: center;
}

@media (min-width: 700px) {
  .app-shell {
    padding: 40px 24px 72px;
  }

  .input-panel,
  .preview-panel {
    padding: 30px;
  }

  .journal-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .form-card--boxes,
  .auto-preview-note {
    grid-column: 1 / -1;
  }

  .box-input-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deco-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-stage {
    padding: 18px;
  }

  .review-guide {
    padding: 28px 30px;
  }

  .review-guide ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 28px;
  }
}

@media (max-width: 699px) {
  #journal-date {
    display: block;
    inline-size: calc(100% - 14px);
    max-inline-size: 100%;
    min-inline-size: 0;
  }

  .more-tools-grid {
    grid-template-columns: 1fr;
  }

  .more-tool-card {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  input,
  select,
  textarea,
  .deco-option__content {
    transition: none;
  }
}

/* STEP式UI */
.step-app {
  width: min(100%, 860px);
}

.step-screen {
  min-width: 0;
  padding: clamp(20px, 5vw, 34px);
  border: 1px solid var(--ui-line-soft);
  border-radius: 24px;
  background: var(--ui-panel-bg);
  box-shadow: var(--ui-shadow);
}

.step-screen[hidden] {
  display: none !important;
}

.step-screen.is-measuring-preview {
  position: fixed;
  top: 0;
  left: -200vw;
  width: min(100%, 860px);
  visibility: hidden;
  pointer-events: none;
}

.section-heading--center {
  text-align: center;
}

.section-heading--center > p:last-child {
  margin-inline: auto;
}

.top-sample-stage {
  display: flex;
  width: min(100%, 370px);
  margin: 0 auto 22px;
  padding: 10px;
  justify-content: center;
  border: 1px solid var(--ui-line-soft);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--ui-preview-highlight), transparent), var(--ui-preview-bg);
}

.top-sample-image {
  display: block;
  width: min(100%, 330px);
  height: auto;
  max-width: 100%;
  border: 1px solid var(--ui-line-soft);
  background: var(--ui-white);
  box-shadow: 0 8px 20px rgba(75, 57, 43, 0.1);
}

.step-flow {
  display: flex;
  margin: 0 auto 20px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px 7px;
  color: var(--ui-muted);
  font-size: clamp(0.68rem, 2.6vw, 0.84rem);
  font-weight: 700;
}

.step-flow b {
  color: var(--ui-accent);
}

.start-button {
  display: block;
  width: min(100%, 430px);
  margin-inline: auto;
}

.step-progress {
  margin-bottom: 16px;
  padding: 12px 10px;
  border: 1px solid var(--ui-line-soft);
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.92);
  box-shadow: 0 8px 22px rgba(75, 57, 43, 0.07);
}

.step-progress ol {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
}

.step-progress li {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
  gap: 2px;
  color: var(--ui-muted);
}

.step-progress li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 13px;
  left: calc(50% + 13px);
  width: calc(100% - 26px);
  height: 1px;
  background: var(--ui-line-soft);
}

.step-progress li span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid var(--ui-line);
  border-radius: 50%;
  background: var(--ui-card-bg);
  font-size: 0.7rem;
  font-weight: 800;
}

.step-progress li small {
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(0.48rem, 1.9vw, 0.67rem);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.step-progress li.is-complete span,
.step-progress li.is-current span {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: #fff;
}

.step-progress li.is-current {
  color: var(--ui-accent-text-strong);
}

.step-progress li.is-complete::after {
  background: var(--ui-accent-soft);
}

.step-form,
.step-card-stack {
  display: grid;
  gap: 16px;
}

.step-screen .form-card {
  padding: clamp(18px, 4vw, 26px);
}

.step-screen .form-card legend {
  color: var(--ui-legend-text);
  font-size: 1rem;
}

.step-screen .box-input {
  padding: 0;
  border: 0;
  background: transparent;
}

.step-actions {
  display: grid;
  margin-top: 22px;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
}

.step-actions--next {
  grid-template-columns: minmax(0, 430px);
  justify-content: end;
}

.step-actions .primary-button,
.step-actions .secondary-button {
  width: 100%;
  min-height: 48px;
}

.text-button {
  min-height: 42px;
  border: 0;
  background: transparent;
  color: var(--ui-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.theme-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.theme-option {
  min-width: 0;
  cursor: pointer;
}

.theme-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-option__content {
  display: grid;
  min-height: 112px;
  padding: 13px;
  align-content: center;
  gap: 4px;
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  background: var(--ui-card-bg);
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.theme-option input:checked + .theme-option__content {
  border: 2px solid var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-focus-ring);
  transform: translateY(-1px);
}

.theme-option__content strong,
.theme-option__content small {
  display: block;
}

.theme-option__content small {
  color: var(--ui-muted);
  font-size: 0.7rem;
}

.theme-option__swatches {
  display: flex;
  margin-bottom: 4px;
  justify-content: center;
  gap: 5px;
}

.theme-option__swatches i {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(60, 50, 45, 0.12);
  border-radius: 50%;
}

.theme-option--cute i:nth-child(1) { background: #fff6ef; }
.theme-option--cute i:nth-child(2) { background: #efcfc9; }
.theme-option--cute i:nth-child(3) { background: #c47f71; }
.theme-option--cool i:nth-child(1) { background: #f8fdff; }
.theme-option--cool i:nth-child(2) { background: #cfeaf4; }
.theme-option--cool i:nth-child(3) { background: #78a7ba; }
.theme-option--natural i:nth-child(1) { background: #fffbed; }
.theme-option--natural i:nth-child(2) { background: #dce9d4; }
.theme-option--natural i:nth-child(3) { background: #819d76; }
.theme-option--simple i:nth-child(1) { background: #fff; }
.theme-option--simple i:nth-child(2) { background: #d7d7d7; }
.theme-option--simple i:nth-child(3) { background: #555; }

.step-screen--complete .page-stage {
  margin-inline: auto;
}

.step-screen--complete .png-generator {
  margin-top: 22px;
}

/* 保存画像で小さな文字が細くなりすぎないよう、サイズは変えずウェイトだけ整えます。 */
.journal-page[data-font-set="b"] .journal-box__text,
.journal-page[data-font-set="b"] .journal-box__todo-list li {
  font-weight: 500;
}

@media (max-width: 520px) {
  .step-app {
    padding-inline: 10px;
  }

  .step-screen {
    padding: 20px 14px;
    border-radius: 20px;
  }

  .step-progress {
    padding-inline: 4px;
  }

  .step-progress li span {
    width: 23px;
    height: 23px;
  }

  .step-progress li:not(:last-child)::after {
    top: 11px;
    left: calc(50% + 11px);
    width: calc(100% - 22px);
  }

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

  .theme-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .theme-option__content {
    min-height: 102px;
    padding: 10px 6px;
  }
}