/* 음식 칼로리 하위 페이지(음식·분류·목록) — 단일 컬럼 수익형(HUB_STANDARD) · 파랑 표준. evcar sub.css 에서 복사 */
:root{
  --brand:#2563eb; --dark:#1d4ed8; --light:#dbeafe; --bg:#f5f8ff; --text:#101c33; --muted:#5b6b8c;
  --border:#c9dcf8; --ok:#15803d; --warn:#b45309; --bad:#b91c1c; --card:#fff;
  --shadow:0 12px 35px rgba(37,99,235,.10);
}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden}
body{background:var(--bg);color:var(--text);font:16px/1.7 "Noto Sans KR",system-ui,-apple-system,"Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--dark)}
img{max-width:100%}

/* 헤더 — 전체폭(콘텐츠만 640) */
.main-header{background:linear-gradient(135deg,#1e3a8a,#2563eb);color:#fff}
.header-inner{max-width:640px;margin:0 auto;padding:22px 16px 20px}
.header-inner .brand{color:#dbeafe;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.02em}
.header-inner h1{margin:6px 0 4px;font-size:25px;line-height:1.35;text-wrap:balance}
.header-inner .hook{margin:0;color:#e0ecff;font-size:15px}

main.content{max-width:640px;margin:0 auto;padding:0 16px 30px;min-width:0}
.crumb{font-size:13px;color:var(--muted);margin:14px 2px 6px;overflow-wrap:anywhere}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{text-decoration:underline}

section.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 16px;margin:14px 0;box-shadow:var(--shadow);min-width:0}
section.card h2{font-size:19px;margin:0 0 10px;line-height:1.4;text-wrap:balance}
section.card h3{font-size:16px;margin:16px 0 6px}
section.card p{margin:8px 0}
.muted{color:var(--muted)} .small{font-size:13px}

/* 핵심 숫자 3칸 */
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.quick div{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 10px;text-align:center;min-width:0}
.quick b{display:block;font-size:20px;color:var(--dark);font-variant-numeric:tabular-nums;line-height:1.3}
.quick span{font-size:12px;color:var(--muted)}
@media (max-width:420px){.quick b{font-size:17px}}

.answer{background:var(--light);border-left:5px solid var(--brand);border-radius:10px;padding:12px 14px;margin:12px 0;font-size:15.5px}

/* 표 — 가로 스크롤은 표 상자 안에서만 */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0}
table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
th,td{border-bottom:1px solid #e3ebfa;padding:8px 6px;text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left;white-space:normal}
thead th{background:var(--light);color:#1e3a8a;font-weight:700;position:sticky;top:0}
tr.hl td{background:#fff7e6}
.tag{display:inline-block;font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:6px;background:#eef2ff;color:#3730a3;margin-left:4px}
.tag.ok{background:#dcfce7;color:var(--ok)} .tag.warn{background:#fef3c7;color:var(--warn)} .tag.bad{background:#fee2e2;color:var(--bad)}

/* 링크 그리드(형제 지역·차종) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px;margin:8px 0}
.grid a{display:block;background:#fff;border:1px solid var(--border);border-radius:9px;padding:8px 10px;text-decoration:none;color:var(--text);font-size:14px;min-width:0;overflow-wrap:anywhere}
.grid a b{display:block;color:var(--dark);font-size:13px;font-variant-numeric:tabular-nums}
.grid a:hover{border-color:var(--brand)}
.grid a.cur{border-color:var(--brand);background:var(--light)}

/* 단계 */
ol.steps{padding-left:20px;margin:6px 0} ol.steps li{margin:6px 0}

/* FAQ */
details{border-bottom:1px solid #e3ebfa;padding:10px 2px}
details summary{cursor:pointer;font-weight:700;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"Q. ";color:var(--brand)}
details p{margin:8px 0 2px;color:#233152}

/* 광고 — 최소 스타일(HUB_STANDARD: 카드·max-width 금지) */
.native-ad{margin:22px auto;text-align:center;min-width:0}
.native-ad-tag{display:none}

.net{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.net a{display:block;background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 12px;text-decoration:none;color:var(--text);min-width:0}
.net a b{display:block;color:var(--dark)} .net a span{font-size:12.5px;color:var(--muted)}

.cta{display:block;text-align:center;background:var(--brand);color:#fff;text-decoration:none;font-weight:700;border-radius:10px;padding:12px;margin:10px 0}
.cta:hover{background:var(--dark)}

footer.main-footer{max-width:640px;margin:0 auto;padding:18px 16px 40px;color:var(--muted);font-size:12.5px;line-height:1.6}
footer.main-footer a{color:var(--muted)}

/* 숨은돈 알리미 채널 추가 — K패스(02_kpass_N) 안 02 그대로(전용 영역, 공용 랜덤 배너 X) */
/* ───────── 카카오톡 채널 유도 (안 02)
   전면 노랑은 애드센스 배너와 생김새가 겹쳐 읽기 전에 건너뛴다. 본문 카드와 같은 문법으로
   두고 노랑은 왼쪽 띠와 버튼에만 쓴다 — 페이지에서 가장 밝은 지점이 버튼 하나가 된다.
   카톡 채널 추가의 진짜 장벽은 "스팸 아냐?"라서, 콘텐츠처럼 보일수록 추가율이 오른다. ───────── */
.kko-cta{
  display:block;margin:30px auto 8px;padding:22px 22px 20px;
  background:#fff;border:1px solid var(--border);border-left:5px solid #FEE500;
  border-radius:16px;color:var(--text) !important;text-decoration:none !important;
  box-shadow:0 8px 22px rgba(37,99,235,.08);
  transition:transform .16s,box-shadow .16s,border-color .16s}
.kko-cta:hover{transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(37,99,235,.14);border-color:#93c5fd;border-left-color:#FEE500}
.kko-deco{display:none}                      /* 워터마크는 광고처럼 보이게 해서 뺀다 */
.kko-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  background:#FEE500;color:#2B1A16;font-size:11.5px;font-weight:800;letter-spacing:.2px}
.kko-dot{width:6px;height:6px;border-radius:50%;background:#2B1A16;
  animation:kko-blink 1.4s ease-in-out infinite}
@keyframes kko-blink{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.kko-dot{animation:none}}
.kko-head{display:block;margin:13px 0 7px;font-size:20px;font-weight:900;
  letter-spacing:-.035em;line-height:1.36;color:var(--text);word-break:keep-all}
.kko-sub{display:block;font-size:14px;line-height:1.7;color:var(--muted);word-break:keep-all}
.kko-chips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 16px}
.kko-chips span{padding:4px 11px;border-radius:999px;background:#eff6ff;color:#1d4ed8;
  border:1px solid #dbeafe;font-size:11.5px;font-weight:700;white-space:nowrap}
.kko-btn{display:block;padding:15px;border-radius:12px;background:#FEE500;color:#2B1A16;
  font-size:15.5px;font-weight:900;text-align:center;
  box-shadow:0 6px 18px rgba(254,229,0,.55)}
.kko-cta:hover .kko-btn{background:#FFD900;box-shadow:0 9px 24px rgba(254,229,0,.7)}
@media(max-width:560px){
  .kko-cta{margin:24px auto 6px;padding:18px 16px 17px;border-radius:14px}
  .kko-head{font-size:17.5px}
  .kko-sub{font-size:13.5px}
  .kko-btn{padding:14px;font-size:15px}}

/* 홈 계산기 */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.calc label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700;color:var(--muted);min-width:0}
.calc select,.calc input[type=number]{font:inherit;font-size:15px;color:var(--text);padding:10px;border:1px solid var(--border);border-radius:10px;background:#fff;min-width:0;width:100%}
.calc label.chk{grid-column:1/-1;flex-direction:row;align-items:center;gap:8px;color:var(--text);font-weight:500}
.calc label.chk input{width:18px;height:18px}
@media (max-width:420px){.calc{grid-template-columns:1fr}}
.c-out{margin-top:6px}
.c-out .sum{background:var(--light);border-radius:12px;padding:14px;text-align:center;margin:8px 0}
.c-out .sum b{display:block;font-size:28px;color:var(--dark);font-variant-numeric:tabular-nums}
.c-out .links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.c-out .links a{font-size:14px}
.calc label.wide{grid-column:1/-1}

/* 탄단지 비율 막대 */
.bar{display:flex;height:28px;border-radius:8px;overflow:hidden;margin:8px 0;font-size:12px;font-weight:700;color:#102a43}
.bar span{display:flex;align-items:center;justify-content:center;min-width:0;white-space:nowrap;overflow:hidden}