* {
      box-sizing: border-box;
      font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    }

    body {
      background: #f5f5f5;
      display: flex;
      justify-content: center;
      padding: 40px 0;
    }

    /* .window {
      width: 840px;
      background: white;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      overflow: hidden;
    } */

    /* 상단 브라우저 바 */
    /* 본문 영역 */
    .window-body {
  display: flex;
  flex-direction: column;
  align-items: center;  /* ⭐ 중앙 정렬 핵심 */
}

    .window-container {
      margin-top: 200px;
      width: 80vw;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    label {
      font-size: 18px;
      font-weight: 600;
      display: block;
      margin-bottom: 6px;
    }

    textarea {
      width: 100%;
      max-width: 600px;
      height: 200px;;
      padding: 10px 14px;
      border-radius: 6px;
      border: 1px solid #333;
      font-size: 14px;
      resize: vertical;
      outline: none;
    }

    .select-box {
      width: 100%;
      max-width: 600px;
      padding: 10px 14px;
      margin-bottom: 36px;
      border-radius: 6px;
      border: 1px solid #333;
      font-size: 14px;
      outline: none;
    }

    textarea:focus {
      border-color: #555;
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
    }

    .revealing-row {
      margin-top: 14px;
      font-size: 18px;
      font-weight: 500;
    }

    .revealing-label {
      font-weight: 700;
      margin-right: 4px;
    }

    .revealing-value {
      text-align: center;
      font-weight: 400;
    }

    .analyzing {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-left: 8px;
      font-size: 14px;
      color: #777;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .analyzing.visible {
      opacity: 1;
    }

    .dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #777;
      animation: blink 1s infinite ease-in-out;
    }

    .dot:nth-child(2) { animation-delay: 0.15s; }
    .dot:nth-child(3) { animation-delay: 0.3s; }

    @keyframes blink {
      0%, 20% { transform: translateY(0); opacity: 0.2; }
      50% { transform: translateY(-3px); opacity: 1; }
      100% { transform: translateY(0); opacity: 0.2; }
    }

    /* 그라데이션 색상 박스 */
    .gradient-box {
  margin-top: 14px;
  width: 100%;
  max-width: 1000px;
  height: 400px;
  background: #ccc;
  position: relative;
  overflow: hidden;
}

/* 실제 색이 들어가는 애니메이션 레이어 */
.gradient-fill {
  position: absolute;
  inset: 0;
  background: #ccc;
  transform: translateX(-100%);
  transition: transform 0.9s cubic-bezier(.4,0,.2,1);
}


    /* 하단 색상 정보 */
    .legend {
      display: flex;
      gap: 40px;
      margin-top: 14px;
      font-size: 12px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .swatch {
      width: 20px;
      height: 20px;
      border-radius: 2px;
    }

    .legend-text {
      line-height: 1.4;
    }

    #analyzeButton  {
      margin-top: 10px;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 600;
      color: white;
      background-color: #a5a5a5;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    #analyzeButton{
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: box-shadow 150ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
#analyzeButton:hover{
  box-shadow: 0 6px 18px rgba(0,0,0,0.16);
  transform: translateY(-1px);
  background-color: #274b85;
}
#analyzeButton:active{
  box-shadow: 0 2px 6px rgba(0,0,0,0.10) inset;
  transform: translateY(0);
  background-color: #274b85;
}
#analyzeButton.clicked{
  transform: scale(0.99);
  background-color: #274b85;
}

#analyzeResetButton  {
      margin-top: 10px;
      margin-left: 10px;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 600;
      color: white;
      background-color: #a5a5a5;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }

    #analyzeResetButton:hover{
      background-color: #274b85;
    }
    #analyzeResetButton:active{
      background-color: #274b85;
    }
    #analyzeButton.active,
#analyzeResetButton.active {
  background-color: #274b85;
  box-shadow: 0 6px 18px rgba(0,0,0,0.16);
  transform: translateY(-1px);
}

textarea,
.select-box {
  width: 100%;
  max-width: 600px;
}