/* ============================================================
 * mission_stamp.css — 미션 스탬프 이벤트(신데브 검수용)
 *   베이스 페이지(mission.jsp) 폴백 + 상시 위젯 + 클리어 카드 + 완주 오버레이 + 진입 코치마크
 *   모든 규칙은 .msn / #msnWidget / #msnOverlay / #msnClearWrap / #msnCoach 스코프 → 다른 화면 무영향.
 *   로드 = commScripts.jsp (테스터일 때만 mission_stamp.js 가 실제 DOM 생성).
 *
 *   ★ 역할 분담(2026-08-12 재디자인):
 *     - 베이스 페이지(#msnBase)는 mission_base.css 가 id 특이도로 덮어써 소유 → 여기 .msn-page/.msn-board
 *       등은 "폴백"(비베이스 화면·구버전 안전망). 특이도를 올리지 않아 베이스에선 base.css 가 이긴다.
 *     - 런타임 위젯/완주 오버레이/클리어 카드/코치마크/가드(#msnWidget·#msnOverlay·#msnClearWrap·
 *       #msnCoach·.msn-guard)는 이 파일이 단독 소유(base.css 무접촉) → 전 화면 실제 렌더.
 *   ★ 디자인 언어: 두레 딥그린 + 수확 골드 + 따뜻한 크림. 도장(스탬프) 은유 — 도장 찍힘·골드 테두리·
 *     크림 배경·명조 포인트. 시니어 가독성(큰 글씨·44px 터치). prefers-reduced-motion 존중.
 *   2026-08-11 신설 · 2026-08-12 두레생협 스탬프 재디자인
 * ============================================================ */

:root{
	--msn-green:#3d6041;
	--msn-green-d:#2c4a30;
	--msn-green-l:#eef3ea;
	--msn-ink:#2c2620;
	--msn-sub:#6b6459;
	--msn-line:#e6ddc7;
	--msn-gold:#c2872e;
	--msn-gold-l:#e6b45a;
	--msn-cream:#f6efdd;
	--msn-cream-l:#faf6ec;
	--msn-shadow:0 10px 30px rgba(44,42,32,.20);
	--msn-serif:'Nanum Myeongjo','Noto Serif KR',serif;
	--msn-sans:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
}

/* ===== 공통 버튼 ===== */
.msn-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;cursor:pointer;
	font-family:var(--msn-sans);font-weight:800;border-radius:12px;background:var(--msn-green);color:#fff;
	padding:13px 22px;font-size:15.5px;line-height:1.2;min-height:48px;letter-spacing:.01em;
	box-shadow:0 4px 12px rgba(44,74,48,.24);transition:background .15s ease,box-shadow .15s ease,transform .1s ease;}
.msn-btn:hover{background:var(--msn-green-d);box-shadow:0 6px 16px rgba(44,74,48,.3);}
.msn-btn:active{transform:translateY(1px);}
.msn-btn[disabled]{background:#c3bfa8;box-shadow:none;cursor:default;}
.msn-btn.msn-ghost{background:var(--msn-cream-l);color:var(--msn-green-d);box-shadow:inset 0 0 0 1.5px var(--msn-green);}
.msn-btn.msn-ghost:hover{background:var(--msn-green-l);box-shadow:inset 0 0 0 1.5px var(--msn-green-d);}

/* ============================================================
 * 1) 베이스 페이지 폴백 (#msnBase 없을 때 · mission_base.css 미로드 안전망)
 * ============================================================ */
.msn-page{max-width:760px;margin:0 auto;padding:22px 18px 120px;color:var(--msn-ink);
	font-family:var(--msn-sans);-webkit-font-smoothing:antialiased;}
.msn-hero{background:linear-gradient(150deg,var(--msn-green-d) 0%,var(--msn-green) 60%,#5a7d4a 100%);color:#fff;
	border-radius:22px;padding:32px 24px;text-align:center;box-shadow:var(--msn-shadow);position:relative;overflow:hidden;}
.msn-hero .msn-kicker{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.02em;
	color:var(--msn-green-d);background:linear-gradient(135deg,#f6dc94,var(--msn-gold-l));border-radius:999px;
	padding:5px 14px;margin-bottom:12px;}
.msn-hero h1{font-family:var(--msn-serif);font-size:27px;font-weight:800;line-height:1.34;margin:0 0 10px;word-break:keep-all;}
.msn-hero p{font-size:15px;line-height:1.65;opacity:.96;margin:0;word-break:keep-all;}
.msn-hero .msn-reward{display:inline-block;margin-top:16px;background:rgba(255,255,255,.16);
	border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:9px 17px;font-size:14.5px;font-weight:700;}

.msn-intro{margin:24px 0 8px;}
.msn-intro h2{font-family:var(--msn-serif);font-size:18px;font-weight:800;margin:0 0 13px;color:var(--msn-ink);}
.msn-strengths{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.msn-strengths .st{background:var(--msn-cream-l);border:1px solid var(--msn-line);border-radius:16px;padding:16px 10px;text-align:center;}
.msn-strengths .st .ic{font-size:25px;line-height:1;margin-bottom:8px;}
.msn-strengths .st b{display:block;font-size:14px;color:var(--msn-green-d);margin-bottom:4px;}
.msn-strengths .st span{display:block;font-size:12.5px;color:var(--msn-sub);line-height:1.45;word-break:keep-all;}

/* 진행 스탬프판(폴백) — 도장이 찍히는 원형 판 */
.msn-board{margin:28px 0 10px;display:flex;align-items:center;justify-content:center;gap:14px;}
.msn-board .cell{width:78px;height:78px;border-radius:50%;border:2.5px dashed var(--msn-gold-l);
	display:flex;flex-direction:column;align-items:center;justify-content:center;color:#bcae8e;
	background:var(--msn-cream-l);position:relative;transition:transform .12s ease;}
.msn-board .cell .n{font-size:11px;font-weight:800;letter-spacing:.02em;}
.msn-board .cell .stmp{font-size:23px;line-height:1;margin-bottom:2px;}
.msn-board .cell.done{border-style:solid;border-color:var(--msn-green);color:var(--msn-green-d);
	background:radial-gradient(circle at 50% 42%,#fff 0%,var(--msn-green-l) 100%);
	box-shadow:0 4px 14px rgba(61,96,65,.22),inset 0 0 0 3px rgba(255,255,255,.6);}
.msn-board .cell.done .stmp{color:var(--msn-green);transform:rotate(-10deg);}
.msn-board .link{width:16px;height:3px;background:var(--msn-line);border-radius:3px;flex:0 0 auto;}
.msn-progress-txt{text-align:center;font-size:13.5px;color:var(--msn-sub);margin:2px 0 18px;}
.msn-progress-txt b{color:var(--msn-green-d);font-weight:800;}

/* 미션 3카드(폴백) */
.msn-cards{display:flex;flex-direction:column;gap:14px;}
.msn-card{display:flex;align-items:center;gap:14px;background:var(--msn-cream-l);border:1px solid var(--msn-line);
	border-radius:18px;padding:16px;text-align:left;cursor:pointer;width:100%;
	transition:box-shadow .15s ease,border-color .15s ease,transform .1s ease;font-family:inherit;}
.msn-card:hover{border-color:var(--msn-green);box-shadow:var(--msn-shadow);}
.msn-card:active{transform:translateY(1px);}
.msn-card .badge{flex:0 0 auto;width:54px;height:54px;border-radius:16px;background:var(--msn-green-l);
	color:var(--msn-green-d);display:flex;align-items:center;justify-content:center;font-size:26px;
	box-shadow:inset 0 0 0 1.5px rgba(61,96,65,.18);}
.msn-card .bd{flex:1 1 auto;min-width:0;}
.msn-card .bd .t{font-size:16.5px;font-weight:800;color:var(--msn-ink);margin-bottom:3px;}
.msn-card .bd .d{font-size:13.5px;color:var(--msn-sub);line-height:1.45;word-break:keep-all;}
.msn-card .go{flex:0 0 auto;font-size:20px;color:#c2b795;}
.msn-card .state{flex:0 0 auto;font-size:12.5px;font-weight:800;padding:6px 11px;border-radius:999px;
	background:var(--msn-cream);color:var(--msn-sub);white-space:nowrap;}
.msn-card.done{border-color:var(--msn-green);background:#f4faf1;}
.msn-card.done .state{background:var(--msn-green);color:#fff;}
.msn-card.soon{opacity:.74;cursor:default;}
.msn-card.soon:hover{border-color:var(--msn-line);box-shadow:none;}
.msn-card.soon .state{background:#f4ead0;color:var(--msn-gold);}

.msn-page-cta{margin-top:28px;text-align:center;}
.msn-page-note{margin-top:14px;text-align:center;font-size:12.5px;color:var(--msn-sub);line-height:1.6;}

.msn-guard{max-width:520px;margin:60px auto;padding:38px 24px;text-align:center;color:var(--msn-sub);
	font-family:var(--msn-sans);}
.msn-guard .ic{font-size:42px;margin-bottom:14px;}
.msn-guard h1{font-family:var(--msn-serif);font-size:20px;color:var(--msn-ink);margin:0 0 8px;}
.msn-guard p{font-size:14.5px;line-height:1.65;margin:0;}

/* ============================================================
 * 2) 상시 위젯 (PC 원형 플로팅 / 모바일 알약) — 스탬프 배지
 * ============================================================ */
#msnWidget{position:fixed;right:18px;bottom:20px;z-index:9500;font-family:var(--msn-sans);}
#msnWidget *{box-sizing:border-box;}
#msnWidget .msn-fab{display:flex;align-items:center;gap:9px;
	background:linear-gradient(135deg,var(--msn-green) 0%,var(--msn-green-d) 100%);color:#fff;
	border:0;cursor:pointer;border-radius:999px;box-shadow:var(--msn-shadow),inset 0 0 0 1.5px rgba(230,180,90,.45);
	padding:11px 16px 11px 13px;font-family:inherit;font-weight:800;font-size:14.5px;line-height:1;
	transition:box-shadow .15s ease,transform .1s ease;}
#msnWidget .msn-fab:hover{box-shadow:0 12px 32px rgba(44,42,32,.26),inset 0 0 0 1.5px rgba(230,180,90,.7);transform:translateY(-1px);}
#msnWidget .msn-fab:active{transform:translateY(0);}
#msnWidget .msn-fab .ic{font-size:19px;}
#msnWidget .msn-fab .frac{background:rgba(255,255,255,.2);border-radius:999px;padding:3px 9px;font-size:12.5px;font-weight:800;}
#msnWidget .msn-fab .frac.full{background:linear-gradient(135deg,#f6dc94,var(--msn-gold-l));color:var(--msn-green-d);}

/* 확장 패널 (PC hover / 모바일 바텀시트) — 크림 도장판 */
#msnWidget .msn-panel{position:absolute;right:0;bottom:56px;width:280px;
	background:var(--msn-cream-l);border:1px solid var(--msn-line);border-radius:18px;box-shadow:var(--msn-shadow);
	padding:17px 16px 15px;opacity:0;visibility:hidden;transform:translateY(8px);
	transition:opacity .16s ease,transform .16s ease,visibility .16s;pointer-events:none;}
#msnWidget.open .msn-panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
@media (hover:hover) and (pointer:fine){ #msnWidget:hover .msn-panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;} }
#msnWidget .msn-panel .ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;
	padding-bottom:11px;border-bottom:1px dashed var(--msn-line);}
#msnWidget .msn-panel .ph .pt{font-family:var(--msn-serif);font-size:15.5px;font-weight:800;color:var(--msn-green-d);}
#msnWidget .msn-panel .ph .pc{font-size:12.5px;font-weight:800;color:var(--msn-gold);}
#msnWidget .msn-mini{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:13px;}
#msnWidget .msn-mini .mcell{width:54px;height:54px;border-radius:50%;border:2.5px dashed var(--msn-gold-l);
	background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#bcae8e;
	transition:transform .12s ease;}
#msnWidget .msn-mini .mcell .mi{font-size:18px;line-height:1;}
#msnWidget .msn-mini .mcell .ml{font-size:9.5px;font-weight:800;margin-top:2px;letter-spacing:.02em;}
#msnWidget .msn-mini .mcell.done{border-style:solid;border-color:var(--msn-green);
	background:radial-gradient(circle at 50% 42%,#fff,var(--msn-green-l));color:var(--msn-green-d);
	box-shadow:0 3px 10px rgba(61,96,65,.2),inset 0 0 0 2.5px rgba(255,255,255,.6);}
#msnWidget .msn-mini .mcell.done .mi{transform:rotate(-10deg);}
#msnWidget .msn-panel .pmsg{font-size:13px;color:var(--msn-sub);line-height:1.55;text-align:center;margin-bottom:13px;word-break:keep-all;}
#msnWidget .msn-panel .pbtn{width:100%;}
#msnWidget .msn-collapse{position:absolute;top:9px;right:11px;border:0;background:transparent;color:#b6ab8c;
	font-size:16px;cursor:pointer;line-height:1;padding:4px;}
/* 최소화(완전숨김 X) — 작은 원형 배지 */
#msnWidget.min .msn-fab{padding:10px;width:48px;height:48px;justify-content:center;}
#msnWidget.min .msn-fab .txt,#msnWidget.min .msn-fab .frac{display:none;}
#msnWidget.min .msn-panel{display:none;}

/* 완주·수령 후 고정 표시 — 골드 도장 */
#msnWidget.finished .msn-fab{background:linear-gradient(135deg,var(--msn-gold-l) 0%,var(--msn-gold) 100%);color:var(--msn-green-d);}
#msnWidget.finished .msn-fab:hover{box-shadow:0 12px 32px rgba(44,42,32,.28),inset 0 0 0 1.5px rgba(255,255,255,.6);}

/* ============================================================
 * 3) 클리어 카드 (1·2단계) — 도장 찍힘 카드
 *    PC=중앙 팝 / 모바일=하단 슬라이드업
 * ============================================================ */
#msnClearWrap{position:fixed;inset:0;z-index:9600;display:flex;align-items:center;justify-content:center;
	background:rgba(30,40,26,.32);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s;
	font-family:var(--msn-sans);}
#msnClearWrap.show{opacity:1;visibility:visible;}
#msnClearWrap .msn-clear{background:var(--msn-cream-l);border-radius:22px;box-shadow:var(--msn-shadow);width:min(360px,86vw);
	padding:28px 24px 22px;text-align:center;position:relative;overflow:hidden;
	transform:scale(.9);transition:transform .22s cubic-bezier(.2,.8,.3,1.2);}
#msnClearWrap.show .msn-clear{transform:scale(1);}
/* 상단 골드 스탬프 리본 */
#msnClearWrap .msn-clear::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;
	background:linear-gradient(90deg,var(--msn-gold-l),var(--msn-gold),var(--msn-gold-l));}
.msn-clear .stampfx{width:92px;height:92px;margin:6px auto 15px;border-radius:50%;
	background:radial-gradient(circle at 50% 40%,#fff,var(--msn-green-l));
	display:flex;align-items:center;justify-content:center;position:relative;
	box-shadow:0 6px 18px rgba(61,96,65,.2);}
.msn-clear .stampfx .seal{width:70px;height:70px;border-radius:50%;border:3px solid var(--msn-green);color:var(--msn-green);
	display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;
	box-shadow:inset 0 0 0 3px rgba(255,255,255,.7);
	transform:scale(2.2) rotate(-14deg);opacity:0;animation:msnSeal .5s cubic-bezier(.2,.7,.3,1.4) .1s forwards;}
@keyframes msnSeal{to{transform:scale(1) rotate(-12deg);opacity:1;}}
.msn-clear .step{font-size:13px;font-weight:800;color:var(--msn-gold);letter-spacing:.02em;margin-bottom:5px;}
.msn-clear .tt{font-family:var(--msn-serif);font-size:19px;font-weight:800;color:var(--msn-ink);margin-bottom:9px;}
.msn-clear .adv{font-size:14px;color:var(--msn-sub);line-height:1.6;margin-bottom:16px;word-break:keep-all;
	background:#fff;border:1px solid var(--msn-line);border-radius:14px;padding:13px 14px;}
.msn-clear .dots{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:16px;}
.msn-clear .dots i{width:13px;height:13px;border-radius:50%;background:#e2dcc8;transition:transform .2s ease;}
.msn-clear .dots i.on{background:var(--msn-green);}
.msn-clear .dots i.now{transform:scale(1.45);box-shadow:0 0 0 4px var(--msn-green-l);}
.msn-clear .hint{font-size:12.5px;color:var(--msn-sub);margin-bottom:14px;}
.msn-clear .msn-btn{width:100%;}

@media (max-width:640px){
	#msnClearWrap{align-items:flex-end;}
	#msnClearWrap .msn-clear{width:100%;border-radius:22px 22px 0 0;padding:24px 20px calc(22px + env(safe-area-inset-bottom,0));
		transform:translateY(100%);}
	#msnClearWrap.show .msn-clear{transform:translateY(0);}
	.msn-clear .tt{font-size:20px;}
	.msn-clear .adv{font-size:14.5px;}
}

/* ============================================================
 * 4) 완주 오버레이 (3/3 풀스크린) — 축하 도장 메달
 * ============================================================ */
#msnOverlay{position:fixed;inset:0;z-index:9700;display:flex;align-items:center;justify-content:center;
	background:rgba(20,32,18,.58);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;
	font-family:var(--msn-sans);padding:20px;}
#msnOverlay.show{opacity:1;visibility:visible;}
#msnOverlay .box{background:var(--msn-cream-l);border-radius:26px;box-shadow:var(--msn-shadow);width:min(420px,92vw);
	padding:36px 28px 26px;text-align:center;position:relative;overflow:hidden;
	transform:translateY(16px) scale(.96);transition:transform .28s cubic-bezier(.2,.8,.3,1.15);}
#msnOverlay.show .box{transform:translateY(0) scale(1);}
/* 은은한 축하 광배(도장을 감싸는 햇살) */
#msnOverlay .box::before{content:"";position:absolute;left:50%;top:-40px;width:260px;height:260px;
	transform:translateX(-50%);pointer-events:none;
	background:radial-gradient(circle,rgba(230,180,90,.22),rgba(230,180,90,0) 62%);animation:msnGlow 3s ease-in-out infinite;}
#msnOverlay .crown{position:relative;font-size:48px;line-height:1;margin-bottom:10px;
	animation:msnPop .5s cubic-bezier(.2,.7,.3,1.5) both;}
@keyframes msnPop{0%{transform:scale(0) rotate(-20deg);}70%{transform:scale(1.25) rotate(8deg);}100%{transform:scale(1) rotate(0);}}
@keyframes msnGlow{0%,100%{opacity:.7;}50%{opacity:1;}}
#msnOverlay h2{position:relative;font-family:var(--msn-serif);font-size:24px;font-weight:800;color:var(--msn-ink);margin:0 0 8px;}
#msnOverlay .sub{position:relative;font-size:14.5px;color:var(--msn-sub);line-height:1.65;margin:0 0 18px;word-break:keep-all;}
#msnOverlay .fin-board{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:20px;}
#msnOverlay .fin-board .c{width:46px;height:46px;border-radius:50%;
	background:radial-gradient(circle at 50% 40%,#4a734f,var(--msn-green-d));color:#fff;
	display:flex;align-items:center;justify-content:center;font-size:20px;
	box-shadow:0 4px 12px rgba(44,74,48,.3),inset 0 0 0 2px rgba(230,180,90,.4);}
#msnOverlay .reward{position:relative;background:linear-gradient(135deg,#fff6e2,#f8e6bf);border:1px solid #eece8b;
	border-radius:18px;padding:17px;margin-bottom:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);}
#msnOverlay .reward .amt{font-family:var(--msn-serif);font-size:27px;font-weight:800;color:var(--msn-gold);line-height:1.1;}
#msnOverlay .reward .lb{font-size:13px;font-weight:700;color:#96702a;margin-top:4px;}
#msnOverlay .msn-btn{position:relative;width:100%;font-size:16.5px;padding:15px;min-height:52px;}
#msnOverlay .result-msg{position:relative;margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--msn-green-d);min-height:1px;}
#msnOverlay .result-msg.err{color:#c0392b;}
#msnOverlay .later{position:relative;margin-top:12px;border:0;background:transparent;color:var(--msn-sub);font-size:13.5px;
	text-decoration:underline;cursor:pointer;font-family:inherit;}

/* ============================================================
 * 5) 진입 코치마크 (mtip) — 상단 중앙 배너
 * ============================================================ */
#msnCoach{position:fixed;left:50%;top:16px;transform:translateX(-50%) translateY(-14px);z-index:9400;
	max-width:min(440px,92vw);background:linear-gradient(135deg,var(--msn-green) 0%,var(--msn-green-d) 100%);color:#fff;
	border-radius:15px;box-shadow:var(--msn-shadow),inset 0 0 0 1px rgba(230,180,90,.4);
	padding:14px 44px 14px 16px;font-family:var(--msn-sans);
	opacity:0;transition:opacity .22s ease,transform .22s ease;pointer-events:auto;}
#msnCoach.show{opacity:1;transform:translateX(-50%) translateY(0);}
#msnCoach .ct{font-size:14.5px;font-weight:800;line-height:1.35;word-break:keep-all;}
#msnCoach .cs{display:block;font-size:12.5px;font-weight:500;opacity:.92;margin-top:3px;}
#msnCoach .cx{position:absolute;top:8px;right:9px;border:0;background:transparent;color:rgba(255,255,255,.85);
	font-size:17px;cursor:pointer;line-height:1;padding:3px;}

/* ============================================================
 * 접근성 — 모션 축소
 * ============================================================ */
@media (prefers-reduced-motion:reduce){
	.msn-clear .stampfx .seal{animation:none;transform:scale(1) rotate(-12deg);opacity:1;}
	#msnOverlay .crown{animation:none;}
	#msnOverlay .box::before{animation:none;}
	#msnClearWrap .msn-clear,#msnOverlay .box,#msnWidget .msn-panel{transition:opacity .12s ease;}
	#msnClearWrap .msn-clear{transform:none;}
	@media (max-width:640px){ #msnClearWrap .msn-clear{transform:none;} }
	#msnOverlay .box{transform:none;}
}

/* 2026-08-12 위젯 닫기(× 이번만) + 다시 안 보기(영구) */
#msnWidget .msn-x{position:absolute;top:-9px;right:-9px;width:24px;height:24px;border-radius:50%;border:1.5px solid #fff;background:#3d6041;color:#fff;font-size:15px;line-height:1;cursor:pointer;z-index:6;box-shadow:0 2px 6px rgba(0,0,0,.28);padding:0;display:flex;align-items:center;justify-content:center;}
#msnWidget .msn-x:hover{background:#2b4630;}
#msnWidget .msn-panel .msn-hide{display:block;width:100%;margin-top:8px;background:none;border:0;color:#8a8172;font-size:13px;text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:7px;}
#msnWidget .msn-panel .msn-hide:hover{color:#5b5346;}