/* ============================================================================
GOODBOX 키치 테마 v1.0
----------------------------------------------------------------------------
custom_goodbox.css 다음에 로드되어 기존 스타일을 덮어씁니다.
되돌리려면 _Layout.cshtml에서 이 파일의 한 줄만 지우면 됩니다.
원본 파일은 전혀 수정하지 않았습니다.
에셋 위치: /assets/images/kitsch/
========================================================================== */
:root{
/* ── 브랜드 색 (실제 에셋에서 추출) ───────────────── */
--gb-pink: #FF2E8F; /* 메인 CTA·강조 */
--gb-pink-deep: #D9006B; /* 눌림·가격 텍스트 */
--gb-pink-mid: #FF6FB2;
--gb-pink-soft: #FFD9E9;
--gb-pink-tint: #FFF0F6;
--gb-bg: #FDEBF3; /* 페이지 배경 */
/* ── 그레이스케일 ─────────────────────────────────── */
--gb-ink: #23151C;
--gb-ink-2: #6B5A63;
--gb-gray: #A2939B;
--gb-line: #F6E2EC;
--gb-white: #FFFFFF;
/* ── 형태 ─────────────────────────────────────────── */
--gb-r-card: 18px;
--gb-r-btn: 14px;
--gb-r-pill: 999px;
--gb-shadow: 0 2px 14px rgba(217,0,107,.09);
--gb-shadow-up: 0 -3px 18px rgba(217,0,107,.12);
--gb-pad: 16px;
/* 굿뉴스·신상품 카드의 사진 칸 높이.
칸과 이미지가 같은 값을 써야 해서 변수로 묶는다 (퍼센트는 grid 안에서 안 풀림) */
--gb-news-img: 38px;
}
/* ============================================================
1. 전역 배경 + 글꼴
============================================================ */
body.bg-4{ background:var(--gb-bg) !important; }
/* 배경 반짝이.
4갈래 별은 단순 도형이라 SVG로 직접 그린다 — 이미지로 만들면 확대 시 뭉개지고
용량도 늘지만, 이건 1KB 남짓에 어떤 화면에서도 선명하다. 색만 바꾸면 톤 조절도 된다. */
.wrap.goodbox-wrap{
background:var(--gb-bg);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M12 0 Q13 11 24 12 Q13 13 12 24 Q11 13 0 12 Q11 11 12 0 Z' transform='translate(16,20) scale(0.85)' opacity='0.9'/%3E%3Cpath d='M12 0 Q13 11 24 12 Q13 13 12 24 Q11 13 0 12 Q11 11 12 0 Z' transform='translate(104,12) scale(0.5)' opacity='0.7'/%3E%3Cpath d='M12 0 Q13 11 24 12 Q13 13 12 24 Q11 13 0 12 Q11 11 12 0 Z' transform='translate(66,74) scale(0.38)' opacity='0.55'/%3E%3Cpath d='M12 0 Q13 11 24 12 Q13 13 12 24 Q11 13 0 12 Q11 11 12 0 Z' transform='translate(120,100) scale(0.72)' opacity='0.8'/%3E%3Cpath d='M12 0 Q13 11 24 12 Q13 13 12 24 Q11 13 0 12 Q11 11 12 0 Z' transform='translate(28,116) scale(0.45)' opacity='0.65'/%3E%3C/g%3E%3C/svg%3E");
background-repeat:repeat;
background-size:150px 150px;
}
/* Pretendard — 시안에 쓰인 계열의 고딕. 가변 폰트 한 개(2.0MB)로 모든 굵기를 덮는다.
(정적 버전은 굵기당 770KB라 400/600/700/800 네 종이면 3.1MB로 더 무겁다)
라이선스: SIL Open Font License 1.1 — 상업적 사용·재배포 가능.
이 한 줄만 지우면 아래 기기 기본 고딕으로 자동으로 되돌아간다. */
@font-face{
font-family:'Pretendard';
font-weight:45 920; /* 가변 축 전체 */
font-style:normal;
font-display:swap; /* 내려받는 동안 기본 고딕으로 먼저 보여준다 */
src:url('../fonts/PretendardVariable.woff2') format('woff2');
}
/* 시안은 둥근 글꼴이 아니라 고딕체다.
이 앱의 기본값은 Cafe24SsurroundAir(둥근 글꼴)이라 시안과 인상이 다르다.
내려받는 폰트를 추가하지 않고 기기 기본 고딕을 쓴다 — 앱이 웹뷰라
iOS·안드로이드에서 각각 그 OS의 정품 고딕이 그대로 나온다.
iOS → Apple SD Gothic Neo
안드로이드 → Noto Sans KR / Roboto
윈도우 → 맑은 고딕
Pretendard를 맨 앞에 둔 건, 나중에 그 폰트를 심으면 기기와 무관하게
똑같이 보이게 하기 위한 자리만 잡아둔 것이다(지금은 없으면 그냥 건너뛴다). */
:root{
--gb-font:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,
'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic','Segoe UI',Roboto,sans-serif;
}
/* 요소를 하나씩 나열하면 option·placeholder·fieldset 처럼 빠지는 곳이 계속 생긴다.
전부 적용하고 아이콘 글꼴만 예외로 둔다. */
/* !important 가 필요하다 — 원본 CSS 가 .bar-title 같은 곳에
Cafe24Ssurround(둥근 글꼴)를 클래스 단위로 박아뒀는데,
그쪽 규칙이 더 세서 헤더 제목·일부 버튼만 옛 글꼴로 남아 있었다. */
body, body *{
font-family:var(--gb-font) !important;
}
body input::placeholder,
body textarea::placeholder{ font-family:var(--gb-font); }
body option, body optgroup{ font-family:var(--gb-font); }
/* 아이콘 글꼴은 절대 바꾸면 안 된다 — 바꾸는 순간 아이콘이 전부 네모로 깨진다 */
[class^="icon-"], [class*=" icon-"]{ font-family:'icomoon' !important; }
[class^="bi-"], [class*=" bi-"]{ font-family:'bootstrap-icons' !important; }
.swiper-button-next, .swiper-button-prev,
.swiper-button-next::after, .swiper-button-prev::after{ font-family:'swiper-icons' !important; }
/* ============================================================
2. 헤더 (홈: .header-v3 / 서브: .header-2)
============================================================ */
.header-container .header-v3{
background:var(--gb-bg) !important;
align-items:center;
padding:8px 14px 10px !important;
gap:8px;
min-width:0 !important; /* 원본의 min-width:350px 해제 — 좁은 기기에서 넘쳤다 */
}
.header-container .header-v3 .left{
margin-right:auto; display:flex; align-items:center;
/* 로고는 화면 폭 구간별 고정폭 (아래 미디어쿼리) — 알약과의 자리 다툼을 없앤다 (2026-09-02) */
min-width:0; flex:0 0 auto;
}
/* 원본이 로고에 margin-top:7px / margin-left:10px 보정을 걸어둬서 세로가 안 맞았다.
여백이 트림된 로고로 교체했으므로 보정을 걷어내고 높이만 맞춘다. */
.header-container .header-v3 .name img{
/* 원래 height:46px 고정(폭 175px)이었는데, 320~390px 기기에서 P·EP 알약과
물리적으로 공존이 불가능했다. 넉넉하면 175px 그대로, 좁으면 비율 그대로
작아진다 (아래 .left 의 min-width 96px 가 하한) (2026-09-02) */
width:175px; max-width:175px !important;
height:auto !important; aspect-ratio:auto; /* 어떤 규칙도 세로를 못 눌러 비율이 항상 원본 그대로 */
display:block;
margin:0 !important;
}
.header-v3 .left .name{ display:block; min-width:0; }
/* 헤더 포인트 표시 — 시안 실측(2x 캔버스 기준 /2):
알약 높이 19px · P원 지름 16px · 숫자 15px · 원이 알약을 거의 꽉 채움 */
.gb-point{
display:inline-flex !important; align-items:center; gap:7px;
flex:none; /* 좁은 기기에서 찌그러지지 않게 */
background:var(--gb-white);
/* 시안은 '양끝 반원(타원)'이 아니라 모서리만 둥근 사각형이다.
테두리를 행별로 추적해보면 왼쪽 변에 곧은 직선 구간이 18행 있다
— 타원이라면 0행이어야 한다. 높이 대비 반지름 ≈ 0.33.
!important 필수: styles.css 의 `.header-v3 .right a{border-radius:50%}` 가
선택자 우선순위에서 이겨 계속 타원으로 그려진다. */
border-radius:7px !important;
padding:3px 10px 3px 7px;
/* 시안 숫자는 우리 기기 고딕보다 좁다. 크기는 시안(글자높이 11px)에 맞추고
자간을 살짝 좁혀 알약 전체 폭을 시안(88.5px)에 가깝게 만든다. */
font-size:14.5px; font-weight:600; letter-spacing:-.4px; color:#2A1A22;
line-height:1; /* 숫자가 알약 밖으로 삐져나오던 원인 */
border:1px solid #FBD0E4 !important;
/* 시안은 알약 바깥에 은은한 분홍 광채가 한 겹 깔려 있다 */
box-shadow:0 0 0 3px rgba(255,190,222,.30), 0 1px 4px rgba(217,0,107,.10);
text-decoration:none; white-space:nowrap;
}
/* 원본 styles.css:1045 가 .header-v3 .right a span 전부를 '빨간 알림 점'으로
만들어버린다. 이 P 배지도 거기에 걸리므로 하나하나 되돌려줘야 한다. */
.gb-point .gb-point-p{
position:static !important;
width:16px !important; height:16px !important;
top:auto !important; right:auto !important;
border:0 !important;
border-radius:50%;
background:var(--gb-pink) !important; color:#fff;
font-size:10px; font-weight:800;
/* P 글자가 원 안에서 아래로 쏠리던 문제 — inline-flex + line-height:1 로 정중앙 */
display:inline-flex !important; align-items:center; justify-content:center;
line-height:1; padding:0; box-sizing:border-box;
flex:none;
}
.gb-point:hover{ color:var(--gb-ink); }
.header-v3 .right{
display:flex; align-items:center;
gap:2px !important; /* 원본 0.5rem → 아이콘 3개가 밀려났다 */
flex:none; /* 포인트 알약이 찌그러지지 않게 */
}
/* :not(.gb-point) 필수 — 이 규칙이 포인트 알약까지 잡으면
알약이 34px 정사각 grid 로 찌그러진다. */
.header-v3 .right a:not(.gb-point){
position:relative;
flex:0 0 auto !important; /* 아이콘은 줄어들지 않는다 (2026-09-02) */
width:34px !important; height:34px !important;
margin-top:0 !important; /* 원본의 margin-top:5px 해제 — 로고와 높이가 어긋났다 */
display:grid; place-items:center; color:var(--gb-ink);
}
/* custom_goodbox.css 가 .header-v3 .right a 를 35px 정사각으로 못박아둬서
포인트 알약이 35px 로 잘리고 글자가 종 아이콘 위로 넘쳤다. 알약만 풀어준다. */
.header-v3 .right a.gb-point{
width:auto !important; height:auto !important;
margin-top:0 !important; border:0 !important;
}
.header-v3 .right a i{ font-size:21px; }
/* 장바구니 아이콘 (햄버거 자리 대체) — 아이콘 폰트가 아니라 SVG */
.gb-cart .gb-tabicon{
width:22px; height:22px;
fill:none; stroke:currentColor; stroke-width:1.9;
stroke-linecap:round; stroke-linejoin:round;
}
.header-2 .btn-right .gb-cart, .header-2 .nav-add .gb-cart{
display:inline-grid; place-items:center; color:var(--gb-ink);
}
/* 알림 배지 — 시안처럼 숫자가 들어가는 빨간 원.
:not(.gb-point-p)·:not(.gb-point-num) 필수: 빼면 알약 안의 'P'와 숫자까지 배지로 잡혀
알약 오른쪽 위로 튀어나간다. */
.header-v3 .right a span:not(.gb-point-p):not(.gb-point-num){
position:absolute; top:-1px !important; right:-1px !important;
min-width:16px; height:16px; padding:0 4px;
border-radius:var(--gb-r-pill);
background:#FF3B5C; color:#fff;
font-size:10px; font-weight:800; line-height:1;
display:grid; place-items:center;
border:1.5px solid var(--gb-bg);
width:auto;
}
/* ── 모바일 헤더 자리 배분 (2026-09-02, 아이폰 16 Pro 실기기 결과로 재설계) ─────
· 숫자는 서버/JS 가 강하게 축약(6.3천/1.2만/128만/1.04억) — 최장 '9,999만' 7글자
· 알약은 flex:none — 절대 줄지도, 말줄임되지도 않는다 (실기기 잘림의 재발 방지)
· 자리는 로고가 양보한다(폭 구간 사다리, 비율 유지) · 아이콘 크기는 유지
· 실기기 폰트가 시뮬레이션보다 넓은 것을 감안해 여유를 두고 배분했다 */
.header-v3{ gap:8px; }
.header-v3 .right{
flex:1 1 auto !important; /* 로고를 뺀 나머지 폭을 정확히 차지 */
min-width:0; justify-content:flex-end;
}
.header-v3 .right a.gb-point{
flex:0 0 auto !important; /* 숫자는 절대 잘리지 않는다 */
}
/* 원본 styles.css(1045)가 .right a 안의 span 전부를 6px 빨간 점으로 만든다 —
P 글자(.gb-point-p)처럼 숫자(.gb-point-num)도 하나하나 되돌려야 한다 */
.header-v3 .right a span.gb-point-num,
.header-container .header-2 .btn-right a span.gb-point-num,
.gb-point .gb-point-num{
position:static !important;
width:auto !important; height:auto !important;
top:auto !important; right:auto !important;
background:transparent !important; border:0 !important; border-radius:0 !important;
font-size:inherit !important; font-weight:inherit !important; color:inherit !important;
line-height:inherit !important; padding:0 !important;
display:block; white-space:nowrap;
}
/* ≤440 부터 알약을 컴팩트체로 — 아이콘·로고 자리를 지키면서 숫자를 온전히 (홈+서브) */
@media (max-width:440px){
.gb-point{ font-size:12.5px; padding:3px 7px 3px 5px; gap:4px; }
.gb-point .gb-point-p{ width:14px !important; height:14px !important; font-size:9px; }
.header-container .header-2 .header-content .gb-point{ font-size:12px; padding:2px 6px 2px 5px; gap:4px; }
.header-container .header-2 .header-content .gb-point .gb-point-p{ width:13px !important; height:13px !important; font-size:8.5px; }
}
/* 로고 폭 사다리 — 실기기(402px 등)에서 알약·아이콘이 다 들어가고도 남게 */
@media (max-width:480px){ .header-container .header-v3 .name img{ width:150px; } }
@media (max-width:440px){ .header-container .header-v3 .name img{ width:126px; } }
@media (max-width:410px){ .header-container .header-v3 .name img{ width:96px; } }
@media (max-width:390px){ .header-container .header-v3 .name img{ width:92px; } }
/* 아주 좁은 기기 — 여기서만 아이콘도 한 단계 줄인다 */
@media (max-width:364px){
.header-v3{ gap:6px; }
.header-container .header-v3 .name img{ width:80px; }
.header-v3 .right a:not(.gb-point){ width:30px !important; height:30px !important; }
.header-v3 .right a i{ font-size:19px; }
.header-container .header-2 .header-content .btn-right > a:not(.gb-point){ width:28px; height:28px; }
.header-container .header-2 .header-content .btn-right > a i{ font-size:18px; }
}
@media (max-width:340px){
.header-container .header-v3 .name img{ width:76px; }
/* 320px 급 + 억 단위 잔액 같은 극단 조합에서만 알약이 줄어드는 것을 허용 (마지막 안전판) */
.header-v3 .right a.gb-point{ flex-shrink:1 !important; min-width:44px; }
.gb-point .gb-point-num{ overflow:hidden; }
}
/* ============================================================
3. 히어로 배너
============================================================ */
/* 시안은 배너가 로고 바로 아래(6px)에 붙는다. 원본 .body-container 의
padding-top(63px)이 고정 헤더 자리보다 넉넉해 배너가 내려앉아 있었다.
전역 padding 을 건드리면 다른 화면 헤더까지 영향을 받으므로
홈 배너만 위로 끌어올린다. */
.page-home-main .main-banner-list{
/* 고정 헤더 실측 76px > 본문 상단 여백 63px — margin-top 이 13px 미만이면
배너 위가 헤더 밑으로 파고들어 잘린다 (앱에서 발견). 20px = 헤더 아래 7px 띄움 */
margin:20px 14px 14px !important;
border-radius:20px; overflow:hidden;
box-shadow:0 5px 18px rgba(217,0,107,.20);
}
.page-home-main .main-banner-list .swiper-slide img{
width:100%; height:auto; display:block;
}
.page-home-main .main-banner-list .swiper-pagination-bullet{
background:rgba(255,255,255,.65); opacity:1; width:6px; height:6px;
}
.page-home-main .main-banner-list .swiper-pagination-bullet-active{
background:#fff; width:18px; border-radius:var(--gb-r-pill);
}
/* ============================================================
4. 퀵메뉴 (신규)
============================================================ */
.gb-quick{
display:grid; grid-template-columns:repeat(6,1fr); /* 출석체크+데일리 미션 포함 6칸 */
background:var(--gb-white); border-radius:var(--gb-r-card);
padding:14px 2px 12px;
margin:0 -10px 13px; /* 상단 배너와 가로 폭을 맞춘다 (layout-p-10 상쇄) */
box-shadow:var(--gb-shadow);
}
.gb-quick a{
display:flex; flex-direction:column; align-items:center; gap:7px;
text-decoration:none; color:var(--gb-ink);
font-size:11.5px; font-weight:700; position:relative;
white-space:nowrap;
}
.gb-quick a + a::before{
content:''; position:absolute; left:0; top:5px; bottom:5px;
width:1px; background:var(--gb-line);
}
.gb-quick img{ width:44px; height:44px; object-fit:contain; }
/* ============================================================
5. 박스 카드 (신규)
============================================================ */
.gb-sec-head{
display:flex; align-items:center; justify-content:space-between;
margin-bottom:8px;
}
.gb-sec-head h2{
font-size:14.5px; font-weight:800; margin:0; letter-spacing:-.5px;
color:var(--gb-ink);
}
.gb-sec-head a{
font-size:10.5px; color:var(--gb-ink-2);
text-decoration:none; font-weight:600;
}
.gb-boxgrid{
display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:13px;
align-items:stretch; /* 두 카드 높이를 같게 */
}
/* 설명 글자가 1줄이냐 2줄이냐에 따라 OPEN 버튼 높이가 서로 어긋나던 문제.
카드를 세로 flex로 만들고 버튼을 맨 아래로 밀어 항상 같은 줄에 오게 한다. */
.gb-box{
background:var(--gb-white); border-radius:var(--gb-r-card);
overflow:hidden; box-shadow:var(--gb-shadow);
text-decoration:none; color:var(--gb-ink);
display:flex; flex-direction:column;
}
.gb-box .gb-box-art{
height:136px; display:grid; place-items:center; position:relative;
background:linear-gradient(165deg,#FFF2F8,#FFDCEB);
overflow:hidden;
}
/* 장식 1 — 박스 뒤 광채.
시안은 박스 뒤에서 빛이 번지듯 밝다. 이게 없으면 박스가 배경 위에 그냥 얹힌
스티커처럼 보인다. */
.gb-box .gb-box-art::after{
content:''; position:absolute; z-index:0;
left:50%; top:52%; width:118px; height:118px;
transform:translate(-50%,-50%);
border-radius:50%;
background:radial-gradient(circle, rgba(255,255,255,.95) 0%,
rgba(255,255,255,.55) 42%,
rgba(255,255,255,0) 70%);
pointer-events:none;
}
/* 장식 2 — 반짝이.
작은 상품 카드에선 조각이 잘려 문제였지만, 이 영역은 136px로 넉넉해
조각이 통째로 들어간다. SVG라 확대해도 선명하고 1KB 남짓이다. */
.gb-box .gb-box-art::before{
content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
background-repeat:no-repeat;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 Q13 11 24 12 Q13 13 12 24 Q11 13 0 12 Q11 11 12 0 Z' fill='%23fff'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 Q13 11 24 12 Q13 13 12 24 Q11 13 0 12 Q11 11 12 0 Z' fill='%23FFD9E9'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 Q13 11 24 12 Q13 13 12 24 Q11 13 0 12 Q11 11 12 0 Z' fill='%23fff'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 Q13 11 24 12 Q13 13 12 24 Q11 13 0 12 Q11 11 12 0 Z' fill='%23FFB3D6'/%3E%3C/svg%3E");
background-position: 12px 18px, 88% 26px, 20px 78%, 86% 74%;
}
/* 카드마다 반짝이 위치를 살짝 어긋나게 — 두 카드가 복붙처럼 보이지 않게 */
.gb-box:nth-child(2) .gb-box-art::before{
background-position: 86% 20px, 14px 30px, 84% 76%, 16px 72%;
}
.gb-box .gb-box-tag{
position:absolute; top:9px; left:9px; z-index:3;
font-size:9.5px; font-weight:800; color:#fff;
padding:4px 11px; border-radius:var(--gb-r-pill);
background:var(--gb-pink);
box-shadow:0 2px 6px rgba(217,0,107,.3);
}
.gb-box .gb-box-art img{
position:relative; z-index:2; /* 광채(0)·반짝이(1) 위에 박스가 오게 */
width:104px; height:104px; object-fit:contain;
filter:drop-shadow(0 6px 10px rgba(217,0,107,.22));
transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.gb-box:active .gb-box-art img{ transform:translateY(-6px) rotate(-4deg) scale(1.06); }
.gb-box .gb-box-info{
padding:13px 11px 14px; text-align:center;
flex:1; display:flex; flex-direction:column;
}
.gb-box .gb-box-price{ font-size:15px; font-weight:800; letter-spacing:-.5px; }
.gb-box .gb-box-desc{
font-size:10.5px; color:var(--gb-ink-2);
margin:4px 0 11px; font-weight:600; line-height:1.35;
}
/* CTA 버튼 — 박스 이미지와 카드가 이미 화려하므로 버튼은 단정하게 간다.
그라데이션·광택·글로우를 모두 빼고 단색 + 12px 라운드.
화려함은 박스가 맡고, 버튼은 '누르는 곳'이라는 사실만 명확히 한다. */
.gb-box .gb-box-btn{
margin-top:auto; /* ← 카드 높이가 달라도 버튼은 항상 맨 아래 */
display:block; text-align:center;
color:#fff; font-size:13.5px; font-weight:700; letter-spacing:-.2px;
line-height:1.45; /* ← 본문 줄간격(1.7)을 그대로 쓰면 버튼이 불필요하게 높아진다 */
padding:9px 10px; border-radius:12px;
background:#EC3F8E;
transition:background .15s ease, transform .1s ease;
}
.gb-box .gb-box-btn:hover{ background:#F1559C; transform:translateY(-1px); }
.gb-box:active .gb-box-btn,
.gb-box .gb-box-btn:active{ background:#D62E7B; transform:translateY(1px); }
/* 1만원 박스 — 시안처럼 노란 계열로 */
.gb-box.gb-box--gold .gb-box-art{ background:linear-gradient(165deg,#FFF9E8,#FFE7B0); }
.gb-box.gb-box--gold .gb-box-tag{ background:#FF8A00; box-shadow:0 2px 6px rgba(224,138,0,.35); }
.gb-box.gb-box--gold .gb-box-btn{ background:#F0A312; }
.gb-box.gb-box--gold .gb-box-btn:hover{ background:#F7B12A; }
.gb-box.gb-box--gold:active .gb-box-btn,
.gb-box.gb-box--gold .gb-box-btn:active{ background:#DA9007; }
/* ============================================================
6. 기존 리스트 섹션 (.vouchers-card) 키치화
============================================================ */
/* 시안에서 이 섹션은 '연분홍 패널 위에 흰 카드가 가로로 늘어선' 구조다.
기존엔 반대로 흰 패널 위에 배경 없는 항목이었다. */
/* 시안 실측: 패널 전체 높이 108px (제목줄 + 카드 한 줄).
기존엔 여백이 과해 160px 가까이 됐다. */
/* 패널 사이 간격 — 부트스트랩 mb-10(약 24px)이 너무 벌어져 있었다 */
.page-home-main .vouchers-card.mb-10{ margin-bottom:13px !important; }
.page-home-main .vouchers-card.style-dark{
background:var(--gb-pink-tint) !important;
border-radius:var(--gb-r-card);
box-shadow:var(--gb-shadow);
padding:8px 0 7px;
border:0;
}
/* 원본(custom_goodbox.css)이 .content-top 에 분홍 배경(--bg-pink)을 깔아둬서
제목 뒤에 분홍 가로 띠가 생겼다. 시안엔 그런 띠가 없다. 배경을 지운다. */
/* custom_goodbox.css 가 padding:8px !important 로 못박아 둬서
!important 없이는 위아래 여백이 안 줄어든다. */
.page-home-main .vouchers-card .content-top{
padding:0 13px !important; margin-bottom:5px;
background:none !important;
border-radius:0 !important;
}
/* 시안은 알약 배지가 아니라 '굵은 제목 + 오른쪽 연한 링크' 구조다.
기존의 분홍 알약 배지를 걷어내고 섹션 제목과 같은 격으로 맞춘다. */
.page-home-main .vouchers-card .middle-card{ gap:8px; }
/* 제목이 두 줄로 줄바꿈되면 이 줄 높이가 그대로 두 배가 되어
패널 위아래가 휑해 보인다. 반드시 한 줄로 묶는다. */
.page-home-main .vouchers-card .middle-card .text{
font-weight:800 !important;
font-size:13px; font-weight:800; letter-spacing:-.6px;
background:none; color:var(--gb-ink);
padding:0; border-radius:0;
display:block; line-height:1.3;
min-width:0; white-space:nowrap;
overflow:hidden; text-overflow:ellipsis;
}
.page-home-main .vouchers-card .middle-card .sub-title{
/* .text-small 클래스가 붙어 있어 styles.css 의 12px !important 를 이겨야 한다 */
color:var(--gb-ink-2); font-weight:600; font-size:10.5px !important;
display:inline-flex; align-items:center; gap:2px;
white-space:nowrap; flex:none;
}
.page-home-main .vouchers-card .middle-card .sub-title i{ font-size:15px; }
/* 시안엔 '박스 오픈 상품들이 실시간 업데이트 됩니다' 같은 설명 줄이 없다 */
/* 카드 설명줄 — 굵은 제목 + 얇은 설명 두 줄 구성 (사용자 요청) */
.page-home-main .vouchers-card .content-top > .text-small{
display:block; font-weight:300; font-size:11.5px;
color:var(--gb-gray); margin-top:1px; letter-spacing:-.2px;
}
/* 원본 styles.css 의 .vouchers-card .content-bottom 은 background:white 다.
패널은 연분홍, 카드만 흰색이어야 하는데 이 흰 판이 카드 뒤에 깔려 보였다. */
.page-home-main .vouchers-card .content-bottom{
padding:0 !important;
background:none !important;
border:0 !important;
}
.page-home-main .vouchers-card .mall-product{ padding:0 11px; overflow:hidden; }
/* 가로 스크롤이면 맨 오른쪽 카드가 늘 반쯤 잘려 '튀어나온' 것처럼 보인다.
4칸으로 딱 나눠 어떤 카드도 잘리지 않게 한다. 나머지는 '상품보기'로 이동. */
/* (2026-08-18) 고정 격자 방식은 자동 슬라이드 요청으로 해제 —
칸 수는 Swiper slidesPerView(굿뉴스·신상품 3, 럭셔리 2)가 정한다 */
/* 카드 한 장 — 시안 실측: 72×77px, 이미지 40px, 상품명 10px */
/* 구매자 리뷰 카드와 같은 모양 — 흰 사각형 + 같은 모서리·그림자 */
.page-home-main .vouchers-card .swiper-slide{
position:relative; overflow:hidden;
width:auto; min-width:0; /* 4칸 그리드가 폭을 정한다 */
background:var(--gb-white);
border-radius:12px; padding:5px 5px 6px;
box-shadow:0 2px 7px rgba(217,0,107,.07);
text-align:center;
}
/* 컨페티는 넣지 않는다.
카드가 72px밖에 안 돼서 조각이 항상 모서리에서 잘리고, 그 잘린 반쪽이
'카드 밖으로 삐져나온 것'처럼 보였다. 구매자 리뷰처럼 깔끔한 사각형이 낫다. */
.page-home-main .vouchers-card .swiper-slide .image{
height:var(--gb-news-img); border-radius:7px; overflow:hidden;
background:transparent;
display:grid; place-items:center;
margin-bottom:4px !important;
}
/* 원본 styles.css 가 `img{width:100%;height:auto}` 라서 이미지가 38px 칸에
71px 높이로 들어가 위아래가 잘려 있었다 — 상품이 잘린 것처럼 보인 원인.
height:100% 는 그리드 안에서 잘 풀리지 않으므로 max-* 로 맞춘다. */
.page-home-main .vouchers-card .swiper-slide .image img{
width:auto !important; height:auto !important;
max-width:100%; max-height:var(--gb-news-img);
object-fit:contain;
}
/* 시안은 상품명이 전부 한 줄이다.
두 줄로 흐르면 '에어팟 Pro 2세/대' 처럼 깨지고 카드 높이도 들쭉날쭉해진다. */
/* styles.css 가 .text-small 에 font-size:12px !important 를 걸어놨다.
!important 로만 이길 수 있다. */
.page-home-main .vouchers-card .swiper-slide .text-small{
font-size:10.5px !important; line-height:1.35 !important;
font-weight:700; letter-spacing:-.3px; color:var(--gb-ink);
min-height:0 !important;
display:block !important;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 브랜드 — 상품명 아래 한 줄 (좁은 카드에 둘 다 넣기 위해 분리).
대문자 변환은 하지 않는다: 'LOUIS VUIT…' 처럼 잘리면 읽기 어려워진다. */
.page-home-main .vouchers-card .gb-card-brand{
margin-top:2px; font-size:9px; font-weight:600;
color:var(--gb-gray); line-height:1.3; letter-spacing:-.1px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 시안의 '핑크좋아 님' 자리 */
.page-home-main .vouchers-card .gb-news-meta{
margin-top:2px; font-size:9px; font-weight:600;
color:var(--gb-pink-deep); line-height:1.3;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 가격이 두 줄로 넘어가면 그 카드만 높아져 줄이 어긋난다.
'2,890,000 원' 같은 긴 값도 한 줄에 들어가도록 조인다. */
.page-home-main .vouchers-card .text-price{
margin-top:3px;
font-size:9.5px; font-weight:800; letter-spacing:-.4px;
text-align:center !important;
color:var(--gb-pink-deep) !important;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 내정보 — 옮겨온 메뉴 묶음의 소제목 (시안의 '참여/혜택', '고객지원') */
.gb-setting-group-title{
margin:18px 2px 8px;
font-size:13px; font-weight:800; color:var(--gb-ink);
letter-spacing:-.3px;
}
/* ============================================================
6-2. 구매자 리뷰 (신규 · 시안 재현)
----------------------------------------------------------------
⚠ DB에 리뷰 테이블이 없다. 지금은 화면 확인용 더미이며,
실제 앱(Main.cshtml)에는 넣지 않았다. 자세한 건 대화 참고.
============================================================ */
/* 다른 섹션과 같은 '연분홍 패널 + 흰 카드' 구조 */
.gb-review-sec{
background:var(--gb-pink-tint);
border-radius:var(--gb-r-card);
box-shadow:var(--gb-shadow);
padding:8px 0 7px; margin-bottom:13px;
}
.gb-review-sec .gb-sec-head{ padding:0 13px; margin-bottom:5px; }
.gb-review-sec .gb-sec-head h2{ font-size:13px; }
.gb-reviews{
display:flex; gap:7px; overflow-x:auto;
padding:0 11px 2px;
scrollbar-width:none;
}
.gb-reviews::-webkit-scrollbar{ display:none; }
/* 시안 실측: 카드 134×132 */
.gb-review{
flex:0 0 134px; background:var(--gb-white);
border-radius:12px; padding:7px 8px 8px;
box-shadow:0 2px 7px rgba(217,0,107,.07);
}
.gb-review-top{ display:flex; align-items:center; gap:5px; margin-bottom:5px; }
.gb-review-avatar{
width:22px; height:22px; border-radius:50%; flex:none;
display:grid; place-items:center; font-size:12px; overflow:hidden;
background:linear-gradient(150deg,var(--gb-pink-soft),var(--gb-pink-mid));
}
.gb-review-avatar img{ width:100%; height:100%; object-fit:cover; }
.gb-review-nick{
font-size:10.5px; font-weight:800; color:var(--gb-ink);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gb-review-stars{ margin-left:auto; font-size:8px; color:#FFB300; letter-spacing:-.5px; flex:none; }
.gb-review-badge{
display:inline-block; margin-bottom:5px;
font-size:9px; font-weight:700; line-height:1;
color:var(--gb-pink-deep); background:#FFE3F0;
padding:4px 8px; border-radius:var(--gb-r-pill);
}
/* 시안은 박스 종류마다 배지 색이 다르다 */
.gb-review-badge--5k{ color:#C2185B; background:#FFE0EE; }
.gb-review-text{
font-size:10px; font-weight:600; line-height:1.45; color:var(--gb-ink-2);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden; min-height:2.9em;
}
.gb-review-photo{
margin-top:6px; height:58px; border-radius:9px; overflow:hidden;
background:var(--gb-pink-tint); display:grid; place-items:center;
}
.gb-review-photo img{ width:100%; height:100%; object-fit:cover; }
/* ============================================================
7. 하단 탭바
============================================================ */
.footer-container .menubar-footer{
background:var(--gb-white) !important;
border-radius:22px 22px 0 0;
box-shadow:var(--gb-shadow-up);
height:78px; padding:0 0 18px;
border-top:0;
}
/* 5칸 균등 분할: 좌 2칸 + 중앙 1칸 + 우 2칸.
원본 CSS는 gap 값을 화면폭마다 따로 잡아뒀는데(1.2rem~7.2rem),
그 방식은 글자 길이가 바뀌면 바로 틀어진다. 폭을 나눠 갖게 한다. */
.footer-container .menubar-footer > .d-flex{ align-items:flex-end; height:100%; }
.footer-container .menubar-footer .inner-bar{
flex:2 1 0; display:flex; gap:0;
}
.footer-container .menubar-footer a.inner-bar-item{
flex:1 1 0; min-width:0;
display:flex; flex-direction:column;
align-items:center; justify-content:flex-end;
gap:5px; height:52px;
color:var(--gb-gray); font-size:10.5px; font-weight:700; line-height:1;
}
/* 라벨은 절대 줄바꿈되지 않게 (기존엔 '박스구매'가 두 줄로 쪼개졌다) */
.footer-container .menubar-footer a.inner-bar-item span{ white-space:nowrap; }
.footer-container .inner-bar-item .gb-tabicon{
width:24px; height:24px; flex:none;
fill:none; stroke:currentColor; stroke-width:1.9;
stroke-linecap:round; stroke-linejoin:round;
}
.footer-container .menubar-footer a.inner-bar-item.active{ color:var(--gb-pink); }
.menubar-footer a.inner-bar-item span{ font-size:10.5px; font-weight:700; }
/* 중앙 박스구매 버튼 — 같은 줄에 나란히, 원형만 강조 */
.menubar-footer .middle{
flex:1 1 0; display:flex; align-items:flex-end;
margin-top:0; /* 원본의 -7px 들어올림 해제: 아이콘 높이가 안 맞았다 */
}
.menubar-footer .middle .inner-bar-item.v2{
width:100%; height:52px; color:var(--gb-pink);
display:flex; flex-direction:column;
align-items:center; justify-content:flex-end; gap:5px;
}
.menubar-footer .middle .gb-tabbubble{
width:38px; height:38px; flex:none;
border-radius:50%; display:grid; place-items:center;
background:linear-gradient(150deg,var(--gb-pink-mid),var(--gb-pink));
box-shadow:0 3px 10px rgba(255,46,143,.45);
animation:gb-bob 2.6s ease-in-out infinite;
}
.menubar-footer .middle .gb-tabbubble svg{
width:22px; height:22px;
fill:none; stroke:#fff; stroke-width:2;
stroke-linecap:round; stroke-linejoin:round;
}
.menubar-footer .middle span{
color:var(--gb-pink); font-weight:900; font-size:10.5px;
margin-left:0; /* 원본의 -10px 왼쪽 밀림 해제 */
white-space:nowrap;
}
@keyframes gb-bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
/* ============================================================
8. 하단 안내문구
============================================================ */
/* 법적 고지라 있어야 하지만 주인공은 아니다. 작고 연하게. */
.page-home-main .bottom-content.guide-text{
padding:2px var(--gb-pad) 14px; text-align:center;
}
.page-home-main .bottom-content.guide-text .text{
color:var(--gb-gray); font-size:9px !important; line-height:1.55 !important;
font-weight:500; opacity:.85;
}
.page-home-main .bottom-content.guide-text .text a{ font-size:9px !important; }
.page-home-main .bottom-content.guide-text a{
color:var(--gb-ink-2); font-weight:700;
}
/* ============================================================
9. 서브페이지 헤더 (.header-2) — 전 화면 공통
============================================================ */
/* 원본은 헤더 배경이 노란색(--bg-yellow)이다. 홈과 톤을 맞춘다. */
.header-container .header-2.header-fix{
background:var(--gb-bg) !important;
box-shadow:none; border-bottom:0;
}
.header-container .header-2 .header-content{
display:flex; align-items:center; gap:8px;
padding:6px 4px 8px;
}
.header-container .header-2 .back-btn{
width:32px; height:32px; flex:none;
display:grid; place-items:center; color:var(--gb-ink);
}
.header-container .header-2 .back-btn i{ font-size:22px; }
/* 제목은 화면 가운데 — 원본은 margin-left:15% 로 억지 정렬해 두었다.
오른쪽 아이콘이 3개라 제목 자리가 좁다. 넘치면 줄이지 말고 줄임표로. */
.header-container .header-2 .header-content .bar-title{
flex:1 1 0; min-width:0; margin:0 !important;
padding-left:26px; /* 뒤로가기 화살표(절대배치) 밑으로 글자가 들어가지 않게 (2026-09-02) */
text-align:center; font-size:16px !important; font-weight:800;
color:var(--gb-ink); white-space:nowrap;
overflow:hidden; text-overflow:ellipsis;
}
/* 원본은 .btn-right 가 position:absolute 라 제목 위에 겹쳐 떠 있었다.
(제목은 전체 폭 기준으로 가운데 정렬돼 아이콘에 가려졌다)
흐름에 참여시켜 back / 제목 / 아이콘이 나란히 놓이게 한다. */
.header-container .header-2 .btn-right{
position:static !important;
display:flex; align-items:center; gap:2px !important;
flex:none;
}
/* 서브페이지는 폭이 빠듯하다 — 알약을 홈보다 한 단계 작게 */
.header-container .header-2 .gb-point{
font-size:13px; padding:3px 8px 3px 6px; gap:5px;
}
.header-container .header-2 .gb-point .gb-point-p{
width:15px !important; height:15px !important; font-size:9.5px;
}
.header-container .header-2 .btn-right > a.gb-point{
width:auto !important; height:auto !important;
}
.header-container .header-2 .btn-right > a:not(.gb-point){
position:relative; width:32px; height:32px;
display:grid; place-items:center; color:var(--gb-ink);
border:0 !important; border-radius:0 !important;
}
.header-container .header-2 .btn-right > a i{ font-size:20px; }
/* 서브 헤더 알약 — 홈과 같은 2차 방어 (2026-09-02) */
.header-container .header-2 .btn-right{ min-width:0; }
.header-container .header-2 .btn-right > a.gb-point{ flex:0 1 auto; min-width:0; max-width:100px; }
.header-container .header-2 .btn-right a span:not(.gb-point-p):not(.gb-point-num){
position:absolute; top:-1px; right:-1px;
min-width:15px; height:15px; padding:0 4px; width:auto;
border-radius:var(--gb-r-pill);
background:#FF3B5C; color:#fff;
font-size:9.5px; font-weight:800; line-height:1;
display:grid; place-items:center;
border:1.5px solid var(--gb-bg);
}
/* ============================================================
10. 박스 구매 (.page-shop-box)
============================================================ */
.page-shop-box .card{
background:var(--gb-white) !important;
border:0 !important; border-radius:var(--gb-r-card) !important;
box-shadow:var(--gb-shadow);
}
.page-shop-box .card-header{
background:none !important; border:0 !important;
padding:12px 14px 0 !important;
font-size:14px; font-weight:800; color:var(--gb-ink);
}
.page-shop-box .card-body{ padding:12px 12px 14px !important; }
/* 인사말 */
.gb-shop-hello{ padding:2px 2px 12px; }
.gb-shop-hello h2{
margin:0; font-size:20px; font-weight:800; line-height:1.35;
letter-spacing:-.6px; color:var(--gb-ink); text-wrap:balance;
}
.gb-shop-hello em{ font-style:normal; color:var(--gb-pink); }
/* 박스 선택 카드 — 원본 .img-favorite-cars 는 width:58px 짜리 작은 썸네일용이라
그대로 두면 카드가 58px로 찌그러지고 글자가 한 글자씩 줄바꿈된다. */
.page-shop-box .card-body > .d-flex.gap-32{
display:grid !important; grid-template-columns:1fr 1fr; gap:10px !important;
align-items:stretch;
}
.page-shop-box .img-favorite-cars{
/* 원본은 max-width:40% 라 2칸 그리드(145px) 안에서 58px로 묶였다 */
width:auto !important; height:auto !important;
max-width:none !important; min-width:0;
position:relative; margin:0 !important; padding:10px 8px 12px;
background:var(--gb-white);
border:2px solid var(--gb-line); border-radius:15px;
display:flex; flex-direction:column; align-items:center;
text-align:center; cursor:pointer;
transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.page-shop-box .img-favorite-cars img{
width:82px !important; height:82px !important; max-width:100%;
object-fit:contain; position:static !important;
filter:drop-shadow(0 5px 9px rgba(217,0,107,.20));
}
.page-shop-box .img-favorite-cars h6{
margin:6px 0 0 !important; padding:0 !important;
font-size:14px; font-weight:800; color:var(--gb-ink);
}
.page-shop-box .gb-box-sub{
margin-top:3px; font-size:10.5px; font-weight:600;
color:var(--gb-ink-2); line-height:1.35;
}
.page-shop-box .gb-box-badge{
margin-top:7px; display:inline-block;
font-size:10px; font-weight:800; line-height:1;
padding:5px 10px; border-radius:var(--gb-r-pill);
background:var(--gb-pink-tint); color:var(--gb-pink-deep);
}
.page-shop-box .gb-box-badge--soft{ background:#E6F7F1; color:#12866A; }
/* 선택된 박스 */
.page-shop-box .img-favorite-cars.active{
border-color:var(--gb-pink);
box-shadow:0 4px 16px rgba(217,0,107,.18);
}
.page-shop-box .img-favorite-cars.active::after{
content:'✓'; position:absolute; top:7px; right:7px;
width:24px; height:24px; border-radius:50%;
background:var(--gb-pink); color:#fff;
font-size:13px; font-weight:900;
display:grid; place-items:center;
border:2px solid var(--gb-white);
box-shadow:0 2px 6px rgba(217,0,107,.35);
z-index:3; /* 박스 이미지 뒤로 숨지 않게 */
}
/* 구성품 안내 줄 */
.gb-shop-info{
display:flex; align-items:center; gap:9px;
margin:0 0 13px; padding:11px 13px;
background:var(--gb-white); border-radius:14px;
box-shadow:var(--gb-shadow); text-decoration:none;
color:var(--gb-ink);
}
.gb-shop-info-ico{ font-size:16px; flex:none; }
.gb-shop-info-txt{ flex:1; font-size:12.5px; font-weight:700; }
.gb-shop-info i{ font-size:17px; color:var(--gb-gray); flex:none; }
/* 수량 영역 */
.page-shop-box .box-quantity{ gap:10px; align-items:stretch !important; }
.page-shop-box .box-quantity > .company-item:first-child{ flex:1; min-width:0; }
.page-shop-box .box-quantity .input-group{
background:var(--gb-pink-tint); border-radius:12px; padding:3px;
display:flex; align-items:center;
}
.page-shop-box .box-quantity .input-group .btn{
width:34px; height:34px; padding:0; flex:none;
background:var(--gb-white) !important; border:0 !important;
border-radius:9px !important; color:var(--gb-pink-deep) !important;
font-size:18px; font-weight:800; line-height:1;
box-shadow:0 1px 3px rgba(217,0,107,.12);
}
.page-shop-box .box-quantity .input-group input{
flex:1; width:auto !important; min-width:0;
background:none; border:0; text-align:center;
font-size:15px; font-weight:800; color:var(--gb-ink);
}
/* 빠른 선택 버튼 */
.page-shop-box .box-quantity .btn-group{
display:flex; gap:5px; margin-top:8px; width:100%;
}
.page-shop-box .box-quantity .btn-group .btn{
flex:1; padding:7px 0 !important;
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:9px !important;
color:var(--gb-ink-2) !important;
font-size:11px !important; font-weight:700;
}
.page-shop-box .box-quantity .btn-group .btn-purple{
background:var(--gb-pink-tint) !important;
border-color:var(--gb-pink-soft) !important;
color:var(--gb-pink-deep) !important;
}
/* 예상 결제금액 */
.gb-shop-total{
flex:none; width:132px;
background:var(--gb-pink-tint); border-radius:12px;
padding:10px 11px; text-align:center;
display:flex; flex-direction:column; justify-content:center;
}
.gb-shop-total-cnt{ font-size:11px; font-weight:600; color:var(--gb-ink-2); }
.gb-shop-total-cnt b{ font-weight:800; color:var(--gb-ink); }
.gb-shop-total-sum{
margin:2px 0 1px; font-size:19px; font-weight:900;
letter-spacing:-.6px; color:var(--gb-pink-deep); white-space:nowrap;
}
.gb-shop-total-lbl{ font-size:10px; font-weight:600; color:var(--gb-gray); }
/* 구매하기 */
.gb-shop-buy{
display:block; width:100%; margin:2px 0 8px;
padding:14px !important; border:0 !important;
border-radius:var(--gb-r-pill) !important;
font-size:15.5px; font-weight:800; letter-spacing:.2px;
color:#fff !important;
background:var(--gb-pink) !important;
box-shadow:0 5px 14px rgba(217,0,107,.36),
inset 0 1px 0 rgba(255,255,255,.5);
text-shadow:0 1px 2px rgba(140,0,70,.3);
}
.gb-shop-buy:active{ transform:translateY(1px); }
/* 하단 고정 결제 버튼 — 실제 마크업은 .bottom-wg > .tf-btn.purple 이다.
(.gb-shop-buy 는 미리보기 전용) */
.page-shop-box .bottom-wg{
background:var(--gb-bg) !important;
border-top:0 !important;
padding-bottom:6px;
}
.page-shop-box .bottom-wg .divider{ display:none; }
.page-shop-box .bottom-wg .tf-btn,
.gb-shop-buy{
display:block; width:100%;
padding:14px !important; border:0 !important;
border-radius:var(--gb-r-pill) !important;
font-size:15.5px !important; font-weight:800; letter-spacing:.2px;
color:#fff !important;
background:var(--gb-pink) !important;
box-shadow:0 5px 14px rgba(217,0,107,.36),
inset 0 1px 0 rgba(255,255,255,.5);
text-shadow:0 1px 2px rgba(140,0,70,.3);
}
.page-shop-box .bottom-wg .tf-btn:active,
.gb-shop-buy:active{ transform:translateY(1px); }
/* 서브페이지 헤더가 좁다. 탭바에 '홈'이 항상 있으므로 헤더 홈 아이콘은 숨긴다.
(뒤로가기 + 탭바로 충분히 이동 가능) */
.header-container .header-2 .btn-right > a[href="/"]{ display:none !important; }
/* 쿠폰 / 포인트 버튼 — 원본의 민트·보라 대신 분홍 계열로 */
.page-shop-box .btn-mint,
.page-shop-box .btn-purple,
.page-shop-box .btn-pink{
border:1px solid var(--gb-line) !important;
background:var(--gb-white) !important;
color:var(--gb-ink-2) !important;
border-radius:9px !important;
font-size:11.5px !important; font-weight:700;
padding:7px 12px !important;
box-shadow:none !important;
}
.page-shop-box .btn-purple{
background:var(--gb-pink) !important;
border-color:var(--gb-pink) !important;
color:#fff !important;
}
/* 수량·포인트 증감 버튼은 위에서 따로 잡으므로 되돌린다 */
.page-shop-box .box-quantity .input-group .btn{
border:0 !important; border-radius:9px !important;
background:var(--gb-white) !important;
color:var(--gb-pink-deep) !important;
font-size:18px !important; padding:0 !important;
box-shadow:0 1px 3px rgba(217,0,107,.12) !important;
}
/* 금액 요약 카드 */
.page-shop-box .list-company .text-medium{ font-size:12.5px !important; color:var(--gb-ink-2); }
.page-shop-box .list-company .text-xlarge{ font-size:16px !important; font-weight:800; color:var(--gb-ink); }
.page-shop-box .list-company .text-xlarge .uc_money_realTxt{ color:var(--gb-pink-deep); }
/* 결제수단 선택 */
.page-shop-box .style-payment-card label{
border-radius:12px !important; border:1px solid var(--gb-line) !important;
background:var(--gb-white) !important;
font-size:12.5px; font-weight:700; color:var(--gb-ink);
}
.page-shop-box .style-payment-card input:checked + label{
border-color:var(--gb-pink) !important;
background:var(--gb-pink-tint) !important;
color:var(--gb-pink-deep) !important;
}
/* ============================================================
11. 보관함 (박스함 · 상품함 · 금고함 · 선물함 · 배송내역)
------------------------------------------------------------
탭 묶음(.tab-product)은 네 화면이 같은 마크업을 쓴다.
============================================================ */
.page-mypage-mybox .wg-tab,
.page-mypage-myproduct .wg-tab,
.page-mypage-mydelivery .wg-tab{ margin-bottom:12px !important; }
.tab-product{
display:flex !important; gap:0; list-style:none;
margin:0 !important; padding:0 !important;
background:none !important; border:0 !important;
}
.tab-product .item-slide-effect{ display:none !important; }
.tab-product .nav-tab-item{ flex:1 1 0; min-width:0; }
.tab-product .nav-link{
display:flex !important; flex-direction:column; align-items:center; gap:4px;
padding:7px 2px 8px !important; margin:0 !important;
background:none !important; border:0 !important; border-radius:0 !important;
font-size:11px !important; font-weight:700;
color:var(--gb-gray) !important;
white-space:nowrap;
}
/* 탭 아이콘 — 마크업을 4개 파일에서 고치지 않으려고 CSS로 넣는다.
순서가 고정(박스함/상품함/금고함/선물함/배송내역)이라 nth-child 로 지정한다. */
.page-mypage-mybox .tab-product .nav-link::before,
.page-mypage-myproduct .tab-product .nav-link::before,
.page-mypage-mydelivery .tab-product .nav-link::before{
content:''; width:21px; height:21px; display:block;
background-repeat:no-repeat; background-position:center; background-size:contain;
opacity:.55;
}
.page-mypage-mybox .tab-product li:nth-child(2) .nav-link::before,
.page-mypage-myproduct .tab-product li:nth-child(2) .nav-link::before,
.page-mypage-mydelivery .tab-product li:nth-child(2) .nav-link::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A2939B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16v12H4zM2 4h20v4H2zM12 4v16'/%3E%3C/svg%3E"); }
.page-mypage-mybox .tab-product li:nth-child(3) .nav-link::before,
.page-mypage-myproduct .tab-product li:nth-child(3) .nav-link::before,
.page-mypage-mydelivery .tab-product li:nth-child(3) .nav-link::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A2939B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l3 6-9 12L3 9z'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E"); }
.page-mypage-mybox .tab-product li:nth-child(4) .nav-link::before,
.page-mypage-myproduct .tab-product li:nth-child(4) .nav-link::before,
.page-mypage-mydelivery .tab-product li:nth-child(4) .nav-link::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A2939B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16v11H4zM2 5h20v4H2zM12 5v15'/%3E%3Cpath d='M12 5C10 2 6 3 7 5M12 5c2-3 6-2 5 0'/%3E%3C/svg%3E"); }
.page-mypage-mybox .tab-product li:nth-child(5) .nav-link::before,
.page-mypage-myproduct .tab-product li:nth-child(5) .nav-link::before,
.page-mypage-mydelivery .tab-product li:nth-child(5) .nav-link::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A2939B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v9H3zM14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); }
.page-mypage-mybox .tab-product li:nth-child(6) .nav-link::before,
.page-mypage-myproduct .tab-product li:nth-child(6) .nav-link::before,
.page-mypage-mydelivery .tab-product li:nth-child(6) .nav-link::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A2939B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='m4 7.5 8 4.5 8-4.5M12 12v9'/%3E%3C/svg%3E"); }
/* 선택된 탭 — 분홍 + 아래 밑줄.
.nav-link.active 는 쓰지 않는다: 원본 마크업이 첫 번째 에 항상
active 를 달아둬서 두 탭이 동시에 켜져 보인다. 기준만 쓴다. */
/* 보관함은 , 쿠폰 등은 를 쓴다.
보관함 마크업은 첫 에 항상 active 가 달려 있어(원본 버그) li 가 있는
화면에서는 a.active 를 무시해야 두 탭이 동시에 켜지지 않는다. */
.tab-product .nav-tab-item.active .nav-link,
.tab-product:not(:has(.nav-tab-item.active)) .nav-link.active{
color:var(--gb-pink-deep) !important;
position:relative;
}
.tab-product .nav-tab-item.active .nav-link::before,
.tab-product:not(:has(.nav-tab-item.active)) .nav-link.active::before{
opacity:1;
filter:brightness(0) saturate(100%) invert(23%) sepia(88%) saturate(4000%) hue-rotate(320deg);
}
.tab-product .nav-tab-item.active .nav-link::after,
.tab-product:not(:has(.nav-tab-item.active)) .nav-link.active::after{
content:''; position:absolute; left:14%; right:14%; bottom:0; height:3px;
border-radius:3px; background:var(--gb-pink);
}
/* 상단 요약 카드 */
.page-mypage-myproduct .card-ui,
.page-mypage-mybox .card-ui{
background:var(--gb-white) !important; border:0 !important;
border-radius:var(--gb-r-card) !important;
box-shadow:var(--gb-shadow); margin-bottom:12px !important;
}
.page-mypage-myproduct .card-ui-body,
.page-mypage-mybox .card-ui-body{ padding:12px 13px 13px !important; }
.page-mypage-myproduct .heading-wg .title,
.page-mypage-mybox .heading-wg .title{
font-size:13.5px !important; font-weight:800; color:var(--gb-ink) !important;
}
.page-mypage-myproduct .heading-wg .text-xlarge{
font-size:16px !important; font-weight:900; color:var(--gb-pink-deep) !important;
}
/* 목록 카드 — 원본은 결제수단 선택과 같은 클래스를 쓴다 */
.page-mypage-myproduct .list-payment-card .proof-item,
.page-mypage-mybox .list-payment-card .proof-item{
margin-bottom:8px !important;
}
.page-mypage-myproduct .list-payment-card label,
.page-mypage-mybox .list-payment-card label{
display:flex; align-items:center; gap:10px;
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:14px !important;
padding:10px 12px !important;
box-shadow:0 2px 8px rgba(217,0,107,.06);
}
.page-mypage-myproduct .list-payment-card input:checked + label,
.page-mypage-mybox .list-payment-card input:checked + label{
border-color:var(--gb-pink) !important;
box-shadow:0 3px 12px rgba(217,0,107,.16);
}
.page-mypage-myproduct .list-payment-card label img{
width:64px !important; height:64px !important; flex:none;
object-fit:contain; border-radius:10px;
background:var(--gb-pink-tint);
}
.page-mypage-myproduct .list-payment-card label .text{
font-size:12.5px !important; font-weight:700; color:var(--gb-ink) !important;
line-height:1.35;
}
/* 하단 액션 버튼 */
.page-mypage-myproduct .btn-group .btn,
.page-mypage-mybox .btn-group .btn{
border:1px solid var(--gb-line) !important;
background:var(--gb-white) !important;
color:var(--gb-ink-2) !important;
border-radius:9px !important;
font-size:11.5px !important; font-weight:700;
padding:7px 12px !important; box-shadow:none !important;
}
.page-mypage-myproduct .btn-group .btn-pink{
background:var(--gb-pink) !important; border-color:var(--gb-pink) !important;
color:#fff !important;
}
.page-mypage-myproduct .btn-dark{
background:var(--gb-white) !important; border:1px solid var(--gb-line) !important;
color:var(--gb-ink-2) !important; border-radius:9px !important;
font-size:11.5px !important; font-weight:700;
}
/* 페이지 번호 */
.page-mypage-myproduct .pagination .page-link,
.page-mypage-mybox .pagination .page-link{
border:0 !important; background:none !important;
color:var(--gb-ink-2) !important; font-size:12.5px; font-weight:700;
}
.page-mypage-myproduct .pagination .active .page-link{
background:var(--gb-pink) !important; color:#fff !important;
border-radius:8px !important;
}
/* 보관함 목록 항목 안쪽 — 시안: 브랜드(작게) / 상품명(굵게) / 가격(분홍) / 박스종류 배지 */
.page-mypage-myproduct .gb-item-brand,
.page-mypage-mysafe .gb-item-brand{
font-size:10px; font-weight:600; color:var(--gb-gray);
line-height:1.3; margin-bottom:1px;
}
.page-mypage-myproduct .gb-item-name,
.page-mypage-mysafe .gb-item-name{
font-size:12.5px !important; font-weight:700; color:var(--gb-ink) !important;
line-height:1.35; margin:0 !important;
}
.page-mypage-myproduct .gb-item-price,
.page-mypage-mysafe .gb-item-price{
font-size:14px; font-weight:900; color:var(--gb-pink-deep);
letter-spacing:-.3px;
}
/* 어느 박스에서 나온 상품인지 표시하는 배지.
상품함·금고함·굿뉴스가 같이 쓴다 */
.gb-item-badge{
display:inline-block; font-size:9.5px; font-weight:700;
color:var(--gb-pink-deep); background:var(--gb-pink-tint);
padding:3px 8px; border-radius:var(--gb-r-pill);
}
.page-mypage-myproduct .list-payment-card label .text-secondary{
font-size:10px !important; color:var(--gb-gray) !important;
}
/* 박스함 — 시안: 박스 그림 + 이름을 카드로, 선택하면 분홍 테두리 */
.page-mypage-mybox .selected-box{ padding:0 5px; }
.page-mypage-mybox .selected-box .empty-state{
background:linear-gradient(165deg,#FFF2F8,#FFDCEB) !important;
border:2px solid var(--gb-line) !important;
border-radius:15px !important;
padding:14px 10px !important; margin-bottom:0 !important;
transition:border-color .18s ease, box-shadow .18s ease;
}
.page-mypage-mybox .selected-box .empty-state .icon{
background:none !important; border:0 !important;
width:auto !important; height:auto !important;
display:grid; place-items:center;
}
.page-mypage-mybox .selected-box .empty-state img{
width:88px !important; height:88px !important; object-fit:contain;
filter:drop-shadow(0 5px 9px rgba(217,0,107,.20));
}
.page-mypage-mybox .selected-box .content{ padding:7px 0 12px; }
.page-mypage-mybox .selected-box .content .title{
font-size:13px !important; font-weight:800; color:var(--gb-ink) !important;
}
/* 선택 상태 — JS(SelectedBoxCount)가 붙이는 클래스는 .active 가 아니라 .selected 다 */
.page-mypage-mybox .selected-box.selected .empty-state,
.page-mypage-mybox .selected-box.active .empty-state{
/* 기본 규칙이 border:...!important 라 색만 지정하면 밀린다 */
border:2px solid var(--gb-pink) !important;
box-shadow:0 4px 16px rgba(217,0,107,.18) !important;
}
/* 박스오픈 버튼 */
.page-mypage-mybox .btn-purple{
background:var(--gb-pink) !important;
border:0 !important; border-radius:var(--gb-r-pill) !important;
color:#fff !important; font-size:12.5px !important; font-weight:800;
padding:9px 18px !important;
box-shadow:0 4px 11px rgba(217,0,107,.34), inset 0 1px 0 rgba(255,255,255,.45) !important;
}
/* 금고함·선물함은 브랜드/상품명이 한 줄 안에 나란히 들어간다 */
.page-mypage-myproduct .gb-item-brand + .gb-item-name,
.page-mypage-mysafe .gb-item-brand + .gb-item-name{ display:block; }
.page-mypage-myproduct span.gb-item-brand,
.page-mypage-mysafe span.gb-item-brand{ display:block; }
/* ============================================================
12. 굿뉴스 (Community/Newsroom)
============================================================ */
/* 굿뉴스 탭은 아이콘 없이 글자만 — 보관함 탭의 아이콘 규칙을 끈다 */
.gb-news-tab .nav-link::before{ display:none !important; }
.gb-news-tab .nav-link{ padding:9px 2px 10px !important; font-size:12px !important; }
/* 아직 기능이 없는 탭은 눌리지 않는 느낌으로 */
.gb-news-tab .gb-tab-todo .nav-link{ opacity:.45; cursor:default; }
/* 상단 실시간 배너 — 새 흰 카드(gb-news-slide)가 스타일을 담당한다.
(예전의 분홍 그라데이션+흰 글자 강제 규칙이 새 카드 글자를 지웠었다) */
.page-community-newsroom .newsroom-main-list{
margin-bottom:13px !important; overflow:visible;
}
.page-community-newsroom .swiper-pagination-bullet{
background:rgba(255,255,255,.6); opacity:1;
}
.page-community-newsroom .swiper-pagination-bullet-active{
background:#fff; width:16px; border-radius:var(--gb-r-pill);
}
/* 목록 항목 */
.page-community-newsroom .notifications-item{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:14px !important;
padding:10px 12px !important;
margin-bottom:8px !important;
box-shadow:0 2px 8px rgba(217,0,107,.06);
display:flex; gap:11px; align-items:center;
}
.page-community-newsroom .notifications-item .img-icon{
width:62px !important; height:62px !important; flex:none;
border-radius:10px !important; overflow:hidden;
background:var(--gb-pink-tint) !important;
display:grid; place-items:center;
}
.page-community-newsroom .notifications-item .img-icon img{
width:100% !important; height:100% !important; object-fit:contain;
}
/* 닉네임 */
.page-community-newsroom .notifications-item .content .text-medium{
font-size:10.5px !important; font-weight:700;
color:var(--gb-pink-deep) !important;
}
/* 상품명 */
.page-community-newsroom .notifications-item .title{
font-size:12.5px !important; font-weight:700 !important;
color:var(--gb-ink) !important; line-height:1.35; margin:2px 0 3px !important;
}
/* 박스 종류 */
.page-community-newsroom .notifications-item .text-small{
font-size:9.5px !important; color:var(--gb-gray) !important;
}
/* 가격 — 마지막 줄만 분홍 굵게 */
.page-community-newsroom .notifications-item .content > div:last-child .text-medium{
font-size:13.5px !important; font-weight:900;
color:var(--gb-pink-deep) !important; margin:0 !important;
}
/* 배너 안쪽 카드가 민트색(.card-payment)이라 겉만 분홍으로 바꿔도 남아 있었다 */
.page-community-newsroom .newsroom-main-list .card-payment{
background:none !important; border:0 !important; box-shadow:none !important;
padding:0 !important;
}
/* ============================================================
13. 내정보 (Mypage/Main)
============================================================ */
.page-mypage-main .top-wg{
background:none !important; margin-bottom:13px !important; padding-bottom:0 !important;
}
/* 프로필 카드 */
.gb-my-profile{
display:flex; align-items:center; gap:11px;
background:var(--gb-white); border-radius:var(--gb-r-card);
padding:13px 14px; margin-bottom:11px;
box-shadow:var(--gb-shadow);
}
.gb-my-avatar{
width:46px; height:46px; flex:none; border-radius:50%;
display:grid; place-items:center;
background:linear-gradient(150deg,var(--gb-pink-mid),var(--gb-pink));
color:#fff; font-size:20px; font-weight:900;
}
.gb-my-id{ flex:1; min-width:0; }
.gb-my-name{
font-size:15px; font-weight:800; color:var(--gb-ink);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gb-my-account{ font-size:11.5px; font-weight:600; color:var(--gb-gray); margin-top:1px; }
.gb-my-edit{
flex:none; font-size:11.5px; font-weight:700;
color:var(--gb-ink-2); text-decoration:none;
border:1px solid var(--gb-line); border-radius:var(--gb-r-pill);
padding:7px 12px; background:var(--gb-white);
}
/* 요약 3칸 */
.gb-my-stats{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:8px; margin-bottom:4px; }
.gb-my-stat{
display:flex; align-items:center; gap:7px;
background:var(--gb-white); border-radius:14px;
padding:11px 10px; text-decoration:none;
box-shadow:var(--gb-shadow); min-width:0;
}
.gb-my-stat-ico{
width:28px; height:28px; flex:none; border-radius:9px;
display:grid; place-items:center; font-size:14px;
}
.gb-my-stat-ico--point{ background:var(--gb-pink); color:#fff; font-weight:900; border-radius:50%; }
.gb-my-stat-ico--coupon{ background:#EFEAFF; }
.gb-my-stat-ico--ship{ background:#E6F3FF; }
.gb-my-stat-txt{ min-width:0; display:flex; flex-direction:column; }
.gb-my-stat-txt em{
font-style:normal; font-size:9.5px; font-weight:600; color:var(--gb-gray);
white-space:nowrap;
}
.gb-my-stat-txt b{
font-size:12.5px; font-weight:900; color:var(--gb-ink); letter-spacing:-.3px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 메뉴 묶음 — 시안은 흰 카드 안에 묶여 있다 */
.page-mypage-main .list-setting-item{
background:var(--gb-white) !important;
border-radius:var(--gb-r-card) !important;
padding:4px 6px !important; margin-bottom:11px !important;
box-shadow:var(--gb-shadow);
}
.page-mypage-main .setting-item{
padding:12px 10px !important; border:0 !important;
border-bottom:1px solid var(--gb-line) !important;
color:var(--gb-ink) !important;
}
.page-mypage-main .list-setting-item .setting-item:last-child{ border-bottom:0 !important; }
.page-mypage-main .setting-item .text-medium{ font-size:13px !important; font-weight:700; }
.page-mypage-main .setting-item i{ font-size:19px; color:var(--gb-ink-2); width:24px; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.gb-setting-group-title{
font-size:12px; font-weight:800; color:var(--gb-ink-2);
padding:2px 4px 7px;
}
/* 원본이 프로필 이름에 밑줄을 넣어둔다 */
.gb-my-profile .gb-my-name,
.gb-my-profile a{ text-decoration:none !important; }
/* 이벤트·굿체인지처럼 아이콘 없는 항목의 들여쓰기 정리 */
.page-mypage-main .setting-item:not(:has(i)){ padding-left:10px !important; }
/* ============================================================
14. 로그인 · 회원가입
============================================================ */
.gb-login-head{ text-align:center; padding:10px 0 20px; }
.gb-login-logo{ height:38px; width:auto; display:block; margin:0 auto 14px; }
.gb-login-head h2{
margin:0; font-size:19px; font-weight:800; letter-spacing:-.5px;
color:var(--gb-ink);
}
.gb-login-head p{
margin:5px 0 0; font-size:12.5px; font-weight:600; color:var(--gb-ink-2);
}
/* 입력칸 — 흰 배경 + 분홍 포커스 */
.page-user-login .tf-field-input,
.page-user-join .tf-field-input,
.page-user-login input.tf-input,
.page-user-join input.tf-input{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:13px !important;
height:50px !important;
font-size:13.5px !important; color:var(--gb-ink) !important;
}
.page-user-login .tf-field-input:focus,
.page-user-join .tf-field-input:focus{
border-color:var(--gb-pink) !important;
box-shadow:0 0 0 3px rgba(255,190,222,.35) !important;
}
.page-user-login .tf-field i,
.page-user-join .tf-field i{ color:var(--gb-gray); }
.page-user-login .tf-field-input::placeholder{ color:var(--gb-gray) !important; }
/* 주 버튼 */
.page-user-login .tf-btn.purple,
.page-user-join .tf-btn.purple,
.page-user-login .tf-btn.primary,
.page-user-join .tf-btn.primary{
background:var(--gb-pink) !important;
border:0 !important; border-radius:var(--gb-r-pill) !important;
color:#fff !important; font-size:15px !important; font-weight:800;
height:52px !important;
box-shadow:0 5px 14px rgba(217,0,107,.34), inset 0 1px 0 rgba(255,255,255,.45) !important;
}
.page-user-login .tf-btn.purple:active{ transform:translateY(1px); }
/* 간편 로그인 버튼 */
.page-user-login .btn-login-app{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:13px !important;
color:var(--gb-ink) !important;
font-size:13px !important; font-weight:700;
height:50px !important;
box-shadow:0 2px 8px rgba(217,0,107,.06) !important;
}
/* 링크 */
.page-user-login a{ color:var(--gb-pink-deep); font-weight:700; }
.page-user-login .text-small a{ font-size:11.5px; }
/* 회원가입 — 약관 동의 목록 */
.page-user-join .tf-switch-check + label,
.page-user-join label{ font-size:12.5px; color:var(--gb-ink); }
.page-user-join .card,
.page-user-join .card-ui{
background:var(--gb-white) !important; border:0 !important;
border-radius:var(--gb-r-card) !important; box-shadow:var(--gb-shadow);
}
/* 원본은 입력칸 위에 뜨는 라벨(.tf-field-label)을 쓰는데,
placeholder 와 겹쳐 두 글자가 포개져 보인다. 입력칸 높이를 키운 탓이다.
시안엔 라벨이 없으므로 숨기고 placeholder 만 쓴다. */
.page-user-login .tf-field-label,
.page-user-join .tf-field-label{ display:none !important; }
/* 회원가입도 placeholder 를 쓴다 — 원본은 라벨이 뜨면 placeholder 를 투명하게 만든다 */
.page-user-join .tf-field-input::placeholder{ color:var(--gb-gray) !important; opacity:1 !important; }
.page-user-login .tf-field-input::placeholder{ opacity:1 !important; }
/* ============================================================
15. 알림 (Mypage/MyAlarm) — 시안 구조
============================================================ */
.gb-alarm-head{
display:flex; align-items:center; justify-content:space-between;
padding:2px 2px 10px;
}
.gb-alarm-count{
flex:none; white-space:nowrap;
font-size:12.5px; font-weight:600; color:var(--gb-ink-2);
}
.gb-alarm-count b{ color:var(--gb-pink-deep); font-weight:900; }
/* 원본 button 규칙이 width:100% 라 전체 폭을 먹는다 */
.gb-alarm-readall{
flex:none; width:auto !important;
border:1px solid var(--gb-line) !important;
background:var(--gb-white) !important;
border-radius:var(--gb-r-pill) !important; padding:7px 13px !important;
font-size:11.5px !important; font-weight:700; color:var(--gb-ink-2) !important;
box-shadow:none !important;
}
.gb-alarm-readall:active{ background:var(--gb-pink-tint); }
.gb-alarm-item{
position:relative; display:flex; gap:11px; align-items:flex-start;
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:14px !important;
padding:13px 26px 13px 13px !important;
margin-bottom:8px !important;
box-shadow:0 2px 8px rgba(217,0,107,.06);
cursor:pointer;
}
/* 안 읽은 알림 — 시안처럼 연분홍 바탕 */
/* 17번 공통 규칙(.wrap .notifications-item → 흰 배경)이 뒤에 있어 밀린다.
선택자를 더 구체적으로 잡아 안 읽은 알림 배경을 지킨다. */
.page-mypage-myalarm .gb-alarm-item.is-unread,
.wrap .gb-alarm-item.is-unread{
background:var(--gb-pink-tint) !important;
border-color:var(--gb-pink-soft) !important;
}
/* 오른쪽 점: 안 읽음은 분홍, 읽음은 회색 */
.gb-alarm-dot{
position:absolute; top:17px; right:13px;
width:7px; height:7px; border-radius:50%;
background:var(--gb-line);
}
.gb-alarm-item.is-unread .gb-alarm-dot{ background:var(--gb-pink); }
/* 종류별 아이콘 — 이미지 없이 SVG 로 그린다 */
.gb-alarm-ico{
width:38px; height:38px; flex:none; border-radius:12px;
background:#FFE3F0 no-repeat center / 20px 20px;
}
.gb-alarm-item--gift .gb-alarm-ico{ background-color:#FFE3F0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF2E8F' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16v11H4zM2 5h20v4H2zM12 5v15'/%3E%3Cpath d='M12 5C10 2 6 3 7 5M12 5c2-3 6-2 5 0'/%3E%3C/svg%3E"); }
.gb-alarm-item--box .gb-alarm-ico{ background-color:#EFEAFF; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C4BD8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='m4 7.5 8 4.5 8-4.5M12 12v9'/%3E%3C/svg%3E"); }
.gb-alarm-item--ship .gb-alarm-ico{ background-color:#E3F0FF; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7DD8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v9H3zM14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); }
.gb-alarm-item--event .gb-alarm-ico{ background-color:#FFE3F0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF2E8F' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a3 3 0 0 1 0 6'/%3E%3Cpath d='M10 8v11a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-3'/%3E%3Cpath d='M12 8h0l5-4v14l-5-4H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h8Z'/%3E%3C/svg%3E"); }
.gb-alarm-item--coupon .gb-alarm-ico{ background-color:#E6F7F1; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312866A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8V6h18v2a2 2 0 0 0 0 4v2H3v-2a2 2 0 0 0 0-4z'/%3E%3C/svg%3E"); }
.gb-alarm-item--notice .gb-alarm-ico,
.gb-alarm-item--etc .gb-alarm-ico{ background-color:#FFF3D9; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D99B00' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 1 0-12 0c0 7-3 8-3 8h18s-3-1-3-8'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E"); }
.gb-alarm-row{ display:flex; align-items:flex-start; gap:8px; }
.gb-alarm-title{
flex:1; min-width:0; margin:0 !important;
font-size:12.5px; font-weight:700; color:var(--gb-ink); line-height:1.45;
}
.gb-alarm-time{
flex:none; font-size:10.5px; font-weight:600; color:var(--gb-gray);
white-space:nowrap; padding-top:1px;
}
.gb-alarm-go{
display:inline-block; margin-top:7px;
font-size:10.5px; font-weight:700;
color:var(--gb-pink-deep); background:var(--gb-white);
border:1px solid var(--gb-pink-soft);
padding:4px 10px; border-radius:var(--gb-r-pill);
}
.gb-alarm-item.is-unread .gb-alarm-go{ background:var(--gb-white); }
.gb-alarm-empty{
text-align:center; padding:56px 20px;
background:var(--gb-white); border-radius:var(--gb-r-card);
box-shadow:var(--gb-shadow);
}
.gb-alarm-empty-ico{ font-size:34px; display:block; margin-bottom:10px; opacity:.55; }
.gb-alarm-empty p{ margin:0; font-size:13px; font-weight:600; color:var(--gb-ink-2); }
.gb-alarm-foot{
margin:14px 0 0; text-align:center;
font-size:10.5px; color:var(--gb-gray);
}
/* ============================================================
16. 배송내역 + 공통 빈 상태
============================================================ */
.page-mypage-mydelivery .tf-field,
.page-mypage-mydelivery .form-control,
.page-mypage-mydelivery input[type="text"]{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:12px !important;
font-size:12.5px !important; color:var(--gb-ink) !important;
}
.page-mypage-mydelivery .btn-mint,
.page-mypage-mydelivery .btn-search,
.page-mypage-mydelivery button[type="submit"]{
background:var(--gb-pink) !important; border:0 !important;
border-radius:12px !important; color:#fff !important;
box-shadow:0 3px 9px rgba(217,0,107,.28) !important;
}
.page-mypage-mydelivery .notifications-item,
.page-mypage-mydelivery .card-ui{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:14px !important;
box-shadow:0 2px 8px rgba(217,0,107,.06);
}
/* 빈 상태 — 원본은 검은 정사각 아이콘이라 톤이 튄다 (전 화면 공통) */
.wrap .img-icon.bg-black,
.wrap .empty-state .icon.bg-black{
background:var(--gb-pink-tint) !important;
border:0 !important; border-radius:12px !important;
}
.wrap .img-icon.bg-black i,
.wrap .img-icon.bg-black .icon{ color:var(--gb-pink) !important; }
/* ============================================================
17. 공통 부품 — 나머지 화면 일괄 적용
------------------------------------------------------------
상품목록·장바구니·이벤트·쿠폰함·친구관리·거래내역·공지/FAQ/문의 등
30여 화면이 같은 부품(.card / .tf-btn / .tf-field / 목록)을 쓴다.
화면마다 따로 손대는 대신 부품 단위로 한 번에 맞춘다.
.wrap 안으로 한정해 관리자 화면 등에는 영향이 가지 않게 한다.
============================================================ */
/* ── 카드 ───────────────────────────────────────── */
.wrap .card,
.wrap .card-ui,
.wrap .notifications-item,
.wrap .box-content,
.wrap .wg-box{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:var(--gb-r-card) !important;
box-shadow:0 2px 10px rgba(217,0,107,.06) !important;
}
.wrap .card-header{
background:none !important; border:0 !important;
font-size:13.5px !important; font-weight:800; color:var(--gb-ink) !important;
}
/* ── 버튼 ───────────────────────────────────────── */
/* 주 버튼(보라·민트로 흩어져 있던 것)을 분홍 하나로 모은다 */
.wrap .tf-btn.purple,
.wrap .tf-btn.primary,
.wrap .btn-primary{
background:var(--gb-pink) !important;
border:0 !important; border-radius:var(--gb-r-pill) !important;
color:#fff !important; font-weight:800;
box-shadow:0 4px 12px rgba(217,0,107,.30) !important;
}
.wrap .tf-btn.style-border,
.wrap .btn-outline-primary{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:var(--gb-r-pill) !important;
color:var(--gb-ink) !important; font-weight:700;
box-shadow:none !important;
}
/* 작은 보조 버튼 (담기 · 검색 등) */
.wrap .btn-sm.btn-purple,
.wrap .btn.btn-purple{
background:var(--gb-pink) !important; border:0 !important;
border-radius:10px !important; color:#fff !important;
font-size:12px !important; font-weight:700;
box-shadow:0 2px 7px rgba(217,0,107,.26) !important;
}
.wrap .btn-sm.btn-mint,
.wrap .btn.btn-mint,
.wrap .btn.btn-dark{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:10px !important;
color:var(--gb-ink-2) !important; font-size:12px !important; font-weight:700;
box-shadow:none !important;
}
/* ── 입력칸 ─────────────────────────────────────── */
.wrap .tf-field-input,
.wrap input[type="text"],
.wrap input[type="password"],
.wrap input[type="email"],
.wrap input[type="tel"],
.wrap input[type="number"],
.wrap input[type="search"],
.wrap select,
.wrap textarea{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:12px !important;
color:var(--gb-ink) !important;
}
.wrap .tf-field-input:focus,
.wrap input:focus, .wrap select:focus, .wrap textarea:focus{
border-color:var(--gb-pink) !important;
box-shadow:0 0 0 3px rgba(255,190,222,.30) !important;
outline:none !important;
}
/* ── 목록 항목 ──────────────────────────────────── */
.wrap .list-payment-card label,
.wrap .proof-item label{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:14px !important;
}
.wrap .list-payment-card input:checked + label,
.wrap .proof-item input:checked + label{
border-color:var(--gb-pink) !important;
background:var(--gb-pink-tint) !important;
}
/* ── 페이지 번호 ───────────────────────────────── */
.wrap .pagination .page-link{
border:0 !important; background:none !important;
color:var(--gb-ink-2) !important; font-size:12.5px; font-weight:700;
border-radius:8px !important;
}
.wrap .pagination .active .page-link,
.wrap .pagination .page-item.active .page-link{
background:var(--gb-pink) !important; color:#fff !important;
}
/* ── 팝업 ───────────────────────────────────────── */
.wrap .modal-content,
body .modal-content{
border:0 !important; border-radius:20px !important;
box-shadow:0 18px 50px rgba(35,21,28,.22) !important;
}
body .modal-content .modal-header{ border-bottom:1px solid var(--gb-line) !important; }
body .modal-content .modal-footer{ border-top:1px solid var(--gb-line) !important; }
/* ── 상품 목록 카드 ────────────────────────────── */
.page-shop-product .card,
.page-shop-cart .card{ margin-bottom:9px !important; }
.page-shop-product .card img{
border-radius:12px !important; background:var(--gb-pink-tint);
}
.page-shop-product .card .title,
.page-shop-cart .card .title{
font-size:13px !important; font-weight:700 !important;
color:var(--gb-ink) !important; line-height:1.4;
}
.page-shop-product .text-price,
.page-shop-cart .text-price{
color:var(--gb-pink-deep) !important; font-weight:900 !important;
}
/* 탭 묶음 배경 — 원본이 민트(.wg-tab / .tab-slide)라 화면마다 튄다.
보관함 탭에서만 잡았던 걸 전 화면 공통으로 넓힌다. */
.wrap .wg-tab,
.wrap .tab-slide,
.wrap .tab-slide > ul{
background:none !important; border:0 !important; box-shadow:none !important;
}
.wrap .tab-slide{ padding:0 !important; }
/* ============================================================
18. 서브페이지 헤더 정렬 보정 (홈 헤더와 동일하게)
------------------------------------------------------------
원본 .header-2 .btn-right 는 position:absolute + top:50%
+ transform:translateY(-50%) 조합이다. position 만 static 으로 바꾸면
transform 이 남아 오른쪽 묶음만 절반 높이(약 16px)만큼 위로 뜬다.
실제로 종·장바구니가 헤더 밖으로 나가 있었다.
============================================================ */
.header-container .header-2 .btn-right{
transform:none !important;
top:auto !important; right:auto !important; bottom:auto !important;
}
.header-container .header-2 .btn-right > a{
margin:0 !important; /* 원본이 종에 margin-top:4px 를 준다 */
}
.header-container .header-2 .header-content{
min-height:52px;
padding:4px 4px 4px !important;
gap:6px;
}
/* 포인트 알약 — 홈과 완전히 같은 크기로 (서브에서만 작게 두지 않는다) */
.header-container .header-2 .gb-point{
font-size:14.5px; padding:3px 10px 3px 7px; gap:7px;
}
.header-container .header-2 .gb-point .gb-point-p{
width:16px !important; height:16px !important; font-size:10px;
}
/* 뒤로가기 — 아이콘 글꼴 화살표가 가늘고 커서 조악해 보인다.
같은 두께의 SVG 갈매기표로 바꾼다. */
.header-container .header-2 .back-btn i{ display:none !important; }
.header-container .header-2 .back-btn{
width:34px !important; height:34px !important;
border-radius:11px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323151C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5 8 12l7 7'/%3E%3C/svg%3E") no-repeat center / 21px 21px;
}
/* 전체 읽음 — 다 읽었으면 비활성 */
.gb-alarm-readall:disabled{
opacity:.45; color:var(--gb-gray) !important; cursor:default;
}
/* ============================================================
19. 이벤트 팝업 (홈)
------------------------------------------------------------
배너 이미지가 주인공이다. 제목줄을 없애고 닫기는 이미지 위에 얹는다.
============================================================ */
.gb-popup .modal-dialog{ max-width:330px; margin:auto; padding:0 16px; }
.gb-popup .modal-content{
overflow:hidden; border-radius:20px !important;
background:var(--gb-white) !important;
}
.gb-popup .modal-body{ line-height:0; } /* 이미지 아래 빈 줄 제거 */
.gb-popup .modal-body img{ display:block; width:100%; }
/* 닫기 — 이미지 위 오른쪽 위에 얹는 원형 */
.gb-popup-close{
position:absolute; top:9px; right:9px; z-index:3;
width:28px; height:28px; padding:0; margin:0;
border:0; border-radius:50%; opacity:1;
background:rgba(35,21,28,.42)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E")
no-repeat center / 14px 14px;
}
.gb-popup-close:hover{ background-color:rgba(35,21,28,.6); opacity:1; }
/* 하단 '오늘 하루 보지 않기' — 작고 담백하게 */
.gb-popup .gb-popup-foot{
border-top:1px solid var(--gb-line) !important;
padding:0 !important; margin:0 !important;
display:block !important;
}
.gb-popup .gb-popup-today{
display:block; width:100%; margin:0 !important;
background:none !important; border:0 !important; border-radius:0 !important;
padding:12px !important;
font-size:12px !important; font-weight:600;
color:var(--gb-ink-2) !important; box-shadow:none !important;
}
.gb-popup .gb-popup-today:active{ background:var(--gb-pink-tint) !important; }
/* 상품함 배송/전환/금고 버튼 — 폭이 좁아 '배/송' 처럼 글자가 세로로 쪼개졌다.
(버튼 높이가 52px 로 두 줄이 되어 있었다) */
.page-mypage-myproduct .btn-group .btn,
.page-mypage-mybox .btn-group .btn{
white-space:nowrap !important;
padding:7px 10px !important;
line-height:1.2 !important;
min-width:0;
}
.page-mypage-myproduct .btn-group,
.page-mypage-mybox .btn-group{ gap:5px; flex-wrap:nowrap; }
/* 배송/전환/금고는 같은 성격의 동작인데 원본 색이 제각각(보라·민트·분홍)이라
두 개만 분홍으로 강조돼 보였다. 셋 다 같은 톤으로 통일한다. */
.page-mypage-myproduct .btn-group .btn-purple,
.page-mypage-myproduct .btn-group .btn-mint,
.page-mypage-myproduct .btn-group .btn-pink{
background:var(--gb-white) !important;
border:1px solid var(--gb-pink-soft) !important;
color:var(--gb-pink-deep) !important;
box-shadow:none !important;
}
.page-mypage-myproduct .btn-group .btn:active{
background:var(--gb-pink-tint) !important;
}
/* ============================================================
20. 정렬 칩 (상품함 목록 위)
============================================================ */
/* 칩이 4개가 되니 두 줄로 접혔다. 한 줄로 두고 옆으로 밀어서 본다 */
.gb-sort{
display:flex; gap:6px; margin:0 0 10px;
flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
padding-bottom:2px; -webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.gb-sort::-webkit-scrollbar{ display:none; }
.gb-sort-chip{ white-space:nowrap; }
.gb-sort-chip{
flex:none; width:auto !important;
padding:7px 13px !important; border-radius:var(--gb-r-pill) !important;
border:1px solid var(--gb-line) !important;
background:var(--gb-white) !important;
color:var(--gb-ink-2) !important;
font-size:11.5px !important; font-weight:700;
box-shadow:none !important;
}
.gb-sort-chip.is-on{
border-color:var(--gb-pink) !important;
background:var(--gb-pink) !important;
color:#fff !important;
box-shadow:0 2px 8px rgba(217,0,107,.28) !important;
}
/* ============================================================
21. 검색 팝업 (상품함 · 금고함 · 선물함)
============================================================ */
.modal-fillter{ background:var(--gb-bg) !important; }
.modal-fillter .icon-close-popup{
position:absolute; top:14px; right:14px; left:auto; z-index:5;
width:32px; height:32px; border-radius:11px;
display:grid; place-items:center; font-size:15px;
background:var(--gb-white); color:var(--gb-ink);
box-shadow:0 2px 8px rgba(217,0,107,.10);
}
.modal-fillter .card{
margin:56px 14px 14px !important;
border:0 !important; border-radius:var(--gb-r-card) !important;
}
.modal-fillter .card-body{ padding:15px 14px 18px !important; }
/* 카테고리 — 가로 스크롤 + 점 16개는 쓰기 불편하다. 줄바꿈 격자로 바꾼다. */
.modal-fillter .category-list{ padding-bottom:0 !important; margin-bottom:14px !important; }
.modal-fillter .category-list .swiper-wrapper{
display:grid !important;
grid-template-columns:repeat(3,1fr); gap:7px;
transform:none !important; /* swiper 가 넣는 이동값 해제 */
width:auto !important;
}
.modal-fillter .category-list .swiper-slide{
width:auto !important; margin:0 !important; flex:none;
}
.modal-fillter .category-list .swiper-pagination{ display:none !important; }
.modal-fillter .proof-item.style-2{ margin:0 !important; }
.modal-fillter .proof-item.style-2 label{
display:flex; align-items:center; justify-content:center;
min-height:42px; padding:7px 8px !important;
border:1px solid var(--gb-line) !important;
border-radius:11px !important;
background:var(--gb-white) !important;
text-align:center;
}
.modal-fillter .proof-item.style-2 label .text{
font-size:11.5px !important; font-weight:700; color:var(--gb-ink) !important;
line-height:1.25; text-align:center !important;
}
.modal-fillter .proof-item.style-2 input:checked + label{
border-color:var(--gb-pink) !important;
background:var(--gb-pink) !important;
}
.modal-fillter .proof-item.style-2 input:checked + label .text{ color:#fff !important; }
/* 원본이 선택 표시로 넣는 초록 체크 — 칩 자체가 분홍으로 바뀌므로 뺀다 */
.modal-fillter .proof-item.style-2 label::before,
.modal-fillter .proof-item.style-2 label::after{ display:none !important; }
/* 정렬 선택 + 검색어 */
.modal-fillter .grid-2{ display:block !important; margin-bottom:10px !important; }
.modal-fillter .default-select{
border:1px solid var(--gb-line) !important; border-radius:12px !important;
padding:0 !important; background:var(--gb-white) !important;
}
.modal-fillter .default-select select{
width:100%; border:0 !important; background:none !important;
padding:13px 12px !important; font-size:13px !important; font-weight:700;
color:var(--gb-ink) !important;
}
.modal-fillter .input-search input{
height:48px !important; border-radius:12px !important;
font-size:13px !important;
}
.modal-fillter .input-search i{ color:var(--gb-gray); }
/* 하단 검색 버튼 */
.modal-fillter .fixed-bottom-btn{ background:var(--gb-bg) !important; }
.modal-fillter .fixed-bottom-btn .tf-btn{
border-radius:var(--gb-r-pill) !important; height:52px !important;
font-size:15px !important; font-weight:800;
}
/* ============================================================
22. 상품 상세 팝업 (Shop/ProductDetailPopup — _LayoutBasic)
------------------------------------------------------------
이 화면은 _LayoutBasic 을 쓴다. 헤더가 노란색(style-bg-1)이고
제목도 "[상품상세팝업]" 처럼 대괄호로 들어온다.
============================================================ */
.page-shop-product-detail{ background:var(--gb-bg); min-height:100vh; }
.page-shop-product-detail .header-2.style-bg-1,
.header-container .header-2.style-bg-1{
background:var(--gb-bg) !important; box-shadow:none !important; border:0 !important;
}
.page-shop-product-detail .header-2 .header-content{
display:flex; align-items:center; gap:8px; padding:8px 6px !important;
}
.page-shop-product-detail .bar-title,
.page-shop-product-detail .header-content h6{
flex:1; min-width:0; margin:0 !important; text-align:center;
font-size:15px !important; font-weight:800; color:var(--gb-ink) !important;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.page-shop-product-detail .icon-close{
width:32px; height:32px; display:grid; place-items:center;
border-radius:11px; font-size:15px; color:var(--gb-ink);
}
/* 상품 이미지 */
.page-shop-product-detail .product-image{
background:var(--gb-white); border-radius:var(--gb-r-card);
box-shadow:var(--gb-shadow); overflow:hidden; padding:10px !important;
}
.page-shop-product-detail .product-image img{
width:100%; border-radius:12px; background:var(--gb-pink-tint);
}
/* 상품명 · 가격 */
.page-shop-product-detail .card.bg-none{
background:none !important; border:0 !important; box-shadow:none !important;
}
.page-shop-product-detail .title,
.page-shop-product-detail h5,
.page-shop-product-detail h6:not(.bar-title){
font-size:15px !important; font-weight:800 !important;
color:var(--gb-ink) !important; line-height:1.45; text-align:left;
}
.page-shop-product-detail .price,
.page-shop-product-detail .text-price{
font-size:20px !important; font-weight:900 !important;
color:var(--gb-pink-deep) !important; letter-spacing:-.5px;
}
.page-shop-product-detail .text-small,
.page-shop-product-detail .text-secondary{
font-size:11.5px !important; color:var(--gb-gray) !important;
}
/* 버튼 — 원본 민트색을 분홍 계열로 */
.page-shop-product-detail .btn-mint,
.page-shop-product-detail .tf-btn.primary,
.page-shop-product-detail .bottom-wg .tf-btn{
background:var(--gb-pink) !important;
border:0 !important; border-radius:var(--gb-r-pill) !important;
color:#fff !important; font-weight:800;
box-shadow:0 4px 12px rgba(217,0,107,.32) !important;
}
.page-shop-product-detail .bottom-wg .tf-btn.style-border,
.page-shop-product-detail .tf-btn.style-border{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
color:var(--gb-ink) !important; box-shadow:none !important;
}
.page-shop-product-detail .bottom-wg{
background:var(--gb-bg) !important; border-top:0 !important;
}
.page-shop-product-detail .bottom-wg .divider{ display:none; }
/* ============================================================
23. 팝업 공통 — 화면 가운데 정렬
============================================================ */
body .modal .modal-dialog{
display:flex; align-items:center; min-height:calc(100% - 2rem);
}
body .modal.modalRight .modal-dialog{ display:block; min-height:100%; }
.gb-popup .modal-dialog{ display:flex; align-items:center; min-height:calc(100% - 2rem); }
/* 카테고리 칩의 체크박스 자체가 민트 원으로 보인다(원본 .tf-check-rounded).
칩 전체가 분홍으로 바뀌므로 체크 표시는 숨긴다. */
.modal-fillter .proof-item.style-2 input[type="checkbox"]{
position:absolute !important; opacity:0 !important;
width:1px !important; height:1px !important; pointer-events:none;
}
/* 닫기 버튼이 화면 좌상단(0,0)에 붙어 있었다 */
.modal-fillter .icon-close-popup{
position:fixed !important; top:12px !important; right:12px !important; left:auto !important;
}
/* 상품상세팝업 세부 — 가격이 흰 카드 안에 갇혀 보였다 */
.page-shop-product-detail .card{
background:none !important; border:0 !important; box-shadow:none !important;
}
.page-shop-product-detail .product-image{ margin-bottom:14px; }
.page-shop-product-detail .title.fw-5{ text-align:center; }
/* ============================================================
24. 남은 화면 톤 정리 (공지·문의·친구·배송신청·알림 모달 등)
============================================================ */
/* ── 검색 팝업: 칸이 커서 한 화면에 몇 개 안 들어갔다 ── */
.modal-fillter .card{ margin:52px 12px 12px !important; }
.modal-fillter .card-body{ padding:12px 11px 14px !important; }
.modal-fillter .category-list .swiper-wrapper{ grid-template-columns:repeat(4,1fr); gap:6px; }
.modal-fillter .proof-item.style-2 label{
min-height:34px; padding:5px 4px !important; border-radius:9px !important;
}
.modal-fillter .proof-item.style-2 label .text{ font-size:10.5px !important; }
/* 정렬 드롭다운이 가로로 꽉 차 있었다 — 내용에 맞춰 줄인다 */
.modal-fillter .grid-2{ display:flex !important; gap:8px; }
.modal-fillter .grid-2 fieldset{ flex:0 0 auto; }
.modal-fillter .default-select{ display:inline-block; }
.modal-fillter .default-select select{
width:auto !important; min-width:130px;
padding:10px 30px 10px 12px !important; font-size:12.5px !important;
}
.modal-fillter .input-search input{ height:42px !important; font-size:12.5px !important; }
/* ── 상품상세팝업: 가격이 흰 칸에 갇혀 크게 떠 있었다 ── */
.page-shop-product-detail .price,
.page-shop-product-detail .text-price,
.page-shop-product-detail .card-body .title{
background:none !important; border:0 !important; box-shadow:none !important;
}
.page-shop-product-detail .price,
.page-shop-product-detail .text-price{
font-size:17px !important; font-weight:800 !important; text-align:left;
}
.page-shop-product-detail .card-body{ padding:0 4px !important; }
/* ── 알림 모달(헤더 종 아이콘) — 알림 화면과 같은 톤으로 ── */
#pop-up-notifications .modal-content{ border-radius:20px !important; }
#pop-up-notifications .notifications-item{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:14px !important;
padding:12px 13px !important; margin-bottom:8px !important;
box-shadow:0 2px 8px rgba(217,0,107,.06);
}
#pop-up-notifications .img-icon{
width:36px !important; height:36px !important;
border:0 !important; border-radius:11px !important;
background:var(--gb-pink-tint) !important;
}
#pop-up-notifications .img-icon.bg-black{ background:var(--gb-pink-tint) !important; }
#pop-up-notifications .img-icon i{ color:var(--gb-pink) !important; }
#pop-up-notifications .title{
font-size:12.5px !important; font-weight:700 !important; color:var(--gb-ink) !important;
}
#pop-up-notifications .text-small{ font-size:10.5px !important; color:var(--gb-gray) !important; }
#pop-up-notifications .btn-mint,
#pop-up-notifications .btn-purple{
border-radius:var(--gb-r-pill) !important; font-size:11px !important;
padding:6px 13px !important; border:1px solid var(--gb-line) !important;
background:var(--gb-white) !important; color:var(--gb-ink-2) !important;
box-shadow:none !important;
}
#pop-up-notifications .btn-purple{
background:var(--gb-pink) !important; border-color:var(--gb-pink) !important; color:#fff !important;
}
/* ── 공지사항 · FAQ 목록 ── */
.page-community-notice .accordion-item,
.page-community-faq .accordion-item,
.page-community-notice .list-item,
.page-community-notice .notifications-item{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:14px !important;
margin-bottom:8px !important;
box-shadow:0 2px 8px rgba(217,0,107,.06);
overflow:hidden;
}
.page-community-notice .accordion-button,
.page-community-faq .accordion-button{
background:var(--gb-white) !important; box-shadow:none !important;
font-size:13px !important; font-weight:700; color:var(--gb-ink) !important;
padding:14px 14px !important;
}
.page-community-notice .accordion-body,
.page-community-faq .accordion-body{
font-size:12.5px; line-height:1.65; color:var(--gb-ink-2);
border-top:1px solid var(--gb-line);
}
/* ── 공지/문의 상세: 제목이 굵고 내용은 얇아야 한다 ── */
.page-community-noticedetail .title,
.page-community-qnadetail .title,
.page-community-noticedetail h5,
.page-community-qnadetail h5{
font-size:16px !important; font-weight:800 !important;
color:var(--gb-ink) !important; line-height:1.45;
}
.page-community-noticedetail .content,
.page-community-qnadetail .content,
.page-community-noticedetail .text,
.page-community-qnadetail .text{
font-size:13px !important; font-weight:400 !important;
color:var(--gb-ink-2) !important; line-height:1.75;
}
.page-community-noticedetail .card,
.page-community-qnadetail .card{
padding:15px 14px !important; margin-bottom:10px !important;
}
/* 문의 유형·제목 같은 라벨 */
.page-community-qnadetail .label,
.page-community-qnadetail .text-secondary{
font-size:11px !important; font-weight:700 !important;
color:var(--gb-pink-deep) !important;
}
/* ── 친구 관리 ── */
.page-mypage-myfriend .card,
.page-mypage-myfriend .notifications-item{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:14px !important;
box-shadow:0 2px 8px rgba(217,0,107,.06);
}
.page-mypage-myfriend .tf-btn,
.page-mypage-myfriend .btn{
border-radius:var(--gb-r-pill) !important; font-weight:700;
}
.page-mypage-myfriend .input-search input,
.page-mypage-myfriend input[type="text"]{
height:46px !important; border-radius:12px !important; font-size:13px !important;
}
/* ── 배송 신청 ── */
.page-shop-productdelivery .card,
.page-shop-productdelivery .card-ui{
background:var(--gb-white) !important; border:1px solid var(--gb-line) !important;
border-radius:var(--gb-r-card) !important;
box-shadow:0 2px 10px rgba(217,0,107,.06) !important;
}
.page-shop-productdelivery .card-header{
font-size:13.5px !important; font-weight:800; color:var(--gb-ink) !important;
background:none !important; border:0 !important;
}
.page-shop-productdelivery input,
.page-shop-productdelivery select,
.page-shop-productdelivery textarea{
height:auto; min-height:46px; border-radius:12px !important; font-size:13px !important;
}
/* ── 안내 팝업(OpenMessage 등) 공통 ── */
body .modal .modal-header{ border-bottom:1px solid var(--gb-line) !important; }
body .modal .modal-title,
body .modal .modal-header h5{
font-size:15px !important; font-weight:800 !important; color:var(--gb-ink) !important;
}
body .modal .modal-body{ font-size:13px; color:var(--gb-ink-2); line-height:1.65; }
body .modal .modal-footer .btn,
body .modal .modal-footer .tf-btn{
border-radius:var(--gb-r-pill) !important; font-weight:700; font-size:13px !important;
padding:11px 20px !important;
}
body .modal .modal-footer .btn-purple,
body .modal .modal-footer .btn-primary{
background:var(--gb-pink) !important; border-color:var(--gb-pink) !important;
color:#fff !important;
}
body .modal .modal-footer .btn-secondary,
body .modal .modal-footer .btn-light{
background:var(--gb-white) !important; border:1px solid var(--gb-line) !important;
color:var(--gb-ink-2) !important;
}
/* ── 거래내역 등 날짜 검색줄 ── */
.wrap .date-search input,
.wrap input[type="date"],
.wrap .form-date input{
height:44px !important; border-radius:12px !important; font-size:12.5px !important;
}
/* 선물 취소 버튼 */
.gb-gift-cancel{
margin-top:5px; width:auto !important;
padding:5px 11px !important; border-radius:var(--gb-r-pill) !important;
border:1px solid var(--gb-pink-soft) !important;
background:var(--gb-white) !important;
color:var(--gb-pink-deep) !important;
font-size:10.5px !important; font-weight:700;
box-shadow:none !important;
}
.gb-gift-cancel:active{ background:var(--gb-pink-tint) !important; }
/* ============================================================
25. 공지사항 · FAQ · 1:1문의 (실제 클래스 기준으로 다시 정리)
------------------------------------------------------------
앞서 .accordion-item / .notifications-item 으로 잡았는데
실제 목록은 .company-list-item 을 쓴다.
============================================================ */
.page-community-notice .company-list-item,
.page-community-qna .company-list-item,
.page-community-noticedetail .company-list-item{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:14px !important;
padding:13px 14px !important;
margin-bottom:8px !important;
box-shadow:0 2px 8px rgba(217,0,107,.06);
display:flex; align-items:center; gap:11px;
}
/* 왼쪽 아이콘 — 회색 네모라 톤이 튄다 */
.page-community-notice .company-list-item .icon,
.page-community-qna .company-list-item .icon,
.page-community-noticedetail .company-list-item .icon{
width:38px !important; height:38px !important; flex:none;
border:0 !important; border-radius:11px !important;
background:var(--gb-pink-tint) !important;
display:grid; place-items:center;
}
.page-community-notice .company-list-item .icon i,
.page-community-qna .company-list-item .icon i,
.page-community-noticedetail .company-list-item .icon i{
color:var(--gb-pink) !important; font-size:18px;
}
/* 제목이 굵고 날짜는 얇아야 한다 (원본은 반대였다) */
.page-community-notice .name-company,
.page-community-qna .name-company,
.page-community-noticedetail .name-company{
font-size:13.5px !important; font-weight:700 !important;
color:var(--gb-ink) !important; line-height:1.4;
}
.page-community-notice .phone,
.page-community-qna .phone,
.page-community-noticedetail .phone{
font-size:11px !important; font-weight:500 !important;
color:var(--gb-gray) !important; margin-top:3px;
}
.page-community-notice .content,
.page-community-qna .content{ min-width:0; }
/* FAQ 아코디언 */
.page-community-faq .accordion-item{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:14px !important; margin-bottom:8px !important;
box-shadow:0 2px 8px rgba(217,0,107,.06); overflow:hidden;
}
.page-community-faq .accordion-button{
background:var(--gb-white) !important; box-shadow:none !important;
font-size:13px !important; font-weight:700 !important;
color:var(--gb-ink) !important; padding:14px !important;
}
.page-community-faq .accordion-button:not(.collapsed){
color:var(--gb-pink-deep) !important; background:var(--gb-pink-tint) !important;
}
.page-community-faq .accordion-body{
font-size:12.5px !important; font-weight:400 !important;
color:var(--gb-ink-2) !important; line-height:1.75;
border-top:1px solid var(--gb-line); padding:13px 14px !important;
}
/* 상세 (공지 / 문의) — 제목 굵게, 본문 얇게 */
.page-community-noticedetail .card-ui,
.page-community-qnadetail .card-ui{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:var(--gb-r-card) !important;
box-shadow:0 2px 10px rgba(217,0,107,.06) !important;
margin-bottom:10px !important;
}
.page-community-noticedetail .card-ui-body,
.page-community-qnadetail .card-ui-body{ padding:15px 14px !important; }
.page-community-noticedetail .text-truncated,
.page-community-qnadetail .text-truncated{
font-size:15.5px !important; font-weight:800 !important;
color:var(--gb-ink) !important; line-height:1.45;
}
/* 본문은 얇게 — 원본은 본문이 제목보다 굵었다 */
.page-community-noticedetail .cols,
.page-community-qnadetail .cols,
.page-community-noticedetail .col,
.page-community-qnadetail .col{
font-size:13px !important; font-weight:400 !important;
color:var(--gb-ink-2) !important; line-height:1.75;
}
/* 문의 유형 같은 라벨은 분홍으로 구분 */
.page-community-qnadetail .heading-wg,
.page-community-qnadetail .fw-5,
.page-community-qnadetail .fw-6{
font-size:11.5px !important; font-weight:700 !important;
color:var(--gb-pink-deep) !important;
}
.page-community-qnadetail .btn-mint{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
color:var(--gb-ink-2) !important; border-radius:var(--gb-r-pill) !important;
}
/* ── 26. 공지사항 상세 / 1:1문의 상세 ────────────────────────── */
/* 본문은 관리자가 입력한 HTML 이라 안쪽 태그 크기가 제각각이다.
(h1 으로 넣은 소제목이 48px 로 나와 화면 폭을 넘겼다) */
.gb-board-body{
display:block !important;
background:var(--gb-white) !important;
border-radius:var(--gb-r-card) !important;
box-shadow:var(--gb-shadow) !important;
padding:18px 16px 22px !important;
min-height:auto !important;
}
/* ═══ 공지 전용 Typography — 작성자가 어떤 스타일을 넣어도 여기서 통일한다.
(어드민 BoardDetail 의 [모바일 미리보기]와 같은 규칙 — 수정 시 함께 변경) ═══ */
.gb-board-body, .gb-board-body *{
font-family:inherit !important;
max-width:100% !important;
word-break:keep-all;
}
.gb-board-body, .gb-board-body p, .gb-board-body div, .gb-board-body span,
.gb-board-body font, .gb-board-body li, .gb-board-body td{
font-size:15.5px !important; line-height:1.75 !important;
font-weight:400 !important; color:#374151 !important;
}
.gb-board-body p{ margin:0 0 13px !important; }
.gb-board-body strong, .gb-board-body strong *, .gb-board-body b, .gb-board-body b *{
font-weight:800 !important; color:#111827 !important; font-size:inherit !important; line-height:inherit !important;
}
.gb-board-body h1, .gb-board-body h1 *{
font-size:22px !important; font-weight:800 !important; line-height:1.35 !important; color:#111827 !important;
}
.gb-board-body h2, .gb-board-body h2 *{
font-size:18.5px !important; font-weight:800 !important; line-height:1.4 !important; color:#111827 !important;
}
.gb-board-body h3, .gb-board-body h3 *, .gb-board-body h4, .gb-board-body h4 *{
font-size:16.5px !important; font-weight:700 !important; line-height:1.45 !important; color:#111827 !important;
}
.gb-board-body h1{ margin:8px 0 14px !important; }
.gb-board-body h2{ margin:26px 0 10px !important; padding-bottom:6px; border-bottom:1px solid var(--gb-line); }
.gb-board-body h3, .gb-board-body h4{ margin:20px 0 8px !important; }
.gb-board-body h1:empty, .gb-board-body h2:empty, .gb-board-body h3:empty, .gb-board-body h4:empty{ display:none; }
.gb-board-body h1:has(> br:only-child), .gb-board-body h2:has(> br:only-child),
.gb-board-body h3:has(> br:only-child), .gb-board-body h4:has(> br:only-child){ display:none !important; }
.gb-board-body > :first-child{ margin-top:0 !important; }
.gb-board-body img{ max-width:100% !important; height:auto !important; border-radius:12px; margin:6px 0 14px; display:block; }
.gb-board-body a{ color:var(--gb-pink) !important; text-decoration:underline; font-size:inherit !important; }
.gb-board-body ul, .gb-board-body ol{ margin:2px 0 14px !important; padding-left:4px !important; list-style:none !important; }
.gb-board-body li{ position:relative; padding-left:14px !important; margin:0 0 6px !important; }
.gb-board-body ul li::before{
content:''; position:absolute; left:2px; top:10px;
width:4px; height:4px; border-radius:50%; background:var(--gb-pink-mid);
}
/* 번호 목록 — CSS 가 번호를 새로 만들지 않는다.
글에 쓴 숫자(1. 2. 3.)를 그대로 보여주고, 그 숫자만 핑크 포인트.
(예전 counter 방식은 빈 줄로 목록이 끊길 때마다 1.로 리셋되는 버그가 있었다)
숫자가 이미 지워진 옛 공지는 NoticeDetail 의 스크립트가 이어서 번호를 붙인다. */
.gb-board-body ol li{ padding-left:0 !important; }
.gb-board-body .gb-num{
color:var(--gb-pink) !important; font-weight:800 !important;
margin-right:3px; font-size:inherit !important;
}
/* 상세 상단의 제목 카드 — 목록 카드보다 낮게 */
.page-community-notice .list-company-list-item > .company-list-item:first-child{
min-height:auto !important;
padding:14px 16px !important;
}
/* 목록 버튼이 회색 그대로라 톤이 어긋난다 */
.page-community-notice .btn-secondary{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
color:var(--gb-ink) !important;
border-radius:var(--gb-r-pill) !important;
font-size:14px !important; font-weight:700 !important;
padding:14px !important; width:100%;
box-shadow:none !important; margin-top:4px;
}
/* ── 1:1문의 상세 ─────────────────────────────────────────── */
/* 라벨이 연회색이라 분홍 배경에 묻혔다 */
.page-community-qnadetail label,
.page-community-qna label{
color:var(--gb-ink) !important;
font-size:12.5px !important; font-weight:800 !important;
display:block; margin:0 0 7px 2px !important;
}
/* 읽기 전용(disabled) 입력칸이 회색 글자 + 다른 글꼴로 나왔다 */
.page-community-qnadetail input[type=text],
.page-community-qnadetail textarea,
.page-community-qnadetail select{
font-family:var(--gb-font) !important;
font-size:14px !important; font-weight:500 !important;
color:var(--gb-ink) !important;
-webkit-text-fill-color:var(--gb-ink) !important; /* iOS 사파리는 이걸 안 주면 흐리게 나온다 */
opacity:1 !important;
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:14px !important;
padding:14px 16px !important;
box-shadow:none !important;
}
.page-community-qnadetail textarea{ line-height:1.65 !important; min-height:120px; }
/* 문의유형은 bootstrap-select 가 select 를 숨기고 버튼으로 바꿔치기한다.
그래서 select 에 준 스타일이 화면에 안 보인다 — 버튼 쪽을 잡아야 한다 */
.page-community-qnadetail .default-select{
border:0 !important; padding:0 !important; background:none !important;
}
.page-community-qnadetail .bootstrap-select{ width:100% !important; }
.page-community-qnadetail .bootstrap-select > button.dropdown-toggle{
width:100% !important; height:auto !important;
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:14px !important;
padding:14px 16px !important;
color:var(--gb-ink) !important;
font-size:14px !important; font-weight:500 !important;
text-align:left !important; box-shadow:none !important;
}
.page-community-qnadetail .bootstrap-select > button.dropdown-toggle::after{
border-top-color:var(--gb-pink) !important; margin-left:auto;
}
.page-community-qnadetail .bootstrap-select .dropdown-menu{
border:1px solid var(--gb-line) !important; border-radius:14px !important;
box-shadow:var(--gb-shadow) !important; padding:6px !important;
}
.page-community-qnadetail .bootstrap-select .dropdown-item{
border-radius:10px !important; font-size:13.5px !important; padding:10px 12px !important;
color:var(--gb-ink) !important;
}
.gb-rec-guide{
margin:10px 2px 2px; padding:11px 13px;
background:var(--gb-pink-tint); border-radius:12px;
font-size:12px; color:var(--gb-ink-2); line-height:1.7;
}
.gb-rec-guide b{ color:var(--gb-ink); }
.gb-rec-guide span{ font-size:11px; color:var(--gb-gray); }
.page-community-qnadetail .bootstrap-select .dropdown-item.active,
.page-community-qnadetail .bootstrap-select .dropdown-item.selected{
background:var(--gb-pink-tint) !important; color:var(--gb-pink-deep) !important; font-weight:700 !important;
}
/* 상태 줄 */
.gb-qna-status{ display:flex; align-items:center; gap:8px; margin:0 2px 16px; }
.gb-qna-chip{
font-size:11.5px; font-weight:800; padding:5px 11px;
border-radius:var(--gb-r-pill); line-height:1;
}
.gb-qna-chip.is-done{ background:var(--gb-pink); color:#fff; }
.gb-qna-chip.is-wait{ background:var(--gb-pink-soft); color:var(--gb-pink-deep); }
.gb-qna-date{ font-size:12px; color:var(--gb-gray); font-weight:500; }
/* 답변은 내가 쓴 글과 구분되어야 한다 */
.gb-qna-answer{
background:var(--gb-white) !important;
border:1px solid var(--gb-pink-soft) !important;
border-left:4px solid var(--gb-pink) !important;
border-radius:16px !important;
padding:16px 16px 12px !important;
box-shadow:var(--gb-shadow) !important;
}
.gb-qna-answer .gb-board-body,
.gb-qna-answer .gb-board-body *{ color:var(--gb-ink) !important; }
.gb-qna-answer .gb-board-body{
background:none !important; box-shadow:none !important;
padding:0 !important; border-radius:0 !important;
}
.gb-qna-andate{
margin:10px 0 0 !important; text-align:right;
font-size:11.5px !important; color:var(--gb-gray) !important; font-weight:500 !important;
}
/* 목록/문의하기 버튼 */
.page-community-qnadetail .tf-btn.style-border{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
color:var(--gb-ink) !important;
}
/* 문의유형 칸이 96px 로 쪼그라들어 있었다 (fieldset 쪽 폭 제한) */
.page-community-qnadetail fieldset.default-select{
width:100% !important; display:block !important;
}
.page-community-qnadetail .bootstrap-select .filter-option-inner-inner{
color:var(--gb-ink) !important; font-size:14px !important; font-weight:500 !important;
}
/* 답변 카드 왼쪽 띠 — .card-ui 쪽 규칙이 더 세서 한 단계 올린다 */
.page-community-qnadetail .card-ui.gb-qna-answer{
border-left:4px solid var(--gb-pink) !important;
}
/* ── 27. 친구 ──────────────────────────────────────────────── */
/* 검색줄 뒤에 흰 네모가 깔리고 돋보기 버튼이 민트색이었다 */
.page-mypage-myfriend .heading-wg{
gap:8px; margin-bottom:14px; align-items:stretch !important;
}
.page-mypage-myfriend .message-box-bottom{
flex:1; display:flex; align-items:center; gap:0;
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:var(--gb-r-pill) !important;
padding:0 6px 0 4px !important;
box-shadow:none !important;
}
.page-mypage-myfriend .message-box-bottom .box-input{
flex:1; display:flex; align-items:center; gap:4px;
background:none !important; border:0 !important;
border-radius:0 !important; padding:0 !important; box-shadow:none !important;
}
.page-mypage-myfriend .box-input .tf-btn-mood-smile{
width:34px; height:34px; display:flex; align-items:center; justify-content:center;
background:none !important; border:0 !important; flex:0 0 auto;
}
.page-mypage-myfriend .box-input .tf-btn-mood-smile i{ color:var(--gb-pink-mid) !important; font-size:18px; }
.page-mypage-myfriend .box-input .val-message{
flex:1; width:100% !important;
background:none !important; border:0 !important; box-shadow:none !important;
padding:12px 2px !important;
font-family:var(--gb-font) !important; font-size:14px !important; font-weight:500 !important;
color:var(--gb-ink) !important;
}
.page-mypage-myfriend .box-input .val-message::placeholder{ color:var(--gb-gray) !important; font-weight:400; }
.page-mypage-myfriend .btn-message{
width:36px !important; height:36px !important; flex:0 0 36px;
display:flex !important; align-items:center; justify-content:center;
background:var(--gb-pink) !important; border:0 !important;
border-radius:50% !important; margin:0 !important;
}
.page-mypage-myfriend .btn-message i{ color:#fff !important; font-size:16px; }
.page-mypage-myfriend .heading-wg > .tf-btn.primary{
width:74px !important; flex:0 0 74px; height:auto !important;
border-radius:var(--gb-r-pill) !important; font-size:14px !important; font-weight:800;
padding:0 !important;
}
/* 친구 카드 */
.page-mypage-myfriend .card{
background:var(--gb-white) !important;
border:0 !important; border-radius:var(--gb-r-card) !important;
box-shadow:var(--gb-shadow) !important; margin-bottom:10px !important;
}
.page-mypage-myfriend .card-body{
background:none !important; padding:14px 16px !important;
}
.page-mypage-myfriend .card-body > p.text-small{
font-size:11.5px !important; color:var(--gb-gray) !important;
margin:0 0 4px !important; font-weight:500 !important;
}
.page-mypage-myfriend .card-body .title{
font-size:14.5px !important; font-weight:800 !important;
color:var(--gb-ink) !important; margin:0 !important; flex:1;
}
.page-mypage-myfriend .card-body .title .text-small{
font-size:11.5px !important; color:var(--gb-gray) !important; font-weight:500 !important;
}
.page-mypage-myfriend .card-body .btn-group{ gap:6px; flex:0 0 auto; }
.page-mypage-myfriend .card-body .btn-group .btn{
width:auto !important; min-width:52px; padding:8px 12px !important;
border-radius:var(--gb-r-pill) !important;
font-size:12.5px !important; font-weight:700 !important; border:0 !important;
}
.page-mypage-myfriend .btn-mint, .page-mypage-myfriend .btn-purple{
background:var(--gb-pink) !important; color:#fff !important;
}
.page-mypage-myfriend .btn-pink{
background:var(--gb-white) !important; color:var(--gb-ink-2) !important;
border:1px solid var(--gb-line) !important;
}
/* 친구추가 모달 안 검색줄·결과 */
#modalSearchFriend .message-box-bottom{
display:flex; align-items:center;
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:var(--gb-r-pill) !important;
padding:0 6px 0 4px !important; margin-bottom:12px;
}
#modalSearchFriend .box-input{
flex:1; display:flex; align-items:center;
background:none !important; border:0 !important; padding:0 !important;
}
#modalSearchFriend .val-message{
flex:1; background:none !important; border:0 !important;
font-family:var(--gb-font) !important; font-size:14px !important;
color:var(--gb-ink) !important; padding:12px 2px !important;
}
#modalSearchFriend .btn-message{
width:36px !important; height:36px !important; flex:0 0 36px;
display:flex !important; align-items:center; justify-content:center;
background:var(--gb-pink) !important; border-radius:50% !important; border:0 !important;
}
#modalSearchFriend .btn-message i{ color:#fff !important; }
#modalSearchFriend .list-group-item{
background:var(--gb-white) !important; border:1px solid var(--gb-line) !important;
border-radius:14px !important; margin-bottom:8px; padding:12px 14px !important;
}
#modalSearchFriend .list-group-item h6{
font-size:14px !important; font-weight:700 !important; color:var(--gb-ink) !important;
}
#modalSearchFriend .list-group-item .btn-dark{
background:var(--gb-pink) !important; border:0 !important; color:#fff !important;
border-radius:var(--gb-r-pill) !important; font-size:12.5px !important;
font-weight:700 !important; padding:8px 14px !important;
}
/* 웃는얼굴 아이콘은 눌러도 아무 동작이 없는 장식인데
position:absolute 라 입력칸 밖으로 튀어나와 있었다. 그냥 감춘다 */
.page-mypage-myfriend .tf-btn-mood-smile,
#modalSearchFriend .tf-btn-mood-smile{ display:none !important; }
.page-mypage-myfriend .box-input .val-message,
#modalSearchFriend .box-input .val-message{ padding-left:16px !important; }
/* 거절 버튼이 흰 카드 위에 흰 배경이라 글자만 떠 보였다 */
.page-mypage-myfriend .card-body .btn-group .btn-pink{
border:1px solid var(--gb-line) !important;
background:var(--gb-pink-tint) !important; color:var(--gb-pink-deep) !important;
}
/* 선물 버튼은 .wrap .btn.btn-mint (흰 배경) 규칙에 눌려 글자만 보였다 */
.wrap .page-mypage-myfriend .btn.btn-mint,
.wrap .page-mypage-myfriend .btn-sm.btn-mint{
background:var(--gb-pink) !important; color:#fff !important;
border:0 !important; border-radius:var(--gb-r-pill) !important;
font-size:12.5px !important; font-weight:700 !important;
box-shadow:0 2px 7px rgba(217,0,107,.26) !important;
}
/* 대기중 표시 */
.page-mypage-myfriend .card-body .btn-group p{
margin:0 !important; font-size:12px !important; font-weight:600 !important;
color:var(--gb-gray) !important; align-self:center;
}
/* ── 28. 상품배송신청 / 장바구니 결제 ─────────────────────── */
.page-shop-delivery .list-payment-card .proof-item{
background:var(--gb-white) !important; border:0 !important;
border-radius:var(--gb-r-card) !important;
box-shadow:var(--gb-shadow) !important;
padding:14px 16px !important; margin-bottom:10px !important;
}
.page-shop-delivery .proof-item label{
display:flex !important; align-items:center; gap:12px; width:100%;
}
.page-shop-delivery .proof-item .icon{
flex:0 0 56px; width:56px; height:56px;
background:var(--gb-pink-tint) !important; border-radius:12px !important;
display:flex; align-items:center; justify-content:center; overflow:hidden;
padding:0 !important;
}
.page-shop-delivery .proof-item .icon img{
width:100%; height:100%; object-fit:cover;
}
.page-shop-delivery .proof-item .text{
font-size:13.5px !important; font-weight:700 !important; color:var(--gb-ink) !important;
display:block; margin-bottom:4px;
}
/* 가격이 회청색이라 다른 화면(분홍)과 달랐다 */
.page-shop-delivery .proof-item .d-flex{
font-size:14px !important; font-weight:800 !important; color:var(--gb-pink-deep) !important;
}
.page-shop-delivery .proof-item .d-flex .text-small{
font-size:11.5px !important; font-weight:500 !important;
color:var(--gb-gray) !important; margin:0 0 0 6px !important;
}
/* 이미 고른 상품이라 체크박스가 의미 없다 */
.page-shop-delivery .list-payment-card .tf-check-rounded{ display:none !important; }
.page-shop-delivery .list-company .company-item{
font-size:12px !important; color:var(--gb-ink-2) !important; font-weight:600;
}
/* 카드 */
.page-shop-delivery .card{
background:var(--gb-white) !important; border:0 !important;
border-radius:var(--gb-r-card) !important; box-shadow:var(--gb-shadow) !important;
overflow:hidden;
}
.page-shop-delivery .card-header{
background:none !important; border:0 !important;
padding:18px 16px 4px !important;
font-size:14.5px !important; font-weight:800 !important; color:var(--gb-ink) !important;
}
.page-shop-delivery .card-body{ background:none !important; padding:12px 16px 16px !important; }
/* 포인트 +/- 를 하나의 알약으로 */
.page-shop-delivery .box-quantity .input-group{
border:1px solid var(--gb-line) !important; border-radius:var(--gb-r-pill) !important;
overflow:hidden; background:var(--gb-white) !important; width:100%;
}
.page-shop-delivery .box-quantity .input-group .btn{
background:var(--gb-pink-tint) !important; border:0 !important;
color:var(--gb-pink-deep) !important; font-size:18px !important; font-weight:800 !important;
width:52px !important; border-radius:0 !important; box-shadow:none !important;
}
.page-shop-delivery .box-quantity .input-group input{
border:0 !important; text-align:center !important;
font-family:var(--gb-font) !important; font-size:15px !important; font-weight:800 !important;
color:var(--gb-ink) !important; background:none !important; box-shadow:none !important;
}
/* 전액회수 글자가 두 줄로 깨지고 전액사용과 겹쳐 있었다 */
.page-shop-delivery .btn-group{ display:flex !important; gap:8px; }
.page-shop-delivery .btn-group .btn,
.page-shop-delivery .card-body .btn{
white-space:nowrap !important; width:auto !important;
border-radius:var(--gb-r-pill) !important;
font-size:12.5px !important; font-weight:700 !important;
padding:10px 16px !important; border:0 !important; box-shadow:none !important;
}
.wrap .page-shop-delivery .btn.btn-pink{
background:var(--gb-pink-tint) !important; color:var(--gb-pink-deep) !important;
border:1px solid var(--gb-pink-soft) !important;
}
.wrap .page-shop-delivery .btn.btn-purple{
background:var(--gb-pink) !important; color:#fff !important;
}
/* 결제 금액 줄 */
.page-shop-delivery .card-body .list-company .text-medium{
font-size:13.5px !important; color:var(--gb-ink-2) !important; font-weight:600 !important;
}
.page-shop-delivery .card-body hr{ border-color:var(--gb-line) !important; opacity:1; }
/* 상품 카드가 흰 상자 안에 또 흰 상자로 이중으로 보였다 */
.page-shop-delivery .list-payment-card{
background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important;
}
/* 상품명이 카드 밖으로 삐져나왔다 */
.page-shop-delivery .proof-item .text-truncated{
flex:1; min-width:0; overflow:hidden;
}
.page-shop-delivery .proof-item .text{
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 주소 관련 버튼이 입력칸만큼 커서 균형이 안 맞았다 */
.page-shop-delivery .card-body .cols > fieldset.text-right .btn{
padding:11px 14px !important; font-size:12.5px !important;
}
/* label 자체가 흰 카드 스타일을 갖고 있어 카드 안에 카드가 겹쳐 보였다 */
.page-shop-delivery .proof-item label{
background:none !important; border:0 !important;
border-radius:0 !important; padding:0 !important; box-shadow:none !important;
}
/* + 버튼 오른쪽에 흰 여백이 남았다 (input 에 width:60% 인라인 지정) */
.page-shop-delivery .box-quantity .input-group input{
flex:1 1 auto !important; width:auto !important;
}
/* 결제금액은 이 화면에서 제일 중요한 숫자다.
왼쪽 '결제금액' 글자까지 분홍이 되면 산만해서, 오른쪽 금액만 칠한다 */
.page-shop-delivery .list-company .company-item:last-child .text-xlarge,
.page-shop-cart .list-company .company-item:last-child .text-xlarge{
color:var(--gb-pink-deep) !important; font-weight:900 !important;
}
.page-shop-delivery .list-company .company-item:first-child .text-xlarge,
.page-shop-cart .list-company .company-item:first-child .text-xlarge{
color:var(--gb-ink) !important; font-weight:800 !important;
}
/* '과도한 구매는...' 안내가 형광 초록이라 화면에서 튀었다 */
.page-shop-delivery .active.text-small,
.page-shop-delivery .active.text-small *,
.page-shop-box .active.text-small,
.page-shop-box .active.text-small *,
.page-shop-cart .active.text-small,
.page-shop-cart .active.text-small *{
color:var(--gb-gray) !important; font-size:11.5px !important; line-height:1.5 !important;
}
.page-shop-delivery .active.text-small i,
.page-shop-box .active.text-small i,
.page-shop-cart .active.text-small i{ color:var(--gb-pink-mid) !important; }
/* 결제수단 카드 */
.page-shop-delivery .payment-method-item,
.page-shop-delivery .list-payment-method label{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:14px !important;
}
/* 약관 동의 문구가 흐려서 읽히지 않았다 */
.page-shop-delivery .tf-switch-label,
.page-shop-delivery .box-checkbox label,
.page-shop-delivery .form-check-label{
color:var(--gb-ink-2) !important; font-size:12.5px !important; line-height:1.5 !important;
}
/* ── 29. 헤더 알림 모달 ────────────────────────────────────── */
/* 알림함 화면과 같은 모습으로 맞춘다 */
#pop-up-notifications .modal-content{
background:var(--gb-bg) !important;
}
#pop-up-notifications .wg-list-notifications{
background:var(--gb-bg) !important; min-height:100vh;
}
#pop-up-notifications .tab-content{ padding:0 16px 24px; }
#pop-up-notifications .header-2 .header-content{ position:relative; }
#pop-up-notifications .header-2 .btn-right{
position:absolute !important; right:0; top:50%; transform:translateY(-50%);
margin:0 !important;
}
#pop-up-notifications .gb-alarm-readall{
background:var(--gb-white); border:1px solid var(--gb-line);
color:var(--gb-pink-deep); font-size:12px; font-weight:700;
padding:7px 12px; border-radius:var(--gb-r-pill);
}
#pop-up-notifications .gb-alarm-readall:disabled{ color:var(--gb-gray); opacity:.6; }
#pop-up-notifications .gb-alarm-item{
display:flex !important; align-items:flex-start; gap:11px;
background:var(--gb-white) !important;
border:0 !important; border-radius:var(--gb-r-card) !important;
box-shadow:var(--gb-shadow) !important;
padding:14px 14px 13px !important; margin-bottom:10px !important;
position:relative;
}
#pop-up-notifications .gb-alarm-more{
display:block; text-align:center; margin-top:6px;
font-size:12.5px; font-weight:700; color:var(--gb-pink-deep);
padding:12px; border-radius:var(--gb-r-pill);
background:var(--gb-white); border:1px solid var(--gb-line);
}
/* 모달 헤더가 흰색이라 본문(분홍)과 경계가 도드라졌다 */
#pop-up-notifications .header-2,
#pop-up-notifications .header-2 .tf-container{
background:var(--gb-bg) !important; box-shadow:none !important; border:0 !important;
}
/* 버튼을 누를 때 글자가 드래그 선택되는 걸 막는다 */
.gb-alarm-readall{ -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
/* ── 30. 결제 영역 공통 (박스구매 · 배송신청 · 장바구니) ───── */
/* 결제수단을 결제금액 바로 밑에 카드로 나란히 놓는다 */
.page-shop-box .list-payment-card,
.page-shop-delivery .list-payment-card:has(input[name="c_type"]),
.page-shop-cart .list-payment-card:has(input[name="c_type"]){
display:flex !important; gap:8px; margin-top:12px;
background:none !important; box-shadow:none !important; padding:0 !important;
}
.page-shop-box .list-payment-card .proof-item.style-payment-card,
.page-shop-delivery .list-payment-card .proof-item.style-payment-card,
.page-shop-cart .list-payment-card .proof-item.style-payment-card{
flex:1 1 0; min-width:0; margin:0 !important; position:relative;
background:none !important; box-shadow:none !important; padding:0 !important;
}
.page-shop-box .proof-item.style-payment-card > label,
.page-shop-delivery .proof-item.style-payment-card > label,
.page-shop-cart .proof-item.style-payment-card > label{
display:flex !important; flex-direction:column; align-items:center; justify-content:center;
gap:6px; width:100%; min-height:74px;
background:var(--gb-white) !important;
border:1.5px solid var(--gb-line) !important;
border-radius:16px !important; padding:14px 8px !important;
box-shadow:none !important; transition:border-color .15s, background .15s;
}
.page-shop-box .proof-item.style-payment-card > label i,
.page-shop-delivery .proof-item.style-payment-card > label i,
.page-shop-cart .proof-item.style-payment-card > label i{
font-size:22px; color:var(--gb-gray) !important;
}
.page-shop-box .proof-item.style-payment-card > label .text,
.page-shop-delivery .proof-item.style-payment-card > label .text,
.page-shop-cart .proof-item.style-payment-card > label .text{
font-size:13px !important; font-weight:700 !important; color:var(--gb-ink-2) !important;
}
/* 고른 결제수단 */
.page-shop-box .proof-item.style-payment-card input:checked + label,
.page-shop-delivery .proof-item.style-payment-card input:checked + label,
.page-shop-cart .proof-item.style-payment-card input:checked + label{
border-color:var(--gb-pink) !important; background:var(--gb-pink-tint) !important;
}
.page-shop-box .proof-item.style-payment-card input:checked + label i,
.page-shop-delivery .proof-item.style-payment-card input:checked + label i,
.page-shop-cart .proof-item.style-payment-card input:checked + label i{ color:var(--gb-pink) !important; }
.page-shop-box .proof-item.style-payment-card input:checked + label .text,
.page-shop-delivery .proof-item.style-payment-card input:checked + label .text,
.page-shop-cart .proof-item.style-payment-card input:checked + label .text{
color:var(--gb-pink-deep) !important; font-weight:800 !important;
}
/* 라디오 동그라미는 카드 자체가 선택 표시라 필요 없다 */
.page-shop-box .list-payment-card input[name="c_type"],
.page-shop-delivery .list-payment-card input[name="c_type"],
.page-shop-cart .list-payment-card input[name="c_type"]{
position:absolute; opacity:0; pointer-events:none;
}
/* 결제안내·취소안내·배송/교환 — 밑줄을 빼고 작게 */
.page-shop-box .underline,
.page-shop-delivery .underline,
.page-shop-cart .underline{
text-decoration:none !important;
font-size:11px !important; font-weight:500 !important;
color:var(--gb-gray) !important; margin-left:12px;
}
.page-shop-box .underline:first-child,
.page-shop-delivery .underline:first-child,
.page-shop-cart .underline:first-child{ margin-left:0; }
/* 필수약관 동의 토글이 초록색이라 톤이 어긋났다 */
.tf-switch-check:checked{ background:var(--gb-pink) !important; border-color:var(--gb-pink) !important; }
.tf-switch-check:checked::before,
.tf-switch-check:checked::after{ background:#fff !important; }
input[type="checkbox"].tf-switch-check{ accent-color:var(--gb-pink); }
.page-shop-box label[for="uc_agree"],
.page-shop-delivery label[for="uc_agree"],
.page-shop-cart label[for="uc_agree"]{
font-size:12.5px !important; color:var(--gb-ink-2) !important; line-height:1.5 !important;
}
/* 전액사용이 두 줄로 깨졌다 (박스구매) */
.page-shop-box .btn-group{ display:flex !important; gap:8px; }
.page-shop-box .btn-group .btn,
.page-shop-box .card-body .btn{
white-space:nowrap !important; width:auto !important;
border-radius:var(--gb-r-pill) !important;
font-size:12.5px !important; font-weight:700 !important;
padding:10px 16px !important;
}
/* 1만원 박스는 노란 박스라 배지도 노랑으로 */
.gb-item-badge--gold{
color:#8A6300 !important; background:#FFF1CC !important;
}
/* 라디오 동그라미 숨기기 — 원본 규칙에 !important 가 있어 한 번 더 눌러준다 */
.page-shop-box .list-payment-card input[name="c_type"],
.page-shop-delivery .list-payment-card input[name="c_type"],
.page-shop-cart .list-payment-card input[name="c_type"]{
opacity:0 !important; width:0 !important; height:0 !important;
margin:0 !important; border:0 !important;
}
/* 안내 링크가 결제수단 카드에 딱 붙어 있었다 */
.page-shop-box fieldset.text-right.text-small,
.page-shop-delivery fieldset.text-right.text-small,
.page-shop-cart fieldset.text-right.text-small{
margin-top:12px !important; margin-bottom:14px !important;
}
/* 포인트 입력칸이 inline style(width:60%) 때문에 +/- 를 밀어냈다 */
.page-shop-box .input-group:has(#add_point),
.page-shop-delivery .input-group:has(#add_point),
.page-shop-cart .input-group:has(#add_point){
display:flex !important; width:100% !important;
border:1px solid var(--gb-line) !important; border-radius:var(--gb-r-pill) !important;
overflow:hidden; background:var(--gb-white) !important;
}
.page-shop-box .input-group #add_point,
.page-shop-delivery .input-group #add_point,
.page-shop-cart .input-group #add_point{
flex:1 1 auto !important; width:auto !important; min-width:0;
border:0 !important; text-align:center !important; background:none !important;
font-size:15px !important; font-weight:800 !important; color:var(--gb-ink) !important;
box-shadow:none !important;
}
.page-shop-box .input-group:has(#add_point) .btn,
.page-shop-delivery .input-group:has(#add_point) .btn,
.page-shop-cart .input-group:has(#add_point) .btn{
flex:0 0 52px !important; width:52px !important;
background:var(--gb-pink-tint) !important; border:0 !important; border-radius:0 !important;
color:var(--gb-pink-deep) !important; font-size:18px !important; font-weight:800 !important;
box-shadow:none !important; padding:0 !important;
}
/* 부트스트랩 .input-group 은 flex-wrap:wrap 이라 버튼이 세로로 접혔다 */
.page-shop-box .input-group:has(#add_point),
.page-shop-delivery .input-group:has(#add_point),
.page-shop-cart .input-group:has(#add_point){ flex-wrap:nowrap !important; }
/* 장바구니는 '최종결제금액' 이라 앞의 규칙이 못 잡았다 */
.page-shop-cart .list-company .company-item .text-xlarge{ font-weight:800 !important; }
.page-shop-cart .list-company .company-item:last-of-type .text-xlarge{
color:var(--gb-pink-deep) !important; font-weight:900 !important;
}
/* ── 31. 확인 팝업 (포인트 전환 · 금고이동 · 상품함이동) ───── */
.gb-confirm{
text-align:center;
padding:26px 20px 20px !important;
background:var(--gb-white) !important;
}
.gb-confirm-ico{
display:block; width:56px; height:56px; margin:0 auto 16px;
border-radius:18px; background:var(--gb-pink-tint) no-repeat center / 28px 28px;
}
.gb-confirm-ico--point{
background-color:#FFF3D9;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D99B00' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 16V8h3a2.5 2.5 0 0 1 0 5h-3'/%3E%3C/svg%3E");
}
.gb-confirm-ico--safe{
background-color:#EFEAFF;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C4BD8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='11' cy='12' r='3.5'/%3E%3Cpath d='M11 8.5v-1M11 16.5v1M7.5 12h-1M15.5 12h1M18 8v8'/%3E%3C/svg%3E");
}
.gb-confirm-ico--product{
background-color:#FFE3F0;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF2E8F' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='m4 7.5 8 4.5 8-4.5M12 12v9'/%3E%3C/svg%3E");
}
.gb-confirm-title{
margin:0 0 16px !important;
font-size:16px !important; font-weight:800 !important;
color:var(--gb-ink) !important; line-height:1.5 !important;
}
.gb-confirm-title b{ color:var(--gb-pink-deep) !important; font-weight:900 !important; }
/* 전환예정 포인트 */
.gb-confirm-sum{
display:flex; align-items:center; justify-content:space-between;
background:var(--gb-pink-tint); border-radius:14px;
padding:14px 16px; margin-bottom:12px;
}
.gb-confirm-sum-label{ font-size:12.5px; font-weight:600; color:var(--gb-ink-2); }
.gb-confirm-sum-value{ font-size:17px; font-weight:900; color:var(--gb-pink-deep); }
.gb-confirm-warn{
margin:0 0 18px !important;
font-size:12px !important; font-weight:600 !important; line-height:1.5 !important;
color:#D9006B !important;
}
.gb-confirm-warn.is-soft{ color:var(--gb-gray) !important; font-weight:500 !important; }
.gb-confirm-btns{ display:flex; align-items:center; gap:10px; }
.gb-confirm-btns .tf-btn{ flex:1; }
.gb-confirm-btns .tf-btn.style-border{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
color:var(--gb-ink) !important;
}
/* ── 32. 공용 안내 토스트 (#open-message) ─────────────────── */
/* 모든 화면이 쓰는 알림창인데 민트색 머리띠 + 회색 버튼으로 남아 있었다 */
#open-message.toast{
background:var(--gb-white) !important;
border:0 !important; border-radius:20px !important;
box-shadow:0 10px 40px rgba(217,0,107,.18) !important;
overflow:hidden; min-width:300px; max-width:340px;
}
#open-message .toast-header{
background:var(--gb-white) !important;
border-bottom:1px solid var(--gb-line) !important;
padding:16px 18px 13px !important;
}
#open-message .toast-header strong{
font-size:15px !important; font-weight:800 !important; color:var(--gb-ink) !important;
}
/* 오른쪽 '굿박스' 글자는 제목을 밀어내기만 해서 감춘다 */
#open-message .toast-header small{ display:none !important; }
#open-message .toast-body{ padding:18px !important; }
#open-message .toast-body .card{
background:none !important; border:0 !important;
box-shadow:none !important; margin:0 !important;
}
#open-message .toast-body .card-body{
background:none !important; padding:0 0 18px !important; text-align:center;
}
#open-message .toast-body .card-body p{
margin:0 !important; font-size:14px !important; font-weight:600 !important;
color:var(--gb-ink-2) !important; line-height:1.6 !important; white-space:pre-line;
}
#open-message .toast-body .card-footer{
background:none !important; border:0 !important; padding:0 !important;
}
#open-message .card-footer .d-flex{ gap:10px !important; }
#open-message .card-footer .btn{
flex:1; width:auto !important;
border-radius:var(--gb-r-pill) !important;
font-size:14px !important; font-weight:700 !important;
padding:13px 10px !important; border:0 !important; box-shadow:none !important;
}
#open-message .card-footer .btn-secondary{
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
color:var(--gb-ink) !important;
}
/* 토스트는 .wrap 바깥에 있어서 .wrap 을 앞에 붙이면 안 잡힌다 */
#open-message .card-footer .btn.btn-purple,
#open-message .card-footer .btn.btn-mint{
background:var(--gb-pink) !important; color:#fff !important;
box-shadow:0 3px 12px rgba(217,0,107,.28) !important;
}
/* ── 33. 테스트 서버 표시 띠 ──────────────────────────────
운영 화면과 눈으로 구분되게 맨 위에 얇은 띠를 둔다.
운영(hb9goodbox.com)에서는 아예 출력되지 않는다. */
.gb-testbar{
position:fixed; top:0; left:0; right:0; z-index:2000;
background:#23151C; color:#FFD9E9;
font-size:11px; font-weight:700; letter-spacing:-.2px;
text-align:center; padding:5px 10px; line-height:1.3;
}
/* 띠 높이만큼 화면 전체를 아래로 민다 (헤더가 fixed 라 같이 내려줘야 한다) */
body.gb-testserver{ padding-top:24px; }
body.gb-testserver .header-fix,
body.gb-testserver .header-v3.header-fix,
body.gb-testserver .header-2.header-fix{ top:24px !important; }
/* ── 34. 홈 하단 약관 안내 ────────────────────────────────
문구 아래에 화면 반 뼘쯤 빈 공간이 남았다.
(본문 하단 padding 120px + 문구 자체 여백이 겹쳐서)
홈에서만 바짝 줄인다. */
.page-home-main{ margin-bottom:0 !important; }
.page-home-main .bottom-content.guide-text{
padding:6px 16px 0 !important; margin:0 !important;
}
.page-home-main .bottom-content.guide-text .text{
font-size:10.5px !important; color:var(--gb-gray) !important;
line-height:1.7 !important; text-align:center; margin:0 !important;
}
.page-home-main .bottom-content.guide-text a{
color:var(--gb-ink-2) !important; text-decoration:underline;
text-underline-offset:2px; font-weight:600;
}
/* 홈은 마지막 요소가 안내문이라 120px 씩이나 필요 없다.
탭바(약 70px)만 피하면 된다. */
body:has(.page-home-main) .body-container{ padding-bottom:84px !important; }
/* ── 35. 로그인 (시안 보강: 아이디저장·찾기·회원가입 상자·간편 구분선) ── */
.gb-login-row{ display:flex; align-items:center; margin:2px 2px 0; }
.gb-login-remember{
display:flex; align-items:center; gap:7px;
font-size:12.5px !important; font-weight:600 !important; color:var(--gb-ink-2) !important;
margin:0 !important;
}
.gb-login-remember input{
width:17px; height:17px; accent-color:var(--gb-pink);
border-radius:5px; margin:0;
}
.gb-login-find{
display:flex; align-items:center; justify-content:center; gap:14px;
margin:2px 0 16px;
}
.gb-login-find a{
font-size:12.5px !important; font-weight:600 !important;
color:var(--gb-ink-2) !important; text-decoration:none !important;
}
.gb-login-find-bar{ width:1px; height:11px; background:var(--gb-line); }
.gb-login-join{
display:block; text-align:center;
background:var(--gb-pink-tint); border:1px solid var(--gb-pink-soft);
border-radius:14px; padding:14px; margin-bottom:20px;
font-size:13px !important; font-weight:500 !important; color:var(--gb-ink-2) !important;
}
.gb-login-join b{ color:var(--gb-pink-deep); font-weight:800; margin-left:6px; }
.gb-login-divider{
display:flex; align-items:center; gap:12px; margin:0 2px 14px;
}
.gb-login-divider::before, .gb-login-divider::after{
content:''; flex:1; height:1px; background:var(--gb-line);
}
.gb-login-divider span{
font-size:11.5px; font-weight:600; color:var(--gb-gray); white-space:nowrap;
}
.gb-google-ico{ display:flex; align-items:center; justify-content:center; }
/* ── 36. 내정보 멤버십 카드 (시안: GOLD) ─────────────────── */
.gb-ms-card{
position:relative; overflow:hidden;
background:linear-gradient(135deg,#FFF9EC 0%,#FFF3D9 55%,#FFEAC2 100%);
border:1px solid #F3E2BC;
border-radius:var(--gb-r-card);
padding:18px 16px 16px;
margin-bottom:12px;
box-shadow:var(--gb-shadow);
}
.gb-ms-label{
font-size:10px; font-weight:800; letter-spacing:.14em; color:#C89B3C;
margin-bottom:2px;
}
.gb-ms-level{
font-size:27px; font-weight:900; letter-spacing:-.5px; color:#8A6300;
line-height:1.15; margin-bottom:7px;
}
.gb-ms-hello{
font-size:12.5px !important; line-height:1.55 !important;
color:#6B5A38 !important; font-weight:500 !important; margin:0 0 10px !important;
}
.gb-ms-benefit{
background:#fff; border:1px solid #EAD9AE; border-radius:var(--gb-r-pill);
font-size:11.5px; font-weight:700; color:#8A6300;
padding:7px 12px;
}
.gb-ms-medal{
position:absolute; top:14px; right:14px;
font-size:52px; line-height:1;
filter:drop-shadow(0 4px 8px rgba(138,99,0,.25));
}
.gb-ms-progress{
margin-top:14px; background:#fff; border-radius:14px; padding:12px 14px;
}
.gb-ms-progress-head{
display:flex; align-items:center; justify-content:space-between; gap:8px;
font-size:11px; color:#6B5A38; margin-bottom:8px;
}
.gb-ms-progress-head b{ font-weight:800; color:#8A6300; }
.gb-ms-progress-num{ font-weight:700; white-space:nowrap; }
.gb-ms-bar{
height:8px; border-radius:99px; background:#F1E7CE; overflow:hidden;
}
.gb-ms-bar i{
display:block; height:100%; border-radius:99px;
background:linear-gradient(90deg,#E7B944,#C8901A);
}
/* 보유 포인트 숫자가 칸에서 잘리던 문제 — 칸 폭에 따라 글자를 살짝 줄이고
말줄임 대신 전부 보이게 한다 */
.gb-my-stats{ gap:8px !important; }
.gb-my-stat{ min-width:0; padding:12px 10px !important; }
.gb-my-stat-txt b{
font-size:clamp(10.5px, 3.1vw, 12.5px);
overflow:visible; text-overflow:clip;
}
/* 첫 칸(보유 포인트)은 넓어진 만큼 숫자를 여유 있게 */
.gb-my-stat:first-child .gb-my-stat-txt b{ font-size:clamp(12px, 3.6vw, 14.5px); letter-spacing:-.2px; }
/* 준비중 뱃지 + 로그아웃 줄 */
.gb-soon{
display:inline-block; margin-left:6px;
font-size:9.5px; font-weight:700; color:var(--gb-gray);
background:var(--gb-line); border-radius:var(--gb-r-pill); padding:2px 7px;
vertical-align:1px;
}
.gb-logout-row{ text-align:center; padding:18px 0 6px; }
.gb-logout-row a{
font-size:12.5px; font-weight:600; color:var(--gb-gray);
text-decoration:underline; text-underline-offset:3px;
}
/* 멤버십 진행줄 머리글이 두 줄로 접히지 않게 */
.gb-ms-progress-head{ font-size:10.5px; }
.gb-ms-progress-head span:first-child{ min-width:0; }
/* ── 37. 굿뉴스 4탭 (시안) ────────────────────────────────── */
.gb-news-tabs{
display:flex; gap:0; margin:2px 0 14px;
border-bottom:1.5px solid var(--gb-line);
}
.gb-news-tabbtn{
flex:1; background:none; border:0; padding:11px 2px 10px;
font-size:13.5px; font-weight:600; color:var(--gb-gray);
position:relative; white-space:nowrap;
}
.gb-news-tabbtn.is-on{ color:var(--gb-pink-deep); font-weight:800; }
.gb-news-tabbtn.is-on::after{
content:''; position:absolute; left:14%; right:14%; bottom:-1.5px;
height:2.5px; border-radius:99px; background:var(--gb-pink);
}
/* 실시간 배너 */
.gb-news-hero{
display:flex; align-items:center; justify-content:space-between; gap:10px;
background:linear-gradient(120deg,#FFE3F0,#FFD1E6);
border-radius:var(--gb-r-card); padding:16px;
margin-bottom:14px; box-shadow:var(--gb-shadow);
}
.gb-news-hero-txt{
font-size:14px; font-weight:600; color:var(--gb-ink); line-height:1.55;
}
.gb-news-hero-txt b{ font-weight:800; }
.gb-news-hero-txt em{
font-style:normal; color:var(--gb-pink-deep); font-weight:900;
}
.gb-news-hero-box{ width:64px; height:64px; object-fit:contain; flex:none; }
/* NEW 상품 슬라이드 */
.gb-news-slide{
position:relative; background:var(--gb-white);
border:1px solid var(--gb-line); border-radius:16px;
padding:12px 10px 12px; text-align:center;
}
.gb-news-slide-new{
position:absolute; top:8px; left:8px; z-index:2;
background:var(--gb-pink); color:#fff;
font-size:8.5px; font-weight:800; letter-spacing:.06em;
border-radius:var(--gb-r-pill); padding:3px 7px;
}
.gb-news-slide-img{
height:74px; display:flex; align-items:center; justify-content:center;
margin-bottom:8px;
}
.gb-news-slide-img img{ max-width:100%; max-height:74px; object-fit:contain; }
.gb-news-slide-name{
font-size:11px; font-weight:600; color:var(--gb-ink); line-height:1.4;
min-height:31px; margin-bottom:3px;
}
.gb-news-slide-price{ font-size:12.5px; font-weight:900; color:var(--gb-pink-deep); }
.gb-news-slide-nick{
font-size:10.5px; font-weight:700; color:var(--gb-ink-2);
margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gb-news-sec-title{
font-size:15px; font-weight:800; color:var(--gb-ink);
margin:16px 2px 10px;
}
/* 최근 획득 목록 */
.gb-news-row{
display:flex; align-items:center; gap:10px;
background:var(--gb-white); border-radius:var(--gb-r-card);
box-shadow:var(--gb-shadow); padding:12px 14px; margin-bottom:8px;
}
.gb-news-row-avatar{
width:36px; height:36px; border-radius:50%;
background:var(--gb-pink-tint); color:var(--gb-pink-deep);
display:flex; align-items:center; justify-content:center;
font-size:14px; font-weight:800; flex:none;
}
.gb-news-row-body{ flex:1; min-width:0; }
.gb-news-row-top{ display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.gb-news-row-name{ font-size:11px; font-weight:700; color:var(--gb-ink-2); }
.gb-news-row-product{
font-size:12.5px; font-weight:700; color:var(--gb-ink); line-height:1.4;
}
.gb-news-row-price{ font-size:13px; font-weight:900; color:var(--gb-pink-deep); margin-top:2px; }
.gb-news-row-img{
width:52px; height:52px; flex:none; border-radius:12px; overflow:hidden;
background:var(--gb-pink-tint);
}
.gb-news-row-img img{ width:100%; height:100%; object-fit:cover; }
/* 공용 빈 상태 */
.gb-news-empty{
text-align:center; padding:36px 20px;
}
.gb-news-empty--tall{ padding:56px 20px; }
.gb-news-empty span{ font-size:38px; display:block; margin-bottom:10px; }
.gb-news-empty p{ margin:0 0 4px !important; font-size:13.5px !important; color:var(--gb-ink-2) !important; font-weight:600 !important; }
.gb-news-empty p b{ color:var(--gb-ink); font-weight:800; }
.gb-news-empty-sub{ font-size:12px !important; color:var(--gb-gray) !important; font-weight:500 !important; line-height:1.6 !important; }
/* TOP 10 */
.gb-top10-head{ text-align:center; margin:6px 0 16px; }
.gb-top10-title{ font-size:19px; font-weight:900; color:var(--gb-ink); letter-spacing:-.3px; }
.gb-top10-head p{ margin:4px 0 8px !important; font-size:12px !important; color:var(--gb-ink-2) !important; }
.gb-top10-period{
display:inline-block; font-size:11px; font-weight:700; color:var(--gb-pink-deep);
background:var(--gb-white); border:1px solid var(--gb-pink-soft);
border-radius:var(--gb-r-pill); padding:5px 13px;
}
.gb-top10-podium{
display:flex; align-items:flex-end; gap:8px; margin-bottom:14px;
}
.gb-podium{
flex:1; min-width:0; background:var(--gb-white); border:1px solid var(--gb-line);
border-radius:16px; padding:12px 8px; text-align:center; position:relative;
}
.gb-podium--first{
border:1.5px solid #E7B944; box-shadow:0 6px 20px rgba(231,185,68,.25);
padding-top:16px; padding-bottom:16px;
}
.gb-podium-medal{ font-size:22px; display:block; margin-bottom:4px; }
.gb-podium--first .gb-podium-medal{ font-size:28px; }
.gb-podium-img{ height:56px; display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
.gb-podium--first .gb-podium-img{ height:72px; }
.gb-podium-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.gb-podium-name{ font-size:10px; font-weight:600; color:var(--gb-ink); line-height:1.35; min-height:27px; margin-bottom:2px; }
.gb-podium-price{ font-size:12px; font-weight:900; color:var(--gb-pink-deep); margin-bottom:2px; }
.gb-podium--first .gb-podium-price{ font-size:13.5px; }
.gb-podium-user{ font-size:10px; color:var(--gb-gray); font-weight:600; margin-bottom:5px; }
.gb-top10-list{
background:var(--gb-white); border-radius:var(--gb-r-card);
box-shadow:var(--gb-shadow); padding:4px 14px;
}
.gb-top10-row{
display:flex; align-items:center; gap:10px;
padding:11px 0; border-bottom:1px solid var(--gb-line);
}
.gb-top10-row:last-child{ border-bottom:0; }
.gb-top10-rank{
width:20px; text-align:center; font-size:13px; font-weight:900; color:var(--gb-gray);
flex:none;
}
.gb-top10-pname{ flex:1; min-width:0; font-size:12.5px; font-weight:600; color:var(--gb-ink); }
.ellipsis-line-1{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gb-top10-pprice{ font-size:12.5px; font-weight:800; color:var(--gb-ink-2); flex:none; }
.gb-top10-puser{ font-size:10.5px; color:var(--gb-gray); font-weight:600; flex:none; max-width:70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 랭킹 */
.gb-rank-banner{
display:flex; align-items:center; justify-content:space-between; gap:10px;
background:linear-gradient(120deg,#FF6FB2,#FF2E8F);
border-radius:var(--gb-r-card); padding:18px 16px;
margin-bottom:12px; box-shadow:0 6px 20px rgba(217,0,107,.25);
}
.gb-rank-banner-txt b{ font-size:15.5px; font-weight:900; color:#fff; display:block; margin-bottom:5px; }
.gb-rank-banner-txt p{ margin:0 !important; font-size:11.5px !important; color:#FFD9E9 !important; line-height:1.55 !important; }
.gb-rank-banner-trophy{ font-size:44px; flex:none; filter:drop-shadow(0 4px 8px rgba(0,0,0,.15)); }
.gb-rank-me{
display:flex; background:var(--gb-white); border-radius:var(--gb-r-card);
box-shadow:var(--gb-shadow); padding:14px 0; margin-bottom:12px;
}
.gb-rank-me-col{
flex:1; text-align:center; position:relative;
}
.gb-rank-me-col + .gb-rank-me-col::before{
content:''; position:absolute; left:0; top:15%; bottom:15%;
width:1px; background:var(--gb-line);
}
.gb-rank-me-col em{ display:block; font-style:normal; font-size:10.5px; font-weight:600; color:var(--gb-gray); margin-bottom:4px; }
.gb-rank-me-col b{ font-size:17px; font-weight:900; color:var(--gb-ink); }
.gb-rank-me-col b small{ font-size:11px; font-weight:700; color:var(--gb-ink-2); }
/* NEW 배지가 아이콘 줄높이를 물려받아 세로로 부풀었다 */
.gb-news-slide-new{ line-height:1 !important; }
.gb-item-badge{ line-height:1.3; white-space:nowrap; }
/* ── 38. 박스구매 2단계 (시안 STEP 2) ─────────────────────── */
.gb2-summary{
display:flex; align-items:center; gap:12px;
background:var(--gb-white); border-radius:var(--gb-r-card);
box-shadow:var(--gb-shadow); padding:14px 16px; margin-bottom:12px;
}
.gb2-summary-img{ width:56px; height:56px; object-fit:contain; flex:none; }
.gb2-summary-txt{ flex:1; min-width:0; }
.gb2-summary-txt b{ display:block; font-size:15px; font-weight:800; color:var(--gb-ink); }
.gb2-summary-txt em{
display:block; font-style:normal; font-size:11px; font-weight:500;
color:var(--gb-gray); margin:1px 0 4px;
}
.gb2-summary-change{
background:none; border:0; padding:0;
font-size:11px; font-weight:700; color:var(--gb-pink-deep);
}
.gb2-summary-guide{
flex:none; background:var(--gb-white); border:1px solid var(--gb-line);
border-radius:var(--gb-r-pill); padding:9px 12px;
font-size:11.5px; font-weight:700; color:var(--gb-ink);
}
.gb2-row{ display:flex; align-items:center; justify-content:space-between; }
.gb2-row-label{ font-size:13.5px; font-weight:800; color:var(--gb-ink); }
.gb2-row-value{ font-size:13.5px; font-weight:600; color:var(--gb-ink-2); }
.gb2-row-value b{ color:var(--gb-pink-deep); font-weight:900; }
.gb2-row-edit{
display:inline-block; margin-left:8px;
font-size:11px !important; font-weight:700 !important; color:var(--gb-gray) !important;
text-decoration:underline !important; text-underline-offset:2px;
}
.gb2-mypoint{ font-weight:800 !important; color:var(--gb-pink-deep) !important; }
.gb2-mypoint .gb-point-p{ margin-right:2px; }
/* 2단계 하단 결제 바 (시안: 왼쪽 요약 + 오른쪽 흰 버튼) */
#gb-bar2{ background:none !important; border:0 !important; box-shadow:none !important; }
#gb-bar2 .divider{ display:none; }
.gb2-paybar{
display:flex; align-items:center; gap:10px;
background:linear-gradient(120deg,#FF6FB2,#FF2E8F);
border-radius:20px; padding:12px 12px 12px 18px;
box-shadow:0 8px 24px rgba(217,0,107,.35);
}
.gb2-paybar-sum{
flex:none; font-size:11px; font-weight:600; color:#FFD9E9; line-height:1.6;
white-space:nowrap;
}
.gb2-paybar-sum b{ color:#fff; font-weight:900; font-size:12.5px; }
.gb2-paybar-btn{
flex:1; min-width:0;
background:var(--gb-white); border:0; border-radius:14px;
padding:14px 8px;
font-size:14px; font-weight:900; color:var(--gb-pink-deep);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 원본 CSS 가 버튼을 전부 width:100% 로 늘려서 요약 카드가 무너졌다 */
.gb2-summary-guide{ width:auto !important; }
.gb2-summary-change{ width:auto !important; }
/* ── 39. 보관함 공통: 머리글 + 도구줄 + 정렬 드롭다운 ─────── */
.gb-store-head{ margin:2px 2px 8px; }
.gb-store-title{
font-size:18px !important; font-weight:900 !important; color:var(--gb-ink) !important;
margin:0 !important; letter-spacing:-.3px;
}
.gb-store-title b{ color:var(--gb-pink-deep); font-weight:900; }
.gb-store-tools{
display:flex; align-items:center; justify-content:space-between;
margin:0 0 10px;
}
.gb-store-allcheck{
display:flex; align-items:center; gap:7px;
font-size:12.5px !important; font-weight:600 !important; color:var(--gb-ink-2) !important;
margin:0 !important;
}
.gb-store-allcheck input{
width:18px; height:18px; accent-color:var(--gb-pink); margin:0; border-radius:6px;
}
.gb-store-tools-right{ display:flex; align-items:center; gap:8px; }
.gb-sort-dd{
appearance:none; -webkit-appearance:none;
background:var(--gb-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5A63' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 12px;
border:1px solid var(--gb-line) !important; border-radius:var(--gb-r-pill) !important;
font-size:12px !important; font-weight:700 !important; color:var(--gb-ink) !important;
padding:8px 28px 8px 13px !important; width:auto !important;
}
.gb-store-search{
width:34px; height:34px; display:flex; align-items:center; justify-content:center;
background:var(--gb-white); border:1px solid var(--gb-line); border-radius:50%;
}
.gb-store-search i{ font-size:15px; color:var(--gb-ink-2) !important; }
/* ── 상품함: 왼쪽 체크 컬럼 + 사진 + 글 (시안 storage) ─────
체크가 사진을 가리지 않도록 카드 왼쪽에 자기 자리를 갖는다 */
.page-mypage-myproduct .list-payment-card .proof-item{
position:relative;
display:flex; align-items:flex-start; gap:10px;
}
.page-mypage-myproduct .list-payment-card input[name="ubs_idx"]{
position:static !important; flex:0 0 22px;
width:22px !important; height:22px !important;
margin:14px 0 0 0 !important; /* 사진 첫 줄과 눈높이 맞춤 */
appearance:none; -webkit-appearance:none;
background:var(--gb-white); border:1.5px solid var(--gb-line) !important;
border-radius:7px !important;
}
.page-mypage-myproduct .list-payment-card input[name="ubs_idx"]:checked{
background:var(--gb-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") no-repeat center / 13px;
border-color:var(--gb-pink) !important;
}
.page-mypage-myproduct .list-payment-card .proof-item > label{ flex:1; min-width:0; }
/* ── 하단 플로팅 작업 바 (시안: N개 선택됨 · 금고이동 · 배송신청 · 환급하기) ── */
.gb-actionbar{
position:fixed; left:10px; right:10px; bottom:86px; z-index:1200;
display:flex; align-items:center; gap:6px;
background:#23151C; border-radius:18px;
padding:10px 8px 10px 14px;
box-shadow:0 10px 30px rgba(35,21,28,.4);
animation:gbBarUp .22s ease;
}
@keyframes gbBarUp{ from{ transform:translateY(14px); opacity:0; } to{ transform:none; opacity:1; } }
.gb-actionbar-count{
flex:none; font-size:11.5px; font-weight:600; color:#D8C9D1; white-space:nowrap;
}
.gb-actionbar-count b{ color:#fff; font-weight:900; font-size:13px; }
.gb-actionbar-btn{
flex:1; min-width:0; background:rgba(255,255,255,.12); border:0;
border-radius:12px; padding:10px 4px;
font-size:11.5px; font-weight:700; color:#fff; white-space:nowrap;
}
.gb-actionbar-btn--hot{ background:var(--gb-pink); }
/* ── 40. 보관함 탭별 포인트 색 (시안) ─────────────────────
박스함·상품함 = 분홍(기본) / 금고함·선물함 = 보라 / 배송내역 = 파랑 */
:root{
--gb-purple: #6C4BD8;
--gb-purple-deep: #5636BF;
--gb-purple-tint: #F1EDFF;
--gb-purple-soft: #DDD3FA;
--gb-blue: #2E7DD8;
--gb-blue-deep: #1D63B8;
--gb-blue-tint: #EAF3FF;
--gb-blue-soft: #C9E0FA;
}
/* 위쪽 5탭에서 현재 탭의 색 — 페이지별로 활성 탭 색을 바꾼다 */
.page-mypage-mysafe .tab-product .nav-tab-item.active .nav-link,
.page-mypage-mygift .tab-product .nav-tab-item.active .nav-link{
color:var(--gb-purple-deep) !important;
}
.page-mypage-mysafe .tab-product .nav-tab-item.active .nav-link::before,
.page-mypage-mygift .tab-product .nav-tab-item.active .nav-link::before{
color:var(--gb-purple) !important;
}
.page-mypage-mydelivery .tab-product .nav-tab-item.active .nav-link{
color:var(--gb-blue-deep) !important;
}
.page-mypage-mydelivery .tab-product .nav-tab-item.active .nav-link::before{
color:var(--gb-blue) !important;
}
/* 제목 숫자 색도 탭 색을 따라간다 */
.page-mypage-mysafe .gb-store-title b,
.page-mypage-mygift .gb-store-title b{ color:var(--gb-purple-deep); }
.page-mypage-mydelivery .gb-store-title b{ color:var(--gb-blue-deep); }
/* ── 41. 금고함 (시안: 보랏빛 카드 + 자물쇠 + 버튼 2개) ───── */
/* 카드 한 덩어리(전부 연보라): 체크 | 사진+글, 버튼은 오른쪽 아래에 작게 */
.page-mypage-mysafe .list-payment-card .proof-item{
position:relative;
background:var(--gb-purple-tint) !important;
border:1px solid var(--gb-purple-soft) !important;
display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap;
padding:14px 14px 12px !important;
}
.page-mypage-mysafe .list-payment-card .proof-item > label{ flex:1; min-width:0; }
.page-mypage-mysafe .gb-item-price{ color:var(--gb-purple-deep) !important; }
/* 카드 안에 흰 상자가 또 생기지 않게 — 사진도 보라 바탕 위에 그대로 */
.page-mypage-mysafe .list-payment-card .proof-item label img{
background:none !important; border:0 !important; box-shadow:none !important;
}
.gb-safe-btns{
flex-basis:100%; display:flex; justify-content:flex-end; gap:6px; margin-top:4px;
}
.gb-safe-btn{
flex:none; width:auto !important; border:0; border-radius:var(--gb-r-pill);
background:var(--gb-purple); color:#fff;
font-size:11px; font-weight:700; padding:8px 13px;
white-space:nowrap;
}
.gb-safe-btn--line{
background:var(--gb-white); color:var(--gb-purple-deep);
border:1px solid var(--gb-purple-soft);
}
.gb-safe-note{
display:flex; align-items:flex-start; gap:8px;
background:var(--gb-purple-tint); border:1px solid var(--gb-purple-soft);
border-radius:14px; padding:13px 14px; margin:4px 0 10px;
font-size:11.5px; font-weight:500; color:var(--gb-purple-deep); line-height:1.55;
}
.gb-safe-note span{ flex:none; }
/* 금고함 체크박스 — 상품함과 같은 왼쪽 컬럼 */
.page-mypage-mysafe .list-payment-card input[name="ubs_idx"]{
position:static !important; flex:0 0 22px;
width:22px !important; height:22px !important;
margin:14px 0 0 0 !important;
appearance:none; -webkit-appearance:none;
background:var(--gb-white); border:1.5px solid var(--gb-purple-soft) !important;
border-radius:7px !important;
}
.page-mypage-mysafe .list-payment-card input[name="ubs_idx"]:checked{
background:var(--gb-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") no-repeat center / 13px;
border-color:var(--gb-purple) !important;
}
.gb-actionbar--purple .gb-actionbar-btn--hot{ background:var(--gb-purple); }
/* 금고함 정렬 드롭다운·검색 테두리도 보라 기운 */
.page-mypage-mysafe .gb-sort-dd,
.page-mypage-mysafe .gb-store-search{ border-color:var(--gb-purple-soft) !important; }
/* ── 42. 선물함 (시안: 보라 포인트 카드) ──────────────────── */
.gb-gift-seg{
display:flex; background:var(--gb-white); border:1px solid var(--gb-purple-soft);
border-radius:var(--gb-r-pill); padding:4px; margin-bottom:12px;
}
.gb-gift-segbtn{
flex:1; border:0; background:none; border-radius:var(--gb-r-pill);
padding:9px 4px; font-size:12.5px; font-weight:700; color:var(--gb-gray);
white-space:nowrap;
}
.gb-gift-segbtn.is-on{ background:var(--gb-purple); color:#fff; }
.gb-gift-card{
background:var(--gb-white); border-radius:var(--gb-r-card);
box-shadow:var(--gb-shadow); padding:14px 16px; margin-bottom:10px;
}
.gb-gift-head{
display:flex; align-items:center; justify-content:space-between; margin-bottom:9px;
}
.gb-gift-status{
font-size:10.5px; font-weight:800; border-radius:var(--gb-r-pill);
padding:4px 10px; line-height:1;
background:var(--gb-line); color:var(--gb-ink-2);
}
.gb-gift-status.is-wait{ background:var(--gb-purple-tint); color:var(--gb-purple-deep); }
.gb-gift-status.is-done{ background:#E6F7F1; color:#12866A; }
.gb-gift-date{ font-size:10px; color:var(--gb-gray); font-weight:500; }
.gb-gift-who{
display:flex; align-items:center; gap:7px; margin-bottom:11px;
font-size:12.5px;
}
.gb-gift-avatar{
width:28px; height:28px; border-radius:50%; flex:none;
background:var(--gb-purple-tint); color:var(--gb-purple-deep);
display:flex; align-items:center; justify-content:center;
font-size:12px; font-weight:800;
}
.gb-gift-who b{ font-weight:800; color:var(--gb-ink); }
.gb-gift-who span{ color:var(--gb-ink-2); font-weight:500; }
.gb-gift-product{
display:flex; align-items:center; gap:12px;
background:var(--gb-purple-tint); border-radius:14px; padding:12px;
margin-bottom:11px;
}
.gb-gift-product img{
width:56px; height:56px; border-radius:10px; object-fit:cover;
background:var(--gb-white); flex:none;
}
.gb-gift-product-txt{ min-width:0; }
.gb-gift-product-txt em{
display:block; font-style:normal; font-size:10px; font-weight:600;
color:var(--gb-gray); margin-bottom:1px;
}
.gb-gift-product-txt b{
display:block; font-size:12.5px; font-weight:700; color:var(--gb-ink); line-height:1.4;
}
.gb-gift-product-txt strong{
display:block; font-size:13.5px; font-weight:900; color:var(--gb-purple-deep); margin-top:2px;
}
.gb-gift-btns{ display:flex; gap:8px; }
.gb-gift-btn{
flex:1; border:1px solid var(--gb-line); background:var(--gb-white);
border-radius:var(--gb-r-pill); padding:11px 4px;
font-size:12.5px; font-weight:700; color:var(--gb-ink-2); white-space:nowrap;
}
.gb-gift-btn--main{
background:var(--gb-purple); border-color:var(--gb-purple); color:#fff;
box-shadow:0 3px 10px rgba(108,75,216,.3);
}
.gb-gift-donemark{
flex:1; text-align:center; font-size:12px; font-weight:700; color:#12866A;
padding:8px 0;
}
/* ── 43. 배송내역 (시안: 파랑 포인트 + 게이지 카드) ───────── */
.gb-dv-daterow{
display:flex; align-items:center; gap:8px; margin-bottom:12px;
}
.gb-dv-daterange{
flex:1; background:var(--gb-white); border:1px solid var(--gb-blue-soft);
border-radius:var(--gb-r-pill); overflow:hidden; align-items:center;
}
.gb-dv-daterange .input-group-text{
background:none !important; border:0 !important; padding:0 4px 0 14px !important;
color:var(--gb-blue) !important;
}
.gb-dv-daterange input{
border:0 !important; background:none !important; box-shadow:none !important;
font-size:12.5px !important; font-weight:600 !important; color:var(--gb-ink) !important;
padding:11px 8px !important;
text-align:center !important; height:auto !important; line-height:1.4 !important;
}
.page-mypage-mydelivery .gb-store-search{ border-color:var(--gb-blue-soft) !important; }
.gb-dv-card{
background:var(--gb-white); border-radius:var(--gb-r-card);
box-shadow:var(--gb-shadow); padding:14px 16px; margin-bottom:10px;
}
.gb-dv-head{
display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
.gb-dv-badge{
font-size:10.5px; font-weight:800; line-height:1;
border-radius:var(--gb-r-pill); padding:5px 11px;
}
.gb-dv-badge.is-ship{ background:var(--gb-blue); color:#fff; }
.gb-dv-badge.is-ready{ background:var(--gb-blue-tint); color:var(--gb-blue-deep); }
.gb-dv-badge.is-done{ background:#E6F7F1; color:#12866A; }
.gb-dv-badge.is-etc{ background:var(--gb-line); color:var(--gb-ink-2); }
.gb-dv-date{ font-size:10px; color:var(--gb-gray); font-weight:500; }
.gb-dv-body{ display:flex; align-items:center; gap:12px; }
.gb-dv-img{
width:56px; height:56px; flex:none; border-radius:12px; overflow:hidden;
background:var(--gb-blue-tint);
}
.gb-dv-img img{ width:100%; height:100%; object-fit:cover; }
.gb-dv-txt{ flex:1; min-width:0; }
.gb-dv-txt b{
display:block; font-size:12.5px; font-weight:700; color:var(--gb-ink); line-height:1.4;
}
.gb-dv-txt em{
display:block; font-style:normal; font-size:10.5px; font-weight:600;
color:var(--gb-blue-deep); margin:2px 0 1px;
}
.gb-dv-txt span{ font-size:10.5px; color:var(--gb-gray); font-weight:500; }
.gb-dv-track{
flex:none; width:auto !important;
background:var(--gb-white); border:1px solid var(--gb-blue-soft);
border-radius:var(--gb-r-pill); padding:9px 13px;
font-size:11.5px; font-weight:700; color:var(--gb-blue-deep); white-space:nowrap;
}
.gb-dv-gauge{ margin-top:13px; }
.gb-dv-gauge-bar{
height:6px; border-radius:99px; background:var(--gb-blue-tint);
overflow:hidden; margin-bottom:7px;
}
.gb-dv-gauge-bar i{
display:block; height:100%; border-radius:99px;
background:linear-gradient(90deg,#6FAFEF,var(--gb-blue));
}
.gb-dv-gauge-steps{ display:flex; justify-content:space-between; }
.gb-dv-gauge-steps span{
font-size:9.5px; font-weight:600; color:var(--gb-gray);
}
.gb-dv-gauge-steps span.is-on{ color:var(--gb-blue-deep); font-weight:800; }
/* 박스함 열기 버튼 */
.gb-boxopen-btn{
width:auto !important; border:0; border-radius:var(--gb-r-pill);
background:var(--gb-pink); color:#fff;
font-size:12.5px; font-weight:800; padding:9px 16px;
box-shadow:0 3px 10px rgba(217,0,107,.28); white-space:nowrap;
}
.gb-store-allcheck .text-secondary{ font-size:11px; color:var(--gb-gray) !important; }
.gb-store-allcheck .text-secondary b{ color:var(--gb-pink-deep); }
/* 원본 tf-check-rounded 의 ::before/::after 원이 체크 위에 겹쳐 그려진다 */
.page-mypage-myproduct .list-payment-card input[name="ubs_idx"]::before,
.page-mypage-myproduct .list-payment-card input[name="ubs_idx"]::after,
.page-mypage-mysafe .list-payment-card input[name="ubs_idx"]::before,
.page-mypage-mysafe .list-payment-card input[name="ubs_idx"]::after{
display:none !important; content:none !important;
}
/* 금고함: 탭 밑줄·아이콘도 보라로 */
.page-mypage-mysafe .tab-product .nav-tab-item.active .nav-link::after,
.page-mypage-mygift .tab-product .nav-tab-item.active .nav-link::after{
background:var(--gb-purple) !important;
}
.page-mypage-mysafe .tab-product .nav-tab-item.active .nav-link::before,
.page-mypage-mygift .tab-product .nav-tab-item.active .nav-link::before{
filter:brightness(0) saturate(100%) invert(32%) sepia(61%) saturate(2800%) hue-rotate(243deg) !important;
}
.page-mypage-mydelivery .tab-product .nav-tab-item.active .nav-link::after{
background:var(--gb-blue) !important;
}
.page-mypage-mydelivery .tab-product .nav-tab-item.active .nav-link::before{
filter:brightness(0) saturate(100%) invert(38%) sepia(74%) saturate(1500%) hue-rotate(192deg) !important;
}
/* (배지 제거로 이 규칙은 필요 없어짐) */
/* ── 44. 배송신청 2단계 (시안) ────────────────────────────── */
.gb-dvstep{
display:flex; align-items:center; justify-content:center; gap:10px;
margin:4px 0 16px;
}
.gb-dvstep-item{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.gb-dvstep-dot{
width:26px; height:26px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:var(--gb-line); color:var(--gb-gray);
font-size:12px; font-weight:800;
}
.gb-dvstep-item em{
font-style:normal; font-size:10.5px; font-weight:600; color:var(--gb-gray);
white-space:nowrap;
}
.gb-dvstep-item.is-on .gb-dvstep-dot{ background:var(--gb-pink); color:#fff; }
.gb-dvstep-item.is-on em{ color:var(--gb-pink-deep); font-weight:800; }
.gb-dvstep-item.is-done .gb-dvstep-dot{
background:var(--gb-pink-tint); color:var(--gb-pink-deep);
}
.gb-dvstep-line{
width:56px; height:1.5px; background:var(--gb-line); margin-bottom:16px;
}
/* 상품 요약 */
.gb-dvsum{
background:var(--gb-white); border-radius:var(--gb-r-card);
box-shadow:var(--gb-shadow); padding:14px 16px; margin-bottom:10px;
}
.gb-dvsum-head{ margin-bottom:10px; }
.gb-dvsum-head b{ font-size:13.5px; font-weight:800; color:var(--gb-ink); }
.gb-dvsum-head i{
font-style:normal; color:var(--gb-pink-deep); font-weight:900; margin-left:4px;
}
.gb-dvsum-thumbs{ display:flex; gap:8px; margin-bottom:10px; }
.gb-dvsum-thumb{
width:56px; height:56px; border-radius:12px; overflow:hidden;
background:var(--gb-pink-tint); flex:none;
display:flex; align-items:center; justify-content:center;
}
.gb-dvsum-thumb img{ width:100%; height:100%; object-fit:cover; }
.gb-dvsum-more{ font-size:13px; font-weight:800; color:var(--gb-ink-2); }
.gb-dvsum-amount{ font-size:12px; color:var(--gb-ink-2); font-weight:600; }
.gb-dvsum-amount b{ color:var(--gb-ink); font-weight:900; }
/* 배송 게이지 */
.gb-dvgauge{
background:var(--gb-white); border-radius:var(--gb-r-card);
box-shadow:var(--gb-shadow); padding:14px 16px; margin-bottom:10px;
}
.gb-dvgauge-head{
display:flex; align-items:center; justify-content:space-between; margin-bottom:9px;
}
.gb-dvgauge-head b{ font-size:13.5px; font-weight:800; color:var(--gb-ink); }
.gb-dvgauge-head span{ font-size:12px; font-weight:600; color:var(--gb-gray); }
.gb-dvgauge-head em{
font-style:normal; font-size:16px; font-weight:900; color:var(--gb-pink-deep);
}
.gb-dvgauge-bar{
height:8px; border-radius:99px; background:var(--gb-pink-tint);
overflow:hidden; margin-bottom:8px;
}
.gb-dvgauge-bar i{
display:block; height:100%; border-radius:99px;
background:linear-gradient(90deg,#FF6FB2,var(--gb-pink));
}
.gb-dvgauge p{
margin:0 !important; font-size:10.5px !important; color:var(--gb-gray) !important;
}
.gb-dvgauge p b{ color:var(--gb-pink-deep); }
/* 배송지 확인 카드 (2단계) */
.gb-dvaddr{
background:var(--gb-white); border:1px solid var(--gb-pink-soft);
border-radius:16px; padding:14px 16px;
}
.gb-dvaddr-head{
display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
}
.gb-dvaddr-head b{ font-size:13.5px; font-weight:800; color:var(--gb-ink); }
.gb-dvaddr-change{
width:auto !important; background:none; border:0; padding:0;
font-size:12px; font-weight:700; color:var(--gb-pink-deep);
}
.gb-dvaddr-body{
font-size:12.5px; color:var(--gb-ink-2); line-height:1.7;
}
.gb-dvaddr-body b{ color:var(--gb-ink); font-weight:800; }
/* 최종 배송비 강조 (시안) */
.gb-dvfinal{
background:var(--gb-pink-tint); border-radius:14px;
padding:14px 16px; margin-bottom:14px;
}
.gb-dvfinal-row{
display:flex; align-items:center; justify-content:space-between; margin-bottom:3px;
}
.gb-dvfinal-row b{ font-size:14px; font-weight:800; color:var(--gb-ink); }
.gb-dvfinal-row strong{ font-size:19px; font-weight:900; color:var(--gb-pink-deep); }
.gb-dvfinal p{ margin:0 !important; font-size:10.5px !important; color:var(--gb-gray) !important; }
/* ── 45. 박스함 묶음 카드 (box-open 시안) ─────────────────── */
.gb-store-sub{
margin:3px 0 0 !important; font-size:11.5px !important;
color:var(--gb-gray) !important; font-weight:500 !important;
}
.gb-boxgroup-list{ margin-top:12px; }
.gb-boxgroup{
display:flex; align-items:center; gap:14px;
background:var(--gb-white); border-radius:var(--gb-r-card);
box-shadow:var(--gb-shadow); padding:18px 16px; margin-bottom:10px;
}
.gb-boxgroup-img{
width:88px; height:88px; flex:none;
display:flex; align-items:center; justify-content:center;
}
.gb-boxgroup-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.gb-boxgroup-txt{ flex:1; min-width:0; }
.gb-boxgroup-txt b{ display:block; font-size:15.5px; font-weight:800; color:var(--gb-ink); margin-bottom:3px; }
.gb-boxgroup-txt em{ display:block; font-style:normal; font-size:10.5px; font-weight:600; color:var(--gb-gray); }
.gb-boxgroup-txt strong{ font-size:19px; font-weight:900; color:var(--gb-pink-deep); }
.gb-boxgroup-open{
flex:none; width:auto !important;
background:var(--gb-white); border:1.5px solid var(--gb-pink);
border-radius:var(--gb-r-pill); padding:11px 14px;
font-size:12px; font-weight:800; color:var(--gb-pink-deep); white-space:nowrap;
}
.gb-boxgroup-buy{
display:block; text-align:center; margin-top:6px;
background:var(--gb-pink); color:#fff !important; border-radius:var(--gb-r-pill);
padding:14px; font-size:14px !important; font-weight:800 !important;
box-shadow:0 4px 14px rgba(217,0,107,.3);
}
/* 수량 선택 시트 */
.gb-sheet-dialog{ max-width:340px; margin:auto; }
.gb-sheet{
border:0 !important; border-radius:22px !important;
padding:22px 18px 18px !important; position:relative;
background:var(--gb-white) !important;
}
.gb-sheet-close{ position:absolute; top:14px; right:14px; }
.gb-sheet-boxrow{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.gb-sheet-boxrow img{ width:64px; height:64px; object-fit:contain; flex:none; }
.gb-sheet-boxtxt b{ display:block; font-size:16px; font-weight:900; color:var(--gb-ink); }
.gb-sheet-boxtxt span{ font-size:12px; color:var(--gb-ink-2); font-weight:600; }
.gb-sheet-boxtxt strong{ color:var(--gb-pink-deep); font-weight:900; }
.gb-sheet-q{ font-size:14.5px; font-weight:800; color:var(--gb-ink); margin-bottom:9px; }
.gb-sheet-stepper{
display:flex; align-items:center; gap:8px; margin-bottom:9px;
}
.gb-sheet-stepper button{
flex:0 0 46px; width:46px !important; height:46px;
border:1px solid var(--gb-line); border-radius:14px;
background:var(--gb-pink-tint); color:var(--gb-pink-deep);
font-size:20px; font-weight:800;
}
.gb-sheet-stepper input{
flex:1; min-width:0; height:46px; text-align:center;
border:1px solid var(--gb-line) !important; border-radius:14px !important;
font-size:17px !important; font-weight:900 !important; color:var(--gb-ink) !important;
background:var(--gb-white) !important;
}
.gb-sheet-chips{ display:flex; gap:6px; margin-bottom:8px; }
.gb-sheet-chips button{
flex:1; border:1px solid var(--gb-line); background:var(--gb-white);
border-radius:var(--gb-r-pill); padding:9px 2px;
font-size:11.5px; font-weight:700; color:var(--gb-ink-2); white-space:nowrap;
}
.gb-sheet-chips button:last-child{
background:var(--gb-pink-tint); color:var(--gb-pink-deep); border-color:var(--gb-pink-soft);
}
.gb-sheet-hint{
margin:0 0 12px !important; font-size:10.5px !important; color:var(--gb-gray) !important;
}
.gb-sheet-agree{
display:flex; align-items:center; gap:8px;
font-size:11.5px !important; font-weight:600 !important; color:var(--gb-ink-2) !important;
margin-bottom:14px !important;
}
.gb-sheet-agree input{ width:18px; height:18px; margin:0; accent-color:var(--gb-pink); flex:none; }
.gb-sheet-openbtn{
width:100%; border:0; border-radius:var(--gb-r-pill);
background:linear-gradient(120deg,#FF6FB2,#FF2E8F); color:#fff;
font-size:15px; font-weight:900; padding:15px;
box-shadow:0 6px 18px rgba(217,0,107,.35);
}
/* ── 46. 공용 드롭다운 (기본 select 팝업 대체) ────────────── */
.gb-dd{ position:relative; }
.gb-dd-btn{
width:auto !important;
background:var(--gb-white) !important;
border:1px solid var(--gb-line) !important;
border-radius:var(--gb-r-pill) !important;
font-size:12px !important; font-weight:700 !important; color:var(--gb-ink) !important;
padding:8px 28px 8px 13px !important; white-space:nowrap;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5A63' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
background-repeat:no-repeat !important;
background-position:right 10px center !important;
background-size:12px !important;
}
.gb-dd.is-open .gb-dd-btn{ border-color:var(--gb-pink) !important; }
.gb-dd-menu{
display:none;
position:absolute; top:calc(100% + 6px); right:0; z-index:1300;
min-width:132px;
background:var(--gb-white); border:1px solid var(--gb-line);
border-radius:14px; padding:5px;
box-shadow:0 10px 30px rgba(35,21,28,.14);
}
.gb-dd.is-open .gb-dd-menu{ display:block; animation:gbDdIn .14s ease; }
@keyframes gbDdIn{ from{ transform:translateY(-4px); opacity:0; } to{ transform:none; opacity:1; } }
.gb-dd-menu button{
display:block; width:100%; text-align:left;
background:none; border:0; border-radius:10px;
font-size:12.5px; font-weight:600; color:var(--gb-ink-2);
padding:9px 11px; white-space:nowrap;
}
.gb-dd-menu button.is-on{
background:var(--gb-pink-tint); color:var(--gb-pink-deep); font-weight:800;
}
/* 보라 탭에서는 선택색도 보라 */
.page-mypage-mysafe .gb-dd-menu button.is-on,
.page-mypage-mygift .gb-dd-menu button.is-on{
background:var(--gb-purple-tint); color:var(--gb-purple-deep);
}
.page-mypage-mysafe .gb-dd.is-open .gb-dd-btn,
.page-mypage-mygift .gb-dd.is-open .gb-dd-btn{ border-color:var(--gb-purple) !important; }
/* ── 47. 홈: 흰 카드 목록 사이 간격 촘촘하게 ─────────────── */
.page-home-main .vouchers-card{ margin-bottom:8px !important; }
.page-home-main .vouchers-card .content-top{ padding-bottom:2px !important; }
.page-home-main .vouchers-card .content-bottom{ padding-top:2px !important; }
/* 금고함에서 고른 카드 테두리는 보라로 */
.page-mypage-mysafe .list-payment-card .proof-item:has(input[name="ubs_idx"]:checked){
border-color:var(--gb-purple) !important;
}
/* ── 48. 흰 배경 화면 (시안: 보관함·굿뉴스는 흰 바탕) ─────── */
/* 분홍 바탕과 반짝이는 홈·구매 쪽만 남기고, 목록 화면은 깔끔한 흰색 */
body:has(.page-mypage-mybox) .wrap.goodbox-wrap,
body:has(.page-mypage-myproduct) .wrap.goodbox-wrap,
body:has(.page-mypage-mydelivery) .wrap.goodbox-wrap,
body:has(.page-community-newsroom) .wrap.goodbox-wrap{
background:#FFFFFF !important;
background-image:none !important;
}
body:has(.page-mypage-mybox),
body:has(.page-mypage-myproduct),
body:has(.page-mypage-mydelivery),
body:has(.page-community-newsroom){
background:#FFFFFF !important;
}
/* 흰 바탕에서는 흰 카드가 묻히므로 옅은 테두리로 구분한다 */
body:has(.page-mypage-myproduct) .list-payment-card .proof-item,
body:has(.page-mypage-mydelivery) .gb-dv-card,
body:has(.page-community-newsroom) .gb-news-row,
body:has(.page-community-newsroom) .gb-top10-list,
body:has(.page-mypage-mygift) .gb-gift-card{
border:1px solid #F1E7EC !important;
box-shadow:0 1px 6px rgba(35,21,28,.05) !important;
}
/* 금고함 카드는 원래 보라 테두리가 있어 그대로 둔다 */
/* ── 49. 홈: 목록 카드 사이 거의 붙이기 ───────────────────── */
.page-home-main .tf-container.mt-3{ margin-top:0 !important; }
.page-home-main .vouchers-card{ margin-bottom:5px !important; }
.page-home-main .vouchers-card .content-top{ margin-bottom:2px !important; }
/* ── 50. 상품 상세 팝업: 가격 줄이기 ─────────────────────── */
.page-shop-product-detail .price-send input{
font-size:16px !important; font-weight:800 !important;
padding:10px 12px !important; text-align:left !important;
}
/* 체크가 카드 밖에 떨어져 보였다 — 카드는 proof-item 하나로 통일하고
안쪽 label 의 카드 흉내(흰 배경·테두리)는 끈다 */
.page-mypage-myproduct .list-payment-card .proof-item{
background:var(--gb-white) !important;
padding:12px 14px !important;
}
.page-mypage-myproduct .list-payment-card .proof-item > label{
background:none !important; border:0 !important;
box-shadow:none !important; border-radius:0 !important;
padding:0 !important; margin:0 !important;
}
/* 선택 표시는 안쪽 조각이 아니라 카드 전체에 */
.page-mypage-myproduct .list-payment-card .proof-item:has(input[name="ubs_idx"]:checked){
border-color:var(--gb-pink) !important;
background:var(--gb-pink-tint) !important;
}
.page-mypage-myproduct .proof-item .bg-theme-1-subtle,
.page-mypage-myproduct .proof-item .theme-green{
background:none !important;
}
/* 금고함은 공용 흰 카드 규칙보다 뒤에서 보라를 다시 확정한다 */
body:has(.page-mypage-mysafe) .list-payment-card .proof-item{
background:var(--gb-purple-tint) !important;
border:1px solid var(--gb-purple-soft) !important;
box-shadow:none !important;
padding:12px 14px !important;
}
body:has(.page-mypage-mysafe) .list-payment-card .proof-item > label{
background:none !important; border:0 !important;
box-shadow:none !important; padding:0 !important; margin:0 !important;
}
body:has(.page-mypage-mysafe) .list-payment-card .proof-item:has(input[name="ubs_idx"]:checked){
border-color:var(--gb-purple) !important;
}
/* 금고함도 흰 바탕 */
body:has(.page-mypage-mysafe) .wrap.goodbox-wrap,
body:has(.page-mypage-mysafe){
background:#FFFFFF !important; background-image:none !important;
}
/* 예전에 넣어둔 13px 규칙(.vouchers-card.mb-10)이 더 세서 안 줄었다 — 같은 강도로 덮는다 */
.page-home-main .vouchers-card.mb-10,
.page-home-main .vouchers-card{ margin-bottom:10px !important; }
/* ── 51. 홈 카드: 최대한 붙이기 + 안쪽 위아래도 죄기 ─────── */
/* 섹션(세로) 간격은 오히려 조금 여유 있게 — 위의 10px 규칙이 최종 */
.page-home-main .vouchers-card{ padding-top:8px !important; padding-bottom:8px !important; }
/* ── 52. 흰 배경 화면의 상단(헤더)도 흰색으로 ─────────────── */
body:has(.page-mypage-mybox) .header-container .header-2,
body:has(.page-mypage-myproduct) .header-container .header-2,
body:has(.page-mypage-mydelivery) .header-container .header-2,
body:has(.page-community-newsroom) .header-container .header-2,
body:has(.page-event) .header-container .header-2,
body:has(.page-event-detail) .header-container .header-2,
body:has(.page-mypage-myaddress) .header-container .header-2{
background:#FFFFFF !important;
border-bottom:1px solid #F3EBEF;
}
body:has(.page-mypage-mybox) .header-container,
body:has(.page-mypage-myproduct) .header-container,
body:has(.page-mypage-mydelivery) .header-container,
body:has(.page-community-newsroom) .header-container,
body:has(.page-event) .header-container,
body:has(.page-event-detail) .header-container,
body:has(.page-mypage-myaddress) .header-container{
background:#FFFFFF !important;
}
/* 이벤트·배송지관리도 흰 바탕 */
body:has(.page-event) .wrap.goodbox-wrap, body:has(.page-event),
body:has(.page-event-detail) .wrap.goodbox-wrap, body:has(.page-event-detail),
body:has(.page-mypage-myaddress) .wrap.goodbox-wrap, body:has(.page-mypage-myaddress){
background:#FFFFFF !important; background-image:none !important;
}
/* ── 53. 선물함 포인트색: 보라 → 초록 ─────────────────────── */
:root{
--gb-green: #1FA96B;
--gb-green-deep: #0E7F4E;
--gb-green-tint: #EAF8F1;
--gb-green-soft: #C4EAD7;
}
.page-mypage-mygift .tab-product .nav-tab-item.active .nav-link{ color:var(--gb-green-deep) !important; }
.page-mypage-mygift .tab-product .nav-tab-item.active .nav-link::after{ background:var(--gb-green) !important; }
.page-mypage-mygift .tab-product .nav-tab-item.active .nav-link::before{
filter:brightness(0) saturate(100%) invert(45%) sepia(69%) saturate(500%) hue-rotate(110deg) brightness(93%) !important;
}
.page-mypage-mygift .gb-store-title b{ color:var(--gb-green-deep) !important; }
.gb-gift-seg{ border-color:var(--gb-green-soft) !important; }
.gb-gift-segbtn.is-on{ background:var(--gb-green) !important; }
.gb-gift-avatar{ background:var(--gb-green-tint) !important; color:var(--gb-green-deep) !important; }
.gb-gift-status.is-wait{ background:var(--gb-green-tint) !important; color:var(--gb-green-deep) !important; }
.gb-gift-product{ background:var(--gb-green-tint) !important; }
.gb-gift-product-txt strong{ color:var(--gb-green-deep) !important; }
.gb-gift-btn--main{
background:var(--gb-green) !important; border-color:var(--gb-green) !important;
box-shadow:0 3px 10px rgba(31,169,107,.3) !important;
}
.page-mypage-mygift .gb-dd-menu button.is-on{
background:var(--gb-green-tint) !important; color:var(--gb-green-deep) !important;
}
.page-mypage-mygift .gb-dd.is-open .gb-dd-btn{ border-color:var(--gb-green) !important; }
/* 선물함도 흰 바탕 */
body:has(.page-mypage-mygift) .wrap.goodbox-wrap, body:has(.page-mypage-mygift){
background:#FFFFFF !important; background-image:none !important;
}
body:has(.page-mypage-mygift) .header-container,
body:has(.page-mypage-mygift) .header-container .header-2{
background:#FFFFFF !important;
}
body:has(.page-mypage-mysafe) .header-container,
body:has(.page-mypage-mysafe) .header-container .header-2{
background:#FFFFFF !important;
}
/* ── 54. 수량·포인트 스텝퍼 통일 (박스구매) ───────────────
+/- 가 삐져나오고 숫자칸만 비정상적으로 넓던 것 정리 */
.page-shop-box .box-quantity .input-group,
.page-shop-box .input-group:has(#quantity),
.page-shop-box .input-group:has(#add_point){
display:flex !important; flex-wrap:nowrap !important; align-items:stretch;
gap:8px; width:100% !important;
background:none !important; border:0 !important; border-radius:0 !important;
overflow:visible !important; padding:0 !important;
}
.page-shop-box .input-group:has(#quantity) .btn,
.page-shop-box .input-group:has(#add_point) .btn{
flex:0 0 52px !important; width:52px !important; height:52px !important;
border-radius:16px !important; border:0 !important;
background:var(--gb-pink-tint) !important; color:var(--gb-pink-deep) !important;
font-size:22px !important; font-weight:800 !important;
box-shadow:none !important; padding:0 !important; margin:0 !important;
display:flex; align-items:center; justify-content:center;
}
.page-shop-box .input-group:has(#quantity) input,
.page-shop-box .input-group:has(#add_point) input{
flex:1 1 auto !important; width:auto !important; min-width:0;
height:52px !important;
border:1px solid var(--gb-line) !important; border-radius:16px !important;
background:var(--gb-white) !important;
text-align:center !important;
font-size:17px !important; font-weight:900 !important; color:var(--gb-ink) !important;
box-shadow:none !important; margin:0 !important;
}
/* ── 55. 박스함 시트 열기 버튼: 요란한 그라데이션 → 단색 ─── */
.gb-sheet-openbtn{
background:var(--gb-pink) !important;
box-shadow:none !important;
}
/* ── 56. 박스구매: 연한 분홍 배경 + 헤더 통일 + 인사말 배경판 ── */
body:has(.page-shop-box) .wrap.goodbox-wrap,
body:has(.page-shop-box){
background:#FFF5F9 !important; background-image:none !important;
}
body:has(.page-shop-box) .header-container,
body:has(.page-shop-box) .header-container .header-2{
background:#FFF5F9 !important; box-shadow:none !important;
}
/* 인사말 — 글자만 있던 것을 장식 배경판 위에 얹는다 (마스킹테이프+반짝이) */
.gb-shop-hello{
position:relative;
background:linear-gradient(135deg,#FFE9F3 0%,#FFDCEC 60%,#FFD3E7 100%);
border-radius:20px;
padding:26px 18px 24px;
margin:2px 0 14px;
text-align:center;
overflow:hidden;
box-shadow:0 4px 16px rgba(217,0,107,.08);
}
.gb-shop-hello::before{
content:''; position:absolute; top:-8px; left:18px;
width:64px; height:20px; transform:rotate(-8deg);
background:rgba(255,255,255,.55); border-radius:3px;
}
.gb-shop-hello::after{
content:''; position:absolute; inset:0;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M12 0 Q13 11 24 12 Q13 13 12 24 Q11 13 0 12 Q11 11 12 0 Z' transform='translate(8,14) scale(0.7)' opacity='0.9'/%3E%3Cpath d='M12 0 Q13 11 24 12 Q13 13 12 24 Q11 13 0 12 Q11 11 12 0 Z' transform='translate(108,20) scale(0.5)' opacity='0.85'/%3E%3Cpath d='M12 0 Q13 11 24 12 Q13 13 12 24 Q11 13 0 12 Q11 11 12 0 Z' transform='translate(64,96) scale(0.4)' opacity='0.7'/%3E%3Cpath d='M12 0 Q13 11 24 12 Q13 13 12 24 Q11 13 0 12 Q11 11 12 0 Z' transform='translate(118,104) scale(0.62)' opacity='0.8'/%3E%3C/g%3E%3C/svg%3E");
pointer-events:none;
}
.gb-shop-hello h2{
position:relative; z-index:1;
font-size:21px !important; font-weight:900 !important; line-height:1.4 !important;
color:var(--gb-ink) !important; margin:0 !important; letter-spacing:-.4px;
}
.gb-shop-hello h2 em{ font-style:normal; color:var(--gb-pink-deep); }
/* ── 57. 멤버십 실버 카드 (에셋 배경) ─────────────────────── */
/* 카드 배경 — 힉스필드로 생성한 은메달 에셋 (44KB) */
.gb-ms-card{
background:url('/assets/images/kitsch/membership-silver.jpg') no-repeat center right / cover !important;
border:1px solid #D9E1EA !important;
}
.gb-ms-label{ color:#7C8CA0 !important; }
.gb-ms-level{ color:#4A5A70 !important; }
.gb-ms-hello{ color:#5B6B80 !important; }
.gb-ms-benefit{ border-color:#CBD6E2 !important; color:#4A5A70 !important; }
.gb-ms-progress-head{ color:#5B6B80 !important; }
.gb-ms-progress-head b{ color:#4A5A70 !important; }
.gb-ms-bar{ background:#E3E9F1 !important; }
.gb-ms-bar i{ background:linear-gradient(90deg,#B9C6D6,#8FA2B8) !important; }
/* 메달은 배경 에셋에 포함되어 있어 자리만 비운다 */
.gb-ms-medal{ display:none; }
/* 배경 그림 위 글자가 묻히지 않게 왼쪽만 살짝 밝힌다 */
.gb-ms-left{ position:relative; z-index:1; }
.gb-ms-card::before{
content:''; position:absolute; inset:0;
background:linear-gradient(90deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.35) 55%, rgba(255,255,255,0) 100%);
border-radius:inherit;
}
.gb-ms-progress{ position:relative; z-index:1; }
.gb-ms-progress-foot{
margin:7px 0 0 !important; font-size:10px !important; color:#7C8CA0 !important;
}
/* ── 58. 이벤트 페이지 ────────────────────────────────────── */
.gb-ev-sec-title{
font-size:14.5px; font-weight:800; color:var(--gb-ink);
margin:4px 2px 10px;
}
.page-event .notifications-item{
border:1px solid #F1E7EC !important; border-radius:var(--gb-r-card) !important;
box-shadow:0 1px 6px rgba(35,21,28,.05) !important;
margin-bottom:8px !important;
}
.gb-ev-soon{
display:flex; align-items:center; gap:12px;
background:#FAFAFC; border:1px dashed #E3DDE2;
border-radius:var(--gb-r-card); padding:14px 16px; margin-bottom:8px;
}
.gb-ev-soon-ico{ font-size:26px; flex:none; }
.gb-ev-soon-txt b{ display:block; font-size:13px; font-weight:800; color:var(--gb-ink); margin-bottom:2px; }
.gb-ev-soon-txt p{ margin:0 !important; font-size:11.5px !important; color:var(--gb-gray) !important; }
/* 페이백 위크 상세 — 흰 바탕 + 정돈 */
.page-event-detail .top-page-send-request{
background:none !important; margin-bottom:0 !important;
}
.page-event-detail .content .product-image img{
border-radius:16px !important; border:1px solid #F1E7EC !important;
}
.page-event-detail .name-send{
font-size:16px !important; font-weight:800 !important; color:var(--gb-ink) !important;
margin:12px 0 2px !important;
}
.page-event-detail .name-send .number-card{ font-size:16px !important; font-weight:800 !important; }
.page-event-detail .text.text-medium{
font-size:12px !important; color:var(--gb-gray) !important;
}
.page-event-detail .company-list-item{
background:#FFFFFF !important; border:1px solid #F1E7EC !important;
border-radius:14px !important; box-shadow:none !important;
}
/* ── 59. 배송지 관리 (시안) ──────────────────────────────── */
.gb-addr-card{
background:#FFFFFF; border:1px solid #F1E7EC; border-radius:var(--gb-r-card);
padding:14px 16px; margin-bottom:10px;
box-shadow:0 1px 6px rgba(35,21,28,.05);
}
.gb-addr-card.is-default{ border:1.5px solid var(--gb-pink); }
.gb-addr-head{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.gb-addr-badge{
font-size:10px; font-weight:800; color:var(--gb-pink-deep);
background:var(--gb-pink-tint); border:1px solid var(--gb-pink-soft);
border-radius:var(--gb-r-pill); padding:3px 9px; line-height:1;
}
.gb-addr-title{ font-size:14.5px; font-weight:800; color:var(--gb-ink); }
.gb-addr-body p{ margin:0 0 3px !important; font-size:12.5px !important; color:var(--gb-ink-2) !important; line-height:1.5 !important; }
.gb-addr-who b{ color:var(--gb-ink); font-weight:800; }
.gb-addr-zip{ color:var(--gb-pink-deep) !important; font-weight:700 !important; font-size:11.5px !important; }
.gb-addr-memo{ font-size:11.5px !important; color:var(--gb-gray) !important; }
.gb-addr-memo em{ font-style:normal; color:var(--gb-pink-deep); font-weight:600; }
.gb-addr-btns{
display:flex; justify-content:flex-end; gap:6px;
border-top:1px solid #F6EEF2; margin-top:10px; padding-top:10px;
}
.gb-addr-btn{
width:auto !important; background:#FFFFFF; border:1px solid #EDE4E9;
border-radius:var(--gb-r-pill); padding:8px 14px;
font-size:11.5px; font-weight:700; color:var(--gb-ink-2);
}
.gb-addr-add{
width:100%; border:0; border-radius:var(--gb-r-pill);
background:var(--gb-pink); color:#fff;
font-size:14.5px; font-weight:800; padding:15px;
box-shadow:0 4px 14px rgba(217,0,107,.25); margin-top:6px;
}
.gb-addr-empty{ text-align:center; padding:52px 20px 30px; }
.gb-addr-empty-ico{ font-size:44px; display:block; margin-bottom:12px; }
.gb-addr-empty b{ display:block; font-size:15px; font-weight:800; color:var(--gb-ink); margin-bottom:6px; }
.gb-addr-empty p{ margin:0 !important; font-size:12.5px !important; color:var(--gb-gray) !important; line-height:1.6 !important; }
/* 추가/수정 폼 */
.gb-addr-field{ margin-bottom:11px; }
.gb-addr-field label{
display:block; font-size:11.5px !important; font-weight:800 !important;
color:var(--gb-ink) !important; margin:0 0 5px 2px !important;
}
.gb-addr-field input{
width:100%; border:1px solid var(--gb-line) !important; border-radius:12px !important;
background:var(--gb-white) !important; padding:12px 13px !important;
font-size:13.5px !important; font-weight:500 !important; color:var(--gb-ink) !important;
box-shadow:none !important;
}
.gb-addr-ziprow{ display:flex; gap:8px; }
.gb-addr-ziprow input{ flex:1; min-width:0; }
.gb-addr-zipbtn{
flex:none; width:auto !important; border:0; border-radius:12px;
background:var(--gb-pink); color:#fff;
font-size:12px; font-weight:700; padding:0 14px; white-space:nowrap;
}
.gb-addr-memochips{ display:flex; gap:6px; flex-wrap:wrap; }
.gb-addr-memochips button{
width:auto !important; border:1px solid var(--gb-line); background:var(--gb-white);
border-radius:var(--gb-r-pill); padding:8px 11px;
font-size:11px; font-weight:600; color:var(--gb-ink-2); white-space:nowrap;
}
.gb-addr-memochips button.is-on{
background:var(--gb-pink-tint); border-color:var(--gb-pink-soft); color:var(--gb-pink-deep);
font-weight:800;
}
.gb-addr-default{
display:flex; align-items:center; justify-content:space-between;
font-size:13px !important; font-weight:700 !important; color:var(--gb-ink) !important;
margin:4px 2px 16px !important;
}
.gb-addr-default input{ width:20px; height:20px; accent-color:var(--gb-pink); margin:0; }
/* ── 60. 멤버십 안내 페이지 ──────────────────────────────── */
body:has(.page-mypage-membership) .wrap.goodbox-wrap,
body:has(.page-mypage-membership),
body:has(.page-mypage-membership) .header-container,
body:has(.page-mypage-membership) .header-container .header-2{
background:#FFFFFF !important; background-image:none !important;
}
.gb-msb-intro{
font-size:13px !important; color:var(--gb-ink-2) !important; line-height:1.65 !important;
margin:4px 2px 14px !important;
}
.gb-msb-intro b{ color:var(--gb-pink-deep); font-weight:800; }
.gb-msb-card{
position:relative; border-radius:var(--gb-r-card);
background-size:cover; background-position:center right;
padding:22px 18px; margin-bottom:0;
border:1px solid #EDE4E9;
box-shadow:0 4px 14px rgba(35,21,28,.07);
}
.gb-msb-card::before{
content:''; position:absolute; inset:0; border-radius:inherit;
background:linear-gradient(90deg, rgba(255,255,255,.7), rgba(255,255,255,0) 70%);
}
.gb-msb-card--black::before{
background:linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,0) 70%);
}
.gb-msb-card em{
position:relative; display:block; font-style:normal;
font-size:9.5px; font-weight:800; letter-spacing:.14em; color:#8A97A8;
}
.gb-msb-card b{
position:relative; display:block;
font-size:25px; font-weight:900; letter-spacing:-.4px; color:#4A5A70;
margin:1px 0 3px;
}
.gb-msb-card span{
position:relative; font-size:11px; font-weight:600; color:#66788D;
}
.gb-msb-card--black em{ color:#C9B8D8; }
.gb-msb-card--black b{ color:#FFFFFF; }
.gb-msb-card--black span{ color:#D8CCE4; }
.gb-msb-body{
border:1px solid #F1E7EC; border-top:0;
border-radius:0 0 var(--gb-r-card) var(--gb-r-card);
padding:14px 16px 6px; margin:-6px 6px 14px;
background:#FFFFFF;
}
.gb-msb-group{ margin-bottom:12px; }
.gb-msb-group h6{
font-size:12px !important; font-weight:800 !important; color:var(--gb-pink-deep) !important;
margin:0 0 6px !important;
}
.gb-msb-group ul{ list-style:none; margin:0; padding:0; }
.gb-msb-group li{
position:relative; padding-left:12px; margin-bottom:4px;
font-size:12.5px; color:var(--gb-ink-2); line-height:1.55;
}
.gb-msb-group li::before{
content:''; position:absolute; left:2px; top:8px;
width:4px; height:4px; border-radius:50%; background:var(--gb-pink-mid);
}
.gb-msb-group li b{ color:var(--gb-ink); font-weight:800; }
.gb-msb-warn{ color:#C2415B !important; font-weight:600; }
.gb-msb-friday{
background:#23151C; border-radius:var(--gb-r-card);
padding:18px 16px; margin-bottom:14px;
}
.gb-msb-friday b{ display:block; font-size:15px; font-weight:900; color:#fff; margin-bottom:4px; }
.gb-msb-friday p{ margin:0 0 12px !important; font-size:11.5px !important; color:#C9B8C2 !important; }
.gb-msb-friday-row{
display:flex; align-items:center; justify-content:space-between;
padding:9px 0; border-top:1px solid rgba(255,255,255,.09);
}
.gb-msb-friday-row span{ font-size:12px; font-weight:800; color:#FF8FBE; }
.gb-msb-friday-row em{ font-style:normal; font-size:12.5px; font-weight:700; color:#fff; }
.gb-msb-note{
background:#FAFAFC; border:1px solid #EFEAEE; border-radius:var(--gb-r-card);
padding:14px 16px 6px; margin-bottom:16px;
}
.gb-msb-note h6{
font-size:12px !important; font-weight:800 !important; color:var(--gb-ink) !important;
margin:2px 0 6px !important;
}
.gb-msb-note ul{ list-style:none; margin:0 0 12px; padding:0; }
.gb-msb-note li{
position:relative; padding-left:11px; margin-bottom:3px;
font-size:11.5px; color:var(--gb-gray); line-height:1.6;
}
.gb-msb-note li::before{
content:''; position:absolute; left:1px; top:8px;
width:3px; height:3px; border-radius:50%; background:#C9BBC3;
}
.gb-msb-note li b{ color:var(--gb-ink-2); font-weight:700; }
.gb-msb-apply{
display:block; text-align:center;
background:var(--gb-pink); color:#fff !important; border-radius:var(--gb-r-pill);
padding:15px; font-size:14.5px !important; font-weight:800 !important;
box-shadow:0 4px 14px rgba(217,0,107,.25); margin-bottom:8px;
}
/* ── 61. 결제완료 (박스 구매) — 시안 ─────────────────────── */
body:has(.page-payment-end) .wrap.goodbox-wrap,
body:has(.page-payment-end){
background:#FFF5F9 !important; background-image:none !important;
}
body:has(.page-payment-end) .header-container,
body:has(.page-payment-end) .header-container .header-2{
background:#FFF5F9 !important; box-shadow:none !important;
}
.gb-pe-hero{
border-radius:22px; overflow:hidden; margin:4px 0 16px;
box-shadow:0 8px 26px rgba(217,0,107,.13);
}
.gb-pe-hero img{ width:100%; display:block; }
.gb-pe-title{
text-align:center; font-size:23px !important; font-weight:900 !important;
color:var(--gb-ink) !important; letter-spacing:-.4px; margin:0 0 5px !important;
}
.gb-pe-title em{ font-style:normal; color:var(--gb-pink-deep); }
.gb-pe-sub{
text-align:center; font-size:13.5px !important; font-weight:500 !important;
color:var(--gb-ink-2) !important; margin:0 0 16px !important;
}
.gb-pe-card{
background:var(--gb-white); border-radius:var(--gb-r-card);
box-shadow:var(--gb-shadow); padding:16px; margin-bottom:14px;
}
.gb-pe-card-head{
font-size:13.5px; font-weight:800; color:var(--gb-ink); margin-bottom:11px;
}
.gb-pe-box{
display:flex; align-items:center; gap:12px;
padding-bottom:12px; border-bottom:1px solid var(--gb-line); margin-bottom:11px;
}
.gb-pe-box img{ width:56px; height:56px; object-fit:contain; flex:none; }
.gb-pe-box-txt b{ display:block; font-size:15.5px; font-weight:800; color:var(--gb-ink); }
.gb-pe-box-txt span{ font-size:12px; font-weight:600; color:var(--gb-ink-2); }
.gb-pe-row{
display:flex; align-items:center; justify-content:space-between;
padding:5px 0;
}
.gb-pe-row span{ font-size:12.5px; font-weight:600; color:var(--gb-ink-2); }
.gb-pe-row em{ font-style:normal; font-size:13px; font-weight:700; color:var(--gb-ink); }
.gb-pe-row em.is-point{ color:var(--gb-pink-deep); font-weight:800; }
.gb-pe-row--total{
border-top:1px solid var(--gb-line); margin-top:5px; padding-top:10px;
}
.gb-pe-row--total span{ font-size:13.5px; font-weight:800; color:var(--gb-ink); }
.gb-pe-row--total em{ font-size:16px; font-weight:900; }
.gb-pe-open{
width:100%; border:0; border-radius:var(--gb-r-pill);
background:linear-gradient(120deg,#FF6FB2,#FF2E8F); color:#fff;
font-size:16px; font-weight:900; padding:16px;
box-shadow:0 6px 18px rgba(217,0,107,.32); margin-bottom:9px;
}
.gb-pe-storage{
display:block; text-align:center;
background:var(--gb-white); border:1.5px solid var(--gb-pink-soft);
border-radius:var(--gb-r-pill); padding:14px;
font-size:14px !important; font-weight:800 !important; color:var(--gb-pink-deep) !important;
margin-bottom:14px;
}
.gb-pe-note{
display:flex; align-items:flex-start; gap:9px;
background:var(--gb-white); border-radius:14px; padding:13px 14px;
border:1px solid var(--gb-line);
}
.gb-pe-note span{ flex:none; font-size:16px; }
.gb-pe-note p{
margin:0 !important; font-size:11.5px !important; color:var(--gb-gray) !important;
line-height:1.6 !important;
}
.gb-pe-note a{ color:var(--gb-pink-deep) !important; font-weight:700 !important; }
/* ── 62. 박스구매 수량 영역: 세로 배치 (숫자 잘림 해결) ────
총액 카드가 옆에 붙어 스텝퍼가 좁아지고 숫자가 세로로 꺾였다.
스텝퍼·칩은 전체 폭, '총 N개/예상 결제금액'은 아래 한 줄 카드로. */
.page-shop-box .box-quantity{
flex-direction:column !important; align-items:stretch !important; gap:10px;
}
.page-shop-box .box-quantity .company-item{ width:100%; }
.page-shop-box .box-quantity .company-item .text-right{ margin-top:8px; }
.page-shop-box .box-quantity .btn-group{ display:flex; gap:6px; }
.page-shop-box .box-quantity .btn-group .btn{ flex:1; }
/* 가로 배치는 줄이 꺾여 지저분했다 — 세 줄을 전부 가운데 정렬로 쌓는다 */
.page-shop-box .gb-shop-total{
display:flex; flex-direction:column; align-items:center; gap:2px;
background:var(--gb-pink-tint); border-radius:16px;
padding:14px 16px !important; text-align:center;
}
.page-shop-box .gb-shop-total-cnt{ font-size:12.5px; color:var(--gb-ink-2); font-weight:600; }
.page-shop-box .gb-shop-total-cnt b{ color:var(--gb-ink); font-weight:900; }
.page-shop-box .gb-shop-total-sum{
font-size:21px !important; font-weight:900 !important; color:var(--gb-pink-deep) !important;
}
.page-shop-box .gb-shop-total-lbl{
font-size:10.5px; color:var(--gb-gray); font-weight:500;
}
/* ── 63. 배송내역 날짜칸 정리 ─────────────────────────────
데이트피커 CSS(@section 으로 kitsch 보다 늦게 로드)가 안쪽 입력칸에
자기 테두리를 그려 알약 안에 선이 겹쳐 보였다. 높은 우선순위로 지운다. */
.page-mypage-mydelivery .gb-dv-daterange input.form-control.daterange-picker,
.page-mypage-mydelivery .gb-dv-daterange input.form-control,
.page-mypage-mydelivery .gb-dv-daterange .daterange-picker{
border:0 !important; outline:0 !important; box-shadow:none !important;
background:transparent !important; border-radius:0 !important;
height:auto !important; min-height:0 !important;
font-size:12.5px !important; font-weight:600 !important; color:var(--gb-ink) !important;
padding:12px 8px 12px 2px !important;
}
.page-mypage-mydelivery .gb-dv-daterange .input-group-text{
border:0 !important; box-shadow:none !important; background:none !important;
}
/* 알약 테두리는 바깥 하나만 */
.page-mypage-mydelivery .gb-dv-daterange{
border:1px solid var(--gb-blue-soft) !important;
box-shadow:none !important;
}
/* 날짜칸: 가운데 정렬 + 아이콘과 날짜 사이 간격, 오른쪽 빈 공간 제거 */
.page-mypage-mydelivery .gb-dv-daterange{
justify-content:center !important;
}
.page-mypage-mydelivery .gb-dv-daterange .input-group-text{
padding:0 !important; margin-right:9px;
}
.page-mypage-mydelivery .gb-dv-daterange input.form-control.daterange-picker{
flex:0 0 auto !important; width:186px !important;
text-align:left; padding:12px 0 !important;
cursor:pointer;
}
/* ============================================================
굿체인지 목록 — 상태를 한눈에
------------------------------------------------------------
상태는 3가지: 진행중(on) / 대기중(wait) / 종료됨(done).
카드에 data-exstatus="on|wait|done" 이 붙어 있어
나중에 전체/진행중/대기중/종료됨 필터는 이 속성만 보고 걸면 된다. */
/* 상품명 옆 상태 알약 */
.gb-ex-badge{
display:inline-block; font-size:10px; font-weight:800; line-height:1;
padding:3px 8px; border-radius:999px; margin-left:4px; vertical-align:1px;
white-space:nowrap;
}
.gb-ex-badge--on { background:#E9F6EE; color:#1E7A46; }
.gb-ex-badge--wait { background:#FFF3DE; color:#B26A00; }
.gb-ex-badge--done { background:#F0F0F2; color:#8A8A93; }
/* 구매 가능 여부 — 배지를 못 봐도 이 글자로 판단된다 */
.gb-ex-avail{ font-size:11px; font-weight:700; }
.gb-ex-avail--on { color:#1E7A46; }
.gb-ex-avail--off { color:#B26A00; }
/* 카드 전체 톤 */
.gb-ex-card--wait{ background:#FFFBF3 !important; } /* 오픈 예정 — 살짝 톤 다운 */
.gb-ex-card--wait .img-icon img{ filter:saturate(.55); opacity:.9; }
.gb-ex-card--done{ opacity:.55; filter:grayscale(.65); } /* 종료 — 흐리게 */
.gb-ex-card--done .gb-ex-avail--off{ color:#8A8A93; }
/* ============================================================
박스 오픈 시트 — 오픈 이펙트 테마 선택
------------------------------------------------------------
시안: 제목 아래 pill 3개(한 줄) + '기본 이펙트로 설정' 체크.
버튼은 DB 테마 수만큼 자동으로 늘어난다 (flex 균등 분할). */
.gb-sheet-fxwrap{
border-top:1px dashed var(--gb-line);
margin-top:12px; padding-top:12px;
}
.gb-sheet-fxtitle{
font-size:13.5px; font-weight:800; color:var(--gb-ink);
margin-bottom:8px; text-align:left;
}
.gb-sheet-fx{ display:flex; gap:7px; }
.gb-sheet-fx-btn{
flex:1; min-width:0;
border:1.5px solid var(--gb-line) !important;
background:var(--gb-white) !important;
border-radius:var(--gb-r-pill) !important;
padding:9px 4px !important;
font-size:12.5px !important; font-weight:700; color:var(--gb-ink-2) !important;
box-shadow:none !important; width:auto !important;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gb-sheet-fx-btn em{ font-style:normal; font-size:12px; margin-right:1px; }
.gb-sheet-fx-btn.is-on{
border-color:var(--gb-pink) !important;
background:var(--gb-pink-tint) !important;
color:var(--gb-pink-deep) !important;
}
.gb-sheet-fxdefault{
display:flex; align-items:center; gap:7px;
margin-top:9px; font-size:12px; color:var(--gb-ink-2); text-align:left;
}
.gb-sheet-fxdefault .form-check-input{ margin:0; flex:none; }
/* ============================================================
알림 패널 — 첫 알림이 고정 헤더 밑에 깔려 잘리던 문제
------------------------------------------------------------
패널 안 헤더(header-fix)가 화면 기준 고정이라 목록 첫 줄과 겹쳤다.
패널 안에서는 sticky 로 바꿔 목록이 항상 그 아래에서 시작하게 한다. */
.pop-up-notifications .header-fix{
position:sticky !important;
top:0; left:auto; right:auto;
z-index:6;
background:var(--gb-white);
border-bottom:1px solid var(--gb-line);
}
.pop-up-notifications .tab-content{ padding:10px 10px 20px; }
/* ============================================================
25. 하단 탭바 전 화면 표시 — 자체 하단 버튼과의 겹침 정리
------------------------------------------------------------
박스구매·장바구니·배송신청은 원래 탭바가 없어서 자체 하단 버튼이
화면 맨 아래(bottom:0)에 붙어 있었다. 이제 탭바(78px)가 생기므로
그 버튼들을 탭바 위로 올리고, 내용도 그만큼 여유를 준다. */
.page-shop-box .bottom-wg.bottom-fix,
.page-shop-cart .bottom-wg.bottom-fix,
.page-shop-delivery .bottom-wg.bottom-fix{
bottom:78px !important;
}
.page-shop-box, .page-shop-cart, .page-shop-delivery{
padding-bottom:86px;
}
/* ── 알림 패널 잘림 재수정 ─────────────────────────────────
앞서 넣은 클래스 규칙(.pop-up-notifications …)이
예전 ID 규칙(#pop-up-notifications .tab-content{padding-top:0})에
특이도로 밀렸다. 같은 ID 특이도로 다시 정의한다 (뒤에 있어 이긴다). */
#pop-up-notifications .tab-content{ padding:14px 16px 24px; }
#pop-up-notifications .header-2.header-fix{ padding-bottom:8px; }
/* ── 오픈 이펙트 구획 — '기본 이펙트로 설정'과 동의 줄이 붙어 보이던 것 ── */
.gb-sheet-fxwrap{
margin-bottom:14px;
padding-bottom:14px;
border-bottom:1px dashed var(--gb-line);
}
.gb-sheet-fxdefault{ margin-top:11px; }
/* ============================================================
26. 박스 확률 정보 (/Community/Probability)
------------------------------------------------------------
숫자가 주인공인 화면 — 게이지·그래프 없이 행 리스트로만.
레벨이 오를수록 톤을 조금씩 진하게 해 희소성만 암시한다. */
.page-probability{ padding-bottom:96px; }
.gb-prob-head{ margin:4px 2px 14px; }
.gb-prob-head h4{
font-size:19px; font-weight:800; color:var(--gb-ink); margin:0 0 4px;
}
.gb-prob-head p{ font-size:12.5px; color:var(--gb-ink-2); margin:0; }
.gb-prob-tabs{
display:flex; gap:8px; margin-bottom:12px;
}
.gb-prob-tabbtn{
flex:1; border:1.5px solid var(--gb-line); background:var(--gb-white);
color:var(--gb-ink-2); font-size:13.5px; font-weight:700;
padding:10px 0; border-radius:var(--gb-r-btn);
}
.gb-prob-tabbtn.is-on{
border-color:var(--gb-pink); background:var(--gb-pink); color:#fff;
}
.gb-prob-list{
background:var(--gb-white); border-radius:var(--gb-r-card);
overflow:hidden; box-shadow:0 2px 10px rgba(217,0,107,.06);
}
.gb-prob-row{
display:flex; align-items:center; gap:10px;
padding:12px 16px; border-bottom:1px solid var(--gb-line);
}
.gb-prob-row:last-child{ border-bottom:none; }
.gb-prob-lv{
min-width:44px; font-size:13px; font-weight:800; color:var(--gb-gray);
}
.gb-prob-name{ flex:1; font-size:12.5px; color:var(--gb-ink-2); }
.gb-prob-per{
font-size:14px; font-weight:800; color:var(--gb-ink);
font-variant-numeric:tabular-nums;
}
/* Lv.6~8 — 살짝 분홍기 */
.gb-prob-row--mid{ background:var(--gb-pink-tint); }
.gb-prob-row--mid .gb-prob-lv{ color:var(--gb-pink-mid); }
.gb-prob-row--mid .gb-prob-per{ color:var(--gb-pink-deep); }
/* Lv.9~10 — 희귀 강조 (과장 없이 색·굵기만) */
.gb-prob-row--rare{ background:var(--gb-pink-soft); }
.gb-prob-row--rare .gb-prob-lv{ color:var(--gb-pink-deep); }
.gb-prob-row--rare .gb-prob-name{ color:var(--gb-ink); font-weight:600; }
.gb-prob-row--rare .gb-prob-per{ color:var(--gb-pink-deep); font-size:15px; }
.gb-prob-notes{
margin:14px 4px 0;
}
.gb-prob-notes p{ font-size:11.5px; color:var(--gb-gray); margin:0 0 4px; }
.gb-prob-empty{
background:var(--gb-white); border-radius:var(--gb-r-card);
padding:40px 0; text-align:center; color:var(--gb-gray); font-size:13px;
}
/* ============================================================
27. 문의유형 펼침 목록 — 항목마다 알약 상자로 보이던 것을
평범한 일자 목록으로 (흰 바탕 + 가는 구분선) */
.page-community-qnadetail .bootstrap-select .dropdown-menu{
padding:0 !important; overflow:hidden;
}
.page-community-qnadetail .bootstrap-select .dropdown-menu li{
margin:0 !important; background:none !important;
}
.page-community-qnadetail .bootstrap-select .dropdown-item{
background:var(--gb-white) !important;
border-radius:0 !important;
margin:0 !important;
padding:13px 16px !important;
border-bottom:1px solid var(--gb-line) !important;
}
.page-community-qnadetail .bootstrap-select .dropdown-menu li:last-child .dropdown-item{
border-bottom:0 !important;
}
.gb-rec-guide{
margin:10px 2px 2px; padding:11px 13px;
background:var(--gb-pink-tint); border-radius:12px;
font-size:12px; color:var(--gb-ink-2); line-height:1.7;
}
.gb-rec-guide b{ color:var(--gb-ink); }
.gb-rec-guide span{ font-size:11px; color:var(--gb-gray); }
.page-community-qnadetail .bootstrap-select .dropdown-item.active,
.page-community-qnadetail .bootstrap-select .dropdown-item.selected{
background:var(--gb-pink-tint) !important;
color:var(--gb-pink-deep) !important;
}
/* ============================================================
28. 데일리 미션 (/Mission/Daily)
------------------------------------------------------------
카드 상태 4종: 진행중(연함) / 완료·받기(핑크 강조) /
지급완료(체크) / 중복 지급 불가(완료 표시 + 작은 안내) */
.page-mission{ padding-bottom:96px; }
.gb-dm-head{ margin:4px 2px 14px; text-align:center; }
.gb-dm-head h4{ font-size:20px; font-weight:900; color:var(--gb-ink); margin:0 0 6px; }
.gb-dm-head p{ font-size:13.5px; color:var(--gb-ink-2); margin:0; line-height:1.5; }
.gb-dm-head p b{ color:var(--gb-pink-deep); }
.gb-dm-today{
background:var(--gb-white); border-radius:var(--gb-r-card);
padding:14px 16px; margin-bottom:14px; box-shadow:0 2px 10px rgba(217,0,107,.06);
}
.gb-dm-today-txt{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.gb-dm-today-txt span{ font-size:13px; color:var(--gb-ink-2); font-weight:700; }
.gb-dm-today-txt b{ font-size:15px; color:var(--gb-pink-deep); }
.gb-dm-bar{ height:10px; background:var(--gb-pink-tint); border-radius:var(--gb-r-pill); overflow:hidden; }
.gb-dm-bar i{ display:block; height:100%; background:var(--gb-pink); border-radius:var(--gb-r-pill); transition:width .3s; }
.gb-dm-bar--sm{ height:7px; flex:1; }
.gb-dm-card{
background:var(--gb-white); border:1.5px solid var(--gb-line);
border-radius:var(--gb-r-card); padding:14px 16px; margin-bottom:10px;
}
.gb-dm-card.is-ready{ border-color:var(--gb-pink); box-shadow:0 3px 12px rgba(255,46,143,.14); }
.gb-dm-card.is-done{ opacity:.75; }
.gb-dm-card-top{ display:flex; justify-content:space-between; align-items:center; }
.gb-dm-tit{ display:flex; align-items:center; gap:7px; }
.gb-dm-tit b{ font-size:15px; color:var(--gb-ink); }
.gb-dm-reward{ font-size:12.5px; font-weight:800; color:var(--gb-pink-deep); white-space:nowrap; }
.gb-dm-badge{ font-size:10.5px; font-weight:800; padding:3px 8px; border-radius:var(--gb-r-pill); line-height:1; }
.gb-dm-badge--ing{ background:#F1F1F4; color:var(--gb-gray); }
.gb-dm-badge--ready{ background:var(--gb-pink); color:#fff; }
.gb-dm-badge--done{ background:var(--gb-pink-soft); color:var(--gb-pink-deep); }
.gb-dm-badge--review{ background:#FFF3D9; color:#B07C00; }
/* 안내문 — 한 줄로 접혀 있고 누르면 전부 보인다 */
.gb-dm-desc{
font-size:12px; color:var(--gb-ink-2); margin:7px 0 9px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;
}
.gb-dm-desc.is-open{ white-space:normal; }
.gb-dm-progress{ display:flex; align-items:center; gap:10px; }
.gb-dm-progress span{ font-size:12px; font-weight:800; color:var(--gb-ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
.gb-dm-btn{
display:block; width:100%; text-align:center; border:0;
border-radius:var(--gb-r-btn); padding:11px 0; margin-top:10px;
font-size:13.5px; font-weight:800;
}
.gb-dm-btn--claim{ background:var(--gb-pink); color:#fff; }
.gb-dm-btn--claim:disabled{ opacity:.5; }
.gb-dm-btn--go{ background:var(--gb-pink-tint); color:var(--gb-pink-deep); }
.gb-dm-btn--wait{ background:#F1F1F4; color:var(--gb-gray); }
.gb-dm-note{
margin:9px 0 0; padding:9px 11px; background:var(--gb-pink-tint);
border-radius:10px; font-size:11.5px; color:var(--gb-ink-2); line-height:1.5;
}
.gb-dm-allclear{
background:var(--gb-white); border:2px solid var(--gb-pink-soft);
border-radius:var(--gb-r-card); padding:18px 16px; margin:16px 0 8px;
text-align:center;
}
.gb-dm-allclear.is-ready{ border-color:var(--gb-pink); box-shadow:0 4px 16px rgba(255,46,143,.18); }
.gb-dm-allclear h5{ font-size:17px; font-weight:900; color:var(--gb-pink-deep); margin:0 0 8px; }
.gb-dm-ac-cnt{ font-size:13px; color:var(--gb-ink-2); margin:0 0 8px; }
.gb-dm-ac-cnt b{ color:var(--gb-ink); font-size:15px; }
.gb-dm-ac-txt{ font-size:13px; color:var(--gb-ink-2); margin:10px 0 0; line-height:1.55; }
.gb-dm-ac-txt b{ color:var(--gb-pink-deep); font-size:15px; }
.gb-dm-allclear .gb-dm-btn{ margin-top:12px; }
.gb-dm-ac-sub{ font-size:11px; color:var(--gb-gray); margin:6px 0 0; }
.gb-dm-foot{ font-size:11.5px; color:var(--gb-gray); margin:12px 4px 0; }
.gb-dm-foot{ line-height:1.6; }
a.gb-dm-btn{ text-decoration:none; }
/* 추천 입력창 */
.gb-dm-modal{ border-radius:var(--gb-r-card); }
.gb-dm-modal .modal-body label{ display:block; font-size:12.5px; font-weight:700; color:var(--gb-ink); margin:10px 0 5px; }
.gb-dm-modal .modal-body label b{ color:var(--gb-pink); }
.gb-dm-modal .modal-body input, .gb-dm-modal .modal-body textarea{
width:100%; border:1px solid var(--gb-line); border-radius:12px;
padding:11px 12px; font-size:13.5px; background:var(--gb-white);
}
.gb-dm-modal .modal-body textarea{ height:90px; resize:none; }
/* ============================================================
29. GOOD PICK (/Pick) — 다크 네이비 + 보라·골드 (참고 시안 무드)
------------------------------------------------------------
이 페이지만 앱의 핑크 테마 대신 이벤트 전용 다크 테마를 쓴다. */
.page-goodpick{
background:radial-gradient(120% 90% at 50% 0%, #2B2148 0%, #1B1430 55%, #120D22 100%);
margin:0 -0px; padding:18px 0 120px; min-height:100vh;
}
.page-goodpick .tf-container{ position:relative; }
.gp-head{ text-align:center; margin-bottom:14px; }
.gp-head-sub{ font-size:12px; color:#B7A8E8; letter-spacing:.35em; margin:0 0 2px; }
.gp-head h3{
font-size:34px; font-weight:900; margin:0; letter-spacing:2px;
background:linear-gradient(180deg,#FFE9A8 20%,#F4B942 60%,#D98F1F);
-webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.gp-head h3 span{ display:block; font-size:12px; letter-spacing:.5em; color:#C9A4FF; -webkit-text-fill-color:#C9A4FF; }
.gp-head-desc{ font-size:13px; color:#D9CFF5; margin:6px 0 0; }
.gp-head-desc b{ color:#FFD976; }
.gp-stats{
display:flex; background:#241B42; border:1px solid #3A2C66;
border-radius:14px; padding:11px 6px; margin-bottom:12px;
}
.gp-stats > div{ flex:1; text-align:center; }
.gp-stats > div + div{ border-left:1px solid #3A2C66; }
.gp-stats span{ display:block; font-size:11px; color:#9C8DC9; margin-bottom:3px; }
.gp-stats b{ font-size:16px; }
.gp-gold{ color:#FFD976; }
.gp-purple{ color:#C9A4FF; }
.gp-closed{
background:#2C2152; border:1px solid #4A3A80; color:#D9CFF5;
border-radius:12px; padding:11px; text-align:center; font-size:12.5px; margin-bottom:12px;
}
/* 번호판 5열 */
.gp-board{
display:grid; grid-template-columns:repeat(5, 1fr); gap:7px;
background:#241B42; border:1px solid #3A2C66; border-radius:16px;
padding:10px; margin-bottom:14px;
}
.gp-cell{
position:relative; border-radius:10px; text-align:center;
padding:9px 2px 8px; min-height:64px;
background:#191230; border:1px solid #35295E; color:#7E6FAE;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
}
.gp-cell b{ font-size:15px; font-weight:800; color:#B7A8E8; line-height:1.1; }
.gp-cell i{ font-style:normal; font-size:15px; color:#4E3F85; font-weight:800; }
.gp-cell.is-sel{
background:#3A2C66; border-color:#FFD976; box-shadow:0 0 10px rgba(255,217,118,.35);
}
.gp-cell.is-sel b, .gp-cell.is-sel i{ color:#FFD976; }
.gp-cell.is-open{
background:linear-gradient(180deg,#FBF3E2,#F1E3C4); border-color:#D9C08C;
}
.gp-cell.is-open b{ color:#6B531F; }
.gp-cell-point{ font-size:11px; font-weight:800; color:#8A5A00; }
.gp-cell-user{ font-size:9.5px; color:#A08B5E; }
/* SPECIAL(10만) — 보라·골드 유지 카드 */
.gp-cell.is-special{
background:linear-gradient(180deg,#4A2F7E,#372258); border-color:#B487FF;
box-shadow:0 0 9px rgba(180,135,255,.4);
}
.gp-cell.is-special b{ color:#E7D6FF; }
.gp-cell.is-special .gp-cell-point{ color:#D9BFFF; }
.gp-cell.is-special .gp-cell-user{ color:#B79DE0; }
/* JACKPOT(50만) — 왕관 + 강한 글로우 */
.gp-cell.is-jackpot{
background:linear-gradient(180deg,#5A3AA0,#3C2568); border-color:#FFD976;
box-shadow:0 0 14px rgba(255,217,118,.55), inset 0 0 12px rgba(255,217,118,.15);
}
.gp-cell.is-jackpot b{ color:#FFE9A8; }
.gp-cell.is-jackpot .gp-cell-point{ color:#FFD976; font-size:11.5px; }
.gp-cell.is-jackpot .gp-cell-user{ color:#D9BFFF; }
.gp-cell-crown{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); font-size:14px; }
.gp-cell-my{
position:absolute; top:2px; right:2px; font-size:7.5px; font-weight:800;
background:#FFD976; color:#5A3A00; border-radius:6px; padding:1px 4px;
}
.gp-cell.is-mine{ outline:2px solid rgba(255,217,118,.55); outline-offset:-1px; }
/* 보상 구성 */
.gp-rewards{
background:#241B42; border:1px solid #3A2C66; border-radius:14px;
padding:12px 10px; margin-bottom:12px;
}
.gp-rewards-tit{ text-align:center; font-size:11.5px; color:#C9A4FF; letter-spacing:.2em; margin:0 0 9px; }
.gp-rewards-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:5px; } /* 5개 1줄 (2026-08-20) */
.gp-reward{
position:relative; text-align:center; background:#191230; border:1px solid #35295E;
border-radius:10px; padding:8px 2px;
}
.gp-reward b{ display:block; font-size:11px; color:#E4DBFA; white-space:nowrap; }
.gp-reward span{ font-size:10.5px; color:#9C8DC9; }
.gp-reward--special{ border-color:#B487FF; }
.gp-reward--special b{ color:#D9BFFF; }
.gp-reward--jackpot{ border-color:#FFD976; box-shadow:0 0 8px rgba(255,217,118,.3); }
.gp-reward--jackpot b{ color:#FFE9A8; }
.gp-crown{ position:absolute; top:-8px; left:50%; transform:translateX(-50%); font-size:12px; }
.gp-notice{ margin:0 4px; }
.gp-notice p{ font-size:10.5px; color:#8B7DB8; margin:0 0 4px; line-height:1.55; }
/* 하단 고정 PICK 바 (탭바 위) */
.gp-dock{
position:fixed; left:0; right:0; bottom:78px; z-index:60;
display:flex; align-items:center; gap:10px;
background:#241B42; border-top:1px solid #4A3A80;
padding:12px 16px calc(12px + env(safe-area-inset-bottom));
}
.gp-dock-txt{ flex:1; min-width:0; }
.gp-dock-txt b{ display:block; font-size:13.5px; color:#F1EAFF; }
.gp-dock-txt span{ display:block; font-size:10.5px; color:#9C8DC9; }
.gp-btn{
border:0; border-radius:12px; padding:12px 22px;
font-size:14px; font-weight:900; white-space:nowrap;
background:linear-gradient(180deg,#FFE9A8,#F4B942); color:#4A3000;
width:auto; /* 템플릿의 button{width:100%} 가 하단 바 문구를 짓누르는 것 방지 */
flex:0 0 auto;
}
.gp-btn:disabled{ background:#3A2C66; color:#7E6FAE; }
/* 결과 오버레이 */
.gp-overlay{
position:fixed; inset:0; z-index:1200;
background:rgba(12,8,24,.9);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
}
.gp-overlay--jackpot{ background:rgba(20,10,40,.95); }
#gpFxVideo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gp-flip{ width:190px; height:250px; perspective:900px; }
.gp-flip-inner{
width:100%; height:100%; position:relative; transform-style:preserve-3d;
transition:transform .8s cubic-bezier(.2,.7,.3,1.1);
}
.gp-flip-inner.is-flipped{ transform:rotateY(180deg); }
.gp-flip-front, .gp-flip-back{
position:absolute; inset:0; backface-visibility:hidden;
border-radius:18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.gp-flip-front{
background:linear-gradient(180deg,#3A2C66,#241B42); border:2px solid #5A4696;
}
.gp-flip-front span{ font-size:44px; font-weight:900; color:#C9A4FF; }
.gp-flip-front i{ font-style:normal; font-size:30px; color:#5A4696; font-weight:900; }
.gp-flip-back{
transform:rotateY(180deg);
background:linear-gradient(180deg,#FBF3E2,#F1E3C4); border:2px solid #D9C08C;
}
.gp-flip-back b{ font-size:30px; font-weight:900; color:#7A5B14; }
.gp-result-txt{ font-size:11.5px; color:#8A6F35; }
.gp-result-badge{ font-size:14px; font-weight:900; color:#7A3AA0; }
.gp-flip-back--special{
background:linear-gradient(180deg,#5A3AA0,#372258); border-color:#B487FF;
box-shadow:0 0 30px rgba(180,135,255,.6);
}
.gp-flip-back--special b{ color:#E7D6FF; }
.gp-flip-back--special .gp-result-txt{ color:#C9A4FF; }
.gp-flip-back--special .gp-result-badge{ color:#D9BFFF; }
.gp-flip-back--jackpot{
background:linear-gradient(180deg,#6A46B8,#3C2568); border-color:#FFD976;
box-shadow:0 0 45px rgba(255,217,118,.75);
animation:gpJackGlow 1.1s ease-in-out infinite alternate;
}
.gp-flip-back--jackpot b{ color:#FFE9A8; font-size:33px; }
.gp-flip-back--jackpot .gp-result-txt{ color:#FFD976; }
.gp-flip-back--jackpot .gp-result-badge{ color:#FFE9A8; font-size:17px; }
@keyframes gpJackGlow{
from{ box-shadow:0 0 26px rgba(255,217,118,.5); }
to{ box-shadow:0 0 60px rgba(255,217,118,.95); }
}
.gp-btn--close{ position:relative; z-index:2; }
.gp-empty{
background:#241B42; border:1px solid #3A2C66; border-radius:16px;
text-align:center; padding:44px 16px; color:#D9CFF5;
}
.gp-empty h5{ color:#FFD976; font-weight:900; letter-spacing:.2em; margin:0 0 10px; }
.gp-empty p{ font-size:12.5px; margin:0; line-height:1.6; }
/* ── 이벤트 목록의 굿픽 배너 (다크 보라·골드 미니) ── */
.gb-pick-banner{
display:flex; align-items:center; gap:12px; text-decoration:none;
background:radial-gradient(120% 140% at 20% 0%, #3A2C66 0%, #241B42 70%);
border:1px solid #5A4696; border-radius:var(--gb-r-card);
padding:14px 16px; margin-bottom:14px;
box-shadow:0 4px 14px rgba(58,44,102,.35);
}
.gb-pick-banner-txt{ flex:1; min-width:0; }
.gb-pick-banner-txt b{
font-size:18px; font-weight:900; letter-spacing:1px;
background:linear-gradient(180deg,#FFE9A8 20%,#F4B942 70%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.gb-pick-banner-txt b span{ font-size:10.5px; letter-spacing:.3em; color:#C9A4FF; -webkit-text-fill-color:#C9A4FF; margin-left:4px; }
.gb-pick-banner-txt p{ font-size:11.5px; color:#D9CFF5; margin:3px 0 0; }
.gb-pick-banner-num{ text-align:center; white-space:nowrap; }
.gb-pick-banner-num span{ display:block; font-size:10px; color:#9C8DC9; }
.gb-pick-banner-num b{ font-size:24px; font-weight:900; color:#FFD976; }
/* ── 박스구매 다듬기 (사용자 피드백) ─────────────────────
인사말: 모바일 2줄 유지, 넓은 화면(768px+)에서는 한 줄 */
@media (min-width: 768px){
.gb-shop-hello h2 br{ display:none; }
}
/* 박스 선택: 잠깐 커졌다가 원래 크기로 — 아무것도 가리지 않는다 */
@keyframes gbBoxPulse{
0%{ transform:scale(1); }
40%{ transform:scale(1.06); }
100%{ transform:scale(1); }
}
.page-shop-box .img-favorite-cars.active{ animation:gbBoxPulse .45s ease; }
/* 굿뉴스: 넓은 화면에서는 본문을 폰 폭으로 가운데 정렬 (배너 카드가 기형적으로 늘어나던 것) */
@media (min-width: 768px){
.page-community-newsroom .tf-container{ max-width:560px; margin:0 auto; }
}
/* 수량 리셋 버튼 — 빠른선택 줄의 중립 톤 */
.page-shop-box .gb-cnt-reset,
.gb-sheet-chips .gb-cnt-reset{
background:#F1F1F4 !important; color:var(--gb-ink-2) !important;
border:1px solid var(--gb-line) !important;
}
/* 배송내역 — 최근 N일 빠른 조회 버튼 */
.gb-dv-daterow{ display:flex; gap:8px; align-items:stretch; }
.gb-dv-daterow .gb-dv-daterange{ flex:1; min-width:0; }
.gb-dv-quick{ display:flex; gap:5px; flex:none; }
.gb-dv-quick button{
width:auto; border:1px solid var(--gb-line); background:var(--gb-white);
border-radius:10px; padding:0 11px; font-size:12px; font-weight:700;
color:var(--gb-ink-2);
}
/* ── 이벤트 배너 (어드민 업로드 + 남은 기간 오버레이) ── */
.gb-ev-banner{
position:relative; display:block; margin-bottom:12px;
border-radius:var(--gb-r-card); overflow:hidden;
box-shadow:var(--gb-shadow);
}
.gb-ev-banner img{ display:block; width:100%; height:auto; }
.gb-ev-banner-time{
position:absolute; left:10px; bottom:10px;
background:rgba(20,12,18,.78); color:#FFE066;
font-size:12px; font-weight:800; letter-spacing:.02em;
padding:6px 12px; border-radius:var(--gb-r-pill);
}
.gb-ev-banner.is-over img{ filter:grayscale(.7) brightness(.75); }
/* 배송내역 — 30일 제한 안내 (얇은 폰트) */
.gb-dv-notice{
margin:4px 0 0; font-size:11.5px; font-weight:300;
color:var(--gb-ink-soft, #8a7a84); line-height:1.5;
}
.gb-dv-notice a{ color:inherit; text-decoration:underline; font-weight:400; }
/* ── 굿체인지 배너형 카드 (어드민 업로드) ── */
.gb-ex-banner{
position:relative; display:block; margin-bottom:12px;
border-radius:var(--gb-r-card); overflow:hidden;
box-shadow:var(--gb-shadow);
}
.gb-ex-banner img{ display:block; width:100%; height:auto; }
.gb-ex-banner-info{
position:absolute; left:10px; bottom:10px;
background:rgba(20,12,18,.78); color:#fff;
font-size:12px; font-weight:800; letter-spacing:.02em;
padding:6px 12px; border-radius:var(--gb-r-pill);
}
.gb-ex-banner--on .gb-ex-banner-info{ color:#9BF6A3; }
.gb-ex-banner--wait .gb-ex-banner-info{ color:#FFE066; }
.gb-ex-banner--done img{ filter:grayscale(.7) brightness(.75); }
.gb-ex-banner--done .gb-ex-banner-info{ color:#ddd; }
/* ── 굿체인지 상태 오버레이 (2026-09-04) ─────────────────────
배너가 있으면 상태·카운트다운·수량을 배너 왼쪽 아래에 겹쳐 놓는다.
배경 사진이 밝아도 읽히도록 반투명 판 + 옅은 블러만 쓴다 (과한 그라데이션 없음). */
.gb-ex-ov{
position:absolute; left:10px; bottom:10px; right:10px;
display:flex; flex-wrap:wrap; align-items:center; gap:6px;
pointer-events:none;
}
.gb-ex-ov-badge{
font-size:11.5px; font-weight:800; letter-spacing:.02em;
padding:4px 10px; border-radius:var(--gb-r-pill);
background:rgba(20,12,18,.72); color:#fff; backdrop-filter:blur(3px);
}
.gb-ex-ov-badge--on { background:rgba(16,140,70,.86); }
.gb-ex-ov-badge--wait { background:rgba(214,138,0,.90); }
.gb-ex-ov-badge--done { background:rgba(60,60,60,.82); }
.gb-ex-ov-cd, .gb-ex-ov-qty{
font-size:11.5px; font-weight:700;
padding:4px 9px; border-radius:var(--gb-r-pill);
background:rgba(20,12,18,.62); color:#fff; backdrop-filter:blur(3px);
}
.gb-ex-ov-cd{ font-variant-numeric:tabular-nums; }
/* 예정(오픈 전) — 품절처럼 죽어 보이지 않게 '살짝만' 톤을 내린다 */
.gb-ex-banner--wait img{ filter:grayscale(.45) brightness(.94); }
.gb-ex-banner--on img{ filter:none; }
/* 배너가 없는 카드 — 같은 정보를 일반 텍스트로 */
.gb-ex-cd-txt{
color:#B26A00; font-weight:700; font-variant-numeric:tabular-nums;
}
/* ── 새 박스 시안 반영 (2026-08-18) — 박스·버튼 누끼 에셋 ── */
.gb-box .gb-box-art{
height:146px;
background:radial-gradient(circle at 50% 42%, #FFE9F3 0%, #FDD9E9 55%, #F9C6DB 100%);
}
.gb-box .gb-box-art img{ width:118px; height:118px; }
/* 시안의 [박스 오픈] 버튼 — 이미지 자체에 문구·금테·광택 포함 */
.gb-box .gb-box-btn-img{
margin-top:auto; display:block; width:100%; max-width:190px;
margin-left:auto; margin-right:auto;
transition:transform .12s ease, filter .12s ease;
}
.gb-box:active .gb-box-btn-img{ transform:translateY(1px) scale(.98); filter:brightness(.95); }
/* ── 홈 박스카드 — 시안 아트(받침대·광채 포함) 통짜 이미지 (2026-08-18) ── */
.gb-box .gb-box-art{
height:auto; background:none; padding:0; display:block;
}
.gb-box .gb-box-art::before,
.gb-box .gb-box-art::after{ content:none; } /* 아트에 광채·반짝이가 이미 들어있다 */
.gb-box .gb-box-art img{
width:100%; height:auto; filter:none;
}
/* 미션 ALL CLEAR 문구 강조 */
.gb-dm-ac-green{ color:#12A150; font-weight:800; }
/* 박스구매 선택 카드 — 그림자가 가격을 덮지 않게 간격·그림자 정리 */
.page-shop-box .img-favorite-cars img{
margin-bottom:8px;
filter:drop-shadow(0 3px 5px rgba(217,0,107,.14));
}
/* 배송내역 — 안내 줄간격·날짜칸 모바일 정리 (2026-08-18) */
.gb-dv-notice{ line-height:1.85; margin:7px 0 2px; }
.gb-dv-cal{ font-size:15px; line-height:1; padding:0 8px 0 12px !important; background:transparent; border:none; }
.gb-dv-daterange input{
font-size:13.5px; font-weight:700; letter-spacing:0;
text-align:center; padding-left:2px;
}
/* 배송 게이지 5단계 — 좁은 화면에서 5개 라벨이 안 겹치게 */
.gb-dv-gauge-steps span{ font-size:10px; letter-spacing:-.3px; }
/* ── 홈 상품 카드 확대 (2026-08-18) — 굿뉴스·굿신상품 3칸, 굿럭셔리 2칸 ──
4칸일 때 카드가 72px밖에 안 돼 글씨·이미지가 묻힌다는 피드백. */
/* 칸 수는 Swiper 설정으로 이동 (자동 슬라이드) */
/* 카드·이미지·글자 확대 + 줄간격 압축 (이름 → 브랜드 → 가격) */
.page-home-main .vouchers-card .swiper-slide{ padding:8px 7px 9px; border-radius:14px; }
.page-home-main .vouchers-card .swiper-slide .image{
height:78px; margin-bottom:5px !important; border-radius:10px;
}
.page-home-main .vouchers-card .swiper-slide .image img{ max-height:78px; }
.page-home-main .luxury-product-list .swiper-slide .image{ height:118px; }
.page-home-main .luxury-product-list .swiper-slide .image img{ max-height:118px; }
.page-home-main .vouchers-card .swiper-slide .text-small{
font-size:11.5px !important; line-height:1.25 !important;
}
.page-home-main .vouchers-card .gb-card-brand{ margin-top:1px; font-size:10px; }
.page-home-main .vouchers-card .gb-news-meta{ margin-top:1px; font-size:10px; }
.page-home-main .vouchers-card .text-price{ margin-top:2px; font-size:11.5px; }
.page-home-main .luxury-product-list .swiper-slide .text-small{ font-size:12.5px !important; }
.page-home-main .luxury-product-list .text-price{ font-size:12.5px; }
/* ── 박스구매 선택 카드 — 흰 배경에 박스가 묻혀서, 홈 카드 배경을
흐리게(블러) 깔아 은은하게 구분 (2026-08-18) ── */
.page-shop-box .img-favorite-cars{ position:relative; overflow:hidden; }
.page-shop-box .img-favorite-cars::before{
content:''; position:absolute; inset:0; z-index:0;
background:url('/assets/images/kitsch/card-bg-5000.jpg') center/cover no-repeat;
opacity:.5; pointer-events:none;
}
.page-shop-box .selected-box-2::before{
background-image:url('/assets/images/kitsch/card-bg-10000.jpg');
}
.page-shop-box .img-favorite-cars > *{ position:relative; z-index:1; }
/* 로고 더 크게 (2026-08-18, 2차) */
.header-container .header-v3 .name img{ height:58px; }
/* 굿뉴스·굿신상품 카드 한 번 더 확대 */
.page-home-main .newsroom-product-list .swiper-slide .image,
.page-home-main .new-product-list .swiper-slide .image{ height:92px; }
.page-home-main .newsroom-product-list .swiper-slide .image img,
.page-home-main .new-product-list .swiper-slide .image img{ max-height:92px; }
.page-home-main .newsroom-product-list .swiper-slide .text-small,
.page-home-main .new-product-list .swiper-slide .text-small{ font-size:12px !important; }
/* ── 굿뉴스 개편 (2026-08-18) — 더보기·랭킹 실데이터 ── */
.gb-news-sec-head{
display:flex; align-items:center; justify-content:space-between;
margin:14px 2px 8px;
}
.gb-news-sec-head .gb-news-sec-title{ margin:0; }
.gb-news-more{ font-size:11.5px; font-weight:700; color:var(--gb-gray); text-decoration:none; }
.gb-rank-list{
background:var(--gb-white); border-radius:var(--gb-r-card);
box-shadow:var(--gb-shadow); padding:4px 12px; margin-top:10px;
}
.gb-rank-row{
display:flex; align-items:center; gap:8px;
padding:9px 2px; border-bottom:1px solid var(--gb-line);
font-size:12.5px;
}
.gb-rank-row:last-child{ border-bottom:0; }
.gb-rank-no{ width:26px; text-align:center; font-weight:800; }
.gb-rank-user{ flex:1; font-weight:700; }
.gb-rank-cnt{ font-weight:800; color:var(--gb-pink-deep); }
.gb-rank-pb{ font-size:10.5px; color:#12A150; font-weight:700; min-width:64px; text-align:right; }
.gb-rank-row.is-top{ font-size:13.5px; }
.gb-rank-note{ margin:8px 2px 0; font-size:10.5px; color:var(--gb-gray); }
/* 이용약관·개인정보 — 상단 오른쪽 닫기(X) */
.gb-terms-close{
width:32px; height:32px; display:grid; place-items:center;
font-size:17px; font-weight:700; color:var(--gb-ink);
text-decoration:none; border-radius:50%;
}
.gb-terms-close:active{ background:var(--gb-pink-tint); }
/* 상품함 선물하기 — 친구 선택 줄 */
.gb-gift-friend{
display:flex; align-items:center; gap:10px; width:100%;
background:var(--gb-white); border:1.5px solid var(--gb-line);
border-radius:13px; padding:13px 14px; margin-bottom:8px;
text-align:left; font-size:14px;
}
/* 받는 사람 이름 — 이 칸이 0 으로 찌그러지거나 투명해지면 이름이 안 보인다.
실제로 긴 닉네임이 통째로 사라지는 일이 있어 세 가지를 못 박는다 (2026-09-04)
· flex 로 줄어들되 내용만큼은 자리를 잡고, 넘치면 … 로 자른다
· 색을 직접 지정 (버튼 안이라 부모 색을 못 물려받는 경우가 있다)
· iOS 웹뷰에서 글자색이 투명으로 물려오는 것을 막는다 */
.gb-gift-friend b,
.gb-gift-friend .gb-gift-friend-name{
flex:1 1 auto; min-width:0;
font-size:14px; font-weight:800;
color:var(--gb-ink); -webkit-text-fill-color:var(--gb-ink);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gb-gift-friend em{
flex:0 0 auto;
font-style:normal; font-size:12px; color:var(--gb-pink-deep); font-weight:800;
}
.gb-gift-friend:active{ border-color:var(--gb-pink); }
/* 끝난 이벤트 — 굿체인지 종료와 같은 흑백 처리 + 종료 배지 */
.gb-ev-done img{ filter:grayscale(1) brightness(.9); }
.gb-ev-done .title, .gb-ev-done .small{ color:var(--gb-gray) !important; }
.gb-ev-done-badge{
display:inline-block; margin-left:5px; vertical-align:middle;
font-size:9.5px; font-weight:800; line-height:1;
padding:3px 8px; border-radius:var(--gb-r-pill);
background:#E9E4E7; color:#8a7a84;
}
/* 공지형 배너 좌측 하단 라벨 — 진행 예정(골드) / 종료됨(회색) */
.gb-ev-banner-time--over{ color:#ddd; }
/* 공지형 배너 좌측 하단 라벨 — 종료됨은 회색 */
.gb-ev-banner-time--over{ color:#ddd; }
/* ============================================================
출석체크 (누적 30회 사이클) — 레퍼런스 UI 재현
============================================================ */
.page-attend{ padding-bottom:24px; }
/* 보상 배너 */
.gb-at-banner{
display:flex; align-items:center; justify-content:space-between;
background:linear-gradient(135deg,#FFE3EF,#FFD1E5);
border-radius:var(--gb-r-card); box-shadow:var(--gb-shadow);
padding:20px 18px; margin-bottom:12px;
}
.gb-at-banner-txt b{ font-size:19px; line-height:1.35; letter-spacing:-.5px; color:var(--gb-ink); }
.gb-at-banner-txt em{ font-style:normal; color:var(--gb-pink-deep); font-size:24px; font-weight:900; }
.gb-at-banner-txt p{ margin:8px 0 0; font-size:12px; color:#8a7a84; }
.gb-at-banner-art{ font-size:52px; filter:drop-shadow(0 6px 10px rgba(217,0,107,.18)); }
/* 공용 카드 */
.gb-at-card{
background:var(--gb-white); border-radius:var(--gb-r-card);
box-shadow:var(--gb-shadow); padding:16px 14px; margin-bottom:12px;
}
/* 진행 현황 */
.gb-at-progress-head{ display:flex; align-items:center; justify-content:space-between; }
.gb-at-progress-head b{ font-size:14px; }
.gb-at-remain{ font-size:11.5px; font-weight:700; color:var(--gb-pink-deep); }
.gb-at-count{ margin:6px 0 8px; font-size:15px; color:var(--gb-ink); }
.gb-at-count b{ font-size:30px; color:var(--gb-pink-deep); font-weight:900; }
.gb-at-bar-row{ display:flex; align-items:center; gap:10px; }
.gb-at-bar{ flex:1; height:12px; border-radius:var(--gb-r-pill); background:#FFE9F2; overflow:hidden; }
.gb-at-bar i{ display:block; height:100%; border-radius:var(--gb-r-pill);
background:linear-gradient(90deg,#FF7AB8,var(--gb-pink)); transition:width .4s ease; }
.gb-at-pct{ font-size:14px; font-weight:900; color:var(--gb-pink-deep); }
.gb-at-note{ margin:10px 0 0; font-size:11px; color:#9a8a94; line-height:1.6; }
/* 달력 */
.gb-at-cal-head{
display:flex; align-items:center; justify-content:center; gap:22px;
margin-bottom:10px;
}
.gb-at-cal-head b{ font-size:17px; letter-spacing:-.4px; }
.gb-at-cal-nav{
width:32px; height:32px; display:grid; place-items:center;
font-size:20px; color:var(--gb-ink); text-decoration:none;
border-radius:50%;
}
.gb-at-cal-nav:active{ background:var(--gb-pink-tint); }
.gb-at-cal-nav.is-off{ color:#ddd; }
.gb-at-backtoday{ text-align:center; margin:-4px 0 8px; }
.gb-at-backtoday a{ font-size:11.5px; color:var(--gb-pink-deep); font-weight:700; }
.gb-at-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.gb-at-grid--head span{
text-align:center; font-size:12px; font-weight:700; color:#9a8a94; padding:4px 0;
}
.gb-at-grid--head .is-sun{ color:#E85D8A; }
.gb-at-grid--head .is-sat{ color:#5B8DEF; }
.gb-at-day{
min-height:52px; display:flex; flex-direction:column; align-items:center;
padding:5px 0 4px; border-radius:10px; position:relative;
}
.gb-at-day em{ font-style:normal; font-size:13px; font-weight:700; color:var(--gb-ink); }
.gb-at-day.is-sun em{ color:#E85D8A; }
.gb-at-day.is-sat em{ color:#5B8DEF; }
.gb-at-day.is-today{ border:2px solid var(--gb-pink); }
.gb-at-today-label{ font-style:normal; font-size:10px; font-weight:800; color:var(--gb-pink-deep); margin-top:2px; }
.gb-at-mark{
width:22px; height:22px; margin-top:3px;
display:grid; place-items:center; border-radius:50%;
font-style:normal; font-size:12px; font-weight:900;
}
.gb-at-mark--ok{ background:var(--gb-pink); color:#fff; }
.gb-at-mark--miss{ background:#EDE7EA; color:#B9A9B3; } /* 벌점 느낌 없이 연한 회색 */
.gb-at-legend{
display:flex; align-items:center; justify-content:center; gap:14px;
margin-top:12px; font-size:10.5px; color:#8a7a84;
}
.gb-at-legend span{ display:inline-flex; align-items:center; gap:4px; }
.gb-at-legend .gb-at-mark{ width:16px; height:16px; font-size:9px; margin:0; }
.gb-at-legend-today{ width:14px; height:14px; border:2px solid var(--gb-pink); border-radius:4px; }
.gb-at-legend-future{ width:14px; height:14px; border:1.5px solid #ddd; border-radius:50%; }
/* 출석 버튼 */
.gb-at-btn{
width:100%; padding:15px 0; border:0; border-radius:16px;
background:var(--gb-pink); box-shadow:0 4px 12px rgba(217,0,107,.30);
color:#fff; font-size:16px; font-weight:900; letter-spacing:-.3px;
box-shadow:0 6px 16px rgba(217,0,107,.28); margin-bottom:10px;
}
.gb-at-btn:active{ transform:translateY(1px); }
.gb-at-btn.is-done{
background:#F1E7EC; color:#B9A9B3; box-shadow:none;
}
/* 다른 미션 */
.gb-at-more{
display:flex; align-items:center; justify-content:center; gap:6px;
background:var(--gb-white); border:1.5px solid var(--gb-pink-tint);
border-radius:14px; padding:13px 0; text-decoration:none;
font-size:14px; font-weight:800; color:var(--gb-pink-deep);
box-shadow:var(--gb-shadow);
}
.gb-at-more i{ font-style:normal; }
.gb-at-tip{ margin:10px 0 0; text-align:center; font-size:11px; color:#9a8a94; }
/* 30회 달성 팝업 */
.gb-at-pop{
position:fixed; inset:0; z-index:1100;
background:rgba(30,15,25,.55);
display:flex; align-items:center; justify-content:center;
}
.gb-at-pop-card{
background:#fff; border-radius:22px; padding:30px 26px; width:290px;
text-align:center; box-shadow:0 14px 40px rgba(217,0,107,.25);
}
.gb-at-pop-ico{ font-size:46px; display:block; }
.gb-at-pop-card b{ display:block; font-size:19px; margin:10px 0 8px; letter-spacing:-.5px; }
.gb-at-pop-card p{ font-size:13px; color:#7A6A74; line-height:1.65; margin:0; }
.gb-at-pop-point{
margin:14px 0; font-size:26px; font-weight:900; color:var(--gb-pink-deep);
}
.gb-at-pop-card button{
width:100%; padding:12px 0; border:0; border-radius:13px;
background:var(--gb-pink); color:#fff; font-size:14px; font-weight:800;
}
/* ═══════════════════ 오늘의 GOOD QUIZ (초록 포인트 컬러) ═══════════════════ */
.page-quiz{ --qz-green:#16a34a; --qz-green-soft:#dcfce7; --qz-green-deep:#15803d; padding-bottom:40px; }
.gb-qz-green{ color:var(--qz-green); font-weight:800; }
.gb-qz-p-badge{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
border-radius:50%; background:var(--qz-green); color:#fff; font-size:11px; font-weight:900; font-style:normal; }
/* 메인 */
.gb-qz-main{ text-align:center; }
.gb-qz-status-badge{ display:inline-block; margin:10px auto 0; padding:6px 18px; border-radius:999px; font-size:13px; font-weight:800; }
.gb-qz-status-badge.is-ready{ background:#fff3cd; color:#a16207; border:1px solid #fde68a; }
.gb-qz-status-badge.is-end{ background:#f1f5f9; color:#64748b; border:1px solid #e2e8f0; }
.gb-qz-hero{ margin:16px 0 12px; }
.gb-qz-hero p{ font-size:19px; font-weight:700; line-height:1.45; color:#1f2937; }
.gb-qz-hero .gb-qz-green{ font-size:26px; }
.gb-qz-chips{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
.gb-qz-chip{ display:inline-flex; align-items:center; gap:4px; padding:6px 12px; border-radius:999px;
background:#fff; border:1.5px solid var(--qz-green-soft); color:#374151; font-size:12px; font-weight:700; }
.gb-qz-art{ position:relative; margin:6px auto 16px; width:150px; height:110px; }
.gb-qz-art-quiz{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,var(--qz-green),var(--qz-green-deep)); border-radius:18px;
color:#fff; font-size:30px; font-weight:900; letter-spacing:2px; transform:rotate(-4deg);
box-shadow:0 8px 20px rgba(22,163,74,.28); }
.gb-qz-art-q{ position:absolute; right:-12px; bottom:-10px; width:44px; height:44px; display:flex; align-items:center;
justify-content:center; background:#fff; border:3px solid var(--qz-green); border-radius:50%;
color:var(--qz-green); font-size:24px; font-weight:900; transform:rotate(8deg); }
.gb-qz-card{ text-align:left; margin-bottom:12px; }
.gb-qz-rewards .gb-qz-reward-row{ display:flex; justify-content:space-between; padding:4px 2px; font-size:14px; }
.gb-qz-notice p{ font-size:12.5px; color:#6b7280; margin-bottom:4px; line-height:1.5; }
/* 공통 버튼 */
.gb-qz-btn-main{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:6px;
padding:15px 0; border:0; border-radius:16px; background:var(--qz-green);
color:#fff; font-size:16px; font-weight:800; box-shadow:0 6px 16px rgba(22,163,74,.25); }
.gb-qz-btn-main.is-disabled{ background:#e5e7eb; color:#9ca3af; box-shadow:none; }
/* 풀이 */
.gb-qz-progress{ display:flex; align-items:center; justify-content:center; margin:14px 0 16px; }
.gb-qz-dot{ width:34px; height:34px; border-radius:50%; border:2px solid #d1d5db; background:#fff;
color:#9ca3af; font-size:14px; font-weight:800; flex:none; }
.gb-qz-dot.is-done{ background:var(--qz-green); border-color:var(--qz-green); color:#fff; }
.gb-qz-dot.is-cur{ border-color:var(--qz-green-deep); box-shadow:0 0 0 3px var(--qz-green-soft); color:var(--qz-green-deep); }
.gb-qz-dot.is-done.is-cur{ color:#fff; }
.gb-qz-dotline{ width:26px; height:3px; background:#e5e7eb; flex:none; }
.gb-qz-dotline.is-done{ background:var(--qz-green); }
.gb-qz-qcard{ background:#fff; border-radius:18px; padding:20px 16px; box-shadow:0 4px 14px rgba(0,0,0,.05); }
.gb-qz-qno{ font-size:15px; font-weight:900; color:var(--qz-green-deep); margin-bottom:6px; }
.gb-qz-qtext{ font-size:17px; font-weight:700; color:#1f2937; line-height:1.5; margin-bottom:16px; }
.gb-qz-opts{ display:flex; flex-direction:column; gap:9px; }
.gb-qz-opt{ display:flex; align-items:center; gap:10px; width:100%; padding:14px 14px; border-radius:14px;
border:1.5px solid #e5e7eb; background:#fff; font-size:15px; color:#374151; text-align:left; }
.gb-qz-opt-radio{ width:18px; height:18px; border-radius:50%; border:2px solid #d1d5db; flex:none; }
.gb-qz-opt.is-on{ border-color:var(--qz-green); background:#f0fdf4; font-weight:800; color:var(--qz-green-deep); }
.gb-qz-opt.is-on .gb-qz-opt-radio{ border-color:var(--qz-green); background:radial-gradient(circle, var(--qz-green) 45%, #fff 50%); }
.gb-qz-nav{ display:flex; gap:8px; margin-top:16px; }
.gb-qz-btn-prev{ flex:1; padding:14px 0; border-radius:14px; border:1.5px solid var(--qz-green); background:#fff;
color:var(--qz-green-deep); font-size:15px; font-weight:800; }
.gb-qz-btn-next{ flex:1.4; padding:14px 0; border-radius:14px; border:0;
background:var(--qz-green); color:#fff; font-size:15px; font-weight:800; box-shadow:0 4px 12px rgba(22,163,74,.22); }
.gb-qz-hint{ text-align:center; font-size:12px; color:#9ca3af; margin-top:12px; }
.gb-qz-confirm-foot{ display:flex; gap:8px; }
/* 결과 */
.gb-qz-result{ text-align:center; }
.gb-qz-done-badge{ display:inline-block; margin:10px auto 4px; padding:6px 16px; border-radius:999px;
background:var(--qz-green-soft); color:var(--qz-green-deep); font-size:12.5px; font-weight:800; }
.gb-qz-result-head{ margin-bottom:14px; }
.gb-qz-result-sub{ font-size:14px; color:#6b7280; font-weight:700; margin-bottom:2px; }
.gb-qz-result-score{ font-size:34px; font-weight:900; color:#1f2937; margin-bottom:10px; }
.gb-qz-result-score b{ color:var(--qz-green); font-size:40px; }
.gb-qz-result-point{ display:inline-flex; align-items:center; gap:7px; padding:10px 20px; border-radius:999px;
background:#fff; border:1.5px solid var(--qz-green-soft); font-size:14px; color:#374151; font-weight:700; }
.gb-qz-result-point b{ color:var(--qz-green); font-size:18px; }
.gb-qz-pay-wait{ margin-top:8px; font-size:12px; color:#a16207; }
.gb-qz-result-list{ display:flex; flex-direction:column; gap:10px; text-align:left; margin-bottom:14px; }
.gb-qz-result-card{ background:#fff; border-radius:14px; padding:13px 14px; border-left:4px solid #e5e7eb; box-shadow:0 3px 10px rgba(0,0,0,.04); }
.gb-qz-result-card.is-ok{ border-left-color:var(--qz-green); }
.gb-qz-result-card.is-no{ border-left-color:#ef4444; }
.gb-qz-result-row1{ display:flex; align-items:center; gap:8px; margin-bottom:4px; font-size:14.5px; }
.gb-qz-mark{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
color:#fff; font-size:13px; font-weight:900; flex:none; }
.is-ok .gb-qz-mark{ background:var(--qz-green); }
.is-no .gb-qz-mark{ background:#ef4444; }
.gb-qz-result-q{ font-size:13.5px; color:#4b5563; line-height:1.45; margin-bottom:8px; }
.gb-qz-result-row2{ display:flex; justify-content:space-between; gap:8px; font-size:12.5px; color:#6b7280; flex-wrap:wrap; }
.gb-qz-result-row2 .gb-qz-ans{ color:var(--qz-green-deep); }
.gb-qz-exp-btn{ margin-top:8px; padding:6px 12px; border-radius:999px; border:1px solid #e5e7eb; background:#f9fafb;
font-size:12px; color:#6b7280; font-weight:700; }
.gb-qz-exp{ display:none; margin-top:8px; padding:10px 12px; border-radius:10px; background:#f0fdf4;
font-size:12.5px; color:#166534; line-height:1.5; }
.gb-qz-exp.is-open{ display:block; }
.gb-qz-tomorrow{ padding:14px; border-radius:14px; background:var(--qz-green-soft); color:#166534;
font-size:13px; font-weight:700; line-height:1.55; margin-bottom:12px; }
/* ═══════ 이벤트 목록 상태 탭 ═══════ */
.gb-ev-tabs{ display:flex; gap:6px; margin:4px 0 14px; }
.gb-ev-tab{ flex:1; padding:9px 0; border-radius:999px; border:1.5px solid #f3d3e0; background:#fff;
color:#9b7c8a; font-size:13px; font-weight:800; white-space:nowrap; }
.gb-ev-tab b{ font-weight:800; opacity:.65; margin-left:2px; }
.gb-ev-tab.is-on{ background:var(--gb-pink); border-color:var(--gb-pink); color:#fff; }
.gb-ev-tab.is-on b{ opacity:.9; }
.gb-ev-empty{ text-align:center; padding:44px 0 40px; color:#9ca3af; font-size:13.5px; line-height:1.6; }
.gb-ev-empty .gb-ev-empty-ico{ font-size:34px; display:block; margin-bottom:8px; }
.gb-qz-evcard{ display:block; position:relative; border-radius:18px; overflow:hidden; margin-bottom:12px;
background:linear-gradient(135deg,#16a34a,#15803d); padding:22px 18px; text-align:left; }
.gb-qz-evcard-title{ color:#fff; font-size:20px; font-weight:900; letter-spacing:.5px; }
.gb-qz-evcard-sub{ color:rgba(255,255,255,.85); font-size:12.5px; margin-top:4px; font-weight:600; }
.gb-qz-evcard .gb-ev-flag{ position:absolute; left:12px; bottom:12px; }
/* ═══════ 상품 리뷰 ═══════ */
.page-review{ padding-bottom:40px; }
.gb-rv-reward{ display:flex; gap:10px; align-items:flex-start; background:#fff0f6; border:1.5px solid #fbcfe8;
border-radius:14px; padding:12px 14px; margin-bottom:14px; }
.gb-rv-reward.is-done{ background:#f0fdf4; border-color:#bbf7d0; }
.gb-rv-reward b{ font-size:13.5px; color:#1f2937; }
.gb-rv-reward p{ font-size:12px; color:#6b7280; margin:2px 0 0; }
.gb-rv-p{ width:22px; height:22px; flex:none; border-radius:50%; background:var(--gb-pink); color:#fff;
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; }
.is-done .gb-rv-p{ background:#16a34a; }
.gb-rv-count{ font-size:13px; font-weight:800; color:#374151; margin:6px 2px 8px; }
.gb-rv-target{ display:flex; gap:12px; align-items:center; background:#fff; border-radius:16px; padding:12px;
margin-bottom:10px; box-shadow:0 3px 10px rgba(0,0,0,.04); }
.gb-rv-target img{ width:64px; height:64px; border-radius:12px; object-fit:cover; flex:none; background:#f9fafb; }
.gb-rv-target-info{ flex:1; min-width:0; }
.gb-rv-target-info b{ display:block; font-size:14px; color:#1f2937; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap; }
.gb-rv-target-info p{ font-size:11.5px; color:#9ca3af; margin:2px 0; }
.gb-rv-dday{ display:inline-block; font-size:11px; font-weight:800; color:var(--gb-pink);
background:#fff0f6; border-radius:999px; padding:2px 8px; }
.gb-rv-write-btn{ flex:none; padding:8px 12px; border-radius:10px; border:1.5px solid var(--gb-pink);
color:var(--gb-pink); font-size:12.5px; font-weight:800; background:#fff; }
.gb-rv-empty{ text-align:center; padding:48px 0; color:#9ca3af; }
.gb-rv-empty span{ font-size:36px; display:block; margin-bottom:10px; }
.gb-rv-empty b{ display:block; color:#4b5563; font-size:14.5px; margin-bottom:6px; }
.gb-rv-empty p{ font-size:12.5px; line-height:1.6; }
.gb-rv-note{ font-size:12px; color:#a16207; background:#fffbeb; border-radius:10px; padding:9px 12px; margin-top:10px; }
.gb-rv-req{ color:#ef4444; }
.gb-rv-min{ font-weight:400; color:#9ca3af; font-size:11.5px; }
.gb-rv-q{ font-size:13px; color:#4b5563; margin-bottom:8px; }
.gb-rv-stars{ display:flex; gap:4px; justify-content:center; }
.gb-rv-stars button{ width:52px; height:52px; font-size:34px; line-height:1; border:0; background:none; color:#d1d5db; padding:0; }
.gb-rv-stars button.is-on{ color:var(--gb-pink); }
.gb-rv-star-label{ text-align:center; font-size:12.5px; color:#9ca3af; margin-top:6px; }
.gb-rv-star-label.is-on{ color:var(--gb-pink); font-weight:700; }
.gb-rv-textarea{ width:100%; border:1.5px solid #e5e7eb; border-radius:12px; padding:12px; font-size:14px;
line-height:1.6; resize:vertical; }
.gb-rv-textarea:focus{ outline:none; border-color:var(--gb-pink); }
.gb-rv-counter{ text-align:right; font-size:11.5px; color:#9ca3af; margin-top:4px; }
.gb-rv-imgcnt{ float:right; color:#9ca3af; }
.gb-rv-photos{ display:flex; gap:8px; flex-wrap:wrap; }
.gb-rv-photo{ position:relative; width:72px; height:72px; }
.gb-rv-photo img{ width:100%; height:100%; object-fit:cover; border-radius:10px; }
.gb-rv-photo button{ position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%;
border:0; background:#1f2937; color:#fff; font-size:10px; line-height:1; }
.gb-rv-photo span{ position:absolute; left:4px; bottom:4px; background:rgba(0,0,0,.55); color:#fff;
font-size:10px; border-radius:6px; padding:1px 5px; }
.gb-rv-photo-add{ width:72px; height:72px; border-radius:10px; border:1.5px dashed #d1d5db; background:#fafafa;
color:#9ca3af; font-size:26px; }
.gb-rv-submit{ display:block; width:100%; margin-top:14px; padding:15px 0; border:0; border-radius:16px;
background:var(--gb-pink); color:#fff; font-size:16px; font-weight:800;
box-shadow:0 6px 16px rgba(236,72,153,.28); }
.gb-rv-submit:disabled{ background:#e5e7eb; color:#9ca3af; box-shadow:none; }
/* 굿뉴스 고객 리뷰 카드 */
.gb-rv-card{ background:#fff; border-radius:14px; padding:13px 14px; margin-bottom:10px; box-shadow:0 3px 10px rgba(0,0,0,.04); }
.gb-rv-card-top{ display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.gb-rv-card-pimg{ width:44px; height:44px; border-radius:10px; object-fit:cover; flex:none; background:#f9fafb; }
.gb-rv-card-top b{ font-size:13.5px; color:#1f2937; display:block; }
.gb-rv-card-stars{ color:var(--gb-pink); font-size:13px; letter-spacing:1px; margin:2px 0 0; }
.gb-rv-card-stars em{ font-style:normal; color:#6b7280; font-size:12px; letter-spacing:0; }
.gb-rv-card-txt{ font-size:13px; color:#4b5563; line-height:1.55; margin-bottom:8px;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.gb-rv-card-photo{ width:100%; max-height:180px; object-fit:cover; border-radius:10px; margin-bottom:8px; }
.gb-rv-card-foot{ font-size:11.5px; color:#9ca3af; }
.gb-rv-more{ display:block; width:100%; padding:11px 0; border-radius:12px; border:1.5px solid #f3d3e0;
background:#fff; color:#9b7c8a; font-size:13px; font-weight:800; margin:4px 0 10px; }
.gb-rv-dt-txt{ font-size:13.5px; color:#374151; line-height:1.6; margin-bottom:10px; white-space:pre-wrap; }
.gb-rv-dt-photo{ width:100%; border-radius:10px; margin-bottom:8px; }
/* 이벤트 목록 — 탭 대신 한 화면 세로 구역 */
.gb-ev-sec-title{ display:flex; align-items:center; gap:6px; font-size:15px; font-weight:900; color:#1f2937;
margin:18px 2px 10px; }
.gb-ev-sec-title:first-of-type{ margin-top:4px; }
.gb-ev-sec-title b{ font-size:12px; font-weight:800; color:#fff; background:var(--gb-pink);
border-radius:999px; min-width:20px; height:20px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; }
.gb-ev-pane{ margin-bottom:6px; }
.gb-ev-empty--slim{ padding:14px 0 18px; font-size:12.5px; text-align:left; }
/* 리뷰 — 가능/작성한 리뷰 토글 + 내 리뷰 카드 */
.gb-rv-toggle{ display:flex; gap:6px; margin:4px 0 12px; }
.gb-rv-toggle button{ flex:1; padding:10px 0; border-radius:999px; border:1.5px solid #f3d3e0; background:#fff;
color:#9b7c8a; font-size:13px; font-weight:800; }
.gb-rv-toggle button b{ opacity:.65; margin-left:2px; }
.gb-rv-toggle button.is-on{ background:var(--gb-pink); border-color:var(--gb-pink); color:#fff; }
.gb-rv-toggle button.is-on b{ opacity:.9; }
.gb-rv-mine-stars{ color:var(--gb-pink) !important; font-size:12.5px !important; letter-spacing:1px; }
.gb-rv-mine-stars em{ font-style:normal; color:#6b7280; letter-spacing:0; }
.gb-rv-mine-txt{ font-size:12px !important; color:#6b7280 !important;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:190px; }
.gb-rv-hidden-badge{ display:inline-block; margin-left:4px; padding:1px 7px; border-radius:999px;
background:#fef3c7; color:#a16207; font-size:10.5px; font-weight:800; }
/* 상품함 하단 액션바 — 2D 선형 아이콘 */
.gb-act-ico{ width:15px; height:15px; vertical-align:-2.5px; margin-right:4px; }
/* GOOD QUIZ — 전용 배경(민무늬 연분홍) + 히어로 일러스트 + 칩 아이콘 */
body:has(.page-quiz){ background:#FFF1F6 !important; background-image:none !important; }
.gb-qz-hero-img{ display:block; width:200px; margin:8px auto 18px; }
.gb-qz-chip-img{ width:17px; height:17px; vertical-align:-3.5px; }
/* 내정보 프로필 — 아바타 없이 이름·아이디 왼쪽 정렬 */
.gb-my-profile .gb-my-id{ text-align:left !important; padding-left:4px; }
.gb-my-profile .gb-my-id *{ text-align:left !important; }
/* 배송문의 창 — 화면에 안 잘리게 크기 제한 + 보내기 버튼 핑크 */
#modalDeliveryChat .modal-dialog{ max-width:400px; margin:24px auto; height:auto; }
#modalDeliveryChat .modal-content{ border-radius:18px; overflow:hidden; }
#modalDeliveryChat .mh-mess{ min-height:auto !important; height:48vh !important; max-height:48vh; overflow-y:auto; }
#modalDeliveryChat .fixed-chat, #modalDeliveryChat .fixed-bototm{ position:static !important; padding:10px 4px 6px !important; }
#modalDeliveryChat .btn-message{ background:var(--gb-pink) !important; }
#modalDeliveryChat .btn-message i{ color:#fff !important; }
/* 홈 박스카드 — 이미지 버튼 대신 코드 버튼 (단색 + 금테 + 그림자) */
.gb-box .gb-box-btn{
margin-top:auto; display:flex; align-items:center; justify-content:center; gap:4px;
width:100%; max-width:190px; margin-left:auto; margin-right:auto;
padding:11px 0; border-radius:999px;
background:var(--gb-pink); border:2px solid #F6CD84;
color:#fff; font-size:14.5px; font-weight:800; letter-spacing:-.3px;
box-shadow:0 4px 12px rgba(217,0,107,.30);
transition:transform .12s ease, filter .12s ease;
}
.gb-box .gb-box-btn i{ font-style:normal; font-size:16px; line-height:1; }
.gb-box:active .gb-box-btn{ transform:translateY(1px) scale(.98); filter:brightness(.95); }
/* 결제수단이 하나뿐이면 가로 전체 사용 */
.list-payment-card .proof-item:only-child{ grid-column:1 / -1; width:100%; }
/* TOP10 — 닉네임 밑에 마스킹된 아이디 한 줄 */
.gb-podium-userid{ font-size:9.5px; color:#C9A3B4; margin-top:1px; letter-spacing:0; }
.gb-top10-puser{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; }
.gb-top10-pid{ font-style:normal; font-size:9.5px; color:#C9A3B4; }
/* 굿뉴스 고객 리뷰 탭 — 칩은 흰색, 오른쪽 끝 [리뷰쓰기]만 핑크 */
#pane-review .gb-sort{
display:flex; align-items:center; gap:6px; flex-wrap:nowrap;
/* 스크롤 상자가 그림자를 각지게 자르지 않도록 안쪽 여백 확보 */
padding:6px 6px 12px; margin:-6px -6px 4px;
}
#pane-review .gb-sort-chip{ background:#fff !important; color:var(--gb-ink-2) !important; border:1px solid var(--gb-line) !important; }
#pane-review .gb-sort-chip.is-on{ color:var(--gb-pink) !important; border-color:var(--gb-pink) !important; font-weight:800; }
.gb-rv-writebtn{
margin-left:auto; padding:8px 14px; border-radius:999px;
background:var(--gb-pink); color:#fff !important;
font-size:12.5px; font-weight:800; white-space:nowrap;
box-shadow:0 4px 12px rgba(217,0,107,.30); text-decoration:none;
}
/* 랭킹 탭 상단 — 이벤트 배너 그대로 (크기는 배너 비율 유지) */
.gb-rank-evbanner{ display:block; margin-bottom:10px; }
.gb-rank-evbanner img{ width:100%; height:auto; display:block; border-radius:16px; }
/* 랭킹 탭 — 배너 아래 이벤트 기간 + 하단 유의사항 */
.gb-rank-period{
text-align:center; font-size:12.5px; color:#6b7280;
margin:-2px 0 12px;
}
.gb-rank-period b{ color:var(--gb-ink); font-weight:800; }
/* 지난주 랭킹 — 진행 중 순위와 헷갈리지 않게 살짝 눌러 표시 (2026-09-04) */
.gb-rank-period--last{ margin-top:2px; }
.gb-rank-list--last{ opacity:.92; }
.gb-rank-list--last .gb-rank-row.is-top{ background:transparent; }
.gb-rank-notice{ margin-top:18px; }
.gb-rank-notice-divider{
display:flex; align-items:center; gap:10px;
color:#9ca3af; font-size:12px; margin-bottom:10px;
}
.gb-rank-notice-divider::before, .gb-rank-notice-divider::after{
content:''; flex:1; height:1px; background:var(--gb-line);
}
.gb-rank-notice .gb-board-body, .gb-rank-notice .gb-board-body p,
.gb-rank-notice .gb-board-body li, .gb-rank-notice .gb-board-body div,
.gb-rank-notice .gb-board-body span{
font-size:13.5px !important; line-height:1.7 !important;
}
/* 출석 — 30회 보너스 상태 카드 */
.gb-at-bonus{ border:1.5px solid var(--gb-pink-mid); }
.gb-at-bonus--paid{ border-color:#8CD9A0; }
.gb-at-bonus-head{ font-size:15px; font-weight:800; color:var(--gb-ink); margin-bottom:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gb-at-bonus-badge{ font-size:11px; font-weight:800; color:#fff; background:var(--gb-pink); border-radius:999px; padding:3px 9px; }
.gb-at-bonus-row{ display:flex; justify-content:space-between; align-items:center; padding:5px 0; font-size:13.5px; }
.gb-at-bonus-row em{ font-style:normal; color:#6b7280; }
.gb-at-bonus-row b{ color:var(--gb-ink); font-weight:800; }
.gb-at-bonus-lack{ color:var(--gb-pink) !important; }
.gb-at-bonus-total{ color:var(--gb-pink) !important; font-size:15.5px; }
/* 출석 배너 — (결제조건 달성 시) 부가 문구 */
.gb-at-banner-txt b small{ font-size:11.5px; font-weight:700; color:#B26480; letter-spacing:-.3px; }
/* ── 굿픽 진행 중 결과 비공개 (2026-11-05) ── */
.gp-cell.is-hidden .gp-cell-done{ display:block; font-size:12px; font-weight:800; color:#B08A2E; margin:2px 0; }
.gp-cell.is-mine{ box-shadow:0 0 0 2px #7C5CFF, 0 4px 12px rgba(124,92,255,.35); }
.gp-complete{ position:fixed; inset:0; z-index:99999; display:flex; flex-direction:column; align-items:center; justify-content:center;
background:rgba(30,20,60,.82); color:#fff; font-size:26px; font-weight:900; text-align:center; letter-spacing:1px; }
.gp-complete small{ font-size:14px; font-weight:400; color:#D9CFFF; margin-top:8px; }
/* ── 이벤트 포인트(EP) 배지 — P 알약의 파란 형제 (2026-08-31) ── */
.gb-point.gb-point-ep{
border:1px solid #C7DBFF !important;
box-shadow:0 0 0 3px rgba(160,200,255,.30), 0 1px 4px rgba(30,100,220,.10);
}
.gb-point.gb-point-ep .gb-point-p{
background:#2F6BFF !important; /* EP 파랑 */
width:auto !important; min-width:16px;
border-radius:8px; padding:0 4px !important;
font-size:9px; letter-spacing:0;
}
.gb-ep-ink, .gb-ep-ink span{ color:#2F6BFF !important; }
/* ── 박스구매 한 화면 통합 — 재화별 MAX 버튼 (2026-09-01) ── */
.gb-max-row{ display:flex; gap:6px; width:100%; }
.gb-max-row .btn{ flex:1; line-height:1.25; padding:7px 4px; border-radius:10px; }
.gb-max-sub{ display:block; font-size:10px; font-weight:400; opacity:.75; letter-spacing:-.3px; }
.gb-pmax-btn{ background:#FFE3F0; border:1px solid #FBD0E4 !important; color:#D9006B; font-weight:700; }
.gb-epmax-btn{ background:#EAF1FF; border:1px solid #C7DBFF !important; color:#2F6BFF; font-weight:700; }
.gb-dim{ opacity:.35; pointer-events:none; }
/* ── 포인트 사용 재화 선택 세그먼트 (2026-09-01) ── */
.gb-pay-seg{ display:flex; gap:6px; }
.gb-seg-btn{ flex:1; padding:8px 4px; border-radius:10px; font-size:13px; font-weight:700;
background:#fff; border:1px solid #eee; color:#999; }
.gb-seg-p.active{ background:#FFE3F0; border-color:#FBD0E4; color:#D9006B; }
.gb-seg-ep.active{ background:#EAF1FF; border-color:#C7DBFF; color:#2F6BFF; }