/**
 * SEGMENT Visual System Update
 * Applies design direction: Large Typography, Minimal Layout, Strong Grid, Neutral Color
 * Load this after atelier-work.css and atelier-pages.css (or home-atelier.css)
 */

/* ===================================
   Font Loading
====================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* ===================================
   Design Tokens
====================================== */
:root {
  --segment-font-stack: "Inter", "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  --segment-bg: #ffffff;
  --segment-text: #111111;
  --segment-text-secondary: #555555;
  --segment-divider: #eaeaea;
  --segment-shell-max: 1200px;
  --segment-section-padding: 120px;
  --segment-container-padding: 40px;
  /* Typography hierarchy */
  --segment-hero-size: clamp(56px, 5vw, 72px);
  --segment-section-size: clamp(36px, 3.2vw, 44px);
  --segment-subtitle-size: clamp(20px, 1.8vw, 24px);
  --segment-body-size: clamp(16px, 1.2vw, 18px);
  --segment-caption-size: 13px;
}

/* ===================================
   Typography System
====================================== */
body.work-atelier,
body.home-atelier {
  font-family: var(--segment-font-stack) !important;
  color: var(--segment-text) !important;
}

body.work-atelier h1,
body.work-atelier h2,
body.work-atelier h3,
body.work-atelier h4,
body.work-atelier h5,
body.work-atelier h6,
body.home-atelier h1,
body.home-atelier h2,
body.home-atelier h3,
body.home-atelier h4,
body.home-atelier h5 {
  font-family: var(--segment-font-stack) !important;
}

/* Hero Title: 56–72px, font-weight 600 */
body.work-atelier .atelier-title,
body.work-atelier .atelier-hero h1,
body.home-atelier .home-atelier-project-title {
  font-size: var(--segment-hero-size) !important;
  font-weight: 600 !important;
}

/* Section Title: 36–44px, font-weight 600 */
body.work-atelier .atelier-panel h2,
body.work-atelier .atelier-panel h3,
body.work-atelier .atelier-section h3 {
  font-size: var(--segment-section-size) !important;
  font-weight: 600 !important;
}

/* Sub Title: 20–24px, font-weight 500 */
body.work-atelier .atelier-subtitle,
body.work-atelier .atelier-card-title {
  font-size: var(--segment-subtitle-size) !important;
  font-weight: 500 !important;
}

/* Body Text: 16–18px, font-weight 400 */
body.work-atelier .atelier-card-text,
body.work-atelier .atelier-panel p,
body.work-atelier .atelier-panel li {
  font-size: var(--segment-body-size) !important;
  font-weight: 400 !important;
}

/* Caption / Meta: 13–14px */
body.work-atelier .atelier-kicker {
  font-size: var(--segment-caption-size) !important;
  font-weight: 400 !important;
  font-family: var(--segment-font-stack) !important;
}

/* ===================================
   Layout & Spacing
====================================== */
body.work-atelier .atelier-shell {
  max-width: var(--segment-shell-max) !important;
  width: min(var(--segment-shell-max), calc(100% - (var(--segment-container-padding) * 2))) !important;
  padding-left: var(--segment-container-padding) !important;
  padding-right: var(--segment-container-padding) !important;
}

body.work-atelier.atelier-page .atelier-hero {
  padding-top: var(--segment-section-padding) !important;
  padding-bottom: var(--segment-section-padding) !important;
}

body.work-atelier.atelier-page .atelier-page-main {
  padding-top: var(--segment-section-padding) !important;
  padding-bottom: var(--segment-section-padding) !important;
}

body.work-atelier.atelier-page .atelier-section {
  margin-bottom: 48px !important;
}

/* ===================================
   Color System (Neutral)
====================================== */
body.work-atelier {
  background: var(--segment-bg) !important;
}

body.work-atelier .atelier-title,
body.work-atelier .atelier-hero h1,
body.work-atelier .atelier-panel h2,
body.work-atelier .atelier-panel h3,
body.work-atelier .atelier-panel h4,
body.work-atelier .atelier-card-title {
  color: var(--segment-text) !important;
}

body.work-atelier .atelier-subtitle,
body.work-atelier .atelier-card-text,
body.work-atelier .atelier-panel p {
  color: var(--segment-text-secondary) !important;
}

body.work-atelier .atelier-kicker {
  color: var(--segment-text-secondary) !important;
}

body.work-atelier .atelier-hero::after,
body.work-atelier .atelier-panel,
body.work-atelier .atelier-card {
  border-color: var(--segment-divider) !important;
}

/* Global header / navigation */
[data-global-header] .global-header-menu-list a,
[data-global-header] .global-header-brand-wordmark,
[data-global-header] .global-header-menu-brand-large {
  font-family: var(--segment-font-stack) !important;
}

/* ===================================
   Home page overrides
====================================== */
body.home-atelier {
  background: var(--segment-bg) !important;
}

/* ===================================
   Threads embed card (인사이트 그리드 내)
====================================== */
.threads-card {
  padding: 0;
  background: transparent;
}

.threads-card .threads-embed-wrap {
  width: 100%;
}

.threads-card .threads-embed-wrap blockquote.text-post-media {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 16px;
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* ===================================
   Responsive spacing
====================================== */
@media (max-width: 991px) {
  :root {
    --segment-section-padding: 80px;
    --segment-container-padding: 24px;
  }
}

@media (max-width: 767px) {
  :root {
    --segment-section-padding: 60px;
    --segment-container-padding: 20px;
  }

  body.work-atelier.atelier-page .atelier-page-main {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}