/* 음식 칼로리 사전 페이지 (tools/build-food-pages.mjs 가 만드는 /food/ 아래 페이지)
   디자인: Figma "Design-Guide › 음식 칼로리 사전" (2026-10, PC 1280 / 모바일 375) */
:root{--blue-1:#DFEAFF;--blue-8:#4880EE;--blue-d8:#3446A6;--grey-0:#F8F9FA;--grey-1:#F1F3F5;--grey-3:#DEE2E6;--grey-6:#868E96;--grey-7:#495057;--grey-9:#212529;--white:#FFFFFF}
:root{--c-primary:var(--blue-8);--c-primary-sub:var(--blue-1);--c-bg:var(--grey-0);--c-surface:var(--white);--c-surface-sub:var(--grey-1);--c-border:var(--grey-3);--c-text:var(--grey-9);--c-text-mid:var(--grey-7);--c-text-sub:var(--grey-6);--c-on-primary:var(--white)}
:root{--ff-base:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo',sans-serif;--fs-body:16px;--fs-small:14px;--fs-caption:13px;--fs-micro:12px;--fs-h1:30px;--fs-h2:20px;--fs-h4:18px;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-extrabold:800;--lh-heading:1.3;--lh-relaxed:1.7;--radius-card:16px;--radius-item:10px}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--ff-base);font-size:var(--fs-body);color:var(--c-text);background:var(--c-bg);line-height:var(--lh-relaxed);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere}
a{color:var(--c-primary)}
ul{list-style:none}

/* ===== 머리 ===== */
.site-header{background:var(--c-surface);border-bottom:1px solid var(--c-border)}
.site-header-inner{max-width:880px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-logo{line-height:0}
.site-logo img{height:26px;width:auto}
.site-nav a{font-size:var(--fs-caption);font-weight:var(--fw-bold);color:var(--c-text);text-decoration:none}

main{max-width:880px;margin:0 auto;padding:28px 16px 64px}
.breadcrumb{font-size:var(--fs-micro);color:var(--c-text-sub);margin-bottom:14px}
.breadcrumb a{color:var(--c-text-sub);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
h1{font-size:var(--fs-h1);font-weight:var(--fw-bold);line-height:var(--lh-heading);letter-spacing:-0.02em;margin-bottom:10px}
h2{font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:var(--lh-heading);margin:40px 0 12px}
.alias{font-size:var(--fs-micro);color:var(--c-text-sub);margin-bottom:14px}
.note{font-size:var(--fs-micro);color:var(--c-text-sub);margin-top:10px;line-height:1.6}
.bullets li{position:relative;padding-left:14px;font-size:var(--fs-body);line-height:1.6}
.bullets li::before{content:'•';position:absolute;left:2px;color:var(--c-text)}
.bullets li+li{margin-top:4px}

/* ===== 카드 공통 ===== */
.summary,.diet,.faq-section,.locked-box,.table-wrap{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-card)}

/* 요약 */
.summary{padding:20px;margin:16px 0}
.summary>p{line-height:1.6}
.summary>p+p{margin-top:8px}
.kcal-hero{display:flex;align-items:baseline;gap:8px;margin-bottom:16px}
.kcal-hero strong{font-size:36px;font-weight:var(--fw-bold);color:var(--c-primary);line-height:1;letter-spacing:-0.02em}
.kcal-hero span{color:var(--c-text-sub);font-size:var(--fs-micro)}
.total-line{font-size:var(--fs-caption);color:var(--c-text-sub);margin:-6px 0 14px}
.total-line b{color:var(--c-text);font-weight:var(--fw-semibold)}
.macro-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.macro{background:var(--c-surface-sub);border-radius:12px;padding:12px}
.macro b{display:block;font-size:var(--fs-h4);font-weight:var(--fw-bold);line-height:1.3}
.macro b.undisclosed{color:var(--c-text-sub);font-weight:var(--fw-regular)}
.macro span{font-size:var(--fs-micro);color:var(--c-text-sub)}

/* 다이어트 관점 */
.diet{padding:20px;margin:40px 0 16px}
.diet h2{margin:0 0 10px}

/* ===== 레시피 · 비타민·무기질: 잠금 카드 ===== */
.locked-box{position:relative;padding:18px;overflow:hidden}
.locked-caption{font-size:var(--fs-micro);color:var(--c-text-sub);margin-bottom:12px}
.locked-caption b{font-weight:var(--fw-bold);color:var(--c-text-mid)}
.locked-food{background:var(--c-bg);border-radius:var(--radius-item);padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.locked-food>b{font-size:var(--fs-small);font-weight:var(--fw-bold)}
.locked-food span{font-size:var(--fs-micro);color:var(--c-text-sub)}
.locked-food span b{color:var(--c-text);font-weight:var(--fw-bold)}
.locked-food i{display:inline-block;width:1px;height:10px;background:var(--c-border);margin:0 10px;vertical-align:middle}
.locked-rows{margin-top:8px}
.locked-rows li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--c-border)}
.locked-rows li:last-child{border-bottom:0}
/* 흐린 값: 글자는 data-t 를 CSS 로 그린다 */
.ph::before{content:attr(data-t)}
.locked-rows .ph{user-select:none}
/* 레시피 줄은 통째로, 비타민 줄은 값만 흐리게 */
.recipe-rows{filter:blur(4px);pointer-events:none;user-select:none}
.recipe-rows .lines{display:flex;flex-direction:column;gap:2px}
.recipe-rows .name{font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--c-text-mid)}
.recipe-rows .sub{font-size:var(--fs-micro);color:var(--c-text-sub)}
.recipe-rows .amount{min-width:96px;padding:6px 10px;border:1px solid var(--c-border);border-radius:8px;font-size:var(--fs-caption);color:var(--c-text-sub);text-align:left}
.recipe-rows .amount::after{content:' g ▾';float:right}
.vitamin-rows li span:first-child{font-size:var(--fs-small);color:var(--c-text-mid)}
.vitamin-rows .ph{font-size:var(--fs-small);color:var(--c-text-mid);filter:blur(4px)}
.locked-body{position:relative}
.locked-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center}
.lock-icon{width:22px;height:22px;color:var(--c-text)}
.locked-overlay p{font-size:var(--fs-h4);font-weight:var(--fw-bold);line-height:1.35;color:var(--c-text)}
.recipe-cta{display:inline-flex;align-items:center;gap:6px;padding:9px 22px;border-radius:999px;background:var(--c-primary);color:var(--c-on-primary);font-size:15px;font-weight:var(--fw-bold);text-decoration:none;box-shadow:0 4px 12px rgba(72,128,238,0.25)}
.recipe-cta .brand-logo{height:18px;width:auto;display:block}

/* ===== 영양성분표 ===== */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
caption{text-align:left;padding:14px 16px 0;font-size:var(--fs-micro);color:var(--c-text-sub)}
th,td{padding:12px 16px;border-bottom:1px solid var(--c-border);text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{font-size:var(--fs-micro);color:var(--c-text-sub);font-weight:var(--fw-semibold)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
/* 상위 항목은 진하게, 하위 항목(당류·포화지방 등)은 연하게 */
tbody th{font-weight:var(--fw-bold);color:var(--c-text)}
tbody td{font-weight:var(--fw-semibold)}
.sub-row th{padding-left:30px}
tbody tr.sub-row th,tbody tr.sub-row td{font-weight:var(--fw-regular);color:var(--c-text-sub)}
td.undisclosed{text-align:right;font-size:var(--fs-micro);color:var(--c-text-sub);font-weight:var(--fw-regular)}

/* ===== 자주 묻는 질문 ===== */
.faq-section{padding:4px 20px 18px;margin:40px 0 16px}
.faq-section h2{margin-top:18px}
.faq{font-size:var(--fs-small)}
.faq dt{font-weight:var(--fw-bold);margin-top:24px;line-height:1.5}
.faq dt:first-child{margin-top:6px}
.faq dd{margin-top:6px;line-height:1.7;color:var(--c-text-mid)}
.faq-section .note{margin-top:22px}

/* ===== 출처 ===== */
.source{margin-top:40px;padding-top:18px;border-top:1px solid var(--c-border);font-size:var(--fs-micro);color:var(--c-text-sub)}
.source p+p{margin-top:6px}

/* ===== 목록 칸 ===== */
.food-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.food-list a{height:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:9px 14px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-item);text-decoration:none;color:var(--c-text);font-size:var(--fs-body);line-height:1.4}
.food-list a:hover{border-color:var(--c-primary)}
.food-list .item-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.food-list .item-brand{font-size:var(--fs-micro);color:var(--c-text-sub)}
.food-list .item-name{font-weight:var(--fw-bold);color:var(--c-text)}
.food-list .item-kcal{flex-shrink:0;font-size:var(--fs-micro);color:var(--c-text-sub);white-space:nowrap;padding-top:2px}
.main-food-grid{display:grid}

/* 검색 */
.search-box{display:flex;align-items:center;gap:8px;margin:20px 0 28px;padding:10px 14px;border-radius:12px;background:var(--c-surface-sub)}
.search-icon{width:16px;height:16px;flex-shrink:0;color:var(--c-text-mid)}
.search{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--c-text);outline:none}
.search::placeholder{color:#ADB5BD}
.search-results{margin:-12px 0 24px}
.search-results a{flex-direction:column;gap:2px}
.search-results .item-kcal{padding-top:0;white-space:normal}

.pagination{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0}
.pagination a,.pagination span{min-width:36px;padding:8px 12px;border-radius:var(--radius-item);text-align:center;font-size:var(--fs-caption);text-decoration:none;border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text)}
.pagination span[aria-current]{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary);font-weight:var(--fw-bold)}
.pagination span:not([aria-current]){border:0;background:none}

/* ===== 홍보 카드 ===== */
.promo{margin:40px 0;padding:26px 24px;border-radius:20px;background:var(--c-primary);color:var(--c-on-primary);box-shadow:0 12px 28px rgba(72,128,238,0.22)}
.promo-eyebrow{font-size:var(--fs-micro);font-weight:var(--fw-bold)}
.promo h2{margin:6px 0 6px;font-size:var(--fs-h2);color:var(--c-on-primary)}
.promo>p:not(.promo-eyebrow){font-size:15px;line-height:1.6;opacity:0.92}
.promo-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.promo-buttons a.store-ios,.promo-buttons a.store-android{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--radius-item);background:rgba(255,255,255,0.16);border:1px solid rgba(255,255,255,0.55);color:var(--c-on-primary);font-size:14px;font-weight:var(--fw-bold);text-decoration:none;white-space:nowrap}
.promo-logo{margin-left:12px;line-height:0}
.promo-logo .brand-logo{height:22px;width:auto}

/* ===== 하단 고정 바 ===== */
.cta{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--c-bg);box-shadow:0 -6px 20px rgba(33,37,41,0.08);padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
.cta-inner{max-width:880px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.cta-text .brand-logo{height:16px;width:auto;display:block;margin-bottom:4px}
.cta-text strong{display:block;font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:1.4}
.cta-text p{font-size:var(--fs-micro);line-height:1.4;margin-top:2px}
.cta-buttons{display:flex;gap:8px;flex-shrink:0}
.cta-buttons a{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:var(--radius-item);background:var(--c-primary);color:var(--c-on-primary);font-size:14px;font-weight:var(--fw-bold);text-decoration:none;white-space:nowrap}
.store-icon{width:18px;height:18px;flex-shrink:0}
/* 휴대폰에서는 그 기기의 스토어만 */
.os-ios .store-android,.os-android .store-ios{display:none !important}

/* ===== 바닥글 ===== */
.site-footer{max-width:880px;margin:0 auto;padding:24px 16px 150px;font-size:var(--fs-micro);color:var(--c-text-sub);border-top:1px solid var(--c-border);line-height:2}
.site-footer a{color:var(--c-text-sub);text-decoration:none}

/* ===== 모바일 ===== */
@media (max-width:640px){
  :root{--fs-h1:24px;--fs-h2:18px}
  main{padding-top:24px}
  .kcal-hero strong{font-size:32px}
  .macro{padding:10px}
  .food-list{grid-template-columns:1fr}
  .food-list a{align-items:center}
  .search-box{margin:16px 0 20px}
  .col-100{display:none}
  th,td{padding:12px 14px}
  .promo{padding:22px 20px}
  .promo-logo{margin-left:4px}
  .locked-overlay p{font-size:var(--fs-body)}
  .cta-inner{flex-direction:column;align-items:stretch;gap:10px}
  .cta-text p{display:none}
  .cta-buttons a{flex:1;padding:12px}
  .site-footer{padding-bottom:170px}
}
/* 영양성분표: 이름 칸을 넓게 두고 수치는 오른쪽에 모은다(디자인) */
table th:first-child,table td:first-child{width:60%}
@media (max-width:640px){table th:first-child,table td:first-child{width:auto}}
/* 분류 페이지 검색은 배경 없이(디자인) */
.search-box.plain{background:none;padding-left:4px}