/* 면죄부 공통 컴포넌트 — 종·검색창·드롭다운·이모지. 각 페이지 뒤에 link해서 인라인을 덮어씀(통일). */ /* twemoji 이모지 */ img.emoji{height:1.15em;width:1.15em;vertical-align:-.18em;margin:0 .03em;display:inline-block;} /* 화살표 SVG(common.js가 텍스트 글리프 → SVG 치환) — 크로스디바이스 일관 */ .mjbico-wrap{display:inline-flex;align-items:center;justify-content:center;line-height:0;vertical-align:-.14em;} .mjbico{width:1em;height:1em;display:block;} /* 알림 종 */ .bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;cursor:pointer;flex:0 0 auto;} .bell img.emoji{width:20px;height:20px;display:block;margin:0;} /* 알림 dot = 비교 카운트 배지와 동일 규격(16px, 바깥 오버플로우, 흰테). 위치·크기 통일 */ .bell.hasalert::after{content:'';position:absolute;top:-7px;right:-2px;width:13px;height:13px;box-sizing:border-box;background:#FF5A6A;border-radius:50%;border:2px solid #fff;z-index:2;} /* 빨간점 = 안 본 신상 이벤트 있을 때만(common.js가 .hasalert 부여). 없으면 안 뜸 */ /* 헤더 비교함 아이콘 (벨 왼쪽 공통) */ .hcmp{position:relative;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;cursor:pointer;flex:0 0 auto;color:var(--ink,#2b2f38);} .hcmp svg{width:26px;height:26px;display:block;} .hcmp .hcnt{display:none;position:absolute;top:-5px;right:-6px;box-sizing:border-box;min-width:14px;height:14px;align-items:center;justify-content:center;background:var(--brand,#FF7A59);color:#fff;font-size:9px;font-weight:900;border-radius:999px;border:2px solid #fff;padding:0 3px;line-height:1;} /* 헤더 우상단 아이콘 그룹(종/비교) 단일 규격 — 전 페이지 동일 위치 보장. 아이콘 담는 줄(제목줄 logorow·상세 검색창)을 40px로 통일 + 가운데정렬 → 종·비교가 전 페이지 같은 Y(세로중심 66)에 온다. */ .hdgroup{display:inline-flex;align-items:center;gap:9px;height:26px;align-self:center;margin-left:auto;flex:0 0 auto;} /* 마이(phead)는 프로필 행이 124px로 커서 center면 아이콘이 너무 내려감 → 상단에 40px 줄을 만들어(높이40+상단정렬) 아이콘 중심을 다른 페이지와 동일(66)하게. */ .phead .hdgroup{align-self:flex-start;height:40px;} /* 검색창 (searchbar / csearch 통일) */ .searchbar,.csearch,.navsearch{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #ece0d5;border-radius:14px;padding:12px 14px;box-shadow:0 4px 12px rgba(120,80,60,.06);font-size:14px;color:#aaa298;font-weight:500;} /* 메인 검색창 높이 = 미니바와 동일(40px)로 고정 → 스크롤 전/후 안 튐, 전 페이지 통일 */ .searchbar,.csearch{height:40px;box-sizing:border-box;padding-top:0;padding-bottom:0;} .searchbar .si,.csearch .si{font-size:14px;flex:0 0 auto;} .searchbar .sp,.csearch>span{font-size:14px;color:#aaa298;font-weight:500;flex:1;} /* 헤더 단일 소스 — 전 페이지(feed·saved·community·contribute) 헤더 뼈대 통일. 구조: [1줄 제목+아이콘] [2줄 바뀌는영역: 기준칩(.who) 또는 탭(.htabs)] [3줄 검색] [4줄 칩]. flex gap:12로 모든 줄 간격 통일 + 2줄 높이 39px 고정 → 제목·검색창 위치가 전 페이지 동일. */ .fullhead{padding:46px 18px 6px;display:flex;flex-direction:column;gap:12px;} /* 1줄 제목+아이콘 줄 — 높이 40px 고정(상세 검색창 40px와 동일) → 아이콘 세로중심이 상세와 일치(66). 제목은 40px 안에서 세로 가운데. */ .fullhead .logorow{display:flex;align-items:center;justify-content:space-between;min-height:40px;} /* 2줄(바뀌는 영역) 높이 고정: 기준칩이든 탭이든 39px → 아래 검색창 위치 고정 */ .fullhead .who,.fullhead .htabs{min-height:39px;box-sizing:border-box;margin:0!important;} .fullhead .who{align-items:center;} /* 기준 드롭다운 메뉴 */ .whomenu .wi{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:11px;font-size:13.5px;font-weight:700;color:#5d6472;cursor:pointer;white-space:nowrap;} .whomenu .wi+.wi{margin-top:3px;} .whomenu .wi.on{color:#FF7A59;background:#fff0eb;} .whomenu .wi.on::after{content:'✓';margin-left:auto;font-weight:900;font-size:13px;} /* 추천/비추천 votes (구경·찜·알림 카드 공통) */ .votes{display:flex;gap:12px;margin-top:7px;font-size:12px;font-weight:800;} .votes .up{color:#16a06d;} .votes .down{color:#9a9389;} /* 알림 종 — 모든 페이지 화면 우측 상단 고정(absolute)으로 위치·여백 통일 */ .bellfix{position:absolute;top:52px;right:18px;z-index:55;margin:0;} /* 어절 단위 줄바꿈 — 한글 제품명·문구가 글자 중간에서 안 끊기게 전역 기본 통일 */ *{word-break:keep-all;} /* ── 목업 크롬 전역 제거 (2026-08-19) ──────────────────────────────── 예전엔 이 세 줄이 아래 @media(max-width:480px) 안에만 있었다. 그래서 480px을 넘는 접속 — PC·태블릿·아이패드·폰 가로 — 에는 가짜 아이폰 노치, 화면 설명 캡션("면죄부 · 구경 피드 (입 터졌을 때 들어오는 메인 화면)"), 설계 메모 박스(수익 전략까지 적힌)가 그대로 보였다. 폭과 무관한 개발 잔재이므로 미디어쿼리 밖에서 항상 죽인다. ⚠️ .note는 설계 메모 전용 클래스다. 진짜 본문에는 쓰지 말 것(detail-set-v1은 .setnote 사용). */ .cap,.note,.notch{display:none !important;} /* 데스크탑(481px+)에서 폰 베젤 제거. box-shadow의 `0 0 0 11px #2b2b30, 0 0 0 13px #444`가 가짜 아이폰 테두리였다. 중앙 390px 컬럼은 모바일 웹 레이아웃으로 그대로 두되, 기기 흉내만 걷어내고 평범한 카드 그림자로 바꾼다. */ @media (min-width:481px){ .phone{box-shadow:0 12px 44px rgba(120,80,60,.15) !important;border-radius:22px !important;} } /* 실제 폰에서 접속 시 = 풀스크린 앱 (데스크탑은 390px 중앙 컬럼) */ @media (max-width:480px){ /* overflow-x:hidden 은 스크롤 컨테이너를 만들어 position:sticky 헤더를 가둔다. clip 은 넘침만 잘라내고 스크롤 컨테이너를 만들지 않아 sticky 가 살아난다(2026-08-20). */ html,body{padding:0 !important;margin:0 !important;overflow-x:clip !important;max-width:100vw !important;background:var(--bg,#FFF8F1) !important;} .wrap{gap:0 !important;padding:0 !important;min-height:100vh !important;width:100% !important;max-width:100vw !important;} .phone{width:100% !important;max-width:100vw !important;height:auto !important;min-height:100vh !important;border-radius:0 !important;box-shadow:none !important;} .screen{min-height:100vh !important;height:auto !important;max-width:100vw !important;} .navbar,.phead,.dminibar{padding-top:max(env(safe-area-inset-top),18px) !important;} .fullhead{padding-top:max(env(safe-area-inset-top),18px) !important;} .minibar{padding-top:max(env(safe-area-inset-top),18px) !important;} /* 헤더 4클래스 padding 통일 — 우상단 아이콘 좌우 흔들림 방지 */ .navbar,.phead,.dminibar,.fullhead{padding-left:16px !important;padding-right:16px !important;} /* 세로중심은 row 헤더에만. .fullhead는 column이라 center면 자식(로고줄·검색·칩)이 가로 가운데로 쏠림 → stretch */ .navbar,.phead,.dminibar{align-items:center !important;} .fullhead{align-items:stretch !important;} .navbar,.phead,.dminibar{padding-bottom:10px !important;gap:8px !important;min-height:44px !important;} /* iOS Safari 자동 줌 방지 — input font-size ≥ 16px */ .phone input,.phone textarea{font-size:16px !important;} .tabbar{position:fixed !important;left:0 !important;right:0 !important;bottom:0 !important;width:100% !important;max-width:100vw !important;padding-bottom:max(env(safe-area-inset-bottom),12px) !important;} .screen:has(.tabbar){padding-bottom:76px !important;} .phone .mjbtop{position:fixed !important;right:16px !important;bottom:calc(84px + env(safe-area-inset-bottom)) !important;} } /* 제품카드 우상단 아이콘(feed·saved 공통 단일 소스) — 찜 하트 + 비교담기. 꺼짐 = 회색 #e6e7e8, 켜짐 = 브랜드색. 하트 18 / 비교 23. */ .fav{color:#e6e7e8;line-height:0;} .fav.on{color:var(--brand,#FF7A59);} .fav svg{width:21px;height:21px;display:block;} .cmpcard{color:#e6e7e8;} .cmpcard.on{color:var(--brand,#FF7A59);} .cmpcard svg{width:21px;height:21px;display:block;} /* 비교담기 svg가 클릭을 통과시키지 않도록(빈 선 영역 대비) 클릭은 항상 .cmpcard 컨테이너가 받게 */ .cmpcard svg{pointer-events:none;} /* 미니바 = 스크롤 시 내려오는 상단 고정 검색바 (전 페이지 단일 소스). 안쪽 검색박스는 .searchbar/.csearch 공통. */ .minibar{position:absolute;top:0;left:0;right:0;z-index:48;transform:translateY(-105%);transition:transform .26s ease;background:rgba(255,248,241,.97);backdrop-filter:blur(12px);padding:46px 18px 10px;display:flex;align-items:center;gap:9px;box-shadow:0 3px 14px rgba(80,60,50,.1);} .minibar.show{transform:translateY(0)!important;} /* 미니바 검색박스도 헤더 로고줄과 동일한 40px → 아이콘 세로중심이 로고줄과 일치(스크롤 전/후 안 튐) */ .minibar .searchbar,.minibar .csearch{height:40px;box-sizing:border-box;padding-top:0;padding-bottom:0;} /* 하단 탭바 (전역 공통) */ .tabbar{position:sticky;bottom:0;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:9px 0 26px;z-index:40;} .tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:#b3b9c4;font-weight:700;} .tab .ic{font-size:21px;filter:grayscale(1);opacity:.45;} .tab.on{color:var(--brand);} .tab.on .ic{filter:none;opacity:1;} .tab.scan{color:var(--brand);font-weight:800;} .tab.scan .ic{width:48px;height:48px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:21px;filter:none;opacity:1;box-shadow:0 5px 14px rgba(255,122,89,.45);margin-top:-16px;margin-bottom:2px;} /* 카테고리·정렬 칩 단일 소스 — 크기·알약·활성색·세로여백 완전 통일. 대상: feed·saved 카테고리칩(.cat/.cattabs) + community 이야기탭 정렬칩(.so/.csort). contribute(.ccat .cat)는 특이도가 높아 해당 파일에서 같은 값으로 맞춤. */ .cat,.so{flex:0 0 auto;font-size:13px;font-weight:800;padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--line,#ece0d5);color:#6b7280;cursor:pointer;white-space:nowrap;} .cat.on,.so.on{background:var(--brand,#FF7A59);color:#fff;border-color:var(--brand,#FF7A59);} .cattabs,.csort{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 0 4px;} .cattabs::-webkit-scrollbar,.csort::-webkit-scrollbar{display:none;} /* 검색↔칩 세로간격은 .fullhead의 flex gap:12px가 전 페이지 공통으로 제공 (칩row 자체 top padding 0) */ /* 맨 위로 플로팅 버튼 (common.js 주입, 전역 공통) — AI 플로팅과 같은 원형 우하단 */ .mjbtop{position:fixed;right:16px;bottom:96px;width:56px;height:56px;border-radius:50%;background:rgba(43,47,56,.9);color:#fff;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:47;box-shadow:0 8px 20px rgba(0,0,0,.26);backdrop-filter:blur(4px);transition:transform .15s,opacity .2s;} /* 데스크톱 폰 프리뷰: 390px 프레임 오른쪽 가장자리에 붙임. 프레임 없는 어드민은 기본 right:16px(우하단). */ .phone .mjbtop{right:calc(50% - 195px + 16px);} .mjbtop.show{display:flex;} .mjbtop:active{transform:scale(.9);} /* 검색 오버레이(최근검색어) 전 페이지 공통 — 검색창 탭 시 전체 덮는 팝업. common.js가 주입·배선. 고정 오버레이라 페이지가 안 밀림 → 스크롤 중 검색 활성화 점프·미니바 검색창 사라짐 동시 해결. */ #searchOverlay{position:absolute;inset:0;z-index:120;background:var(--bg,#FFF8F1);display:none;flex-direction:column;box-sizing:border-box;overflow-x:hidden;} #searchOverlay.show{display:flex;} #searchOverlay .so-bar{display:flex;align-items:center;gap:8px;padding:46px 16px 12px;border-bottom:1px solid #f2ece5;} #searchOverlay .so-back{font-size:26px;color:#3a3f4a;cursor:pointer;flex:0 0 auto;line-height:1;padding:0 2px;} #searchOverlay .so-field{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #ece0d5;border-radius:14px;padding:0 14px;height:44px;box-sizing:border-box;overflow:hidden;} #searchOverlay .so-field input{flex:1;border:none;outline:none;background:transparent;font-size:16px;font-weight:500;font-family:inherit;min-width:0;color:var(--ink);} #searchOverlay .so-field .sx{font-size:15px;color:#c8bfb4;cursor:pointer;flex:0 0 auto;} #searchOverlay .so-recent{flex:1;overflow-y:auto;padding:8px 16px 24px;} #searchOverlay .so-head{display:flex;justify-content:space-between;align-items:center;margin:8px 2px 6px;} #searchOverlay .so-head b{font-size:13px;color:#6b7280;font-weight:800;} #searchOverlay .so-head span{font-size:12px;color:#b3aaa0;cursor:pointer;font-weight:700;} #searchOverlay .so-item{display:flex;align-items:center;gap:11px;padding:12px 4px;cursor:pointer;border-bottom:1px solid #f4efe9;} #searchOverlay .so-item .ic{font-size:14px;flex:0 0 auto;opacity:.55;} #searchOverlay .so-item .tx{flex:1;font-size:14.5px;color:#3a3631;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #searchOverlay .so-item .del{font-size:14px;color:#c8bfb4;flex:0 0 auto;padding:3px 5px;} #searchOverlay .so-empty{text-align:center;color:#b3aaa0;font-weight:600;padding:48px 0;font-size:13px;} @media (max-width:480px){ .phone #searchOverlay{position:fixed;inset:0;} .phone #searchOverlay .so-bar{padding-top:max(env(safe-area-inset-top),18px);padding-left:max(env(safe-area-inset-left),16px);padding-right:max(env(safe-area-inset-right),16px);box-sizing:border-box;} .phone #searchOverlay .so-recent{box-sizing:border-box;} } /* ===== 작성 폼 공통 (글쓰기·문의하기) — 단일 소스 ===== 레이아웃 규칙: navbar[제목 왼쪽 · ✕ 오른쪽] + 본문(editor flex:1) + 하단 tools[도구 왼쪽 · 액션(등록/보내기) 오른쪽]. .screen에 class="compose" 붙이면 적용. 다른 페이지 .navbar와 안 겹치게 .compose 하위로 스코프. */ .compose{display:flex;flex-direction:column;} .compose .navbar{padding:48px 16px 10px;display:flex;align-items:center;border-bottom:1px solid #f2eee8;} .compose .nav-t{font-size:15px;font-weight:800;flex:1;text-align:left;} .compose .nav-x{font-size:20px;font-weight:700;color:#6b7280;cursor:pointer;margin-left:auto;} .compose .nav-go{font-size:14px;font-weight:800;color:#fff;background:var(--brand);border-radius:10px;padding:8px 15px;cursor:pointer;} .compose .nav-go.off{background:#eadfd3;color:#b3aaa0;} /* 글쓰기 헤더 '단일 소스' — ✕만 있는 창(닫기)이라 제목 가운데 + ✕ 우상단. write-v1·review-write 공용.
*/ .wr-head{display:flex;align-items:center;justify-content:center;position:relative;padding:48px 16px 10px;border-bottom:1px solid #f2eee8;} .wr-head .wr-title{font-size:15px;font-weight:800;text-align:center;} .wr-head .wr-x{position:absolute;right:16px;bottom:10px;font-size:20px;font-weight:700;color:#6b7280;cursor:pointer;line-height:1;} /* ‹ 뒤로가기 페이지 헤더 '단일 소스' — ‹ 좌측 독립(텍스트 안 붙음) + 제목 가운데.
*/ .bk-head{display:flex;align-items:center;justify-content:center;position:relative;padding:48px 16px 10px;border-bottom:1px solid #f2eee8;} .bk-head .bk-back{position:absolute;left:16px;bottom:9px;font-size:22px;font-weight:700;color:#3a3f4a;cursor:pointer;line-height:1;} .bk-head .bk-title{font-size:15px;font-weight:800;text-align:center;} .compose .author{display:flex;align-items:center;gap:9px;padding:14px 16px 4px;} .compose .author .av{width:34px;height:34px;border-radius:50%;background:#f6f2ec;display:flex;align-items:center;justify-content:center;font-size:17px;} .compose .author .an{font-size:13.5px;font-weight:800;} .compose .author .ah{font-size:11px;color:var(--sub);} .compose .lbl{font-size:12.5px;font-weight:900;color:#6b6259;padding:18px 16px 9px;} .compose .types{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px;} .compose .type{font-size:13px;font-weight:800;color:#9a9389;background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 14px;cursor:pointer;} .compose .type.on{color:var(--brand);background:#fff0eb;border-color:#ffd2c4;} .compose .editor{flex:1;padding:8px 16px;} .compose .editor .ta{width:100%;min-height:200px;font-size:14.5px;line-height:1.6;color:var(--ink);border:none;outline:none;background:transparent;resize:none;font-family:inherit;} .compose .editor .ph{color:#bcb3a8;} .compose .tools{display:flex;align-items:center;gap:9px;padding:12px 16px;border-top:1px solid #f2eee8;} .compose .tool{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:#6b6259;background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 13px;cursor:pointer;} .compose .tools .nav-go{margin-left:auto;} .compose .hint{font-size:11.5px;color:var(--sub);padding:10px 16px;line-height:1.5;} /* ===== 이미지 라이트박스(크게 보기) — 썸네일/제품사진 클릭 확대. 어드민·상세 공통 ===== */ #mjbLightbox{position:fixed;inset:0;z-index:9999;background:rgba(20,16,14,.88);display:none;align-items:center;justify-content:center;padding:26px;cursor:zoom-out;} #mjbLightbox.show{display:flex;} #mjbLightbox img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 14px 44px rgba(0,0,0,.55);object-fit:contain;background:#fff;} #mjbLightbox .mjblb-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:18px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;} img.mjb-zoom{cursor:zoom-in;} /* ===== 라벨 대조 편집기 — 라벨 이미지 크게 + 옆에서 원재료 텍스트 입력. 어드민 공통 ===== */ #mjbCmpEdit{position:fixed;inset:0;z-index:10000;background:rgba(20,16,14,.93);display:none;} #mjbCmpEdit.show{display:block;} #mjbCmpEdit .mce-wrap{position:absolute;inset:0;display:flex;} #mjbCmpEdit .mce-imgs{flex:1 1 56%;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px;align-items:center;-webkit-overflow-scrolling:touch;} #mjbCmpEdit .mce-imgs img{max-width:100%;width:100%;height:auto;border-radius:8px;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.4);} #mjbCmpEdit .mce-imgitem{position:relative;width:100%;} #mjbCmpEdit .mce-imgdel{position:absolute;top:8px;right:8px;background:rgba(20,16,14,.72);color:#fff;border:none;border-radius:999px;padding:6px 11px;font-size:11.5px;font-weight:800;cursor:pointer;z-index:2;font-family:inherit;} #mjbCmpEdit .mce-addlbl{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;background:rgba(255,255,255,.14);color:#fff;border:1.5px dashed rgba(255,255,255,.5);border-radius:12px;padding:15px;font-size:13.5px;font-weight:800;cursor:pointer;} #mjbCmpEdit .mce-addlbl input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;} #mjbCmpEdit .mce-side{flex:0 0 44%;max-width:460px;background:#fff;display:flex;flex-direction:column;padding:14px 14px calc(env(safe-area-inset-bottom,0px) + 14px);gap:10px;} #mjbCmpEdit .mce-hd{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:14px;color:#3a3631;flex:0 0 auto;} #mjbCmpEdit .mce-x{cursor:pointer;font-size:20px;color:#999;width:30px;height:30px;display:flex;align-items:center;justify-content:center;} #mjbCmpEdit .mce-sub{font-size:11px;color:#a99f94;flex:0 0 auto;margin-top:-4px;} #mjbCmpEdit .mce-ta{flex:1 1 auto;width:100%;min-height:120px;resize:none;border:1.5px solid #e5ded5;border-radius:10px;padding:11px 12px;font-size:14px;line-height:1.65;font-family:inherit;outline:none;color:#3a3631;} #mjbCmpEdit .mce-ta:focus{border-color:var(--brand,#FF7A59);} #mjbCmpEdit .mce-save{flex:0 0 auto;background:var(--brand,#FF7A59);color:#fff;border:none;border-radius:10px;padding:13px;font-size:14px;font-weight:800;cursor:pointer;} #mjbCmpEdit .mce-zoomhint{position:absolute;left:16px;top:calc(env(safe-area-inset-top,0px) + 12px);background:rgba(0,0,0,.45);color:#fff;font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;pointer-events:none;} /* 라벨 한 장씩 넘겨보기(◀▶) */ #mjbCmpEdit .mce-nav{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;width:100%;padding:4px 0 8px;} #mjbCmpEdit .mce-navl,#mjbCmpEdit .mce-navr{display:flex;align-items:center;gap:8px;} #mjbCmpEdit .mce-navl button{background:rgba(20,16,14,.72);color:#fff;border:none;border-radius:999px;width:38px;height:38px;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;} #mjbCmpEdit .mce-count{color:#fff;font-size:13px;font-weight:800;background:rgba(20,16,14,.55);border-radius:999px;padding:6px 14px;} #mjbCmpEdit .mce-imgbtns{display:flex;gap:8px;justify-content:center;width:100%;} #mjbCmpEdit .mce-addsm{width:auto;flex:0 0 auto;padding:9px 14px;} #mjbCmpEdit .mce-imgdel2{background:rgba(20,16,14,.72);color:#fff;border:none;border-radius:12px;padding:9px 14px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;} /* 성분 한 줄씩 입력 */ #mjbCmpEdit .mce-rows{flex:1 1 auto;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:2px;-webkit-overflow-scrolling:touch;} #mjbCmpEdit .mce-row{display:flex;align-items:flex-start;gap:7px;} #mjbCmpEdit .mce-rn{flex:0 0 auto;width:22px;text-align:center;font-size:11px;font-weight:800;color:#b3a99d;padding-top:11px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:6px;} #mjbCmpEdit .mce-rn:active{cursor:grabbing;background:#efe9e1;} #mjbCmpEdit .mce-ing{flex:1 1 auto;min-width:0;border:1.5px solid #e5ded5;border-radius:9px;padding:9px 11px;font-size:14px;font-family:inherit;outline:none;color:#3a3631;line-height:1.45;resize:none;overflow:hidden;white-space:pre-wrap;word-break:break-all;box-sizing:border-box;display:block;} #mjbCmpEdit .mce-ing:focus{border-color:var(--brand,#FF7A59);} #mjbCmpEdit .mce-rx{flex:0 0 auto;width:32px;height:32px;border:1px solid #f2d9e2;background:#fdf0f4;color:#c96b8a;border-radius:8px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;} #mjbCmpEdit .mce-rmv{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;} #mjbCmpEdit .mce-rup,#mjbCmpEdit .mce-rdn{width:30px;height:15px;border:1px solid #e8ddd3;background:#f4f0ea;color:#8a8178;border-radius:6px;font-size:9px;font-weight:800;cursor:pointer;font-family:inherit;padding:0;line-height:1;} #mjbCmpEdit .mce-rup:active,#mjbCmpEdit .mce-rdn:active{background:#e6ddd0;} #mjbCmpEdit .mce-addrow{flex:0 0 auto;background:#f4f0ea;color:#8a8178;border:1.5px dashed #ddd6c9;border-radius:10px;padding:10px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;} @media (max-width:640px){ #mjbCmpEdit .mce-wrap{flex-direction:column;} #mjbCmpEdit .mce-imgs{flex:1 1 52%;padding:12px;padding-top:calc(env(safe-area-inset-top,0px) + 12px);} #mjbCmpEdit .mce-side{flex:1 1 48%;max-width:none;} } /* ── 리뷰/탭 (detail-v1·detail-set 공통) ── */ /* 후기 */ .rwrite{display:flex;align-items:center;gap:10px;margin-top:11px;background:#fff;border:1px solid #e7ddd2;border-radius:14px;padding:10px 12px;cursor:pointer;} .rwrite .rav{width:32px;height:32px;border-radius:50%;background:#f6f2ec;display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto;} .rwrite .rin{flex:1;font-size:13px;color:#aaa298;font-weight:600;} .rwrite .rstar{font-size:12px;font-weight:800;color:var(--brand);background:#fff0eb;border-radius:8px;padding:6px 10px;white-space:nowrap;} .rlist{margin-top:13px;display:flex;flex-direction:column;gap:14px;} .rhd{display:flex;align-items:center;gap:7px;} .rname{font-size:13px;font-weight:800;} .rst{font-size:12px;color:#F5A623;font-weight:800;letter-spacing:-1px;} .rtm{font-size:11px;color:var(--sub);font-weight:700;margin-left:auto;} .rtx{font-size:13px;line-height:1.5;margin-top:5px;color:#42474f;} .rphotos{display:flex;gap:6px;margin-top:8px;} .rphoto{width:62px;height:62px;border-radius:10px;object-fit:cover;background:#f1ece5;flex:0 0 auto;} .dtabs{display:flex;background:var(--bg);border-bottom:1px solid #ece5db;position:sticky;top:0;z-index:20;padding:0 6px;margin-top:6px;} .dtab{flex:1;text-align:center;font-size:13.5px;font-weight:800;color:#a59b8f;padding:13px 0;cursor:pointer;border-bottom:2.5px solid transparent;} .dtab.on{color:var(--brand);border-bottom-color:var(--brand);} .tabpane{display:none;} .tabpane.on{display:block;} .rft{font-size:11.5px;font-weight:800;color:#8b93a3;margin-top:8px;display:flex;gap:14px;} .repbtn{color:var(--brand);cursor:pointer;} .vsum{display:flex;align-items:center;gap:10px;margin:11px 0 4px;} /* 투표 박스: 선택 표시는 '안쪽 보더'(inset shadow)라 높이 안 변하고 스타일만 바뀜 */ .vbox{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;background:#f6f4f1;border-radius:13px;padding:10px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:box-shadow .12s;} .vbox.up{background:var(--okbg);} .vbox.myvote.up{box-shadow:inset 0 0 0 2px var(--ok);} .vbox.myvote.down{box-shadow:inset 0 0 0 2px #b7a6a6;} .vbox .vn{font-size:17px;font-weight:900;} .vbox.up .vn{color:var(--ok);} .vbox.down .vn{color:#9a9389;} .vbox .vl{font-size:11px;color:var(--sub);font-weight:700;} .vpct{font-size:13.5px;font-weight:900;color:var(--ok);white-space:nowrap;flex:0 0 auto;width:46px;text-align:center;} .rvote{font-size:10.5px;font-weight:900;padding:2px 8px;border-radius:7px;} .rvote.up{background:var(--okbg);color:var(--ok);} .rvote.down{background:#f0ece6;color:#9a9389;} .replies{margin-top:9px;padding-left:11px;border-left:2px solid #f0ece6;display:flex;flex-direction:column;gap:7px;} .reply{font-size:12.5px;color:#5b5048;line-height:1.45;} .reply .rpn{font-weight:800;color:var(--ink);margin-right:5px;} .repinput{margin-top:8px;font-size:12px;color:#aaa298;font-weight:600;background:#faf7f3;border:1px solid #efe7dd;border-radius:10px;padding:8px 11px;cursor:pointer;} /* ── 우하단 제출 FAB (전 페이지 공통: 리뷰·글쓰기·문의·제보·라벨·요청) ── */ .mjb-fab-submit{position:fixed;right:16px;bottom:22px;z-index:60;background:var(--brand);color:#fff;font-size:15px;font-weight:800;border-radius:30px;padding:14px 24px;box-shadow:0 8px 22px rgba(255,122,89,.4);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:bottom .15s ease;} .mjb-fab-submit .p{font-size:11px;background:rgba(255,255,255,.25);border-radius:6px;padding:2px 7px;} .mjb-fab-submit.off{opacity:.4;pointer-events:none;box-shadow:none;} @media(min-width:480px){.mjb-fab-submit{position:absolute;}} /* ── 하단 액션 바: 네이버페이 방식. fixed;bottom:0 고정. 키보드 뜨면 그냥 뒤에 깔림(정상). 전 write 페이지 공통 ── */ /* 네이버식: fixed 아님 → 콘텐츠 흐름 맨 아래에 위치. iOS가 키보드 위로 못 올림(키보드 뜨면 바가 키보드 뒤). 쓰고 스크롤 내려 등록. */ .mjb-actbar{position:relative;display:flex;align-items:center;gap:9px;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));background:var(--bg,#FFF8F1);border-top:1px solid #efe7dd;box-sizing:border-box;} .mjb-actbar .mjb-submit{margin-left:auto;background:var(--brand);color:#fff;font-size:14.5px;font-weight:800;border-radius:14px;padding:12px 20px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1.5px solid var(--brand);font-family:inherit;} .mjb-actbar .mjb-submit .p{font-size:11px;background:rgba(255,255,255,.25);border-radius:6px;padding:2px 7px;} .mjb-actbar .mjb-submit.off{opacity:.4;pointer-events:none;} .mjb-actbar .tool{font-size:14.5px;font-weight:800;color:#8a8178;background:#fff;border:1.5px solid #e3d9c9;border-radius:14px;padding:12px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;} .mjb-actbar .cancel{background:#fff;border:1.5px solid #e3d9c9;color:#8a8178;font-size:14.5px;font-weight:800;border-radius:14px;padding:12px 20px;cursor:pointer;font-family:inherit;} @media(min-width:480px){.mjb-actbar{position:relative;}} /* ── 하단바가 화면 중간에 떠 보이던 문제 (2026-08-20) .tabbar 는 position:sticky; bottom:0 이라, 목록이 짧으면 흐름 위치에 그대로 머문다. (알림 활동 탭이 비었을 때, 커뮤니티 '다같이 기다리는 중'이 짧을 때 드러났다) .screen 을 세로 flex 로 만들고 하단바를 margin-top:auto 로 밀어 바닥에 붙인다. 화면마다 고치지 않고 여기 한 곳에 둔다 — .screen 은 인라인