.auth-card .profile-form,
.auth-card .profile-form * {
  font-size: 0.84rem;
  font-weight: 400;
}

.auth-card .profile-form .profile-field-title {
  font-weight: 700;
}

.auth-card #registerForm > button,
.auth-card #accountProfileForm > button {
  font-weight: 700;
}

.auth-card #accountProfileForm .account-delete-button {
  margin-top: 14px;
  border-color: #c94f45;
  background: #fff1ef;
  color: #a8322a;
}

.date-input-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

.date-input-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  pointer-events: none;
  width: 18px;
  height: 17px;
  border: 2px solid #7c3f15;
  border-radius: 3px;
  background:
    linear-gradient(#7c3f15, #7c3f15) 0 4px / 100% 2px no-repeat,
    linear-gradient(#7c3f15, #7c3f15) 4px -3px / 2px 6px no-repeat,
    linear-gradient(#7c3f15, #7c3f15) 12px -3px / 2px 6px no-repeat;
}

.auth-card .date-input-wrapper input[type="date"] {
  display: block;
  width: 100%;
  height: 40px;
  min-height: 0;
  box-sizing: border-box;
  padding: 10px 40px 10px 12px;
  line-height: 20px;
  appearance: none;
  -webkit-appearance: none;
}

.auth-card .date-input-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  opacity: 0;
}

.profile-medication-card {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 8px 10px 10px;
  border: 1px solid #e7b27d;
  border-radius: 8px;
  background: #fffaf3;
}

.profile-medication-card legend {
  padding: 0 6px;
  color: #7c3f15;
}

.profile-medication-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0;
  width: auto;
  min-height: auto;
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.3;
  color: #7c3f15;
}

.profile-medication-toggle input {
  width: auto;
  height: auto;
  margin: 0;
  accent-color: #e7b27d;
  vertical-align: middle;
}

.profile-weight-picker,
.profile-weight-type-options,
.profile-weight-type-option,
.profile-weight-type-name,
.profile-weight-type-range,
.profile-gender-options,
.profile-gender-options label {
  box-sizing: border-box;
}

.profile-weight-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid #e7b27d;
  border-radius: 8px;
  background: #fffaf3;
}

.profile-weight-type-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
}

.profile-weight-type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
}

.profile-weight-type-name,
.profile-weight-type-range {
  display: block;
  width: 100%;
  text-align: center;
}

.auth-card .profile-weight-picker .profile-weight-select {
  width: 100%;
  padding: 10px 36px 10px 12px;
  border: 1px solid #e7b27d;
  border-radius: 8px;
  background: #e8c39a;
  background-image:
    linear-gradient(45deg, transparent 50%, #d49a63 50%),
    linear-gradient(135deg, #d49a63 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  color: #7c3f15;
  font-size: 0.84rem;
  font-weight: 400;
}

.profile-gender-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 6px;
}

.profile-gender-options label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 0.84rem;
  font-weight: 400;
  white-space: nowrap;
}

.profile-medication-row label[hidden] { display: none; }
.profile-medication-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-top: 10px; }
.profile-medication-row label { flex: 1 1 150px; margin-top: 0; }
.profile-medication-name-field { flex: 1 0 100% !important; }
.profile-medication-name-field input { display: block; width: 100%; }
.profile-medication-meta { display: flex; flex: 1 0 100%; flex-direction: column; gap: 8px; align-items: stretch; }
.profile-medication-primary-row,
.profile-medication-secondary-row { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: flex-end; }
.profile-medication-meta label { display: flex; flex: 0 1 auto; flex-direction: column; gap: 4px; min-width: 80px; }
.profile-medication-meta select { width: auto; min-width: 80px; max-width: 100%; margin-top: 0; }
.profile-medication-meta select[data-profile-medication-count],
.profile-medication-meta select[data-profile-medication-frequency],
.profile-medication-meta select[data-profile-medication-timing] {
  border-radius: 4px;
}
.profile-medication-meta fieldset { display: flex; flex: 1 1 100%; flex-wrap: nowrap; gap: 4px; align-items: center; min-width: 0; margin: 0; padding: 4px 6px; }
.profile-medication-meta fieldset[hidden] { display: none; }
.profile-medication-meta fieldset label { flex: 0 0 auto; min-width: 0; display: inline-flex; flex-direction: row; gap: 2px; align-items: center; }
/* 関連項目: 携帯表示のプロフィール服薬曜日指定。
   処理内容: 7曜日を横並びにし、各曜日名の下へチェックボックスを配置して枠からのはみ出しを防ぐ。 */
@media (max-width: 768px) {
  .profile-medication-meta fieldset.profile-medication-weekdays { position: relative !important; display: flex !important; flex-wrap: wrap !important; gap: 8px !important; align-items: flex-start !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-top: 16px !important; padding: 14px 6px 6px !important; box-sizing: border-box !important; overflow: visible !important; white-space: normal !important; }
  /* 関連項目: プロフィール服薬の曜日指定表示条件。
     処理内容: 曜日指定以外の頻度ではhidden属性を優先し、携帯用flexレイアウトで曜日チェックが表示されないようにする。 */
  .profile-medication-meta fieldset.profile-medication-weekdays[hidden] { display: none !important; }
  /* 関連項目: 携帯表示のプロフィール服薬曜日指定の枠見出し。
     処理内容: 凡例を曜日指定枠の上側へ配置し、枠線との重なりによる見出しの切れを防ぐ。 */
  .profile-medication-meta fieldset.profile-medication-weekdays legend { position: absolute !important; top: -0.72em !important; left: 8px !important; z-index: 1 !important; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 5px !important; background: #fffaf3 !important; }
  .profile-medication-meta fieldset.profile-medication-weekdays .profile-medication-weekday-item { display: flex !important; flex: 0 0 calc((100% - 48px) / 7) !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; min-width: 0 !important; max-width: calc((100% - 48px) / 7) !important; margin: 0 !important; padding: 0 !important; white-space: normal !important; }
  .profile-medication-meta fieldset.profile-medication-weekdays .profile-medication-weekday-label { display: block !important; width: 100% !important; font-size: 12px !important; line-height: 1.1 !important; text-align: center !important; }
  .profile-medication-meta fieldset.profile-medication-weekdays .profile-medication-weekday-item input { display: block !important; width: 16px !important; height: 16px !important; min-width: 0 !important; margin: 2px auto 0 !important; appearance: auto !important; -webkit-appearance: checkbox !important; }
}
.profile-medication-actions { display: flex; flex: 1 0 100%; justify-content: flex-end; gap: 6px; align-items: center; }
.profile-medication-row button { width: 104px; margin: 0; padding: 8px 12px; white-space: nowrap; }
.profile-medication-remove-button { color: #a33f36 !important; background: #fff0f0 !important; border: 1px solid #e7a5a5 !important; }
.profile-medication-add-button { color: #7c3f15 !important; background: #fffaf3 !important; border: 1px solid #e7b27d !important; }