/* quidafoodie.blog — site.css
   종이색 바탕, 먹색 글자, 강조색 하나(고춧가루 빨강). 모바일 먼저(390px), 본문 폭 720px, 사진 폭 960px.
   글꼴은 레포 정책(scripts/font_policy_check.py)대로 Noto Sans 계열만 쓴다. 장식용 움직임은 없다. */

/* ---------- 색·크기 토큰 ---------- */
:root {
  color-scheme: light dark;
  --paper: #f7f2e8;
  --paper-2: #efe7d7;
  --paper-3: #e5dac6;
  --ink: #1e1a15;
  --ink-2: #4a4238;
  --ink-3: #655c50;
  --rule: #d6cab5;
  --accent: #a3321f;
  --accent-ink: #ffffff;
  /* 주문 카드는 직원에게 내미는 화면이라 어두운 화면에서도 흰 바탕을 유지한다 */
  --card: #ffffff;
  --card-ink: #111111;
  --card-ink-2: #3a3a3a;
  --card-rule: #b5b5b5;
  /* 댓글 입력 칸 바탕 — 종이보다 한 톤 밝게(어두운 화면에서는 한 톤 밝은 먹색) */
  --field: #fffdf8;
  --gutter: 20px;
  --measure: 720px;
  --wide: 960px;
  --wrap: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16140f;
    --paper-2: #211e18;
    --paper-3: #2c2820;
    --ink: #eee8dc;
    --ink-2: #cbc2b3;
    --ink-3: #a69d8e;
    --rule: #3d372e;
    --accent: #f0907a;
    --accent-ink: #1b0e0a;
    --field: #1f1c16;
  }
}
@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

/* ---------- 글꼴 (영어 · 일본어 · 한국어 조각) ---------- */
:root { font-family: 'Noto Sans','Noto Sans KR',sans-serif; }
/* |= 는 'ja'·'ja-JP'처럼 지역 꼬리가 붙은 코드도 잡는다(해외 가게의 local_lang). 중국어(홍콩 등)는 Noto Sans HK —
   base.html이 그 글에서만 불러온다. 다른 라틴 문자 언어(id·ms 등)는 기본 Noto Sans를 그대로 쓴다. */
[lang|="en"] { font-family: 'Noto Sans','Noto Sans KR',sans-serif; }
html[lang="ja"], [lang|="ja"] { font-family: 'Noto Sans JP','Noto Sans','Noto Sans KR',sans-serif; }
[lang|="ko"] { font-family: 'Noto Sans KR','Noto Sans',sans-serif; word-break: keep-all; }
[lang|="zh"], [lang="yue"] { font-family: 'Noto Sans HK','Noto Sans','Noto Sans KR',sans-serif; }
/* 본문 속 한국어 낱말(생성기가 <span lang="ko">로 감싼다)은 둘레 글꼴 목록을 그대로 쓴다 — 한글은 목록 뒤의 Noto Sans KR로
   그려지고, 글줄 높이는 첫 글꼴 기준이라 고르게 남는다. Noto Sans KR을 첫 글꼴로 바꾸면 그 낱말이 든 줄만 1px 높아졌다
   (2026-11-14 실측: 줄 간격 31.5px가 32.5px로). 줄바꿈 keep-all은 [lang|="ko"]에서 그대로 받는다. */
span[lang|="ko"] { font-family: inherit; }

/* ---------- 바탕 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-wrap: break-word;
}
html[lang="ja"] body { font-size: 1rem; line-height: 1.85; line-break: strict; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--accent-ink); }
h1, h2, h3 { font-weight: 700; line-height: 1.3; text-wrap: balance; }
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3 { word-break: auto-phrase; font-feature-settings: "palt"; }
p { text-wrap: pretty; }
main { display: block; flex: 1 0 auto; }
main:focus { outline: none; }

.qf-skip {
  position: absolute; left: 12px; top: -120px; z-index: 20;
  padding: 12px 16px; background: var(--ink); color: var(--paper);
  font-weight: 700; text-decoration: none;
}
.qf-skip:focus { top: 12px; }
.qf-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 틀 ---------- */
.qf-wrap {
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.qf-measure,
.qf-post-head, .qf-jump, .qf-visit, .qf-twin, .qf-sources, .qf-ad,
.qf-prose > * {
  width: min(var(--measure), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* ---------- 머리 영역 ---------- */
.qf-header { background: var(--paper); border-bottom: 1px solid var(--rule); }
.qf-header-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 64px;
}
.qf-brand {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em;
  text-decoration: none;
}
.qf-brand:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.qf-lang {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-height: 44px; min-width: 44px; padding: 0 18px;
  border: 2px solid var(--accent); border-radius: 999px;
  color: var(--accent); font-size: .9375rem; font-weight: 700; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
}
.qf-lang:hover { background: var(--accent); color: var(--accent-ink); }
/* 지역이 화면보다 많으면 가로로 넘긴다(줄바꿈하면 휴대폰 머리 영역이 세 줄로 두꺼워진다).
   오른쪽 끝을 종이색으로 흐려 '더 있다'를 알리고, 끝까지 넘기면 마지막 지역이 흐림 밑에 깔리지 않게 끝 여백(44px)을 둔다.
   키보드로 옮겨 갈 때도 흐림 밖에 서도록 scroll-padding을 같은 폭으로 준다. */
.qf-regions { position: relative; border-top: 1px solid var(--rule); }
.qf-regions::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 40px;
  background: linear-gradient(to right, transparent, var(--paper)); pointer-events: none;
}
/* 키보드 포커스가 메뉴 안에 있으면 흐림을 걷는다 — 브라우저가 포커스를 옮길 때 scroll-padding을 다 지키지 않아
   끝의 지역이 흐림 밑에 설 수 있다(2026-11-14 실측: Gyeonggi·Hawaii) */
.qf-regions:has(:focus-visible)::after { display: none; }
.qf-regions ul {
  display: flex; gap: 2px; margin: 0 auto; padding-block: 0;
  padding-inline: calc(var(--gutter) - 10px) 44px;
  list-style: none; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 0 44px;
}
.qf-regions ul::-webkit-scrollbar { display: none; }
.qf-regions li { flex: none; }
.qf-regions a {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 10px;
  color: var(--ink-2); font-size: .9375rem; text-decoration: none; white-space: nowrap;
}
.qf-regions a:hover { color: var(--ink); text-decoration: underline; }
.qf-regions a[aria-current] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--accent); }
/* 가로로 넘기는 목록 안이라 포커스 테두리를 안쪽에 그린다(바깥쪽은 잘린다) */
.qf-regions a:focus-visible { outline-offset: -3px; }
/* 768px부터는 줄을 바꿔 다 보여 준다 — 지역이 열다섯 곳이면 1280px에서도 한 줄에 안 들어가고,
   스크롤 막대를 숨긴 가로 목록은 마우스로 끝까지 넘기기 어렵다. 휴대폰(그 아래)은 한 줄 가로 스크롤 그대로. */
@media (min-width: 768px) {
  /* 줄 맞춤(balance)이 먹도록 flex 대신 글줄로 늘어놓는다 — 열다섯 곳이 1280px에서 14+1로 갈리지 않고 고르게 두 줄 */
  .qf-regions ul { display: block; overflow-x: visible; text-wrap: balance; padding-inline: calc(var(--gutter) - 10px); scroll-padding-inline: 0; }
  .qf-regions li { display: inline-block; }
  .qf-regions::after { display: none; }
}

/* ---------- 공통 글자 조각 ---------- */
.qf-kicker {
  margin: 0 0 10px; color: var(--ink-3);
  font-size: .875rem; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase;
}
.qf-kicker-region { color: var(--accent); font-weight: 700; }
a.qf-kicker-region { display: inline-block; padding-block: 12px; margin-block: -12px; text-decoration: none; }
a.qf-kicker-region:hover { text-decoration: underline; }
.qf-section { margin-top: 56px; }
.qf-section-h {
  margin: 0 0 24px; padding-top: 12px; border-top: 2px solid var(--ink);
  font-size: .875rem; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase;
}
.qf-muted { color: var(--ink-3); }
html[lang="ja"] .qf-kicker,
html[lang="ja"] .qf-section-h,
html[lang="ja"] .qf-visit-h,
html[lang="ja"] .qf-label,
html[lang="ja"] .qf-facts dt,
html[lang="ja"] .qf-ad-label { letter-spacing: .03em; text-transform: none; }
html[lang="ja"] .qf-section-h, html[lang="ja"] .qf-visit-h { font-size: .9375rem; }

/* ---------- 단추 ---------- */
.qf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 16px;
  border: 2px solid var(--ink); border-radius: 6px; background: transparent;
  color: var(--ink); font: inherit; font-size: .9375rem; font-weight: 700; line-height: 1.25;
  text-align: center; text-decoration: none; cursor: pointer;
}
.qf-btn:hover { background: var(--paper-3); }
.qf-btn--primary { background: var(--ink); color: var(--paper); }
.qf-btn--primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.qf-btn--block { display: flex; width: 100%; }
.qf-btn.is-done { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---------- 홈 ---------- */
.qf-hero { padding: 36px 0 4px; }
.qf-hero-title {
  margin: 0; max-width: 28ch;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); line-height: 1.2; letter-spacing: -.015em;
}
/* home.html이 영어 소개를 쉼표 마디로 나눈 조각 — 마디가 통째로 한 줄에 들어가면 그대로 둔다 */
.qf-phrase { display: inline-block; }
/* 제목의 '｜' 앞뒤 마디(_title.html) — 줄이 '｜' 뒤에서 바뀌게 각 마디를 묶고, '｜'는 앞 글자에 붙인다.
   inline-block은 링크 밑줄을 물려받지 않아 카드 제목의 hover 밑줄이 끊기므로 inherit로 이어 받는다 */
.qf-tpart { display: inline-block; text-decoration: inherit; }
.qf-tsep { white-space: nowrap; }
html[lang="ja"] .qf-hero-title {
  max-width: 20em; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); line-height: 1.45; letter-spacing: .01em;
}

/* ---------- 카드 ---------- */
.qf-cards {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 28px;
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 700px) { .qf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .qf-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qf-card { position: relative; }
.qf-card-media { margin: 0 0 14px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.qf-card-media picture, .qf-card-media img { width: 100%; height: 100%; }
.qf-card-media img { object-fit: cover; }
.qf-card-title { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.35; }
.qf-card-title a { color: var(--ink); text-decoration: none; }
/* 제목 링크가 카드 전체를 덮는다 — 화면 읽기 프로그램에는 제목만 링크 이름으로 읽힌다 */
.qf-card-title a::after { content: ""; position: absolute; inset: 0; }
.qf-card:hover .qf-card-title a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.qf-card-title a:focus-visible { outline: none; }
.qf-card-title a:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 6px; }
.qf-card-excerpt { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.6; }
html[lang="ja"] .qf-card-title { font-size: 1.125rem; line-height: 1.5; }
html[lang="ja"] .qf-card-excerpt { font-size: .9375rem; line-height: 1.8; }
@media (min-width: 700px) {
  .qf-cards--lead > li:first-child { grid-column: 1 / -1; padding-bottom: 40px; border-bottom: 1px solid var(--rule); }
  .qf-card--lead { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; align-items: center; }
  .qf-card--lead .qf-card-media { margin: 0; aspect-ratio: 2 / 1; }
  .qf-card--lead .qf-card-title { font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem); line-height: 1.25; }
  .qf-card--lead .qf-card-excerpt { font-size: 1.0625rem; }
  html[lang="ja"] .qf-card--lead .qf-card-title { font-size: clamp(1.375rem, 1rem + 1.1vw, 1.75rem); line-height: 1.45; }
}

/* ---------- 지역 목록 ---------- */
.qf-region-list {
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 28px;
  margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule);
}
@media (min-width: 700px) { .qf-region-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .qf-region-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qf-region-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; border-bottom: 1px solid var(--rule);
  color: var(--ink); font-size: 1.0625rem; font-weight: 700; text-decoration: none;
}
.qf-region-list a:hover .qf-region-name { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.qf-count {
  min-width: 2.25em; padding: 1px 9px; border: 1px solid var(--rule); border-radius: 999px;
  color: var(--ink-3); font-size: .875rem; font-weight: 400; font-variant-numeric: tabular-nums; text-align: center;
}
/* 나라 묶음(group): 휴대폰은 묶음을 위아래로, 700px부터 묶음을 나란한 칸으로(묶음 안은 한 줄에 한 지역) */
.qf-region-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 28px; }
@media (min-width: 700px) { .qf-region-groups { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }
.qf-region-group-h {
  margin: 0 0 6px; color: var(--ink-3);
  font-size: .8125rem; font-weight: 700; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase;
}
html[lang="ja"] .qf-region-group-h { font-size: .875rem; letter-spacing: .03em; text-transform: none; }
.qf-region-list.qf-region-list--stack { grid-template-columns: minmax(0, 1fr); }

/* ---------- 글 머리 ---------- */
.qf-post-head { padding-top: 28px; margin-bottom: 24px; }
.qf-post-title, .qf-page-title {
  margin: 0; font-size: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem); line-height: 1.2; letter-spacing: -.015em;
}
html[lang="ja"] .qf-post-title, html[lang="ja"] .qf-page-title {
  font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.375rem); line-height: 1.4; letter-spacing: .01em;
}
.qf-cover { max-width: var(--wide); margin: 0 auto 32px; }
/* 표지 아래 바로가기 줄 — 주문 카드(있을 때)와 주소·지도로. 누르는 높이 44px, 390px에서 한 줄 */
.qf-cover + .qf-jump { margin-top: -12px; }
.qf-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 0 28px; }
.qf-jump a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--ink); border-radius: 999px;
  color: var(--ink); font-size: .9375rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.qf-jump a:hover { background: var(--paper-3); }
/* 바로가기로 왔을 때 목표의 윗선이 화면 끝에 붙지 않게 */
.qf-order, .qf-visit { scroll-margin-top: 16px; }
.qf-cover img { width: 100%; }
@media (min-width: 768px) {
  .qf-post-head { padding-top: 48px; margin-bottom: 32px; }
  .qf-cover { margin-bottom: 44px; }
}

/* ---------- 본문 ---------- */
.qf-prose { font-size: 1.125rem; line-height: 1.75; }
html[lang="ja"] .qf-prose { font-size: 1.0625rem; line-height: 1.95; }
.qf-prose > * { margin-block: 0 1.15em; }
.qf-prose > :last-child { margin-bottom: 0; }
.qf-prose h2 { margin-block: 1.9em .6em; font-size: 1.5rem; }
.qf-prose h3 { margin-block: 1.6em .5em; font-size: 1.2rem; }
html[lang="ja"] .qf-prose h2 { font-size: 1.375rem; line-height: 1.5; }
html[lang="ja"] .qf-prose h3 { font-size: 1.125rem; line-height: 1.5; }
.qf-prose ul, .qf-prose ol { padding-left: 1.3em; }
.qf-prose li + li { margin-top: .35em; }
.qf-prose blockquote { padding-left: 1em; border-left: 3px solid var(--accent); color: var(--ink-2); }
.qf-prose hr { height: 0; margin-block: 2.2em; border: 0; border-top: 1px solid var(--rule); }
.qf-prose a { overflow-wrap: anywhere; }

/* 사진: 데스크톱은 본문보다 넓게(960px), 모바일은 화면 끝까지 */
.qf-photo { margin: 1.8em 0; }
.qf-prose > figure.qf-photo { width: min(var(--wide), 100%); margin: 1.8em auto; }
.qf-photo img { width: 100%; }
/* 세로 사진이 데스크톱 960px 폭에서 화면 몇 배로 길어지지 않게 높이를 화면의 80%로 묶는다(자르지 않고 가운데 맞춤) */
.qf-photo img, .qf-cover img { max-height: 80vh; object-fit: contain; }
.qf-photo figcaption, .qf-cover figcaption {
  width: min(var(--measure), 100% - 2 * var(--gutter)); margin: 10px auto 0;
  color: var(--ink-3); font-size: .9375rem; line-height: 1.55;
}
/* 세로 표지(T17): figure를 사진이 실제로 보이는 폭(높이 80vh 기준)으로 잡는다 — post.html이 --qf-ar(가로/세로)를 준다.
   글 폭으로 잡으면 가운데의 좁은 사진 아래로 설명이 사진보다 넓게 깔린다. 설명은 그 폭 안에 */
.qf-cover--portrait { width: min(100% - 2 * var(--gutter), 80vh * var(--qf-ar)); }
.qf-cover--portrait img { max-height: none; }
.qf-cover--portrait figcaption { width: auto; margin: 10px 0 0; }

/* 주문 카드: 식당에서 휴대폰을 내밀어 직원에게 보여 주는 용도 — 한국어를 크게, 대비 높게 */
.qf-order {
  margin-block: 2em; padding: 6px 20px;
  background: var(--card); color: var(--card-ink);
  border: 2px solid var(--card-ink); border-radius: 8px;
}
.qf-order-row { padding: 18px 0; }
.qf-order-row + .qf-order-row { border-top: 1px dashed var(--card-rule); }
.qf-order p { margin: 0; }
/* .qf-ko = 직원에게 보여 줄 그 나라 말 문장(국내는 한국어, 해외는 local_lang). 줄바꿈 규칙은 lang을 따른다:
   한국어는 [lang|="ko"]의 keep-all(어절 단위), 일본어는 문절 단위, 영어는 낱말 단위 */
/* 식당에서 화면을 내밀어 보여 주는 글자 — 휴대폰에서도 32px 이상(KYI 승인 2026-11-14), 큰 화면은 40px까지 */
.qf-order .qf-ko {
  color: var(--card-ink); font-size: clamp(2rem, 1.4rem + 2.4vw, 2.5rem); font-weight: 700;
  line-height: 1.35; letter-spacing: 0; overflow-wrap: anywhere;
}
.qf-order .qf-ko:lang(ja) { word-break: auto-phrase; }
.qf-order .qf-roman { margin-top: 8px; color: var(--card-ink-2); font-size: 1.0625rem; line-height: 1.5; }
.qf-order .qf-meaning { margin-top: 2px; color: var(--card-ink-2); font-size: 1rem; line-height: 1.5; }
.qf-order ::selection { background: #111111; color: #ffffff; }
/* 'Show this to the staff' 한 줄 — post.html이 t.show_this_to_staff로 카드 머리에 붙인다 */
.qf-order .qf-order-label {
  margin: 0; padding: 12px 0 2px; color: var(--card-ink-2);
  font-size: .8125rem; font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase;
}
html[lang="ja"] .qf-order .qf-order-label { font-size: .875rem; letter-spacing: .03em; text-transform: none; }

/* ---------- 방문 정보 상자 ---------- */
.qf-visit {
  margin-block: 48px 0; padding: 22px 20px 18px;
  background: var(--paper-2); border-top: 3px solid var(--ink);
}
.qf-visit-h {
  margin: 0 0 14px; font-size: .875rem; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase;
}
.qf-shop-name { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.3; }
/* 그 나라에서 쓰는 가게 이름(국내는 한국어, 해외는 현지어) — 읽는 언어의 이름과 같으면 그리지 않는다 */
.qf-shop-local { margin: 4px 0 0; color: var(--ink-2); font-size: 1.125rem; line-height: 1.4; }
.qf-visit-address { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.qf-label, .qf-facts dt {
  margin: 0 0 4px; color: var(--ink-3);
  font-size: .8125rem; font-weight: 700; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase;
}
/* 주소 class는 qf-place*로 쓴다 — 'qf-ad'로 광고 마크업 부재를 grep할 때 걸리지 않게.
   .qf-place = 그 나라 말 주소(택시·지도 앱에 그대로 쓰는 것, 한 번에 선택), .qf-place-alt = 읽는 언어의 주소 */
.qf-place {
  margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.45;
  -webkit-user-select: all; user-select: all;
}
.qf-place-alt { margin: 4px 0 0; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
/* 휴대폰에서는 네 단추를 한 줄에 하나씩(문구가 길어도 한 줄, 누르기 쉽게), 600px부터 2×2 */
.qf-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 14px; }
@media (min-width: 600px) { .qf-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qf-facts { margin: 18px 0 0; padding: 0; }
.qf-facts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; border-top: 1px solid var(--rule); }
@media (min-width: 600px) { .qf-facts > div { grid-template-columns: 9.5em minmax(0, 1fr); gap: 16px; } }
.qf-facts dt { margin: 0; padding-top: .15em; }
.qf-facts dd { margin: 0; white-space: pre-line; }
.qf-facts a { display: inline-block; padding-block: 10px; margin-block: -10px; }
.qf-checked {
  margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--rule);
  color: var(--ink-3); font-size: .875rem; line-height: 1.55;
}

/* ---------- 글 끝 ---------- */
.qf-twin { margin-block: 28px 0; }
.qf-sources { margin-block: 48px 0; }
/* 출처 링크는 누르는 높이 44px(글줄 24px + 위아래 10px). 링크가 두 줄로 접히면 글머리표가 아랫줄에 붙어
   글머리표 없이 줄 간격으로 나눈다(post.html이 role="list"를 달아 목록으로 읽히게 한다) */
.qf-source-list { margin: 0; padding: 0; list-style: none; color: var(--ink-2); font-size: .9375rem; line-height: 1.6; }
.qf-source-list a { display: inline-block; padding-block: 10px; text-decoration: none; }
/* 확인 날짜는 링크 상자 안에서 제목 뒤를 잇는다(제목이 두 줄이어도 날짜만 따로 떨어지지 않게).
   밑줄은 제목에만 — 사이 띄어쓰기와 날짜에는 긋지 않는다(띄어쓰기는 남겨 화면 읽기 프로그램이 붙여 읽지 않게) */
.qf-src-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.qf-source-list a:hover .qf-src-title { text-decoration-thickness: 2px; }
.qf-related { margin-top: 64px; }

/* ---------- 광고 자리 (site.ads_enabled일 때만 마크업이 생긴다) ---------- */
.qf-ad { margin-block: 40px; }
.qf-ad-label {
  margin: 0 0 6px; color: var(--ink-3); text-align: center;
  font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase;
}
.qf-ad-slot { min-height: 280px; background: var(--paper-2); }
@media (min-width: 768px) { .qf-ad-slot { min-height: 250px; } }

/* ---------- 지역 · 안내 · 404 ---------- */
.qf-page-head { padding-top: 32px; margin-bottom: 28px; }
.qf-lede { margin: 14px 0 0; max-width: 40em; color: var(--ink-2); font-size: 1.125rem; line-height: 1.65; }
html[lang="ja"] .qf-lede { font-size: 1.0625rem; line-height: 1.85; }
@media (min-width: 768px) { .qf-page-head { padding-top: 48px; margin-bottom: 36px; } }
.qf-404 { padding-block: 48px 8px; }
.qf-404-block p { margin: 12px 0 0; }
.qf-404-block + .qf-404-block { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--rule); }
.qf-404-title { margin: 0; font-size: 1.5rem; line-height: 1.35; }
.qf-404 .qf-btn { margin-top: 8px; }

/* ---------- 바닥 ---------- */
.qf-footer {
  margin-top: 72px; padding: 36px 0 44px;
  background: var(--paper-2); border-top: 1px solid var(--rule);
  color: var(--ink-2); font-size: .9375rem; line-height: 1.6;
}
.qf-footer-name { margin: 0; color: var(--ink); font-size: 1.0625rem; font-weight: 700; }
.qf-footer-note { margin: 6px 0 0; max-width: 40em; }
.qf-footer-links { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 12px 0 0; padding: 0; list-style: none; }
.qf-footer-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: .25em;
}
.qf-footer-links a:hover { text-decoration-color: var(--accent); }
.qf-footer-copy { margin: 8px 0 0; color: var(--ink-3); font-size: .875rem; }

/* ---------- 방문자 수 · 조회수 · 댓글 (계획서 2-11) ---------- */
/* 숫자 자리(.qf-js)는 HTML에 처음부터 있어 첫 화면에서 자리를 잡는다 — 스크립트가 늦게 돌아도 글이 밀리지 않는다.
   자바스크립트가 꺼진 브라우저(scripting: none)는 통째로 숨긴다. 숫자를 못 받으면 engage.js가 is-empty를 달아
   글자만 지운다(visibility) — 자리는 그대로라 그때도 밀림이 없다. */
@media (scripting: none) { .qf-js { display: none !important; } }
.qf-js.is-empty { visibility: hidden; }
.qf-num { font-variant-numeric: tabular-nums; }

/* 홈 방문자 줄: 한 줄 소개 아래, 흐름 안. 숫자 자리가 HTML에 처음부터 있어 첫 화면에서 이 줄의 높이를 잡는다 — 숫자가 와도
   아래 목록은 제자리. 겹쳐 놓으면(absolute) 확대해서 두 줄이 될 때 아래 선과 붙었다(2026-11-14 디자이너 검수) */
.qf-visitors {
  margin: .875rem 0 0;
  color: var(--ink-3); font-size: .875rem; line-height: 1.5;
}
/* 아주 좁은 화면(200% 확대한 휴대폰 등)에서는 '–'일 때 한 줄, 숫자가 오면 두 줄이 되어 목록이 21px 밀렸다
   (2026-11-14 실측: 폭 195–270px, 285px부터는 9,999 · 9,999,999도 한 줄) — 그 폭에서는 두 줄 자리를 처음부터 잡는다 */
@media (max-width: 289px) { .qf-visitors { min-height: 3em; } }
/* 숫자 칸은 '–'와 같은 한 자리 폭 — 한 자리 숫자는 앞뒤가 벌어지지 않고 아무것도 움직이지 않는다. 두 자리부터는 같은 줄의
   뒤 글자가 밀리는데, engage.js가 줄의 마디를 새로 만들어 한 번에 바꾼다(이동 기록에 잡히지 않는다).
   전체 숫자는 줄 끝이라 뒤에 밀릴 글자가 없다 — 문구 끝에 글자를 붙이지 않는다(2026-11-14: 2ch 오른쪽 맞춤은 한 자리일 때
   앞이 벌어져 보였다 — 메인 지적) */
.qf-visitors .qf-num { display: inline-block; min-width: 1ch; color: var(--ink); font-weight: 700; }

/* 글 조회수: 날짜 줄 끝. 숫자 칸을 99,999까지 들어가는 폭으로 미리 잡는다 — 칸이 줄 끝이라 남는 폭은 보이지 않는다.
   줄이 모자라면 '조회수 묶음'이 통째로 다음 줄로 간다(post.html이 &nbsp;로 묶는다 — nowrap을 쓰면 크롬이 그 앞 띄어쓰기에서
   줄을 바꾸지 않아 '·'가 줄머리로 갔다). 숫자 칸 폭이 고정이라 숫자가 와도 줄바꿈 자리가 바뀌지 않는다 */
.qf-views .qf-num { display: inline-block; min-width: 5.5ch; }

/* 댓글 구역 — 본문 폭, 글 끝 출처 다음 */
.qf-comments {
  width: min(var(--measure), 100% - 2 * var(--gutter)); margin: 56px auto 0;
  scroll-margin-top: 16px;
}
.qf-comments-count:not(:empty) { margin-left: .6em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.qf-comments-note { margin: 0 0 8px; color: var(--ink-3); font-size: .9375rem; line-height: 1.6; }
.qf-comments-note:empty { display: none; }
.qf-comment-list, .qf-replies { margin: 0; padding: 0; list-style: none; }
.qf-comment-list > .qf-comment + .qf-comment { border-top: 1px solid var(--rule); }
.qf-comment { scroll-margin-top: 16px; }
.qf-comment:focus { outline: none; }
.qf-comment:focus-visible > .qf-comment-main { outline: 3px solid var(--accent); outline-offset: 4px; }
.qf-comment-main { padding: 14px 0 4px; border-radius: 4px; }
.qf-comment-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  margin: 0; font-size: .9375rem; line-height: 1.5;
}
.qf-comment-name { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
/* 주인(Quida)의 글 표시 — 이름 옆 작은 강조색 글자 한 줄. 답글이면 왼쪽 선 그 마디도 강조색 */
.qf-comment-badge {
  padding: 0 .5em; border: 1px solid currentColor; border-radius: 999px;
  color: var(--accent); font-size: .75rem; font-weight: 700; line-height: 1.5; letter-spacing: .02em;
}
.qf-comment-time { color: var(--ink-3); font-size: .875rem; text-decoration: none; }
.qf-comment-time:hover { color: var(--ink-2); text-decoration: underline; }
.qf-comment-body {
  margin: 6px 0 0; color: var(--ink); font-size: 1rem; line-height: 1.7;
  white-space: pre-line; overflow-wrap: anywhere;
}
html[lang="ja"] .qf-comment-body { font-size: .9375rem; line-height: 1.85; }
/* 본문 글자로 단 lang(일본어·한국어)은 줄바꿈 규칙에만 쓰고 글꼴은 쪽의 것을 따른다 — 영어 쪽은 Noto Sans JP를 굵은 글자 몇 개
   (日本語で読む)만 내려받아, lang="ja"로 그 글꼴을 고르면 'で' 같은 글자만 굵게 섞였다(2026-11-14 실측) */
.qf-comment-body[lang] { font-family: inherit; }
.qf-comment-actions { display: flex; flex-wrap: wrap; gap: 0 2px; margin: 0 0 0 -10px; }
/* 글자 단추(답글·숨기기) — 누르는 높이 44px */
.qf-textbtn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  border: 0; border-radius: 6px; background: none;
  color: var(--accent); font: inherit; font-size: .9375rem; font-weight: 700; line-height: 1.2; cursor: pointer;
}
.qf-textbtn:hover { text-decoration: underline; text-underline-offset: .2em; }
.qf-textbtn--owner { color: var(--ink-2); }
.qf-replies { margin: 0 0 14px; padding-left: 16px; border-left: 2px solid var(--rule); }
@media (min-width: 600px) { .qf-replies { margin-left: 6px; padding-left: 22px; } }
.qf-replies > .qf-comment { position: relative; }
.qf-replies > .qf-comment.is-owner::before {
  content: ""; position: absolute; left: -18px; top: 12px; bottom: 8px; width: 2px; background: var(--accent);
}
@media (min-width: 600px) { .qf-replies > .qf-comment.is-owner::before { left: -24px; } }
.qf-comment-main { transition: none; }
.qf-comment.is-new > .qf-comment-main,
.qf-comment.is-target > .qf-comment-main { background: var(--paper-2); box-shadow: 0 0 0 8px var(--paper-2); }
@media (prefers-reduced-motion: no-preference) {
  .qf-comment-main { transition: background-color .8s ease, box-shadow .8s ease; }
}
/* 주인 열쇠가 있는 브라우저에서만 생기는 표시 — 보류·숨김 글 */
.qf-comment-state {
  padding: 0 .5em; border-radius: 999px; background: var(--ink); color: var(--paper);
  font-size: .75rem; font-weight: 700; line-height: 1.5;
}
.qf-comment[data-status="pending"] > .qf-comment-main .qf-comment-state { background: var(--accent); color: var(--accent-ink); }
.qf-comment[data-status="hidden"] > .qf-comment-main .qf-comment-body { color: var(--ink-3); }

/* 작성 칸 — 휴대폰에서 글자 16px 이상(확대 방지), 단추 48px */
.qf-comment-form { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); }
.qf-comment-list:empty + .qf-comment-form { margin-top: 8px; }
.qf-comment-form.is-reply {
  margin: 4px 0 16px; padding: 14px 16px 16px;
  border: 1px solid var(--rule); border-radius: 8px; background: var(--paper-2);
}
.qf-replying { margin: 0 0 10px; color: var(--ink-2); font-size: .9375rem; font-weight: 700; overflow-wrap: anywhere; }
.qf-owner-note { margin: 0 0 12px; color: var(--ink-2); font-size: .875rem; }
.qf-field { margin: 0 0 14px; }
.qf-field label, .qf-form-label {
  display: block; margin: 0 0 6px; color: var(--ink-2); font-size: .875rem; font-weight: 700; line-height: 1.4;
}
.qf-input {
  display: block; width: 100%; min-height: 48px; margin: 0; padding: 10px 12px;
  border: 1.5px solid var(--ink-3); border-radius: 6px; background: var(--field);
  color: var(--ink); font: inherit; font-size: max(1rem, 16px); line-height: 1.55;
}
.qf-field--name .qf-input { max-width: 22rem; }
textarea.qf-input { min-height: 8.5em; resize: vertical; }
.qf-input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.qf-input[aria-invalid="true"] { border-color: var(--accent); border-width: 2px; }
.qf-field-error { margin: 6px 0 0; color: var(--accent); font-size: .875rem; font-weight: 700; line-height: 1.5; }
.qf-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.qf-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qf-btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
.qf-btn--small { min-height: 44px; padding: 8px 14px; font-size: .875rem; }
.qf-form-status { margin: 12px 0 0; color: var(--ink); font-size: .9375rem; font-weight: 700; line-height: 1.55; }
.qf-form-status:empty { margin: 0; }
/* 보내는 중('Posting…')은 가는 보조색, 실패·너무 잦음은 칸 오류와 같은 강조색 — 글이 무엇인지 말하므로 색에만 기대지 않는다 */
.qf-form-status.is-busy { color: var(--ink-2); font-weight: 400; }
.qf-form-status.is-error { color: var(--accent); }
/* '확인 뒤 보입니다' 뒤 초점이 이 줄로 온다(빈 본문 칸의 테두리가 오류처럼 보이지 않게) — 누를 것이 아니라 테두리는 그리지 않는다 */
.qf-form-status:focus { outline: none; }
.qf-form-note { margin: 10px 0 0; color: var(--ink-3); font-size: .875rem; line-height: 1.55; }
/* 일본어 안내 줄은 문절에서 꺾는다(390px에서 「残っていま/すので」처럼 낱말 가운데서 꺾였다). 지원하지 않는 브라우저는 그대로 */
html[lang="ja"] .qf-form-status, html[lang="ja"] .qf-field-error, html[lang="ja"] .qf-form-note,
html[lang="ja"] .qf-comments-note, html[lang="ja"] .qf-replying { word-break: auto-phrase; }

/* 주인 쪽(/owner/, 한국어) */
.qf-owner { width: min(var(--measure), 100% - 2 * var(--gutter)); margin: 0 auto; padding-top: 32px; }
.qf-owner-title { margin: 0; font-size: 1.625rem; line-height: 1.3; }
.qf-owner-gate { margin: 14px 0 0; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6; }
.qf-owner-lede { margin: 10px 0 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.6; }
.qf-owner-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.qf-owner-status { margin: 14px 0 0; color: var(--ink); font-size: .9375rem; font-weight: 700; line-height: 1.55; }
.qf-owner-status:empty { margin: 0; }
.qf-own-list { margin: 18px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.qf-own-item { padding: 16px 0 18px; border-bottom: 1px solid var(--rule); }
.qf-own-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 0; color: var(--ink-3); font-size: .875rem; line-height: 1.5;
}
.qf-own-state {
  padding: 0 .55em; border: 1px solid var(--ink-3); border-radius: 999px;
  color: var(--ink-2); font-size: .75rem; font-weight: 700; line-height: 1.5;
}
.qf-own-item[data-status="pending"] .qf-own-state { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.qf-own-item[data-status="hidden"] .qf-own-state { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.qf-own-item[data-status="hidden"] .qf-comment-body { color: var(--ink-3); }
.qf-own-post { overflow-wrap: anywhere; }
.qf-own-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 8px 0 0; }
.qf-own-mark { color: var(--ink-3); font-size: .8125rem; }
.qf-own-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.qf-own-reply { margin-top: 12px; padding: 14px 16px 16px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper-2); }
.qf-own-reply .qf-input { margin-bottom: 10px; }
.qf-own-reply .qf-field-error { margin: -4px 0 10px; }
/* 목록 위 '보류 N건' — 확인할 것이 있을 때만 보인다 */
.qf-own-pending { margin: 14px 0 0; color: var(--accent); font-size: .9375rem; font-weight: 700; line-height: 1.5; }
/* 그 댓글 항목 안의 결과 한 줄(승인·숨김·답글) — 맨 위가 아니라 누른 자리에서 보이게 */
.qf-own-note { margin: 10px 0 0; color: var(--ink); font-size: .875rem; font-weight: 700; line-height: 1.5; }
.qf-own-note:empty { margin: 0; }
.qf-own-note.is-error { color: var(--accent); }
.qf-own-item:focus { outline: none; }
.qf-own-item:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }