/* 와우씨씨엠 리뉴얼 · 후원 페이지 · 정기후원 신청서 · 신청 관리
 * renew.css 다음에 불러옵니다. 주황 포인트, 각진 모서리
 */
.dn{--dn-brand:#ef5a22;--dn-brand-dk:#d4481a;--dn-soft:#fff1e9;--dn-ink:#1f2328;--dn-sub:#555b63;--dn-mute:#9aa0a7;--dn-line:#e5e7eb;--dn-band:#f7f5f2}
.dn h1,.dn h2,.dn h3{letter-spacing:-.03em;word-break:keep-all}

/* 버튼 */
.dn-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:54px;padding:0 28px;border:2px solid transparent;font-size:17px;font-weight:800;white-space:nowrap;cursor:pointer;border-radius:0;transition:background .2s,color .2s,border-color .2s}
.dn-btn-main{background:var(--dn-brand);color:#fff!important}
.dn-btn-main:hover{background:var(--dn-brand-dk)}
.dn-btn-ghost{border-color:rgba(255,255,255,.85);color:#fff!important}
.dn-btn-ghost:hover{background:#fff;color:var(--dn-ink)!important}
.dn-btn-line{border-color:var(--dn-ink);background:#fff;color:var(--dn-ink)!important}
.dn-btn-line:hover{border-color:var(--dn-brand);color:var(--dn-brand)!important}
.dn-btn-white{background:#fff;color:var(--dn-brand)!important}
.dn-btn-white:hover{background:var(--dn-ink);color:#fff!important}
.dn-btn:disabled{opacity:.55;cursor:default}
.dn-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.dn-cta-center{justify-content:center}
.dn-link{display:inline-block;margin-top:10px;font-size:14px;font-weight:700;color:var(--dn-brand)!important}
.dn-note{margin:14px 0 0;font-size:13.5px;color:var(--dn-mute);text-align:center}

/* 1. 첫 화면 */
.dn-hero{position:relative;color:#fff;background:#2b2320 var(--dn-hero) center/cover no-repeat;padding:120px 0 110px}
.dn-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,14,10,.86) 0%,rgba(20,14,10,.6) 50%,rgba(20,14,10,.25) 100%)}
.dn-hero .in{position:relative}
.dn-hero-plain{background:radial-gradient(circle at 85% 20%,rgba(239,90,34,.55),transparent 45%),linear-gradient(120deg,#2b2320 0%,#4a2a1c 60%,#7a3415 100%)}
.dn-hero-plain::before{background:repeating-radial-gradient(circle at 85% 30%,rgba(255,255,255,.06) 0 2px,transparent 2px 22px)}
.dn-eyebrow{display:inline-block;margin:0 0 18px;padding:5px 12px;background:var(--dn-brand);font-size:14px;font-weight:800;letter-spacing:.02em}
.dn-hero h1{margin:0;font-size:clamp(30px,4.4vw,52px);font-weight:800;line-height:1.25}
.dn-lead{max-width:560px;margin:20px 0 0;font-size:18px;line-height:1.7;color:#ece7e3}

/* 2. 숫자 */
.dn-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:-48px;position:relative;background:#fff;box-shadow:0 14px 40px rgba(0,0,0,.08);border-top:4px solid var(--dn-brand)}
.dn-stat{padding:28px 20px;text-align:center;border-left:1px solid var(--dn-line)}
.dn-stat:first-child{border-left:0}
.dn-stat b{display:block;font-size:44px;font-weight:800;line-height:1;color:var(--dn-ink);font-variant-numeric:tabular-nums}
.dn-stat b small{margin-left:3px;font-size:18px;font-weight:700;color:var(--dn-sub)}
.dn-stat span{display:block;margin-top:10px;font-size:14.5px;color:var(--dn-sub)}
.dn-goal{margin:22px auto 0;text-align:center}
.dn-goal span{display:inline-block;padding:8px 18px;background:var(--dn-soft);color:var(--dn-brand-dk);font-size:15px;font-weight:800}

/* 공통 구역 */
.dn-sec{padding:80px 20px 0}
.dn-h2{margin:0;font-size:clamp(24px,3vw,34px);font-weight:800;text-align:center}
.dn-sub{margin:10px 0 0;text-align:center;font-size:16px;color:var(--dn-sub)}

/* 3. 하는 일 */
.dn-uses{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.dn-use{padding:30px 24px;background:var(--dn-band);text-align:center}
.dn-use i{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 16px;border-radius:50%;background:#fff;font-size:34px;font-style:normal;box-shadow:0 4px 14px rgba(0,0,0,.06)}
.dn-use b{display:block;font-size:18px;font-weight:800}
.dn-use span{display:block;margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--dn-sub);word-break:keep-all}

/* 4. 금액 */
.dn-pick{margin-top:80px;padding:70px 0;background:var(--dn-band)}
.dn-amounts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:30px 0 0}
.dn-amounts button{min-width:120px;height:58px;padding:0 20px;border:2px solid var(--dn-line);background:#fff;font:inherit;font-size:19px;font-weight:800;color:var(--dn-ink);cursor:pointer;border-radius:0}
.dn-amounts button:hover{border-color:var(--dn-brand)}
.dn-amounts button.on{border-color:var(--dn-brand);background:var(--dn-brand);color:#fff}
.dn-other input{width:180px;height:58px;padding:0 14px;border:2px solid var(--dn-line);font:inherit;font-size:17px;font-weight:700;border-radius:0}
.dn-other input:focus{outline:0;border-color:var(--dn-brand)}
.dn-impact{margin:22px 0 0;text-align:center;font-size:18px;font-weight:700;color:var(--dn-brand-dk);min-height:1.6em;word-break:keep-all}

/* 5. 방법 */
.dn-ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:36px}
.dn-way{padding:28px;border:1px solid var(--dn-line);background:#fff}
.dn-way-main{border:2px solid var(--dn-brand);background:var(--dn-soft)}
.dn-way h3{margin:0 0 10px;font-size:20px;font-weight:800}
.dn-way h3 small{margin-left:6px;font-size:13.5px;font-weight:700;color:var(--dn-brand)}
.dn-way p{margin:0 0 16px;font-size:15px;line-height:1.65;color:var(--dn-sub)}
.dn-way .dn-btn{height:48px;font-size:16px}
.dn-accts{margin:0;padding:0;list-style:none}
.dn-accts li{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"bank num copy" "bank who copy";column-gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--dn-line)}
.dn-bank{grid-area:bank;padding:4px 8px;background:var(--dn-band);font-size:13px;font-weight:800;color:var(--dn-sub)}
.dn-accts b{grid-area:num;font-size:19px;font-weight:800;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.dn-accts small{grid-area:who;font-size:13px;color:var(--dn-mute)}
.dn-copy{grid-area:copy;height:36px;padding:0 14px;border:1px solid var(--dn-ink);background:#fff;font:inherit;font-size:14px;font-weight:800;cursor:pointer;border-radius:0}
.dn-copy:hover{background:var(--dn-ink);color:#fff}
.dn-tip{margin:12px 0 0!important;font-size:13.5px!important;color:var(--dn-mute)!important}
.dn-tip a{color:var(--dn-brand)!important;font-weight:700}

/* 6. 이야기 */
.dn-stories{margin-top:80px;padding:70px 0;background:#2b2320;color:#fff}
.dn-stories .dn-h2{color:#fff}
.dn-sample{display:inline-block;margin-left:8px;padding:2px 8px;background:#fff3;font-size:13px;font-style:normal;font-weight:700;vertical-align:middle}
.dn-story-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.dn-story{position:relative;margin:0;padding:34px 26px 26px;background:rgba(255,255,255,.07);border-top:3px solid var(--dn-brand)}
.dn-story::before{content:"“";position:absolute;left:20px;top:-6px;font-size:64px;line-height:1;color:var(--dn-brand);font-family:Georgia,serif}
.dn-story p{margin:0;font-size:16px;line-height:1.75;color:#f1ece8;word-break:keep-all}
.dn-story cite{display:block;margin-top:16px;font-size:14px;font-style:normal;color:#c9bfb8}
.dn-video{max-width:760px;margin:36px auto 0;aspect-ratio:16/9}
.dn-video iframe{width:100%;height:100%;border:0}

/* 8. 믿음 */
.dn-trust ul{max-width:780px;margin:30px auto 0;padding:0;list-style:none}
.dn-trust li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--dn-line);font-size:15.5px;line-height:1.6;color:var(--dn-sub)}
.dn-trust li b{flex:none;width:110px;color:var(--dn-ink)}
.dn-trust a{color:var(--dn-brand)!important;font-weight:700}

/* 9. 질문 */
.dn-faq{max-width:780px;margin:30px auto 0}
.dn-faq details{border-bottom:1px solid var(--dn-line)}
.dn-faq summary{position:relative;padding:18px 40px 18px 0;font-size:16.5px;font-weight:700;cursor:pointer;list-style:none}
.dn-faq summary::-webkit-details-marker{display:none}
.dn-faq summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:24px;font-weight:400;color:var(--dn-brand)}
.dn-faq details[open] summary::after{content:"−"}
.dn-faq p{margin:0 0 18px;font-size:15px;line-height:1.7;color:var(--dn-sub)}

/* 10. 마지막 */
.dn-final{margin-top:90px;padding:70px 0;background:var(--dn-brand);color:#fff;text-align:center}
.dn-final h2{margin:0;font-size:clamp(24px,3vw,34px);font-weight:800}
.dn-final p{margin:10px 0 26px;font-size:17px;color:#ffe6da}

.dn-sticky{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:#fff;box-shadow:0 -6px 20px rgba(0,0,0,.12);transform:translateY(110%);transition:transform .25s}
.dn-sticky.on{transform:none}
.dn-sticky .dn-btn{flex:1;height:50px;font-size:16px;padding:0 10px}
.dn-btn-ghost2{border-color:var(--dn-ink);color:var(--dn-ink)!important;background:#fff}
.dn-toast{position:fixed;left:50%;bottom:90px;z-index:200;transform:translate(-50%,16px);max-width:calc(100% - 32px);padding:12px 18px;background:#1f2328;color:#fff;font-size:14.5px;font-weight:600;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;text-align:center}
.dn-toast.on{opacity:1;transform:translate(-50%,0)}

/* ===== 신청서 ===== */
.dn-apply{padding:40px 0 80px}
.dn-apply-in{max-width:760px}
.dn-crumb{margin:0 0 14px;font-size:14px}
.dn-crumb a{color:var(--dn-sub)!important}
.dn-apply-h{margin:0;font-size:32px;font-weight:800}
.dn-apply-h small{margin-left:8px;font-size:16px;font-weight:700;color:var(--dn-brand)}
.dn-apply-lead{margin:10px 0 0;font-size:15.5px;line-height:1.7;color:var(--dn-sub)}
.dn-apply-lead a{color:var(--dn-brand)!important;font-weight:700}
.dn-form fieldset{margin:28px 0 0;padding:26px 26px 22px;border:1px solid var(--dn-line);background:#fff}
.dn-form legend{display:flex;align-items:center;gap:10px;padding:0 8px;font-size:19px;font-weight:800}
.dn-form legend span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--dn-brand);color:#fff;font-size:15px}
.dn-req{font-style:normal;font-size:12.5px;color:var(--dn-brand)}
.dn-form .dn-amounts{justify-content:flex-start;margin:6px 0 18px}
.dn-form .dn-amounts button{min-width:100px;height:50px;font-size:17px}
.dn-form .dn-other input{height:50px;width:160px}
.dn-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dn-f{display:block;margin-bottom:14px}
.dn-f > span{display:block;margin-bottom:6px;font-size:14px;font-weight:700}
.dn-f em{font-style:normal;font-size:12px;color:var(--dn-brand);margin-left:3px}
.dn-f input[type=text],.dn-f input[type=tel],.dn-f input[type=email],.dn-f select,.dn-f textarea{display:block;width:100%;height:48px;padding:0 12px;border:1px solid #d5d9de;background:#fff;font:inherit;font-size:16px;color:var(--dn-ink);border-radius:0}
.dn-f textarea{height:auto;padding:10px 12px;resize:vertical}
.dn-f input:focus,.dn-f select:focus,.dn-f textarea:focus{outline:2px solid var(--dn-brand);outline-offset:-1px;border-color:var(--dn-brand)}
.dn-f input[readonly]{background:var(--dn-band);color:var(--dn-sub)}
.dn-f-check{display:flex;align-items:flex-start;gap:8px;font-size:15px;font-weight:600;cursor:pointer}
.dn-f-check input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--dn-brand)}
.dn-f-check small{display:block;margin-top:2px;font-size:12.5px;font-weight:500;color:var(--dn-mute)}
.dn-row2 > .dn-f-check{align-self:end;margin-bottom:24px}
.dn-same{margin-bottom:14px}
.dn-agree > .dn-f-check{padding:12px 14px;background:var(--dn-soft);font-size:16px}
.dn-agree details{border-bottom:1px solid var(--dn-line)}
.dn-agree summary{padding:12px 30px 12px 14px;position:relative;cursor:pointer;list-style:none}
.dn-agree summary::-webkit-details-marker{display:none}
.dn-agree summary::after{content:"내용 보기";position:absolute;right:6px;top:14px;font-size:12.5px;color:var(--dn-mute);text-decoration:underline}
.dn-agree details[open] summary::after{content:"접기"}
.dn-agree p{margin:0 14px 14px;padding:12px 14px;background:var(--dn-band);font-size:13.5px;line-height:1.7;color:var(--dn-sub)}
.dn-hint{margin:0 0 10px;font-size:14px;color:var(--dn-sub)}
.dn-sign{position:relative;height:200px;margin-bottom:16px;border:2px dashed #c9ced4;background:#fcfcfd}
.dn-sign canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.dn-sign-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:18px;color:#c4c9cf;pointer-events:none}
.dn-sign button{position:absolute;right:8px;top:8px;height:32px;padding:0 12px;border:1px solid var(--dn-line);background:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;border-radius:0}
.dn-err{margin:20px 0 0;padding:12px 14px;background:#fdecea;color:#c4321f;font-size:15px;font-weight:700}
.dn-submit{width:100%;margin-top:24px;height:60px;font-size:19px}
.dn-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dn-done{padding:30px 0;text-align:center}
.dn-done-ic{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 18px;border-radius:50%;background:var(--dn-soft);color:var(--dn-brand);font-size:40px}
.dn-done h2{margin:0;font-size:28px;font-weight:800}
.dn-done p{margin:12px 0 0;font-size:16px;line-height:1.7;color:var(--dn-sub)}
.dn-done-no b{color:var(--dn-brand);font-size:20px}
.dn-done-img{display:block;max-width:420px;width:100%;margin:26px auto 0;border:1px solid var(--dn-line);box-shadow:0 8px 24px rgba(0,0,0,.08)}

/* ===== 신청 관리 ===== */
.dn-adm-body{margin:0;background:#f4f5f7;font-family:"Pretendard Variable",Pretendard,-apple-system,"Malgun Gothic",sans-serif;color:#1f2328}
.dn-adm{max-width:1100px;margin:0 auto;padding:28px 16px 60px}
.dn-adm-hd h1{margin:0;font-size:26px}
.dn-adm-hd p{margin:6px 0 14px;font-size:14px;color:#555b63}
.dn-adm-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:18px}
.dn-adm-tabs a{padding:8px 14px;background:#fff;border:1px solid #e5e7eb;font-size:14px;font-weight:700;color:#555b63;text-decoration:none}
.dn-adm-tabs a.on{background:#1f2328;border-color:#1f2328;color:#fff}
.dn-adm-tabs .dn-adm-out{margin-left:auto;color:#ef5a22}
.dn-adm-empty{padding:60px 0;text-align:center;color:#555b63}
.dn-adm-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;margin-bottom:12px;padding:16px;background:#fff;border-left:4px solid #ef5a22}
.dn-adm-row.st-done{border-left-color:#1f9d55;opacity:.85}
.dn-adm-row.st-hold{border-left-color:#e0a100}
.dn-adm-row.st-stop{border-left-color:#9aa0a7;opacity:.7}
.dn-adm-thumb img{display:block;width:150px;border:1px solid #e5e7eb}
.dn-adm-info p{margin:0 0 6px;font-size:14.5px}
.dn-adm-top b{font-size:17px}
.dn-adm-top small{color:#9aa0a7}
.dn-adm-st{padding:1px 8px;background:#fff1e9;color:#d4481a;font-size:12.5px;font-weight:800}
.st-done .dn-adm-st{background:#e9f7ef;color:#17663f}
.dn-adm-info em{font-style:normal;color:#d4481a;font-weight:700}
.dn-adm-msg{color:#555b63}
.dn-adm-form{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px}
.dn-adm-form select,.dn-adm-form input{height:34px;padding:0 8px;border:1px solid #d5d9de;font:inherit;font-size:14px}
.dn-adm-form input{flex:1;min-width:180px}
.dn-adm-form button,.dn-adm-form a{height:34px;padding:0 12px;border:1px solid #1f2328;background:#fff;font:inherit;font-size:13.5px;font-weight:700;color:#1f2328;cursor:pointer;display:inline-flex;align-items:center;text-decoration:none}
.dn-adm-form .is-danger{border-color:#d93a2b;color:#d93a2b}

/* 좁은 화면 */
@media (max-width:900px){
  .dn-stats{grid-template-columns:repeat(2,1fr)}
  .dn-stat:nth-child(3){border-left:0}
  .dn-stat:nth-child(n+3){border-top:1px solid var(--dn-line)}
  .dn-uses{grid-template-columns:repeat(2,1fr)}
  .dn-story-list{grid-template-columns:1fr}
}
@media (max-width:767px){
  .dn-hero{padding:70px 0 90px}
  .dn-lead{font-size:16px}
  .dn-cta .dn-btn{flex:1 1 100%}
  .dn-stats{margin-left:16px;margin-right:16px}
  .dn-stat{padding:20px 10px}
  .dn-stat b{font-size:34px}
  .dn-sec{padding-top:60px}
  .dn-uses{gap:10px}
  .dn-use{padding:22px 14px}
  .dn-use i{width:56px;height:56px;font-size:26px}
  .dn-pick,.dn-stories{margin-top:60px;padding:50px 0}
  .dn-amounts button{min-width:calc(50% - 5px);flex:1 1 calc(50% - 5px)}
  .dn-other{flex:1 1 100%}
  .dn-other input{width:100%}
  .dn-ways{grid-template-columns:1fr}
  .dn-way{padding:22px 18px}
  .dn-accts b{font-size:17px}
  .dn-trust li{flex-direction:column;gap:2px}
  .dn-final{margin-top:60px}
  .dn-sticky{display:flex}
  .dn-page .mplayer{display:none!important}
  .dn-apply{padding:24px 0 60px}
  .dn-apply-h{font-size:25px}
  .dn-form fieldset{padding:20px 16px 16px}
  .dn-row2{grid-template-columns:1fr;gap:0}
  .dn-row2 > .dn-f-check{margin-bottom:14px}
  .dn-form .dn-amounts button{min-width:calc(50% - 5px)}
  .dn-form .dn-other input{width:100%}
  .dn-sign{height:180px}
  .dn-adm-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ .dn-sticky,.dn-toast{transition:none} }