:root {
    --eco-green: #10b981;
    --eco-dark: #064e3b;
    --eco-bg: #ffffff;
    --eco-text: #334155;
    --eco-title: #0f172a;
    --eco-border: #e2e8f0;
    --eco-hover: #f1f5f9;
    --eco-badge: #d1fae5;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Segoe UI", sans-serif; background: var(--eco-bg); color: var(--eco-text); line-height: 1.6; }
a { text-decoration: none; color: inherit; cursor: pointer; }
ul { list-style: none; }

/* Notion Top Nav */
.eco-top-nav { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--eco-border); font-size: 0.9rem; font-weight: 500; }
.eco-nav-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--eco-title); }
.eco-nav-right { display: flex; gap: 16px; overflow-x: auto; white-space: nowrap; }
.eco-nav-item { padding: 4px 8px; border-radius: 4px; transition: background 0.2s; color: var(--eco-text); }
.eco-nav-item:hover { background: var(--eco-hover); }

/* Notion Cover */
.eco-cover-img { width: 100%; height: 260px; background: linear-gradient(135deg, #10b981 0%, #047857 100%); position: relative; }

/* Page Wrap (Notion Content Container) */
.eco-page-wrap { max-width: 960px; margin: 0 auto; padding: 0 40px 80px 40px; position: relative; }

/* Page Icon & Title */
.eco-page-icon { font-size: 80px; margin-top: -50px; margin-bottom: 20px; position: relative; z-index: 10; display: inline-block; background: #fff; border-radius: 12px; padding: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.eco-page-title { font-size: 2.5rem; font-weight: 900; color: var(--eco-title); margin-bottom: 10px; letter-spacing: -1px; line-height: 1.2; }
.eco-page-desc { font-size: 1.05rem; color: var(--eco-text); margin-bottom: 30px; line-height: 1.7; max-width: 800px; }

/* Properties Block (Notion DB Properties) */
.eco-props-box { border-top: 1px solid var(--eco-border); border-bottom: 1px solid var(--eco-border); padding: 16px 0; margin-bottom: 40px; font-size: 0.9rem; }
.eco-prop-row { display: flex; margin-bottom: 8px; }
.eco-prop-row:last-child { margin-bottom: 0; }
.eco-prop-label { width: 140px; color: #94a3b8; display: flex; align-items: center; gap: 6px; }
.eco-prop-value { flex: 1; font-weight: 500; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.eco-badge { background: var(--eco-badge); color: var(--eco-dark); padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; }

/* H2, H3 Headings */
.eco-h2 { font-size: 1.5rem; font-weight: 800; color: var(--eco-title); margin: 40px 0 20px 0; border-bottom: 1px solid var(--eco-border); padding-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.eco-h3 { font-size: 1.15rem; font-weight: 700; color: var(--eco-title); margin: 30px 0 12px 0; }

/* 🌟 NOTION DATABASE VIEW (List Layout) - 다이렉트 클릭 🌟 */
.eco-database-view { display: flex; flex-direction: column; gap: 8px; margin-bottom: 40px; }
.eco-db-row { display: flex; align-items: center; padding: 12px 16px; border-radius: 8px; transition: background 0.2s; text-decoration: none; border: 1px solid transparent; }
.eco-db-row:hover { background: var(--eco-hover); border-color: var(--eco-border); }

.eco-db-rank { width: 40px; font-size: 1rem; font-weight: 700; color: var(--eco-green); font-family: monospace; }
.eco-db-platform { width: 200px; display: flex; align-items: center; gap: 12px; }
.eco-db-logo { width: 60px; height: 28px; background: #fff; border: 1px solid var(--eco-border); border-radius: 4px; display: flex; align-items: center; justify-content: center; padding: 2px; }
.eco-db-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.eco-db-name { font-weight: 700; font-size: 1.05rem; color: var(--eco-title); }

.eco-db-tags { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; }
.eco-db-tag { font-size: 0.75rem; background: #f1f5f9; color: #475569; padding: 2px 8px; border-radius: 12px; }

.eco-db-benefit { width: 160px; font-size: 0.9rem; font-weight: 700; color: var(--eco-dark); }
.eco-db-action { width: 100px; text-align: right; font-size: 0.85rem; font-weight: 600; color: var(--eco-green); display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.eco-db-row:hover .eco-db-action::after { content: "↗"; font-weight: 900; }

/* Text Blocks */
.eco-text-block { font-size: 1rem; line-height: 1.8; margin-bottom: 16px; color: #475569; }
.eco-ul { padding-left: 24px; margin-bottom: 24px; list-style-type: disc; }
.eco-ul li { font-size: 0.95rem; margin-bottom: 8px; line-height: 1.6; }

/* Sub Pages (Grid) */
.eco-gallery-view { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 50px; }
.eco-gallery-card { border: 1px solid var(--eco-border); border-radius: 8px; padding: 20px; transition: box-shadow 0.2s, transform 0.2s; display: flex; flex-direction: column; }
.eco-gallery-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.05); transform: translateY(-2px); }
.eco-gallery-icon { font-size: 1.5rem; margin-bottom: 12px; }
.eco-gallery-title { font-size: 1rem; font-weight: 700; color: var(--eco-title); margin-bottom: 8px; line-height: 1.4; }
.eco-gallery-desc { font-size: 0.85rem; color: #64748b; margin-bottom: 16px; line-height: 1.5; flex: 1; }
.eco-gallery-meta { font-size: 0.75rem; color: #94a3b8; border-top: 1px solid var(--eco-border); padding-top: 10px; }

/* Footer */
.eco-footer { border-top: 1px solid var(--eco-border); padding: 40px 0; background: #f8fafc; margin-top: 40px; }
.eco-footer-inner { max-width: 960px; margin: 0 auto; padding: 0 40px; }
.eco-legal-notice { font-size: 0.85rem; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; padding: 12px; border-radius: 6px; margin-bottom: 20px; line-height: 1.5; }
.eco-footer-meta { font-size: 0.85rem; color: #94a3b8; line-height: 1.6; }

/* 📱 Mobile Customization (Above the fold compact layout) */
@media (max-width: 768px) {
    .eco-cover-img { height: 120px; }
    .eco-page-wrap { padding: 0 20px 40px 20px; }
    .eco-page-icon { font-size: 50px; margin-top: -35px; padding: 6px; margin-bottom: 15px; }
    .eco-page-title { font-size: 1.7rem; margin-bottom: 8px; }
    .eco-page-desc { font-size: 0.9rem; margin-bottom: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    
    .eco-props-box { padding: 12px 0; margin-bottom: 24px; }
    .eco-prop-label { width: 100px; font-size: 0.8rem; }
    .eco-badge { font-size: 0.75rem; }
    
    /* Database View to Mobile Cards */
    .eco-database-view { gap: 12px; }
    .eco-db-row { flex-wrap: wrap; border: 1px solid var(--eco-border); padding: 16px; align-items: flex-start; }
    .eco-db-rank { width: 100%; font-size: 0.8rem; margin-bottom: 8px; }
    .eco-db-rank::before { content: "RANK "; }
    .eco-db-platform { width: 100%; margin-bottom: 12px; }
    .eco-db-tags { display: none; } /* 모바일에서 태그 숨겨 세로폭 압축 */
    .eco-db-benefit { width: auto; flex: 1; font-size: 0.85rem; }
    .eco-db-action { width: auto; background: var(--eco-hover); padding: 4px 10px; border-radius: 4px; }
    
    .eco-h2 { font-size: 1.3rem; margin: 30px 0 15px 0; }
    .eco-gallery-view { grid-template-columns: 1fr; gap: 12px; }
}