/* ═══════════════════════════════════════════
   JIEUM 서브페이지 전용 스타일
   style.css의 디자인 토큰을 그대로 상속합니다.
   ═══════════════════════════════════════════ */

/* ── JS 미실행 시에도 콘텐츠가 보이게 (검색엔진 크롤러 대비) ──
   style.css의 .reveal{opacity:0}은 JS가 in 클래스를 붙여야 보인다.
   네이버 등 JS 실행이 제한적인 크롤러에서 본문이 통째로 숨겨지는 것을 막는다. */
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(44px)}
html.js .reveal.in{opacity:1;transform:translateY(0)}

/* ── 페이지 히어로 ── */
.page-hero{
  padding:clamp(140px,18vh,220px) var(--pad) clamp(60px,8vw,100px);
  border-bottom:1px solid var(--line);
  position:relative;
  background:
    radial-gradient(120% 90% at 82% 0%,rgba(216,180,106,.10),transparent 62%),
    var(--bg);
}
.page-hero-inner{max-width:1000px}
.ph-title{
  font-family:var(--font-en);
  font-size:clamp(36px,6.4vw,84px);font-weight:700;
  line-height:1.06;letter-spacing:-.025em;
  margin-bottom:26px;
}
.ph-title .kr{font-family:var(--font-kr);letter-spacing:-.03em}
.ph-lead{
  color:var(--txt-dim);
  font-size:clamp(15px,1.9vw,20px);
  line-height:1.75;max-width:720px;
}
.ph-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}

/* ── 브레드크럼 ── */
.crumb{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.14em;color:var(--txt-faint);
  margin-bottom:24px;
}
.crumb a{color:var(--txt-faint);transition:color .3s var(--ease)}
.crumb a:hover{color:var(--accent)}
.crumb span{margin:0 8px;opacity:.5}

/* ── 본문 산문 영역 ── */
.prose{max-width:820px}
.prose p{
  color:var(--txt-dim);
  font-size:clamp(15px,1.6vw,17px);
  line-height:1.9;margin-bottom:22px;
}
.prose p strong{color:var(--txt);font-weight:600}
.prose h3{
  font-size:clamp(19px,2.4vw,26px);font-weight:700;
  letter-spacing:-.02em;margin:48px 0 18px;
}
.prose h3:first-child{margin-top:0}
.prose ul{margin:0 0 26px;padding:0;list-style:none}
.prose ul li{
  color:var(--txt-dim);position:relative;
  padding-left:20px;margin-bottom:11px;
  font-size:clamp(14px,1.5vw,16px);line-height:1.75;
}
.prose ul li::before{
  content:'';position:absolute;left:0;top:11px;
  width:6px;height:1px;background:var(--accent);
}

/* ── 특징 카드 그리드 ── */
.feat-grid{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);
  grid-template-columns:repeat(4,1fr);
  margin-top:clamp(40px,5vw,64px);
}
.feat-card{
  background:var(--bg);
  padding:clamp(26px,3.4vw,40px);
  transition:background .4s var(--ease);
}
.feat-card:hover{background:var(--bg-2)}
.feat-num{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.18em;color:var(--accent);
  display:block;margin-bottom:16px;
}
.feat-card h3{
  font-size:clamp(17px,2vw,21px);font-weight:700;
  letter-spacing:-.02em;margin-bottom:12px;
}
.feat-card p{
  color:var(--txt-dim);font-size:14px;line-height:1.75;
}

/* ── 작품 그리드 ── */
.vid-grid{
  display:grid;gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(3,1fr);
  margin-top:clamp(36px,4.5vw,56px);
}
.vid-card{
  display:block;position:relative;
  border:1px solid var(--line);
  background:var(--bg-2);
  overflow:hidden;text-align:left;width:100%;
  cursor:pointer;
  transition:border-color .4s var(--ease),transform .5s var(--ease);
}
.vid-card:hover{border-color:rgba(216,180,106,.5);transform:translateY(-4px)}
.vid-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.vid-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease),opacity .4s;
  opacity:.82;
}
.vid-card:hover .vid-thumb img{transform:scale(1.05);opacity:1}
.vid-play{
  position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;transition:opacity .4s var(--ease);
}
.vid-card:hover .vid-play{opacity:1}
.vid-play i{
  width:52px;height:52px;border-radius:50%;
  background:rgba(216,180,106,.92);
  display:grid;place-items:center;
}
.vid-play i::after{
  content:'';border-left:13px solid #000;
  border-top:8px solid transparent;border-bottom:8px solid transparent;
  margin-left:3px;
}
.vid-info{padding:16px 18px 20px}
.vid-tag{
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:.16em;color:var(--accent);
  display:block;margin-bottom:8px;
}
.vid-name{
  font-size:14.5px;font-weight:600;line-height:1.5;
  letter-spacing:-.01em;
}

/* ── AI 모델 이미지 그리드 ── */
.shot-grid{
  display:grid;gap:clamp(10px,1.2vw,16px);
  grid-template-columns:repeat(4,1fr);
  margin-top:clamp(36px,4.5vw,56px);
}
.shot{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  border:1px solid var(--line);background:var(--bg-2);
}
.shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:.9;transition:transform .9s var(--ease),opacity .4s;
}
.shot:hover img{transform:scale(1.06);opacity:1}

/* ── 스펙 테이블 ── */
.spec-table{
  width:100%;border-collapse:collapse;
  margin-top:clamp(32px,4vw,48px);
  font-size:clamp(13.5px,1.4vw,15px);
}
.spec-table th,.spec-table td{
  text-align:left;padding:16px 18px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.spec-table th{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.14em;color:var(--accent);
  font-weight:400;white-space:nowrap;width:30%;
}
.spec-table td{color:var(--txt-dim);line-height:1.7}
.spec-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── 관련 페이지 링크 ── */
.rel-grid{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);
  grid-template-columns:repeat(3,1fr);
  margin-top:clamp(36px,4.5vw,56px);
}
.rel-card{
  background:var(--bg);padding:clamp(22px,2.8vw,32px);
  display:block;
  transition:background .4s var(--ease);
}
.rel-card:hover{background:var(--bg-2)}
.rel-card:hover .rel-name{color:var(--accent)}
.rel-label{
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:.16em;color:var(--txt-faint);
  display:block;margin-bottom:12px;
}
.rel-name{
  font-size:clamp(16px,1.9vw,19px);font-weight:700;
  letter-spacing:-.02em;margin-bottom:8px;
  transition:color .3s var(--ease);
}
.rel-desc{color:var(--txt-dim);font-size:13.5px;line-height:1.65}

/* ── 하단 CTA 밴드 ── */
.cta-band{
  border-top:1px solid var(--line);
  padding:clamp(70px,10vw,130px) var(--pad);
  text-align:center;
  background:
    radial-gradient(90% 120% at 50% 100%,rgba(216,180,106,.10),transparent 60%),
    var(--bg);
}
.cta-band h2{
  font-family:var(--font-en);
  font-size:clamp(30px,5vw,60px);font-weight:700;
  line-height:1.1;letter-spacing:-.025em;margin-bottom:20px;
}
.cta-band p{
  color:var(--txt-dim);margin-bottom:36px;
  font-size:clamp(14px,1.6vw,17px);
}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── FAQ (서브페이지용) ── */
.sub-faq{max-width:860px;margin-top:clamp(36px,4.5vw,56px)}
.sub-faq details{
  border-bottom:1px solid var(--line);
  padding:22px 0;
}
.sub-faq summary{
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  font-size:clamp(15px,1.7vw,17.5px);font-weight:600;
  letter-spacing:-.01em;
  transition:color .3s var(--ease);
}
.sub-faq summary::-webkit-details-marker{display:none}
.sub-faq summary:hover{color:var(--accent)}
.sub-faq summary i{
  font-style:normal;color:var(--accent);
  font-size:20px;line-height:1;flex-shrink:0;
  transition:transform .4s var(--ease);
}
.sub-faq details[open] summary i{transform:rotate(45deg)}
.sub-faq details p{
  color:var(--txt-dim);margin-top:16px;
  font-size:clamp(14px,1.5vw,15.5px);line-height:1.85;
  max-width:720px;
}

/* ── 반응형 (기존 .work-grid와 동일한 브레이크포인트) ── */
@media (max-width:1024px){
  .vid-grid,.feat-grid,.rel-grid{grid-template-columns:repeat(2,1fr)}
  .shot-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
  .vid-grid,.feat-grid,.rel-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .shot-grid{grid-template-columns:repeat(2,1fr)}
  .page-hero{padding-top:clamp(112px,16vh,150px)}
  .ph-actions .btn-solid,.ph-actions .btn-ghost{width:100%;text-align:center}
  .spec-table th{width:auto;display:block;border-bottom:none;padding-bottom:4px}
  .spec-table td{display:block;padding-top:0}
}

/* ── 개인정보처리방침 ── */
.pv .spec-table{margin:8px 0 26px}
.pv .spec-table th{white-space:normal;line-height:1.6}
.pv .spec-table td strong{color:var(--txt);font-weight:600}
.pv-sub{
  display:block;margin-top:4px;
  font-family:var(--font-kr);font-size:12px;letter-spacing:0;color:var(--txt-faint);
}
.pv a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.pv-fill{background:var(--accent-soft);color:var(--accent);padding:0 4px;border-radius:4px}