@charset "UTF-8";
/* #### 스플래쉬 #### */
.splash__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100dvh;
}
.splash__inner .splash_img {
  width: 100%;
}
.splash__inner .splash_img img {
  width: 100%;
}
.modal_access_notice .modal__inner {
  padding: 28px 31px 20px;
}
.modal_access_notice .modal__header h3 {
  font-weight: 700;
  margin-bottom: 9px;
}
.modal_access_notice .modal__header p {
  font-size: 13px;
}
.access__list {
  margin-top: 26px;
}
.access__list .access__item {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.access__list .access__item .icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}
.access__list .access__item .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.access__item .access__info h5 {
  font-size: 14px;
  font-weight: 500;
  color: #303030;
  margin-bottom: 7px;
}
.access__item .access__info p {
  font-size: 13px;
  font-weight: 400;
  color: #636366;
}
/* #### 로그인 & 회원가입 #### */
/* login */
.login__inner {
  padding-top: 117px;
  padding-bottom: 84px;
}
.login_logo {
  display: flex;
  justify-self: center;
  width: 150px;
  height: 150px;
  margin: 0 auto 67px;
}
.login_logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.login__inner .input--typeA {
  margin-bottom: 16px;
}
.login__link {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 38px;
}
.login__link li {
  padding: 0 8px;
  position: relative;
}
.login__link li::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 15px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background-color: #D4D4D4;
}
.login__link li:first-child {
  padding-left: 0;
}
.login__link li:last-child {
  padding-right: 0;
}
.login__link li:last-child::after {
  content: none;
}
.login__link li a {
  font-size: 15px;
  font-weight: 500;
  color: #636366;
}
.sns__login {
  margin-top: 47px;
  text-align: center;
}
.sns__login h5 {
  font-size: 15px;
  font-weight: 600;
  color: #303030;
  margin-bottom: 32px;
}
.sns__login .sns__link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.sns__login .sns__link .sns_icon {
  display: inline-block;
  width: 66px;
  height: 66px;
  overflow: hidden;
  border-radius: 50%;
}
.sns__link .sns_icon.icon--kakao {
  background: url(../_img/icon/login_kakao.svg) no-repeat center center / contain;
}
.sns__link .sns_icon.icon--naver {
  background: url(../_img/icon/login_naver.svg) no-repeat center center / contain;
}
.sns__link .sns_icon.icon--apple {
  background: url(../_img/icon/login_apple.svg) no-repeat center center / contain;
}
.sns__link .sns_icon.icon--google {
  background: url(../_img/icon/login_google.svg) no-repeat center center / contain;
  border: 1px solid #dadce0;
  box-sizing: border-box;
}
/* signup */
.signup__inner {
  padding-top: 20px;
  padding-bottom: 80px;
}
.singup-complete__inner {
  padding-top: 115px;
  padding-bottom: 80px;
}
.complete__header h3 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-main);
}
ul.member_info {
  padding: 22px 20px;
  border-radius: 15px;
  background-color: var(--color-main-005);
  margin-top: 17px;
}
ul.member_info li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 25px;
  margin-bottom: 18px;
}
ul.member_info li:last-child {
  margin-bottom: 0;
}
ul.member_info li span.info-tit {
  font-size: 14px;
  font-weight: 500;
  color: #848487;
  display: inline-block;
  width: 49px;
  flex-shrink: 0;
}
.info-tit-for-label {
  font-size: 15px;
  font-weight: 500;
  color: #848487;
  display: inline-block;
  flex-shrink: 0;
  left: 10px;
}
ul.member_info li b.info-cnts {
  font-size: 14px;
  font-weight: 500;
  color: #1A1A1A;
  flex: 1;
}
/* 회원정보 찾기 */
.find-info__inner {
  padding-top: 34px;
  padding-bottom: 80px;
}
.find-info__inner>h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #242424;
  margin-bottom: 40px;
}
.modal_account .modal__inner {
  padding: 34px 16px 23px;
}
.find_id_result {
  margin-top: 16px;
  border-radius: 10px;
  background-color: var(--color-bg);
  text-align: center;
  padding: 13px 0;
}
.find_id_result p {
  font-size: 14px;
  font-weight: 500;
  color: #303030;
}
/* #### 메인 #### */
.home__inner {
  padding-top: 14px;
  padding-bottom: 80px;
}
.home__inner__for_search {
  padding-bottom: 140px !important;
}
.form_search {
  margin-bottom: 12px;
}
.form_search .search_input {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
}
.form_search .search_input input {
  border: 1.3px solid #E5E5EA;
  border-radius: 10px;
  background-color: #fff;
  height: 40px;
  flex: 1;
  padding-left: 36px;
  padding-right: 10px;
  font-size: 15px;
  min-width: 100px;
  background: url(../_img/icon/icon_search.svg) no-repeat center left 10px / 24px 24px;
}
.form_search .search_input .btn {
  padding: 0 18px;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 500;
}
.home-medicine__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 11px auto;
}
.home-medicine__list .reg_medicine {
  background-color: var(--color-bg);
  border-radius: 35px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  height: 39px;
  gap: 10px;
  /* 3-2: 긴 약품명 pill이 화면 밖으로 이탈하지 않도록 컨테이너 폭 이내로 제한 */
  max-width: 100%;
}
.home-medicine__list .reg_medicine p {
  font-size: 15px;
  font-weight: 500;
  color: #303030;
  /* 3-2: 긴 이름은 한 줄 말줄임(…)으로 처리 (삭제 버튼은 flex-shrink:0으로 유지) */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-medicine__list .reg_medicine p span.capacity {
  display: inline-block;
  margin-left: 6px;
  font-size: 13px;
  font-weight: 400;
  color: #848487;
}
.home-medicine__list .reg_medicine .btn_delete {
  display: inline-block;
  width: 21px;
  height: 21px;
  flex-shrink: 0; /* 3-2: 이름 말줄임 시에도 삭제 버튼은 항상 노출 */
  /* 3-3: 마이너스(-) 대신 휴지통 아이콘으로 변경 (홈·DDI 선택약품 목록 공통, 색상 #848487 동일) */
  background: url(../_img/icon/icon_header_delete.svg) no-repeat center center / contain;
}
.home-medicine__list .btn_icon {
  padding: 0 13px;
  background-color: var(--color-bg);
  border-radius: 35px;
  height: 39px;
}
.home-medicine__list .btn_icon span {
  font-size: 15px;
  font-weight: 500;
  color: #848487;
}
/* 전체삭제 버튼 스타일 */
.home-medicine__list .reset-btn {
  background-color: #E5E5EA;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s ease;
}
.home-medicine__list .reset-btn:hover {
  background-color: #D1D1D6;
}
.home-medicine__list .reset-btn p {
  color: #636366;
}
.taking__medicine>div>h5,
.taking__medicine>h5 {
  font-size: 16px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 12px;
}
.medicine__list .medicine__item {
  display: block;
  position: relative;
  margin-bottom: 12px;
  background-color: #F4FAF9;
  border-radius: 10px;
  padding: 13px;
}
.medicine__item .taking_checkbox {
  position: absolute;
  top: 14px;
  right: 14px;
}
.medicine__item .taking_time {
  display: flex;
  align-items: center;
  gap: 5px;
}
.medicine__item .taking_time li {
  min-width: 27px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  color: #9BC5A5;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.medicine__item .taking_time li.active {
  color: var(--color-typo);
  font-weight: 600;
  border-bottom: 2px solid #A5DED0;
}

@media screen and (max-width:370px) {
  /*
  .medicine__item .medicine__desc {
    margin-top: 14.5px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-items: center;
  }

  .taking_info {
    display: flex;
    gap : 12px;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .medicine__item .medicine__desc .taking_info p.time {
    font-size: 13px;
    font-weight: 500;
    color: #848487;
    margin-bottom: 0 !important;
  }

  .medicine__item .medicine__desc .thum {
    display: inline-block;
    width: 82px !important;
    height: 82px !important;
    border-radius: 7px;
    flex-shrink: 0;
    overflow: hidden;
  }
  */

  .medicine__item .medicine__desc .thum {
    display: inline-block;
    width: 100px !important;
    height: 82px !important;
    border-radius: 7px;
    flex-shrink: 0;
    overflow: hidden;
  }

  .medicine__item .medicine__desc .medicine_info {
    padding-top: 3px;
    flex: 1;
    max-width: 42% !important;
  }
}


.temp_medicine_class {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* 복용관리 목록 — 제이온 상품(웰니스스토어) 구분 배지 */
.medicine_name .mi-badge-product {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
  color: #0E7C66;
  background: var(--color-main-soft, rgba(14,124,102,.10));
  border-radius: 999px;
  padding: 1px 7px;
}

.medicine__item .medicine__desc {
  margin-top: 14.5px;
  display: flex;
  gap: 9px;
}
.medicine__item .medicine__desc .thum {
  display: inline-block;
  width: 107px;
  height: 82px;
  border-radius: 7px;
  flex-shrink: 0;
  overflow: hidden;
}
.medicine__item .medicine__desc .thum img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.medicine__item .medicine__desc .medicine_info {
  padding-top: 3px;
  flex: 1;
  min-width: 0; /* 3-2: flex 아이템이 내용보다 좁아질 수 있게 하여 긴 이름/칩이 옆 배지를 밀어내지 않도록 */
}
.medicine__item .medicine__desc .medicine_info p {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: #303030;
}
.medicine__item .medicine__desc .medicine_info div{
  display: flex;
  gap: 3px;
}
.medicine__item .medicine__desc .medicine_info div p.side-effect,
.medicine__item .medicine__desc .medicine_info p.side-effect {
  color: var(--color-sub);
  cursor: pointer;
}
.medicine__item .medicine__desc .taking_info {
  align-self: flex-end;
  text-align: right;
  flex-shrink: 0; /* 3-2: '복용중' 배지 영역은 줄어들지 않게 하여 화면 밖 잘림 방지 */
}
.medicine__item .medicine__desc .taking_info p.time {
  font-size: 10px;
  font-weight: 500;
  color: #848487;
  margin-bottom: 8px;
}
.medicine__item .medicine__desc .taking_info p.time.complete {
  color: var(--color-sub);
}
.medicine__item .medicine__desc .taking_info span.taking_badge {
  display: inline-block;
  padding: 0 7px;
  height: 23px;
  line-height: 23px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background-color: #AEAEB2;
  white-space: nowrap;
  min-width: fit-content;
}
.medicine__item .medicine__desc .taking_info span.taking_badge.complete {
  background-color: var(--color-sub);
}
/* 3-10: 관리 목록 카드에서 바로 수정으로 이동하는 버튼(배지 아래·우측 정렬) */
.medicine__item .medicine__desc .taking_info .btn_edit_intake {
  display: block;
  width: fit-content;
  margin: 8px 0 0 auto;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-main);
  background: #fff;
  border: 1px solid var(--color-main);
  border-radius: 7px;
  white-space: nowrap;
}
.btn_more_medicine {
  text-align: center;
}

/* =========================================
   버튼 기본 스타일 (현 구조: .btn_more_medicine > button.btn)
   - 기존 .btn_line 계열 위에 살짝만 덮어씀
========================================= */
.btn_more_medicine .btn {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #dcdcdc;
  background: #fff;
  color: #333;
  font-weight: 600;
  line-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn_more_medicine .btn_more span {
  position: relative;
  padding-right: 25px;
  font-size: 13px;
  font-weight: 500;
  color: #636366;
}
.btn_more_medicine .btn_more span::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: url(/_img/icon/icon_more_arrow.svg) no-repeat center center / contain;
}
.home__notice>h5 {
  font-size: 16px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 12px;
}
.home__notice .notice__box {
  padding: 10px 13px;
  padding-right: 18px;
  background-color: var(--color-main-005);
  border-radius: 10px;
  min-height: 45px;
}
.home__notice .notice__box p {
  position: relative;
  padding-left: 32px;
  font-size: 14px;
  font-weight: 500;
  color: #4A4A4A;
  line-height: 24px;
}
.home__notice .notice__box p::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../_img/icon/icon_notice.svg) no-repeat center center / contain;
}
/* Search */
.recent__search {
  margin-top: 16px;
}
.recent__search h5 {
  font-size: 14px;
  font-weight: 500;
  color: #4A4A4A;
}
.recent-word__list {
  margin-top: 16px;
}
.recent-word__list .recent-word__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 17px;
}
.recent-word__item p {
  font-size: 15px;
  font-weight: 500;
  color: #848487;
  flex: 1;
}
.recent-word__item .btn_delete {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: url(../_img/icon/icon_delete_word.svg) no-repeat center center / contain;
}
.search__result {
  display: none;
}
.search__result .result__list {
  margin-top: 20px;
}
@media screen and (max-width: 768px) {
  .search__result .result__list {
    margin-top: 20px; /* 모바일에서 줄이고 싶을 경우 */
    margin-bottom: 20px;
  }
}
/* 3-1: 하단 고정 버튼(.fixed_btn.isBottom = bottom 60px + height 80px, 최대 ~140px)이
   '더보기' 버튼/마지막 검색결과를 가리지 않도록 스크롤 여백 확보. (홈/약품검색 공통) */
.search__result {
  padding-bottom: 150px;
}
.search__result .result__item {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding: 12px 0;
  border-bottom: 1.5px solid #E5E5EA;
}
.search__result .result__item.active::after {
  content: '';
  display: inline-block;
  width: calc(100% + 36px);
  height: 100%;
  z-index: -1;
  position: absolute;
  top: 0;
  left: -18px;
  background-color: #F4FAF9;
}
.search__result .result__item:last-child {
  border-bottom: none;
}
.search__result .result__item .result_info {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: 1;
}
.search__result .result__item .thum {
  display: inline-block;
  width: 102px;
  min-width: 102px;
  height: 55px;
  border-radius: 7px;
  overflow: hidden;
}
.search__result .result__item .thum img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.search__result .result__item .result_info h5 {
  font-size: 15px;
  font-weight: 500;
  color: #303030;
  white-space: normal; /* 줄바꿈 허용 */
  word-break: break-word; /* 단어 단위 줄바꿈 */
  overflow-wrap: break-word; /* 긴 단어도 줄바꿈 */
}
.medicine_name {
  white-space: normal; /* 줄바꿈 허용 */
  word-break: break-word; /* 단어 단위 줄바꿈 */
  overflow-wrap: break-word; /* 긴 단어도 줄바꿈 */
}
.medicine_period {
  font-size: 11px;
  color : grey;
  white-space: nowrap;
}
.search__result .result__item .result_info p {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 300;
  color: #848487;
}
/* #### ddi #### */
.ddi__inner {
  padding-top: 8px;
  padding-bottom: 80px;
}
.ddi_info {
  border-radius: 10px;
  width: 100%;
  padding: 9px;
  background-color: #F4F8FA;
}
.ddi_info.purple {
  background-color: #F6F4FA;
}
.ddi_info p {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-typo);
  padding-left: 30px;
  position: relative;
}
.ddi_info p::before {
  content: '';
  display: inline-block;
  width: 21px;
  height: 21px;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../_img/icon/icon_info_typo.svg) no-repeat center / contain;
}
.ddi_info.purple p {
  color: #3E4274;
}
.ddi_info.purple p::before {
  background-image: url(../_img/icon/icon_info_purple.svg);
}
.interaction__item {
  padding: 22px 0;
  border-bottom: 1px solid #E5E5EA;
}
.interaction__item>h3 {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #303030;
  margin-bottom: 20px;
}
.interaction__item:first-of-type {
  padding-top: 0;
}
.interaction__item:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.interaction_rotate {
  display: flex;
  align-items: center;
  gap: 7px;
}
.interaction_rotate p {
  flex: 1;
  height: 45px;
  line-height: 45px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  background-color: #F6F4FA;
  color: #303030;
  text-align: center;

}
.interaction_rotate .expandable-text {
  height: 40px; /* 기본 높이 */
  overflow: hidden;
  transition: height 0.3s ease;
  padding: 0 12px;
  cursor: pointer;
  white-space: normal; /* 줄바꿈 허용 */
  word-break: break-word; /* 단어 단위 줄바꿈 */
  overflow-wrap: break-word; /* 긴 단어도 줄바꿈 */
}

.interaction_rotate .expandable-text.expanded {
  height: auto;
  min-height: 95px; /* 늘어날 높이 */
  padding: 0 12px;
  display: flex;
  line-height: 20px;
  align-items: center !important;
  justify-content: center !important;
  white-space: normal; /* 줄바꿈 허용 */
  word-break: break-word; /* 단어 단위 줄바꿈 */
  overflow-wrap: break-word; /* 긴 단어도 줄바꿈 */
}
.interaction_rotate p.red,
.chart-legend .color.red {
  background: linear-gradient(-90deg, #DA3F42 0%, #E55254 55.04%);
  color: #fff;
}
.interaction_rotate p.yellow,
.chart-legend .color.yellow {
  background: linear-gradient(-90deg, #D7B905 0%, #DBC535 55.04%);
  color: #fff;
}
.interaction_rotate p.green,
.chart-legend .color.green {
  background: linear-gradient(-90deg, #0E7C66 0%, #14B8A6 55.04%);
  color: #fff;
}
.interaction_rotate p.purple,
.chart-legend .color.purple {
  background: linear-gradient(-90deg, #7F63CB 0%, #9E8BD1 55.04%);
  color: #fff;
}
.interaction_rotate p.blue,
.chart-legend .color.blue {
  background: #335CD4;
  color: #fff;
}
.interaction_rotate .rotate_icon {
  display: inline-block;
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  background: url(../_img/icon/icon_rotate.svg) no-repeat center / contain;
}
.interaction_rotate .increase_rotate_icon {
  display: inline-block;
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  background: url(../_img/icon/icon_rotate_increase.svg) no-repeat center / contain;
}
.interaction_rotate .decrease_rotate_icon {
  display: inline-block;
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  background: url(../_img/icon/icon_rotate_decrease.svg) no-repeat center / contain;
}
.interaction_rotate .unknown_rotate_icon {
  display: inline-block;
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  background: url(../_img/icon/icon_rotate_unknown.svg) no-repeat center / contain;
}
.interaction__item .interaction_info {
  margin-top: 20px;
  background-color: #F6F4FA;
  border-radius: 10px;
  padding: 16px;
}
.interaction_info h4 {
  font-size: 17px;
  font-weight: 700;
  color: #7B5AB8;
  margin-bottom: 13px;
  overflow-wrap: break-word;
  word-break: break-all;
}
.interaction_info h5.sub_tit {
  font-size: 15px;
  font-weight: 500;
  color: #1A1A1A;
  margin-bottom: 9px;
}
.interaction_info span,
.interaction_info p {
  font-size: 13px;
  font-weight: 500;
  color: #606060;
  line-height: 1.45;
}
.interaction_info span.ellipsis2,
.interaction_info p.ellipsis2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
  word-break: break-all;
  height: auto;
}
.medicineDetailArea{
  overflow-wrap: break-word;
  word-break: break-all;
}
.medicineDetailArea p {
  text-align: right;
  display: block !important;
}
.interaction_info .btn_more {
  width: 100%;
  margin-top: 16px;
}
.interaction_info .btn_more span {
  font-size: 13px;
  font-weight: 500;
  color: #636366;
  line-height: 20px;
  padding-right: 25px;
  position: relative;
}
.interaction_info .btn_more span:after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.35s;
  background: url(../_img/icon/icon_more_arrow.svg) no-repeat center center / contain;
}
.interaction_info .btn_more.active span::after {
  transform: translateY(-50%) scaleY(-1);
}
.medicine-graph__box {
  margin-top: 20px;
  border-radius: 20px;
  padding: 30px 17px;
  min-height: 388px;
  position: relative;
}
.medicine-graph__box>h3 {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #303030;
  margin-bottom: 15px;
  overflow-wrap: break-word;
  word-break: break-all;
}
.medicine-graph__box:has(> p:only-child),
.medicine-graph__box:has(> h2:only-child) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.medicine-graph__box.color--mint {
  border: 1.5px solid #B7E1E6;
}
.medicine-graph__box.color--purple {
  border: 1px solid #DED8ED;
}
.medicine-graph__box.one_path {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 93px;
  margin-bottom: 22px;
  margin-top: 0;
  position: relative;
}
.medicine-graph__box.one_path::after {
  content: '';
  display: inline-block;
  width: calc(100% - 60px);
  height: 1.5px;
  background-color: var(--color-bg);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 43px;
  z-index: -1;
}
.medicine-graph__box.one_path .path_info {
  display: inline-block;
  width: 62px;
}
.medicine-graph__box.one_path .path_info h4.num {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #5959B4;
  margin-bottom: 4px;
}
.medicine-graph__box.one_path .path_info p {
  word-break: break-all;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #4A4A4A;
  line-height: 1.2;
}
.medicine-graph__box.one_path .path_info p.fw700 {
  font-weight: 700;
  color: #303030;
  font-size: 13px;
}
.medicine-graph__box.one_path .path_arrow {
  flex: 1;
  height: 24px;
  background: url(../_img/icon/icon_arrow.svg) no-repeat center center / contain;
}
.medicine-graph__box.one_path .path_arrow_green {
  flex: 1;
  height: 24px;
  background: url(../_img/icon/icon_arrow_green.svg) no-repeat center center / contain;
}
.medicine-graph__box.one_path .path_arrow_red {
  flex: 1;
  height: 24px;
  background: url(../_img/icon/icon_arrow_red.svg) no-repeat center center / contain;
}
.medicine-graph__box>h3 {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #303030;
}

.medicine-graph__box>h2 {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: #303030;
}
.medicine-graph__box ul.chart-legend {
  position: absolute;
  top: 30px;
  right: 17px;
}
.medicine-graph__box ul.chart-legend li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #848487;
  margin-bottom: 5px;
}
.medicine-graph__box ul.chart-legend span.color {
  display: inline-block;
  width: 15px;
  height: 2px;
  border-radius: 100px;
}
.medicine-info__box {
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: 10px;
}
.medicine-info__box.color--mint {
  background-color: #F4F8FA;
}
.medicine-info__box>h3 {
  font-size: 17px;
  font-weight: 700;
  color: #2494A3;
  margin-bottom: 13px;
}
.medicine-info__box> span {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #4A4A4A;
  word-break: break-word;
}
.medicine-info__box.color--mint>h3 {
  color: #2494A3;
}
.medicine-info__box .info_box {
  font-size: 13px;
  font-weight: 500;
  color: #606060;
  line-height: 1.45;
}
.medicine-info__box .info_box:not(:last-child) {
  margin-bottom: 13px;
}
.medicine-info__box .info_box h4 {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 9px;
}
.medicine-info__box .info_box ul li {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: #606060;
}
.medicine-info__box .info_box ul.decimal li {
  list-style: decimal;
  margin-left: 14px;
}
.btn_ddi_details {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 12px;
  margin-top: 16px;
}
.btn_ddi_details .btn {
  padding: 0 18px;
}
.btn_ddi_details .btn span {
  text-align: left;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 45px;
  position: relative;
}
.btn_ddi_details .btn span::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  background: url(../_img/icon/icon_btn_arrow.svg) no-repeat center center / contain;
}
/* #### 약봉투 #### */
.medicine-home__inner {
  padding-top: 8px;
  padding-bottom: 80px;
}
.register_medicine {
  display: flex;
  align-items: center;
  flex-direction: column;
  row-gap: 11px;
  margin-top: 13px;
}
.register_medicine .btn_icon {
  height: 45px;
  border-radius: 10px;
  justify-content: center;
  font-weight: 500;
}
.medicine-graph__box .no_data,
.medicine-home__inner .no_data {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100dvh - 320px);
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: #636366;
}
.no_data_big {
  font-size: 24px !important;
}

.modal_bottom_register {
  display: none;
  width: 100%;
  height: 100dvh;
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 102;
  transform: translateX(-50%);
  max-width: 500px;
  background-color: rgb(0, 0, 0, 0.5);
}
.modal-bottom__inner {
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 30px 30px 0 0;
  width: 100%;
  opacity: 0;
  transition: 0.35s;
  padding: 30px 24px 60px;
}
.modal_bottom_register.on .modal-bottom__inner {
  opacity: 1;
  bottom: 0;
}
.modal-bottom__inner:before {
  content: '';
  display: inline-block;
  width: 63px;
  height: 6px;
  border-radius: 3px;
  background-color: #E5E5EA;
  position: absolute;
  left: 50%;
  top: 9px;
  transform: translateX(-50%);
}
.modal_bottom_register .modal__header h3 {
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 17px;
}
.modal_bottom_register .register_medicine {
  margin-top: 26px;
}
.modal_bottom_register .register_medicine .btn_icon {
  justify-content: flex-start;
}
.modal_bottom_register .register_medicine .btn_icon span {
  font-size: 15px;
  font-weight: 500;
  color: #303030;
}
.medicine-search__inner {
  padding-top: 14px;
  padding-bottom: 140px;
}
/* 등록 */
.radio_box--cycle {
  display: flex;
  align-items: center;
  gap: 22px;
}
.radio_box--month {
  display: flex;
  align-items: center;
  gap: 9px;
}
.radio_box--month .radio--typeD {
  flex: 1;
  max-width: 113px;
}
.datepicker_box {
  display: flex;
  align-items: center;
  gap: 6px;
}
.datepicker_box .datepicker {
  height: 40px;
  font-size: 14px;
  max-width: 150px;
}
.number-control__wrap {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.number-control__box {
  display: flex;
  align-items: center;
  background-color: var(--color-bg);
  border-radius: 10px;
  height: 42px;
  padding: 0 19px;
  gap: 18px;
}
.number-control__box button {
  display: inline-block;
  width: 24px;
  height: 24px;
}
.number-control__box .btn_minus {
  background: url(../_img/icon/icon_minus.svg) no-repeat center center / contain;
}
.number-control__box .btn_minus.active {
  background: url(../_img/icon/icon_minus_on.svg) no-repeat center center / contain;
}
.number-control__box .btn_plus {
  background: url(../_img/icon/icon_plus.svg) no-repeat center center / contain;
}
.number-control__box .btn_plus.active {
  background-image: url(../_img/icon/icon_plus_on.svg);
}
.number-control__box input {
  background-color: transparent;
  border: none;
  width: 28px;
  text-align: center;
}
.number-control__wrap span {
  font-size: 14px;
  font-weight: 400;
  color: #303030;
  padding-bottom: 8px;
}
.setting_alarm:not(:last-child) {
  margin-bottom: 35px;
}
.setting_time {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 18px;
  padding: 0 7px;
}
.setting_time span {
  font-size: 14px;
  font-weight: 400;
  color: #636366;
  position: relative;
  padding-left: 30px;
}
.setting_time span:before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url(../_img/icon/icon_alarm.svg) no-repeat center center / contain;
}
.setting_time .btn_change_time {
  width: 150px;
  height: 42px;
  line-height: 42px;
  background-color: var(--color-bg);
  border-radius: 10px;
  text-align: center;
  font-weight: 400;
  font-size: 15px;
  color: #303030;
}
.modal_setting_time .modal__inner {
  padding: 28px 0px 26px;
}
.modal_setting_time .modal__header h3 {
  margin-bottom: 9px;
}
.modal_setting_time .modal__btns {
  padding: 0 22px;
}
.modal_setting_time .timepicker {
  width: 100%;
  height: 42px;
  text-align: center;
  font-size: 15px;
  border: none;
  outline: none;
  font-weight: 400;
  border-radius: 10px;
  background-color: var(--color-bg);
  position: relative;
}
.modal_setting_time .timepicker::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
}
.select_time {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 27px;
  position: relative;
}
.select_time::before {
  content: '';
  display: inline-block;
  width: 100%;
  height: 1px;
  background-color: #CCCCCC;
  position: absolute;
  top: 72px;
  left: 0;
}
.select_time::after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 1px;
  background-color: #CCCCCC;
  position: absolute;
  top: 104px;
  left: 0;
}
.timeSwiper {
  margin-left: 0;
  margin-right: 0;
  height: 180px;
  /* 5-1: 시간 선택 컬럼 폭 확대(34→60px, yearSwiper와 동일)로 터치/스크롤 영역 개선 */
  width: 60px;
  overflow: hidden;
}
.yearSwiper {
  margin-left: 0;
  margin-right: 0;
  height: 180px;
  width: 60px;
  overflow: hidden;
}
.yearSwiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: #AEAEAE;
  user-select: none;
}
.timeSwiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: #AEAEAE;
  user-select: none;
}
/* .timeSwiper .swiper-slide.swiper-slide-prev,
.timeSwiper .swiper-slide.swiper-slide-next {
  font-size: 18px;
  font-weight: 400;
  color: #AEAEAE;
} */
.timeSwiper .swiper-slide.swiper-slide-active {
  font-size: 23px;
  color: #16191C;
}
/* ── 알림 시간 선택기(스텝퍼) — 시니어 친화 큰 터치 영역 (구 .select_time 휠 대체) ── */
.time-picker { padding: 4px 20px 0; }
.time-picker .tp-ampm { display: flex; gap: 10px; margin: 2px 0 24px; }
.time-picker .tp-ampm__btn {
  flex: 1; height: 58px; border: 2px solid #E1E4E8; border-radius: 14px;
  background: #fff; font-size: 19px; font-weight: 600; color: #6B7280;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .15s, border-color .15s, color .15s;
}
.time-picker .tp-ampm__btn.is-active {
  border-color: var(--color-main, #0E7C66);
  background: var(--color-main, #0E7C66); color: #fff;
}
.time-picker .tp-clock { display: flex; align-items: center; justify-content: center; gap: 6px; }
.time-picker .tp-col { display: flex; flex-direction: column; align-items: center; }
.time-picker .tp-arrow {
  width: 92px; height: 58px; border: none; border-radius: 14px; background: #F1F5F3;
  font-size: 28px; line-height: 1; color: var(--color-main, #0E7C66); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.time-picker .tp-arrow:active { background: #DCE7E2; }
.time-picker .tp-num {
  width: 92px; text-align: center; font-size: 46px; font-weight: 700; color: #16191C;
  padding: 8px 0; font-variant-numeric: tabular-nums; line-height: 1.1;
  /* 숫자를 탭해서 직접 입력 — input 기본 스타일 제거 + '입력 가능' 어포던스(연한 테두리) */
  box-sizing: border-box; font-family: inherit; margin: 0;
  border: none; -webkit-appearance: none; appearance: none;
  background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 2px #E7EBEE;
  caret-color: var(--color-main, #0E7C66); outline: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: box-shadow .15s, background-color .15s;
}
.time-picker .tp-num:focus {
  background: #F1FBF8; box-shadow: inset 0 0 0 2px var(--color-main, #0E7C66);
}
.time-picker .tp-col__label { margin-top: 4px; font-size: 14px; color: #9AA0A6; }
.time-picker .tp-sep { font-size: 40px; font-weight: 700; color: #16191C; padding: 0 2px; }
.time-picker .tp-quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 26px; }
.time-picker .tp-quick__btn {
  height: 44px; padding: 0 14px; border: 1px solid #E1E4E8; border-radius: 999px;
  background: #fff; font-size: 14px; color: #374151; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.time-picker .tp-quick__btn:active { background: #F1F5F3; }
.input_alarm {
  position: relative;
}
.input_alarm .btn_add {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../_img/icon/icon_plus.svg) no-repeat center center / contain;
  position: absolute;
  top: 0;
  right: 0;
}
.input_alarm .btn_add.active {
  background-image: url(../_img/icon/icon_plus_on.svg);
}
/* 관리 리스트 */
.medicine-list__inner {
  padding-top: 8px;
  padding-bottom: 80px;
}
.medicine-list__inner .list_title h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #242424;
  margin-bottom: 7px;
}
.medicine-list__inner .list_title p {
  font-size: 14px;
  font-weight: 400;
  color: #4A4A4A;
}
.medicine-list__tab {
  margin-top: 16px;
}
.medicine-list__tab ul.tabs {
  display: flex;
  align-items: center;
  padding: 0 15px;
  gap: 12px;
}
.medicine-list__tab ul.tabs .tabs__link {
  flex: 1;
  height: 44px;
  text-align: center;
  line-height: 44px;
  font-size: 16px;
  font-weight: 600;
  color: #848487;
  cursor: pointer;
  position: relative;
}
.medicine-list__tab ul.tabs .tabs__link.on {
  color: var(--color-main);
  font-weight: 700;
}
.medicine-list__tab ul.tabs .tabs__link.on::after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--color-main);
}
.list-tab__content {
  display: none;
  margin-top: 23px;
}
.list-tab__content.on {
  display: block;
}
.modal_delete_medicine .modal__inner {
  padding: 34px 28px 19px;
}
/* 상세 */
.medicine-dtl__inner {
  padding-top: 8px;
  padding-bottom: 80px;
}
.medicine-dtl__info>h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1A1A1A;
}
.medicine-dtl__info .medicine_info {
  margin-top: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid #E5E5EA;
}
.medicine-dtl__info .medicine_info li {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 13px;
}
.medicine_info li span.info_tit {
  font-size: 14px;
  font-weight: 500;
  color: #848487;
}
.medicine_info li .info_cnts {
  font-size: 14px;
  font-weight: 400;
  color: #1A1A1A;
}
.medicine_info .medicine_alarm {
  display: flex;
  align-items: center;
  gap: 7px;
}
.medicine_info .medicine_alarm p {
  color: #AEAEB2;
}
.medicine_info .medicine_alarm p.active {
  color: #1A1A1A;
}
.medicine-dtl__info .medicine_info li:last-child {
  margin-bottom: 0;
}
.medicine-dtl__image {
  margin-top: 16px;  
}
.medicine-dtl__image h5 {
  font-size: 15px;
  font-weight: 600;
  color: #303030;
}
.medicine-dtl__image .dtl_img {
  max-width: 100%;
  margin-top: 9px;
}
.medicine-dtl__image .dtl_img img {
  width: 100%;
  object-fit: contain;
}
.medicine-dtl__description {
  margin-top: 26px;
}
.medicine-dtl__description .description {
  margin-bottom: 26px;
}
.medicine-dtl__description .description h5 {
  font-size: 15px;
  font-weight: 600;
  color: #303030;
  margin-bottom: 9px;
}

.medicine-dtl__description .description h4 {
  font-size: 20px;
  font-weight: 600;
  color: #303030;
  margin-bottom: 9px;
  text-align: center;
}

.medicine-dtl__description .description p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: #4A4A4A;
}
.medicine-dtl__description .description ul.list--number li {
  list-style: decimal;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: #4A4A4A;
  margin-left: 16px;
}
.modal_side-effect .modal__inner {
  padding: 28px 22px 23px;
}
.modal_side-effect .modal__header h3 {
  margin-bottom: 9px;
}
.side-effect__box {
  text-align: center;
}
.side-effect__box .thum {
  display: inline-block;
  width: 114px;
  height: 114px;
  border-radius: 10px;
  overflow: hidden;
}
.side-effect__box .thum img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.side-effect__box .desc {
  margin-top: 19px;
}
.side-effect__box .desc .notice{
  overflow-y: scroll;
  max-height: 150px;
}
.side-effect__box .desc h5.med_name {
  font-size: 15px;
  font-weight: 600;
  color: #000000;
}
.side-effect__box .desc .med_use {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 400;
  color: #636366;
}
.side-effect__box .desc span.notice,
.side-effect__box .desc p.notice {
  margin-top: 17px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: #303030;
}
/* #### 복용이력 #### */
.history__inner {
  padding: 8px 0 80px;
}
.history_calendar {
  padding: 17px 16px;
  border-radius: 15px;
  min-height: 159px;
  background: linear-gradient(293.67deg, #0E7C66 48.35%, #14B8A6 77.88%);
  margin-bottom: 18px;
}
.history_calendar .today {
  margin-bottom: 23px;
}
.history_calendar .today h5 {
  font-size: 17px;
  font-weight: 600;
  color: #E1FFF5;
  padding-left: 26px;
  position: relative;
  margin-bottom: 8px;
  line-height: 20px;
}
.history_calendar .today h5::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url(../_img/icon/icon_calendar.svg) no-repeat center / contain;
}
.history_calendar .today p {
  font-size: 17px;
  font-weight: 500;
  color: #fff;
}
.calendarSwiper {
  min-height: 53px;
  position: relative;
}
.calendarSwiper .swiper-button-prev {
  width: 22px;
  height: 22px;
  left: 0px;
  top: 65%;
  opacity: 1;
  background: url(../_img/icon/icon_calendar_prev.svg) no-repeat center center / contain;
}
.calendarSwiper .swiper-button-prev::after {
  content: none;
}
.calendarSwiper .swiper-button-next {
  width: 22px;
  height: 22px;
  right: 0px;
  opacity: 1;
  top: 65%;
  left: auto;
  background: url(../_img/icon/icon_calendar_next.svg) no-repeat center center / contain;
}
.calendarSwiper .swiper-button-next::after {
  content: none;
}
.calendarSwiper .calendar__week {
  width: calc(100% - 50px);
  max-width: 343px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  padding: 4px 0;
  height: 70px;
}
.calendar__week .calendar_date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 6px;
  flex: 1;
  width: 33px;
  padding: 10px 0;
  border-radius: 25px;
}
.calendar__week .calendar_date h3.day {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
}
.calendar__week .calendar_date p {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #fff;
}
.calendar__week .calendar_date.last {
  background-color: #57CEB0;
}
.calendar__week .calendar_date.today {
  outline: 1px solid #fff;
  background-color: #23A48D;
  margin: 0;
}
/* #### 내 정보 #### */
.btn_modify_info {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../_img/icon/icon_modify.svg) no-repeat center center / contain;
}
.setting__inner {
  padding-top: 62px;
  padding-bottom: 80px;
}
.setting__inner>h3 {
  font-size: 19px;
  font-weight: 600;
  color: var(--color-main);
  line-height: 1.45;
} 
.setting__inner .login__link {
  margin-top: 32px;
}
.setting__inner .sns__login {
  margin-top: 74px;
}

/* ===========================================================
   설정 페이지 — 메뉴 그룹 리스트 (데이터 주도형)
   인라인 <style> 4개(push-switch / btn-menu-link / btn-admin-link /
   btn-copy·family)를 이 한 곳으로 통합. 색은 전부 디자인 토큰 사용.
   =========================================================== */

/* 그룹 섹션 타이틀 — 앱 기존 h5 골드바 패턴 재사용 */
.setting__inner .set-group__title {
  position: relative;
  margin: 24px 4px 10px;
  padding-left: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-typo);
}
.setting__inner .set-group__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: var(--grad-gold);
}

/* 그룹 = 흰색 surface 카드 (프로필 .member_info 틴트와 톤 대비) */
.set-group {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* 행 — 링크/토글 공통 (a·div 모두 동일하게 보이도록 reset 포함) */
.set-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 13px 16px;
  background: none;
  border: 0;
  text-align: left;
  text-decoration: none;
  color: #1A1A1A;
  font-size: 15px;
  font-weight: 600;
  transition: background .15s var(--ease-premium);
}
.set-row + .set-row {
  border-top: 1px solid var(--color-line);
}
a.set-row:active {
  background: var(--color-main-005);
}
.set-row__icon {
  flex: 0 0 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-main-soft);
  font-size: 16px;
}
.set-row__label {
  flex: 1;
}
.set-row__arrow {
  margin-left: auto;
  color: #B8C0BD;
  font-size: 20px;
  line-height: 1;
}
.set-row--admin .set-row__icon {
  background: var(--color-gold-soft);
}
.set-row--toggle {
  cursor: default;
}

/* 복약 알림 토글 — 인라인에서 이전 + raw hex 토큰화 */
.push-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  margin-left: auto;
  flex-shrink: 0;
}
.push-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.push-switch__slider {
  position: absolute;
  inset: 0;
  background: var(--color-line);
  border-radius: 24px;
  transition: .2s;
  cursor: pointer;
}
.push-switch__slider:before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: .2s;
}
.push-switch input:checked + .push-switch__slider {
  background: var(--color-main);
}
.push-switch input:checked + .push-switch__slider:before {
  transform: translateX(20px);
}
.push-switch input[data-available='0'] + .push-switch__slider {
  opacity: .5;
}

/* 가족코드 복사 / 번호 등록 칩 — 인라인에서 이전 + 토큰화 */
.btn-copy-code {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  background: var(--color-main-soft);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--color-main);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.btn-copy-code:active {
  background: var(--color-main-005);
}
.btn-register-phone {
  display: inline-block;
  padding: 3px 12px;
  background: var(--color-gold-soft);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--color-gold-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

/* 계정 푸터 — 회원 탈퇴만 위험색(텍스트) */
.setting__inner .login__link li a#btn-delete-account {
  color: var(--color-red);
}

/* 법적 고지 푸터 — 위계 최하위 마이크로 링크 */
.set-footer__legal {
  margin-top: 22px;
  text-align: center;
}
.set-footer__legal a {
  font-size: 12px;
  font-weight: 500;
  color: #8A938F;
  text-decoration: none;
}
.set-footer__legal a:hover {
  color: var(--color-typo);
}
.set-footer__legal span {
  margin: 0 8px;
  color: #D4D4D4;
}

/*ddi chart */
.radar-chart__wrapper {
  max-width: 100%;
  padding: 0 10px;
}
canvas#radarChart {
  width: 100%;
  height: auto;
}





.modal_bottom_register_for_input {
  display: none;
  width: 100%;
  height: 100dvh;
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 102;
  transform: translateX(-50%);
  max-width: 500px;
  background-color: rgb(0, 0, 0, 0.5);
}
.modal-bottom__inner_for_input {
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 30px 30px 0 0;
  width: 100%;
  opacity: 0;
  transition: 0.35s;
  padding: 30px 24px 60px;
}
.modal_bottom_register_for_input.on .modal-bottom__inner_for_input {
  opacity: 1;
  bottom: 0;
}

.modal__content .search_input {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal__content .search_input input {
  border: 1.3px solid #E5E5EA;
  border-radius: 10px;
  background-color: #fff;
  height: 40px;
  flex: 1;
  padding-left: 36px;
  padding-right: 10px;
  font-size: 15px;
}

.register_input_modal_btn_area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.register_modal_btn_width {
  width: 30%;
}
.detailInfoSourceArea p {
  font-size: 14px;
  font-weight: 400;
  text-align: right;
}








/* 연쇄작용 전용 스타일 */
.medicine-graph__box.chain_path {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  min-height: auto;
  margin-bottom: 22px;
  margin-top: 0;
  position: relative;
  padding: 20px 17px;
}


.medicine-graph__box.chain_path .path-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  position: relative;
  padding: 0 8px;
}
@media (max-width: 768px) {
  .medicine-graph__box.chain_path .path-row {
    padding: 0;
  }
}
.medicine-graph__box.chain_path .custom_align_left {
  justify-content: flex-start;
}

.medicine-graph__box.chain_path .custom_align_center {
  justify-content: center;
}


.medicine-graph__box.chain_path .path-row:not(:last-child) {
  margin-bottom: 15px;
}

/* 4개씩 배치된 약물 정보 */
.medicine-graph__box.chain_path .path_info {
  display: inline-block;
  width: 62px;
  flex-shrink: 0;
}

.medicine-graph__box.chain_path .path_info h4.num {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #5959B4;
  margin-bottom: 4px;
}

.medicine-graph__box.chain_path .path_info p {
  word-break: break-all;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #4A4A4A;
  line-height: 1.2;
}

/* 가로 화살표 (줄 안에서) */
.medicine-graph__box.chain_path .path_arrow {
  flex: 1;
  height: 24px;
  background: url(../_img/icon/icon_arrow.svg) no-repeat center center / contain;
  max-width: 30px;
}
.medicine-graph__box.chain_path .path_arrow_red {
  flex: 1;
  height: 24px;
  background: url(../_img/icon/icon_arrow_red.svg) no-repeat center center / contain;
  max-width: 30px;
}

/* 세로 화살표 (줄 끝에서 다음 줄로) */
.medicine-graph__box.chain_path .path_arrow_down {
  width: 24px;
  height: 24px;
  background: url(../_img/icon/icon_arrow_down.svg) no-repeat center center / contain;
  transform: rotate(90deg);
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%) rotate(90deg);
}

/* 첫 번째 줄의 배경선 제거 */
.medicine-graph__box.chain_path .path-row:first-child::after {
  display: none;
}

/* 마지막 줄에는 아래 화살표 없음 */
.medicine-graph__box.chain_path .path-row:last-child .path_arrow_down {
  display: none;
}

/* ✅ 사업자 정보 박스 스타일 */
.biz-info{
  margin: 50px auto 0; max-width: 560px;
  padding: 14px 12px;
  background: #f9fafb;              /* 은은한 회색 배경 */
  border: 1px solid #eee;            /* 얇은 테두리 */
  border-radius: 12px;               /* 둥근 모서리 */
  color: #6b7280;                    /* 텍스트 중간톤 */
  font-size: 12px;                   /* 모바일 가독성 */
  line-height: 1.55;
}
.biz-info__title{
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #9ca3af;                    /* 라벨 톤보다 한 단계 밝게 */
  letter-spacing: .2px;
}
.biz-info__list{ margin: 0; }
.biz-info__row{
  display: grid;
  grid-template-columns: 100px 1fr;  /* 라벨 고정, 값 가변 */
  gap: 6px 10px;
  padding: 6px 0;
  border-top: 1px dashed #e5e7eb;    /* 점선 구분 */
}
.biz-info__row:first-child{ border-top: 0; }
.biz-info__label{
  margin: 0;
  color: #9ca3af;                    /* 흐릿한 라벨 */
  white-space: nowrap;
}
.biz-info__value{
  margin: 0;
  color: #4b5563;                    /* 본문 톤 */
  word-break: keep-all;
}

.required {
  color: red;
  font-weight: bold;
  margin-left: 4px; /* 글자와 간격 */
}


.calendar_date {
  position: relative;
}

.calendar_date .status-mark {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 10px;
  line-height: 1;
  z-index: 1;
}

.status-mark.future {
  color: #ff4d4d;
  font-size: 10px;
  font-weight: bold;
}


.calendar_date .status-mark.complete {
  color: #FFFFFF;
  text-shadow: 0 0 2px rgba(0,0,0,0.3);
}

.calendar_date .status-mark.incomplete {
  color: #E55254;
}

/* 작은 화면에서 마크 크기 조정 */
@media screen and (max-width: 370px) {
  .calendar_date .status-mark {
    font-size: 10px;
    top: 1px;
    right: 1px;
  }
}


/* ============ 검색 입력 + 자동완성 드롭다운 ============ */
.form_search .search_input {
  position: relative; /* 드롭다운 기준점 */
}

/* 입력창: 기존 스타일 유지 + 포커스 상태에서 경계선 강조 */
.form_search .search_input input#medicineName {
  border: 1.3px solid #E5E5EA;
  border-radius: 10px;
  background-color: #fff;
  height: 40px;
  flex: 1;
  padding-left: 36px;
  padding-right: 10px;
  font-size: 15px;
  min-width: 100px;
  background: url(../_img/icon/icon_search.svg) no-repeat center left 10px / 24px 24px;
  transition: border-color .18s ease, box-shadow .18s ease;
  caret-color: #2494A3;
}

.form_search .search_input input#medicineName:focus {
  border-color: #B7E1E6; /* 메인톤과 맞춘 은은한 포커스 */
  box-shadow: 0 0 0 3px rgba(71, 187, 168, .18);
  outline: none;
}

/* 자동완성 드롭다운 컨테이너
   - 현재 구조: [셀렉트(28%)] [입력] [버튼] 이므로
     드롭다운은 '입력' 영역 아래에 정렬되도록 좌우 여백을 계산 */
.search_input .suggest-dropdown {
  position: absolute;
  z-index: 150; /* 모달/헤더 등과 겹침 방지 */
  top: calc(40px + 6px); /* input 높이(40px) + 간격 */
  left: calc(28% + 0px); /* 셀렉트가 28% 차지 → 그 오른쪽부터 시작 */
  right: 110px;          /* 검색 버튼 가로폭(대략). 버튼 폭 변경 시 조정 */
  background: #fff;
  border: 1px solid #E5E5EA;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.06);
  overflow: hidden;
  display: none;         /* JS에서 show/hide */
}

/* 내부 리스트 */
.suggest-dropdown .suggest-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  max-height: 260px;
  overflow-y: auto;
}

/* 항목 */
.suggest-dropdown .suggest-item {
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #303030;
  line-height: 1.35;
}

.suggest-dropdown .suggest-item:hover,
.suggest-dropdown .suggest-item.is-active { /* 키보드 탐색 시 */
  background-color: #F8FAFC;
}

/* 타입 태그: 품목/회사/교정 */
.suggest-dropdown .suggest-item .tag {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  background: #EEF2FF;  /* 기본 라벨톤 */
  color: #636366;
  flex-shrink: 0;
}

.suggest-dropdown .suggest-item .tag.company { background: #F6F4FA; color:#7B5AB8; }
.suggest-dropdown .suggest-item .tag.correction { background: #EAF7F4; color:#2494A3; }

/* 교정(“혹시 이걸 찾으셨나요?”) 힌트 */
.suggest-dropdown .suggest-item--hint {
  font-weight: 600;
  color: #3B82F6;
}

/* 하이라이트(백엔드에서 <mark>로 감싸는 경우 대응) */
.suggest-dropdown mark {
  background: #FFF8C5;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

/* ===== 모바일 대응 ===== */
@media screen and (max-width: 768px) {
  /* 버튼이 더 좁아지는 레이아웃에서도 드롭다운이 입력 폭과 일치하도록 전체로 확장 */
  .search_input .suggest-dropdown {
    left: 0;
    right: 0;
    top: calc(40px + 6px);
  }
}


/* =========================================
   복용이력 - 시간대별 섹션 스타일
========================================= */

/* 시간대 섹션 */
.time_slot_section {
    margin-bottom: 20px;
}

.time_slot_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 2px solid #A5DED0;
    margin-bottom: 12px;
}

.time_slot_title {
    font-size: 16px;
    font-weight: 600;
    color: #1A1A1A;
}

/* 일괄 복용완료 버튼 */
.btn_batch_complete {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background-color: var(--color-sub, #3CBFAE);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn_batch_complete:hover:not(:disabled) {
    background-color: #2a9d8f;
}

.btn_batch_complete:disabled,
.btn_batch_complete.completed {
    background-color: #AEAEB2;
    cursor: not-allowed;
}

/* 현재 시간대 강조 */
.medicine__item .taking_time li.current {
    background-color: #E8F5F3;
    border-radius: 4px;
}

/* 미복용 마크 (X 표시) */
.not-taken-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #FF6B6B;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

/* 미복용 상태 뱃지 - 빨간색 + 폰트 축소 */
.medicine__item .medicine__desc .taking_info span.taking_badge.not-taken {
    background-color: #FF6B6B;
    font-size: 11px;
    padding: 2px 6px;
}

/* 미복용 시간 텍스트 - 빨간색 */
.medicine__item .medicine__desc .taking_info p.time.not-taken {
    color: #999999;
}

/* 미복용 상태 한줄 표시 */
.medicine__item .medicine__desc .taking_info.not-taken-row {
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.medicine__item .medicine__desc .taking_info.not-taken-row p.time {
    margin-bottom: 0;
}

/* ============================================
   history.php 카드 UX 개선
   ============================================ */

/* 섭취기간 - 라벨 + D-day (모바일 wrap 허용) */
.medicine__item .medicine__desc .medicine_info p.medicine_period {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    font-size: 12px;
    color: #666;
    margin: 4px 0 6px;
    line-height: 1.4;
}
.medicine__item .medicine__desc .medicine_info p.medicine_period .period_icon {
    font-size: 11px;
}
.medicine__item .medicine__desc .medicine_info p.medicine_period .period_dates {
    font-weight: 500;
    color: #1A1A1A;
}
.medicine__item .medicine__desc .medicine_info p.medicine_period .dday {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}
.medicine__item .medicine__desc .medicine_info p.medicine_period .dday.normal {
    color: #3B7E72;
    background-color: #E8F5F3;
}
.medicine__item .medicine__desc .medicine_info p.medicine_period .dday.urgent {
    color: #C0392B;
    background-color: #FDECEA;
}
.medicine__item .medicine__desc .medicine_info p.medicine_period .dday.ended {
    color: #888;
    background-color: #ECECEC;
}

/* 제품 분류 (경구약 등) */
.medicine__item .medicine__desc .medicine_info p.product_type {
    font-size: 12px;
    color: #5A5A5E;
    margin: 0 0 6px;
}

/* 부작용/주의 라벨 영역 */
.medicine__item .medicine__desc .medicine_info .warnings_row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

/* 섭취 상태 row (액션 버튼만 우측 정렬) */
.medicine__item .medicine__desc .medicine_info .intake_status_row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #D8E5E2;
}

/* 섭취 액션 버튼 (label로 감싸 hidden checkbox 토글) */
.intake_action_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 16px;
    background-color: #fff;
    border: 1.5px solid var(--color-sub, #3CBFAE);
    color: var(--color-sub, #3CBFAE);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s, color 0.15s;
    text-align: center;
    white-space: nowrap;
}
.intake_action_btn:hover {
    background-color: #F0FAF8;
}
.intake_action_btn input.intake-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.intake_action_btn.completed {
    background-color: var(--color-sub, #3CBFAE);
    border-color: var(--color-sub, #3CBFAE);
    color: #fff;
}
.intake_action_btn.completed:hover {
    background-color: #2FA597;
}

/* 편집 불가 상태 라벨 */
.intake_state_label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    justify-content: center;
    white-space: nowrap;
}
.intake_state_label.scheduled {
    background-color: #FFF6E5;
    color: #B8860B;
}
.intake_state_label.waiting {
    background-color: #ECECEC;
    color: #6E6E73;
}
.intake_state_label.done {
    background-color: #E8F5F3;
    color: #1F8273;
    font-weight: 600;
}

/* 체크박스 활성화 상태 */
.medicine__item .checkbox--typeA input:not(:disabled) + em {
    cursor: pointer;
}

.medicine__item .checkbox--typeA input:not(:disabled) + em:hover {
    border-color: var(--color-sub, #3CBFAE);
}