/* 아래 블록은 index.html 에서 자동으로 떠 온다. 직접 고치지 말 것 —
   build_product_pages.py 를 다시 돌리면 덮어쓴다. */
:root{
      --paper:#f2eee6;
      --ink:#111111;
      --sand:#ddd5c7;
      --lime:#d8ff3e;
      --blush:#f6cbd6;
    }
:root{
    --ui-radius:1.5rem;
  }
:root{
    --ui-radius:1.5rem;
  }
:root{
    --ui-radius:14px;
    --ui-radius-sm:10px;
  }
:root{
    --control-rail-width:760px;
    --control-height:58px;
  }
:root{
    --font:'Pretendard Variable', Pretendard, -apple-system, 'NanumSquareNeo', sans-serif;
    --cx-border:#e8e8e8;
    --cx-ink:#000;
    --cx-sub:#333;
    --cx-meta:#666;
    --cx-soft:#f6f6f6;
    --cx-softer:#f2f2f2;
    --cx-accent:#f6e163;
    --r-btn:60px;
    --r-card:16px;
    --ease-out:cubic-bezier(.22,.8,.26,.99);
  }
:root{
    --ink:#222222;
    --pal-vermilion:#F35C46;
    --pal-aqua:#7EE3D0;
    --pal-yellow:#F6E468;
    --pal-cobalt:#3860AC;
    --pal-salmon:#F69B94;
    --pal-lime:#B0E477;
    --pal-orange:#F19266;
    --pal-rose:#E5B8D0;
    --pal-green:#24A965;
    --pal-sky:#7BD0F9;
    --pal-cream:#F2E8C3;
    --pal-lavender:#C3B0FD;
    --pal-periwinkle:#9EB7EB;
    --pal-sage:#A3C9AA;
    --pal-sand:#E3D2B0;
    --pal-mist:#C7D2DE;
    --pal-stone:#DAD4C2;
    --pal-slate:#404E60;
    
    --cat-bread:var(--pal-sky);
    --cat-snack:var(--pal-mist);
    --cat-drink:var(--pal-cream);
    --cat-icecream:var(--pal-green);
    --cat-sauce:var(--pal-lavender);
    --cat-cereal:var(--pal-vermilion);
    --cat-jamcandy:var(--pal-stone);
    --cat-favorites:var(--pal-periwinkle);
  }
:root{
    --cat-bread:#E3D2B0;      
    --cat-snack:#F19266;      
    --cat-drink:#7EE3D0;      
    --cat-icecream:#24A965;   
    --cat-sauce:#F69B94;      
    --cat-cereal:#F2E8C3;     
    --cat-jamcandy:#E5B8D0;   
    --cat-favorites:#B0E477;  
    
    --cat-yogurt:#DAD4C2;        
    --cat-mealkit:#F6E468;       
    --cat-chickenbreast:#9EB7EB; 
    --cat-noodle:#C7D2DE;        
    --cat-salad:#A3C9AA;         
  }
:root{
    --font:'Geist', 'Pretendard Variable', Pretendard, -apple-system, 'NanumSquareNeo', sans-serif;
  }
:root{
    --header-rail:812px;
    --rail-pad:26px;
  }
:root{      --paper:#f2eee6;
      --ink:#111111;
      --sand:#ddd5c7;
      --lime:#d8ff3e;
      --blush:#f6cbd6;}
.product-detail-modal{
      width:min(420px, 100%);
      max-height:88vh;
      overflow:auto;
      border-radius:18px;
      background:#fff;
      color:#111;
      border:1px solid rgba(17,17,17,.08);
      box-shadow:0 20px 70px rgba(0,0,0,.18);
      padding:1.1rem;
    }
.product-detail-modal .detail-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      margin-bottom:.85rem;
    }
.product-detail-modal .detail-cat{
      display:inline-flex;
      border-radius:999px;
      background:#111;
      color:#fff;
      padding:.28rem .7rem;
      font-size:.7rem;
      font-weight:900;
    }
.product-detail-close{
      appearance:none;
      border:1px solid rgba(17,17,17,.15);
      border-radius:999px;
      background:#fff;
      color:#111;
      width:2.2rem;
      height:2.2rem;
      font-size:1rem;
      font-weight:900;
      line-height:1;
      cursor:pointer;
    }
.product-detail-modal .detail-img{
      width:100%;
      aspect-ratio:3/4;
      object-fit:cover;
      border-radius:.9rem;
      background:#f4f1ea;
    }
.product-detail-modal h3,
.product-detail-modal h1{
      margin:.9rem 0 0;
      font-size:1.15rem;
      line-height:1.3;
      font-weight:900;
      word-break:keep-all;
    }
.product-detail-modal .detail-brand{
      margin:.3rem 0 0;
      font-size:.85rem;
      color:rgba(17,17,17,.55);
      font-weight:700;
    }
.product-detail-modal .detail-facts .card-facts{ margin-top:.7rem; }
.product-detail-modal .detail-tags{
      display:flex;
      flex-wrap:wrap;
      gap:.4rem;
      margin-top:.85rem;
    }
.product-detail-modal .detail-tags span{
      display:inline-flex;
      align-items:center;
      border-radius:999px;
      border:1px solid rgba(17,17,17,.1);
      background:rgba(17,17,17,.05);
      padding:.3rem .7rem;
      font-size:.75rem;
      font-weight:800;
    }
body[data-theme="dark"] .product-detail-modal,
  body[data-theme="dark"] .product-detail-close{
      background:#fff;
      color:#111;
    }
:root{    --ui-radius:1.5rem;}
:root{    --site-bg:#fff;
    --ui-bg:#fff;
    --ui-panel:#fff;
    --ui-soft:#f4f4f4;
    --ui-softer:#efefef;
    --ui-line:rgba(17,17,17,.14);
    --ui-line-soft:rgba(17,17,17,.08);
    --ui-ink:#111;
    --ui-muted:rgba(17,17,17,.56);
    --ui-faint:rgba(17,17,17,.36);
    --ui-shadow:0 10px 28px rgba(17,17,17,.07);
    background:var(--ui-bg) !important;
    color:var(--ui-ink) !important;}
.site-footer{
    flex-shrink:0;
    width:100%;
    margin-top:0;
    margin-left:0;
    margin-right:0;
    padding:1.15rem max(1rem, calc((100vw - 1200px) / 2 + 1rem)) 1.35rem;
    box-sizing:border-box;
    background:#111 !important;
    color:#fff !important;
  }
.footer-sitemap,
  .footer-pages{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:.55rem .85rem;
    font-size:.78rem;
    line-height:1.7;
    word-break:keep-all;
    text-align:center;
  }
.footer-pages{ margin-bottom:.55rem; }
.footer-pages .footer-link{ font-weight:400 !important; opacity:.34; }
.footer-pages .footer-dot{ opacity:.34; }
.footer-pages .footer-link:hover{ opacity:1; }
.footer-link{color:#fff !important;text-decoration:none;font-weight:700;}
.footer-link:hover{text-decoration:underline;text-underline-offset:3px;}
.footer-muted{color:rgba(255,255,255,.58) !important;font-weight:400;}
.footer-dot{color:rgba(255,255,255,.32) !important;}
@media(max-width:767px){.site-footer{padding:1.15rem .9rem 1.35rem;}
.footer-sitemap,
    .footer-pages{font-size:.72rem;gap:.35rem .55rem;justify-content:flex-start;text-align:left;}}
:root{    --ui-radius:1.5rem;}
:root{    --ui-radius:14px;
    --ui-radius-sm:10px;}
:root{    --control-rail-width:760px;
    --control-height:58px;}
:root{    --ui-bg:#ffffff;
    --site-bg:#ffffff;
    --ui-panel:#ffffff;
    --ui-ink:#000;
    --ui-muted:#666;
    --ui-faint:#8b8b8b;
    --ui-line:#e8e8e8;
    --ui-line-soft:#e8e8e8;}
.sweetener-notice-modal,
  .product-detail-modal,
  .ingredient-filter-modal,
  body[data-theme="dark"] .ingredient-filter-modal,
  .sugar-modal{
    border-radius:var(--r-card) !important;
    border:1px solid var(--cx-border) !important;
    box-shadow:0 16px 48px rgba(0,0,0,.12) !important;
  }
.product-detail-modal .detail-img{ border-radius:12px !important; background:var(--cx-soft) !important; }
.product-detail-modal .detail-cat{ border-radius:var(--r-btn) !important; background:#000 !important; color:#fff !important; }
.product-detail-modal .detail-tags span{
    border-radius:var(--r-btn) !important;
    background:transparent !important;
    border:1px solid var(--cx-border) !important;
    font-weight:500 !important;
  }
.product-detail-close,
  .ingredient-modal-close{
    border-radius:50% !important;
    border:1px solid var(--cx-border) !important;
    background:#fff !important;
    color:#000 !important;
    transition:border-color .15s ease;
  }
.product-detail-close:hover,
  .ingredient-modal-close:hover{ border-color:#000 !important; }
.site-footer{
    background:#fff !important;
    color:#000 !important;
    border-top:1px solid var(--cx-border) !important;
    padding-top:24px !important;
    padding-bottom:32px !important;
  }
body[data-theme="dark"] .site-footer{
    background:#0f0f0f !important;
    color:#fff !important;
    border-top-color:#2a2a2a !important;
  }
.footer-link{ color:var(--cx-ink) !important; font-size:12px; font-weight:600; transition:opacity .15s ease; }
.footer-link:hover{ opacity:.6; text-decoration:none; }
.footer-muted{ color:var(--cx-meta) !important; font-weight:400; }
.footer-dot{ color:var(--cx-border) !important; }
:root{    --ink:#222222;
    --pal-vermilion:#F35C46;
    --pal-aqua:#7EE3D0;
    --pal-yellow:#F6E468;
    --pal-cobalt:#3860AC;
    --pal-salmon:#F69B94;
    --pal-lime:#B0E477;
    --pal-orange:#F19266;
    --pal-rose:#E5B8D0;
    --pal-green:#24A965;
    --pal-sky:#7BD0F9;
    --pal-cream:#F2E8C3;
    --pal-lavender:#C3B0FD;
    --pal-periwinkle:#9EB7EB;
    --pal-sage:#A3C9AA;
    --pal-sand:#E3D2B0;
    --pal-mist:#C7D2DE;
    --pal-stone:#DAD4C2;
    --pal-slate:#404E60;
    --cat-bread:var(--pal-sky);
    --cat-snack:var(--pal-mist);
    --cat-drink:var(--pal-cream);
    --cat-icecream:var(--pal-green);
    --cat-sauce:var(--pal-lavender);
    --cat-cereal:var(--pal-vermilion);
    --cat-jamcandy:var(--pal-stone);
    --cat-favorites:var(--pal-periwinkle);}
:root{ --ui-ink:#222; color:#222 !important; }
.product-detail-modal .detail-cat{ background:#222 !important; }
:root{    --cat-bread:#E3D2B0;      
    --cat-snack:#F19266;      
    --cat-drink:#7EE3D0;      
    --cat-icecream:#24A965;   
    --cat-sauce:#F69B94;      
    --cat-cereal:#F2E8C3;     
    --cat-jamcandy:#E5B8D0;   
    --cat-favorites:#B0E477;  
    --cat-yogurt:#DAD4C2;        
    --cat-mealkit:#F6E468;       
    --cat-chickenbreast:#9EB7EB; 
    --cat-noodle:#C7D2DE;        
    --cat-salad:#A3C9AA;         }
.product-detail-modal .detail-cat{
    padding:5px 12px !important;
    font-size:11px !important;
    font-weight:600 !important;
    letter-spacing:.01em;
  }
.product-detail-modal .detail-tags span{
    padding:5px 12px !important;
    font-size:12px !important;
    font-weight:600 !important;
  }
.product-detail-modal h3,
.product-detail-modal h1{ font-weight:700 !important; }
:root{    --font:'Geist', 'Pretendard Variable', Pretendard, -apple-system, 'NanumSquareNeo', sans-serif;}
:root{    --header-rail:812px;
    --rail-pad:26px;}
.product-detail-modal .card-facts{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:2px 14px;
    margin:.75rem 0 0 !important;
    padding:0 !important;
    line-height:1.3;
  }
.product-detail-modal .fact{
    display:inline-flex;
    align-items:baseline;
    gap:4px;
    white-space:nowrap;
  }
.product-detail-modal .fact-basis{
    flex:0 0 100%;
    margin-bottom:2px;
    font-size:12px;
    font-weight:500;
    color:#A0A0A0;
    font-variant-numeric:tabular-nums;
  }
.product-detail-modal .fact b{
    font-size:15px;
    font-weight:700;
    letter-spacing:-.01em;
    color:#5A5A5A;
    font-variant-numeric:tabular-nums;
  }
.product-detail-modal .fact-sugar b{
    font-size:20px;
    font-weight:800;
    color:#1B7A4B;
  }
.product-detail-modal .fact i{
    font-style:normal;
    font-size:11.5px;
    font-weight:600;
    color:#A0A0A0;
  }
.product-detail-modal .fact u{
    font-size:11px;
    font-weight:600;
    color:#A0A0A0;
    text-decoration:none;
  }
.product-detail-modal .fact-note{
    margin-left:5px;
    padding:1px 6px;
    border-radius:999px;
    background:rgba(27,122,75,.09);
    color:#1B7A4B;
    font-style:normal;
    font-size:10.5px;
    font-weight:700;
    white-space:nowrap;
  }

/* ---- 제품 페이지 전용 ---- */
*{box-sizing:border-box}
@font-face{font-family:'NanumSquareNeo';src:url('/NanumSquareNeo-Variable.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{color-scheme:light}
body{margin:0;background:#fff;color:#111;font-family:'NanumSquareNeo',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;line-height:1.6;-webkit-text-size-adjust:100%}
/* span 은 기본이 inline 이라 height 가 안 먹는다 — 블록으로 세워야 로고가 보인다 */
.logo{display:block;height:22px;aspect-ratio:1498/434;background:#fff;-webkit-mask:url('/logo_cut.png') no-repeat center/contain;mask:url('/logo_cut.png') no-repeat center/contain}
h2{font-size:15px;font-weight:800;margin:0 0 10px}

/* ---- 상세가 떠 있는 화면을 그대로 재현한다 ----
   사이트에서는 이 카드가 흐려진 목록 위에 뜬다. 검색으로 들어온 사람도
   같은 화면을 봐야 "다른 사이트"로 읽히지 않는다. 배경은 글자가 안 읽힐
   만큼 흐려 둔 그림 한 장이라 UI 가 아니라 질감으로 읽힌다. */
.backdrop{position:fixed;inset:0;z-index:0;background:linear-gradient(rgba(0,0,0,.34),rgba(0,0,0,.34)),url('/p/backdrop.webp') center top/cover no-repeat,#F4F4F4}
.stage{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:22px 16px 30px}
.stage-head{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.stage-head .crumb{margin:0;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.72);word-break:keep-all}
.stage-head .crumb a{color:rgba(255,255,255,.72);text-decoration:none}
/* 사이트의 상세 모달을 그대로 쓰되, 팝업 전제인 두 값만 푼다 —
   화면 높이에 맞춰 잘리고 안에서 스크롤되면 페이지로는 못 쓴다. */
.detail-card{max-height:none !important;overflow:visible !important;width:100% !important;margin:0}
/* 카테고리 알약을 뺐으니 X 만 오른쪽에 남는다 */
.detail-card .detail-top{justify-content:flex-end;margin-bottom:.6rem}
/* 사이트에서는 카드가 작아 붙여 뒀지만, 페이지에서는 브랜드와 수치가
   붙어 한 덩어리로 읽힌다. 제조사 / 수치 / 성분을 각각 떼어 놓는다. */
.detail-card .detail-brand{margin-top:.45rem}
.detail-card .detail-facts .card-facts{margin-top:1.35rem !important}
.detail-card .detail-tags{margin-top:1.35rem}
.detail-card table{margin-top:26px}
/* X 는 버튼이 아니라 링크다 — 눌러서 원래 보던 목록으로 돌아가는 자리 */
a.product-detail-close{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;text-decoration:none}
/* 카드 아래는 흰 판. 폭을 카드와 맞춰야 한 덩어리로 읽힌다. */
.below{position:relative;z-index:1;background:#fff}
.below-inner{max-width:520px;margin:0 auto;padding:26px 16px 34px}
.below section{margin-bottom:0}
/* 사이트 푸터는 검정 판이라 흰 배경 위로 흐르는 요소가 없어야 한다 */
.site-footer{position:relative;z-index:1}
table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:18px}
th,td{padding:10px 8px;text-align:left;border-bottom:1px solid #F1F1F1}
th{font-size:12px;font-weight:700;color:#8A8A8A}
td b{font-weight:800}
.tags{display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0;list-style:none}
.tags li{padding:5px 11px;border-radius:999px;background:#F4F4F4;font-size:12.5px;font-weight:700}
.note{font-size:12.5px;color:#8A8A8A;margin:10px 0 0;word-break:keep-all}
.rel{display:grid;gap:0;padding:0;margin:0;list-style:none}
.rel li{border-bottom:1px solid #F1F1F1}
.rel a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:11px 2px;color:#111;font-size:13.5px;font-weight:600;text-decoration:none}
.rel a:hover{color:#12693F}
.rel .s{flex:0 0 auto;font-size:12.5px;font-weight:800;color:#12693F}
.back{display:inline-block;margin-top:26px;font-size:13px;font-weight:700;color:#111;text-decoration:none;border-bottom:1px solid rgba(17,17,17,.25)}
.more p{margin:0 0 8px;font-size:12px;font-weight:700;color:#8A8A8A}
.more nav{display:flex;flex-wrap:wrap;gap:6px}
.more nav a{padding:8px 14px;border:1px solid rgba(17,17,17,.14);border-radius:999px;color:#111;font-size:12.5px;font-weight:700;text-decoration:none}
.more nav a:hover{border-color:#111}
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 22px;padding:0;margin:0;list-style:none}
.catgrid a{display:block;padding:7px 0;color:#111;font-size:13px;font-weight:600;text-decoration:none;border-bottom:1px solid #F5F5F5}
.catgrid a:hover{color:#12693F}
/* 허브(/p/)는 목록이라 배경 없이 흰 페이지로 둔다 */
.hub{max-width:760px;margin:0 auto;padding:24px 18px 48px}
.hub .crumb{margin:0 0 14px;font-size:12px;color:#8A8A8A}
.hub .crumb a{color:#8A8A8A;text-decoration:none}
.hub h1{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.hub h2{margin:30px 0 10px}
.hub .topbar{background:#111;margin:-24px -18px 20px;padding:14px 18px}