@charset "utf-8";
/* [2026-08 메인 인덱스 리뉴얼] 히어로 아래 새 섹션 전용 스타일 (Quick Menu ~ 브랜드/뉴스레터).
본문 컨테이너 폭은 기존 .mainContents(max-width:1200px)를 그대로 재사용하며, 이 파일에서는
새 폭 변수를 도입하지 않는다. 색상은 기존 main_gallery.css/도네이션 톤(#132b45 남색,
#c0392b 브랜드 레드, #2f9e44 그린, 회색 계열)을 그대로 따른다. */
/* ===================== 공통 섹션 ===================== */
.ml_sec { margin-bottom: 34px; }
.ml_sec:last-child { margin-bottom: 0; }
.ml_sec_head { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.ml_sec_head h3 { font-size: 20px; font-weight: 800; color: #222; margin: 0; flex-shrink: 0; }
.ml_sec_head .ml_more { margin-left: auto; font-size: 13px; color: #999; flex-shrink: 0; }
.ml_sec_head .ml_more:hover { color: #666; }
/* [2026-08] 관리자 진입 버튼 - 히어로 슬라이더(.mainVisualImage, main.css에서 이미
position:relative + overflow:hidden 지정됨) 우하단에 떠 있는 오버레이 톱니바퀴 버튼.
히어로 자체 마크업/로직은 건드리지 않고 버튼 한 개만 그 안에 배치 - 위치만
.ml_admin_gear_hero로 지정하고, 크기/색 등 기본 모양은 기존 .ml_admin_gear를 그대로 재사용. */
.ml_admin_gear {
width: 32px; height: 32px; padding: 0;
display: flex; align-items: center; justify-content: center;
font-size: 15px;
background: #999; color: #fff; border: none; border-radius: 50%; cursor: pointer;
}
.ml_admin_gear:hover { background: #777; }
.ml_admin_gear_hero {
position: absolute; right: 16px; bottom: 16px; z-index: 20;
background: rgba(0,0,0,0.45);
}
.ml_admin_gear_hero:hover { background: rgba(0,0,0,0.65); }
.ml_empty { padding: 26px 10px; text-align: center; color: #aaa; font-size: 13px; background: #f7f8fa; border-radius: 10px; margin: 0; }
/* ===================== Quick Menu =====================
[2026-08 수정] 카미앤베스_메인화면_소스/app/globals.css의 .shortcut-wrap/.shortcut/.shortcut-icon을
그대로 반영 - 박스 6개를 따로 띄우던 것에서 흰 카드 하나 + 세로 구분선, 아이콘(좌)-텍스트(우)
가로 배치, 둥근 사각형 아이콘 + 자연스러운 그린/골드 톤 배색으로 변경. 아이콘 자체는 원본이
장식용 유니코드 기호(♟▣◇♥⌂◆)였던 자리를 그대로 각 서비스에 맞는 fontawesome 아이콘으로 대체. */
/* [2026-08-22 수정] 관리자가 항목을 자유롭게 추가/삭제할 수 있게 되면서, 고정 6칸 그리드
(grid-template-columns: repeat(6,1fr))는 항목 수가 6개가 아닐 때 빈 칸이 생기거나 항목이
한쪽으로 몰리는 문제가 있었다. flex + flex-basis 방식으로 바꿔 몇 개가 오든 한 줄 안에서는
flex-grow가 남는 공간을 항목 수만큼 똑같이 나눠줘서 항상 같은 비율로 정렬되고, 다 못 들어가면
다음 줄로 자연스럽게 넘어간다(그 줄 안에서도 동일 비율 유지) - 항목 수를 아는 PHP/JS 쪽 계산이
전혀 필요 없다. */
.ml_quickmenu {
min-height: 86px; margin: 0 0 40px; padding: 11px 14px;
display: flex; flex-wrap: wrap;
border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(38,49,37,0.08);
}
.ml_qm_item {
min-height: 62px; padding: 0 16px;
display: flex; align-items: center; gap: 14px;
flex: 1 0 160px;
border-right: 1px solid #ecefe8;
}
.ml_qm_item:last-child { border-right: none; }
/* [2026-08-22 수정] 관리자가 아이콘 이미지를 직접 업로드하고 가로 픽셀까지 지정할 수 있게 되면서,
고정 크기 원형 배지 + 배경색 클래스(ml_qm_icon1~6) 방식을 버리고, 이미지 자연 비율 그대로
보여주는 유연한 컨테이너로 바꿨다(가로 크기는 관리자가 입력한 px가 ![]()
인라인 style로 그대로
적용된다 - main_lower_render_quickmenu_item() 참고). */
.ml_qm_icon {
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ml_qm_icon img { display: block; border-radius: 8px; }
.ml_qm_text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ml_qm_text b { font-size: 14px; color: #222; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml_qm_text small { color: #747a75; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ===================== 2단 레이아웃 (본문 + 광고 컬럼) ===================== */
/* [2026-08 버그수정] 테마 공통 css/main.css의 .mainContents{overflow:hidden}(레거시 float
clearfix용)이 .ml_split의 조상이라, position:sticky를 쓰는 자식(.ml_ad_col)이 전혀 스크롤을
따라가지 못하고 있었다(조상 중 하나라도 overflow가 visible이 아니면 sticky가 항상 깨짐).
main_lower.css는 메인 페이지에만 로드되므로 여기서 덮어써도 다른 페이지의 .mainContents에는
영향이 없다. add_stylesheet() 출력 순서와 무관하게 항상 이기도록 !important를 붙인다. */
.mainContents { overflow: visible !important; }
.ml_split { position: relative; display: flex; gap: 28px; align-items: flex-start; overflow: visible !important; }
/* [2026-08 버그수정 #2 - 진짜 원인] 위 .mainContents 수정 후에도 실제 배포 사이트에서는 여전히
광고 컬럼이 스크롤을 따라가지 않았다. 실사이트(kaminbeth.com)를 직접 브라우저로 열어 확인한
결과, 에 overflow:auto가 걸려 있었고 이게 sticky의 "스크롤 조상"으로 잡히면서 sticky가
전혀 동작하지 않는 크롬 특유의 문제였다(조상 체인 어디든 overflow가 visible이 아니면 sticky가
깨진다는 규칙이 body/html 레벨에도 그대로 적용됨). 관리자 모달 등에서 배경 스크롤을 막을 때
JS로 body.style.overflow='hidden'을 인라인으로 직접 설정하므로, 그 기능을 깨뜨리지 않도록
!important 없이 셀렉터 특이성만 살짝 올려서(body.body) 기본 상태에서만 visible로 덮어쓴다 -
모달이 열려 인라인 스타일이 걸리면 인라인이 항상 이겨서 스크롤 잠금은 그대로 동작한다. */
body.body { overflow: visible; }
.ml_main_col { flex: 1; min-width: 0; }
/* [2026-08] 오른쪽 광고 컬럼이 페이지 스크롤을 따라 함께 움직이도록 position:sticky를 사용한다.
상단 리밋(히어로 영역)은 top 오프셋 자체가 히어로보다 아래(.ml_split 시작 지점)이므로 자연히
넘어가지 않고, 하단 리밋(하단 배너)은 sticky의 containing block인 .ml_split의 바닥에서 자동으로
멈춘다(.ml_main_col이 .ml_ad_col보다 훨씬 길어서 하단 배너 영역과는 항상 떨어져 멈춘다).
예전에 쓰던 max-height + overflow-y:auto(내부 스크롤) 방식은 광고 컬럼 안에서 마우스를 올려야만
스크롤되어 "화면을 따라다니는" 느낌이 나지 않았으므로 제거했다. */
.ml_ad_col {
width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px;
position: sticky; top: 88px; align-self: flex-start; z-index: 5;
}
/* ===================== 커뮤니티 인기 이야기 =====================
[2026-08 디자인 시안 반영] 시안은 카드 5개가 PC에서 한 줄에 다 보이는 구성이라 3열 →
5열로 늘리고, 카드가 좁아진 만큼 썸네일을 더 정사각에 가깝게, 제목/메타 폰트를 살짝 줄였다. */
/* [2026-08 개편] 메인화면 노출(관리자 글쓰기 체크) / 커뮤니티 최근글 / 운영자 추천, 3단 구성.
각 그룹은 동일한 5열 카드 그리드를 그대로 재사용한다. 그룹 타이틀은 화면에 노출하지 않고
(사용자 요청) 그룹 사이 여백만 남겨 시각적으로 구분한다. */
.ml_popular_group { margin-bottom: 22px; }
.ml_popular_group:last-child { margin-bottom: 0; }
/* [2026-08-22 요청 반영] 가로보기(태블릿/랜드스케이프폭)에서 카드가 트랙 밖으로 밀려 반쯤 잘려
보이던 버그 - repeat(N, 1fr) 트랙은 기본적으로 min-width:auto라서, 안의 내용(이미지 등)이
트랙 계산폭보다 크면 그리드 자체가 옆으로 넘쳐버릴 수 있다. minmax(0, 1fr)로 바꿔 각 트랙이
내용 크기와 무관하게 항상 자기 몫만큼만 차지하도록(넘치는 대신 안에서 줄어들도록) 고정한다. */
.ml_popular_grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ml_popular_card {
display: block; border: 1px solid #eee; border-radius: 14px; overflow: hidden; background: #fff;
transition: box-shadow 0.2s ease;
}
.ml_popular_card:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.09); }
.ml_popular_thumb {
position: relative; width: 100%; padding-top: 92%;
background: #f3f4f7 center center / cover no-repeat;
}
/* [2026-08 버그수정] 썸네일(본문 이미지/유튜브)이 없는 글은 회색 박스만 덩그러니 보이던 것을,
카미앤베스 로고를 작게 중앙에 표시해 빈 느낌을 줄인다. 처음 추가했을 때 로고 원본 이미지가
그대로(작게 지정 안 된 크기로) 카드 전체를 채워버리는 레이아웃 깨짐이 있었어서, index.php의
img 태그에도 동일한 값을 인라인 style로 직접 넣어 이중 안전장치를 뒀다 - 여기 CSS는 !important로
혹시 있을 다른 규칙과의 충돌도 확실히 이기도록 한다. */
.ml_popular_thumb_logo {
position: absolute !important; top: 50% !important; left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 26% !important; max-width: 40px !important; height: auto !important;
opacity: .32 !important; pointer-events: none !important;
}
.ml_pin_badge {
position: absolute; left: 10px; top: 10px; width: 26px; height: 26px; border-radius: 50%;
background: #c0392b; color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 12px;
}
.ml_popular_body { padding: 12px 13px 14px; }
.ml_popular_cat {
display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 20px;
background: #f3f4f7; color: #666; font-size: 10.5px; font-weight: 700;
}
/* 카테고리 칩 색상 - 시안 이미지의 일상(초록)/질문(주황)/여행(파랑)/정보(회색)/특별한날(보라) 톤을
실제 데이터 태그(main_lower_category_class())에 매핑
[2026-08-24 접근성 수정] 글자색을 톤은 유지한 채 살짝 더 진하게 조정 - 배경 대비 명도 대비가
WCAG AA 기준(작은 텍스트 4.5:1) 이상이 되도록 함. 특히 기존 주황(c2)은 2.56:1로 기준 미달이었음. */
.ml_popular_cat.ml_cat_c1 { background: #eaf3e2; color: #507832; }
.ml_popular_cat.ml_cat_c2 { background: #fdeee0; color: #9c5e1a; }
.ml_popular_cat.ml_cat_c3 { background: #e3eefc; color: #2f6eae; }
.ml_popular_cat.ml_cat_c4 { background: #eef0f2; color: #676d7b; }
.ml_popular_cat.ml_cat_c5 { background: #fdecec; color: #c0392b; }
.ml_popular_cat.ml_cat_c6 { background: #f3ecfa; color: #944eb1; }
.ml_popular_title {
margin: 0 0 9px; font-size: 13.5px; font-weight: 700; color: #222; line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ml_popular_meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: #999; }
.ml_popular_meta i { margin-right: 3px; }
.ml_popular_nick { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ===================== 우리 아이는 오늘? ===================== */
.ml_daily {
background: #f7f8fa; border-radius: 16px; padding: 24px 26px;
}
.ml_daily_guest { text-align: center; padding: 18px 10px; }
.ml_daily_guest p { margin: 0 0 14px; font-size: 14.5px; color: #555; }
.ml_daily_login_btn {
display: inline-block; padding: 10px 24px; background: #132b45; color: #fff;
border-radius: 24px; font-size: 13.5px; font-weight: 700;
}
.ml_daily_login_btn:hover { background: #0d1e30; }
/* [2026-08 디자인 시안 반영] 제목/펫전환/토글 3개/기록버튼을 한 줄짜리 바로 배치 - 좁아지면
자연스럽게 줄바꿈되도록 flex-wrap을 허용한다. */
.ml_daily_bar { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ml_pet_switcher { position: relative; flex-shrink: 0; }
.ml_pet_switch_btn {
display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px;
background: #fff; border: 1px solid #e2e2e0; border-radius: 30px; cursor: pointer;
}
.ml_pet_switch_btn b { font-size: 13.5px; color: #222; }
.ml_pet_switch_btn i { color: #999; font-size: 11px; }
.ml_pet_avatar {
width: 30px; height: 30px; border-radius: 50%; background: #ddd center center / cover no-repeat;
flex-shrink: 0;
}
.ml_pet_switch_list {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 160px;
background: #fff; border: 1px solid #e2e2e0; border-radius: 10px; box-shadow: 0 8px 22px rgba(0,0,0,0.12);
padding: 6px; max-height: 220px; overflow-y: auto;
}
.ml_pet_switch_item {
display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: none;
background: none; border-radius: 8px; font-size: 13px; color: #333; text-align: left; cursor: pointer;
}
.ml_pet_switch_item:hover { background: #f3f4f7; }
/* [2026-08 디자인 시안 반영] 토글 버튼을 알약 모양 박스에서 "아이콘+텍스트만" 있는 가벼운
형태로 - 시안처럼 바 배경 위에 바로 얹혀있는 느낌으로 바꾸고, on 상태만 초록 텍스트로
강조한다(배경/테두리 박스는 없앰). */
.ml_daily_toggles { display: flex; flex: 1; flex-wrap: wrap; gap: 26px; min-width: 200px; position: relative; }
.ml_toggle_btn {
display: inline-flex; align-items: center; gap: 7px; padding: 0; border: none; background: none;
font-size: 13.5px; font-weight: 700; color: #888; cursor: pointer;
}
.ml_toggle_btn i { font-size: 14px; color: #c9ab7a; }
.ml_toggle_btn.ml_on { color: #2f9e44; }
.ml_toggle_btn.ml_on i { color: #2f9e44; }
/* "기록하기"는 시안처럼 필박스가 아니라 살짝 각진 주황 버튼으로 오른쪽 끝에 고정 */
.ml_record_btn {
display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0;
padding: 10px 20px; background: #e6a23d; color: #fff; border: none; border-radius: 8px;
font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.ml_record_btn:hover { background: #cf8c2a; }
/* [2026-08-25 추가] 선택된 동물이 오늘 이미 기록을 저장했으면 "기록하기" 버튼 글자를 흐리게
표시한다(클릭은 그대로 되고 다시 기록할 수도 있음 - 안내용 표시). 배경/글자색이 화면 폭마다
다른 여러 버튼 스킨(아래 미디어쿼리들 참고)에 전부 똑같이 먹히도록 특정 색상 대신 opacity를
쓴다 - .ml_record_btn 클래스 자체는 그대로 유지되므로 하나의 규칙으로 모든 스킨에 적용된다. */
.ml_record_btn.ml_record_btn_done { opacity: 0.5; }
/* [2026-08 추가, 2026-08-22 위치 이동] 며칠 연속 기록 중 텍스트 + "기록 확인" 버튼 + 포인트 토스트.
요청에 따라 별도 줄(문단)이 아니라 .ml_daily_bar 안에서 '동물 선택' 드롭다운(.ml_pet_switcher)
바로 다음 자리로 옮김 - 데스크톱/태블릿(가로 한 줄, nowrap)에서는 스위처 옆에 나란히 붙고,
모바일(.ml_daily_bar가 flex-direction:column으로 바뀌는 768px 이하)에서는 부모의
align-items:stretch 덕분에 별도 width:100% 지정 없이도 자동으로 스위처 아래 자기 줄을 차지한다. */
.ml_daily_streak {
font-size: 12.5px; font-weight: 700; color: #e8590c;
display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0; white-space: nowrap;
}
.ml_daily_streak i { font-size: 12px; }
/* [2026-08-22 수정] "기록 확인" 버튼을 없애고 연속기록 문구(#mlDailyStreak) 자체를 클릭/키보드로
눌러 달력 팝업을 열도록 통합 - 별도 버튼 없이도 클릭 가능함을 커서/포커스 표시로 안내한다. */
#mlDailyStreak {
cursor: pointer; display: inline-flex; align-items: center; gap: 4px; border-radius: 4px;
}
#mlDailyStreak:hover { color: #cf5600; }
#mlDailyStreak:focus-visible { outline: 2px solid #e8590c; outline-offset: 2px; }
#mlDailyStreak .fa-chevron-right { font-size: 9px; color: #c9ab7a; }
/* [2026-08-25 추가] "다시 오늘부터 / 기록을 시작해보세요" 안내 문구를 두 줄로 표시. 부모(.ml_daily_streak)가
white-space:nowrap을 쓰고 있어도 명시적
로 강제 줄바꿈은 그대로 적용되지만, 혹시 모를 자동
줄바꿈까지 정상 동작하도록 이 문구 안에서만 white-space를 normal로 되돌려둔다. */
.ml_daily_streak_start { display: inline-block; white-space: normal; line-height: 1.32; text-align: left; }
/* [2026-08-22 수정] 인라인 토스트를 "레이어(말풍선)" 형태로 교체 - 포인트 적립뿐 아니라 "다른
가족이 이미 체크했어요" / "오늘의 포인트는 이미 수령하셨어요" 안내까지 같은 컴포넌트를
재사용한다. 토글 바로 위에 살짝 떠 있는 느낌을 주기 위해 절대 위치 + 꼬리표(::after)로
말풍선 모양을 만들고, type별로 색만 다르게 준다. */
.ml_layer_bubble {
position: absolute; left: 0; bottom: calc(100% + 12px); z-index: 30;
padding: 9px 15px; border-radius: 10px; font-size: 12.5px; font-weight: 700; color: #fff;
white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,0.18);
opacity: 0; transform: translateY(6px); pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.ml_layer_bubble.ml_layer_show { opacity: 1; transform: translateY(0); }
.ml_layer_bubble::after {
content: ''; position: absolute; top: 100%; left: 22px;
border: 7px solid transparent;
}
.ml_layer_bubble--point { background: #e6a23d; }
.ml_layer_bubble--point::after { border-top-color: #e6a23d; }
.ml_layer_bubble--conflict { background: #e8590c; }
.ml_layer_bubble--conflict::after { border-top-color: #e8590c; }
.ml_layer_bubble--info { background: #4263eb; }
.ml_layer_bubble--info::after { border-top-color: #4263eb; }
/* [2026-08 추가] 기록 확인 팝업 - 사이트 다른 곳(현재 접속자 팝업 등)과 같은 시각적 패턴
(반투명 배경 + 가운데 카드 + 우상단 닫기 버튼)을 재사용한다. */
.ml_daily_modal_overlay {
position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.45);
align-items: center; justify-content: center; padding: 16px;
}
.ml_daily_modal_panel {
position: relative; width: 100%; max-width: 340px; max-height: 85vh; overflow-y: auto;
background: #fff; border-radius: 14px; padding: 22px 20px 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.ml_daily_modal_close {
position: absolute; top: 10px; right: 12px; border: none; background: none;
font-size: 22px; line-height: 1; cursor: pointer; color: #888;
}
.ml_daily_modal_title { margin: 0 0 14px; font-size: 15px; font-weight: 800; color: #222; }
.ml_daily_cal_dow {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px;
font-size: 10.5px; color: #999; text-align: center;
}
.ml_daily_cal_grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ml_cal_day {
position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1;
border-radius: 7px; font-size: 11.5px; color: #aaa; background: #f1f2f4;
}
.ml_cal_day.ml_cal_blank { background: none; }
.ml_cal_day.ml_cal_c1 { background: #d3f0dc; color: #2f9e44; }
.ml_cal_day.ml_cal_c2 { background: #a8e2bb; color: #22803a; }
.ml_cal_day.ml_cal_c3 { background: #51cf66; color: #fff; font-weight: 800; }
.ml_cal_day.ml_cal_today { box-shadow: inset 0 0 0 2px #132b45; font-weight: 800; }
/* 마일스톤(3·7·14·21·28·30일째) 날짜에만 붙는 작은 별 배지 - 채워진 별=그날 실제로 달성,
빈 별=아직 오지 않았거나(미래) 이번 달 안에 하루 놓쳐서 못 채운 날짜 */
.ml_cal_star { position: absolute; top: -4px; right: -3px; font-size: 9px; color: #f08c00; }
.ml_daily_point_note { margin: 12px 0 0; font-size: 11px; color: #999; line-height: 1.5; }
/* [2026-08-22 추가] "기록하기" 팝업 - 펫다이어리 글쓰기(제목/본문/사진)를 iframe으로 담는 레이어.
달력 팝업(.ml_daily_modal_*)과 같은 반투명 배경 + 가운데 카드 패턴을 재사용하되, 글쓰기 폼이라
세로 공간이 더 필요해서 패널을 더 크게 잡는다. */
.ml_record_popup_overlay {
/* [2026-08-22 수정] 상단 메뉴(#hd)가 z-index:9999로 고정되어 있어 팝업의 닫기 버튼이 메뉴에
가려지는 문제 - 사이트에서 "무조건 최상단"이 필요한 레이어(head.sub.php의 안내 팝업 등)와
같은 값으로 확실히 높여 메뉴 위에 오도록 한다. */
position: fixed; inset: 0; z-index: 999999999; background: rgba(0,0,0,0.45);
align-items: center; justify-content: center; padding: 16px;
}
.ml_record_popup_panel {
position: relative; width: 100%; max-width: 520px; height: 85vh; max-height: 720px;
background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); overflow: hidden;
}
.ml_record_popup_close {
position: absolute; top: 8px; right: 10px; z-index: 1; border: none; background: rgba(255,255,255,0.9);
width: 30px; height: 30px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer;
color: #888; box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
#mlRecordPopupIframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 600px) {
.ml_record_popup_overlay { padding: 0; }
.ml_record_popup_panel { max-width: none; width: 100%; height: 100%; max-height: none; border-radius: 0; }
}
/* ===================== 펫 메모리 ===================== */
.ml_sec_head_split { display: flex; gap: 30px; align-items: flex-start; }
.ml_sec_head_split > div:first-child { width: 240px; flex-shrink: 0; }
.ml_memory_badge {
display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 20px;
background: #fdeceb; color: #c0392b; font-size: 11px; font-weight: 800;
}
.ml_sec_head_split h3 { margin: 0 0 10px; font-size: 20px; font-weight: 800; color: #222; }
.ml_memory_desc { margin: 0 0 14px; font-size: 13px; color: #888; line-height: 1.6; }
.ml_memory_btn { font-size: 13px; font-weight: 700; color: #132b45; }
.ml_memory_btn:hover { color: #c0392b; }
/* [2026-08 디자인 시안 반영] 4열 고정 그리드 → 가로 스크롤 행으로 변경(카드 4장이 기본 폭에
딱 맞게 보이고, 5번째부터는 우측 ">" 버튼으로 넘겨봄). 스크롤바는 시각적으로 숨기고 스냅으로
카드 단위로 딱딱 멈추게 한다. */
.ml_memory_grid_wrap { flex: 1; min-width: 0; position: relative; }
.ml_memory_grid {
/* [2026-08-23] 처음에는 이 트랙에만 touch-action:pan-x pan-y를 다시 허용해 가로 스와이프를
살려뒀었는데, 그 상태에서도 화면 가장자리 근처에서 밀면 이전 화면으로 튕기는 문제가
재현된다는 신고가 있어(신고 접수), 이 트랙도 사이트 기본값(touch-action:pan-y, default.css)을
그대로 따르도록 되돌렸다 - 이제 이 카드 트랙도 손가락 가로 스와이프로는 넘어가지 않는다
(5번째 카드부터는 우측 ">" 버튼으로만 넘겨봄). */
display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
scrollbar-width: none;
}
.ml_memory_grid::-webkit-scrollbar { display: none; }
.ml_memory_card { display: block; flex: 0 0 calc((100% - 3 * 14px) / 4); scroll-snap-align: start; }
.ml_memory_thumb {
width: 100%; padding-top: 100%; border-radius: 12px; margin-bottom: 8px;
background: #f3f4f7 center center / cover no-repeat;
/* [2026-08-22 추가] 이미지 없을 때 중앙 로고(.ml_popular_thumb_logo)가 이 박스 기준으로
가운데 위치하도록 - 없으면 조상 중 가장 가까운 position 요소를 기준으로 어긋난다. */
position: relative;
}
/* [2026-08-22 요청 반영] 한 줄 말줄임(...)으로 제목이 거의 안 보인다는 피드백을 받아, 모바일
전용 화면(.km-memory h4, mobile_home.css)에 이미 적용한 것과 동일하게 2줄까지 표시하도록 수정. */
.ml_memory_title {
margin: 0 0 3px; font-size: 13px; font-weight: 700; color: #222;
overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal;
}
/* [2026-08-22 요청 반영] "OO님의 펫 메모리" 소유자 표시줄과는 별도로, 회원이 그 메모리 페이지에
직접 붙인 실제 제목이 있을 때만 그 아래 한 줄 더 표시한다. */
/* [2026-08-22 요청 반영] 각 메모리 카드의 실제 제목(회원이 직접 붙인 글 제목)을 볼드 → 일반체로 */
.ml_memory_page_title { margin: 0 0 3px; font-size: 11.5px; font-weight: 400; color: #3457A6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml_memory_date { font-size: 11.5px; color: #aaa; }
.ml_memory_grid .ml_empty { flex: 1 1 100%; }
.ml_memory_next {
position: absolute; right: -14px; top: 50%; margin-top: -18px; z-index: 3;
width: 36px; height: 36px; padding: 0; border-radius: 50%; border: none;
background: #fff; color: #132b45; box-shadow: 0 4px 14px rgba(0,0,0,0.18); cursor: pointer;
display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.ml_memory_next:hover { background: #f3f4f7; }
/* ===================== 함께 발견해요 =====================
[2026-08 디자인 시안 반영] 사진 위에 그라데이션 깔고 글자를 얹던 방식(이미지 안에 글자처럼
보이는 방식)에서, 시안처럼 "사진 위 원형 아이콘 배지 + 사진 아래 실제 HTML 텍스트 캡션"으로
변경 - 문구가 이미지 레이어가 아니라 진짜 텍스트라 화면정의서 "이미지 안에 글자 금지" 원칙에
더 잘 맞는다. */
/* [2026-08 자동추천 리빌드] 카드가 5개 미만일 때 옆이 비어 보이지 않도록, 실제 렌더된 카드 수를
--dc-count로 index.php에서 인라인 지정해 컬럼 수를 그만큼만 만든다(기본값 5는 변수 미설정 시 대비). */
.ml_discover_grid { display: grid; grid-template-columns: repeat(var(--dc-count, 5), minmax(0, 1fr)); gap: 14px; }
.ml_discover_card { display: block; }
/* [2026-08 지역선택 드롭다운] "함께 발견해요" 타이틀 옆 지역 선택 - .ml_sec_head가 이미
flex라 h3 옆에 자연스럽게 붙는다. */
.ml_discover_region_select {
margin-left: 4px; padding: 4px 8px; border: 1px solid #dcdfd8; border-radius: 6px;
background: #fff; color: #555; font-size: 12px; cursor: pointer;
}
.ml_discover_thumb {
width: 100%; padding-top: 100%; border-radius: 14px; margin-bottom: 10px;
background: #f3f4f7 center center / cover no-repeat;
position: relative;
}
.ml_discover_icon {
position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%;
background: #fff; color: #132b45; display: flex; align-items: center; justify-content: center;
font-size: 13px; box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}
.ml_discover_label {
margin: 0; color: #333; font-size: 12.5px; font-weight: 700; line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* ===================== 펫 케어 주요 서비스 ===================== */
.ml_care_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.ml_care_card {
position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px;
padding: 22px 18px 20px;
}
.ml_care_badge {
position: absolute; right: 16px; top: 16px; padding: 3px 9px; border-radius: 20px;
background: #fdeceb; color: #c0392b; font-size: 10.5px; font-weight: 800;
}
.ml_care_badge_blue { background: #e8f1fb; color: #2f6fb0; }
.ml_care_badge_green { background: #e6f6ea; color: #2f9e44; }
.ml_care_badge_purple { background: #f2e9f9; color: #9b59b6; }
.ml_care_card h4 { margin: 0 0 10px; font-size: 16px; font-weight: 800; color: #222; }
.ml_care_card p { margin: 0 0 16px; font-size: 12.5px; color: #888; line-height: 1.6; min-height: 40px; }
/* [2026-08 시안 반영] 용품추천/간편진단은 게시판 이동 대신 팝업을 여는