/* =====================================================================
   pjy.pizza — Pizza Editorial Design System
   ---------------------------------------------------------------------
   단일 소스 스타일시트. 모든 pjy.pizza 페이지(메인/글/자료/스타일가이드)는
   이 파일 하나만 링크하면 동일한 테마를 갖는다.

       <link rel="stylesheet" href="/assets/pjy-theme.css" />

   - 토큰(:root)        : 색/폰트/반경/그림자/간격. 페이지에서 직접 바꾸지 말 것.
   - 레이아웃           : .wrap, header/.topbar/.wordmark, footer
   - 컴포넌트(.pz-*)     : 재사용 블록. 새 페이지는 이 클래스들을 조합해서 만든다.
   문서: /assets/DESIGN-SYSTEM.md · 라이브 예시: /styleguide
   ===================================================================== */

/* ---------- 1. Design tokens ---------------------------------------- */
:root {
  /* 피자 무드 팔레트 (대놓고 피자가 아니라 오븐/크림/토마토/올리브 톤) */
  --cream:     #f8f0df;  /* 기본 배경 (구운 종이) */
  --cream-2:   #fff9ec;  /* 카드/표면 */
  --dough:     #ead8b9;  /* 보조 표면 */
  --crust:     #d8b57d;  /* 크러스트 브라운 */
  --tomato:    #bb4d32;  /* 메인 액센트 (페퍼로니 레드, 낮춘 채도) */
  --tomato-2:  #d96a45;  /* 밝은 액센트 */
  --olive:     #737a45;  /* 보조 액센트 (올리브) */
  --ink:       #211a15;  /* 본문 글자 */
  --soft-ink:  #5f554b;  /* 보조 글자 */
  --muted:     #958779;  /* 흐린 글자/메타 */
  --line:      #dfcdb0;  /* 경계선 */
  --dark:      #231b16;  /* 다크 패널 배경 */
  --dark-soft: #3b2c23;  /* 다크 패널 경계 */

  /* 의미 별칭 (컴포넌트가 읽기 쉽도록) */
  --bg:        var(--cream);
  --surface:   var(--cream-2);
  --surface-2: var(--dough);
  --accent:    var(--tomato);
  --accent-2:  var(--olive);

  /* 타이포그래피 — 헤드라인 serif(에디토리얼), 본문 sans, 라벨 mono */
  --sans:  ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --serif: Georgia, "Times New Roman", "Apple SD Gothic Neo", serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* 모서리 반경 */
  --r-sm:   14px;
  --r-md:   22px;
  --r-lg:   28px;
  --r-xl:   38px;
  --r-pill: 999px;

  /* 그림자 */
  --paper-shadow: 0 24px 80px rgba(68, 43, 18, .10);
  --soft-shadow:  0 14px 44px rgba(68, 43, 18, .08);

  /* 간격 스케일 */
  --space-1: 8px;
  --space-2: 14px;
  --space-3: 22px;
  --space-4: 34px;
  --space-5: 56px;
  --space-6: 86px;
}

/* ---------- 2. Base ------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* 은은한 그리드 텍스처 + 크림 배경 */
  background:
    linear-gradient(90deg,  rgba(187,77,50,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(187,77,50,.025) 1px, transparent 1px),
    var(--cream);
  background-size: 64px 64px;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}
a { color: inherit; text-decoration: none; }
::selection { background: rgba(187,77,50,.18); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-4) 0; }

/* 페이지 폭 컨테이너 */
.wrap { width: min(1440px, calc(100% - 56px)); margin: 0 auto; }
.wrap--narrow { width: min(900px, calc(100% - 40px)); }

/* ---------- 3. Masthead (header) ----------------------------------- */
header {
  padding: 28px 0 18px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(248,240,223,.90);
  backdrop-filter: blur(16px);
}
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 14px; letter-spacing: -.02em; color: var(--ink); }
/* 작은 피자 한 조각 마크 (페퍼로니 + 올리브 점) */
.mark { width: 20px; height: 20px; border-radius: 7px 50% 50% 50%; background: var(--crust); transform: rotate(28deg); position: relative; flex-shrink: 0; }
.mark:before { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--tomato); right: 4px; top: 4px; }
.mark:after  { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--olive);  left: 5px;  bottom: 5px; }
nav { display: flex; gap: 18px; color: var(--soft-ink); font-size: 14px; align-items: center; }
nav a:hover { color: var(--tomato); }
.nav-pill { border: 1px solid var(--line); border-radius: var(--r-pill); padding: 7px 10px; background: rgba(255,249,236,.62); font-family: var(--mono); font-size: 12px; color: var(--muted); cursor: pointer; }
.nav-pill:hover { border-color: var(--tomato); color: var(--tomato); }

/* ---------- 4. Type helpers ---------------------------------------- */
.kicker { margin: 0 0 12px; font-family: var(--mono); font-size: 12px; color: var(--tomato); text-transform: uppercase; letter-spacing: .10em; }
.date   { color: var(--muted); font-family: var(--mono); font-size: 12px; line-height: 1.5; text-transform: uppercase; }
.pz-display { font-family: var(--serif); font-weight: 500; letter-spacing: -.07em; line-height: .96; }
.pz-eyebrow { font-family: var(--mono); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; color: var(--olive); }

/* ---------- 5. Article paper + prose ------------------------------- */
/* .pz-article = 글 본문을 감싸는 종이 패널. .pz-prose = 그 안의 일반 마크업 자동 스타일 */
.pz-article {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(24px, 5vw, 58px);
  box-shadow: var(--paper-shadow);
}
.pz-prose { font-size: 17px; color: var(--ink); }
.pz-prose h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4vw, 50px); letter-spacing: -.05em; line-height: 1.08; margin: 72px 0 18px; }
.pz-prose h2:first-child { margin-top: 0; }
.pz-prose h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.03em; margin: 42px 0 12px; }
.pz-prose h4 { font-size: 18px; margin: 28px 0 6px; }
.pz-prose p  { margin: 14px 0; }
.pz-prose ul, .pz-prose ol { padding-left: 24px; }
.pz-prose li { margin: 7px 0; }
.pz-prose a  { color: var(--tomato); text-decoration: underline; text-decoration-color: rgba(187,77,50,.35); text-underline-offset: 2px; }
.pz-prose a:hover { text-decoration-color: var(--tomato); }
.pz-prose strong { font-weight: 700; }
.pz-lead { font-size: 21px; line-height: 1.72; color: var(--soft-ink); }

/* 인라인 코드 */
code { font-family: var(--mono); background: var(--dough); color: #4a382a; padding: .12em .38em; border-radius: 6px; font-size: .9em; }

/* ---------- 6. Callouts -------------------------------------------- */
.pz-callout { margin: 34px 0; padding: 24px 26px; border-radius: var(--r-md); border-left: 5px solid var(--accent); background: rgba(187,77,50,.07); }
.pz-callout--accent { /* money line: 강조 슬로건 */
  font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.45; letter-spacing: -.025em; color: var(--ink);
}
.pz-callout--note { border-left-color: var(--olive); background: rgba(115,122,69,.08); font-size: 16px; color: var(--soft-ink); }
.pz-callout--warn { border-left-color: var(--tomato-2); background: rgba(217,106,69,.10); font-size: 16px; color: #7c3a20; }

/* ---------- 7. Dark stat panel ------------------------------------- */
.pz-panel-dark { background: var(--dark); color: #fff5e4; border: 1px solid var(--dark-soft); border-radius: var(--r-lg); padding: 30px; }
.pz-panel-dark h3 { font-family: var(--serif); font-weight: 500; margin: 0; }
.pz-panel-dark p, .pz-panel-dark li, .pz-panel-dark span { color: #ccbca6; }

.pz-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin: 30px 0; }
.pz-stat { background: var(--dark); color: #fff5e4; border-radius: var(--r-md); padding: 20px; min-height: 138px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--soft-shadow); }
.pz-stat b { font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: -.04em; color: var(--crust); }
.pz-stat span { color: #d7c6ad; font-size: 13.5px; line-height: 1.55; }

/* ---------- 8. Cards / principles / grids -------------------------- */
.pz-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin: 24px 0; }
.pz-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin: 30px 0; }

.pz-card { background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px; }
.pz-card h4 { margin: 0 0 6px; font-family: var(--serif); font-weight: 500; font-size: 20px; letter-spacing: -.02em; }
.pz-card p { margin: 0; color: var(--soft-ink); font-size: 15px; line-height: 1.7; }

.pz-principle { background: linear-gradient(180deg, var(--cream-2), #f4e7cf); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; position: relative; overflow: hidden; }
.pz-principle:before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, var(--tomato), var(--olive)); }
.pz-principle strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 19px; letter-spacing: -.02em; margin-bottom: 8px; }
.pz-principle p { color: var(--soft-ink); font-size: 15px; line-height: 1.65; margin: 0; }

/* ---------- 9. Numbered steps -------------------------------------- */
.pz-steps { counter-reset: step; display: grid; gap: 12px; margin: 24px 0; }
.pz-step { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; }
.pz-step:before { counter-increment: step; content: counter(step); width: 42px; height: 42px; border-radius: 50%; background: var(--tomato); color: #fff; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; }
.pz-step strong { display: block; font-size: 17px; margin-bottom: 4px; }
.pz-step p { margin: 0; color: var(--soft-ink); font-size: 15px; line-height: 1.62; }
.pz-plain-box { margin: 26px 0; padding: 24px 26px; background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-lg); }
.pz-plain-box h3 { margin-top: 0; font-family: var(--serif); font-weight: 500; }

/* ---------- 10. Table ---------------------------------------------- */
.pz-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 26px 0; background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; display: block; overflow-x: auto; }
.pz-table th, .pz-table td { border-bottom: 1px solid var(--line); padding: 12px 14px; text-align: left; vertical-align: top; min-width: 140px; }
.pz-table th { background: var(--dough); color: #3f3226; white-space: nowrap; font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.pz-table tr:last-child td { border-bottom: none; }

/* ---------- 11. Mermaid / figure / details ------------------------- */
.pz-mermaid { background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; margin: 26px 0 34px; overflow: auto; }
.pz-mermaid .mermaid { min-width: 760px; }

.pz-figure-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin: 30px 0; }
.pz-figure { margin: 0; background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--soft-shadow); }
.pz-figure img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--dough); }
.pz-figure figcaption { padding: 15px 17px 17px; color: var(--soft-ink); font-size: 14px; line-height: 1.55; }
.pz-figure figcaption b { display: block; color: var(--ink); font-family: var(--serif); font-weight: 500; font-size: 16px; margin-bottom: 4px; }

/* AI 브리프 같은 접이식 코드 블록 */
.pz-agent { margin: 36px 0; border: 1px solid var(--crust); background: var(--dough); border-radius: var(--r-lg); overflow: hidden; }
.pz-agent summary { cursor: pointer; padding: 20px 24px; font-family: var(--mono); font-weight: 700; color: #5a3a1f; list-style: none; }
.pz-agent summary::-webkit-details-marker { display: none; }
.pz-agent summary:before { content: '▸ '; color: var(--tomato); }
.pz-agent[open] summary:before { content: '▾ '; }
.pz-agent-body { padding: 0 24px 24px; color: var(--ink); }
.pz-agent-body pre { white-space: pre-wrap; background: var(--dark); color: #f1e2c8; border-radius: var(--r-md); padding: 18px; overflow: auto; font-size: 13px; line-height: 1.58; }

/* ---------- 12. Link/reference cards ------------------------------- */
.pz-tech-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin: 24px 0; }
.pz-tech { background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; }
.pz-tech strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 17px; margin-bottom: 6px; }
.pz-tech a { color: var(--tomato); font-weight: 600; }
.pz-tech a:hover { color: var(--tomato-2); }
.pz-tech p { margin: 8px 0 0; color: var(--soft-ink); font-size: 14px; line-height: 1.58; }

/* ---------- 13. Table of contents ---------------------------------- */
.pz-toc { background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 28px; margin: 34px 0 48px; }
.pz-toc strong { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--tomato); }
.pz-toc ol { margin: 8px 0 0; padding-left: 24px; columns: 2; column-gap: 32px; color: var(--soft-ink); }

/* ---------- 14. Buttons -------------------------------------------- */
.pz-btn { display: inline-block; border: 1px solid var(--tomato); border-radius: var(--r-pill); padding: 12px 22px; background: var(--tomato); color: #fff; font-weight: 600; transition: transform .12s, background .2s; }
.pz-btn:hover { background: var(--tomato-2); transform: translateY(-1px); }
.pz-btn--ghost { background: rgba(255,249,236,.6); color: var(--ink); border-color: var(--line); }
.pz-btn--ghost:hover { background: var(--cream-2); border-color: var(--tomato); color: var(--tomato); }

/* ---------- 15. Footer --------------------------------------------- */
footer { padding: 62px 0 78px; border-top: 1px solid var(--line); color: var(--soft-ink); font-size: 14px; }
.footer-grid { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; }
.footer-grid strong { display: block; color: var(--ink); font-family: var(--serif); font-size: 28px; font-weight: 500; letter-spacing: -.04em; margin-bottom: 8px; }
.footer-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.footer-links a { border: 1px solid var(--line); border-radius: var(--r-pill); padding: 10px 13px; background: rgba(255,249,236,.54); }
.footer-links a:hover { border-color: var(--tomato); color: var(--tomato); }

/* ---------- 16. Responsive ----------------------------------------- */
@media (max-width: 900px) {
  .wrap { width: min(100% - 28px, 1440px); }
  header { padding-top: 18px; }
  nav { gap: 10px; overflow-x: auto; justify-content: flex-end; }
  nav a:not(.nav-pill) { display: none; }
  .pz-stat-grid, .pz-grid-2, .pz-grid-3, .pz-principles, .pz-figure-grid, .pz-tech-grid { grid-template-columns: 1fr; }
  .pz-step { grid-template-columns: 1fr; }
  .pz-toc ol { columns: 1; }
  .footer-grid { flex-direction: column; align-items: flex-start; }
  .footer-links { justify-content: flex-start; }
}