AI Request Prompt

Design a landing page in Bento Noir fusion style — combining Bento Bloom efficient grid with Midnight Noir dark luxury.

COLOR TOKENS:
--bg: #121216
--bg-gradient: linear-gradient(180deg, #0f0f13, #17161d)
--card: #1b1a20
--ink: #efe8dc
--gold: #d8b579
--soft: #2a2831
--cell-a: #2a2630
--cell-b: #252128
--hero-bg: #19181e
--border: #4e4334
--hero-border: #4f4433
--prompt-bg: #141419
No other colors.

TYPOGRAPHY:
- Headings: 'Cormorant Garamond', serif — font-weight: 600 | 700, color: var(--gold)
- Body: 'Nunito', sans-serif — font-weight: 500 | 700
- Hero h1: clamp(2rem, 5vw, 3.8rem)
- Body text: line-height: 1.72, color: var(--ink)

UI:
- Hero section: border: 1px solid #4f4433, border-radius: 20px, background: #19181e, padding: clamp(20px, 4vw, 36px)
- Bento cells: border-radius: 14px, border: 1px solid #4e4334, background: var(--soft), padding: 12px
- Cell variant A: grid-column: span 4, background: #2a2630
- Cell variant B: grid-column: span 2, background: #252128
- Cell variant C/D: grid-column: span 3, background: var(--soft)
- CTA button: border: 1px solid var(--gold), color: var(--gold), background: transparent, border-radius: 999px, padding: 7px 12px

LAYOUT:
- Page wrapper: width: min(1020px, 92vw), margin: 0 auto
- Bento grid: display: grid, grid-template-columns: repeat(6, 1fr), gap: 8px
- Prompt section: border: 1px solid #4f4433, border-radius: 14px, background: #141419, padding: 14px

MOTION:
- No animations — stillness is the luxury signal
- Hover interactions limited to subtle opacity shifts on CTA only

RESPONSIVE:
- Desktop (>720px): 6-column bento grid, cells span 2-4 columns, hero padding scales via clamp()
- Mobile (<=720px): all cells span 6 columns (full width stack), gap remains 8px

FORBIDDEN:
- Bright or pastel colors — strictly dark palette with gold accent only
- Flat card backgrounds matching page background — each cell must be visually distinct
- Heavy box-shadows — depth through background shade variation only
- Decorative icons or illustrations — typography and color contrast are the only tools
- border-radius exceeding 20px on any element

OUTPUT:
1) 6-column bento grid system with span variants (A/B/C/D)
2) Noir + gold color token system and serif/sans-serif pairing
3) Full HTML/CSS with responsive breakpoints

Bento Noir 퓨전 스타일의 랜딩 페이지를 디자인해줘 — Bento Bloom의 효율적 그리드와 Midnight Noir의 다크 럭셔리를 결합한 스타일.

색상 토큰:
--bg: #121216
--bg-gradient: linear-gradient(180deg, #0f0f13, #17161d)
--card: #1b1a20
--ink: #efe8dc
--gold: #d8b579
--soft: #2a2831
--cell-a: #2a2630
--cell-b: #252128
--hero-bg: #19181e
--border: #4e4334
--hero-border: #4f4433
--prompt-bg: #141419
이 외의 색상 사용 금지.

타이포그래피:
- 헤딩: 'Cormorant Garamond', serif — font-weight: 600 | 700, color: var(--gold)
- 본문: 'Nunito', sans-serif — font-weight: 500 | 700
- 히어로 h1: clamp(2rem, 5vw, 3.8rem)
- 본문 텍스트: line-height: 1.72, color: var(--ink)

UI:
- 히어로 섹션: border: 1px solid #4f4433, border-radius: 20px, background: #19181e, padding: clamp(20px, 4vw, 36px)
- 벤토 셀: border-radius: 14px, border: 1px solid #4e4334, background: var(--soft), padding: 12px
- 셀 변형 A: grid-column: span 4, background: #2a2630
- 셀 변형 B: grid-column: span 2, background: #252128
- 셀 변형 C/D: grid-column: span 3, background: var(--soft)
- CTA 버튼: border: 1px solid var(--gold), color: var(--gold), background: transparent, border-radius: 999px, padding: 7px 12px

레이아웃:
- 페이지 래퍼: width: min(1020px, 92vw), margin: 0 auto
- 벤토 그리드: display: grid, grid-template-columns: repeat(6, 1fr), gap: 8px
- 프롬프트 섹션: border: 1px solid #4f4433, border-radius: 14px, background: #141419, padding: 14px

모션:
- 애니메이션 없음 — 고요함이 럭셔리의 신호
- 호버 인터랙션은 CTA에 대한 미세한 opacity 변화로 제한

반응형:
- 데스크톱 (>720px): 6열 벤토 그리드, 셀은 2-4열 스팬, 히어로 padding은 clamp()로 스케일
- 모바일 (<=720px): 모든 셀 6열 스팬 (풀 와이드 스택), gap은 8px 유지

금지사항:
- 밝거나 파스텔 색상 — 다크 팔레트에 골드 포인트만
- 페이지 배경과 동일한 셀 배경 — 각 셀은 시각적으로 구분
- 무거운 box-shadow — 깊이감은 배경 명도 차이로만
- 장식적 아이콘이나 일러스트 — 타이포와 색상 대비만 사용
- 어떤 요소에서도 20px 초과 border-radius

출력:
1) 6열 벤토 그리드 시스템과 스팬 변형 (A/B/C/D)
2) Noir + 골드 컬러 토큰 시스템과 세리프/산세리프 페어링
3) 반응형 브레이크포인트를 포함한 전체 HTML/CSS

Bento Noirフュージョンスタイルのランディングページをデザインしてください — Bento Bloomの効率的グリッドとMidnight Noirのダークラグジュアリーを融合したスタイル。

カラートークン:
--bg: #121216
--bg-gradient: linear-gradient(180deg, #0f0f13, #17161d)
--card: #1b1a20
--ink: #efe8dc
--gold: #d8b579
--soft: #2a2831
--cell-a: #2a2630
--cell-b: #252128
--hero-bg: #19181e
--border: #4e4334
--hero-border: #4f4433
--prompt-bg: #141419
これ以外の色は使用禁止。

タイポグラフィ:
- 見出し: 'Cormorant Garamond', serif — font-weight: 600 | 700, color: var(--gold)
- 本文: 'Nunito', sans-serif — font-weight: 500 | 700
- ヒーローh1: clamp(2rem, 5vw, 3.8rem)
- 本文テキスト: line-height: 1.72, color: var(--ink)

UI:
- ヒーローセクション: border: 1px solid #4f4433, border-radius: 20px, background: #19181e, padding: clamp(20px, 4vw, 36px)
- ベントセル: border-radius: 14px, border: 1px solid #4e4334, background: var(--soft), padding: 12px
- セルバリアントA: grid-column: span 4, background: #2a2630
- セルバリアントB: grid-column: span 2, background: #252128
- セルバリアントC/D: grid-column: span 3, background: var(--soft)
- CTAボタン: border: 1px solid var(--gold), color: var(--gold), background: transparent, border-radius: 999px, padding: 7px 12px

レイアウト:
- ページラッパー: width: min(1020px, 92vw), margin: 0 auto
- ベントグリッド: display: grid, grid-template-columns: repeat(6, 1fr), gap: 8px
- プロンプトセクション: border: 1px solid #4f4433, border-radius: 14px, background: #141419, padding: 14px

モーション:
- アニメーションなし — 静寂がラグジュアリーのシグナル
- ホバーインタラクションはCTAの微妙なopacity変化のみに限定

レスポンシブ:
- デスクトップ (>720px): 6列ベントグリッド, セルは2〜4列スパン, ヒーローpaddingはclamp()でスケール
- モバイル (<=720px): 全セル6列スパン（フルワイドスタック）, gapは8px維持

禁止事項:
- 明るい・パステルカラー — ダークパレットにゴールドアクセントのみ
- ページ背景と同一のセル背景 — 各セルは視覚的に区分
- 重いbox-shadow — 奥行きは背景明度の差のみで表現
- 装飾的アイコンやイラスト — タイポとカラーコントラストのみ使用
- いかなる要素でも20px超のborder-radius

出力:
1) 6列ベントグリッドシステムとスパンバリアント（A/B/C/D）
2) Noir+ゴールドカラートークンシステムとセリフ/サンセリフペアリング
3) レスポンシブブレークポイントを含む完全なHTML/CSS