/* ============================================================
 * mission_base.css — 두레몰 새단장 이벤트 베이스 페이지(mission.do) 전용
 *
 *   방향(2026-08-13 v2.2.0) = 승인 목업(모바일/PC) 그대로. "환하고 잔잔한 초대장 룩".
 *   ─ 대상 : 50~60대 조합원. 처음 해 보는 방식이라 '읽기 쉬움'이 최우선.
 *   ─ 무드 : 밝은 화이트 지배 + 차분한 포레스트 그린(#3d6041, 브랜드) + 절제된 골드(#c2872e) 포인트.
 *            겸손·따뜻한 톤(쨍한 프로모션 아님). 넉넉한 여백·또렷한 섹션·둥근 카드.
 *   ─ 글씨 : 본문 17~18px, 섹션 제목 22~28px, 히어로 28px(PC 42px). 잔글씨 하한 12.5px.
 *            터치 44px · WCAG AA 대비(밝은 배경 위 옅은 글자 금지).
 *   ─ 밝은 화이트 톤 고정 : 다크모드 기기에서도 항상 환하게(색값 직접 지정, prefers-color-scheme 미추종).
 *
 *   ★ 전부 #msnBase 스코프(전역 body/html/:root/* 금지 — 공식 헤더/풋터 누수 차단).
 *   ★ 엔진 훅(.board.msn-board .cell / .ring.stmp / .msn-card / .state / .msn-progress-txt /
 *     .msn-shot / .msn-chip / .msn-cap-t / .msn-cap-d)·의견 훅(.mcm* · #mcm*)은 마크업/JS 그대로,
 *     여기서는 '보이는 옷'만 입힌다.
 *   ★ 모바일 헤더 겹침 : 공식 모바일 헤더(.head_def)는 position:fixed(~99px, 사이트 .main_area 오프셋과 동일).
 *     → #msnBase 에 상단 여백 99px(모바일). PC 헤더(.header_wrap)는 정상 흐름(169px)이라 오프셋 불필요.
 * ============================================================ */

/* ── 디자인 토큰(#msnBase 스코프 한정) ── */
#msnBase{
	--ground:#eef3ec; --page:#ffffff; --card:#ffffff;
	--ink:#242a20; --ink-soft:#5c6353; --ink-faint:#8b9080;
	--green:#3d6041; --green-d:#2b4630; --green-soft:#e9f1e6; --green-line:#cfe0c9;
	--gold:#c2872e; --gold-soft:#f6ecd6; --gold-ink:#7a531a; --win:#b8892f;
	--bad:#d0623a;
	--line:#e7e3d7;
	--shadow:0 8px 28px rgba(40,50,30,.09); --shadow-soft:0 2px 12px rgba(40,50,30,.06);
	--r:22px; --r-sm:14px; --r-pill:999px;
	--sans:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,sans-serif;
}

/* 베이스 페이지 한정 리셋 */
#msnBase, #msnBase *{ box-sizing:border-box; }

/* 컨테이너 — 밝은 화이트. 모바일 고정헤더 회피용 상단 여백(99px). */
#msnBase{
	margin:0; padding:99px 0 0;
	font-family:var(--sans); color:var(--ink);
	background:var(--page);
	-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
	line-height:1.6; font-size:17px;
}
#msnBase .wrap{max-width:1080px; margin:0 auto; padding:0 16px 8px;}

/* 인라인 SVG 아이콘 스프라이트 */
.msn-svgdefs{position:absolute; width:0; height:0; overflow:hidden;}
#msnBase .micon{display:block; width:100%; height:100%; fill:none; stroke:currentColor;
	stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}

/* ============================================================
 * 히어로 — 밝은 화이트 + 은은한 그린 방사 + 새싹 워터마크 + 겸손 문구
 * ============================================================ */
#msnBase .hero{position:relative; overflow:hidden;
	background:radial-gradient(110% 90% at 50% -10%, var(--green-soft) 0, transparent 60%);}
#msnBase .hero .sprout{position:absolute; top:20px; right:18px; width:56px; height:56px;
	opacity:.14; color:var(--green); pointer-events:none;}
#msnBase .hin{position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:30px 20px 24px;}
#msnBase .hin .kick{display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.14em;
	color:var(--gold-ink); text-transform:uppercase;}
#msnBase .hin h1{margin:9px 0 0; font-size:28px; line-height:1.28; font-weight:800; letter-spacing:-.02em;
	color:var(--green-d); word-break:keep-all;}
#msnBase .hin h1 em{font-style:normal; font-weight:800; color:var(--green-d);}
#msnBase .hin .hsub{margin:12px 0 0; font-size:17px; line-height:1.66; color:var(--ink-soft); word-break:keep-all; max-width:60ch;}
#msnBase .hin .hsub + .hsub{margin-top:10px;}
#msnBase .hin .free{display:inline-flex; align-items:center; margin-top:16px; font-size:13.5px; font-weight:800;
	color:var(--gold-ink); background:var(--gold-soft); border-radius:var(--r-pill); padding:8px 16px;}

/* ============================================================
 * 이벤트 2블록 — 모바일 1단 / PC 2단
 * ============================================================ */
#msnBase .events{display:grid; grid-template-columns:1fr; gap:16px; align-items:start; margin-top:6px;}
#msnBase .evt{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
	box-shadow:var(--shadow); overflow:hidden;}
#msnBase .evt::before{content:""; position:absolute; top:0; left:0; right:0; height:4px;}
#msnBase .evt-1::before{background:linear-gradient(90deg,var(--green),var(--green-d));}
#msnBase .evt-2::before{background:linear-gradient(90deg,var(--gold),#e0a94a);}
#msnBase .evt-h{display:flex; align-items:center; gap:12px; padding:20px 20px 6px;}
#msnBase .evt-n{flex:0 0 auto; width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center;
	font-size:16px; font-weight:800; color:#fff;}
#msnBase .evt-1 .evt-n{background:var(--green);}
#msnBase .evt-2 .evt-n{background:var(--gold);}
#msnBase .evt-h .t{font-size:20px; font-weight:800; letter-spacing:-.01em; color:var(--ink);}
#msnBase .evt-h .t small{display:block; font-size:13.5px; font-weight:700; color:var(--ink-faint); margin-top:3px; letter-spacing:0;}
#msnBase .evt-body{padding:10px 20px 22px;}

/* ============================================================
 * 진행 스탬프판 (엔진 훅)
 * ============================================================ */
#msnBase .board{position:relative;}
#msnBase .board.msn-board{display:block;}
#msnBase .board .prog{display:flex; align-items:center; justify-content:center; gap:16px; margin:10px 0 4px;}
#msnBase .msn-board .cell{width:auto; height:auto; border:0; background:none;
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:inherit; position:relative;}
/* 도장 — 대시 원(미완) → 그린 채움(완주) */
#msnBase .msn-board .cell .stmp{width:64px; height:64px; margin:0; border-radius:50%;
	border:2.5px dashed var(--green-line); background:var(--green-soft); color:var(--green);
	display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; line-height:1;
	transition:border-color .25s ease, background .25s ease, color .25s ease, transform .2s ease;}
#msnBase .msn-board .cell .stmp .micon{width:28px; height:28px; stroke-width:1.9;}
#msnBase .msn-board .cell .l{font-size:15px; font-weight:800; color:var(--green-d); letter-spacing:-.01em;}
#msnBase .board .prog .dash{width:26px; height:0; border-top:2px dashed var(--green-line); flex:0 0 auto; align-self:center; margin-top:-18px;}
/* 완주(엔진 .done) */
#msnBase .msn-board .cell.done .stmp{border-style:solid; border-color:var(--green);
	background:var(--green); color:#fff; transform:rotate(-4deg);}
#msnBase .cnt{text-align:center; font-size:15px; color:var(--ink-faint); margin:8px 0 2px;}
#msnBase .msn-progress-txt{text-align:center; margin:8px 0 2px; font-size:15px; color:var(--ink-faint);}
/* 의견 반영 안내 v3(2026-08-15) — 아코디언(details/summary, 기본 접힘) + 상세 정리.
   폰트확대 안전: 절대배치 0 · em 단위 · 카드형 세로 스택. */
#msnBase .msn-fixed{background:var(--green-soft); border:1px solid var(--green-line); border-radius:var(--r); padding:0; margin-bottom:4px; overflow:hidden;}
#msnBase .msn-fixed-sum{display:flex; align-items:center; gap:.6em; flex-wrap:wrap; padding:1em 1.15em; cursor:pointer; list-style:none; min-height:44px;}
#msnBase .msn-fixed-sum::-webkit-details-marker{display:none;}
#msnBase .msn-fixed-sum:hover{background:rgba(61,96,65,.06);}
#msnBase .msn-fixed-cnt{flex:0 0 auto; font-size:.8em; font-weight:800; color:#fff; background:var(--green); border-radius:var(--r-pill); padding:.2em .8em; white-space:nowrap;}
#msnBase .msn-fixed-arrow{flex:0 0 auto; margin-left:auto; width:.75em; height:.75em; border:solid var(--green-d); border-width:0 .16em .16em 0; transform:rotate(45deg); transition:transform .2s ease; margin-top:-.2em;}
#msnBase .msn-fixed[open] .msn-fixed-arrow{transform:rotate(-135deg); margin-top:.2em;}
#msnBase .msn-fixed-body{padding:0 1.15em 1.1em;}
#msnBase .msn-fixed-intro{margin:.2em 0 0; font-size:.92em; color:var(--ink-soft); word-break:keep-all;}
#msnBase .msn-fixed-t{font-size:19px; font-weight:800; color:var(--green-d); letter-spacing:-.01em; word-break:keep-all;}
#msnBase .msn-fixed-t2.is-done{color:var(--green-d);}
#msnBase .msn-fixed-ls .who em{font-style:normal; font-weight:700; font-size:.85em; color:var(--ink-faint); margin-left:.3em;}
#msnBase .msn-fixed-ls{list-style:none; margin:.7em 0 0; padding:0; display:flex; flex-direction:column; gap:.5em;}
#msnBase .msn-fixed-ls li{background:var(--page); border:1px solid var(--green-line); border-radius:.8em; padding:.7em .85em; font-size:15.5px; line-height:1.6; color:var(--ink); word-break:keep-all; overflow-wrap:anywhere;}
#msnBase .msn-fixed-ls .who{display:inline-flex; align-items:center; gap:.35em; font-weight:800; color:var(--green-d); font-size:.92em;}
#msnBase .msn-fixed-ls .who::before{content:'✓'; flex:0 0 auto; width:1.15em; height:1.15em; border-radius:50%; background:var(--green); color:#fff; font-size:.8em; font-weight:800; display:inline-flex; align-items:center; justify-content:center; line-height:1;}
#msnBase .msn-fixed-ls .tx{display:block; margin-top:.2em;}
#msnBase .msn-fixed-ls b{color:var(--green-d);}
#msnBase .msn-fixed-p{margin:.8em 0 0; font-size:.85em; color:var(--ink-faint); word-break:keep-all;}
/* 진행중 섹션 — 금색 점선 카드 + 빈 원 */
#msnBase .msn-fixed-t2{margin:1em 0 0; font-size:16px; font-weight:800; color:var(--gold-ink); letter-spacing:-.01em;}
#msnBase .msn-fixed-ls.is-ing li{border-style:dashed; border-color:var(--gold);}
#msnBase .msn-fixed-ls.is-ing .who{color:var(--gold-ink);}
#msnBase .msn-fixed-ls.is-ing .who::before{content:''; background:var(--page); border:.14em solid var(--gold); box-sizing:border-box;}
#msnBase .msn-fixed-ls.is-ing b{color:var(--gold-ink);}
/* [2026-08-17] 항목 단위 상태 배지 — 두레몰 밖(외부 업체) 사안처럼 섹션 제목만으로는
   상태가 덜 읽히는 건에만 붙인다. em 단위라 글씨 확대에도 안 깨진다. */
#msnBase .msn-fixed-bg{flex:0 0 auto; margin-left:.15em; padding:.1em .5em; border-radius:var(--r-pill); background:var(--gold-ink); color:#fff; font-size:.8em; font-weight:800; white-space:nowrap;}
@media (max-width:720px){
	#msnBase .msn-fixed-ls li{font-size:16.5px;}
	#msnBase .msn-fixed-t{font-size:20px;}
}
@media (max-width:720px){
	#msnBase .msn-fixed-ls li{font-size:16px;}
	#msnBase .msn-fixed-t{font-size:19px;}
}
/* 이벤트 타이틀 앞 참여자수 배지(2026-08-13) — 도장=완주자수 · 의견=참여자수 */
#msnBase .evt-h .t .evt-cnt{display:block; width:fit-content; margin:0 0 5px; font-size:14px; font-weight:800; color:#fff;
	background:var(--green); border-radius:var(--r-pill); padding:4px 13px; letter-spacing:0;}
#msnBase .evt-h .t .evt-cnt b{color:#fff;}
#msnBase .msn-progress-txt b{color:var(--gold); font-size:17px; font-weight:900; font-variant-numeric:tabular-nums;}
#msnBase .board .lg{display:block; margin-top:8px; text-align:center; font-size:14px; line-height:1.55; color:var(--ink-faint); word-break:keep-all;}

/* ============================================================
 * 미션 2카드 (엔진 훅: .msn-card / .state) — 흰 스텝 행
 * ============================================================ */
#msnBase .msec{margin-top:14px; display:flex; flex-direction:column; gap:11px;}
#msnBase .msn-card{background:var(--page); border:1px solid var(--line); border-radius:var(--r-sm);
	padding:14px 15px; display:flex; gap:14px; align-items:center; width:100%; text-align:left; cursor:pointer;
	font-family:inherit; transition:box-shadow .18s ease, transform .12s ease, border-color .18s ease;}
#msnBase .msn-card:hover{box-shadow:var(--shadow-soft); transform:translateY(-1px); border-color:var(--green-line);}
#msnBase .msn-card:active{transform:translateY(0);}
#msnBase .msn-card .mn{width:44px; height:44px; flex:0 0 auto; border-radius:50%;
	background:var(--green-soft); color:var(--green-d);
	display:flex; align-items:center; justify-content:center; position:relative;}
#msnBase .msn-card .mn .micon{width:23px; height:23px;}
#msnBase .msn-card .mn .step{position:absolute; top:-5px; left:-5px; width:21px; height:21px; border-radius:50%;
	background:var(--gold); color:#fff; font-size:12px; font-weight:900;
	display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(122,83,26,.32);}
#msnBase .msn-card .mb{flex:1; min-width:0;}
#msnBase .msn-card .mt{font-size:17px; font-weight:800; color:var(--ink); word-break:keep-all; letter-spacing:-.01em;}
#msnBase .msn-card .md{font-size:14.5px; color:var(--ink-soft); line-height:1.55; margin-top:3px; word-break:keep-all;}
/* 우측 상태 칩 = CTA(엔진이 텍스트 갱신) — 터치 44px */
#msnBase .msn-card .state{flex:0 0 auto; display:inline-flex; align-items:center; min-height:40px; font-size:14px; font-weight:800;
	color:#fff; background:var(--green); padding:0 15px; border-radius:var(--r-pill); white-space:nowrap;}
#msnBase .msn-card.done{border-color:var(--green-line); background:var(--green-soft);}
#msnBase .msn-card.done .state{background:var(--gold);}
#msnBase .msn-card.soon{opacity:.9; cursor:default;}
#msnBase .msn-card.soon:hover{box-shadow:none; transform:none;}
#msnBase .msn-card.soon .state{background:var(--gold-soft); color:var(--gold-ink);}
@media (max-width:420px){
	#msnBase .msn-card{flex-wrap:wrap; row-gap:8px;}
	#msnBase .msn-card .mb{flex-basis:calc(100% - 58px);}
	#msnBase .msn-card .state{order:3; margin-left:auto;}
}
/* 모바일 가독성 — 참여자 배지 + 본문 텍스트 확대(2026-08-13, "잘 안 보여")
   구조요소(번호원·칩·버튼)는 제외. 본문은 word-break:keep-all 라 세로로만 늘어나 레이아웃 안 깨짐. */
@media (max-width:720px){
	#msnBase .evt-h .t .evt-cnt{font-size:16px; padding:5px 14px;}
	#msnBase .hin .hsub{font-size:18.5px; line-height:1.7;}
	#msnBase .hin h1{font-size:30px;}
	#msnBase .evt-h .t{font-size:22px;}
	#msnBase .evt-h .t small{font-size:15px;}
	#msnBase .msn-board .cell .l{font-size:16px;}
	#msnBase .cnt, #msnBase .msn-progress-txt{font-size:16.5px;}
	#msnBase .board .lg{font-size:15.5px;}
	#msnBase .msn-card .mt{font-size:18.5px;}
	#msnBase .msn-card .md{font-size:16px; line-height:1.6;}
	#msnBase .reward .rt{font-size:16.5px;}
	#msnBase .mcm .mini{font-size:16.5px;}
	#msnBase .draw{font-size:16px;}
	#msnBase .mcm-lb{font-size:16px;}
	#msnBase .mcm-once{font-size:14px;}
	#msnBase .mcm-stats{font-size:15px;}
	#msnBase .mcm-nm{font-size:16px;}
	#msnBase .mcm-row{font-size:16.5px; line-height:1.6;}
	#msnBase .feat-h p, #msnBase .msn-cap-d, #msnBase .thanks p{font-size:16.5px;}
	#msnBase .foot{font-size:13.5px;}
}

/* 보상 콜아웃 */
#msnBase .reward{display:flex; align-items:center; gap:10px; margin-top:14px; background:var(--gold-soft);
	border-radius:var(--r-sm); padding:14px 16px;}
#msnBase .reward .ic{font-size:20px; flex:0 0 auto; line-height:1;}
#msnBase .reward .rt{font-size:15px; font-weight:800; color:var(--gold-ink); word-break:keep-all; line-height:1.5;}
#msnBase .reward b{color:#5a3c0c;}

/* ============================================================
 * 이벤트 2 · 조합원 의견(.mcm)
 * ============================================================ */
#msnBase .mcm{position:relative;}
#msnBase .mcm-form{display:flex; flex-direction:column;}
#msnBase .mcm .mini{font-size:15.5px; color:var(--ink-soft); line-height:1.6; margin:2px 0 12px; word-break:keep-all;}
#msnBase .mcm .mini b{color:var(--green-d); font-weight:800;}
/* 만족도 3버튼 */
#msnBase .mcm-moods{display:flex; gap:8px; margin:0 0 12px;}
#msnBase .mcm-mood{flex:1; min-height:48px; border-radius:12px; border:1.5px solid var(--line); background:var(--page);
	color:var(--ink-soft); font-size:15.5px; font-weight:800; cursor:pointer; font-family:inherit;
	transition:background .15s ease, color .15s ease, border-color .15s ease;}
#msnBase .mcm-mood.is-on{background:var(--green); color:#fff; border-color:var(--green);}
#msnBase .mcm-mood:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
/* 작성 라벨·입력 */
#msnBase .mcm-lb{display:inline-flex; font-size:15px; font-weight:800; color:var(--green-d); margin:2px 0 6px; letter-spacing:-.01em;}
#msnBase .mcm-ta{width:100%; min-height:100px; resize:vertical; font-family:var(--sans); font-size:16.5px;
	line-height:1.6; color:var(--ink); background:var(--page);
	border:1.5px solid var(--line); border-radius:var(--r-sm); padding:13px 14px;
	transition:border-color .18s ease, box-shadow .18s ease;}
#msnBase .mcm-ta::placeholder{color:var(--ink-faint);}
#msnBase .mcm-ta:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(61,96,65,.16);}
/* 남기기 버튼 */
#msnBase .mcm-actions{display:flex; margin-top:11px;}
#msnBase .mcm-btn{width:100%; display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 22px;
	border:0; cursor:pointer; font-family:var(--sans); font-size:17px; font-weight:800; letter-spacing:-.01em;
	border-radius:var(--r-pill); color:#fff; background:var(--green);
	transition:background .15s ease, transform .12s ease;}
#msnBase .mcm-btn:hover{background:var(--green-d); transform:translateY(-1px);}
#msnBase .mcm-btn:active{transform:translateY(0);}
#msnBase .mcm-btn[disabled]{opacity:.55; cursor:default; transform:none;}
#msnBase .mcm-btn:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
#msnBase .mcm-once{margin:11px 0 0; font-size:13px; line-height:1.55; color:var(--ink-faint); word-break:keep-all;}
/* 오류(인라인) — 당첨/미당첨/안내는 팝업(모달)로 */
#msnBase .mcm-result{margin-top:12px; padding:12px 14px; border-radius:var(--r-sm); font-size:15px; font-weight:700; line-height:1.5;}
#msnBase .mcm-result.err{background:#fdeae2; color:#a5361c; border:1px solid rgba(200,72,15,.28);}

/* 당첨 안내 배너(작은 카드) */
#msnBase .draw{display:flex; align-items:center; gap:9px; margin-top:13px; background:var(--green-soft);
	border-radius:var(--r-sm); padding:13px 15px; font-size:14.5px; font-weight:700; color:var(--green-d); line-height:1.55; word-break:keep-all;}
#msnBase .draw b{font-weight:800;}
/* 통계 */
#msnBase .mcm-stats{text-align:center; font-size:14px; color:var(--ink-faint); margin-top:13px; word-break:keep-all;}
#msnBase .mcm-stats b{color:var(--gold); font-weight:900; font-variant-numeric:tabular-nums;}

/* 만족도 비중 막대 — 폭은 JS 가 CSS 변수(--f)로 설정(소스 인라인 style 미사용) */
#msnBase .satis{margin-top:12px;}
#msnBase .satis-bar{display:flex; height:12px; border-radius:var(--r-pill); overflow:hidden; background:var(--line);}
#msnBase .satis-bar span{display:block; flex-grow:var(--f,0); flex-basis:0; min-width:0;}
#msnBase .satis-bar .good{background:var(--green);}
#msnBase .satis-bar .mid{background:var(--gold);}
#msnBase .satis-bar .bad{background:var(--bad);}
#msnBase .satis-leg{display:flex; justify-content:center; gap:14px; margin-top:9px; font-size:12.5px; font-weight:800; color:var(--ink-soft); flex-wrap:wrap;}
#msnBase .satis-leg i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:middle;}
#msnBase .satis-leg i.good{background:var(--green);}
#msnBase .satis-leg i.mid{background:var(--gold);}
#msnBase .satis-leg i.bad{background:var(--bad);}
#msnBase .satis-leg b{font-weight:800;}

/* 목록 헤더 + 목록 */
#msnBase .mcm-listhead{margin-top:16px; border-top:1px dashed var(--line); padding-top:14px;}
#msnBase .mcm-listhead-t{font-family:var(--sans); font-weight:800; font-size:16px; color:var(--green-d); letter-spacing:-.01em;}
#msnBase .mcm-list{margin-top:12px; display:flex; flex-direction:column; gap:11px;}
#msnBase .mcm-item{position:relative; background:var(--page); border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 15px;
	transition:box-shadow .18s ease, transform .12s ease;}
#msnBase .mcm-item:hover{box-shadow:var(--shadow-soft); transform:translateY(-1px);}
#msnBase .mcm-item.win{border-color:var(--gold); background:linear-gradient(180deg,#fffdf4,#faf3e0);}
#msnBase .mcm-item.mine{border-color:var(--green-line); background:var(--green-soft);}
#msnBase .mcm-item.win.mine{border-color:var(--gold);}
#msnBase .mcm-item.is-extra{display:none;}
#msnBase .mcm-list.expanded .mcm-item.is-extra{display:block;}
#msnBase .mcm-item-h{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:5px;}
#msnBase .mcm-nm{font-size:14.5px; font-weight:800; color:var(--green-d);}
/* 가입연차 공식 뱃지(2026-08-13 개편) — 초록 실드 + 체크 씰 = "공식 인증" 느낌 */
#msnBase .mcm-coop{flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:800; color:#fff;
	background:linear-gradient(180deg,var(--green),var(--green-d)); border-radius:var(--r-pill); padding:2px 10px 2px 7px; white-space:nowrap;
	box-shadow:0 1px 2px rgba(45,90,60,.20);}
#msnBase .mcm-coop-ck{width:13px; height:13px; border-radius:50%; background:#fff; position:relative; flex:0 0 auto;}
#msnBase .mcm-coop-ck::after{content:''; position:absolute; left:4px; top:2px; width:3px; height:6px;
	border:solid var(--green-d); border-width:0 2px 2px 0; transform:rotate(42deg);}
/* 등록일 — 헤더 우측 정렬, 옅게 */
#msnBase .mcm-date{flex:0 0 auto; margin-left:auto; font-size:11px; font-weight:700; color:var(--ink-faint); white-space:nowrap;}
/* 회원생협명 칩 */
#msnBase .mcm-prop{flex:0 0 auto; display:inline-flex; align-items:center; font-size:11.5px; font-weight:800; color:var(--ink-soft);
	background:var(--page); border:1px solid var(--line); border-radius:var(--r-pill); padding:1px 9px; white-space:nowrap;}
/* 당첨! 마크 */
#msnBase .mcm-badge{flex:0 0 auto; display:inline-flex; align-items:center; font-size:11.5px; font-weight:800; color:#fff;
	background:var(--win); border-radius:var(--r-pill); padding:1px 10px; white-space:nowrap;}
/* 반영 상태 마크(2026-08-15) — Y=반영했어요(그린) / P=개선 진행중(골드 아웃라인) */
#msnBase .mcm-apply{flex:0 0 auto; display:inline-flex; align-items:center; font-size:11.5px; font-weight:800; border-radius:var(--r-pill); padding:1px 10px; white-space:nowrap;}
#msnBase .mcm-apply.is-y{color:#fff; background:var(--green);}
#msnBase .mcm-apply.is-p{color:var(--gold-ink); background:var(--gold-soft); border:1px solid var(--gold);}
/* 내 의견 태그 */
#msnBase .mcm-me-tag{flex:0 0 auto; display:inline-flex; align-items:center; font-size:11.5px; font-weight:800; color:#fff;
	background:var(--green-d); border-radius:var(--r-pill); padding:1px 10px; white-space:nowrap;}
#msnBase .mcm-row{font-size:15.5px; line-height:1.55; color:var(--ink); word-break:break-word;}
#msnBase .mcm-row-empty{color:var(--ink-faint); font-weight:600; font-size:14px;}
#msnBase .mcm-empty{text-align:center; color:var(--ink-faint); font-size:14.5px; padding:16px 0;}
/* 본인 글 수정 */
#msnBase .mcm-item-act{display:flex; justify-content:flex-end; margin-top:10px;}
#msnBase .mcm-mini{min-height:40px; padding:0 18px; cursor:pointer; font-family:var(--sans); font-size:14px; font-weight:800;
	color:var(--green-d); background:var(--page); border:1px solid var(--green-line); border-radius:var(--r-pill);
	transition:background .15s ease;}
#msnBase .mcm-mini:hover{background:var(--green-soft);}
#msnBase .mcm-mini:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
/* 더보기 */
#msnBase .mcm-more{display:block; width:100%; margin-top:12px; min-height:48px; border:1px solid var(--line); border-radius:12px;
	background:var(--page); color:var(--green); font-size:15px; font-weight:800; cursor:pointer; font-family:var(--sans);
	transition:background .15s ease;}
#msnBase .mcm-more[hidden]{display:none;}   /* 2026-08-13 display:block 가 hidden 을 덮어 클릭 후에도 버튼·숫자가 남던 버그 수정 */
#msnBase .mcm-more:hover{background:var(--green-soft);}
#msnBase .mcm-more:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}

/* ============================================================
 * 결과 팝업(모달) — 당첨(골드)/미당첨(그린)/안내(중립)
 * ============================================================ */
#msnBase .mcm-modal{position:fixed; inset:0; background:rgba(20,30,15,.5);
	display:flex; align-items:center; justify-content:center; z-index:2000; padding:22px;}
#msnBase .mcm-modal[hidden]{display:none;}
#msnBase .mcm-modal-c{max-width:360px; width:100%; background:var(--card); border-radius:20px; padding:28px 24px 22px;
	text-align:center; box-shadow:0 22px 54px rgba(0,0,0,.34);}
#msnBase .mcm-modal-tag{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.06em; padding:5px 13px;
	border-radius:var(--r-pill); margin-bottom:13px; background:var(--green-soft); color:var(--green); border:1.5px solid var(--green-line);}
#msnBase .mcm-modal.win .mcm-modal-tag{background:linear-gradient(135deg,#fdf1d0,#f4dc98); color:#6f4711; border:1.5px solid var(--gold);}
#msnBase .mcm-modal.lose .mcm-modal-tag{background:var(--green-soft); color:var(--green); border:1.5px solid var(--green-line);}
#msnBase .mcm-modal-t{font-size:22px; font-weight:800; letter-spacing:-.01em; color:var(--green-d);}
#msnBase .mcm-modal.win .mcm-modal-t{color:#6f4711;}
#msnBase .mcm-modal-d{font-size:15px; color:var(--ink-soft); margin-top:9px; line-height:1.55; word-break:keep-all;}
#msnBase .mcm-modal-btn{margin-top:19px; width:100%; min-height:52px; border:0; border-radius:var(--r-pill);
	background:var(--green); color:#fff; font-size:16.5px; font-weight:800; cursor:pointer; font-family:var(--sans);}
#msnBase .mcm-modal-btn:hover{background:var(--green-d);}
#msnBase .mcm-modal-btn:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}

/* ============================================================
 * 무엇이 좋아졌나요 — 인터랙티브 쇼케이스
 * ============================================================ */
#msnBase .feat-h{text-align:center; margin-top:34px;}
#msnBase .feat-h .k{font-size:12.5px; font-weight:800; letter-spacing:.12em; color:var(--gold-ink); text-transform:uppercase;}
#msnBase .feat-h h2{margin:7px 0 0; font-size:24px; font-weight:800; color:var(--green-d); letter-spacing:-.01em;}
#msnBase .feat-h p{margin:8px 0 0; font-size:15px; color:var(--ink-soft); word-break:keep-all;}
#msnBase .show{margin-top:20px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
	padding:24px 18px 20px;}
#msnBase .msn-stage{display:flex; flex-direction:column; align-items:center; gap:16px;}
/* 폰 프레임 */
#msnBase .msn-phone{flex:0 0 auto; width:min(70vw,238px); padding:10px 10px 12px; border-radius:34px;
	background:linear-gradient(160deg,#37543d,#20361f); box-shadow:0 18px 42px rgba(20,34,18,.30);}
#msnBase .msn-phone-scr{position:relative; width:100%; aspect-ratio:390/844; border-radius:25px; overflow:hidden; background:#fff;}
#msnBase .msn-shot{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;
	opacity:0; transition:opacity .4s ease;}
#msnBase .msn-shot.is-on{opacity:1;}
#msnBase .msn-feat-side{width:100%; max-width:420px; text-align:center;}
#msnBase .msn-cap{min-height:70px;}
#msnBase .msn-cap-t{font-size:19px; font-weight:800; color:var(--green-d); letter-spacing:-.01em;}
#msnBase .msn-cap-d{font-size:15px; color:var(--ink-soft); margin-top:7px; line-height:1.55; word-break:keep-all; max-width:36ch; margin-left:auto; margin-right:auto;}
#msnBase .msn-feat-hint{font-size:13px; font-weight:800; color:var(--gold-ink); margin-top:12px;}
#msnBase .msn-tabs{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:13px;}
#msnBase .msn-chip{min-height:44px; padding:9px 15px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--card);
	color:var(--ink-soft); font-size:14.5px; font-weight:800; cursor:pointer; font-family:var(--sans);
	transition:background .15s ease, color .15s ease, border-color .15s ease;}
#msnBase .msn-chip.is-sel{background:var(--green); color:#fff; border-color:var(--green);}
#msnBase .msn-chip:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}

/* ============================================================
 * 마무리 · 감사 · 장보기 초대
 * ============================================================ */
#msnBase .closing{margin-top:26px; background:var(--green-soft); border:1px solid var(--green-line); border-radius:var(--r-sm);
	padding:18px 20px; text-align:center; font-size:16px; font-weight:700; color:var(--green-d); line-height:1.6; word-break:keep-all;}
#msnBase .closing b{font-weight:800; color:var(--green);}
#msnBase .thanks{margin-top:16px; text-align:center; background:var(--card); border:1px solid var(--line);
	border-radius:var(--r); box-shadow:var(--shadow-soft); padding:28px 22px;}
#msnBase .thanks .tk{width:56px; height:56px; margin:0 auto 13px; border-radius:50%;
	background:var(--green-soft); color:var(--green-d); display:flex; align-items:center; justify-content:center;}
#msnBase .thanks .tk .micon{width:28px; height:28px;}
#msnBase .thanks .tt{font-family:var(--sans); font-weight:800; color:var(--green-d); font-size:21px; letter-spacing:-.01em;}
#msnBase .thanks p{font-size:16px; color:var(--ink-soft); line-height:1.66; margin-top:10px; max-width:40ch; margin-left:auto; margin-right:auto; word-break:keep-all;}
#msnBase .msn-shopcta{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:54px; margin-top:18px;
	padding:0 30px; border-radius:var(--r-pill); background:var(--green); color:#fff;
	font-size:17px; font-weight:800; text-decoration:none; letter-spacing:-.01em;
	transition:background .15s ease, transform .12s ease;}
#msnBase .msn-shopcta .ic{width:22px; height:22px; flex:0 0 auto;}
#msnBase .msn-shopcta:hover{background:var(--green-d); transform:translateY(-1px);}
#msnBase .msn-shopcta:active{transform:translateY(0);}

/* 마감 안내(경량) */
#msnBase .foot{text-align:center; padding:20px 18px 32px; color:var(--ink-faint); font-size:12.5px; line-height:1.6;}
#msnBase .foot .fnote{color:var(--ink-faint); font-size:12.5px; line-height:1.6;}

/* ── 준비 중 가드(비테스터/기간밖) ── */
.msn-guard{max-width:560px; margin:80px auto; padding:0 22px; text-align:center; font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;}
.msn-guard h1{font-size:24px; font-weight:800; color:#2b4630; letter-spacing:-.01em;}
.msn-guard p{margin-top:12px; font-size:16px; color:#5c6353; line-height:1.7;}

/* ── 키보드 포커스 가시성(a11y) ── */
#msnBase .msn-card:focus-visible{outline:3px solid var(--green); outline-offset:2px;}
#msnBase .msn-shopcta:focus-visible{outline:3px solid var(--gold); outline-offset:3px;}
#msnBase a:focus-visible{outline:3px solid var(--gold-ink); outline-offset:2px; border-radius:6px;}

/* ============================================================
 * PC(≥721) — 상단 오프셋 제거(헤더 정상흐름) · 이벤트 2단 · 쇼케이스 좌우
 * ============================================================ */
@media (min-width:721px){
	#msnBase{padding-top:0; font-size:17px;}
	#msnBase .wrap{padding:0 28px 8px;}
	#msnBase .hin{padding:48px 28px 28px; text-align:center;}
	#msnBase .hin h1{font-size:42px; line-height:1.24;}
	#msnBase .hin .hsub{font-size:18px; margin-left:auto; margin-right:auto; max-width:58ch;}
	#msnBase .hero .sprout{top:34px; right:calc(50% - 500px); width:64px; height:64px;}
	#msnBase .events{grid-template-columns:1fr 1fr; gap:22px;}
	/* 의견 반영 안내(.msn-fixed)는 2단 그리드 전체 폭 차지 — 이벤트 2카드 나란히 유지(2026-08-14 디자인 깨짐 수정) */
	#msnBase .msn-fixed{grid-column:1 / -1;}
	#msnBase .evt-h{padding:24px 24px 8px;}
	#msnBase .evt-h .t{font-size:22px;}
	#msnBase .evt-body{padding:10px 24px 24px;}
	#msnBase .msn-board .cell .stmp{width:70px; height:70px;}
	/* 쇼케이스 = 폰 왼쪽 · 칩 오른쪽 */
	#msnBase .show{padding:34px 28px;}
	#msnBase .msn-stage{flex-direction:row; align-items:center; justify-content:center; gap:44px; flex-wrap:wrap;}
	#msnBase .msn-phone{width:250px;}
	#msnBase .msn-feat-side{text-align:left; max-width:400px;}
	#msnBase .msn-cap-d{margin-left:0; margin-right:0;}
	#msnBase .msn-feat-hint{}
	#msnBase .msn-tabs{justify-content:flex-start;}
	#msnBase .feat-h{margin-top:40px;}
	#msnBase .feat-h h2{font-size:28px;}
	#msnBase .closing{margin-top:34px;}
}

/* ============================================================
 * 모션 — reduced-motion 존중
 * ============================================================ */
@media (prefers-reduced-motion:reduce){
	#msnBase .msn-card, #msnBase .msn-board .cell .stmp, #msnBase .msn-shot,
	#msnBase .mcm-btn, #msnBase .mcm-ta, #msnBase .mcm-item, #msnBase .mcm-mini,
	#msnBase .msn-shopcta, #msnBase .mcm-mood, #msnBase .msn-chip{transition:none;}
	#msnBase .msn-board .cell.done .stmp{transform:none;}
}