/* PC 디자인 정리 (2026-09-29 GS 확정 시안 v5) — 기프티콘 브랜드 /gifticon/[brand]
 * PC(768px 이상)에서만 읽힙니다: Base.astro 가 <link media="(min-width: 768px)"> 로 붙입니다. 모바일에는 영향 없음.
 * 시안을 CSS 덧씌우기로 만든 그대로 옮겨서 !important 가 많습니다(원래 스타일을 이기려고).
 * 방향: 형광펜 제거 · 순위/라벨 칩은 회색 글자 · 장식 목록·FAQ·칩 줄은 구분선으로 평평하게.
 *       페이지마다 주요 카드 1~3개는 원래 모양(웜크림·그림자·1위 강조) 그대로. 시세 숫자 주황·파랑은 유지.
 */
/* ===== 기프티콘 브랜드(/gifticon/starbucks/) PC 목업 — ②③④⑤ ===== */

/* ③ 제목 형광펜 없애기 */
.hl-pen { text-decoration: none !important; padding: 0 !important; }

/* 히어로 부제 — 큰 굵은 2줄째를 회색 보조 문구로 */
#main-content .page-h1 .h1-tail { color: var(--ink-soft) !important; font-size: .56em !important; font-weight: 500 !important; margin-top: 10px !important; letter-spacing: -0.01em !important; }


/* ④ 팔 때 / 살 때 바로가기 상자 2개 → 상자 없는 두 칸 (방향 제목 주황은 유지) */
#main-content .rate-hero .gc-jump { gap: 0 !important; margin: 0 !important; border-top: 0 !important; border-bottom: 1px solid var(--line-soft) !important; }
#main-content .rate-hero .gcj { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 6px !important; }
#main-content .rate-hero .gcj.is-buy { border-left: 1px solid var(--line-soft) !important; padding-left: 18px !important; }
#main-content .rate-hero .gcj:hover { background: var(--surface-2) !important; }

/* ⑤ 단품·세트 유형 탭(상자) → 밑줄 탭 */
#main-content .pd-tools { align-items: flex-end !important; }
#main-content .pd-tabs { background: none !important; padding: 0 !important; gap: 0 !important; border-radius: 0 !important; border-bottom: 1px solid var(--line) !important; align-self: stretch !important; }
#main-content .pd-tab { background: none !important; border-radius: 0 !important; box-shadow: none !important; border-bottom: 2px solid transparent !important; margin-bottom: -1px !important; padding: 9px 14px 8px !important; }
#main-content .pd-tab.is-on { border-bottom-color: var(--ink) !important; background: none !important; box-shadow: none !important; }
#main-content .pd-search { border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; background: transparent !important; box-shadow: none !important; }

/* ⑤ 분류 칩 줄 → 상자 없는 글자 줄 (선택만 검정 굵게) */
#main-content .pd-chips { gap: 0 !important; }
#main-content .pd-chip { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 4px 12px 4px 0 !important; color: var(--ink-faint) !important; font-weight: 600 !important; }
#main-content .pd-chip + .pd-chip { padding-left: 12px !important; border-left: 1px solid var(--line) !important; }
#main-content .pd-chip.is-on, #main-content .pd-chip.is-on span { background: none !important; color: var(--ink) !important; font-weight: 800 !important; }


/* ⑤ 법인 구매 펼치기 상자 → 구분선 */
#main-content .b2b-open { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; padding: 13px 6px !important; }

/* ⑤ 사용법 팁 상자 → 구분선 */
#main-content .gb-tips { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; padding: 0 !important; }
#main-content .gb-tip { border-top: 0 !important; border-bottom: 1px solid var(--line-soft) !important; padding: 13px 6px !important; }

/* ⑤ FAQ 상자 → 구분선 */
#main-content .faq-item { border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; }
#main-content .faq-item[open] { box-shadow: none !important; border-color: var(--line-soft) !important; }
#main-content .section-title + .faq-item { border-top: 1px solid var(--line) !important; }
#main-content .faq-q { padding: 14px 6px !important; font-size: 14px !important; }
#main-content .faq-a { padding: 0 6px 14px !important; }

/* ⑤ 다른 카페·음료 칩 줄 → 상자 없는 글자 줄 (할인율 파랑은 유지) */
#main-content .gb-chips { gap: 2px 22px !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line-soft) !important; padding: 10px 0 !important; }
#main-content .gb-chip { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 4px 0 !important; font-size: 13px !important; color: var(--ink) !important; font-weight: 600 !important; }
#main-content .gb-chip em { font-size: 13px !important; font-weight: 700 !important; }
#main-content .gb-chip-all { color: var(--ink-faint) !important; }

/* ===== 09-29 다듬기 — PC 디자인 시스템 맞춤 ===== */
/* 섹션 제목 22/700 · 옆 보조 문구 13/500 같은 줄 · 섹션 사이 48 · 제목~내용 12 */
#main-content .rate-hero { margin-bottom: 0 !important; }
#main-content .gb-sec { padding-top: 48px !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
#main-content .gb-ad .ad-slot { margin-top: 32px !important; margin-bottom: 0 !important; }
#main-content .gb-ad + .gb-sec, #main-content .adfit-con + .gb-sec { padding-top: 32px !important; }
#main-content .adfit-con { margin-top: 32px !important; }
#main-content .section-title { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.35 !important; margin: 0 0 12px !important; align-items: baseline !important; flex-wrap: wrap !important; column-gap: 10px !important; }
#main-content .section-title .hl-pen { font-weight: 700 !important; }
#main-content .section-title .title-sub { flex: 0 1 auto !important; width: auto !important; margin: 0 !important; font-size: 13px !important; font-weight: 500 !important; color: var(--ink-faint) !important; line-height: 1.4 !important; }
#main-content .gb-cap { margin-top: 12px !important; }
#main-content .gb-cap + .gb-cap { margin-top: 6px !important; }

/* 상품 탭·검색·분류 줄 — 블록 사이 */
#main-content .pd-tools { margin-bottom: 16px !important; row-gap: 14px !important; }
#main-content .pd-tab { color: var(--ink-soft) !important; font-weight: 500 !important; font-size: 14px !important; }
#main-content .pd-tab.is-on { color: var(--ink) !important; font-weight: 700 !important; }
/* 분류 칩 줄 — 14/500, 세로 구분선 높이 12px, 선택만 700 + 2px 밑줄 */
#main-content .pd-chip { font-size: 14px !important; font-weight: 500 !important; color: var(--ink-soft) !important; padding: 4px 14px 6px 0 !important; }
#main-content .pd-chip + .pd-chip { border-left: 0 !important; padding-left: 14px !important; background: linear-gradient(var(--line), var(--line)) left center / 1px 12px no-repeat !important; }
#main-content .pd-chip span { font-size: 12px !important; font-weight: 500 !important; color: var(--ink-faint) !important; }
#main-content .pd-chip.is-on { font-weight: 700 !important; color: var(--ink) !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 7px !important; }
#main-content .pd-chip.is-on span { font-weight: 500 !important; color: var(--ink-faint) !important; }


/* 법인 구매 펼치기 · 사용법 */
#main-content .b2b-open { font-size: 14px !important; }
#main-content .b2b-open b { font-weight: 600 !important; }
#main-content .gb-about-sum { margin-bottom: 16px !important; }
#main-content .gb-tip dt { font-size: 14px !important; }

/* FAQ 행 */
#main-content .faq-q { padding: 13px 6px !important; }

/* 다른 카페 줄 — 14/500 · 사이 20px, 할인율 색 유지 */
#main-content .gb-chips { gap: 4px 20px !important; padding: 12px 0 !important; }
#main-content .gb-chip { font-size: 14px !important; font-weight: 500 !important; }
#main-content .gb-chip em { font-size: 13px !important; margin-left: 4px !important; }
#main-content .gb-chip-all { color: var(--ink-soft) !important; }


/* ===== 09-29 GS "시세 순위표·주요 카드는 웜크림 카드 유지" — 데이터 표·주요 카드만 카드로 되살림 ===== */
/* 팔 때 / 살 때 두 칸 — 두 장의 카드 */
#main-content .rate-hero .gc-jump { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; margin: 16px 0 0 !important; border: 0 !important; }
#main-content .rate-hero .gcj, #main-content .rate-hero .gcj.is-buy { background: var(--cream) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; box-shadow: none !important; padding: 14px 18px !important; }
#main-content .rate-hero .gcj:hover { background: var(--surface-2) !important; }

/* ===== 09-29 GS "핵심 카드 1~3개만 웜크림" — 히어로·상품별 최저가·TOP 5만 카드, 팔 때/살 때 두 칸은 다시 평평하게 ===== */
#main-content .rate-hero .gc-jump { gap: 0 !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; }
#main-content .rate-hero .gcj, #main-content .rate-hero .gcj.is-buy { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 6px !important; }
#main-content .rate-hero .gcj.is-buy { border-left: 1px solid var(--line-soft) !important; padding-left: 18px !important; }
#main-content .rate-hero .gcj:hover { background: var(--surface-2) !important; }

/* 2026-09-29 GS "원래 모양 그대로" — 히어로(.hero-card) · 상품별 최저가 · TOP 5(.rate-table 안 행·배지·썸네일·더보기) 규칙은 지워 원래 카드로 */

/* 2026-09-29 GS "여기도 변경했던 시안" — 히어로만 v4 한 벌 표(크림 카드·옅은 그림자)로 되돌림. 상품별 최저가·TOP5 는 원래 모양 유지 */
#main-content .rate-hero .hero-card { background: transparent !important; border: 0 !important; border-top: 1px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
#main-content .rate-hero .hero-stats { display: block !important; }
#main-content .rate-hero .hero-divider { display: none !important; }
#main-content .rate-hero .hero-stat { display: grid !important; grid-template-columns: 180px minmax(0,1fr) auto; align-items: baseline; column-gap: 16px; padding: 13px 6px !important; border-bottom: 1px solid var(--line-soft) !important; }
#main-content .rate-hero .hero-stat-label { grid-column: 1; grid-row: 1; margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: var(--ink) !important; }
#main-content .rate-hero .hero-stat-sub { grid-column: 2; grid-row: 1; margin: 0 !important; font-size: 13px !important; color: var(--ink-faint) !important; }
#main-content .rate-hero .hero-stat-value { grid-column: 3; grid-row: 1; text-align: right; font-size: 28px !important; }
#main-content .rate-hero .hero-timing { display: flex !important; flex-wrap: nowrap !important; align-items: baseline; gap: 0 10px !important; margin: 0 !important; padding: 13px 6px !important; background: transparent !important; border-radius: 0 !important; border-bottom: 1px solid var(--line-soft) !important; }
#main-content .rate-hero .hero-timing .ht-q { flex: 0 0 186px; font-size: 14px !important; color: var(--ink) !important; font-weight: 700 !important; }
/* 2026-10-04 전체 점검 — 세트 이름이 긴 브랜드(피자나라치킨공주 등)에서 한 줄 고정 때문에 '순위 ↓' 가 카드 밖으로 나갔습니다. 이름·판매몰 칸이 줄어들며 말줄임되게 합니다. */
#main-content .rate-hero .hero-timing strong { font-weight: 600 !important; font-size: 14px !important; white-space: nowrap; display: flex; align-items: baseline; gap: 0 4px; flex: 0 1 auto; min-width: 0; }
/* 2026-10-18 — 말줄임이 값까지 지웠습니다(피자나라치킨공주 '고구마피치세트 (L) (…' 뒤의 25,900원이 안 보임). 이름만 줄이고 값·판매몰 칸은 통째로 남깁니다. */
#main-content .rate-hero .hero-timing strong .ht-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#main-content .rate-hero .hero-timing strong .ht-pr { flex: none; }
#main-content .rate-hero .hero-timing .ht-hint { font-size: 13px !important; white-space: nowrap; flex: none; }
#main-content .rate-hero .hero-timing .ht-go { margin-left: auto !important; color: var(--ink-soft) !important; font-weight: 600 !important; flex: none; }
#main-content .rate-hero .hero-timing:hover { background: var(--surface-2) !important; }
#main-content .rate-hero { margin-bottom: 0 !important; }
#main-content .rate-hero .hero-card { background: var(--cream) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; padding: 8px 18px 12px !important; }
#main-content .rate-hero .hero-card { box-shadow: rgba(20, 24, 33, 0.04) 0px 1px 2px 0px, rgba(20, 24, 33, 0.18) 0px 10px 30px -14px !important; }