/*
 * 맛집 가이드 마감 레이어 (2026-08)
 *
 * 색은 styles.css / new-map.css에서 이미 호주장터 팔레트로 옮겼고,
 * 이 파일은 그 위에 브랜드 서체와 한지 질감, 카드 정리만 얹는다.
 * 레이아웃·위치·표시여부는 건드리지 않는다. 지도 동작에 영향이 없어야 하기 때문이다.
 * 반드시 다른 스타일시트보다 나중에 불러온다.
 */

:root {
    --mj-paper: #faf3e1;
    --mj-paper-deep: #f3e4c8;
    --mj-ink: #3a2415;
    --mj-ink-soft: #6b4a2f;
    --mj-seal: #8c1c13;
    --mj-brand: #c05f10;
    --mj-line: rgba(90, 45, 20, 0.16);
    --mj-serif: 'Gowun Batang', 'Noto Serif KR', serif;
}

/* ── 종이 질감 바탕 ─────────────────────────────── */
body {
    background-color: var(--mj-paper);
    background-image:
        radial-gradient(ellipse at 15% 0%, rgba(255, 255, 255, 0.55), transparent 55%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.45 0 0 0 0 0.32 0 0 0 0 0.18 0 0 0 0.04 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
    color: var(--mj-ink);
}

/* ── 제목은 전통 서체로 ─────────────────────────── */
h1, h2, h3,
.site-title,
.map-title,
.modal-title,
.section-title {
    font-family: var(--mj-serif);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mj-ink);
}

/* 로고 옆 브랜드명은 도장 적색으로 통일 */
.brand-logo + *,
.logo-text {
    color: var(--mj-seal);
}

/* ── 헤더: 얇은 괘선으로 정리 ───────────────────── */
header,
.site-header {
    border-bottom: 1px solid var(--mj-line);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

/* ── 카드: 그림자를 줄이고 종이 위 인쇄물처럼 ───── */
.restaurant-card,
.category-card,
.info-card,
.modern-info-card,
.community-card {
    background: #fffdf7;
    border: 1px solid var(--mj-line);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(90, 45, 20, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.restaurant-card:hover,
.category-card:hover,
.community-card:hover {
    transform: translateY(-2px);
    border-color: rgba(192, 95, 16, 0.45);
    box-shadow: 0 10px 24px rgba(90, 45, 20, 0.12);
}

/* 카드 안 제목 */
.restaurant-card h3,
.restaurant-name {
    font-family: var(--mj-serif);
    font-weight: 700;
}

/* ── 버튼: 도장 느낌의 각진 라운드 ──────────────── */
.nav-button,
.view-btn,
.category-filter-btn,
.floating-control-btn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.nav-button {
    border: 1.5px solid rgba(192, 95, 16, 0.35);
}

.nav-button:hover {
    border-color: var(--mj-brand);
}

/* 활성 상태는 도장 적색 계열로 명확히 */
.view-btn.active,
.category-card.active {
    background: var(--mj-brand);
    border-color: var(--mj-brand);
    color: #fdf7ea;
}

/* ── 카테고리 뱃지 ──────────────────────────────── */
.category-count {
    background: rgba(192, 95, 16, 0.12);
    color: var(--mj-brand);
    border-radius: 999px;
    font-weight: 700;
}

/* ── 추천자 칩 ──────────────────────────────────── */
.recommender-item,
.recommender-card {
    background: #fffdf7;
    border: 1px solid var(--mj-line);
    border-radius: 999px;
}

/* ── 지도 화면: 헤더를 본문과 같은 톤으로 ───────── */
.map-header {
    background: linear-gradient(180deg, #fdf7ea 0%, #f6e8ce 100%);
    border-bottom: 1px solid var(--mj-line);
}

.map-title {
    color: var(--mj-ink);
}

/* 지도 위 떠 있는 버튼은 종이 카드처럼.
   단 '현재위치'처럼 흰 글씨를 쓰는 채움형 버튼은 제외해야 글자가 사라지지 않는다. */
.floating-control-btn:not(.location-btn),
.category-popup-btn {
    background: rgba(255, 253, 247, 0.96);
    border: 1px solid var(--mj-line);
    box-shadow: 0 4px 14px rgba(90, 45, 20, 0.14);
}

/* 채움형 버튼은 브랜드색으로 */
.floating-control-btn.location-btn {
    background: var(--mj-brand);
    border: 1px solid var(--mj-brand);
    color: #fdf7ea;
    box-shadow: 0 4px 14px rgba(90, 45, 20, 0.2);
}

.floating-control-btn.location-btn:hover {
    background: #a9520c;
    border-color: #a9520c;
}

/* ── 모달 ───────────────────────────────────────── */
.modal-content {
    background: #fffdf7;
    border: 1px solid var(--mj-line);
    border-radius: 16px;
}

/* ── 읽기 편한 본문 ─────────────────────────────── */
.info-value,
.card-content,
.restaurant-description {
    color: var(--mj-ink-soft);
    line-height: 1.65;
}

/* ── 작은 화면에서 여백 정리 ───────────────────── */
@media (max-width: 768px) {
    .restaurant-card,
    .category-card {
        border-radius: 12px;
    }

    h1, .site-title {
        letter-spacing: -0.02em;
    }
}