/* PC 디자인 정리 (2026-09-29 GS 확정 — 상품권 나머지 페이지 2차) — 상품권별 계산기 /calculator/<상품권> · /calculator/buy/<상품권>
 * PC(768px 이상)에서만 읽힙니다: Base.astro 가 <link media="(min-width: 768px)"> 로 붙입니다. 모바일에는 영향 없음.
 * 시안을 CSS 덧씌우기로 만든 그대로 옮겨서 !important 가 많습니다(원래 스타일을 이기려고).
 * 방향: 순위/라벨 칩은 회색 글자 · 장식 상자·칩 줄·목록은 구분선으로 평평하게. 주요 카드·로고 카드 그리드·시세 숫자 색·H1 부제는 그대로.
 */
/* ===== /calculator/<상품권>/ PC 시안 — 상품권별 현금화 계산기 (같은 틀: /calculator/buy/<상품권>/ 할인 구매 계산기) (2026-09-29) =====
 * 남긴 주요 카드(원래 모양 그대로, 규칙 없음): 계산기 상자(.gcalc-box — 입력+결과), 매입처별 수령액/구매처별 결제액 TOP5 표(1위 줄 강조·순위 원·배지 포함)
 *   → TOP5 표는 tr.gcalc-top 이 든 표라서 .gcalc-table-wrap:not(:has(.gcalc-top)) 로 제외합니다.
 */

/* 제목 옆 회색 알약(TOP 5 · 92% 기준 · 7/20~9/25) → 옆에 붙는 회색 글자 */
#main-content .gcalc-h2-sub { background: none !important; padding: 0 !important; margin-left: 10px !important; border-radius: 0 !important; font-size: 13px !important; font-weight: 500 !important; vertical-align: baseline !important; }

/* 상품권 소개 회색 상자 → 평평하게 */
#main-content .gcalc-about { background: transparent !important; border-radius: 0 !important; padding: 0 0 16px !important; border-bottom: 1px solid var(--line-soft) !important; }

/* '반대로, 살 때는 / 같이 있는 걸 팔면' 상자 → 위아래 가는 선 한 줄 (값의 파랑·주황은 유지) */
#main-content .gcd-flip { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 4px 14px !important; }
#main-content .gcd-flip:hover { background: var(--surface-2) !important; }
/* 방식별 칩 줄 → 상자 없는 글자 줄 */
#main-content .gcd-chips { gap: 0 20px !important; }
#main-content .gcd-chip { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; min-height: 30px !important; font-size: 14px !important; font-weight: 500 !important; color: var(--ink) !important; }
#main-content .gcd-chip:hover { text-decoration: underline; text-underline-offset: 4px; }
#main-content .gcd-lbl { font-weight: 500 !important; color: var(--ink-faint) !important; padding-top: 7px !important; }

/* 60일 기록 상자 → 평평하게 (기간 최저/최고 작은 칸은 가는 세로선, '오늘 최고' 주황 숫자 유지) */
#main-content .cr-box { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; }
#main-content .cr-row { gap: 0 !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line-soft) !important; }
#main-content .cr-i, #main-content .cr-i.on { background: transparent !important; border-radius: 0 !important; padding: 12px 4px !important; }
#main-content .cr-i + .cr-i { border-left: 1px solid var(--line-soft) !important; padding-left: 16px !important; }
#main-content .cr-say { border-top: 0 !important; }

/* 권종별·총액·결제수단별 표(TOP5 표 제외) — 흰 상자·그림자·회색 머리글 배경 걷기, 윗선 1px 회색 */
#main-content .gcalc-table-wrap:not(:has(.gcalc-top)) { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; }
#main-content .gcalc-table-wrap:not(:has(.gcalc-top)) th { background: transparent !important; font-weight: 500 !important; color: var(--ink-faint) !important; border-bottom-color: var(--line) !important; }
#main-content .gcalc-table-wrap:not(:has(.gcalc-top)) th:first-child, #main-content .gcalc-table-wrap:not(:has(.gcalc-top)) td:first-child { padding-left: 4px !important; }
#main-content .gcalc-table-wrap:not(:has(.gcalc-top)) th:last-child, #main-content .gcalc-table-wrap:not(:has(.gcalc-top)) td:last-child { padding-right: 4px !important; }
#main-content .gcalc-table-wrap:not(:has(.gcalc-top)) td { border-bottom-color: var(--line-soft) !important; }
#main-content .gcalc-table-wrap:not(:has(.gcalc-top)) tbody tr:last-child td { border-bottom: 1px solid var(--line-soft) !important; }
#main-content .gcalc-table-wrap:not(:has(.gcalc-top)) tbody tr:hover td { background: var(--surface-2) !important; }
/* 60일 기록 표 — 가장 꾸준했던 곳(첫 줄)은 모바일 연주황 → PC 는 같은 분류 비교표의 '이 페이지' 줄과 같은 연회색 */
#main-content .gcr-top td { background: var(--surface-2) !important; }
/* 총액표 '10만원권 3장' — 시세가 아닌 장식 주황 → 검정 */
#main-content .gcalc-bulk-sec .gt-rate { color: var(--ink) !important; font-weight: 600 !important; }

/* 동네 매입처 칩 줄 → 상자 없는 글자 줄 */
#main-content .gcalc-areas { gap: 0 20px !important; }
#main-content .gcalc-area { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 6px 0 !important; font-size: 14px !important; font-weight: 600 !important; color: var(--ink) !important; }
#main-content .gcalc-area:hover { background: none !important; text-decoration: underline; text-underline-offset: 4px; }
#main-content .gcalc-area-map { color: var(--ink) !important; }

/* 3단계 상자 3개 → 구분선 목록, 번호 원(연주황) → 회색 테두리 원 */
#main-content .gcalc-steps { gap: 0 !important; border-top: 1px solid var(--line) !important; }
#main-content .gcalc-steps li { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; padding: 14px 4px 14px 40px !important; }
#main-content .gcalc-steps li::before { left: 4px !important; top: 15px !important; background: transparent !important; border: 1px solid var(--line) !important; color: var(--ink) !important; font-weight: 700 !important; }

/* 같은 분류 비교 표 — 상자 걷기, '이 페이지' 줄은 연한 회색 바탕, '이 페이지' 라벨 → 회색 글자 */
#main-content .gcmp-wrap { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; }
#main-content .gcmp-table th[scope=col] { background: transparent !important; font-weight: 500 !important; color: var(--ink-faint) !important; border-bottom-color: var(--line) !important; }
#main-content .gcmp-table th[scope=col]:first-child { padding-left: 4px !important; }
#main-content .gcmp-table th[scope=row] { padding-left: 4px !important; }
#main-content .gcmp-table th[scope=col]:last-child, #main-content .gcmp-table td:last-child { padding-right: 4px !important; }
#main-content .gcmp-table td, #main-content .gcmp-table th[scope=row] { border-bottom: 1px solid var(--line-soft) !important; }
#main-content .gcmp-table tbody tr.is-self { background: var(--surface-2) !important; }
#main-content .gcmp-me b { color: var(--ink-faint) !important; font-weight: 500 !important; }

/* 맨 아래 이동 카드 4장 → 두 칸 링크 목록 (아이콘 회색) */
#main-content .cross-grid { gap: 0 24px !important; border-top: 1px solid var(--line) !important; }
#main-content .cross-card { flex-direction: row !important; justify-content: flex-start !important; gap: 10px !important; padding: 14px 4px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; text-align: left !important; }
#main-content .cross-card:hover { background: var(--surface-2) !important; }
#main-content .cross-card::after { content: "→"; margin-left: auto; color: var(--ink-faint); font-weight: 500; }
#main-content .cross-ico { color: var(--ink-faint) !important; }
#main-content .cross-t { font-size: 14px !important; font-weight: 600 !important; }