/* ============================================================
   SNAX Design System v1.0 — base stylesheet
   2026.07 · coral #F25920 확정
   사용법: <link rel="stylesheet" href="snax-base.css">
   ============================================================ */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800;900&display=swap");

/* ---------- 1. TOKENS ---------- */
:root{
  /* surface */
  --paper:#FFFFFF;
  --card:#F7F5F2;
  --sub:#F2EFEA;

  /* ink */
  --ink:#2A2521;
  --ink-2:#6B6459;
  --ink-cap:#736B63;   /* 12px대 캡션 — AA 통과 */
  --ink-3:#8A8178;     /* 큰 글씨·비텍스트 전용 */

  /* accent — 단 하나 */
  --coral:#F25920;
  --coral-deep:#B73A0B; /* 코랄 텍스트 */
  --coral-tint:#FDE6DD;

  /* line */
  --line:rgba(42,37,33,.10);
  --line-2:rgba(42,37,33,.06);

  /* space scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* radius */
  --r-sm:8px; --r-md:16px; --r-pill:999px;

  /* elevation — 호버 전용 */
  --shadow:0 12px 28px rgba(42,37,33,.14);

  /* motion */
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* type */
  --kr:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
       "Apple SD Gothic Neo",system-ui,sans-serif;
  --lat:Poppins,"Pretendard Variable",sans-serif;
}

/* ---------- 2. BASE ---------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--kr);
  font-size:15px;
  font-weight:500;
  line-height:1.6;
  word-break:keep-all;              /* 한글 어절 보호 */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.num,.en{font-family:var(--lat);letter-spacing:-.01em;}
.num{font-feature-settings:"tnum";} /* 표 자릿수 고정 */

.page{
  max-width:960px;
  margin:0 auto;
  padding:var(--s8) var(--s5) var(--s9);
  display:flex;
  flex-direction:column;
  gap:var(--s7);
}

/* ---------- 3. TYPE SCALE ---------- */
.display{font-size:44px;font-weight:900;letter-spacing:-.03em;line-height:1.12;margin:0;}
h1,.h1{font-size:32px;font-weight:800;letter-spacing:-.025em;line-height:1.2;margin:0;}
h2,.h2{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.3;margin:0;}
h3,.h3{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.35;margin:0;}
.body-s{font-size:13.5px;line-height:1.55;}
.caption{font-size:12px;font-weight:600;letter-spacing:.02em;line-height:1.4;color:var(--ink-cap);}
.tag{
  font-family:var(--lat);
  font-size:11px;font-weight:700;
  letter-spacing:.08em;line-height:1.1;
  text-transform:uppercase;
}

/* ---------- 4. SIGNATURE — coral pill tag ---------- */
/* 한 화면 최대 2개 */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  padding:var(--s1) var(--s3);
  border-radius:var(--r-pill);
  background:var(--coral);
  color:#fff;
  font-family:var(--lat);
  font-size:19px;font-weight:800;  /* 19px/800 = WCAG 큰 텍스트 → 3:1 충족 */
  letter-spacing:.02em;
  font-feature-settings:"tnum";
  flex-shrink:0;
}

/* ---------- 5. SECTION LABEL ---------- */
.sec{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);}
.sec b{font-size:22px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;}
.sec:after{content:"";flex:1;height:1px;background:var(--line);}

/* ---------- 6. CARD ---------- */
.card{
  background:var(--card);
  border:none;
  border-radius:var(--r-md);
  padding:var(--s4) var(--s5);
  transition:transform .42s var(--ease-back), box-shadow .28s var(--ease-out);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
/* scale() 금지 — 텍스트가 흐려진다 */

.card--key{background:var(--card);}
.card--key .mark{color:var(--coral-deep);font-weight:800;}

/* ---------- 7. CHIP ---------- */
.chip{
  display:inline-block;
  padding:var(--s1) var(--s3);
  border-radius:var(--r-pill);
  background:var(--sub);
  color:var(--ink-cap);
  font-size:11px;font-weight:600;
}
.chip--hot{background:var(--coral-tint);color:var(--coral-deep);font-weight:700;}

/* ---------- 8. STAT (수치 강조) ---------- */
/* .stat .n 은 34px/900 — 큰 텍스트이므로 --coral 사용 가능 (카드 위 3.34:1 ≥ 3.0) */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);}
.stat{background:var(--card);border-radius:var(--r-md);padding:var(--s4) var(--s5);}
.stat .n{
  font-family:var(--lat);
  font-size:34px;font-weight:900;
  color:var(--coral);
  line-height:1;
  font-feature-settings:"tnum";
}
.stat .n i{font-size:15px;font-style:normal;font-weight:700;margin-left:var(--s1);}
.stat .t{margin-top:var(--s2);font-size:12px;font-weight:600;color:var(--ink-cap);}
@media (max-width:640px){ .stats{grid-template-columns:1fr;} }

/* ---------- 9. CALLOUT ---------- */
.callout{
  padding:var(--s4) var(--s5);
  border-radius:var(--r-md);
  background:var(--card);
  border:1px solid var(--line);
  font-size:13.5px;
  color:var(--ink-2);
  line-height:1.65;
}
.callout b{color:var(--ink);font-weight:800;}

/* ---------- 10. FOOTER / SIGNOFF ---------- */
.foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;
  padding-top:var(--s4);
  border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-cap);
}
.foot-logo{height:20px;width:auto;display:block;flex-shrink:0;opacity:.9;}

.closing{font-size:12.5px;line-height:1.6;color:var(--ink-cap);text-align:center;margin:0;}
.signoff{
  display:flex;flex-direction:column;align-items:center;gap:var(--s2);
  padding-top:var(--s2);margin-top:var(--s4);
  border-top:1px solid var(--line-2);
  font-size:12px;color:var(--ink-cap);text-align:center;
}
.signoff a{color:var(--ink-2);text-decoration:none;}
.signoff a:hover{color:var(--coral-deep);}

/* ---------- 11. TABLE ---------- */
table{width:100%;border-collapse:collapse;}
th{
  text-align:left;
  font-size:12.5px;font-weight:700;color:var(--ink-cap);
  letter-spacing:.04em;
  padding:0 var(--s3) var(--s2) 0;
  border-bottom:1px solid var(--line);
}
td{
  font-size:13.5px;font-weight:600;
  padding:var(--s3) var(--s3) var(--s3) 0;
  border-bottom:1px solid var(--line-2);
  vertical-align:middle;
}
td.dash{color:#D5CFC7;font-weight:500;}  /* 빈칸 = "해당 없음" */

/* ---------- 12. A11Y / RESPONSIVE / PRINT ---------- */
@media (max-width:640px){
  .page{padding:var(--s6) var(--s4) var(--s7);gap:var(--s6);}
  .display{font-size:30px;}
  h1,.h1{font-size:24px;}
}

@media (hover:none){
  .card:hover{transform:none;box-shadow:none;}
}

@media (prefers-reduced-motion:reduce){
  .card{transition:none;}
  .card:hover{transform:none;}
}

@media print{
  @page{size:A4 portrait;margin:12mm;}
  body{background:#fff;}
  .page{padding:0;max-width:none;gap:var(--s5);page-break-after:always;}
  .page:last-child{page-break-after:auto;}
  .card{box-shadow:none;}
}