/* =========================================================
   ONT — Works (작업 상세) 전용 스타일
   ※ works/*.html 에서만 사용. 공통(헤더·푸터·배경)은 style.css

     <link rel="stylesheet" href="../style.css" />
     <link rel="stylesheet" href="../case.css" />

   [목차 — 페이지 위→아래 흐름 순서]
   1. Tokens (타이포 스케일)
   2. Case 컨테이너 · 뒤로가기
   3. 2컬럼 레이아웃 (.case__layout / media / info)
   4. Heading — eyebrow / title / lead
   5. Meta (역할·유형·링크)
   6. Body 본문 (h2 / p / list)
   7. Media — Hero / Video
   8. Gallery — 가로 슬라이드 / 세로 스택
   9. Prev / Next 네비
   10. Lightbox
   ========================================================= */

/* =========================================================
   1. Tokens — 타이포 스케일
   ========================================================= */
:root{
  --text-xs:  12px;                       /* 보조 라벨, 날짜 */
  --text-sm:  13px;                       /* 캡션, 메타, sub */
  --text-base:clamp(13px, 1.07vw, 15px);  /* 본문 기본 */
  --text-md:  clamp(15px,1.2vw,17px);     /* 약간 큰 본문 */
  --text-lg:  clamp(17px,1.6vw,20px);     /* 섹션 소제목 */
  --text-xl:  clamp(20px,2.8vw,32px);     /* intro lead 등 */
  --text-2xl: clamp(28px,4.4vw,56px);     /* h1 */
}

/* =========================================================
   2. Case 컨테이너 · 뒤로가기
   ========================================================= */
.case{
  max-width:1680px;margin:0 auto;
  padding:clamp(16px,2.5vw,32px) clamp(20px,3vw,48px) clamp(60px,8vw,120px);
}
.case__back{
  display:inline-block;font-size:14px;color:var(--mute);
  margin-bottom:clamp(22px,4vw,44px);transition:color .2s var(--ease);
}
.case__back:hover{color:var(--ink);}

/* =========================================================
   3. 2컬럼 레이아웃
   ※ .case__layout 로 감싼 페이지에만 적용.
     래퍼 없는 기존 단일컬럼 페이지는 영향 없음.
   ========================================================= */
.case__layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(380px,33vw,500px);  /* 우측 설명 폭 */
  gap:clamp(34px,5vw,72px);align-items:start;
  margin-top:clamp(8px,2vw,20px);
}

/* 좌측: 이미지 세로 스택 */
.case__media{
  grid-column:1;grid-row:1;max-width:1800px;
  display:flex;flex-direction:column;gap:clamp(16px,2.5vw,28px);
}
.case__media .case__hero{margin-bottom:0;}
.case__media .gallery{margin-top:0;}
.case__media > img{width:100%;height:auto;display:block;}

/* 우측: 설명 패널 — 데스크탑 스티키 */
.case__info{
  grid-column:2;grid-row:1;
  position:sticky;top:clamp(20px,4vw,40px);
  display:flex;flex-direction:column;gap:clamp(20px,2.4vw,30px);
}
.case__info .case__heading .case__eyebrow{margin:0 0 5px;}
.case__info .case__heading .case__title{margin:0;font-size:var(--text-md);}
.case__info .case__lead{max-width:none;margin:0;font-size:clamp(13px,1.3vw,15px);}
.case__info .case__meta{
  display:flex;flex-wrap:wrap;gap:18px 28px;margin:0;
  border-top:1px solid var(--hair);
}
.case__info .case__body{margin:0;}
.case__info .case__body h2{margin-top:clamp(20px,2.5vw,30px);}
.case__info .case__body h2:first-child{margin-top:0;}
.case__info .case__body p:last-child{margin-bottom:0;}

/* 모바일: 단일 컬럼 · 설명 상단 · 스티키 해제 */
@media(max-width:880px){
  .case__layout{grid-template-columns:1fr;gap:clamp(28px,6vw,40px);}
  .case__info{grid-column:1;grid-row:1;position:static;top:auto;}
  .case__media{grid-column:1;grid-row:2;max-width:none;}
}

/* =========================================================
   4. Heading — eyebrow / title / lead
   ========================================================= */
.case__eyebrow{
  font-family:"Quicksand",sans-serif;font-weight:500;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 14px;
}
.case__title{
  font-family:var(--body);font-weight:400;
  font-size:var(--text-md);line-height:1.3;letter-spacing:-.015em;
  margin:0 0 18px;color:var(--ink);
}
.case__title span{
  font-family:var(--body);font-weight:600;font-size:.32em;
  letter-spacing:-.01em;color:var(--mute);margin-left:.4em;vertical-align:middle;
}
.case__lead{
  font-size:clamp(16px,1.6vw,20px);line-height:1.7;color:#3a3a3a;
  max-width:60ch;margin:0 0 clamp(30px,5vw,52px);
}

/* =========================================================
   5. Meta (역할·유형·링크)
   ========================================================= */
.case__meta{
  display:flex;flex-wrap:wrap;gap:clamp(22px,5vw,64px);
  padding:clamp(18px,3vw,26px) 0;border-top:1px solid var(--ink);
  border-bottom:1px solid var(--hair);margin-bottom:clamp(34px,6vw,60px);
}
.case__meta dt{
  font-family:"Raleway",sans-serif;font-size:12px;
  text-transform:uppercase;color:#3a3a3a;font-weight:500;margin-bottom:6px;
}
.case__meta dd{margin:0;font-size:var(--text-base);color:var(--ink);font-weight:400;}
.case__meta .case__metalink{
  display:inline-flex;align-items:center;gap:6px;
  font-size:15px;font-weight:500;color:var(--accent);transition:gap .2s var(--ease);
}
.case__meta .case__metalink:hover{gap:10px;}

/* =========================================================
   6. Body 본문
   ========================================================= */
.case__body{max-width:none;}
.case__body h2{
  font-family:"Quicksand",sans-serif;font-weight:500;
  font-size:var(--text-lg);color:var(--accent);letter-spacing:-.01em;
  margin:clamp(30px,5vw,46px) 0 2px;
}
.case__body h2:first-child{margin-top:0;}
.case__body p{font-size:var(--text-base);line-height:1.5;color:#3a3a3a;margin:0 0 18px;}
.case__link{margin-top:clamp(30px,5vw,46px);}

.case__list{list-style:none;padding:0;margin:1.5rem 0;}
.case__list li{
  position:relative;margin-bottom:1rem;
  font-size:var(--text-base);line-height:1.5;
}


/* =========================================================
   7. Media — Hero / Video
   ========================================================= */
.case__hero{
  aspect-ratio:16/10;overflow:hidden;position:relative;
  background:linear-gradient(135deg,var(--tile),var(--tile2));
  margin-bottom:clamp(30px,5vw,52px);
}
.case__hero img{width:100%;height:100%;object-fit:cover;}
.case__hero .ph{
  position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-size:14px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
}
.case__hero:has(img) .ph{display:none;}

/* 영상 16:9 반응형 래퍼 */
.case__video{position:relative;width:100%;aspect-ratio:16/9;}
.case__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* =========================================================
   8. Gallery
   ========================================================= */
/* ── 가로 슬라이드 ── */
.gallery{position:relative;margin-top:clamp(38px,6vw,68px);}
.gallery__track{
  display:flex;gap:clamp(12px,2vw,18px);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;padding-bottom:14px;
}
.gallery__track::-webkit-scrollbar{height:6px;}
.gallery__track::-webkit-scrollbar-thumb{background:var(--hair);border-radius:3px;}
.gallery__slide{
  flex:0 0 clamp(260px,46%,520px);scroll-snap-align:start;
  aspect-ratio:4/3;overflow:hidden;position:relative;
  background:linear-gradient(135deg,var(--tile),var(--tile2));
}
.gallery__slide img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;}
.gallery__slide .ph{
  position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
}
.gallery__slide:has(img) .ph{display:none;}

/* 화살표 — CSS 꺾쇠 */
.gallery__btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:40px;height:40px;border:0;background:none;cursor:pointer;font-size:0;
  display:flex;align-items:center;justify-content:center;
  opacity:.55;transition:opacity .2s var(--ease);
}
.gallery__btn:hover{opacity:1;}
.gallery__btn::before{
  content:"";display:block;width:14px;height:14px;
  border:solid var(--ink);border-width:3px 3px 0 0;
}
.gallery__btn--next::before{transform:rotate(45deg);}
.gallery__btn--prev::before{transform:rotate(-135deg);}
.gallery__btn--prev{left:6px;}
.gallery__btn--next{right:6px;}
@media(max-width:640px){.gallery__btn{display:none;}}

/* ── 세로 스택 (gallery--stack) ── */
.gallery--stack .gallery__track{
  display:flex;flex-direction:column;
  gap:clamp(14px,2vw,22px);overflow:visible;scroll-snap-type:none;
}
.gallery--stack .gallery__slide{flex:none;width:100%;aspect-ratio:auto;}
.gallery--stack .gallery__slide img{height:auto;display:block;}
.gallery--stack .gallery__slide:not(:has(img)){aspect-ratio:16/9;}
.gallery--stack .gallery__btn{display:none;}

/* =========================================================
   9. Prev / Next 작업 네비
   ========================================================= */
.case__nav{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:16px;margin-top:clamp(48px,7vw,88px);padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--hair);
}
.case__nav a{
  display:inline-flex;flex-direction:column;gap:4px;
  width:fit-content;              /* 글자 폭만큼만 → hover 영역도 글자에 딱 */
  color:var(--mute);transition:color .2s var(--ease);
}
.case__nav a:hover{color:var(--accent);}
.case__nav a:first-child{justify-self:start;}                    /* prev: 왼쪽 끝 */
.case__nav .is-next{justify-self:end;align-items:flex-end;text-align:right;}
.case__nav .dir{
  font-family:"Raleway",sans-serif;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;
}
.case__nav .name{font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.case__nav a.is-empty{visibility:hidden;}

/* 가운데 grid 아이콘 → 목록으로 */
.case__nav-grid{
  display:grid !important;grid-template-columns:repeat(3,1fr);
  gap:3px;width:18px;justify-self:center;
}
.case__nav-grid span{
  width:4px;height:4px;background:var(--mute);border-radius:1px;
  transition:background .2s var(--ease);
}
.case__nav-grid:hover span{background:var(--accent);}

/* =========================================================
   10. Lightbox — 이미지 클릭 확대
   ========================================================= */
.lightbox{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(20,18,22,.82);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .25s var(--ease);
}
.lightbox.is-open{display:flex;opacity:1;}
.lightbox img{
  max-width:92vw;max-height:88vh;width:auto;height:auto;
  object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.4);cursor:zoom-out;
}
.lightbox__close{
  position:absolute;top:18px;right:22px;width:44px;height:44px;
  border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;
  font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease);
}
.lightbox__close:hover{background:rgba(255,255,255,.28);}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:56px;height:56px;border:0;background:none;cursor:pointer;font-size:0;
  display:flex;align-items:center;justify-content:center;
  opacity:.8;transition:opacity .2s var(--ease);
}
.lightbox__nav:hover{opacity:1;}
.lightbox__nav::before{
  content:"";display:block;width:20px;height:20px;
  border:solid #fff;border-width:4px 4px 0 0;
}
.lightbox__nav--next::before{transform:rotate(45deg);}
.lightbox__nav--prev::before{transform:rotate(-135deg);}
.lightbox__nav--prev{left:18px;}
.lightbox__nav--next{right:18px;}
@media(max-width:640px){
  .lightbox__nav{width:44px;height:44px;}
  .lightbox__nav::before{width:16px;height:16px;border-width:3px 3px 0 0;}
  .lightbox__nav--prev{left:6px;}
  .lightbox__nav--next{right:6px;}
}
@media(prefers-reduced-motion:reduce){.lightbox{transition:none;}}