/* ==========================================================
   큐브인테리어 공용 셸 CSS — 토큰 · 기본 · Nav · Footer
   index.html 의 <style> 블록에서 공용 규칙만 기계적으로 추출.
   /blog · /cases 생성 페이지가 이 파일을 링크합니다.
   ⚠️ 손으로 고치지 마세요. index.html 이 원본입니다.
   ========================================================== */

    /* ============ 큐브 디자인 토큰 v3 (5색 시스템) ============ */
    :root {
      /* 🔴 핵심 액센트 — Airbnb Rausch (CTA·orb·통계) */
      --cube-accent: #ff385c;
      --cube-accent-active: #e00b41;
      --cube-accent-soft: #ffd1da;

      /* 🟢 세이지 그린 — 자연·신뢰·약속 */
      --cube-sage: #6a8c5e;
      --cube-sage-soft: #d4e0c9;

      /* 🟡 머스타드 — 추천·별·하이라이트 */
      --cube-mustard: #d4a02a;
      --cube-mustard-soft: #f4e0a0;

      /* 🟠 테라코타 — 카페·외식 카테고리 */
      --cube-terracotta: #c9826e;
      --cube-terracotta-soft: #f0d2c2;

      /* 🔵 네이비 — 사무실·아파트 카테고리 */
      --cube-navy: #2a4d6f;
      --cube-navy-soft: #c5d4e0;

      /* 보조 액센트 — 우드 따스함 (유지) */
      --cube-wood: #a67b5b;
      --cube-wood-soft: #d4b896;

      /* 텍스트 컬러 (헤드라인·로고만 — 인터랙티브는 Rausch가 담당) */
      --cube-ink: #2A2A2A;
      --cube-primary: #2A2A2A;      /* 텍스트 전용 */
      --cube-primary-active: #1a1a1a;
      --cube-body: #3f3f3f;
      --cube-muted: #6a6a6a;
      --cube-muted-soft: #929292;

      /* 캔버스·표면 */
      --cube-canvas: #f5f0e6;
      --cube-surface-soft: #eee8d8;
      --cube-dark: #1a1a1a;
      --cube-hairline: #d4cdb8;
      --cube-on-primary: #ffffff;
      --cube-on-dark: #f5f0e6;

      --r-sm: 8px;
      --r-md: 14px;
      --r-lg: 20px;
      --r-full: 9999px;

      --s-xs: 4px;
      --s-sm: 8px;
      --s-md: 12px;
      --s-base: 16px;
      --s-lg: 24px;
      --s-xl: 32px;
      --s-xxl: 48px;
      --s-section: 80px;
    }

    /* ============ 기본 ============ */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Pretendard Variable', 'Apple SD Gothic Neo', system-ui, sans-serif;
      font-size: 17px;
      line-height: 1.65;
      color: var(--cube-body);
      background: var(--cube-canvas);
      -webkit-font-smoothing: antialiased;
      word-break: keep-all;  /* 한국어 단어 단위 줄바꿈 — "도착/합니다" 같은 어색한 분리 방지 */
      overflow-wrap: anywhere;
    }
    h1, h2, h3 { color: var(--cube-ink); font-weight: 700; line-height: 1.35; letter-spacing: -0.4px; }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }

    /* ============ Top Nav ============ */
    .nav {
      position: sticky; top: 0; z-index: 100;
      background: var(--cube-canvas);
      border-bottom: 1px solid var(--cube-hairline);
      height: 80px;
      display: flex; align-items: center;
      padding: 0 var(--s-xxl);
    }
    .nav__brand { display: flex; align-items: center; }
    .nav__brand img { height: 36px; width: auto; display: block; }
    .nav__menu { display: flex; gap: var(--s-xl); margin-left: var(--s-section); flex: 1; }
    .nav__menu a { font-size: 16px; font-weight: 600; color: var(--cube-ink); }
    .nav__menu a.inactive { color: var(--cube-muted); }
    .nav__cta {
      background: var(--cube-accent); color: var(--cube-on-primary);
      padding: 12px 24px; border-radius: var(--r-sm);
      font-size: 16px; font-weight: 600;
      transition: background 0.2s;
      white-space: nowrap;  /* "무료 견적 받기" 한 줄 강제 — 모바일 2줄 깨짐 방지 */
      flex-shrink: 0;
    }
    /* 햄버거 메뉴 버튼 — 데스크탑 숨김 */
    .nav__hamburger {
      display: none;
      background: transparent; border: none;
      width: 44px; height: 44px;
      cursor: pointer; padding: 0;
      margin-left: var(--s-base);
      color: var(--cube-ink);
    }
    .nav__hamburger svg { width: 28px; height: 28px; display: block; margin: 0 auto; }
    /* 모바일 메뉴 드롭다운 (햄버거 클릭 시 표시) */
    .nav__mobile-menu {
      display: none;
      position: fixed; top: 80px; left: 0; right: 0;
      background: var(--cube-canvas);
      border-bottom: 1px solid var(--cube-hairline);
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
      padding: var(--s-base) var(--s-lg);
      z-index: 99;
    }
    .nav__mobile-menu.open { display: block; }
    .nav__mobile-menu a {
      display: block;
      padding: var(--s-base) 0;
      font-size: 16px; font-weight: 600;
      color: var(--cube-ink);
      border-bottom: 1px solid var(--cube-hairline);
    }
    .nav__mobile-menu a:last-child { border-bottom: none; }
    .nav__cta:hover { background: var(--cube-accent-active); }

    .btn { padding: 16px 32px; border-radius: var(--r-sm); font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
    .btn--primary {
      background: var(--cube-accent); color: var(--cube-on-primary); border: none;
      box-shadow: rgba(255,56,92,0.35) 0 8px 20px;
    }
    .btn--primary:hover { background: var(--cube-accent-active); transform: translateY(-2px); }
    .btn--secondary { background: var(--cube-canvas); color: var(--cube-ink); border: 1px solid var(--cube-canvas); }

    /* ============ Footer ============ */
    .footer {
      background: var(--cube-dark); color: var(--cube-on-dark);
      padding: var(--s-section) var(--s-xxl) var(--s-xl);
    }
    .footer__wrap { max-width: 1280px; margin: 0 auto; }
    .footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-xxl); padding-bottom: var(--s-xxl); border-bottom: 1px solid rgba(245,240,230,0.15); }
    .footer__brand { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; color: var(--cube-on-dark); }
    .footer__about { font-size: 14px; line-height: 1.55; margin-top: var(--s-md); color: rgba(245,240,230,0.7); }
    .footer__col h4 { font-size: 14px; font-weight: 700; color: var(--cube-on-dark); margin-bottom: var(--s-md); }
    .footer__col a { font-size: 14px; color: rgba(245,240,230,0.7); display: block; margin-bottom: 8px; }
    .footer__col a:hover { color: var(--cube-on-dark); }
    .footer__legal {
      margin-top: var(--s-lg);
      font-size: 13px; color: rgba(245,240,230,0.55);
      line-height: 1.55;
    }

/* ============ 반응형 — Nav · Footer (index.html 검증된 패턴 그대로) ============ */
@media (max-width: 960px) {
  .nav { padding: 0 var(--s-base); gap: var(--s-lg); }
  .nav__brand { flex: 1; min-width: 0; }
  .nav__menu { display: none; }
  .nav__hamburger { display: flex; align-items: center; justify-content: center; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .nav { height: 64px; }
  .nav__brand img { height: 28px; }
  .nav__cta { padding: 8px 14px; font-size: 13px; }
  .nav__mobile-menu { top: 64px; }
  .footer__cols { grid-template-columns: 1fr; gap: var(--s-xl); }
}

/* ============ 글 페이지 (/blog · /cases 공용) ============ */
.post { max-width: 760px; margin: 0 auto; padding: var(--s-xxl) var(--s-base) var(--s-section); }
.post__eyebrow { font-size: 14px; font-weight: 700; color: var(--cube-accent); letter-spacing: 0.3px; }
.post__title { font-size: 40px; margin-top: var(--s-sm); letter-spacing: -0.8px; }
.post__meta { margin-top: var(--s-base); font-size: 14px; color: var(--cube-muted); display: flex; gap: var(--s-sm); flex-wrap: wrap; align-items: center; }
.post__meta span:not(:last-child)::after { content: "·"; margin-left: var(--s-sm); color: var(--cube-hairline); }
.post__summary {
  margin-top: var(--s-lg); padding: var(--s-base) var(--s-md);
  background: var(--cube-surface-soft); border-left: 3px solid var(--cube-accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 16px; color: var(--cube-body);
}
.post__hero { margin-top: var(--s-xl); border-radius: var(--r-md); overflow: hidden; }
.post__hero img { width: 100%; height: auto; }

/* 본문 타이포 — 마크다운이 렌더된 영역 */
.post__body { margin-top: var(--s-xl); font-size: 17px; line-height: 1.8; }
.post__body > * + * { margin-top: var(--s-base); }
.post__body h2 { font-size: 26px; margin-top: var(--s-xxl); padding-top: var(--s-md); border-top: 1px solid var(--cube-hairline); }
.post__body h3 { font-size: 20px; margin-top: var(--s-xl); }
.post__body ul, .post__body ol { padding-left: 1.3em; }
.post__body li + li { margin-top: 6px; }
.post__body img { width: 100%; height: auto; border-radius: var(--r-sm); margin-top: var(--s-lg); }
.post__body a { color: var(--cube-accent); text-decoration: underline; text-underline-offset: 3px; }
.post__body blockquote {
  padding: var(--s-md); background: var(--cube-surface-soft);
  border-radius: var(--r-sm); color: var(--cube-body); font-style: normal;
}
.post__body code { background: var(--cube-surface-soft); padding: 2px 6px; border-radius: 4px; font-size: 15px; }
.post__body table { width: 100%; border-collapse: collapse; font-size: 15px; }
.post__body th, .post__body td { padding: 10px 12px; border: 1px solid var(--cube-hairline); text-align: left; }
.post__body th { background: var(--cube-surface-soft); font-weight: 700; color: var(--cube-ink); }
.post__body hr { border: none; border-top: 1px solid var(--cube-hairline); }

/* 시공사례 스펙 표 */
.post__specs { margin-top: var(--s-xl); display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--cube-hairline); border: 1px solid var(--cube-hairline); border-radius: var(--r-sm); overflow: hidden; }
.spec { background: var(--cube-canvas); padding: var(--s-md); }
.spec__k { font-size: 13px; color: var(--cube-muted); }
.spec__v { font-size: 18px; font-weight: 700; color: var(--cube-ink); margin-top: 4px; }

/* 핵심 작업 */
.post__highlights { margin-top: var(--s-xl); }
.post__highlights h2 { font-size: 22px; }
.post__highlights ul { margin-top: var(--s-md); list-style: none; }
.post__highlights li { padding-left: 26px; position: relative; margin-top: 8px; }
.post__highlights li::before { content: "✓"; position: absolute; left: 0; color: var(--cube-sage); font-weight: 700; }

/* 갤러리 */
.post__gallery { margin-top: var(--s-xxl); display: grid; gap: var(--s-base); }
.shot img { width: 100%; height: auto; border-radius: var(--r-sm); }
.shot figcaption { margin-top: 8px; font-size: 14px; color: var(--cube-muted); }

/* 태그 */
.post__tags { margin-top: var(--s-xxl); display: flex; gap: 8px; flex-wrap: wrap; }
.tag { padding: 6px 14px; border-radius: 999px; background: var(--cube-surface-soft); font-size: 13px; color: var(--cube-muted); }

/* 글 하단 CTA */
.post__cta {
  margin-top: var(--s-section); padding: var(--s-xl) var(--s-base);
  background: var(--cube-dark); border-radius: var(--r-md); text-align: center;
}
.post__cta h2 { color: var(--cube-on-dark); font-size: 26px; border: none; margin: 0; padding: 0; }
.post__cta p { color: rgba(245,240,230,0.8); margin-top: var(--s-sm); font-size: 16px; }
.post__cta .btn { display: inline-block; margin-top: var(--s-lg); }

/* ============ 목록 페이지 (/blog.html) ============ */
.list-head { max-width: 1280px; margin: 0 auto; padding: var(--s-section) var(--s-base) var(--s-lg); }
.list-head h1 { font-size: 42px; letter-spacing: -0.8px; }
.list-head p { margin-top: var(--s-base); font-size: 17px; color: var(--cube-muted); max-width: 620px; }
.list-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 var(--s-base) var(--s-section);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-xl);
}
.card { display: block; border-radius: var(--r-md); overflow: hidden; background: var(--cube-canvas); transition: transform 0.2s; }
.card:hover { transform: translateY(-4px); }
.card__thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--cube-surface-soft); }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--s-base) 2px; }
.card__date { font-size: 13px; color: var(--cube-muted); }
.card__title { font-size: 19px; margin-top: 6px; line-height: 1.4; }
.card__summary { font-size: 15px; color: var(--cube-muted); margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.list-empty { max-width: 1280px; margin: 0 auto; padding: 0 var(--s-base) var(--s-section); color: var(--cube-muted); }

@media (max-width: 960px) {
  .list-grid { grid-template-columns: repeat(2, 1fr); }
  .post__title { font-size: 30px; }
  .list-head h1 { font-size: 32px; }
}
@media (max-width: 560px) {
  .list-grid { grid-template-columns: 1fr; }
  .post__title { font-size: 26px; }
  .post__body { font-size: 16px; }
}