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

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

/* ⑤ 지역 칩 줄 → 상자 없는 글자 줄 (지금 권역만 굵게 + 밑줄) */
#main-content .area-chips { gap: 0 !important; row-gap: 2px !important; margin-top: 14px !important; padding: 8px 0 6px !important; border-top: 1px solid var(--line-soft) !important; }
#main-content .area-chip { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 5px 12px 5px 0 !important; margin-right: 12px !important; color: var(--ink-soft) !important; font-weight: 500 !important; font-size: 13px !important; }
#main-content .area-chip:hover { color: var(--ink) !important; text-decoration: underline !important; }
#main-content .area-chip.on { color: var(--ink) !important; font-weight: 800 !important; text-decoration: underline !important; text-underline-offset: 5px !important; text-decoration-thickness: 2px !important; }
/* ② "지역 전체" 장식 주황 → 검정 */
#main-content .area-chip-all { color: var(--ink) !important; font-weight: 700 !important; border-right: 1px solid var(--line) !important; padding-right: 12px !important; }
#main-content .chiprail-more { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 5px 0 !important; color: var(--ink-faint) !important; font-weight: 500 !important; }

/* ② 본문 속 주황 글자 링크 → 검정 밑줄 */
#main-content a[href^="/map"][style*="accent"] { color: var(--ink) !important; text-decoration: underline !important; text-underline-offset: 3px !important; }

/* ⑤ 한눈에 보기 — 회색 상자 → 위 1px 선 */
#main-content .hero-summary { background: transparent !important; border-radius: 0 !important; border-top: 1px solid var(--ink) !important; border-bottom: 1px solid var(--line-soft) !important; padding: 16px 0 14px !important; }

/* ④ 매입 최고가 / 구매 최저가 카드 2장 → 상자 없는 두 칸 (방향 제목 주황·파랑 유지) */
#main-content .bsq { margin-top: 10px !important; padding: 10px 0 4px !important; }
#main-content .bsq-btn { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; border-top: 1px solid var(--ink) !important; border-bottom: 1px solid var(--line-soft) !important; padding: 14px 6px 13px !important; }
#main-content .bsq-btn.buy { border-left: 1px solid var(--line-soft) !important; padding-left: 18px !important; }
#main-content .bsq-btn:hover { background: var(--surface-2) !important; box-shadow: none !important; }
#main-content .bsq-t::after { content: " →"; color: var(--ink-faint); font-weight: 500; }

/* ⑤ + ② 카테고리별 카드 6장 → 상자 없는 2칸 목록, 순위 알약 → 회색 작은 숫자 */
#main-content .area-dept-grid { gap: 0 !important; border-top: 1px solid var(--ink) !important; grid-auto-rows: auto !important; }
#main-content .area-dept-card { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; padding: 18px 20px 16px 4px !important; }
#main-content .area-dept-grid > .area-dept-card:nth-child(even) { border-left: 1px solid var(--line-soft) !important; padding-left: 20px !important; padding-right: 4px !important; }
#main-content .area-dept-cmp-row:hover { background: var(--surface-2) !important; }
#main-content .area-dept-rank, #main-content .area-dept-rank.crown, #main-content .area-dept-rank.sell, #main-content .area-dept-rank.buy { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--ink-faint) !important; font-size: 12px !important; font-weight: 600 !important; width: 14px !important; min-width: 14px !important; }
#main-content .area-dept-more { background: none !important; border: 0 !important; border-radius: 0 !important; color: var(--ink-soft) !important; justify-content: flex-start !important; text-align: left !important; padding: 8px 0 0 !important; font-weight: 600 !important; }
#main-content .area-dept-more:hover { color: var(--ink) !important; text-decoration: underline !important; }

/* 시세표 아래 "더 보기" 버튼 → 글자 줄 */
#main-content .rt-more, #main-content .acp-fold .fold-summary { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; color: var(--ink-soft) !important; font-weight: 600 !important; }
#main-content .acp-fold .fold-ic { border-color: var(--line) !important; }

/* 2026-09-29 GS "남긴 주요 카드는 원래 모양 그대로" — 명동 백화점 시세표(.area-rate-table)·거래소 29곳(.area-grid/.area-card + "나머지 N곳 더 보기" 줄) 규칙을 모두 뺐습니다 */
/* ⑤ + ② 시세 미제공 매장 7곳 — 카드 → 구분선, 알약·버튼 → 글자 줄 */
#main-content .ax-grid { gap: 0 !important; column-gap: 0 !important; border-top: 1px solid var(--ink) !important; }
#main-content .ax-card { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; padding: 12px 6px 10px !important; }
#main-content .ax-grid > .ax-card:nth-child(even) { border-left: 1px solid var(--line-soft) !important; padding-left: 18px !important; }
#main-content .ax-badge { background: none !important; padding: 0 !important; color: var(--ink-faint) !important; font-weight: 500 !important; }
#main-content .ax-links { gap: 0 !important; }
#main-content .ax-links a { background: none !important; border-radius: 0 !important; min-height: 0 !important; padding: 2px 10px !important; color: var(--ink-soft) !important; font-weight: 500 !important; font-size: 12px !important; }
#main-content .ax-links a:first-child { padding-left: 0 !important; }
#main-content .ax-links a + a { border-left: 1px solid var(--line) !important; }
#main-content .ax-links a:hover { color: var(--ink) !important; text-decoration: underline !important; }

/* 계산기 — 아래 "상품권별 계산기 바로가기" 접기 상자 → 글자 줄, 목록 칸 상자 → 구분선 */
#main-content .area-calc-grid { gap: 0 !important; border-top: 1px solid var(--line-soft) !important; }
#main-content .area-calc-item { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; }

/* ⑤ 이웃 권역 — 흰 상자 → 구분선, 지금 권역 주황 배경 → 회색 (차이 %p 색은 유지) */
#main-content .area-nbr-list { background: transparent !important; border: 0 !important; border-top: 1px solid var(--ink) !important; border-radius: 0 !important; }
#main-content .area-nbr-row { padding: 12px 6px !important; }
#main-content .area-nbr-row:last-child { border-bottom: 1px solid var(--line-soft) !important; }
#main-content .area-nbr-row.mine { background: var(--surface-2) !important; }

/* ⑤ FAQ 상자 → 구분선 */
#main-content .area-faq-section .section-title { margin-bottom: 12px !important; }
#main-content .area-faq { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; margin: 0 !important; }
#main-content .area-faq-section .section-title + .area-faq { border-top: 1px solid var(--ink) !important; }
#main-content .area-faq > summary { padding-left: 4px !important; padding-right: 4px !important; }

/* 레일 — 장식용 주황 숫자만 검정 */
.rl-chip.is-hot em { color: var(--ink) !important; }

/* ===================================================================
   다듬기 (2026-09-29) — PC 디자인 시스템 맞춤
   =================================================================== */

/* 1. 섹션 제목 22/700/-0.02em · 위 48 · 아래 12 */
#main-content .section-title, #main-content .hs-title { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.3 !important; margin: 48px 0 12px !important; }
#main-content .area-faq-section .section-title { margin-bottom: 12px !important; }
#main-content .area-dept-h3 { font-size: 16px !important; font-weight: 700 !important; }
/* 8. 섹션 자체 여백 0 — 간격은 제목 위 48 로만 */
#main-content > section, #main-content .area-calc-section, #main-content .area-nbr-section, #main-content .area-faq-section, #main-content .related-section, #main-content .area-extra-section { margin-top: 0 !important; margin-bottom: 0 !important; }

/* 6. 지역 칩 줄 — 14/500, 사이 20, 지금 권역만 700 + 2px 밑줄 */
#main-content .area-chip { font-size: 14px !important; font-weight: 500 !important; padding: 5px 0 !important; margin-right: 20px !important; }
#main-content .area-chip.on { font-weight: 700 !important; }
#main-content .area-chip-all { font-weight: 700 !important; padding-right: 20px !important; }

/* 한눈에 보기 — 선 두 줄 걷고 보통 섹션처럼 (제목 → 글) */
#main-content .hero-summary { border-top: 0 !important; border-bottom: 0 !important; padding: 0 !important; margin: 0 !important; }
#main-content .hero-summary .hs-title { margin-top: 36px !important; }

/* 2+4+5. 86일 기록 표 — 크림 상자 걷기, 맨 윗선 검정, 머리글 12/500 faint 한 줄 */
#main-content .ah-tbl { background: transparent !important; border: 0 !important; border-top: 1px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; }
#main-content .ah-tbl thead th { background: transparent !important; font-size: 12px !important; font-weight: 500 !important; color: var(--ink-faint) !important; padding: 10px 6px 9px !important; border-bottom: 1px solid var(--line) !important; vertical-align: bottom !important; }
#main-content .ah-tbl thead th small { display: inline !important; margin-left: 4px !important; font-size: 12px !important; font-weight: 500 !important; color: var(--ink-faint) !important; }
#main-content .ah-tbl tbody td { padding: 12px 6px !important; }
#main-content .ah-tbl th:first-child, #main-content .ah-tbl td:first-child { padding-left: 4px !important; }
#main-content .ah-tbl tbody tr:hover > * { background: var(--surface-2) !important; }

/* 매입 최고가 / 구매 최저가 — 이동 링크 두 칸(목록)이라 윗선 회색 */
#main-content .bsq { margin-top: 24px !important; padding: 0 !important; }
#main-content .bsq-btn { border-top: 1px solid var(--line) !important; }

/* 카테고리별 6칸 — 카드 목록이라 윗선 회색 */
#main-content .area-dept-grid { border-top: 1px solid var(--line) !important; }

/* 2+4+5. 매입가/구매가 비교 매트릭스 — 크림 바탕·회색 머리글·고정열 그림자 걷기, 표 두 벌 사이 24 */
#main-content .area-cmp-section .rate-table { background: transparent !important; border-top: 1px solid var(--ink) !important; }
#main-content .area-cmp-section .rate-table-wrap + .rate-table-wrap { margin-top: 24px !important; }
#main-content .area-cmp-section .rate-table thead th { background: transparent !important; box-shadow: none !important; font-size: 12px !important; font-weight: 500 !important; color: var(--ink-faint) !important; padding: 10px 6px 9px !important; border-bottom: 1px solid var(--line) !important; }
#main-content .area-cmp-section .rate-table td { background: transparent !important; box-shadow: none !important; padding: 12px 6px !important; border-bottom: 1px solid var(--line-soft) !important; }
#main-content .area-cmp-section .rate-table th:first-child, #main-content .area-cmp-section .rate-table td:first-child { padding-left: 4px !important; }
#main-content .area-cmp-section .rate-platform { font-size: 14px !important; font-weight: 700 !important; }
#main-content .area-cmp-section .rate-cell { font-size: 13px !important; }
#main-content .area-cmp-section .rate-table tbody tr:hover > * { background: var(--surface-2) !important; }

/* 목록들 — 맨 윗선 회색 */
#main-content .ax-grid { border-top: 1px solid var(--line) !important; }
#main-content .area-faq-section .section-title + .area-faq { border-top: 1px solid var(--line) !important; }
#main-content .area-faq > summary { padding-top: 14px !important; padding-bottom: 14px !important; font-size: 15px !important; }
#main-content .area-faq > summary:hover { background: var(--surface-2) !important; }
#main-content .related-section .rl-wrap { border-top: 1px solid var(--line) !important; }
#main-content .rl-link { padding: 12px 4px !important; }
#main-content .rl-link:hover { background: var(--surface-2) !important; }

/* "더 보기" 줄 — 위 여백 통일 */
#main-content .acp-fold { margin-top: 0 !important; }
/* 버그: 매트릭스 거래소 이름 링크가 44px 터치 높이라 행이 70px 로 늘고 숫자 칸만 위로 붙음 */
#main-content .area-cmp-section .rate-platform a { display: inline !important; min-height: 0 !important; padding: 0 !important; }
#main-content .area-cmp-section .rate-table td, #main-content .ah-tbl td { vertical-align: middle !important; }

/* ===================================================================
   2026-09-29 GS "시세 순위나 주요 카드는 웜크림 배경 카드 유지" — 데이터 순위표·시세표·주요 카드만 다시 카드로
   (var(--cream) · 1px var(--line) · radius 16 · 그림자 없음 · 안쪽 4px 16px · 맨 윗 검정선 없음 · 마지막 행 아랫선 없음)
   =================================================================== */
/* 86일 기록 표 */
#main-content .ah-tbl { background: var(--cream) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; padding: 4px 16px !important; overflow: hidden !important; }
#main-content .ah-tbl tbody tr:last-child > * { border-bottom: 0 !important; }

/* 백화점 지류 매입가/구매가 비교 표 2벌 — table 자체를 카드로 */
#main-content .area-cmp-section .rate-table { border-collapse: separate !important; border-spacing: 0 !important; background: var(--cream) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; padding: 4px 16px !important; }
#main-content .area-cmp-section .rate-table tbody tr:last-child > * { border-bottom: 0 !important; }

/* 매입 최고가 / 구매 최저가 두 칸 */
#main-content .bsq { background: var(--cream) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; padding: 4px 16px !important; overflow: hidden !important; }
#main-content .bsq-btn { border-top: 0 !important; border-bottom: 0 !important; }

/* 카테고리별 최고 매입가·최저 구매가 6칸 — 한 장의 카드, 안쪽 구분선 유지 */
#main-content .area-dept-grid { background: var(--cream) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; padding: 4px 16px !important; overflow: hidden !important; }
#main-content .area-dept-grid > .area-dept-card:nth-last-child(-n+2) { border-bottom: 0 !important; }

/* 이웃 권역과 오늘 매입가 비교 */
#main-content .area-nbr-list { background: var(--cream) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; padding: 4px 16px !important; overflow: hidden !important; }
#main-content .area-nbr-row:last-child { border-bottom: 0 !important; }

/* ===================================================================
   2026-09-29 GS 좁힘 — 웜크림 카드는 핵심만: 명동 백화점 시세표(.area-rate-table)·거래소 29곳 목록(.area-grid).
   나머지(86일 기록·매입/구매 두 칸·카테고리 6칸·비교 표 2벌·이웃 권역)는 다시 평평하게.
   =================================================================== */
#main-content .ah-tbl { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; padding: 0 !important; overflow: visible !important; }
#main-content .ah-tbl tbody tr:last-child > * { border-bottom: 1px solid var(--line-soft) !important; }

#main-content .area-cmp-section .rate-table { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; padding: 0 !important; }
#main-content .area-cmp-section .rate-table tbody tr:last-child > * { border-bottom: 1px solid var(--line-soft) !important; }

#main-content .bsq { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; overflow: visible !important; }
#main-content .bsq-btn { border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line-soft) !important; }

#main-content .area-dept-grid { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; padding: 0 !important; overflow: visible !important; }
#main-content .area-dept-grid > .area-dept-card:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-soft) !important; }

#main-content .area-nbr-list { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; padding: 0 !important; overflow: visible !important; }
#main-content .area-nbr-row:last-child { border-bottom: 1px solid var(--line-soft) !important; }