/* 화면별 카드 — 히어로·추이·평면도·급식·주간·탄소·이슈, 그리고 데스크톱·hover·모션 축소 미디어 쿼리(맨 끝, 순서 유지) */
/* ① 대기시간 카드 — 한 상자, 두 절: 위 히어로(지금 줄을 서면) + 아래 추이(최근 30분). 상자가 radius·그림자를 갖고
   히어로 절이 상태 4얼굴(ok=차콜+아쿠아 칩 · wait=차콜+멜론 외곽선 칩 · busy=멜론 · off=점선)을 입는다.
   추이 절은 언제나 카드색 — 곡선(틸)이 밝은 바탕에서 읽히도록. 추이가 없으면(표본 <2) 절만 숨고 카드는 히어로만 남는다 */
.waitcard { border-radius: 26px; box-shadow: var(--e2); overflow: hidden; background: var(--surface); }
.hero { position: relative; background: var(--ink); padding: 34px 22px 30px; }
.trend { padding: 22px var(--px) 24px; }
.trend .eyebrow { color: var(--ink3); }
.hero .eyebrow { color: rgba(255,253,246,.52); }
.dot { position: absolute; right: 22px; top: 24px; width: 10px; height: 10px; border-radius: 50%;
       background: #2FB7B3; box-shadow: 0 0 0 5px rgba(47,183,179,.20); }
.big { display: flex; align-items: baseline; gap: 7px; margin-top: 12px; transform-origin: left center; }
.big b { font-size: 104px; font-weight: 700; letter-spacing: -.045em; line-height: .86; color: var(--surface); }
.big i { font-style: normal; font-size: 24px; font-weight: 500; color: rgba(255,253,246,.58); }
.big.pulse { animation: pulse .25s ease; }                  /* 값이 실제로 바뀔 때만 JS 가 붙인다 */
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }
.verdictrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
#state { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px;
         background: var(--aqua); color: #223634; font-size: 13px; font-weight: 700; }
/* ③ 도착 시각 — 판정 칩 오른쪽 빈 자리. '몇 분'보다 '몇 시'가 즉각적이다 */
.arrive { text-align: right; flex: none; }
.arrive span { display: block; font-size: 11.5px; color: rgba(255,253,246,.5); }
.arrive b { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--surface); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
.stats > div { background: rgba(255,253,246,.07); border-radius: var(--r-tile); padding: 15px 14px; }
.stats b { font-size: 22px; font-weight: 700; color: var(--surface); }
.stats em { font-style: normal; font-size: 12.5px; font-weight: 500; color: rgba(255,253,246,.58); margin-left: 2px; }
.stats span { display: block; font-size: 11.5px; color: rgba(255,253,246,.5); margin-top: 3px; }

.hero[data-level="busy"] { background: var(--melon); }
.waitcard[data-level="busy"] { box-shadow: 0 16px 36px rgba(255,114,96,.32); }   /* 상자의 상태는 JS 가 히어로와 같이 적는다 — :has() 없이 */
.hero[data-level="busy"] .eyebrow, .hero[data-level="busy"] .big i,
.hero[data-level="busy"] .arrive span { color: rgba(43,20,16,.62); }
.hero[data-level="busy"] .big b, .hero[data-level="busy"] .arrive b, .hero[data-level="busy"] .stats b { color: #2B1410; }
.hero[data-level="busy"] .stats > div { background: rgba(43,20,16,.10); }
.hero[data-level="busy"] .stats em { color: rgba(43,20,16,.62); }
.hero[data-level="busy"] .stats span { color: rgba(43,20,16,.55); }
.hero[data-level="busy"] .dot { background: var(--ink); box-shadow: 0 0 0 5px rgba(51,49,45,.18); }
.hero[data-level="busy"] #state { background: var(--ink); color: var(--surface); }

.hero[data-level="wait"] #state { background: transparent; border: 1.5px solid var(--melon); color: #FF9182; }
.hero[data-level="wait"] .big b { color: rgba(255,253,246,.28); }

.hero[data-level="off"] { background: #FBF8F0; border: 1.5px dashed #D5CDBA; border-radius: 26px 26px 0 0; }
.waitcard:not(.hastrend) .hero { border-radius: 26px; }   /* 추이 절이 없으면 히어로가 카드 전체 — 점선 테두리가 모서리까지 온전히 */
.waitcard[data-level="off"] { box-shadow: none; }
.waitcard[data-level="off"] .trend { border: 1.5px dashed #D5CDBA; border-top: 0; border-radius: 0 0 26px 26px; }
.hero[data-level="off"] .eyebrow { color: #A9A296; }
.hero[data-level="off"] .big b, .hero[data-level="off"] .big i { color: var(--off); }
.hero[data-level="off"] .dot { background: var(--off); box-shadow: none; }
.hero[data-level="off"] #state { background: transparent; border: 1.5px solid #D5CDBA; color: var(--ink3); }
.hero[data-level="off"] .stats > div { background: #F3F0E7; }
.hero[data-level="off"] .stats b, .hero[data-level="off"] .stats em { color: var(--off); }
.hero[data-level="off"] .stats span, .hero[data-level="off"] .arrive span { color: #A9A296; }
.hero[data-level="off"] .arrive b { color: var(--off); }

.meta { display: flex; justify-content: space-between; align-items: center; padding: 0 6px;
        font-size: 11px; color: var(--ink3); }

/* ③ 추이 — 데이터는 한 램프(plotly Sunsetdark, 09-04), 비교 기준선은 중립 회색 파선. 색을 둘 쓰면 어느 쪽이 실측인지 흐려진다 */
.lead { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 8px; letter-spacing: -.01em; }
.lead b { color: var(--teal-ink); font-weight: 600; }
#chart { display: block; width: 100%; height: 108px; margin-top: 12px; }
.legend { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 11px; }
.legend > span { display: inline-flex; align-items: center; gap: 12px; }
.legend i { font-style: normal; display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); }
.legend i::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fcde9c, #7c1d6f); flex: none; }
.legend i.ref { color: var(--ink3); }
.legend i.ref::before { height: 0; background: none; border-top: 1.5px dashed #B9B1A0; }
.legend .now { color: var(--ink3); }
.legend .now b { color: var(--melon-ink); }

/* ⑩ 급식실 현황 — 벡터 평면도 + 익명 위치 마커. 영상 아님 · 순간 상태만 · 이력 없음 (CLAUDE.md §2) */
.plan { position: relative; }
.plan .count { position: absolute; right: 18px; top: 16px; background: var(--teal-tint); color: var(--teal-ink);
               font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.plan .stage { position: relative; margin-top: 12px; }
#plan { display: block; width: 100%; aspect-ratio: 318 / 460; }
#marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.plan.live #marks { animation: blink 1.4s ease-in-out infinite; }   /* 점멸은 CSS 가 맡는다 — 화면이 보일 때만(.live), JS 루프·전체 재그리기 없음 */
@keyframes blink { 50% { opacity: .55; } }
.plan[data-state="no_data"] #plan { opacity: .4; }
.plan[data-state="no_data"] #marks { display: none; }
.plan .empty { display: none; position: absolute; left: 0; right: 0; top: 52%; text-align: center;
               font-size: 13px; font-weight: 700; color: var(--ink3); }
.plan[data-state="no_data"] .empty { display: block; }

/* ④ 메뉴 — 한 줄 리스트. 알레르기 번호가 붙으므로 2열 격자로는 좁다 */
.menu { list-style: none; margin: 10px 0 0; padding: 0; }
.menu li { display: flex; align-items: center; gap: 9px; padding: 6px 8px; font-size: 14px; color: #4A4740; }
.menu li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--off); flex: none; }
.menu li.main { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.menu li.main::before { width: 8px; height: 8px; background: var(--melon); border-color: var(--melon); }
.menu li.hit { background: var(--melon-tint2); border-radius: 10px; }
.menu li .codes { margin-left: auto; font-size: 10px; color: var(--ink3); letter-spacing: .06em; flex: none; }
.menu li .codes b { color: var(--melon-ink); }
.menu li .tag { font-size: 10px; font-weight: 700; color: var(--melon-ink); background: var(--melon-tint);
                border-radius: 6px; padding: 2px 6px; flex: none; }
/* ① 알레르기 — NEIS 가 메뉴명에 붙여 보내는 번호(1~19). 내 항목은 브라우저에만 저장한다 */
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.chips span { font-size: 10px; font-weight: 700; border-radius: 6px; padding: 3px 7px;
              background: var(--hair); color: var(--ink2); }
.chips span.on { background: var(--melon-tint); color: var(--melon-ink); }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pick button { font: inherit; font-size: 11.5px; font-weight: 700; border: 0; cursor: pointer;
               min-height: 34px; padding: 6px 12px; border-radius: 999px; background: var(--hair); color: var(--ink2); }
.pick button[aria-pressed="true"] { background: var(--melon); color: #2B1410; }
.pick button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ⑤ 영양 3칸 — 색은 칸의 정체성, 상태는 우상단 플래그. 둘을 섞지 않는다 */
.kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.kpi > div { position: relative; border-radius: var(--r-tile); padding: 11px 12px 12px; }
.kpi > div:nth-child(1) { background: #CFE9E7; }
.kpi > div:nth-child(2) { background: var(--teal-tint2); }
.kpi > div:nth-child(3) { background: var(--melon-tint); }
.kpi em { font-style: normal; display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; opacity: .85; }
.kpi > div:nth-child(1) em { color: var(--teal-ink); }
.kpi > div:nth-child(2) em { color: #3D8583; }
.kpi > div:nth-child(3) em { color: var(--melon-ink); }
.kpi b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: #22403E; margin-top: 3px; }
.kpi > div:nth-child(3) b { color: #4A2A23; }
.kpi span { font-size: 11px; color: #4C6564; margin-top: 2px; display: block; }
.kpi > div:nth-child(3) span { color: #7A4A3E; }
.kpi .flag { position: absolute; right: 9px; top: 9px; font-size: 10px; font-weight: 700; padding: 2px 7px;
             border-radius: 999px; background: #FFD3C9; color: #A83A28; margin: 0; }
.kpi .flag:empty { display: none; }

/* ⑥ 영양소 칩 — 토글 없이 항상 펼침. 권장섭취량(RNI) 대비 과부족만 말한다.
   색은 JS 가 plotly RdBu(100% = 가운데 흰색, 적음=빨강·많음=파랑)를 inline 으로 적는다(09-04). 아래 data-band 색은 폴백.
   그중 평균필요량(EAR)에도 못 미치는 칸만 멜론 외곽선 + "부족" 글자를 더해 3칸의 "부족 N" 과 맞춘다 */
.micro { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.micro > div { display: flex; flex-direction: column; gap: 5px; }
.micro .v { height: 52px; border-radius: 14px; display: flex; flex-direction: column; align-items: center;
            justify-content: center; gap: 1px; font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.micro .v em { font-style: normal; font-size: 9px; font-weight: 700; }
.micro .n { font-size: 9.5px; color: var(--ink3); text-align: center; letter-spacing: -.03em; }
.micro [data-band="hi"]   .v { background: linear-gradient(180deg, #CDE9E7, #B5DAD8); color: #0A5F5C; }
.micro [data-band="mid"]  .v { background: linear-gradient(180deg, var(--teal-tint2), var(--teal-tint)); color: var(--teal-ink); }
.micro [data-band="lo"]   .v { background: linear-gradient(180deg, #FFF1EC, #FFDCD3); color: #C9452F; }
.micro [data-band="short"] .v { background: linear-gradient(180deg, #FFD9CF, #FFB2A1); color: #8E2E1E; box-shadow: inset 0 0 0 1.5px var(--melon); }
.micro [data-band="short"] .n { color: var(--melon-ink); font-weight: 700; }

/* ② 이번 주 식단 — 요일이 컬럼. 색은 무관한 5색이 아니라 월→금 단일 색상 램프다
   (요일은 순서 있는 범주 · 명도 단조 감소 검증: L .962 → .794, 인접 ΔL ≥ .034) */
.week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px;
        align-items: stretch; }
.week > div { border-radius: 14px; padding: 10px 5px 11px; display: flex; flex-direction: column;
              align-items: center; gap: 5px; text-align: center; min-width: 0; }
.week .d { font-size: 10px; font-weight: 700; color: var(--ink3); letter-spacing: .04em; }
.week .n { font-size: 15px; font-weight: 700; line-height: 1; color: var(--ink2); }
/* 긴 이름(친환경토마코펜라이스)이 칩 밖으로 나가지 않게: keep-all 은 유지하되
   달리 방법이 없을 때만 낱말 안에서 끊고, 세 줄에서 말줄임한다 */
.week .m { font-size: 10.5px; font-weight: 500; color: var(--ink); line-height: 1.35;
           word-break: keep-all; overflow-wrap: anywhere; min-width: 0; max-width: 100%;
           display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.week .k { font-size: 9.5px; color: #4A4740; margin-top: auto; padding-top: 4px; line-height: 1.35; }
/* 요일 5색 — 월은 브랜드 아쿠아, 화는 에그셸 계열을 그대로 쓰고 나머지 셋을 최대한 벌렸다.
   전체쌍 정상시야 최악 ΔE 10.7 · 본문 대비는 어디서나 7.2:1 이상.
   색맹에서는 갈리지 않는 쌍이 있으므로 칩마다 요일 글자와 날짜를 반드시 함께 둔다 */
.week [data-wd="1"] { background: #9BD7D5; }   /* 월 · 브랜드 아쿠아 */
.week [data-wd="2"] { background: #FBE9B7; }   /* 화 · 에그셸 */
.week [data-wd="3"] { background: #F3B2A4; }   /* 수 · 멜론 */
.week [data-wd="4"] { background: #CBC2FB; }   /* 목 · 페리윙클 */
.week [data-wd="5"] { background: #BFE3F7; }   /* 금 · 스카이블루(09-04, 이전 세이지 #A3F5B4) */
.week [data-when="past"] > * { opacity: .62; }
/* 오늘(09-04 개정): 차콜 채움·밑줄 대신 요일색을 유지하고, 칩이 천천히 커졌다 작아지는 숨쉬기(2.6초, 1 → 1.035)로 강조.
   transform 이라 모션 축소 설정에서는 자동으로 멈춘다(맨 아래 미디어 쿼리) — 그때는 메뉴 굵게·날짜 진하게만 남는다 */
.week [data-when="today"] { animation: breathe 2.6s ease-in-out infinite; box-shadow: 0 6px 18px rgba(51,49,45,.12); position: relative; z-index: 1; }
@keyframes breathe { 50% { transform: scale(1.035); box-shadow: 0 10px 24px rgba(51,49,45,.18); } }
.week [data-when="today"] .d, .week [data-when="today"] .n { color: var(--ink); }
.week [data-when="today"] .m { font-weight: 700; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, var(--ink) 0 42%, #FFFCF6 50%, var(--ink) 58% 100%); background-size: 260% 100%;
  animation: shine 3.2s linear infinite; }                              /* 오늘 메뉴 글자 위로 빛이 왼쪽→오른쪽 훑고 지나간다(09-04). 모션 축소면 정지 = 잉크색 글자 */
@keyframes shine { from { background-position: 120% 0; } to { background-position: -40% 0; } }

/* ⑧ 잔반 탄소 — 오늘급식 카드의 아래 절(읽기 전용, 개인 기록·선택 없음). 카드 여백을 음수로 밀어 틸 틴트가
   카드 가장자리와 아래 모서리까지 닿는다 — "같은 카드의 다른 종류 정보"라는 신호는 이 틴트 하나뿐 */
.carbon { background: var(--teal-tint2); margin: 20px calc(-1 * var(--px)) calc(-1 * var(--py));
          padding: 18px var(--px) var(--py); border-radius: 0 0 var(--r-card) var(--r-card); }
.carbon .eyebrow { color: var(--teal-ink); }
.co2 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.co2 b { font-size: 46px; font-weight: 700; letter-spacing: -.035em; line-height: 1; color: var(--teal-ink); }
.co2 span { font-size: 12.5px; color: #5C6E6D; }
.cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.cmp > div { background: var(--surface); border-radius: var(--r-tile); padding: 12px 14px; }
.cmp b { display: block; font-size: 19px; font-weight: 700; color: var(--ink); }
.cmp span { display: block; font-size: 11px; color: var(--ink2); margin-top: 3px; line-height: 1.45; }

/* ⑨ 이슈 피드 — 제목(원문 링크) · 칩 행(출처 · 날짜 · AI 요약/DeepL 번역) · 요약 3줄(digest.bullets, 틸 점) · "왜 중요한가" 한 줄 · 원문 보기.
   digest 가 없으면(Phase 4c 전) 요약 2줄 클램프 (PLAN §5.4).
   09-04: 카드는 차콜 바탕(바탕 종이색과 대비를 높인다)이고 기사마다 밝은 타일 하나 — 기사 사이 구분은 타일 사이의 차콜 띠(2px 멜론 선 포함)가 맡는다 */
#newscard { background: var(--ink); box-shadow: var(--e2); }
#newscard .eyebrow { color: rgba(255,253,246,.62); }
.news { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.news li { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 14px; background: var(--surface); border-radius: 18px;
           border-top: 3px solid var(--melon); }
/* 헤드라인이 잘리는 것보다 요약이 짧은 편이 낫다 — 제목에 3줄, 요약에 2줄 */
.news li > a:first-child { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.4; letter-spacing: -.01em;
             display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news li p { margin: 0; font-size: 11.5px; color: var(--ink2); line-height: 1.55;
             display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news .bullets { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.news .bullets li { display: block; padding: 0 0 0 14px; border: 0; position: relative; font-size: 13.5px; line-height: 1.55; color: #4A4740; }
.news .bullets li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.news li p.why { font-style: italic; color: var(--ink2); font-size: 12.5px; -webkit-line-clamp: 1; }
.news a.more { align-self: flex-start; font-size: 11.5px; font-weight: 700; color: var(--teal-ink); }
.news li div { display: flex; align-items: center; gap: 8px; }
.news li em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--teal-ink);
              background: var(--teal-tint); border-radius: 6px; padding: 3px 7px; }
.news li em.ko { color: var(--ink3); background: var(--hair); }   /* 기계 번역임을 숨기지 않는다 */
.news li small { font-size: 11px; color: var(--ink3); }

/* 데스크톱 — 화면마다 12컬럼 그리드(1920×1080 기준, 09-03 개정). 왼쪽 5컬럼은 라이브 카드(대기시간·평면도)가 두 행을 차지하고
   오른쪽 7컬럼에 인사이트 카드가 두 열로 놓인다. 카드가 하나뿐인 화면(오늘급식·이슈피드)은 가운데 8컬럼 */
@media (min-width: 900px) {
  :root { --px: 26px; --py: 24px; }
  /* 대기시간 */
  #waitcard { grid-column: 1 / 6; grid-row: 1 / 3; }
  #wait > .meta { grid-column: 1 / 6; grid-row: 3; }
  #heatcard { grid-column: 6 / 13; grid-row: 1; }
  #goldencard { grid-column: 6 / 9; grid-row: 2; }
  #forecastcard { grid-column: 9 / 13; grid-row: 2; }
  #bottlecard { grid-column: 6 / 9; grid-row: 3; }
  #qualitycard { grid-column: 9 / 13; grid-row: 3; }
  /* 실시간뷰(09-04 개정) — 급식실 현황(왼쪽 5칸)과 최근 30분 밀집도(오른쪽 7칸)가 같은 크기의 평면도를 나란히 갖는다:
     두 스테이지 모두 --stage-w 폭 × 318:460 이라 투영(floor.js geom)이 같은 배율로 그려진다. 밀집도의 글(리드·칩·범례·각주)은
     평면도 오른쪽 여백에 세로로. 오늘 리포트는 그 아래 한 행 전체. 평면도는 09-03 보다 조금 크다(520 → 약 600px 높이) */
  #room { --stage-w: clamp(340px, 21.5vw, 420px); }
  #plancard { grid-column: 1 / 6; grid-row: 1; }
  #plancard .stage { width: var(--stage-w); margin: 12px auto 0; }
  #zonecard { grid-column: 6 / 13; grid-row: 1; }
  #zonecard .zonewrap { display: flex; flex-direction: row; gap: 28px; align-items: stretch; margin-top: 12px; }   /* insight.css 의 column 을 여기서 row 로 */
  #zonecard .zonestage { flex: none; width: var(--stage-w); margin-top: 0; }
  #zonecard .zoneside { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
  #zonecard .zoneside .lead { font-size: 17px; line-height: 1.45; margin-top: 0; }
  #zonecard .zoneside .chips2 { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 2px; }
  #zonecard .zoneside .chips2 span { justify-content: space-between; font-size: 14px; padding: 12px 16px; border-radius: 16px; }
  #zonecard .zoneside .chips2 span small { font-size: 12.5px; }
  #zonecard .zoneside .foot { margin-top: 4px; font-size: 12px; }
  #reportcard { grid-column: 1 / 13; grid-row: 2; }
  /* 주간식단 */
  #weekcard { grid-column: 1 / 13; grid-row: 1; }
  #nutricard { grid-column: 1 / 7; grid-row: 2; }
  #topcard { grid-column: 7 / 13; grid-row: 2; }
  /* 오늘급식 · 이슈피드 — 카드 하나, 가운데 */
  #mealcard, #newscard { grid-column: 3 / 11; grid-row: 1; }
  .big b { font-size: 120px; } .big i { font-size: 28px; }
  .trend { padding-top: 28px; padding-bottom: 30px; }
  #chart { height: 152px; }
}
@media (min-width: 900px) {
  .news li { padding: 20px 22px 18px; }
  .news li > a:first-child { font-size: 18px; }
  .news .bullets li { font-size: 14.5px; }
}
@media (hover: hover) {
  .card, .waitcard { transition: transform .18s ease, box-shadow .18s ease; }
  .card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(51,49,45,.05), 0 16px 34px rgba(51,49,45,.08); }
  .pick button { transition: background .12s ease; }
  .news li a:hover { color: var(--teal-ink); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; transform: none !important; }
}