/* momya 카테고리 위젯 전용 CSS (모바일 앱형 UI 3단계, 2026-08-03).
   레이아웃 레벨(뒤로가기 헤더 전환/배너 숨김)은 layouts/momya/css/momya.css의
   .category-page-header / body.is-category-view 규칙이 담당 — 이 파일은 위젯
   자신의 콘텐츠(카드 리스트)만 다룬다. 색상 변수(--text 등)는 momya.css :root에
   이미 정의된 걸 그대로 쓴다(layout.html이 momya.css를 항상 먼저 로드하므로 이
   파일에서 :root를 다시 선언할 필요 없음). */

/* [2026-08-03 갱신] 토스뱅크 앱 스타일 카드 그룹 — 회색 배경(#F3F4F8) 위에 흰색
   둥근 카드 3개(인기/최신/추천 · 공지사항/이벤트 · 게시판 5개)를 간격을 두고
   배치한다. 기존 "리스트 2개 + 구분선 하나"였던 걸 대체 — .category-divider는
   이제 안 쓴다(카드 사이 간격은 아래 .category-page-body의 flex gap이 대신함). */
.category-page-body{max-width:600px;margin:0 auto;background:#F3F4F8;padding:12px;display:flex;flex-direction:column;gap:12px}
.category-card{background:#fff;border-radius:var(--radius);overflow:hidden}

.category-list{display:flex;flex-direction:column}
/* [2026-08-03 갱신, 2차 미세조정] 항목 사이 구분선을 var(--border)(#E5E7EB)→
   var(--border-soft)(#F0F1F4)로 한 번 낮춘 뒤, "그보다 살짝만 더 연하게"
   피드백으로 var(--surface-2)(#F3F4F6)로 한 단계 더 낮췄다 — 이 프로젝트에
   이보다 더 연한 이름 붙은 회색 토큰이 없어(문서화된 팔레트 확인) 기존 토큰
   재사용, 새 색 정의 없음. */
.category-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--surface-2);transition:background .12s}
.category-item:last-child{border-bottom:none}
.category-item:hover{background:var(--surface-2)}
.category-icon-box{width:44px;height:44px;border-radius:12px;flex-shrink:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.category-item-body{flex:1;min-width:0}
/* [2026-08-03 갱신] 제목 font-size는 var(--fs-label)(13px)→var(--fs-card)(15px)로
   확대(이 프로젝트 타이포 스케일 주석의 "카드제목 15" 재사용), font-weight는
   700→600으로 낮춤(15px+700이 너무 두꺼워 보인다는 피드백 — 이 프로젝트엔
   font-weight 전용 토큰이 없어 사용자 지정대로 600 직접 사용). 한 줄 설명
   (category-item-desc)은 크기·굵기 둘 다 그대로 유지. */
.category-item-name{font-size:var(--fs-card);font-weight:600;color:var(--text)}
.category-item-desc{font-size:var(--fs-caption);color:var(--text-2);margin-top:2px;line-height:1.4}
.category-item-arrow{flex-shrink:0;color:var(--text-3)}

/* [2026-08-03 갱신] 아이콘 이미지 10종 연결 — 사용자 제공 88x88 webp(44px 박스의
   2배 해상도), widgets/momya_category/img/{mid}.webp. tone-hot/new/top 3개는 이
   위젯 전용 클래스라 기존 규칙에 background-image만 얹었다. bg-free/ss/preg/info/
   life는 사이트 전역 배지 팔레트(momya.css)와 공유하는 클래스라 base 규칙은 안
   건드리고, .category-icon-box 와 묶은 더 구체적인 선택자로만 이미지를 걸어 다른
   화면(게시판 배지 등)에 영향이 없게 했다. notices/event는 cls(bg-notice)를
   공유하는 게 원래 사이트 관례(마이페이지 디자인-23)라 그대로 두고, event 에만
   momya_category.class.php가 붙여주는 cat-event 로 이미지만 따로 걸었다 — 안
   그러면 둘 다 notices 이미지로 겹쳐 보인다. 배경색(예: #FFEDD5)은 이미지 로드
   실패 시 폴백으로 계속 남겨뒀다.
   [사고+수정, 2026-08-03] tone-hot/new/top 3개만 이미지 하단이 박스 밖으로 잘려
   보이는 버그가 있었다 — 원인은 이 세 규칙이 배경색을 background 축약형
   (예: background:#FFEDD5)으로 썼던 것. 축약형은 그 안에 안 적은 하위 속성
   (background-size/position/repeat 포함)을 전부 초기값으로 되돌려버리는 게
   CSS 축약형의 기본 동작이라, .category-icon-box 의 background-size:cover 등을
   같은 명시도에서 소스 순서로 덮어써 이미지가 원본 88x88 그대로(축소 없이) 박스
   왼쪽위 44x44만 잘려 보였다. bg-free 등 7개는 background-image 만(축약형 아님)
   써서 애초에 이 문제가 없었다. 해결: background 대신 background-color 사용
   (background-color 는 다른 하위 속성을 안 건드리는 순수 단일 속성) — 이 세 규칙에
   다시 background: 축약형을 쓰지 말 것, 색만 바꿀 땐 background-color 를 쓸 것. */
.tone-hot{background-color:#FFEDD5;color:#C2410C;background-image:url('../img/hot.webp')}
.tone-new{background-color:#DBEAFE;color:#1D4ED8;background-image:url('../img/new.webp')}
.tone-top{background-color:#CCFBF1;color:#0F766E;background-image:url('../img/top.webp')}
.category-icon-box.bg-free{background-image:url('../img/free.webp')}
.category-icon-box.bg-ss{background-image:url('../img/ss.webp')}
.category-icon-box.bg-preg{background-image:url('../img/preg.webp')}
.category-icon-box.bg-info{background-image:url('../img/info.webp')}
.category-icon-box.bg-life{background-image:url('../img/tip.webp')}
.category-icon-box.bg-notice{background-image:url('../img/notices.webp')}
.category-icon-box.bg-notice.cat-event{background-image:url('../img/event.webp')}