@charset "utf-8";
  @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');

  
  :root{
    --dj-max: 1400px;
    --dj-bg: #e6ecf3;
    --dj-card: #ffffff;
    --dj-border: #e6ecf3;
    --dj-ink: #1f2937;
    --dj-sub: #5b6575;
    --dj-accent: #0ea5e9;
    --dj-accent-deep:#0378b3;
    --dj-radius: 18px;
    --dj-shadow: 0 10px 28px rgba(15, 34, 55, .08);
    --dj-shadow-hover: 0 16px 36px rgba(15, 34, 55, .12);
  }

  /* 래퍼 */
  .dj-wrap{
    max-width:var(--dj-max);
    margin:0 auto;
    padding:28px 24px 40px;
    background:linear-gradient(180deg,#fff 0%, var(--dj-bg) 100%);
    border-radius:24px;
  }

  /* 페이지 타이틀 */
  .dj-title{
    font-family:"Pretendard Variable","Noto Sans KR",system-ui,sans-serif;
    font-weight:800; letter-spacing:-.02em; line-height:1.15;
    font-size:clamp(24px,3.4vw,36px); margin:4px 0 10px;
    background:linear-gradient(135deg,var(--dj-accent),#60a5fa 60%,#22d3ee);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
  .dj-lead{
    font-family:"Pretendard Variable","Noto Sans KR",system-ui,sans-serif;
    color:var(--dj-sub); font-weight:500; font-size:clamp(14px,2vw,17px);
    line-height:1.75; margin-bottom:22px;
  }

  /* 섹션 타이틀 */
  .dj-section-title{
    position:relative;
    font-family:"Pretendard Variable","Noto Sans KR",system-ui,sans-serif;
    font-weight:800; letter-spacing:-.01em;
    color:#0f172a; font-size:clamp(18px,2.4vw,22px);
    margin:26px 2px 14px;
    padding-left:14px;
  }
  .dj-section-title::before{
    content:"";
    position:absolute; left:0; top:0.38em;
    width:6px; height:1.2em; border-radius:8px;
    background:linear-gradient(180deg,var(--dj-accent), #60a5fa);
    box-shadow:0 0 0 4px rgba(14,165,233,.12);
  }
  .dj-section-desc{
    margin:-4px 0 12px; color:#6b7280; font-size:14.5px;
  }

  /* 레이아웃 */
  .dj-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;margin-bottom:10px}
  .dj-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:6px}
  .dj-cell{display:grid;grid-template-columns:1fr 1fr;gap:16px}

  /* 카드 */
  .dj-card{
    position:relative; background:var(--dj-card); border:1px solid var(--dj-border);
    border-radius:var(--dj-radius); box-shadow:var(--dj-shadow); overflow:hidden; transition:.25s ease;
  }
  .dj-card:hover{ transform:translateY(-2px); box-shadow:var(--dj-shadow-hover); }
  .dj-body{
    padding:16px 18px 18px; font-family:"Pretendard Variable","Noto Sans KR",system-ui,sans-serif;
  }
  .dj-body p{
    margin:0 0 8px; color:var(--dj-ink); font-size:16px; line-height:1.78; letter-spacing:-.01em; word-break:keep-all;
  }
  .dj-body strong{font-weight:750}

  /* 이미지 (섹션별 개별 높이 변수) */
  .dj-media{
    width:100%;
    height:var(--dj-media-h, 420px);   /* 기본 420px, 섹션/카드에서 덮어쓰기 */
    overflow:hidden; background:#f3f5f9;
    display:flex; align-items:center; justify-content:center;
  }
  .dj-media img{
    width:100%; height:100%;
    object-fit:contain; object-position:center; display:block; background:#fff;
  }

  /* 포인트 도트 */
  .dj-dot{
    display:inline-block;width:9px;height:9px;border-radius:50%;
    background:conic-gradient(from 180deg at 50% 50%, var(--dj-accent), #60a5fa 50%, #22d3ee);
    margin-right:8px;vertical-align:middle;box-shadow:0 0 0 2px rgba(14,165,233,.15) inset;
  }

  /* 갤러리 */
  .dj-gallery{
    display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:14px 14px 18px;
  }
  .dj-gallery .dj-media{
    border-radius:14px; overflow:hidden; height:var(--dj-media-h, 240px);
  }

  /* 와이드 */
  .dj-wide{margin-top:12px}
  .dj-wide .dj-media{height:var(--dj-media-h, 700px)} /* 와이드 기본 700px */

  /* 다운로드 버튼 */
  .dj-download-wrap{ text-align:center; margin:34px auto 6px; }
  .dj-download-btn{
    display:inline-flex;align-items:center;gap:10px; text-decoration:none;
    padding:13px 28px; border-radius:999px; font-weight:750; font-size:16.5px; letter-spacing:.02em;
    color:#fff; background:linear-gradient(135deg,var(--dj-accent), var(--dj-accent-deep));
    box-shadow:0 10px 22px rgba(2,132,199,.28);
    transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  }
  .dj-download-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 26px rgba(2,132,199,.34); filter:saturate(1.05); }
  .dj-download-btn svg{width:18px;height:18px;flex:0 0 18px;fill:#fff}

  /* 섹션별 높이 프리셋 */
  .sec-hero   { --dj-media-h: 560px; }  /* 메인 비주얼 */
  .sec-spec   { --dj-media-h: 420px; }  /* 스펙/상세 */
  .sec-parts  { --dj-media-h: 360px; }  /* 부품/디테일 */
  .sec-gallery{ --dj-media-h: 220px; }  /* 갤러리 썸네일 */
  .sec-wide   { --dj-media-h: 720px; }  /* 와이드 이미지 */

  /* 반응형 */
  @media (max-width:1024px){
    .dj-grid{grid-template-columns:1fr}
    .dj-row{grid-template-columns:1fr}
    .dj-cell{grid-template-columns:1fr}
  }
  @media (max-width:640px){
    .dj-wrap{padding:18px}
    .dj-body{padding:14px 14px 16px}
    .dj-gallery{grid-template-columns:repeat(2,1fr)}
    .sec-hero   { --dj-media-h: 340px; }
    .sec-spec   { --dj-media-h: 300px; }
    .sec-parts  { --dj-media-h: 260px; }
    .sec-gallery{ --dj-media-h: 180px; }
    .sec-wide   { --dj-media-h: 420px; }
  }

  /* 리셋 보정 */
  .dj-wrap, .dj-wrap * { box-sizing:border-box; }
  .dj-wrap img{ border:0; }