:root {
      --primary: #ff4b3a;
      --primary-soft: #ffe4df;
      --bg: #f7f7f7;
      --text-main: #222;
      --text-sub: #555;
      --radius-lg: 18px;
      --radius-md: 12px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: radial-gradient(circle at top, #fff7f4 0, #f7f7f7 60%);
      color: var(--text-main);
      line-height: 1.6;
    }

    .page {
      max-width: 960px;
      margin: 0 auto;
      padding: 24px 16px 60px;
    }

    header {
      text-align: center;
      margin-bottom: 32px;
    }

    .logo-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      border-radius: 999px;
      background: rgba(255, 75, 58, 0.08);
      color: var(--primary);
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .logo-dot {
      width: 10px; height: 10px;
      border-radius: 999px;
      background: var(--primary);
      box-shadow: 0 0 0 4px rgba(255, 75, 58, 0.25);
    }

    h1 { font-size: clamp(28px, 5vw, 40px); margin-bottom: 8px; }
    .subtitle { font-size: 14px; color: var(--text-sub); }

    /* 히어로 카드: 텍스트만, 가로로 길게 */
    .hero {
      background: rgba(255,255,255,0.9);
      border-radius: var(--radius-lg);
      padding: 20px 22px 18px;
      margin-bottom: 24px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.04);
      border: 1px solid rgba(255,255,255,0.7);
    }

    .hero h2 {
      font-size: 22px;
      margin-bottom: 8px;
    }

    .hero p {
      color: var(--text-sub);
      margin-bottom: 16px;
      font-size: 15px;
    }

    .tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .tag {
      font-size: 12px;
      padding: 4px 10px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid #eee;
    }

    /* 메인 카드 영역: 2컬럼 그리드 */
    main {
      display: grid;
      grid-template-columns: minmax(0,1fr) minmax(0,1fr);
      gap: 20px;
    }

    section.card {
      background: rgba(255,255,255,0.9);
      border-radius: var(--radius-lg);
      padding: 18px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.04);
      border: 1px solid rgba(255,255,255,0.7);
    }

    section.card h3 {
      font-size: 17px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    section.card p {
      font-size: 14px;
      color: var(--text-sub);
    }

    ul {
      margin-top: 6px;
      padding-left: 18px;
      font-size: 14px;
      color: var(--text-sub);
      line-height: 1.7;
    }

    li + li { margin-top: 2px; }

    /* 아래로 가로 전체를 차지하는 카드 */
    .wide {
      grid-column: 1 / -1;
    }

    .fun-card {
      border-radius: var(--radius-md);
      background: #fff7f4;
      padding: 10px 12px;
      font-size: 13px;
      margin-top: 8px;
    }

    footer {
      margin-top: 28px;
      text-align:center;
      font-size: 12px;
      color:#888;
    }

    /* 이미지 버튼 섹션 */
    .img-section { margin-top: 32px; text-align:center; }
    .pep-btn {
      padding: 10px 18px;
      border:none;
      border-radius:8px;
      background: var(--primary);
      color:white;
      font-size:14px;
      cursor:pointer;
    }
    .pep-btn:hover { background:#e23a27; }

    #pepperoni-wrap {
      margin-top:14px;
      display:none;
      justify-content:center;
      gap:12px;
      flex-wrap:wrap;
    }

    .pep-img {
      width:300px;
      border-radius:12px;
      object-fit:cover;
    }

    @media (max-width:768px) {
      main { grid-template-columns: 1fr; }
      .pep-img { width:90%; }
    }