/* /assets/css/cases.css
   =======================================================
   Winning Cases Section (one-screen, fixed header/dock safe)
   - 데스크톱: 4장 크게
   - 1400px↓: 3장
   - 1120px↓: 2장
   - 모바일도 '한 화면' 유지
   - ★ 팔레트 통일: 네이비 계열 브랜드 톤
   ======================================================= */

/* ---- 글로벌 Fallback 변수 ---- */
:root{
  --header-h: 68px;                 /* 고정 헤더 기본 높이 (JS가 실측값으로 덮어씀) */
  --dock-h: 0px;                    /* 하단 고정바 기본 높이 (JS가 실측값으로 덮어씀) */
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* === 브랜드 팔레트(통일) === */
  --brand:        #0E1D4A;          /* 메인 네이비 */
  --brand-ink:    #EAF0F6;          /* 네이비 위 텍스트 */
  --surface:      #F4F6FB;          /* 밝은 섹션 배경 */
  --ink-strong:   #0B1724;          /* 본문/타이틀 진한 텍스트 */
  --ink:          #1C2733;          /* 일반 텍스트 */
  --ink-muted:    #4A6078;          /* 보조 텍스트 */
  --ink-dim:      #7B8794;          /* 날짜 등 더 엷은 텍스트 */

  /* 카드/그림자 */
  --card:         #FFFFFF;
  --shadow-1:     rgba(10,21,28,.06);
  --shadow-2:     rgba(10,21,28,.10);

  /* 다른 섹션과 충돌 최소화를 위한 기본값 (섹션 내부에서 다시 덮어씀) */
  --cases-max: 1320px;
  --cases-pad: clamp(24px, 5vw, 56px);
  --cases-left-w: clamp(280px, 24vw, 360px);
  --case-gap: clamp(16px, 2vw, 24px);
  --case-w: clamp(260px, 25vw, 320px);
  --case-h: clamp(200px, 24vw, 248px);
}

/* ▶ 헤더·하단바를 뺀 ‘정확히 한 화면’ (모바일 포함) */
#cases.cases{
  position: relative;

  /* 한 화면 높이 = 뷰포트 - 헤더 - 하단 고정바 */
  height: calc(100svh - var(--header-h) - var(--dock-h));
  min-height: 0;

  /* iOS 하단 안전영역을 더해 깔끔하게 */
  padding: clamp(36px, 5vh, 56px) 0 calc(40px + var(--safe-b));
  color: var(--ink-strong);
  background: var(--surface);

  /* ====== 한 페이지 ‘딱 맞게 크게’ 보이도록 섹션-로컬 변수 ====== */
  --visible-cols: 4;                          /* 기본 4장 */
  --cases-max: 1680px;                        /* 컨테이너 최대폭 크게 */
  --cases-pad: clamp(20px, 4vw, 48px);        /* 좌우 패딩 소폭 축소 */
  --cases-left-w: clamp(220px, 18vw, 280px);  /* 타이틀 폭 축소 → 카드 영역 확보 */
  --case-gap: clamp(18px, 1.8vw, 24px);       /* 카드 간격 */

  /* 오른쪽 영역 가용폭 = (전체폭 - 좌우패딩 - 좌측 타이틀폭) */
  --right-usable: calc(100vw - 2*var(--cases-pad) - var(--cases-left-w));

  /* 카드 폭 = (가용폭 - 간격합) / 가시 카드 수  → 크게 */
  --case-w: clamp(
    260px,
    calc((var(--right-usable) - (var(--visible-cols) - 1)*var(--case-gap)) / var(--visible-cols)),
    380px
  );

  /* 카드 높이: 보기 좋은 비율(0.88배) + 안전 클램프 → 크게 */
  --case-h: clamp(260px, calc(var(--case-w) * .88), 360px);
}

/* 은은한 배경(브랜드 톤으로 미세 틴트) */
#cases.cases::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 600px at 70% 20%, rgba(14,29,74,.05), transparent 60%),
    radial-gradient(900px 520px at 20% 70%, rgba(14,29,74,.04), transparent 65%);
}

/* 레이아웃: 타이틀/트랙 2열 그리드 */
.cases-container{
  width: min(var(--cases-max), 100% - 2*var(--cases-pad));
  margin: 0 auto;
  height: 100%;
  display: grid;
  grid-template-columns: var(--cases-left-w) 1fr;
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
  align-content: center;
}

/* 좌측 타이틀 */
.cases-left{ align-self:center; }
.cases-eyebrow{
  font-weight:800; letter-spacing:.06em; opacity:.75; margin-bottom:12px;
  font-size:12px; color: var(--brand);
}
.cases-title{
  margin:0 0 18px;
  font-size:clamp(32px, 3.6vw, 52px);
  font-weight:900; letter-spacing:-.02em; color: var(--ink-strong);
}
.cases-more{
  display:inline-flex; gap:6px; align-items:center; font-weight:800;
  color: var(--brand); text-decoration:none; opacity:.92
}
.cases-more:hover{ opacity:1 }

/* 우측 트랙 + 페이드(섹션 배경색과 일치) */
.cases-right{ position:relative; overflow:hidden; padding:2px 0; }
.cases-right::before,
.cases-right::after{
  content:""; position:absolute; top:0; bottom:0; width:28px; z-index:5; pointer-events:none;
}
.cases-right::before{ left:0;  background:linear-gradient(90deg, var(--surface), transparent); }
.cases-right::after { right:0; background:linear-gradient(270deg, var(--surface), transparent); }

.case-track{
  display:flex;
  gap:var(--case-gap);
  will-change:transform;
  user-select:none;
}

/* 카드 */
.case-card{
  position:relative;
  flex: 0 0 var(--case-w);
  height: var(--case-h);
  border-radius:22px;
  background: var(--card);
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 8px 28px var(--shadow-1);
  padding:22px;
  overflow:hidden;
  isolation:isolate;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .25s ease, box-shadow .25s ease;
}
.case-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 34px var(--shadow-2);
}
.case-card a.card-link{ position:absolute; inset:0; z-index:4; }

/* 텍스트 */
.case-title{
  font-weight:900; line-height:1.35; letter-spacing:-.01em;
  margin:0 0 8px; font-size:clamp(15px, 1.2vw, 18px); color: var(--ink-strong);
}
.case-tags{ color: var(--ink-muted); font-weight:700; font-size:12px; opacity:.95 }
.case-date{ color: var(--ink-dim); font-size:12px; font-weight:700 }

/* 호버 배경 이미지 + 네이비 틴트 오버레이 */
.case-card::before{
  content:""; position:absolute; inset:0; z-index:1;
  background-image:var(--card-bg, none);
  background-size:cover; background-position:center;
  opacity:0; transition:opacity .35s ease;
}
.case-card::after{
  content:""; position:absolute; inset:0; z-index:2;
  /* 기존 검은 그라데이션 → 브랜드 네이비 틴트로 통일 */
  background:linear-gradient(180deg,
              rgba(14,29,74,0) 30%,
              rgba(14,29,74,.75) 100%);
  opacity:0; transition:opacity .35s ease;
}
.case-inner{ position:relative; z-index:3; }
.case-card:hover::before, .case-card:focus-within::before{ opacity:1; }
.case-card:hover::after,  .case-card:focus-within::after { opacity:.95; }
.case-card:hover .case-title,
.case-card:focus-within .case-title{ color: var(--brand-ink); }
.case-card:hover .case-tags, .case-card:hover .case-date,
.case-card:focus-within .case-tags, .case-card:focus-within .case-date{
  color: var(--brand-ink); opacity:1
}

/* ===== 반응형: 보이는 카드 수 조절 ===== */
@media (max-width: 1400px){
  #cases.cases{ --visible-cols: 3; }
}
@media (max-width: 1120px){
  #cases.cases{ --visible-cols: 2; }
}

/* 그리드 단일열 전환(타이틀 위, 트랙 아래) — 높이는 그대로 */
@media (max-width:980px){
  .cases-container{ grid-template-columns:1fr; align-items:center; }
}

/* 모바일(≤640px): 카드 사이즈만 조절 (섹션 높이는 ‘한 화면’ 유지) */
@media (max-width:640px){
  #cases.cases{ --visible-cols: 2; } /* 필요 시 1로 바꿔 더 크게 보여도 됨 */
  :root{
    --case-w: clamp(220px, 72vw, 320px);
    --case-h: clamp(180px, 52vw, 240px);
  }
  /* ❌ 옛 코드의 `#cases.cases { height:auto }` 는 더 이상 쓰지 않습니다. */
}