/* 식품 라벨 읽기(food-label.html) 전용 스타일 — tools.css 위에 얹는다. 색은 tools.css 토큰만 쓴다(다크 모드 자동). */
.lbl-wrap { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .lbl-wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.lbl svg { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
.lbl .paper { fill: var(--card); stroke: var(--fg); stroke-width: 1.5; }
.lbl .row { stroke: var(--line); stroke-width: 1; }
.lbl .alg { fill: var(--warn-soft); stroke: var(--warn); stroke-width: 1; }
.lbl .nut { fill: none; stroke: var(--fg); stroke-width: 1.2; }
.lbl text { fill: var(--fg); font-size: 12px; font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans KR", sans-serif; }
.lbl text.h { font-size: 20px; font-weight: 800; }
.lbl text.k { font-weight: 700; fill: var(--muted); }
.lbl text.b { font-weight: 700; }
.lbl .pin { cursor: pointer; }
.lbl .pin circle { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
.lbl .pin text { fill: #fff; font-size: 12px; font-weight: 800; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.lbl .pin:hover circle, .lbl .pin:focus circle, .lbl .pin.on circle { fill: var(--bad); }
.lbl .pin:focus { outline: none; }
.lbl .pin:focus-visible circle { stroke: var(--fg); stroke-width: 3; }
.boxbtns { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.boxbtns button { font: inherit; font-size: .88rem; font-weight: 600; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer; }
.boxbtns button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.boxinfo { border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 10px 12px; min-height: 4em; }
.boxinfo h3 { margin: 0 0 4px; }
.boxinfo p { margin: 0; overflow-wrap: anywhere; }
.avoid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
@media (min-width: 640px) { .avoid-grid { grid-template-columns: repeat(3, 1fr); } }
.avoid-grid label.chk { margin: 4px 0; overflow-wrap: anywhere; min-width: 0; }
.cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 10px; }
@media (min-width: 720px) { .cards { grid-template-columns: 1fr 1fr; } }
.fcard { border: 2px solid var(--accent); border-radius: 14px; padding: 12px 14px; background: var(--card); min-width: 0; }
.fcard h3 { margin: 0 0 4px; font-size: 1.1rem; }
.fcard .note { font-size: .88rem; color: var(--muted); margin: 0 0 8px; overflow-wrap: anywhere; }
.fcard ul.words { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.fcard ul.words li { border: 1px solid var(--line); border-radius: 10px; padding: 4px 10px; background: var(--bg); min-width: 0; }
.fcard .w { display: block; font-size: 1.55rem; font-weight: 800; line-height: 1.25; letter-spacing: .02em; overflow-wrap: anywhere; }
.fcard .r { display: block; font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.fcard li.chk-src { border-color: var(--warn); background: var(--warn-soft); }
.fcard .mix { margin-top: 8px; font-size: .9rem; }
.fcard .mix q { display: block; font-weight: 700; overflow-wrap: anywhere; }
.tag { display: inline-block; font-size: .72rem; font-weight: 700; padding: 0 6px; border-radius: 6px; background: var(--warn-soft); color: var(--warn); white-space: nowrap; vertical-align: 1px; }
.tag.cat { background: var(--accent-soft); color: var(--accent); }
.dict-ctl { display: grid; grid-template-columns: 1fr; gap: 8px 12px; }
@media (min-width: 640px) { .dict-ctl { grid-template-columns: 2fr 1fr; } }
input[type=search] { width: 100%; font: inherit; padding: 9px 10px; margin-top: 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); min-width: 0; }
input[type=search]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
ul.dict { list-style: none; margin: 8px 0 0; padding: 0; }
ul.dict li { border-top: 1px solid var(--line); padding: 8px 0; min-width: 0; }
ul.dict .ko { font-size: 1.2rem; font-weight: 800; overflow-wrap: anywhere; }
ul.dict .rom { color: var(--muted); font-size: .85rem; margin-left: 6px; overflow-wrap: anywhere; }
ul.dict .mean { margin: 2px 0; overflow-wrap: anywhere; }
ul.dict .fl { font-size: .86rem; overflow-wrap: anywhere; }
ul.dict .bs { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.ask li { margin-bottom: 8px; }
.ask .ko-s { display: block; font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.ask .tr { display: block; color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.about .src li, .sources li { overflow-wrap: anywhere; }
@media print {
  .lbl .pin circle { fill: #000; }
  .fcard { break-inside: avoid; border-color: #000; }
}

/* 접근성: 다크 모드 강조색(#7c9bff) 위 흰 글자는 대비 2.6:1이라 이 페이지에서는 배경색 토큰(어두운 색)을 글자색으로 쓴다(공통 토큰은 그대로). */
@media (prefers-color-scheme: dark) {
  .lbl .pin text { fill: var(--bg); }
  .boxbtns button[aria-pressed="true"], button.b.primary { color: var(--bg); }
}