:root{
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #121826;
  --muted: #5b6475;
  --line: #e6e8ef;

  --primary: #6d5efc;
  --primary-2:#8a7cff;

  --p: #ff5a5f;
  --e: #3b82f6;
  --i: #10b981;

  --shadow: 0 10px 30px rgba(18,24,38,.08);
  --radius: 16px;

  --good-bg: rgba(16,185,129,.12);
  --good-tx: #067647;

  --warn-bg: rgba(255,90,95,.12);
  --warn-tx: #b42318;

  --key-bg: rgba(109,94,252,.12);
  --key-tx: #4338ca;
}

.bio-wrap{ background: var(--bg); padding: 18px 0 28px; color: var(--text); }

.bio-hero{
  max-width: 980px; margin: 0 auto 14px; padding: 18px 16px;
  display: flex; gap: 14px; align-items: center;
}
.bio-hero__icon{
  width: 54px; height: 54px; border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: var(--shadow); display: grid; place-items: center; flex: 0 0 auto;
}
.bio-hero__heart{ font-size: 22px; color: #fff; transform: translateY(-1px); }
.bio-hero__title{ margin: 0; font-size: 26px; letter-spacing: -0.6px; }
.bio-hero__desc{ margin: 6px 0 2px; color: var(--muted); font-size: 14px; }
.bio-hero__sub{ margin: 0; color: var(--muted); font-size: 12px; }

.bio-main{ max-width: 980px; margin: 0 auto; padding: 0 16px; }

.bio-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 14px;
}

.bio-card__head{ margin-bottom: 10px; }
.bio-card__title{ margin: 0; font-size: 18px; letter-spacing: -0.4px; }
.bio-card__hint{ margin: 6px 0 0; font-size: 12px; color: var(--muted); }

.bio-headrow{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.bio-badges{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.bio-badge{
  font-size: 12px; font-weight: 900;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
}
.bio-badge--good{ background: var(--good-bg); color: var(--good-tx); border-color: rgba(16,185,129,.25); }
.bio-badge--warn{ background: var(--warn-bg); color: var(--warn-tx); border-color: rgba(255,90,95,.25); }
.bio-badge--key{ background: var(--key-bg); color: var(--key-tx); border-color: rgba(109,94,252,.25); }

.bio-form{ margin-top: 10px; }

.bio-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bio-field{ display:flex; flex-direction:column; gap:6px; }
.bio-label{ font-size:13px; font-weight:700; }
.bio-input-row{ display:flex; gap:8px; }

.bio-input{
  width: 100%; height: 42px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 12px;
  outline: none; font-size: 14px; background: #fff;
}
.bio-input:focus{
  border-color: rgba(109,94,252,.6);
  box-shadow: 0 0 0 4px rgba(109,94,252,.12);
}
.bio-help{ font-size:11px; color: var(--muted); }

.bio-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

.bio-btn{
  height: 42px; padding: 0 14px;
  border-radius: 12px; border: 1px solid var(--line);
  background: #fff; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--text);
}
.bio-btn:hover{ filter: brightness(0.98); }

.bio-btn--primary{
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff;
}
.bio-btn--ghost{
  background: rgba(109,94,252,.08);
  border-color: rgba(109,94,252,.18);
  color: var(--primary);
}
.bio-btn--ghost2{
  background: rgba(16,185,129,.08);
  border-color: rgba(16,185,129,.18);
  color: #067647;
}

.bio-alert{
  margin-top: 10px; padding: 10px 12px;
  border-radius: 12px; font-size: 13px;
  border: 1px solid rgba(255,90,95,.25);
  background: rgba(255,90,95,.08);
  color: #b42318;
}

.bio-summary{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }

.bio-pill{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}
.bio-pill__top{ display:flex; align-items:baseline; justify-content:space-between; }
.bio-pill__name{ font-weight: 900; font-size: 14px; }
.bio-pill__cycle{ font-size: 12px; color: var(--muted); }

.bio-pill__value{
  margin-top: 8px;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.bio-pill__pct{ font-size: 22px; font-weight: 900; letter-spacing: -0.6px; }
.bio-pill__state{ font-size: 12px; font-weight: 800; color: var(--muted); text-align:right; }

.bio-pill__bar{
  margin-top: 10px; height: 10px;
  border-radius: 999px; background: #f0f2f7; overflow:hidden;
}
.bio-pill__bar span{ display:block; height:100%; width:50%; border-radius:999px; background:#ddd; transform-origin:left center; }
.bio-pill__note{ margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.45; }

.bio-pill--physical .bio-pill__bar span{ background: rgba(255,90,95,.9); }
.bio-pill--emotional .bio-pill__bar span{ background: rgba(59,130,246,.9); }
.bio-pill--intellectual .bio-pill__bar span{ background: rgba(16,185,129,.9); }

.bio-signal{
  margin-top: 12px;
  border-radius: 14px;
  border: 1px dashed rgba(109,94,252,.35);
  background: rgba(109,94,252,.06);
  padding: 12px;
}
.bio-signal__title{ font-weight: 900; margin-bottom: 6px; }
.bio-signal__text{ font-size: 14px; font-weight: 900; letter-spacing:-0.2px; }
.bio-signal__sub{ margin-top: 6px; font-size: 12px; color: var(--muted); line-height: 1.55; }

/* 강조 문구 */
.hl{
  display:inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 900;
  line-height: 1.2;
}
.hl--good{ background: var(--good-bg); color: var(--good-tx); }
.hl--warn{ background: var(--warn-bg); color: var(--warn-tx); }
.hl--key{ background: var(--key-bg); color: var(--key-tx); }

.bio-guides{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.bio-guidebox{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}
.bio-guidebox__title{
  font-weight: 900;
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}
.bio-guidebox__list{
  margin:0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.65;
}
.bio-guidebox--plan{ background: rgba(59,130,246,.04); }
.bio-guidebox--health{ background: rgba(16,185,129,.04); }
.bio-guidebox--work{ background: rgba(109,94,252,.04); }
.bio-guidebox--rel{ background: rgba(255,90,95,.03); }
.bio-guidebox--warn{ background: rgba(255,90,95,.05); }

.bio-tipbox{
  grid-column: 1 / -1;
  border: 1px solid rgba(109,94,252,.22);
  background: rgba(109,94,252,.06);
  border-radius: 14px;
  padding: 12px;
}
.bio-tipbox__title{ font-weight: 900; margin-bottom: 10px; }
.bio-tipbox__cols{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.bio-tipbox__item{
  background:#fff;
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
}
.bio-tipbox__label{ font-size: 12px; font-weight: 900; margin-bottom: 6px; }
.bio-tipbox__text{ font-size: 12px; color: var(--muted); line-height: 1.55; }

.bio-check{
  grid-column: 1 / -1;
  border-radius: 14px;
  border: 1px solid rgba(16,185,129,.25);
  background: rgba(16,185,129,.06);
  padding: 12px;
}
.bio-check__title{ font-weight: 900; margin-bottom: 8px; }
.bio-check__list{
  margin:0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.65;
}

.bio-chart{ display:grid; gap:10px; }
#bioCanvas{
  width:100%; height:auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  background:#fff;
}
.bio-legend{
  display:flex; flex-wrap:wrap; gap:10px;
  font-size: 12px; color: var(--muted); align-items:center;
}
.bio-legend__item{ display:inline-flex; align-items:center; gap:6px; }
.dot{ width:10px; height:10px; border-radius:999px; display:inline-block; }
.dot--p{ background: rgba(255,90,95,.9); }
.dot--e{ background: rgba(59,130,246,.9); }
.dot--i{ background: rgba(16,185,129,.9); }
.dot--t{ background: rgba(18,24,38,.7); }
.bio-chart__hint{ font-size: 12px; color: var(--muted); line-height: 1.55; }

.bio-forecast{ display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; }
.bio-day{ border: 1px solid var(--line); border-radius: 14px; padding: 10px; background:#fff; }
.bio-day__date{ font-size: 12px; color: var(--muted); }
.bio-day__score{ margin-top: 6px; font-size: 13px; font-weight: 900; }
.bio-day__mini{ margin-top: 8px; display:grid; gap:6px; font-size: 11px; color: var(--muted); }
.mini-row{ display:flex; justify-content:space-between; gap:6px; }
.mini-tag{ font-weight: 900; color: var(--text); }

.bio-critical{
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,90,95,.25);
  background: rgba(255,90,95,.08);
  padding: 12px;
}
.bio-critical__title{ font-weight: 900; margin-bottom: 6px; color: #b42318; }
.bio-critical__text{ font-size: 12px; color: var(--muted); line-height: 1.55; }

@media (max-width: 860px){
  .bio-summary{ grid-template-columns: 1fr; }
  .bio-grid{ grid-template-columns: 1fr; }
  .bio-forecast{ grid-template-columns: repeat(2, 1fr); }
  .bio-guides{ grid-template-columns: 1fr; }
  .bio-tipbox__cols{ grid-template-columns: 1fr; }
}

@media (max-width: 420px){
  .bio-hero__title{ font-size: 22px; }
  .bio-actions .bio-btn{ flex: 1 1 auto; }
  .bio-forecast{ grid-template-columns: 1fr; }
}