@charset "UTF-8";
/*  =====================================================================
    accessible.css - 고령자 친화 + 웹접근성(WCAG 2.1 AA) 오버라이드
    마지막에 로드되어 기존 CSS를 오버라이드
    ===================================================================== */

/* ===========================================================
   1. 기본 타이포그래피
   =========================================================== */
body {
  font-size: 1.8rem; /* 18px (기존 1.5rem=15px) */
  line-height: 1.6;
}

/* reset.css의 line-height: 1 오버라이드 */
html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, cite, code, del, em, img, ins, q,
small, strong, sub, sup,
dl, dt, dd, ol, ul, li,
fieldset, form, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, nav, section, summary, time,
mark, audio, video,
button, textarea, input, select {
  line-height: 1.5;
}

/* ===========================================================
   2. 포커스 표시 (WCAG 2.4.7)
   reset.css의 outline: none 오버라이드
   =========================================================== */
*:focus-visible {
  outline: 3px solid #005fcc !important;
  outline-offset: 2px !important;
}

/* 숨겨진 radio/checkbox의 포커스 대응 */
.radio--typeA label:focus-within,
.radio--typeB label:focus-within,
.radio--typeC label:focus-within,
.radio--typeD label:focus-within,
.checkbox--typeA label:focus-within {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  border-radius: 4px;
}

/* 검색 입력 포커스 (sub.css의 outline:none 오버라이드) */
.form_search .search_input input:focus-visible {
  outline: 3px solid #005fcc !important;
  outline-offset: 2px !important;
  box-shadow: none;
}

/* ===========================================================
   3. 색상 대비 수정 (WCAG 1.4.3 - 4.5:1 이상)
   =========================================================== */
:root {
  --color-main-text: #0B5C4C; /* 텍스트용 에메랄드 (6.5:1 vs white) */
  --color-sub-text: #0B5C4C;  /* 활성 네비/링크 텍스트 (6.5:1 vs white) */
}

/* #848487 (3.5:1 FAIL) → #595959 (7:1) */
.info_txt {
  color: #595959;
}
.footer_navigation .navi span.navi_menu {
  color: #595959;
}
.form-control::placeholder {
  color: #595959;
}
.medicine_period {
  color: #595959;
}
.medicine__item .medicine__desc .taking_info p.time {
  color: #595959;
}
.recent-word__item p {
  color: #595959;
}
.home-medicine__list .btn_icon span {
  color: #595959;
}

/* #AEAEB2 (2.7:1 FAIL) → #767676 (4.5:1) */
.medicine_info .medicine_alarm p {
  color: #767676;
}
.medicine__item .medicine__desc .taking_info span.taking_badge {
  background-color: #767676;
}
.btn_batch_complete:disabled,
.btn_batch_complete.completed {
  background-color: #767676;
}

/* #9BC5A5 (2.2:1 FAIL) → #5A8A64 (4.5:1) */
.medicine__item .taking_time li {
  color: #5A8A64;
}

/* #48BDA0 텍스트 (2.5:1 FAIL) → var(--color-main-text) */
.btn_sub {
  color: var(--color-main-text);
}
.complete__header h3 {
  color: var(--color-main-text);
}
.setting__inner > h3 {
  color: var(--color-main-text);
}
.medicine-list__tab ul.tabs .tabs__link.on {
  color: var(--color-main-text);
}

/* 활성 네비 컬러 (--color-sub 직접 사용 → 진하게) */
.footer_navigation .navi.active span.navi_menu {
  color: var(--color-sub-text);
}

/* #9ca3af (2.7:1 FAIL) → #6b7280 (4.6:1) */
.biz-info__title {
  color: #6b7280;
}
.biz-info__label {
  color: #6b7280;
}

/* 차트 범례 */
.medicine-graph__box ul.chart-legend li {
  color: #595959;
}

/* ===========================================================
   4. 헤더 (64px → 80px)
   =========================================================== */
.header {
  height: 80px;
}
.main {
  padding-top: 80px;
}
.header .header_title {
  font-size: 20px;
  font-weight: 700;
}
.header .header_title.modify {
  font-size: 24px;
}
.header .btn_back {
  width: 32px;
  height: 32px;
}
.header .right_btns > *,
.medicine_list_del_btn {
  width: 32px;
  height: 32px;
}
.header .header_logo {
  width: 114px;
  height: 48px;
}
.header .header_logo img,
.header .header_logo picture {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.header .header_logo picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===========================================================
   5. 푸터 내비게이션 (80px → 100px)
   =========================================================== */
.footer {
  height: 100px;
  padding-top: 10px;
}
.footer_navigation {
  height: 56px;
  padding: 0 24px;
}
.footer_navigation .navi .icon {
  width: 32px;
  height: 32px;
}
.footer_navigation .navi span.navi_menu {
  font-size: 14px;
  font-weight: 500;
}
.footer_navigation .navi {
  row-gap: 7px;
  min-width: 48px;
  min-height: 48px;
}
.main {
  min-height: calc(100dvh - 100px);
}

/* 푸터 높이 변경에 따른 padding-bottom 조정 */
.home__inner,
.ddi__inner,
.medicine-home__inner,
.medicine-list__inner,
.medicine-dtl__inner,
.setting__inner {
  padding-bottom: 110px;
}
.history__inner {
  padding: 8px 0 110px;
}
.fixed_btn {
  height: 100px;
}
.fixed_btn.isBottom {
  bottom: 80px;
}
.home__inner__for_search {
  padding-bottom: 160px !important;
}
.medicine-search__inner {
  padding-bottom: 160px;
}

/* ===========================================================
   6. 버튼
   =========================================================== */
.btn {
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  min-height: 48px;
}
.btn-sm {
  height: 52px;
  line-height: 52px;
  font-size: 16px;
  font-weight: 600;
}
.btn-md {
  height: 56px;
  line-height: 56px;
  font-size: 16px;
  font-weight: 600;
}
.btn-lg {
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 12px;
}
.btn-textType {
  font-size: 16px;
}
.modal__btns .btn {
  height: 52px;
  line-height: 52px;
  font-size: 16px;
}

/* ===========================================================
   7. 폼 입력
   =========================================================== */
.form-control {
  height: 56px;
  font-size: 17px;
  padding: 0 18px;
  border-radius: 10px;
}
.form-control::placeholder {
  font-size: 17px;
}
.input--typeA label.input_label {
  font-size: 17px;
  margin-bottom: 8px;
}
.input--typeB label.input_label {
  font-size: 18px;
  margin-bottom: 20px;
}
.select--typeA {
  height: 56px;
  line-height: 56px;
  font-size: 17px;
}
.select--typeA .option {
  height: 48px;
  line-height: 48px;
  font-size: 16px;
}
.select--typeA-noheight {
  height: 48px;
  line-height: 48px;
}

/* ===========================================================
   8. 검색 입력
   =========================================================== */
.form_search .search_input input {
  height: 52px;
  font-size: 17px;
  padding-left: 42px;
  background-size: 28px 28px;
  background-position: center left 10px;
}
.form_search .search_input input#medicineName {
  height: 52px;
  font-size: 17px;
  padding-left: 42px;
  background-size: 28px 28px;
  background-position: center left 10px;
}
.form_search .search_input .btn {
  font-size: 16px;
  padding: 0 20px;
  min-height: 52px;
}
.modal__content .search_input input {
  height: 52px;
  font-size: 17px;
}

/* 자동완성 드롭다운 높이 조정 */
.search_input .suggest-dropdown {
  top: calc(52px + 6px);
}
@media screen and (max-width: 768px) {
  .search_input .suggest-dropdown {
    top: calc(52px + 6px);
  }
}

/* ===========================================================
   9. 라디오/체크박스
   =========================================================== */
/* typeA: 24px → 28px */
.radio--typeA {
  font-size: 17px;
}
.radio--typeA label {
  min-height: 44px;
  padding: 8px 0;
}
.radio--typeA input[type=radio]+em {
  width: 28px;
  height: 28px;
}

/* typeB: 17px → 24px */
.radio--typeB input[type=radio]+em {
  width: 24px;
  height: 24px;
}
.radio--typeB label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: 8px;
}

/* typeC: 22px → 28px */
.radio--typeC {
  font-size: 16px;
}
.radio--typeC label {
  min-height: 44px;
  padding: 8px 0;
}
.radio--typeC input[type=radio]+em {
  width: 28px;
  height: 28px;
}

/* typeD: 40px → 52px */
.radio--typeD input[type=radio]+em {
  height: 52px;
  line-height: 52px;
  font-size: 16px;
}

/* checkbox typeA: 17px → 24px */
.checkbox--typeA input[type=checkbox]+em {
  width: 24px;
  height: 24px;
}
.checkbox--typeA label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: 8px;
}
.checkbox--typeA.bookmark input[type=checkbox]+em {
  width: 28px;
  height: 28px;
}

/* ===========================================================
   10. 약 카드 (메인 홈)
   =========================================================== */
.medicine__list .medicine__item {
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 16px;
}
.medicine__item .medicine__desc {
  gap: 12px;
  margin-top: 16px;
}
.medicine__item .medicine__desc .thum {
  width: 120px;
  height: 92px;
}
.medicine__item .medicine__desc .medicine_info p {
  font-size: 16px;
  line-height: 1.5;
}
.medicine__item .taking_time li {
  font-size: 14px;
  min-width: 32px;
}
.medicine__item .medicine__desc .taking_info p.time {
  font-size: 13px;
}
.medicine__item .medicine__desc .taking_info span.taking_badge {
  font-size: 15px;
  height: 28px;
  line-height: 28px;
  padding: 0 10px;
}
.medicine__item .medicine__desc .taking_info span.taking_badge.not-taken {
  font-size: 13px;
  padding: 3px 8px;
}
.medicine_period {
  font-size: 14px;
}

/* ===========================================================
   11. 약 등록 태그 (홈)
   =========================================================== */
.home-medicine__list {
  gap: 12px;
}
.home-medicine__list .reg_medicine {
  height: 48px;
  padding: 0 16px;
}
.home-medicine__list .reg_medicine p {
  font-size: 17px;
}
.home-medicine__list .reg_medicine p span.capacity {
  font-size: 15px;
}
.home-medicine__list .reg_medicine .btn_delete {
  width: 28px;
  height: 28px;
}
.home-medicine__list .btn_icon {
  height: 48px;
  padding: 0 16px;
}
.home-medicine__list .btn_icon span {
  font-size: 16px;
}

/* ===========================================================
   12. 모달
   =========================================================== */
.modal__close {
  width: 28px;
  height: 28px;
  right: 18px;
  top: 18px;
}
.modal__close .btn_modal_close {
  min-width: 44px;
  min-height: 44px;
  margin: -8px;
}
.modal__header h3 {
  font-size: 20px;
}
.modal__header p {
  font-size: 16px;
  line-height: 1.5;
}
.modal__inner {
  max-width: 340px;
}

/* 바텀 모달 */
.modal_bottom_register .modal__header h3 {
  font-size: 19px;
}
.modal_bottom_register .register_medicine .btn_icon span {
  font-size: 17px;
}

/* ===========================================================
   13. 섹션 제목/라벨
   =========================================================== */
.taking__medicine > div > h5,
.taking__medicine > h5,
.home__notice > h5 {
  font-size: 18px;
}
.info_txt {
  font-size: 16px;
  line-height: 1.5;
}
.recent__search h5 {
  font-size: 16px;
}
.recent-word__item p {
  font-size: 17px;
}
.recent-word__item .btn_delete {
  width: 28px;
  height: 28px;
}
.search__result .result__item .result_info h5 {
  font-size: 17px;
}
.search__result .result__item .result_info p {
  font-size: 14px;
}
.search__result .result__item .thum {
  width: 110px;
  min-width: 110px;
  height: 62px;
}
.home__notice .notice__box p {
  font-size: 16px;
}
.sns__login h5 {
  font-size: 17px;
}
.login__link li a {
  font-size: 17px;
}

/* ===========================================================
   14. 복용이력/캘린더
   =========================================================== */
.history_calendar .today h5 {
  font-size: 19px;
}
.history_calendar .today p {
  font-size: 19px;
}
.calendar__week .calendar_date h3.day {
  font-size: 17px;
}
.calendar__week .calendar_date p {
  font-size: 14px;
}
.calendar__week .calendar_date {
  width: 40px;
  padding: 12px 0;
}
.time_slot_title {
  font-size: 18px;
}
.btn_batch_complete {
  font-size: 15px;
  padding: 10px 18px;
  min-height: 44px;
}

/* ===========================================================
   15. DDI (약물 상호작용)
   =========================================================== */
.ddi_info p {
  font-size: 15px;
}
.interaction__item > h3 {
  font-size: 18px;
}
.interaction_rotate p {
  font-size: 17px;
}
.interaction_info h4 {
  font-size: 19px;
}
.interaction_info h5.sub_tit {
  font-size: 17px;
}
.interaction_info span,
.interaction_info p {
  font-size: 15px;
  line-height: 1.5;
}
.interaction_info .btn_more span {
  font-size: 15px;
}
.medicine-info__box > h3 {
  font-size: 19px;
}
.medicine-info__box > span {
  font-size: 16px;
}
.medicine-info__box .info_box {
  font-size: 15px;
}
.medicine-info__box .info_box h4 {
  font-size: 17px;
}
.medicine-info__box .info_box ul li {
  font-size: 15px;
}
.medicine-graph__box > h3 {
  font-size: 18px;
}

/* ===========================================================
   16. 설정/계정 페이지
   =========================================================== */
.setting__inner > h3 {
  font-size: 22px;
}
.medicine-list__inner .list_title h3 {
  font-size: 20px;
}
.medicine-list__inner .list_title p {
  font-size: 16px;
}
.medicine-dtl__info > h3 {
  font-size: 20px;
}
.find-info__inner > h3 {
  font-size: 20px;
}
ul.member_info li span.info-tit {
  font-size: 16px;
}
ul.member_info li b.info-cnts {
  font-size: 16px;
}
.info-tit-for-label {
  font-size: 17px;
}
.medicine_info li span.info_tit {
  font-size: 16px;
}
.medicine_info li .info_cnts {
  font-size: 16px;
}
.access__item .access__info h5 {
  font-size: 16px;
}
.access__item .access__info p {
  font-size: 15px;
}
.access__list .access__item .icon {
  width: 48px;
  height: 48px;
}

/* 약 상세 */
.medicine-dtl__image h5 {
  font-size: 17px;
}
.medicine-dtl__description .description h5 {
  font-size: 17px;
}
.medicine-dtl__description .description p {
  font-size: 16px;
}
.medicine-dtl__description .description ul.list--number li {
  font-size: 16px;
}
.side-effect__box .desc h5.med_name {
  font-size: 17px;
}
.side-effect__box .desc .med_use {
  font-size: 15px;
}
.side-effect__box .desc span.notice,
.side-effect__box .desc p.notice {
  font-size: 15px;
}

/* 로그인 로고 */
.login_logo {
  width: 150px;
  height: 150px;
}
.login_logo picture {
  width: 100%;
  height: 100%;
}
.login_logo picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 로그인 폼 */
.login__inner .input--typeA {
  margin-bottom: 18px;
}

/* 회원정보 찾기 */
.find_id_result p {
  font-size: 16px;
}

/* 약 등록 버튼 */
.register_medicine .btn_icon {
  height: 52px;
  font-size: 16px;
}

/* 약 관리 탭 */
.medicine-list__tab ul.tabs .tabs__link {
  height: 48px;
  line-height: 48px;
  font-size: 17px;
}

/* ===========================================================
   17. 숫자 컨트롤/시간 선택
   =========================================================== */
.number-control__box {
  height: 52px;
  padding: 0 22px;
}
.number-control__box button {
  width: 32px;
  height: 32px;
}
.number-control__box input {
  width: 36px;
  font-size: 17px;
}
.number-control__wrap span {
  font-size: 16px;
}
.setting_time span {
  font-size: 16px;
}
.setting_time .btn_change_time {
  height: 52px;
  line-height: 52px;
  font-size: 17px;
}
.datepicker_box .datepicker {
  height: 48px;
  font-size: 16px;
}
.datepicker {
  font-size: 17px;
}
.modal_setting_time .timepicker {
  height: 48px;
  font-size: 17px;
}

/* ===========================================================
   18. 툴팁
   =========================================================== */
.tooltip-icon {
  width: 24px;
  height: 24px;
  font-size: 16px;
}
.tooltip-content {
  font-size: 14px;
}

/* ===========================================================
   19. 자동완성 드롭다운
   =========================================================== */
.suggest-dropdown .suggest-item {
  padding: 14px 16px;
  font-size: 16px;
  min-height: 48px;
}
.suggest-dropdown .suggest-item .tag {
  font-size: 14px;
}

/* ===========================================================
   20. 사업자 정보 푸터
   =========================================================== */
.biz-info {
  font-size: 14px;
}
.biz-info__title {
  font-size: 14px;
}

/* ===========================================================
   21. 유틸리티 클래스 오버라이드
   =========================================================== */
.fz14 { font-size: 16px; }
.fz18 { font-size: 20px; }

/* ===========================================================
   22. 범례/소형 텍스트
   =========================================================== */
.drug-legend-item {
  font-size: 14px;
}
.medicine_list_btn_area p {
  font-size: 14px;
}

/* 노데이터 메시지 */
.medicine-graph__box .no_data,
.medicine-home__inner .no_data {
  font-size: 17px;
}

/* 상세 정보 출처 */
.detailInfoSourceArea p {
  font-size: 16px;
}

/* 패스 정보 (DDI 경로) */
.medicine-graph__box.one_path .path_info p {
  font-size: 14px;
}
.medicine-graph__box.one_path .path_info p.fw700 {
  font-size: 15px;
}
.medicine-graph__box.chain_path .path_info p {
  font-size: 14px;
}

/* DDI 상세 버튼 */
.btn_ddi_details .btn span {
  line-height: 52px;
  font-size: 16px;
}

/* ===========================================================
   소형 화면 대응 (370px 이하)
   =========================================================== */
@media screen and (max-width: 370px) {
  .medicine__item .medicine__desc .thum {
    width: 100px !important;
    height: 82px !important;
  }
  .medicine__item .medicine__desc .medicine_info {
    max-width: 42% !important;
  }
  /* 약간 작은 폰트로 조정하되 최소 14px 유지 */
  .medicine__item .medicine__desc .medicine_info p {
    font-size: 15px;
  }
}