/* ===== 基本レイアウト ===== */

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 30px;
}

/* パレット全体を中央寄せ */
.palette-wrapper {
  max-width: 640px;
  padding: 20px 30px;
  border: 1px dashed #66c;
  margin: 0 auto;
}

/* 各行のレイアウト */
.row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* 見出しや情報 */
#info {
  margin-top: 10px;
  font-weight: bold;
}

/* サンプル表示エリア */
#sampleText {
  margin-top: 20px;
  padding: 16px;
  border: 1px dashed #66c;
  line-height: 1.6;
  min-height: 60px;
}

/* swatch（色表示枠） */
#swatch {
  width: 80px;
  height: 50px;
  border: 1px solid #999;
  border-radius: 6px;
  background: #fff;
 }
#swatch,
#textSwatch {
  width: 80px;
  height: 50px;
  border: 1px solid #999;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ===== Responsive ===== */
@media (max-width: 600px) {

  /* 全体の余白を少し詰める */
  body {
    margin: 16px;
  }

  /* パレット幅をフルに */
  .palette-wrapper {
    max-width: 100%;
  }

  /* 行を縦並びに */
  .row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* swatch を横いっぱいに */
  #swatch,
  #textSwatch {
    width: 100%;
    height: 44px;
  }

  /* 情報テキスト */
  #info {
    text-align: center;
  }

  /* サンプル表示 */
  #sampleText {
    padding: 12px;
    font-size: 15px;
  }
}