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

.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;
}

.grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  column-gap:18px;
  row-gap:8px;
}

input{
  width:100%;
  min-width:0; 
  box-sizing:border-box;
  background:#111;
  border:1px solid #333;
  border-radius:12px;
  padding:8px;
  color:#fff;
  transition:0.2s;
}

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

.button-area{
  text-align:center;
  margin-top:25px;
}

button{
  border:none;
  border-radius:30px;
  padding:10px 25px;
  font-size:14px;
  cursor:pointer;
  transition:0.2s;
  margin:5px;
  background:#ff6f91;
  color:#fff;
}

button:hover{
  transform:scale(1.05);
  box-shadow:0 0 15px rgba(255,111,145,0.6);
}

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;
}


.color-row{
  display:flex;
  gap:12px;
  margin-bottom:12px;

 
}  /* ===== 色テーマ ===== */

input.color-red   { border-color:#ff4d4d;   background:rgba(255,77,77,0.10); }
input.color-blue  { border-color:#4da6ff;   background:rgba(77,166,255,0.10); }
input.color-green { border-color:#4dff88;   background:rgba(77,255,136,0.10); }
input.color-pink  { border-color:#ff4da6;   background:rgba(255,77,166,0.10); }
input.color-orange{ border-color:#ff944d;   background:rgba(255,148,77,0.10); }
input.color-yellow{ border-color:#ffd633;   background:rgba(255,214,51,0.10); }
input.color-black { border-color:#666;      background:rgba(255,255,255,0.25); }
input.color-white { border-color:#ddd;      background:rgba(255,255,255,0.25); }
input.color-purple{ border-color:#b366ff;   background:rgba(179,102,255,0.10); }
input.color-brown { border-color:#a0522d;   background:rgba(160,82,45,0.10); }
input.color-cyan  { border-color:#00e6e6;   background:rgba(0,230,230,0.10); }
input.color-lime  { border-color:#99ff33;   background:rgba(153,255,51,0.10); }
input.color-maroon{ border-color:#800000;   background:rgba(128,0,0,0.10); }
input.color-rose  { border-color:#ff66cc;   background:rgba(255,102,204,0.10); } 
input.color-banana{ border-color:#ffe135;   background:rgba(255,225,53,0.10); }
input.color-gray  { border-color:#999;      background:rgba(200,200,200,0.08); }
input.color-tan   { border-color:#d2b48c;   background:rgba(210,180,140,0.10); }
input.color-coral { border-color:#ff7f6a;   background:rgba(255,127,106,0.10); }