라 그 6px 이 없습니다 — 여기서 채웁니다. */
#owf_timesale{margin-top:56px}
/* ── 10-2. 섹션 제목 줄 — 가운데 정렬 + 제목 옆 타이머/상태칩 ──
사장님 2026-09-15 ① "전체 온브릭스처럼 가운데 정렬로" ② "제목 옆에 시간 타이머".
[더보기]는 가운데를 깨므로 같은 줄 오른쪽 끝에 따로 붙입니다. */
/* ★ 왼쪽 정렬 (사장님 지시 2026-09-15 "지금 단락 제목들을 가운데 정렬로 했는데,
이거때문에 더 어색한 것 같아. 왼쪽 정렬로 바꾸고").
레퍼런스 두 곳도 실제로는 왼쪽 정렬입니다 —
온브릭스 .comm-title__main text-align:start
컬리 ⭐일일특가 h2 text-align:start
제목 아래 10px 은 온브릭스 실측 그대로 둡니다. */
/* ★ align-items 는 baseline 이 아니라 **center** 입니다 (사장님 지적 2026-09-15
"시계랑 오직 단 하루가 가운데 정렬이 안맞아 보여. 오직 단 하루가 밑에 내려와 보여").
왜 어긋났나 — 타이머 알약이 flex 상자라서, baseline 정렬을 쓰면 알약의 기준선을
**첫 자식인 시계 SVG** 에서 가져옵니다. SVG 는 글자가 아니라 기준선이 없어
상자 아래끝으로 대신 잡히고, 그만큼 제목이 아래로 내려가 보였습니다(실측 1px).
→ 가운데 기준으로 맞추면 제목 상자와 알약 상자의 한가운데가 정확히 겹칩니다. */
.gazit-title{position:relative; display:flex; align-items:center; gap:9px;
/* ★ 2026-09-17 — `justify-content:flex-start` 를 **되찾습니다**.
style.css 의 옛 규칙(`space-between`)이 그대로 남아 있어서, 이 줄의 요소들이
**양끝으로 벌어져** 있었습니다. 아래 `a{margin-left:auto}` 는 원래 '더보기만 오른쪽으로'
라는 뜻이라, space-between 이 남아 있으면 이 gap:9px 가 아무 일도 못 합니다.
제목 앞에 아이콘을 붙이고 나서 확실히 드러났습니다 — 아이콘은 화면 왼쪽 끝,
제목은 오른쪽 끝으로 찢어졌습니다(실측 2026-09-17: 하트 x16 · 제목 x160).
오늘 특가 줄(시계·타이머·제목)도 같이 왼쪽으로 모입니다 — 원래 의도한 모양입니다. */
justify-content:flex-start;
text-align:left; padding:0 16px; margin:0 0 10px}
.gazit-title h2{font-size:20px; font-weight:700;
line-height:1.2; letter-spacing:0; margin:0} /* 20/700/1.2 — 온브릭스 실측 */
.gazit-title a{margin-left:auto; flex:none;
font-size:12px; font-weight:400; color:var(--gi-mute)}
/* 후기 제목만 홀로 남아 있던 가운데 22px — 다른 단락 제목과 같게 맞춥니다.
(사장님 지시 2026-09-15 "지금 단락 제목들을 가운데 정렬로 했는데 …왼쪽 정렬로 바꾸고")
.review-head 는 .gazit-title 을 안 쓰는 옛 덩어리라 style.css:346 규칙이 그대로 살아 있었습니다. */
.review-head{text-align:left; padding:0 16px; margin-bottom:10px}
.review-head h3{font-size:20px; font-weight:700; line-height:1.2; letter-spacing:0}
/* ── 제목 옆 남은시간 — 연한 회색 블럭 하나 (사장님 지시 2026-09-15) ──
"특가 있는 날에도 상품별로 남은 시간이 다 같기 때문에 상품별로 타이머를 켜둘 필요가 없어.
오히려 중복되는 지저분한 요소가 되는거지.
시계타이머를 아까처럼 이모지 넣고 메인 제목으로 올리자.
오직 단 하루 옆에 처음처럼 연한 회색 블럭으로 타이머를 넣어줘."
맞는 지적입니다 — 한 회차의 상품은 마감 시각이 **전부 같습니다**
(lib/timesale.js 의 buildRound 가 회차 창 하나로 만듭니다).
카드가 4장이면 같은 숫자가 4개 도는 셈이었습니다. 그래서 여기 하나로 모읍니다.
★ 카드 위 알약(.ts-pill)과 아래 롤링 띠(.roll)는 common.js 가 더 이상 그리지 않습니다.
규칙만 아래·style.css 에 남겨 둡니다 — 되돌릴 때 쓰고, .roll 은 배포 검사도 봅니다. */
/* ★ 타이머와 제목은 **같은 크기** 입니다 (사장님 지시 2026-09-15
"타이머와 오직 단 하루 사이즈 똑같이 맞추기"). 둘 다 20px.
연한 회색 블럭은 그대로 두되, 제목과 밑줄(baseline)이 맞도록 세로 여백으로 높이를 냅니다 —
height 를 고정하면 20px 글씨가 블럭 밖으로 삐져나옵니다. */
.gazit-title .gt-timer{display:inline-flex; align-items:center; gap:6px; flex:none;
padding:4px 11px; border-radius:var(--gm-r-pill); background:var(--gi-soft);
font-size:20px; font-weight:var(--gm-w-bold); color:var(--gi-ink);
line-height:1.2; font-variant-numeric:tabular-nums; white-space:nowrap}
.gazit-title .gt-timer b{font-weight:inherit; color:inherit; font-size:inherit}
.gazit-title .gt-clock{width:17px; height:17px} /* 글씨가 커진 만큼 시계도 같이 */
/* ★ 블럭 밖으로 나온 시계 — 이 줄의 **첫 잉크**라서 왼쪽 정렬선(16px)에 딱 서야 합니다.
.gazit-title 의 padding-left 가 16 이고 시계는 그 첫 자식이므로 그대로 16 입니다.
블럭(.gt-timer)은 시계 오른쪽에 붙어 숫자만 담습니다. */
.gazit-title .gt-clock-lead{flex:none; margin-right:-3px}
.sect-timer{display:none}
/* ══ 대제목 앞 아이콘 (직원분 지시 2026-09-17) ════════════════════════════
"예약상품 텍스트 앞에 카카오 아이콘(오늘특가의 돌아가는 시계 크기와 동일) · 딸랑딸랑 모션"
"공동구매 텍스트 앞에 하트 아이콘(대제목 아이콘 사이즈 통일) · 흰 하트가 붉게 채워지는 모션"
→ 크기는 **오늘 특가의 시계와 같은 17px** 한 벌로 묶습니다(.gt-ico).
새 아이콘이 생기면 여기에 클래스만 하나 더하면 크기는 저절로 맞습니다. */
.gazit-title .gt-ico{width:17px; height:17px; flex:none; overflow:visible}
.gazit-title .gt-ico-lead{flex:none; margin-right:5px}
/* 카카오 — 브랜드 색 그대로(노랑 #FEE500 · 갈색 #3C1E1E). 작게 줄여도 카카오로 읽히는 이유가 이 두 색입니다. */
.gt-kko .bg{fill:#FEE500}
.gt-kko .fg{fill:#3C1E1E}
/* 딸랑딸랑 — 매다는 점(위 가운데)을 축으로 좌우로 흔듭니다. 계속 흔들면 눈이 아파서
2.6초마다 한 번, 0.7초만 흔들고 쉽니다(시계 초침과 같은 결). */
.gt-kko{transform-origin:50% 10%; animation:gmJingle 2.6s ease-in-out infinite}
@keyframes gmJingle{
0%, 74%, 100%{transform:rotate(0)}
78%{transform:rotate(-13deg)} 82%{transform:rotate(11deg)}
86%{transform:rotate(-8deg)} 90%{transform:rotate(6deg)}
94%{transform:rotate(-3deg)}
}
/* 하트 — 흰 속이 붉게 **차오릅니다**. 테두리는 늘 붉은색이라 비어 있어도 하트로 보입니다.
(SVG 의 fill 은 CSS 로 부드럽게 변합니다. 색 값은 --gi-point 와 같은 #f42b54 을 직접 적습니다 —
keyframes 안에서 var() 를 쓰면 브라우저에 따라 중간색이 안 섞이고 툭 바뀝니다.) */
.gt-heart path{fill:#fff; stroke:#f42b54; stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round;
animation:gmHeartFill 2.6s ease-in-out infinite}
@keyframes gmHeartFill{
0%, 12%{fill:#fff}
46%, 74%{fill:#f42b54}
100%{fill:#fff}
}
/* 흔들림·깜빡임을 꺼 둔 손님(어지럼증·멀미) — 움직임만 멈추고 모양은 그대로 둡니다 */
@media (prefers-reduced-motion:reduce){
.gt-kko{animation:none}
.gt-heart path{animation:none; fill:#f42b54}
}
/* (되돌리기용) 카드 위 알약 — 지금은 common.js 가 그리지 않습니다 */
.ts-pill{position:absolute; left:50%; transform:translateX(-50%); top:8px; z-index:3;
display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 10px;
border-radius:80px; background:#fff; color:var(--gi-ink);
box-shadow:0 2px 7px rgba(0,0,0,.13); white-space:nowrap; pointer-events:none}
.ts-pill .lb{font-size:10.5px; font-weight:var(--gm-w-mid); color:var(--gi-mute)}
.ts-pill b{font-size:12.5px; font-weight:var(--gm-w-bold); font-variant-numeric:tabular-nums}
/* 섹션 맨 아래 버튼 (타임세일 상품 보러가기 등) */
.sect-more{padding:12px 16px 0; text-align:center}
.sect-more.hide{display:none}
.sect-more .btn{display:inline-block; width:auto; padding:10px 18px; font-size:13px;
border:1px solid var(--gi-line); color:var(--gi-ink-2); background:#fff}
/* 제목 옆 상태칩 (예약구매 '알림신청 받는 중 3개') — 배지 규칙대로 옅게 */
.gazit-title .gt-chip{display:inline-flex; align-items:center; margin-left:7px;
vertical-align:middle; height:22px; padding:0 9px; border-radius:var(--gm-r-s);
background:var(--gm-brand-soft); border:1px solid var(--gm-brand-line);
color:var(--gm-brand-ink); font-size:11.5px; font-weight:var(--gm-w-mid);
white-space:nowrap}
/* ── 10-3. 배너 박스 껍데기 제거 ──
바탕·테두리·라운드·안쪽여백을 전부 걷어냅니다. 상자는 '투명한 칸'만 남습니다
(관리자 [배너관리]가 이 칸에 이미지를 덮어쓰는 기능이 살아 있어야 해서 남깁니다 —
server.js SCREEN_ZONES 의 rsvBanner·gbBanner 자리입니다). */
.gazit-banner{background:none; border:0; border-radius:0; padding:0; margin:0 16px 12px;
text-align:left}
.gazit-banner h2{font-size:15px; font-weight:var(--gm-w-mid); margin:0 0 3px}
.gazit-banner p{font-size:12.5px; color:var(--gi-mute); line-height:1.5}
/* ── 10-4. 없어도 되는 것 — 감춥니다 ──
· tsTag/tsHead/tsLead/tsState : 제목과 타이머가 이미 말하는 것을 되풀이
· tsWindow : '이번 회차 …~…' — 남은시간 숫자가 더 정확
· 진행바 : 남은시간과 같은 말을 두 번
· rsvHead : '최저가 오픈 대기 상품' = 섹션 제목의 되풀이 */
/* ★ #rsvLead 도 감춥니다 — 이 자리는 이제 사무실이 관리자에서 고치는
[data-sub="reservation"] 한 줄이 맡습니다. 둘 다 보이면 같은 말이 두 줄 납니다.
요소를 남기는 이유는 위와 같습니다(배포 검사 run.js:11449 가 id 존재를 봅니다). */
#tsTag, #tsHead, #tsLead, #tsState, #tsWindow, #rsvHead, #rsvLead,
#owf_timesale .gazit-progress, #owf_timesale .gazit-progress-text{ display:none !important }
/* 위를 다 감추면 타임특가 배너는 빈 칸이 됩니다 — 자리만 차지하지 않게 */
#owf_timesale .gazit-banner{margin:0}
/* ── 10-5. 공동구매 — 박스는 벗고 초록은 남깁니다 ──
★ 여기를 조심해야 합니다. style.css:764~767 이 초록 바탕 위 **흰 글씨**입니다.
바탕만 지우면 흰 바탕에 흰 글씨가 되어 환불 안내가 통째로 사라집니다.
공동구매는 지금 내는 돈과 최종 가격이 다른 유일한 섹션이라 이 한 줄이 꼭 보여야 합니다. */
#owf_groupbuy .gazit-banner{background:none; border:0; padding:0; color:var(--gi-ink-2)}
/* ★ 2026-09-15 — 공동구매 한 줄만 12.5px 로 작았습니다 (사장님: "공동구매 밑에 있는 글도
소제목 폰트 사이즈 동일하게 맞추고"). 이 규칙이 .sect-sub(15px)보다 굵기가 세서 이기고 있었습니다.
색(초록)은 그대로 둡니다 — 일반 구매와 다른 칸이라는 유일한 신호입니다. */
#owf_groupbuy .gazit-banner p{color:#1B7A43; font-size:15px; font-weight:var(--gm-w-body)}
#owf_groupbuy .gazit-banner p b{font-weight:var(--gm-w-bold); color:#14532d}
/* ★ 제목 앞 초록 점은 뺐습니다 (사장님 2026-09-15 "초록 점도 별로야. 기본 이모지로 들어갈게").
'일반 구매가 아니다' 라는 신호는 제목의 이모지와 아래 초록 한 줄이 맡습니다.
제목 앞 그림은 붉은 하트 아이콘이고, 어드민 [화면 미리보기 › 홈 블럭 문구] 제목 앞에 이모지를 넣으면
하트 대신 그 이모지가 나옵니다 (index.html applySectionCopy · 2026-09-30). */
/* ── 10-6. '준비 중' 안내 — 점선 박스를 벗기고 한 줄로 ──
★ 글자색도 같이 바꿉니다. 지금 색(#9a3412·#a16207)은 주황 바탕 위에서 고른 값이라,
바탕만 지우면 흰 화면에 갈색 글씨가 떠서 더 이상해 보입니다. */
#owf_timesale .ts-pending{background:none !important; border:0 !important;
padding:4px 16px 10px; margin:0; justify-content:flex-start; text-align:left}
#owf_timesale .ts-pending .ic{display:none}
#owf_timesale .ts-pending .tx{flex:0 1 auto; align-items:center}
#owf_timesale .ts-pending .tx b{color:var(--gi-ink-2); font-size:13.5px; font-weight:var(--gm-w-mid)}
#owf_timesale .ts-pending .tx span{color:var(--gi-mute); font-size:12px}
#owf_timesale .ts-pending .btn{border:1px solid var(--gi-line); color:var(--gi-ink-2)}
/* ── 10-7. 빈 자리 안내 — 점선 상자 제거 ── */
.rail-empty{background:none; border:0; padding:6px 16px 0; text-align:left}
.rail-empty .e-tit{font-size:14px; font-weight:var(--gm-w-mid); color:var(--gi-ink-2)}
.rail-empty .e-txt{font-weight:var(--gm-w-body); color:var(--gi-mute)}
.rail-empty .e-emo{display:none}
#owf_groupbuy .gb-empty{background:none; border:0; padding:18px 16px}
/* ── 10-8. 소통하기 — 회색 박스 제거 ──
★ 박스만 지우면 오히려 나빠집니다. 안의 버튼 4개가 색을 꽉 채운 덩어리라
지금은 회색 바탕이 그걸 한 묶음으로 가두고 있습니다. 흰 바탕에 그대로 풀어놓으면
홈에서 가장 강한 것이 상품이 아니라 SNS 버튼이 됩니다.
→ 박스를 없애는 것과 **동시에** 버튼도 테두리로 바꿉니다 (버튼 규칙과도 맞습니다). */
.social-bg-box{background:none; border-radius:0; padding:22px 16px 6px; margin:0; text-align:left}
.social-bg-box h2{font-size:19px; font-weight:var(--gm-w-bold)}
.gazit-social a{background:#fff !important; border:1px solid var(--gi-line);
color:var(--gi-ink-2) !important; font-weight:var(--gm-w-mid)}
.gazit-social .grib{border-color:#ffd9bf; color:#c2560a !important}
.gazit-social .tiktok{border-color:#d9dbe3; color:var(--gi-ink) !important}
.gazit-social .youtube{border-color:#ffd0d0; color:#d32f2f !important}
.gazit-social .insta{border-color:#e6d2f0; color:#8a3ab9 !important}
/* ── 10-9. 하단 3카드 — 상자 대신 목록 행 ── */
.index_ban_500 a{border:0; border-bottom:1px solid var(--gi-line); border-radius:0}
/* ── 10-10. 섹션 제목 아래 '한 줄' (사무실이 관리자에서 고칩니다) ──
비워두면 hidden 이 붙어 아예 안 나옵니다. 두 줄 이상은 받지 않습니다 —
여러 줄을 열어두면 2026-09-15 에 걷어낸 '설명 덩어리' 로 되돌아갑니다. */
.sect-sub{margin:-4px 0 10px; padding:0 16px; text-align:left;
font-size:13px; font-weight:var(--gm-w-body); color:#666; line-height:1.5}
.sect-sub[hidden]{display:none}
/* ★ 관리자가 숨긴 블럭 (직원분 지시 2026-10-02 «눈 버튼으로 블럭들을 홈 화면에서 숨기기 / 켜기») — index.html applySectionCopy 가
과 같은 id 의 탭 에 hidden 을 겁니다. !important — 탭 는 .gt-live 처럼 display 를 정하는 규칙이 뒤에 와도
지지 않게(LIVE 칩이 hidden 인데 display:flex 로 되살아나는 것도 함께 막습니다). 빈 탭띠(#tabsWrap)도 같은 식으로 접습니다. */
section[hidden], .gazit-tabs a[hidden], .gazit-tabs-wrap[hidden]{display:none!important}
/* 공동구매 한 줄만 초록 — '이건 일반 구매가 아니다' 라는 신호입니다 */
#owf_groupbuy .sect-sub{color:#1B7A43; margin:0 0 12px}
/* ★ 공동구매 한 줄만 **32px** 에서 시작하고 있었습니다 (다른 단락은 16px).
감싼 .gazit-banner 에 margin:0 16px 가 있는데(위 351줄) 그 안의 .sect-sub 가
padding:0 16px 를 또 먹어서 16+16 이 된 것입니다. 감싼 쪽 여백을 0 으로 둡니다. */
.gb-banner{margin-left:0; margin-right:0}
/* ══════════════════════════════════════════════════════════════════════════
11. 예약구매 카드 — 상품이 보이게 2026-09-15
══════════════════════════════════════════════════════════════════════════
사장님 지적: "예약구매탭의 제품 썸네일에 오픈 안내 시간과 알림신청이 다 들어가 있으니
상품이 안보여… 알림신청은 버튼으로 해서 썸네일 밑에 만들어 붙여줘."
★ 이 자리는 세 번 바뀌었다 되돌아온 곳입니다 (common.js 의 주석에 이력이 있습니다).
특히 2026-08-25 에는 "아래에 두니 잘 안 보인다" 는 정반대 지시가 있었습니다.
이번에는 **상품 사진을 살리는 것**이 목적이라 다시 아래로 내립니다.
★ style.css 원본은 건드리지 않았습니다 — 배포 검사(run.js:11556)가
`.restock-wrap{position:absolute;right:0;top:calc(50% - 6px)` 규칙이 그대로 있는지 봅니다.
여기서 예약 칸만 덮어씁니다.
══════════════════════════════════════════════════════════════════════════ */
/* 오픈시각 칩 자리는 아래 12-2 에서 정합니다 (사진 맨 위 띠). */
/* 썸네일 **밖** 아래 가로버튼 */
.card-act{padding:8px 0 0}
.card-act .restock.wide{
display:flex; width:100%; min-height:38px; margin:0; border-radius:var(--gm-r);
background:#fff; color:var(--gi-brand); box-shadow:none;
border:1.5px solid var(--gi-brand); font-size:13px; font-weight:var(--gm-w-mid);
}
/* (2026-09-16 삭제) `#owf_reservation .card.sold.alarm .thumb::after{padding-bottom:0}` — 09-15 '썸네일 밖 가로버튼' 시절
규칙. 알약이 다시 사진 가운데로 돌아오면서(cardHTML 09-16) 이 줄이 덮개 글씨를 가운데로 끌어내려 **알약과 겹쳤습니다**
(검토에서 잡음). style.css .card.sold .thumb::after{padding-bottom:64px} 가 글씨를 위로 올려 알약 자리를 비웁니다. */
/* 카드가 높아져도 가로 띠의 형제 카드가 같이 늘어나지 않게.
.rail 은 flex 인데 align-items 가 없어 기본 stretch 라, 버튼 하나 때문에
옆 카드까지 늘어나 사진 아래에 빈칸이 생깁니다. */
.rail{align-items:flex-start}
/* ── 12-1. 예약구매 제목 옆 상태칩 숨김 (사장님 2026-09-15 "알림신청 받는 중 3개는 삭제") ──
요소는 남깁니다 — index.html 의 예약구매 그리기가 #rsvTag 에 널 검사 없이 글을 씁니다. */
#rsvTag{display:none !important}
/* ── 12-2. 오픈시각 칩을 썸네일 **맨 위**로 (사장님 2026-09-15
"오늘 00시 오픈 은 간격 애매하게 띄우지 말고 상단으로 올려줘") ──
모서리에서 10px 떠 있던 것을 없애고, 사진 위쪽에 딱 붙는 띠로 바꿉니다. */
#owf_reservation .card.overlay .sched{
top:0; left:0; right:0; transform:none; display:block;
/* ★ style.css 의 .sched 에 max-width:calc(100% - 20px) 가 걸려 있어
띠가 좌우 20px 모자랐습니다(실측 290 / 사진 310). 여기서만 풉니다. */
max-width:none;
}
/* ★ 딱딱한 검은 막대는 사진 위에 '뚜껑' 처럼 얹혀 어색합니다
(사장님 2026-09-15 "오픈 예정 알림 시간도 너무 바로 들어가서 어색해보여").
→ 아래로 갈수록 투명해지는 **그늘**로 바꿔 사진과 이어 붙입니다.
사진 카드에서 글자를 얹을 때 쓰는 기본 방식이고, 경계선이 안 생깁니다. */
#owf_reservation .card.overlay .sched .when{
display:block; border-radius:0; text-align:left;
padding:11px 14px 18px; font-size:12.5px; font-weight:var(--gm-w-mid);
background:linear-gradient(180deg, rgba(13,14,18,.72) 0%,
rgba(13,14,18,.42) 55%,
rgba(13,14,18,0) 100%);
-webkit-backdrop-filter:none; backdrop-filter:none;
text-shadow:0 1px 3px rgba(0,0,0,.45);
}
/* ── 12-3. 알림 종을 딸랑딸랑 (사장님 2026-09-15
"알림신청 버튼이 잘 안보인다는 피드백이 있었으니, 알림 종이 딸랑딸랑 하고 움직이는 모션") ──
★ 계속 흔들면 눈이 피로하고 광고처럼 보입니다 — 2.6초에 한 번, 세 번만 흔듭니다.
★ 아이콘만 흔들고 버튼은 가만히 둡니다. 버튼이 움직이면 누르려는 손가락이 빗나갑니다. */
.card-act .restock.wide .gi{
transform-origin:50% 12%;
animation:gmBell 2.6s ease-in-out infinite;
}
@keyframes gmBell{
0%, 62%, 100% { transform:rotate(0) }
66% { transform:rotate(14deg) }
70% { transform:rotate(-12deg) }
74% { transform:rotate(9deg) }
78% { transform:rotate(-7deg) }
82% { transform:rotate(4deg) }
86% { transform:rotate(-2deg) }
}
/* 움직임을 줄여달라고 설정한 손님에게는 흔들지 않습니다 */
@media (prefers-reduced-motion:reduce){ .card-act .restock.wide .gi{animation:none} }
/* ══════════════════════════════════════════════════════════════════════════
13. 도는 시계 · 컬리식 썸네일 배지 2026-09-15
══════════════════════════════════════════════════════════════════════════
★ 컬리 메인 「⭐일일특가」 실측 (kurly.com/main · 2026-09-15)
제목 h2 28px / 500 / 자간 -0.26px / #333 · 왼쪽 정렬, 별 이모지가 제목 앞
타이머 span 32px / 700 / #333 (시·분·초를 span 3개로 나눠 씀 — 숫자가 제목보다 큽니다)
시계 36×36 **Lottie 애니메이션** (실제로 돌아가는 것 확인)
아래 한 줄 p 14px / 400 / #ccc 「망설이면 늦어요!」
썸네일 배지 absolute top:8px left:8px · 라운드 6px · padding 6px 8px ·
바탕 rgb(189,118,255) · 글자 14px / 500 / 흰색
★ 컬리는 Lottie(그림 파일)를 쓰지만 우리는 **CSS 로 바늘만 돌립니다** —
파일을 더 받지 않고, 색도 글자색을 따라가 흑백 화면에서 튀지 않습니다.
이모지를 CSS 로 돌리는 방법은 쓰지 않았습니다 — 12 숫자까지 같이 돌아
시계가 넘어진 것처럼 보입니다.
══════════════════════════════════════════════════════════════════════════ */
.gt-clock{width:14px; height:14px; flex:none; overflow:visible}
.gt-clock circle{fill:none; stroke:currentColor; stroke-width:1.9}
.gt-clock line{stroke:currentColor; stroke-width:1.9; stroke-linecap:round;
transform-origin:12px 12px}
/* 분침은 2초에 한 바퀴, 시침은 24초에 한 바퀴 — 눈에 '가고 있다' 가 보이는 속도입니다 */
.gt-clock .mm{animation:gmTick 2s linear infinite}
.gt-clock .hh{animation:gmTick 24s linear infinite}
@keyframes gmTick{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){
.gt-clock .mm, .gt-clock .hh{animation:none}
.gt-clock .mm{transform:rotate(110deg)} /* 멈춰 있어도 시계로 읽히게 */
}
/* ── 예약구매 오픈시각 — 컬리처럼 썸네일 **왼쪽 위 배지** (사장님 2026-09-15
"예약구매·오픈특가 시간 안내도, 컬리 썸네일에 왼쪽 상단에 떠있는 알림처럼 해줘") ──
컬리 실측을 그대로 따르되 바탕만 우리 먹색으로 씁니다(보라는 컬리 브랜드색입니다). */
#owf_reservation .card.overlay .sched{
top:8px; left:8px; right:auto; transform:none; max-width:calc(100% - 16px);
/* ★ display:block 이면 .when 이 글줄(인라인) 기준선에 놓여서, 물려받은 큰 행간만큼
아래로 밀립니다(실측 8px 의도 → 36px 로 내려감). flex 로 두면 위에 딱 붙습니다. */
display:flex; align-items:flex-start; line-height:1;
}
#owf_reservation .card.overlay .sched .when{
display:inline-block; border-radius:6px; text-align:left;
padding:6px 8px; font-size:12.5px; font-weight:var(--gm-w-mid); line-height:1.15;
background:rgba(13,14,18,.82); color:#fff;
-webkit-backdrop-filter:none; backdrop-filter:none; text-shadow:none;
}
/* ── 14. 카드 최대 혜택가 (사장님 지시 2026-09-15) ────────────────────────
온브릭스 카드 실측 (www.onbrix.co.kr/shop/main · 2026-09-15)
최대 혜택가 라벨 12px / 500 / #F54B3A
금액 14px / 700 / #F54B3A
우리는 라벨을 회색으로 둡니다 — 금액만 포인트색이면 숫자가 먼저 읽힙니다.
★ 조건(「2,000원 이상」)은 **카드에서 뺐습니다** (사장님 2026-09-15 "복잡하다").
빼도 거짓이 되지 않는 이유 — 이 값은 lib/db.js 의 publicCouponBest 가
**이 상품 1개 값(effective)** 으로 계산합니다. 조건에 못 미치면 애초에 null 이라
카드에 아무것도 안 나옵니다. 즉 **화면에 보이는 금액은 이미 조건을 채운 값**입니다.
조건은 상품상세의 [최대 혜택가 자세히 보기] 에서 그대로 볼 수 있습니다. */
.card .best{margin-top:4px; display:flex; align-items:baseline; gap:4px; flex-wrap:wrap}
.card .best small{font-size:11px; font-weight:var(--gm-w-mid); color:var(--gi-ink-2); flex:none}
.card .best b{font-size:13.5px; font-weight:var(--gm-w-bold); color:var(--gi-point);
font-variant-numeric:tabular-nums}
/* 오버레이 카드(예약구매)는 사진 위에 글이 얹혀 자리가 없습니다 — 붙이지 않습니다 */
.card.overlay .best{display:none}
/* ══════════════════════════════════════════════════════════════════════════
15. 홈 라이브 예고 블록 정돈 2026-09-15
══════════════════════════════════════════════════════════════════════════
사장님 지시 — ⑤ 「라이브 예고」 글자 삭제(여백만 차지) ⑥ 방송 제목을 다른 단락 제목과 동일하게
⑦ 판매할 상품이 자리를 너무 많이 차지
══════════════════════════════════════════════════════════════════════════ */
/* ⑤ 머리글 자리 — 글자를 뺐으니 높이도 없앱니다 (점만 남습니다) */
/* 점(dots)은 2026-09-16 부터 레일 **아래 가운데**에 — 위 여백 12 (style.css .lp-head 참고). 이 줄이 style.css 보다
무게가 높아(0,2,0) 여기서 정합니다. */
.live-pre .lp-head{padding:0; margin:12px 0 0; min-height:0; display:flex; justify-content:center}
.live-pre .lp-head:empty{display:none}
/* 예고 카드의 흰 상자도 벗깁니다 — 홈 전체가 상자 없는 결입니다 */
.live-pre .lp-slide{background:none; border:0; box-shadow:none; border-radius:0; padding:0}
/* ⑥ 방송 제목 = 다른 단락 제목과 같은 모양 (20px / 700 / 왼쪽)
★ 제목·한줄은 **무대 위**에 있습니다 (사장님 지시 2026-09-15 "미리보기창 위로").
그래야 아래 단락들과 같은 짜임이 됩니다 — [제목] → [한 줄] → [내용].
아래 단락의 .gazit-title 은 margin-bottom 10px 이라 그 값을 그대로 씁니다. */
.live-pre .lp-title{font-size:20px; font-weight:var(--gm-w-bold); line-height:1.2;
letter-spacing:0; text-align:left; color:var(--gi-ink); margin:0 0 4px; padding:0}
.live-pre .lp-note{font-size:13px; font-weight:var(--gm-w-body); color:#666;
text-align:left; margin:0 0 10px; padding:0; line-height:1.5}
/* 한줄소개가 비어도 자리는 지킵니다 — 옆 장이 걸쳐 보일 때 무대 높이가 어긋나면
두 장이 삐뚤게 보입니다 (2026-08-26 사장님 지적). 그래서 display:none 을 쓰지 않습니다. */
.live-pre .lp-note:empty{min-height:19px}
/* ⑦ 판매할 상품 — 사진 중심의 작은 줄 */
.live-pre .lp-goods{margin-top:12px; border-top:0; padding-top:0}
.live-pre .lp-goods-h{text-align:left; font-size:13px; font-weight:var(--gm-w-mid);
color:var(--gi-ink-2); margin-bottom:8px; padding:0}
.live-pre .lp-goods-h span{color:var(--gi-mute); font-weight:var(--gm-w-body)}
.live-pre .lp-goods-list{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px;
scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch}
.live-pre .lp-goods-list::-webkit-scrollbar{display:none}
.live-pre .lpg{flex:0 0 auto; width:76px; scroll-snap-align:start; text-decoration:none}
.live-pre .lpg-th{position:relative; width:76px; height:76px; border-radius:var(--gm-r);
background:#e9ecf1 center/cover no-repeat; overflow:hidden}
.live-pre .lpg-th em{position:absolute; left:0; bottom:0; font-style:normal;
background:rgba(13,14,18,.78); color:#fff; font-size:10.5px; font-weight:var(--gm-w-bold);
padding:2px 5px; border-radius:0 6px 0 var(--gm-r)}
.live-pre .lpg-nm{display:none} /* 이름은 눌러 들어가면 바로 나옵니다 */
.live-pre .lpg-pr{margin-top:5px; text-align:left}
.live-pre .lpg-pr b{font-size:12.5px; font-weight:var(--gm-w-bold); color:var(--gi-ink);
font-variant-numeric:tabular-nums}
.live-pre .lpg-pr em{display:none}
/* ③ 전체상품 보러가기 — 색 없이 테두리만 */
.btn.line{background:#fff; border:1px solid var(--gi-line); color:var(--gi-ink-2); font-weight:var(--gm-w-mid)}
/* ② 소통하기 — 아이콘 하나씩 한 줄 */
.gazit-social.sns1{display:flex; gap:10px; justify-content:flex-start; margin-top:10px}
.gazit-social.sns1 a{width:42px; height:42px; flex:none; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
font-size:16px; font-weight:700; text-decoration:none;
background:#fff !important; border:1px solid var(--gi-line)}
.gazit-social.sns1 .grib{color:#c2560a !important; border-color:#ffd9bf}
.gazit-social.sns1 .tiktok{color:var(--gi-ink) !important; border-color:#d9dbe3}
.gazit-social.sns1 .youtube{color:#d32f2f !important; border-color:#ffd0d0}
.gazit-social.sns1 .insta{color:#8a3ab9 !important; border-color:#e6d2f0}
/* 예고 상품 — 사진이 없는 상품은 이모지로 (몰의 일반 카드와 같은 방식) */
.live-pre .lpg-th{display:flex; align-items:center; justify-content:center}
.live-pre .lpg-emo{font-size:30px; line-height:1}
/* ── 15-1. 예고 블록 좌우 여백을 아래 단락과 맞춤 (사장님 지적 2026-09-15) ──
"미리 보기 창 여백과 밑에 오직 단 하루~ 부터의 좌우 여백이 안 맞아서 더 이상하고."
★ 실측으로 원인을 찾았습니다 — 16px 가 **세 겹**으로 쌓여 있었습니다.
.pad padding-left 16 (히어로 영역 전체를 감싸는 칸)
.live-pre margin-left 16
.lp-track padding-left 16
= 48px. 아래 단락(.gazit-title · .grid2)은 padding-left 16 **한 겹**이라 16px.
그래서 예고만 32px 안으로 들어가 동떨어져 보였습니다.
★ 어느 겹을 남길까 — **.lp-track 것만** 남깁니다.
예고는 옆으로 넘기는 캐러셀이라, 트랙은 화면 끝까지 닿아야 다음 장이 가장자리에
걸쳐 보입니다(2026-08-24 사장님 지시). 그래서 바깥 두 겹을 걷고
.live-pre 에 음수 여백을 줘 .pad 의 16 을 상쇄합니다.
결과: 예고 내용도 아래 단락과 똑같이 화면에서 16px. */
.live-pre{margin-left:-16px; margin-right:-16px}
.live-pre .lp-track{padding-left:16px; padding-right:16px; scroll-padding-left:16px}
/* 방송중 입장 카드도 같은 규칙으로 (예고와 같은 자리에 번갈아 뜹니다) */
.live-on{margin-left:0; margin-right:0}
/* ── 15-2. 예고 블록 위아래 간격 (사장님 지적 2026-09-15 "위에 창이 너무 동 떨어진 창 같아") ──
★ 실측 — 헤더 아래와 예고 무대 사이가 **53px** 이나 벌어져 있었습니다:
.pad padding-top 14
.live-pre margin-top 12
.live-pre padding-top 26 ← style.css:125 의 `section{padding:26px 0 6px}` 이
에도 먹고 있었습니다
예고는 헤더 바로 아래 첫 화면이라, 여기가 벌어지면 창이 떠 있는 것처럼 보입니다.
★ 아래쪽은 반대로 6px 밖에 없어 탭바와 붙어 있었습니다. 둘을 같이 잡습니다. */
.live-pre{margin-top:0; padding-top:0; padding-bottom:18px}
/* ══════════════════════════════════════════════════════════════════════════
16. PC 라이브 예고 — 왼쪽 설명 / 오른쪽 예고 이미지 2026-09-15
══════════════════════════════════════════════════════════════════════════
사장님 지시: "pc버전에는 r2w 처럼 왼쪽에 라이브 예고 설명, 오른쪽에 예고 이미지(영상)"
★ r2w 실측 (r2w.co.kr/live · PC 1280 · 2026-09-15)
전체 블록 .FeaturedCampaignPlayer 1180 × 717 · flex
왼쪽 .wrap-live-desc 393px (글 폭 288)
날짜 배지 13px / 600 / #EF3434
제목 h3 26px / 700 / #333 · 행간 36
설명 p 14px / 400 / #757575 · 행간 20
오른쪽 영상/이미지 (세로형)
★ 우리 값으로 옮긴 것 — 색은 우리 팔레트(브랜드 주황·먹색·회색)를 씁니다.
제목 크기는 26이 아니라 **24** 로 둡니다. 우리 단락 제목이 20이라
26이면 예고만 혼자 커져 다른 단락을 눌러 버립니다.
══════════════════════════════════════════════════════════════════════════ */
/* ★★ 2026-09-15 — PC 2단을 **걷어냈습니다** (사장님 지시:
"pc버전에서 라이브 창 화면구성이 영 이상하네... 모바일 기준으로 똑같이 맞춰줘 그냥")
r2w 를 따라 왼쪽 글 / 오른쪽 사진 2단으로 짰는데, 우리 본문이 700px 로 좁아
(style.css:670 — 쿠마마켓처럼 폰과 같은 화면) 두 칸이 다 눌려 어색했습니다.
왼쪽 글칸 320px · 오른쪽 사진 300px — r2w 는 1180px 를 통째로 쓰는 짜임이라
그 절반 폭에 억지로 욱여넣은 꼴이었습니다.
→ **폰과 똑같은 한 칸**으로 갑니다. 사진 안에 날짜·제목·설명·버튼이 얹히고,
판매 예정 상품은 그 아래 한 줄. PC 에서는 그 덩어리를 **가운데로 모읍니다**
(본문 700px 를 사진이 다 먹으면 3:4 비율이라 높이가 900px 가 됩니다).
※ 아래 쓰지 않게 된 2단 규칙은 지웠습니다. 되살릴 일이 생기면 이 커밋을 보세요.
★★ 2026-09-15 (다시) — **2단으로 되돌렸습니다.** 사장님 지적:
"pc는 내가 방송에서 판매 예정 상품을 방송 미리보기 옆 오른쪽으로 빼달라고 했잖아."
원래 원하셨던 것은 2단이 맞고, 한 칸으로 편 것은 제가 **2단의 겹침 버그**를
레이아웃 문제로 잘못 읽은 탓입니다. 겹침만 고쳐 2단을 살렸습니다 → **§34**.
여기 PC 규칙은 §34 로 옮겼습니다(목록 규칙이 §31 보다 뒤에 있어야 먹습니다). */
@media (min-width:760px){
/* ★★ 슬라이드가 **하나뿐일 때만** 가운데로 둡니다 (직원분 지적 2026-09-17 — "PC에서만 레이아웃이 깨짐").
예전에는 트랙 자체에 justify-content:center 를 걸었습니다. 그런데 flex 는 가운데 정렬일 때
**넘치는 내용을 양쪽으로 잘라** 버립니다 — 예고가 2장 이상이면 첫 장이 왼쪽으로 171px 잘려
나가고(실측 · PC 1022px) 스크롤로도 그 자리로 돌아갈 수 없습니다.
한 장일 때만 margin:auto 로 가운데 두면 두 경우 다 맞습니다. */
.live-pre .lp-track > .lp-slide:only-child{margin-left:auto; margin-right:auto}
}
/* ══════════════════════════════════════════════════════════════════════════
17. 방송 중 「지금 판매중인 상품」 2026-09-15
══════════════════════════════════════════════════════════════════════════
사장님 지시: "라이브가 시작되면 라이브 방송 상품들을 한스스타일처럼
지금 판매중인 상품으로 리스트해서 보여주기."
★ 한스스타일 실측 (hanstyle.tv/shop/page.html?id=25 · PC · 2026-09-15)
머리 「지금 판매중인 상품」 16px / 500 / #333
목록 377px 폭 · 세로 스크롤 (22행)
행 369 × 96 · flex · padding 8px · 행간격 0 (붙어 있음)
썸네일 64 × 80 (4:5 세로) · 라운드 0
브랜드 12px / 500 / #757575
상품명 13px / 700 / #333
가격 13px / 600 / #333
★ 우리 값으로 옮긴 것 — 썸네일은 **1:1** 로 둡니다. 한스는 옷이라 4:5 세로가 맞지만
우리는 식품·건기식이라 정사각이 상품 전체를 보여줍니다(몰의 다른 카드도 전부 1:1).
라운드는 우리 규칙(10px)을 씁니다. 브랜드 줄은 없습니다(우리는 자사 상품뿐).
══════════════════════════════════════════════════════════════════════════ */
.live-goods{margin:14px 0 0; padding:0 16px}
.live-goods[hidden]{display:none}
.live-goods .lg-h{font-size:16px; font-weight:var(--gm-w-mid); color:var(--gi-ink); margin-bottom:10px}
.live-goods .lg-h span{font-size:13px; font-weight:var(--gm-w-body); color:var(--gi-mute)}
/* 목록 — 행이 붙어 있고, 길면 안에서만 스크롤합니다(페이지가 끝없이 길어지지 않게) */
.live-goods .lg-list{max-height:328px; overflow-y:auto; -webkit-overflow-scrolling:touch;
border-top:1px solid var(--gi-line)}
.live-goods .lg-list::-webkit-scrollbar{width:0}
.live-goods .lg{display:flex; align-items:center; gap:10px; padding:8px 0;
border-bottom:1px solid var(--gi-line); text-decoration:none; color:inherit}
.live-goods .lg-th{width:64px; height:64px; flex:none; border-radius:var(--gm-r);
background:#e9ecf1 center/cover no-repeat; overflow:hidden;
display:flex; align-items:center; justify-content:center}
.live-goods .lg-emo{font-size:26px; line-height:1}
.live-goods .lg-in{flex:1; min-width:0}
.live-goods .lg-nm{font-size:13px; font-weight:var(--gm-w-mid); color:var(--gi-ink);
line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.live-goods .lg-pr{display:flex; align-items:baseline; gap:5px; margin-top:4px;
font-variant-numeric:tabular-nums}
.live-goods .lg-pr i{font-style:normal; font-size:13px; font-weight:var(--gm-w-bold); color:var(--gi-point)}
.live-goods .lg-pr b{font-size:13px; font-weight:var(--gm-w-bold); color:var(--gi-ink)}
.live-goods .lg-pr s{font-size:11.5px; color:var(--gi-mute)}
/* PC — 왼쪽 방송 영상 / 오른쪽 판매중 상품 (한스스타일과 같은 자리)
한스는 영상 377 · 목록 377 이지만 우리 본문은 700px 라 영상 300 · 목록 나머지로 둡니다. */
/* ★★ 2026-09-15 — 여기 있던 PC 규칙은 **§34 로 옮겼습니다.**
한 번 한 칸으로 폈다가(겹침 버그를 레이아웃 문제로 잘못 읽었습니다)
사장님 지적으로 2단을 되살렸습니다. 겹침의 진짜 원인과 고친 값은 §34 에 적었습니다. */
/* ══════════════════════════════════════════════════════════════════════════
18. 폰 — 예고를 r2w 레이아웃 그대로 2026-09-15
══════════════════════════════════════════════════════════════════════════
사장님 지시: "사진 안으로 넣고, 글이 묻힐 것 같으면 예고 사진을 살짝 어둡게."
"레이아웃 완전 똑같이 배끼기"
★ r2w 모바일 픽셀 실측 (r2w.co.kr/live · 375 · 2026-09-15)
카드 335 × 503 · left 20 · 라운드 12px · overflow hidden
안쪽 여백 좌 20 · 하 20
날짜 알약 bg #FFF1F1 · 라운드 60px · padding 6px 12px · 150×27
글자 13px / 600 / #EF3434
제목 22px / 700 / 흰
설명 12px / 400 / 흰 · 한 줄
버튼 14px / 500 / 흰 · 테두리 1px rgba(255,255,255,.5) · 라운드 100px · 90×32
세로 간격 알약→제목 12 · 제목→설명 12 · 설명→버튼 16 · 버튼→바닥 20
전부 사진 **아래쪽 왼쪽**에 얹힙니다.
★ 우리와 다른 점 둘 — 그대로 따르지 않은 이유를 적어 둡니다.
① 카드 비율: r2w 1:1.5 / 우리 3:4. 예고 사진 비율은 2026-08 에
"폰 카메라 기본이 3:4" 라고 정한 값입니다. 여기를 바꾸면 **기존 예고 사진이 잘립니다.**
② r2w 는 카운트다운이 없고 날짜만 있습니다. 우리는 카운트다운이 중요하므로
**날짜 알약 안에 남은시간을 같이** 넣어 줄 수를 늘리지 않았습니다.
★ 색은 우리 팔레트로 — 연분홍 #fff0f3(--gm-hot-soft) + 핑크빨강 #f42b54(--gi-point).
r2w 의 #FFF1F1 / #EF3434 와 거의 같은 자리입니다.
══════════════════════════════════════════════════════════════════════════ */
/* ★★ 2026-09-15 — 원래 `@media (max-width:759px)` 였습니다. PC 2단을 걷어내면서
**PC 도 이 짜임을 그대로 쓰게** 열었습니다 (사장님: "모바일 기준으로 똑같이 맞춰줘 그냥").
`@media all` 은 '항상' 이라는 뜻입니다 — 중괄호 짝을 그대로 두려고 이렇게 씁니다. */
@media all{
/* 사진 밖 제목·한줄은 안 씁니다 — 제목·설명은 사진 안에 얹힙니다 */
.live-pre .lp-title, .live-pre .lp-note{display:none}
.live-pre .lp-stage{display:block; position:relative; border-radius:12px}
/* 사진 안 내용 — 아래쪽 왼쪽, 안쪽 여백 20 */
.live-pre .lp-over{position:absolute; inset:0; display:flex; flex-direction:column;
align-items:flex-start; justify-content:flex-end; gap:0; padding:20px; text-align:left}
/* 날짜 알약 — r2w 실측 그대로 (라운드 60 · padding 6/12 · 13/600) */
.live-pre .lp-when{align-self:flex-start; background:var(--gm-hot-soft); color:var(--gi-point);
border-radius:60px; padding:6px 12px; font-size:13px; font-weight:var(--gm-w-mid);
line-height:1.15; box-shadow:none}
/* 「라이브까지」 글자는 뺍니다 — 알약 안 남은시간이 그 뜻을 이미 담습니다 */
.live-pre .lp-lead{display:none}
/* 남은시간을 알약 옆에 붙여 한 줄로 (r2w 는 날짜만, 우리는 카운트다운이 더 있습니다) */
.live-pre .lp-timer{position:absolute; left:20px; top:20px; font-size:0}
.live-pre .lp-timer::after{content:attr(data-left); font-size:13px; font-weight:700;
color:#fff; background:rgba(13,14,18,.55); border-radius:60px; padding:6px 12px;
-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
/* 제목 22/700 흰 — 알약에서 12px */
.live-pre .lp-title-in{margin-top:12px; font-size:22px; font-weight:var(--gm-w-bold);
color:#fff; line-height:1.25; letter-spacing:0;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
/* 설명 12/400 흰 · 한 줄 — 제목에서 12px */
.live-pre .lp-note-in{margin-top:12px; font-size:12px; font-weight:var(--gm-w-body);
color:rgba(255,255,255,.9); line-height:1.5;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}
.live-pre .lp-note-in:empty{display:none}
/* 버튼 — 설명에서 16px · 테두리만 · 라운드 100 (r2w 실측) */
.live-pre .lp-btns{margin-top:16px; width:auto; justify-content:flex-start; gap:8px}
.live-pre .lp-alarm{min-height:32px; padding:0 14px; font-size:14px; font-weight:var(--gm-w-mid);
background:transparent; border:1px solid rgba(255,255,255,.5); color:#fff; box-shadow:none}
.live-pre .lp-share{min-height:32px; padding:0 12px; font-size:14px;
background:transparent; border:1px solid rgba(255,255,255,.5); color:#fff}
.live-pre .lp-share span{font-size:14px; font-weight:var(--gm-w-mid)}
/* ★ 글이 묻히지 않게 아래쪽을 더 어둡게 (사장님 지시).
위쪽은 그대로 둡니다 — 사진 전체를 어둡게 하면 정작 상품이 안 보입니다. */
.live-pre .lp-dim{background:linear-gradient(180deg,
rgba(0,0,0,.14) 0%, rgba(0,0,0,.26) 40%, rgba(0,0,0,.60) 74%, rgba(0,0,0,.88) 100%)}
}
/* (PC 에서 사진 안 제목을 감추던 규칙은 뺐습니다 — 2026-09-15 부터 PC 도 폰과 같은 짜임입니다) */
/* ══════════════════════════════════════════════════════════════════════════
19. 라이브 예고 — 카운트다운 제거 · 종 모션 · 신청완료 · 한 덩어리 2026-09-15
══════════════════════════════════════════════════════════════════════════
사장님 지시
① "카운팅 다운 숫자 빼줘. 굳이 필요할까…?"
② "알림 종 딸랑딸랑 움직이는 모션 추가"
③ "알림 받기 신청하면 버튼이 알림 신청 완료로 **버튼색 칠해지고**, 종이 체크로"
④ "판매 예정 상품 … 좌우 여백 딱 맞게 / 썸네일 크기 그때그때 바뀌게"
⑤ "예고와 판매할 상품이 한 덩어리처럼 보이게"
══════════════════════════════════════════════════════════════════════════ */
/* ① 카운트다운 제거 — 날짜 알약이 "언제 하는지" 를 이미 말합니다.
★ 요소는 남깁니다(display:none) — index.html 의 매초 타이커가 이 요소를 잡습니다.
지우면 그 코드도 같이 고쳐야 하고, 되살릴 때 또 고쳐야 합니다. */
.live-pre .lp-timer, .live-pre .lp-lead{display:none !important}
/* ② 종 딸랑딸랑 — 2.6초에 한 번, 아이콘만 흔듭니다(버튼이 움직이면 손가락이 빗나갑니다) */
.live-pre .lp-alarm:not(.done) .gi, .card .restock:not(.done) .gi{
transform-origin:50% 12%; animation:gmBell 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
.live-pre .lp-alarm .gi, .card .restock .gi{animation:none}
}
/* ③ 신청 완료 — 채웁니다. 이 화면에서 '이미 한 일' 을 말하는 유일한 표시라
테두리만으로는 눌렀는지 안 눌렀는지 구별이 약합니다. 종은 체크로 바뀝니다(JS). */
.live-pre .lp-alarm.done{
background:#fff !important; border-color:#fff !important; color:var(--gi-ink) !important;
font-weight:var(--gm-w-bold);
}
.card .restock.done, .card-act .restock.wide.done{
background:var(--gi-brand) !important; border-color:var(--gi-brand) !important;
color:#fff !important; box-shadow:none;
}
/* ④ 판매 예정 상품 — 개수에 맞춰 칸을 나눠 좌우를 딱 맞춥니다.
5개까지는 한 줄에 똑같이 나누고(--n), 6개부터는 지금처럼 옆으로 넘깁니다. */
.live-pre .lp-goods-list.fit{display:grid; grid-template-columns:repeat(var(--n,4), 1fr);
gap:8px; overflow:visible}
.live-pre .lp-goods-list.fit .lpg{width:auto}
.live-pre .lp-goods-list.fit .lpg-th{width:100%; height:auto; aspect-ratio:1/1}
/* ⑤ 예고와 판매할 상품을 한 덩어리로 —
한스스타일은 영상과 목록을 같은 패널 안에 둡니다. 우리는 홈에서 상자를 다 걷어냈으므로
**테두리 없는 아주 연한 바탕** 하나로만 묶습니다. 선을 더하면 걷어낸 상자가 되돌아옵니다. */
.live-pre .lp-slide{background:var(--gi-soft); border-radius:14px; padding:10px 10px 14px}
.live-pre .lp-stage{border-radius:10px}
.live-pre .lp-goods{margin-top:12px; padding:0 2px}
/* ── 19-1. 「이 방송에서 판매할 상품 N개」 글자 삭제 (사장님 지시 2026-09-15) ──
바로 위가 방송 제목이고 아래가 상품 사진이라, 무엇인지는 보면 압니다.
★ 요소는 남깁니다 — 개수(N개)를 JS 가 여기에 써넣고 있어서,
지우면 그 코드도 같이 고쳐야 합니다. 되살릴 때도 한 줄이면 됩니다. */
.live-pre .lp-goods-h{display:none}
.live-pre .lp-goods{margin-top:10px}
/* ── 20. 푸터 SNS (사장님 지시 2026-09-15 — 홈 '기멱과 소통하기' 를 여기로) ──
푸터 글자와 같은 결로. 색은 아이콘이 stroke:currentColor 라 여기서 한 번에 정합니다. */
#footer .fsns{display:flex; gap:18px; align-items:center; padding:14px 16px 4px}
#footer .fsns a{display:inline-flex; color:var(--gi-mute); line-height:0; text-decoration:none}
#footer .fsns a:active{color:var(--gi-ink-2)}
/* 홈에서 걷어낸 '기멱과 소통하기' 잔여 규칙 정리 */
.social-bg-box{display:none}
/* ══════════════════════════════════════════════════════════════════════════
21. 왼쪽 정렬선 16px — 글자가 서는 자리를 한 줄로 2026-09-15
══════════════════════════════════════════════════════════════════════════
사장님 지시: "전체적으로 왼쪽 레이아웃 글자 정렬 다시 확인해봐 … 전체 홈 화면 페이지
글자 레이아웃 다 맞춰."
브라우저에서 **눈에 보이는 글자의 왼쪽 끝**(Range.getClientRects)을 전부 재서
16px 에서 벗어난 것만 여기 모았습니다. 상자가 아니라 **잉크**를 기준으로 재야 합니다 —
상자는 16 인데 안쪽 여백 때문에 글자는 27 에서 시작하는 일이 실제로 있었습니다.
재기 전: 타이머 27 · 공동구매 한 줄 32 · 상품카드 글자 17 · 랭킹 집계줄 18
재고 나서: 전부 16 */
/* ① 상품카드 속 글자 — 상품명·할인율·가격·최대 혜택가가 **17px** 이었습니다.
.card 에 테두리는 없고(0px), 원인은 .desc 의 좌우 1px 안쪽 여백입니다
(style.css:262 `.card.plain .desc{padding:10px 1px 0}`).
1px 이라 하나만 보면 안 보이지만, 단락 제목(16)과 세로로 겹쳐 보면 어긋납니다.
★ 몰의 모든 상품 격자가 이 규칙을 씁니다(홈·전체상품·마이페이지·주문서) — 다 같이 16 이 됩니다. */
.card.plain .desc{padding-left:0; padding-right:0}
/* ② 랭킹 '최근 7일 N건 주문' — 좌우 2px 안쪽 여백으로 18px 이었습니다
(index.html 안 #v-ranking 블록). 같은 카드 안의 상품명과도 어긋났습니다. */
/* (규칙은 index.html 안 #v-ranking 블록에 직접 고쳤습니다 — 그