/**
 * sample-1man atelier overrides
 * Shell: chrome (top) + split (preview | handle | dash)
 */

html,
body.atelier {
  height: 100%;
  margin: 0;
}

body.atelier {
  overflow: hidden;
  background: #1c1f1e;
  color: #222;
  font-family: "Zen Kaku Gothic New", sans-serif;
  min-height: 0;
}

body.atelier.entry-gate-open {
  overflow: hidden;
  background: #fff;
}

body.atelier.entry-gate-open .atelier-shell {
  visibility: hidden;
  pointer-events: none;
}

/* ?? entry gate???????????????? ?? */
.entry-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.entry-gate[hidden] {
  display: none !important;
}

.entry-gate-scrim {
  display: none;
}

.entry-gate-panel,
.entry-gate-panel--full {
  position: relative;
  z-index: 1;
  width: min(56rem, 100%);
  max-height: none;
  min-height: 100%;
  overflow: visible;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.15rem, 3vw, 2rem) 2.5rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #1a1f1c;
  box-shadow: none;
}

.entry-gate-title {
  margin: 0 0 0.45rem;
  font-family: "Shippori Mincho", serif;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #121816;
  line-height: 1.25;
  text-shadow: none;
}

.entry-gate-lead {
  margin: 0 0 1.35rem;
  font-size: 1rem;
  line-height: 1.55;
  color: #3d4540;
}

.entry-branch-grid {
  display: grid;
  gap: 0.85rem;
}

.entry-branch-card {
  display: block;
  cursor: pointer;
}

.entry-branch-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.entry-branch-card-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  min-height: 3.6rem;
  border: 2px solid rgba(20, 28, 36, 0.14);
  border-radius: 0.85rem;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.entry-branch-card-inner strong {
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: #121816;
}

.entry-branch-card-inner span {
  font-size: 0.92rem;
  line-height: 1.5;
  color: #4a524c;
}

.entry-branch-card:hover .entry-branch-card-inner,
.entry-branch-card:has(input:checked) .entry-branch-card-inner {
  border-color: #3d8a48;
  box-shadow: none;
  background: #fff;
}

.entry-color-wire-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 640px) {
  .entry-color-wire-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.entry-color-wire-card {
  display: block;
  cursor: pointer;
}

.entry-color-wire-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.entry-color-wire-card-inner {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.65rem;
  border: 2px solid rgba(20, 28, 36, 0.12);
  border-radius: 0.75rem;
  background: #fff;
}

.entry-color-wire-card:hover .entry-color-wire-card-inner,
.entry-color-wire-card:has(input:checked) .entry-color-wire-card-inner {
  border-color: #3d8a48;
  box-shadow: none;
  background: #fff;
}

.entry-color-wire-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a1f1c;
  text-align: center;
}

.entry-color-wire-card .layout-card-wire {
  min-height: 5.5rem;
  padding: 0.35rem;
  border-radius: 0.4rem;
  background: var(--wire-page, #f0f0f0);
}

.entry-color-wire-card .layout-card-wire .lw {
  background: var(--wire-block, #dfe5e2);
  border-color: transparent;
}

.entry-color-wire-card .layout-card-wire .lw-img {
  background: var(--wire-chrome, #1a4d8c);
}

.entry-color-wire-card .layout-card-wire .lw-txt {
  background: var(--wire-card, #ffffff);
}

.entry-layout-grid--abc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 640px) {
  .entry-layout-grid--abc {
    grid-template-columns: 1fr;
  }
}

.entry-choice--muted {
  opacity: 0.55;
}

.entry-choice--muted input:disabled + span {
  cursor: not-allowed;
}

.dash-block--easy-p1-hold .dash-note {
  margin-bottom: 1rem;
}

.dash-block--easy .dash-subhead {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #121816;
}

.easy-basics-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.easy-basics-fields input::placeholder,
.easy-basics-fields textarea::placeholder {
  color: #8a949e;
  font-weight: 400;
}

.easy-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1a1f1c;
}

.easy-field-label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

.easy-field-opt {
  font-size: 0.72rem;
  font-weight: 600;
  color: #8a949e;
}

.easy-field-req {
  font-size: 0.72rem;
  font-weight: 800;
  color: #2d6a36;
  letter-spacing: 0.02em;
}

.easy-field--required {
  padding: 0.7rem 0.75rem 0.8rem;
  border: 1px solid rgba(45, 106, 54, 0.35);
  border-radius: 0.55rem;
  background: #f7fbf8;
}

.easy-field--required .easy-field-label {
  font-size: 0.95rem;
  font-weight: 800;
  color: #121816;
}

.easy-field--required input {
  border-color: rgba(45, 106, 54, 0.4);
  background: #fff;
  font-weight: 500;
}

.easy-field--required.is-invalid {
  border-color: #b33a2e;
  box-shadow: 0 0 0 2px rgba(179, 58, 46, 0.2);
  background: #fff8f7;
}

.easy-field--required.is-invalid input {
  border-color: #b33a2e;
}

.easy-field input,
.easy-field textarea {
  font: inherit;
  font-weight: 400;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(20, 28, 36, 0.18);
  border-radius: 0.55rem;
  background: #fff;
}

.easy-choice-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.easy-choice {
  display: block;
  cursor: pointer;
}

.easy-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.easy-choice span {
  display: block;
  padding: 0.85rem 1rem;
  border: 2px solid rgba(20, 28, 36, 0.12);
  border-radius: 0.7rem;
  background: #fff;
  font-size: 0.98rem;
  font-weight: 600;
}

.easy-choice:hover span,
.easy-choice:has(input:checked) span {
  border-color: #3d8a48;
  box-shadow: none;
  background: #fff;
}

.easy-copy-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}

.easy-copy-card {
  display: block;
  cursor: pointer;
}

.easy-copy-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.easy-copy-card-inner {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.55rem;
  padding: 0.75rem 0.85rem;
  border: 2px solid rgba(20, 28, 36, 0.12);
  border-radius: 0.7rem;
  background: #fff;
}

.easy-copy-card:hover .easy-copy-card-inner,
.easy-copy-card:has(input:checked) .easy-copy-card-inner {
  border-color: #3d8a48;
  box-shadow: none;
  background: #fff;
}

.easy-copy-num {
  font-weight: 700;
  color: #1a1f1c;
}

.easy-copy-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #1a1f1c;
  font-weight: 400;
}

.easy-img-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  margin-right: 0.25rem;
  border-radius: 999px;
  background: #f5d76e;
  color: #1a1f1c;
  font-size: 0.9rem;
  font-weight: 700;
  vertical-align: middle;
}

.easy-img-panel {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem;
  border: 2px solid #f0c93d;
  border-radius: 0.75rem;
  background: #fffdf3;
}

.easy-img-wire {
  display: flex;
  justify-content: center;
  padding: 0.5rem;
  background: #f4f1ea;
  border-radius: 0.45rem;
}

.easy-img-wire-box {
  display: block;
  width: min(100%, 14rem);
  height: 5.5rem;
  border: 2px dashed #c9a227;
  border-radius: 0.35rem;
  background:
    linear-gradient(135deg, rgba(245, 215, 110, 0.35), transparent 55%),
    #ece7dc;
}

.easy-img-wire-box--sq {
  width: 6.5rem;
  height: 6.5rem;
}

.easy-img-wire-box--card {
  width: 8rem;
  height: 5.5rem;
}

.easy-img-status {
  margin: 0;
  font-size: 0.88rem;
  color: #5a635c;
}

.easy-img-status.is-ready {
  color: #1a5c38;
  font-weight: 600;
}

.easy-loading-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 2rem 1rem;
  text-align: center;
}

.easy-loading-bar {
  width: min(100%, 16rem);
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(20, 28, 36, 0.1);
  overflow: hidden;
}

.easy-loading-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: #1a4d8c;
  animation: easy-load-fill 2s linear forwards;
}

@keyframes easy-load-fill {
  from { width: 0%; }
  to { width: 100%; }
}

.easy-loading-note {
  margin: 0;
  font-size: 0.85rem;
  color: #5a635c;
}

body.is-easy-done-step .dash-header {
  padding-bottom: 0;
}

body.is-easy-done-step .easy-flow-meter {
  margin-bottom: 0;
}

body.is-easy-done-step .dash-body > .fill-form {
  padding-top: 0;
}

.easy-done-before {
  margin: 0.85rem 0 0.85rem;
  font-size: 0.98rem;
  line-height: 1.6;
  text-align: center;
  color: #152028;
}

.easy-done-miss-title {
  margin: 0.15rem 0 0.4rem;
  text-align: center;
  font-size: 1.02rem;
  font-weight: 800;
  color: #b42318;
}

.easy-done-miss-list,
.easy-done-sample-list {
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.easy-done-miss-list:empty,
.easy-done-sample-list:empty {
  display: none;
  margin: 0;
}

.easy-done-sample-link {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid #d5ddd6;
  border-radius: 0.45rem;
  background: #f6f7f6;
  color: #1a1f1c;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.45;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
}

.easy-done-sample-link:hover {
  background: #eef2ee;
}

.easy-finish-congrats {
  margin: 0.15rem 0 0.9rem;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.5;
  color: #152028;
}

.easy-done-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  margin: 0.35rem 0 0.65rem;
}

#easy-done-ok {
  width: calc(100% - 2rem);
  max-width: 34rem;
  min-height: 3.6rem;
  font-size: 1.2rem;
  padding: 0.95rem 0.75rem;
  line-height: 1.35;
}

.easy-done-unlock {
  margin: 0.15rem 0 0.75rem;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #152028;
}

.easy-edit-line {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #3d4540;
}

#preview-root.easy-focus-hero #hero,
#preview-root.easy-focus-about #about-photos-block,
#preview-root.easy-focus-works #works {
  outline: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.entry-intake-block {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.entry-intake-block legend {
  padding: 0;
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #121816;
}

.entry-intake-note {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #5a635c;
}

.entry-choice-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.entry-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0;
  padding: 1rem;
  border: 2px solid rgba(20, 28, 36, 0.14);
  border-radius: 0.85rem;
  background: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
}

.entry-choice:hover,
.entry-choice:has(input:checked) {
  border-color: #3d8a48;
  box-shadow: none;
  background: #fff;
}

.entry-choice--muted {
  background: #eef1ef;
}

.entry-choice input {
  margin-top: 0.15rem;
}

.entry-choice-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.entry-choice-name {
  font-weight: 700;
}

.entry-choice-note {
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #3a433e;
}

.entry-purpose-hint {
  margin: 0.85rem 0 0.7rem;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.55;
  color: #3a433e;
}

.entry-purpose-hint p {
  margin: 0 0 0.7rem;
}

.entry-purpose-hint strong {
  font-weight: 700;
}

#entry-sample-color-row {
  width: min(100%, 22rem);
  max-width: 100%;
  margin-inline: auto;
}

#entry-sample-color-row .entry-choice {
  align-items: center;
}

#entry-sample-color-row .entry-color-choice > span:not(.entry-color-bars) {
  min-width: 0;
  flex: 1 1 auto;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.entry-color-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.entry-color-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 4.75rem;
  max-width: 28%;
  flex: 0 0 auto;
}

.entry-color-bars i {
  display: block;
  height: 7px;
  border-radius: 2px;
  border: 1px solid rgba(20, 28, 36, 0.18);
}

.easy-flow-meter {
  margin: 0 0 0.55rem;
  flex: 0 0 auto;
  pointer-events: none;
}

.easy-flow-meter[hidden] {
  display: none !important;
}

.easy-flow-meter-label {
  margin: 0 0 0.28rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: #121816;
}

.easy-flow-meter-track {
  height: 3px;
  background: rgba(20, 28, 36, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.easy-flow-meter-fill {
  display: block;
  height: 100%;
  width: 0;
  background: #2d6a36;
  border-radius: 999px;
}

.easy-flow-meter-names {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0;
  margin: 0.38rem 0 0;
  pointer-events: none;
}

.easy-flow-meter.is-direct .easy-flow-meter-names {
  pointer-events: auto;
}

.easy-flow-meter.is-direct .easy-flow-meter-name {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #2d6a36;
  font-weight: 700;
}

.easy-flow-meter.is-direct .easy-flow-meter-name.is-locked {
  cursor: default;
  color: #6b736e;
  font-weight: 400;
  pointer-events: none;
}

.easy-flow-meter-name {
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.35;
  color: #6b736e;
  text-align: center;
  white-space: nowrap;
}

.easy-flow-meter-name.is-now {
  font-weight: 700;
  color: #2d6a36;
}

.easy-flow-meter.is-wide .easy-flow-meter-name {
  font-size: 0.68rem;
}

.easy-flow-meter-name.is-now::before {
  content: "";
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.22rem;
  border-radius: 999px;
  background: #2d6a36;
  vertical-align: 0.05em;
}

@media (max-width: 720px) {
  .easy-flow-meter-name {
    font-size: 0.58rem;
  }

  .easy-flow-meter-name.is-now::before {
    width: 0.28rem;
    height: 0.28rem;
    margin-right: 0.08rem;
  }
}

@media (max-width: 40rem) {
  .easy-flow-meter-name,
  .easy-flow-meter.is-wide .easy-flow-meter-name {
    font-size: clamp(8px, 2.05vw, 0.62rem);
    letter-spacing: -0.02em;
  }

  .easy-flow-meter-name.is-now::before {
    width: 0.2rem;
    height: 0.2rem;
    margin-right: 0.04rem;
  }
}

.entry-mood-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.entry-mood {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0.55rem 0.6rem;
  border: 1px solid rgba(20, 28, 36, 0.14);
  border-radius: 0.65rem;
  background: #fff;
  cursor: pointer;
  font-size: 0.82rem;
  line-height: 1.35;
}

.entry-mood input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.entry-mood:hover,
.entry-mood:has(input:checked) {
  border-color: #3d8a48;
  box-shadow: none;
  background: #fff;
}

.entry-mood--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  background: #eef1ef;
}

.entry-mood-swatch {
  display: block;
  height: 1.35rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.entry-mood-swatch[data-swatch="clinic"] { background: linear-gradient(90deg, #ffffff, #1a4d8c); }
.entry-mood-swatch[data-swatch="green"] { background: linear-gradient(90deg, #e8f0e8, #4a7c59); }
.entry-mood-swatch[data-swatch="cafe"] { background: linear-gradient(90deg, #f3ebe3, #8b5a2b); }
.entry-mood-swatch[data-swatch="ink"] { background: linear-gradient(90deg, #d0d0d0, #1a1a1a); }
.entry-mood-swatch[data-swatch="ocean"] { background: linear-gradient(90deg, #e0f7fa, #26c6da); }

.entry-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  align-items: stretch;
}

@media (min-width: 520px) {
  .entry-layout-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.entry-layout-card {
  display: flex;
  margin: 0;
  cursor: pointer;
  min-height: 0;
}

.entry-layout-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.entry-layout-card-inner {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  padding: 0.28rem 0.45rem 0.58rem;
  border: 1px solid rgba(20, 28, 36, 0.14);
  border-radius: 0.65rem;
  background: #fff;
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.entry-layout-card:hover .entry-layout-card-inner,
.entry-layout-card:has(input:checked) .entry-layout-card-inner {
  border-color: #3d8a48;
  box-shadow: none;
  background: #fff;
}

.entry-layout-card .layout-card-wire {
  flex: 0 1 auto;
  min-height: 0;
}

.entry-layout-card--undecided .entry-layout-card-inner {
  background: #fff;
}

.entry-layout-card .layout-card-id--soft {
  background: #9aa39c;
  color: #fff;
}

.entry-layout-card .lw-ghost {
  opacity: 0.5;
  border-style: solid;
}

.entry-layout-undecided-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1f1c;
}

.entry-layout-undecided-note {
  font-size: 0.8rem;
  color: #5a635c;
  line-height: 1.4;
}

.entry-mood-label {
  color: #1a1f1c;
}

.entry-gate-apply {
  background: #2d6a36;
  color: #fff;
  border-color: #245a2c;
}

.entry-gate-apply:hover {
  background: #245a2c;
}

.entry-ref-modal-card,
.color-mode-reset-card {
  background: #f7f5f1;
  color: #1a1f1c;
  border: 1px solid rgba(20, 28, 36, 0.12);
}

.color-mode-reset-modal[hidden] {
  display: none !important;
}

.color-mode-reset-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.color-mode-reset-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(8, 10, 9, 0.55);
  cursor: pointer;
}

.color-mode-reset-card {
  position: relative;
  z-index: 1;
  width: min(22rem, 100%);
  padding: 1.2rem 1.15rem 1.15rem;
  border-radius: 0.9rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.color-mode-reset-title {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.color-mode-reset-text {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.color-mode-reset-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

body.atelier.color-mode-easy [data-detail-preset],
body.atelier.color-mode-easy .gct-legacy-random,
body.atelier.color-mode-easy #guided-color-trial,
body.atelier.color-mode-easy .dash-block[data-step-id="global-chrome-bg"],
body.atelier.color-mode-easy .dash-block[data-step-id="global-chrome-ink"],
body.atelier.color-mode-easy .dash-block[data-step-id="global-bg"],
body.atelier.color-mode-easy .dash-block[data-step-id="hero-color"],
body.atelier.color-mode-easy .dash-block[data-step-id="values-color"],
body.atelier.color-mode-easy .dash-block[data-step-id="global-body"],
body.atelier.color-mode-easy .dash-block[data-step-id="global-accent"],
body.atelier.color-mode-easy .dash-block[data-step-id="global-card"],
body.atelier.color-mode-easy .dash-block[data-step-id="contact-color"] {
  display: none !important;
}

body.atelier.color-mode-detail #easy-color-note {
  display: none !important;
}

body.atelier.color-mode-easy #easy-color-note {
  display: block;
}

.color-native-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.55rem 0 0.25rem;
}

.color-native-row input[type="color"] {
  width: 2.4rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.35rem;
  background: #fff;
  cursor: pointer;
}

.dash-block--settings[hidden] {
  display: none !important;
}

.entry-gate-choices {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.entry-gate-choices[hidden] {
  display: none !important;
}

.entry-gate-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  width: 100%;
  margin: 0;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.entry-gate-card:hover,
.entry-gate-card:focus-visible {
  border-color: #3d8a48;
  background: rgba(255, 255, 255, 0.06); /* ??????????????? */
  outline: none;
}

.entry-gate-card strong {
  font-size: 1.05rem;
  color: #fff;
}

.entry-gate-card span {
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

.entry-gate-vibe[hidden] {
  display: none !important;
}

.entry-gate-vibe {
  margin-top: 0.35rem;
}

.entry-gate-vibe-label {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}

.entry-gate-vibe-text {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.55rem;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 6rem;
}

.entry-gate-vibe-text::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.entry-gate-vibe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.entry-gate-back,
.entry-gate-apply,
.entry-ref-modal-ok {
  margin: 0;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.entry-gate-back {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: #fff;
}

.entry-gate-apply,
.entry-ref-modal-ok {
  border: 0;
  background: #3d8a48;
  color: #fff;
}

.entry-gate-apply:hover,
.entry-ref-modal-ok:hover {
  background: #32753c;
}

.entry-ref-modal[hidden] {
  display: none !important;
}

.entry-ref-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.entry-ref-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.entry-ref-modal-card {
  position: relative;
  z-index: 1;
  width: min(26rem, 100%);
  padding: 1.15rem 1.2rem 1.2rem;
  border-radius: 0.85rem;
  background: #f7f5f1;
  color: #1a1a1a;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

.entry-ref-modal-title {
  margin: 0 0 0.45rem;
  font-family: "Shippori Mincho", serif;
  font-size: 1.2rem;
  font-weight: 700;
}

.entry-ref-modal-text {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #444;
}

.entry-ref-reasons,
.vibe-reason-list {
  margin: 0 0 1rem;
  padding: 0 0 0 1.1rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #333;
}

.entry-ref-reasons li,
.vibe-reason-list li {
  margin: 0.35rem 0;
}

.vibe-reason-box {
  margin: 0.75rem 0 0.35rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(47, 127, 191, 0.35);
  border-radius: 0.55rem;
  background: #f3f8fc;
}

.vibe-reason-title {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a4d8c;
}

.preset-row button.is-active {
  background: #fff;
  border-color: #3d8a48;
  color: #1a1f1c;
  box-shadow: none;
  font-weight: 800;
}

.preset-row button[data-preset="vibe"].is-active {
  background: #fff;
  border-color: #3d8a48;
  color: #1a1f1c;
  box-shadow: none;
}

.entry-ref-modal-ok {
  display: block;
  width: 100%;
  text-align: center;
}

/* ?? reset draft confirm (viewport center) ?? */
.reset-draft-modal[hidden] {
  display: none !important;
}

.reset-draft-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.reset-draft-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.reset-draft-modal-card {
  position: relative;
  z-index: 1;
  width: min(26rem, 100%);
  padding: 1.15rem 1.2rem 1.2rem;
  border-radius: 0.85rem;
  background: #f7f5f1;
  color: #1a1a1a;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}

.reset-draft-modal-title {
  margin: 0 0 0.45rem;
  font-family: "Shippori Mincho", serif;
  font-size: 1.2rem;
  font-weight: 700;
}

.reset-draft-modal-text {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #444;
}

.reset-draft-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.reset-draft-modal-actions .wizard-btn {
  margin: 0;
  min-width: 7rem;
}

.reset-draft-modal-actions [data-reset-ok] {
  background: #b33a2e;
  border-color: #b33a2e;
  color: #fff;
}

.reset-draft-modal-actions [data-reset-ok]:hover {
  background: #922f25;
  border-color: #922f25;
}

body.reset-draft-open {
  overflow: hidden;
}

.atelier-mobile-tabs {
  display: none;
  gap: 0;
  background: #111;
}

.atelier-tab {
  flex: 1;
  padding: 0.75rem;
  border: 0;
  background: #222;
  color: #eee;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.atelier-tab.is-active {
  background: #3d8a48;
  color: #fff;
}

.atelier-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

/* ?? top chrome ?? */
.atelier-chrome {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  /* ???????????????????????????? */
  grid-template-columns: minmax(max-content, 1fr) minmax(min-content, auto) minmax(max-content, 1fr);
  align-items: center;
  gap: 0.75rem 1.25rem;
  min-height: 2.75rem;
  padding: 0.45rem 1.5rem;
  background: #0f1211;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #f2f2f0;
}

.atelier-chrome-left,
.atelier-chrome-right {
  display: flex;
  align-items: center;
  gap: 0.75rem 1rem;
  min-width: max-content;
  flex-wrap: wrap;
  z-index: auto;
}

.atelier-chrome-left {
  justify-content: flex-start;
  gap: 1.75rem;
}

.atelier-chrome-right {
  justify-content: flex-end;
}

.atelier-chrome-center {
  position: static;
  z-index: auto;
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 0.7rem;
  min-width: min-content;
  max-width: 100%;
  padding: 0 0.35rem;
  text-align: left;
  pointer-events: none;
  line-height: 1.15;
}

.chrome-center-name {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.08rem;
  min-width: 0;
  min-height: 0;
  height: 100%;
  /* 左にはみ出す人の半分だけ右へ。人と「か」の隙間はそのまま */
  transform: translateX(1.35rem);
}

.chrome-product-mark {
  position: absolute;
  /* 足は今の下の線。背だけ少し縮めて、頭の丸の上に隙間を残す */
  top: auto;
  bottom: -0.45rem;
  right: calc(100% + 0.15rem + 0.525rem);
  height: calc(100% + 0.35rem);
  width: auto;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
}

.atelier-chrome-center .chrome-brand {
  display: none;
}

.chrome-product-catch {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(21, 32, 40, 0.62);
  white-space: nowrap;
}

.chrome-product-name {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #152028;
  white-space: nowrap;
}

.atelier-chrome-right {
  justify-content: flex-end;
  margin-left: 0;
}

.chrome-control {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.atelier-chrome .preview-toolbar-label {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.7rem;
  margin-right: 0.15rem;
}

.chrome-seg {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  overflow: hidden;
}

.chrome-seg-btn {
  margin: 0;
  padding: 0.2rem 0.65rem;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.chrome-seg-btn.is-on {
  background: #fff;
  color: #111;
}

.preview-width-step-btn {
  width: 1.7rem;
  height: 1.7rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.preview-width-step-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

.preview-width-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  width: 10.5rem;
  min-width: 10.5rem;
  flex: 0 0 10.5rem;
  box-sizing: border-box;
  font-size: 0.72rem;
  font-weight: 700;
}

.atelier-chrome .preview-width-device,
.atelier-chrome .preview-width-px {
  color: #152028;
}

.atelier-chrome .chrome-control--width {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  flex: 0 0 auto;
  gap: 0.18rem;
  max-width: none;
  margin: 0;
  pointer-events: auto;
  color: #152028;
}
.atelier-chrome .preview-width-hint {
  width: auto;
  color: #152028;
}
.atelier-chrome .preview-width-ruler {
  display: inline-flex;
}
.atelier-chrome .preview-width-line {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  gap: 0.45rem;
}
.atelier-chrome .preview-width-meta {
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
}
.atelier-chrome .preview-width-device,
.atelier-chrome .preview-width-px,
.atelier-chrome .preview-look-btn {
  color: #152028;
}
.atelier-chrome .preview-look,
.atelier-chrome .preview-look[hidden] {
  display: inline-flex !important;
}
.atelier-chrome .preview-look-sep,
.atelier-chrome .preview-scale-pct {
  display: none;
}
.atelier-chrome .preview-look-btn {
  border-color: rgba(21, 32, 40, 0.55);
}

.dash-menu-btn {
  margin: 0;
  padding: 0.28rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: #1a4d8c;
  color: #fff;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.dash-menu-btn:hover {
  background: #163f72;
}

/* ?? side menu drawer ?? */
.atelier-menu[hidden] {
  display: none !important;
}

.atelier-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.atelier-menu.is-open {
  pointer-events: auto;
}

.atelier-menu-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(10, 12, 11, 0.45);
  cursor: pointer;
}

.atelier-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(92vw, 28rem);
  background: #f7f5f1;
  color: #1a1a1a;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.28);
  transform: translateX(105%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  container-type: inline-size;
  container-name: menu;
}

.atelier-menu.is-open .atelier-menu-panel {
  transform: translateX(0);
}

.atelier-menu-stages {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.atelier-menu-stage {
  flex: 0 0 100%;
  width: 100%;
  padding: 1rem 1.1rem 1.4rem;
  overflow: auto;
  background: #f7f5f1;
}

.atelier-menu-stage[hidden] {
  display: none !important;
}

.atelier-menu-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.atelier-menu-head h2 {
  margin: 0;
  flex: 1 1 auto;
  font-size: 1.15rem;
  font-family: "Shippori Mincho", serif;
}

.atelier-menu-back,
.atelier-menu-close {
  margin: 0;
  padding: 0.28rem 0.65rem;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.atelier-menu-lead {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #444;
}

.atelier-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.atelier-menu-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 3.6rem;
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(20, 28, 36, 0.16);
  border-radius: 0.7rem;
  background: #fff;
  text-align: left;
  font: inherit;
  cursor: pointer;
  box-sizing: border-box;
}

.atelier-menu-item:hover {
  border-color: #3d8a48;
  box-shadow: none;
  background: #fff;
}

.atelier-menu-item--danger:hover {
  border-color: #b33b2e;
  box-shadow: 0 0 0 2px rgba(179, 59, 46, 0.18);
}

.atelier-menu-item--danger strong {
  color: #8b3a2a;
}

.atelier-menu-item strong {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a1f1c;
}

.atelier-menu-item span {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #5a6570;
}
.menu-inline-picker {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
  border: 0;
  padding: 0;
}
.menu-direct-option {
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: 1px solid rgba(20, 28, 36, 0.14);
  border-radius: 0.65rem;
  background: #fff;
  padding: 0.65rem 0.75rem;
  font: inherit;
}
.menu-direct-option:hover,
.menu-direct-option.is-selected {
  border-color: #3d8a48;
  box-shadow: none;
  background: #fff;
}

.atelier-menu-help-link {
  margin: 1.1rem 0 0;
  font-size: 0.82rem;
  color: #555;
}

/* ?? split row ?? */
.atelier-split {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  min-height: 0;
  min-width: 0;
  --preview-pct: 75%;
}

.preview-pane {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #2a2e2c;
  overflow: hidden;
  position: relative;
  z-index: 1;
  contain: paint;
}

.preview-pane.is-listing-hold .preview-scroll,
.preview-pane.is-listing-hold .preview-width-rail {
  visibility: hidden;
}

.preview-pane.is-listing-hold::after {
  content: "見本を合わせています";
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #243038;
  font-size: 0.95rem;
}

.split-handle {
  flex: 0 0 10px;
  width: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(90deg, #efeae3 0 40%, #2a2e2c 60% 100%);
  cursor: default;
  pointer-events: none;
  touch-action: auto;
  position: relative;
  z-index: 5;
}

.split-handle:hover,
.split-handle:focus-visible,
body.is-splitting .split-handle {
  background: #4a90c4;
}

body.is-splitting {
  cursor: col-resize;
  user-select: none;
}

/* ?????????? ? ?????? ? ??????????????????? */
html {
  --dash-wave-dur: 800ms;
  --dash-wave-gap: 40ms;
  /* ?????????????????? #wave-shift-park??????????? */
  --dash-wave-shift: 6px;
  --dash-width-dur: 220ms;
  --dash-title-tuck: 140ms;
  --dash-squeeze-dur: 80ms;
  /* ???????????????????????????? */
  --dash-shut-ms: 220ms;
  --dash-open-ms: 360ms;
  --dash-shut-ease: cubic-bezier(0.16, 0.84, 0.3, 1);
}

.dash-collapse-shut,
.dash-collapse-grip {
  margin: 0;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #152028;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dash-collapse-shut {
  position: absolute;
  left: 0;
  top: 0.55rem;
  z-index: 5;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0 0.55rem 0.55rem 0;
  background: transparent;
}

html:not(.dash-collapse-full):not(.dash-collapse-closing) .dash-pane > .dash-header {
  padding-left: 2.85rem;
}

.dash-collapse-grip {
  display: none;
}

.dash-chevron {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
}

.dash-collapse-shut .dash-chevron--pair {
  width: 1.35rem;
}

.dash-collapse-shut .dash-chevron--one {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  transform-origin: center;
  transition: transform var(--dash-width-dur, 220ms) var(--dash-shut-ease, cubic-bezier(0.16, 0.84, 0.3, 1));
}

html.dash-collapse-closing .dash-collapse-shut,
html.dash-collapse-full .dash-collapse-shut {
  background: #efeae3;
}

html.dash-collapse-closing .dash-collapse-shut .dash-chevron--one,
html.dash-collapse-full .dash-collapse-shut .dash-chevron--one {
  transform: rotate(180deg);
}

html.dash-sheet-move .atelier-split {
  position: relative;
}

html.dash-sheet-move .dash-pane {
  overflow: hidden;
}

html.dash-sheet-move .split-handle {
  display: none;
}

html.dash-sheet-move .dash-pane > .dash-header,
html.dash-sheet-move .dash-pane > .dash-body {
  width: var(--dash-sheet-w);
  min-width: var(--dash-sheet-w);
  max-width: var(--dash-sheet-w);
  box-sizing: border-box;
}

.dash-collapse-shut[hidden],
.dash-collapse-grip[hidden] {
  display: none !important;
}

html.dash-collapse-half .dash-pane,
html.dash-collapse-full .dash-pane {
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
}

html.dash-collapse-half .preview-pane,
html.dash-collapse-full .preview-pane,
html.dash-preview-fill .preview-pane {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  min-width: 0;
}

html.dash-collapse-half .split-handle,
html.dash-collapse-full .split-handle,
html.dash-preview-fill .split-handle {
  display: none;
}

html.dash-collapse-half .dash-pane {
  width: 9rem;
}

html.dash-collapse-half.dash-collapse-settled .dash-body,
html.dash-collapse-half.dash-collapse-settled .wizard-foot-dock,
html.dash-collapse-half.dash-collapse-settled .wizard-head-dock,
html.dash-collapse-half.dash-collapse-settled .dash-width-rail,
html.dash-collapse-half.dash-collapse-settled .dash-resume-notice {
  display: none !important;
}

html.dash-collapse-half .dash-header {
  order: 1;
  border-bottom: 0;
  padding: 0.55rem 0.35rem 0.35rem;
}

html.dash-collapse-half .dash-header-row--top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.2rem;
}

html.dash-collapse-half .dash-header-row--top .dash-title {
  grid-column: 1;
  justify-self: center;
  font-size: 0.92rem;
}

html.dash-collapse-half .dash-collapse-shut {
  grid-column: 2;
  justify-self: end;
}

html.dash-collapse-half .dash-collapse-shut .dash-chevron--pair {
  display: none;
}

html.dash-collapse-half .dash-collapse-shut .dash-chevron--one {
  display: block;
}

/* ??????????????????????????????? */
html.dash-wave-squeeze .dash-header {
  align-self: flex-start;
  box-sizing: border-box;
  border-bottom: 0;
  padding: 0.55rem 0.35rem 0.35rem;
  background: #efeae3;
  position: relative;
  z-index: 3;
}

html.dash-wave-squeeze .dash-header-row--top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.2rem;
}

html.dash-wave-squeeze .dash-header-row--top .dash-title {
  grid-column: 1;
  justify-self: center;
  font-size: 0.92rem;
}

html.dash-wave-squeeze .dash-collapse-shut {
  grid-column: 2;
  justify-self: end;
}

html.dash-wave-squeeze .dash-collapse-shut .dash-chevron--pair {
  display: none;
}

html.dash-wave-squeeze .dash-collapse-shut .dash-chevron--one {
  display: block;
}

html.dash-collapse-full .dash-pane {
  width: 0;
  background: transparent;
  overflow: visible;
  z-index: 2;
}

html.dash-collapse-full .atelier-split {
  position: relative;
}

html.dash-collapse-full .preview-pane {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  z-index: 1;
}

html.dash-collapse-full .dash-header,
html.dash-collapse-full .dash-body,
html.dash-collapse-full .wizard-foot-dock,
html.dash-collapse-full .wizard-head-dock,
html.dash-collapse-full .dash-width-rail,
html.dash-collapse-full .dash-resume-notice {
  display: none !important;
}

html.dash-collapse-full .dash-collapse-grip {
  display: flex;
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 1.35rem;
  height: 1.75rem;
  margin: 0;
  border-radius: 0 0.45rem 0.45rem 0;
  background: #efeae3;
  box-shadow: none;
  transform: none;
  z-index: 4;
}

html.dash-preview-locked .atelier-split {
  position: relative;
}

html.dash-preview-locked .preview-pane {
  position: absolute;
  z-index: 1;
  margin: 0;
  flex: none;
  max-width: none;
}

html.dash-preview-locked .dash-pane {
  z-index: 2;
}

html.dash-wave-reveal .dash-pane {
  background: transparent;
}

.dash-shutter-band {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: -1;
  background: #f4f2ee;
  pointer-events: none;
}

html.dash-wave-out .dash-shutter-band {
  animation: dash-shutter-shut var(--dash-wave-dur) ease both;
  animation-delay: calc(var(--wave-index) * var(--dash-wave-gap));
}

html.dash-wave-in .dash-shutter-band {
  animation: dash-shutter-open var(--dash-wave-dur) ease both;
  animation-delay: calc(var(--wave-index) * var(--dash-wave-gap));
  background: #fff;
}

html.dash-wave-in .dash-header {
  background: #fff;
}

.dash-open-sheet {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: -1;
  pointer-events: none;
}

html.dash-wave-in body .dash-body > .fill-form,
html.dash-wave-in body .dash-block.is-active-step,
html.dash-wave-in body .dash-block.is-wizard-active {
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-color: transparent transparent;
}

html.dash-wave-in body .dash-body > .fill-form::-webkit-scrollbar,
html.dash-wave-in body .dash-block.is-active-step::-webkit-scrollbar,
html.dash-wave-in body .dash-block.is-wizard-active::-webkit-scrollbar {
  background: transparent;
}

html.dash-wave-in body .dash-body > .fill-form::-webkit-scrollbar-thumb,
html.dash-wave-in body .dash-block.is-active-step::-webkit-scrollbar-thumb,
html.dash-wave-in body .dash-block.is-wizard-active::-webkit-scrollbar-thumb {
  background: transparent;
}

html.dash-preview-locked .split-handle,
html.dash-pane-sizing .split-handle,
html.dash-wave-in .split-handle,
html.dash-wave-out .split-handle {
  visibility: hidden;
}

html.dash-wave-out [data-wave-row="up"],
html.dash-wave-in [data-wave-row="down"] {
  overflow: hidden;
}

html.dash-wave-out [data-wave-row="up"] {
  animation: dash-shutter-shut var(--dash-wave-dur) ease both;
  animation-delay: calc(var(--wave-index) * var(--dash-wave-gap));
}

html.dash-wave-in [data-wave-row="down"] {
  animation: dash-shutter-open var(--dash-wave-dur) ease both;
  animation-delay: calc(var(--wave-index) * var(--dash-wave-gap));
}

@keyframes dash-shutter-shut {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 100% 0 0); }
}

html.dash-wave-out.dash-wave-squeeze .dash-block,
html.dash-wave-out.dash-wave-squeeze .dash-group {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html.dash-wave-out.dash-wave-squeeze [data-wave-row="up"]:not(.wizard-foot-dock) {
  background-color: #fff;
}

html.dash-wave-out.dash-wave-squeeze .dash-shutter-band {
  background: #fff;
}

html.dash-wave-out.dash-wave-squeeze [data-wave-row="up"],
html.dash-wave-out.dash-wave-squeeze .dash-shutter-band {
  animation-name: dash-shutter-shut-follow;
}

@keyframes dash-shutter-shut-follow {
  from { clip-path: inset(0 calc(100% - 9rem) 0 0); }
  to { clip-path: inset(0 100% 0 0); }
}

@keyframes dash-shutter-open {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* ???????6??????????????? */
#color-wave {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  background: transparent;
}

#color-wave[hidden] {
  display: none !important;
}

.color-wave-row {
  flex: 1 1 0;
  display: flex;
  min-height: 0;
}

.color-wave-cell {
  flex: 1 1 0;
  min-width: 0;
  transform: scaleX(0);
}

/* ????????????????4??16???????????????????? */
#grid-shutter {
  position: fixed;
  inset: 0;
  z-index: 140;
  overflow: hidden;
  pointer-events: auto;
  background: transparent;
}

#grid-shutter[hidden] {
  display: none !important;
}

.grid-shutter-cell {
  position: absolute;
  transform: scaleX(0);
}

/* ??????????????8?????????????????????????? */
#cross-shutter {
  position: fixed;
  inset: 0;
  z-index: 141;
  overflow: hidden;
  pointer-events: auto;
  background: transparent;
}

#cross-shutter[hidden] {
  display: none !important;
}

.cross-shutter-pane {
  position: absolute;
  left: 0;
  transform: translateX(-100%);
}

@media (max-width: 860px) {
  .dash-collapse-shut,
  .dash-collapse-grip {
    display: none !important;
  }
  html:not(.dash-collapse-full):not(.dash-collapse-closing) .dash-pane > .dash-header {
    padding-left: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    --dash-wave-dur: 0ms;
    --dash-wave-gap: 0ms;
    --dash-width-dur: 0ms;
    --dash-title-tuck: 0ms;
    --dash-squeeze-dur: 0ms;
    --dash-shut-ms: 0ms;
    --dash-open-ms: 0ms;
  }
}

/* ???????????#wave-tune ? hidden?????? hidden ??? */
.wave-tune {
  position: fixed;
  z-index: 40;
  width: 18rem;
  margin: 0;
  padding: 0.7rem 0.9rem 0.85rem;
  border: 1px solid #c8c8c8;
  background: #fff;
  color: #152028;
  font-size: 0.88rem;
  line-height: 1.3;
  box-shadow: 0 8px 22px rgba(20, 28, 36, 0.14);
}
.wave-tune-title {
  margin: 0 0 0.5rem;
  font-weight: 700;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.wave-tune.is-dragging .wave-tune-title {
  cursor: grabbing;
}
.wave-tune-row {
  display: grid;
  grid-template-columns: 5rem 2.15rem 3.6rem 1.7rem 2.15rem;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
}
.wave-tune-row button,
.wave-tune-num {
  margin: 0;
  height: 2.15rem;
  border: 1px solid #b7b7b7;
  background: #fff;
  color: inherit;
  font: inherit;
}
.wave-tune-row button {
  padding: 0;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.wave-tune-num {
  width: 100%;
  padding: 0 0.2rem;
  text-align: right;
}
.wave-tune-unit {
  color: #555;
}

.dash-pane {
  flex: 0 0 25%;
  width: 25%;
  max-width: 25%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #f4f2ee;
  color: #1a1a1a;
  overflow: hidden;
  position: relative;
  z-index: 2;
  container-type: inline-size;
  container-name: dash;
}

.preview-toolbar-label {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-right: 0.25rem;
}

.preview-guide-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem 0.15rem 0.2rem;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  background: #fff;
  color: #333;
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}

.preview-guide-btn:hover {
  background: #f3f3f3;
}

.preview-guide-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  background: #5a5f5c;
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.preview-guide-btn.is-step-current .preview-guide-num {
  box-shadow: 0 0 0 2px #efeae3, 0 0 0 4px #3d8a48;
}

.preview-guide-btn.is-step-done .preview-guide-num {
  background: #3d8a48;
}

.preview-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  padding: 0 0.75rem;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.preview-scroll:not(.is-look-enlarged) {
  overflow-x: hidden;
}

.preview-viewport {
  margin: 0 auto;
  align-self: center;
  transition: width 0.2s ease, max-width 0.2s ease;
  position: relative;
  flex-shrink: 0;
  width: auto;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}

.preview-viewport .preview-site,
.preview-viewport #preview-root {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ?? JS ????????CSS ???????? */
.preview-viewport.is-desktop,
.preview-viewport.is-mobile,
.preview-viewport.is-phone,
.preview-viewport.is-tablet {
  max-width: none;
}

.preview-viewport.is-scroll-x {
  margin: 0 auto;
  align-self: center;
}

.viewport-btn {
  display: none;
}
.preview-site {
  position: relative;
  pointer-events: none;
  user-select: none;
  background-color: var(--page-bg);
  background-image: var(--page-bg-image, none);
  border-radius: 6px;
  overflow-x: hidden;
  overflow-y: visible;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  --bg: var(--page-bg);
  --bg-soft: var(--page-bg-soft);
  --bg-mid: var(--page-bg-soft);
  --bg-deep: var(--page-bg-soft);
  --bg-end: var(--page-bg);
  --ink: var(--body-ink);
  --muted: var(--body-muted);
  --brand: var(--accent);
  --brand-deep: var(--accent);
  --brand-bright: var(--accent);
}

.preview-site .site-header {
  background-color: var(--chrome-bg) !important;
  background-image: var(--chrome-bg-image, none) !important;
  /* sticky ??????????????? relative ??? */
  position: relative !important;
  top: auto !important;
}

.preview-site .logo,
.preview-site .logo-wrap,
.preview-site .preview-nav-static,
.preview-site .preview-nav-static span,
.preview-site .nav-toggle-label {
  color: var(--chrome-ink) !important;
  -webkit-text-fill-color: var(--chrome-ink) !important;
}

.preview-site .preview-nav-static {
  display: none;
  gap: 1rem;
  font-size: 0.85rem;
}

@media (min-width: 60rem) {
  .preview-viewport.is-desktop .preview-nav-static {
    display: flex;
    position: static;
    background: transparent;
    border: 0;
    padding: 0;
  }
}

/* パソコン幅は、見ている端末が狭くても見本の中はパソコンの並び */
.preview-viewport.is-desktop .preview-nav-static {
  display: flex;
  position: static;
  background: transparent;
  border: 0;
  padding: 0;
}

.preview-site .hero-copy h1,
.preview-site .hero-copy .hero-lead {
  color: var(--hero-ink) !important;
  -webkit-text-fill-color: var(--hero-ink) !important;
  -webkit-text-stroke: 0 !important;
}

.preview-site .hero-copy h1 {
  font-size: calc(1.7rem * var(--heading-scale, 1)) !important;
  white-space: pre-line;
  line-height: 1.25;
}
.preview-site .hero-copy .hero-lead {
  font-size: calc(0.98rem * var(--heading-scale, 1)) !important;
  white-space: pre-line;
}
.preview-site .hero-value-title,
.preview-site #hero-values p,
.preview-site .section-label,
.preview-site .profile-name,
.preview-site .section-lead,
.preview-site .accordion summary,
.preview-site .accordion-body,
.preview-site .value-list li,
.preview-site .work-item-body h3,
.preview-site .work-item h3,
.preview-site .work-item-copy,
.preview-site .work-item-copy p,
.preview-site #hours-lead,
.preview-site #access-lead,
.preview-site #address-lead,
.preview-site #announce-lead,
.preview-site #announce-go,
.preview-site [data-contact-note] {
  white-space: pre-line;
}

@media (min-width: 48rem) {
  .preview-site .hero-copy h1 {
    font-size: calc(3.15rem * var(--heading-scale, 1)) !important;
  }
}

.preview-viewport.is-desktop .hero-copy h1 {
  font-size: calc(3.15rem * var(--heading-scale, 1)) !important;
}

.preview-site .hero-value-title,
.preview-site .hero-value-list p:last-child,
.preview-site .section-label,
.preview-site .profile-name,
.preview-site .section-lead,
.preview-site .about .accordion summary,
.preview-site .value-list,
.preview-site .value-mark,
.preview-site .work-item-body h3,
.preview-site .work-item h3,
.preview-site .work-item-copy,
.preview-site .work-item-copy p,
.preview-site .work-tag {
  color: var(--body-ink) !important;
  -webkit-text-fill-color: var(--body-ink) !important;
  -webkit-text-stroke: 0 !important;
}

/* ?????????????????????? !important ??????? */
.preview-site .work-link {
  background: var(--accent, var(--brand)) !important;
  border-color: var(--accent, var(--brand)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-text-stroke: 0 !important;
}
.preview-site .work-item-link:not(.is-no-link):hover .work-link {
  background: var(--accent, var(--brand-deep, var(--brand))) !important;
  border-color: var(--accent, var(--brand-deep, var(--brand))) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.preview-site .section-lead,
.preview-site .work-item-copy,
.preview-site .work-item-copy p {
  color: var(--body-muted) !important;
  -webkit-text-fill-color: var(--body-muted) !important;
}

.preview-site .hero-value-title::after,
.preview-site #about h2::after,
.preview-site #works h2::after,
.preview-site .sample-extra:not(#announce) h2::after {
  background-color: var(--accent) !important;
  background-image: var(--accent-image, none) !important;
  width: var(--accent-bar-width, 50%) !important;
  max-width: 100%;
}

.preview-site #announce h2::after,
.preview-site[data-accent-bar="none"] .hero-value-title::after,
.preview-site[data-accent-bar="none"] #about h2::after,
.preview-site[data-accent-bar="none"] #works h2::after,
.preview-site[data-accent-bar="none"] .sample-extra h2::after {
  content: none;
  display: none;
}

/* ??????????? */
#preview-root .preview-hit,
#preview-root .zone-badge {
  cursor: default !important;
}
body.atelier.mode-detail #preview-root .preview-hit,
body.atelier.mode-detail #preview-root .zone-badge,
body.atelier.mode-detail #preview-root [data-open-step] {
  cursor: default !important;
}

.preview-site[data-accent-bar="short"] {
  --accent-bar-width: 2.5rem;
}
.preview-site[data-accent-bar="mid"] {
  --accent-bar-width: 50%;
}
.preview-site[data-accent-bar="long"] {
  --accent-bar-width: 100%;
}

.accent-bar-field {
  margin-top: 0.75rem;
}
.accent-bar-on,
.accent-bar-length {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
}
.accent-bar-length-label {
  font-weight: 700;
}
.accent-bar-field.is-off .accent-bar-length {
  display: none;
}
@container dash (max-width: 32rem) {
  .accent-bar-length,
  .logo-mode-fieldset,
  .layout-look-fieldset {
    flex-direction: column;
    align-items: flex-start;
  }
}

.preview-site .accordion,
.preview-site .work-item {
  background-color: var(--card-bg) !important;
  background-image: var(--card-bg-image, none) !important;
  border-color: color-mix(in srgb, var(--body-ink, #222) 22%, transparent) !important;
}
.preview-site .accordion-body {
  border-top-color: color-mix(in srgb, var(--body-ink, #222) 14%, transparent) !important;
}
/* ?? style.css ? .work-item a { background:#fff } ????????????????????????????????????? */
.preview-site .work-item a,
.preview-site .work-item-pending,
.preview-site .work-item-static {
  background-color: var(--card-bg) !important;
  background-image: var(--card-bg-image, none) !important;
  border-color: color-mix(in srgb, var(--body-ink, #222) 22%, transparent);
  border-radius: var(--radius) !important;
}
.preview-site .work-thumb {
  background-color: var(--card-bg) !important;
  border-bottom-color: color-mix(in srgb, var(--body-ink, #222) 14%, transparent) !important;
}

.preview-site .contact-band {
  background-color: var(--contact-bg) !important;
  background-image: var(--contact-bg-image, none) !important;
}
.preview-site .announce-band {
  background-color: var(--announce-bg, #fff6e8);
  text-align: center;
}
.preview-site .announce-band .shell {
  padding-top: 1.4rem;
  padding-bottom: 1.5rem;
}
.preview-site .announce-action {
  margin: 0.85rem 0 0;
}
.preview-site .announce-go {
  display: inline-block;
  min-height: 2.6rem;
  padding: 0.55rem 1.35rem;
  border-radius: 999px;
  background: var(--accent, #1a4d8c);
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}
/* ?style?????????????Live Server????? */
.preview-site .contact-band-inner {
  max-width: none;
  text-align: center !important;
}

.preview-site .contact-band,
.preview-site .contact-band .section-label,
.preview-site .contact-band h2,
.preview-site .contact-band-lead,
.preview-site .sample-mail,
.preview-site .sample-phone {
  color: var(--contact-ink) !important;
  -webkit-text-fill-color: var(--contact-ink) !important;
}

.preview-site .sample-mail,
.preview-site .sample-phone {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.preview-site .sample-mail[hidden],
.preview-site .sample-phone[hidden],
.preview-site #about .section-lead[hidden] {
  display: none !important;
}

.preview-site .skill-card img,
.preview-site .skill-card-img,
.preview-site .work-thumb {
  max-width: 100%;
  width: 100%;
  display: block;
  object-fit: cover;
  box-sizing: border-box;
}
.preview-site .work-thumb {
  object-position: center top;
}

.preview-site .contact-band h2::after {
  background: var(--contact-ink) !important;
}

.preview-site .site-footer {
  background-color: var(--chrome-bg) !important;
  background-image: var(--chrome-bg-image, none) !important;
}

.preview-site .site-footer p {
  color: var(--chrome-ink) !important;
}

.preview-site,
.preview-site .section,
.preview-site .hero {
  font-family: var(--font-body);
}

.preview-site .hero-copy h1,
.preview-site .hero-lead {
  font-family: var(--font-catch, var(--font-display));
}

.preview-site #about h2 {
  font-family: var(--font-about, var(--font-body));
  color: var(--body-ink) !important;
  -webkit-text-fill-color: var(--body-ink) !important;
}

.preview-site #about,
.preview-site #about .profile-name,
.preview-site #about .accordion summary,
.preview-site #about .section-lead {
  font-family: var(--font-about, var(--font-body));
}

.preview-site #works,
.preview-site #works h2,
.preview-site #works .work-item h3,
.preview-site #works .work-item-copy {
  font-family: var(--font-works, var(--font-body));
}

.preview-site #works h2 {
  color: var(--body-ink) !important;
  -webkit-text-fill-color: var(--body-ink) !important;
}

.preview-site .sample-extra h2 {
  font-family: var(--font-body);
  color: var(--body-ink) !important;
  -webkit-text-fill-color: var(--body-ink) !important;
}

.preview-site .profile-name,
.preview-site .logo,
.preview-site .accordion summary {
  font-family: var(--font-display);
}

.logo-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.preview-logo-img {
  display: block;
  max-height: 2.5rem;
  width: auto;
  object-fit: contain;
}

.preview-logo-img[hidden] {
  display: none !important;
}

.sample-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: #8b3a2a;
  border-radius: 2px;
}

.work-item-static {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

[data-sample-item][hidden],
[data-fill-for][hidden],
[data-sns-for][hidden],
.sample-extra[hidden] {
  display: none !important;
}

.map-placeholder {
  display: grid;
  place-items: center;
  min-height: 10rem;
  background: rgba(0, 0, 0, 0.06);
  border: 1px dashed rgba(0, 0, 0, 0.25);
  color: var(--body-ink);
  border-radius: var(--radius);
}

.sns-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.sns-list li {
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: var(--card-bg);
  color: var(--body-ink);
  border-radius: var(--radius);
}

.preview-site.is-color-flash {
  outline: 3px solid #c9a227;
  outline-offset: -3px;
}



/* ?? zone badges / wizard / dash (kept + adapted) ?? */
.preview-hit {
  position: relative;
}

.preview-hit.is-target-flash {
  outline: 2px solid #c9a227;
  outline-offset: 2px;
}

.zone-badge.is-target-flash {
  outline: 2px solid #c9a227;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c9a227;
}

.preview-hit,
.zone-badge {
  pointer-events: auto;
  cursor: pointer;
}

.zone-badge-rail {
  position: absolute;
  z-index: 40;
  top: 0.5rem;
  left: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: 9rem;
  pointer-events: auto;
}

.zone-badge-rail .zone-badge {
  position: static;
}

.zone-badge {
  position: absolute;
  z-index: 30;
  top: 0.35rem;
  right: 0.35rem;
  left: auto;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #6a9ec4;
  color: #fff;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.zone-badge--text,
.zone-badge--alt {
  background: #8b3a2a;
}

/* ?????????????????????????? */
body.atelier.color-mode-easy .zone-badge[data-open-step="global-chrome-bg"],
body.atelier.color-mode-easy .zone-badge[data-open-step="global-chrome-ink"],
body.atelier.color-mode-easy .zone-badge[data-open-step="global-bg"],
body.atelier.color-mode-easy .zone-badge[data-open-step="hero-color"],
body.atelier.color-mode-easy .zone-badge[data-open-step="values-color"],
body.atelier.color-mode-easy .zone-badge[data-open-step="global-body"],
body.atelier.color-mode-easy .zone-badge[data-open-step="global-accent"],
body.atelier.color-mode-easy .zone-badge[data-open-step="global-card"],
body.atelier.color-mode-easy .zone-badge[data-open-step="contact-color"] {
  display: none !important;
}

body.hide-zone-badges .zone-badge,
body.hide-zone-badges .zone-badge-rail {
  display: none !important;
}

.preview-legend,
.flow-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.85);
}

.flow-legend {
  color: #555;
  margin: 0 0 0.55rem;
}

.leg-swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  vertical-align: -0.05rem;
  margin-right: 0.2rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.leg-text { background: #c44a3a; }
.leg-done { background: #3d8a48; }

.preview-site .zone-badge.badge-kind-color:not(.is-step-done) {
  background: #6a9ec4;
}

.preview-site .zone-badge.badge-kind-text:not(.is-step-done) {
  background: #c44a3a;
}

.preview-site .zone-badge.is-step-done {
  background: #3d8a48 !important;
  opacity: 1;
  filter: none;
}

.preview-site .zone-badge.is-step-current {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3d8a48;
}

.mode-picker {
  margin: 0.75rem 0;
  padding: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.5rem;
  background: #fff;
}

.mode-picker-lead {
  margin: 0 0 0.65rem;
  font-size: 0.85rem;
  color: #444;
}

.purpose-entry-back-wrap {
  margin: 0 0 0.65rem;
}

.purpose-entry-back {
  font-size: 0.8rem;
}

.mode-option {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  margin: 0.45rem 0;
  padding: 1rem;
  min-height: 3.6rem;
  border: 2px solid rgba(20, 28, 36, 0.14);
  border-radius: 0.85rem;
  background: #fff;
  cursor: pointer;
  box-sizing: border-box;
}

.mode-option:hover,
.mode-option:has(input:checked) {
  border-color: #3d8a48;
  background: #fff;
}

.mode-option input {
  margin-top: 0.2rem;
}

.mode-option-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.mode-option-note {
  font-size: 0.78rem;
  color: #555;
  line-height: 1.45;
}

.wizard-foot-dock {
  flex: 0 0 auto;
  padding: 0.5rem 1rem 0.65rem;
  background: #f4f2ee;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.06);
}

.wizard-foot-dock.is-chapter-boundary .wizard-foot {
  display: none;
}

.wizard-foot-dock.is-chapter-boundary .wizard-foot-panel {
  margin-bottom: 0;
}

.wizard-foot-panel {
  margin: 0 0 0.5rem;
  padding: 0.85rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.5rem;
}

.wizard-foot-panel[hidden] {
  display: none !important;
  margin: 0;
  padding: 0;
  border: 0;
}

.wizard-foot-panel-text {
  margin: 0 0 0.45rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.wizard-foot-panel-note {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  color: #666;
}

.wizard-foot-panel-actions {
  display: flex;
  gap: 0.5rem;
}

.wizard-btn {
  flex: 1;
  min-height: 2.5rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 0.45rem;
  background: #e8e4dc;
  color: #222;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.wizard-btn:hover {
  background: #ded9cf;
}

.wizard-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body.mode-self .dash-block {
  display: block;
}

body.mode-self .dash-block:not(.is-active-step) {
  display: none !important;
}

body.mode-self .dash-block > summary {
  display: flex;
}

body.mode-guided .dash-block.is-text-chapter.is-wizard-active {
  padding: 0.25rem 0.15rem 0.5rem;
}

/* dash-subhead ? Ver1.1 Phase1?H2???note/sub ? System????????????? */
body.mode-guided .dash-block.is-text-chapter.is-wizard-active .dash-note,
body.mode-guided .dash-block.is-text-chapter.is-wizard-active .dash-sub {
  font-size: 0.95rem;
  line-height: 1.6;
}

body.mode-guided .dash-block.is-text-chapter.is-wizard-active label {
  display: block;
  margin-bottom: 0.85rem;
  font-size: 0.98rem;
  line-height: 1.45;
}

body.mode-guided .dash-block.is-text-chapter.is-wizard-active input[type="text"],
body.mode-guided .dash-block.is-text-chapter.is-wizard-active input[type="email"],
body.mode-guided .dash-block.is-text-chapter.is-wizard-active input[type="url"],
body.mode-guided .dash-block.is-text-chapter.is-wizard-active input[type="date"],
body.mode-guided .dash-block.is-text-chapter.is-wizard-active textarea,
body.mode-guided .dash-block.is-text-chapter.is-wizard-active select {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.65rem 0.75rem;
  font-size: 1rem;
}

body.mode-guided .dash-block.is-text-chapter.is-wizard-active .fill-block {
  margin-top: 0.75rem;
  padding: 0.75rem;
}

body.mode-guided #wizard-back {
  font-size: 0.95rem;
}

.leg-color { background: #6a9ec4; }

.toolbar-check {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.65rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.toolbar-check input {
  margin: 0;
}

.make-flow-steps li[data-step].is-text-step {
  background: #8b3a2a;
  color: #fff;
  opacity: 0.92;
}

.make-flow-steps li[data-step].is-text-step .flow-num {
  background: rgba(255, 255, 255, 0.25);
}

/* ?? ?????????????????????????? ?? */
.preview-site .site-header .zone-badge[data-open-step="global-chrome-bg"] {
  top: 0.4rem;
  left: 0.45rem;
  right: auto;
}
.preview-site .site-header .zone-badge[data-open-step="global-chrome-ink"] {
  top: 0.4rem;
  left: 2.25rem;
  right: auto;
}
.preview-site .site-header .zone-badge[data-open-step="logo-text"] {
  top: 0.4rem;
  left: auto;
  right: 0.45rem;
}

.preview-site #hero > .zone-badge[data-open-step="global-bg"] {
  top: 0.45rem;
  left: 0.45rem;
  right: auto;
}
.preview-site #hero > .zone-badge[data-open-step="heading-font"] {
  top: 0.45rem;
  left: 2.25rem;
  right: auto;
}

.preview-site .hero-stage .zone-badge[data-open-step="hero-color"] {
  top: 0.45rem;
  left: 0.45rem;
  right: auto;
}
.preview-site .hero-stage .zone-badge[data-open-step="hero-image"] {
  top: 0.45rem;
  left: 2.25rem;
  right: auto;
}
.preview-site .hero-stage .zone-badge[data-open-step="catch-font"] {
  top: 0.45rem;
  left: auto;
  right: 2.25rem;
}
.preview-site .hero-stage .zone-badge[data-open-step="hero-text"] {
  top: 0.45rem;
  left: auto;
  right: 0.45rem;
}

/* 狭い端末、または狭い欄にパソコン幅を縮めたときだけ、端の目印を内側へ */
.preview-viewport.is-phone .preview-site .zone-badge,
.preview-viewport.is-fit-narrow .preview-site .zone-badge {
  width: 1.4rem;
  height: 1.4rem;
  font-size: 0.62rem;
}
body:not(.hide-zone-badges) .preview-viewport.is-phone .header-inner,
body:not(.hide-zone-badges) .preview-viewport.is-fit-narrow .header-inner {
  padding-left: 4.2rem;
  padding-right: 2.5rem;
  box-sizing: border-box;
}
.preview-viewport.is-phone .site-header .zone-badge[data-open-step="logo-text"],
.preview-viewport.is-fit-narrow .site-header .zone-badge[data-open-step="logo-text"],
.preview-viewport.is-phone #hero > .zone-badge.zone-badge--heading-font,
.preview-viewport.is-fit-narrow #hero > .zone-badge.zone-badge--heading-font {
  top: 0.45rem;
  left: auto;
  right: 0.7rem;
}

.preview-site .hero-values-wrap .zone-badge[data-open-step="values-color"] {
  top: 0.4rem;
  left: auto;
  right: 2.25rem;
}
.preview-site .hero-values-wrap .zone-badge[data-open-step="values-text"] {
  top: 0.4rem;
  left: auto;
  right: 0.45rem;
}

.preview-site #about > .zone-badge[data-open-step="global-body"] {
  top: 0.4rem;
  left: 0.45rem;
  right: auto;
}
.preview-site #about > .zone-badge[data-open-step="global-accent"] {
  top: 0.4rem;
  left: 2.25rem;
  right: auto;
}
.preview-site #about > .zone-badge[data-open-step="global-card"] {
  top: 0.4rem;
  left: 4.05rem;
  right: auto;
}
.preview-site #about > .zone-badge[data-open-step="about-images"],
.preview-site #about-photos-block > .zone-badge[data-open-step="about-images"] {
  top: 0.4rem;
  left: auto;
  right: 0.45rem;
}
.preview-site #about > .zone-badge[data-open-step="body-font"] {
  top: 0.4rem;
  left: auto;
  right: 2.25rem;
}
.preview-site #about > .zone-badge[data-open-step="about-text"] {
  top: 0.4rem;
  left: auto;
  right: 0.45rem;
}

.preview-site #works > .zone-badge[data-open-step="works-images"] {
  top: 0.4rem;
  left: 0.45rem;
  right: auto;
}
.preview-site #works > .zone-badge[data-open-step="works-text"] {
  top: 0.4rem;
  left: auto;
  right: 0.45rem;
}

.preview-site #hours > .zone-badge[data-open-step="hours-text"],
.preview-site #access > .zone-badge[data-open-step="access-text"],
.preview-site #address > .zone-badge[data-open-step="address-text"] {
  top: 0.4rem;
  left: auto;
  right: 0.45rem;
}

.preview-site .contact-band .zone-badge[data-open-step="contact-color"] {
  top: 0.45rem;
  left: auto;
  right: 2.25rem;
}
.preview-site .contact-band .zone-badge[data-open-step="contact-text"] {
  top: 0.45rem;
  left: auto;
  right: 0.45rem;
}

.preview-site .site-footer .zone-badge[data-open-step="finish"] {
  top: 0.35rem;
  left: auto;
  right: 0.35rem;
}

.preview-site .hero-box {
  background: transparent;
}

.hero-values-wrap {
  position: relative;
  background-color: var(--values-bg, #ffffff);
  background-image: var(--values-bg-image, none);
}

.preset-row button.is-active {
  background: #fff;
  border-color: #3d8a48;
  color: #1a1f1c;
  box-shadow: none;
  font-weight: 800;
}

.preset-row button[data-preset="vibe"].is-active {
  background: #fff;
  border-color: #3d8a48;
  color: #1a1f1c;
  box-shadow: none;
}

.wizard-top {
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.75rem;
  background: #e8e4dc;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.45rem;
}

.wizard-progress {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

.wizard-status {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: #555;
  min-height: 1.1em;
  text-align: center;
}

.wizard-foot {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin: 0;
  padding: 0.2rem 0.65rem 0.15rem;
  border-top: 0;
  background: transparent;
}

.wizard-foot #wizard-back,
.wizard-foot #wizard-next,
.wizard-foot #btn-zip {
  flex: 0 1 auto;
  min-width: 8.5rem;
}

body.wizard-mode .confirm-row {
  display: none;
}

body.wizard-mode .dash-block > summary {
  display: none;
}

html.js body:not(.wizard-mode):not(.mode-self):not(.mode-detail) .dash-pane .dash-block {
  display: none;
}

body.wizard-mode .dash-block {
  display: none;
}

body.wizard-mode .dash-block.is-wizard-active {
  display: block;
  /* ????????????????????????????????? */
  margin-top: 0;
}

.dash-sub {
  margin: 0.5rem 0 0.35rem;
  font-size: 0.82rem;
  color: #555;
}

.wizard-beat-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.wizard-beat-overlay[hidden] {
  display: none !important;
}

.wizard-beat-overlay.is-chapter {
  background: rgba(42, 62, 78, 0.52);
  backdrop-filter: blur(3px);
}

.wizard-beat-overlay.is-finish {
  background: rgba(58, 36, 32, 0.48);
  backdrop-filter: blur(3px);
}

.wizard-beat-card {
  width: min(100%, 22rem);
  padding: 1.35rem 1.15rem 1.15rem;
  border-radius: 0.65rem;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.22);
}

.wizard-beat-overlay.is-chapter .wizard-beat-card {
  background: linear-gradient(165deg, #eef5fb 0%, #dceaf5 100%);
  border: 2px solid #6a9ec4;
}

.wizard-beat-overlay.is-finish .wizard-beat-card {
  background: linear-gradient(165deg, #faf4f0 0%, #f0e4dc 100%);
  border: 2px solid #8b3a2a;
}

.beat-title {
  margin: 0 0 0.55rem;
  font-family: "Shippori Mincho", serif;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.45;
}

.beat-lead {
  margin: 0 0 0.45rem;
  font-size: 0.92rem;
  line-height: 1.55;
}

.beat-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #444;
}

.beat-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 1.1rem;
}

.beat-btn {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: 0.5rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.beat-btn-primary {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #6a9ec4;
  color: #fff;
}

.beat-btn-primary:hover {
  background: #5a8eb4;
}

.wizard-beat-overlay.is-finish .beat-btn-primary {
  background: #8b3a2a;
}

.wizard-beat-overlay.is-finish .beat-btn-primary:hover {
  background: #753125;
}

.beat-btn-secondary {
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.55);
  color: #333;
}

.beat-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.85);
}

.preview-site .zone-badge.is-chapter-locked {
  opacity: 0.38;
  pointer-events: none;
  filter: grayscale(0.65);
  cursor: not-allowed;
}

.dash-lead {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #444;
}

.resume-banner {
  margin: 0 0 0.5rem;
  padding: 0.45rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 700;
  background: #e8f2e6;
  border: 1px solid #3d8a48;
  border-radius: 4px;
  color: #1f3d18;
}

.contrast-warn {
  margin: 0.55rem 0 0;
  padding: 0.45rem 0.6rem;
  font-size: 0.78rem;
  background: #fff3cd;
  border: 1px solid #e0c36a;
  border-radius: 4px;
}

/* ?? ????? ?? */
.make-flow {
  margin: 0 0 1rem;
  padding: 0.75rem 0.85rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.make-flow-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-family: "Shippori Mincho", serif;
}

.flow-tap-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.flow-hint {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  color: #555;
}

.flow-finger {
  margin-left: 0.15rem;
  font-size: 0.65rem;
  line-height: 1;
  opacity: 0.85;
}

.preview-site .hero {
  position: relative;
}

.make-flow-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.make-flow-steps li[data-step] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  background: #ddd7ce;
  color: #666;
  border-radius: 999px;
  opacity: 0.72;
}

.make-flow-steps li.flow-arrow {
  padding: 0 0.15rem;
  background: transparent;
  color: #999;
  font-size: 0.85rem;
  font-weight: 700;
  opacity: 1;
  border-radius: 0;
}

.make-flow-steps li[data-step].is-done {
  background: #3d8a48;
  color: #fff;
  opacity: 1;
}

.make-flow-steps li[data-step].is-color-live {
  background: #6a9ec4;
  color: #fff;
  opacity: 1;
}

.flow-num {
  display: inline-grid;
  place-items: center;
  min-width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
  font-size: 0.68rem;
}

.make-flow-steps li[data-step].is-done .flow-num,
.make-flow-steps li[data-step].is-color-live .flow-num {
  background: rgba(255, 255, 255, 0.25);
}

.dash-block {
  margin: 0 0 0.75rem;
  padding: 0.35rem 0.75rem 0.85rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.dash-group {
  margin: 0 0 0.85rem;
  padding: 0.35rem 0.75rem 0.85rem;
  background: #f7f5f1;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
}

.dash-group > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.55rem 0;
  list-style: none;
}

.dash-group > summary::-webkit-details-marker {
  display: none;
}

.dash-group .dash-group {
  margin-left: 0;
  margin-bottom: 0.65rem;
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
}

.dash-group .dash-group > summary {
  font-size: 0.88rem;
  padding: 0.45rem 0;
}

.dash-group .dash-block {
  margin-left: 0;
  margin-bottom: 0.65rem;
  background: #fafafa;
  border-color: rgba(0, 0, 0, 0.08);
}

.dash-group .dash-block:last-child {
  margin-bottom: 0;
}

.dash-group .dash-group:last-child {
  margin-bottom: 0;
}

.dash-block.is-confirmed,
.dash-group .dash-block.is-confirmed {
  border-color: #3d8a48;
  box-shadow: inset 3px 0 0 #3d8a48;
}

.dash-block > summary,
.dash-group .dash-block > summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.55rem 0;
  font-size: 0.88rem;
}

.dash-block.is-active-step,
.dash-group .dash-block.is-active-step {
  outline: 2px solid #3d8a48;
  outline-offset: 1px;
}

.dash-note,
.hint-list,
.faq-mini {
  font-size: 0.82rem;
  line-height: 1.55;
  color: #444;
}

.dash-note.warn-note {
  padding: 0.5rem 0.65rem;
  background: #fff8e8;
  border: 1px solid #e0c36a;
  border-radius: 4px;
}

.dash-subhead {
  margin: 0.85rem 0 0.4rem;
  font-size: 0.88rem;
  font-weight: 700;
}

.hint-list,
.faq-mini {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}

.faq-mini {
  list-style: disc;
}

.preset-row,
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.preset-row button,
.btn-ghost-dash,
.count-row button,
.viewport-btn {
  font: inherit;
}

.preset-row button,
.btn-ghost-dash {
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: #f7f7f5;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.82rem;
}

.preset-row button:hover,
.btn-ghost-dash:hover {
  border-color: #3d8a48;
  background: #fff;
}

/* ?? ??? ?? */
.confirm-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.btn-confirm,
.btn-unconfirm {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.45rem 0.85rem;
  border-radius: 4px;
  cursor: pointer;
}

.btn-confirm {
  border: 0;
  background: #2d6a36;
  color: #fff;
}

.btn-confirm:hover {
  background: #245a2c;
}

.btn-unconfirm {
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: #fff;
  color: #333;
}

.confirm-status {
  margin: 0;
  font-size: 0.8rem;
  color: #555;
  flex: 1 1 8rem;
}

.dash-block.is-confirmed .confirm-status,
.dash-group .dash-block.is-confirmed .confirm-status {
  color: #2d6a36;
  font-weight: 700;
}

/* ?? ?????? ?? */
.color-field {
  margin: 0.75rem 0;
  padding-bottom: 0.65rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.color-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.color-simple {
  display: grid;
  gap: 0.45rem;
}

.swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.15rem;
}

.swatch {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  cursor: pointer;
  padding: 0;
  background: var(--sw, #ccc);
}

.swatch.is-active {
  outline: 2px solid #111;
  outline-offset: 2px;
}

.color-detail {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.35rem;
  padding: 0.65rem;
  background: #f0ebe3;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
}

.color-detail[hidden],
.color-simple[hidden] {
  display: none !important;
}

.detail-current {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.dock-label {
  font-size: 0.78rem;
  font-weight: 700;
}

.paint-board,
.mini-paint-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(1.2rem, 1fr));
  gap: 0.22rem;
  padding: 0.45rem;
  background: #f7f4ef;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  max-height: 7.5rem;
  overflow: auto;
}

.paint-chip {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
  padding: 0;
  background: var(--sw, #ccc);
}

.paint-chip.is-picked {
  outline: 2px solid #111;
  outline-offset: 1px;
}

.paint-pots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  margin: 0.15rem 0 1.15rem;
}

.paint-pot {
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0.28);
  cursor: pointer;
  background: var(--sw, #ccc);
  padding: 0;
}

.paint-pot span {
  position: absolute;
  left: 50%;
  bottom: -1.15rem;
  transform: translateX(-50%);
  font-size: 0.68rem;
  font-weight: 700;
  color: #222;
  white-space: nowrap;
}

.mix-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0.2rem 0;
}

.mix-swatch,
.current-paint {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: var(--sw, #ccc);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  flex: 0 0 auto;
}

.mix-caption {
  font-size: 0.75rem;
  color: #555;
}

.other-color {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
}

.inline-fieldset {
  margin: 0.75rem 0 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  font-size: 0.85rem;
}

.inline-fieldset legend {
  padding: 0 0.25rem;
  font-weight: 700;
}

.count-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.4rem;
  font-size: 0.85rem;
  margin: 0.5rem 0 0.25rem;
}

.count-row > span:first-of-type {
  flex: 0 1 auto;
  min-width: 4.5rem;
}

.count-row button {
  min-width: 2rem;
  padding: 0.25rem 0.45rem;
  font-weight: 700;
  cursor: pointer;
}

.count-row button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.stack-label {
  display: grid;
  gap: 0.25rem;
  margin: 0.5rem 0;
  font-size: 0.85rem;
}

.font-scroll {
  width: 100%;
  min-height: 9rem;
  font-size: 0.9rem;
}

.font-preview {
  margin: 0.35rem 0 0.5rem;
  padding: 0.55rem 0.7rem;
  background: #f7f7f5;
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 1.05rem;
}

.fill-form {
  display: grid;
  gap: 0.85rem;
}

.fill-block {
  margin: 0;
  padding: 0.75rem 0.85rem 0.95rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  display: grid;
  gap: 0.5rem;
  background: #fafafa;
}

.fill-block legend {
  font-weight: 700;
  padding: 0 0.25rem;
}

.fill-block label,
.dash-block > label {
  display: grid;
  gap: 0.2rem;
  font-size: 0.85rem;
}

.fill-block label[hidden],
.dash-block > label[hidden],
[data-contact-panel][hidden] {
  display: none !important;
}

.fill-block label.check,
.dash-block label:has(input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.fill-block input[type="text"],
.fill-block input[type="email"],
.fill-block input[type="url"],
.fill-block input[type="date"],
.fill-block textarea,
.stack-label input,
.stack-label select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.5rem;
  font: inherit;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.fill-actions {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.zip-status,
.zip-missing {
  min-height: 1.3em;
  margin: 0;
  font-size: 0.85rem;
}

.zip-missing {
  color: #8b3a2a;
  font-weight: 700;
}

.btn.btn-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 0.45rem;
  background: #2d6a36;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.btn.btn-primary:hover:not(:disabled) {
  background: #245a2c;
}

.btn.btn-zip:disabled,
.btn.btn-zip.is-disabled {
  background: #e8e6e2;
  color: #aaa;
  cursor: not-allowed;
  opacity: 0.85;
  box-shadow: none;
  filter: grayscale(0.4);
}



/* ?? dash header (grid: intro | title | actions) ?? */
.dash-header {
  flex: 0 0 auto;
  padding: 0.55rem 1rem 0.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: #efeae3;
}

.dash-header-row--top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.dash-header > .dash-header-row--top {
  margin: 0 0 0.45rem;
}

.dash-header-row--top .dash-title {
  justify-self: center;
  grid-column: 2;
  text-align: center;
  margin: 0;
  font-size: 0.98rem;
  font-family: "Shippori Mincho", serif;
}

.dash-header-row--top .preview-guide-btn {
  grid-column: 1;
  justify-self: start;
}

.dash-header-actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.dash-help-link {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a4d8c;
  text-decoration: none;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(26, 77, 140, 0.28);
  border-radius: 999px;
  background: #fff;
}

.dash-help-link:hover {
  background: transparent;
  text-decoration: underline;
}

.progress-toggle {
  margin: 0;
  padding: 0.2rem 0.65rem;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  background: #fff;
  color: #444;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}

.progress-toggle:hover {
  background: #f3f3f3;
  color: #222;
}

.dash-resume-notice {
  margin: 0.45rem 0 0;
  padding: 0.4rem 0.6rem;
  font-size: 0.78rem;
  line-height: 1.45;
  background: #fff8e8;
  border: 1px solid #e0c36a;
  border-radius: 4px;
  color: #5a4a20;
}

.wizard-head-dock {
  flex: 0 0 auto;
  padding: 0.45rem 1rem 0.5rem;
  background: #efeae3;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.wizard-head-dock .wizard-top[hidden] {
  display: none !important;
}

.dash-pane.is-progress-collapsed .wizard-head-dock {
  display: none;
}

.dash-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.after-color-guide {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 1.25rem 3rem 1.25rem;
  background: #fff;
}

.after-color-guide[hidden] {
  display: none;
}

.after-color-guide-inner {
  width: min(100%, 34rem);
}

.after-color-guide-title {
  margin: 0 0 3.25rem;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.45;
  color: #152028;
}

.after-color-guide-item {
  margin: 0 0 2.35rem;
}

.after-color-guide-item:last-child {
  margin-bottom: 0;
}

.after-color-guide-sub {
  margin: 0 0 0.55rem;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.5;
  color: #152028;
}

.after-color-guide-item p {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.9;
  color: #243038;
}

.after-color-guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 3.25rem;
}

.after-color-guide-actions .wizard-btn {
  flex: 0 0 auto;
  min-width: 8.5rem;
  border-radius: 999px;
}

.after-color-guide-actions .after-color-guide-next {
  background: #2d6a36;
  border-color: #245a2c;
  color: #fff;
  font-weight: 700;
}

.after-color-guide-actions .after-color-guide-next:hover {
  background: #245a2c;
  color: #fff;
}

body.is-after-color-guide #order-form,
body.is-after-color-guide .after-color-guide-actions {
  display: none !important;
}

.dash-body > .fill-form {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0.75rem 1rem 0.75rem;
}

/* ?? layout picker???? ? ?????????? ??? ?? */
.layout-picker-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
}

.layout-picker-row--step,
.layout-picker-row--menu {
  max-width: 40rem;
  margin: 0.5rem 0 0;
}

/* ???????????????????????????? */
.layout-picker-row--step .layout-card,
.layout-picker-row--menu .layout-card {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.35rem;
}

.layout-picker-row--step .layout-card-head,
.layout-picker-row--menu .layout-card-head {
  flex: 0 1 42%;
  min-width: 0;
}

.layout-picker-row--step .layout-card-wire,
.layout-picker-row--menu .layout-card-wire {
  flex: 1 1 58%;
  min-width: 0;
  align-self: flex-start;
}

/* ???????????????????????????? */
@container dash (min-width: 420px) {
  #purpose-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem 0.55rem;
    align-items: stretch;
  }

  #purpose-picker > legend,
  #purpose-picker > .mode-picker-lead,
  #purpose-picker > .purpose-entry-back-wrap {
    grid-column: 1 / -1;
  }

  #purpose-picker .mode-option {
    margin: 0;
    height: 100%;
  }

  .dash-block[data-step-id="guide"] .mode-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem 0.55rem;
  }

  .dash-block[data-step-id="guide"] .mode-picker > legend {
    grid-column: 1 / -1;
  }

  .dash-block[data-step-id="guide"] .mode-option {
    margin: 0;
  }
}

/* ?????????????? ???????? */
@container dash (min-width: 480px) {
  .layout-picker-row--step {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.55rem, 1.8vw, 1rem);
    max-width: none;
  }

  .layout-picker-row--step .layout-card {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .layout-picker-row--step .layout-card-head {
    flex: 0 0 auto;
    width: 100%;
  }

  .layout-picker-row--step .layout-card-wire {
    flex: 0 0 auto;
    width: 100%;
    align-self: stretch;
    justify-content: flex-start;
  }

  .preset-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .preset-row button {
    width: 100%;
    text-align: center;
  }

  .swatch-hues,
  .swatch-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(1.55rem, 1fr));
    gap: 0.35rem;
    max-width: 22rem;
  }
}

@container dash (min-width: 640px) {
  #purpose-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .preset-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .gct-palette {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .swatch-hues,
  .swatch-row {
    max-width: none;
  }
}

@container menu (min-width: 22rem) {
  .layout-picker-row--menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.45rem, 1.5vw, 0.85rem);
    max-width: none;
  }

  .layout-picker-row--menu .layout-card {
    flex-direction: column;
  }
}

.layout-card {
  flex: none;
  min-width: 0;
  margin: 0;
  padding: 0.4rem 0.5rem 0.45rem;
  border: 2px solid rgba(0, 0, 0, 0.14);
  border-radius: 0.75rem;
  background: #fff;
  color: #1a1a1a;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  justify-content: flex-start;
  align-items: stretch;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.layout-card:hover {
  border-color: #3d8a48;
  transform: none;
  background: #fff;
}

.layout-card.is-selected {
  border-color: #3d8a48;
  box-shadow: none;
  background: #fff;
}

.layout-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  min-height: 0;
  flex: 0 0 auto;
  line-height: 1.15;
}

.layout-card-id {
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.35rem;
  background: #f0f2f4;
  font-size: 0.82rem;
  font-weight: 800;
  color: #1a1f1c;
  line-height: 1;
}

.layout-card-titles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.layout-card-name {
  font-size: 0.92rem;
  font-weight: 800;
  color: #222;
  line-height: 1.15;
}

.layout-card-blurb {
  font-size: 0.7rem;
  font-weight: 600;
  color: #555;
  line-height: 1.2;
}

.layout-card.is-selected .layout-card-name {
  color: #1a5a90;
}

.layout-card.is-selected .layout-card-blurb {
  color: #3a6f9a;
}

.layout-card-wire {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  flex: 0 0 auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  justify-content: flex-start;
  margin-top: 0;
}

.layout-card-wire .lw {
  display: block;
  padding: 0.04rem 0.12rem;
  font-size: 0.48rem;
  font-weight: 700;
  line-height: 1.1;
  border: 1px solid #222;
  border-radius: 0.1rem;
  background: #fff;
  color: #222;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.layout-card-wire > .lw,
.layout-card-wire > .lw-L,
.layout-card-wire .lw-wide {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 0 0 auto;
}

.layout-card-wire .lw-h,
.layout-card-wire .lw-f {
  background: #111;
  color: #fff;
  border-color: #111;
}

.layout-card-wire .lw-img {
  background: #d8d8d8;
  color: #333;
  min-height: 0.7rem;
}

.layout-card-wire .lw-txt {
  background: #fff;
  color: #222;
  min-height: 0.55rem;
}

.layout-card-wire .lw-L {
  background: #fff;
  color: #222;
  min-height: 0.48rem;
}

.layout-card-wire .lw-H {
  background: #ececec;
  color: #222;
  min-height: 0.42rem;
}

/* ???????????????????????? */
.layout-card-wire .lw-spacer {
  background: transparent;
  border-style: dashed;
  border-color: rgba(0, 0, 0, 0.12);
  color: transparent;
  pointer-events: none;
}

.layout-card-wire .lw-ghost {
  opacity: 0.45;
}

.layout-card-wire .lw-row {
  display: flex;
  gap: 0.12rem;
}

.layout-card-wire .lw-row .lw {
  flex: 1;
  min-width: 0;
}

/* ????????????????????????????????????
   ? .is-item-layout-manual ????????????????? */
.preview-site #about-photos.skill-cards,
.preview-site #works-list.work-list,
.preview-site #hero-values.hero-value-list,
.preview-site #about-accordions.accordion-list,
.preview-site .value-list {
  display: grid;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0.75rem;
  align-items: stretch;
}

.preview-site #about-photos.skill-cards[data-item-gap="tight"],
.preview-site #works-list.work-list[data-item-gap="tight"] {
  gap: 0.35rem;
}
.preview-site #about-photos.skill-cards[data-item-gap="normal"],
.preview-site #works-list.work-list[data-item-gap="normal"] {
  gap: 0.75rem;
}
.preview-site #about-photos.skill-cards[data-item-gap="loose"],
.preview-site #works-list.work-list[data-item-gap="loose"] {
  gap: 1.35rem;
}

.preview-site #about-photos.skill-cards.is-item-layout-manual,
.preview-site #works-list.work-list.is-item-layout-manual {
  grid-template-columns: repeat(var(--item-layout-cols, 2), minmax(0, 1fr));
}
/* ??????????????5%??????? */
.preview-site #about-photos > [data-sample-item],
.preview-site #works-list > [data-sample-item],
.preview-site .hero-stage {
  position: relative;
}
.preview-site .item-focal-nudge {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  padding: 0.28rem 0.22rem;
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(20, 28, 36, 0.16);
  box-shadow: 0 4px 14px rgba(20, 28, 36, 0.12);
  pointer-events: auto;
}
.preview-site .item-focal-nudge--hero {
  top: auto;
  bottom: 0.7rem;
  right: 0.7rem;
  transform: none;
}
.preview-site .item-focal-mid {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.15rem;
}
.preview-site .item-focal-btn {
  appearance: none;
  margin: 0;
  min-width: 1.7rem;
  min-height: 1.7rem;
  padding: 0;
  border: 1px solid rgba(20, 28, 36, 0.18);
  border-radius: 0.35rem;
  background: #fff;
  color: #1a1f24;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.preview-site .item-focal-btn:hover:not(:disabled) {
  border-color: #2f6b4f;
  color: #2f6b4f;
}
.preview-site .item-focal-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.preview-site .item-focal-label {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: #445;
  line-height: 1.2;
  min-width: 1.6rem;
  text-align: center;
  user-select: none;
  pointer-events: none;
}
html.is-capture-mode .item-focal-nudge,
body.sample-flow-hide-preview .item-focal-nudge {
  display: none !important;
}
/* ????????????????? */
body.atelier:not(.mode-detail) .item-focal-nudge {
  display: none !important;
}

/* A????: ?????????????????????????????? */
#preview-root[data-layout="a"] #hero-values.hero-value-list,
#preview-root[data-layout="a"] #works-list.work-list:not(.is-item-layout-manual) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}
#preview-root[data-layout="a"] #about-photos.skill-cards.is-item-layout-manual,
#preview-root[data-layout="a"] #works-list.work-list.is-item-layout-manual {
  grid-template-columns: repeat(var(--item-layout-cols, 2), minmax(0, 1fr));
}

.preview-site #about-photos.skill-cards > *,
.preview-site #works-list.work-list > *,
.preview-site #hero-values.hero-value-list > *,
.preview-site #about-accordions.accordion-list > *,
.preview-site .value-list > * {
  min-width: 0;
  max-width: 100%;
  align-self: stretch;
  height: auto;
}

/* ?????????????????????????????? */
.preview-site #hero-values.hero-value-list > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  box-sizing: border-box;
  padding: 0.7rem 0.8rem 0.85rem;
  border: 1px solid rgba(20, 28, 36, 0.12);
  border-radius: var(--radius, 0.55rem);
  background: color-mix(in srgb, var(--card-bg, #fff) 92%, transparent);
}

.preview-site #hero-values.hero-value-list > li .hero-value-title {
  flex: 0 0 auto;
  width: 100%;
}

.preview-site #hero-values.hero-value-list > li > p:last-child {
  flex: 0 1 auto;
  width: 100%;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

.preview-site #works-list.work-list > .work-item,
.preview-site #works-list.work-list > li {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.preview-site #works-list.work-list .work-item a,
.preview-site #works-list.work-list .work-item-pending,
.preview-site #works-list.work-list .work-item-static {
  flex: 1 1 auto;
  height: auto;
  min-height: 100%;
}

.preview-site #works-list.work-list .work-item-body {
  justify-content: flex-start;
}

.preview-site #works-list.work-list .work-item-copy {
  flex: 0 1 auto;
}

.preview-site #works-list.work-list .work-item-copy p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.preview-site .value-list > li {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: stretch;
  box-sizing: border-box;
}

/* ??????????????????? */
.preview-site #hero-values li + li {
  border-left: 0;
}
@supports (width: 1cqw) {
  .preview-site #hero-values {
    container-type: inline-size;
  }
}

/* B: ??????????1???????? */
#preview-root[data-layout="b"] #hero-values,
#preview-root[data-layout="b"] #about-photos,
#preview-root[data-layout="b"] #about-accordions,
#preview-root[data-layout="b"] #works .work-list,
#preview-root[data-layout="b"] #about-photos-block .skill-cards,
#preview-root[data-layout="c"] [data-layout-size="S"] #hero-values,
#preview-root[data-layout="c"] [data-layout-size="S"] #about-photos,
#preview-root[data-layout="c"] [data-layout-size="S"] #about-accordions,
#preview-root[data-layout="c"] [data-layout-size="S"] .work-list,
#preview-root[data-layout="c"] [data-layout-size="S"] .skill-cards {
  grid-template-columns: minmax(0, 1fr);
}
#preview-root[data-layout="b"] #about-photos.is-item-layout-manual,
#preview-root[data-layout="b"] #about-photos-block .skill-cards.is-item-layout-manual,
#preview-root[data-layout="b"] #works .work-list.is-item-layout-manual,
#preview-root[data-layout="b"] #works-list.work-list.is-item-layout-manual,
#preview-root[data-layout="c"] [data-layout-size="H"] #about-photos.is-item-layout-manual,
#preview-root[data-layout="c"] [data-layout-size="H"] .skill-cards.is-item-layout-manual,
#preview-root[data-layout="c"] [data-layout-size="H"] .work-list.is-item-layout-manual,
#preview-root[data-layout="c"] [data-layout-size="S"] #about-photos.is-item-layout-manual,
#preview-root[data-layout="c"] [data-layout-size="S"] .skill-cards.is-item-layout-manual,
#preview-root[data-layout="c"] [data-layout-size="S"] .work-list.is-item-layout-manual {
  /* ??: ????2?--item-layout-cols ? JS/????2?????? */
  grid-template-columns: repeat(var(--item-layout-cols, 1), minmax(0, 1fr));
}

/* ?? preview layouts: A?? / B???? / C?? ?? */
#preview-root[data-layout] main {
  display: flex;
  flex-direction: column;
}

/* A: ?????????????????? shell ??????????????? */
#preview-root[data-layout="a"] [data-layout-block] {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
#preview-root[data-layout="a"] #hero .hero-stage {
  border-radius: var(--radius, 0.6rem);
}
#preview-root[data-layout="a"] #about-photos.skill-cards,
#preview-root[data-layout="a"] #about-photos-block .skill-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  max-width: 100%;
}
#preview-root[data-layout="a"] #about-photos.skill-cards[data-item-gap="tight"],
#preview-root[data-layout="a"] #about-photos-block .skill-cards[data-item-gap="tight"],
#preview-root[data-layout="a"] #works-list.work-list[data-item-gap="tight"] {
  gap: 0.35rem;
}
#preview-root[data-layout="a"] #about-photos.skill-cards[data-item-gap="loose"],
#preview-root[data-layout="a"] #about-photos-block .skill-cards[data-item-gap="loose"],
#preview-root[data-layout="a"] #works-list.work-list[data-item-gap="loose"] {
  gap: 1.35rem;
}
#preview-root[data-layout="a"] #about-photos.skill-cards.is-item-layout-manual,
#preview-root[data-layout="a"] #about-photos-block .skill-cards.is-item-layout-manual,
#preview-root[data-layout="a"] #works-list.work-list.is-item-layout-manual,
#preview-root[data-layout="a"] #works .work-list.is-item-layout-manual {
  display: grid;
  flex-direction: unset;
  grid-template-columns: repeat(var(--item-layout-cols, 2), minmax(0, 1fr));
  align-items: stretch;
}
#preview-root[data-layout="a"] #about-photos.skill-cards.is-item-layout-manual > [data-sample-item][data-item-size="L"],
#preview-root[data-layout="a"] #about-photos-block .skill-cards.is-item-layout-manual > [data-sample-item][data-item-size="L"],
#preview-root[data-layout="a"] #works-list.work-list.is-item-layout-manual > [data-sample-item][data-item-size="L"],
#preview-root[data-layout="a"] #works .work-list.is-item-layout-manual > [data-sample-item][data-item-size="L"] {
  grid-column: 1 / span 2;
}
#preview-root[data-layout="a"] #about-photos.skill-cards.is-item-layout-manual .skill-card,
#preview-root[data-layout="a"] #about-photos-block .skill-cards.is-item-layout-manual .skill-card {
  width: auto;
}
#preview-root[data-layout="a"] #about-photos .skill-card,
#preview-root[data-layout="a"] #about-photos-block .skill-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: auto;
  height: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
}
#preview-root[data-layout="a"] #about-photos .skill-card-img,
#preview-root[data-layout="a"] #about-photos-block .skill-card-img {
  width: 100%;
  max-width: 100%;
  height: 200px;
  max-height: none;
  object-fit: cover;
}
/* A???????????????? auto-fit??????????? */
#preview-root[data-layout="a"] #works .work-list,
#preview-root[data-layout="a"] #works-list.work-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 1rem;
  min-width: 0;
  max-width: 100%;
  align-items: stretch;
}
#preview-root[data-layout="a"] #works .work-thumb {
  width: 100%;
  max-width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center top;
}
#preview-root[data-layout="a"] #hero-values,
#preview-root[data-layout="a"] #hero-values.hero-value-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-items: stretch;
}
#preview-root[data-layout="a"] #about-accordions {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* B: ???? ? stretch ??????????????? */
#preview-root[data-layout="b"] main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense;
  align-items: stretch;
  gap: 0.25rem 0.45rem;
}
#preview-root[data-layout="b"] [data-layout-block] {
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
}
#preview-root[data-layout="b"] #works .work-list {
  grid-template-columns: 1fr;
}
#preview-root[data-layout="b"] #about-photos.skill-cards,
#preview-root[data-layout="b"] #about-photos-block .skill-cards {
  grid-template-columns: 1fr;
}

/* B/C: ??????????????????????????????? */
#preview-root[data-layout="b"] #about-photos .skill-card-img,
#preview-root[data-layout="b"] #about-photos-block .skill-card-img,
#preview-root[data-layout="c"] #about-photos .skill-card-img,
#preview-root[data-layout="c"] #about-photos-block .skill-card-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 200px;
  object-fit: cover;
}
#preview-root[data-layout="b"] #works .work-thumb,
#preview-root[data-layout="b"] #works-list .work-thumb,
#preview-root[data-layout="c"] #works .work-thumb,
#preview-root[data-layout="c"] #works-list .work-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 180px;
  object-fit: cover;
  object-position: center top;
}
#preview-root[data-layout="b"] #hero .hero-stage {
  aspect-ratio: 4 / 3;
  min-height: 12rem;
  max-height: 22rem;
  overflow: hidden;
}
#preview-root[data-layout="b"] #hero .hero-stage .hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* C: ?? ? ????? stretch */
#preview-root[data-layout="c"] main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense;
  align-items: stretch;
  gap: 0.22rem 0.45rem;
}
#preview-root[data-layout="c"] [data-layout-block]:not([data-layout-size="L"]) {
  height: 100%;
  box-sizing: border-box;
}
#preview-root[data-layout="c"] [data-layout-size="L"] {
  grid-column: 1 / -1;
}
#preview-root[data-layout="c"] #works .work-list {
  grid-template-columns: 1fr;
}

/* ??: ?????????????????? */
#preview-root [data-layout-block="hours"],
#preview-root [data-layout-block="access"],
#preview-root [data-layout-block="address"] {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  margin-top: 0;
  margin-bottom: 0;
}
#preview-root[data-layout="a"] [data-layout-block="hours"],
#preview-root[data-layout="a"] [data-layout-block="access"],
#preview-root[data-layout="a"] [data-layout-block="address"] {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
#preview-root [data-layout-block="values"] {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
#preview-root[data-layout="b"] [data-layout-block].contact-band,
#preview-root[data-layout="c"] [data-layout-block].contact-band {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#preview-root [data-layout-block] {
  position: relative;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
/* L????? .shell ????????????100%??????????????? */
#preview-root [data-layout-block="values"] {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
#preview-root [data-layout-block="values"] .hero-values-wrap {
  position: relative;
}

@media (max-width: 39.99rem) {
  #preview-root[data-layout="b"] main,
  #preview-root[data-layout="c"] main {
    grid-template-columns: 1fr;
  }
  #preview-root[data-layout="c"] [data-layout-size="L"] {
    grid-column: auto;
  }
}

/* ??????????????????????1?? */
.preview-viewport.is-phone #preview-root[data-layout="b"] main,
.preview-viewport.is-phone #preview-root[data-layout="c"] main,
.preview-viewport.is-mobile #preview-root[data-layout="b"] main,
.preview-viewport.is-mobile #preview-root[data-layout="c"] main {
  grid-template-columns: 1fr;
}
.preview-viewport.is-phone #preview-root[data-layout="c"] [data-layout-size="L"],
.preview-viewport.is-mobile #preview-root[data-layout="c"] [data-layout-size="L"] {
  grid-column: auto;
}

/* ??????????? */
.layout-arrange {
  margin-top: 0.85rem;
  padding: 0.7rem 0.75rem 0.8rem;
  border: 1px solid rgba(20, 28, 36, 0.12);
  border-radius: 0.7rem;
  background: #f7f8f7;
}
.layout-arrange--expanded {
  margin-top: 1rem;
  padding: 0.9rem 0.85rem 1rem;
  border-width: 2px;
  background: #f3f6f4;
}
.layout-arrange-lead {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a1f1c;
}
.layout-arrange-wire {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.layout-arrange-wire--wide {
  display: flex;
  flex-direction: column;
}
.layout-arrange-cell {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(20, 28, 36, 0.16);
  border-radius: 0.55rem;
  background: #fff;
  padding: 0.35rem 0.45rem;
  min-height: 2.65rem;
  height: auto;
  font: inherit;
  cursor: default;
  text-align: left;
  touch-action: manipulation;
}
.layout-arrange--expanded .layout-arrange-cell {
  min-height: 2.75rem;
  height: auto;
  padding: 0.35rem 0.5rem;
}
.layout-arrange-cell.size-L {
  min-height: 2.75rem;
  height: auto;
}
.layout-arrange-cell.is-dragging {
  opacity: 0.35;
  cursor: grabbing;
  border-color: #3d8a48; /* ????????????????? */
  background: #fff;
  box-shadow: none;
}
/* ???????????????????????????????? */
.layout-arrange-cell.is-selected {
  border-color: rgba(20, 28, 36, 0.22);
  background: #fff;
  box-shadow: none;
}
.layout-arrange-cell.is-drop-target {
  border-color: #3d8a48;
  background: #fff;
  box-shadow: 0 0 0 1px #3d8a48; /* ????????????? */
}
.layout-arrange-ghost {
  position: fixed;
  z-index: 1200;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  padding: 0.45rem 0.65rem;
  border: 1px solid #3d8a48;
  border-radius: 0.45rem;
  background: #fff;
  box-shadow: 0 6px 18px rgba(20, 28, 36, 0.12);
  color: #1a1f1c;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
  pointer-events: none;
  opacity: 0.92;
  box-sizing: border-box;
}
.layout-arrange-ghost[hidden] {
  display: none !important;
}
.layout-arrange-ghost-name {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layout-arrange-cell.is-drop-deny {
  opacity: 0.4;
}
.layout-arrange-handle {
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 1.55rem;
  border: 1px solid rgba(20, 28, 36, 0.12);
  border-radius: 0.35rem;
  background: #f4f5f4;
  color: #5a635c;
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: -0.08em;
  cursor: grab;
  padding: 0.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.layout-arrange-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
}
.layout-arrange-name {
  flex: 0 1 5.2rem;
  align-self: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  color: #1a1f1c;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 6.5rem;
}
.layout-arrange-links {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  flex: 0 0 auto;
}
.layout-link {
  border: 1px solid rgba(20, 28, 36, 0.16);
  border-radius: 0.35rem;
  padding: 0.18rem 0.4rem;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
}
.layout-link--color {
  background: #eef6fc;
  border-color: #2f7fbf;
  color: #1a4d7a;
}
.layout-link--text {
  background: #fff8e8;
  border-color: #c9a227;
  color: #6a4f00;
}
.layout-link--image {
  background: #f0f4f0;
  border-color: #5a7a5a;
  color: #2d4a2d;
}
.layout-arrange-counts {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  width: auto;
  margin-left: auto;
  min-width: 0;
}
.layout-arrange-counts--split {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  gap: 0.35rem;
}
.layout-count-sep {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  color: #6a7380;
  letter-spacing: 0;
  flex: 0 0 auto;
}
.layout-count-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: nowrap;
  flex: 0 0 auto;
}
.layout-count-axis {
  min-width: 0;
  font-size: 0.68rem;
  font-weight: 800;
  color: #2a333a;
  white-space: nowrap;
}
.layout-count-btn {
  min-width: 1.55rem;
  min-height: 1.55rem;
  border: 1px solid rgba(20, 28, 36, 0.18);
  border-radius: 999px;
  background: #f7f8f7;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}
.layout-count-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.layout-extras-toggles {
  margin: 0.65rem 0 0.15rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 0.45rem;
  background: #ffffff;
}

.layout-extras-lead {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: 800;
  color: #111;
}

.layout-extras-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
}

.layout-extras-check {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1a1f1c;
  cursor: pointer;
}

.layout-arrange-hint {
  margin: 0.35rem 0 0.65rem;
  font-size: 0.8rem;
  color: #2a343c;
  line-height: 1.45;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem 0.35rem;
}
.layout-arrange-hint[hidden] {
  display: none !important;
}
.layout-arrange-hint.is-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  bottom: auto;
  z-index: 80;
  transform: translate(-50%, -50%);
  max-width: min(22rem, calc(100vw - 1.5rem));
  margin: 0;
  padding: 0.55rem 0.9rem;
  border-radius: 0.55rem;
  background: rgba(24, 32, 28, 0.92);
  color: #f5f7f4;
  box-shadow: 0 8px 22px rgba(20, 28, 36, 0.22);
  pointer-events: none;
}
.layout-arrange-gap {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  color: #b42318;
}
.layout-extras-note {
  margin: 0.15rem 0 0.45rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #2a343c;
}
.layout-arrange-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.15rem;
  margin-top: 1rem;
  max-width: 18rem;
}
.layout-arrange-done-btn {
  order: 0;
}
.layout-arrange-reset-btn {
  order: 1;
  margin-top: 0.35rem;
  opacity: 0.92;
}

.hub-step-actions {
  display: none !important;
}

.step-font-row {
  margin: 0.15rem 0 0.55rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}
.step-font-lead {
  flex: 1 1 12rem;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  font-weight: 700;
  color: #1a1f1c;
}

.step-font-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(20, 28, 36, 0.16);
  border-radius: 0.4rem;
  background: #fff;
  color: #123;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
}
.step-font-btn:hover {
  border-color: #3d8a48;
  background: #fff;
}

body.is-item-grow-open {
  overflow: hidden;
}
body.is-item-grow-open .item-grow-popover:not([hidden]) {
  display: block;
}

#preview-guide-btn[hidden] {
  display: none !important;
}

/* ?????????????????????????????????? */
.preview-site .hero-mock-notice {
  display: none !important;
}

.preview-site .hero-mock-notice-title {
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: calc(clamp(1.85rem, 6.5vw, 3rem) * var(--heading-scale, 1));
  font-weight: 700;
  letter-spacing: 0.1em;
  padding-inline-start: 0.1em;
  line-height: 1.2;
  color: #fff;
}

/* ????????????????????????????? */
.preview-site .hero-stage .hero-copy {
  visibility: hidden;
}

.preview-site .hero-stage.is-hero-text-on .hero-copy {
  visibility: visible !important;
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0.85rem;
  overflow: hidden;
  align-self: stretch;
  box-sizing: border-box;
}

.preview-site .hero-stage.is-hero-text-off .hero-copy {
  visibility: hidden !important;
  pointer-events: none;
}

.preview-site .hero-box:has(.hero-stage.is-hero-image-off) {
  background: transparent;
  border-color: transparent;
}
.preview-site .hero-stage.is-hero-image-off {
  background: transparent;
}
.preview-site .hero-stage.is-hero-image-off .hero-photo,
.preview-site .hero-stage.is-hero-image-off .hero-mock-notice {
  display: none !important;
}

/* recovered: x_L9048_2.css */
.preview-site .preview-nav-static,
.preview-site .preview-nav-hint {
  display: none;
  gap: 1rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.35;
  margin: 0;
  max-width: 15rem;
  text-align: right;
  opacity: 0.78;
  cursor: inherit;
  text-decoration: none;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.preview-site .preview-nav-hint {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.12rem;
}

.preview-site .preview-nav-hint .nav-hint-main,
.preview-site .logo-hint-main {
  display: block;
  font-weight: 600;
}

.preview-site .preview-nav-hint .nav-hint-sub,
.preview-site .logo-hint-sub {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.85;
  line-height: 1.3;
}

.preview-site .preview-nav-static span {
  pointer-events: none;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  opacity: 0.9;
}

.preview-site .logo.is-hint {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.35;
  opacity: 0.82;
  max-width: 12.5rem;
}

@media (min-width: 60rem) {
  .preview-viewport.is-desktop .preview-nav-static:not([hidden]),
  .preview-viewport.is-desktop .preview-nav-hint:not([hidden]) {
    display: flex;
    position: static;
    background: transparent;
    border: 0;
    padding: 0;
  }

  .preview-viewport.is-desktop .preview-nav-hint:not([hidden]) {
    display: flex;
    flex-direction: column;
  }
}

/* recovered: x_L9542_1.css */
.wizard-progress-bar {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin: 0 0 0.45rem;
  padding: 0;
  list-style: none;
}

.wizard-progress-bar.is-chapter-rows {
  flex-wrap: nowrap;
}

.wizard-progress-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.wizard-progress-row-label {
  flex: 0 0 1.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #555;
  line-height: 1.2;
}

.wizard-progress-row[data-chapter="color"] .wizard-progress-row-label {
  color: #3a5a72;
}

.wizard-progress-row[data-chapter="image"] .wizard-progress-row-label {
  color: #7a5a28;
}

.wizard-progress-row[data-chapter="text"] .wizard-progress-row-label {
  color: #7a4038;
}

.wizard-progress-row-segs {
  display: flex;
  flex: 1 1 auto;
  gap: 0.15rem;
  min-width: 0;
}

.wizard-progress-bar-segment {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
}

.wizard-progress-bar-segment.is-intro {
  flex: 0 0 1.55rem;
}

.wizard-progress-bar-segment.is-chapter-gap {
  flex: 0 0 0.35rem;
  min-width: 0.35rem;
}

.wizard-progress-seg {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 1.65rem;
  padding: 0.1rem 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.25rem;
  background: #dceaf5;
  color: #3a5a72;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.wizard-progress-seg.is-intro:not(.is-done) {
  background: #fff;
  border-style: dashed;
  color: #555;
}

.wizard-progress-seg.is-kind-image:not(.is-done) {
  background: #f0e6d4;
  color: #7a5a28;
}

.wizard-progress-seg.is-kind-image.is-intro:not(.is-done) {
  background: #fff;
  color: #7a5a28;
}

.wizard-progress-seg.is-kind-text:not(.is-done) {
  background: #f0e0dc;
  color: #7a4038;
}

.wizard-progress-seg.is-kind-text.is-intro:not(.is-done) {
  background: #fff;
  color: #7a4038;
}

/* recovered: x_L8850_2.css */
.wizard-top {
  margin: 0;
  padding: 0.5rem 0.6rem 0.45rem;
  background: #e8e4dc;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.45rem;
}

.wizard-progress-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.15rem;
  margin: 0 0 0.45rem;
  padding: 0;
  list-style: none;
}

.wizard-progress-bar-segment {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
}

.wizard-progress-bar-segment.is-chapter-gap {
  flex: 0 0 0.35rem;
  min-width: 0.35rem;
}

.wizard-progress-seg {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 1.65rem;
  padding: 0.1rem 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.25rem;
  background: #dceaf5;
  color: #3a5a72;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.wizard-progress-seg.is-kind-text:not(.is-done) {
  background: #f0e0dc;
  color: #7a4038;
}

.wizard-progress-seg.is-done {
  background: #3d8a48;
  border-color: #2f6e38;
  color: #fff;
}

.wizard-progress-seg.is-current {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #3d8a48;
}

.wizard-progress-seg.is-done.is-current {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #3d8a48;
}

.wizard-progress-seg.is-locked,
.wizard-progress-seg:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  filter: grayscale(0.35);
}

.wizard-progress-seg.is-zip-target {
  animation: progress-zip-pulse 1.1s ease-in-out infinite;
}

@keyframes progress-zip-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #6a9ec4; }
  50% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3d8a48; }
}

.wizard-progress {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

.wizard-coach {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #444;
  text-align: center;
  min-height: 1.1em;
}

.wizard-status {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: #555;
  min-height: 0;
  text-align: center;
}

.wizard-status:not(:empty) {
  min-height: 1.1em;
}

.wizard-next-hint {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  color: #666;
  text-align: center;
  min-height: 0;
}

.wizard-next-hint:not(:empty) {
  min-height: 1em;
}

.finish-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  margin: 0.85rem 0 0.65rem;
}

.finish-submit-row .btn-primary {
  flex: 1 1 auto;
  min-width: 10rem;
}

.fill-actions-zip {
  margin-top: 0.35rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.scope-checks-lead {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #444;
}

.dash-note-sm {
  font-size: 0.78rem;
}

.external-links a {
  white-space: nowrap;
}

/* recovered: x_L10080_1.css */
.preview-site .work-item-link:not(.is-no-link):hover .work-link {
  text-decoration: none;
}

/* ?? ???????UI?Coolors?????????? ?? */
.guided-color-trial {
  margin-top: 1rem;
  padding: 1rem 0.85rem 1.1rem;
  border-radius: 0.75rem;
  background: linear-gradient(165deg, #faf8f4 0%, #f0ebe3 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.gct-lead {
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #333;
}

.gct-palette {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 1rem;
}

@media (min-width: 520px) {
  .gct-palette {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.gct-palette-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  padding: 0.35rem;
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.gct-palette-num {
  font-size: 0.68rem;
  font-weight: 700;
  color: #555;
}

.gct-palette-swatch {
  display: block;
  width: 100%;
  height: 2.1rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.gct-palette-name {
  font-size: 0.65rem;
  line-height: 1.25;
  color: #666;
}

.gct-fork {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

@media (min-width: 480px) {
  .gct-fork {
    flex-direction: row;
  }

  .gct-fork .gct-btn {
    flex: 1;
  }
}

.gct-slot-label {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: "Shippori Mincho", serif;
  line-height: 1.35;
}

.gct-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.gct-compare-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 0.4rem 0.75rem;
  border-radius: 0.65rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.gct-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #777;
}

.gct-swatch {
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.55rem;
  cursor: pointer;
  padding: 0;
  background: #ccc;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.gct-swatch-lg {
  width: min(100%, 7.5rem);
  height: 4.5rem;
}

.gct-swatch:focus-visible {
  outline: 2px solid #3d6ea8;
  outline-offset: 2px;
}

.gct-hex {
  font-size: 0.72rem;
  font-family: ui-monospace, monospace;
  color: #555;
  word-break: break-all;
  text-align: center;
}

.gct-prev-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0.45rem 0.55rem;
  border-radius: 0.5rem;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.55);
  font-size: 0.82rem;
  color: #444;
  cursor: pointer;
  text-align: left;
}

.gct-prev-swatch {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.gct-locked-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.gct-locked-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.45rem 0.25rem 0.3rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  font-size: 0.72rem;
  color: #555;
  cursor: default;
}

.gct-locked-chip.is-done {
  border-color: #3d8a48;
  background: #fff;
  color: #2f6e38;
  cursor: pointer;
}

.gct-locked-chip.is-current {
  border-color: #3d8a48;
  box-shadow: none;
  background: #fff;
  font-weight: 700;
}

.gct-locked-chip:disabled:not(.is-current) {
  opacity: 0.45;
}

.gct-locked-swatch {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.gct-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.gct-btn {
  min-height: 2.85rem;
  padding: 0.45rem 0.5rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  color: #222;
  cursor: pointer;
}

.gct-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.gct-btn-primary {
  background: #3d6ea8;
  border-color: #355f92;
  color: #fff;
}

.gct-btn-primary:hover:not(:disabled) {
  background: #355f92;
}

.gct-btn-ghost {
  width: 100%;
  margin-top: 0.35rem;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 500;
  color: #555;
}

.gct-hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #666;
}

body.gct-preset-phase.mode-guided .gct-legacy-random {
  display: none;
}

body.gct-tune-phase.mode-guided .dash-block.is-wizard-active .color-field,
body.gct-tune-phase.mode-guided .dash-block.is-wizard-active .inline-fieldset {
  display: none !important;
}

body.gct-tune-phase.mode-guided .dash-block.is-wizard-active .step-help {
  display: none;
}

body.gct-preset-phase.mode-guided .dash-block.is-wizard-active .step-help {
  margin-bottom: 0.25rem;
}

/* recovered: x_L10111_1.css */
.gct-slot-label {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: "Shippori Mincho", serif;
  line-height: 1.35;
}

.gct-hint {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #666;
}

.gct-compare {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.gct-compare-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 0.4rem 0.75rem;
  border-radius: 0.65rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.gct-compare-col-active {
  border-color: #3d6ea8;
  box-shadow: 0 0 0 2px rgba(61, 110, 168, 0.18);
}

.gct-compare-col.is-empty {
  opacity: 0.45;
}

.gct-compare-col.is-empty .gct-swatch {
  border-style: dashed;
  background: repeating-linear-gradient(
    -45deg,
    #f0ece6,
    #f0ece6 6px,
    #e4dfd6 6px,
    #e4dfd6 12px
  ) !important;
  box-shadow: none;
  cursor: default;
}

.gct-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #777;
}

.gct-compare-col-active .gct-tag {
  color: #3d6ea8;
}

.gct-swatch {
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.55rem;
  cursor: pointer;
  padding: 0;
  background: #ccc;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.gct-swatch-lg {
  width: min(100%, 7.5rem);
  height: 4.5rem;
}

#gct-try-swatch {
  cursor: default;
}

.gct-swatch:focus-visible {
  outline: 2px solid #3d6ea8;
  outline-offset: 2px;
}

.gct-hex {
  font-size: 0.72rem;
  font-family: ui-monospace, monospace;
  color: #555;
  word-break: break-all;
  text-align: center;
}

.gct-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.gct-btn {
  min-height: 2.85rem;
  padding: 0.45rem 0.5rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  color: #222;
  cursor: pointer;
}

.gct-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.gct-btn-primary {
  background: #3d6ea8;
  border-color: #355f92;
  color: #fff;
}

.gct-btn-primary:hover:not(:disabled) {
  background: #355f92;
}

.gct-btn-ghost {
  width: 100%;
  margin-top: 0.35rem;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 500;
  color: #555;
}

.gct-pick-host {
  margin-bottom: 0.75rem;
}

.gct-pick-host .swatch-hues {
  margin-bottom: 0.65rem;
}

body.gct-preset-phase.mode-guided .gct-legacy-random {
  display: none;
}

body.gct-tune-phase.mode-guided .dash-block.is-wizard-active .color-field,
body.gct-tune-phase.mode-guided .dash-block.is-wizard-active .inline-fieldset,
body.gct-pick-phase.mode-guided .dash-block.is-wizard-active .color-field,
body.gct-pick-phase.mode-guided .dash-block.is-wizard-active .inline-fieldset,
body.gct-pick-phase.mode-detail .dash-block.is-active-step .color-field,
body.gct-pick-phase.mode-detail .dash-block.is-active-step .inline-fieldset,
body.gct-pick-phase.mode-self .dash-block.is-active-step .color-field,
body.gct-pick-phase.mode-self .dash-block.is-active-step .inline-fieldset {
  display: none !important;
}

body.gct-tune-phase.mode-guided .dash-block.is-wizard-active .step-help,
body.gct-pick-phase.mode-guided .dash-block.is-wizard-active .step-help {
  display: none;
}

body.gct-preset-phase.mode-guided .dash-block.is-wizard-active .step-help {
  margin-bottom: 0.25rem;
}

/* recovered: x_L10342_1.css */
.font-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}
@container dash (max-width: 32rem) {
  .font-card-grid {
    grid-template-columns: 1fr;
  }
}

.font-card {
  display: block;
  margin: 0;
  padding: 0.4rem 0.35rem;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 6px;
  background: #f7f7f5;
  color: #222;
  text-align: center;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: none;
  min-height: 2.4rem;
}

.font-card:hover {
  border-color: #3d8a48;
  background: #fff;
}

.font-card.is-selected {
  border-color: #3d8a48;
  background: #fff;
  box-shadow: none;
}

/* recovered: x_L9501_1.css */
.fill-block label,
.dash-block > label {
  display: grid;
  gap: 0.2rem;
  font-size: 0.85rem;
}
.fill-block label[hidden],
.dash-block > label[hidden],
[data-contact-panel][hidden] {
  display: none !important;
}

.char-count {
  display: block;
  margin-top: 0.05rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #666;
  font-variant-numeric: tabular-nums;
}

.char-count.is-max {
  color: #1a4d8c;
}

/* ?? extra recovered / gap-fill ?? */
.wizard-progress-seg.is-done {
  background: #3d8a48;
  border-color: #2f6e38;
  color: #fff;
}

.wizard-progress-seg.is-current {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #3d8a48;
}

.wizard-progress-seg.is-done.is-current {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #3d8a48;
}

.wizard-progress-seg.is-locked,
.wizard-progress-seg:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  filter: grayscale(0.35);
}

.wizard-progress-seg.is-zip-target {
  animation: progress-zip-pulse 1.1s ease-in-out infinite;
}

@keyframes progress-zip-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #6a9ec4; }
  50% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3d8a48; }
}

.wizard-status-card {
  margin: 0.45rem 0 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: linear-gradient(180deg, #fafafa 0%, #f3f3f1 100%);
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.wizard-status-card.is-compact .wizard-coach,
.wizard-status-card.is-compact .wizard-status:empty {
  display: none;
}

.wizard-progress {
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.45rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  min-width: 0;
  color: #222;
}

.wizard-progress-line,
.wizard-progress-cheer {
  display: inline;
}

.wizard-coach {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #444;
  text-align: center;
  min-height: 0;
}

.wizard-status {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: #555;
  min-height: 0;
  text-align: center;
}

.wizard-status:not(:empty) {
  min-height: 1.1em;
}

.step-help {
  margin: 0.35rem 0 0.55rem;
  font-size: 0.82rem;
}

.step-cross-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #1a4d8c;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.preview-site .zone-badge.badge-kind-image:not(.is-step-done) {
  background: #c48a3a;
}

.preview-site .hero-stage.is-user-upload .hero-mock-notice {
  display: none !important;
}

.logo-wrap.is-text-first {
  flex-direction: row-reverse;
}

.logo-wrap.is-image-first {
  flex-direction: row;
}

.finish-summary {
  margin: 0.75rem 0 0.5rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.5rem;
  background: #f7f8f7;
}

.finish-summary-title {
  margin: 0 0 0.4rem;
  font-size: 0.86rem;
  font-weight: 700;
}

.finish-summary-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #333;
}

.finish-zip-note {
  margin: 0.65rem 0;
  padding: 0.65rem 0.75rem;
  background: #eef5fb;
  border: 1px solid #6a9ec4;
  border-radius: 0.45rem;
}

.finish-zip-note-lead {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
}

.finish-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  margin: 0.85rem 0 0.65rem;
}

.finish-submit-hint {
  margin: 0;
  flex: 1 1 100%;
  font-size: 0.8rem;
  color: #555;
}

.finish-optional {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
}

.finish-optional-title {
  margin: 0 0 0.45rem;
  font-size: 0.88rem;
  font-weight: 700;
}

.wizard-btn-zip-jackpot {
  flex: 1.2;
  background: #2d6a36;
  border-color: #245a2c;
  color: #fff;
}

.wizard-btn-zip-jackpot:hover:not(:disabled) {
  background: #245a2c;
}

.wizard-foot.is-finish-ready #wizard-next {
  display: none;
}

.wizard-foot.is-finish-step #btn-zip {
  display: inline-flex;
}

.wizard-foot-guide {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #444;
}

.wizard-foot-guide[hidden] {
  display: none !important;
}

.gct-compare-align {
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items: start;
}

.gct-compare-col-spacer {
  min-height: 1px;
}

.gct-compare-col-ghost {
  visibility: hidden;
}

.gct-blue-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 0.55rem 0.75rem;
  border-radius: 0.65rem;
  background: #fff;
  border: 2px solid #3d6ea8;
  box-shadow: 0 0 0 2px rgba(61, 110, 168, 0.12);
}

.gct-tag-slot {
  color: #3d6ea8;
}

.gct-actions-spacer {
  display: block;
}

.gct-pick-layout {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.gct-pick-layout--split {
  grid-template-columns: minmax(0, 1fr) minmax(8.75rem, 11.5rem);
  grid-template-areas:
    "mode mode"
    "few few"
    "chooser side";
  align-items: start;
  gap: 0.55rem 0.65rem;
}
.color-pick-mode {
  grid-area: mode;
  display: flex;
  justify-content: center;
  gap: 0.85rem;
  margin: 0;
}
.color-pick-mode-btn {
  margin: 0;
  padding: 0.15rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: #fff;
  color: #1a1a1a;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.gct-pick-layout.is-mode-few .color-pick-mode-btn:not(.is-now),
.gct-pick-layout.is-mode-all .color-pick-mode-btn:not(.is-now) {
  background: #fff;
  color: #1a1a1a;
  border-color: transparent;
}
.color-pick-mode-btn.is-now {
  background: #fff;
  border-color: #1a1a1a;
  color: #1a1a1a;
  font-weight: 600;
}
.color-few {
  grid-area: few;
  display: grid;
  grid-template-columns: repeat(4, 3.5rem);
  justify-content: start;
  gap: 0.4rem;
  margin: 0;
}
.color-few-swatch {
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 0.35rem;
  box-shadow: 0 0 0 1px #c8c8c8;
  cursor: pointer;
}
.color-few-swatch.is-now {
  box-shadow: 0 0 0 2px #1a1a1a;
}
.gct-pick-layout.is-mode-none .gct-pick-chooser,
.gct-pick-layout.is-mode-none .gct-pick-side,
.gct-pick-layout.is-mode-none .color-few,
.gct-pick-layout.is-mode-none .gct-grad-dir-pop,
.gct-pick-layout.is-mode-few .gct-pick-chooser,
.gct-pick-layout.is-mode-few #gct-pick-target-row,
.gct-pick-layout.is-mode-few #gct-pick-grad,
.gct-pick-layout.is-mode-few #gct-pick-grad-help,
.gct-pick-layout.is-mode-few .gct-grad-dir-pop,
.gct-pick-layout.is-mode-all .color-few {
  display: none;
}
.gct-pick-layout.is-mode-all .gct-pick-chooser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.gct-pick-layout.is-mode-all .gct-pick-chooser-label {
  flex: 1 0 100%;
}
.gct-pick-layout.is-mode-all .gct-honey-wrap {
  flex: 0 0 auto;
  width: max-content;
  max-width: calc(100% - 10.2rem);
}
.gct-pick-layout.is-mode-all .gct-honey-shade {
  flex: 0 0 9.5rem;
  flex-direction: column;
  align-items: stretch;
  align-self: center;
  margin: 0 0 0 1.35rem;
}
.layout-color-body .gct-pick-layout.is-mode-all .gct-pick-chooser {
  display: block;
}
.layout-color-body .gct-pick-layout.is-mode-all .gct-honey-wrap {
  max-width: 100%;
  width: 100%;
}
.gct-phase[data-gct-phase="pick"] {
  container-type: inline-size;
  container-name: gct-pick-phase;
}
.gct-pick-layout--split .gct-pick-side {
  grid-area: side;
  align-self: start;
}
.gct-pick-layout--split .gct-pick-chooser {
  grid-area: chooser;
  align-self: start;
}
.gct-pick-side {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}
.gct-pick-chooser {
  min-width: 0;
}
.gct-pick-confirm {
  min-width: 0;
  margin-top: 1.1rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(20, 28, 36, 0.1);
}
.gct-pick-confirm .gct-btn {
  width: 100%;
  justify-content: center;
  min-height: 2.75rem;
  font-weight: 800;
}
.gct-pick-chooser-label {
  margin: 0 0 0.2rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a1f1c;
}
.gct-pick-drag-hint,
#gct-pick-live-note {
  display: none !important;
}
.gct-honey-shade {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.2rem 0 0;
  padding: 0.35rem 0.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a1f1c;
  cursor: pointer;
}
.gct-honey-shade input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}
.gct-honey-shade input::-webkit-slider-thumb {
  cursor: inherit;
}
.gct-honey-shade input::-moz-range-thumb {
  cursor: inherit;
}
html.is-shade-grab,
html.is-shade-grab .gct-honey-shade,
html.is-shade-grab .gct-honey-shade input {
  cursor: grabbing !important;
}
html.is-shade-grab .gct-honey-shade input::-webkit-slider-thumb,
html.is-shade-grab .gct-honey-shade input::-webkit-slider-runnable-track {
  cursor: grabbing !important;
}
html.is-shade-grab .gct-honey-shade input::-moz-range-thumb,
html.is-shade-grab .gct-honey-shade input::-moz-range-track {
  cursor: grabbing !important;
}
.gct-pick-grad-help {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.4;
  color: #4a5560;
}
/* PCの100%では横並びのまま。極端に狭いときだけ縦にする */
@container gct-pick-phase (max-width: 22rem) {
  .gct-pick-layout--split {
    grid-template-columns: 1fr;
    grid-template-areas:
      "mode"
      "few"
      "chooser"
      "side";
  }
}
.gct-pick-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.gct-pick-palette-label {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #555;
}
.gct-palette-lead {
  margin: 0 0 0.55rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1f1c;
  line-height: 1.45;
}
.gct-palette-lead .gct-ink-warn {
  display: inline-block;
  margin-top: 0.15rem;
  padding: 0.12rem 0.35rem;
  border-radius: 0.35rem;
  background: #fff6d8;
  border: 1px solid rgba(20, 28, 36, 0.18);
  font-weight: 900;
  color: #1a2228;
}

.gct-palette-cell--pick,
.gct-palette-cell--confirm {
  cursor: pointer;
  border: 0;
  font: inherit;
  text-align: left;
}

.gct-palette-cell--confirm {
  background: #fff;
  border: 1px solid #3d8a48;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #2d6a36;
}

.gct-palette-title {
  font-size: 0.68rem;
  font-weight: 700;
  color: #555;
}

.gct-hint-inline {
  margin: 0 0 0.65rem;
}

.swatch-hues {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.swatch-hue {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  cursor: pointer;
  padding: 0;
  background: var(--sw, #ccc);
}

.swatch-hue.is-active {
  outline: 2px solid #111;
  outline-offset: 2px;
}

.font-picker-block {
  margin: 0.5rem 0;
}

.font-picker-label {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
}

.char-count {
  display: block;
  margin-top: 0.05rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #666;
  font-variant-numeric: tabular-nums;
}

.char-count.is-max {
  color: #1a4d8c;
}

.leg-image { background: #c48a3a; }
.leg-color { background: #6a9ec4; }
.leg-text { background: #c44a3a; }
.leg-done { background: #3d8a48; }

.has-step-tip,
.has-hover-tip {
  position: relative;
}

.has-step-tip:hover::after,
.has-step-tip:focus-visible::after,
.has-hover-tip:hover::after,
.has-hover-tip:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 50;
  left: 50%;
  bottom: calc(100% + 0.35rem);
  transform: translateX(-50%);
  padding: 0.25rem 0.45rem;
  border-radius: 0.3rem;
  background: #111;
  color: #fff;
  font-size: 0.68rem;
  white-space: nowrap;
  pointer-events: none;
}
.layout-arrange-cell .has-hover-tip:hover::after,
.layout-arrange-cell .has-hover-tip:focus-visible::after {
  bottom: auto;
  top: calc(100% + 0.28rem);
}
.layout-inner-handle.has-hover-tip:hover::after,
.layout-inner-handle.has-hover-tip:focus-visible::after {
  left: 0;
  transform: none;
}
.layout-arrange-handle.has-hover-tip:hover::after,
.layout-arrange-handle.has-hover-tip:focus-visible::after {
  left: auto;
  right: 0;
  transform: none;
}
.layout-photo-row:hover,
.layout-photo-row:focus-within,
.layout-arrange-summary:hover,
.layout-arrange-summary:focus-within {
  position: relative;
  z-index: 8;
}
.has-hover-tip:active::after,
body.is-inner-layout-dragging .has-hover-tip::after,
body.is-layout-dragging .has-hover-tip::after {
  content: none !important;
}

.wizard-progress-seg.has-step-tip:hover::after,
.wizard-progress-seg.has-step-tip:focus-visible::after {
  bottom: auto;
  top: calc(100% + 0.3rem);
}

/* override duplicate dash-header/title from kept middle */
.dash-header .dash-title {
  margin: 0;
}

/* Mobile */
@media (max-width: 860px) {
  body.atelier {
    overflow: auto;
  }

  .atelier-mobile-tabs {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .atelier-shell {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: calc(100dvh - 2.75rem);
    max-height: none;
  }

  .atelier-chrome {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    min-height: 2.85rem;
    min-width: 0;
  }

  .atelier-chrome-left,
  .atelier-chrome-right {
    min-width: 0;
    max-width: 100%;
  }

  #chrome-preview-width {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.35rem;
    width: 100%;
    max-width: 100%;
    white-space: normal;
  }

  .atelier-chrome-center {
    flex: 1 1 100%;
    order: -1;
    max-width: none;
    justify-content: center;
  }

  .chrome-product-catch {
    font-size: 0.62rem;
  }

  .chrome-product-name {
    font-size: 0.95rem;
  }

  body.atelier.show-dash .atelier-chrome .atelier-chrome-right {
    display: none;
  }

  .atelier-split {
    flex: 1 1 auto;
    display: block;
    min-height: 0;
  }

  .split-handle {
    display: none !important;
  }

  .preview-pane,
  .dash-pane {
    display: none;
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 0;
    height: calc(100dvh - 2.75rem - 2.55rem);
    max-height: calc(100dvh - 2.75rem - 2.55rem);
  }

  body.atelier.show-preview .preview-pane,
  body.atelier.show-dash .dash-pane {
    display: flex;
  }

  body.atelier:not(.show-dash) .preview-pane {
    display: flex;
  }

  .layout-picker-row--step,
  .layout-picker-row--menu {
    max-width: none;
  }

  #preview-root[data-layout="b"] main {
    grid-template-columns: 1fr;
  }

  #preview-root[data-layout="b"] #about,
  #preview-root[data-layout="b"] #about-photos-block,
  #preview-root[data-layout="b"] #works {
    padding-left: 0;
    padding-right: 0;
  }
}


/* === UX 2026-09-05 entry + detail color === */
.entry-step-meta {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #4a5560;
}
.entry-step-back {
  margin-top: 0.85rem;
  border: 0;
  background: transparent;
  color: #2f5f8f;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0;
}
.entry-resume-file {
  display: grid;
  gap: 0.45rem;
  margin: 0.35rem 0 0.75rem;
  font: inherit;
}
.entry-resume-file-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #2a3340;
}
.entry-resume-file input[type="file"] {
  max-width: 100%;
  font: inherit;
}
.entry-resume-sources {
  display: grid;
  gap: 0.85rem;
  margin: 0.35rem 0 0.75rem;
}
.entry-resume-folder {
  display: grid;
  gap: 0.4rem;
  justify-items: start;
}
.entry-resume-folder-name {
  margin: 0;
  font-size: 0.82rem;
}
.entry-resume-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.1rem;
  margin-top: 0.35rem;
}
.entry-resume-actions .entry-step-back {
  margin-top: 0;
}
.entry-resume-actions .wizard-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.entry-save-folder-hint {
  margin: 0.55rem 0 0;
  font-size: 0.82rem;
  color: #4a5560;
}
.entry-save-folder-name {
  margin-top: 0.35rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  max-width: 36rem;
}
.entry-save-folder-name[hidden] {
  display: none !important;
}
.entry-save-folder-label {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  width: 100%;
  font-size: 0.82rem;
  font-weight: 700;
}
.entry-save-folder-label input {
  font: inherit;
  font-weight: 400;
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(20, 28, 36, 0.28);
  border-radius: 6px;
  background: #fff;
  color: #121816;
}
.entry-layout-grid--2x2 {
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  align-items: stretch;
}
.entry-layout-grid--2x2 .entry-layout-card--undecided {
  grid-column: auto;
}
.entry-layout-grid--2x2 .layout-card-head {
  min-height: 0;
  align-items: center;
  gap: 0.28rem;
  margin-bottom: 0;
}
.entry-layout-grid--2x2 .layout-card-id,
.entry-layout-grid--2x2 .layout-card-id--soft {
  width: 1.1rem;
  height: 1.1rem;
  font-size: 0.72rem;
  border-radius: 0.28rem;
}
.entry-layout-grid--2x2 .layout-card-titles {
  gap: 0;
}
.entry-layout-grid--2x2 .layout-card-name {
  font-size: 0.76rem;
  line-height: 1.1;
}
.entry-layout-grid--2x2 .layout-card-blurb {
  font-size: 0.6rem;
  line-height: 1.15;
}
/* ????????????????????? A?????7?????? */
.entry-layout-grid--2x2 .layout-card-wire {
  display: flex;
  flex-direction: column;
  gap: 0.03rem;
  flex: 0 0 auto;
  min-height: 0;
  max-height: none;
  justify-content: flex-start;
  margin-top: 0;
  overflow: hidden;
}
.entry-layout-grid--2x2 .layout-card-wire > .lw,
.entry-layout-grid--2x2 .layout-card-wire > .lw-row {
  flex: 0 0 auto;
  min-height: 0.34rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.entry-layout-grid--2x2 .layout-card-wire > .lw-row {
  align-items: stretch;
}
.entry-layout-grid--2x2 .layout-card-wire > .lw-row--grow {
  flex: 0 0 auto;
  min-height: 0.34rem;
}
.entry-layout-grid--2x2 .layout-card-wire > .lw-row .lw {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0.34rem;
  height: auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.entry-layout-grid--2x2 .layout-card-wire .lw {
  padding: 0.01rem 0.08rem;
  font-size: 0.38rem;
  line-height: 1;
  min-height: 0.34rem;
}
.entry-layout-grid--2x2 .layout-card-wire .lw-L {
  min-height: 0.36rem;
}
.entry-layout-grid--2x2 .layout-card-wire .lw-H {
  min-height: 0.34rem;
}
.entry-mood-grid--final {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.entry-mood--custom,
.entry-mood--muted {
  grid-column: 1 / -1;
}
.entry-mood-sub {
  display: block;
  font-size: 0.78rem;
  color: #5a635c;
  margin-top: 0.15rem;
}
.entry-mood-swatch[data-swatch="brick"] { background: linear-gradient(90deg, #ffe4cc, #e07020); }
.entry-mood-swatch[data-swatch="sakura"] { background: linear-gradient(90deg, #fdf5f6, #c95d7a); }

body.gct-pick-phase #preset-row,
body.gct-pick-phase #preset-subhead,
body.gct-pick-phase #detail-color-note,
body.gct-pick-phase #easy-color-note {
  display: none !important;
}

.gct-pick-grad {
  margin: 0;
  padding: 0.55rem 0.55rem 0.5rem;
  border: 1px solid rgba(20, 28, 36, 0.12);
  border-radius: 0.7rem;
  background: #f7f8f7;
}
.gct-pick-grad-label {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #4a5560;
  line-height: 1.35;
  text-align: center;
}
.gct-pick-ink-note {
  margin: 0;
  padding: 0.7rem 0.75rem;
  border: 2px solid rgba(20, 28, 36, 0.28);
  border-radius: 0.65rem;
  background: #fff6d8;
  font-size: 0.95rem;
  font-weight: 800;
  color: #1a2228;
  line-height: 1.35;
  text-align: center;
  letter-spacing: 0.01em;
}
.gct-pick-ink-note strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 900;
}
.gct-pick-ink-note-sub {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #4a5560;
}
.gct-ink-warn {
  display: inline;
  font-weight: 800;
  color: #1a2228;
}
.gct-pick-target-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: stretch;
}
.gct-pick-target[hidden],
.gct-pick-grad[hidden],
.gct-pick-ink-note[hidden] {
  display: none !important;
}
.gct-pick-target {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  flex: 1 1 calc(50% - 0.25rem);
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid rgba(20, 28, 36, 0.16);
  border-radius: 0.65rem;
  background: #fff;
  padding: 0.5rem 0.55rem;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.gct-pick-target-label {
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #14202a;
  line-height: 1.2;
}
.gct-pick-target:hover,
.gct-pick-target.is-active {
  border-color: #3d8a48;
  box-shadow: none;
  background: #fff;
}
.gct-pick-target.is-active .gct-pick-target-label {
  color: #1a1f1c;
}
.gct-pick-target-swatch {
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(20, 28, 36, 0.18);
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.gct-pick-target.is-unused {
  opacity: 0.72;
  border-style: dashed;
  background: #f4f6f7;
}
.gct-pick-target.is-unused .gct-pick-target-label {
  font-size: 0.92rem;
  color: #5a6670;
}
.gct-pick-target.is-unused .gct-pick-target-swatch {
  opacity: 0.35;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(20, 28, 36, 0.08),
    rgba(20, 28, 36, 0.08) 4px,
    transparent 4px,
    transparent 8px
  ) !important;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background-color: #fff;
  flex: 0 0 auto;
  margin-left: 0.1rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.gct-pick-ink-note {
  flex: 1 1 100%;
  margin: 0;
}
.gct-actions-pick {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.gct-actions-pick--undo {
  margin-top: 0;
  margin-bottom: 0;
}
.gct-actions-pick .gct-btn {
  width: 100%;
  justify-content: center;
}
/* ???????????????????????????????? */
body.gct-pick-phase #wizard-nav {
  display: none !important;
}
body.atelier.color-mode-easy .layout-color-body #gct-pick-grad:not([hidden]) {
  display: block !important;
}
body.atelier.color-mode-easy #gct-partner-row,
body.atelier.color-mode-easy #preset-random-btn,
body.atelier.color-mode-easy .gct-grad-note,
body.atelier.color-mode-easy #gct-pick-grad,
body.atelier.color-mode-easy #gct-pick-ink-note,
body.atelier.color-mode-easy #detail-color-note {
  display: none !important;
}
body.atelier.color-mode-detail #easy-color-note {
  display: none !important;
}
body.atelier.color-mode-detail #detail-color-note {
  display: block;
}
body.atelier.color-mode-detail #preset-row [data-easy-preset] {
  display: none !important;
}
body.atelier.color-mode-detail .preset-row--mood6 {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
body.atelier.color-mode-detail .preset-row--mood6 .gct-grad-note {
  grid-column: auto;
}
body.atelier.color-mode-easy #guided-color-trial {
  display: none !important;
}

.preset-row--mood6 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}
body.atelier.color-mode-easy .preset-row--mood6 {
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 0.7rem;
}
body.atelier.color-mode-easy .preset-row--mood6 [data-easy-preset] {
  min-height: 3.1rem;
  padding: 0.85rem 0.7rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 0.75rem;
}
.gct-grad-note {
  grid-column: 2 / span 2;
  margin: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0.2rem 0.15rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2a333a;
  line-height: 1.4;
}
.gct-palette--3x3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}
.gct-palette-cell--slot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.45rem;
  border: 1px solid rgba(20, 28, 36, 0.12);
  border-radius: 0.7rem;
  background: #fff;
}
.gct-palette-cell--slot .gct-palette-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a1f1c;
  line-height: 1.3;
  text-align: center;
}
.gct-palette-main {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border: 0;
  background: transparent;
  padding: 0.2rem;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.gct-palette-main:disabled {
  cursor: default;
  opacity: 0.9;
}
.gct-grad-compass {
  display: grid;
  grid-template-columns: repeat(3, minmax(2rem, 1fr));
  grid-template-rows: repeat(3, minmax(2.1rem, 2.35rem));
  gap: 0.25rem;
  width: 100%;
  max-width: 11.5rem;
  margin: 0 auto;
  padding: 0.35rem;
  box-sizing: border-box;
  border: 1px solid rgba(20, 28, 36, 0.14);
  border-radius: 0.55rem;
  background: #fff;
}
.gct-grad-arrow {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(20, 28, 36, 0.2);
  border-radius: 0.35rem;
  background: #f4f5f4;
  color: #1a1f1c;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.gct-grad-center,
.gct-grad-center--preview,
.gct-grad-center--empty {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border-radius: 0.35rem;
  padding: 0;
  box-sizing: border-box;
}
.gct-grad-center--empty {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.gct-grad-clear {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(20, 28, 36, 0.2);
  border-radius: 0.35rem;
  background: #fff;
  color: #1a1f1c;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
}
.gct-ink-frame {
  position: relative;
  display: block;
  width: 100%;
  max-width: 7.2rem;
  height: 5.6rem;
  margin: 0.1rem auto 0;
  padding: 0.28rem;
  box-sizing: border-box;
  border: 1px solid rgba(20, 28, 36, 0.14);
  border-radius: 0.55rem;
  background: #f4f5f4;
  cursor: pointer;
}
.gct-ink-frame:disabled {
  cursor: default;
  opacity: 0.9;
}
.gct-ink-swatch {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0.35rem;
  border: 1px solid rgba(20, 28, 36, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  box-sizing: border-box;
}
.gct-grad-arrow.is-active {
  background: #fff;
  color: #1a1f1c;
  border-color: #3d8a48;
}
.gct-partner-row {
  margin: 0.75rem 0 0.55rem;
}
.gct-partner-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid rgba(20, 28, 36, 0.16);
  border-radius: 0.6rem;
  background: #fff;
  padding: 0.45rem 0.65rem;
  font: inherit;
  cursor: pointer;
}
.gct-partner-swatch {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;
}
#gct-keep-preset {
  width: 100%;
  margin-top: 0.35rem;
}
.gct-honey-wrap {
  overflow: visible;
  max-height: none;
  padding: 0.2rem 0 0.15rem;
  min-width: 0;
}
.gct-honey-board {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  touch-action: none;
}
.gct-honey-map {
  position: relative;
  margin: 0;
  touch-action: none;
}
.gct-honey-cell {
  position: absolute;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 0;
  background: var(--sw, #ccc);
  padding: 0;
  cursor: crosshair;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  box-sizing: border-box;
}
.gct-honey-cell.is-active {
  outline: 2px solid #111;
  outline-offset: 1px;
  z-index: 2;
  box-shadow: 0 0 0 1px #fff;
}
.gct-honey-cell.has-hover-tip {
  position: absolute;
}
.gct-honey-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.gct-honey-gray {
  display: flex;
  align-items: center;
  gap: 0;
}
.gct-honey-cell--gray,
.gct-honey-cell--gray.has-hover-tip {
  position: relative;
  left: auto;
  top: auto;
  width: 1.05rem;
  height: 1.05rem;
  border: 1px solid #111;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  flex: 0 0 auto;
}
.gct-honey-current {
  display: inline-block;
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid rgba(0, 0, 0, 0.35);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: #000;
  box-shadow: inset 0 0 0 1px #fff;
}
.guided-color-trial {
  display: block;
}

/* ?? ??????????????????????? ?? */
.chrome-control--badges {
  display: none !important;
}
.chrome-control--width {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  max-width: min(100%, 28rem);
}
.preview-width-hint {
  margin: 0;
  width: 100%;
  font-size: 0.68rem;
  color: #4a5560;
  line-height: 1.3;
}
.preview-width-line {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.preview-look {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: inherit;
}
.preview-look[hidden] {
  display: none !important;
}
.preview-look-sep {
  margin-left: 0;
  margin-right: 3ch;
  color: inherit;
  font-weight: 400;
  line-height: 1;
}
.preview-look-btn {
  margin: 0;
  padding: 0;
  min-width: 1.65rem;
  min-height: 1.65rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.preview-look-btn + .preview-look-btn,
.preview-scale-pct + .preview-look-btn {
  margin-left: 0.35rem;
}
.preview-scale-pct {
  min-width: 3.2rem;
  margin-left: 0.35rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
  pointer-events: none;
}
.preview-look-btn:hover {
  background: rgba(21, 32, 40, 0.06);
}
.preview-look-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.preview-scroll.is-look-enlarged {
  align-items: flex-start;
}
.preview-width-ruler {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.preview-width-dot {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.12rem 0.45rem;
  border: 1px solid rgba(21, 32, 40, 0.35);
  border-radius: 999px;
  background: #fff;
  color: #152028;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}
.preview-width-tick {
  display: none;
}
.preview-width-dot.is-on {
  background: #152028;
  border-color: #152028;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(21, 32, 40, 0.18);
}
.chrome-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.32rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: #2f6f3e;
  color: #fff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
}
.chrome-help-btn:hover {
  background: #255a32;
  color: #fff;
}
.dash-reset-btn {
  margin: 0;
  padding: 0.32rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: #b42318;
  color: #fff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}
.dash-reset-btn:hover {
  background: #912018;
}
#atelier-reset-btn {
  position: fixed;
  top: 5px;
  right: 6px;
  z-index: 40;
  pointer-events: auto;
  margin: 0;
  padding: 3px 6px;
  border: 1px solid #c5ced6;
  border-radius: 0;
  background: #fff;
  color: #9aa3ab;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  box-sizing: border-box;
  white-space: nowrap;
}
#atelier-reset-btn:hover {
  background: #fff;
  border-color: #c5ced6;
  color: #5c6770;
}
body.entry-gate-open #atelier-reset-btn {
  display: none;
}
body.is-easy-done-step .wizard-foot {
  padding-left: 0.65rem;
  justify-content: center;
}
body.is-sample-zip-step .wizard-foot {
  padding-left: 0.65rem;
  padding-right: 0.65rem;
  justify-content: center;
}
body.is-sample-zip-step .wizard-foot #wizard-next,
body.is-sample-zip-step .wizard-foot #btn-zip,
body.is-sample-zip-step #btn-finish-change,
body.is-sample-zip-step #look-controls-host-finish,
body.is-sample-zip-step .scope-checks-lead {
  display: none !important;
}
body.is-sample-zip-step .finish-summary-title {
  margin-top: 0;
}
body.is-sample-zip-step .font-wish-block {
  display: none !important;
}
body.is-sample-zip-step details[data-step-id="finish"] > :not(summary):not(#sample-zip-branch) {
  display: none !important;
}
#sample-zip-branch[hidden] {
  display: none !important;
}
.sample-zip-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  width: 100%;
  margin: 0 0 1rem;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 0.6rem;
  background: #fff;
  color: #121816;
  text-align: left;
  cursor: pointer;
}
.sample-zip-choice strong {
  font-size: 1.05rem;
  font-weight: 800;
}
.sample-zip-choice span {
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 400;
}
.sample-zip-rechoose {
  display: inline-block;
  margin: 0 0 1.2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1a5c2e;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}
.sample-zip-lead,
.sample-zip-mail-note,
.sample-zip-status {
  margin: 0.4rem 0 0.8rem;
  font-size: 0.9rem;
  line-height: 1.55;
}
.sample-zip-section {
  margin-top: 1.6rem;
}
.sample-zip-section:first-child {
  margin-top: 0;
}
.sample-zip-heading {
  margin: 0 0 0.8rem;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.45;
  color: #121816;
}
#sample-zip-order .check {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  line-height: 1.5;
}
.sample-price-group {
  margin: 1rem 0 1.6rem;
  padding: 0;
  border: 0;
}
.sample-price-accordion {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.6rem;
  background: #fff;
}
.sample-price-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  cursor: pointer;
  list-style: none;
}
.sample-price-accordion summary::-webkit-details-marker {
  display: none;
}
.sample-price-accordion-copy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.sample-price-accordion-copy strong {
  font-size: 1.2rem;
  font-weight: 800;
  color: #121816;
}
.sample-price-accordion-copy span {
  font-size: 0.9rem;
  line-height: 1.45;
}
.sample-price-accordion-open,
.sample-price-accordion-close {
  flex: 0 0 auto;
  color: #1a5c2e;
  font-size: 0.85rem;
  text-decoration: underline;
}
.sample-price-accordion .sample-price-accordion-close,
.sample-price-accordion[open] .sample-price-accordion-open {
  display: none;
}
.sample-price-accordion[open] .sample-price-accordion-close {
  display: inline;
}
.sample-price-accordion .sample-price-group,
.sample-price-accordion .sample-price-total,
.sample-price-accordion .sample-price-notes,
.sample-price-accordion .sample-zip-links {
  margin-left: 1rem;
  margin-right: 1rem;
}
.sample-price-accordion .sample-zip-links {
  margin-bottom: 1rem;
}
.sample-order-mail-copies {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin-top: 0.85rem;
}
.sample-order-mail-copies .sample-zip-rechoose {
  margin: 0;
}
.sample-order-mail-copies .sample-zip-mail-to {
  margin: 0 0 0.45rem;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.sample-order-zip-wrap.is-locked #sample-order-zip {
  opacity: 0.45;
  cursor: not-allowed;
}
.sample-own-domain {
  margin: 0.35rem 0 0.7rem 1.6rem;
}
.sample-own-domain label {
  display: block;
}
.sample-own-domain input {
  display: block;
  width: min(100%, 22rem);
  margin-top: 0.3rem;
}
.sample-price-group legend {
  margin-bottom: 0.45rem;
  font-size: 1rem;
  font-weight: 800;
}
.sample-price-total {
  margin: 0.2rem 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 800;
}
.sample-price-notes {
  margin: 0 0 0.8rem;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  line-height: 1.5;
}
.sample-zip-links {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
}
.sample-zip-links a {
  color: #1a5c2e;
}
#sample-order-notes {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 5.5rem;
  margin-top: 0.2rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #c5ced6;
  border-radius: 0.45rem;
  font: inherit;
  background: #fff;
}
#sample-zip-save .btn,
#sample-order-zip,
#sample-order-mail-open {
  width: 100%;
}
#sample-order-mail-status {
  white-space: pre-wrap;
}
body.is-sample-zip-step details[data-step-id="finish"] > .dash-note,
body.is-sample-zip-step details[data-step-id="finish"] > .finish-summary,
body.is-sample-zip-step details[data-step-id="finish"] > .finish-optional,
body.is-sample-zip-step details[data-step-id="finish"] > .finish-zip-note,
body.is-sample-zip-step .finish-url-slug,
body.is-sample-zip-step .finish-extra-notes {
  margin-top: 1.6rem;
}
body.mode-guided.is-sample-zip-step .dash-block.is-text-chapter.is-wizard-active > .scope-checks {
  margin-top: 2.5rem;
}
body.is-sample-zip-step .finish-optional {
  padding-top: 0;
}
body.is-sample-zip-step .scope-checks > legend {
  display: block;
  width: 100%;
  margin-bottom: 0.35rem;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.45;
  color: #121816;
}
.dash-help-link--strong {
  font-weight: 800;
  font-size: 0.9rem;
  color: #1a5c2e;
  text-decoration: underline;
}
.detail-notice-modal[hidden] {
  display: none !important;
}
.detail-notice-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.detail-notice-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(10, 16, 12, 0.55);
  cursor: pointer;
}
.detail-notice-card {
  position: relative;
  z-index: 1;
  width: min(28rem, 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.85rem;
  /* ?????????????????????? */
  min-height: 0;
  padding: 0.85rem 1rem;
  border-radius: 0.7rem;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  text-align: left;
  box-sizing: border-box;
}
.detail-notice-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem; /* hub-entry-card ? title?note ??? */
  margin: 0;
  padding: 0;
}
.detail-notice-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: #1a1f1c; /* ???????????????? */
}
.detail-notice-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #5a6570;
  text-align: left;
}
.detail-notice-card .entry-gate-apply {
  align-self: stretch;
  margin-top: 0;
  min-height: 2.75rem;
}
.hub-layout-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.55rem;
}
.hub-stack-label {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1a1f1c;
}
.hub-abc-note {
  margin: 0 0 0.45rem;
}
.layout-picker-row--compact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.layout-card--compact {
  flex: 1 1 5.5rem;
  min-width: 5.2rem;
  min-height: 2.85rem;
  padding: 0.55rem 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 2px solid #c5ced6;
  border-radius: 0.55rem;
  background: #fff;
  cursor: pointer;
  font: inherit;
}
.layout-card--compact.is-selected {
  border-color: #3d8a48;
  background: #fff;
}
.layout-card--compact .layout-card-id {
  font-weight: 800;
  font-size: 1.05rem;
}
.layout-card--compact .layout-card-name {
  font-size: 0.88rem;
}
.hub-preview-width-block,
.hub-wire-block,
.hub-abc-block {
  padding: 0.65rem 0.7rem;
  border: 1px solid #d5dde4;
  border-radius: 0.65rem;
  background: #fafbfc;
}
.hub-wire-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}
.hub-wire-toolbar .hub-stack-label {
  margin: 0;
}
.hub-stack-label--with-handle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem 0.35rem;
  line-height: 1.35;
}
.hub-handle-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  min-height: 1.45rem;
  padding: 0.1rem 0.28rem;
  border: 1px solid rgba(20, 28, 36, 0.14);
  border-radius: 0.35rem;
  background: #f4f5f4;
  color: #5a635c;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: -0.08em;
  vertical-align: middle;
  line-height: 1;
}
.dash-width-rail {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 12;
  padding: 0.45rem 0.75rem 0.55rem;
  background: #efeae3;
  border-bottom: 1px solid #d5dde4;
  box-shadow: 0 4px 10px rgba(20, 28, 36, 0.06);
  color: #1a1f1c;
}
.dash-width-rail[hidden] {
  display: none !important;
}
.dash-preview-width-slot {
  min-height: 2.2rem;
}
.dash-width-rail .chrome-control--width,
.dash-width-rail .chrome-control--in-hub {
  width: 100%;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1a1f1c;
}
.preview-width-rail {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 12;
  padding: 0.4rem 0.65rem 0.5rem;
  background: #efeae3;
  border-bottom: 1px solid #d5dde4;
  box-shadow: 0 4px 10px rgba(20, 28, 36, 0.06);
  color: #1a1f1c;
}
.preview-width-rail[hidden] {
  display: none !important;
}
.preview-width-slot {
  min-height: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.85rem;
}
.preview-width-rail .chrome-control--width,
.preview-width-rail .chrome-control--in-hub {
  width: auto;
  flex: 1 1 16rem;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1a1f1c;
}
/* ????????????????????? */
#preview-root main [data-layout-block],
#preview-root [data-layout-block].is-preview-dragging,
#preview-root main.is-preview-layout-dragging [data-layout-block] {
  cursor: default;
}
#layout-undo-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.chrome-control--in-hub {
  width: 100%;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
}
.chrome-control--in-hub .preview-toolbar-label {
  display: none;
}
.hub-preview-width-slot {
  min-height: 2.5rem;
}
@media (max-width: 720px) {
  .layout-card--compact {
    flex: 1 1 100%;
    min-height: 3.1rem;
    font-size: 1rem;
  }
  #layout-undo-btn {
    min-height: 2.6rem;
    padding: 0.45rem 0.85rem;
  }
}
.item-grow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 0.75rem;
}
.item-grow-actions .entry-gate-apply {
  flex: 1 1 8rem;
  min-width: 0;
}
.item-gap-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
}
.item-gap-row > span {
  min-width: 0;
  color: #6a7380;
}
.item-gap-row .layout-gap-lead,
.layout-gap-row .layout-gap-lead {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6a7380;
}
.item-gap-row button {
  appearance: none;
  border: 1px solid #c5ced6;
  background: #fff;
  border-radius: 0.4rem;
  padding: 0.22rem 0.45rem;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  color: #1a1f1c;
}
.item-gap-row button:hover,
.item-gap-row button.is-active {
  border-color: #3d8a48;
  background: #fff;
  font-weight: 700;
}
.layout-arrange-tools {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
  width: 100%;
  margin-top: 0.25rem;
}
.layout-arrange-tools .layout-arrange-counts {
  margin: 0;
}
.layout-arrange-tools .layout-gap-row {
  margin: 0;
}
.layout-gap-row {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.2rem;
}
.layout-gap-row .layout-gap-btn {
  appearance: none;
  border: 1px solid #c5ced6;
  background: #fff;
  border-radius: 0.3rem;
  padding: 0.12rem 0.35rem;
  font: inherit;
  font-size: 0.72rem;
  line-height: 1.2;
  cursor: pointer;
  color: #1a1f1c;
}
.layout-gap-row .layout-gap-btn:hover,
.layout-gap-row .layout-gap-btn.is-active {
  border-color: #3d8a48;
  background: #fff;
  font-weight: 700;
}
body.mode-detail .dash-block[hidden] {
  display: none !important;
}
body.mode-detail .dash-block:not(.is-active-step) {
  display: none !important;
}
body.mode-detail .dash-block--layout-hub {
  border: 1px solid #3d8a48;
  border-radius: 0.7rem;
  background: #fff;
}
.layout-arrange-wire {
  gap: 0.28rem !important;
}
.layout-arrange--expanded .layout-arrange-cell,
.layout-arrange-cell.size-L {
  min-height: 2.75rem !important;
  height: auto !important;
  padding: 0.28rem 0.45rem !important;
  align-items: center;
}
.layout-arrange--expanded .layout-arrange-cell.layout-arrange-cell--structure,
.layout-arrange-cell.layout-arrange-cell--structure.size-L {
  display: block;
  padding: 0 !important;
  min-height: 0 !important;
  min-width: 0;
  max-width: 100%;
  height: auto !important;
  align-items: stretch;
  overflow: hidden;
}
.layout-arrange-summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  list-style: none;
}
.layout-arrange-summary::-webkit-details-marker {
  display: none;
}
.layout-arrange-summary .layout-arrange-name {
  flex: 1 1 auto;
}
.layout-mini {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  width: 2.4rem;
  flex: 0 0 2.4rem;
  gap: 3px;
}
.layout-mini[data-gap="tight"] {
  gap: 1px;
}
.layout-mini[data-gap="loose"] {
  gap: 6px;
}
.layout-mini-bar {
  display: block;
  height: 0.42rem;
  border-radius: 2px;
  background: #7f93a6;
}
.layout-mini-bar--wide,
.layout-mini-bar.is-full {
  flex: 1 0 100%;
  width: 100%;
}
.layout-mini-bar.is-half {
  flex: 1 0 calc(50% - 4px);
  width: calc(50% - 4px);
}
.layout-arrange-summary .layout-arrange-handle {
  margin-left: auto;
  min-height: 1.7rem;
  touch-action: none;
}
.layout-arrange-body {
  padding: 0 0.7rem 0.75rem;
}
.layout-arrange-body:empty {
  display: none;
}
.layout-omakase-bar {
  margin: 0 0 0.75rem;
}
.layout-omakase-note {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
}
.layout-omakase-btn,
.layout-img-source,
.layout-width-btn,
.layout-focal-reset,
.layout-lock-btn {
  font: inherit;
  color: #152028;
  background: #fff;
  border: 1px solid #b7b7b7;
  cursor: pointer;
}
.layout-omakase-btn {
  min-height: 2.2rem;
  padding: 0.35rem 0.8rem;
}
.layout-image-count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}
.layout-image-count-num {
  min-width: 1.2rem;
  text-align: center;
}
.layout-inner {
  border: 1px solid rgba(20, 28, 36, 0.14);
  border-radius: 0.45rem;
  margin-top: 0.35rem;
  background: #fff;
}
.layout-inner.is-selected {
  border-color: #3d8a48;
}
.layout-inner-summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.45rem;
  cursor: pointer;
  list-style: none;
}
.layout-inner-summary::-webkit-details-marker {
  display: none;
}
.layout-inner-summary .layout-mini-bar {
  width: 1.4rem;
  flex: 0 0 1.4rem;
}
.layout-inner-summary .layout-mini-bar.is-half {
  width: 0.7rem;
  flex-basis: 0.7rem;
}
.layout-inner-name {
  flex: 1 1 auto;
}
.layout-width-picks {
  display: inline-flex;
  gap: 0.2rem;
}
.layout-width-btn,
.layout-img-source,
.layout-focal-reset {
  min-height: 1.8rem;
  padding: 0.15rem 0.45rem;
}
.layout-width-btn.is-active {
  border-color: #3d8a48;
  box-shadow: inset 0 0 0 1px #3d8a48;
}
.layout-inner-handle {
  cursor: grab;
  user-select: none;
  touch-action: none;
  padding: 0.15rem 0.3rem;
}
.layout-inner-body {
  padding: 0.2rem 0.55rem 0.6rem;
}
.layout-img-sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.layout-img-source--gallery {
  background: #f6f4ef;
  border-color: #c4b8a4;
}
.layout-img-source,
.layout-width-btn,
.layout-focal-reset {
  border-radius: 0.65rem;
}
.layout-focal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.55rem;
}
.layout-focal-pad {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
}
.layout-focal-pad .item-focal-mid {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.layout-lock-btn {
  margin-top: 0.45rem;
  min-width: 2.4rem;
  min-height: 2.2rem;
  font-size: 1.1rem;
}
#hub-layout-stack .hub-nav-row--layout .hub-nav-back {
  font-size: 0.82rem;
  padding: 0.28rem 0.65rem;
}
#hub-layout-stack .hub-nav-row--layout .hub-nav-next {
  font-size: 1.05rem;
  padding: 0.7rem 1.5rem;
}
.dash-block.is-shared-image-ui .sample-img-wire-stage,
.dash-block.is-shared-image-ui > .dash-note {
  display: none;
}
.dash-block.is-shared-image-ui .sample-img-wire-layout,
#easy-img-photo1-slot {
  display: none;
}
/* ??????????????????????????????????????????? */
body.wizard-mode #easy-img-layout-host > .layout-arrange,
body.wizard-mode #easy-img-layout-host > .layout-arrange--expanded {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
}
body.wizard-mode #easy-img-layout-host .layout-omakase-bar {
  order: 0;
  margin: 0;
}
body.wizard-mode #easy-img-layout-host .layout-omakase-btn,
body.wizard-mode #easy-img-layout-host .layout-omakase-note {
  display: none;
}
body.wizard-mode #easy-img-layout-host .layout-arrange-wire {
  order: 1;
}
body.wizard-mode #easy-img-layout-host .layout-arrange-actions {
  order: 2;
  margin-top: 0.75rem;
}
.layout-arrange-main {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 0.25rem 0.4rem !important;
}
.layout-arrange-counts {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  margin-left: auto;
  width: auto !important;
  gap: 0.35rem !important;
}
.layout-arrange-counts--split {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
/* ???????????????????????????????????????? */
.layout-arrange-wire.is-dragging-layout .layout-arrange-cell {
  cursor: grabbing;
}
.layout-count-btn,
.layout-link,
.layout-gap-btn,
.layout-arrange-name {
  cursor: pointer;
}
.layout-arrange-handle {
  cursor: grab;
}
.layout-arrange-handle:active {
  cursor: grabbing;
}
.finish-summary-lead {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #1a1f1c;
}
.finish-missing-title {
  margin: 1rem 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 900;
  color: #b42318;
}
.finish-missing-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.finish-missing-link {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid #f0b4ae;
  border-radius: 0.45rem;
  background: #fff5f4;
  color: #b42318;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
}
.finish-missing-link:hover {
  background: #ffe8e5;
}
#wizard-head-dock[hidden] {
  display: none !important;
}

/* ?????????UI??????? */
.wizard-progress-bar,
.color-field,
.swatch-row,
.swatch-hues,
.gct-legacy-random {
  display: none !important;
}

.layout-look-fieldset {
  margin: 0.75rem 0 0.35rem;
}

.look-controls {
  margin: 0.65rem 0 0.85rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid rgba(20, 28, 36, 0.12);
  border-radius: 0.55rem;
  background: #f7f8f7;
}

.look-controls-fonts {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(20, 28, 36, 0.12);
  display: grid;
  gap: 0.35rem;
}
.look-controls-fonts .gct-btn {
  justify-self: start;
}
.font-picker-role-note {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
}
/* ?????????????????????????????????????? */
.preview-site .hero-stage {
  overflow: hidden;
  aspect-ratio: 2752 / 1536;
}
/* ??: ????? style ????????????????????????3? */
.preview-site .hero-stage::before,
.preview-site .hero-stage::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  background: none !important;
  opacity: 0 !important;
  filter: none !important;
  padding-top: 0 !important;
}
.preview-site .hero-photo {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}
/* 写真が無いタグは、ブラウザの雲と山（画像なし印）を出さない */
.preview-site img.hero-photo:not([src]),
.preview-site img.skill-card-img:not([src]),
.preview-site img.work-thumb:not([src]) {
  visibility: hidden;
}
.preview-site .hero-copy {
  min-width: 0;
  min-height: 0;
}
/* ???????????????????? */
.preview-site .hero-copy-plate {
  display: inline-block;
  max-width: min(36rem, 92%);
  margin: 0;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
}

.preview-site .hero-stage.is-hero-text-on .hero-copy-plate {
  max-width: 100%;
  padding: 1.15rem 1.6rem 1.3rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}
.preview-site .hero-stage.is-hero-text-on .hero-copy .hero-lead {
  line-height: 1.45;
  margin-top: 0.45rem;
}
.preview-site .hero-stage.is-hero-text-on .hero-copy .hero-lead:first-of-type {
  margin-top: 0.55rem;
}

.preview-site .hero-stage.is-hero-text-on.hero-plate-rect .hero-copy-plate {
  border-radius: 0;
}

.preview-site .hero-stage.is-hero-text-on.hero-plate-round .hero-copy-plate {
  border-radius: 1.75rem;
}

.preview-site .hero-stage.is-hero-text-on.hero-plate-oval .hero-copy-plate {
  border-radius: 999px;
  padding: 1.45rem 2.35rem 1.6rem;
}

.preview-site .hero-stage.is-hero-text-on.hero-plate-none .hero-copy-plate {
  padding: 0.35rem 0.5rem;
  background: transparent;
  box-shadow: none;
}

.preview-site .hero-stage.is-hero-text-on.hero-plate-none .hero-copy-plate h1,
.preview-site .hero-stage.is-hero-text-on.hero-plate-none .hero-copy-plate .hero-lead {
  color: var(--hero-ink) !important;
  -webkit-text-fill-color: var(--hero-ink) !important;
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.55),
     1px -1px 0 rgba(0, 0, 0, 0.55),
    -1px  1px 0 rgba(0, 0, 0, 0.55),
     1px  1px 0 rgba(0, 0, 0, 0.55),
     0 2px 12px rgba(0, 0, 0, 0.45);
}

.preview-site .hero-stage.is-hero-text-on.hero-plate-tone-white .hero-copy-plate {
  background: rgba(255, 255, 255, 0.94);
}

.preview-site .hero-stage.is-hero-text-on.hero-plate-tone-dark .hero-copy-plate {
  background: rgba(18, 18, 18, 0.78);
}

.preview-site .hero-stage.is-hero-text-on.hero-plate-tone-white .hero-copy-plate h1,
.preview-site .hero-stage.is-hero-text-on.hero-plate-tone-white .hero-copy-plate .hero-lead {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  text-shadow: none !important;
}

.preview-site .hero-stage.is-hero-text-on.hero-plate-tone-dark .hero-copy-plate h1,
.preview-site .hero-stage.is-hero-text-on.hero-plate-tone-dark .hero-copy-plate .hero-lead {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

.preview-site .hero-stage.is-hero-text-on.hero-plate-none .hero-copy-plate,
.preview-site .hero-stage.is-hero-text-on.hero-plate-none.hero-plate-tone-white .hero-copy-plate,
.preview-site .hero-stage.is-hero-text-on.hero-plate-none.hero-plate-tone-dark .hero-copy-plate {
  background: transparent !important;
  box-shadow: none !important;
}
.preview-site .hero-stage.is-hero-text-on.hero-plate-none .hero-copy-plate h1,
.preview-site .hero-stage.is-hero-text-on.hero-plate-none .hero-copy-plate .hero-lead,
.preview-site .hero-stage.is-hero-text-on.hero-plate-none.hero-plate-tone-white .hero-copy-plate h1,
.preview-site .hero-stage.is-hero-text-on.hero-plate-none.hero-plate-tone-white .hero-copy-plate .hero-lead,
.preview-site .hero-stage.is-hero-text-on.hero-plate-none.hero-plate-tone-dark .hero-copy-plate h1,
.preview-site .hero-stage.is-hero-text-on.hero-plate-none.hero-plate-tone-dark .hero-copy-plate .hero-lead {
  color: var(--hero-ink) !important;
  -webkit-text-fill-color: var(--hero-ink) !important;
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.55),
     1px -1px 0 rgba(0, 0, 0, 0.55),
    -1px  1px 0 rgba(0, 0, 0, 0.55),
     1px  1px 0 rgba(0, 0, 0, 0.55),
     0 2px 12px rgba(0, 0, 0, 0.45) !important;
}

/* キャッチ文字の九位置（八＋中央） */
.preview-site .hero-stage.hero-text-pos-center .hero-copy {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.preview-site .hero-stage.hero-text-pos-top .hero-copy {
  justify-content: flex-start;
  align-items: center;
  text-align: center;
}
.preview-site .hero-stage.hero-text-pos-top-right .hero-copy {
  justify-content: flex-start;
  align-items: flex-end;
  text-align: right;
}
.preview-site .hero-stage.hero-text-pos-right .hero-copy {
  justify-content: center;
  align-items: flex-end;
  text-align: right;
}
.preview-site .hero-stage.hero-text-pos-bottom-right .hero-copy {
  justify-content: flex-end;
  align-items: flex-end;
  text-align: right;
}
.preview-site .hero-stage.hero-text-pos-bottom .hero-copy {
  justify-content: flex-end;
  align-items: center;
  text-align: center;
}
.preview-site .hero-stage.hero-text-pos-bottom-left .hero-copy {
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
}
.preview-site .hero-stage.hero-text-pos-left .hero-copy {
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}
.preview-site .hero-stage.hero-text-pos-top-left .hero-copy {
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}

.easy-copy-hero-pos {
  margin: 0.55rem 0 0.75rem;
}
.easy-copy-hero-pos .hero-text-pos-compass {
  margin: 0.35rem 0 0;
}
.easy-copy-hero-pos .gct-grad-clear.is-active,
.easy-copy-hero-pos .gct-grad-arrow.is-active {
  border-color: #3d8a48;
  box-shadow: inset 0 0 0 1px #3d8a48;
  background: #f3faf4;
}

#easy-copy-list-host .easy-copy-hero-board,
#easy-catch-settings .easy-copy-hero-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "catch leads size"
    "plate plate plate";
  column-gap: 1.15rem;
  row-gap: 0.75rem;
  align-items: start;
}
#easy-copy-list-host .easy-copy-hero-catch,
#easy-catch-settings .easy-copy-hero-catch {
  grid-area: catch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  min-width: 0;
}
#easy-copy-list-host .easy-copy-hero-board .easy-copy-hero-leads,
#easy-catch-settings .easy-copy-hero-board .easy-copy-hero-leads {
  grid-area: leads;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0;
}
#easy-copy-list-host .easy-copy-hero-size,
#easy-catch-settings .easy-copy-hero-size {
  grid-area: size;
  margin: 0;
  padding: 0;
  border: 0;
  gap: 0.35rem 0.65rem;
}
#easy-copy-list-host .easy-copy-hero-size legend,
#easy-catch-settings .easy-copy-hero-size legend {
  flex: 1 0 100%;
  padding: 0;
}
#easy-copy-list-host .easy-copy-hero-plate-span,
#easy-catch-settings .easy-copy-hero-plate-span {
  grid-area: plate;
  justify-self: start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  width: calc(50% - 0.65rem);
  max-width: calc(50% - 0.65rem);
  margin-top: 0.55rem;
  min-height: 0;
  box-sizing: border-box;
}
#easy-copy-list-host .easy-copy-hero-pos,
#easy-catch-settings .easy-copy-hero-pos {
  grid-column: 3;
  grid-row: 2;
  justify-self: stretch;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: auto;
  max-width: none;
  margin: 0.55rem 0 0;
  box-sizing: border-box;
}
#easy-copy-list-host .easy-copy-hero-pos > .dash-field-label,
#easy-catch-settings .easy-copy-hero-pos > .dash-field-label {
  width: 100%;
  text-align: left;
}
#easy-copy-list-host .easy-copy-hero-board .hero-overlay-row,
#easy-copy-list-host .easy-copy-hero-board .dash-field-label,
#easy-catch-settings .easy-copy-hero-board .hero-overlay-row,
#easy-catch-settings .easy-copy-hero-board .dash-field-label {
  margin: 0;
}
#easy-copy-list-host .easy-copy-hero-plate-line,
#easy-copy-list-host .easy-copy-hero-plate-span .hero-overlay-row--shapes,
#easy-catch-settings .easy-copy-hero-plate-line,
#easy-catch-settings .easy-copy-hero-plate-span .hero-overlay-row--shapes {
  width: 100%;
  flex-wrap: nowrap;
  gap: 0.4rem;
}
#easy-copy-list-host .easy-copy-hero-plate-line .gct-btn,
#easy-catch-settings .easy-copy-hero-plate-line .gct-btn {
  flex: 0.7 1 0;
  min-width: 0;
}
#easy-copy-list-host .easy-copy-hero-tone,
#easy-catch-settings .easy-copy-hero-tone {
  flex: 1.35 1 0;
  min-height: 3.15rem;
  padding: 0.5rem 0.75rem;
  font-size: 1.05rem;
}
#easy-copy-list-host .easy-copy-hero-ask-row .gct-btn,
#easy-copy-list-host .easy-copy-hero-col legend,
#easy-copy-list-host .easy-copy-hero-col .dash-field-label,
#easy-catch-settings .easy-copy-hero-ask-row .gct-btn,
#easy-catch-settings .easy-copy-hero-col legend,
#easy-catch-settings .easy-copy-hero-col .dash-field-label {
  white-space: nowrap;
}
#easy-copy-list-host .easy-copy-hero-leads .layout-count-cluster,
#easy-catch-settings .easy-copy-hero-leads .layout-count-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
#easy-copy-list-host .easy-copy-hero-leads .layout-image-count-num,
#easy-catch-settings .easy-copy-hero-leads .layout-image-count-num {
  min-width: 4.6rem;
  text-align: center;
  font-weight: 700;
}
#easy-copy-list-host .easy-copy-hero-pos .gct-grad-compass,
#easy-catch-settings .easy-copy-hero-pos .gct-grad-compass {
  width: 11.5rem;
  max-width: 100%;
  margin: 0 0 0 auto;
}

.hero-text-overlay-panel {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.5rem;
  background: #f7f8f7;
}

.hero-text-fields[hidden] {
  display: none !important;
}

.hero-overlay-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.35rem 0 0.55rem;
}

#easy-copy-list-host .hero-overlay-row--shapes,
#easy-catch-settings .hero-overlay-row--shapes {
  flex-wrap: nowrap;
}
#easy-copy-list-host .easy-copy-hero-plate-span > .dash-field-label,
#easy-copy-list-host .easy-copy-hero-pos > .dash-field-label,
#easy-catch-settings .easy-copy-hero-plate-span > .dash-field-label,
#easy-catch-settings .easy-copy-hero-pos > .dash-field-label {
  margin: 0 0 0.35rem;
  line-height: 1.35;
  min-height: 1.35em;
}
#easy-copy-list-host .easy-copy-hero-plate-span > .hero-overlay-row,
#easy-catch-settings .easy-copy-hero-plate-span > .hero-overlay-row {
  margin: 0;
}
#easy-copy-list-host .easy-copy-hero-plate-span > .hero-overlay-row--shapes,
#easy-catch-settings .easy-copy-hero-plate-span > .hero-overlay-row--shapes {
  margin-top: auto;
}
#easy-copy-list-host .hero-overlay-row--shapes .gct-btn,
#easy-catch-settings .hero-overlay-row--shapes .gct-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 3.15rem;
  padding: 0.45rem 0.35rem;
  font-size: 0.92rem;
  white-space: nowrap;
}
.easy-copy-hero-fit-note {
  margin: 0;
  color: #6a3b12;
}
.easy-copy-hero-fit-note[hidden] {
  display: none !important;
}

body.atelier.mode-detail .easy-only-note,
body.atelier.color-mode-detail .easy-only-note {
  display: none !important;
}

body.atelier.color-mode-easy .detail-only-block,
body.atelier.mode-easy .detail-only-block {
  display: none !important;
}

body.atelier.color-mode-easy .detail-only-inline,
body.atelier.mode-easy .detail-only-inline {
  display: none !important;
}
body.atelier.color-mode-easy .zone-badge[data-open-step="site-fonts"] {
  display: none !important;
}

.look-controls-host:empty {
  display: none;
}

.look-controls .layout-look-fieldset {
  margin: 0.35rem 0;
}

.look-controls .layout-look-fieldset + .layout-look-fieldset {
  margin-top: 0.65rem;
}

/* ?? ????????????????? ?? */
.entry-gate[data-entry-step="sushi"] .entry-gate-panel--full {
  width: min(72rem, 100%);
  max-width: 100%;
  padding: 0.55rem clamp(0.65rem, 2vw, 1.25rem) 0.85rem;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
}
.entry-gate[data-entry-step="sushi"] .entry-gate-lead:empty {
  display: none;
}

.sushi-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#entry-sushi-field.sushi-shelf {
  /* ????????4?5??????????????????????? */
  --sushi-tile-w: 210px;
  --sushi-tile-h: 296px;
  --sushi-tile-gap: 18px;
  --sushi-stock-scale: 0.5;
  --sushi-stock-tile-w: calc(var(--sushi-tile-w) * var(--sushi-stock-scale));
  --sushi-stock-tile-h: calc(var(--sushi-tile-h) * var(--sushi-stock-scale));
  --sushi-zoom-ms: 680ms;
  --sushi-stock-in-ms: 360ms;
  --sushi-stock-out-ms: 240ms;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#entry-sushi-field.sushi-shelf[hidden] {
  display: none !important;
}

/* ??????????????????????????????? */
#entry-gate[data-entry-step="sushi"] .entry-gate-banner,
#entry-gate[data-entry-step="sushi"] .entry-gate-title,
#entry-gate[data-entry-step="sushi"] .entry-gate-lead {
  display: none !important;
}
#entry-gate[data-entry-step="sushi"] .entry-gate-panel--full {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  overflow: hidden;
}
#entry-gate[data-entry-step="sushi"] #entry-sushi-field {
  flex: 1 1 auto;
  min-height: 0;
}

.sushi-stage-top {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 0 0 auto;
  min-width: 0;
  /* ?????????????????????????? */
  margin-bottom: 0.85rem;
}

.sushi-sample-note {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #152028;
  text-align: left;
}
.sushi-sample-note li::before {
  content: "・";
}
.sushi-note-em {
  font-weight: 700;
}
.sushi-sample-note-more {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: #152028;
  text-align: left;
}

/* ?1?2?3??????????????????? */
.sushi-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0.2rem;
  min-width: 0;
}
.sushi-chrome-back,
.sushi-chrome-hint {
  font: inherit;
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.3;
  padding: 0.4rem 0.8rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(20, 28, 36, 0.16);
  background: #fff;
  color: #1a242c;
  cursor: pointer;
  white-space: nowrap;
}
.sushi-chrome-back:hover,
.sushi-chrome-hint:hover,
.sushi-chrome-back:focus-visible,
.sushi-chrome-hint:focus-visible {
  border-color: rgba(20, 28, 36, 0.32);
  background: #f7f8f7;
}

/*
  ??????????????????????????????????
  ???????????????????????
*/
.sushi-upper-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  column-gap: 0.7rem;
  row-gap: 0;
  padding: 0.45rem 0.35rem 0;
  min-width: 0;
}
.sushi-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  justify-content: space-between;
  text-align: left;
  gap: 0.7rem;
  min-width: 0;
  max-width: 100%;
}
.sushi-side--add {
  justify-self: end;
  padding: 0.6rem 0.15rem 0.6rem 0;
}
.sushi-side--confirm {
  justify-self: start;
  padding: 0.6rem 0.15rem 0.6rem 0.35rem;
}
.sushi-side .sushi-sample-note {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.sushi-stock-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--sushi-stock-tile-w) / 3);
  min-width: 0;
  margin: 0;
}

.sushi-stock-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 0;
}
.sushi-stock-col.is-selected .sushi-stock-slot {
  outline: 2px solid #2f7d4a;
  outline-offset: 2px;
}
.sushi-stock-num,
.sushi-stock-confirm-row,
.sushi-decide-head,
.sushi-decide-btn,
.sushi-guide,
.sushi-rechoose-path {
  display: none !important;
}

.sushi-stock-slot {
  position: relative;
  width: var(--sushi-stock-tile-w);
  height: var(--sushi-stock-tile-h);
  border-radius: 0.45rem;
  border: 1px dashed rgba(20, 28, 36, 0.22);
  background: rgba(255, 255, 255, 0.72);
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  flex: 0 0 auto;
  transition: transform var(--sushi-stock-in-ms) ease, opacity var(--sushi-stock-out-ms) ease;
}
.sushi-stock-slot.is-empty::after {
  content: none !important;
  display: none !important;
}
.sushi-stock-slot.is-filled {
  background: transparent;
  border: none;
  cursor: pointer;
}
.sushi-stock-slot .sushi-tile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  box-sizing: border-box;
}
.sushi-stock-slot .sushi-tile--stock .sushi-tile-label {
  display: none !important;
}
.sushi-stock-slot .sushi-tile--stock .sushi-tile-clip {
  inset: 0;
}
.sushi-stock-slot.is-empty {
  align-items: center;
  justify-content: center;
  border-style: dashed;
  color: #556;
}
.sushi-stock-slot.is-stock-in {
  animation: sushi-stock-in var(--sushi-stock-in-ms) ease;
}
.sushi-stock-slot.is-stock-out {
  opacity: 0;
  transform: scale(0.92);
}

@keyframes sushi-stock-in {
  from { transform: translateY(12px); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}

.sushi-flow-guide {
  margin: 0;
  color: #12181e;
  font-size: clamp(1.2rem, 1.45vw, 1.45rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.sushi-flow-guide--add,
.sushi-flow-guide--confirm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: max-content;
  max-width: 100%;
}
.sushi-flow-guide--add {
  align-items: center;
}
.sushi-flow-line {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.2rem 0.28rem;
  white-space: nowrap;
  max-width: 100%;
}
.sushi-flow-words {
  white-space: nowrap;
}
.sushi-flow-num {
  flex: 0 0 auto;
  font-size: 1.15em;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}
/* ????????????????????? */
.sushi-flow-arrow {
  flex: 0 0 auto;
  box-sizing: border-box;
  color: #5a6570;
}
.sushi-flow-arrow--down {
  display: block;
  width: 0;
  height: 0;
  margin: 0.12rem 0 0 0.2rem;
  border-style: solid;
  border-width: 0.72em 0.48em 0;
  border-color: currentColor transparent transparent;
  font-size: 0.95rem;
}
.sushi-flow-guide--add .sushi-flow-arrow--down {
  width: 0;
  margin-left: auto;
  margin-right: auto;
}
.sushi-flow-arrow--up {
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto 0.15rem;
  border-style: solid;
  border-width: 0 0.48em 0.72em;
  border-color: transparent transparent currentColor;
  font-size: 0.95rem;
}
.sushi-flow-arrow--left {
  display: inline-block;
  vertical-align: -0.08em;
  width: 0;
  height: 0;
  margin: 0 0.35em 0 0;
  border-style: solid;
  border-width: 0.42em 0.68em 0.42em 0;
  border-color: transparent currentColor transparent transparent;
  font-size: 0.95rem;
}

@media (max-width: 720px) {
  .sushi-upper-band {
    padding: 0.3rem 0.2rem;
  }
  .sushi-flow-guide {
    font-size: 1.15rem;
  }
  .sushi-flow-line {
    white-space: normal;
    flex-wrap: wrap;
  }
  .sushi-flow-words {
    white-space: normal;
  }
  .sushi-chrome-back,
  .sushi-chrome-hint {
    font-size: 0.9rem;
    padding: 0.35rem 0.55rem;
  }
}

/* ??????3??????????????????????? */
.sushi-slot-pop {
  position: fixed;
  inset: 0;
  z-index: 78;
  display: block;
  padding: 0;
  box-sizing: border-box;
  background: rgba(18, 24, 30, 0.22);
  pointer-events: auto;
}
.sushi-slot-pop[hidden] {
  display: none !important;
}
.sushi-slot-pop-card {
  position: fixed;
  width: min(16rem, calc(100vw - 1.5rem));
  pointer-events: auto;
  background: #fff;
  border-radius: 0.7rem;
  padding: 0.95rem 1rem 0.8rem;
  box-shadow: 0 16px 40px rgba(20, 28, 36, 0.28);
  border: 1px solid rgba(20, 28, 36, 0.1);
  display: grid;
  gap: 0.45rem;
  z-index: 1;
}

.sushi-slot-pop-title {
  margin: 0 0 0.15rem;
  font-size: 1.08rem;
  font-weight: 800;
  color: #12181c;
}
.sushi-slot-pop-go,
.sushi-slot-pop-remove,
.sushi-slot-pop-close {
  width: 100%;
  justify-self: stretch;
}
.sushi-slot-pop-close {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.45rem 0.5rem;
  border: 0;
  background: transparent;
  color: #445;
  cursor: pointer;
}

.sushi-guide-actions {
  display: flex;
  justify-content: flex-end;
}

.sushi-tile-btn--up,
.sushi-tile-btn--down {
  display: none !important;
}

.sushi-lane-wrap {
  position: relative;
  margin: 0;
  border-radius: 1rem;
  /* ?????????????????????? */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(248, 246, 242, 0.9)),
    #f3f1ec;
  border: 1px solid rgba(20, 28, 36, 0.07);
  overflow: hidden;
  /* ????????????????????????????????? */
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-height: calc(var(--sushi-tile-h) + 2.4rem);
  height: auto;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.sushi-lane {
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  padding: 1rem calc(var(--sushi-tile-w) * 0.28) 1.15rem;
  user-select: none;
  flex: 1 1 auto;
  min-height: calc(var(--sushi-tile-h) + 2.15rem);
  height: auto;
  max-height: none;
  display: flex;
  align-items: center;
}

.sushi-lane.is-dragging {
  cursor: grabbing;
}

.sushi-lane-track {
  display: flex;
  flex-direction: row;
  gap: var(--sushi-tile-gap);
  width: max-content;
  will-change: transform;
  /* ???? .sushi-lane ? padding ?????????????? */
  padding-inline: 0;
}

.sushi-lane-empty {
  margin: 1.5rem;
  color: #556;
  font-size: 0.9rem;
}

.sushi-gate-help {
  display: none !important;
}

.sushi-zoom-frame {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  background: #fff;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.sushi-zoom-frame.is-pending {
  position: relative;
  background: #f4f1ea;
}
.sushi-zoom-pending {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 1rem;
  font-size: 0.92rem;
  color: #445;
  background: #f4f1ea;
  pointer-events: none;
}
.sushi-zoom-frame:not(.is-pending) .sushi-zoom-pending {
  display: none;
}
.sushi-zoom-iframe {
  display: block;
  width: 100%;
  height: auto;
  min-height: 70vh;
  border: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sushi-zoom-iframe.is-ready {
  opacity: 1;
  min-height: 0;
}
.sushi-zoom-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
  background: #fff;
}
.sushi-actions { display: none !important; }

.sushi-tile {
  position: relative;
  flex: 0 0 auto;
  width: var(--sushi-tile-w);
  height: var(--sushi-tile-h);
  border-radius: 0.45rem;
  background: #fff;
  border: 1px solid rgba(20, 28, 36, 0.14);
  box-shadow: 0 6px 16px rgba(20, 28, 36, 0.08);
  overflow: hidden;
}

.sushi-tile-clip {
  position: absolute;
  inset: 0 0 1.35rem 0;
  overflow: hidden;
  background: #dfe3df;
}

.sushi-tile-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  /* ???????????????????????????? */
  object-position: top center;
  pointer-events: none;
}

.sushi-tile-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0.2rem 0.35rem;
  font-size: 0.68rem;
  line-height: 1.25;
  background: rgba(255, 255, 255, 0.94);
  color: #223;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sushi-tile-btn {
  position: absolute;
  z-index: 2;
  top: 0.28rem;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(20, 28, 36, 0.18);
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(20, 28, 36, 0.12);
}

.sushi-tile-btn--up { left: 0.28rem; }
.sushi-tile-btn--down { left: 0.28rem; }
.sushi-tile-btn--zoom { right: 0.28rem; }

.sushi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
  margin-bottom: 0.35rem;
}

.sushi-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(10, 14, 18, 0.45);
  padding: 1rem;
}

/* ????????????????????????? */
#sushi-guide-modal.sushi-modal {
  place-items: start center;
  align-content: start;
  padding-top: 0.55rem;
  padding-bottom: 1rem;
  transition: background 0.35s ease;
}

/* ?????????????????????????? */
#sushi-guide-modal.sushi-modal.is-sucking {
  background: rgba(10, 14, 18, 0);
  pointer-events: none;
}

.sushi-chrome-hint.is-hint-pulse {
  animation: sushi-hint-pulse 0.65s ease;
}

@keyframes sushi-hint-pulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 125, 74, 0); }
  35% { box-shadow: 0 0 0 4px rgba(47, 125, 74, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(47, 125, 74, 0); }
}

.sushi-modal[hidden] { display: none !important; }

.sushi-modal-card {
  width: min(22rem, 100%);
  background: #fff;
  border-radius: 0.75rem;
  padding: 1rem 1.1rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.sushi-modal-card.sushi-guide-card {
  /* ??????????????????????? */
  --sushi-guide-title-size: 1.4rem;
  padding: 0.9rem 1.4rem 1.1rem;
  width: min(34rem, calc(100vw - 2rem));
}

.sushi-modal-card h2,
.sushi-modal-card h3 {
  margin: 0 0 0.35rem;
}

.sushi-guide-card #sushi-guide-title {
  /* 100%??? */
  margin: 0 0 1.4rem;
  font-size: var(--sushi-guide-title-size);
  font-weight: 800;
  line-height: 1.3;
  color: #12181c;
}

.sushi-guide-body {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin: 0 0 1.1rem;
}

.sushi-guide-block {
  margin: 0;
  padding: 0;
}

.sushi-guide-heading {
  /* 75?80%????? */
  margin: 0 0 0.35rem;
  font-size: calc(var(--sushi-guide-title-size) * 0.78);
  font-weight: 700;
  line-height: 1.35;
  color: #1a242c;
}

.sushi-guide-text {
  /* 65?70%??? */
  margin: 0;
  font-size: calc(var(--sushi-guide-title-size) * 0.68);
  font-weight: 400;
  line-height: 1.6;
  color: #334;
}

.sushi-guide-block--note .sushi-guide-text {
  font-size: calc(var(--sushi-guide-title-size) * 0.68);
  color: #556;
}

.sushi-guide-card .sushi-guide-steps,
.sushi-guide-card .sushi-guide-note {
  display: none !important;
}

.sushi-guide-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.2rem;
}

.sushi-modal-note {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  color: #445;
}

.sushi-modal-card.sushi-replace-card {
  width: min(42rem, calc(100vw - 2rem));
}

.sushi-replace-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}

.sushi-replace-choice {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  text-align: left;
  font: inherit;
  padding: 0.4rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(20, 28, 36, 0.16);
  background: #f7f8f7;
  cursor: pointer;
}

.sushi-replace-shot {
  display: block;
  height: 9.2rem;
  overflow: hidden;
  border-radius: 0.3rem;
  background: #dfe3df;
}

.sushi-replace-shot img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.sushi-replace-name {
  font-size: 0.78rem;
  line-height: 1.35;
  color: #223;
}

.sushi-zoom-layer {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: grid;
  place-items: center;
  /* ???????????????????? */
  padding: 0.9rem clamp(0.75rem, 3vw, 1.6rem);
  box-sizing: border-box;
  /* ???????????????? */
  background: rgba(232, 229, 222, 0.88);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sushi-zoom-ms) ease;
}

.sushi-zoom-layer.is-open {
  opacity: 1;
  pointer-events: auto;
  overscroll-behavior: contain;
}
.sushi-zoom-frame {
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.sushi-zoom-layer[hidden] { display: none !important; }

.sushi-zoom-inner {
  /* ?????2/3?????????????????? */
  width: min(66.67vw, 1200px);
  max-width: calc(100vw - 1.5rem);
  height: calc(100vh - 2.2rem);
  max-height: calc(100vh - 2.2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 0.55rem;
  border: 1px solid rgba(20, 28, 36, 0.08);
  box-shadow: 0 12px 36px rgba(40, 44, 48, 0.12);
  transform: scale(0.96);
  transition: transform var(--sushi-zoom-ms) ease;
}

.sushi-zoom-close {
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .sushi-zoom-layer {
    padding: 0.45rem clamp(0.4rem, 3vw, 0.75rem);
  }
  .sushi-zoom-inner {
    width: min(92vw, 100%);
    height: calc(100vh - 1.2rem);
    max-height: calc(100vh - 1.2rem);
  }
}

.sushi-zoom-layer.is-open .sushi-zoom-inner {
  transform: scale(1);
}

.sushi-zoom-inner img {
  display: block;
  width: 100%;
  height: auto;
}

.sushi-zoom-close {
  margin: 0.45rem 0.9rem 0.85rem;
  font: inherit;
  padding: 0.4rem 0.75rem;
  border-radius: 0.4rem;
  border: 1px solid #889;
  background: #f4f4f4;
  cursor: pointer;
}

/* ??????????????????? .sushi-modal ??? */
.sushi-tutorial {
  display: none !important;
}

.sushi-tutorial[hidden] { display: none !important; }

.sushi-tutorial-dim {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 16, 0.62);
}

.sushi-tutorial-card {
  position: relative;
  z-index: 1;
  width: min(22rem, calc(100% - 2rem));
  margin: 0;
  background: #fff;
  border-radius: 0.75rem;
  padding: 0.55rem 1rem 0.75rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.sushi-tutorial-card h2,
.sushi-tutorial-card h3 {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
}

.sushi-tutorial-steps {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #334;
}

.sushi-tutorial-note {
  margin: 0.85rem 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #556;
}

.sushi-tutorial-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

/* ??????????????????????????html???????? */
html.sample-flow-hide-preview .atelier-preview,
html.sample-flow-hide-preview .preview-pane,
html.sample-flow-hide-preview .atelier-preview-col,
html.sample-flow-hide-preview .split-handle,
html.sample-flow-hide-preview #chrome-preview-width {
  display: none !important;
}

html.sample-flow-hide-preview .dash-pane {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-width: 0;
  align-items: center;
  background: #fff;
}

/* ???????????????????? */
html.sample-flow-hide-preview .dash-header,
html.sample-flow-hide-preview .dash-body,
html.sample-flow-hide-preview .wizard-head-dock,
html.sample-flow-hide-preview .wizard-foot-dock,
html.sample-flow-hide-preview .dash-width-rail {
  width: min(56rem, 100%);
  max-width: 100%;
  box-sizing: border-box;
}

.sample-img-wire-layout {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 720px) {
  .sample-img-wire-layout {
    grid-template-columns: 1.1fr 1fr;
    align-items: start;
  }
}

.sample-img-wire-stage {
  display: grid;
  gap: 0.45rem;
  padding: 0.75rem;
  border: 1px solid rgba(20, 28, 36, 0.14);
  border-radius: 0.65rem;
  background: #f0f2f0;
}

.sample-wire-slot {
  min-height: 2.6rem;
  border: 2px solid #111;
  border-radius: 0.35rem;
  background: #fff;
  color: #111;
  font-size: 0.85rem;
  cursor: pointer;
}

.sample-wire-slot[data-wire-slot="hero"] {
  min-height: 4.2rem;
}

.sample-wire-slot.is-active {
  outline: none;
  border-color: #3d8a48;
  box-shadow: 0 0 0 1px #3d8a48;
  background: #fff;
}

.sample-img-wire-list {
  display: grid;
  gap: 0.65rem;
}

.sample-img-wire-list .easy-img-panel {
  padding: 0.65rem;
  border: 1px solid rgba(20, 28, 36, 0.12);
  border-radius: 0.55rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: flex-start;
}

.sample-img-wire-list .easy-img-panel .gct-btn + .gct-btn {
  margin-top: 0;
}

.sample-img-wire-list .easy-img-panel.is-current {
  border-color: #3d8a48;
  box-shadow: none;
  background: #fff;
}

.sample-create-anim {
  animation: sample-suck 1.8s ease-in-out;
}

@keyframes sample-suck {
  0% { transform: scale(1); opacity: 1; }
  55% { transform: scale(0.72); opacity: 0.55; }
  100% { transform: scale(1); opacity: 1; }
}

/* ???? (?capture=1) ? ??????????????????? */
html.is-capture-mode,
html.is-capture-mode body {
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  overflow: hidden !important;
  min-height: 0 !important;
  /* height ? JS ?????????????auto !important ????? */
}

html.is-capture-mode body.atelier {
  display: block !important;
}

html.is-capture-mode #entry-gate,
html.is-capture-mode .atelier-chrome,
html.is-capture-mode .atelier-menu,
html.is-capture-mode .dash-pane,
html.is-capture-mode .mobile-tabs,
html.is-capture-mode .draft-notice,
html.is-capture-mode .chrome-help-btn,
html.is-capture-mode [data-split-handle],
html.is-capture-mode .preview-toolbar,
html.is-capture-mode .atelier-preview-guide {
  display: none !important;
}

html.is-capture-mode .atelier-tabs,
html.is-capture-mode .atelier-tab,
html.is-capture-mode .mobile-tabbar,
html.is-capture-mode .wizard-rail,
html.is-capture-mode .finish-bar,
html.is-capture-mode .toast,
html.is-capture-mode .modal,
html.is-capture-mode [hidden] {
  display: none !important;
}

html.is-capture-mode .atelier-split {
  display: block !important;
  width: 1200px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

html.is-capture-mode .preview-pane {
  display: block !important;
  width: 1200px !important;
  max-width: 1200px !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
}

html.is-capture-mode .preview-scroll {
  overflow: hidden !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  flex: none !important;
}

html.is-capture-mode .preview-viewport {
  transition: none !important;
}
html.is-capture-mode #preview-viewport {
  width: 1200px !important;
  max-width: 1200px !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html.is-capture-mode #preview-root {
  width: 1200px !important;
  max-width: 1200px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
}

/* ??????????????? */
html.is-capture-mode #preview-root .site-footer,
html.is-capture-mode #preview-footer {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

html.is-capture-mode #preview-root > *:last-child {
  margin-bottom: 0 !important;
}

html.is-capture-mode body.sample-flow-hide-preview .preview-pane,

html.is-capture-mode .hero-copy,
html.is-capture-mode .easy-loading-panel,
html.is-capture-mode .easy-loading-bar-fill {
  animation: none !important;
}
html.is-capture-mode body.sample-flow-hide-preview #preview-root {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* ?? 2026-09-11 UI??? ?? */
.hub-abc-block {
  display: none !important;
}

.preview-toolbar-label {
  display: none !important;
}

.item-grow-popover[hidden] {
  display: none !important;
}
.item-grow-popover {
  position: fixed;
  inset: 0;
  z-index: 95;
}
.item-grow-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(12, 18, 16, 0.42);
  cursor: pointer;
}
.item-grow-tabs {
  position: fixed;
  z-index: 2;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
}
.item-grow-tab {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  min-width: 9.5rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(20, 28, 36, 0.16);
  border-radius: 0.65rem;
  background: #fff;
  color: #123;
  font: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  white-space: nowrap;
}
.item-grow-tab:hover {
  border-color: #3d8a48;
  background: #fff;
}
.item-grow-tab--full {
  bottom: 50%;
  margin-bottom: 1.85rem;
}
.item-grow-tab--half {
  top: 50%;
  margin-top: 1.85rem;
}

.chrome-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: 0.55rem;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.chrome-brand--lockup {
  gap: 0;
}
.chrome-brand-lockup {
  display: block;
  height: 2.85rem;
  width: auto;
  max-width: min(11.5rem, 42vw);
  object-fit: contain;
  object-position: left center;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
}
.chrome-brand-mark {
  display: block;
  width: 2.35rem;
  height: 2.35rem;
  flex-shrink: 0;
}
.chrome-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.12;
}
.chrome-brand-name {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.chrome-brand-rome {
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  opacity: 0.72;
}

.finish-url-slug {
  display: block;
  margin: 0.75rem 0 0.25rem;
  font-weight: 700;
}
.finish-url-slug input {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #c5ced6;
  border-radius: 0.45rem;
  font: inherit;
  background: #fff;
}
.finish-url-slug input.is-invalid {
  border-color: #b42318;
  background: #fff6f5;
}
.finish-url-slug-warn {
  margin: 0.25rem 0 0.5rem;
  color: #b42318;
  font-size: 0.85rem;
  font-weight: 700;
}

/* ??UI???????????????????????????? */
.entry-gate {
  background: #fff;
}
.entry-gate-panel--full,
.entry-branch-card-inner {
  background: #fff;
}
.entry-gate-apply,
.btn.btn-primary,
.gct-btn-primary,
.finish-submit-row .btn-primary {
  min-height: 3.15rem;
  padding: 0.85rem 1.25rem;
  font-size: 1.05rem;
  border-radius: 0.55rem;
}
.atelier-chrome {
  background: #fff;
  border-bottom: 1px solid rgba(20, 28, 36, 0.1);
  color: #152028;
}
.atelier-chrome .chrome-help-btn,
.atelier-chrome .dash-reset-btn {
  color: #152028;
  border-color: rgba(21, 32, 40, 0.22);
  background: #fff;
}
.dash-pane {
  background: #fff;
}
.preview-pane {
  background: #fff;
}
#chrome-preview-width {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-self: center;
  justify-content: flex-start;
  width: max-content;
  max-width: calc(100% - 1.2rem);
  flex: 0 0 auto;
  gap: 0;
  margin: 0.55rem auto 0.4rem;
  padding: 0;
  color: #152028;
  pointer-events: auto;
  background: transparent;
  white-space: nowrap;
}
#chrome-preview-width .preview-width-hint,
#chrome-preview-width .preview-width-device {
  display: none;
}
#chrome-preview-width .preview-look-sep,
#chrome-preview-width .preview-group-sep {
  display: inline;
  flex: 0 0 auto;
  margin: 0 0.7rem;
  color: rgba(21, 32, 40, 0.35);
  font-weight: 400;
  line-height: 1;
}
#chrome-preview-width .preview-width-ruler {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  width: auto;
  gap: 0.85rem;
}
#chrome-preview-width .preview-width-dot {
  flex: 0 0 auto;
  width: auto;
}
#chrome-preview-width .preview-width-line {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  width: auto;
  margin-left: 0.85rem;
  gap: 0;
}
#chrome-preview-width .preview-width-meta {
  display: inline-flex;
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
}
#chrome-preview-width .preview-width-px {
  color: #152028;
}
#chrome-preview-width .preview-look,
#chrome-preview-width .preview-look[hidden] {
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.45rem;
  color: #152028;
}
#chrome-preview-width .preview-scale-pct + .preview-look-btn {
  margin-left: 0;
}
#chrome-preview-width .preview-scale-pct {
  display: inline-block;
  box-sizing: content-box;
  width: 5ch;
  min-width: 5ch;
  margin: 0;
  padding: 0;
  color: #152028;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}
#chrome-preview-width .preview-look-btn {
  color: #152028;
  border-color: rgba(21, 32, 40, 0.55);
}
#chrome-preview-width .preview-look-btn:disabled {
  opacity: 1;
  color: rgba(21, 32, 40, 0.55);
  border-color: rgba(21, 32, 40, 0.35);
}

@media (max-width: 860px) {
  #chrome-preview-width {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.35rem;
    width: 100%;
    max-width: 100%;
    white-space: normal;
  }
}

.hub-preview-width-block {
  padding: 0.35rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.hub-preview-width-block[hidden] {
  display: none !important;
}

.chrome-control--in-hub .preview-width-dot {
  border-color: rgba(21, 32, 40, 0.55);
  background: #fff;
}
.chrome-control--in-hub .preview-width-dot.is-on {
  background: #152028;
  border-color: #152028;
}
.chrome-control--in-hub .preview-width-tick {
  background: rgba(21, 32, 40, 0.35);
}
.dash-width-rail .preview-width-hint,
.dash-width-rail .preview-width-device,
.dash-width-rail .preview-width-px,
.dash-width-rail .preview-width-meta,
.dash-width-rail .preview-width-step-btn,
.dash-width-rail .preview-look,
.dash-width-rail .preview-look-sep,
.dash-width-rail .preview-look-btn,
.preview-width-rail .preview-width-hint,
.preview-width-rail .preview-width-device,
.preview-width-rail .preview-width-px,
.preview-width-rail .preview-width-meta,
.preview-width-rail .preview-width-step-btn,
.preview-width-rail .preview-width-ruler,
.preview-width-rail .preview-look,
.preview-width-rail .preview-look-sep,
.preview-width-rail .preview-look-btn,
.chrome-control--in-hub,
.chrome-control--in-hub .preview-width-hint,
.chrome-control--in-hub .preview-width-device,
.chrome-control--in-hub .preview-width-px,
.chrome-control--in-hub .preview-width-meta,
.chrome-control--in-hub .preview-width-step-btn,
.chrome-control--in-hub .preview-look,
.chrome-control--in-hub .preview-look-sep,
.chrome-control--in-hub .preview-look-btn {
  color: #1a1f1c !important;
}
.chrome-control--in-hub .preview-width-hint {
  color: #4a5560 !important;
}

.step-font-embed {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid #d5dde4;
  border-radius: 0.55rem;
  background: #f7f9fb;
}
.step-font-embed .font-picker-block {
  margin: 0;
}
.dash-block[data-step-id="site-fonts"],
#site-fonts-reservoir:empty {
  display: none !important;
}

.font-picker-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid #c9d3db;
  border-radius: 0.55rem;
  background: #fff;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.font-picker-toggle:hover {
  border-color: #3d8a48;
  background: #fff;
}
.font-picker-block.is-open .font-picker-toggle {
  border-color: #3d8a48;
  background: #fff;
}
.font-picker-toggle-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  min-width: 0;
}
.font-picker-current {
  font-weight: 600;
  color: #3a454e;
  font-size: 0.86rem;
}
.font-picker-block .font-picker[hidden] {
  display: none !important;
}
.font-picker-block .font-picker:not([hidden]) {
  margin-top: 0.55rem;
}

/* ?????UI???????????? */
.ui-disclosure-chevron {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #3a454e;
  font-size: 0.72rem;
  line-height: 1;
  transition: transform 0.15s ease;
}
.ui-disclosure-chevron::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -0.15rem;
  box-sizing: border-box;
}
.font-picker-block.is-open .ui-disclosure-chevron,
.font-picker-toggle[aria-expanded="true"] .ui-disclosure-chevron {
  transform: rotate(180deg);
}

.dash-block > summary,
.dash-group > summary,
.preview-site .accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  list-style: none;
}
.dash-block > summary::-webkit-details-marker,
.dash-group > summary::-webkit-details-marker,
.preview-site .accordion summary::-webkit-details-marker {
  display: none;
}
/* ? style.css ? ::before ??????????????????????? ::after ?? */
.preview-site .accordion summary::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: none !important;
}
.dash-block > summary::after,
.dash-group > summary::after {
  content: "?";
  flex: 0 0 auto;
  font-size: 0.72rem;
  line-height: 1;
  color: #3a454e;
  transition: transform 0.15s ease;
}
/* ????????????????????????? */
.preview-site .accordion summary::after {
  content: "?";
  flex: 0 0 auto;
  font-size: 0.72rem;
  line-height: 1;
  color: currentColor;
  opacity: 0.78;
  transition: transform 0.15s ease;
}
.dash-block[open] > summary::after,
.dash-group[open] > summary::after,
.preview-site .accordion[open] > summary::after {
  transform: rotate(180deg);
}
.dash-block > summary.visually-hidden::after,
.dash-group > summary.visually-hidden::after {
  content: none;
  display: none;
}

#preview-root [data-layout-block].is-preview-dragging {
  outline: 2px dashed #3d8a48;
  outline-offset: 2px;
  opacity: 0.88;
}
#preview-root [data-layout-block].is-preview-drop-target {
  outline: 2px solid #2f8a45;
  outline-offset: 2px;
}
#preview-root main.is-preview-layout-dragging [data-layout-block] {
  cursor: grabbing;
}

/* PC????????????? */
.preview-viewport.is-desktop .preview-site {
  --shell: min(100%, 74rem);
  --gutter: clamp(1rem, 2.2vw, 1.6rem);
}
.preview-viewport.is-desktop .preview-site .hero-lead {
  max-width: min(52rem, 94%);
}
.preview-viewport.is-desktop .preview-site .hero-copy h1 {
  font-size: calc(3.45rem * var(--heading-scale, 1)) !important;
}
.preview-viewport.is-desktop .preview-site .section > .shell > h2 {
  font-size: clamp(1.55rem, 2.4vw, 2.05rem);
}
.preview-viewport.is-laptop .preview-site,
.preview-viewport.is-desktop .preview-site #about-photos.skill-cards,
.preview-viewport.is-desktop .preview-site #works-list.work-list {
  width: 100%;
}

/* ?? ??????????????? Fit ?? */
/* display:flex ? [hidden] ????????????????????? */
.hub-entry[hidden],
.hub-place-pick[hidden],
.hub-place-section[hidden],
.hub-task-pick[hidden],
.hub-task-where[hidden],
.hub-layout-stack[hidden] {
  display: none !important;
}
.hub-entry {
  margin: 0.35rem 0 0.85rem;
}
.hub-entry-cards {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.hub-entry-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center; /* ??????????? */
  gap: 0.5rem;
  width: 100%;
  min-height: 3.6rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(20, 28, 36, 0.16); /* ????????? */
  border-radius: 0.7rem;
  background: #fff;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.hub-entry-card:hover:not(:disabled),
.hub-entry-card:focus-visible:not(:disabled) {
  border-color: #3d8a48; /* ?????????????????????? */
  background: #fff;
  box-shadow: none;
  outline: none;
}
.hub-entry-card:disabled,
.hub-entry-card.is-soon {
  opacity: 0.55;
  cursor: not-allowed;
  background: #f4f6f8;
}
.hub-entry-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1f1c;
  line-height: 1.35;
}
.hub-entry-card-note {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #5a6570;
}
.hub-place-pick {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0.4rem 0 0.8rem;
}
.hub-place-names {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.hub-place-name-btn {
  width: 100%;
  min-height: 3.1rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(20, 28, 36, 0.16);
  border-radius: 0.65rem;
  background: #fff;
  color: #1a1f1c;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.hub-place-name-btn:hover,
.hub-place-name-btn:focus-visible {
  border-color: #3d8a48;
  background: #fff;
  box-shadow: none;
  outline: none;
}
.hub-nav-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin-top: 0.85rem;
  padding-top: 0.15rem;
}
.hub-nav-row .gct-btn-primary {
  margin-left: auto;
}
.hub-place-section {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0.4rem 0 0.8rem;
}
.hub-place-section-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a1f1c;
}
.hub-place-section-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hub-task-pick,
.hub-task-where {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0.4rem 0 0.8rem;
}
.hub-task-names,
.hub-task-where-names {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.hub-task-name-btn,
.hub-task-where-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  min-height: 3.1rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(20, 28, 36, 0.16);
  border-radius: 0.65rem;
  background: #fff;
  color: #1a1f1c;
  text-align: left;
  cursor: pointer;
}
.hub-task-name-btn:hover,
.hub-task-name-btn:focus-visible,
.hub-task-where-btn:hover,
.hub-task-where-btn:focus-visible {
  border-color: #3d8a48;
  background: #fff;
  box-shadow: none;
  outline: none;
}
.hub-task-name-title {
  font-size: 1.05rem;
  font-weight: 700;
}
.hub-task-name-note {
  font-size: 0.82rem;
  color: #5a6570;
  font-weight: 500;
}
.hub-task-where-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a1f1c;
}
.hub-place-action-btn {
  min-height: 3.1rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(20, 28, 36, 0.16);
  border-radius: 0.65rem;
  background: #fff;
  color: #1a1f1c;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}
.hub-place-action-btn:hover,
.hub-place-action-btn:focus-visible {
  border-color: #3d8a48;
  background: #fff;
  outline: none;
  box-shadow: none;
}

.preview-scroll.is-hub-place-fit {
  align-items: center;
  overflow: hidden;
}
.preview-scroll.is-hub-place-fit #preview-viewport {
  align-self: center;
  transition: transform 0.35s ease, margin-bottom 0.35s ease;
}

body.hub-place-pick #preview-root {
  pointer-events: auto;
}
body.hub-place-pick #preview-root [data-layout-block].is-hub-place-hot {
  pointer-events: auto;
  cursor: pointer !important;
  outline: 2px solid rgba(250, 204, 21, 0.95);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.28), 0 0 18px rgba(250, 204, 21, 0.35);
  animation: hub-place-hot-in 0.45s ease;
}
body.hub-place-pick #preview-root [data-layout-block]:not(.is-hub-place-hot) {
  opacity: 0.42;
  pointer-events: none;
}
/* ????????????????????????? */
body.hub-ui-layout #preview-root [data-layout-block],
body.hub-ui-layout #preview-root [data-layout-block]:not(.is-hub-place-hot) {
  opacity: 1;
  pointer-events: none;
  outline: none;
  box-shadow: none;
  animation: none;
}
body.hub-ui-layout .preview-width-rail {
  opacity: 1;
  pointer-events: auto;
}
body.hub-place-pick #preview-root .preview-hit,
body.hub-place-pick #preview-root .zone-badge,
body.hub-place-pick #preview-root [data-open-step] {
  cursor: pointer !important;
}
body.hub-place-pick .preview-width-rail {
  opacity: 1;
  pointer-events: auto;
}
body.hub-place-section-open #preview-root [data-layout-block].is-hub-place-chosen {
  outline: 2px solid #2f8a45;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(47, 138, 69, 0.22);
}
body.hub-place-section-open #preview-root [data-layout-block]:not(.is-hub-place-chosen) {
  opacity: 0.4;
}
#preview-root [data-layout-block].is-hub-place-chosen {
  outline: 2px solid #2f8a45;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(47, 138, 69, 0.22);
}
@keyframes hub-place-hot-in {
  from {
    box-shadow: 0 0 0 0 rgba(250, 204, 21, 0);
  }
  to {
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.28), 0 0 18px rgba(250, 204, 21, 0.35);
  }
}

/* ?? ????????????????? ?? */
body.hub-shell-focus .dash-resume-notice,
body.hub-shell-focus .dash-width-rail,
body.hub-shell-focus .wizard-head-dock,
body.hub-shell-focus #wizard-top {
  display: none !important;
}
body.hub-shell-focus:not(.hub-place-editing):not(.hub-shell-back) .wizard-foot-dock,
body.hub-shell-focus:not(.hub-place-editing):not(.hub-shell-back) #wizard-nav {
  display: none !important;
}
body.hub-shell-focus.hub-shell-back .wizard-foot-dock {
  display: block !important;
  flex: 0 0 auto;
  z-index: 3;
}
body.hub-shell-focus.hub-shell-back #wizard-nav {
  display: flex !important;
}
/* ????????????OK ????? */
body.hub-shell-focus.hub-place-editing .wizard-foot-dock {
  display: block !important;
  flex: 0 0 auto;
  z-index: 3;
}
body.hub-shell-focus.hub-place-editing #wizard-nav {
  display: flex !important;
}
body.hub-shell-focus.atelier {
  overflow: hidden;
  height: 100dvh;
}
body.hub-shell-focus .atelier-shell {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
/* ???????????????????OK ?????????????? */
body.is-review-editing {
  --review-edit-bar-offset: 3.6rem;
}
body.is-review-editing.hub-shell-focus .atelier-shell {
  height: calc(100dvh - var(--review-edit-bar-offset));
  max-height: calc(100dvh - var(--review-edit-bar-offset));
}
body.is-review-editing.hub-shell-focus.atelier {
  height: calc(100dvh - var(--review-edit-bar-offset));
}
body.hub-shell-focus .dash-header {
  padding: 0.45rem 0.85rem 0.35rem;
  border-bottom: 1px solid rgba(20, 28, 36, 0.08);
}
body.hub-shell-focus .dash-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
body.hub-shell-focus .dash-body > .fill-form {
  overflow: hidden;
  padding: 0.55rem 0.85rem 0.65rem;
  display: flex;
  flex-direction: column;
}
body.hub-shell-focus .dash-block.is-active-step {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0.15rem 0 0.35rem;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.hub-shell-focus .dash-block--layout-hub.is-active-step {
  border: 0 !important;
  background: transparent !important;
}
body.hub-shell-focus .dash-block.is-active-step > summary {
  display: none;
}
body.hub-shell-focus .hub-entry,
body.hub-shell-focus .hub-place-pick,
body.hub-shell-focus .hub-place-section,
body.hub-shell-focus .hub-task-pick,
body.hub-shell-focus .hub-task-where,
body.hub-shell-focus .hub-layout-stack {
  max-width: 28rem;
}
body.hub-shell-focus .hub-entry-card {
  min-height: 3.6rem;
  padding: 1rem 1.1rem;
}
body.hub-shell-focus .hub-place-name-btn,
body.hub-shell-focus .hub-place-action-btn,
body.hub-shell-focus .hub-task-name-btn,
body.hub-shell-focus .hub-task-where-btn {
  min-height: 3.25rem;
  font-size: 1.08rem;
}

/* ?? ??????????????????? ?? */
.hub-layout-lead {
  margin: 0.35rem 0 0.55rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1f1c;
  line-height: 1.45;
}
.hub-layout-legend {
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(20, 28, 36, 0.1);
  border-radius: 0.55rem;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
}
.hub-layout-legend-mark {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1a1f1c;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.hub-layout-legend-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #5a6570;
}
.hub-legend-dot {
  color: #3d8a48;
  font-size: 0.75rem;
  line-height: 1;
}
.hub-tip-wrap {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  margin-left: 0.1rem;
}
.hub-tip-btn {
  position: relative;
  top: -0.35em;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border: 1px solid #9aa6b2;
  border-radius: 999px;
  background: #fff;
  color: #3a4450;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}
.easy-copy-acc-choices .hub-tip-wrap {
  position: relative;
  align-self: center;
}
.easy-copy-acc-choices .hub-tip-pop {
  left: 0;
  right: auto;
  bottom: auto;
  top: calc(100% + 0.35rem);
  max-width: min(14rem, 68vw);
}
.hub-tip-pop {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.35rem);
  z-index: 5;
  width: max-content;
  max-width: 14rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid #c5ced6;
  border-radius: 0.45rem;
  background: #fff;
  box-shadow: 0 6px 18px rgba(20, 28, 36, 0.12);
  color: #1a1f1c;
  font-size: 0.78rem;
  line-height: 1.4;
  white-space: normal;
}
/* ???????????????????? */
body.hub-shell-focus .hub-place-pick,
body.hub-shell-focus .hub-place-section,
body.hub-shell-focus .hub-task-pick,
body.hub-shell-focus .hub-task-where,
body.hub-shell-focus .hub-layout-stack {
  min-height: min(100%, 22rem);
}
body.hub-shell-focus .hub-nav-row {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: auto;
  padding-top: 0.65rem;
  padding-bottom: 0.35rem;
  background: linear-gradient(180deg, rgba(246, 246, 245, 0) 0%, #f6f6f5 28%);
}

.about-display-mode {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(20, 28, 36, 0.12);
  border-radius: 0.55rem;
  background: #fff;
}
.about-display-mode legend {
  padding: 0 0.2rem;
  font-weight: 700;
}
.about-display-opt {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.35rem 0 0;
}
.about-display-opt + .about-display-opt {
  margin-top: 0.45rem;
}

/* ??????????????? */
#about-accordions.is-flat-items details.accordion > summary {
  pointer-events: none;
  cursor: default;
  list-style: none;
}
#about-accordions.is-flat-items details.accordion > summary::-webkit-details-marker {
  display: none;
}
#about-accordions.is-flat-items details.accordion > summary::after {
  display: none !important;
}
.hub-wire-toolbar--layout-min {
  margin: 0 0 0.45rem;
}
.layout-arrange--structure .layout-arrange-wire {
  gap: 0.45rem;
}
.layout-arrange-cell--structure {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-height: 3.05rem;
  padding: 0.45rem 0.65rem;
  border: 2px solid #c5ced6;
  border-radius: 0.65rem;
  background: #fff;
  cursor: grab;
}
.layout-arrange-cell--structure.is-dragging,
.layout-arrange-cell--structure:active {
  cursor: grabbing;
}
.layout-arrange-cell--structure.is-layout-off {
  opacity: 0.62;
  background: #f4f6f8;
}
.layout-arrange-vis-label {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}
.layout-arrange-vis {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: #3d8a48;
  cursor: pointer;
}
.layout-arrange-cell--structure .layout-arrange-name {
  flex: 1 1 auto;
  align-self: center;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding-inline: 2rem;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  cursor: grab;
  font-size: 1.02rem;
  font-weight: 700;
  pointer-events: none;
}
body.hub-shell-focus .layout-arrange-cell--structure {
  min-height: 3.2rem;
}
/* ???????????????????????? */
body.hub-shell-focus .dash-width-rail,
body.hub-shell-focus .dash-preview-width-slot {
  display: none !important;
}
@media (max-width: 59.99rem) {
  body.hub-shell-focus.show-dash .atelier-mobile-tabs {
    opacity: 0.92;
  }
  body.hub-shell-focus .dash-pane {
    height: calc(100dvh - 2.75rem - 2.55rem);
  }
}

/* ===== UI?? Ver1.1 Phase1: Hierarchy?H1?H4?? ????H1?? 2026-09-17 =====
   H1?????????????????????????H????
   H2?????????????dash-title?entry-gate-title ??
   H3????????????????
   ??????????????????
   ??: H1 1.05?H2 0.98?H3 0.9?H4 0.82?H2?H1???????? */
.entry-gate-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin: 0 0 1rem;
  text-align: center;
  padding-inline: 2.6rem;
}

.entry-gate-product-name,
.atelier-chrome .chrome-product-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #152028;
}

.entry-gate-product-name {
  white-space: normal;
}

.dash-header-row--top .dash-title,
.dash-header .dash-title,
body.hub-shell-focus .dash-title {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.25;
  color: #121816;
}

.entry-gate-title {
  color: #121816;
  font-weight: 700;
  line-height: 1.25;
  font-size: 0.98rem;
  text-align: center;
}

.dash-subhead,
.dash-block--easy .dash-subhead,
.finish-summary-title,
.hub-place-section-title,
.hub-task-where-title {
  margin: 0.85rem 0 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
  color: #121816;
}

.dash-block > .dash-subhead:first-child,
.dash-block--easy > .dash-subhead:first-child,
.finish-summary > .finish-summary-title:first-child {
  margin-top: 0;
}

body.mode-guided .dash-block.is-text-chapter.is-wizard-active .dash-subhead {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
  color: #121816;
}

.easy-field,
.fill-block legend,
.inline-fieldset legend,
.fill-block label,
.dash-block > label {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #1a1f1c;
}

.easy-field,
.fill-block legend,
.inline-fieldset legend {
  font-weight: 700;
}

.fill-block label,
.dash-block > label {
  font-weight: 600;
}

/* ????????? Content/H3???????????? Phase2? */
.hub-entry-card-title,
.entry-branch-card-inner strong {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1f1c;
}

.hub-entry-card-note,
.entry-branch-card-inner span {
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.55;
  color: #4a524c;
}

/* ===== UI?? Ver1.1 Phase2: Button / Toggle / Selection Card ? 2026-09-13 =====
   Hierarchy?Phase1?? System?Phase3???????????????? Phase1 ???? */
.wizard-btn {
  font-size: 0.9rem;
  font-weight: 600;
  background: #e8e4dc;
  color: #222;
  border: 1px solid rgba(0, 0, 0, 0.18);
}

.wizard-foot .wizard-btn {
  border-radius: 999px;
}

.wizard-foot #wizard-next,
.wizard-btn#wizard-next {
  background: #2d6a36;
  border-color: #245a2c;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.7rem 1rem;
}

.wizard-foot #wizard-next:hover:not(:disabled),
.wizard-btn#wizard-next:hover:not(:disabled) {
  background: #245a2c;
}

#easy-copy-later-hint {
  display: none !important;
}
body:not(.is-sample-zip-step):not(.is-easy-done-step) .wizard-foot {
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.15rem 0.2rem 0;
}
body:not(.is-sample-zip-step):not(.is-easy-done-step) .wizard-foot #wizard-back,
body:not(.is-sample-zip-step):not(.is-easy-done-step) .wizard-foot #wizard-next {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 0.42rem 0.85rem;
  font-size: 0.88rem;
  white-space: nowrap;
}
body:not(.is-sample-zip-step):not(.is-easy-done-step) .wizard-foot-dock {
  padding: 0.4rem 0.55rem 2.75rem;
}

.wizard-foot #wizard-next:disabled,
.wizard-btn#wizard-next:disabled {
  background: #c5c5c5;
  border-color: #b0b0b0;
  color: #fff;
  opacity: 1;
  cursor: not-allowed;
}

.btn.btn-primary,
.gct-btn-primary,
.finish-submit-row .btn-primary {
  background: #2d6a36;
  border-color: #245a2c;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
}

.btn.btn-primary:hover:not(:disabled),
.gct-btn-primary:hover:not(:disabled),
.finish-submit-row .btn-primary:hover:not(:disabled) {
  background: #245a2c;
}

.dash-help-link,
.step-cross-link {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a4d8c;
}

.gct-btn {
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: #fff;
  color: #222;
}

.gct-btn.is-active,
.hero-overlay-row .gct-btn.is-active {
  border: 2px solid #3d8a48;
  box-shadow: none;
  background: #fff;
  color: #222;
}

.entry-branch-card-inner {
  padding: 1.15rem 1.2rem;
  border: 2px solid rgba(20, 28, 36, 0.14);
  border-radius: 0.85rem;
}

.entry-branch-card:hover .entry-branch-card-inner,
.entry-branch-card:has(input:checked) .entry-branch-card-inner {
  border-color: #3d8a48;
  box-shadow: none;
  background: #fff;
}

.hub-entry-card {
  padding: 1rem;
  border: 2px solid rgba(20, 28, 36, 0.14);
  border-radius: 0.85rem;
  gap: 0.5rem;
  background: #fff;
  justify-content: center;
}

.hub-entry-card:hover:not(:disabled),
.hub-entry-card:focus-visible:not(:disabled) {
  border-color: #3d8a48;
  box-shadow: none;
  background: #fff;
}

/* ===== UI?? Ver1.1 Phase3: System ? 2026-09-13 =====
   Hierarchy / Button?Toggle?Selection Card ??????????
   H3 ? dash-note ? .dash-field-label ?????????? note ? System ????? */
.step-help,
.entry-gate-lead,
.atelier-menu-lead,
.dash-note,
.finish-summary-lead,
.wizard-status {
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.55;
  color: #555;
}

.entry-gate-lead {
  margin: 0 0 1.35rem;
  color: #3d4540;
}
.entry-resume-only {
  margin: 1.35rem 0 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
  color: #121816;
}
.easy-copy-free-note {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.55;
  color: #121816;
}
body.is-blank-canvas .preview-site .hero-mock-notice {
  display: none !important;
}
body.is-blank-canvas .preview-site .hero-stage.is-hero-image-off {
  min-height: 12rem;
  box-sizing: border-box;
}
body.is-empty-image-frames #preview-root .hero-stage:not(.is-user-upload) {
  background: #fff;
  border: 1px solid rgba(20, 28, 36, 0.35);
  box-shadow: none;
  box-sizing: border-box;
}
body.is-empty-image-frames #preview-root #about-photos .skill-card:not(.is-user-upload) {
  background: #fff;
  border: 1px solid rgba(20, 28, 36, 0.35);
  box-shadow: none;
  border-radius: 0.2rem;
  box-sizing: border-box;
}
body.is-empty-image-frames #preview-root .work-item:not(:has(.is-user-upload)) {
  box-shadow: none;
}
body.is-empty-image-frames #preview-root .work-item:not(:has(.is-user-upload)) .work-item-link {
  position: relative;
}
body.is-empty-image-frames #preview-root .work-item:not(:has(.is-user-upload)) .work-item-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 220px;
  background: #fff;
  border: 1px solid rgba(20, 28, 36, 0.35);
  box-sizing: border-box;
  pointer-events: none;
}
body.is-empty-image-frames #preview-root:is([data-layout="b"], [data-layout="c"]) .work-item:not(:has(.is-user-upload)) .work-item-link::before {
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 180px;
}
body.is-blank-canvas .preview-site .skill-card:not(.is-user-upload) .skill-card-img,
body.is-blank-canvas .preview-site .work-item:not(:has(.is-user-upload)) .work-thumb {
  opacity: 0;
}
body:not(.is-embed-preview) .preview-site .work-link[hidden] {
  display: none !important;
}
body.is-blank-canvas .preview-site .profile-name:empty,
body.is-blank-canvas .preview-site .section-lead:empty,
body.is-blank-canvas .preview-site .hero-value-title:empty,
body.is-blank-canvas .preview-site summary:empty,
body.is-blank-canvas .preview-site .hero-lead:empty {
  display: none !important;
}
.entry-resume-file .entry-intake-note,
.entry-resume-folder .entry-intake-note {
  display: block;
  margin: 0;
}

.atelier-menu-lead {
  margin: 0 0 0.85rem;
  color: #444;
}

.step-help {
  margin: 0.35rem 0 0.55rem;
}

.wizard-coach {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.45;
  color: #444;
  text-align: center;
}

.char-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: #666;
}

.char-count.is-max {
  color: #1a4d8c;
}

.dash-note {
  margin: 0.45rem 0;
}

/* ??? H3????? note ??????????????? */
.dash-note.dash-field-label {
  margin: 0.65rem 0 0.35rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1f1c;
}

.dash-note.warn-note,
.zip-missing {
  font-size: 0.85rem;
  font-weight: 700;
  color: #8b3a2a;
}

.dash-note.warn-note {
  padding: 0.5rem 0.65rem;
  background: #fff8e8;
  border: 1px solid #e0c36a;
  border-radius: 4px;
  color: #5a4a20;
}

/* loading ??????? System?H2 ?????????? */
.easy-loading-panel .dash-subhead,
#easy-loading-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  color: #3d4540;
}

.easy-loading-note {
  font-size: 0.82rem;
  font-weight: 400;
  color: #555;
}

body.mode-guided .dash-block.is-text-chapter.is-wizard-active .dash-note:not(.dash-field-label),
body.mode-guided .dash-block.is-text-chapter.is-wizard-active .dash-sub {
  font-size: 0.82rem;
  line-height: 1.55;
  color: #555;
}

/* ===== ???? Phase1: ????????24 / 16 / 8 / 32?? 2026-09-13 =====
   ??: docs/???/2026-09-13-????-??????.md
   ????????????????????? ?4/8px ????? */
.entry-gate-title {
  margin-bottom: 1rem; /* H2?? 16px */
}

/* H1?? ?24px: hub?????????????? pb+pt ?????
   ?header ? body ????? rail / head-dock ????? + ???????????? */
.dash-header,
body.hub-shell-focus .dash-header {
  padding-bottom: 0.75rem; /* 12px */
}

.dash-body > .fill-form,
.dash-body > .wizard-status-card {
  margin-top: 0;
}

.dash-pane > .dash-body {
  padding-top: 0.75rem; /* 12px ? header?????? ?24px */
}

.dash-subhead,
.dash-block--easy .dash-subhead,
.finish-summary-title {
  margin-top: 2rem; /* ?????? 32px????????????? */
  margin-bottom: 1rem; /* H2??? 16px */
}

.dash-block > .dash-subhead:first-child,
.dash-block--easy > .dash-subhead:first-child,
.finish-summary > .finish-summary-title:first-child {
  margin-top: 0;
}

.easy-field {
  gap: 0.5rem; /* H3??? 8px */
}

.fill-block {
  gap: 1rem; /* ??????? 16px */
}

.fill-block legend,
.inline-fieldset legend {
  margin-bottom: 0.5rem; /* H3??? 8px */
}

.fill-block label,
.dash-block > label {
  gap: 0.5rem;
}

.easy-basics-fields {
  gap: 1rem; /* ??????? 16px */
}

.dash-note.dash-field-label {
  margin-top: 1rem;
  margin-bottom: 0.5rem; /* H3??? 8px */
}

.dash-note:not(.dash-field-label),
.step-help {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem; /* System??? 4?8px ? */
}

.entry-branch-card-inner,
.hub-entry-card {
  padding: 1rem; /* ??? 16px */
}

.hub-entry-cards,
.entry-branch-grid {
  gap: 1rem; /* Card?Card 16px */
}

.dash-block + .dash-block,
.dash-group + .dash-group {
  margin-top: 2rem; /* Section?Section 32px */
}

/* ===== ???? Phase2: Hierarchy??????32?16?8?? 2026-09-13 =====
   ??: ?? Ver0.1.1????16??8???32?
   ????????????????? */
/* ?????(H1) ? ????(H2??): 32px
   header?12 + body?20???? form/details/section ?????? */
body.hub-place-section-open .dash-pane > .dash-body {
  padding-top: 1.25rem; /* 20px */
}
body.hub-place-section-open.hub-shell-focus .dash-body > .fill-form {
  padding-top: 0;
}
body.hub-place-section-open.hub-shell-focus .dash-block--layout-hub.is-active-step {
  padding-top: 0;
}
body.hub-place-section-open .hub-place-section {
  margin-top: 0;
  margin-bottom: 0.8rem;
}

/* ???????????????????32??????H1????? */
.hub-place-section,
.hub-task-where {
  gap: 0;
}

.hub-place-section-title,
.hub-task-where-title {
  margin-top: 0;
  margin-bottom: 1rem; /* H2??? 16px?????????? */
}

/* ???????????????????: 8px */
.hub-place-section-actions {
  gap: 0.5rem;
}

/* ????????????????: 16px */
.hub-place-names,
.hub-task-names,
.hub-task-where-names {
  gap: 1rem;
}

.hub-place-pick,
.hub-task-pick {
  gap: 1rem;
}

/* ???????????: 8px? */
.hub-entry-card,
.hub-task-name-btn {
  gap: 0.5rem;
}

/* ??????????????: ??????? */
.hub-place-section .hub-nav-row,
.hub-task-where .hub-nav-row,
.hub-place-pick .hub-nav-row,
.hub-task-pick .hub-nav-row {
  margin-top: 2rem; /* 32px */
  padding-top: 0;
}

/* ===== ??????????2026-09-13?=====
   ????????????????????????????????
   ??: ??Button???????????????????????? */
.dash-pane {
  background: #f6f6f5;
  color: #1a1a1a;
}

.dash-header,
body.hub-shell-focus .dash-header {
  background: transparent;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.dash-resume-notice {
  background: transparent;
  border: 0;
  color: #555;
}

.dash-block.is-active-step,
.dash-group .dash-block.is-active-step,
body.hub-shell-focus .dash-block.is-active-step {
  outline: none;
  box-shadow: none;
  background: transparent !important;
  border: 0 !important;
}

.fill-block,
.inline-fieldset,
.easy-field {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.fill-block {
  padding-left: 0;
  padding-right: 0;
}

.wizard-foot-dock {
  box-shadow: none;
  background: #f6f6f5;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

html.sample-flow-hide-preview .wizard-foot-dock {
  background: transparent;
  border-top: 0;
  box-shadow: none;
}

.wizard-foot-panel {
  background: transparent;
  box-shadow: none;
}

.dash-pane [class*="is-step-current"],
.dash-pane .is-confirmed {
  box-shadow: none;
}

#preview-root [data-layout-block].is-hub-place-chosen,
body.hub-place-section-open #preview-root [data-layout-block].is-hub-place-chosen {
  outline: none;
  box-shadow: none;
}

/* ===== UI??? ?????2026-09-13 ?????=====
   ??: ??????????????????????
   ?? = ???????????? = ???????????????????
   ?? = ?????Hover???Hover???????????????????????
   ?? = Primary Button ??????????????????????????????????
   ??: docs/??/2026-09-13-UI?????.md */
:root {
  --ui-rest-bg: #fff;
  --ui-rest-border: rgba(20, 28, 36, 0.16);
  --ui-active-border: #3d8a48;
  --ui-primary-fill: #2d6a36;
  --ui-primary-fill-hover: #245a2c;
}

/* ?????????Toggle ??????catch-all? */
.entry-branch-card:hover .entry-branch-card-inner,
.entry-branch-card:has(input:checked) .entry-branch-card-inner,
.entry-color-wire-card:hover .entry-color-wire-card-inner,
.entry-color-wire-card:has(input:checked) .entry-color-wire-card-inner,
.entry-layout-card:hover .entry-layout-card-inner,
.entry-layout-card:has(input:checked) .entry-layout-card-inner,
.entry-choice:hover,
.entry-choice:has(input:checked),
.entry-mood:hover,
.entry-mood:has(input:checked),
.easy-choice:hover span,
.easy-choice:has(input:checked) span,
.easy-copy-card:hover .easy-copy-card-inner,
.easy-copy-card:has(input:checked) .easy-copy-card-inner,
.mode-option:hover,
.mode-option:has(input:checked),
.menu-direct-option:hover,
.menu-direct-option.is-selected,
.atelier-menu-item:hover,
.layout-card:hover,
.layout-card.is-selected,
.layout-card--compact.is-selected,
.font-card:hover,
.font-card.is-selected,
.hub-entry-card:hover:not(:disabled),
.hub-entry-card:focus-visible:not(:disabled),
.hub-place-name-btn:hover,
.hub-place-name-btn:focus-visible,
.hub-place-action-btn:hover,
.hub-place-action-btn:focus-visible,
.hub-task-name-btn:hover,
.hub-task-name-btn:focus-visible,
.hub-task-where-btn:hover,
.hub-task-where-btn:focus-visible,
.gct-pick-target:hover,
.gct-pick-target.is-active,
.gct-btn.is-active,
.gct-btn[aria-pressed="true"],
.preset-row button:hover,
.preset-row button.is-active,
.btn-ghost-dash:hover,
.item-gap-row button:hover,
.item-gap-row button.is-active,
.layout-gap-row .layout-gap-btn:hover,
.layout-gap-row .layout-gap-btn.is-active,
.step-font-btn:hover,
.font-picker-toggle:hover,
.font-picker-block.is-open .font-picker-toggle,
.item-grow-tab:hover,
.gct-grad-arrow.is-active,
.gct-locked-chip.is-current,
.gct-locked-chip.is-done,
.gct-palette-cell--confirm,
.sample-wire-slot.is-active,
.sample-img-wire-list .easy-img-panel.is-current,
.layout-arrange-cell.is-dragging,
.layout-arrange-cell.is-drop-target {
  border-color: var(--ui-active-border) !important;
  background: var(--ui-rest-bg) !important;
  box-shadow: none !important;
}

.entry-gate-card:hover,
.entry-gate-card:focus-visible {
  border-color: var(--ui-active-border) !important;
  /* ??????????????? */
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

/* Primary ?????????????????? */
#wizard-next,
.wizard-btn#wizard-next,
.btn.btn-primary,
.gct-btn-primary,
.finish-submit-row .btn-primary,
.btn-confirm,
.entry-gate-apply,
.entry-ref-modal-ok {
  background: var(--ui-primary-fill);
  border-color: var(--ui-primary-fill-hover);
  color: #fff;
}
#wizard-next:hover:not(:disabled),
.wizard-btn#wizard-next:hover:not(:disabled),
.btn.btn-primary:hover:not(:disabled),
.gct-btn-primary:hover:not(:disabled),
.finish-submit-row .btn-primary:hover:not(:disabled),
.btn-confirm:hover,
.entry-gate-apply:hover,
.entry-ref-modal-ok:hover {
  background: var(--ui-primary-fill-hover);
}



/* ???????????????? */
.hub-entry-card--dev {
  border-style: dashed;
  border-color: rgba(90, 101, 112, 0.45);
  background: #f7f5f1;
}
.hub-studio-stack[hidden] {
  display: none !important;
}
.hub-studio-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.4rem 0 0.8rem;
}
.hub-studio-lead,
.hub-studio-import-note,
.hub-studio-hint {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #44515c;
}
.hub-studio-import-status {
  margin: 0.35rem 0 0;
  min-height: 1.35em;
  font-size: 0.84rem;
  color: #1a1f1c;
}
.hub-studio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ??????iframe???????? */
html.is-embed-preview,
body.is-embed-preview {
  background: #fff !important;
}
/* ?????????zoom??? ::marker ???????????????????? */
body.is-embed-preview .preview-site ul,
body.is-embed-preview .preview-site ol {
  list-style: none !important;
}
body.is-embed-preview .preview-site li {
  list-style: none !important;
}
body.is-embed-preview .preview-site li::marker,
body.is-embed-preview .preview-site summary::marker,
body.is-embed-preview .preview-site summary::-webkit-details-marker {
  content: none !important;
  display: none !important;
  font-size: 0 !important;
}
body.is-embed-preview #chrome-preview-width,
body.is-embed-preview .atelier-chrome,
body.is-embed-preview .atelier-dash,
body.is-embed-preview .atelier-menu,
body.is-embed-preview .atelier-mobile-tabs,
body.is-embed-preview #entry-gate,
body.is-embed-preview #review-chrome,
body.is-embed-preview .detail-notice-modal,
body.is-embed-preview .item-grow-popover,
body.is-embed-preview .wizard-chrome,
body.is-embed-preview #atelier-reset-btn {
  display: none !important;
}
body.is-embed-preview {
  overflow: auto !important;
}
body.is-embed-preview .atelier-shell,
body.is-embed-preview .atelier-split,
body.is-embed-preview .atelier-preview-col,
body.is-embed-preview .preview-pane,
body.is-embed-preview .preview-scroll,
body.is-embed-preview .preview-viewport,
body.is-embed-preview #preview-root {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  contain: none !important;
}
body.is-embed-preview .atelier-shell {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
body.is-embed-preview .atelier-preview-col,
body.is-embed-preview .preview-pane,
body.is-embed-preview .atelier-preview {
  visibility: visible !important;
  pointer-events: auto !important;
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
}
/* ????????????????????PC?????? */
body.is-embed-preview .atelier-split {
  display: block !important;
  width: 100% !important;
}
body.is-embed-preview .split-handle,
body.is-embed-preview .dash-pane {
  display: none !important;
}
body.is-embed-preview.sample-flow-hide-preview .atelier-preview,
body.is-embed-preview.sample-flow-hide-preview .preview-pane,
body.is-embed-preview.sample-flow-hide-preview .atelier-preview-col {
  visibility: visible !important;
  pointer-events: auto !important;
}
/* embed: draft??????????????????????????? */
html.is-embed-pending body.is-embed-preview .atelier-shell,
html.is-embed-pending body.is-embed-preview .preview-pane,
html.is-embed-pending body.is-embed-preview #preview-root {
  visibility: hidden !important;
}
html.is-embed-pending body.is-embed-preview::before {
  content: "???????????";
  display: grid;
  place-items: center;
  min-height: 60vh;
  font-size: 0.95rem;
  color: #556;
}
.sushi-boot-loading {
  position: fixed;
  inset: 0;
  z-index: 115;
  display: none;
  place-items: center;
  padding: 1.5rem;
  background: #0a0c10;
}
.sushi-boot-loading.is-open,
.sushi-boot-loading:not([hidden]) {
  display: grid;
}
.sushi-boot-loading[hidden] {
  display: none !important;
}
.sushi-boot-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  max-width: 22rem;
}
.sushi-boot-spinner {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: #fff;
  animation: sushi-boot-spin 0.75s linear infinite;
}
.sushi-boot-loading-msg {
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #fff;
  font-weight: 600;
  animation: sushi-boot-pulse 1.1s ease-in-out infinite;
}
@keyframes sushi-boot-spin {
  to { transform: rotate(360deg); }
}
@keyframes sushi-boot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
body.is-embed-preview .preview-scroll {
  overflow: visible !important;
  flex: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}
html.is-embed-preview,
html.is-embed-preview body.is-embed-preview {
  height: auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}
body.is-embed-preview #preview-root,
body.is-embed-preview .preview-site,
body.is-embed-preview .atelier-shell {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
body.is-embed-preview .site-footer {
  margin-bottom: 0 !important;
}

/* ?? ???????????????????2026-09-21 ?? */
body.atelier.entry-gate-open,
.entry-gate {
  background: #fff !important;
}
.entry-gate {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.entry-gate-panel,
.entry-gate-panel--full {
  background: #fff;
  overflow: visible;
}
.entry-gate[data-entry-step="sushi"] .entry-gate-panel--full {
  overflow: hidden;
}
.atelier-chrome,
.dash-pane,
.preview-pane,
.easy-img-wire,
.sushi-zoom-frame.is-pending,
.sushi-zoom-pending {
  background: #fff;
}
/* ?? ??????????UI?????? 2026-09-22? ?? */
/* ???????????????????????????? */
.easy-copy-later-hint {
  margin: 0 0 0.65rem;
  padding: 0.45rem 0.6rem;
  border-left: 3px solid #9aa6b2;
  background: #f3f5f7;
  color: #2a3238;
  font-size: 0.88rem;
  line-height: 1.45;
}

/* ??????????summary???? :first-child ?????????? */
body.wizard-mode .dash-block.is-wizard-active > summary + .dash-subhead,
body.wizard-mode .dash-block.is-wizard-active > summary + .easy-copy-later-hint + .dash-subhead,
body.wizard-mode .dash-block.is-wizard-active > summary + .easy-copy-frame > .dash-subhead,
body.wizard-mode .dash-block.is-wizard-active > summary + .easy-copy-frame > .easy-copy-later-hint + .dash-subhead {
  margin-top: 0;
  margin-bottom: 0.4rem;
}
body.wizard-mode.mode-guided .dash-pane > .dash-body {
  padding-top: 0.35rem;
}
body.wizard-mode .dash-block.is-wizard-active > summary + .dash-subhead + .step-help,
body.wizard-mode .dash-block.is-wizard-active > summary + .easy-copy-later-hint + .dash-subhead + .step-help,
body.wizard-mode .dash-block.is-wizard-active .easy-copy-frame > .dash-subhead + .step-help,
body.wizard-mode .dash-block.is-wizard-active .easy-copy-frame > .easy-copy-later-hint + .dash-subhead + .step-help {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.dash-block--easy .easy-copy-path-grid,
.dash-block--easy .easy-img-path-grid {
  margin: 0.15rem 0 0.5rem;
}

.easy-img-omakase {
  margin: 0.35rem 0 0.5rem;
}
.easy-img-omakase-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.easy-img-omakase-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid #d5dde5;
  background: #fff;
}
.easy-img-omakase-row.is-locked {
  border-color: #3d8a48;
  box-shadow: 0 0 0 1px #3d8a48;
  background: #f7fbf8;
}
.easy-img-omakase-thumb {
  flex: 0 0 3.6rem;
  width: 3.6rem;
  height: 2.7rem;
  border-radius: 0.25rem;
  overflow: hidden;
  background: #e8ecef;
}
.easy-img-omakase-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.easy-img-omakase-main {
  flex: 1;
  min-width: 0;
}
.easy-img-omakase-label {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: #4a5560;
}
.easy-img-omakase-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #12181c;
}
.easy-img-omakase-lock {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid #c5ced6;
  border-radius: 0;
  background: #fff;
  color: #1a1f1c;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  white-space: nowrap;
}
.easy-img-omakase-row.is-locked .easy-img-omakase-lock,
.easy-copy-omakase-row.is-locked .easy-img-omakase-lock,
.easy-img-omakase-lock.is-on {
  border-color: #3d8a48;
  color: #2d6b36;
  background: #fff;
}
.easy-img-omakase-actions {
  margin-top: 0.75rem;
}
.hub-img-path {
  margin: 0.35rem 0 0.75rem;
}
.hub-img-self-actions,
.hub-img-slot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin: 0.45rem 0;
}
.hub-img-slot-row > span {
  min-width: 4.5rem;
  font-size: 0.9rem;
  font-weight: 700;
}
.hub-img-omakase {
  margin: 0.35rem 0 0.5rem;
}

.easy-copy-dirs {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin: 0.85rem 0 0.8rem;
}
.dash-block[data-step-id="easy-copy-dirs"] > .dash-subhead-row {
  justify-content: space-between;
  width: 100%;
}
.easy-copy-ask-count {
  margin: 0 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #3d4a44;
  white-space: nowrap;
}
.easy-copy-ask {
  text-align: center;
}
.easy-copy-ask-word,
.easy-copy-dir-row-word {
  margin: 0.85rem 0 1.15rem;
  font-size: clamp(2.15rem, 7vw, 3rem);
  font-weight: 700;
  line-height: 1.3;
  color: #121816;
  text-align: center;
}
.easy-copy-ask-word {
  margin-bottom: 2.45rem;
}
.easy-copy-dir-row-word {
  font-size: 1.15rem;
  margin: 0;
  text-align: left;
}
.easy-copy-ask-actions {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.55rem;
}
.easy-copy-ask-low,
.easy-copy-dir-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.easy-copy-ask-btn {
  flex: 1 1 calc(33.33% - 0.5rem);
  min-width: 5.5rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid #c5cdd4;
  border-radius: 0.55rem;
  background: #fff;
  color: #121816;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}
.easy-copy-ask-actions .easy-copy-ask-btn {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 860px) {
  .easy-copy-ask-actions {
    flex-direction: column;
  }
  .easy-copy-ask-actions .easy-copy-ask-btn {
    flex: 0 0 auto;
    width: 100%;
  }
}
.easy-copy-ask-btn.is-picked {
  border-color: #1f3d18;
  background: #e8f2e6;
}
.easy-copy-ask-btn.is-menu {
  flex: 1 1 auto;
  width: 100%;
  min-height: 2.75rem;
  text-align: left;
}
.easy-copy-result-head {
  margin: 0.2rem 0 0.25rem;
  font-size: 1.2rem;
  font-weight: 700;
}
.easy-copy-result-note {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #3d4a44;
}
.easy-copy-result-title {
  margin: 0.85rem 0 0.4rem;
  font-size: 1rem;
  font-weight: 700;
}
.easy-copy-result-mark.is-want { color: #2d6a36; }
.easy-copy-result-mark.is-forbid { color: #9b3a32; }
.easy-copy-result-mark.is-either { color: #5c6560; }
.easy-copy-result-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.easy-copy-result-card-wrap {
  position: relative;
}
.easy-copy-result-card {
  min-height: 2.75rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid #c5cdd4;
  border-radius: 0.55rem;
  background: #fff;
  color: #121816;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}
.easy-copy-result-group.is-want .easy-copy-result-card { background: #f3faf4; }
.easy-copy-result-group.is-forbid .easy-copy-result-card { background: #fdf6f5; }
.easy-copy-result-group.is-either .easy-copy-result-card { background: #f7f8f7; }
.easy-copy-result-menu {
  position: absolute;
  z-index: 6;
  top: calc(100% + 0.3rem);
  left: 0;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 11.5rem;
  padding: 0.55rem;
  border: 1px solid #c5cdd4;
  border-radius: 0.55rem;
  background: #fff;
  box-shadow: 0 8px 18px rgba(18, 24, 22, 0.12);
}
.easy-copy-result-menu:not([hidden]) {
  display: flex;
}
.easy-copy-result-menu-title {
  margin: 0 0 0.15rem;
  font-size: 0.92rem;
  font-weight: 700;
}
.easy-copy-result-empty {
  margin: 0;
  color: #5c6560;
  font-size: 0.95rem;
}
.easy-copy-dir-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.easy-copy-dir-row {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid #e6ebe8;
}
.easy-copy-dir-legend {
  display: inline-flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  gap: 0.65rem 1.35rem;
  margin: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid #e1e6ea;
  border-radius: 0.55rem;
  background: #fbfcfc;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.5;
}
.easy-copy-dir-legend-want {
  color: #3d8a48;
}
.easy-copy-dir-legend-forbid {
  color: #b42318;
}
.easy-copy-dir-legend-ref {
  color: #121816;
}
.dash-block[data-step-id="easy-copy-dirs"] > .dash-subhead {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  color: #121816;
}
.dash-block[data-step-id="easy-copy-dirs"] .easy-copy-dir-heading {
  font-size: 0.9rem;
  font-weight: 700;
}
.dash-block[data-step-id="easy-copy-dirs"] > .step-help {
  margin-top: 0.85rem;
  margin-bottom: 0;
}
.dash-block[data-step-id="easy-copy-dirs"] .easy-copy-dir-chip {
  font-weight: 400;
  padding: 0.5rem 0.95rem;
}
.dash-header .easy-copy-later-hint {
  margin: 0.35rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2a3238;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
}
#easy-copy-later-hint[hidden] {
  display: none !important;
}
body.copy-later-fixed .dash-pane > .dash-body {
  padding-top: 0;
}
body.copy-later-fixed .dash-body > .fill-form {
  padding-top: 0;
}
body.copy-later-fixed .dash-block.is-wizard-active {
  margin-top: 0;
  padding-top: 0.85rem;
}
body.copy-later-fixed .dash-block.is-wizard-active > .dash-subhead,
body.copy-later-fixed .dash-block.is-wizard-active .easy-copy-frame > .dash-subhead {
  margin-top: 0;
}
.easy-copy-dir-heading {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: #12181c;
}
.easy-copy-dir-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.easy-copy-dir-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  border: 1px solid #c5ced6;
  border-radius: 999px;
  background: #fff;
  color: #1a1f1c;
  font-size: 0.86rem;
  padding: 0.38rem 0.75rem;
  cursor: pointer;
}
.easy-copy-dir-chip.is-on {
  border-color: #3d8a48;
  box-shadow: 0 0 0 2px #3d8a48;
  background: #fff;
}
.easy-copy-dir-chip.is-forbid {
  border-color: #b42318;
  box-shadow: 0 0 0 2px #b42318;
  background: #fff;
}
.easy-copy-dir-x {
  color: #b42318;
  font-weight: 800;
  font-size: 1.05em;
  line-height: 1;
}

/* ???? Coolors???????????? */
.easy-copy-omakase {
  margin: 0.35rem 0 0.5rem;
}
.easy-copy-omakase-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.easy-copy-omakase-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid #d5dde5;
  background: #fff;
}
.easy-copy-omakase-row.is-locked {
  border-color: #3d8a48;
  box-shadow: 0 0 0 1px #3d8a48;
  background: #f7fbf8;
}
.easy-copy-omakase-main {
  flex: 1;
  min-width: 0;
}
.easy-copy-omakase-label {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: #4a5560;
}
.easy-copy-omakase-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #12181c;
  white-space: pre-wrap;
  word-break: break-word;
}
.easy-copy-omakase-row > .easy-img-omakase-lock {
  margin-left: auto;
}
.easy-copy-omakase-actions {
  margin-top: 0.75rem;
}

/* ?????????????????????????? */
.easy-copy-frame-now {
  margin: 0 0 0.55rem;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-left: 3px solid #9aa6b2;
  border-radius: 0;
  background: #f3f5f7;
}
.easy-copy-frame-now-label {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #5a6570;
}
.easy-copy-frame-now-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #3a4450;
}
.easy-copy-frame-cands-label {
  margin: 0.15rem 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: #12181c;
}
.easy-copy-frame-cands {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
}
.easy-copy-frame-cand {
  appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid #b8c2cb;
  border-radius: 0.55rem;
  background: #fff;
  padding: 0.7rem 0.8rem;
  cursor: pointer;
  color: #1a1f1c;
  box-shadow: 0 1px 0 rgba(20, 28, 36, 0.04);
}
.easy-copy-frame-cand:hover {
  border-color: #3d8a48;
}
.easy-copy-frame-cand.is-selected {
  border-color: #3d8a48;
  box-shadow: 0 0 0 2px #3d8a48;
}
.easy-copy-frame-cand-label {
  display: block;
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #5a6570;
}
.easy-copy-frame-cand-text {
  display: block;
  font-size: 0.92rem;
  line-height: 1.45;
}
.easy-copy-frame-actions {
  margin: 0 0 0.5rem;
}
.easy-copy-frame-hint {
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #3a4450;
}
.easy-copy-frame-fields {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 0.75rem;
}
.easy-copy-field-label {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 800;
}
.easy-copy-field-cands {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.easy-copy-field-own {
  margin-top: 0.45rem;
}
.easy-copy-field-input {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  box-sizing: border-box;
}
.easy-copy-hero-ask {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.4rem 0 0.2rem;
}
@media (max-width: 720px) {
  .easy-copy-frame-cand-text {
    font-size: 0.88rem;
  }
}

/* ??????????????????? */
.easy-field--required {
  padding: 0.7rem 0.75rem 0.8rem;
  border: 1px solid rgba(45, 106, 54, 0.35);
  border-radius: 0.55rem;
  background: #f7fbf8;
}
.easy-field--required .easy-field-label {
  font-size: 0.95rem;
  font-weight: 800;
  color: #121816;
}
.easy-field--required input {
  border-color: rgba(45, 106, 54, 0.4);
  background: #fff;
}
.easy-field--required.is-invalid {
  border-color: #b33a2e;
  box-shadow: 0 0 0 2px rgba(179, 58, 46, 0.2);
  background: #fff8f7;
}
.easy-field--required.is-invalid input {
  border-color: #b33a2e;
}
.easy-field-req {
  color: #2d6a36;
  font-weight: 800;
}
.easy-field-error {
  display: block;
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #b33a2e;
  line-height: 1.35;
}
.easy-field-error[hidden] {
  display: none !important;
}

/* ???????????????????? */
.layout-arrange-cell--structure:has(.layout-arrange-summary--image) {
  position: relative;
}
.layout-arrange-summary--image {
  display: grid;
  grid-template-columns: 2rem 1.15rem 1.6rem minmax(0, 1fr) 4.8em;
  column-gap: 0.9rem;
  row-gap: 0.9rem;
  align-items: start;
  justify-content: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0.95rem 1.05rem 1.05rem;
  cursor: default;
}
.layout-arrange-cell--structure:has(.layout-arrange-summary--image) > .layout-arrange-body {
  display: grid;
  grid-template-columns: 2.1rem 2.2rem 5rem 9.2em minmax(0.4rem, 1fr) 4.8em;
  padding-left: 1.05rem;
  padding-right: 1.05rem;
  column-gap: 0.9rem;
  row-gap: 0.9rem;
  align-items: start;
  justify-content: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.layout-arrange-body .layout-section-tools,
.layout-arrange-body .layout-photo-row > .layout-closed-line {
  grid-column: 1 / -1;
}
.layout-arrange-cell[data-layout-block="hero"] .layout-arrange-body .layout-photo-row > .layout-closed-line {
  grid-column: 1 / -1;
}
.layout-closed-head {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  align-self: start;
  min-height: 2rem;
}
.layout-arrange-summary--image .layout-arrange-vis-label {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  flex: 0 0 auto;
  width: auto;
}
.layout-arrange-summary--image .layout-arrange-name {
  flex: none;
  min-width: 0;
  width: auto;
  max-width: none;
  padding: 0;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.55;
  pointer-events: none;
  cursor: default;
}
.layout-arrange-summary--image .layout-arrange-handle {
  margin-left: 0;
  align-self: center;
  justify-self: start;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  border-radius: 999px;
  padding: 0;
}
.layout-closed-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  flex: 0 0 auto;
}
.layout-closed-thumb {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.35rem;
  overflow: hidden;
  background: #e7ece8;
}
.layout-closed-thumb.layout-mirror {
  width: 4.75rem;
  height: 2.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  flex: 0 0 auto;
  background: #f3f6f4;
  overflow: hidden;
}
.layout-closed-id {
  display: contents;
}
.layout-lock-mark {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin: 0;
  appearance: none;
  border: 1px solid #c5ced6;
  border-radius: 0;
  background: #fff;
  color: #1a1f1c;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  white-space: nowrap;
}
.layout-lock-mark.is-on {
  background: #fff;
  border-color: #3d8a48;
  color: #2d6b36;
}
.layout-open-btn.is-ok {
  border-color: #245a2c;
  background: #2d6a36;
  color: #fff;
}
.layout-open-btn.is-ok:hover {
  background: #245a2c;
}
.layout-closed-thumb,
.layout-closed-thumb img,
.layout-source-map,
.layout-source-map img {
  cursor: default;
}
.layout-closed-thumb.layout-mirror img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
}
.layout-closed-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.layout-closed-lock {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.12rem 0.28rem;
  border: 1px solid #c5ced6;
  border-radius: 0;
  background: #fff;
  color: #1a1f1c;
}
.layout-closed-lock.is-locked {
  border-color: #3d8a48;
  color: #2d6b36;
  background: #fff;
}
.layout-closed-meta {
  flex: 1 1 100%;
  font-size: 0.75rem;
  font-weight: 400;
  color: #3d4540;
  line-height: 1.35;
}
.layout-closed-face {
  display: contents;
}
.layout-count-cluster,
.layout-gap-cluster {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.28rem;
}
.layout-section-tools {
  grid-column: 5 / -1;
  width: auto;
  flex: none;
  justify-content: flex-start;
  gap: 0.9rem;
  justify-self: start;
}
.layout-closed-line {
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  justify-content: start;
  justify-items: start;
  width: auto;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 400;
}
.layout-head-gap {
  display: block;
  width: 100%;
  height: 1px;
}
.layout-photo-row > .layout-closed-line {
  grid-column: 5 / -1;
}
.layout-section-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: start;
  grid-column: 5 / -1;
  width: auto;
  justify-content: flex-start;
  gap: 0.9rem;
  justify-self: start;
  margin-top: 0.15rem;
}
.layout-page-blank {
  display: block;
  width: 1px;
  height: 1px;
}
.layout-photo-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  min-width: 0;
  max-width: none;
  margin: 0;
}
.layout-arrange-cell[data-layout-block="hero"] .layout-photo-row:not(.is-open) {
  display: contents;
}
.layout-arrange-cell[data-layout-block="hero"] .layout-photo-row > .layout-closed-line {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 0.45rem;
}
.layout-arrange-cell[data-layout-block="hero"] .layout-photo-row:not(.is-open) > .layout-closed-line > .layout-open-btn {
  margin-left: auto;
}
.layout-photo-row.is-open .layout-photo-editor {
  grid-column: 1 / -1;
}
.layout-photo-row > .layout-closed-line {
  position: relative;
  padding-left: 0;
}
.layout-tap {
  border: 0;
  background: transparent;
  color: #1a4d8c;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.layout-size-word {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 9.2em;
  white-space: nowrap;
  text-align: center;
  border: 1px solid #c5ced6;
  border-radius: 0.65rem;
  background: #fff;
  color: #152028;
  text-decoration: none;
  padding: 0.2rem 0.55rem;
}
.layout-size-word.is-full-word,
.layout-choice-opt.is-bold {
  font-weight: 700;
}
.layout-size-word.is-half-word,
.layout-choice-opt.is-plain {
  font-weight: 400;
}
.layout-lock-pair {
  display: inline-flex;
  margin-left: 0.15rem;
  border: 1px solid #c5ced6;
  border-radius: 999px;
  overflow: hidden;
}
.layout-lock-tab {
  border: 0;
  background: #fff;
  color: #5c6560;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 0.18rem 0.38rem;
  cursor: pointer;
}
.layout-lock-tab + .layout-lock-tab {
  border-left: 1px solid #c5ced6;
}
.layout-lock-tab.is-on {
  background: #3d8a48;
  color: #fff;
  font-weight: 700;
}
.layout-closed-head .layout-open-btn,
.layout-photo-summary .layout-open-btn {
  position: static;
  margin-left: auto;
  z-index: auto;
  flex: 0 0 auto;
}
.layout-open-btn {
  position: static;
  box-sizing: border-box;
  min-width: 4.8em;
  text-align: center;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  color: #152028;
  background: #fff;
  border: 1px solid #b7b7b7;
  border-radius: 999px;
  padding: 0.22rem 0.45rem;
  cursor: pointer;
}
.layout-choice-pop {
  position: fixed;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 11rem;
  padding: 0.35rem;
  background: #fff;
  border: 1px solid #c5ced6;
  border-radius: 0.65rem;
}
.layout-choice-opt {
  font: inherit;
  text-align: left;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 0.65rem;
  padding: 0.28rem 0.4rem;
  cursor: pointer;
}
.layout-photo-summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.35rem 0.35rem 0.15rem;
}
.layout-photo-card {
  border-top: 1px solid rgba(20, 28, 36, 0.08);
}
.layout-photo-card.is-drop-target,
.layout-inner.is-drop-target {
  background: #f3faf4;
  box-shadow: inset 0 0 0 2px #3d8a48;
}
.layout-photo-row.layout-inner > .layout-closed-line {
  border: 1px solid rgba(20, 28, 36, 0.22);
  border-radius: 0.45rem;
  padding: 0.4rem 0.55rem;
  background: #fff;
  box-sizing: border-box;
}
.layout-photo-row.layout-inner.is-drop-target {
  background: transparent;
  box-shadow: none;
}
.layout-photo-row.layout-inner.is-drop-target > .layout-closed-line {
  background: #f3faf4;
  border-color: #3d8a48;
}
.layout-photo-row .layout-photo-editor:empty {
  display: none;
}
.layout-photo-row.is-open .layout-photo-editor {
  padding: 0.15rem 0.1rem 0.45rem;
}
.layout-closed-line .layout-inner-handle,
.layout-closed-line .layout-open-btn {
  position: static;
  flex: 0 0 auto;
  margin-left: 0;
  z-index: auto;
}
.layout-closed-line .layout-inner-handle {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 1.85rem;
  margin-right: 0;
  border: 1px solid #b7b7b7;
  border-radius: 999px;
  background: #f4f5f4;
  color: #3d4540;
  font-size: 0.85rem;
  letter-spacing: -0.12em;
  cursor: grab;
  user-select: none;
}
body.is-inner-layout-dragging,
body.is-inner-layout-dragging * {
  cursor: grabbing !important;
}
.layout-replace-view img,
.layout-closed-thumb img,
.layout-target-thumb img {
  -webkit-user-drag: none;
}
.layout-edit-heading {
  margin: 0.65rem 0 0.28rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a1f1c;
}
.layout-photo-editor {
  width: 100%;
}
.layout-current-row,
.layout-image-pick,
.layout-adjust {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.layout-current-row {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: clamp(0.45rem, 1.6vw, 1.1rem);
  margin-top: 0.45rem;
}
.layout-image-undo {
  width: 2rem;
  height: 2rem;
  border: 1px solid #b7b7b7;
  border-radius: 999px;
  background: #fff;
  color: #152028;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.layout-image-undo:disabled {
  opacity: 0.4;
  cursor: default;
}
.layout-source-step {
  flex: 1 1 12rem;
  align-items: stretch;
  margin-left: auto;
}
.layout-source-map {
  position: relative;
  width: 100%;
  max-width: 22rem;
  margin-left: auto;
  background: #f3f6f4;
  border-radius: 0.65rem;
  overflow: hidden;
}
.layout-source-map img {
  display: block;
  width: 100%;
  height: auto;
}
.layout-source-window {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 1px rgba(20, 28, 36, 0.18);
  pointer-events: none;
}
.layout-image-pick .layout-img-sources {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 100%;
  gap: 0.45rem 0.65rem;
}
.layout-image-pick .layout-img-source {
  width: auto;
  font-size: 0.75rem;
  padding: 0.4rem 0.7rem;
}
.layout-arrange-now,
.layout-omakase-note {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #3d4540;
}
.layout-image-count,
.layout-gap-row,
.layout-width-picks,
.layout-target-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.layout-count-lead,
.layout-gap-lead {
  font-size: 0.75rem;
  font-weight: 700;
}
.layout-target {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.28rem 0.35rem;
  border-radius: 0.45rem;
  background: transparent;
  cursor: pointer;
}
.layout-target.is-selected {
  background: #eef6ef;
  box-shadow: inset 0 0 0 2px #3d8a48;
}
.layout-target-thumb {
  width: 2rem;
  height: 2rem;
  border-radius: 0.3rem;
  overflow: hidden;
  background: #e7ece8;
  flex: 0 0 auto;
}
.layout-target-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.layout-replace {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  margin-top: 0.45rem;
}
.layout-replace-card {
  flex: 1 1 0;
  margin: 0;
  min-width: 0;
}
.layout-replace-card figcaption {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}
.layout-replace-arrow {
  align-self: center;
  color: #5c675f;
  font-size: 0.9rem;
}
.layout-replace-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  min-height: 5.5rem;
  padding: 0.4rem;
  border-radius: 0.45rem;
  background: #f4f7f5;
}
.layout-replace-view img {
  width: 100%;
  height: 5.2rem;
  object-fit: cover;
  border-radius: 0.3rem;
  display: block;
}
.layout-replace-empty {
  font-size: 0.75rem;
  color: #3d4540;
}
.layout-replace-view .layout-img-sources {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.layout-replace-view .layout-img-source {
  width: 100%;
  font-size: 0.72rem;
  padding: 0.28rem 0.4rem;
}
.layout-lock-btn {
  margin-top: 0.15rem;
  font-size: 0.78rem;
  font-weight: 700;
}
.layout-lock-btn.is-locked {
  color: #1f6b32;
}
.layout-replace-card:has(.layout-mirror) {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}
.layout-replace-view.layout-mirror {
  display: block;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #e7ece8;
}
.layout-replace-view.layout-mirror img {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.layout-adjust-row {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 0.65rem;
  width: 100%;
}
.layout-adjust-zoom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.28rem;
  flex: 0 0 auto;
}
.layout-adjust-zoom button {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  color: #152028;
  background: #fff;
  border: 1px solid #b7b7b7;
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  min-width: 5.6rem;
  cursor: pointer;
}
.layout-adjust-zoom button:disabled {
  opacity: 0.45;
  cursor: default;
}
.layout-adjust-scale {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1a1f1c;
  white-space: nowrap;
}
.layout-adjust-pad {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  width: max-content;
  margin-left: 0;
}
.layout-adjust-pad .item-focal-btn {
  appearance: none;
  margin: 0;
  padding: 0;
  min-width: 2.4rem;
  min-height: 2.4rem;
  border: 1px solid #b7b7b7;
  border-radius: 999px;
  background: #fff;
  color: #152028;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.preview-site .skill-card {
  overflow: hidden;
}
.preview-site .work-thumb-clip {
  display: block;
  overflow: hidden;
  line-height: 0;
}
body.wizard-mode .dash-block.is-wizard-active[data-step-id="easy-img-wire"] > summary + .dash-subhead + .step-help {
  margin-top: 0;
  margin-bottom: 0.55rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0.5rem;
  background: #e7f6ea;
  color: #1a1f1c;
  line-height: 1.45;
}
.easy-img-help-more {
  display: block;
  margin-top: 0.12rem;
  font-weight: 400;
}
.layout-replace-view .layout-img-source:not(.layout-img-source--gallery),
.layout-image-pick .layout-img-source:not(.layout-img-source--gallery) {
  background: #2d6a36;
  color: #fff;
  border-color: #2d6a36;
}
.layout-adjust-mid {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.layout-adjust-home {
  min-width: 2.4rem;
  min-height: 2rem;
  font-size: 0.72rem;
  border-radius: 0.65rem;
}
.layout-omakase-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
}
.layout-omakase-again {
  border: 0;
  background: transparent;
  color: #1a4d8c;
  font: inherit;
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.layout-notice {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(18, 24, 22, 0.45);
}
.layout-notice[hidden] {
  display: none !important;
}
.layout-notice-card {
  width: min(24rem, 100%);
  padding: 1rem 1rem 0.85rem;
  background: #fff;
  border-radius: 0.7rem;
}
.layout-notice-title {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  font-weight: 700;
}
.layout-notice-body {
  margin: 0 0 0.75rem;
  white-space: pre-line;
  font-size: 0.88rem;
  line-height: 1.5;
}
.layout-notice-skip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
}
.layout-notice-skip[hidden] {
  display: none;
}
.layout-notice-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
}
#preview-root .is-layout-focus {
  outline: none;
}
#place-mark-frame {
  position: absolute;
  z-index: 8;
  box-sizing: border-box;
  border: 5px solid #2d6a36;
  background: transparent;
  pointer-events: none;
  transition: none;
}
#place-mark-frame[hidden] {
  display: none !important;
}
#chrome-preview-width .place-mark-switch {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.35rem;
  margin-left: 0;
  color: #152028;
}
#chrome-preview-width .place-mark-label {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}
#chrome-preview-width .place-mark-btn {
  appearance: none;
  margin: 0;
  padding: 0.12rem 0.55rem;
  border: 1px solid rgba(21, 32, 40, 0.22);
  border-radius: 999px;
  background: transparent;
  color: rgba(21, 32, 40, 0.38);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
#chrome-preview-width .place-mark-btn.is-lit {
  background: #2d6a36;
  border-color: #2d6a36;
  color: #fff;
}
.dash-subhead-row {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  margin: 0 0 0.4rem;
}
.dash-subhead-row .dash-subhead {
  margin: 0;
}
.dash-subhead-row .hub-tip-btn {
  top: 0;
}
.dash-subhead-row .hub-tip-pop {
  top: calc(100% + 0.35rem);
  bottom: auto;
  left: 0;
  right: auto;
  z-index: 20;
}
body.wizard-mode .dash-block.is-wizard-active > summary + .dash-subhead-row {
  margin-top: 0;
  margin-bottom: 0.4rem;
}
.layout-replace-view.layout-mirror {
  position: relative;
  cursor: pointer;
}
.layout-photo-tools {
  position: absolute;
  inset: 0.5rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.45rem 0.5rem;
  overflow: auto;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 0.35rem;
  cursor: default;
}
.layout-photo-tools .layout-edit-heading {
  display: none;
}
.layout-photo-tools .layout-adjust,
.layout-photo-tools .layout-image-pick {
  width: auto;
  max-width: 100%;
  align-items: center;
}
.layout-photo-tools .layout-adjust-row,
.layout-photo-tools .layout-img-sources {
  width: auto;
  max-width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
}
.layout-photo-tools-close {
  margin-top: 0.1rem;
  padding: 0.15rem 0.55rem;
  border: 0;
  background: transparent;
  color: #3a4450;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.layout-section-omakase {
  flex: 0 0 auto;
  margin-left: 0.35rem;
  padding: 0.12rem 0.45rem;
  border: 1px solid #c5ced6;
  border-radius: 999px;
  background: #fff;
  color: #3a4450;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}
.layout-photo-row.is-open {
  outline: 2px solid #3d8a48;
  outline-offset: 3px;
  border-radius: 0.5rem;
}
#easy-img-layout-host {
  display: block;
  position: relative;
  z-index: 4;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}
.dash-block.is-wizard-active > .dash-subhead-row {
  position: relative;
  z-index: 1;
}
body.wizard-mode .dash-block.is-wizard-active[data-step-id="easy-img-wire"] > .dash-subhead-row {
  z-index: 8;
  overflow: visible;
  align-items: center;
}
body.wizard-mode .dash-block.is-wizard-active[data-step-id="easy-img-wire"] > .dash-subhead-row .hub-tip-wrap,
body.wizard-mode .dash-block.is-wizard-active[data-step-id="easy-img-wire"] > .dash-subhead-row .hub-tip-btn {
  flex: 0 0 auto;
  align-self: center;
  overflow: visible;
}
#easy-img-layout-host .layout-arrange-wire > .layout-arrange-cell:first-child {
  position: relative;
  z-index: 6;
}
body.wizard-mode .dash-block.is-wizard-active {
  min-width: 0;
  max-width: 100%;
}
#easy-img-layout-host > .layout-arrange,
#easy-img-layout-host > .layout-arrange--expanded {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
#easy-img-layout-host .layout-arrange-wire {
  gap: 1rem !important;
  padding: 0.5rem 0.15rem 0.7rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
#easy-img-layout-host .layout-arrange-summary--image > .layout-section-tools {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem 0.7rem;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
#easy-img-layout-host .layout-arrange-cell--structure:has(.layout-arrange-summary--image) > .layout-arrange-body {
  grid-template-columns: 2.1rem 2.2rem 5rem 9.2em minmax(0.4rem, 1fr) 4.8em;
}
#easy-img-layout-host .layout-arrange-body .layout-closed-line > .layout-open-btn {
  grid-column: -1;
  justify-self: stretch;
}
/* ??????????????????????????????????? */
@container dash (max-width: 32rem) {
  #easy-img-layout-host {
    overflow-x: visible;
  }
  #easy-img-layout-host > .layout-arrange,
  #easy-img-layout-host > .layout-arrange--expanded,
  #easy-img-layout-host .layout-arrange-wire,
  #easy-img-layout-host .layout-arrange-summary--image {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  #easy-img-layout-host .layout-arrange-summary--image {
    grid-template-columns: minmax(0, 1fr);
  }
  #easy-img-layout-host .layout-closed-head,
  #easy-img-layout-host .layout-section-tools,
  #easy-img-layout-host .layout-photo-row,
  #easy-img-layout-host .layout-photo-row > .layout-closed-line,
  #easy-img-layout-host .layout-arrange-cell[data-layout-block="hero"] .layout-photo-row > .layout-closed-line {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  #easy-img-layout-host .layout-section-tools,
  #easy-img-layout-host .layout-photo-row > .layout-closed-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  /* ??????????????????????????????????? */
  #easy-img-layout-host .layout-arrange-summary--image,
  #easy-img-layout-host .layout-arrange-cell--structure:has(.layout-arrange-summary--image) > .layout-arrange-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.45rem;
    row-gap: 0.7rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  #easy-img-layout-host .layout-closed-head,
  #easy-img-layout-host .layout-section-tools,
  #easy-img-layout-host .layout-photo-row,
  #easy-img-layout-host .layout-photo-row > .layout-closed-line {
    width: 100%;
    max-width: 100%;
    flex: 1 0 100%;
  }
  #easy-img-layout-host .layout-closed-head {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    column-gap: 0.45rem;
    row-gap: 0.4rem;
  }
  #easy-img-layout-host .layout-closed-head .layout-count-cluster {
    flex: 1 1 calc(100% - 5rem);
    min-width: min(100%, 12rem);
  }
  #easy-img-layout-host .layout-closed-head .layout-gap-cluster {
    flex: 1 1 100%;
    margin-left: 0;
  }
  #easy-img-layout-host .layout-closed-head .layout-count-lead,
  #easy-img-layout-host .layout-closed-head .layout-gap-lead {
    flex: 0 0 auto;
  }
  #easy-img-layout-host .layout-closed-head .layout-head-gap {
    display: none;
  }
  #easy-img-layout-host .layout-arrange-summary--image .layout-arrange-vis-label {
    flex: 0 0 auto;
    width: auto;
  }
  #easy-img-layout-host .layout-arrange-summary--image .layout-arrange-name {
    flex: 1 1 auto;
    min-width: 4.5rem;
    width: auto;
    max-width: 100%;
  }
  #easy-img-layout-host .layout-photo-row,
  #easy-img-layout-host .layout-photo-row > .layout-closed-line {
    flex: 1 0 100%;
  }
  #easy-img-layout-host .layout-size-word {
    width: 9.2em;
    flex: 0 0 9.2em;
  }
  #easy-img-layout-host .layout-open-btn,
  #easy-img-layout-host .layout-photo-row:not(.is-open):has(.layout-inner-handle) > .layout-closed-line > .layout-open-btn {
    box-sizing: border-box;
    width: 4.8em;
    flex: 0 0 4.8em;
    margin-left: auto;
  }
  #easy-img-layout-host .layout-section-omakase {
    box-sizing: border-box;
    width: auto;
    flex: 0 0 auto;
    margin-left: 0;
  }
}
#easy-img-layout-host .layout-arrange-cell.layout-arrange-cell--structure.size-L {
  overflow: visible;
  position: relative;
  z-index: 1;
  margin-bottom: 0.4rem;
}
#easy-img-layout-host .layout-closed-head--list {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 2.4rem;
  padding: 0.2rem 0.45rem;
  box-sizing: border-box;
}
#easy-img-layout-host .layout-closed-head--list .layout-count-cluster,
#easy-img-layout-host .layout-closed-head--list .layout-gap-cluster,
#easy-img-layout-host .layout-closed-head--list .layout-arrange-vis-label {
  display: none !important;
}
#easy-img-layout-host .layout-frames-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.45rem 0.35rem;
  box-sizing: border-box;
}
#easy-img-layout-host .layout-frames-layout-label {
  flex: 1 0 100%;
  margin: 0.15rem 0 0;
  color: #152028;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
}
[data-step-id="easy-img-wire"].is-easy-drill > .dash-subhead-row,
[data-step-id="easy-img-wire"].is-easy-drill > .dash-note {
  display: none !important;
}
body:has([data-step-id="easy-img-wire"].is-easy-drill) .wizard-foot-dock > :not(#wizard-nav),
body:has([data-step-id="easy-img-wire"].is-easy-drill) #wizard-next,
body:has([data-step-id="easy-img-wire"].is-easy-drill) #btn-zip,
body:has([data-step-id="easy-img-wire"].is-section-solo) #wizard-back,
body:has([data-step-id="easy-img-wire"].is-section-solo) .wizard-foot-dock {
  display: none !important;
}
#easy-img-layout-host.is-section-solo .layout-arrange-cell:not([open]),
#easy-img-layout-host.is-photo-solo .layout-arrange-cell:not(:has(.layout-photo-row.is-open)) {
  display: none !important;
}
#easy-img-layout-host.is-section-solo .layout-arrange-cell[open] {
  width: 100%;
  padding: 0 !important;
  border: 0;
  background: transparent;
  box-sizing: border-box;
}
/* 案内文の下から「表題 / これでOK」までを 0.875rem。画像も文章も同じ */
body.wizard-mode.mode-guided:has([data-step-id="easy-img-wire"].is-easy-drill) .dash-pane > .dash-body,
body.wizard-mode.mode-guided:has([data-step-id="easy-copy-omakase"].is-easy-drill) .dash-pane > .dash-body {
  padding-top: 0;
}
body:has([data-step-id="easy-img-wire"].is-easy-drill) .dash-body > .fill-form,
body:has([data-step-id="easy-copy-omakase"].is-easy-drill) .dash-body > .fill-form,
body.hub-shell-focus:has([data-step-id="easy-img-wire"].is-easy-drill) .dash-body > .fill-form,
body.hub-shell-focus:has([data-step-id="easy-copy-omakase"].is-easy-drill) .dash-body > .fill-form {
  padding-top: 0.875rem;
}
body:has([data-step-id="easy-img-wire"].is-easy-drill) .dash-block.dash-block--easy.is-wizard-active,
body:has([data-step-id="easy-copy-omakase"].is-easy-drill) .dash-block.dash-block--easy.is-wizard-active {
  padding-top: 0;
}
#easy-img-layout-host.is-easy-drill .layout-arrange-wire {
  padding-top: 0;
}
#easy-copy-list-host.is-copy-item-solo .easy-copy-list-editor {
  padding-top: 0;
}
body:has([data-step-id="easy-copy-omakase"].is-easy-drill) #easy-copy-list-host {
  margin-top: 0;
}
#easy-copy-list-host .easy-copy-hero-board {
  margin-bottom: 0;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(20, 28, 36, 0.16);
}
#easy-img-layout-host.is-section-solo .layout-arrange-summary,
#easy-img-layout-host.is-section-solo .layout-arrange-summary--image {
  padding: 0 !important;
  min-height: 0;
  row-gap: 0;
}
#easy-img-layout-host.is-section-solo .layout-closed-head--list {
  min-height: 0;
  padding: 0 0 0.25rem;
  margin: 0;
  align-items: flex-start;
}
#easy-img-layout-host.is-section-solo .layout-closed-head--list .layout-arrange-name {
  flex: 1 1 auto;
  text-align: left;
  line-height: 1.35;
  padding-top: 0;
}
#easy-img-layout-host.is-section-solo .layout-closed-head--list .layout-section-open {
  min-height: 2.2rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.9rem;
}
#easy-img-layout-host.is-section-solo .layout-arrange-actions {
  display: none !important;
}
#easy-img-layout-host.is-section-solo .layout-arrange-handle,
#easy-img-layout-host.is-photo-solo .layout-arrange-handle {
  display: none !important;
}
#easy-img-layout-host.is-photo-solo .layout-frames-tools {
  display: none !important;
}
#easy-img-layout-host.is-section-solo .layout-arrange-body {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  box-sizing: border-box;
}
#easy-img-layout-host.is-section-solo .layout-frames-tools {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  margin: 0 0 0.45rem;
  padding: 0;
  gap: 0.45rem 1rem;
  box-sizing: border-box;
}
#easy-img-layout-host.is-section-solo .layout-frames-tools .layout-count-cluster,
#easy-img-layout-host.is-section-solo .layout-frames-tools .layout-gap-cluster {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.28rem;
}
#easy-img-layout-host.is-section-solo .layout-closed-face,
#easy-img-layout-host.is-section-solo .layout-photo-row {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
#easy-img-layout-host.is-section-solo .layout-photo-row:not(.is-open) > .layout-closed-line {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  column-gap: 0.55rem;
  grid-template-columns: none;
  box-sizing: border-box;
  border: 1px solid rgba(20, 28, 36, 0.28);
  border-radius: 0.45rem;
  background: #fff;
  padding-left: 0.55rem;
  padding-right: 0.55rem;
}
#easy-img-layout-host.is-section-solo .layout-photo-row:not(.is-open):has(.layout-size-word) > .layout-closed-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "id mid open";
  align-items: center;
  column-gap: 0.55rem;
  row-gap: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  padding-left: 0.35rem;
  padding-right: 0.95rem;
}
#easy-img-layout-host .layout-photo-row.is-open > .layout-closed-line {
  border: 2px solid #3d8a48;
  border-radius: 0.45rem;
  background: #fff;
}
#easy-img-layout-host .layout-arrange-cell--structure,
#easy-img-layout-host .layout-arrange-cell--structure .layout-arrange-name,
#easy-img-layout-host .layout-arrange-summary,
#easy-img-layout-host .layout-photo-row,
#easy-img-layout-host .layout-closed-line,
#easy-img-layout-host .layout-frame-name,
#easy-img-layout-host .layout-closed-face {
  cursor: default;
}
#easy-img-layout-host .layout-arrange-handle,
#easy-img-layout-host .layout-inner-handle {
  cursor: grab;
}
#easy-img-layout-host .layout-arrange-handle:active,
#easy-img-layout-host .layout-arrange-cell.is-dragging .layout-arrange-handle,
#easy-img-layout-host .layout-inner-handle:active,
#easy-img-layout-host .layout-photo-row.is-dragging .layout-inner-handle {
  cursor: grabbing;
}
#easy-img-layout-host .layout-arrange-wire.is-dragging-layout .layout-arrange-cell {
  cursor: default;
}
#preview-root .is-preview-block-shift {
  position: relative;
  z-index: 4;
}
#easy-img-layout-host.is-section-solo .layout-photo-row:not(.is-open) > .layout-closed-line > .layout-closed-id {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.35rem;
  grid-area: id;
}
#easy-img-layout-host.is-section-solo .layout-photo-row:not(.is-open) > .layout-closed-line > .layout-frame-name {
  flex: 1 1 4.5rem;
  min-width: 4.5rem;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  grid-area: mid;
  justify-self: start;
}
#easy-img-layout-host.is-section-solo .layout-photo-row:not(.is-open) > .layout-closed-line > .layout-size-word {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: max-content;
  max-width: none;
  min-width: max-content;
  margin: 0;
  grid-area: mid;
  justify-self: center;
  white-space: nowrap;
  text-align: center;
  line-height: 1.25;
}
#easy-img-layout-host.is-section-solo .layout-photo-row:not(.is-open) > .layout-closed-line > .layout-open-btn {
  margin-left: 0;
  flex: 0 0 auto;
  grid-area: open;
  justify-self: end;
}
#easy-img-layout-host .layout-arrange-cell.layout-arrange-cell--structure.size-L:hover {
  z-index: 30;
}
#easy-img-layout-host .layout-arrange-wire > .layout-arrange-cell:first-child {
  z-index: 8;
}
#easy-img-layout-host .layout-arrange-wire > .layout-arrange-cell:first-child:hover {
  z-index: 30;
}
#easy-img-layout-host .layout-closed-head .layout-arrange-handle:hover,
#easy-img-layout-host .layout-closed-head .layout-arrange-handle:focus-visible,
#easy-img-layout-host .layout-closed-line .layout-inner-handle:hover,
#easy-img-layout-host .layout-closed-line .layout-inner-handle:focus-visible {
  position: relative;
  z-index: 5;
}
#easy-img-layout-host .layout-photo-row.layout-inner {
  border: 0;
  border-radius: 0;
  background: transparent;
  margin: 0;
}
@container dash (min-width: 32rem) {
  #easy-img-layout-host .layout-page-blank {
    width: 9.2em;
    min-width: 9.2em;
    height: 1px;
  }
  #easy-img-layout-host .layout-section-tools {
    display: grid;
    grid-template-columns: subgrid;
    width: auto;
    justify-content: start;
    align-items: center;
  }
  #easy-img-layout-host .layout-section-tools .layout-count-cluster {
    grid-column: 1 / 3;
    justify-self: start;
  }
  #easy-img-layout-host .layout-section-tools .layout-gap-cluster {
    grid-column: 3 / 5;
    justify-self: start;
  }
  #easy-img-layout-host .layout-section-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    grid-column: 1 / -1;
    width: 100%;
    gap: 0.45rem 0.7rem;
  }
  #easy-img-layout-host .layout-section-tools .layout-count-cluster,
  #easy-img-layout-host .layout-section-tools .layout-gap-cluster {
    grid-column: auto;
    justify-self: start;
  }
  #easy-img-layout-host .layout-section-tools .layout-section-omakase,
  #easy-img-layout-host .layout-arrange-cell[data-layout-block="hero"] .layout-photo-row > .layout-closed-line > .layout-section-omakase {
    order: -1;
    grid-column: auto;
    grid-row: auto;
    justify-self: start;
    margin-left: 0;
  }
  #easy-img-layout-host .layout-photo-row.is-open .layout-photo-editor {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
  }
}
#easy-img-layout-host .layout-photo-row.is-open .layout-photo-editor {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  box-sizing: border-box;
}
#easy-img-layout-host:has(.layout-photo-row.is-open) > .layout-arrange,
#easy-img-layout-host:has(.layout-photo-row.is-open) > .layout-arrange--expanded,
#easy-img-layout-host:has(.layout-photo-row.is-open) .layout-arrange-wire {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#easy-img-layout-host:has(.layout-photo-row.is-open) {
  overflow: visible;
}
#easy-img-layout-host .layout-photo-row.is-open > .layout-closed-line .layout-inner-handle {
  position: static;
  left: auto;
  top: auto;
  z-index: auto;
  margin-left: calc(2rem + 1.15rem);
}
/* 2????????1???????????????????????????????? */
#easy-img-layout-host .layout-photo-row:not(.is-open):has(.layout-inner-handle) > .layout-closed-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.9rem;
  row-gap: 0.4rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#easy-img-layout-host .layout-photo-row:not(.is-open):has(.layout-inner-handle) > .layout-closed-line > .layout-open-btn {
  margin-left: auto;
  flex: 0 0 auto;
  width: auto;
  min-width: 3.6rem;
  max-width: 100%;
  grid-column: auto;
}
#easy-img-layout-host .layout-photo-row:not(.is-open):has(.layout-inner-handle) > .layout-closed-line .layout-inner-handle {
  margin-left: 3rem;
}
#easy-img-layout-host.is-section-solo .layout-photo-row:not(.is-open):has(.layout-inner-handle) > .layout-closed-line .layout-inner-handle {
  margin-left: 0;
}
@container dash (max-width: 32rem) {
  #easy-img-layout-host.is-section-solo .layout-photo-row:not(.is-open):has(.layout-size-word) > .layout-closed-line {
    grid-template-areas:
      "id name open"
      "id size open";
    row-gap: 0.35rem;
    padding-right: 0.75rem;
  }
  #easy-img-layout-host.is-section-solo .layout-photo-row:not(.is-open) > .layout-closed-line > .layout-frame-name {
    grid-area: name;
  }
  #easy-img-layout-host.is-section-solo .layout-photo-row:not(.is-open) > .layout-closed-line > .layout-size-word {
    grid-area: size;
    width: auto;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
  }
  #easy-img-layout-host.is-section-solo .layout-photo-row:not(.is-open) > .layout-closed-line > .layout-open-btn {
    width: auto;
    max-width: 100%;
    margin-left: 0;
  }
}
#easy-img-layout-host .layout-photo-row.is-open > .layout-closed-line .layout-lock-mark {
  margin-left: 0;
}
#easy-img-layout-host .layout-photo-row.is-open {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.8em;
  grid-template-rows: auto auto;
  column-gap: 0.45rem;
  align-items: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#easy-img-layout-host .layout-photo-row.is-open > .layout-closed-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  column-gap: 0.45rem;
}
#easy-img-layout-host .layout-photo-row.is-open > .layout-photo-editor {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
#easy-img-layout-host .layout-closed-head {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  column-gap: 0.45rem;
  row-gap: 0.4rem;
  white-space: normal;
}
#easy-img-layout-host .layout-closed-head .layout-arrange-vis-label {
  grid-column: 1;
  grid-row: 1;
}
#easy-img-layout-host .layout-closed-head .layout-arrange-handle {
  grid-column: 2;
  grid-row: 1;
}
#easy-img-layout-host .layout-closed-head .layout-count-cluster,
#easy-img-layout-host .layout-closed-head .layout-gap-cluster {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.28rem;
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  flex-wrap: wrap;
  white-space: normal;
  box-sizing: border-box;
}
#easy-img-layout-host .layout-closed-head .layout-count-btn {
  flex: 0 0 1.75rem;
  width: 1.75rem;
  min-width: 1.75rem;
  font-size: 0.72rem;
  font-weight: 500;
}
#easy-img-layout-host .layout-closed-head .layout-image-count-num {
  flex: 0 0 2.4rem;
  width: 2.4rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 500;
}
#easy-img-layout-host .layout-closed-head .layout-count-lead,
#easy-img-layout-host .layout-closed-head .layout-gap-lead,
#easy-img-layout-host .layout-closed-head .layout-gap-btn,
#easy-img-layout-host .layout-closed-head .layout-section-open {
  font-size: 0.72rem;
  font-weight: 500;
}
#easy-img-layout-host .layout-closed-head .layout-gap-btn {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.12rem 0.35rem;
  border: 1px solid #c5ced6;
  border-radius: 0.3rem;
  background: #fff;
  color: #1a1f1c;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}
#easy-img-layout-host .layout-closed-head .layout-gap-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
#easy-img-layout-host .layout-closed-head .layout-gap-btn.is-active {
  border-color: #3d8a48;
  font-weight: 500;
}
#easy-img-layout-host .layout-closed-head .layout-section-open {
  flex: 0 0 auto;
  width: auto;
  min-width: 3.6rem;
  max-width: 100%;
  margin-left: 0;
}
#easy-img-layout-host .layout-arrange-summary--image .layout-arrange-name {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: 100%;
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
}
#easy-img-layout-host .layout-arrange-vis {
  width: 0.72rem;
  height: 0.72rem;
  margin: 0;
}
#easy-img-layout-host .layout-photo-row.is-open > .layout-open-btn {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: stretch;
  margin-left: 0;
  width: 3.6rem;
  flex: 0 0 3.6rem;
  font-size: 0.72rem;
  font-weight: 500;
}
#easy-img-layout-host .layout-photo-row.is-open > .layout-closed-line {
  column-gap: 1.15rem;
  gap: 1.15rem;
}
#easy-img-layout-host .layout-photo-tools--plain {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 3.25rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0.45rem 0 0.35rem;
  padding: 0.15rem 1.2rem 0.45rem 0;
  box-sizing: border-box;
  overflow: visible;
}
#easy-img-layout-host .layout-photo-tools--plain > .layout-img-sources {
  align-self: start;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 7.2rem 7.2rem;
  grid-template-rows: auto auto auto;
  align-items: start;
  align-content: start;
  column-gap: 0.75rem;
  row-gap: 0.75rem;
  width: max-content;
  max-width: none;
  margin-left: calc(2rem + 1.15rem - 0.1rem);
  padding-top: calc(0.72rem * 1.3 + 0.2rem + 2.8rem);
  box-sizing: border-box;
}
#easy-img-layout-host .layout-photo-tools--plain > .layout-img-sources.is-sample-two {
  grid-template-rows: auto;
  column-gap: 0.9rem;
  margin: 0.85rem 0 0.85rem calc(2rem + 1.15rem - 0.1rem);
  padding-top: 0.85rem;
  padding-bottom: 0.35rem;
}
#easy-img-layout-host #layout-omakase-btn,
#easy-img-layout-host #layout-omakase-confirm-again,
#easy-img-layout-host .layout-lock-mark,
#easy-img-layout-host .layout-photo-omakase {
  display: none !important;
}
#easy-img-layout-host .layout-photo-tools--plain .layout-photo-omakase {
  grid-column: 1 / -1;
  justify-self: center;
  align-self: start;
  width: 7.2rem;
  max-width: 7.2rem;
}
#easy-img-layout-host .layout-photo-tools--plain .layout-lock-under {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: center;
  align-self: start;
  margin: 0;
}
#easy-img-layout-host .layout-photo-cluster {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "zoom zoom"
    "pad map";
  justify-content: end;
  justify-self: end;
  align-items: start;
  column-gap: 0.45rem;
  row-gap: 0.45rem;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  margin-left: auto;
}
#easy-img-layout-host .layout-photo-cluster > .layout-adjust,
#easy-img-layout-host .layout-photo-cluster .layout-adjust-row {
  display: contents;
}
#easy-img-layout-host .layout-photo-cluster .layout-zoom-block {
  grid-area: zoom;
  justify-self: stretch;
  align-self: start;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}
#easy-img-layout-host .layout-zoom-label {
  width: max-content;
  height: calc(0.72rem * 1.3);
  margin: 0 0 0.2rem;
  overflow: hidden;
  visibility: hidden;
}
#easy-img-layout-host .layout-img-source,
#easy-img-layout-host .layout-photo-omakase,
#easy-img-layout-host .layout-omakase-btn,
#easy-img-layout-host .layout-adjust-home,
#easy-img-layout-host .layout-focal-reset {
  font-size: 0.72rem;
  font-weight: 500;
}
#easy-img-layout-host .layout-adjust-pad .item-focal-btn {
  font-size: 0.72rem;
  font-weight: 500;
}
#easy-img-layout-host .layout-zoom-end {
  font-weight: 500;
}
#easy-img-layout-host .layout-photo-cluster .layout-focal-pad {
  grid-area: pad;
  align-self: center;
  justify-self: end;
}
#easy-img-layout-host .layout-photo-cluster > .layout-source-step {
  grid-area: map;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  overflow: visible;
  justify-self: end;
  align-self: center;
}
#easy-img-layout-host .layout-source-map {
  width: auto;
  max-width: 100%;
  margin-left: 0;
  visibility: hidden;
}
#easy-img-layout-host .layout-source-map img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}
@container dash (max-width: 540px) {
  #easy-img-layout-host .layout-photo-tools--plain {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.45rem;
    padding-right: 0;
  }
  #easy-img-layout-host .layout-photo-tools--plain > .layout-img-sources {
    margin-left: 0;
    padding-top: 0;
    align-self: start;
  }
  #easy-img-layout-host .layout-photo-row.is-open > .layout-closed-line .layout-inner-handle {
    position: static;
    left: auto;
    top: auto;
  }
  #easy-img-layout-host .layout-photo-row.is-open > .layout-closed-line .layout-lock-mark {
    margin-left: 0;
  }
  #easy-img-layout-host .layout-photo-cluster {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "zoom"
      "map";
    justify-content: start;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
  #easy-img-layout-host .layout-photo-cluster .layout-focal-pad,
  #easy-img-layout-host .layout-photo-cluster > .layout-source-step {
    justify-self: start;
    max-width: 100%;
  }
}
[data-step-id="easy-img-wire"].is-photo-solo > .dash-subhead-row,
[data-step-id="easy-img-wire"].is-photo-solo > .dash-note {
  display: none !important;
}
#easy-img-layout-host.is-photo-solo .layout-arrange-cell:not(:has(.layout-photo-row.is-open)) {
  display: none !important;
}
#easy-img-layout-host.is-photo-solo .layout-photo-row:not(.is-open) {
  display: none !important;
}
#easy-img-layout-host.is-photo-solo .layout-photo-row.is-open > .layout-closed-line {
  display: none !important;
}
#easy-img-layout-host.is-photo-solo .layout-arrange-cell:has(.layout-photo-row.is-open) {
  overflow: visible;
  width: 100%;
  padding: 0 !important;
  border: 0;
  background: transparent;
  box-sizing: border-box;
}
body:has([data-step-id="easy-img-wire"].is-photo-solo) .wizard-foot-dock > :not(#wizard-nav),
body:has([data-step-id="easy-img-wire"].is-photo-solo) #wizard-next,
body:has([data-step-id="easy-img-wire"].is-photo-solo) #btn-zip,
body:has([data-step-id="easy-img-wire"].is-photo-solo) #wizard-back,
body:has([data-step-id="easy-img-wire"].is-photo-solo) .wizard-foot-dock {
  display: none !important;
}
#easy-img-layout-host.is-photo-solo .layout-photo-row.is-open {
  outline: none;
}
#easy-img-layout-host.is-photo-solo .layout-arrange-actions {
  display: none !important;
}
#easy-img-layout-host.is-photo-solo .layout-arrange-cell:has(.layout-photo-row.is-open) > .layout-arrange-summary {
  display: none !important;
}
#easy-img-layout-host.is-photo-solo .layout-arrange-body {
  display: block;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}
#easy-img-layout-host.is-photo-solo .layout-photo-row.is-open,
#easy-img-layout-host.is-photo-solo .layout-photo-editor {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0;
}
#easy-img-layout-host.is-photo-solo .layout-photo-tools--plain {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "sources"
    "zoom"
    "stage";
  align-items: center;
  justify-items: stretch;
  justify-content: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  column-gap: 0;
  row-gap: 0.85rem;
  box-sizing: border-box;
}
#easy-img-layout-host.is-photo-solo .layout-photo-tools--plain > .layout-img-sources {
  grid-area: sources;
  display: flex !important;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  gap: 0.9rem;
  box-sizing: border-box;
}
#easy-img-layout-host .layout-frame-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 0.35rem;
  color: #152028;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
}
#easy-img-layout-host .layout-photo-row:not(.is-open) {
  margin: 0 0 0.35rem;
}
#easy-img-layout-host .layout-photo-row:not(.is-open) > .layout-closed-line {
  min-height: 2.55rem;
  padding: 0.25rem 0.55rem;
}
#easy-img-layout-host.is-section-solo .layout-photo-row:not(.is-open) > .layout-closed-line {
  padding-left: 0;
  padding-right: 0;
}
#easy-img-layout-host.is-photo-solo .layout-img-sources.is-sample-two .layout-img-source {
  white-space: nowrap;
}
#easy-img-layout-host.is-photo-solo .layout-img-source,
#easy-img-layout-host.is-photo-solo .layout-photo-omakase {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: none;
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  margin: 0;
  padding: 0.55rem 0.7rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.25;
  min-height: 2.7rem;
}
#easy-img-layout-host.is-photo-solo .layout-lock-under {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  flex: 0 0 auto;
  width: 2.55rem;
  height: 2.55rem;
  margin: 0;
  padding: 0;
  font-size: 1.05rem;
}
#easy-img-layout-host.is-photo-solo .layout-photo-cluster,
#easy-img-layout-host.is-photo-solo .layout-adjust,
#easy-img-layout-host.is-photo-solo .layout-adjust-row {
  display: contents;
}
#easy-img-layout-host.is-photo-solo .layout-zoom-block {
  grid-area: zoom;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
#easy-img-layout-host.is-photo-solo .layout-adjust-zoom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 0.15rem;
}
#easy-img-layout-host.is-photo-solo .layout-zoom-end,
#easy-img-layout-host.is-photo-solo .layout-zoom-end--small,
#easy-img-layout-host.is-photo-solo .layout-zoom-end--large {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0.12rem 0.35rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
}
#easy-img-layout-host.is-photo-solo .layout-zoom-end--large {
  font-size: 1.2rem;
  font-weight: 700;
  padding: 0.18rem 0.55rem;
}
#easy-img-layout-host.is-photo-solo .layout-zoom-range-input {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 1.35rem;
  margin: 0;
  background: transparent;
  accent-color: #245a2c;
}
#easy-img-layout-host.is-photo-solo .layout-zoom-range-input::-webkit-slider-runnable-track {
  height: 1.35rem;
  background: #d7d7d7;
  border-radius: 999px;
}
#easy-img-layout-host.is-photo-solo .layout-zoom-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0;
  border: 0;
  border-radius: 50%;
  background: #245a2c;
}
#easy-img-layout-host.is-photo-solo .layout-zoom-range-input::-moz-range-track {
  height: 1.35rem;
  background: #d7d7d7;
  border: 0;
  border-radius: 999px;
}
#easy-img-layout-host.is-photo-solo .layout-zoom-range-input::-moz-range-thumb {
  width: 1.35rem;
  height: 1.35rem;
  border: 0;
  border-radius: 50%;
  background: #245a2c;
}
#easy-img-layout-host.is-photo-solo .layout-focal-pad {
  display: grid;
  grid-area: pad;
  justify-self: center;
  justify-items: center;
}
#easy-img-layout-host.is-photo-solo .layout-zoom-label {
  display: none;
}
#easy-img-layout-host.is-photo-solo .layout-focal-reset--solo {
  flex: 0 0 auto;
  margin: 0 0 0 0.65rem;
  padding: 0.12rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
}
#easy-img-layout-host.is-photo-solo .layout-source-step {
  grid-area: stage;
  justify-self: stretch;
  align-self: start;
  display: grid;
  grid-template-columns: auto minmax(11rem, 1fr);
  grid-template-rows: auto;
  align-items: stretch;
  justify-items: stretch;
  width: 100%;
  max-width: 100%;
  margin: 0;
  gap: 0 1rem;
  padding: 0;
  box-sizing: border-box;
}
#easy-img-layout-host.is-photo-solo .layout-photo-side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  min-width: 0;
  height: 100%;
  min-height: 0;
  gap: 1.375rem;
}
#easy-img-layout-host.is-photo-solo .layout-frame-home {
  flex: 0 0 auto;
  justify-self: stretch;
  align-self: stretch;
  box-sizing: border-box;
  width: 100%;
  min-height: 3.5625rem;
  appearance: none;
  margin: 0;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.25;
  color: #152028;
  background: #fff;
  border: 1px solid #b7b7b7;
  border-radius: 0.85rem;
  cursor: pointer;
}
#easy-img-layout-host.is-photo-solo .layout-frame-home:disabled {
  opacity: 0.45;
  cursor: default;
}
#easy-img-layout-host.is-photo-solo .layout-source-map {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  position: relative;
  margin: 0;
  visibility: visible;
  border: 0;
  box-shadow: none;
  border-radius: 0.35rem;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
#easy-img-layout-host.is-photo-solo .layout-source-map.is-grabbing {
  cursor: grabbing;
}
#easy-img-layout-host.is-photo-solo .layout-source-window {
  display: block;
  z-index: 2;
}
#easy-img-layout-host.is-photo-solo .layout-frame-tip {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 3;
  margin: 0;
}
#easy-img-layout-host.is-photo-solo .layout-frame-tip .hub-tip-btn {
  top: 0;
}
#easy-img-layout-host.is-photo-solo .layout-frame-tip .hub-tip-pop {
  top: calc(100% + 0.3rem);
  bottom: auto;
  right: 0;
  left: auto;
}
#easy-img-layout-host.is-photo-solo .layout-photo-side > .layout-open-btn {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  margin: 0;
  padding: 1.2rem 1rem;
  position: static;
  font-family: inherit;
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.2;
  border-radius: 0.9rem;
  box-sizing: border-box;
}
@media (max-width: 40rem) {
  #easy-img-layout-host.is-photo-solo .layout-photo-tools--plain {
    grid-template-areas:
      "home"
      "sources"
      "zoom"
      "map"
      "ok";
  }
  #easy-img-layout-host.is-photo-solo .layout-source-step,
  #easy-img-layout-host.is-photo-solo .layout-photo-side {
    display: contents;
  }
  #easy-img-layout-host.is-photo-solo .layout-frame-home {
    grid-area: home;
    justify-self: stretch;
    width: 100%;
    margin: 0.15rem 0 0;
  }
  #easy-img-layout-host.is-photo-solo .layout-source-map {
    grid-area: map;
    justify-self: center;
    max-width: 100%;
  }
  #easy-img-layout-host.is-photo-solo .layout-photo-side > .layout-open-btn {
    grid-area: ok;
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    height: auto;
    margin: 0;
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    border-radius: 999px;
  }
}
#easy-img-layout-host [data-layout-block="hero"] .layout-arrange-name {
  overflow: visible;
  text-overflow: clip;
}
#easy-img-layout-host [data-layout-block="hero"] .layout-closed-thumb.layout-mirror {
  overflow: visible;
  height: auto;
  max-height: none;
}
#easy-img-layout-host [data-layout-block="hero"] .layout-closed-thumb.layout-mirror img {
  object-fit: contain;
  width: 100%;
  height: auto;
}
#easy-img-layout-host .layout-section-omakase {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  white-space: nowrap;
  pointer-events: auto;
}
#easy-img-layout-host .has-hover-tip:hover::after,
#easy-img-layout-host .has-hover-tip:focus-visible::after {
  left: 0;
  right: auto;
  top: auto;
  bottom: calc(100% + 0.4rem);
  transform: none;
  white-space: normal;
  width: max-content;
  max-width: 14rem;
  z-index: 40;
  text-align: left;
  line-height: 1.45;
}
/* ????????????????????????????????? */
#easy-img-layout-host .layout-arrange-wire > .layout-arrange-cell:first-child .has-hover-tip:hover::after,
#easy-img-layout-host .layout-arrange-wire > .layout-arrange-cell:first-child .has-hover-tip:focus-visible::after {
  top: calc(100% + 0.28rem);
  bottom: auto;
}
.layout-photo-tools--plain {
  position: static;
  inset: auto;
  width: 100%;
  max-width: 100%;
  margin: 0.45rem 0 0.35rem;
  padding: 0.15rem 0 0.45rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content minmax(0, max-content);
  align-items: center;
  justify-items: end;
  column-gap: 0.45rem;
  row-gap: 0.35rem;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}
.layout-edit-step-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: auto;
  flex: 0 1 auto;
}
.layout-edit-step {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a1f1c;
}
.layout-photo-tools--plain .layout-img-sources {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  width: 100%;
  grid-template-columns: none;
}
.layout-photo-tools--plain .layout-img-source {
  min-width: 0;
  width: 100%;
  white-space: normal;
  line-height: 1.35;
  text-align: center;
  border-radius: 0.85rem;
  padding: 0.45rem 0.5rem;
}
.layout-photo-tools--plain .layout-img-source.is-on {
  border-color: #245a2c;
  background: #e7f6ea;
  box-shadow: inset 0 0 0 1px #245a2c;
}
.layout-photo-tools--plain .layout-adjust,
.layout-photo-tools--plain .layout-adjust-row {
  display: contents;
}
.layout-photo-tools--plain .layout-adjust-zoom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.15rem;
  width: 100%;
  min-width: 0;
}
.layout-photo-tools--plain .layout-zoom-range-input {
  flex: 1 1 auto;
  width: 100%;
}
#easy-img-layout-host .layout-photo-cluster .layout-adjust-zoom {
  width: 100%;
}
#easy-img-layout-host .layout-photo-cluster .layout-zoom-range-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 2rem;
}
.layout-photo-tools--plain .layout-zoom-end {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  min-width: 0;
  border-radius: 0.15rem;
  border: 1.5px solid #6d756f;
  background: #fff;
  color: #152028;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.layout-photo-tools--plain .layout-zoom-end--small {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.72rem;
}
.layout-photo-tools--plain .layout-zoom-end--large {
  width: 3.1rem;
  height: 3.1rem;
  font-size: 0.72rem;
}
.layout-photo-tools--plain .layout-zoom-end:disabled {
  opacity: 0.45;
  cursor: default;
}
.layout-zoom-range-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 6.5rem;
  margin: 0;
  accent-color: #2d6a36;
}
.layout-photo-tools--plain .layout-adjust-home {
  width: auto;
  min-width: 2.6rem;
  height: auto;
  min-height: 2.2rem;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.layout-photo-ok {
  min-width: 6.5rem;
  margin-top: 1.45rem;
  padding: 0.55rem 1.5rem;
  border: 1px solid #245a2c;
  border-radius: 999px;
  background: #2d6a36;
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.layout-photo-ok:hover {
  background: #245a2c;
}
.layout-color-section {
  margin-top: 0.9rem;
  font-family: inherit;
}
.layout-color-rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.layout-color-line {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.layout-color-line > .layout-inner-handle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
  border: 1px solid rgba(20, 28, 36, 0.12);
  border-radius: 999px;
  background: #f4f5f4;
  color: #5a635c;
  font-size: 0.75rem;
  letter-spacing: -0.08em;
  line-height: 1;
}
.layout-color-name {
  margin: 0;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.3;
  color: #1a1f1c;
  min-width: 0;
}
.layout-color-rows:has(> .layout-color-row.is-open) > .layout-color-row:not(.is-open),
.layout-color-rows:has(> .layout-color-row.is-open) > .layout-color-swap {
  display: none;
}
.layout-color-swap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0.35rem auto;
  padding: 0;
  border: 1px solid rgba(20, 28, 36, 0.28);
  border-radius: 999px;
  background: #fff;
  color: #1a1f1c;
  cursor: pointer;
}
.layout-color-swap-up,
.layout-color-swap-down {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
}
.layout-color-rows > .layout-color-pin + .layout-color-pin {
  margin-top: 0.55rem;
}
.layout-color-rows > .layout-color-pin:not(:has(~ .layout-color-pin)) {
  margin-bottom: 0.55rem;
}
.layout-color-rows > .layout-color-move {
  border: 1px solid rgba(20, 28, 36, 0.18);
  border-radius: 0.75rem;
  padding: 0.4rem 0.55rem;
  background: #fff;
}
.layout-color-rows > .layout-color-pin {
  border: 1px solid rgba(20, 28, 36, 0.18);
  border-radius: 0.75rem;
  padding: 0.4rem 0.55rem;
  background: #fff;
}
.layout-color-grip-spacer {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
}
.layout-color-rows > .layout-color-row > .layout-color-line {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.45rem;
}
.layout-color-chips {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
}
.layout-color-chip {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.18rem;
  flex: 1 1 3.2rem;
  max-width: 9rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.layout-color-chip-label {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: #1a1f1c;
}
.layout-color-chip-swatch {
  height: 1.35rem;
  box-sizing: border-box;
  border: 1px solid #111;
  border-radius: 0.2rem;
}
.layout-color-contents {
  justify-self: stretch;
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1f1c;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.layout-color-sub > .layout-color-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
}
.layout-color-group:not(.is-honey) .layout-color-sub > .layout-color-line {
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
}
.layout-color-group:not(.is-honey) .layout-color-sub .layout-color-chip {
  flex: 1 1 4.5rem;
  width: auto;
  max-width: 9rem;
  min-width: 0;
}
.layout-color-row.is-open > .layout-color-line > .layout-color-chips,
.layout-color-row.is-open > .layout-color-line > .layout-color-grip-spacer {
  display: none;
}
@container dash (max-width: 32rem) {
  .layout-color-rows > .layout-color-row > .layout-color-line {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-rows: auto;
    row-gap: 0;
  }
  .layout-color-rows > .layout-color-row > .layout-color-line > .layout-color-chips,
  .layout-color-rows > .layout-color-row > .layout-color-line > .layout-color-contents {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
  }
}
.layout-color-rows > .layout-color-row:not(.is-open) > .layout-color-line {
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  column-gap: 0.45rem;
}
.layout-color-rows > .layout-color-row:not(.is-open) > .layout-color-line > .layout-color-name {
  grid-column: 1;
  grid-row: 1;
  white-space: nowrap;
}
.layout-color-rows > .layout-color-row:not(.is-open) > .layout-color-line > .layout-color-chips {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: nowrap;
  margin-left: 0.7rem;
  gap: 0.35rem;
}
.layout-color-rows > .layout-color-row:not(.is-open) > .layout-color-line .layout-color-chip {
  flex: 0 0 auto;
  width: 2.6rem;
  max-width: none;
  min-width: 2.6rem;
  gap: 0.08rem;
}
.layout-color-rows > .layout-color-row:not(.is-open) > .layout-color-line .layout-color-chip-label {
  font-size: 0.6rem;
  white-space: nowrap;
}
.layout-color-rows > .layout-color-row:not(.is-open) > .layout-color-line .layout-color-chip-swatch {
  height: 1.7rem;
}
.layout-color-rows > .layout-color-row.is-open {
  border-color: transparent;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}
.layout-color-rows > .layout-color-row.is-open > .layout-color-line {
  border: 1px solid rgba(20, 28, 36, 0.18);
  border-radius: 0.75rem;
  padding: 0.4rem 0.55rem;
  background: #fff;
}
.layout-color-rows > .layout-color-group[data-color-group="band"] > .layout-color-line,
.layout-color-rows > .layout-color-group[data-color-group="contact"] > .layout-color-line {
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-rows: auto;
  column-gap: 0.45rem;
}
.layout-color-rows > .layout-color-group[data-color-group="band"] > .layout-color-line > .layout-color-name,
.layout-color-rows > .layout-color-group[data-color-group="contact"] > .layout-color-line > .layout-color-name {
  grid-column: 1;
  grid-row: 1;
}
.layout-color-rows > .layout-color-group[data-color-group="band"] > .layout-color-line > .layout-color-chips,
.layout-color-rows > .layout-color-group[data-color-group="contact"] > .layout-color-line > .layout-color-chips {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  margin-left: 0.7rem;
  gap: 0.35rem;
}
.layout-color-rows > .layout-color-group[data-color-group="band"] > .layout-color-line .layout-color-chip,
.layout-color-rows > .layout-color-group[data-color-group="contact"] > .layout-color-line .layout-color-chip {
  flex: 0 0 auto;
  width: 2.6rem;
  max-width: none;
  min-width: 2.6rem;
  gap: 0.08rem;
}
.layout-color-rows > .layout-color-group[data-color-group="band"] > .layout-color-line .layout-color-chip-label,
.layout-color-rows > .layout-color-group[data-color-group="contact"] > .layout-color-line .layout-color-chip-label {
  font-size: 0.6rem;
}
.layout-color-rows > .layout-color-group[data-color-group="band"] > .layout-color-line .layout-color-chip-swatch,
.layout-color-rows > .layout-color-group[data-color-group="contact"] > .layout-color-line .layout-color-chip-swatch {
  height: 1.7rem;
}
.layout-color-rows > .layout-color-whole > .layout-color-line .layout-color-chip {
  flex: 0 0 auto;
  width: 2.6rem;
  max-width: none;
  min-width: 2.6rem;
  gap: 0.08rem;
}
.layout-color-rows > .layout-color-whole > .layout-color-line .layout-color-chip-label {
  font-size: 0.6rem;
}
.layout-color-rows > .layout-color-whole > .layout-color-line .layout-color-chip-swatch {
  height: 1.7rem;
}
.layout-color-rows > .layout-color-row:not(.is-open) > .layout-color-line {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  row-gap: 0.28rem;
  min-height: 0;
}
.layout-color-rows > .layout-color-row:not(.is-open) > .layout-color-line > .layout-color-name {
  position: static;
  z-index: auto;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
.layout-color-rows > .layout-color-row:not(.is-open) > .layout-color-line > .layout-color-chips {
  position: static;
  grid-column: 1;
  grid-row: 2;
  left: auto;
  top: auto;
  transform: none;
  width: 100%;
  margin-left: 0;
  justify-self: stretch;
  justify-content: center;
}
.layout-color-move.is-touch {
  background: #e7f6ea;
}
.layout-color-move.is-dragging {
  position: relative;
  z-index: 4;
  background: #fff;
  border-color: #3d8a48 !important;
}
.layout-color-line > .layout-inner-handle,
#easy-img-layout-host .layout-arrange-handle,
#easy-copy-list-host .layout-arrange-handle,
.layout-closed-line .layout-inner-handle,
#easy-copy-list-host .layout-inner-handle {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
  border: 1px solid rgba(20, 28, 36, 0.12);
  border-radius: 999px;
  background: #f4f5f4;
  color: #5a635c;
  font-size: 0.75rem;
  letter-spacing: -0.08em;
  line-height: 1;
  cursor: grab;
}
.layout-color-line > .layout-inner-handle:active,
.layout-color-move.is-dragging > .layout-color-line > .layout-inner-handle,
body.is-color-move-dragging,
body.is-color-move-dragging * {
  cursor: grabbing !important;
}
#easy-img-layout-host .layout-arrange-cell.is-dragging,
#easy-img-layout-host .layout-photo-row.is-dragging {
  position: relative;
  z-index: 4;
  opacity: 1;
  background: #fff;
  border-color: #3d8a48 !important;
}
#preview-align-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 3px solid #3d8a48;
  z-index: 9;
  pointer-events: none;
}
#preview-align-bar[hidden] {
  display: none !important;
}
.shell.is-photo-hold {
  overflow: hidden;
}
#easy-copy-list-host .easy-copy-list-cell.is-dragging,
#easy-copy-list-host .easy-copy-list-row.is-dragging {
  position: relative;
  z-index: 4;
  opacity: 1;
  background: #fff;
  border-color: #3d8a48 !important;
}
#easy-img-layout-host .layout-arrange-cell.is-touch,
#easy-img-layout-host .layout-photo-row.is-touch,
#easy-copy-list-host .easy-copy-list-cell.is-touch,
#easy-copy-list-host .easy-copy-list-row.is-touch {
  background: #e7f6ea;
}
.layout-color-group-body[hidden] {
  display: none;
}
.layout-color-group-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  margin-top: 0.35rem;
}
.layout-color-group-body > .layout-color-done {
  align-self: flex-end;
  width: auto;
  min-width: 7.5rem;
  margin-top: 0.35rem;
}
@media (max-width: 40rem) {
  .layout-color-done {
    min-width: 7.5rem;
    width: auto;
    min-height: 2.6rem;
    justify-self: end;
  }
}
.layout-color-group.is-honey > .layout-color-group-body {
  display: block;
}
.layout-color-group.is-open > .layout-color-line,
.layout-color-group.is-honey > .layout-color-line,
.layout-color-group.is-honey .layout-color-done,
.layout-color-group.is-honey .layout-color-sub:not(.is-open) {
  display: none;
}
.layout-color-rows > .layout-color-whole.is-honey > .layout-color-line {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.4rem;
  width: 100%;
}
.layout-color-rows > .layout-color-whole.is-honey > .layout-color-line > .layout-color-name {
  width: auto;
  max-width: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.layout-color-rows > .layout-color-whole.is-honey > .layout-color-line > .layout-color-grip-spacer,
.layout-color-rows > .layout-color-whole.is-honey > .layout-color-line > .layout-color-contents,
.layout-color-rows > .layout-color-whole.is-honey > .layout-color-line > .layout-color-open,
.layout-color-rows > .layout-color-whole.is-honey > .layout-color-line > .layout-color-chips,
.layout-color-rows > .layout-color-whole.is-honey .layout-color-sub.is-open > .layout-color-line {
  display: none;
}
.layout-color-whole-now {
  display: none;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  color: #1a1f1c;
}
.layout-color-rows > .layout-color-whole.is-honey > .layout-color-line > .layout-color-whole-now {
  display: inline;
  flex: 0 0 auto;
}
.layout-color-subs {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}
.layout-color-done {
  min-width: 7.5rem;
  min-height: 3.2rem;
  justify-content: center;
  box-sizing: border-box;
}
@media (max-width: 40rem) {
  .layout-color-done {
    min-width: 0;
    min-height: 2.6rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    font-size: 0.92rem;
  }
}
.layout-color-body .accent-bar-field {
  margin-top: 0.8rem;
}
.layout-color-body .accent-bar-field[hidden] {
  display: none;
}
.layout-color-ask {
  display: none !important;
}
.layout-color-row.is-open > .layout-color-line {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
}
.layout-color-row.is-open > .layout-color-line > .layout-color-ask {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.layout-color-row.is-open > .layout-color-line > .layout-color-name {
  grid-column: 1 / -1;
  width: auto;
  max-width: 100%;
  font-size: 1.7rem;
  white-space: nowrap;
}
@media (max-width: 40rem) {
  .layout-color-row.is-open > .layout-color-line > .layout-color-name {
    font-size: 1.15rem;
  }
}
@container dash (max-width: 32rem) {
  .layout-color-row.is-open > .layout-color-line {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
  }
  .layout-color-row.is-open > .layout-color-line > .layout-color-name {
    white-space: normal;
    overflow-wrap: anywhere;
    width: 100%;
    max-width: 100%;
  }
  .layout-color-row.is-open > .layout-color-line > .layout-color-ask {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    white-space: normal;
    text-align: center;
  }
}
.layout-color-open {
  margin: 0 0 0 auto;
  padding: 0.2rem 0.55rem;
  border: 1px solid #c5ced6;
  border-radius: 999px;
  background: #fff;
  color: #1a1f1c;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
}
.layout-color-body {
  margin-top: 0.45rem;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
  container-type: inline-size;
  container-name: layout-color-body;
}
.layout-color-row.is-open > .layout-color-line > .layout-color-open,
.layout-color-row.is-open > .layout-color-line > .layout-inner-handle {
  display: none;
}
body:has([data-step-id="easy-color-stage"] .layout-color-row.is-open) .wizard-foot-dock > :not(#wizard-nav),
body:has([data-step-id="easy-color-stage"] .layout-color-row.is-open) #wizard-next,
body:has([data-step-id="easy-color-stage"] .layout-color-row.is-open) #btn-zip,
body:has([data-step-id="easy-color-stage"] .layout-color-row.is-open) #wizard-back,
body:has([data-step-id="easy-color-stage"] .layout-color-row.is-open) .wizard-foot-dock {
  display: none !important;
}
.layout-color-body .gct-pick-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(1.7rem, 1fr) minmax(1.7rem, 1fr);
  align-items: stretch;
  gap: 0.32rem 0.32rem;
  margin-left: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
}
.layout-color-body .gct-pick-target-row {
  display: contents;
}
.layout-color-body #gct-pick-live-note {
  display: none;
}
.layout-color-body #gct-pick-target-main {
  grid-column: 1;
  grid-row: 1;
}
.layout-color-body #gct-pick-target-partner {
  grid-column: 2;
  grid-row: 1;
}
.layout-color-body .gct-pick-side > .gct-honey-shade {
  grid-column: 1 / -1;
  grid-row: 2;
  width: auto;
  max-width: none;
  margin: 0;
}
.layout-color-body #gct-pick-grad {
  grid-column: 1;
  grid-row: 3 / 5;
  align-self: stretch;
  justify-self: stretch;
  width: auto;
  height: 100%;
  margin: 0;
}
.layout-color-body .gct-actions-pick--undo {
  grid-column: 2;
  grid-row: 3;
  margin: 0;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.layout-color-body .gct-pick-confirm {
  grid-column: 2;
  grid-row: 4;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.layout-color-body #gct-pick-ink-note,
.layout-color-body #gct-pick-grad-help {
  grid-column: 1;
  grid-row: 3;
  margin: 0;
}
.layout-color-body .gct-pick-layout.is-mode-few .gct-pick-side,
.layout-color-body .gct-pick-layout:not(:has(#gct-pick-target-partner:not([hidden]))) .gct-pick-side {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  margin-left: 0;
  width: auto;
}
.layout-color-body .gct-pick-layout:not(:has(#gct-pick-target-partner:not([hidden]))) #gct-pick-target-main {
  grid-column: 1 / -1;
  grid-row: 1;
}
.layout-color-body .gct-pick-layout:not(:has(#gct-pick-target-partner:not([hidden]))) .gct-pick-side > .gct-honey-shade {
  grid-column: 1 / -1;
  grid-row: 2;
}
.layout-color-body .gct-pick-layout:not(:has(#gct-pick-target-partner:not([hidden]))) .gct-actions-pick--undo {
  grid-column: 1;
  grid-row: 3;
  height: auto;
  align-self: start;
}
.layout-color-body .gct-pick-layout:not(:has(#gct-pick-target-partner:not([hidden]))) .gct-pick-confirm {
  grid-column: 2;
  grid-row: 3;
  height: auto;
  align-self: start;
}
.layout-color-body .gct-pick-layout.is-mode-few .gct-honey-shade,
.layout-color-body .gct-pick-layout.is-mode-none .gct-honey-shade {
  display: none;
}
.layout-color-body .gct-pick-layout.is-mode-few .gct-actions-pick--undo {
  grid-column: 1;
  grid-row: 1;
}
.layout-color-body .gct-pick-layout.is-mode-few .gct-pick-confirm {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  width: auto;
  height: auto;
}
.layout-color-body .gct-pick-layout.is-mode-few #gct-pick-target-main,
.layout-color-body .gct-pick-layout.is-mode-few #gct-pick-target-partner,
.layout-color-body .gct-pick-layout.is-mode-few #gct-pick-grad {
  display: none;
}
.layout-color-body .gct-pick-layout.is-mode-few .gct-pick-side {
  grid-template-rows: auto;
  width: 100%;
  justify-self: stretch;
}
.layout-color-body .gct-pick-layout.is-mode-few #gct-pick-ok {
  width: auto;
  height: auto;
  flex: 0 0 auto;
}
.layout-color-body .gct-pick-target {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  width: 100%;
  min-height: 2.45rem;
  padding: 0.4rem 0.45rem;
  justify-content: center;
}
.layout-color-body .gct-pick-target-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 0.88rem;
}
.gct-pick-layout:has(#gct-pick-target-partner:not([hidden])) .gct-pick-target.is-active .gct-pick-target-label::after {
  content: "✓";
  margin-left: 0.4rem;
  font-weight: 900;
  line-height: 1;
}
.layout-color-body .gct-pick-target-swatch {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: inherit;
}
.layout-color-body .gct-pick-target.is-grad-gate .gct-pick-target-swatch {
  display: none;
}
.layout-color-body .gct-honey-wrap {
  padding: 0;
}
.layout-color-body .gct-honey-board {
  display: grid;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
  align-items: stretch;
  gap: 0.45rem;
  margin: 0;
}
.layout-color-body .gct-pick-chooser {
  position: relative;
  z-index: 0;
  min-width: 0;
  max-width: none;
  overflow: visible;
}
.layout-color-body .gct-pick-side {
  position: relative;
  z-index: 1;
}
.layout-color-body .gct-honey-wrap,
.layout-color-body .gct-honey-board,
.layout-color-body .gct-honey-foot,
.layout-color-body .gct-honey-gray {
  max-width: 100%;
  min-width: 0;
}
.layout-color-body .gct-honey-foot,
.layout-color-body .gct-honey-gray {
  width: 0;
  min-width: 100%;
  max-width: 100%;
  flex-wrap: nowrap;
  justify-content: flex-start;
  box-sizing: border-box;
  margin: 0;
}
.layout-color-body .gct-honey-cell--gray,
.layout-color-body .gct-honey-cell--gray.has-hover-tip {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  aspect-ratio: 1;
}
.layout-color-body .gct-honey-map {
  max-width: 100%;
  margin-inline: auto;
}
.layout-color-body .gct-pick-layout--split {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "mode"
    "few"
    "chooser"
    "side";
  align-items: stretch;
  justify-content: stretch;
  column-gap: 0;
  row-gap: 0.55rem;
}
.layout-color-body .gct-pick-side {
  align-self: stretch;
}
.layout-color-body #gct-pick-ink-note {
  flex: 0 0 auto;
}
.layout-color-body .gct-pick-confirm {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.layout-color-body #gct-pick-ok {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0.3rem 0.45rem;
  font-size: 0.78rem;
  white-space: nowrap;
}
.layout-color-body .gct-actions-pick--undo .gct-btn {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0.3rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.layout-color-body .gct-pick-grad .gct-grad-compass {
  margin: 0;
  padding: 0.16rem;
  max-width: none;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(3, minmax(1.45rem, 1fr));
  grid-template-rows: repeat(3, minmax(1.45rem, 1fr));
  gap: 0.16rem;
}
.layout-color-body .gct-grad-arrow {
  font-size: 0.88rem;
}
.layout-color-body .gct-honey-shade {
  font-size: 0.7rem;
  padding: 0.15rem 0.05rem;
  gap: 0.28rem;
}
.layout-color-body .gct-pick-chooser-label {
  margin: -0.2rem 0 0.65rem;
}
.layout-color-body .gct-pick-drag-hint {
  margin-top: 0;
  margin-bottom: 0.9rem;
}
.layout-color-section:has(.layout-color-row.is-open) {
  margin-top: 0.15rem;
}
body:has([data-step-id="easy-color-stage"] .layout-color-row.is-open) [data-step-id="easy-color-stage"] > .dash-subhead-row {
  display: none;
}
.layout-color-body .gct-pick-grad-label {
  display: none;
}
.layout-color-body .gct-pick-grad {
  position: relative;
  z-index: 3;
  border: 0;
  background: transparent;
  padding: 0;
  overflow: visible;
}
.layout-color-body .gct-pick-layout {
  position: relative;
  margin-bottom: 0;
}
.layout-color-body .gct-grad-dir-pop {
  position: absolute;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  inset: 0;
  z-index: 6;
  display: block;
  margin: 0;
  padding: 0.85rem 0.9rem;
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
}
.layout-color-body .gct-grad-dir-pop[hidden] {
  display: none;
}
.layout-color-body .gct-grad-dir-pop-card {
  position: absolute;
  width: min(22rem, 100%);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
  padding: 0.75rem 0.8rem 0.7rem;
  border: 1px solid #111;
  border-radius: 0.65rem;
  background: #fff;
  box-shadow: 0 8px 22px rgba(20, 32, 42, 0.16);
}
.layout-color-body .gct-grad-dir-pop-lead {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
  color: #1a1f1c;
}
.layout-color-body .gct-grad-dir-pop-skip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a1f1c;
  cursor: pointer;
}
.layout-color-body .gct-grad-dir-pop-skip input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
}
.layout-color-body #gct-grad-dir-ok {
  width: 100%;
  min-height: 2.4rem;
  justify-content: center;
}
.layout-color-body .gct-pick-compass.is-dir-locked .gct-grad-arrow,
.layout-color-body .gct-pick-compass.is-dir-locked .gct-grad-clear {
  opacity: 0.38;
  cursor: default;
}
.layout-color-body > :not(.gct-pick-layout) {
  font-size: 0.72rem;
  font-weight: 500;
}

/* ??????????????????? */
.easy-copy-list-host {
  margin-top: 0.85rem;
}
.easy-copy-list-wire {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}
#easy-copy-list-host .easy-copy-list-cell.layout-arrange-cell--structure {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 1px solid #c5ced6;
  border-radius: 0.55rem;
  background: #fff;
  cursor: default;
  box-sizing: border-box;
}
#easy-copy-list-host .easy-copy-list-cell.is-dragging,
#easy-copy-list-host .easy-copy-list-row.is-dragging {
  position: relative;
  z-index: 4;
  opacity: 1;
  background: #fff;
  border-color: #3d8a48 !important;
}
#easy-copy-list-host .easy-copy-list-cell.is-touch,
#easy-copy-list-host .easy-copy-list-row.is-touch {
  background: #e7f6ea;
}
#easy-copy-list-host .easy-copy-list-head.layout-closed-head--list {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 2.48rem;
  padding: 0.2rem 0.5rem;
  box-sizing: border-box;
}
#easy-copy-list-host .easy-copy-list-name.layout-arrange-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding-inline: 0 !important;
  font-size: 0.92rem;
  font-weight: 800;
  color: #12181c;
  line-height: 1.3;
  text-align: left !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  pointer-events: auto;
}
#easy-copy-list-host .easy-copy-list-head .layout-open-btn,
#easy-copy-list-host .easy-copy-list-row .layout-open-btn {
  flex: 0 0 auto;
  margin-left: auto;
  min-height: 2.2rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.9rem;
  border-radius: 999px;
}
#easy-copy-list-host .easy-copy-list-body {
  margin: 0;
  padding: 0 0.45rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  box-sizing: border-box;
}
#easy-copy-list-host .easy-copy-section-tools.layout-frames-tools {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 0.45rem 1rem;
  margin: 0.15rem 0 0.35rem;
  padding: 0;
}
#easy-copy-list-host .easy-copy-list-row.layout-photo-row {
  margin: 0;
}
#easy-copy-list-host .easy-copy-list-row > .layout-closed-line {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.48rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid #d5dde5;
  border-radius: 0.45rem;
  background: #fff;
  box-sizing: border-box;
}
#easy-copy-list-host .easy-copy-list-item-label.layout-frame-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #152028;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#easy-copy-list-host .easy-copy-list-editor-host {
  margin: 0;
  padding: 0;
}
#easy-copy-list-host .easy-copy-list-editor {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.85rem 0.75rem 1rem;
  box-sizing: border-box;
}
#easy-copy-list-host .easy-copy-item-head {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
}
#easy-copy-list-host .easy-copy-item-head .easy-copy-hero-leads {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  flex: 0 1 auto;
}
#easy-copy-list-host .easy-copy-item-head .easy-copy-hero-leads .dash-field-label,
#easy-copy-list-host .easy-copy-item-head .easy-copy-hero-leads .hero-overlay-row {
  margin: 0;
}
#easy-copy-list-host .easy-copy-item-title {
  flex: 1 1 auto;
  margin: 0;
  padding-top: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #12181c;
  line-height: 1.35;
}
.easy-copy-list-ok-foot,
.easy-ok-foot {
  display: flex;
  justify-content: flex-end;
  margin: 0.75rem 0 0.15rem 0;
}
.easy-copy-list-editor > .easy-copy-list-ok-foot,
.easy-copy-list-editor > .easy-ok-foot {
  margin-top: 0;
}
.easy-copy-list-body > .easy-copy-list-ok-foot,
.easy-copy-list-body > .easy-ok-foot {
  margin-top: calc(0.75rem - 0.35rem);
}
.layout-arrange-body > .easy-ok-foot {
  grid-column: 1 / -1;
  width: 100%;
}
#easy-img-layout-host .layout-photo-editor > .easy-ok-foot {
  justify-content: stretch;
  width: 100%;
  margin: 0.75rem 0 0.15rem;
}
#easy-img-layout-host .layout-photo-editor > .easy-ok-foot .layout-open-btn {
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  margin: 0;
  min-height: 3.2rem;
  padding: 1.2rem 1rem;
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.2;
  border-radius: 0.9rem;
}
#easy-copy-list-host .easy-copy-list-ok {
  flex: 0 0 auto;
  margin: 0;
  min-height: 2.2rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.9rem;
}
#easy-copy-list-host .easy-copy-field {
  position: relative;
  margin: 0;
  padding: 0.75rem 0.85rem 0.85rem;
  border-bottom: 1px solid rgba(20, 28, 36, 0.16);
  box-sizing: border-box;
}
#easy-copy-list-host .easy-copy-field.is-no-omakase .easy-copy-field-label,
#easy-catch-copy .easy-copy-field.is-no-omakase .easy-copy-field-label {
  padding-right: 0;
}
#easy-copy-list-host .easy-copy-field-label {
  display: flex;
  align-items: center;
  min-height: 2.3rem;
  margin: 0 0 0.45rem;
  padding-right: 8.6rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: #2a333a;
}
#easy-copy-list-host .easy-copy-field-box {
  position: relative;
}
#easy-copy-list-host .easy-copy-field-input,
#easy-copy-list-host .easy-copy-field-input--solo {
  display: block;
  width: 100%;
  min-height: 7.5rem;
  margin: 0;
  padding: 0.75rem 0.85rem;
  box-sizing: border-box;
  font: inherit;
  font-size: 1rem;
  line-height: 1.55;
  border: 1px solid #c5ced6;
  border-radius: 0.45rem;
  resize: vertical;
}
#easy-copy-list-host .easy-copy-field-count {
  position: static;
  margin: 0 1ch 0 0;
  font-size: 0.78rem;
  color: #6a7680;
  pointer-events: none;
  line-height: 1;
}
#easy-copy-list-host .easy-copy-field-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0;
}
textarea.is-copy-frame,
#easy-copy-list-host .easy-copy-field-input.is-copy-frame,
#easy-copy-list-host .easy-copy-field-input--solo.is-copy-frame {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: calc(1.55em + 0.85rem);
  max-height: none;
  margin: 0;
  padding: 0.4rem 0.75rem;
  box-sizing: border-box;
  font: inherit;
  font-size: 1rem;
  line-height: 1.55;
  overflow: hidden;
  resize: none;
}
#easy-copy-list-host .easy-copy-field-actions,
#easy-catch-copy .easy-copy-field-actions {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  display: block;
  width: max-content;
  margin: 0;
  height: auto;
  overflow: visible;
  z-index: 2;
}
#easy-copy-list-host .easy-copy-field-actions .hub-tip-wrap,
#easy-catch-copy .easy-copy-field-actions .hub-tip-wrap {
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
  margin: 0;
  transform: translate(-35%, -45%);
}
#easy-copy-list-host .easy-copy-omakase-btn,
#easy-copy-list-host .easy-copy-reset-btn {
  min-height: 2.3rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 600;
}
#preview-root .is-copy-field-ring {
  outline: 2px solid rgba(61, 138, 72, 0.55);
  outline-offset: 4px;
  background: transparent !important;
  box-shadow: none;
}
[data-step-id="easy-copy-omakase"].is-copy-solo > .dash-subhead-row,
[data-step-id="easy-copy-omakase"].is-easy-drill > .dash-subhead-row {
  display: none !important;
}
#easy-copy-list-host.is-copy-solo .easy-copy-list-cell[hidden],
#easy-copy-list-host.is-copy-solo .easy-copy-list-row[hidden] {
  display: none !important;
}
#easy-copy-list-host.is-copy-section-solo .easy-copy-list-cell:not([hidden]) {
  padding: 0;
  border: 0;
  background: transparent;
  box-sizing: border-box;
}
#easy-copy-list-host.is-copy-section-solo .easy-copy-list-head.layout-closed-head--list {
  min-height: 0;
  padding: 0 0 0.35rem;
  margin: 0;
}
#easy-copy-list-host.is-copy-section-solo .layout-arrange-handle {
  display: none !important;
}
#easy-copy-list-host.is-copy-item-solo .easy-copy-list-head {
  display: none !important;
}
#easy-copy-list-host.is-copy-item-solo .easy-copy-list-body {
  padding: 0;
}
#easy-copy-list-host.is-copy-item-solo .easy-copy-list-cell:not([hidden]) {
  padding: 0;
  border: 0;
  background: transparent;
}
body:has([data-step-id="easy-copy-omakase"].is-copy-solo) .wizard-foot-dock > :not(#wizard-nav),
body:has([data-step-id="easy-copy-omakase"].is-copy-solo) #wizard-next,
body:has([data-step-id="easy-copy-omakase"].is-copy-solo) #btn-zip,
body:has([data-step-id="easy-copy-omakase"].is-easy-drill) .wizard-foot-dock > :not(#wizard-nav),
body:has([data-step-id="easy-copy-omakase"].is-easy-drill) #wizard-next,
body:has([data-step-id="easy-copy-omakase"].is-easy-drill) #btn-zip,
body:has([data-step-id="easy-copy-omakase"].is-copy-item-solo) #wizard-back,
body:has([data-step-id="easy-copy-omakase"].is-copy-item-solo) .wizard-foot-dock,
body:has([data-step-id="easy-copy-omakase"].is-copy-section-solo) #wizard-back,
body:has([data-step-id="easy-copy-omakase"].is-copy-section-solo) .wizard-foot-dock,
body.is-catch-inline .wizard-foot-dock > :not(#wizard-nav),
body.is-catch-inline #wizard-next,
body.is-catch-inline #btn-zip {
  display: none !important;
}
.easy-copy-frame-cand.is-picked {
  outline: 2px solid #3d8a48;
  outline-offset: 1px;
}
.easy-copy-field-input {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  box-sizing: border-box;
}

.easy-listing-host {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0.2rem 0 0.4rem;
  padding: 0.35rem 0.2rem;
}
.easy-listing-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.65rem 0.85rem;
  text-align: center;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #243028;
  background: #fff;
  border: 1px solid #c5ced6;
  border-radius: 0.55rem;
  cursor: pointer;
}
.easy-listing-btn.is-on {
  color: #243028;
  background: #fff;
  border-color: #c5ced6;
  outline: 1px solid #3d8a48;
  outline-offset: 3px;
}
.easy-listing-btn.is-off-start {
  margin-top: 0.85rem;
}
.easy-copy-name-line {
  display: block;
  margin: 0;
}
.easy-copy-name-input {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.35rem 0.15rem;
  box-sizing: border-box;
  font: inherit;
  font-size: 1.15rem;
  line-height: 1.4;
  color: #12181c;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(20, 28, 36, 0.28);
  border-radius: 0;
}
.easy-copy-name-warn {
  margin: 0.4rem 0 0.85rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #8a3b2a;
}
.easy-copy-name-warn[hidden] {
  display: none !important;
}
#easy-copy-later-hint[hidden] {
  display: none !important;
}
.wizard-foot-dock .dash-resume-notice,
.wizard-foot-dock .easy-copy-later-hint {
  margin: 0 0 0.45rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
  color: #2a3238;
}
#easy-copy-list-host .easy-copy-field-actions .hub-tip-wrap {
  align-items: center;
  margin-left: 0;
}
#easy-copy-list-host .easy-copy-field-actions .hub-tip-btn {
  top: 0;
}
.easy-copy-section-settings {
  margin: 0 0 0.875rem;
  padding: 0.875rem 0 0;
}
.easy-copy-acc-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  align-items: start;
  margin: 0 0.85rem 0.75rem;
}
.easy-copy-acc-col .dash-field-label {
  margin: 0 0 0.45rem;
  min-height: 1.3em;
}
.easy-copy-acc-col .hero-overlay-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
}
.easy-copy-acc-col .hero-overlay-row .gct-btn {
  flex: 1 1 6.5rem;
  min-height: 2.3rem;
}
.easy-copy-acc-col .dash-note {
  margin: 0.45rem 0 0;
}
.easy-copy-acc-format {
  margin: 0 0.85rem 0.75rem;
}
.easy-copy-section-settings .easy-copy-field {
  padding-top: 0.55rem;
  padding-bottom: 0.65rem;
}
#easy-catch-host {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
#easy-catch-settings .easy-copy-hub-extras {
  display: none;
}
#easy-catch-settings .easy-copy-hero-board {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "plate pos";
}
#easy-catch-settings .easy-copy-hero-catch {
  display: none;
}
#easy-catch-settings .easy-copy-hero-plate-span {
  width: auto;
  max-width: none;
  margin-top: 0;
}
#easy-catch-settings .easy-copy-hero-pos {
  grid-area: pos;
  grid-column: auto;
  grid-row: auto;
  margin-top: 0;
}
#easy-catch-copy .easy-copy-hero-leads {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0 0.85rem 0.75rem;
}
#easy-catch-copy .easy-copy-hero-leads .layout-count-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
#easy-catch-copy .easy-copy-hero-leads .layout-image-count-num {
  min-width: 4.6rem;
  text-align: center;
  font-weight: 700;
}
#easy-catch-copy .easy-copy-hero-size {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  margin: 0 0.85rem 0.85rem;
  padding: 0;
  border: 0;
}
#easy-catch-copy .easy-copy-hero-size legend {
  flex: 1 0 100%;
  padding: 0;
}
#easy-catch-copy .easy-copy-hero-size label {
  white-space: nowrap;
}
/* キャッチの画像ページだけ。これでOKから戻る・次へまでの空きを半分に */
body:has(#easy-catch-page-image:not([hidden])) .dash-block.dash-block--easy.is-wizard-active,
body:has(#easy-catch-page-settings:not([hidden])) .dash-block.dash-block--easy.is-wizard-active {
  padding-bottom: 0;
  margin-bottom: 0;
}
body:has([data-step-id="easy-catch"]:not([hidden]) #easy-catch-page-image:not([hidden])) #wizard-back,
body:has([data-step-id="easy-catch"]:not([hidden]) #easy-catch-page-write:not([hidden])) #wizard-back,
body:has([data-step-id="easy-catch"]:not([hidden]) #easy-catch-page-color:not([hidden]) .layout-color-row.is-open) #wizard-back {
  display: none !important;
}
#easy-catch-img #easy-img-layout-host .layout-arrange-cell.layout-arrange-cell--structure.size-L {
  margin-bottom: 0;
}
.easy-catch-empty-note {
  margin: 0 0.85rem;
  font-size: 0.82rem;
  line-height: 1.45;
}
.easy-catch-tags {
  display: flex;
  gap: 0.85rem;
  margin: 0 0.85rem 0.75rem;
  font-size: 0.92rem;
}
.easy-catch-tags span {
  color: #b5b5b5;
  font-weight: 400;
}
.easy-catch-tags .is-now {
  color: #1a1a1a;
  font-weight: 800;
}
.easy-catch-steps {
  margin: 0 0.85rem 0.875rem;
  padding-left: 1.35rem;
  line-height: 1.55;
}
.easy-catch-ask {
  margin: 0 0.85rem 0.75rem;
  font-size: 1rem;
}
.easy-catch-ask-row {
  display: flex;
  gap: 0.55rem;
  margin: 0 0.85rem;
}
#easy-catch-image-off {
  margin: 0 0.85rem;
}
#easy-catch-image-off:empty {
  display: none;
}
#easy-catch-copy .easy-copy-field {
  position: relative;
  padding: 1.45rem 0.85rem 0.85rem;
}
#easy-catch-copy .easy-copy-field + .easy-copy-field {
  margin-top: 1.55rem;
}
#easy-catch-copy .easy-copy-field-label {
  display: flex;
  align-items: center;
  min-height: 2.3rem;
  margin: 0 0 0.45rem;
  padding-right: 7.2rem;
}
#easy-catch-copy .easy-copy-field-box {
  position: relative;
}
#easy-catch-copy .easy-copy-field-actions {
  display: block;
  top: 1.45rem;
  right: 0.85rem;
}
#easy-catch-copy .easy-copy-omakase-btn,
#easy-catch-copy .easy-copy-reset-btn {
  min-height: 2.3rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 600;
}
#easy-catch-copy .easy-copy-omakase-btn {
  position: static;
  top: auto;
  right: auto;
  z-index: 1;
}
#easy-catch-copy .easy-catch-field-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0;
}
#easy-catch-copy .easy-copy-reset-btn {
  position: static;
  display: inline-block;
  margin: 0;
}
#easy-catch-copy .easy-copy-field-count {
  position: static;
  margin: 0 1ch 0 0;
  font-size: 0.78rem;
  color: #6a7680;
  line-height: 1;
}
#easy-catch-copy .easy-copy-field:last-child {
  padding-bottom: 0;
}
body:has(#easy-catch-page-write:not([hidden])) .dash-block.dash-block--easy.is-wizard-active,
body:has(#easy-catch-page-color:not([hidden])) .dash-block.dash-block--easy.is-wizard-active {
  padding-bottom: 0;
  margin-bottom: 0.35rem;
}
#easy-catch-color > .layout-color-row > .layout-color-line > :not(.layout-color-ask) {
  display: none;
}
#easy-catch-color > .layout-color-row.is-open > .layout-color-line {
  display: none;
}
#easy-catch-color .gct-pick-layout {
  margin-bottom: 0;
}
#easy-catch-copy textarea.easy-copy-field-input {
  padding: 0.75rem;
}
.easy-copy-font-frame {
  margin: 0 0 0.38rem;
  padding: 0;
  border: 1px solid #c5ced6;
  border-radius: 0.55rem;
  background: #fff;
  box-sizing: border-box;
}
#easy-catch-copy .easy-catch-font {
  margin: 0.35rem 0 0.15rem;
}
.easy-copy-font-frame-body {
  padding: 0 0.5rem 0.55rem;
}
.easy-copy-font-frame .easy-copy-font-slot + .easy-copy-font-slot {
  margin-top: 0.35rem;
}
.easy-copy-font-frame .font-picker-toggle {
  padding: 0.45rem 0.7rem;
}
.easy-copy-hub-extras {
  margin: 0.875rem 0.85rem 0;
}
.easy-copy-hub-extras .step-font-embed {
  margin: 0 0 0.75rem;
}
.easy-copy-color-host .layout-color-row {
  margin-top: 0.5rem;
}
#about-accordions.is-accordion-look {
  outline: 2px solid rgba(61, 138, 72, 0.55);
  outline-offset: 4px;
}
body.is-site-name-dawn .dash-body {
  background: #fff;
  background-image: none;
}
body.is-site-name-dawn .wizard-foot-dock {
  background: transparent;
  border-top: 0;
  box-shadow: none;
}
body.is-site-name-dawn .wizard-foot {
  padding-left: 0.65rem;
}
body.is-site-name-dawn #wizard-next,
body.is-site-name-dawn #btn-zip,
body.is-site-name-dawn .dash-resume-notice,
body.is-site-name-dawn .easy-copy-later-hint,
body.is-site-name-dawn .wizard-foot-guide {
  display: none !important;
}
body.is-site-name-dawn .dash-body > .fill-form,
body.is-site-name-dawn .dash-block[data-step-id="easy-site-name"] {
  background: #fff;
}
body.is-site-name-dawn .dash-block[data-step-id="easy-site-name"] {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
}
body.is-site-name-dawn .dash-body > .fill-form {
  display: flex;
  flex-direction: column;
}
body.is-site-name-dawn .wizard-foot-dock {
  height: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border-top: 0;
  box-shadow: none;
}
body.is-after-color-guide.is-site-name-dawn .wizard-foot-dock {
  height: auto;
  padding: 0.5rem 1rem 0.65rem;
  background: #f4f2ee;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
body.is-after-color-guide.is-site-name-dawn #wizard-next {
  display: inline-block !important;
}
.easy-site-name-dawn {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0.75rem;
  box-sizing: border-box;
  text-align: center;
  container-type: inline-size;
}
.easy-site-name-lead {
  margin: 0 0 0.55rem;
  font-size: clamp(0.68rem, 4.4cqi, 1.85rem);
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
  color: #121816;
}
.easy-site-name-note {
  margin: 0 0 1.15rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #5c656c;
}
.easy-site-name-input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.35rem 0.2rem 0.5rem;
  box-sizing: border-box;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: #121816;
  caret-color: #121816;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(20, 28, 36, 0.45);
  border-radius: 0;
}
.easy-site-name-ask {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.5rem;
  margin-top: 1.25rem;
}
.easy-site-name-ask .gct-btn {
  visibility: hidden;
  min-width: 8rem;
  min-height: 2.5rem;
}
.easy-site-name-ask.is-ready .gct-btn {
  visibility: visible;
}