@charset "UTF-8";
/* ==========================================================================
   台灣拉麵愛好會 — 內容頁樣式 (content.css)
   獨立設計系統，不依賴 style.css / design-system.css
   適用：/about/、/top100/*、/areas.php、店家頁靜態區塊
   ========================================================================== */

:root{
  --rc-ink:#17130f;
  --rc-ink-2:#5d544b;
  --rc-ink-3:#8f8478;
  --rc-paper:#fffdf9;
  --rc-paper-2:#faf5ec;
  --rc-paper-3:#f4ecde;
  --rc-line:#e9dfd1;
  --rc-line-2:#dccfb9;
  --rc-red:#cf3a2e;
  --rc-red-d:#a92a20;
  --rc-gold:#b98a2f;
  --rc-r:18px;
  --rc-r-sm:12px;
  --rc-sh:0 1px 2px rgba(70,45,20,.05),0 10px 30px rgba(70,45,20,.07);
  --rc-sh-h:0 2px 4px rgba(70,45,20,.06),0 18px 44px rgba(70,45,20,.12);
  --rc-serif:"Noto Serif TC",Georgia,"Songti TC","Times New Roman",serif;
  --rc-sans:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --rc-ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.rc-body{
  margin:0;background:var(--rc-paper);color:var(--rc-ink);
  font-family:var(--rc-sans);font-size:16px;line-height:1.8;
  letter-spacing:.01em;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* 注意：這裡刻意用 :where() 把特異度壓到 0，
   否則 body.rc-body a (0,1,2) 會蓋掉 a.rc-btn-p / .rc-cta a 的 color:#fff，
   造成「深底白字」變成「深底深字」＝文字隱形。 */
:where(body.rc-body) a{color:inherit;text-decoration:none}
body.rc-body img{max-width:100%;height:auto;display:block}
body.rc-body ::selection{background:rgba(207,58,46,.16)}

.rc-wrap{max-width:1080px;margin:0 auto;padding:0 24px;width:100%}

/* ── 跳至主要內容 ───────────────────────────────────────── */
a.rc-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--rc-ink);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;font-size:14px;
}
a.rc-skip:focus{left:0}
body.rc-body :focus-visible{outline:2px solid var(--rc-red);outline-offset:3px;border-radius:4px}

/* ── 麵包屑 ─────────────────────────────────────────────── */
nav.rc-crumbs{font-size:13.5px;color:var(--rc-ink-3);margin:0 0 18px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
nav.rc-crumbs a{color:var(--rc-ink-3);border-bottom:1px solid transparent;transition:.18s}
nav.rc-crumbs a:hover{color:var(--rc-red);border-color:var(--rc-red)}
nav.rc-crumbs .rc-crumbsep{color:var(--rc-line-2)}
nav.rc-crumbs .rc-crumbhere{color:var(--rc-ink-2)}

/* ── Header ─────────────────────────────────────────────── */
header.rc-top{
  position:sticky;top:0;z-index:60;
  background:rgba(255,253,249,.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--rc-line);
}
.rc-top-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px}
a.rc-brand{
  display:flex;align-items:center;gap:11px;
  font-family:var(--rc-serif);font-weight:900;font-size:19px;letter-spacing:.01em;
  white-space:nowrap;
}
.rc-brand .rc-mark{
  width:34px;height:34px;border-radius:11px;flex:none;
  background:linear-gradient(150deg,#e4572e,#b3271c);
  display:grid;place-items:center;color:#fff;
  box-shadow:0 4px 12px rgba(190,50,30,.28);
}
.rc-mark svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
nav.rc-navlinks{display:flex;gap:4px;align-items:center}
.rc-navlinks a{padding:9px 14px;border-radius:999px;font-size:14.5px;color:var(--rc-ink-2);transition:.2s var(--rc-ease)}
.rc-navlinks a:hover{background:var(--rc-paper-3);color:var(--rc-ink)}
.rc-navlinks a.on{color:var(--rc-ink);font-weight:700;background:var(--rc-paper-3)}
.rc-navlinks a.rc-cta-link{background:var(--rc-ink);color:#fff;padding:10px 18px;font-weight:500}
.rc-navlinks a.rc-cta-link:hover{background:var(--rc-red);color:#fff}

/* ── Hero ───────────────────────────────────────────────── */
.rc-hero{padding:70px 0 6px;position:relative;overflow:hidden}
.rc-hero::before{
  content:"";position:absolute;left:-10%;right:-10%;top:-45%;height:520px;pointer-events:none;
  background:radial-gradient(60% 70% at 22% 30%,rgba(228,87,46,.13),transparent 62%),
             radial-gradient(50% 60% at 82% 10%,rgba(185,138,47,.14),transparent 60%);
}
.rc-hero--sm{padding:44px 0 0}
.rc-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.14em;
  color:var(--rc-red);font-weight:700;text-transform:uppercase;margin-bottom:16px;
}
.rc-eyebrow::before{content:"";width:26px;height:2px;background:var(--rc-red);border-radius:2px;flex:none}
h1.rc-h1{
  font-family:var(--rc-serif);font-weight:900;font-size:clamp(30px,4.4vw,50px);
  line-height:1.25;letter-spacing:-.015em;margin:0 0 18px;position:relative;
}
h1.rc-h1 em{font-style:normal;color:var(--rc-red);white-space:nowrap}
h1.rc-h1 em.rc-u{position:relative}
h1.rc-h1 em.rc-u::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.32em;
  background:rgba(207,58,46,.14);border-radius:3px;z-index:-1;
}
h1.rc-h1--sm{font-size:clamp(26px,3.4vw,38px)}
h2.rc-h2{
  font-family:var(--rc-serif);font-weight:900;font-size:clamp(21px,2.5vw,29px);
  letter-spacing:-.01em;margin:52px 0 16px;padding-bottom:12px;
  border-bottom:1px solid var(--rc-line);
}
h2.rc-h2:first-child{margin-top:0}
h3.rc-h3{font-family:var(--rc-serif);font-weight:700;font-size:19px;margin:32px 0 10px}
.rc-lead{font-size:17px;line-height:1.95;color:var(--rc-ink-2);max-width:46em;margin:0 0 14px}
.rc-lead a{color:var(--rc-red);border-bottom:1px solid rgba(207,58,46,.3)}
.rc-lead a:hover{border-color:var(--rc-red)}
p.rc-p{font-size:16px;line-height:1.95;color:var(--rc-ink-2);max-width:46em;margin:0 0 14px}
p.rc-p a{color:var(--rc-red);border-bottom:1px solid rgba(207,58,46,.3)}
.rc-acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:26px 0 0}
a.rc-btn{
  display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:999px;
  font-size:15.5px;font-weight:500;transition:.22s var(--rc-ease);border:1px solid transparent;
}
a.rc-btn-p{background:var(--rc-ink);color:#fff;box-shadow:var(--rc-sh)}
a.rc-btn-p:hover{background:var(--rc-red);transform:translateY(-1px);box-shadow:var(--rc-sh-h)}
a.rc-btn-s{background:transparent;border-color:var(--rc-line-2);color:var(--rc-ink)}
a.rc-btn-s:hover{border-color:var(--rc-ink);transform:translateY(-1px)}

/* ── 提示框 ─────────────────────────────────────────────── */
.rc-note{
  font-size:14px;line-height:1.85;color:#7a5a12;
  background:linear-gradient(180deg,#fff9ec,#fdf3dc);
  border:1px solid #f0dcae;border-left:3px solid var(--rc-gold);
  border-radius:10px;padding:13px 17px;margin:20px 0 24px;max-width:52em;
}
.rc-note b{color:#6b4c0a}

/* ── 數字卡 ─────────────────────────────────────────────── */
.rc-metrics{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rc-line);border:1px solid var(--rc-line);
  border-radius:var(--rc-r);overflow:hidden;margin:40px 0 0;
}
.rc-metric{background:var(--rc-paper);padding:26px 24px}
.rc-metric b{
  display:block;font-family:var(--rc-serif);font-weight:900;
  font-size:clamp(30px,4vw,42px);line-height:1.1;color:var(--rc-ink);
  font-variant-numeric:tabular-nums;
}
.rc-metric b span{font-size:.5em;font-weight:700;color:var(--rc-ink-3);margin-left:4px}
.rc-metric i{display:block;font-style:normal;font-size:13.5px;color:var(--rc-ink-3);margin-top:6px;letter-spacing:.02em}

/* ── 卡片 ───────────────────────────────────────────────── */
.rc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:20px;margin:26px 0 0}
a.rc-card{
  display:block;background:var(--rc-paper);border:1px solid var(--rc-line);
  border-radius:var(--rc-r);padding:28px 26px 26px;
  transition:.26s var(--rc-ease);
}
a.rc-card:hover{transform:translateY(-4px);box-shadow:var(--rc-sh-h);border-color:var(--rc-line-2)}
a.rc-card .rc-ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  font-size:21px;background:var(--rc-paper-3);color:var(--rc-red);margin-bottom:18px;
}
.rc-card h2,.rc-card h3{font-family:var(--rc-serif);font-size:20px;font-weight:700;margin:0 0 10px;line-height:1.45}
.rc-card p{margin:0;color:var(--rc-ink-2);font-size:15px;line-height:1.85}
.rc-card .rc-go{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:14.5px;color:var(--rc-red);font-weight:500}
.rc-card .rc-go::after{content:"→";transition:.2s var(--rc-ease)}
a.rc-card:hover .rc-go::after{transform:translateX(4px)}
.rc-card .rc-tag{
  display:inline-block;font-size:12px;letter-spacing:.08em;color:var(--rc-ink-3);
  border:1px solid var(--rc-line-2);border-radius:999px;padding:3px 11px;margin-bottom:12px;
}

/* ── 面板 / 表格 ────────────────────────────────────────── */
.rc-panel{
  background:var(--rc-paper);border:1px solid var(--rc-line);border-radius:var(--rc-r);
  overflow:hidden;box-shadow:var(--rc-sh);margin:24px 0 0;
}
.rc-panel-top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:18px 24px;border-bottom:1px solid var(--rc-line);background:var(--rc-paper-2);
}
.rc-panel-top h2,.rc-panel-top h3{margin:0;font-family:var(--rc-serif);font-size:18px;font-weight:700;border:0;padding:0}
.rc-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.rc-table{width:100%;border-collapse:collapse;font-size:15.5px}
table.rc-table th,table.rc-table td{
  padding:14px 22px;text-align:left;border-bottom:1px solid var(--rc-line);vertical-align:middle;
}
table.rc-table thead th{
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rc-ink-3);font-weight:700;background:var(--rc-paper);
  position:sticky;top:0;z-index:2;
}
table.rc-table tbody tr{transition:background .15s}
table.rc-table tbody tr:nth-child(even){background:rgba(244,236,222,.32)}
table.rc-table tbody tr:hover{background:var(--rc-paper-3)}
table.rc-table tbody tr:last-child td{border-bottom:none}
td.rc-rank{
  font-family:var(--rc-serif);font-weight:700;font-size:17px;
  width:80px;color:var(--rc-ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;
}
tr.rc-top3 td.rc-rank{color:var(--rc-red)}
.rc-medal{
  display:inline-grid;place-items:center;width:27px;height:27px;border-radius:50%;
  font-size:13.5px;font-weight:700;color:#fff;
}
.rc-medal-1{background:linear-gradient(140deg,#e0a92c,#b8860b)}
.rc-medal-2{background:linear-gradient(140deg,#b9bec6,#8d949e)}
.rc-medal-3{background:linear-gradient(140deg,#cf9a6a,#a8713f)}
td.rc-name{font-weight:500;line-height:1.6}
td.rc-name a{border-bottom:1px solid rgba(23,19,15,.18);transition:.18s}
td.rc-name a:hover{color:var(--rc-red);border-color:var(--rc-red)}
td.rc-name span.rc-nolink{color:var(--rc-ink-2)}
td.rc-area{color:var(--rc-ink-3);font-size:14px;white-space:nowrap;width:132px}
td.rc-votes{
  text-align:right;font-variant-numeric:tabular-nums;color:var(--rc-ink-2);
  width:96px;white-space:nowrap;
}

/* ── 年度切換 ───────────────────────────────────────────── */
nav.rc-yearbar{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 0}
.rc-yearbar a{
  padding:9px 20px;border-radius:999px;border:1px solid var(--rc-line-2);
  font-size:14.5px;color:var(--rc-ink-2);transition:.2s var(--rc-ease);
}
.rc-yearbar a:hover{border-color:var(--rc-ink);color:var(--rc-ink)}
.rc-yearbar a.on{background:var(--rc-ink);color:#fff;border-color:var(--rc-ink);font-weight:700}

/* ── 百大徽章（店家頁用） ───────────────────────────────── */
.rc-badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rc-badge{
  display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;
  font-size:13px;font-weight:500;
  background:linear-gradient(180deg,#fdf6e6,#f8eccf);
  border:1px solid #e6cf9a;color:#8a6415;transition:.2s;
}
.rc-badge:hover{border-color:var(--rc-gold);box-shadow:0 3px 10px rgba(185,138,47,.2)}
.rc-badge--1{background:linear-gradient(180deg,#fdf3d8,#f7e3ab);border-color:#ddc07a;color:#7d5a0d;font-weight:700}

/* ── 店家摘要卡 ─────────────────────────────────────────── */
.rc-shop{background:var(--rc-paper);border:1px solid var(--rc-line);border-radius:var(--rc-r);
  overflow:hidden;box-shadow:var(--rc-sh);max-width:680px;margin:24px 0 0}
.rc-shop-top{padding:26px 28px 20px}
.rc-shop-top h3{font-family:var(--rc-serif);font-size:25px;font-weight:900;margin:0 0 6px;letter-spacing:-.01em}
.rc-shop-meta{color:var(--rc-ink-3);font-size:14.5px;margin:0 0 16px}
.rc-shop-row{
  display:flex;gap:28px;flex-wrap:wrap;padding:18px 28px;
  border-top:1px solid var(--rc-line);background:var(--rc-paper-2);
}
.rc-shop-row div{font-size:13.5px;color:var(--rc-ink-3)}
.rc-shop-row b{display:block;font-family:var(--rc-serif);font-size:20px;color:var(--rc-ink);margin-bottom:2px}

/* ── 縣市索引（areas.php） ─────────────────────────────── */
.rc-cityhead{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:48px 0 16px;padding-bottom:13px;border-bottom:1px solid var(--rc-line);
  scroll-margin-top:88px;
}
.rc-cityhead h2{margin:0;font-family:var(--rc-serif);font-weight:900;font-size:clamp(20px,2.4vw,27px);letter-spacing:-.01em}
.rc-citycount{font-size:13.5px;color:var(--rc-ink-3)}
ul.rc-areas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:10px}
ul.rc-areas li a{
  display:flex;flex-direction:column;gap:3px;
  padding:14px 17px;background:var(--rc-paper);border:1px solid var(--rc-line);
  border-radius:14px;transition:.22s var(--rc-ease);
}
ul.rc-areas li a:hover{border-color:var(--rc-red);transform:translateY(-2px);box-shadow:var(--rc-sh)}
ul.rc-areas .rc-areas-n{font-size:15.5px;font-weight:600;line-height:1.55;overflow-wrap:anywhere}
ul.rc-areas .rc-areas-m{font-size:13px;color:var(--rc-ink-3);overflow-wrap:anywhere}

/* ── CTA 區 ─────────────────────────────────────────────── */
.rc-cta{margin:46px 0 0;text-align:center}
.rc-cta a{
  display:inline-block;padding:15px 38px;border-radius:999px;background:var(--rc-red);
  color:#fff;font-size:16px;font-weight:600;transition:.22s var(--rc-ease);
  box-shadow:0 8px 22px rgba(190,50,30,.24);
}
.rc-cta a:hover{background:var(--rc-red-d);transform:translateY(-2px);box-shadow:0 14px 30px rgba(190,50,30,.3)}

/* ── Footer ─────────────────────────────────────────────── */
footer.rc-foot{background:var(--rc-ink);color:#cfc4b4;margin-top:76px;padding:56px 0 40px;font-size:14.5px}
.rc-foot-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px}
.rc-foot h4{color:#fff;font-family:var(--rc-serif);font-size:15.5px;margin:0 0 14px;font-weight:700;letter-spacing:.02em}
.rc-foot a{color:#cfc4b4;display:block;padding:4px 0;transition:.18s}
.rc-foot a:hover{color:#fff}
.rc-foot .rc-footbrand{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--rc-serif);
  font-weight:900;font-size:17px;margin-bottom:12px}
.rc-foot .rc-footbrand .rc-mark{
  width:32px;height:32px;border-radius:10px;flex:none;background:linear-gradient(150deg,#e4572e,#b3271c);
  display:grid;place-items:center;
}
.rc-foot .rc-footbrand .rc-mark svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rc-foot p{margin:0 0 10px;line-height:1.9}
.rc-foot-fine{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  color:#9a8f80;font-size:13px;line-height:1.9}
.rc-foot-fine a{display:inline;color:#bdb2a2;border-bottom:1px solid rgba(255,255,255,.2)}
.rc-foot-fine a:hover{color:#fff}

/* ── 響應式 ─────────────────────────────────────────────── */
@media (max-width:860px){
  .rc-wrap{padding:0 18px}
  .rc-navlinks a:not(.on):not(.rc-cta-link){display:none}
  .rc-metrics{grid-template-columns:1fr}
  .rc-metric{border-bottom:1px solid var(--rc-line)}
  .rc-metric:last-child{border-bottom:none}
  .rc-hero{padding:44px 0 0}
  .rc-hero--sm{padding:30px 0 0}
  h1.rc-h1{font-size:clamp(26px,7vw,34px)}
  h2.rc-h2{margin-top:40px}
  table.rc-table th,table.rc-table td{padding:12px 13px}
  table.rc-table{font-size:14.5px}
  td.rc-area{display:none}
  td.rc-votes{width:64px}
  td.rc-rank{width:58px;font-size:15.5px}
  .rc-medal{width:24px;height:24px;font-size:12px}
  .rc-shop-top,.rc-shop-row{padding-left:20px;padding-right:20px}
  .rc-foot-cols{grid-template-columns:1fr;gap:26px}
  footer.rc-foot{margin-top:54px;padding:42px 0 32px}
  .rc-panel-top{padding:15px 18px}
}
@media (max-width:420px){
  .rc-brand{font-size:17px}
  .rc-brand .rc-mark{width:30px;height:30px;border-radius:9px}
}

/* ── 列印 ───────────────────────────────────────────────── */
@media print{
  header.rc-top,footer.rc-foot,.rc-cta,.rc-yearbar{display:none}
  body.rc-body{background:#fff}
  a.rc-card{break-inside:avoid}
}