/* v2 popup-notice / popup-done: production components only. */

.dr-dim{position:fixed;inset:0;z-index:100;background:#07080ab8;backdrop-filter:blur(2px);display:flex;align-items:safe center;justify-content:center;padding:24px;overflow:auto;animation:dr-fade .35s both}
@keyframes dr-fade{from{opacity:0}}
@keyframes dr-notice-rise{from{opacity:0;transform:translateY(18px)}}
.dr-pops{display:flex;gap:16px;align-items:stretch;justify-content:center}
.dr-overlay[data-design=a] .dr-pop .dr-body{flex:1}
.dr-pop{position:relative;background:var(--night-2);color:var(--text);border-top:2px solid var(--tungsten);box-shadow:0 30px 80px #000a;animation:dr-notice-rise .45s var(--ease) both;display:flex;flex-direction:column}
.dr-pop figure{position:relative;margin:0;overflow:hidden;background:var(--black)}
.dr-pop figure img{display:block;width:100%;height:100%;object-fit:cover}
.dr-pop .dr-cap{position:absolute;right:10px;bottom:8px;font-size:11px;color:#fffa;text-shadow:0 1px 4px #000}
.dr-pop .dr-count{position:absolute;left:12px;top:12px;font-size:12px;padding:3px 9px;background:#07080ab0;border:1px solid #ffffff30;letter-spacing:.05em}
.dr-pops{--u:1.2;--pw:480}
.dr-pop .dr-body{padding:calc(28px*var(--u)) calc(28px*var(--u)) calc(26px*var(--u))}
.dr-pop .dr-eb{color:var(--tungsten);font-size:calc(13px*var(--u));letter-spacing:.13em;margin-bottom:calc(14px*var(--u))}
.dr-pop h2{font:800 calc(28px*var(--u))/1.42 Myeongjo,serif;letter-spacing:-.055em}
.dr-pop h2 em{font-size:1.25em}
.dr-pop p.dr-t{color:#cfd2d8;font-size:calc(15px*var(--u));line-height:1.75;margin-top:calc(14px*var(--u))}
.dr-pop dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:calc(16px*var(--u)) 0 0;font-size:calc(14px*var(--u))}
.dr-pop .dr-go{min-height:calc(52px*var(--u));font-size:calc(15px*var(--u))}
.dr-pop .dr-foot{font-size:calc(13px*var(--u))!important}
.dr-pop .dr-foot button{padding:calc(14px*var(--u)) calc(18px*var(--u))!important}
.dr-pop dt{color:var(--muted)}.dr-pop dd{margin:0}
.dr-pop dd small{color:var(--tungsten);font-size:11px;border:1px solid #f0a33c66;padding:0 5px;margin-left:6px}
.dr-pop .dr-go{width:100%;margin-top:22px}
.dr-pop .dr-foot{display:grid;grid-template-columns:1fr auto;border-top:1px solid #ffffff1a;background:var(--black);font-size:13px}
.dr-pop .dr-foot button{background:none;border:0;padding:14px 18px;color:#c9ccd2;text-align:left}
.dr-pop .dr-foot button:hover{color:#fff}
.dr-pop .dr-foot .dr-close{border-left:1px solid #ffffff1a;text-align:center;display:flex;gap:8px;align-items:center}
.dr-pop .dr-foot .dr-close i{font-style:normal;font-size:18px;line-height:1}
.dr-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 28px 18px}
.dr-nav .dr-dots{display:flex;gap:6px}.dr-nav .dr-dots i{width:18px;height:2px;background:#ffffff35}.dr-nav .dr-dots i.dr-on{background:var(--tungsten)}
.dr-nav button{width:34px;height:34px;border:1px solid #ffffff38;background:none;font-size:15px}
.dr-nav button:hover{border-color:var(--tungsten)}

/* A 포스터형 */
.dr-overlay[data-design=a] .dr-pop{width:calc(var(--pw)*1px)}
.dr-overlay[data-design=a] .dr-pop figure{height:calc(250px*var(--u))}
/* B 와이드형: 왼쪽 사진, 오른쪽 글, 위아래 레터박스 느낌 */
.dr-overlay[data-design=b] .dr-pop{width:calc(var(--pw)*1px);display:grid;grid-template-columns:1.05fr 1fr;grid-template-rows:1fr auto auto;border-top:0}
.dr-overlay[data-design=b] .dr-pop:before,.dr-overlay[data-design=b] .dr-pop:after{content:"";position:absolute;left:0;right:0;height:10px;background:var(--black);z-index:2}
.dr-overlay[data-design=b] .dr-pop:before{top:0}.dr-overlay[data-design=b] .dr-pop:after{display:none}
.dr-overlay[data-design=b] .dr-pop figure{grid-row:1/-1;min-height:calc(440px*var(--u))}
.dr-overlay[data-design=b] .dr-pop .dr-body{padding:calc(44px*var(--u)) calc(36px*var(--u)) calc(10px*var(--u));display:flex;flex-direction:column}
.dr-overlay[data-design=b] .dr-pop h2{font-size:calc(32px*var(--u))}
.dr-overlay[data-design=b] .dr-pop .dr-go{margin-top:auto}
.dr-overlay[data-design=b] .dr-pop .dr-t+.dr-go,.dr-overlay[data-design=b] .dr-pop dl+.dr-go{margin-top:26px}
.dr-overlay[data-design=b] .dr-pop .dr-foot{grid-column:2}
.dr-overlay[data-design=b] .dr-nav{grid-column:2;padding:12px 36px 16px}
.dr-overlay[data-design=b] .dr-pop .dr-count{top:22px}

/* 여러 개: 보이는 팝업은 스크립트가 .dr-hide 로 정함 */
.dr-pops .dr-pop.dr-hide{display:none!important}
.dr-overlay[data-multi=side].dr-overlay[data-design=b] .dr-pops{flex-direction:column;align-items:center;gap:12px;transform:scale(.8);transform-origin:center}
.dr-nav,.dr-pop .dr-count{display:none}
.dr-overlay.many .dr-nav{display:flex}.dr-overlay.many .dr-pop .dr-count{display:block}
.dr-side-note{display:none}

/* 폰 */
@media(max-width:768px){
  .dr-dim{padding:20px}
  .dr-pops{--u:1!important;width:100%}
  .dr-overlay[data-design] .dr-pop{width:100%!important;display:flex!important;flex-direction:column;border-top:2px solid var(--tungsten)}
  .dr-overlay[data-design] .dr-pop:before{display:none}
  .dr-overlay[data-design] .dr-pop figure{height:190px!important;min-height:0!important}
  .dr-overlay[data-design] .dr-pop .dr-body{padding:22px 22px 18px!important}
  .dr-overlay[data-design] .dr-pop h2{font-size:24px!important}
  .dr-overlay[data-design] .dr-pop .dr-go{margin-top:18px!important;min-height:50px}
  .dr-overlay[data-design] .dr-nav{padding:0 22px 14px!important}
  /* 여러 개는 폰에서 항상 넘기기 */
  .dr-overlay[data-multi=side] .dr-pops{transform:none!important}
  /* 아래 시트 */
  .dr-overlay[data-m=sheet]{align-items:flex-end;padding:0;background:#07080a8c;backdrop-filter:none}
  .dr-overlay[data-m=sheet] .dr-pops{width:100%}
  .dr-overlay[data-m=sheet] .dr-pop{width:100%!important;max-height:78svh;overflow:auto;animation:dr-sheet .45s var(--ease) both;border-top:0;padding-bottom:env(safe-area-inset-bottom)}
  .dr-overlay[data-m=sheet] .dr-pop figure{height:160px!important}
  .dr-overlay[data-m=sheet] .dr-pop .dr-grab{display:block}
  .dr-overlay[data-m=sheet] .dr-pop .dr-foot{position:sticky;bottom:0}
}
.dr-pop .dr-grab{display:none;position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;background:#ffffffa0;border-radius:2px;z-index:3}
@keyframes dr-sheet{from{transform:translateY(100%)}}

.dr-result.dr-dim{position:fixed;inset:0;z-index:100;background:#07080ac4;display:flex;align-items:center;justify-content:center;padding:20px;animation:dr-fade .3s both}
@keyframes dr-fade{from{opacity:0}}
.dr-result{--dw:600}
.dr-done{position:relative;width:min(calc(var(--dw)*1px),100%);background:var(--paper-2);color:var(--ink);border-top:4px solid #C48A4A;box-shadow:0 30px 90px #000b;padding:calc(var(--dw)*.08px) calc(var(--dw)*.08px) calc(var(--dw)*.064px);animation:dr-rise .45s var(--ease) both;max-height:calc(100svh - 40px);overflow:auto}
@keyframes dr-rise{from{opacity:0;transform:translateY(16px) scale(.98)}}
.dr-done .dr-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border:0;background:none;font-size:24px;color:var(--ink-muted)}
.dr-mark{width:58px;height:58px;margin-bottom:22px}
.dr-mark circle{fill:none;stroke:var(--tungsten-deep);stroke-width:2}
.dr-mark path{fill:none;stroke:var(--tungsten-deep);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:dr-draw .6s .35s var(--ease) forwards}
@keyframes dr-draw{to{stroke-dashoffset:0}}
.dr-done .dr-eb{font-size:13px;letter-spacing:.12em;color:var(--tungsten-deep);margin-bottom:10px}
.dr-done h2{font:800 calc(var(--dw)*.058px)/1.4 Myeongjo,serif;letter-spacing:-.055em}
.dr-done .dr-t{font-size:calc(var(--dw)*.029px)}
.dr-mark{width:calc(var(--dw)*.11px);height:calc(var(--dw)*.11px)}
.dr-info{font-size:calc(var(--dw)*.028px)}
.dr-steps li{font-size:calc(var(--dw)*.026px)}
.dr-acts .dr-btn{min-height:calc(var(--dw)*.1px);font-size:calc(var(--dw)*.028px)}
.dr-done .dr-t{margin-top:12px;color:var(--ink-muted);line-height:1.75}
.dr-done .dr-t b{color:var(--ink)}
.dr-info{margin:22px 0 0;padding:16px 18px;background:#fff;border:1px solid var(--rule);display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:15px}
.dr-info dt{color:var(--ink-muted)}.dr-info dd{margin:0;font-weight:600}
.dr-info small{grid-column:1/-1;color:var(--ink-muted);font-size:13px;font-weight:400;margin-top:4px}
.dr-steps{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.dr-steps:before{content:"";position:absolute;top:15px;left:15px;right:30%;height:1px;background:var(--rule)}
.dr-steps li{position:relative;font-size:14px;line-height:1.5;padding-right:10px}
.dr-steps span{display:grid;place-items:center;width:31px;height:31px;border:1px solid var(--ink-muted);background:var(--paper-2);font-size:14px;margin-bottom:10px;position:relative}
.dr-steps li:first-child span{background:var(--tungsten);border-color:var(--tungsten)}
.dr-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
.dr-acts .dr-btn{min-height:52px}
.dr-done .dr-keep{margin-top:16px;font-size:12px;color:var(--ink-muted);text-align:center}
/* 실패 */
.dr-mark.dr-fail circle{stroke:var(--warn)}.dr-mark.dr-fail path{stroke:var(--warn)}
.dr-done.dr-fail .dr-eb{color:var(--warn)}
.dr-result[data-state=ok] .dr-is-fail,.dr-result[data-state=fail] .dr-is-ok{display:none!important}
@media(max-width:768px){
  .dr-done{padding:30px 22px 22px}.dr-done h2{font-size:26px}.dr-done .dr-t,.dr-info{font-size:15px}.dr-steps li{font-size:14px}.dr-acts .dr-btn{min-height:52px;font-size:15px}.dr-mark{width:58px;height:58px}
  .dr-steps{grid-template-columns:1fr;gap:12px}.dr-steps:before{top:0;bottom:0;left:15px;right:auto;width:1px;height:auto}
  .dr-steps li{display:flex;gap:14px;align-items:center}.dr-steps span{margin:0;flex-shrink:0}
  .dr-acts{grid-template-columns:1fr}
  .dr-inline .dr-done{padding:24px 20px}
}

.dr-btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:52px;padding:12px 24px;border:1px solid #ece8e180;background:transparent;font-size:15px;font-weight:600;white-space:nowrap;border-radius:0;transition:background .25s,border-color .25s}
.dr-btn:hover{border-color:var(--tungsten);background:#f0a33c15}
.dr-btn.primary{background:var(--tungsten);color:var(--black);border-color:var(--tungsten)}
.dr-btn.primary:hover{background:#ffc16a}
.dr-btn.ink{border-color:var(--ink);color:var(--ink)}
.dr-btn.ink:hover{background:#efd8b8}


.dr-overlay,.dr-result{--warn:#B4561E;z-index:200;line-height:1.6}.dr-overlay[hidden],.dr-result[hidden]{display:none!important}.dr-pop em{color:var(--tungsten);font-style:normal}.dr-pop{flex-shrink:0;max-width:calc(100vw - 48px)}.dr-overlay .dr-pops{max-width:100%;flex-wrap:wrap}.dr-inline.dr-dim{position:static;background:none;padding:0;display:block;animation:none;backdrop-filter:none}.dr-inline .dr-done{width:100%;max-height:none;box-shadow:none;border:0}.dr-inline .dr-x{display:none}.dr-pop-open .mobile-bar{visibility:hidden}.dr-pop-open{overflow:hidden}.dr-done:focus{outline:none}.dr-overlay button:focus-visible,.dr-result button:focus-visible,.dr-overlay a:focus-visible,.dr-result a:focus-visible{outline:3px solid var(--tungsten);outline-offset:3px}.dr-cost-not-waived{text-decoration:none!important}.dr-cost-not-waived:after{display:none!important}@media(max-width:768px){.dr-pop{--u:1!important;max-width:100%}.dr-overlay[data-m=sheet]{padding:0}}@media(prefers-reduced-motion:reduce){.dr-overlay *,.dr-result *,.dr-overlay,.dr-result{animation:none!important}.dr-mark path{stroke-dashoffset:0}}

.dr-pop[hidden]{display:none!important}.dr-overlay .dr-pop:only-child:not(:has(figure)){display:flex}.dr-overlay .dr-pop:not(:has(figure)){grid-template-columns:1fr}.dr-overlay .dr-pop:not(:has(figure)) .dr-foot,.dr-overlay .dr-pop:not(:has(figure)) .dr-nav{grid-column:1}.dr-inline .dr-done{padding:30px 32px}.dr-pop,.dr-done{font-family:Pretendard,sans-serif}.dr-pop button,.dr-done button{cursor:pointer}

.profit .p-legend span[data-dr-cost]::before{content:none}.dr-inline .dr-done h2{font:800 calc(var(--dw)*.058px)/1.4 Myeongjo,serif}@media(max-width:768px){.dr-inline .dr-done{padding:24px 20px}.dr-inline .dr-done h2{font-size:26px}}

.dr-eb{line-height:1.6}.dr-pop .dr-body>h2,.dr-done h2{margin:0}.dr-inline .dr-done{color:var(--ink)}

/* 창 자체에 초점이 갈 때 테두리 표시 안 함(키보드 Tab 이동 때는 버튼에 표시) */
.dr-dim:focus,.dr-dim:focus-visible{outline:none}

/* 숨긴 슬라이드는 폰에서도 숨김(display 우선순위 보강) */
.dr-overlay[data-design] .dr-pop[hidden],.dr-pop[hidden]{display:none!important}
/* 캡처 모드·움직임 줄이기에서도 체크 표시가 보이게 */
.shot .dr-mark path,.is-paused .dr-mark path{stroke-dashoffset:0!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.dr-mark path{stroke-dashoffset:0!important;animation:none!important}}
/* 폰에서는 완료 창 제목 크기를 고정(폼 자리 방식 포함) */
@media(max-width:768px){.dr-done h2{font-size:26px!important}}