body {
  font-family:sans-serif;
  background:#ccc1ad;
  margin:0;
  padding:40px;
  color:#837965;
}

.container {
  max-width:1000px;
  margin:auto;
  background:#fbe8c3;
  padding:30px;
  border-radius:25px;
  box-shadow:0 0 40px #fbe8c322;
}
.title {
  text-align: center;
  font-weight: 800;
  font-size: 32px;
  letter-spacing: 1px;
  color: #ff6b81;

  text-shadow:
    0 2px 0 rgba(0,0,0,0.08),
    0 4px 8px rgba(0,0,0,0.06);
}


.back-link {
  margin-top: 15px;
  margin-bottom: 30px;
}

.back-link a {
  text-decoration: none;
  font-size: 14px;
  color: #8a7d6a;
  opacity: 0.8;
  transition: 0.2s ease;
}

.back-link a:hover {
  opacity: 1;
}



/* 🔹 カラー入力4列 */
.color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1100px;
  column-gap:18px;
  row-gap:8px;
  color:#444;
}

/* 🔹 セレクト4列 */
.select-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap:18px;
  row-gap:8px;
  max-width: 1100px;
  margin: 20px auto 20px;
}

/* 🔹 共通サイズ統一 */
input{
  width:100%;
  min-width:0; 
  box-sizing:border-box;
  background:#111;
  border:1px solid #333;
  border-radius:12px;
  padding:8px;
  color:#666;
  transition:0.2s;
}

input:focus{
  outline:none;
  border-color:#ff6f91;
  box-shadow:0 0 8px rgba(255,111,145,0.5);
}


select {
width:100%;
  min-width:0;
  box-sizing:border-box;

  background:#837965;
  border:1px solid #ff6f91;
  border-radius:12px;
  padding:8px;

  color:#fff;
  font-weight:normal;

  transition:0.2s;
}

/* 🔹 セレクト項目 */
.select-item {
  display: flex;
  flex-direction: column;
}

.select-item label {
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: bold;
  white-space: nowrap;   /* ← 改行防止 */
}

/* 🔹 ボタン */
.button-area {
  text-align: center;
  margin-bottom: 40px;
}

.button-area button {
  padding: 10px 25px;
  margin: 10px;
  border-radius: 25px;
  border: none;
  background: #ff6b81;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

.result-section {
  max-width: 1100px;
  margin: 0 auto 60px;
}

.result-section h2 {
  margin-bottom: 10px;
  font-size: 18px;
}
/*
#cssOutput {
  width: 100%;
  min-height: 180px;
  border-radius: 20px;
  border: 2px solid #ff6b81;
  padding: 15px;
  font-family: monospace;
  font-size: 14px;
  resize: vertical;
  box-sizing: border-box;
}
*/
textarea{
  width:100%;
  height:300px;
  margin-top:25px;
  background:#cdbd9d;
  color:#fff;
  border:1px solid #cdbd9d;
  border-radius:15px;
  box-sizing:border-box;
  padding:15px;
  resize:none;
}

input.color-white  { border-color:#dddddd; background:rgba(255,255,255,0.35); }
input.color-salmon { border-color:#ff8c7a; background:rgba(255,140,122,0.12); }
input.color-purple { border-color:#b366ff; background:rgba(179,102,255,0.12); }
input.color-green  { border-color:#4dff88; background:rgba(77,255,136,0.12); }
input.color-blue   { border-color:#4da6ff; background:rgba(77,166,255,0.12); }
input.color-red    { border-color:#ff4d4d; background:rgba(255,77,77,0.12); }
input.color-yellow { border-color:#ffd633; background:rgba(255,214,51,0.12); }
input.color-lime   { border-color:#99ff33; background:rgba(153,255,51,0.12); }
input.color-cyan   { border-color:#00e6e6; background:rgba(0,230,230,0.12); }
input.color-rose   { border-color:#ffb3e6; background:rgba(255,102,204,0.12); }
input.color-brown  { border-color:#a0522d; background:rgba(160,82,45,0.12); }
input.color-pink   { border-color:#ff66cc; background:rgba(255,77,166,0.12); }
input.color-orange { border-color:#ff6a00; background:rgba(255,148,77,0.12); }