// ──────────────────────────────────────────
// Variables
// ──────────────────────────────────────────
$primary:    #2563EB;
$primary-dk: #1D4ED8;
$success:    #16A34A;
$danger:     #DC2626;
$warning:    #D97706;
$muted:      #6B7280;
$border:     #E5E7EB;
$bg:         #F3F4F6;
$card-bg:    #FFFFFF;
$text:       #111827;
$text-sm:    #374151;

$radius:  12px;
$radius-sm: 8px;
$shadow:  0 1px 4px rgba(0,0,0,.10), 0 4px 16px rgba(0,0,0,.06);

// ──────────────────────────────────────────
// Reset & Base
// ──────────────────────────────────────────
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
  background: $bg;
  color: $text;
  line-height: 1.6;
  min-height: 100vh;
}

// ──────────────────────────────────────────
// Layout
// ──────────────────────────────────────────
#app { display: flex; flex-direction: column; min-height: 100vh; }

#app-header {
  background: $card-bg;
  border-bottom: 1px solid $border;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
}

.header-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 56px;
}

.header-title {
  font-size: .85rem;
  font-weight: 600;
  color: $primary;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lang-btn {
  font-size: .78rem;
  padding: .3rem .8rem;
  border: 1px solid $border;
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
  color: $muted;
  transition: all .15s;
  white-space: nowrap;
  &:hover { border-color: $primary; color: $primary; }
}

#app-main {
  flex: 1;
  padding: 2rem 1rem 4rem;
}

.step-wrap {
  max-width: 720px;
  margin: 0 auto;
}

// ──────────────────────────────────────────
// Step Progress Indicator
// ──────────────────────────────────────────
.step-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 2rem;

  .step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    flex: 1;
    position: relative;

    &:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 14px;
      left: calc(50% + 14px);
      right: calc(-50% + 14px);
      height: 2px;
      background: $border;
      transition: background .3s;
    }

    &.done::after { background: $primary; }

    .dot-circle {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2px solid $border;
      background: $card-bg;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .72rem;
      font-weight: 700;
      color: $muted;
      transition: all .3s;
      position: relative;
      z-index: 1;
    }

    .dot-label {
      font-size: .68rem;
      color: $muted;
      text-align: center;
      line-height: 1.2;
    }

    &.done .dot-circle { background: $primary; border-color: $primary; color: #fff; }
    &.active .dot-circle { background: $primary; border-color: $primary; color: #fff; box-shadow: 0 0 0 4px rgba($primary, .2); }
    &.active .dot-label { color: $primary; font-weight: 600; }
  }
}

// ──────────────────────────────────────────
// Cards
// ──────────────────────────────────────────
.card {
  background: $card-bg;
  border-radius: $radius;
  box-shadow: $shadow;
  padding: 2rem;
  margin-bottom: 1.5rem;

  &.card-sm { padding: 1.5rem; }
}

.section-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: .4rem;
}

.section-subtitle {
  color: $muted;
  font-size: .9rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

// ──────────────────────────────────────────
// Forms (Step 1)
// ──────────────────────────────────────────
.form-group {
  margin-bottom: 1.2rem;

  label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .5rem;
    color: $text-sm;
  }

  input[type="text"] {
    width: 100%;
    padding: .6rem .9rem;
    border: 1.5px solid $border;
    border-radius: $radius-sm;
    font-size: .9rem;
    outline: none;
    transition: border-color .2s;
    &:focus { border-color: $primary; }
    &::placeholder { color: #9CA3AF; }
  }
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;

  label {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border: 1.5px solid $border;
    border-radius: 24px;
    cursor: pointer;
    font-size: .875rem;
    font-weight: normal;
    color: $text-sm;
    transition: all .15s;
    margin: 0;
    white-space: nowrap;

    input[type="radio"] { display: none; }

    &:hover { border-color: $primary; color: $primary; }
    &.selected { border-color: $primary; background: rgba($primary,.07); color: $primary; font-weight: 600; }
  }
}

.notice-box {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: $radius-sm;
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;

  p {
    font-size: .85rem;
    color: #1E40AF;
    line-height: 1.6;
    &::before { content: '• '; }
    + p { margin-top: .3rem; }
  }
}

// ──────────────────────────────────────────
// Buttons
// ──────────────────────────────────────────
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .65rem 1.6rem;
  border-radius: $radius-sm;
  border: none;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;

  &:disabled { opacity: .45; cursor: not-allowed; }

  &.btn-primary {
    background: $primary;
    color: #fff;
    &:not(:disabled):hover { background: $primary-dk; transform: translateY(-1px); box-shadow: 0 4px 12px rgba($primary,.35); }
  }

  &.btn-outline {
    background: transparent;
    color: $primary;
    border: 1.5px solid $primary;
    &:hover { background: rgba($primary,.06); }
  }

  &.btn-gray {
    background: #F3F4F6;
    color: $text-sm;
    border: 1.5px solid $border;
    &:not(:disabled):hover { background: $border; }
  }

  &.btn-lg { padding: .85rem 2.2rem; font-size: 1rem; border-radius: 10px; }
  &.btn-full { width: 100%; }

  &.btn-select {
    background: $primary;
    color: #fff;
    flex: 1;
    font-size: 1rem;
    padding: .9rem 1rem;
    &:not(:disabled):hover { background: $primary-dk; }
  }

  &.btn-reject {
    background: #F9FAFB;
    color: #6B7280;
    border: 1.5px solid $border;
    flex: 1;
    font-size: 1rem;
    padding: .9rem 1rem;
    &:not(:disabled):hover { background: #F3F4F6; color: #374151; }
  }

  &.btn-selected-select { background: $success; color: #fff; flex: 1; padding: .9rem 1rem; font-size: 1rem; }
  &.btn-selected-reject { background: $danger; color: #fff; flex: 1; padding: .9rem 1rem; font-size: 1rem; }
}

.btn-row {
  display: flex;
  gap: .75rem;
  margin-top: 1.2rem;

  &.center { justify-content: center; }
  &.end { justify-content: flex-end; }
}

// ──────────────────────────────────────────
// Case Card (Step 2)
// ──────────────────────────────────────────
.progress-bar-wrap {
  margin-bottom: 1.5rem;
  .progress-label {
    display: flex;
    justify-content: space-between;
    font-size: .82rem;
    color: $muted;
    margin-bottom: .4rem;
    font-weight: 600;
  }
  .progress-track {
    height: 6px;
    background: $border;
    border-radius: 3px;
    overflow: hidden;
    .progress-fill {
      height: 100%;
      background: $primary;
      border-radius: 3px;
      transition: width .4s ease;
    }
  }
}

.case-card {
  .case-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.4rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid $border;

    .team-badge {
      font-size: 1.4rem;
      font-weight: 800;
      color: $primary;
      background: rgba($primary,.08);
      border-radius: $radius-sm;
      padding: .3rem .8rem;
    }

    .industry-tag {
      font-size: .82rem;
      background: #F3F4F6;
      border: 1px solid $border;
      border-radius: 20px;
      padding: .25rem .75rem;
      color: $muted;
      font-weight: 500;
    }
  }
}

.var-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .85rem;

  .var-name {
    font-size: .82rem;
    font-weight: 600;
    color: $text-sm;
    min-width: 110px;
    flex-shrink: 0;
  }

  .var-bar-track {
    flex: 1;
    height: 10px;
    background: #F3F4F6;
    border-radius: 5px;
    overflow: hidden;

    .var-bar-fill {
      height: 100%;
      border-radius: 5px;
      transition: width .5s ease;
    }
  }

  .var-score {
    font-size: .85rem;
    font-weight: 700;
    min-width: 32px;
    text-align: right;
    color: $text;
  }
}

// Score color via data-score attribute (set inline via JS)
.var-bar-fill[data-level="low"]    { background: linear-gradient(90deg, #EF4444, #F87171); }
.var-bar-fill[data-level="mid"]    { background: linear-gradient(90deg, #FBBF24, #FCD34D); }
.var-bar-fill[data-level="high"]   { background: linear-gradient(90deg, #22C55E, #4ADE80); }

.judgment-section {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid $border;

  .judgment-label {
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .75rem;
    color: $text-sm;
  }
}

.confidence-section {
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  background: #F9FAFB;
  border-radius: $radius-sm;
  border: 1px solid $border;

  .confidence-label {
    font-size: .82rem;
    font-weight: 600;
    color: $text-sm;
    margin-bottom: .6rem;
    display: flex;
    justify-content: space-between;
  }

  .confidence-slider {
    width: 100%;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: $border;
    outline: none;
    cursor: pointer;

    &::-webkit-slider-thumb {
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: $primary;
      cursor: pointer;
      border: 2px solid #fff;
      box-shadow: 0 1px 4px rgba(0,0,0,.2);
    }
  }

  .confidence-labels {
    display: flex;
    justify-content: space-between;
    margin-top: .4rem;
    .cl { font-size: .7rem; color: $muted; }
  }
}

// ──────────────────────────────────────────
// Judgment Likert (Step 2)
// ──────────────────────────────────────────
.judgment-likert-row {
  display: flex;
  gap: .5rem;
  margin-top: .5rem;
}

.judgment-likert-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .7rem .3rem;
  border: 2px solid $border;
  border-radius: $radius-sm;
  background: $card-bg;
  cursor: pointer;
  transition: all .15s;

  .jl-num {
    font-size: 1.1rem;
    font-weight: 800;
    color: $muted;
  }

  .jl-label {
    font-size: .65rem;
    color: $muted;
    text-align: center;
    line-height: 1.3;
  }

  &:hover { border-color: $primary; }

  &.active {
    border-color: $primary;
    background: rgba($primary, .07);
    .jl-num  { color: $primary; }
    .jl-label { color: $primary; }
  }

  // Color coding by value
  &[data-val="1"].active { border-color: $danger; background: rgba($danger,.07);
    .jl-num, .jl-label { color: $danger; } }
  &[data-val="2"].active { border-color: #F97316; background: rgba(#F97316,.07);
    .jl-num, .jl-label { color: #F97316; } }
  &[data-val="3"].active { border-color: $warning; background: rgba($warning,.07);
    .jl-num, .jl-label { color: $warning; } }
  &[data-val="4"].active { border-color: #22C55E; background: rgba(#22C55E,.07);
    .jl-num, .jl-label { color: #22C55E; } }
  &[data-val="5"].active { border-color: $success; background: rgba($success,.07);
    .jl-num, .jl-label { color: $success; } }
}

// ──────────────────────────────────────────
// AHP (Step 3)
// ──────────────────────────────────────────
.ahp-pair-card {
  .pair-title {
    font-size: .85rem;
    color: $muted;
    margin-bottom: 1.2rem;
    font-weight: 500;
  }

  .pair-criteria {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;

    .crit {
      flex: 1;
      text-align: center;
      font-size: 1rem;
      font-weight: 700;
      color: $text;
      padding: .6rem;
      border-radius: $radius-sm;
      transition: background .2s;

      &.crit-left { text-align: right; }
      &.crit-right { text-align: left; }

      &.crit-active-left { color: $primary; background: rgba($primary,.07); }
      &.crit-active-right { color: $success; background: rgba($success,.07); }
    }

    .vs-badge {
      font-size: .8rem;
      font-weight: 700;
      color: $muted;
      background: $bg;
      border: 1px solid $border;
      border-radius: 20px;
      padding: .25rem .6rem;
      flex-shrink: 0;
    }
  }
}

.ahp-slider-wrap {
  padding: .5rem 0;
}

.ahp-scale-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: .5rem;
  // Pad by half the thumb width (12px) so labels align with thumb at min/max
  padding: 0 12px;

  span {
    font-size: .7rem;
    color: $muted;
    font-weight: 600;
    text-align: center;
    min-width: 0;
  }

  .sc-mid { font-weight: 800; color: $text-sm; font-size: .75rem; }
}

.ahp-slider {
  width: 100%;
  appearance: none;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, rgba($primary,.15) 0%, $primary 50%, rgba($success,.15) 100%);
  outline: none;
  cursor: pointer;

  &::-webkit-slider-thumb {
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid $primary;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    cursor: pointer;
    transition: border-color .2s;
  }
}

.ahp-description {
  text-align: center;
  margin-top: 1rem;
  padding: .7rem 1rem;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  border-radius: $radius-sm;
  font-size: .875rem;
  font-weight: 600;
  color: #0369A1;
  min-height: 42px;
}

.cr-warning {
  background: #FEF9C3;
  border: 1px solid #FDE047;
  border-radius: $radius-sm;
  padding: 1rem 1.2rem;
  margin-top: 1rem;

  p { font-size: .875rem; color: #713F12; margin-bottom: .75rem; font-weight: 600; }
}

// ──────────────────────────────────────────
// Results (Step 4)
// ──────────────────────────────────────────
.weight-chart {
  margin-top: .5rem;

  .wc-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .7rem;

    .wc-label {
      font-size: .82rem;
      font-weight: 600;
      color: $text-sm;
      min-width: 110px;
      flex-shrink: 0;
    }

    .wc-track {
      flex: 1;
      height: 18px;
      background: #F3F4F6;
      border-radius: 9px;
      overflow: hidden;

      .wc-fill {
        height: 100%;
        background: linear-gradient(90deg, $primary, #60A5FA);
        border-radius: 9px;
        transition: width .6s ease;
      }
    }

    .wc-pct { font-size: .82rem; font-weight: 700; color: $primary; min-width: 38px; text-align: right; }
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-top: 1rem;

  .stat-box {
    background: $bg;
    border: 1px solid $border;
    border-radius: $radius-sm;
    padding: 1rem;
    text-align: center;

    .stat-val { font-size: 1.6rem; font-weight: 800; color: $primary; }
    .stat-label { font-size: .75rem; color: $muted; margin-top: .25rem; line-height: 1.3; }

    &.stat-warn .stat-val { color: $warning; }
    &.stat-ok .stat-val { color: $success; }
  }
}

.comparison-table-wrap {
  overflow-x: auto;
  margin-top: 1rem;
  border-radius: $radius-sm;
  border: 1px solid $border;

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;

    th {
      background: #F9FAFB;
      padding: .6rem .8rem;
      text-align: center;
      font-weight: 700;
      border-bottom: 1px solid $border;
      white-space: nowrap;
      color: $text-sm;
    }

    td {
      padding: .55rem .8rem;
      text-align: center;
      border-bottom: 1px solid $border;

      &:first-child { font-weight: 700; }
    }

    tr:last-child td { border-bottom: none; }

    tr.mismatch td { background: #FEF2F2; color: $danger; }
    tr.mismatch td:first-child { color: $danger; }
  }
}

.badge {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 12px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;

  &.badge-select   { background: #DBEAFE; color: $primary; }
  &.badge-reject   { background: #F3F4F6; color: $muted; }
  &.badge-match    { background: #DCFCE7; color: $success; }
  &.badge-mismatch { background: #FEE2E2; color: $danger; }
  &.badge-neutral  { background: #FEF9C3; color: $warning; }
}

.neutral-row td { background: #FAFAF0; color: $warning; }

// ──────────────────────────────────────────
// Post Survey (Step 5)
// ──────────────────────────────────────────
.likert-group {
  margin-bottom: 1.5rem;

  .likert-q {
    font-size: .9rem;
    font-weight: 600;
    color: $text;
    margin-bottom: .75rem;
    line-height: 1.5;
  }

  .likert-options {
    display: flex;
    gap: .5rem;

    label {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .3rem;
      cursor: pointer;

      input[type="radio"] { display: none; }

      .likert-btn {
        width: 100%;
        padding: .55rem .2rem;
        border: 2px solid $border;
        border-radius: $radius-sm;
        text-align: center;
        font-size: .9rem;
        font-weight: 700;
        color: $muted;
        transition: all .15s;
        background: $card-bg;
      }

      .likert-desc { font-size: .65rem; color: $muted; text-align: center; line-height: 1.2; }

      input:checked + .likert-btn { border-color: $primary; background: rgba($primary,.08); color: $primary; }
      &:hover .likert-btn { border-color: $primary; }
    }
  }
}

.open-textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1.5px solid $border;
  border-radius: $radius-sm;
  font-size: .875rem;
  font-family: inherit;
  resize: vertical;
  min-height: 100px;
  outline: none;
  transition: border-color .2s;
  &:focus { border-color: $primary; }
}

// ──────────────────────────────────────────
// Complete Screen
// ──────────────────────────────────────────
.complete-screen {
  text-align: center;
  padding: 2rem 1rem;

  .complete-icon { font-size: 3.5rem; margin-bottom: 1rem; }
  .complete-title { font-size: 1.5rem; font-weight: 800; margin-bottom: .5rem; }
  .complete-desc { color: $muted; font-size: .9rem; margin-bottom: 2rem; line-height: 1.7; }
}

.json-output {
  background: #1E293B;
  color: #94A3B8;
  border-radius: $radius-sm;
  padding: 1.2rem;
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: .75rem;
  line-height: 1.6;
  text-align: left;
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
  white-space: pre;
  margin-top: 1rem;
}

// ──────────────────────────────────────────
// Utilities
// ──────────────────────────────────────────
.divider {
  height: 1px;
  background: $border;
  margin: 1.5rem 0;
}

.text-muted { color: $muted; font-size: .85rem; }
.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }

.highlight-text {
  color: $primary;
  font-weight: 700;
}

// ──────────────────────────────────────────
// Responsive
// ──────────────────────────────────────────
@media (max-width: 600px) {
  #app-header { padding: 0 1rem; }

  .header-title { font-size: .78rem; }

  .card { padding: 1.2rem; }

  .step-progress .step-dot .dot-label { display: none; }

  .var-row .var-name { min-width: 80px; font-size: .76rem; }

  .ahp-pair-card .pair-criteria { flex-direction: column; text-align: center; gap: .5rem; }

  .ahp-pair-card .pair-criteria .crit { text-align: center !important; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  .comparison-table-wrap table { font-size: .75rem; }
  .comparison-table-wrap table td,
  .comparison-table-wrap table th { padding: .4rem .5rem; }

  .likert-group .likert-options label .likert-desc { display: none; }

  .btn.btn-lg { padding: .75rem 1.5rem; font-size: .9rem; }

  .btn-row.judgment-btns { gap: .5rem; }
}

@media (max-width: 380px) {
  .step-progress .step-dot .dot-circle { width: 22px; height: 22px; font-size: .65rem; }
}