/* 切替部品のレイアウトだけ。サイト全体の外観は design-themes.css に集約する。 */
.dsw-host { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.dsw-trigger, .dsw-close, .dsw-reset {
  box-sizing: border-box;
  min-height: 44px;
  border: 1px solid var(--design-input, #737b75);
  border-radius: var(--design-radius-sm, 8px);
  padding: 9px 12px;
  background: var(--design-paper, #fffdf8);
  color: var(--design-ink, #242b27);
  font: 700 14px/1.4 var(--design-font, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif);
  cursor: pointer;
}
.dsw-trigger { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; padding: 9px; }
.dsw-palette { display: block; width: 24px; height: 24px; flex: none; pointer-events: none; }
.login-card > .dsw-host { justify-content: flex-end; margin-bottom: 16px; }
.dsw-dialog {
  box-sizing: border-box;
  width: min(720px, calc(100% - 24px));
  max-width: calc(100% - 24px);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 20px;
  border: 1px solid var(--design-input, #737b75);
  border-radius: var(--design-radius, 14px);
  background: var(--design-paper, #fffdf8);
  color: var(--design-ink, #242b27);
  box-shadow: var(--design-shadow, 0 18px 54px #0004);
  font: 16px/1.6 var(--design-font, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif);
  overflow: auto;
  overscroll-behavior: contain;
}
.dsw-dialog::backdrop { background: #0009; }
.dsw-dialog .dsw-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dsw-dialog .dsw-title { margin: 0; font: 700 22px/1.4 var(--design-heading-font, inherit); }
.dsw-dialog .dsw-close { flex: 0 0 auto; }
.dsw-dialog .dsw-description { margin: 14px 0; color: var(--design-muted, #555f58); font-size: 14px; }
.dsw-dialog .dsw-fieldset { min-width: 0; margin: 0; border: 0; padding: 0; }
.dsw-dialog .dsw-legend { padding: 0; margin-bottom: 8px; font-weight: 700; }
.dsw-dialog .dsw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dsw-dialog .dsw-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 2px solid var(--design-input, #737b75);
  border-radius: var(--design-radius-sm, 8px);
  background: var(--design-paper, #fffdf8);
  color: var(--design-ink, #242b27);
  font: inherit;
  cursor: pointer;
}
.dsw-dialog .dsw-choice[data-selected="true"] { outline: 2px solid var(--design-primary, #235d50); outline-offset: 1px; }
.dsw-dialog .dsw-radio { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; opacity: 0; }
.dsw-dialog .dsw-swatch { display: block; height: 54px; overflow: hidden; border: 1px solid var(--design-input, #737b75); border-radius: 4px; background: var(--dsw-preview-bg, var(--design-bg, #f4f0e6)); }
.dsw-dialog .dsw-swatch-bar { display: block; height: 9px; background: var(--dsw-preview-accent, var(--design-primary, #235d50)); }
.dsw-dialog .dsw-swatch-card { display: block; margin: 6px 9px; color: var(--dsw-preview-ink, var(--design-ink, #242b27)); font-family: var(--design-heading-font, inherit); font-weight: 700; }
.dsw-dialog .dsw-name { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.dsw-dialog .dsw-detail { color: var(--design-muted, #555f58); font-size: 12px; overflow-wrap: anywhere; }
.dsw-dialog .dsw-check { min-height: 19px; color: var(--design-link, #235d50); font-size: 12px; font-weight: 700; visibility: hidden; }
.dsw-dialog .dsw-choice[data-selected="true"] .dsw-check { visibility: visible; }
.dsw-dialog .dsw-status { min-height: 1.6em; margin: 14px 0 8px; font-size: 14px; }
.dsw-trigger:focus-visible, .dsw-dialog button:focus-visible, .dsw-dialog .dsw-choice:focus-within { outline: 3px solid var(--design-primary, #235d50); outline-offset: 3px; }
@media (max-width: 600px) {
  .dsw-dialog { padding: 14px; }
  .dsw-dialog .dsw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dsw-dialog .dsw-title { font-size: 19px; }
  .dsw-dialog .dsw-choice { padding: 8px; }
}
@media print { .dsw-host, .dsw-dialog { display: none !important; } }