@charset "UTF-8"; /* ===================================================================== senior.css — 제이온 "시니어 퍼스트" UI 레이어 --------------------------------------------------------------------- ▸ 목적: rafago와 동일했던 레이아웃 골격(고정 로고바 + 알약형 하단탭 + 작은 카드)을 노인 사용자에 맞춰 "완전히 다른 앱"으로 재설계. ▸ 원칙: 큼직한 터치영역 / 큰 글자 / 고대비 / 아이콘+글자 병기 / 여백. ▸ 안전한 점진 전환: 모든 규칙을 `body.ui-senior` 스코프에 둔다. → 아직 변환하지 않은 화면(ui-senior 미부여)에는 전혀 영향 없음. 화면을 하나씩 변환할 때 해당 페이지 에 class="ui-senior" (+페이지 식별 클래스)를 추가하면 이 레이어가 활성화된다. ▸ 로드 순서: head.php에서 가장 마지막에 로드 → 동일 특이성 규칙 우선. ===================================================================== */ /* ============================ 0) 토큰 ============================ */ /* 기존 브랜드 컬러(에메랄드+골드)는 유지하되 크기/형태/톤을 재정의. 커스텀 프로퍼티를 body.ui-senior에 선언 → 하위 전체로 상속. */ body.ui-senior { --sr-bg: #F1EFE7; /* 따뜻한 아이보리 (rafago 쿨 화이트와 차별) */ --sr-surface: #FFFFFF; /* 카드 */ --sr-ink: #17211D; /* 제목/본문 진하게 (고대비) */ --sr-ink-2: #43524B; /* 보조 텍스트 */ --sr-ink-3: #55625A; /* 약한 텍스트 (아이보리/화이트 위 AA 4.5:1+ 확보) */ --sr-line: #E4DFD2; /* 웜 경계선 */ --sr-main: var(--color-main); /* #0E7C66 에메랄드 */ --sr-main-2: var(--color-sub); /* #14B8A6 */ --sr-main-soft: rgba(14,124,102,.10); --sr-main-tint: rgba(14,124,102,.06); --sr-gold: var(--color-gold); /* #B68D40 */ --sr-gold-soft: #F3EAD7; --sr-warn-bg: #FBF3E2; /* 주의 칩 배경 (앰버) */ --sr-warn-fg: #7A5A1C; /* 주의 칩 글자 (대비 여유 확보) */ --sr-radius: 22px; /* 카드 */ --sr-radius-sm: 16px; /* 버튼/인풋 */ --sr-radius-pill: 999px; --sr-shadow: 0 8px 26px rgba(20,50,40,.08); --sr-shadow-sm: 0 3px 12px rgba(20,50,40,.05); --sr-grad: linear-gradient(135deg, #0E7C66 0%, #14B8A6 100%); --sr-tap: 58px; /* 주요 버튼/터치 최소 높이 */ --sr-ease: cubic-bezier(.22,.61,.36,1); font-size: 17px; /* 기준 글자 크게 */ background: var(--sr-bg); color: var(--sr-ink); -webkit-font-smoothing: antialiased; } /* 모바일 프레임: 따뜻한 배경으로 채워 rafago의 흰 프레임과 차별 */ body.ui-senior .mobile_wrap { background: var(--sr-bg); box-shadow: none; } /* ====================== 1) 인사말 헤더 (스크롤형) ====================== */ /* rafago/기존: 상단 64px 고정 로고바. → 시니어: 스크롤되는 큰 인사말 영역. */ body.ui-senior .sr-greet { padding: 26px 20px 6px; } body.ui-senior .sr-greet__brand { font-size: 15px; font-weight: 800; letter-spacing: .06em; color: var(--sr-main); margin-bottom: 10px; } body.ui-senior .sr-greet__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } body.ui-senior .sr-greet__hello { display: block; font-size: 16px; font-weight: 500; color: var(--sr-ink-2); margin-bottom: 4px; } body.ui-senior .sr-greet__name { font-size: 27px; font-weight: 800; line-height: 1.25; color: var(--sr-ink); letter-spacing: -.01em; } /* 아이콘만이면 노인이 인지 어려움 → 아이콘+글자 병기 알약 버튼 */ body.ui-senior .sr-greet__me { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; height: 46px; padding: 0 16px 0 13px; border-radius: var(--sr-radius-pill); background: var(--sr-surface); border: 1px solid var(--sr-line); box-shadow: var(--sr-shadow-sm); font-size: 15px; font-weight: 700; color: var(--sr-ink-2); white-space: nowrap; } body.ui-senior .sr-greet__me-ic { width: 23px; height: 23px; background: url(../_img/icon/icon_navi_04.svg) no-repeat center / contain; } /* ====================== 2) 홈 본문 레이아웃 ====================== */ /* 고정헤더 padding-top 제거(홈은 스크롤 헤더 사용) + 하단 도크 여백 확보 */ body.ui-senior.page-home .main { padding-top: 0; padding-left: 20px; padding-right: 20px; } body.ui-senior .sr-home { padding-top: 16px; padding-bottom: 132px; /* 큰 하단 도크(≈92px) + 여유 */ } body.ui-senior .sr-home > section { margin-top: 30px; } body.ui-senior .sr-home > .banner-slot { margin-bottom: 4px; } body.ui-senior .sr-home > .banner-slot:empty { margin: 0; } /* 섹션 타이틀 — 골드 세로바(rafago 패턴) 제거, 큼직한 좌측정렬 헤딩으로 대체 */ body.ui-senior .sr-sec-title { font-size: 20px; font-weight: 800; color: var(--sr-ink); letter-spacing: -.01em; margin-bottom: 14px; padding-left: 0; } body.ui-senior .sr-sec-title::before { display: none !important; } body.ui-senior .sr-sec-title .sr-sec-title__sub { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--sr-ink-3); } /* ====================== 3) 버튼 (큼직 / 아이콘+글자) ====================== */ body.ui-senior .sr-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: var(--sr-tap); padding: 0 20px; border-radius: var(--sr-radius-sm); font-size: 18px; font-weight: 700; line-height: 1.2; text-align: center; transition: transform .12s var(--sr-ease), box-shadow .2s var(--sr-ease), background-color .2s var(--sr-ease); -webkit-tap-highlight-color: transparent; } body.ui-senior .sr-btn:active:not(:disabled) { transform: scale(.985); } body.ui-senior .sr-btn--lg { min-height: 66px; font-size: 19px; } /* 주요(에메랄드 그라데이션) */ body.ui-senior .sr-btn--primary { background: var(--sr-grad); color: #fff; box-shadow: 0 10px 22px rgba(14,124,102,.26); } body.ui-senior .sr-btn--primary:disabled { background: #C2CDC7; color: #47534D; /* 비활성이어도 라벨은 읽히도록 */ box-shadow: none; } /* 보조(외곽선) */ body.ui-senior .sr-btn--ghost { background: var(--sr-surface); color: var(--sr-main); border: 2px solid var(--sr-main); } body.ui-senior .sr-btn--ghost:active:not(:disabled) { background: var(--sr-main-soft); } /* 버튼 내부 아이콘 (배경 이미지 방식) */ body.ui-senior .sr-btn__ic { width: 26px; height: 26px; flex-shrink: 0; background-repeat: no-repeat; background-position: center; background-size: contain; } body.ui-senior .sr-btn__ic--add { background-image: url(../_img/icon/icon_add_white.svg); } body.ui-senior .sr-btn__ic--manage { background-image: url(../_img/icon/icon_manage.svg); } /* 복용 관리 액션 묶음 */ body.ui-senior .sr-manage__btns { display: flex; flex-direction: column; gap: 12px; } /* ====================== 4) 약품 검색 카드 ====================== */ body.ui-senior .sr-search { background: var(--sr-surface); border: 1px solid var(--sr-line); border-radius: var(--sr-radius); box-shadow: var(--sr-shadow-sm); padding: 20px 18px; } body.ui-senior .sr-search .sr-sec-title { margin-bottom: 8px; } body.ui-senior .sr-search .form_search { margin-bottom: 0; } body.ui-senior .sr-search__field { margin-top: 14px; } body.ui-senior .sr-search__label { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 700; color: var(--sr-ink-2); } /* 기존 .form_search .search_input input 을 크게 재정의 */ body.ui-senior .sr-search .search_input { display: block; } body.ui-senior .sr-search .search_input input { width: 100%; height: 56px; border: 1.5px solid var(--sr-line); border-radius: var(--sr-radius-sm); background: #F9F8F4 url(../_img/icon/icon_search.svg) no-repeat left 14px center / 24px 24px; padding: 0 14px 0 46px; font-size: 17px; color: var(--sr-ink); } body.ui-senior .sr-search .search_input input:focus { border-color: var(--sr-main); background-color: #fff; box-shadow: 0 0 0 3px var(--sr-main-soft); } body.ui-senior .sr-search #go_to_detail_btn { margin-top: 18px; } /* 자동완성 드롭다운(SuggestBox) — 라벨이 위로 올라간 새 레이아웃에 맞춰 재배치. SuggestBox가 인라인 style(left:28%; top:42px)로 붙으므로 !important로 교정. */ body.ui-senior .sr-search .search_input { position: relative; } body.ui-senior .sr-search .suggest-dropdown { left: 0 !important; right: 0 !important; top: calc(100% + 6px) !important; border-radius: 14px !important; border-color: var(--sr-line) !important; box-shadow: var(--sr-shadow) !important; } body.ui-senior .sr-search .suggest-item { padding: 13px 16px !important; } body.ui-senior .sr-search .suggest-item span { font-size: 16px; } /* ====================== 5) 복용 중인 약품 (리스트 헤더) ====================== */ body.ui-senior .sr-taking__head { margin-bottom: 14px; } body.ui-senior .sr-taking__head .sr-sec-title { margin-bottom: 12px; } body.ui-senior .sr-taking__tools { display: flex; align-items: center; justify-content: space-between; /* 필터(좌) · 전체선택(우) 한 줄 정돈 */ gap: 14px; } /* 시간대 필터 select */ body.ui-senior .sr-taking__tools .sr-select { height: 44px; min-width: 92px; padding: 0 12px; border: 1.5px solid var(--sr-line); border-radius: 12px; background: #fff; font-size: 15px; font-weight: 600; color: var(--sr-ink-2); } /* 전체선택 — 큰 체크박스 + 글자 */ body.ui-senior .sr-checkall .checkbox--typeA label { display: flex; align-items: center; gap: 8px; min-height: 44px; } body.ui-senior .sr-checkall .checkbox--typeA input[type=checkbox] + em { width: 26px; height: 26px; } body.ui-senior .sr-checkall__txt { font-size: 15px; font-weight: 600; color: var(--sr-ink-2); white-space: nowrap; } /* ====================== 6) 약품 카드 (.medicine__item 재스타일) ====================== */ /* JS가 생성하는 마크업이라 클래스명은 유지하고 CSS만 교체한다. */ body.ui-senior .medicine__list .medicine__item { background: var(--sr-surface); border: 1.5px solid var(--sr-line); border-radius: var(--sr-radius); box-shadow: var(--sr-shadow-sm); padding: 16px 16px 18px; margin-bottom: 14px; } /* 선택(비교 대상) 상태 — 명확한 에메랄드 강조 */ body.ui-senior .medicine__list .medicine__item.active { border-color: var(--sr-main); background: var(--sr-main-tint); box-shadow: 0 0 0 2px var(--sr-main-soft), var(--sr-shadow-sm); } /* 체크박스: 카드 우상단, 터치영역 크게 */ body.ui-senior .medicine__item .taking_checkbox { top: 14px; right: 14px; } body.ui-senior .medicine__item .taking_checkbox label { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -9px; /* 시각 크기는 유지, 탭 영역만 확장 */ padding: 9px; } body.ui-senior .medicine__item .taking_checkbox .checkbox--typeA input[type=checkbox] + em, body.ui-senior .medicine__item .taking_checkbox .checkbox--typeA.bookmark input[type=checkbox] + em { width: 28px; height: 28px; } /* 복용 시간대: 밑줄 → 알약형 칩 (rafago와 확실히 다른 표현) */ body.ui-senior .medicine__item .taking_time { display: flex; flex-wrap: wrap; gap: 6px; padding-right: 44px; /* 우상단 체크박스와 겹침 방지 */ } body.ui-senior .medicine__item .taking_time li { min-width: 0; padding: 6px 12px; border: 1px solid transparent; /* 색 외 형태로도 구분(색각 대응) */ border-radius: var(--sr-radius-pill); background: #ECEAE1; color: #5C6660; /* 비활성 대비 AA(≈4.9:1) */ font-size: 14px; font-weight: 600; } body.ui-senior .medicine__item .taking_time li.active { background: var(--sr-main-soft); color: var(--sr-main); border: 1px solid rgba(14,124,102,.28); /* 활성은 테두리로도 구분 */ font-weight: 800; } /* 본문(썸네일 + 정보 + 배지) */ body.ui-senior .medicine__item .medicine__desc { margin-top: 16px; gap: 14px; align-items: flex-start; } body.ui-senior .medicine__item .medicine__desc .thum { width: 92px; height: 92px; border-radius: 16px; } body.ui-senior .medicine__item .medicine__desc .medicine_info { padding-top: 2px; } body.ui-senior .medicine__item .medicine__desc .medicine_info p.medicine_name { font-size: 18px; font-weight: 800; line-height: 1.35; color: var(--sr-ink); margin-bottom: 4px; } body.ui-senior .medicine__item .medicine__desc .medicine_info .medicine_period { font-size: 14px; color: var(--sr-ink-3); } body.ui-senior .medicine__item .medicine__desc .medicine_info p.temp_medicine_class { font-size: 14px; font-weight: 500; color: var(--sr-ink-2); margin-top: 4px; } /* 안전정보 칩(연령/용량/기간/노인/임부 주의) — 탭 가능한 앰버 칩 */ body.ui-senior .medicine__item .medicine_info > div { gap: 6px !important; margin-top: 8px; } body.ui-senior .medicine__item .medicine_info p.side-effect { padding: 6px 11px; border-radius: 10px; background: var(--sr-warn-bg); border: 1px solid #EAD9B4; color: var(--sr-warn-fg) !important; font-size: 14px; font-weight: 700; line-height: 1.2; } /* 복용중 배지 */ body.ui-senior .medicine__item .medicine__desc .taking_info span.taking_badge { height: 32px; line-height: 32px; padding: 0 13px; border-radius: 10px; font-size: 14px; font-weight: 700; background-color: #E4E8E5; color: #45514B; /* 기본(미복용) 배지: 어두운 글자로 판독 보장 */ } body.ui-senior .medicine__item .medicine__desc .taking_info span.taking_badge.complete { background: var(--sr-grad); color: #fff; } body.ui-senior .medicine__item .medicine__desc .taking_info .btn_edit_intake { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 10px; padding: 0 18px; font-size: 15px; font-weight: 700; border: 1.5px solid var(--sr-main); border-radius: 12px; } /* 빈 상태(등록 유도) — noDataTag 렌더 결과가 커도 대응 */ body.ui-senior .medicine__list .no_data { padding: 26px 16px; font-size: 17px; color: var(--sr-ink-2); } /* 더보기 버튼 */ body.ui-senior .btn_more_medicine { margin-top: 4px; } body.ui-senior .btn_more_medicine .btn { height: 54px; line-height: 54px; border-radius: var(--sr-radius-sm); border: 1.5px solid var(--sr-line); background: var(--sr-surface); box-shadow: none; } body.ui-senior .btn_more_medicine .btn_more span { font-size: 16px; font-weight: 700; color: var(--sr-ink-2); } /* ====================== 7) 선택 약품 상호작용(비교) ====================== */ body.ui-senior .home-medicine__list .reg_medicine { height: 46px; border-radius: var(--sr-radius-pill); background: var(--sr-main-soft); padding: 0 8px 0 16px; gap: 8px; } body.ui-senior .home-medicine__list .reg_medicine p { font-size: 16px; font-weight: 700; color: var(--sr-main); } body.ui-senior .home-medicine__list .reg_medicine .btn_delete { width: 44px; height: 44px; /* 히트영역 44px (아이콘은 background-size로 유지) */ background-size: 22px 22px; margin-right: -6px; } body.ui-senior .home-medicine__list .reset-btn { height: 46px; border-radius: var(--sr-radius-pill); background: #EAE6DA; } body.ui-senior .home-medicine__list .reset-btn p { font-size: 15px; font-weight: 700; color: var(--sr-ink-2); } body.ui-senior .sr-compare .findout_ddi { margin-top: 14px; } body.ui-senior .sr-compare .ddi-hint { font-size: 14px; margin-bottom: 12px; } /* ====================== 8) 오늘 참고사항(공지) ====================== */ body.ui-senior .home__notice .notice__box { background: var(--sr-gold-soft); border-radius: var(--sr-radius); padding: 16px 16px 16px 18px; min-height: 56px; } body.ui-senior .home__notice .notice__box p { padding-left: 34px; font-size: 16px; font-weight: 600; line-height: 1.55; color: #6A5320; } body.ui-senior .home__notice .notice__box p::before { width: 26px; height: 26px; top: -1px; } body.ui-senior .home__notice .notice__box p:empty { padding-left: 0; } body.ui-senior .home__notice .notice__box p:empty::before { display: none; } /* 공지 캐러셀 컨트롤(홈 인라인 style 기반) — 터치영역 이미 44px, 톤만 맞춤 */ body.ui-senior .notice__nav-btn, body.ui-senior .notice__toggle { background: #fff; border-color: var(--sr-line); color: var(--sr-main); } /* ====================== 9) 의료 면책 고지 ====================== */ body.ui-senior .medi-disclaimer { font-size: 14px !important; line-height: 1.6 !important; color: var(--sr-ink-2) !important; background: #F4F2EB !important; border-color: var(--sr-line) !important; border-radius: 14px !important; padding: 14px 14px !important; margin-top: 22px !important; } /* ====================== 10) 하단 도크 (네비게이션) ====================== */ /* footer.php 마크업(a.navi[data-menu] × 4)은 그대로 두고 CSS만 교체. → footer.js(활성 클래스 토글)와 전 탭 페이지 동작 보존. 기존 "얇은 상단 인디케이터 바" → "선택 항목 전체가 알약형으로 채워지는" 큰 도크. */ body.ui-senior .footer { height: auto; min-height: 84px; border-top: 0; border-radius: 24px 24px 0 0; padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--sr-surface); box-shadow: 0 -6px 24px rgba(20,50,40,.08); } body.ui-senior .footer_navigation { height: auto; padding: 0 6px; gap: 4px; } body.ui-senior .footer_navigation .navi { row-gap: 6px; padding: 10px 4px; border-radius: 18px; min-height: 62px; transition: background-color .2s var(--sr-ease); } /* 기존 상단 인디케이터 바 제거 */ body.ui-senior .footer_navigation .navi.active::before { display: none; } /* 선택 항목: 전체 셀이 소프트 에메랄드로 채워지는 큰 탭 */ body.ui-senior .footer_navigation .navi.active { background: var(--sr-main-soft); } body.ui-senior .footer_navigation .navi .icon { width: 28px; height: 28px; } body.ui-senior .footer_navigation .navi span.navi_menu { font-size: 13px; font-weight: 600; color: var(--sr-ink-3); letter-spacing: -.03em; line-height: 1.2; text-align: center; } body.ui-senior .footer_navigation .navi.active span.navi_menu { color: var(--sr-main); font-weight: 800; } body.ui-senior .footer_navigation .navi.active .icon { filter: none; } /* ====================== 11) 약품 카드 정돈 (이해 흐름 개선) ====================== 기존 카드는 [시간칩] → [사진+이름+배지] 순서라 '언제'가 먼저 오고 이름이 배지에 밀려 여러 줄로 쪼개졌다. → [사진+약품명]을 먼저, [복용 시간 칩]을 아래로 재배치. JS 생성 마크업(순서 고정)이라 flex order로 시각 순서만 바꾼다. */ body.ui-senior .medicine__list .medicine__item { display: flex; flex-direction: column; } body.ui-senior .medicine__item .medicine__desc { order: 1; margin-top: 0; padding-right: 34px; /* 우상단 선택 체크박스와 겹침 방지 */ } /* 약품명이 주인공 → 썸네일을 조금 줄여 이름 폭 확보(줄바꿈 감소). sub.css의 @media(max-width:370px)가 !important로 thumb 100px·info 42%를 강제하므로 더 높은 특이성 + !important로 무력화(작은 폰에서도 이름 폭 정상 확보). */ body.ui-senior .medicine__item .medicine__desc .thum { width: 76px !important; height: 76px !important; } body.ui-senior .medicine__item .medicine__desc .medicine_info { max-width: none !important; } /* 한글 약품명은 단어 단위로 줄바꿈(중간 '소/프트캡슐' 끊김 방지) */ body.ui-senior .medicine__item .medicine_info p.medicine_name { word-break: keep-all; overflow-wrap: anywhere; } body.ui-senior .medicine__item .taking_time { order: 2; margin-top: 14px; padding-right: 0; } /* 실제 복용하는 시간대만 노출 → 회색 비활성 칩 제거로 간결·정렬 정돈 */ body.ui-senior .medicine__item .taking_time li:not(.active) { display: none; } /* 홈 리스트는 전부 '복용중'이라 배지가 중복 정보 → 숨겨 약품명 공간 확보 */ body.ui-senior.page-home .medicine__item .taking_info { display: none; } /* 안전정보(주의) 칩이 140px 인라인 제한에 갇히지 않도록 정보 폭 전체 사용 */ body.ui-senior .medicine__item .medicine_info > div { max-width: none !important; } /* ====================== 12) 복약관리(history) ====================== 상단 타이틀 헤더 + 에메랄드 캘린더 + 시간대별 복약 리스트를 시니어 언어로. */ /* 페이지 타이틀 헤더 — 기존 고정 타이틀바를 스크롤형 큰 제목으로(home 톤과 통일) */ body.ui-senior .header { position: static; height: auto; background: transparent; box-shadow: none; padding: 24px 20px 6px; } body.ui-senior .header__inner { justify-content: flex-start; padding: 0; height: auto; } body.ui-senior .header .header_title, body.ui-senior .header .header_title.modify { font-size: 24px; font-weight: 800; color: var(--sr-ink); } /* 헤더가 고정이 아니므로 본문 상단 여백 제거 + 좌우 여백 통일 */ body.ui-senior .main { padding-top: 0; padding-left: 20px; padding-right: 20px; } /* 에메랄드 캘린더 카드 */ body.ui-senior .history_calendar { border-radius: 24px; padding: 20px 18px; margin-bottom: 20px; box-shadow: 0 10px 26px rgba(14,124,102,.20); } body.ui-senior .history_calendar .today { margin-bottom: 16px; } body.ui-senior .history_calendar .today h5 { font-size: 16px; } /* 년/월 표시 = 탭하면 월 선택(▾ 어포던스) */ body.ui-senior .history_calendar #today_target { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 24px; font-weight: 800; color: #fff; line-height: 1.15; } body.ui-senior .history_calendar #today_target::after { content: '▾'; font-size: 18px; opacity: .95; } /* 주간 날짜 셀 — 큼직 + 선택일 명확히 */ body.ui-senior .calendarSwiper .calendar__week { gap: 7px; height: auto; padding: 6px 0; } body.ui-senior .calendar__week .calendar_date { padding: 9px 0; row-gap: 4px; border-radius: 14px; background: rgba(255,255,255,.14); } body.ui-senior .calendar__week .calendar_date h3.day { font-size: 18px; font-weight: 700; } body.ui-senior .calendar__week .calendar_date p { font-size: 12px; opacity: .92; } body.ui-senior .calendar__week .calendar_date.today { background: #fff; outline: none; } body.ui-senior .calendar__week .calendar_date.today h3.day, body.ui-senior .calendar__week .calendar_date.today p { color: var(--sr-main); } body.ui-senior .calendar_date .status-mark { font-size: 12px; top: 3px; right: 3px; } body.ui-senior .calendarSwiper .swiper-button-prev, body.ui-senior .calendarSwiper .swiper-button-next { width: 26px; height: 26px; } /* 범례(인라인 style 기반) — 살짝 키움 */ body.ui-senior .history_calendar .calendar_legend { font-size: 13px !important; gap: 8px 16px !important; margin-top: 14px !important; } /* 시간대별 섹션 헤더 */ body.ui-senior .time_slot_section { margin-bottom: 26px; } body.ui-senior .time_slot_header { padding: 6px 0 12px; border-bottom: 2px solid var(--sr-line); margin-bottom: 14px; } body.ui-senior .time_slot_title { font-size: 19px; font-weight: 800; color: var(--sr-ink); } /* 일괄 복용완료 — 큰 그라데이션 버튼 */ body.ui-senior .btn_batch_complete { min-height: 44px; padding: 0 18px; border-radius: 12px; font-size: 15px; font-weight: 700; background: var(--sr-grad); box-shadow: 0 6px 16px rgba(14,124,102,.22); } body.ui-senior .btn_batch_complete:disabled, body.ui-senior .btn_batch_complete.completed { background: #C2CDC7 !important; color: #F2F5F3; box-shadow: none; } /* history 카드: 체크박스가 없으므로 홈의 우측 여백(체크박스 회피) 불필요 */ body.ui-senior.page-history .medicine__item .medicine__desc { padding-right: 0; } /* 섭취기간·분류 텍스트 키움 */ body.ui-senior .medicine__item .medicine_info p.medicine_period { font-size: 14px; margin: 6px 0 8px; } body.ui-senior .medicine__item .medicine_info p.medicine_period .period_dates { font-size: 14px; color: var(--sr-ink); } body.ui-senior .medicine__item .medicine_info p.medicine_period .dday { font-size: 12px; padding: 2px 9px; } body.ui-senior .medicine__item .medicine_info p.product_type { font-size: 14px; color: var(--sr-ink-2); margin-bottom: 8px; } body.ui-senior .medicine__item .medicine_info .warnings_row { gap: 6px; margin-bottom: 10px; } /* 섭취 상태/액션 — 큰 전폭 버튼 (이 화면의 핵심 동작) */ body.ui-senior .medicine__item .medicine_info .intake_status_row { justify-content: stretch; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sr-line); } body.ui-senior .intake_action_btn { flex: 1; min-height: 48px; border-radius: 14px; border: 2px solid var(--sr-main); font-size: 16px; font-weight: 700; } body.ui-senior .intake_action_btn.completed { background: var(--sr-grad); border-color: transparent; } body.ui-senior .intake_state_label { flex: 1; min-height: 44px; border-radius: 14px; font-size: 15px; font-weight: 700; } /* ====================== 13) 아이콘·상호작용 카드·도크 정돈 ====================== */ /* 섹션 제목 + 아이콘 병기 */ body.ui-senior .sr-sec-title { display: flex; align-items: center; gap: 8px; } body.ui-senior .sr-sec-ic { width: 22px; height: 22px; flex-shrink: 0; color: var(--sr-main); } /* 버튼 내부 인라인 아이콘(색은 버튼 글자색 상속) */ body.ui-senior .sr-btn-ic { width: 24px; height: 24px; flex-shrink: 0; } /* 선택 약품 상호작용 — 민트 안내 카드 + CTA */ body.ui-senior .sr-compare #select_medicine_list_target { display: none; } /* 선택칩 숨김(카드로 대체, DOM은 JS용 유지) */ body.ui-senior .sr-ddi-card { display: flex; align-items: stretch; gap: 12px; background: var(--sr-main-soft); border: 1px solid rgba(14,124,102,.16); border-radius: var(--sr-radius); padding: 14px; } body.ui-senior .sr-ddi-card__lead { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } body.ui-senior .sr-ddi-card__ic { width: 30px; height: 30px; flex-shrink: 0; color: var(--sr-main); } body.ui-senior .sr-ddi-card__txt { font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--color-typo); } body.ui-senior .sr-ddi-card__cta { display: flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; max-width: 52%; padding: 12px 14px; border-radius: 14px; background: var(--sr-grad); color: #fff; font-size: 14px; font-weight: 800; line-height: 1.25; text-align: center; transition: transform .12s var(--sr-ease); } body.ui-senior .sr-ddi-card__cta:active:not(:disabled) { transform: scale(.98); } body.ui-senior .sr-ddi-card__cta:disabled { background: #B7C4BE; color: #eef2f0; } body.ui-senior .sr-ddi-card__chev { width: 18px; height: 18px; flex-shrink: 0; } body.ui-senior .sr-compare .ddi-hint { margin-top: 10px; } /* 의료 면책 고지 — 정보(ⓘ) 아이콘 병기. flex 아이템은 [::before 아이콘] + [.medi-disclaimer__body span] 딱 두 개. 본문을 span으로 감싸지 않으면 텍스트/ 조각이 각각 flex 아이템(세로 컬럼)으로 쪼개져 깨진다. */ body.ui-senior .medi-disclaimer { display: flex; gap: 10px; align-items: flex-start; } body.ui-senior .medi-disclaimer__body { flex: 1 1 auto; min-width: 0; } body.ui-senior .medi-disclaimer::before { content: ''; flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; background-color: #9AA7A0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 7.6h0'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 7.6h0'/%3E%3C/svg%3E") center/contain no-repeat; } /* 하단 도크 아이콘 교체 — 집/알약/장바구니/사람 (마스크로 색 제어: 비활성 회색, 활성 에메랄드) */ body.ui-senior .footer_navigation .navi .icon { background-image: none !important; background-color: var(--sr-ink-3); -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; } body.ui-senior .footer_navigation .navi.active .icon { background-color: var(--sr-main); } body.ui-senior .footer_navigation .navi .icon.icon--home { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 4l8 7.5'/%3E%3Cpath d='M6 10.5V20h12V10.5'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 4l8 7.5'/%3E%3Cpath d='M6 10.5V20h12V10.5'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E"); } body.ui-senior .footer_navigation .navi .icon.icon--medicine { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 20.5 3.5 13.5a5 5 0 0 1 7-7l7 7a5 5 0 0 1-7 7Z'/%3E%3Cpath d='m7 7 7 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 20.5 3.5 13.5a5 5 0 0 1 7-7l7 7a5 5 0 0 1-7 7Z'/%3E%3Cpath d='m7 7 7 7'/%3E%3C/svg%3E"); } body.ui-senior .footer_navigation .navi .icon.icon--history { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 8h11l-1 11.5H7.5L6.5 8Z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 8h11l-1 11.5H7.5L6.5 8Z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E"); } body.ui-senior .footer_navigation .navi .icon.icon--setting { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M5 20c0-3.6 3.1-6 7-6s7 2.4 7 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M5 20c0-3.6 3.1-6 7-6s7 2.4 7 6'/%3E%3C/svg%3E"); } /* ====================== 14) 범용 컴포넌트 레이어 (전 화면 공통) ====================== 버튼·폼·입력·라디오/체크박스·셀렉트·모달·서브페이지 헤더를 시니어 규격으로. → 어떤 화면이든 만 붙이면 공통 요소가 큼직/고대비로 전환. */ /* 서브페이지 헤더(뒤로가기 + 제목) */ body.ui-senior .header .btn_back { position: static; transform: none; width: 40px; height: 40px; margin-left: -8px; flex-shrink: 0; } body.ui-senior .header .btn_modify_info { width: 40px; height: 40px; } /* 버튼 */ body.ui-senior .btn { min-height: 54px; border-radius: 14px; font-size: 17px; font-weight: 700; gap: 8px; } body.ui-senior .btn.btn-sm { min-height: 48px; line-height: normal; } body.ui-senior .btn.btn-md { height: auto; min-height: 54px; line-height: normal; } body.ui-senior .btn.btn-lg { height: auto; min-height: 58px; line-height: normal; border-radius: 14px; } body.ui-senior .btn_main { background: var(--sr-grad); color: #fff; box-shadow: 0 8px 20px rgba(14,124,102,.24); } body.ui-senior .btn_sub { background: var(--sr-main-soft); color: var(--sr-main); } body.ui-senior .btn_typo { background: var(--sr-main-soft); color: var(--color-typo); } body.ui-senior .btn_outline { border: 2px solid var(--sr-main); color: var(--sr-main); background: #fff; } body.ui-senior .btn:disabled { background: #C2CDC7; color: #47534D; } body.ui-senior .fixed_btn { height: auto; padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); } body.ui-senior .fixed_btn .btn { min-height: 58px; } /* 입력/폼 */ body.ui-senior .input--typeA { margin-bottom: 20px; } body.ui-senior .input--typeA label.input_label, body.ui-senior .input--typeB label.input_label { font-size: 16px; font-weight: 700; color: var(--sr-ink-2); margin-bottom: 8px; } body.ui-senior .form-control { height: 56px; border-radius: 14px; border: 1.5px solid var(--sr-line); background: #F9F8F4; font-size: 17px; color: var(--sr-ink); padding: 0 16px; } body.ui-senior .form-control:focus { border-color: var(--sr-main); background: #fff; box-shadow: 0 0 0 3px var(--sr-main-soft); } body.ui-senior .form-control[readonly] { background: #EDEBE3; color: var(--sr-ink-2); } body.ui-senior .form-control::placeholder { font-size: 16px; color: #8A929B; } body.ui-senior .info_txt { font-size: 13.5px; line-height: 1.5; } /* 라디오/체크박스 (큰 터치) */ body.ui-senior .radio--typeA { font-size: 17px; } body.ui-senior .radio--typeA label { min-height: 48px; } body.ui-senior .radio--typeA input[type=radio]+em { width: 28px; height: 28px; margin-right: 8px; } body.ui-senior .checkbox--typeA input[type=checkbox]+em { width: 26px; height: 26px; } body.ui-senior .radio_box { gap: 24px; } /* 셀렉트(nice-select) */ body.ui-senior .select--typeA { height: 54px; line-height: 54px; border-radius: 14px; } /* 모달 */ body.ui-senior .modal__inner { border-radius: 20px; max-width: 340px; } body.ui-senior .modal__header h3 { font-size: 20px; } body.ui-senior .modal__header p { font-size: 15px; } body.ui-senior .modal__btns .btn { height: auto; min-height: 54px; line-height: normal; border-radius: 14px; font-size: 16px; } /* ====================== 15) 내 정보(setting) ====================== */ body.ui-senior .setting__inner { padding-top: 8px; padding-bottom: 124px; } body.ui-senior .setting__inner > h3 { font-size: 23px; font-weight: 800; line-height: 1.4; color: var(--sr-ink); margin-bottom: 6px; } body.ui-senior .member_info { padding: 20px; border-radius: var(--sr-radius); background: var(--sr-surface); border: 1px solid var(--sr-line); box-shadow: var(--sr-shadow-sm); } body.ui-senior ul.member_info li { gap: 16px; margin-bottom: 16px; align-items: center; } body.ui-senior ul.member_info li span.info-tit { font-size: 15px; color: var(--sr-ink-3); width: 66px; } body.ui-senior ul.member_info li b.info-cnts { font-size: 16px; font-weight: 700; color: var(--sr-ink); } body.ui-senior .setting__inner .set-group__title { font-size: 16px; margin: 26px 4px 12px; } body.ui-senior .set-group { border-radius: var(--sr-radius); border-color: var(--sr-line); box-shadow: var(--sr-shadow-sm); } body.ui-senior .set-row { min-height: 62px; font-size: 17px; padding: 14px 18px; gap: 14px; } body.ui-senior .set-row__icon { flex: 0 0 38px; height: 38px; font-size: 19px; } body.ui-senior .set-row__arrow { font-size: 24px; } body.ui-senior .set-row__state { font-size: 13px; } body.ui-senior .push-switch { width: 54px; height: 30px; } body.ui-senior .push-switch__slider:before { height: 24px; width: 24px; left: 3px; top: 3px; } body.ui-senior .push-switch input:checked + .push-switch__slider:before { transform: translateX(24px); } body.ui-senior .setting__inner .login__link { margin-top: 28px; } body.ui-senior .setting__inner .login__link li a { font-size: 16px; } body.ui-senior .set-footer__legal a { font-size: 13px; } body.ui-senior .btn-copy-code { font-size: 13px; padding: 5px 12px; } body.ui-senior .btn-register-phone { font-size: 14px; padding: 6px 14px; } /* ====================== 16) 웰니스스토어(MyOffice .mo-*) 시니어 보정 ====================== .mo-* 는 이미 에메랄드+골드 프리미엄 디자인 → 크기/터치/정렬만 시니어 규격으로 보정. */ /* .mo-wrap 은 .main 좌우패딩 상쇄용 margin — 시니어 .main(20px)에 맞춰 정렬 */ body.ui-senior .mo-wrap { margin: 0 -20px; padding: 0 20px 128px; min-height: auto; } body.ui-senior .mo-cats { top: 0; margin: 0 -20px; padding-left: 20px; padding-right: 20px; } body.ui-senior .mo-intro__title { font-size: 22px; } body.ui-senior .mo-intro__sub { font-size: 13px; } body.ui-senior .mo-cat-select { height: 56px; font-size: 17px; padding: 0 48px 0 18px; } body.ui-senior .mo-cat-select__label { font-size: 13px; } body.ui-senior .mo-card { padding: 14px; border-radius: var(--sr-radius); } body.ui-senior .mo-card__thumb { width: 92px; height: 92px; } body.ui-senior .mo-card__name { font-size: 16px; } body.ui-senior .mo-price__main { font-size: 19px; } body.ui-senior .mo-add { min-width: 66px; font-size: 15px; border-radius: 14px; } /* 주문서 폼/수량/버튼 — 시니어 터치 규격 */ body.ui-senior .mo-input { height: 52px; font-size: 16px; border-radius: 12px; } body.ui-senior .mo-addr-search { height: 52px; font-size: 15px; border-radius: 12px; } body.ui-senior .mo-qty__btn { width: 40px; height: 40px; font-size: 20px; } body.ui-senior .mo-qty__n { min-width: 40px; font-size: 16px; } body.ui-senior .mo-submit { height: 58px; font-size: 17px; line-height: 58px; } body.ui-senior .mo-cart-item__thumb { width: 72px; height: 72px; } body.ui-senior .mo-cart-item__name { font-size: 15px; } body.ui-senior .mo-sec-title { font-size: 16px; } /* 주문내역 */ body.ui-senior .mo-order__date { font-size: 15px; } body.ui-senior .mo-oitem__name { font-size: 15px; } body.ui-senior .mo-more { height: 52px; font-size: 15px; border-radius: 14px; } /* 계보도 */ body.ui-senior .mo-tree-summary__name { font-size: 18px; } body.ui-senior .mo-node__card { padding: 13px 14px; } body.ui-senior .mo-node__avatar { width: 40px; height: 40px; font-size: 15px; } body.ui-senior .mo-node__name { font-size: 15.5px; } /* 상세는 이미 시니어 최적화(주석) — 하단 구매바는 도크 위로 유지 */ body.ui-senior .mo-fab { bottom: 120px; } /* ====================== 17) 검색·탭·등록폼·DDI 공통 컴포넌트 보정 ====================== */ /* 약품 검색 (search / medicine_search / medicine index) */ body.ui-senior .form_search .search_input input { height: 54px; border-radius: 14px; border: 1.5px solid var(--sr-line); font-size: 16px; background-color: #F9F8F4; background-size: 22px 22px; } body.ui-senior .form_search .search_input input:focus { border-color: var(--sr-main); background-color: #fff; box-shadow: 0 0 0 3px var(--sr-main-soft); } body.ui-senior .info-tit-for-label { font-size: 15px; font-weight: 700; color: var(--sr-ink-2); } body.ui-senior .form_search .search_input .btn { min-height: 54px; font-size: 16px; } body.ui-senior .search__result .result__item { gap: 14px; padding: 16px 0; } body.ui-senior .search__result .result__item .thum { width: 110px; min-width: 110px; height: 66px; border-radius: 12px; } body.ui-senior .search__result .result__item .result_info h5 { font-size: 16px; font-weight: 700; } body.ui-senior .search__result .result__item .result_info p { font-size: 13px; margin-top: 5px; } body.ui-senior .recent__search h5 { font-size: 16px; font-weight: 700; } body.ui-senior .recent-word__item { margin-bottom: 6px; min-height: 48px; } body.ui-senior .recent-word__item p { font-size: 16px; } /* 탭 (medicine_list / family_member) */ body.ui-senior .medicine-list__tab ul.tabs .tabs__link { height: 52px; line-height: 52px; font-size: 17px; } body.ui-senior .medicine-list__inner .list_title h3 { font-size: 22px; font-weight: 800; } body.ui-senior .medicine-list__inner .list_title p { font-size: 15px; } /* 복용 등록/수정 폼 위젯 (medicine_reg / medicine_modify) */ body.ui-senior .input--typeB label.input_label { font-size: 17px; font-weight: 800; } body.ui-senior .number-control__box { height: 52px; border-radius: 14px; } body.ui-senior .number-control__box button { width: 28px; height: 28px; } body.ui-senior .number-control__box input { font-size: 18px; width: 36px; } body.ui-senior .number-control__wrap span { font-size: 15px; } body.ui-senior .radio--typeD input[type=radio]+em { height: 48px; line-height: 48px; border-radius: 12px; font-size: 15px; } body.ui-senior .radio--typeC input[type=radio]+em { width: 26px; height: 26px; } body.ui-senior .datepicker_box .datepicker { height: 52px; font-size: 16px; max-width: none; } body.ui-senior .input_alarm .btn_add { width: 28px; height: 28px; } body.ui-senior .timeSwiper .swiper-slide, body.ui-senior .yearSwiper .swiper-slide { font-size: 19px; } body.ui-senior .timeSwiper .swiper-slide.swiper-slide-active { font-size: 24px; } /* 약물 상호작용(DDI) 텍스트 가독성 */ body.ui-senior .ddi_info p { font-size: 14px; line-height: 1.5; } body.ui-senior .interaction__item > h3 { font-size: 18px; } body.ui-senior .interaction_rotate p { height: 52px; line-height: 52px; font-size: 16px; } body.ui-senior .interaction_info h4 { font-size: 18px; } body.ui-senior .interaction_info h5.sub_tit { font-size: 16px; } body.ui-senior .interaction_info span, body.ui-senior .interaction_info p { font-size: 14px; line-height: 1.5; } body.ui-senior .medicine-info__box > h3 { font-size: 18px; } body.ui-senior .medicine-info__box > span, body.ui-senior .medicine-info__box .info_box { font-size: 14px; } body.ui-senior .tooltip-icon { width: 20px; height: 20px; font-size: 13px; } body.ui-senior .btn_ddi_details .btn span { line-height: 54px; font-size: 16px; } /* ====================== 18) 등록약품 관리 리스트 카드 재설계 (medicine_list 전용) ====================== 대상: medicine/medicine_list.php 의 .medicine__item (JS 생성 마크업; personal_intake_service.js makeUseTag). ★스코프 격리 — 반드시 .medicine-list__inner 로 한정: .medicine__item 카드는 home(page-home)/history(page-history)/family(page-family)/index 와 JS 문자열까지 완전 공유한다. 리스트 관리화면만 바꾸려면 body.ui-senior.page-medicine 만으론 부족 (index.php 도 page-medicine). 리스트 카드는 .medicine-list__inner(#used_list_target/#not_used_list_target) 아래에만 있고 index 는 .medicine-home__inner 이므로, 전 규칙을 .medicine-list__inner 로 격리하면 home/history/family/index 에 전혀 영향이 없다. (이 블록은 §11 뒤라 소스순서로도 §6/§11 을 앞선다) 특이성 전투: body.ui-senior.page-medicine .medicine-list__inner .medicine__item .medicine__desc .thum = body(요소1)+6클래스 = (0,6,1). sub.css:409 & accessible.css:850 의 @media(max-width:370px) .thum{100px!important}·.medicine_info{max-width:42%!important} (0,3,0)!important 트랩과 인라인 max-width:140px(personal_intake_service.js:538) 를 !important 동반으로 확실히 제압. 레이아웃(Grid 재구조화): [ '복용 시간' 라벨 + 활성 시간칩(pill) ] ← 상단 컨텍스트 밴드 [ 썸네일76 ] [ 약품명 / 기간 / 분류 / 경고칩 줄바꿈 ] ← 약품명이 자기 줄을 통째로 [ ───── 복용중 배지(좌) + 풀폭 수정 버튼 : 하단 액션행 ───── ] ================================================================================================= */ /* 카드: 세로 스택(§11 재확인) + 상단 시간밴드 → 본문(그리드) 순서 */ body.ui-senior.page-medicine .medicine-list__inner .medicine__item { display: flex; flex-direction: column; } /* 상단 컨텍스트 밴드: '복용 시간' 라벨 + 활성 시간칩 pill */ body.ui-senior.page-medicine .medicine-list__inner .medicine__item .taking_time { order: 1; /* §11 order:2 를 (0,5,1) 로 덮어 최상단 밴드로 */ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding-right: 46px; /* 우상단 .taking_checkbox(절대배치) 겹침 방지 */ } /* '복용 시간' 라벨: 항상 렌더 → 밴드가 0-높이가 되지 않아 notify_times 가 비어도 이름행이 체크박스와 겹치지 않음 */ body.ui-senior.page-medicine .medicine-list__inner .medicine__item .taking_time::before { content: "복용 시간"; flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--sr-ink-3); } body.ui-senior.page-medicine .medicine-list__inner .medicine__item .taking_time li:not(.active) { display: none; /* 비활성 회색칩 숨김(§11 재확인) */ } body.ui-senior.page-medicine .medicine-list__inner .medicine__item .taking_time li.active { min-width: 0; padding: 5px 12px; border: 1px solid rgba(14, 124, 102, .28); border-radius: var(--sr-radius-pill); background: var(--sr-main-soft); color: var(--sr-main); font-size: 14px; font-weight: 800; white-space: nowrap; /* '기상 후'·'취침 전' 공백 포함 칩 내부 줄바꿈 방지 */ } /* 본문: .medicine__desc 를 Grid 로 재구조화(썸네일 auto + 정보 1fr / 액션 풀폭) */ body.ui-senior.page-medicine .medicine-list__inner .medicine__item .medicine__desc { order: 2; display: grid; grid-template-columns: auto minmax(0, 1fr); /* 정보칼럼은 0까지 줄어 오버플로 방지 */ grid-template-areas: "thum info" "action action"; /* 액션행은 두 칼럼 풀폭 */ column-gap: 14px; row-gap: 0; align-items: start; margin-top: 12px; /* 상단 시간밴드와 간격(§11 margin-top:0 덮음) */ padding-right: 0; /* 체크박스 회피는 상단 밴드 전담 → 해제 */ } /* 썸네일: 76px(§11 톤 유지). @media 100px!important 를 (0,6,1)!important 로 제압 */ body.ui-senior.page-medicine .medicine-list__inner .medicine__item .medicine__desc .thum { grid-area: thum; width: 76px !important; height: 76px !important; border-radius: var(--sr-radius-sm); } /* 정보 칼럼: 폭 제한 완전 해제(@media 42%!important 제압) + 그리드 오버플로 없이 줄바꿈 */ body.ui-senior.page-medicine .medicine-list__inner .medicine__item .medicine__desc .medicine_info { grid-area: info; min-width: 0; max-width: none !important; padding-top: 0; } /* 약품명 = 카드의 주인공. 자기 줄을 통째로 쓰며 한글은 단어 단위로 줄바꿈 */ body.ui-senior.page-medicine .medicine-list__inner .medicine__item .medicine_info p.medicine_name { margin: 0 0 4px; font-size: 19px; font-weight: 800; line-height: 1.35; color: var(--sr-ink); word-break: keep-all; /* '소/프트캡슐' 중간 끊김 방지 */ overflow-wrap: anywhere; /* 폭이 넉넉해 실질 거의 미발동(초장문 토큰 안전판) */ } body.ui-senior.page-medicine .medicine-list__inner .medicine__item .medicine_info .medicine_period { display: block; margin-bottom: 2px; font-size: 14px; color: var(--sr-ink-3); } body.ui-senior.page-medicine .medicine-list__inner .medicine__item .medicine_info p.temp_medicine_class { margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--sr-ink-2); } /* 경고칩 컨테이너: 인라인 max-width:140px 감옥 해제 → 정보칼럼 폭에서 자유 줄바꿈 */ body.ui-senior.page-medicine .medicine-list__inner .medicine__item .medicine_info > div { display: flex !important; flex-wrap: wrap; gap: 6px !important; /* 인라인 gap:2px 대체 */ max-width: none !important; /* 인라인 max-width:140px 격파 → 세로 스택 방지 */ margin-top: 8px; } /* 개별 경고칩: 앰버 칩. 칩 내부는 한 덩어리(nowrap), 줄바꿈은 컨테이너가 담당 */ body.ui-senior.page-medicine .medicine-list__inner .medicine__item .medicine_info p.side-effect { margin: 0; padding: 6px 11px; border: 1px solid #EAD9B4; border-radius: 10px; background: var(--sr-warn-bg); color: var(--sr-warn-fg) !important; /* sub.css color:var(--color-sub) 제압 */ font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; } /* 하단 액션행: 상단 구분선 + 복용중 배지(좌, 고정) + 풀폭 수정 버튼 */ body.ui-senior.page-medicine .medicine-list__inner .medicine__item .medicine__desc .taking_info { grid-area: action; /* 두 칼럼을 가로지르는 풀폭 행 */ display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sr-line); /* 본문과 액션을 명확히 분리 */ text-align: left; /* base sub.css text-align:right 해제 */ } /* 복용중/미복용중 배지 — 좌측 고정. 색/형태는 §6(#E4E8E5·#45514B / .complete=--sr-grad) 상속 */ body.ui-senior.page-medicine .medicine-list__inner .medicine__item .medicine__desc .taking_info span.taking_badge { flex-shrink: 0; margin: 0; } /* 수정 버튼 — 남는 폭을 채우는 큰 탭타깃(시니어 우선, 52px). 에메랄드 아웃라인 */ body.ui-senior.page-medicine .medicine-list__inner .medicine__item .medicine__desc .taking_info .btn_edit_intake { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; /* WCAG 44px 초과, 시니어 탭 여유 (§6 margin-top:10px 덮음) */ margin: 0; padding: 0 16px; font-size: 16px; font-weight: 700; color: var(--sr-main); background: var(--sr-surface); border: 1.5px solid var(--sr-main); border-radius: 12px; white-space: nowrap; } /* ====================== 19) 복용정보 등록/수정 폼 재설계 (medicine_reg / medicine_modify) ====================== rafago 잔재로 필드마다 레이아웃이 제각각이던 등록/수정 폼을 "시니어 카드 폼"으로 재정렬. 스코프 앵커: .form_reg_medicine (reg/modify 두 파일 전용 클래스) → search/index/list 무영향. ★모달 공유 주의: medicine_list.php 에 include 되는 modal-intake-period.php 가 .radio_box--month / .radio--typeD / .datepicker_box 를 재사용하므로, 폼 전용 그리드/줄바꿈은 반드시 .form_reg_medicine(또는 .input--typeB / #alarm_list_target) 조상으로 격리한다. 폼 위젯 베이스는 모두 non-important·특이성 ≤(0,2,2) → senior 마지막 로드 + 접두만으로 승(!important 불필요). */ /* 컨테이너 */ body.ui-senior.page-medicine .medicine-reg__inner { padding-top: 8px; padding-bottom: 40px; } body.ui-senior.page-medicine .form_reg_medicine fieldset { border: 0; margin: 0; padding: 0; } /* (a) 각 필드를 카드로 그룹화 + 라벨을 카드 제목으로 */ body.ui-senior.page-medicine .form_reg_medicine .input--typeB { background: var(--sr-surface); border: 1px solid var(--sr-line); border-radius: var(--sr-radius); box-shadow: var(--sr-shadow-sm); padding: 18px 18px 20px; margin-bottom: 16px; } body.ui-senior.page-medicine .form_reg_medicine .input--typeB > label.input_label { display: block; margin-bottom: 14px; font-size: 17px; font-weight: 800; color: var(--sr-ink); } body.ui-senior.page-medicine .form_reg_medicine .input--typeB > label.input_label .info_txt { margin-top: 6px; font-size: 13.5px; font-weight: 500; } /* 공통: 폼 내 typeD 칩 폭제한 해제(정렬은 그리드/플렉스가 담당) + 시니어 규격 */ body.ui-senior.page-medicine .form_reg_medicine .radio--typeD { max-width: none; } body.ui-senior.page-medicine .form_reg_medicine .radio--typeD input[type=radio]+em { height: 54px; line-height: 54px; border-radius: 12px; font-size: 16px; font-weight: 600; background-color: var(--sr-bg); color: var(--sr-ink); } body.ui-senior.page-medicine .form_reg_medicine .radio--typeD input[type=radio]:checked+em { background-color: var(--sr-main); color: #fff; font-weight: 700; } /* (b) 복용 주기 — 4개 라디오를 2열 선택박스 그리드로 */ body.ui-senior.page-medicine .form_reg_medicine .radio_box--cycle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } body.ui-senior.page-medicine .form_reg_medicine .radio--typeC { border: 1.5px solid var(--sr-line); border-radius: var(--sr-radius-sm); background: #F9F8F4; transition: border-color .15s var(--sr-ease), background-color .15s var(--sr-ease); } body.ui-senior.page-medicine .form_reg_medicine .radio--typeC label { min-height: 56px; padding: 0 14px; font-size: 16px; font-weight: 600; color: var(--sr-ink); cursor: pointer; } /* 선택된 주기 박스 강조(:has 진행적 향상; 미지원 브라우저는 라디오 원형 아이콘이 선택 표시) */ body.ui-senior.page-medicine .form_reg_medicine .radio--typeC:has(input[type=radio]:checked) { border-color: var(--sr-main); background: var(--sr-main-tint); } body.ui-senior.page-medicine .form_reg_medicine #weekly_select_area, body.ui-senior.page-medicine .form_reg_medicine #monthly_select_area { margin-top: 16px; } /* (e) 복용 일자 — 날짜2 + 틸드 균등 정렬 */ body.ui-senior.page-medicine .form_reg_medicine .datepicker_box { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; } body.ui-senior.page-medicine .form_reg_medicine .datepicker_box .datepicker { width: 100%; min-width: 0; max-width: none; padding: 0 10px; text-align: center; font-size: 16px; } body.ui-senior.page-medicine .form_reg_medicine .datepicker_box > span { font-size: 18px; color: var(--sr-ink-3); text-align: center; } /* 1/2/3개월 칩(복용 일자 카드 직속) — 3열 그리드 */ body.ui-senior.page-medicine .form_reg_medicine .input--typeB > .radio_box--month { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; } /* (d) 1일 복용 횟수 — 컨트롤/"회" 중앙 정렬 */ body.ui-senior.page-medicine .form_reg_medicine .number-control__wrap { align-items: center; gap: 12px; } body.ui-senior.page-medicine .form_reg_medicine .number-control__wrap > span { padding-bottom: 0; font-size: 17px; font-weight: 600; color: var(--sr-ink-2); } body.ui-senior.page-medicine .form_reg_medicine .number-control__box { height: 56px; border-radius: 14px; padding: 0 18px; gap: 24px; } body.ui-senior.page-medicine .form_reg_medicine .number-control__box button { width: 32px; height: 32px; } body.ui-senior.page-medicine .form_reg_medicine .number-control__box input { width: 40px; font-size: 19px; font-weight: 700; color: var(--sr-ink); } /* (c) 알림 설정 — 회차별 서브카드 (CSS counter 로 'N회차' 헤더 자동 생성, JS 무수정) */ body.ui-senior.page-medicine .form_reg_medicine #alarm_list_target { display: flex; flex-direction: column; gap: 14px; counter-reset: alarm; } body.ui-senior.page-medicine .form_reg_medicine .setting_alarm { background: #F9F8F4; border: 1px solid var(--sr-line); border-radius: var(--sr-radius-sm); padding: 14px; counter-increment: alarm; } body.ui-senior.page-medicine .form_reg_medicine .setting_alarm:not(:last-child) { margin-bottom: 0; } body.ui-senior.page-medicine .form_reg_medicine .setting_alarm::before { content: counter(alarm) "회차 복용 시간대"; display: block; margin-bottom: 12px; font-size: 14px; font-weight: 700; color: var(--sr-main); } /* 시간대 라디오 5개 — 3+2 줄바꿈(둘째 줄은 flex-grow 로 꽉 채워 정렬) */ body.ui-senior.page-medicine .form_reg_medicine .setting_alarm .radio_box--month { display: flex; flex-wrap: wrap; gap: 8px; } body.ui-senior.page-medicine .form_reg_medicine .setting_alarm .radio--typeD { flex: 1 1 calc(33.333% - 6px); min-width: calc(33.333% - 6px); } /* "알림 시간" 행 — 라벨 ↔ 시간 버튼 좌우 정렬(서브카드 내 구분선) */ body.ui-senior.page-medicine .form_reg_medicine .setting_time { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding: 12px 4px 0; border-top: 1px solid var(--sr-line); } body.ui-senior.page-medicine .form_reg_medicine .setting_time > span { font-size: 15px; font-weight: 600; color: var(--sr-ink-2); padding-left: 28px; /* sub.css 알람 아이콘(before) 자리 유지 */ } body.ui-senior.page-medicine .form_reg_medicine .setting_time .btn_change_time { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 116px; height: 50px; line-height: normal; padding: 0 16px; border: 1.5px solid var(--sr-line); border-radius: 12px; background: var(--sr-surface); font-size: 17px; font-weight: 700; color: var(--sr-ink); } /* (복용 여부) 2개 칩 — 2열 그리드 (알람 서브카드 내부는 미매칭: input_content 직속만) */ body.ui-senior.page-medicine .form_reg_medicine .input_content > .radio_box--month { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* (f) 등록 / 수정 버튼 */ body.ui-senior.page-medicine .form_reg_medicine > fieldset > button.btn_main { margin-top: 4px; min-height: 58px; font-size: 18px; } /* ====================== 20) 등록약품 관리 헤더 — '약품 삭제' 토글 정돈 (medicine_list 전용) ====================== common.css:152 .medicine_list_btn_area{display:flex!important;width:70px!important} 로 폭이 좁아 '약품 삭제' 텍스트가 2줄로 깨지고 위치도 어색했다. → 헤더 우측에 한 줄 알약형 라벨버튼으로 정돈. (right_btns 를 가진 ui-senior 페이지는 medicine_list 뿐이라 사실상 list 전용) §12 가 .header 를 position:static 으로 만들어 base 의 절대배치 right_btns 가 엉뚱한 조상에 앵커되던 문제를 .header position:relative 로 재앵커(헤더 우상단 고정). */ body.ui-senior.page-medicine .header { position: relative; } body.ui-senior.page-medicine .header .right_btns { top: 50%; right: 20px; transform: translateY(-50%); /* base 절대배치 유지, 헤더 기준 우상단 정렬 */ gap: 0; } body.ui-senior.page-medicine .medicine_list_btn_area { width: auto !important; /* common.css 70px!important 해제 → 텍스트 줄바꿈 방지 */ height: 44px; gap: 7px; padding: 0 15px; border: 1.5px solid var(--sr-line); border-radius: var(--sr-radius-pill); background: var(--sr-surface); box-shadow: var(--sr-shadow-sm); } body.ui-senior.page-medicine .medicine_list_btn_area .medicine_list_del_btn { width: 20px; height: 20px; flex-shrink: 0; } body.ui-senior.page-medicine .medicine_list_btn_area p { font-size: 14px; font-weight: 700; color: var(--sr-ink-2); white-space: nowrap; }