/* ============================================================
   layout.css — Container · Section · Grid · Utility
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}

.container-fluid { width: 100%; padding-left: var(--container-px); padding-right: var(--container-px); }

/* 섹션 */
.section          { padding-top: var(--section-py); padding-bottom: var(--section-py); }
.section-tight    { padding-top: clamp(32px,4vw,56px); padding-bottom: clamp(32px,4vw,56px); }
.section-close    { padding-top: 0px; padding-bottom: clamp(32px,4vw,56px); }
.section--dark    { background: var(--color-bg-dark); color: var(--color-text-on-dark); }
.section--soft    { background: var(--color-bg-soft); }

/* 섹션 헤더 (eyebrow + title + desc) */
.sec-head { margin-bottom: var(--space-10); }
.sec-head .eyebrow {
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.sec-head .title {
  font-size: var(--fs-section);
  line-height: var(--lh-tight);
  letter-spacing: var(--letter-tight);
}
.sec-head .desc {
  margin-top: var(--space-3);
  font-size: var(--fs-16);
  color: var(--color-text-soft);
  max-width: 64ch;
}
.section--dark .sec-head .desc { color: var(--color-text-on-dark-soft); }

/* 그리드 유틸 */
.grid          { display: grid; gap: var(--space-6); }
.grid-2        { grid-template-columns: repeat(2, 1fr); }
.grid-3        { grid-template-columns: repeat(3, 1fr); }
.grid-4        { grid-template-columns: repeat(4, 1fr); }
.grid-5        { grid-template-columns: repeat(5, 1fr); }
.grid-6        { grid-template-columns: repeat(6, 1fr); }
.grid-12       { grid-template-columns: repeat(12, 1fr); }

@media (max-width: 1024px) {
  .grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: 1fr; }
}

/* Flex 유틸 */
.flex      { display: flex; }
.flex-col  { flex-direction: column; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* 텍스트 유틸 */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-mute   { color: var(--color-text-mute); }
.text-soft   { color: var(--color-text-soft); }
.text-primary { color: var(--color-primary); }

/* visibility helpers */
.hide-desktop { display: none; }
.hide-mobile  { display: revert; }
@media (max-width: 1200px) {
  .hide-desktop { display: revert; }
  .hide-mobile  { display: none; }
}

/* site-wrap (전체 레이아웃 컨테이너) */
.site-wrap   { min-height: 100vh; display: flex; flex-direction: column; }
.site-main   { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }