/* =========================================================
 *  /assets/css/health-upload.css (FINAL)
 *  - 업로드 화면(폼) 전용
 *  - 기존 톤 유지 + 2카드(2열) + 라디오(저장위치 선택) + 우측 바로가기 버튼화
 * ========================================================= */

.page-health-upload .hu-wrap{
  padding-top: 14px;
  padding-bottom: 34px;
}

/* =========================
 * 상단
 * ========================= */
.hu-top{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.hu-title{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  color: rgba(15,23,42,.95);
}
.hu-sub{
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(15,23,42,.65);
  line-height: 1.45;
}

/* 우측 액션(바로가기) */
.hu-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ✅ 링크를 버튼처럼 보이게(기존 .btn을 건드리지 않고 별도 클래스) */
.hu-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  text-decoration: none;
  font-weight: 900;
  font-size: 13px;
  color: rgba(15,23,42,.88);
  white-space: nowrap;
}
.hu-pill:hover{
  border-color: rgba(37,99,235,.22);
  background: rgba(37,99,235,.05);
}

/* =========================
 * ✅ 2카드 레이아웃(데스크탑)
 * - 좌: 업로드 폼 카드(.hu-card)
 * - 우: 가이드/추천 카드(.hu-side)
 * ========================= */
.hu-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  align-items: start;
}

/* 카드 */
.hu-card,
.hu-side{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
}

/* 기존 폼 */
.hu-form{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

/* 행 */
.hu-row{
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.hu-label{
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,.90);
}

.hu-file{
  height: 40px;
  padding: 6px 10px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  font-weight: 700;
  font-size: 13px;
}

.hu-help{
  font-size: 12px;
  font-weight: 700;
  color: rgba(15,23,42,.55);
}

/* 안내 박스 */
.hu-box{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(15,23,42,.02);
  border: 1px solid rgba(15,23,42,.08);
  font-weight: 700;
  color: rgba(15,23,42,.70);
  font-size: 13px;
  line-height: 1.5;
}

/* ✅ 저장경로 표시(작게) */
.hu-path{
  margin-left: 6px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.55);
}

/* =========================
 * ✅ 저장 위치 선택(라디오 pill)
 * ========================= */
.hu-choice{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.hu-choice-item{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.02);
  font-weight: 900;
  font-size: 13px;
  color: rgba(15,23,42,.85);
  cursor: pointer;
  user-select: none;
}
.hu-choice-item input{
  accent-color: #2f6bff;
}

/* =========================
 * 우측 가이드 카드(추가 카드)
 * ========================= */
.hu-side-title{
  font-weight: 900;
  color: rgba(15,23,42,.92);
  margin-bottom: 8px;
  font-size: 14px;
}
.hu-side-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(15,23,42,.72);
  font-weight: 700;
  line-height: 1.55;
  font-size: 13px;
}
.hu-side code{
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.12);
  padding: 2px 6px;
  border-radius: 8px;
}

/* 제출 */
.hu-submit{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}

/* =========================
 * 반응형
 * ========================= */
@media (max-width: 980px){
  .hu-grid{
    grid-template-columns: 1fr;
  }
  .hu-actions{
    justify-content: flex-start;
  }
}

@media (max-width: 640px){
  .hu-top{ align-items:flex-start; flex-direction: column; }
  .hu-actions{ width: 100%; }
  .hu-submit .btn{ width: 100%; }
}