/* 10-13 사장님 지시: 캠페인 상세(내 캠페인에서 줄을 눌러 들어오는 화면)를 설명서(naran-crew-SPEC.md 4절)대로.
   구성은 설명서 그대로 — 히어로 → 진행 바 4칸 → 접이식 카드 4장(내 정보·배송·캠페인 안내·내 콘텐츠).
   색·글꼴은 나란크루 기존 화면(어두운 갈색)을 따른다. 되돌리기 = public/c/campaign-detail.js 와 이 파일을 지우고
   lib/canvas.ts 의 campaign-detail 줄을 뺀다. */

.nc-cd{max-width:900px;margin:0 auto;padding:clamp(24px,4vw,44px) 3.5vw clamp(64px,8vw,110px);display:flex;flex-direction:column;gap:14px}

/* ── 히어로 ── */
.nc-cd-hero{position:relative;overflow:hidden;border-radius:18px;padding:clamp(24px,3.4vw,34px);
  background:radial-gradient(130% 100% at 6% 104%, rgba(243,122,101,.26) 0%, rgba(243,122,101,0) 60%),
             radial-gradient(110% 90% at 100% -6%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 55%), rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.28)}
.nc-cd-eye{font-size:13px;font-weight:700;letter-spacing:.02em;color:#f37a65;margin-bottom:8px}
.nc-cd-name{margin:0 0 8px;font-family:var(--font-display);font-weight:400;font-size:clamp(30px,4.2vw,52px);line-height:1.06;letter-spacing:-0.03em}
.nc-cd-sub{font-size:15px;line-height:1.45;color:rgba(255,255,255,.7)}
/* 10-19 제품 별명(aka “LipJam”) 강조 · 제품 특징 목록 */
.nc-cd-aka{white-space:nowrap;font-size:.8em;color:rgba(255,255,255,.7)}
.nc-cd-aka b{font-weight:800;font-size:1.25em;color:#f37a65}
.nc-cd-name .nc-cd-aka{display:inline-block}
/* 10-19 마감일: 날짜 · 남은 날을 다르게 */
.nc-cd-date{font-weight:700;color:#fff}
.nc-cd-left{display:inline-block;vertical-align:middle;margin-left:4px;padding:1px 9px;border-radius:999px;font-size:.85em;font-weight:700;background:rgba(243,122,101,.18);color:#f37a65}
.nc-cd-left.late{background:rgba(255,90,90,.18);color:#ff8a8a}
.nc-cd-feat{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}

/* ── 진행 바 ── */
.nc-cd-track{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:28px 16px 20px}
.nc-cd-trow{display:flex;align-items:flex-start}
.nc-cd-node{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;min-width:0}
.nc-cd-line{position:absolute;top:16px;height:3px;left:50%;width:100%;z-index:0;border-radius:3px}
.nc-cd-line.solid{background:#aadcbf}
.nc-cd-line.dash{background:repeating-linear-gradient(90deg,rgba(255,255,255,.26) 0 5px,transparent 5px 11px)}
.nc-cd-dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;position:relative;z-index:1;font-size:14px;font-weight:800}
.nc-cd-dot.done{background:#aadcbf;color:#1a1410;box-shadow:0 0 0 5px rgba(170,220,191,.16)}
.nc-cd-dot.now{background:#2b201a;color:#f37a65;border:3px solid #f37a65;box-shadow:0 0 0 5px rgba(243,122,101,.18);animation:nc-cd-pz 2s ease-in-out infinite}
.nc-cd-dot.todo{background:transparent;color:rgba(255,255,255,.34);border:2.5px solid rgba(255,255,255,.2)}
@keyframes nc-cd-pz{0%,100%{box-shadow:0 0 0 5px rgba(243,122,101,.18)}50%{box-shadow:0 0 0 10px rgba(243,122,101,.1)}}
@media (prefers-reduced-motion: reduce){.nc-cd-dot.now{animation:none}}
.nc-cd-lab{font-size:13px;font-weight:700;margin-top:10px;text-align:center}
.nc-cd-lab.done{color:#aadcbf}
.nc-cd-lab.now{color:#fff}
.nc-cd-lab.todo{color:rgba(255,255,255,.44)}
.nc-cd-tsub{font-size:12px;color:rgba(255,255,255,.52);margin-top:3px;text-align:center}

/* ── 접이식 카드 ── */
.nc-cd-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:18px;overflow:hidden}
.nc-cd-head{width:100%;display:flex;align-items:center;gap:13px;padding:19px 22px;text-align:left;background:none;border:none;color:#fff;cursor:pointer;font:inherit}
.nc-cd-head:hover{background:rgba(255,255,255,.05)}
.nc-cd-ico{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;font-size:16px;flex:none;background:rgba(255,255,255,.09)}
.nc-cd-ico.ok{background:rgba(170,220,191,.2)}
.nc-cd-ttl{flex:1;min-width:0;display:block}
.nc-cd-t{display:block;font-size:16px;font-weight:600}
.nc-cd-s{display:block;font-size:13.5px;color:rgba(255,255,255,.6);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-cd-chev{font-size:12px;color:rgba(255,255,255,.5);flex:none;transition:transform .2s;font-weight:800}
.nc-cd-head.open .nc-cd-chev{transform:rotate(180deg)}
.nc-cd-body{display:none;padding:0 22px 22px}
.nc-cd-body.open{display:block}

.nc-cd-row{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);display:flex;gap:14px;align-items:flex-start}
.nc-cd-row:last-child{border-bottom:none}
.nc-cd-k{font-size:13px;color:rgba(255,255,255,.56);min-width:124px;padding-top:1px;font-weight:500;flex:none}
.nc-cd-v{font-size:15px;flex:1;word-break:break-word;line-height:1.5}
.nc-cd-v a{color:#f9a898}

.nc-cd-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:4px 11px;border-radius:999px}
.nc-cd-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.nc-cd-chip.ok{background:rgba(170,220,191,.18);color:#aadcbf}
.nc-cd-chip.warn{background:rgba(243,122,101,.18);color:#f9a898}

/* ── 내 콘텐츠 ── */
.nc-cd-slot{background:rgba(255,255,255,.05);border:2px dashed rgba(255,255,255,.26);border-radius:14px;padding:16px 18px;margin-bottom:10px}
.nc-cd-slot.filled{border-style:solid;border-color:rgba(170,220,191,.5);background:rgba(170,220,191,.08)}
.nc-cd-slot-h{font-size:12px;font-weight:700;color:rgba(255,255,255,.6);margin-bottom:9px;text-transform:uppercase;letter-spacing:.1em}
.nc-cd-wrap{display:flex;gap:8px;flex-wrap:wrap}
.nc-cd-in{flex:1;min-width:180px;padding:11px 14px;border:1px solid rgba(255,255,255,.26);border-radius:10px;font-size:15px;outline:none;background:rgba(0,0,0,.18);color:#fff}
.nc-cd-in:focus{border-color:#f9a898}
.nc-cd-save{padding:11px 18px;background:#fff;color:#1a1410;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.nc-cd-link{font-size:14.5px;color:#f9a898;word-break:break-all}
.nc-cd-add{font-size:14px;color:rgba(255,255,255,.7);padding:11px;border:1px dashed rgba(255,255,255,.26);border-radius:10px;width:100%;margin-bottom:10px;background:none;cursor:pointer}
.nc-cd-add:hover{border-color:#f9a898;color:#fff}
.nc-cd-sub-btn{width:100%;padding:14px;background:#fff;color:#1a1410;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;margin-top:4px}
.nc-cd-note{background:rgba(255,255,255,.05);border-left:3px solid #aadcbf;border-radius:10px;padding:14px 16px;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.78);margin-top:12px}
.nc-cd-note b{color:#fff}
.nc-cd-msg{display:block;margin-top:10px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.56)}

/* ── 돌아가기 ── */
.nc-cd-back{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:14px;font-weight:600;text-decoration:none}
.nc-cd-back:hover{background:rgba(255,255,255,.12);color:#fff}

@media(max-width:640px){
  .nc-cd{padding-left:16px;padding-right:16px}
  .nc-cd-head{padding:17px 18px}
  .nc-cd-body{padding:0 18px 20px}
  .nc-cd-row{flex-direction:column;gap:4px}
  .nc-cd-k{min-width:auto}
  .nc-cd-tsub{display:none}
}

/* 10-13 추가: 올린 게시물 아래의 스파크 코드 · 원본 파일(구글 드라이브) 주소 칸 */
.nc-cd-fields{display:grid;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}
.nc-cd-f{display:flex;flex-direction:column;gap:6px}
.nc-cd-f > span{font-size:13px;font-weight:600;color:rgba(255,255,255,.72)}
.nc-cd-f em{font-style:normal;font-weight:400;color:rgba(255,255,255,.45)}
.nc-cd-slot.filled .nc-cd-in{background:rgba(0,0,0,.22)}
@media(min-width:720px){.nc-cd-fields{grid-template-columns:1fr 1fr;gap:12px 16px}}

/* ── 10-18 제품 사진 · 브리프 줄바꿈 · 제품 리뷰 ── */
.nc-cd-gal{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.nc-cd-gal img{flex:none;width:min(78%,420px);aspect-ratio:16/9;object-fit:cover;border-radius:14px;scroll-snap-align:start;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05)}
.nc-cd-pre{white-space:pre-line}
.nc-cd-ta{display:block;box-sizing:border-box;width:100%;min-height:120px;resize:vertical;font:inherit;line-height:1.5;margin:8px 0 10px}
.nc-cd-opt{margin:0 0 12px}
.nc-cd-rates{margin-bottom:14px}
.nc-cd-rate{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.nc-cd-rate:last-child{border-bottom:none}
.nc-cd-rate-n{font-size:15px}
.nc-cd-stars{display:flex;gap:2px;flex:none}
.nc-cd-star{background:none;border:none;cursor:pointer;font-size:24px;line-height:1;padding:4px;color:rgba(255,255,255,.22)}
.nc-cd-star.on{color:#f6c46b}
.nc-cd-star:hover{color:#f9d48f}
.nc-cd-main{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;background:#f37a65;color:#1a1410;white-space:nowrap}
.nc-cd-main b{font-weight:800}
.nc-cd-main small{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.nc-cd-main-s{display:inline-block;vertical-align:middle;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#f37a65;color:#1a1410}
.nc-cd-copy{margin-left:8px;padding:3px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;vertical-align:middle}
.nc-cd-copy:hover{border-color:#f9a898}
.nc-cd-copy.ok{border-color:#aadcbf;color:#aadcbf}
.nc-cd-recv{margin-top:16px;padding:16px 18px;border-radius:14px;background:rgba(243,122,101,.1);border:1px solid rgba(243,122,101,.3)}
.nc-cd-recv-q{display:block;font-size:15px;font-weight:600;margin-bottom:10px}

/* 10-18: 새로고침 때 옛 소개 화면이 잠깐 비치던 문제 — 보일 화면이 정해질 때까지 가린다(lib/canvas.ts 의 nc-cd-wait). */
html.nc-cd-wait section[data-screen-label="캠페인 상세"],
html.nc-cd-wait section[data-screen-label="캠페인 상세"] + section{visibility:hidden !important}

/* ── 2026-10-28 사장님 확정 6번(시안 3·4): 캠페인에 선정된 뒤 받는 배송 주소 블록 ──
   주소가 없으면 「Where should we send it?」 + 입력칸(시안 3), 있으면 「Is this still the right address?」(시안 4).
   되돌리기 = 이 묶음과 public/c/campaign-detail.js 의 shipBlock()·addrForm() 을 지운다. */
.nc-cd-ship-ask{padding:19px 22px 22px;border-color:rgba(243,122,101,.34);
  background:radial-gradient(120% 100% at 0% 0%, rgba(243,122,101,.12) 0%, rgba(243,122,101,0) 60%), rgba(255,255,255,.05)}
.nc-cd-ship-h{display:flex;align-items:center;gap:13px;margin-bottom:4px}
.nc-cd-ship-h .nc-cd-ico{background:rgba(243,122,101,.2)}
.nc-cd-ship-h .nc-cd-s{color:#f9a898;white-space:normal}
.nc-cd-ship-p{margin:12px 0 4px;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.78)}
.nc-cd-ship-form{margin-top:14px}
.nc-cd-af-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px 18px}
.nc-cd-af .nc-cd-in{width:100%;min-width:0}
.nc-cd-af select.nc-cd-in{appearance:none}
.nc-cd-af select.nc-cd-in option{color:#1a1410}
.nc-cd-ship-save{margin-top:16px}
.nc-cd-ship-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.nc-cd-ship-btns .nc-cd-sub-btn{flex:1 1 200px;width:auto;margin-top:0}
.nc-cd-ship-alt{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.28)}