/* 全台市集：手繪紙本風。顏色只在本頁使用，不進 tokens.css。 */
.markets-page {
    --mk-paper: #fbf4e6; --mk-ink: #3b2f2a; --mk-tomato: #e8553e; --mk-mustard: #f2a541; --mk-muted: #8a7a70;
    --mk-t0: #f6c89f; --mk-t1: #f2dfb4; --mk-t2: #cfe3c1; --mk-t3: #f5b7a5; --mk-t4: #d9cdea; --mk-t5: #bfe0e2;
    display: block;
    background: var(--mk-paper); color: var(--mk-ink);
    padding: 0 var(--space-4, 1rem) var(--space-12, 3rem);
}
.mk-app { max-width: 1200px; margin: 0 auto; }
.mk-app.is-loading { opacity: .6; transition: opacity .15s; }
.mk-hero { display: grid; grid-template-columns: 1fr; gap: var(--space-4, 1rem); align-items: center; }

/* 地圖 */
.mk-map { margin: .5rem 0 0; }
.mk-map svg { width: 100%; height: 240px; display: block; }   /* 手機：整座島縮小置中 */
.mk-county { stroke: var(--mk-ink); stroke-width: 2; stroke-linejoin: round; }
/* 地圖縣市＝六角磚的捷徑：滑過亮起（與對應六角磚同步），點了篩選 */
.mk-county { cursor: pointer; transition: fill .15s; }
.mk-county.is-hover, .mk-county:hover { fill: var(--mk-mustard); }
.mk-tents { pointer-events: none; }
.mk-hero { position: relative; }
.mk-tip { position: absolute; z-index: 5; pointer-events: none; padding: 4px 10px; border: 2px solid var(--mk-ink);
    border-radius: 999px; background: #fff; font: 700 13px var(--font-sans); white-space: nowrap;
    box-shadow: 2px 2px 0 var(--mk-ink); transform: translate(-50%, calc(-100% - 12px)); }
.mk-tip b { color: var(--mk-tomato); }
.mk-county--t0 { fill: var(--mk-t0); } .mk-county--t1 { fill: var(--mk-t1); } .mk-county--t2 { fill: var(--mk-t2); }
.mk-county--t3 { fill: var(--mk-t3); } .mk-county--t4 { fill: var(--mk-t4); } .mk-county--t5 { fill: var(--mk-t5); }
.mk-inset { fill: none; stroke: var(--mk-muted); stroke-dasharray: 4 4; opacity: .5; }
.mk-inset__label { font: 12px var(--font-sans); fill: var(--mk-muted); }
.mk-tents path { stroke: var(--mk-ink); stroke-width: 1.4; opacity: .55; }
.mk-tents__roof { fill: var(--mk-mustard); }
.mk-tents__flap { fill: #fff; stroke-width: 1.1; }
.mk-tents path.mk-tents--on { opacity: 1; }
.mk-tents__roof.mk-tents--on { fill: var(--mk-tomato); }
.mk-tents--city .mk-tents__roof.mk-tents--on { fill: #fff; }    /* 選了縣市：底色已是番茄紅，帳篷改白才看得到 */

/* 標題區 */
.mk-kicker { font-size: var(--font-size-xs); letter-spacing: .2em; color: var(--mk-muted); margin: 0; }
.mk-title { font: 900 1.6rem/1.2 var(--font-display); margin: .25rem 0 .5rem; }
.mk-summary { margin: 0 0 .75rem; }
.mk-summary b { color: var(--mk-tomato); }

/* 六角磚：桌機常駐在首屏右側；手機收進底部抽屜 */
.mk-hex { width: 100%; max-width: 360px; display: block; margin: 0 auto; }
.mk-hex__cell polygon { stroke: var(--mk-ink); stroke-width: 2; transition: fill .15s, stroke-width .15s; }
.mk-hex__cell--t0 polygon { fill: var(--mk-t0); } .mk-hex__cell--t1 polygon { fill: var(--mk-t1); }
.mk-hex__cell--t2 polygon { fill: var(--mk-t2); } .mk-hex__cell--t3 polygon { fill: var(--mk-t3); }
.mk-hex__cell--t4 polygon { fill: var(--mk-t4); } .mk-hex__cell--t5 polygon { fill: var(--mk-t5); }
.mk-hex__cell.is-empty polygon { fill: #efe6d4; }
.mk-hex__cell.is-active polygon { fill: var(--mk-tomato); }
.mk-hex a:hover .mk-hex__cell polygon, .mk-hex a:focus-visible .mk-hex__cell polygon,
.mk-hex a.is-hover .mk-hex__cell polygon { stroke-width: 3.5; }
.mk-hex a.is-hover .mk-hex__cell:not(.is-active) polygon { fill: var(--mk-mustard); }
.mk-hex a:focus-visible { outline: none; }
.mk-hex a:focus-visible .mk-hex__cell polygon { stroke: var(--mk-tomato); }
.mk-results:focus { outline: none; }
.mk-hex__name { font: 900 11px var(--font-display); text-anchor: middle; fill: var(--mk-ink); }
.mk-hex__count { font: 700 13px var(--font-sans); text-anchor: middle; fill: var(--mk-ink); }
.mk-hex__cell.is-empty text { fill: #b3a596; }
.mk-hex__cell.is-active text { fill: #fff; }
.mk-sheet__head { display: none; }
.mk-sheet__all { display: block; text-align: center; color: var(--mk-tomato); font-weight: 700; margin-top: .25rem; }
.mk-near-desktop { display: none; margin: .75rem auto 0; padding: .5rem 1rem; border: 2px solid var(--mk-ink);
    border-radius: 999px; background: #fff; color: var(--mk-ink); font-weight: 700; cursor: pointer;
    box-shadow: 3px 3px 0 var(--mk-tomato); }

/* 日期條 */
.mk-days { display: flex; gap: .5rem; overflow-x: auto; padding: .75rem 0 1rem; scrollbar-width: thin; }
.mk-day { flex: none; min-width: 3.4rem; min-height: 44px; border: 2px solid var(--mk-ink); border-radius: 10px;
    background: #fff; text-align: center; padding: .25rem .4rem; color: var(--mk-ink); text-decoration: none; }
.mk-day span { display: block; font-size: 11px; }
.mk-day b { display: block; font: 900 1.2rem/1.1 var(--font-display); }
.mk-day i { display: block; font-style: normal; font-size: 10px; color: var(--mk-muted); }
.mk-day.is-weekend span { color: var(--mk-tomato); font-weight: 700; }
.mk-day--weekend { display: flex; align-items: center; font-weight: 700; }
.mk-day.is-selected { background: var(--mk-tomato); border-color: var(--mk-tomato); color: #fff; }
.mk-day.is-selected span, .mk-day.is-selected i { color: #fff; }
.mk-day:focus-visible, .mk-pill button:focus-visible, .mk-near-desktop:focus-visible { outline: 3px solid var(--mk-mustard); outline-offset: 2px; }

/* 卡片：紙本墨線 */
.mk-results .event-card { border: 2px solid var(--mk-ink); box-shadow: 3px 3px 0 var(--mk-ink); border-radius: 12px; }
.mk-results .event-card__date { color: var(--mk-tomato); font-weight: 700; }
.mk-more { text-align: center; margin: 1.25rem 0 0; }
.mk-more a { display: inline-block; min-height: 44px; line-height: 40px; padding: 0 1.25rem; border: 2px solid var(--mk-ink);
    border-radius: 999px; background: #fff; color: var(--mk-ink); font-weight: 700; box-shadow: 3px 3px 0 var(--mk-tomato); }
.mk-empty { text-align: center; padding: 2.5rem 1rem; font: 700 1.1rem var(--font-display); }
.mk-empty__next { display: inline-block; margin-top: .75rem; padding: .5rem 1rem; border: 2px solid var(--mk-ink);
    border-radius: 999px; background: #fff; color: var(--mk-ink); box-shadow: 3px 3px 0 var(--mk-tomato); }

/* 浮動膠囊（只有手機） */
.mk-pill { position: fixed; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30; display: flex;
    border: 2px solid var(--mk-ink); border-radius: 999px; overflow: hidden; box-shadow: 3px 3px 0 var(--mk-ink); background: #fff; }
.mk-pill button { border: 0; background: #fff; color: var(--mk-ink); font: 700 14px var(--font-sans);
    min-height: 44px; padding: 0 14px; cursor: pointer; }
.mk-pill button + button { border-left: 2px solid var(--mk-ink); }
.mk-pill button.is-on { background: var(--mk-tomato); color: #fff; }
.mk-credit { max-width: 1200px; margin: 2rem auto 0; font-size: var(--font-size-xs); color: var(--mk-muted); }

@media (max-width: 767px) {
    .mk-filter { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--mk-paper);
        border-top: 2px solid var(--mk-ink); border-radius: 18px 18px 0 0; padding: 12px 16px 24px;
        transform: translateY(105%); visibility: hidden;      /* 關著時不在 Tab 順序裡 */
        transition: transform .2s ease, visibility 0s linear .2s; box-shadow: 0 -8px 24px rgba(59, 47, 42, .18); }
    .mk-sheet-open .mk-filter { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; }
    .mk-lock, .mk-lock body { overflow: hidden; }
    .mk-sheet-open::before { content: ''; position: fixed; inset: 0; background: rgba(59, 47, 42, .35); z-index: 35; }
    .mk-sheet__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px;
        font-size: 12px; color: var(--mk-muted); }
    .mk-sheet__head b { font: 900 16px var(--font-display); color: var(--mk-ink); }
    .mk-results { padding-bottom: 72px; }
    .mk-filter .mk-hex { max-width: 340px; }
}
@media (min-width: 768px) {
    .mk-hero { grid-template-columns: 1fr 1fr; gap: var(--space-8, 2rem); }
    .mk-map { margin: 0; }
    .mk-map svg { height: auto; }
    .mk-title { font-size: var(--font-size-4xl); }
    .mk-pill { display: none; }
    .mk-near-desktop { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    .mk-filter, .mk-hex__cell polygon, .mk-app.is-loading { transition: none; }
}