/* 검색용 글 페이지 (/guide, /shop/<id>) — 지도와 같은 만화풍 팔레트, 읽기 중심 */
:root {
  --ink: #24150d;
  --ink-2: #4a3326;
  --paper: #fffaf0;
  --cream: #fff1d6;
  --orange: #ff7a2f;
  --orange-deep: #c94e0c;
  --muted: #7a6152;
  --line: #e9d6b8;
  --shadow: 4px 4px 0 var(--ink);
  --shadow-sm: 2px 2px 0 var(--ink);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.7 'Huninn', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  color: var(--ink);
  background: var(--cream);
}
[lang='ko'] { font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
a { color: var(--orange-deep); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 6px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2 { line-height: 1.3; text-wrap: balance; }

.top {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: var(--paper); border-bottom: 3px solid var(--ink);
}
.brand { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; color: var(--ink); text-decoration: none; }
.brand .bowl { width: 30px; height: 30px; }
.top-cta, .cta {
  display: inline-block; font-weight: 700; color: var(--ink); text-decoration: none;
  background: var(--orange); border: 3px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow-sm);
}
.top-cta { padding: 5px 14px; font-size: 14px; }
.cta { display: block; margin: 20px 0; padding: 13px 18px; font-size: 16px; text-align: center; box-shadow: var(--shadow); }
.top-cta:active, .cta:active { transform: translate(2px, 2px); box-shadow: none; }

.wrap { max-width: 760px; margin: 0 auto; padding: 18px 16px 40px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); }

.intro h1, .shop h1 { margin: 10px 0 8px; font-size: clamp(26px, 6vw, 34px); }
.lead { margin: 0; font-size: 17px; color: var(--ink-2); }
.h1-ko { display: block; margin-top: 2px; font-size: 18px; font-weight: 500; color: var(--muted); }

.jump ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jump a {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 12px; font-size: 15px; font-weight: 700;
  color: var(--ink); text-decoration: none; background: var(--paper); border: 2px solid var(--ink); border-radius: 999px;
}
.jump small { font-size: 12px; color: var(--muted); }

.box {
  margin: 26px 0; padding: 16px 18px; background: var(--paper);
  border: 3px solid var(--ink); border-radius: 18px; box-shadow: var(--shadow);
}
.box h2 { margin: 0 0 8px; font-size: 20px; }
.box > p { margin: 0 0 10px; color: var(--ink-2); }
.quick dl { display: grid; gap: 10px; margin: 0; }
.quick dt { font-weight: 700; }
.quick dd { margin: 0; }

.area { margin-top: 34px; scroll-margin-top: 70px; }
.area h2, .others h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 12px; font-size: 22px; }
.area h2 [lang='ko'] { font-size: 15px; font-weight: 500; color: var(--muted); }
.area h2 small { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--muted); }

.cards { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.card a {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 14px;
  color: inherit; text-decoration: none; background: var(--paper);
  border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.card a:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.card-pic { width: 72px; height: 72px; overflow: hidden; border: 2px solid var(--ink); border-radius: 50%; background: var(--cream); }
.card-pic img { width: 100%; height: 100%; object-fit: cover; }
.card-pic .bowl { width: 100%; height: 100%; padding: 8px; }
.card-text { display: grid; gap: 3px; min-width: 0; }
.card-name { font-size: 18px; }
.card-ko { font-size: 14px; color: var(--muted); }
.card-meta { font-size: 14px; color: var(--ink-2); }
.card-tip { font-size: 14px; color: var(--muted); }

.awards { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; padding: 0; list-style: none; }
.aw { padding: 1px 10px; font-size: 13px; font-weight: 700; border: 2px solid var(--ink); border-radius: 999px; }
.aw-m { color: #fff; background: #b8142b; }
.aw-b { color: #fff; background: #1f4fa3; }
.aw-r { color: #fff; background: #d63a2f; }

.hero { margin: 14px 0 6px; overflow: hidden; border: 3px solid var(--ink); border-radius: 20px; box-shadow: var(--shadow); background: var(--paper); }
.hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.hero figcaption { padding: 6px 12px; font-size: 12px; color: var(--muted); border-top: 2px solid var(--ink); }
.hero-empty { display: grid; place-items: center; height: 140px; }
.hero-empty .bowl { width: 96px; height: 96px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; padding: 0; list-style: none; }
.tags li { padding: 2px 10px; font-size: 14px; background: var(--paper); border: 2px dashed var(--line); border-radius: 999px; }
.tip { margin: 10px 0; font-size: 17px; }

.facts { display: grid; margin: 16px 0; background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; overflow: hidden; }
.facts div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; padding: 11px 16px; }
.facts div + div { border-top: 2px solid var(--line); }
.facts dt { font-weight: 700; color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts small { display: block; font-size: 13px; color: var(--muted); }

.desc h2 { margin: 24px 0 6px; font-size: 20px; }
.desc p { margin: 0 0 8px; color: var(--ink-2); }
.desc .src, .note { font-size: 13px; color: var(--muted); }

.phrases { width: 100%; border-collapse: collapse; }
.phrases td { padding: 8px 6px; vertical-align: top; border-top: 2px solid var(--line); }
.phrases td:first-child { font-size: 18px; font-weight: 700; }
.phrases td:last-child { color: var(--ink-2); }
.how { margin: 0; padding-left: 1.3em; }
.how li + li { margin-top: 6px; }
.more { margin: 12px 0 0; font-weight: 700; }
.others { margin-top: 34px; }

.foot { padding: 20px 16px 36px; padding-bottom: max(36px, env(safe-area-inset-bottom)); font-size: 13px; color: var(--muted); text-align: center; border-top: 3px solid var(--ink); background: var(--paper); }
.foot p { max-width: 760px; margin: 0 auto 8px; }

@media (prefers-reduced-motion: reduce) { .card a { transition: none; } }