/* ====================================================================== [2026-08 모바일 리뉴얼] 모바일 전용 메인 화면 스타일 원본 시안: www/kaminbeth-mobile-final-source/index.html (#kaminbeth-mobile-home) - [2026-08-22 최종 정리 반영] "화면 해상도 390 이하에서는 별도 제작된 모바일용 메인이 보이고, 그 외의 모든 해상도(391px 이상 - 가로로 돌린 폰, 태블릿, 데스크탑 전부 포함)는 기존 데스크탑 화면을 반응형으로 보여준다"는 사용자 지침에 따라, 전환 기준을 max-width:390px 단일 폭 조건으로 통일했다(방향(orientation) 조건은 더 이상 쓰지 않음 - 세로든 가로든 폭이 390px 이하이면 모바일 화면, 아니면 항상 데스크탑 화면). - [2026-08-23 추가 반영] 위 390px 기준을 400px로 상향 조정(사용자 요청) - 아래 전환 기준을 max-width:400px로, main_lower.css의 대응 확대 블록은 min-width:401px로 함께 수정했다. - 401px~768px 구간에서 모바일 화면을 2/3/4열로 단계적으로 넓히던 이전의 중간 브레이크포인트는 이제 도달 불가능한 코드이므로 제거했다 - 해당 폭은 이제 전부 데스크탑 화면(main_lower.css의 기존 반응형 그리드, 960px/768px/600px/480px 단계)이 담당한다. - PC 화면(401px 이상)에서는 .ml_mobile_wrap을 display:none 처리하고 기존 .ml_desktop_wrap을 그대로 노출한다. 400px 이하에서는 반대로 전환한다. PC 쪽 CSS는 이 파일에서 전혀 건드리지 않는다. - 홈페이지 고유의 밝은 톤앤매너를 유지하기 위해 휴대폰 시스템 다크 모드와 관계없이 기본 라이트 색상을 사용한다. - 시안의 바깥 "폰 프레임"(둥근 테두리+그림자로 스마트폰처럼 보이게 하던 미리보기용 장식)은 실제 모바일 브라우저에서는 이중 프레임이 되어 어색하므로 제외하고, 안쪽 앱바/콘텐츠/하단내비만 화면 전체 폭으로 구현했다 - 카드/버튼/글자 크기/간격/색상 자체는 시안과 동일하게 맞췄다. ====================================================================== */ .ml_mobile_wrap { display: none; } @media (max-width: 400px) { .ml_desktop_wrap { display: none !important; } .ml_mobile_wrap { display: block; } /* [2026-08-22 요청 반영] 모바일에서는 최상단 히어로 슬라이더(.mainVisualImage, 관리자 등록/노출 방식은 그대로 유지 - 여기서는 표시만 숨김)를 노출하지 않는다. CLAUDE_HANDOFF.md 7번 규칙("모바일 화면에 맞게 표시만 조정")의 범위 내 - PC(401px 이상)에서는 전혀 영향 없음. */ .mainVisualImage, .mainVisualImage + hr { display: none !important; } /* [2026-08-22 정정] "중복된 로고/종/사이트맵 버튼을 지워달라"는 요청은 그누보드 실제 헤더(#hd)를 가리킨 것이 아니라, 이 새 모바일 화면 자체에 만들어 둔 앱바(.km-appbar) 안의 로고/알림종/전체메뉴 버튼을 가리킨 것이었다(사용자 확인). 그래서 여기서 #hd를 숨기던 규칙은 되돌리고(그누보드 실제 헤더는 모바일에서도 원래대로 그대로 노출), 대신 mobile_home.php에서 .km-appbar 자체를 삭제했다. */ } #kaminbeth-mobile-home { font-family: inherit; color: #202823; } #kaminbeth-mobile-home * { box-sizing: border-box; } #kaminbeth-mobile-home a, #kaminbeth-mobile-home button { font: inherit; text-decoration: none; color: inherit; } #kaminbeth-mobile-home .km-phone { width: 100%; max-width: 430px; margin: 0 auto; background: #f6f8f6; } #kaminbeth-mobile-home .km-content { padding-bottom: 18px; } #kaminbeth-mobile-home .km-greeting { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 14px; background: #ffffff; } #kaminbeth-mobile-home .km-greeting p { margin: 0; color: #65716a; font-size: 13px; } #kaminbeth-mobile-home .km-greeting strong { display: block; margin-top: 4px; color: #25342b; font-weight: 600; font-size: 18px; } #kaminbeth-mobile-home .km-avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(145deg,#f3dfc8,#c8dfd0); font-size: 22px; color: #55503f; flex: 0 0 auto; } #kaminbeth-mobile-home .km-hero { display: block; position: relative; margin: 12px 14px 20px; padding: 20px 18px 60px; min-height: 170px; border-radius: 20px; overflow: hidden; background: linear-gradient(145deg,#e6f1e8,#f3e5d9); color: #22342a; } #kaminbeth-mobile-home .km-hero-tag { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 99px; background: rgba(255,255,255,.72); font-weight: 600; font-size: 12px; } #kaminbeth-mobile-home .km-hero h2 { margin: 14px 0 6px; max-width: 250px; font-weight: 700; font-size: 22px; line-height: 1.3; letter-spacing: -.02em; } #kaminbeth-mobile-home .km-hero p { margin: 0; max-width: 250px; color: #4d5c53; font-size: 13.5px; line-height: 1.5; } #kaminbeth-mobile-home .km-hero-btn { position: absolute; left: 18px; bottom: 16px; display: inline-block; border-radius: 12px; background: #3f633d; color: #fff; padding: 11px 15px; font-weight: 600; font-size: 13.5px; } #kaminbeth-mobile-home .km-section { margin: 0 14px 22px; } #kaminbeth-mobile-home .km-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; } #kaminbeth-mobile-home .km-section-title h3 { margin: 0; font-weight: 700; font-size: 16.5px; color: #22342a; } #kaminbeth-mobile-home .km-section-title a { color: #64736a; font-size: 12.5px; } #kaminbeth-mobile-home .km-quick { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px 6px; } #kaminbeth-mobile-home .km-quick a { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; min-height: 44px; } #kaminbeth-mobile-home .km-quick-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; background: #fff; box-shadow: 0 6px 18px rgba(42,65,53,.08); color: #41633f; font-size: 19px; overflow: hidden; } #kaminbeth-mobile-home .km-quick-icon img { width: 60%; height: 60%; object-fit: contain; } #kaminbeth-mobile-home .km-quick > a { font-size: 12px; font-weight: 700; color: #354a3e; } /* [2026-08 모바일 리뉴얼] "우리 아이는 오늘?" - #mlDailyBar(펫 스위처/연속기록/토글3개/기록하기)를 PC 원본 DOM 그대로 옮겨와 감싸는 자리. 실제 버튼/토글 스타일은 main_lower.css의 .ml_daily_bar, .ml_toggle_btn 등 기존 규칙을 그대로 물려받으며, 여기서는 시안처럼 모바일 폭에 맞는 여백/줄바꿈만 보정한다(기능 스타일 자체는 건드리지 않음). */ #kaminbeth-mobile-home #kmStatusHost .ml_daily_bar { display: flex; flex-direction: column; gap: 10px; } /* [2026-08-22 요청 반영] "동물 선택 드롭다운이 버튼 아래 요소에 가려서 선택이 안 됨" 버그 수정 - main_lower.css의 ".ml_daily_bar > * { position:relative; z-index:1; }" 규칙 때문에, 이 화면처럼 .ml_daily_bar가 세로로 쌓이는(column) 배치에서는 펫 전환 버튼(.ml_pet_switcher)과 그 아래 토글 버튼들(.ml_daily_toggles)이 같은 z-index(1)를 갖게 되어 DOM 순서상 나중에 오는 토글 버튼 줄이 위에 그려지면서, 버튼 밑으로 펼쳐지는 드롭다운(.ml_pet_switch_list)을 덮어버려 탭이 안 먹혔다. 이 화면에 한해 펫 전환 버튼의 쌓임 순서를 더 높여 드롭다운이 항상 다른 요소 위에 보이게 한다. */ #kaminbeth-mobile-home #kmStatusHost .ml_pet_switcher { z-index: 25; } /* [2026-08-22 요청 반영] 시안(main_lower.css)의 480px 이하 규칙이 .ml_toggle_btn에 min-width:142px/flex:0 0 auto를 주는 바람에 3개 버튼 합이 화면폭(142*3=426px)을 넘어서 "기분 좋아요" 버튼이 화면 밖으로 밀려나 있었다. 여기서 그리드 3열 + min-width:0으로 덮어써서 한 화면에 다 들어오게 하고, 아이콘/텍스트도 위아래로 재배치했다(기능은 무변경). */ #kaminbeth-mobile-home #kmStatusHost .ml_daily_toggles { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; width: 100%; overflow: visible; padding: 0; background: none; min-height: 0; } #kaminbeth-mobile-home #kmStatusHost .ml_toggle_btn { flex: 0 0 auto; min-width: 0; width: 100%; min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 2px; border-left: 0; border: 1px solid #e6e3dc; border-radius: 12px; font-size: 10.5px; line-height: 1.25; text-align: center; white-space: normal; } #kaminbeth-mobile-home #kmStatusHost .ml_toggle_btn:first-child { border-left: 1px solid #e6e3dc; } #kaminbeth-mobile-home #kmStatusHost .ml_toggle_btn i { font-size: 17px; margin: 0; } #kaminbeth-mobile-home #kmStatusHost .ml_toggle_btn.ml_on { border-color: #9fb399; background: #eaf3e8; } #kaminbeth-mobile-home .km-status-guest { padding: 16px; border-radius: 15px; background: #fff; border: 1px solid #e3e9e5; text-align: center; } #kaminbeth-mobile-home .km-status-guest p { margin: 0 0 10px; color: #65716a; font-size: 13.5px; } #kaminbeth-mobile-home .km-status-guest a { display: inline-block; min-height: 44px; line-height: 24px; padding: 10px 16px; border-radius: 11px; background: #3f633d; color: #fff; font-weight: 600; font-size: 13px; } /* [2026-08-23 요청 반영] 지금 인기 있는 이야기 - 한 화면에 3열로 전부 몰아 보여주던 것을, "함께 발견해요"(.km-discover-track)와 동일한 방식으로 6개(2열x3행)씩 한 "페이지"로 잘라 가로 스크롤 스냅 트랙에 나열한다 - 손가락으로 밀면 다음 6개(다음 페이지)가 보인다. */ #kaminbeth-mobile-home .km-story-track { /* [2026-08-23 요청 반영] 손가락 가로 스와이프가 화면 가장자리 뒤로가기 제스처와 계속 충돌해 사이트 기본값(touch-action:pan-y, default.css)을 그대로 따르도록 되돌렸다 - 손가락 스와이프로는 더 이상 넘어가지 않고, 아래 점(dot)을 탭해서 페이지를 이동한다(kmSetupTrackDots 참고). */ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } #kaminbeth-mobile-home .km-story-track::-webkit-scrollbar { display: none; } #kaminbeth-mobile-home .km-story-page { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; } #kaminbeth-mobile-home .km-story { position: relative; display: flex; align-items: flex-end; aspect-ratio: .78; border-radius: 16px; overflow: hidden; color: #fff; padding: 0; background: linear-gradient(155deg,#8cb6a0,#456856); } #kaminbeth-mobile-home .km-story:nth-child(2) { background: linear-gradient(155deg,#9ab9dd,#4e6686); } #kaminbeth-mobile-home .km-story:nth-child(3) { background: linear-gradient(155deg,#e6b6a1,#9a644f); } #kaminbeth-mobile-home .km-story:nth-child(4) { background: linear-gradient(155deg,#d8c48f,#8a6e33); } #kaminbeth-mobile-home .km-story:nth-child(5) { background: linear-gradient(155deg,#c4a8d8,#6d5286); } #kaminbeth-mobile-home .km-story:nth-child(6) { background: linear-gradient(155deg,#e6a1a1,#9a4f4f); } #kaminbeth-mobile-home .km-story-emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; background: rgba(255,255,255,.12); } #kaminbeth-mobile-home .km-story b { position: relative; z-index: 1; display: block; padding: 0 10px 10px; font-weight: 600; line-height: 1.35; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* [2026-08-22 요청 반영] 펫 메모리 - 카드 여러 장을 가로 스크롤 스냅 트랙에 나란히 두고, 손가락으로 밀어서 넘기거나(브라우저 기본 터치 스크롤) 몇 초마다 자동으로 다음 카드로 넘어간다(위 스크립트). 스크롤바는 시각적으로 숨기고, 카드 1장이 화면 폭 전체를 채우도록 flex:0 0 100%로 스냅한다. */ #kaminbeth-mobile-home .km-memory-track { /* [2026-08-23 요청 반영] touch-action:pan-x pan-y 예외를 없애고 사이트 기본값(pan-y)을 그대로 따르도록 되돌렸다 - 손가락 스와이프 대신 점(dot) 탭 또는 자동 슬라이드로만 넘어간다. */ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } #kaminbeth-mobile-home .km-memory-track::-webkit-scrollbar { display: none; } /* [2026-08-22 요청 반영] 썸네일(이미지) 가로 크기를 기존 96px보다 조금 더 키움(120px) */ #kaminbeth-mobile-home .km-memory { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 120px 1fr; gap: 13px; align-items: center; padding: 12px; border-radius: 17px; background: #ffffff; border: 1px solid #e3e9e5; } #kaminbeth-mobile-home .km-memory-art { display: grid; place-items: center; height: 96px; border-radius: 12px; background: linear-gradient(145deg,#f1dfe6,#c9ddd2); font-size: 30px; color: #7a6a72; } /* [2026-08-22 요청 반영] 제목이 한 줄로만 잘려 보이던 것을(길면 "..."만 보여 제목이 잘 안 보인다는 피드백) 2줄까지 온전히 보이도록 수정 - 게시물 데이터(subject)는 이미 담고 있었고 표시 방식만 조정. */ #kaminbeth-mobile-home .km-memory h4 { margin: 0 0 5px; font-weight: 700; font-size: 14.5px; line-height: 1.3; color: #22342a; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } /* [2026-08-22 요청 반영] "OO님의 펫 메모리"라는 소유자 표시줄과는 별도로, 회원이 그 메모리 페이지에 직접 붙인 실제 제목이 있을 때만 그 아래 한 줄 더 표시한다(없으면 이 줄 자체가 안 나옴). */ #kaminbeth-mobile-home .km-memory-page-title { margin: 0 0 5px; color: #3f633d; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #kaminbeth-mobile-home .km-memory p { margin: 0 0 9px; color: #68756d; font-size: 12px; } #kaminbeth-mobile-home .km-memory-btn { display: inline-block; border-radius: 9px; background: #745fa5; color: #fff; padding: 8px 11px; font-weight: 600; font-size: 12px; min-height: 30px; } /* [2026-08-22 요청 반영] 함께 발견해요 - 4개씩 한 "페이지"(.km-discover, 기존 2x2 그리드 그대로)를 가로 스크롤 스냅 트랙에 나열해, 손가락으로 밀면 다음 4개(다음 페이지)가 보이도록 한다. */ #kaminbeth-mobile-home .km-discover-track { /* [2026-08-23 요청 반영] touch-action:pan-x pan-y 예외를 없애고 사이트 기본값(pan-y)을 그대로 따르도록 되돌렸다 - 손가락 스와이프 대신 점(dot) 탭으로만 넘어간다. */ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } #kaminbeth-mobile-home .km-discover-track::-webkit-scrollbar { display: none; } #kaminbeth-mobile-home .km-discover { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; } #kaminbeth-mobile-home .km-discover a { display: flex; flex-direction: column; justify-content: flex-end; min-height: 112px; border-radius: 16px; padding: 12px; background: linear-gradient(145deg,#dbece3,#edf3ef); background-size: cover; background-position: center; } #kaminbeth-mobile-home .km-discover a:nth-child(2) { background-image: linear-gradient(145deg,#dceaf6,#f0f4f8); } #kaminbeth-mobile-home .km-discover a:nth-child(3) { background-image: linear-gradient(145deg,#f6e6dc,#fbf3ed); } #kaminbeth-mobile-home .km-discover a:nth-child(4) { background-image: linear-gradient(145deg,#ece7f5,#f5f2f8); } #kaminbeth-mobile-home .km-discover i { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px; border-radius: 10px; background: rgba(255,255,255,.8); font-size: 13px; color: #365c78; } #kaminbeth-mobile-home .km-discover b { display: block; font-weight: 600; line-height: 1.35; font-size: 13px; color: #22342a; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* [2026-08-22 요청 반영] 실제 사진(image)이 있는 카드는 그 사진을 배경으로 꽉 채우고, 어두운 그라데이션 오버레이(마크업 인라인 style) 위에 흰 글자로 라벨이 보이게 한다 - 사진이 없는 카드는 기존 그라데이션 배경 + 어두운 글자를 그대로 유지. */ #kaminbeth-mobile-home .km-discover a.km-discover-photo { background-image: none; } #kaminbeth-mobile-home .km-discover a.km-discover-photo i { background: rgba(255,255,255,.85); } #kaminbeth-mobile-home .km-discover a.km-discover-photo b { color: #fff; } #kaminbeth-mobile-home .km-care { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } #kaminbeth-mobile-home .km-care button, #kaminbeth-mobile-home .km-care a { position: relative; display: block; min-height: 118px; border: 0; border-radius: 16px; background: #eaf2f7; text-align: left; padding: 14px; cursor: pointer; overflow: hidden; width: 100%; } #kaminbeth-mobile-home .km-care > :nth-child(2) { background: #eef2e7; } #kaminbeth-mobile-home .km-care > :nth-child(3) { background: #fff1e7; } #kaminbeth-mobile-home .km-care > :nth-child(4) { background: #eeeaf7; } #kaminbeth-mobile-home .km-care b { display: block; margin-bottom: 6px; font-weight: 700; font-size: 14.5px; color: #22342a; } #kaminbeth-mobile-home .km-care span { display: block; max-width: 105px; color: #65716a; font-size: 11.5px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #kaminbeth-mobile-home .km-care i { position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.78); color: #365c78; font-size: 14px; } #kaminbeth-mobile-home .km-care-info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; } #kaminbeth-mobile-home .km-care-info span { display: flex; align-items: center; gap: 6px; color: #66736b; font-size: 11.5px; } #kaminbeth-mobile-home .km-donate { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-radius: 17px; background: linear-gradient(135deg,#eef5e9,#fff1ec); } #kaminbeth-mobile-home .km-donate p { margin: 0 0 5px; color: #68746d; font-size: 12px; } #kaminbeth-mobile-home .km-donate strong { font-weight: 700; font-size: 18px; color: #22342a; } #kaminbeth-mobile-home .km-donate button { border: 0; border-radius: 11px; background: #3f633d; color: #fff; padding: 11px 14px; font-weight: 600; cursor: pointer; min-height: 44px; font-size: 13px; } #kaminbeth-mobile-home .km-numbers { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; } #kaminbeth-mobile-home .km-number { padding: 13px; border-radius: 14px; background: #fff; border: 1px solid #e3e9e5; } #kaminbeth-mobile-home .km-number span { display: block; margin-bottom: 5px; color: #6b7870; font-size: 11.5px; } #kaminbeth-mobile-home .km-number strong { font-size: 17px; font-weight: 700; color: #22342a; } #kaminbeth-mobile-home .km-navbar { display: grid; grid-template-columns: repeat(5,1fr); padding: 8px 4px 10px; background: rgba(255,255,255,.98); border-top: 1px solid #e0e7e2; position: sticky; bottom: 0; z-index: 5; } #kaminbeth-mobile-home .km-nav { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 46px; color: #78837d; padding: 4px 2px; } #kaminbeth-mobile-home .km-nav i { font-size: 17px; } #kaminbeth-mobile-home .km-nav span { font-size: 10.5px; } #kaminbeth-mobile-home .km-nav[aria-selected="true"] { color: #3f633d; } #kaminbeth-mobile-home .ml_ad_mobile_slot { margin: 0 14px 22px; } /* [2026-08-22 요청 반영] 배너 이미지 세로 폭이 배너 영역(가로 3.4:1로 고정된 상자, object-fit:cover) 보다 큰 경우 위/아래가 잘려서 안 보이던 문제 - 이미지를 자르는 대신, object-position을 위쪽 <-> 아래쪽으로 천천히 자동으로 오가게 해서 시간이 지나면 이미지 전체 내용을 다 볼 수 있게 한다. 이미지가 상자 비율과 딱 맞아 잘릴 부분이 없는 배너는 움직여도 실제로는 그대로 보여 무해하다. */ #kaminbeth-mobile-home .ml_ad_mobile_slot .ml_ad_mobile_copy img { animation: kmAdBannerPan 7s ease-in-out infinite alternate; } @keyframes kmAdBannerPan { 0% { object-position: center top; } 100% { object-position: center bottom; } } @media (prefers-reduced-motion: reduce) { #kaminbeth-mobile-home .ml_ad_mobile_slot .ml_ad_mobile_copy img { animation: none; } } /* [2026-08-22 요청 반영] 캐러셀(인기 이야기 / 펫 메모리 / 함께 발견해요) 공용 하단 점(dots) 표시 - 지금 몇 번째 카드/페이지를 보고 있는지 알려준다. [2026-08-23 요청 반영] 손가락 스와이프를 완전히 없애면서, 점을 눈으로 보기만 하는 표시에서 "탭하면 그 페이지로 이동"하는 버튼으로 바꿔 스와이프 없이도 다음 페이지를 볼 수 있게 했다 (JS: kmSetupTrackDots, mobile_home.php). 점 자체는 작아서(6~16px) ::after로 보이지 않는 여백을 더해 탭 히트 영역을 넓혔다. */ #kaminbeth-mobile-home .km-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; } #kaminbeth-mobile-home .km-dots span { width: 6px; height: 6px; border-radius: 50%; background: #d7ded9; transition: background .2s, width .2s; position: relative; cursor: pointer; } #kaminbeth-mobile-home .km-dots span::after { content: ''; position: absolute; inset: -9px; } #kaminbeth-mobile-home .km-dots span.on { background: #3f633d; width: 16px; border-radius: 3px; } @media (max-width: 360px) { #kaminbeth-mobile-home .km-quick-icon { width: 46px; height: 46px; } #kaminbeth-mobile-home .km-hero h2 { font-size: 19px; } #kaminbeth-mobile-home .km-story b { font-size: 12px; } }