/* ============================================================
   깨알도구
   BMI 계산기
   tool.css
   ============================================================ */

.tool-page {
  --tool-page-max-width: 960px;
}

/* ============================================================
   CALCULATOR
   ============================================================ */

.bmi-calculator {
  align-items: start;
}

/* ============================================================
   FORMULA
   ============================================================ */

.bmi-formula-preview {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-top: 3px;

  padding: 9px 10px;

  border-radius: 9px;

  background: var(--surface-soft);
}

.bmi-formula-preview span {
  color: var(--text-soft);

  font-size: 12px;
}

.bmi-formula-preview strong {
  color: var(--text);

  font-size: 12px;

  font-weight: 900;

  text-align: right;
}

/* ============================================================
   BMI POSITION
   ============================================================ */

.bmi-position-box {
  margin-top: 17px;

  padding: 12px;

  border: 1px solid var(--line);

  border-radius: 11px;

  background: #fff;
}

.bmi-position-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;
}

.bmi-position-head span {
  color: var(--text-soft);

  font-size: 12px;

  font-weight: 700;
}

.bmi-position-head strong {
  color: var(--text);

  font-size: 12px;

  font-weight: 900;
}

/* ============================================================
   SCALE
   ============================================================ */

.bmi-scale {
  margin-top: 23px;
}

.bmi-scale-track {
  position: relative;

  height: 10px;

  border-radius: 999px;

  background: linear-gradient(
    to right,
    #dceaf4 0%,
    #dceaf4 23.2%,
    #dfeeda 23.2%,
    #dfeeda 39.3%,
    #f4eccd 39.3%,
    #f4eccd 46.4%,
    #f1d7bf 46.4%,
    #f1d7bf 64.3%,
    #ebc4bd 64.3%,
    #ebc4bd 82.1%,
    #e5b1aa 82.1%,
    #e5b1aa 100%
  );
}

.bmi-marker {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 14px;
  height: 14px;

  transform: translate(-50%, -50%);

  border: 3px solid #fff;

  border-radius: 50%;

  background: var(--brand);

  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);

  transition: left 0.25s ease;
}

.bmi-marker span {
  position: absolute;

  bottom: calc(100% + 7px);
  left: 50%;

  transform: translateX(-50%);

  padding: 3px 5px;

  border-radius: 5px;

  background: var(--text);

  color: #fff;

  font-size: 12px;

  font-weight: 900;

  white-space: nowrap;
}

.bmi-scale-labels {
  position: relative;

  height: 16px;

  margin-top: 5px;

  color: var(--text-soft);

  font-size: 12px;
}

.bmi-scale-labels span {
  position: absolute;

  transform: translateX(-50%);
}

.bmi-scale-labels span:nth-child(1) {
  left: 23.2%;
}

.bmi-scale-labels span:nth-child(2) {
  left: 39.3%;
}

.bmi-scale-labels span:nth-child(3) {
  left: 46.4%;
}

.bmi-scale-labels span:nth-child(4) {
  left: 64.3%;
}

.bmi-scale-labels span:nth-child(5) {
  left: 82.1%;
}

/* ============================================================
   STANDARD GRID
   ============================================================ */

.bmi-standard-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 8px;

  margin-top: 12px;
}

.bmi-standard-card {
  min-width: 0;

  padding: 12px;

  border: 1px solid var(--line);

  border-radius: 11px;

  background: #fff;
}

/* ============================================================
   STANDARD HEAD
   ============================================================ */

.bmi-standard-head {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 7px;
}

.bmi-standard-head > div {
  min-width: 0;
}

.bmi-standard-head span {
  display: block;

  color: var(--text);

  font-size: 12px;

  font-weight: 900;
}

.bmi-standard-head small {
  display: block;

  margin-top: 2px;

  color: var(--text-soft);

  font-size: 12px;
}

/* ============================================================
   STATUS BADGE
   ============================================================ */

.bmi-status-badge {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  min-height: 24px;

  padding: 0 7px;

  border-radius: 999px;

  background: var(--surface-soft);

  color: var(--text);

  font-size: 12px;

  font-weight: 900;

  white-space: nowrap;
}

.bmi-status-badge.status-low {
  background: #edf5fa;

  color: #527083;
}

.bmi-status-badge.status-normal {
  background: #eef6e9;

  color: #506b48;
}

.bmi-status-badge.status-warning {
  background: #faf4dc;

  color: #78652d;
}

.bmi-status-badge.status-high {
  background: #faece6;

  color: #855a48;
}

.bmi-status-badge.status-very-high {
  background: #f7e4e2;

  color: #854843;
}

/* ============================================================
   STANDARD DESCRIPTION
   ============================================================ */

.bmi-standard-description {
  min-height: 30px;

  margin-top: 9px;

  color: var(--text-soft);

  font-size: 12px;

  line-height: 1.5;
}

/* ============================================================
   THRESHOLDS
   ============================================================ */

.bmi-threshold-list {
  margin-top: 9px;

  border-top: 1px solid #efeee9;
}

.bmi-threshold-list > div {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 8px;

  min-height: 29px;

  border-bottom: 1px solid #efeee9;
}

.bmi-threshold-list > div:last-child {
  border-bottom: 0;
}

.bmi-threshold-list span {
  color: var(--text-soft);

  font-size: 12px;
}

.bmi-threshold-list strong {
  color: var(--text);

  font-size: 12px;

  font-weight: 800;

  text-align: right;
}

/* ============================================================
   NORMAL WEIGHT
   ============================================================ */

.normal-weight-box {
  margin-top: 12px;

  padding: 12px;

  border-radius: 11px;

  background: var(--surface-soft);
}

.normal-weight-title {
  margin-bottom: 8px;

  color: var(--text);

  font-size: 12px;

  font-weight: 900;
}

.normal-weight-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 7px;
}

.normal-weight-grid > div {
  min-width: 0;

  padding: 9px;

  border-radius: 9px;

  background: #fff;

  text-align: center;
}

.normal-weight-grid span {
  display: block;

  color: var(--text-soft);

  font-size: 12px;
}

.normal-weight-grid strong {
  display: block;

  margin-top: 3px;

  color: var(--brand);

  font-size: 12px;

  font-weight: 900;
}

.normal-weight-grid small {
  display: block;

  margin-top: 3px;

  color: var(--text-soft);

  font-size: 12px;
}

/* ============================================================
   DETAILS
   ============================================================ */

.bmi-result-grid {
  margin-top: 10px;

  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ============================================================
   GUIDE NOTE
   ============================================================ */

.bmi-guide-note {
  margin-top: 13px;

  padding: 11px 12px;

  border-radius: 10px;

  background: var(--surface-soft);
}

.bmi-guide-note strong {
  color: var(--text);

  font-size: 12px;

  font-weight: 900;
}

.bmi-guide-note p {
  margin: 5px 0 0;

  color: var(--text-soft);

  font-size: 12px;

  line-height: 1.6;
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 820px) {
  .bmi-calculator {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 560px) {
  .bmi-standard-grid {
    grid-template-columns: 1fr;
  }

  .bmi-standard-description {
    min-height: auto;
  }

  .normal-weight-grid {
    grid-template-columns: 1fr;
  }

  .bmi-status-badge {
    font-size: 12px;
  }

  .bmi-threshold-list span,
  .bmi-threshold-list strong {
    font-size: 12px;
  }

  .bmi-scale-labels {
    font-size: 12px;
  }
}