/* ============================================================
   01 섹션 오른쪽: JD 내추럴 도트 카드 광고
   - 2초마다 사진 교체 / 클릭하면 확대 + 멈춤 / 수동으로 넘기기
   ▼ 크기·색은 아래 값만 바꾸면 됩니다
   ============================================================ */
:root{
  --nd-radius:20px;                 /* 카드 모서리 */
  --nd-ratio:1/1;                   /* 카드 비율 (예: 4/5 세로형) */
  --nd-accent:#7fd9c7;              /* "JD NATURAL DOT" 글자 · 진행 막대 색 */
  --nd-panel:#13201e;               /* 가로로 긴 사진 아래 빈 공간 색 */
  --nd-fade:.7s;                    /* 사진이 바뀌는 속도 */
}
.nd{align-self:start}
.nd-card{position:relative;display:block;width:100%;aspect-ratio:var(--nd-ratio);border-radius:var(--nd-radius);overflow:hidden;cursor:zoom-in;background:var(--nd-panel);box-shadow:0 24px 60px rgba(25,39,37,.2);isolation:isolate}
.nd-card:focus-visible{outline:3px solid #19d3b0;outline-offset:4px}
.nd-slide{position:absolute;inset:0;opacity:0;transition:opacity var(--nd-fade) ease}
.nd-slide.is-on{opacity:1}
.nd-slide img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 2.8s ease-out}
.nd-slide.is-on img{transform:scale(1.06)}
/* 가로로 긴 사진: 위에 전체 사진 + 아래 빈 공간에 광고 문구 */
.nd-wide{display:flex;flex-direction:column;background:var(--nd-panel)}
.nd-wide img{height:auto;flex:none;object-fit:contain}
.nd-wide.is-on img{transform:scale(1.02)}
.nd-extra{margin:0;padding:22px 28px 0;color:#fff;font-size:20px;font-weight:600;line-height:1.5;letter-spacing:-.4px}
.nd-extra span{color:var(--nd-accent)}
/* 진행 막대 */
.nd-card:before{content:"";position:absolute;left:0;right:0;top:0;height:90px;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(10,20,18,.38),rgba(10,20,18,0))}
.nd-bars{position:absolute;left:18px;right:18px;top:16px;display:flex;gap:4px;z-index:2}
.nd-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden;position:relative}
.nd-bars i:after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.nd-bars i.done:after{transform:scaleX(1)}
.nd-bars i.run:after{animation:ndbar var(--nd-interval,2s) linear forwards}
@keyframes ndbar{to{transform:scaleX(1)}}
.nd-zoom{position:absolute;right:16px;top:30px;width:36px;height:36px;border-radius:50%;background:rgba(10,20,18,.45);backdrop-filter:blur(6px);z-index:2}
.nd-zoom:before,.nd-zoom:after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:#fff;border-radius:1px}
.nd-zoom:after{transform:rotate(90deg)}
/* 문구 */
.nd-copy{position:absolute;left:0;right:0;bottom:0;padding:70px 28px 26px;z-index:1;color:#fff;background:linear-gradient(to top,rgba(10,20,18,.9) 0%,rgba(10,20,18,.62) 50%,rgba(10,20,18,0) 100%)}
.nd-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-family:Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:3px;color:var(--nd-accent)}
.nd-eyebrow:before{content:"";width:22px;height:1px;background:var(--nd-accent)}
.nd-count{margin-left:auto;letter-spacing:2px;color:rgba(255,255,255,.7)}
.nd-copy h3{margin:0 0 10px;font-size:26px;font-weight:600;line-height:1.35;letter-spacing:-.8px}
.nd-copy p.nd-msg{margin:0;font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.84)}
/* 확대 보기 */
.nd-dialog{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(8,14,13,.94);color:#fff;overflow:hidden}
.nd-dialog[open]{display:flex;flex-direction:column;align-items:center;justify-content:center}
.nd-dialog::backdrop{background:transparent}
.nd-dialog figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
#nd-big{display:block;max-width:86vw;max-height:80vh;width:auto;height:auto;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5);user-select:none;-webkit-user-drag:none}
.nd-dialog figcaption{font-family:Arial,sans-serif;font-size:12px;letter-spacing:3px;color:rgba(255,255,255,.7)}
.nd-dialog figcaption b{color:var(--nd-accent);font-weight:600;margin-right:10px}
.nd-nav{position:absolute;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:52px;cursor:pointer}
.nd-nav:hover{background:rgba(255,255,255,.24)}
.nd-prev{left:22px}.nd-next{right:22px}
.nd-close{position:absolute;top:18px;right:22px;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:48px;cursor:pointer}
.nd-close:hover{background:rgba(255,255,255,.24)}
@media(max-width:640px){.nd{max-width:100%}.nd-copy{padding:56px 20px 20px}.nd-copy h3{font-size:21px}.nd-copy p.nd-msg{font-size:13px}.nd-extra{font-size:16px;padding:16px 20px 0}.nd-nav{width:42px;height:42px;margin-top:-21px;line-height:42px;font-size:22px}.nd-prev{left:8px}.nd-next{right:8px}#nd-big{max-width:94vw;max-height:72vh}}
@media(prefers-reduced-motion:reduce){.nd-slide img,.nd-slide.is-on img{transform:none;transition:none}}