/* ============================================================
   오늘의 개척(play.html) — 전용 스타일시트 (self-contained, 복권 style.css 미사용)
   톤: 토스류 — 화이트/라이트그레이 배경, 블루 단일 포인트, 굵은 타이포, 플랫, 그림자 최소.
   ============================================================ */

:root{
  --bg:#F2F4F6; --surface:#FFFFFF;
  --ink:#191F28; --muted:#6B7684; --faint:#8B95A1;
  --line:#E5E8EB; --line-soft:#F2F4F6;
  --blue:#3182F6; --blue-d:#1B64DA; --blue-soft:#EEF4FF;
  --pink:#F0436B; --pink-d:#D42A54; --pink-soft:#FFEDF2;
  --danger:#F04452;
  --ease:cubic-bezier(.2,.9,.25,1);
  --sys:'Pretendard','Pretendard Variable','Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent; margin:0; word-break:keep-all}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sys); font-size:15px; line-height:1.5; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; align-items:center;
  padding:max(20px,env(safe-area-inset-top)) 18px max(24px,env(safe-area-inset-bottom));
}
.app{width:100%; max-width:440px; flex:1; display:flex; flex-direction:column}
#stage{flex:1; display:flex; flex-direction:column}
.view{display:flex; flex-direction:column; gap:14px}
.view.solo{margin-top:auto; margin-bottom:auto}
/* 로그인 직후 화면이 "툭" 뜨지 않고 위에서부터 차례로 올라오도록 */
.view > *{animation:rise .5s var(--ease) both}
.view > *:nth-child(2){animation-delay:.07s}
.view > *:nth-child(3){animation-delay:.15s}
.view > *:nth-child(4){animation-delay:.22s}
/* 같은 화면 갱신(미션 확인 직후)은 기존 카드는 가만히, 새로 생긴 행운카드만 올라온다 */
.view.static > *{animation:none}
.view.static > .lucky-ticket{animation:rise .55s var(--ease) both}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.foot{text-align:center; color:var(--faint); font-size:12px; padding:20px 0 4px}

.top-actions{display:flex; justify-content:flex-end}
.switch-user{background:none; border:0; color:var(--faint); font-size:13px; padding:6px 2px; cursor:pointer; font-weight:500; font-family:var(--sys)}
.switch-user:active{color:var(--muted)}

.ticket{background:var(--surface); border-radius:22px; padding:28px 22px; text-align:left}
.ticket.center{text-align:center}
.ticket.center .btn{margin-left:auto; margin-right:auto}
.kicker{font-size:12.5px; font-weight:800; color:var(--blue); letter-spacing:-.01em; margin-bottom:10px}
.period-tag{display:inline-block; padding:6px 13px; border-radius:999px; background:var(--blue-soft);
  color:var(--blue-d); font-weight:700; font-size:12.5px; letter-spacing:-.01em; margin-bottom:16px}
.ticket h1{font-size:clamp(21px,6vw,25px); font-weight:800; line-height:1.36; color:var(--ink); margin-bottom:6px; letter-spacing:-.01em}
.ticket p.lead{color:var(--muted); font-size:15px; line-height:1.55; white-space:pre-line; font-weight:400}
.emoji-xl{font-size:38px; margin:2px 0 14px; display:block}

/* 로그인 화면 — 줄바꿈 위치를 직접 정하고(.ln 한 줄씩), 글자 크기는 화면 폭에 맞춰 줄여서 어색하게 한두 글자가 밀리지 않게 한다 */
.login-ticket{padding:24px 22px 22px}
.lg-brand{display:flex; align-items:center; gap:8px; margin-bottom:16px}
.lg-brand .bar{display:block; width:4px; height:20px; border-radius:2px; background:#E5252A}
.lg-brand b{font-size:17px; font-weight:900; color:var(--ink); letter-spacing:-.02em}
.lg-brand em{font-style:normal; font-size:14px; font-weight:600; color:var(--faint)}
.login-ticket .period-tag{margin-bottom:14px}
.login-ticket h1{margin:0 0 12px; font-size:clamp(25px,8vw,32px); font-weight:900; line-height:1.3; letter-spacing:-.03em; word-break:keep-all; min-height:2.6em}
.login-ticket p.lead{margin:0; font-size:clamp(14px,4.1vw,15.5px); line-height:1.6; word-break:keep-all; min-height:3.2em; white-space:normal}
.login-ticket .ln{display:block; white-space:nowrap}
.login-ticket .field{margin-top:22px}
.login-ticket .hint{min-height:20px; line-height:20px; font-size:13px}
.login-ticket .hint.note{color:var(--faint); font-weight:400}
.field{margin-top:30px}
.field label{display:flex; align-items:center; gap:6px; font-weight:700; font-size:14px; color:var(--ink); margin-bottom:9px}
.field input{width:100%; height:56px; padding:0 16px; font-size:16px; font-weight:600; font-family:var(--sys);
  color:var(--ink); background:#F8F9FA; border:1.5px solid transparent; border-radius:14px; transition:border-color .15s, background .15s}
.field input::placeholder{color:var(--faint); font-weight:400}
.field input:focus{outline:0; background:#fff; border-color:var(--blue)}

.action-box{margin-top:2px}
.btn{width:100%; height:56px; margin-top:16px; border:0; border-radius:15px; cursor:pointer;
  background:var(--blue); color:#fff; font-size:16px; font-weight:700; font-family:var(--sys);
  display:flex; align-items:center; justify-content:center; transition:transform .1s var(--ease), background .15s}
.btn:active{transform:scale(.98); background:var(--blue-d)}
.btn[disabled]{opacity:.5; cursor:default}
.btn .spin{display:inline-block; width:16px; height:16px; margin-right:8px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.secondary{background:#F2F4F6; color:var(--ink)}
.btn.secondary:active{background:#E5E8EB}
.btn.kakao{background:#FEE500; color:#191600}
.btn.photo{background:var(--pink)}
.btn.photo:active{background:var(--pink-d)}
.btn .btn-ico{margin-right:7px; flex:none}
.hint{min-height:18px; margin-top:10px; font-size:13.5px; color:var(--danger); text-align:center; font-weight:500}

.waiting{margin-top:8px; display:inline-flex; gap:6px; align-items:center; color:var(--blue); font-size:14px; font-weight:700}
.waiting i{width:6px; height:6px; border-radius:50%; background:var(--blue); animation:blink 1.2s var(--ease) infinite}
.waiting i:nth-child(2){animation-delay:.2s} .waiting i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.25} 50%{opacity:1}}

.big-cd{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:22px}
.big-cd .u{background:#F8F9FA; border-radius:16px; padding:16px 6px 12px; min-width:0; flex:1}
.big-cd .u .n{font-size:clamp(32px,10vw,40px); font-weight:800; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.big-cd .u .l{font-size:12px; color:var(--muted); margin-top:6px; font-weight:600}
.big-cd .c{font-size:24px; color:var(--faint); font-weight:300; padding-bottom:14px}

.type-tag{display:inline-block; padding:5px 12px; border-radius:8px; background:var(--blue-soft);
  color:var(--blue-d); font-weight:700; font-size:12px; margin-bottom:12px}
.type-tag.photo{background:var(--pink-soft); color:var(--pink-d)}

/* 헤더 — 기간 배지+오늘 날짜, 큰 타이틀 + 한 줄 태그라인 */
.page-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.page-head .period-tag{margin-bottom:0}
.page-date{font-size:13px; color:var(--muted); font-weight:600}
.page-title{font-size:clamp(22px,6.4vw,26px); font-weight:800; color:var(--ink); letter-spacing:-.02em; margin-bottom:6px}
.page-tagline{color:var(--muted); font-size:14.5px; line-height:1.5; white-space:pre-line; font-weight:500}

/* 페이지의 주인공인 오늘의 미션 — 아이콘+색으로 유형(활동/인증)을 한눈에 구분 */
/* 위쪽 정보 카드들은 행운 영역과 시각적으로 경쟁하지 않도록 톤을 한 단계 낮춘다(옅은 회백색) */
.mission-focus{display:flex; gap:13px; margin-top:18px; padding:19px 17px 18px; border:1px solid #E7EBF1; border-radius:18px;
  background:#F8F9FB}
.mission-focus--photo{border-color:#F3E7E9; background:#FBF8F8}
.mf-icon{flex:none; width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  background:rgba(49,130,246,.14); color:var(--blue-d)}
.mission-focus--photo .mf-icon{background:rgba(240,67,107,.13); color:var(--pink-d)}
.mf-body{flex:1; min-width:0}
.mission-focus-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px}
.mission-focus-label{font-size:13px; font-weight:800; color:var(--blue-d); letter-spacing:-.01em}
.mission-focus--photo .mission-focus-label{color:var(--pink-d)}
.mission-focus .type-tag{margin:0; flex:none}
.mission-focus h2{margin:0; font-size:clamp(21px,6vw,24px); font-weight:800; line-height:1.3; letter-spacing:-.02em; word-break:keep-all; color:var(--ink)}
.mission-focus p{margin-top:8px; color:var(--muted); font-size:14px; line-height:1.55; white-space:pre-line; word-break:keep-all}

.mission-check{margin-top:18px}
.mission-checked{margin-top:18px; padding:13px 14px; border-radius:14px; background:var(--blue-soft); color:var(--blue-d); text-align:center; font-size:14px; font-weight:800}

/* 오늘 몇 명이 함께 개척 중인지 — 센터별로 묶어서 인원수 칩으로(마퀴 대신 한눈에 훑을 수 있게) */
.social-box{margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.social-title{display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--muted); font-weight:600}
.social-title svg{flex:none; color:var(--faint)}
.social-title b{color:var(--ink); font-weight:800}
.center-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.center-chip{background:#F8F9FA; border-radius:999px; padding:6px 12px; font-size:12.5px; color:var(--muted); font-weight:600; white-space:nowrap}

/* 오늘의 시상품 — 개척구간 공통 상품(매일 그대로, play-copy.js의 prizes로 관리) */
.prize-box{margin-top:16px; padding:16px 16px 14px; border-radius:16px; background:#FAFAF8; border:1px solid #EFEBE0}
.prize-title{font-size:13.5px; font-weight:800; color:#9A6B00; margin-bottom:3px}
.prize-body{font-size:12.5px; color:var(--muted); font-weight:500; margin-bottom:12px}
.prize-row{display:flex; gap:8px; flex-wrap:wrap}
.prize-chip{flex:1; min-width:120px; background:#fff; border:1px solid #F2E6BC; border-radius:13px; padding:10px 12px; text-align:center}
.prize-count{display:block; font-size:15px; font-weight:800; color:#9A6B00; margin-bottom:3px}
.prize-name{display:block; font-size:12.5px; font-weight:700; color:var(--ink)}
.prize-sub{display:block; font-size:11px; color:var(--faint); margin-top:2px}

/* ================= 오늘의 개척행운 — 위 정보 카드들과 다르게 여기만 눈에 띄는 "리워드 박스"로 ================= */
.lucky-ticket{position:relative; overflow:hidden; text-align:center; padding:30px 24px 26px;
  background:linear-gradient(165deg,#EAF2FF 0%,#DCE9FF 55%,#D2E1FF 100%);
  box-shadow:0 16px 32px -18px rgba(27,86,180,.4)}
.lucky-ticket::before{content:""; position:absolute; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.65),transparent 70%); top:-90px; right:-60px; pointer-events:none}
.lucky-ticket.locked{background:#F2F4F6; box-shadow:none}
.lucky-ticket.locked::before{display:none}
.lucky-ticket .kicker{position:relative; text-align:center; padding-left:0}
.lucky-box-icon{position:relative; width:58px; height:58px; margin:0 auto 14px; border-radius:18px;
  display:grid; place-items:center; background:rgba(255,255,255,.75); color:var(--blue);
  box-shadow:0 8px 18px -8px rgba(27,86,180,.45)}
.lucky-box-icon.locked{background:#E5E8EB; color:var(--faint); box-shadow:none}
.lucky-tagline{position:relative; text-align:center; margin:0 0 18px; color:var(--muted); font-size:14px; font-weight:500}
.lucky-btn{position:relative; width:100%; height:56px; border:0; border-radius:16px; cursor:pointer;
  background:linear-gradient(135deg,var(--blue),#1B4FA8); color:#fff; font-size:16px; font-weight:800;
  display:flex; align-items:center; justify-content:center; gap:8px; transition:transform .1s var(--ease);
  box-shadow:0 10px 20px -10px rgba(27,86,180,.55)}
.lucky-btn:active{transform:scale(.98)}
.lucky-btn.locked{background:#DEE1E6; color:var(--faint); cursor:default; box-shadow:none}
.lucky-btn.locked:active{transform:none}


/* 문구 카드 공통(오늘의 개척행운 인라인 결과 + 공유받음 팝업에서 재사용) */
.fc-glow{position:absolute; width:220px; height:220px; border-radius:50%; filter:blur(56px); opacity:.5; top:-80px; right:-60px; background:rgba(255,255,255,.9)}
.fc-kicker{position:relative; font-size:11px; letter-spacing:.16em; font-weight:800; color:var(--blue-d); z-index:1}
.modal-face[data-type="photo"] .fc-kicker{color:var(--pink-d)}
/* 한 줄짜리 문구를 큰따옴표로 감싸 "오늘의 한마디" 느낌으로 */
.fc-quote{position:relative; margin-top:14px; font-size:18px; font-weight:800; text-align:center;
  line-height:1.5; letter-spacing:-.01em; z-index:1; color:var(--ink); word-break:keep-all}
.fc-quote::before,.fc-quote::after{content:'"'; opacity:.4; font-family:Georgia,serif}

.share-row{display:flex; flex-direction:column; gap:8px; margin-top:20px}
/* 카드가 다 뒤집힌 뒤에 공유 버튼이 따라 올라온다 */
.share-row.late{animation:rise .5s .62s var(--ease) both}
.toast{margin-top:8px; font-size:12.5px; color:var(--blue-d); text-align:center; font-weight:600}

.toast.cheer{color:var(--ink); font-weight:800; font-size:13.5px; animation:rise .3s var(--ease) both}

.proof-box{margin-top:22px; padding-top:22px; border-top:1px solid var(--line); text-align:center}
.ticket>.proof-box:first-child{margin-top:0; padding-top:0; border-top:0}
.proof-box .pb-note{font-size:12.5px; color:var(--muted); margin-bottom:10px; font-weight:500}
.proof-box .hint{margin-top:8px}
.proof-box .hint.hint-progress{color:var(--pink-d); font-weight:700}
.proof-title{font-size:14px; font-weight:700; color:var(--muted); margin-bottom:12px; text-align:left}

/* 예시 사진 1장 + 유의사항(인증 방법/날짜 표시)을 나란히 — 사진을 여러 장 늘어놓지 않는다 */
.proof-example-row{display:flex; gap:12px; margin-bottom:16px; text-align:left}
.proof-example-row.no-img{display:block}
.proof-example-img{flex:none; width:96px; height:96px; border-radius:14px; overflow:hidden; border:1px solid var(--line)}
.proof-example-img img{width:100%; height:100%; object-fit:cover; display:block}
.proof-example-notes{flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; justify-content:center}
.proof-note-item b{display:block; font-size:11.5px; font-weight:800; color:var(--pink-d); letter-spacing:-.01em; margin-bottom:2px}
.proof-note-item span{display:block; font-size:12.5px; line-height:1.4; color:var(--ink); font-weight:600; word-break:keep-all}
.proof-note-item span b{display:inline; color:var(--pink-d); font-weight:800; font-size:inherit}

/* ---- 인증샷 업로드(구글 앱스크립트로 직접 전송) ---- */
.proof-upload{text-align:left}
.proof-pick-input{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none}
.proof-pick{display:flex; align-items:center; gap:12px; width:100%; padding:13px 14px; border-radius:15px;
  background:#F8F9FA; border:1px solid var(--line); cursor:pointer; text-align:left}
.proof-pick:active{background:#F2F4F6}
.proof-pick-icon{flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--pink-soft); color:var(--pink-d)}
.proof-pick-text{display:flex; flex-direction:column; gap:2px}
.proof-pick-text b{font-size:14px; color:var(--ink); font-weight:700}
.proof-pick-text small{font-size:11.5px; color:var(--faint); font-weight:500}
.proof-thumbs{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.proof-thumb{position:relative; width:72px; height:72px; border-radius:12px; overflow:hidden; background:#F2F4F6; flex:none}
.proof-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.proof-thumb-x{position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; border:0;
  background:rgba(25,31,40,.65); color:#fff; font-size:12px; line-height:1; cursor:pointer; display:grid; place-items:center}
.proof-note-label{display:block; margin:16px 0 6px; font-size:12.5px; font-weight:700; color:var(--muted)}
.proof-note-wrap{position:relative}
.proof-note{width:100%; min-height:44px; padding:12px 14px 20px; border-radius:13px; border:1px solid var(--line);
  background:#F8F9FA; font-family:var(--sys); font-size:14px; color:var(--ink); resize:vertical}
.proof-note:focus{outline:0; background:#fff; border-color:var(--pink)}
.proof-note-count{position:absolute; right:11px; bottom:8px; font-size:11px; color:var(--faint); font-weight:600; pointer-events:none}
.proof-submit-btn{background:linear-gradient(135deg,var(--pink),var(--pink-d))}
.proof-submit-btn:active{background:var(--pink-d)}
.proof-done{margin-top:6px; padding:13px 14px; border-radius:14px; background:var(--pink-soft); color:var(--pink-d);
  text-align:center; font-size:14px; font-weight:800}
.proof-done-note{margin-top:6px; font-size:12px; color:var(--muted); text-align:center; font-weight:500}
.proof-resubmit{display:block; width:100%; margin-top:10px; padding:8px; border:0; background:transparent;
  color:var(--faint); font-size:12px; font-weight:600; text-decoration:underline; cursor:pointer}
#proof-submit{margin-top:14px}

/* ---- 공유 받음 팝업 ---- */
.modal-backdrop{position:fixed; inset:0; background:rgba(25,31,40,.55); display:flex; align-items:center;
  justify-content:center; padding:20px; z-index:100; animation:fadeIn .2s var(--ease) both}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
.modal-card{background:var(--surface); border-radius:24px; padding:26px 22px; max-width:340px; width:100%;
  text-align:center; animation:modalPop .3s var(--ease) both}
@keyframes modalPop{from{opacity:0; transform:scale(.94) translateY(6px)} to{opacity:1; transform:none}}
.modal-kicker{font-size:12.5px; font-weight:800; color:var(--blue); margin-bottom:14px}
.modal-face{position:relative; width:100%; padding:26px 22px; margin-bottom:16px; overflow:hidden;
  border-radius:22px; box-shadow:0 18px 34px -16px rgba(25,31,40,.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center}
.modal-face[data-type="activity"]{background:linear-gradient(135deg,#EAF2FF,#DCEBFF)}
.modal-face[data-type="photo"]{background:linear-gradient(135deg,#FFEFF3,#FFE2E9)}
.fc-fallback{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center}
.modal-line{font-size:14.5px; color:var(--muted); font-weight:500; margin-bottom:18px}
.modal-line b{color:var(--ink); font-weight:800}

.modal-x{position:absolute; top:14px; right:14px; width:28px; height:28px; border:0; border-radius:50%;
  background:#F2F4F6; color:var(--muted); font-size:13px; cursor:pointer; display:grid; place-items:center; z-index:2}

/* ---- 결과 모달 — "오늘 작은 리워드를 하나 받았다": 빛 → 클로버 톡 → 제목 → 문구 → 공유 순으로 1초 안에 등장 ---- */
.modal-card.result-modal,.modal-card.done-modal{position:relative; overflow:hidden; max-width:350px; border-radius:26px;
  background:linear-gradient(180deg,#F3F8FF 0%,#FFFFFF 58%); box-shadow:0 30px 60px -24px rgba(12,40,100,.45)}
.modal-card.result-modal{padding:34px 22px 22px; animation:rmPop .42s cubic-bezier(.2,1.25,.35,1) both}
.modal-card.result-modal[data-type="photo"],.modal-card.done-modal[data-type="photo"]{background:linear-gradient(180deg,#FFF3F6 0%,#FFFFFF 58%)}
@keyframes rmPop{from{opacity:0; transform:scale(.86) translateY(14px)} to{opacity:1; transform:none}}
.modal-x{color:#8B95A1; background:rgba(255,255,255,.7)}

/* 뒤에서 천천히 도는 옅은 빛줄기 — 은은하게만 */
.rm-rays{position:absolute; left:50%; top:-150px; width:420px; height:420px; margin-left:-210px; pointer-events:none; opacity:.55;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.95) 0 9deg,transparent 9deg 24deg);
  -webkit-mask-image:radial-gradient(circle,#000 18%,transparent 62%); mask-image:radial-gradient(circle,#000 18%,transparent 62%);
  animation:rmRaysIn .7s ease-out both, rmSpin 24s linear infinite}
@keyframes rmRaysIn{from{opacity:0; transform:scale(.6)} to{opacity:.55; transform:none}}
@keyframes rmSpin{to{rotate:360deg}}

.rm-badge{position:relative; width:64px; height:64px; margin:0 auto 6px; display:grid; place-items:center; color:#3B82F6;
  animation:rmBadge .6s .08s cubic-bezier(.2,1.5,.4,1) both}
.rm-badge svg{position:relative; width:54px; height:54px; filter:drop-shadow(0 6px 10px rgba(49,120,240,.35))}
.rm-badge-glow{position:absolute; inset:-14px; border-radius:50%; background:radial-gradient(circle,rgba(120,170,255,.45),transparent 65%);
  animation:rmGlow 2.6s .6s ease-in-out infinite}
.result-modal[data-type="photo"] .rm-badge,.done-modal[data-type="photo"] .rm-badge{color:var(--pink)}
.result-modal[data-type="photo"] .rm-badge-glow,.done-modal[data-type="photo"] .rm-badge-glow{background:radial-gradient(circle,rgba(255,140,170,.4),transparent 65%)}
@keyframes rmBadge{0%{opacity:0; transform:scale(.3) rotate(-40deg)} 70%{opacity:1; transform:scale(1.12) rotate(6deg)} 100%{opacity:1; transform:none}}
@keyframes rmGlow{0%,100%{opacity:.6; transform:scale(.92)} 50%{opacity:1; transform:scale(1.08)}}

.rm-kicker{position:relative; font-size:14px; font-weight:800; color:var(--blue); letter-spacing:-.01em; animation:fadeUp .35s .2s var(--ease) both}
.result-modal[data-type="photo"] .rm-kicker{color:var(--pink-d)}
.rm-heading-wrap{position:relative; margin:10px 0 18px; padding:0 22px}
.rm-heading{font-size:clamp(23px,6.6vw,27px); font-weight:800; line-height:1.3; letter-spacing:-.03em; color:var(--ink);
  animation:fadeUp .4s .28s var(--ease) both}
.rm-spark{position:absolute; color:#FFC83D; filter:drop-shadow(0 0 6px rgba(255,200,61,.6))}
.rm-spark svg{width:22px; height:22px}
.rm-spark.l{left:0; top:2px; animation:rmTwinkle 2.2s .5s ease-in-out infinite both}
.rm-spark.r{right:0; bottom:4px; animation:rmTwinkle 2.2s 1.4s ease-in-out infinite both}
@keyframes rmTwinkle{0%,100%{opacity:.35; transform:scale(.75) rotate(0)} 50%{opacity:1; transform:scale(1.1) rotate(15deg)}}

.rm-quote{position:relative; padding:22px 18px 20px; border-radius:18px; background:#fff; border:1px solid #E8EEF8;
  box-shadow:0 10px 24px -18px rgba(25,60,130,.35); animation:rmQuote .45s .4s var(--ease) both}
.rm-quote-mark{position:absolute; left:14px; top:8px; font-size:22px; line-height:1; color:#C9D3E3; font-family:Georgia,serif}
.rm-quote p{font-size:16px; font-weight:600; line-height:1.6; color:#333D4B; word-break:keep-all}
@keyframes rmQuote{from{opacity:0; transform:translateY(10px) scale(.97)} to{opacity:1; transform:none}}
.rm-cheer{position:relative; margin:16px 0 2px; font-size:14px; color:var(--muted); font-weight:600; animation:fadeUp .35s .5s var(--ease) both}
@keyframes fadeUp{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* 공유 버튼 — 등장 후 빛이 스르륵 스쳐 지나가서 "눌러보고 싶게" */
.modal-card.result-modal .share-row{margin-top:16px; animation:fadeUp .35s .58s var(--ease) both}
.share-btn{position:relative; overflow:hidden; height:58px; margin-top:0; border-radius:17px; font-size:16.5px; font-weight:800; gap:4px}
.share-btn.kakao{background:#FEE500; color:#191600; box-shadow:0 12px 22px -12px rgba(200,160,0,.75)}
.share-btn.kakao:active{background:#F5DC00; color:#191600}
.share-btn::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent); animation:rmShine 3.2s 1.1s ease-in-out infinite}
@keyframes rmShine{0%{left:-60%} 28%,100%{left:130%}}

/* 공유 받음 팝업 — 결과 모달과 같은 무드(빛/클로버/문구 카드) + 보낸 사람 표시 + 파란 CTA */
.rv-from{position:relative; display:inline-flex; align-items:center; gap:6px; margin:-4px auto 12px; padding:7px 13px;
  border-radius:999px; background:#E9F1FF; color:var(--blue-d); font-size:13px; font-weight:600;
  animation:fadeUp .35s .34s var(--ease) both}
.rv-from svg{flex:none}
.rv-from b{font-weight:800}
.rv-cta{position:relative; overflow:hidden; width:100%; height:58px; margin-top:18px; border:0; border-radius:17px; cursor:pointer;
  background:linear-gradient(135deg,#2F80F7,#1560DE); color:#fff; font-family:var(--sys); font-size:16.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; gap:6px; box-shadow:0 12px 22px -12px rgba(21,96,222,.7);
  transition:transform .1s var(--ease); animation:fadeUp .35s .55s var(--ease) both}
.rv-cta:active{transform:scale(.98)}
.rv-cta::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); animation:rmShine 3.2s 1.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.rv-cta::after{animation:none}}

/* 공유 완료 모달 */
.modal-card.done-modal{padding:32px 24px 22px; animation:rmPop .38s cubic-bezier(.2,1.25,.35,1) both}
.rm-badge.small{margin-bottom:14px}
.dm-title{font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-.02em; animation:fadeUp .35s .15s var(--ease) both}
.dm-ref{margin-top:16px; padding:12px 14px; border-radius:14px; background:var(--blue-soft); text-align:center; animation:fadeUp .35s .3s var(--ease) both}
.dm-ref-l{font-size:13.5px; font-weight:700; color:var(--muted)}
.dm-ref-n{margin-top:2px; font-size:14px; font-weight:700; color:var(--ink)}
.dm-ref-n b{font-size:28px; font-weight:900; color:var(--blue-d); margin-right:2px}
.dm-ref-n .none{font-size:14px; font-weight:600; color:var(--muted)}
.dm-body{margin-top:10px; font-size:14.5px; color:var(--muted); line-height:1.6; font-weight:500; animation:fadeUp .35s .22s var(--ease) both}
.done-modal .btn{margin-top:22px; animation:fadeUp .35s .3s var(--ease) both}

@media (prefers-reduced-motion:reduce){
  .rm-rays,.rm-badge-glow,.rm-spark,.share-btn::after{animation:none}
}

/* ================= 일반(ACTIVITY) 미션 메인 — 흰 카드 한 장에 미션/인원/시상품/행운을 한눈에 ================= */
.ticket.home{padding:24px 20px 22px; border-radius:26px; box-shadow:0 10px 30px -20px rgba(25,31,40,.18)}
.ticket.home .page-head{margin-bottom:16px}
.ticket.home .page-title{font-size:clamp(26px,7.6vw,31px); margin-bottom:8px}
.ticket.home .page-tagline{font-size:15px; font-weight:500; color:var(--muted)}

.hm-icon{flex:none; width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:#DCE8FD; color:var(--blue)}
.hm-icon svg{width:24px; height:24px}
.hm-icon--gold{background:#FDEFC8; color:#E0A21B}

/* 오늘의 미션 */
.hm-mission{display:flex; gap:14px; margin-top:20px; padding:18px 16px; border-radius:18px;
  background:linear-gradient(160deg,#F6F9FF,#EEF4FF); border:1px solid #DDE8FB}
.hm-mission-body{flex:1; min-width:0}
.hm-mission-label{font-size:13px; font-weight:800; color:var(--blue); margin:2px 0 6px}
.hm-mission h2{font-size:clamp(21px,6.2vw,25px); font-weight:800; line-height:1.3; letter-spacing:-.02em; color:var(--ink)}
.hm-mission p{margin-top:6px; font-size:14px; color:var(--muted); line-height:1.5; white-space:pre-line}

/* 오늘 함께하는 인원 + 최근 확인자 한 줄 */
.hm-social{margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.hm-social-title{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--muted)}
.hm-social-title svg{flex:none; width:20px; height:20px; color:var(--faint)}
.hm-social-title b{color:var(--blue); font-weight:800}
.hm-recent{position:relative; margin-top:11px; padding:10px 14px; border-radius:999px; background:#F6F8FB; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent); mask-image:linear-gradient(90deg,#000 82%,transparent)}
.hm-recent-track{display:flex; align-items:center; gap:9px; white-space:nowrap; font-size:12.5px; color:var(--faint)}
.hm-recent-item b{color:#4E5968; font-weight:700}
.hm-dot{flex:none; width:3px; height:3px; border-radius:50%; background:#B0B8C1}

/* 오늘의 시상품 */
.hm-prize{margin-top:16px; padding:16px 14px 14px; border-radius:18px; background:#FFFBF0; border:1px solid #F7ECCD}
.hm-head{display:flex; align-items:center; gap:12px}
.hm-prize-title{font-size:16px; font-weight:800; color:#A8740A; letter-spacing:-.01em}
.hm-prize-body{font-size:13px; color:var(--muted); font-weight:500; margin-top:1px}
.hm-prize-item{display:flex; align-items:center; gap:14px; margin-top:12px; padding:14px; border-radius:15px;
  background:#fff; border:1px solid #F3EAD2}
.hm-prize-visual{flex:none; width:46%; max-width:190px; display:grid; place-items:center; padding-right:14px; border-right:1px solid #F0E8D4}
.hm-prize-visual img{width:100%; height:auto; max-height:140px; object-fit:contain; border-radius:8px; display:block}
.hm-prize-info{flex:1; min-width:0}
.hm-prize-count{font-size:clamp(19px,5.6vw,22px); font-weight:800; color:#B07A0C; line-height:1.25; letter-spacing:-.01em}
.hm-prize-name{font-size:15.5px; font-weight:800; color:var(--ink); margin-top:2px}
.hm-prize-sub{font-size:12.5px; color:var(--muted); margin-top:3px}
.hm-prize-desc{font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.45}
/* 상품 사진이 없을 때 쓰는 카드 일러스트(검정 카드 2장 겹침 + 금색 글씨) */
.hm-cards{position:relative; width:100%; max-width:120px; aspect-ratio:1.45}
.hm-card-back,.hm-card-front{position:absolute; width:86%; height:74%; border-radius:7px;
  background:linear-gradient(145deg,#2B2B2E,#0E0E10); box-shadow:0 8px 14px -8px rgba(0,0,0,.55)}
.hm-card-back{left:0; top:4%; transform:rotate(-8deg); opacity:.9}
.hm-card-front{right:0; bottom:4%; transform:rotate(-3deg); border:1.5px solid #4A4A4E;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px}
.hm-card-front span{font-size:10px; font-weight:600; letter-spacing:.12em; color:#D8B35C}
.hm-card-front small{font-size:6px; color:#B9964A; letter-spacing:.04em}

/* 오늘의 개척행운 */
.hm-lucky{position:relative; overflow:hidden; margin:16px -6px 0; padding:22px 18px 18px; border-radius:22px;
  background:linear-gradient(160deg,#EEF4FF 0%,#DCE8FF 60%,#D3E2FF 100%)}
.hm-lucky::before{content:""; position:absolute; width:240px; height:240px; border-radius:50%; right:-70px; top:-60px;
  background:radial-gradient(circle,rgba(255,255,255,.75),transparent 68%); pointer-events:none}
.hm-lucky-deco{position:absolute; right:-6px; top:18px; color:#fff; opacity:.7; pointer-events:none}
.hm-lucky-deco svg{width:58px; height:58px}
.hm-lucky-main{position:relative; display:flex; align-items:center; gap:6px}
.hm-lucky-text{flex:1; min-width:0}
.hm-lucky-label{display:flex; align-items:center; gap:7px; font-size:14px; font-weight:800; color:var(--blue-d)}
.hm-lucky-label svg{width:24px; height:24px; color:var(--blue)}
.hm-lucky-headline{margin-top:12px; font-size:clamp(20px,5.6vw,25px); font-weight:800; line-height:1.32; letter-spacing:-.025em; color:var(--ink); white-space:nowrap}
.hm-lucky-headline em{font-style:normal; color:var(--blue)}
.hm-lucky-tagline{margin-top:10px; font-size:14px; color:#4E5968; line-height:1.5; font-weight:500}
.hm-mystery{position:relative; flex:none; width:clamp(74px,22vw,96px); aspect-ratio:.78; margin-right:4px}
.hm-mystery-card{position:absolute; inset:0; border-radius:12px; transform:rotate(8deg);
  background:linear-gradient(150deg,rgba(203,221,255,.95),rgba(128,168,247,.9));
  border:2px solid rgba(255,255,255,.9); box-shadow:0 14px 26px -12px rgba(49,110,230,.55), inset 0 0 18px rgba(255,255,255,.55);
  display:grid; place-items:center; animation:hmFloat 3.2s ease-in-out infinite}
.hm-mystery-card span{font-size:clamp(34px,10vw,46px); font-weight:800; color:#fff; line-height:1;
  text-shadow:0 2px 10px rgba(49,110,230,.45)}
.hm-spark{position:absolute; color:#fff; z-index:1; filter:drop-shadow(0 0 4px rgba(255,255,255,.9))}
.hm-spark svg{width:16px; height:16px}
.hm-spark.s1{left:-16px; top:10%; animation:hmTwinkle 2.4s ease-in-out infinite}
.hm-spark.s2{right:-12px; bottom:8%; animation:hmTwinkle 2.4s 1.2s ease-in-out infinite}
@keyframes hmFloat{0%,100%{transform:rotate(8deg) translateY(0)} 50%{transform:rotate(6deg) translateY(-4px)}}
@keyframes hmTwinkle{0%,100%{opacity:.35; transform:scale(.8)} 50%{opacity:1; transform:scale(1.1)}}
.hm-lucky-btn{position:relative; width:100%; height:58px; margin-top:18px; border:0; border-radius:16px; cursor:pointer;
  background:linear-gradient(135deg,#2F80F7,#1560DE); color:#fff; font-family:var(--sys); font-size:17px; font-weight:800;
  display:flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 12px 22px -12px rgba(21,96,222,.7);
  transition:transform .1s var(--ease)}
.hm-lucky-btn:active{transform:scale(.98)}
.hm-lucky-btn[disabled]{opacity:.7; cursor:default}
.hm-lucky-btn .spin{display:inline-block; width:16px; height:16px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite}
.hm-lucky .hint{position:relative; margin-top:8px; min-height:0}
.hm-lucky .hint:empty{display:none}
@media (prefers-reduced-motion:reduce){.hm-mystery-card,.hm-spark{animation:none}}
@media (max-width:370px){
  .ticket.home{padding-left:16px; padding-right:16px}
  .hm-lucky{margin-left:-4px; margin-right:-4px; padding-left:14px; padding-right:14px}
  .hm-lucky-headline{font-size:18.5px}
  .hm-mystery{width:64px}
  .hm-prize-item{gap:10px; padding:12px}
  .hm-prize-visual{padding-right:10px}
}

@media (max-width:360px){.example-img{max-height:300px}}
.rm-heading em{font-style:normal; color:var(--blue)}

/* 결과 모달 — 뽑힌 문구가 곧 큰 제목(고정 제목 "좋은 인연이…" 제거) */
.rm-fortune-wrap{margin:14px 0 4px; padding:18px 20px 20px; border-radius:20px;
  background:rgba(255,255,255,.78); border:1px solid #E6EEFA; box-shadow:0 12px 26px -20px rgba(25,60,130,.4);
  animation:rmQuote .45s .28s var(--ease) both}
.result-modal[data-type="photo"] .rm-fortune-wrap{border-color:#F8E3EA}
.rm-fortune{font-size:clamp(20px,5.8vw,23px); font-weight:800; line-height:1.45; letter-spacing:-.03em; color:var(--ink); word-break:keep-all}
.rm-fortune-wrap .rm-spark.l{left:-8px; top:-10px}
.rm-fortune-wrap .rm-spark.r{right:-8px; bottom:-10px}

/* ================= 포토(PHOTO) 미션 메인 — 일반 미션과 같은 톤, 인증 영역이 주인공 ================= */
.ph-mission-top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:2px 0 6px}
.ph-mission-top .hm-mission-label{margin:0}
.ph-type-tag{flex:none; padding:4px 10px; border-radius:8px; background:#DCE8FD; color:var(--blue-d); font-size:12px; font-weight:700}
.hm-mission.ph-mission--done{flex-wrap:wrap; background:linear-gradient(160deg,#F3FBF6,#E9F7EF); border-color:#CFEBD9}
.ph-mission--done .hm-mission-body p{margin-top:4px}
.ph-done{display:flex; align-items:center; gap:9px; margin-top:12px; color:#1FA35B}
.ph-done svg{flex:none; width:30px; height:30px}
.ph-done b{font-size:22px; font-weight:800; letter-spacing:-.02em}
.ph-resubmit{flex-basis:100%; height:50px; margin-top:4px; border-radius:14px; border:1.5px solid #9CC2FA; background:rgba(255,255,255,.85);
  color:var(--blue-d); font-family:var(--sys); font-size:15px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:7px}
.ph-resubmit:active{background:#EEF4FF}

.ph-proof{margin-top:14px; padding:18px 14px 14px; border-radius:18px; background:linear-gradient(180deg,#FFF3F6,#FFF8FA); border:1px solid #F8DCE4}
.ph-proof-title{font-size:17px; font-weight:800; color:var(--ink); letter-spacing:-.02em; margin-bottom:12px}
.ph-example{display:flex; flex-direction:column; gap:12px; margin-bottom:14px}
.ph-example-img{width:100%; border-radius:14px; overflow:hidden; background:#fff; border:1px solid #F3DDE3}
.ph-example-img img{width:100%; height:auto; max-height:360px; object-fit:contain; display:block; margin:0 auto}
.ph-rules{display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:14px; background:#fff; border:1px solid #F3DDE3}
.ph-rule{display:flex; gap:10px; align-items:flex-start}
/* 아이콘은 제목 줄(20px)과 가운데가 맞도록 30px 박스를 위로 5px 당긴다 */
.ph-rule .ph-rule-ico{flex:none; width:30px; height:30px; margin-top:-5px; border-radius:9px; display:grid; place-items:center; background:#FFE1E9; color:var(--pink-d)}
.ph-rule .ph-rule-ico svg{display:block}
.ph-rule div > b{display:block; font-size:13px; line-height:20px; font-weight:800; color:var(--pink-d); margin-bottom:2px}
.ph-rule div > span{display:block; font-size:12.5px; line-height:1.45; color:#4E5968; font-weight:500}
.ph-rule div > span b{display:inline; font-size:inherit; color:#4E5968; font-weight:500; margin:0}
.ph-proof .proof-pick{background:#fff; border-color:#F1DDE3}
.ph-proof .proof-note{background:#fff; border-color:#F1DDE3}
.ph-proof .proof-note-label{color:#4E5968}
.ph-proof .proof-submit-btn{height:54px; font-size:16.5px; font-weight:800; box-shadow:0 12px 22px -14px rgba(212,42,84,.7)}
.ph-proof .hint:empty{display:none}
.ph-proof .pb-note{font-size:13px; color:var(--muted); text-align:center}

/* 컴팩트 시상품 — 한 줄(누르면 설명 펼침) */
.ph-prize{margin-top:14px; border-radius:18px; background:#FFFBF0; border:1px solid #F7ECCD; overflow:hidden}
.ph-prize-row{width:100%; display:flex; align-items:center; gap:10px; padding:12px; border:0; background:none; cursor:pointer;
  font-family:var(--sys); text-align:left; color:inherit}
.ph-prize-row .hm-icon{width:40px; height:40px; border-radius:12px}
.ph-prize-text{flex:1; min-width:0; display:flex; flex-direction:column}
.ph-prize-text b{font-size:15px; font-weight:800; color:#A8740A}
.ph-prize-text small{font-size:11.5px; color:var(--muted); font-weight:500; line-height:1.35}
.ph-prize-visual{flex:none; width:64px}
.ph-prize-visual img{width:100%; border-radius:6px; display:block}
.ph-prize-visual .hm-card-front span{font-size:6.5px}
.ph-prize-visual .hm-card-front small{display:none}
.ph-prize-info{flex:none; display:flex; flex-direction:column; line-height:1.3}
.ph-prize-info em{font-style:normal; font-size:14px; font-weight:800; color:#B07A0C}
.ph-prize-info b{display:flex; align-items:center; font-size:13.5px; font-weight:800; color:var(--ink); white-space:nowrap}
.ph-prize-info b svg{width:14px; height:14px; transition:transform .2s var(--ease)}
.ph-prize-row[aria-expanded="true"] .ph-prize-info b svg{transform:rotate(90deg)}
.ph-prize-info small{font-size:11px; color:var(--muted)}
.ph-prize-desc{padding:0 14px 12px 62px; font-size:12.5px; color:var(--muted)}

/* 컴팩트 행운 — 아이콘 + 문구 + 오른쪽 버튼 */
.ph-lucky{position:relative; margin-top:14px; padding:14px 12px; border-radius:18px; display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  background:linear-gradient(160deg,#EEF4FF,#DCE8FF)}
.ph-lucky-ico{flex:none; color:var(--blue)}
.ph-lucky-ico svg{width:34px; height:34px}
.ph-lucky-text{flex:1; min-width:0; display:flex; flex-direction:column}
.ph-lucky-text b{font-size:15px; font-weight:800; color:var(--blue-d)}
.ph-lucky-text small{font-size:11.5px; color:#4E5968; font-weight:500; line-height:1.35}
.ph-lucky-action{flex:none; display:flex; flex-direction:column; align-items:center; gap:4px}
.ph-lucky-btn{height:46px; padding:0 14px; border:0; border-radius:13px; cursor:pointer; font-family:var(--sys);
  background:linear-gradient(135deg,#2F80F7,#1560DE); color:#fff; font-size:14.5px; font-weight:800; white-space:nowrap;
  display:flex; align-items:center; gap:5px; box-shadow:0 10px 18px -10px rgba(21,96,222,.7); transition:transform .1s var(--ease)}
.ph-lucky-btn:active{transform:scale(.97)}
.ph-lucky-btn svg{width:16px; height:16px}
.ph-lucky-btn .spin{display:inline-block; width:14px; height:14px; border-radius:50%; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite}
.ph-lucky.locked{background:#F2F4F8}
.ph-lucky.locked .ph-lucky-ico{color:#A9C4F5}
.ph-lucky-btn[disabled]{background:#C9CFD8; box-shadow:none; cursor:default; transform:none}
.ph-lucky-caption{flex-basis:100%; margin-top:-4px; text-align:right; font-size:11.5px; color:var(--faint); font-weight:500}
.ph-lucky .hint{flex-basis:100%; margin:0; min-height:0}
.ph-lucky .hint:empty{display:none}

@media (max-width:430px){
  .ph-prize-visual{display:none}
  .ph-lucky-ico svg{width:30px; height:30px}
  .ph-lucky-btn{padding:0 12px}
}

/* ================= 미션 당첨 안내 — 홈 상단 배너 + 팝업(결과 모달과 같은 무드, 골드 포인트) ================= */
.win-banner{width:100%; margin-top:16px; display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid #F5DFA0; border-radius:16px;
  background:linear-gradient(135deg,#FFF6D8,#FFEFC2); color:#7A5200; font-family:var(--sys); font-size:14px; font-weight:600; text-align:left; cursor:pointer;
  box-shadow:0 10px 20px -16px rgba(176,122,12,.7); animation:rise .45s var(--ease) both}
.win-banner:active{transform:scale(.99)}
.win-banner-ico{flex:none; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:#fff; color:#E0A21B}
.win-banner-ico svg{width:20px; height:20px}
.win-banner-text{flex:1; min-width:0}
.win-banner-text b{color:#5C3D00; font-weight:800}
.win-banner > svg:last-child{flex:none; width:16px; height:16px; color:#B07A0C}
.modal-card.result-modal.win-modal{background:linear-gradient(180deg,#FFF8E4 0%,#FFFFFF 60%)}
.win-modal .rm-kicker{color:#B07A0C}
.win-badge{color:#E0A21B}
.win-badge svg{width:46px; height:46px; filter:drop-shadow(0 6px 10px rgba(224,162,27,.4))}
.win-badge .rm-badge-glow{background:radial-gradient(circle,rgba(255,200,80,.5),transparent 65%)}
.win-modal .rm-heading em{font-style:normal; color:#D48A00}
.win-modal .rv-from{background:#FFF1CC; color:#7A5200}
.win-list{display:flex; flex-direction:column; gap:6px; margin:-4px 0 6px; animation:fadeUp .35s .34s var(--ease) both}
.win-list span{padding:8px 12px; border-radius:12px; background:#FFF1CC; color:#7A5200; font-size:13px; font-weight:700}

/* 인증샷 제출 진행률 — 버튼 자체가 진행 바가 된다 */
.proof-submit-btn.is-progress{position:relative; overflow:hidden; opacity:1; background:#F7B9C8; cursor:default}
.proof-progress-fill{position:absolute; left:0; top:0; bottom:0; background:linear-gradient(135deg,var(--pink),var(--pink-d));
  transition:width .25s linear}
.proof-progress-fill::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); background-size:60px 100%;
  animation:proofStripe 1.1s linear infinite}
@keyframes proofStripe{from{background-position:-60px 0} to{background-position:calc(100% + 60px) 0}}
.proof-progress-text{position:relative; font-variant-numeric:tabular-nums}
.ph-proof .hint.hint-progress{color:var(--muted); font-weight:600}

/* 최근 확인자 줄 — 옆으로 계속 흘러가는 마퀴(양쪽 끝은 흐리게) */
.hm-recent{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 88%,transparent)}
.hm-recent-track.marquee{width:max-content; gap:0; animation:hmMarquee linear infinite}
.hm-recent-group{display:flex; align-items:center; gap:9px; padding-right:9px; flex:none}
@keyframes hmMarquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.hm-recent:hover .hm-recent-track.marquee{animation-play-state:paused}
/* "동작 줄이기" 설정(회사 PC에 흔함)이어도 이 줄은 같은 속도로 흐르게 둔다 — 느린 가로 이동이라 부담이 적고, 멈추면 고장처럼 보임 */
.ph-only-note{font-size:16px; line-height:1.65; color:var(--ink); text-align:center; margin:4px 0 2px}
.ph-only-note b{color:var(--pink-d)}

/* ===== 미션 화면(새 디자인): 태그 · 제목 · 자동 집계 카드 · 미션 안내 표 · 시상품 ===== */
.ms-screen{padding:22px 18px 20px}
.ms-tags{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.ms-date{padding:5px 11px; border-radius:999px; background:var(--blue-soft); color:var(--blue-d); font-size:12.5px; font-weight:800}
.ms-tg{padding:5px 11px; border-radius:999px; background:#FFEBC2; color:#B26B00; font-size:12.5px; font-weight:800}
.ms-tg.alt{background:#E4F6EC; color:#16794A}
.ms-title{margin:0 0 6px; font-size:clamp(23px,7vw,28px); font-weight:900; line-height:1.3; letter-spacing:-.03em; color:var(--ink); word-break:keep-all}
.ms-desc{margin:0; color:var(--muted); font-size:15px; line-height:1.55; word-break:keep-all}
.ms-auto{margin-top:18px; padding:22px 18px 18px; border-radius:20px; background:var(--blue-soft); text-align:center}
.ms-auto h2{margin:0; font-size:19px; font-weight:900; letter-spacing:-.02em; color:var(--ink)}
.ms-auto .sub{margin:12px 0 0; font-size:13px; font-weight:700; color:var(--muted)}
.ms-auto .pr{margin-top:2px; font-size:16px; color:var(--muted)}
.ms-auto .pr b{font-size:38px; font-weight:900; color:var(--blue-d); letter-spacing:-.03em}
.ms-auto .bar{height:10px; margin:10px 0 10px; border-radius:99px; background:#fff; overflow:hidden}
.ms-auto .bar i{display:block; height:100%; border-radius:99px; background:var(--blue)}
.ms-auto small{display:block; font-size:12.5px; color:var(--muted); line-height:1.5}
.ms-auto p{margin:6px 0 0; font-size:14.5px; line-height:1.55; color:var(--muted)}
.ms-auto.ok{background:#E4F6EC}
.ms-auto .ck{display:inline-flex; width:56px; height:56px; margin-bottom:6px; color:#12B886}
.ms-auto .ck svg{width:56px; height:56px}
.ms-resub{display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%; height:46px; margin-top:14px; border:1.5px solid var(--blue); border-radius:12px; background:#fff; color:var(--blue-d); font-family:var(--sys); font-size:14.5px; font-weight:800; cursor:pointer}
.ms-info{margin-top:16px; padding:16px; border-radius:16px; background:#F6F8FA}
.ms-info h3{margin:0 0 6px; font-size:15px; font-weight:900; color:var(--ink); display:flex; align-items:center; gap:8px}
.ms-info h3::before{content:""; width:4px; height:16px; border-radius:2px; background:var(--blue)}
.ms-row{display:grid; grid-template-columns:72px minmax(0,1fr); gap:8px; padding:9px 0; border-top:1px solid #E7EBEF; font-size:14px; line-height:1.5}
.ms-info h3 + .ms-row{border-top:0}
.ms-row .k{color:var(--muted); font-weight:700}
.ms-row .v{color:var(--ink); font-weight:600; word-break:keep-all}
.ms-prize{margin-top:16px; padding:16px; border-radius:16px; background:#FFF3F5}
.ms-prize h3{margin:0; font-size:15px; font-weight:900; color:var(--ink); display:flex; align-items:center; gap:6px}
.ms-prize h3 svg{width:18px; height:18px; color:#E5486B}
.ms-prize .pb{margin:2px 0 10px; font-size:13px; color:var(--muted)}
.ms-pz{display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:8px}
.ms-pz .pz{padding:10px 6px; border-radius:12px; background:#fff; text-align:center}
.ms-pz .vis{display:flex; align-items:center; justify-content:center; height:64px; margin-bottom:6px; overflow:hidden}
.ms-pz .vis img{max-height:64px; max-width:100%; object-fit:contain}
.ms-pz b{display:block; font-size:12.5px; font-weight:800; color:var(--ink); line-height:1.3; word-break:keep-all}
.ms-pz small{display:block; margin-top:2px; font-size:11.5px; color:#E5486B; font-weight:800}
.ms-ok{margin-top:18px}
.ne-note b,.ne-prize b{letter-spacing:-.01em}

/* 내 당첨 내역 */
.ms-wins{margin-top:16px; padding:16px; border-radius:16px; background:#F6F8FA}
.ms-wins h3{margin:0 0 6px; font-size:15px; font-weight:900; color:var(--ink); display:flex; align-items:center; gap:8px}
.ms-wins h3::before{content:""; width:4px; height:16px; border-radius:2px; background:#F5A623}
.wh-row{display:flex; align-items:center; gap:8px; padding:10px 0; border-top:1px solid #E7EBEF; font-size:14px}
.ms-wins h3 + .wh-row{border-top:0}
.wh-row .d{flex:none; color:var(--muted); font-weight:700; font-size:13px}
.wh-row b{flex:1; min-width:0; color:var(--ink); font-weight:800; word-break:keep-all}
.wh-row .chip{flex:none; padding:4px 10px; border-radius:999px; background:#FFE9EC; color:#D8324F; font-size:12px; font-weight:800}
.wh-empty{margin:6px 0 0; color:var(--muted); font-size:14px}
.wh-more{display:block; width:100%; margin-top:8px; padding:11px; border:0; border-radius:10px; background:#fff; color:var(--blue-d); font-family:var(--sys); font-size:14px; font-weight:800; cursor:pointer}
.ms-screen #cd-slot{margin-top:14px}