/* MOMYA-SKIN v20260722-12 momya.css */ /* ── Design tokens ───────────────────────────────────────── TYPE SCALE (px): 11 · 12 · 13 · 14 · 15 · 16 · 17 · 18 · 20 · 22 11 meta/caption · 12 secondary · 13 body · 14 body-emphasis · 15 card 16 subhead/section · 17 comment head · 18 detail title · 20 page title · 22 brand/logo WEIGHTS: 400 body · 500 medium · 700 bold · 800 heading/brand ─────────────────────────────────────────────────────────── */ :root{ --bg:#fff; --surface:#fff; --surface-2:#F3F4F6; --green:#15803D; --green-d:#166534; --green-soft:#F0FDF4; --black:#111827; --text:#111827; --text-2:#6B7280; --text-3:#9CA3AF; --border:#E5E7EB; --border-2:#D1D5DB; --border-soft:#F0F1F4; --radius:12px; --radius-sm:9px; /* 타이포 스케일 (역할별 글씨 규칙) — 화면 공통 화면제목 20·700 / 상세글제목 18·700 / 섹션헤더 17·700(head)·16·700(section) / 카드제목 15·600 본문 14·400 / 보조라벨 13·500~600 / 캡션 12·400(text-3) / 마이크로뱃지 11·600 title·head 는 글상세 CSS 대조(design/prototype.css 21행) 로 추가됨 */ --fs-display:20px; --fs-title:18px; --fs-head:17px; --fs-section:16px; --fs-card:15px; --fs-body:14px; --fs-label:13px; --fs-caption:12px; --fs-micro:11px; --shadow:0 1px 0 rgba(0,0,0,.04),0 4px 20px -8px rgba(0,0,0,.12); --red:#EF4444; --red-d:#DC2626; --red-soft:#FEF2F2; --link:#2563EB; --tabbar-h:64px; /* [2026-08-03 조정] 56px→64px, "약간 좁아 보인다"는 피드백으로 8px 키움 — 이 값 하나만 바꾸면 main padding-bottom/토스트 bottom이 자동으로 같이 따라온다는 걸 로컬 mockup으로 재검증 완료(계산식이 전부 var(--tabbar-h) 참조라 값 교체만으로 연쇄 적용, 다른 곳은 안 건드림). [모바일 앱형 UI 2-2단계, 2026-08-03] 하단 고정 탭바(.tabbar) 높이 — main padding-bottom·토스트 bottom 계산이 전부 이 값을 공유한다(board.momya.css도 :root가 momya.css 하나뿐이라 그대로 참조 가능 — 문서 루트에 선언된 커스텀 속성은 파일 구분 없이 같은 페이지의 모든 스타일시트에서 보인다). 나중에 탭바 높이를 바꿀 일이 있으면 이 값 하나만 고치면 세 군데(탭바 자신/main/토스트)가 같이 맞는다. */} *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{font-family:"Pretendard",system-ui,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.5;font-weight:400;letter-spacing:-.2px} a{color:inherit;text-decoration:none} svg{display:block} /* ── Header ── */ header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)} .bar{max-width:1060px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:11px 20px} .logo{font-weight:700;font-size:22px;color:var(--black);flex-shrink:0;letter-spacing:-1px;display:flex;align-items:center;gap:6px;line-height:1} .logo-img{height:24px;width:auto} .search{flex:1;min-width:0;max-width:440px;margin-right:auto;display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:9px 16px;transition:border-color .15s,box-shadow .15s;color:var(--text-3)} .search:focus-within{border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)} .search input{border:none;outline:none;background:none;font-family:inherit;font-size:14px;width:100%;color:var(--text)} .search input::placeholder{color:var(--text-3)} /* [2026-07-31] 검색 아이콘을 순수 svg 에서 실제 type=submit 버튼으로 교체하며 추가 — .mobile-search-inner button(864행 아래)이 이미 쓰는 것과 동일한 "버튼 크롬은 지우고 아이콘만 보이게" 패턴. color 는 명시하지 않고 상속시켜 .search 자신의 color:var(--text-3)(위 34행)를 그대로 물려받는다 — 이전에 svg 가 stroke="currentColor"로 부모 색을 상속하던 것과 동일한 결과. */ .search button{background:none;border:none;cursor:pointer;color:inherit;display:flex;align-items:center;flex-shrink:0;padding:0} .btn-signup{background:var(--black);color:#fff;border:none;border-radius:999px;padding:8px 16px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0;transition:opacity .15s} .btn-signup:hover{opacity:.82} .btn-login{background:var(--green);color:#fff;border:none;border-radius:999px;padding:8px 16px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0;transition:background .15s} .btn-login:hover{background:var(--green-d)} .btn-write{display:flex;align-items:center;gap:6px;flex-shrink:0;cursor:pointer;background:var(--black);color:#fff;border:none;border-radius:999px;padding:9px 17px;font-family:inherit;font-size:13px;font-weight:600;line-height:16px;transition:background .15s,transform .08s} .btn-write:hover{background:#333} .btn-write:active{transform:scale(.96)} .btn-mypage-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;border:none;cursor:pointer;flex-shrink:0;text-decoration:none;transition:background .15s,transform .08s} .btn-mypage-icon:hover{background:var(--green-d)} .btn-mypage-icon:active{transform:scale(.94)} .logout{font-size:13px;color:var(--text-2);cursor:pointer;flex-shrink:0;padding:6px} .logout:hover{color:var(--text)} .icon-btn{background:none;border:none;cursor:pointer;color:var(--text-2);flex-shrink:0;display:flex;align-items:center;padding:6px;border-radius:8px;transition:background .15s} .icon-btn:hover{background:var(--surface-2)} .only-mobile{display:none} /* ── Layout ── */ main{max-width:1060px;margin:0 auto;padding:22px 20px;position:relative;z-index:1} .layout{display:flex;gap:10px;align-items:flex-start} /* ── Sidebar ── */ .sidebar{width:220px;flex-shrink:0;position:sticky;top:68px;padding:8px 6px} .sb-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;color:var(--text-2);cursor:pointer;transition:all .12s;margin-bottom:2px;user-select:none} .sb-item:hover{background:var(--surface-2);color:var(--text)} .sb-item.active{background:var(--green-soft);color:var(--green);font-weight:600} .sb-divider{height:1px;background:var(--border);margin:10px 12px 12px} .sb-board-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;color:var(--text-2);cursor:pointer;transition:all .12s;margin-bottom:2px;user-select:none} .sb-board-item:hover{background:var(--surface-2);color:var(--text)} .sb-board-item.active{background:var(--green-soft);color:var(--green);font-weight:600} .sb-avatar{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;color:#fff} /* [2026-08-03 추가] PC 사이드바 아이콘 10개(인기/최신/추천/공지사항/이벤트/게시판 5개) 이미지 교체 — widgets/momya_category 위젯에서 쓰는 것과 같은 이미지를 layouts/momya/img/ 에 복사해 이 레이아웃 자신의 폴더 안에서 독립적으로 참조한다 (레이아웃이 특정 위젯의 내부 폴더에 의존하지 않도록, 파일이 두 곳에 중복되는 대신 각자 자기 폴더 안에 자기 복사본을 둔다). 기존엔 정렬탭/섹션 5개가 stroke 색상 SVG 선(.sb-item svg, 이제 삭제됨), 게시판 5개가 원형 이모지 아바타(.sb-avatar, 원형이라 카테고리 페이지의 "모서리 둥근 사각형"과 달라 이번 대상에서 제외하고 새 클래스로 통일)였는데, 이제 10개 전부 .sb-icon-box 하나로 통일된 모서리 둥근 사각형 이미지가 됐다. 크기는 새로 만들지 않고 기존 .sb-avatar 의 24px를 그대로 재사용했다(이미 이 사이드바 행 높이/여백에 맞게 검증된 값이라 안전). 모바일 드로어(.ditem-icon.sb-avatar)는 이번 라운드에서 안 건드려 원형 이모지 그대로다 — .sb-avatar 규칙 자체를 지우지 않은 이유이기도 하다. [background: 축약형 함정 재발 방지] 카테고리 페이지에서 겪은 문제(축약형이 background-size 등 다른 하위 속성을 초기값으로 리셋)를 피하려고 배경색은 background-color, 이미지는 background-image로 분리해서 썼다. */ .sb-icon-box{width:24px;height:24px;border-radius:var(--radius-sm);flex-shrink:0;background-color:var(--surface-2);background-size:cover;background-position:center;background-repeat:no-repeat} .sb-icon-box.icon-hot{background-image:url('../img/hot.webp')} .sb-icon-box.icon-new{background-image:url('../img/new.webp')} .sb-icon-box.icon-top{background-image:url('../img/top.webp')} .sb-icon-box.icon-notices{background-image:url('../img/notices.webp')} .sb-icon-box.icon-event{background-image:url('../img/event.webp')} .sb-icon-box.icon-free{background-image:url('../img/free.webp')} .sb-icon-box.icon-ss{background-image:url('../img/ss.webp')} .sb-icon-box.icon-preg{background-image:url('../img/preg.webp')} .sb-icon-box.icon-info{background-image:url('../img/info.webp')} .sb-icon-box.icon-tip{background-image:url('../img/tip.webp')} /* ── Content ── */ .content{flex:1;min-width:0} /* 홈: 배너 위 + 피드 아래 (세로 1단) / 게시판: 피드 좌 + 배너 우 (가로 2단) */ .content-inner{display:flex;flex-direction:column-reverse;gap:22px} .feed-col{min-width:0} .banner-col{min-width:0} .content-inner.board-mode{flex-direction:row;gap:22px;align-items:flex-start} .content-inner.board-mode .feed-col{flex:1;min-width:0;order:1} .content-inner.board-mode .banner-col{width:240px;flex-shrink:0;order:2;position:sticky;top:68px} /* 목록/피드 페이지(글상세 아님): 사이드바(220px)+배너(240px)가 둘 다 켜진 채로 우측 고정이면 721~959px 근방에서 feed-col 이 배너보다 좁아지는 문제가 있었다(2026-07-22 폴드 펼침 폭에서 실제로 겪음). 처음엔 이 구간에서 배너를 숨겼는데, 그러면 1024px 랩탑처럼 배너를 보여줘도 충분한 폭에서까지 배너가 사라지는 부작용이 있었다 (2026-07-22 재수정) — "숨김" 대신 이 구간만 모바일과 같은 방식(본문 아래로 스택)을 쓰기로 바꿨다. 960px 기준 근거: 사이드바220+gap10+배너240+gap22+본문좌우패딩40=532px 를 제해도 feed-col 이 960-532=428px 남아 넉넉하다(그 아래로는 배너를 세로 고정폭으로 유지할수록 feed-col 이 배너보다 좁아짐). 960px 이상은 베이스 규칙(위 83~85행) 그대로 우측 세로 배치. :not(.is-post-view) 로 글상세 쪽 기존 오버라이드(오버라이드 6, 761px 이상 가로유지)와는 안 겹치게 분리했다 — 그쪽은 안 건드림. */ @media(max-width:959px) and (min-width:721px){ body:not(.is-post-view) .content-inner.board-mode{flex-direction:column;gap:0;align-items:stretch} body:not(.is-post-view) .content-inner.board-mode .banner-col{display:contents} body:not(.is-post-view) .content-inner.board-mode .pick-wrap{order:1;margin-bottom:18px} body:not(.is-post-view) .content-inner.board-mode .feed-col{order:2} body:not(.is-post-view) .content-inner.board-mode .ev-wrap{order:3;margin-top:24px} body:not(.is-post-view) .content-inner.board-mode .pick-side{flex-direction:row} body:not(.is-post-view) .content-inner.board-mode .pick-side .sban{flex:1 1 0;min-width:0} body:not(.is-post-view) .content-inner.board-mode .ev-grid{grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:0} body:not(.is-post-view) .content-inner.board-mode .roller{aspect-ratio:16/9} body:not(.is-post-view) .content-inner.board-mode .pick-label{margin-bottom:11px} body:not(.is-post-view) .content-inner.board-mode .ev-label{margin:0 0 11px} body:not(.is-post-view) .content-inner.board-mode .ev-img-ph{font-size:22px;font-weight:700} /* [2026-08-03 삭제] .ev-ttl/.ev-sub 전용 규칙 제거 — 아래 192행대 board-mode unconditional 규칙이 홈과 동일값(13px/13px)으로 통일되면서 이 태블릿 전용 재선언(기존에도 같은 14px/12px)이 완전히 무의미해졌다. [2026-08-03 추가 삭제] .ev-body(padding) 재선언도 같은 이유로 제거 — 기존에도 이미 10px 11px 12px 로 홈과 같은 값이었고(데스크톱만 7px 9px 9px 로 달랐음), 아래 204행대 unconditional 규칙을 홈과 통일하면서 이 재선언도 무의미해졌다. */ } /* [2026-07-31, 더 이상 도달 불가 — 참고용으로 남기고 삭제는 안 함] 공지/이벤트 글이 잘 안 보인다는 피드백으로 2026-07-23 결정을 뒤집어, 공지/이벤트도 이제 다른 게시판과 동일하게 board-mode 를 쓴다(layout.html $momya_content_mode 참고) — layout.html 이 section-mode 클래스를 더 이상 출력하지 않아 아래 선택자들은 이제 어떤 페이지에도 매치되지 않는다. 아래는 2026-07-23~07-31 사이의 과거 동작 기록: 공지/이벤트 섹션 "목록" 화면만 board-mode(우측 세로 고정)를 안 썼다. 1024px 이상은 80행 기본 규칙(column-reverse)이 그대로 적용돼 홈과 같은 "다 몰림"이 됐고, 1023px 이하만 PICK 은 위, 이벤트카드는 본문 아래로 나눴다. 같은 게시판이라도 글 상세는 layout.html 에서 이때도 이미 board-mode 를 그대로 썼으므로 안 겹쳤다. */ @media(max-width:1023px){ .content-inner.section-mode{flex-direction:column;gap:0;align-items:stretch} .content-inner.section-mode .banner-col{display:contents} .content-inner.section-mode .pick-wrap{order:1;margin-bottom:18px} .content-inner.section-mode .feed-col{order:2} .content-inner.section-mode .ev-wrap{order:3;margin-top:24px} /* 롤링 배너 아래에 작은 배너 2개를 가로로(게시판 부류 board-mode와 동일 값, 2026-07-24 확정) */ .content-inner.section-mode .pick-area{grid-template-columns:1fr} .content-inner.section-mode .pick-side{flex-direction:row} .content-inner.section-mode .pick-side .sban{flex:1 1 0;min-width:0} } /* 홈(비-board-mode) PICK 구획: 721~1023px(태블릿·폴드 펼침)도 모바일과 같은 구조 (롤링 전체폭 + 사이드 가로 한 줄)로 확장한다(2026-07-24 확정, 사이드 배너가 2fr/1fr 그리드의 좁은 1fr 칸에 눌리는 문제). 720px 이하의 헤더/내비게이션(사이드바↔햄버거) 전환 기준값(742행 @media(max-width:720px))은 그대로 두기 위해 PICK 구획만 따로 분리한 전용 구간이다 — 720px 블록에 값만 올리면 헤더 전환까지 같이 밀린다. board-mode(게시판 목록, 공지/이벤트 포함 — 2026-07-31부터)는 96행에 이미 721~959px 전용 규칙이 있어 대상이 아니다. section-mode 는 2026-07-31부터 어떤 페이지에도 안 붙는 죽은 클래스라(바로 위 @media(max-width:1023px) 블록 주석 참고) 겹칠 일 자체가 없다. 이벤트 그리드도 같은 구간: PC(1024px 이상, 199행 기본값)는 3열 유지, 이 구간만 2열로 줄인다(2026-07-24 추가 확정). */ @media(min-width:721px) and (max-width:1023px){ .content-inner:not(.board-mode) .pick-area{grid-template-columns:1fr} .content-inner:not(.board-mode) .pick-side{flex-direction:row} .content-inner:not(.board-mode) .pick-side .sban{flex:1 1 0;min-width:0;aspect-ratio:16/9;min-height:auto} .content-inner:not(.board-mode) .ev-grid{grid-template-columns:repeat(2,1fr)} } /* 게시판 모드에선 배너를 세로로 압축 */ .content-inner.board-mode .pick-area{grid-template-columns:1fr;margin-bottom:14px} .content-inner.board-mode .pick-side{flex-direction:column;gap:7px} .content-inner.board-mode .ev-grid{grid-template-columns:1fr;margin-bottom:0;gap:7px} .content-inner.board-mode .roller{min-height:120px} .content-inner.board-mode .pick-label{margin-bottom:8px} .content-inner.board-mode .ev-label{margin:12px 0 8px} /* [2026-08-03 갱신] 홈(13px/13px)과 통일 — 기존 14px/12px에서 변경. PC/태블릿 전 구간에 적용되는 unconditional 규칙이라 이 한 곳만 고치면 됨(태블릿 전용 재선언은 위에서 삭제, 모바일 전용은 아래 720px 블록에서 별도 관리). */ .content-inner.board-mode .ev-ttl{font-size:13px} .content-inner.board-mode .ev-sub{font-size:13px} /* [2026-08-03 삭제] .ev-body(padding) 전용 규칙(7px 9px 9px) 제거 — 홈과 통일(10px 11px 12px)되면서 293행대 unconditional 기본 규칙과 완전히 같은 값이 되어 무의미해졌다. 태블릿/모바일 전용 재선언도 같은 이유로 함께 삭제. */ .board-title{font-weight:700;font-size:20px;letter-spacing:-.5px;margin:0 0 14px;display:flex;align-items:center;gap:9px} .board-title .bt-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff} /* [2026-08-03 추가, 모바일 전용] 게시판 목록(자유수다방 등) 헤더 — 원형 아이콘 제거, 게시판 이름을 헤더 로고와 동일 크기(var(--fs-head), 17px)로 축소. PC는 이 미디어쿼리 밖이라 무관. 공지사항/이벤트는 다른 컴포넌트(.sec-head, 이미 17px·사각형 SVG 아이콘)를 써서 이 규칙 대상이 아니다 — 보고에 별도 명시. */ @media(max-width:720px){ .board-title{font-size:var(--fs-head)} .board-title .bt-avatar{display:none} } /* [2026-08-03 갱신] "PICK" 글자만 초록으로 강조하던 .pick-label span{color:var(--green)} 규칙을 제거 — 이제 "엄마야"와 같은 색(부모 .pick-label의 상속된 기본 텍스트 색) 으로 통일된다. */ .pick-label{font-weight:700;font-size:17px;margin:0 0 11px;letter-spacing:-.5px} /* [2026-08-03 추가] "엄마야 PICK" 라벨을 모바일(720px 이하)에서만 숨김, PC는 유지 — .pick-label은 layout.html의 .banner-col 안 한 곳에만 있어(홈/게시판 목록 등 board-mode를 쓰는 모든 화면이 이 하나의 마크업을 공유) 이 규칙 하나로 전체 적용된다. 다른 .pick-label 규칙들(위, margin-bottom 조정용)은 display를 안 건드려 충돌 없음. */ @media(max-width:720px){ /* [2026-08-03 추가] 모바일에서 헤더 로고와 같은 크기(var(--fs-head), 17px — header .logo 모바일 규칙과 동일한 토큰)로 — 지금은 바로 위 display:none 때문에 실제로는 안 보여 시각적 효과는 없지만, 나중에 이 숨김이 풀리면 바로 맞는 크기가 적용되도록 같이 추가해뒀다. PC(17px, 위 기본 규칙)는 이 미디어쿼리 밖이라 무관. */ .pick-label{display:none;font-size:var(--fs-head)} } /* ── PICK 배너 영역 ── */ .pick-area{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-bottom:28px;align-items:stretch} /* 롤링 슬라이더 (이미지형 광고 슬롯) */ .roller{width:100%;border-radius:var(--radius);overflow:hidden;position:relative;cursor:pointer;aspect-ratio:16/9;container-type:inline-size;align-self:start} .roller img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none} .roller-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1);height:100%;touch-action:pan-y} .slide{min-width:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left;padding:7% 6%;gap:1.4cqi;position:relative;overflow:hidden} .slide-0{background:linear-gradient(135deg,#0ea5e9 0%,#6366f1 100%)} .slide-1{background:linear-gradient(135deg,#f59e0b 0%,#ef4444 100%)} .slide-2{background:linear-gradient(135deg,#15803d 0%,#0ea5e9 100%)} /* 글씨를 박스 크기에 비례(cqi)시켜 구간별 점프·겹침 없이 같이 스케일 */ .slide-tag{font-size:clamp(9px,2.4cqi,12px);font-weight:700;background:rgba(255,255,255,.22);color:#fff;padding:.5cqi 2.2cqi;border-radius:999px;align-self:flex-start;line-height:1.5} .slide-ttl{font-size:clamp(15px,6cqi,28px);font-weight:700;color:#fff;line-height:1.2;letter-spacing:-.5px} .slide-sub{font-size:clamp(10px,2.9cqi,14px);color:rgba(255,255,255,.88);line-height:1.4} .roller-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;gap:6px;z-index:3;justify-content:center} .rdot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:all .2s;border:none;padding:0} .rdot.on{background:#fff;width:20px;border-radius:999px} .slide.img-slide{padding:0;gap:0} .sban.img-sban{padding:0} /* 우측 작은 배너 2개 (이미지형 광고 슬롯) */ .pick-side{display:flex;flex-direction:column;gap:10px} .sban{border-radius:var(--radius-sm);padding:8% 8%;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;gap:1cqi;text-align:left;aspect-ratio:16/9;overflow:hidden;container-type:inline-size;transition:transform .15s,box-shadow .15s} .content-inner:not(.board-mode) .pick-side{min-height:0} .content-inner:not(.board-mode) .pick-side .sban{flex:1 1 0;min-height:0;aspect-ratio:auto} .sban img{width:100%;height:100%;object-fit:cover;display:block} .sban:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .sban-0{background:#F5F3FF;color:#5B21B6} .sban-1{background:#FFF7ED;color:#9A3412} .sban-tag{font-size:clamp(9px,4cqi,11px);font-weight:600;padding:.6cqi 2.5cqi;border-radius:999px;align-self:flex-start;line-height:1.5} .sban-0 .sban-tag{background:#EDE9FE;color:#5B21B6} .sban-1 .sban-tag{background:#FFEDD5;color:#9A3412} .sban-ttl{font-size:clamp(13px,7cqi,17px);font-weight:700;line-height:1.3;letter-spacing:-.3px} .sban-sub{font-size:clamp(10px,3.6cqi,12px);opacity:.85} /* [2026-08-03 추가, 모바일 전용] 롤링+사이드 통합 슬라이드쇼(#rollerMobile) — PC/ 태블릿(721px 이상)은 기본값 그대로 숨김 유지, 위 .roller(#roller)/.pick-side CSS는 이 블록에서 전혀 안 건드림(선택자도 겹치지 않음). 720px 이하에서만 서로 자리를 바꾼다 — .roller/.slide/.roller-dots/.rdot 클래스는 그대로 공유해서 시각 스타일(둥근 모서리·16:9·점 표시 등)은 위 PC용 롤러와 동일하게 상속받는다. */ .pick-roller-mobile{display:none} @media(max-width:720px){ #roller,.pick-side{display:none} .pick-roller-mobile{display:block} } /* [2026-08-03 추가, 모바일 전용] 빠른 메뉴 — PICK 배너 바로 아래, 최근 인기글 위. 커뮤니티 게시판 5개+공지사항+이벤트 7개를 4열 그리드로 배치(홈 mid에서만 렌더링, cond는 layout.html). 아이콘 배경이미지 클래스(.bg-free 등)는 카테고리 페이지(momya_category.css)와 동일 접미사를 재사용하되, .quick-menu-icon 과 묶은 더 구체적인 선택자로만 걸어서 배지 색상 규칙(.badge.bg-free 등)과 전혀 안 겹치게 했다 — 카테고리 페이지의 .category-icon-box.bg-free 와 같은 원리. [2026-08-03 수정, 실기기 확인 후] 배지용 .bg-free 등(529/2311행)이 background: 축약형을 쓰는데, 그 규칙과 아래 .quick-menu-icon(수정 전)의 background-size가 명시도(0,1,0)까지 우연히 같아서 파일 뒤쪽인 배지 규칙이 이겨 background-size 가 초기값(auto)으로 되돌아갔다 — 이미지가 원본 크기 그대로 48px 박스에 잘려 보인 원인. background-size/position/repeat 를 .quick-menu-icon.bg-X 복합 선택자(명시도 0,2,0, 배지 규칙보다 항상 높음) 쪽으로 옮겨서 해결 — 이 사이트가 이미 여러 번 겪은 "축약형이 형제 속성을 초기화하는" 함정과 같은 계열이지만, 이번엔 축약형 자체가 아니라 명시도가 우연히 같은 별개 규칙이 파일 뒤쪽에서 이긴 경우였다. background-color 는 base 규칙에서 뺐다 — 배지 규칙의 색이 게시판마다 다른 톤이라(자유=회색, 생활정보=베이지 등) 그대로 두면 이미지 로딩 전/실패 시 게시판별로 다른 배경색이 자연스럽게 폴백된다. */ .quick-menu{display:none} @media(max-width:720px){ .quick-menu{display:block;margin-bottom:28px} } .quick-menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 6px} .quick-menu-item{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none} .quick-menu-icon{width:48px;height:48px;border-radius:14px} .quick-menu-name{font-size:var(--fs-caption);font-weight:500;color:var(--text-2);text-align:center;word-break:keep-all} .quick-menu-icon.bg-free, .quick-menu-icon.bg-ss, .quick-menu-icon.bg-preg, .quick-menu-icon.bg-info, .quick-menu-icon.bg-life, .quick-menu-icon.bg-notice{background-size:cover;background-position:center;background-repeat:no-repeat} .quick-menu-icon.bg-free{background-image:url('../img/free.webp')} .quick-menu-icon.bg-ss{background-image:url('../img/ss.webp')} .quick-menu-icon.bg-preg{background-image:url('../img/preg.webp')} .quick-menu-icon.bg-info{background-image:url('../img/info.webp')} .quick-menu-icon.bg-life{background-image:url('../img/tip.webp')} .quick-menu-icon.bg-notice{background-image:url('../img/notices.webp')} .quick-menu-icon.bg-notice.cat-event{background-image:url('../img/event.webp')} /* [2026-08-03 추가, 모바일 전용] 홈 화면 "최근 인기글" 5개 — PICK 배너와 이벤트 섹션 사이. 서버는 항상 렌더링(layout.html cond="$mid=='home' && ...")하고 PC는 여기서 숨긴다 — 위 .pick-roller-mobile과 동일 원칙. 카드 자체(.pv-more-*)는 post-view 관련글 더보기 섹션의 기존 CSS를 그대로 재사용한다. */ .hot-wrap{display:none} @media(max-width:720px){ .hot-wrap{display:block;margin-bottom:28px} } /* [2026-08-03 추가] 카드 사이 구분선 — .pv-more-item 자체(1041행)는 이 구분선이 없는 상태 그대로 두고(post-view 관련글 더보기 섹션은 이번 요청 대상이 아니라 변경 없이 유지), .hot-wrap 안에서만 카테고리 페이지/게시판 목록과 동일한 var(--surface-2)로 추가했다. 마지막 카드는 다음 섹션(이벤트)과 바로 붙으므로 :last-child 에서 제거. */ .hot-wrap .pv-more-item{border-bottom:1px solid var(--surface-2)} .hot-wrap .pv-more-item:last-child{border-bottom:none} /* [2026-08-03 추가] 썸네일 테두리 제거 — 원본 .pv-more-thumb(1048행, border:1px solid var(--border))는 글상세 관련글 더보기 섹션이 여전히 쓰므로 그대로 두고, 이 섹션 안에서만 덮어썼다. */ .hot-wrap .pv-more-thumb{border:none} /* [2026-08-03 추가, 홈 모바일 전용] 이벤트 카드 아래로 이어지는 실시간 인기/최신/ 추천순 탭+게시글 목록(.feed-col, 실제로는 홈 mid 에 배치된 momya_feed 위젯 출력)을 숨긴다. .content-inner:not(.board-mode) 로 스코프를 좁혀서 안전하다 — $momya_content_mode 계산(layout.html)이 mid=='home' 일 때만 board-mode 클래스를 안 붙이므로, 이 선택자는 홈 화면에서만 매치되고 hot/new/top(둘 다 board-mode 적용 대상이라 이 선택자 자체가 안 걸림)·게시판 목록에는 전혀 영향 없다. */ @media(max-width:720px){ .content-inner:not(.board-mode) .feed-col{display:none} } /* ── 이벤트 섹션 ── */ /* [2026-08-03 갱신] "이벤트" 글자만 초록으로 강조하던 .ev-label span{color:var(--green)} 규칙을 제거 — .pick-label과 동일하게 "엄마야"와 같은 색으로 통일된다. */ /* [2026-08-03 갱신] 더보기 링크 추가로 flex 배치— 라벨 텍스트(첫 번째 자식)와 링크(두 번째 자식)를 양끝 정렬. 텍스트가 여러 노드(로고+강조span)라 하나의 flex item이 되도록 감싸는 span이 layout.html 쪽에 추가됐다(이 규칙만으론 부족, 마크업도 같이 봐야 함). */ .ev-label{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:17px;margin:0 0 11px;letter-spacing:-.5px} /* [2026-08-03 추가] 모바일에서 헤더 로고와 같은 크기(var(--fs-head), 17px) — 값 자체는 위 기본 규칙과 같지만, header .logo 모바일 규칙과 같은 토큰을 명시적으로 참조해서 의도적으로 맞춘 값임을 코드에 남긴다(나중에 --fs-head 값이 바뀌면 이 라벨도 같이 따라간다). PC는 이 미디어쿼리 밖이라 무관. */ @media(max-width:720px){ .ev-label{font-size:var(--fs-head)} } .ev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:0} /* [2026-08-03 갱신] 테두리 색을 var(--border)(#E5E7EB)→var(--surface-2)(#F3F4F6)로 — 카테고리 페이지 항목 구분선(momya_category.css)에 쓴 것과 동일한 톤으로 통일. */ .ev-card{border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;border:1px solid var(--surface-2);container-type:inline-size;transition:transform .15s,box-shadow .15s} .ev-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .ev-img{width:100%;height:120px;aspect-ratio:16/9;object-fit:cover;display:block} .ev-img-ph{width:100%;height:120px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:clamp(16px,12cqi,24px);font-weight:700;letter-spacing:-1px;padding:0 8%;text-align:center} @supports (aspect-ratio:1){.ev-img,.ev-img-ph{height:auto}} .ev-body{padding:10px 11px 12px} /* [2026-08-03 갱신] 제목 2줄 허용(-webkit-line-clamp:2 + min-height:38px, 2줄분 높이 예약)을 1줄 고정+말줄임으로 교체 — 길어도 카드가 늘어나지 않는다. 2줄 예약용 min-height도 더 이상 필요 없어 제거(항상 1줄 높이로 고정되므로). */ .ev-ttl{font-size:13px;font-weight:600;color:var(--text);line-height:19px;margin-bottom:6px;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ev-sub{font-size:13px;color:var(--text-3);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} /* ── 공지/이벤트 섹션 리스트 ── */ .sec-head{font-weight:700;font-size:17px;letter-spacing:-.5px;margin:0 0 4px;display:flex;align-items:center;gap:8px} .sec-desc{font-size:13px;color:var(--text-3);margin-bottom:16px} /* [2026-08-03 추가, 모바일 전용] 공지사항/이벤트 목록 헤더 아이콘 제거 — 글자 크기는 이미 17px(--fs-head)라 그대로 둠. .sec-head 는 아이콘(svg)+제목 텍스트 뿐이라(list.html 확인) svg 자식만 지워도 안전하다. */ @media(max-width:720px){ .sec-head svg{display:none} } .sec-list{list-style:none} .sec-row{display:flex;align-items:center;gap:12px;padding:15px 8px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s;border-radius:8px;position:relative} .sec-row:hover{background:var(--surface-2)} /* 행 전체 터치 영역(stretched-link, 2026-07-28 확정) — .post 와 동일 이유·동일 패턴 */ .sec-row-ttl::after{content:'';position:absolute;inset:0} .sec-pin{font-size:11px;font-weight:700;color:#fff;background:var(--green);padding:2px 8px;border-radius:6px;flex-shrink:0} .sec-state{font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;flex-shrink:0} .sec-state.on{background:#DCFCE7;color:#166534} .sec-state.off{background:#F3F4F6;color:var(--text-3)} .sec-row-ttl{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--text);letter-spacing:-.3px;word-break:break-word} .sec-row-meta{font-size:12px;color:var(--text-3);flex-shrink:0} /* ── 검색 결과 ── */ .search-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap} .search-head-l{display:flex;align-items:baseline;gap:8px;min-width:0} .search-head-ttl{font-size:17px;font-weight:700;letter-spacing:-.5px;color:var(--text)} .search-head-ttl b{color:var(--green)} .search-head-cnt{font-size:13px;color:var(--text-3);font-weight:600;flex-shrink:0} .search-clear{background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);font-family:inherit;font-size:12px;font-weight:600;border-radius:999px;padding:7px 14px;cursor:pointer;flex-shrink:0;transition:background .12s,color .12s} .search-clear:hover{background:var(--border);color:var(--text)} .search-list{list-style:none} .search-row{padding:14px 8px;border-bottom:1px solid var(--border);cursor:pointer;border-radius:8px;transition:background .12s} .search-row:hover{background:var(--surface-2)} .search-row-main{display:flex;align-items:baseline;gap:8px;margin-bottom:6px} .search-board{flex-shrink:0;font-size:11px;font-weight:600;color:var(--green);background:var(--green-soft);border-radius:6px;padding:2px 8px;line-height:1.6} .search-ttl{font-size:15px;font-weight:600;color:var(--text);word-break:break-word;line-height:1.4} .search-hl{background:#FEF08A;color:inherit;border-radius:3px;padding:0 1px} .search-meta{font-size:12px;color:var(--text-3)} /* 검색 도구바 — 기간/게시판/정렬/개수 드롭다운 + 검색 버튼 한 줄 */ .search-tools{margin:0 0 16px;padding:0 2px} .sf-ddrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center} /* 검색 버튼 (개수 옆) — 약간 둥근 사각형, 세로폭은 드롭다운에 맞춰 늘어남 */ .search-go-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:44px;height:38px;box-sizing:border-box;border:none;border-radius:11px;background:var(--green);color:#fff;cursor:pointer;transition:filter .12s} .search-go-btn:hover{filter:brightness(1.07)} .search-go-btn svg{width:18px;height:18px} /* 게시판 드롭다운 (게시판 수가 늘어도 안 깨지게 — 메뉴는 스크롤) */ .sf-dd{position:relative;display:inline-block} .sf-dd-btn{display:inline-flex;align-items:center;gap:7px;height:38px;box-sizing:border-box;border:1px solid var(--border);background:#fff;border-radius:10px;padding:0 11px 0 14px;font-family:inherit;font-size:13px;font-weight:600;color:var(--text-2);cursor:pointer;transition:all .12s;white-space:nowrap} .sf-dd-btn:hover{border-color:var(--border-2);color:var(--text);background:var(--surface-2)} .sf-dd.sel .sf-dd-btn{background:var(--green-soft);border-color:var(--green);color:var(--green);font-weight:600} .sf-dd-btn .sf-chev{width:13px;height:13px;color:var(--text-3);transition:transform .18s;flex-shrink:0} .sf-dd-btn span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sf-dd.sel .sf-dd-btn .sf-chev{color:var(--green)} .sf-dd.open .sf-chev{transform:rotate(180deg)} .sf-dd-menu{position:absolute;top:calc(100% + 5px);left:0;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:4px;display:none;z-index:30;min-width:148px;max-height:260px;overflow:auto} .sf-dd.open .sf-dd-menu{display:block} .sf-dd-menu button{display:block;width:100%;text-align:left;border:none;background:none;font-family:inherit;font-size:13px;font-weight:500;color:var(--text);padding:9px 13px;border-radius:7px;cursor:pointer;white-space:nowrap;transition:background .1s} .sf-dd-menu button:hover{background:var(--surface-2)} .sf-dd-menu button.sel{color:var(--green);font-weight:600;background:var(--green-soft)} /* [마이페이지 디자인-23 수정] mypage_only.html 은 .sf-chev 대신 .pp-chev 를 .sf-dd-btn 안에도 그대로 쓴다(perpage 드롭다운과 셰브론 클래스를 공용) — 기존 .sf-dd-btn .sf-chev 규칙과 별개로 .pp-chev 전용 규칙이 필요하다. */ .sf-dd-btn .pp-chev{width:14px;height:14px;color:var(--text-3);transition:transform .18s;flex-shrink:0} .sf-dd.open .pp-chev{transform:rotate(180deg)} /* 저장한 글 카드의 "이동" 드롭다운처럼 좁은 공간에 쓰는 소형 변형 — 라벨이 항상 고정 텍스트("이동")라 폴더 이름 길이와 무관하게 폭이 고정된다. [갱신, 디자인-25] height:33px — 기본 .sf-dd-btn(height:38px)보다 낮춰 검색 버튼(.lp-search-btn)의 실제 렌더링 높이와 통일(사용자 결정, 프로토타입 40px 규칙과 별개). box-sizing:border-box는 기본 .sf-dd-btn 규칙에서 이미 상속되므로 재선언 불필요. */ .sf-dd-sm .sf-dd-btn{min-width:84px;height:33px;padding:6px 10px;font-size:var(--fs-caption);border-radius:7px} .sf-dd-sm .sf-dd-menu{min-width:max-content;left:auto;right:0} /* 기간 직접 지정 (날짜 범위) — 드롭다운 줄 아래 */ .sf-daterange{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px} .sf-date{border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-family:inherit;font-size:13px;color:var(--text);background:#fff;cursor:pointer} .sf-date:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)} .sf-daterange .sf-tilde{color:var(--text-3);font-size:12px;font-weight:600} @media(max-width:560px){ .sf-ddrow{gap:7px} .sf-dd{min-width:0} #sddPeriod,#sddBoard{flex:1 1 calc(50% - 4px)} /* 1줄: 전체 기간 · 전체 게시판 */ #sddScope,#sddSort,#sddPer{flex:1 1 0} /* 2줄: 검색범위 · 관련순 · 검색버튼 — [2026-07-31, 통합검색 momya 스킨] #sddScope(검색범위: 제목/제목+내용/내용/태그) 신규 추가. 이 화면은 개수선택을 .sf-dd(#sddPer) 대신 .perpage 로 구현해 #sddPer 는 여전히 아무 데서도 안 쓰이지만(죽은 셀렉터), 그대로 남겨둔다 — 제거해도 득 없고, 나중에 다른 화면이 우연히 같은 id 를 쓸 일도 없다. */ .sf-dd-btn{width:100%;justify-content:space-between} .search-go-btn{flex:0 0 50px;width:50px;border-radius:11px} .sf-date{flex:1;min-width:0} } /* PC: 드롭다운 가로폭 고정 (선택 라벨이 바뀌어도 박스 크기 그대로) */ @media(min-width:561px){ .sf-dd-btn{justify-content:space-between} #sddPeriod .sf-dd-btn{width:120px} #sddBoard .sf-dd-btn{width:134px} #sddScope .sf-dd-btn{width:110px} #sddSort .sf-dd-btn{width:100px} #sddPer .sf-dd-btn{width:100px} } /* [마이페이지 디자인-19] 마이페이지 목록 검색줄(.sf-dd 재사용) — 프로토타입의 .search-row 는 이 파일에 이미 다른 뜻(검색결과 목록의 클릭 가능한 행, 243행)으로 쓰이고 있어 이름이 겹친다. 겹치면 두 규칙이 합쳐져 검색줄에 엉뚱한 cursor:pointer/hover 배경이 섞여 들어가므로 새 이름(.dl-search-row) 을 쓴다. .lp-search-input/.lp-search-btn 은 프로토타입 값 그대로 이식(신규). */ .dl-search-row{display:flex;align-items:center;gap:8px;margin:2px 0 4px} .lp-search-input{flex:1;min-width:0;font-family:inherit;font-size:var(--fs-body);color:var(--text);border:1.5px solid var(--border-2);border-radius:9px;padding:9px 13px;outline:none;background:var(--surface);transition:border-color .15s,box-shadow .15s} .lp-search-input::placeholder{color:var(--text-3)} .lp-search-input:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)} .lp-search-btn{flex-shrink:0;background:var(--black);color:#fff;border:none;border-radius:9px;padding:9px 18px;font-family:inherit;font-size:var(--fs-label);font-weight:500;cursor:pointer;transition:opacity .15s} .lp-search-btn:hover{opacity:.82} /* [마이페이지 디자인-27] 실제 flex 컨테이너는 .dl-search-row(class 붙은 div)가 아니라 그 안의
다 — 폼은 GET 검색 제출을 위해 나중에 추가되면서 인라인 스타일로 flex를 다시 선언했는데, flex-wrap 은 그때 같이 안 넣었다. 그 결과 아래 .dl-search-row{flex-wrap:wrap}은 자식이 폼 하나 뿐인 바깥 div에만 적용돼 사실상 무효였고, 진짜 자식(드롭다운/입력칸/버튼)을 담은 폼은 계속 nowrap이라 order 값만 반영돼 "드롭다운-버튼-입력칸" 순서로 한 줄에 눌려 나왔다(입력칸 order:3이 버튼(order 미지정=0)보다 뒤로 밀림). 해결: wrap은 실제 폼에 걸고, 입력칸의 order:3을 없애 DOM 순서(드롭다운→입력→ 버튼)가 그대로 살게 하고, 드롭다운만 flex-basis:100%로 줄을 통째로 차지해 1줄엔 드롭다운만, 2줄엔 입력칸(넓게)+버튼(끝)이 오도록 만든다. 드롭다운이 없는 화면(작성한 댓글, .sf-dd 자체가 없음)은 이 규칙이 그냥 안 걸리고 입력칸+버튼만 한 줄에서 공유해 같은 효과를 낸다. */ @media(max-width:720px){ .dl-search-row form{flex-wrap:wrap} .dl-search-row .sf-dd{flex:1 1 100%} .dl-search-row .lp-search-input{flex:1 1 auto;min-width:0} .dl-search-row .lp-search-btn{flex:0 0 auto} } /* [마이페이지 디자인-28] 위에서 .sf-dd를 flex-basis:100%로 만들어 줄을 혼자 차지하게 한 것과, 이미 있던 @media(max-width:560px){.sf-dd-btn{width:100%;...}} (board 검색 필터용, 셀렉터가 클래스 하나뿐이라 .sf-dd-btn 전역에 걸림, 280행) 가 겹치면서 실제 버튼 배경까지 줄 전체 폭으로 늘어나 있었다 — 줄바꿈은 .sf-dd(래퍼)만 차지하면 되고 .sf-dd-btn 자체가 넓어질 필요는 없다. .dl-search-row .sf-dd-btn(클래스 2개)가 특이도상 그 전역 규칙(클래스 1개)을 이기므로, 어느 media 블록에 있든 상관없이 이 규칙이 항상 적용된다. */ .dl-search-row .sf-dd-btn{width:auto;justify-content:flex-start} .tabs{display:flex;gap:20px;border-bottom:1px solid var(--border);margin-bottom:4px} .tab{font-size:14px;color:var(--text-2);padding:0 0 11px;cursor:pointer;position:relative;font-weight:500;transition:color .15s} .tab:hover{color:var(--text)} .tab.active{color:var(--green);font-weight:600} .tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--green);border-radius:2px} .period-bar{display:flex;gap:7px;padding:12px 0 4px} .period-chip{font-size:12px;font-weight:500;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:5px 13px;cursor:pointer;transition:all .12s;font-family:inherit} .period-chip:hover{border-color:var(--border-2);color:var(--text)} .period-chip.active{background:var(--green-soft);border-color:var(--green);color:var(--green);font-weight:600} .feed{list-style:none} /* [2026-08-03 갱신] 구분선 색을 var(--border)(#E5E7EB)에서 게시판 목록/카테고리 페이지와 동일한 var(--surface-2)(#F3F4F6, 더 연함)로 통일. */ .post{display:flex;align-items:flex-start;gap:13px;padding:14px 8px;border-bottom:1px solid var(--surface-2);cursor:pointer;transition:background .12s;border-radius:8px;animation:rise .35s ease both;position:relative} .post:hover{background:var(--surface-2)} .post.no-vote .pbody{padding-left:2px} /* 행 전체 터치 영역(stretched-link, 2026-07-28 확정) — 제목 링크 하나만 눌리던 걸 행 전체로 넓힌다. 행 안에 제목과 다른 목적지로 가는 링크가 없어(썸네일도 같은 글로 연결) z-index 별도 처리 없이 안전하다 */ .ptitle::after{content:'';position:absolute;inset:0} @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .vote{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:7px 9px;min-width:46px;cursor:pointer;transition:all .12s;color:var(--text-2)} .vote:hover{border-color:var(--green);background:var(--green-soft)} .vote.voted{background:var(--green);border-color:var(--green);color:#fff} .vote .vn{font-size:12px;font-weight:600;color:var(--text)} .vote.voted .vn{color:#fff} .pbody{flex:1;min-width:0} .pmeta-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px;white-space:nowrap;width:auto;text-align:center;box-sizing:border-box;flex-shrink:0;letter-spacing:-.2px} /* [프로토타입 오버라이드 12] 목록/피드 제목만 15px 로 키움(원래 var(--fs-body)=14px) — 작성 화면 제목 입력창(.title-textarea)이 15px라 쓸 때보다 목록에서 작아 보인다는 체감 차이를 없애기 위한 의도적 변경(2026-07-24, board.momya.css 동일 규칙과 동기화). CSS 대조에서 "프로토타입은 14px"로 나와도 되돌리지 마라. */ .ptitle{font-size:15px;font-weight:600;margin:6px 0 0;color:var(--text);word-break:break-word;line-height:20px;height:40px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:-.3px} .flame{color:var(--green)} .pmeta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-3);margin-top:7px} .pmeta .nick-grade>span{font-weight:500;color:var(--text-2)} .pmeta .m{display:flex;align-items:center;gap:4px} .bg-ss{background:#FEF2F2;color:#991B1B} .bg-info{background:#F0FDF4;color:#166534} .bg-preg{background:#F5F3FF;color:#5B21B6} .bg-free{background:var(--surface-2);color:var(--text)} .bg-buy{background:#FFFBEB;color:#92400E} .bg-local{background:#EFF6FF;color:#1E40AF} .bg-life{background:#FFFBEB;color:#92400E} /* [마이페이지 디자인-23 수정] 공지사항/이벤트(mid: notices/event) — 다른 5개 카테고리 배지(연한 배경+진한 글씨)와 달리 진한 초록 배경+흰 글씨로 눈에 띄게 */ .bg-notice{background:var(--green-d);color:#fff} .pthumb{width:72px;height:72px;flex-shrink:0;border-radius:9px;overflow:hidden;align-self:center} .pthumb img{width:100%;height:100%;object-fit:cover;display:block} .pthumb-empty{width:72px;flex-shrink:0} /* ── Modal ── */ .overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:60;display:none;align-items:flex-start;justify-content:center;padding:18px;overflow-y:auto;-webkit-overflow-scrolling:touch} /* 약관/개인정보 모달 (가입 모달 위에 표시) */ .legal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:110;display:none;align-items:flex-start;justify-content:center;padding:18px;overflow-y:auto;-webkit-overflow-scrolling:touch} .legal-overlay.show{display:flex;animation:fade .2s ease} .legal-modal{background:var(--surface);border-radius:16px;width:100%;max-width:520px;margin:auto;animation:pop .22s cubic-bezier(.2,.9,.3,1.2) both;max-height:calc(100vh - 36px);display:flex;flex-direction:column;overflow:hidden} .legal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 20px;border-bottom:1px solid var(--border);flex-shrink:0} .legal-head h2{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.5px} .legal-close{background:var(--surface-2);border:none;width:34px;height:34px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-2);transition:background .15s;flex-shrink:0} .legal-close:hover{background:var(--border)} .legal-body{padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch;font-size:13px;line-height:1.7;color:var(--text-2);white-space:pre-wrap;word-break:break-word} .legal-body strong{display:block;color:var(--text);font-weight:600;font-size:14px;margin:16px 0 6px} .legal-body strong:first-child{margin-top:0} .overlay.show{display:flex;animation:fade .2s ease} .overlay.show .modal{margin:auto} @keyframes fade{from{opacity:0}to{opacity:1}} .modal{background:var(--surface);border-radius:16px;width:100%;max-width:460px;padding:24px;animation:pop .22s cubic-bezier(.2,.9,.3,1.2) both;max-height:calc(100vh - 36px);overflow-y:auto;-webkit-overflow-scrolling:touch} @keyframes pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}} .modal h2{font-weight:700;font-size:20px;color:var(--text);letter-spacing:-.5px} .modal .sub{font-size:12px;color:var(--text-2);margin:5px 0 18px} .modal .sub b{color:var(--green)} .field{margin-bottom:13px} .field label{font-size:12px;color:var(--text-2);display:block;margin-bottom:5px;font-weight:500} .field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:14px;color:var(--text);border:1px solid var(--border-2);border-radius:9px;padding:10px 12px;background:var(--bg);outline:none;transition:border-color .15s,box-shadow .15s} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)} .field textarea{resize:vertical;min-height:90px} .two{display:flex;gap:10px} .two .field{flex:1} .modal-foot{display:flex;justify-content:flex-end;gap:9px;margin-top:6px} .btn-ghost{background:none;border:1px solid var(--border-2);border-radius:9px;padding:10px 16px;font-family:inherit;font-size:13px;color:var(--text-2);cursor:pointer} .btn-ghost:hover{background:var(--surface-2)} .btn-submit{background:var(--green);color:#fff;border:none;border-radius:9px;padding:10px 18px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer} .btn-submit:hover{background:var(--green-d)} /* ── Drawer ── */ .drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:100;display:none;opacity:0;transition:opacity .25s ease} .drawer-overlay.show{display:block;opacity:1} .drawer{position:fixed;top:0;left:0;bottom:0;width:240px;background:var(--surface);z-index:101;transform:translateX(-100%);transition:transform .25s ease;padding:20px;box-shadow:4px 0 24px rgba(0,0,0,.12)} .drawer.show{transform:none} .drawer-top{display:flex;align-items:center;justify-content:flex-end;margin-bottom:8px} .drawer .dlogo{font-weight:700;font-size:20px;color:var(--black);letter-spacing:-1px} .drawer-close{background:none;border:none;cursor:pointer;color:var(--text-2);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;transition:background .15s;flex-shrink:0} .drawer-close:hover{background:var(--surface-2)} .ditem{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;font-size:14px;color:var(--text-2);cursor:pointer} .ditem-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px} .ditem-icon svg{stroke:var(--text-3)} .ditem.active .ditem-icon svg{stroke:var(--green)} .ditem-icon.sb-avatar{border-radius:50%;color:#fff;font-size:11px;font-weight:700} .ditem:hover{background:var(--surface-2);color:var(--text)} .ditem.active{color:var(--green);font-weight:600;background:var(--green-soft)} .ditem-badge{margin-left:auto;background:var(--red);color:#fff;font-size:var(--fs-micro);font-weight:700;line-height:1;padding:3px 6px;border-radius:999px} .drawer-divider{height:1px;background:var(--border);margin:8px 0} /* ── 알림벨 (2026-08-02 재구현, PC 전용 — 모바일은 720px 미디어쿼리에서 .notif-wrap 을 숨기고, 드로어의 임시 "알림" 링크로 대신한다) ── .notif-item/.notif-empty 는 mypage_only_알람창.html 프로토타입의 컴포넌트를 그대로 가져왔다 — b 대신 라이믹스 core lang 문구가 실제로 쓰는 strong 태그도 같이 스타일링한다. */ .notif-wrap{position:relative;flex-shrink:0} .notif-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid #fff} .notif-dd{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);display:none;z-index:50;overflow:hidden} .notif-dd.open{display:block} .notif-dd-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border)} .notif-dd-head span{font-size:var(--fs-label);font-weight:700;color:var(--text)} .notif-clear-all{background:none;border:none;font-family:inherit;font-size:var(--fs-caption);font-weight:500;color:var(--text-3);cursor:pointer;padding:4px 6px;border-radius:6px;transition:all .15s;flex-shrink:0} .notif-clear-all:hover{color:var(--red);background:var(--red-soft)} .notif-dd .notif-list{max-height:360px;overflow-y:auto} .notif-item{display:flex;align-items:flex-start;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border);transition:background .12s} .notif-item:last-child{border-bottom:none} .notif-item:hover{background:var(--surface-2)} .notif-item.unread{background:var(--green-soft)} .notif-item.unread:hover{background:#E7F8ED} .notif-item-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;margin-top:7px} .notif-item-dot.read{background:transparent} .notif-item-body{flex:1;min-width:0} .notif-item-text{font-size:var(--fs-label);color:var(--text-2);line-height:1.5;word-break:break-word} .notif-item-text b,.notif-item-text strong{color:var(--text);font-weight:600} .notif-item-time{font-size:var(--fs-micro);color:var(--text-3);margin-top:3px} .notif-empty{padding:44px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px} .notif-empty svg{color:var(--text-3)} .notif-empty-title{font-size:var(--fs-label);font-weight:600;color:var(--text-2)} .notif-empty-desc{font-size:var(--fs-caption);color:var(--text-3)} .notif-dd-all{display:block;text-align:center;padding:11px;font-size:var(--fs-caption);font-weight:600;color:var(--text-2);border-top:1px solid var(--border)} .notif-dd-all:hover{background:var(--surface-2);color:var(--text)} @media(max-width:480px){ .notif-dd{position:fixed;top:56px;right:12px;left:12px;width:auto;max-width:none} } /* ── 알림 전체화면 페이지(modules/ncenterlite/skins/momya/NotifyList.html, PC/모바일 겸용) ── PC/랩탑(1024px 이상): 별도 처리 없음 — layout.html 이 다른 게시판과 동일한 사이드바+배너 레이아웃으로 이미 감싸주므로 이 파일은 뒤로가기 헤더를 숨긴 채(.notif-page-header 기본값 display:none) 가운데 콘텐츠만 평범하게 놓인다. 모바일+태블릿/폴드(1023px 이하): 전역 헤더 대신 뒤로가기 헤더로 전환 + 다른 화면 (is-search-view)의 배너 숨김과 동일한 body 클래스 패턴을 재사용하되, 그건 전 폭에서 숨기고 이건 이 폭에서만 숨긴다는 차이가 있다(PC/랩탑에서는 board-mode 배너 컬럼을 그대로 보여줘야 하므로 media query 밖으로 빼면 안 된다). [갱신, 2026-08-02] 기존엔 720px 이하(순수 모바일)에서만 적용했는데, 태블릿/폴드 펼침 너비(721~1023px)에서 배너가 그대로 보이고 뒤로가기 버튼도 없이 방치되는 문제가 실기기에서 확인됐다 — 이 프로젝트가 다른 화면(momya list.html 의 .pick-area/.pick-side/ .ev-grid 등)에 이미 쓰고 있는 태블릿/폴드 경계값 1023px 로 통일해서 1023px 이하 전체를 이 화면 취급으로 넓혔다. */ .notif-page-header{display:none} @media(max-width:1023px){ /* [원인 확정, 2026-08-02] .notif-page-header 자신도
태그라(NotifyList.html 43행
), 전역 헤더를 겨눈 이 디센던트 셀렉터 (body.is-notif-view header)가 명시도(0,0,1,1)로 바로 아래 .notif-page-header{ display:flex}(0,0,1,0)를 이겨버려 뒤로가기 헤더 자신까지 같이 display:none이 됐었다 — 로컬 목업(실제 momya.css를 그대로 받아 CSSOM으로 매칭 규칙을 직접 열거)으로 재현·확정. mypage_fullpage_start.html 이 자기 자신의 미니헤더를 header:not(.mp-fp-header) 로 이미 걸러낸 것과 동일한 원리로 여기도 걸러낸다. */ body.is-notif-view header:not(.notif-page-header){display:none} body.is-notif-view .banner-col{display:none!important} /* [이슈1, 2026-08-02] main{padding:22px 20px}(전역, 61행)의 top이 .notif-page-header 에도 그대로 적용돼 뷰포트 최상단에서 22px 밀려 여백이 과도해 보였다 — 마이페이지 쉘이 겪은 것과 동일한 문제(body.is-mypage-view main{padding-top:0}, 위 1773행)를 실측으로 이미 확정해둔 그대로 재사용한다. mypage와 달리 이 화면은 PC/랩탑(1024px 이상)에서는 뒤로가기 헤더 자체를 안 쓰므로(기본값 display:none, 위 506행) 이 override 도 동일하게 이 media query 안에서만 적용한다 — PC에서는 전역 헤더가 그대로 있으니 그 아래 22px 여백이 여전히 필요하다. */ body.is-notif-view main{padding-top:0} .notif-page-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;padding:11px 16px;background:rgba(255,255,255,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)} .notif-page-header .notif-back{background:none;border:none;cursor:pointer;color:var(--text);display:flex;align-items:center;padding:6px;border-radius:8px;margin-left:-6px} .notif-page-header .notif-page-title{font-size:var(--fs-head);font-weight:700;color:var(--text)} } .notif-page-body{max-width:600px;margin:0 auto} .notif-load-more{display:block;width:100%;margin-top:10px;padding:11px;background:var(--surface-2);border:none;border-radius:9px;font-family:inherit;font-size:var(--fs-caption);font-weight:600;color:var(--text-2);cursor:pointer;transition:background .15s} .notif-load-more:hover{background:var(--border-soft)} .notif-load-more:disabled{opacity:.6;cursor:default} /* ── 카테고리 전체화면 페이지(widgets/momya_category, PC/모바일 겸용, 모바일 앱형 UI 3단계, 2026-08-03) ── 알림 전체화면 페이지(.notif-page-header/is-notif-view)와 완전히 동일한 패턴을 이름만 바꿔 재사용한다 — 명시도 함정(header 자신이
태그라 전역 헤더 숨김 규칙에 같이 걸리는 것)도 이미 그쪽에서 확정된 해법 (header:not(...))을 그대로 적용해뒀다. */ .category-page-header{display:none} @media(max-width:1023px){ body.is-category-view header:not(.category-page-header){display:none} body.is-category-view .banner-col{display:none!important} /* [2026-08-03 갱신] padding-top뿐 아니라 좌우도 0으로 — main은 이 폭에서도 좌우 패딩이 남아있어(예: 720px 이하 13px/14px), 카드 그룹의 회색 배경 (#F3F4F8, momya_category.css)이 그 패딩만큼 안쪽에서 시작해 화면 가장자리에 body의 흰 배경이 테두리처럼 남아 보였다(실사용자 재현) — is-notif-view는 흰 배경 위에 흰 리스트라 이 패딩이 안 보였을 뿐 같은 구조였다. 카드 그룹의 바깥 여백은 이제 main이 아니라 .category-page-body 자신의 padding(12px)이 전담한다. */ body.is-category-view main{padding:0} /* [2026-08-03 추가] 카드 맨 아래(마지막 카드 이후)도 여전히 흰 배경이 보이는 문제 — 원인은 두 가지 다 main의 형제/자손인데 자기 배경이 없어 body의 흰색이 그대로 비치는 것: (1) modules/page/tpl/content.html 이 관리자(manager grant) 에게만 {$page_content}(=이 위젯 출력) 뒤에 붙이는 .btnArea(캐시파일 재생성/ 설정/페이지 수정 버튼, 코어 마크업이라 momya가 새로 만든 게 아님 — 일반 회원에게는 애초에 안 보임) — main 안에 있음. (2)