/**
 * 멤버십 페이지(/membership/) — page-membership.php · inc/membership-hub.php · js/membership.js
 *
 * 틀은 AI 활용(css/ai-hub.css — Recraft R2)을 그대로 쓰고, 여기엔 멤버십에만 있는 부품만 둔다.
 * 2026-10-09 운영자 결정(시안 3차): N1(AI 활용과 같은 틀) + N4(Dribbble Pro)의 「등급과 혜택」·「채널 연결」 안내.
 *   N4 의 분홍 체크·알약 단추는 사이트 규칙(채움 = --brand-action · 6px 모서리 · 성공이 아닌 체크는 --primary)으로 바꿨다.
 * 2026-10-10 4·5차: 띠·등급 카드 세 장을 걷고 첫 화면 = 가 연동 안내 + 다 기울어진 창 + 나 혜택 띠(아래 「첫 화면」 절). 그림 위 자물쇠·재생 시간 받침은 정본 덮개 토큰(--overlay·--overlay-strong).
 * 사이트 규칙과 다른 점(운영자가 다른 점을 보고 고른 시안): 비법 노트 카드(Runway) 바탕 #EEEDE7(누런빛 회색) · 꼬리표 둥근 끝(8차 「나」).
 * !important·흐림 없음. 그라디언트는 창 넘김 양 끝 사라짐(mask) 하나뿐(CLAUDE.md 예외 줄). 바탕 빛 띠는 페이지 바탕이 흰색으로 통일되며 걷었다(2026-10-10).
 */

/* ── 첫 화면(2026-10-10 운영자 5차 「가 안내문 위에 · 다 스타일 슬라이드 채용 · 나 스타일 멤버십 혜택안내 적용」) ──
 * 위 = 연동 안내 · 가운데 = 기울어진 창 넘김(다 Melius) · 아래 = 가는 선 밑 혜택 줄(나 MasterClass 의 배치).
 * 바탕: 6차 「배경 색이 달라서 어색합니다」 → 7차 흰 판 한 장 → 7차 「페이지는 회색인데 멤버십 영역만 흰색 — 그라데이션? 또는 다른 방법으로」
 *   → 8차: 판(흰 바탕 · 18px 모서리)을 걷고 페이지 바탕에 흰 빛 띠(운영자 「가. 빛 띠」)
 *   → 같은 날 운영자 「배경색은 #fff로 통일」: 페이지 바탕이 흰색이 되어 띠도 걷었다 — 판 없이 흰 페이지 위에 바로 놓인다.
 *   창 넘김 양 끝은 첫 화면 끝에서 잘려 보이지 않게 바탕으로 사라진다(mask).
 * 세 시안의 단추 색(파랑·주황·빨강)을 한 판에 섞으면 어지러워 채움 하나(--mh-act)로 모았다 — 사이트 채움 초록(운영자 6차 「가. 사이트 초록」).
 * 창 테두리 + 그림자는 창 그림의 일부. */
.msh-hero {
	--mh-ink: var(--gray-900);
	--mh-sub: var(--gray-600);
	--mh-act: var(--brand-action);
	--mh-act-hover: var(--brand-hover);
	position: relative; margin-top: 22px; padding-top: 30px; text-align: center; /* 잘라 가두기는 창 넘김 줄만(.msh-ring) — (i) 안내 창이 첫 화면 아래로 나가도 보이게 */
}
.msh .msh-hero-lock { display: inline-flex; align-items: flex-start; gap: 8px; margin: 0 24px 18px; padding: 10px 14px; border-radius: 6px; background: var(--color-info-bg); color: var(--color-info-text); font-size: 13.5px; line-height: 1.5; text-align: left; }
.msh-hero-lock svg { flex: none; margin-top: 2px; }
.msh-hero-con { position: relative; padding: 0 24px; }
.msh .msh-hero-eye { margin: 0; font-size: 15px; font-weight: 600; color: var(--gray-500); }
.msh .msh-hero-h { margin: 4px 0 0; font-size: 30px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; color: var(--mh-ink); text-wrap: balance; }
.msh .msh-hero-sub { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--mh-sub); }
.msh-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: 16px; }
.msh .msh-hero-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 6px; background: var(--mh-act); color: var(--text-white); font-size: 15px; font-weight: 600; }
.msh .msh-hero-btn:hover { background: var(--mh-act-hover); color: var(--text-white); }
.msh .msh-hero-lnk { display: inline-flex; align-items: center; gap: 2px; font-size: 15px; color: var(--primary); }
.msh .msh-hero-lnk:hover { color: var(--primary-dark); }
.msh-hero-lnk svg { width: 15px; height: 15px; }
.msh .msh-hero-btn:focus-visible,
.msh .msh-hero-lnk:focus-visible,
.msh .msh-win:focus-visible,
.msh .msh-ring-nav button:focus-visible,
.msh .msh-plan-btn:focus-visible,
.msh .msh-pop-go:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 다 — 기울어진 창(최근 라이브 7편) · ← 진행 줄 →. data-pos 는 js/membership.js 3절이 바꾼다 */
.msh-ring { margin-top: 24px; padding: 16px 0 14px; overflow: hidden; }
.msh-ring-stage {
	position: relative; height: 190px; perspective: 1100px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
}
.msh .msh-win {
	position: absolute; left: 50%; top: 50%; width: 220px; margin: -70px 0 0 -110px; padding: 0 7px 7px;
	border: 1px solid var(--gray-200); border-radius: 3px; background: var(--surface-white); box-shadow: 0 16px 34px rgba(20, 20, 30, .14);
	opacity: 0; visibility: hidden; transition: transform .9s cubic-bezier(.4, 0, .2, 1), opacity .9s, visibility .9s;
}
.msh-win-bar { display: flex; align-items: center; justify-content: space-between; height: 18px; padding: 0 2px; }
.msh-win-bar i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #E5484D; } /* 창 그림의 빨간 점(Melius) */
.msh-win-bar span { font-size: 10px; letter-spacing: .1em; color: var(--gray-400); }
.msh-win-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--gray-100); }
.msh-win-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.msh .msh-win[data-pos="0"] { transform: translateX(0) rotateY(0) scale(1.1); opacity: 1; visibility: visible; z-index: 5; }
.msh .msh-win[data-pos="1"] { transform: translateX(240px) rotateY(-6deg); opacity: 1; visibility: visible; z-index: 4; }
.msh .msh-win[data-pos="-1"] { transform: translateX(-240px) rotateY(6deg); opacity: 1; visibility: visible; z-index: 4; }
.msh .msh-win[data-pos="2"] { transform: translateX(446px) rotateY(-30deg) scale(1.06); opacity: 1; visibility: visible; z-index: 3; }
.msh .msh-win[data-pos="-2"] { transform: translateX(-446px) rotateY(30deg) scale(1.06); opacity: 1; visibility: visible; z-index: 3; }
.msh .msh-win[data-pos="3"] { transform: translateX(620px) rotateY(-40deg); }
.msh .msh-win[data-pos="-3"] { transform: translateX(-620px) rotateY(40deg); }
.msh-ring-nav { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 14px; }
.msh .msh-ring-nav button { display: flex; padding: 4px; border: 0; border-radius: 6px; background: none; color: var(--mh-ink); cursor: pointer; }
.msh .msh-ring-nav button:hover { background: none; color: var(--mh-act); }
.msh-ring-prog { position: relative; display: block; width: 112px; height: 2px; background: var(--gray-200); }
.msh-ring-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 30px; background: var(--mh-act); transition: left .9s; }

/* 나 — 혜택 띠(아직 멤버가 아닌 사람만). [Plus]·[Premium] → 띠 위로 혜택 창(js/membership.js 4절) */
.msh-hero-bar { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin: 8px 24px 0; padding: 14px 0 16px; border-top: 1px solid var(--gray-200); text-align: left; scroll-margin-top: calc(var(--aih-top) + 160px); }
.msh .msh-hero-bar-t { margin: 0; font-size: 14px; color: var(--gray-600); }
.msh-hero-bar-t b { margin-right: 8px; font-weight: 700; color: var(--mh-ink); }
.msh-hero-plans { display: flex; gap: 8px; }
.msh .msh-plan-btn { height: 38px; padding: 0 18px; border: 0; border-radius: 6px; background: var(--surface-white); box-shadow: inset 0 0 0 1.5px var(--mh-ink); color: var(--mh-ink); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.msh .msh-plan-btn:hover { background: var(--gray-50); color: var(--mh-ink); }
.msh .msh-plan-btn.is-fill { background: var(--mh-act); box-shadow: none; color: var(--text-white); }
.msh .msh-plan-btn.is-fill:hover { background: var(--mh-act-hover); color: var(--text-white); }
.msh-pop { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 6; width: 300px; padding: 20px 20px 16px; border-radius: 8px; background: var(--surface-white); box-shadow: 0 18px 50px rgba(0, 0, 0, .2); text-align: left; }
.msh-pop[hidden] { display: none; }
.msh-pop > b { display: block; font-size: 17px; color: var(--mh-ink); }
.msh-pop-price { display: block; margin-top: 2px; font-size: 13px; color: var(--gray-500); }
.msh .msh-pop ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.msh-pop li { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.45; color: var(--text-primary); }
.msh-pop li svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--mh-act); }
.msh .msh-pop-go { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; margin-top: 16px; border-radius: 6px; background: var(--mh-act); color: var(--text-white); font-size: 14px; font-weight: 700; }
.msh .msh-pop-go:hover { background: var(--mh-act-hover); color: var(--text-white); }
.msh-pop-go svg { width: 16px; height: 16px; }
.msh-pop small { display: block; margin-top: 10px; font-size: 12px; color: var(--gray-500); text-align: center; }
@media (prefers-reduced-motion: reduce) {
	.msh .msh-win,
	.msh-ring-prog i { transition: none; }
}

/* ── 안내 한 줄(목록 화면 — 쇼츠 예제 파일 잠금 안내) ── */
.msh-me { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 13.5px; color: var(--aih-text); }
.msh-me > svg { flex: none; color: var(--aih-sub); }
.msh-me--plus > svg,
.msh-me--premium > svg { color: var(--color-success); }
.msh-me p { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; min-width: 0; margin: 0; } /* 테마 p 아래 여백(1.5em)이 남으면 아이콘이 글자보다 처진다 — ai-hub.css 의 :where 정리는 명시도 0 이라 못 이긴다 */
.msh-me b { font-weight: 600; }
.msh-me span { color: var(--aih-sub); }
.msh .msh-me > a { margin-left: auto; flex: none; font-weight: 600; color: var(--aih-text); border-bottom: 1px solid currentColor; }
.msh .msh-me > a:hover { color: var(--primary); }

/* ── 줄 머리(최근 라이브 · 비법 노트) ── */
.msh-h { display: flex; align-items: baseline; gap: 8px; margin: 34px 0 14px; font-size: 15px; font-weight: 600; color: var(--aih-text); }
.msh-h small { font-size: 12.5px; font-weight: 400; color: var(--aih-sub); }
.msh .msh-h a { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--aih-sub); }
.msh .msh-h a:hover { color: var(--aih-text); }
/* ── 멤버십 잠금(2026-10-12 운영자 「멤버십 라이브, 1분 오피스 팁 등 멤버십 페이지는 멤버십 연동 + 가입된 회원만 · 나머지는 블러 + 가입 안내」) ──
 * 목록 화면(라이브 · 1분 오피스 팁 · 비법 노트)만 — 홈은 누구나. 마크업 = inc/membership-hub.php oppadu_msh_gate · oppadu_msh_gate_card.
 * 뒤 = 그 화면 그대로를 흐리고 옅게(누를 수 없음 · inert) · 앞 = 흰 안내 카드(그림자만, 테두리 없음). 모션 스타일 갤러리 잠금(.msl-gate-*)과 한 벌.
 * ⚠️ filter: blur 는 사이트 규칙의 예외 — 운영자 「블러 처리」(CLAUDE.md 예외 줄). 오빠두 규칙으로 덮지 말 것 */
.msh-gated { position: relative; }
.msh-gated-bg { max-height: 880px; overflow: hidden; opacity: 0.55; filter: blur(6px); pointer-events: none; user-select: none; }
.msh-gate { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: center; padding: 150px 16px 24px; }
.msh-gate-card { width: min(100%, 400px); padding: 28px 28px 22px; border-radius: 8px; background: var(--surface-white); box-shadow: var(--shadow-lg); text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.msh-gate-ico { display: inline-flex; color: var(--gray-500); }
.msh .msh-gate-eye { margin: 10px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--gray-500); }
.msh .msh-gate-h { margin: 6px 0 0; padding: 0; border: 0; font-size: 19px; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; color: var(--gray-900); }
.msh .msh-gate-d { margin: 8px 0 0; font-size: 14px; line-height: 1.65; color: var(--text-primary); }
.msh-gate-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; } /* 위아래로 — 400 폭 반 칸엔 「유튜브 채널 연동하기」가 안 들어간다 */
.msh .msh-gate-form { margin: 0; }
.msh .msh-gate-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 42px; margin: 0; padding: 0 16px; border: 1px solid var(--gray-300); border-radius: var(--radius-md); background: var(--surface-white); color: var(--gray-800); font-size: 14.5px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; }
.msh .msh-gate-btn:hover,
.msh .msh-gate-btn:focus { background: var(--gray-50); color: var(--gray-900); }
.msh .msh-gate-btn--fill { border-color: var(--brand-action); background: var(--brand-action); color: var(--surface-white); }
.msh .msh-gate-btn--fill:hover,
.msh .msh-gate-btn--fill:focus { border-color: var(--brand-hover); background: var(--brand-hover); color: var(--surface-white); }
.msh .msh-gate-btn:focus-visible,
.msh .msh-gate-more a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.msh .msh-gate-foot { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--gray-500); }
.msh .msh-gate-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 10px 0 0; }
.msh .msh-gate-more a { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; line-height: 1.5; color: var(--gray-600); }
.msh .msh-gate-more a:hover { color: var(--gray-900); text-decoration: underline; text-underline-offset: 3px; }
.msh-gate-more svg { width: 15px; height: 15px; }
@media (max-width: 1024px) {
	.msh-gate { padding-top: 40px; }
	.msh-gated-bg { max-height: 760px; }
}
@media (max-width: 420px) {
	.msh-gate-card { padding: 24px 20px 18px; }
}

/* 10/12 운영자 「비법 노트는 맨 아래, 준비중으로」 — 홈 맨 아래 이름 줄 + 한 줄 안내(카드 없음). 메뉴는 .aih-nav-soon(css/ai-hub.css) */
.msh .msh-soon { margin: 0; font-size: 14px; line-height: 1.6; color: var(--aih-sub); }

/* ── 카드 위 자물쇠·등급 · 재생 시간 — 배지 6px ── */
.msh-tier {
	position: absolute; left: 8px; top: 8px; z-index: 2;
	display: inline-flex; align-items: center; gap: 4px;
	padding: 3px 7px; border-radius: 6px;
	background: var(--overlay); color: var(--text-white);
	font-size: 11px; font-weight: 600; line-height: 1.2;
}
.msh-tier svg { width: 12px; height: 12px; }
.msh-dur {
	position: absolute; right: 8px; bottom: 8px; z-index: 2;
	padding: 1px 6px; border-radius: var(--radius-sm);
	background: var(--overlay-strong); color: var(--text-white);
	font-size: 11px; font-weight: 600; letter-spacing: .01em;
}

/* ── 자료 카드 두 벌 — 운영자 8차 「나 runway 로 하되, 비법노트에는 시트/ppt 벡터 이미지 대신 썸네일 넣습니다」 ──
 * 비법 노트 = Runway Academy 카드 · 쇼츠 = T4 Deel(4차 채용 그대로). 쇼츠 분류색은 구분색 한 벌이라 자기 이름 리터럴로 둔다(브랜드 토큰에 잇지 않는다). */

/* 비법 노트(설문 자료) — Runway Academy: 판 왼쪽 위 이름 · 오른쪽 위 영상 썸네일(설문 표지, 16:9) · 아래 테두리 꼬리표 + 아주 큰 가는 제목. 한 줄에 두 장.
 * 판 바탕 #EEEDE7 · 꼬리표 둥근 끝 · 3px 그림 모서리는 Runway 값(운영자가 「사이트 규칙과 다른 점」을 보고 고른 시안). */
.msh-rwgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.msh .msh-rw {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; min-height: 340px;
	padding: 18px 20px 22px; border-radius: 6px; overflow: hidden; background: #EEEDE7; color: var(--gray-900);
}
.msh .msh-rw:hover { color: var(--gray-900); } /* 부모 테마 a:hover 파랑이 새지 않게 */
.msh .msh-rw:hover .msh-rw-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.msh .msh-rw:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.msh-rw[hidden] { display: none; }
.msh-rw-brand { position: absolute; left: 20px; top: 17px; font-size: 13.5px; line-height: 1; letter-spacing: -0.01em; }
.msh-rw-brand b { margin-right: 4px; font-weight: 800; letter-spacing: -0.03em; }
.msh-rw-img { position: absolute; right: 18px; top: 18px; width: 49%; aspect-ratio: 16 / 9; border-radius: 3px; overflow: hidden; background: var(--gray-200); color: var(--gray-500); }
.msh-rw-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.msh-rw-art { position: absolute; left: 10%; top: 12%; width: 80%; height: 76%; } /* 썸네일이 없는 자료만 */
.msh-rw-tag { align-self: flex-start; margin-bottom: 12px; padding: 0 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 11.5px; line-height: 18px; letter-spacing: .01em; }
.msh-rw-t { word-break: keep-all; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 94%; font-size: 33px; line-height: 1.14; font-weight: 400; letter-spacing: -0.04em; }

/* 쇼츠 보충 자료 홈 줄 — 위 회색 칸에 목록과 같은 책 표지(.msh-bk, 운영자 12차 「같은 표지로 바꾼다」) · 아래 번호·분류 · 제목 · [실습 가이드] [예제 파일].
 * 10/10 의 T4 Deel(옅은 분류색 칸 · 종이 + 짙은 기울인 표지)을 바꿨다. 표지 안쪽 여백이 % 라 감싸개(.msh-n4-bk) 폭 = 표지 폭. */
.msh-n4grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.msh-n4 { display: flex; flex-direction: column; min-width: 0; border-radius: 8px; overflow: hidden; background: var(--surface-white); box-shadow: var(--shadow-sm), var(--shadow-card); }
.msh-n4[hidden] { display: none; }
.msh .msh-n4-top { display: flex; align-items: center; justify-content: center; height: 150px; background: var(--gray-50); }
.msh-n4-bk { display: block; width: 86px; }
.msh-n4-bk .msh-bk { font-size: 10.2px; }
.msh-n4-body { display: flex; flex-direction: column; flex: 1; padding: 16px 16px 18px; }
.msh-n4-k { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--aih-text); }
.msh-n4-k svg { width: 15px; height: 15px; color: var(--aih-sub); }
.msh .msh-n4-t { word-break: keep-all; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--aih-text); }
.msh .msh-n4-t:hover { color: var(--aih-text); text-decoration: underline; text-underline-offset: 3px; }
.msh .msh-n4-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding-top: 16px; } /* 테마 p 아래 여백(1.5em)을 직접 지운다 */
.msh .msh-n4-btn {
	display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 6px;
	box-shadow: inset 0 0 0 1px var(--gray-300); color: var(--aih-text); font-size: 12.5px; font-weight: 500;
}
.msh .msh-n4-btn:hover { box-shadow: inset 0 0 0 1px var(--gray-500); color: var(--aih-text); }
.msh .msh-n4-btn.is-locked { color: var(--aih-sub); }
.msh .msh-n4-btn:focus-visible,
.msh .msh-n4-t:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.msh-n4-btn svg { width: 14px; height: 14px; }

/* ── 하루 1분 오피스 팁(옛 쇼츠 보충 자료) — 운영자 14차 2안 「메뉴 내비 | 책 목록 | 본문 | 영상 · 본문 목차는 뺀다」(13차 R1 두 칸 + 14차 V1 오른쪽 영상 칸)
 *    + 15차(10/11 「목록 칸은 400 정도 · 폭이 모자라 셋을 다 못 놓으면 영상은 접어 두고 골라서 연다 · 머리가 위에 끼어 본문이 좁다」).
 * 틀(.aih) 왼쪽 메뉴 다음에 .msh-tip 두 칸: 목록 칸 | 본문 칸(.msh-tipbook = 본문 | 영상 칸).
 * 목록 칸 = 머리(위치·제목·설명·진행 막대·찾기 칸 — 붙어 있다) + 책 줄(따로 넘어간다). 본문 칸은 머리글 바로 아래서 시작한다 —
 *   둘 다 다른 멤버십 화면의 위치 줄 자리(y 104)에서 첫 줄이 같이 시작한다.
 * 본문 최대 720(--msh-tip-w) — 19차(10/11 운영자 「900 은 넓어 가독성이 떨어진다 · 남는 자리는 가운데로 · 좌우 칸은 고정」).
 *   16px 본문에서 한 줄 약 69자(띄어쓰기 포함 — 900 은 86자). 본문은 남는 자리 가운데, 영상 칸은 오른쪽 끝에 붙는다.
 *   폭이 모자라면 그대로 줄어든다(1680 화면에서 약 600).
 * 16차(「A1 채움 없음 · B1 받기 단추 줄 끝 · 폰에서는 다 따라 했어요 뺀다」): 받기 단추 = 흰 단추 둘 + 실제 아이콘 · [다 따라 했어요] = 단추 줄 끝
 *   (1024 이하는 숨김 — 목록 원으로 체크) · [영상 보기] = 제목 오른쪽 위 글자 단추.
 * 17차: 찾기 칸 아래 정렬·보기 줄(.msh-tip-tools) · 찾기 칸 초점 흰 상자 고침.
 * 18차: 본문 끝 질문란(.msh-qa — 이어진 쇼츠 글의 댓글).
 * 영상 칸: 1680 이상 = 늘 펼침 · 1366~1679 = 접어 두고 [영상 보기]로 편다(본문이 그만큼 좁아진다 — .msh-tip.is-vid-open, js/membership.js 6-4) ·
 *          1025~1365 = [영상 보기]가 화면 가득 · 1024 이하 = 목록 → 누르면 본문(「← 책 목록」) + 본문 위 영상 카드.
 * 책 본문 부품은 css/bonus.css 그대로 — 여기선 칸 나눔과, 틀 CSS(.aih button 글꼴 · 부모 테마 button 판)가 덮는 몇 곳만 고친다(13차 시안에서 잰 함정). ── */
.msh--shorts .aih-main { padding-top: 0; }
.msh-tip { --msh-tip-w: 720px; display: grid; grid-template-columns: clamp(280px, 28vw, 400px) minmax(0, 1fr); align-items: start; }
.msh-tip-list { position: sticky; top: var(--aih-top); display: flex; flex-direction: column; height: calc(100vh - var(--aih-top)); border-right: 1px solid var(--gray-200); }
body.admin-bar .msh-tip-list { top: calc(var(--aih-top) + 32px); height: calc(100vh - var(--aih-top) - 32px); }
.msh-tip-head { flex: none; padding: 44px 16px 0 0; }
.msh .msh-tip-head .aihx-crumb { padding-top: 0; }
.msh-tip-head .msh-title { margin-top: 8px; }
.msh-tip-head .msh-desc { margin-top: 6px; word-break: keep-all; } /* 좁은 칸에서 「264 / 권」처럼 숫자와 단위가 갈리지 않게 */
.msh-tip-head .msh-prog { margin: 16px 0 0; }
.msh-tip-head .msh-prog-bar { width: 100%; }
.msh .msh-tip-head .msh-me { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 6px 10px; margin: 16px 0 0; }
.msh-tip-head .msh-me > svg { margin-top: 2px; }
.msh-tip-head .msh-me p { display: grid; gap: 2px; }
.msh .msh-tip-head .msh-me > a { grid-column: 2; justify-self: start; margin-left: 0; }
.msh-tip-find { display: flex; align-items: center; gap: 8px; height: 40px; margin-top: 18px; padding: 0 12px; border-radius: 6px; background: var(--gray-100); color: var(--text-muted); }
.msh-tip-find svg { flex: none; width: 16px; height: 16px; }
.msh .msh-tip-find input { flex: 1; width: 100%; min-width: 0; height: auto; margin: 0; padding: 0; border: 0; outline: 0; background: none; box-shadow: none; font: inherit; font-size: 14px; color: var(--text-primary); }
/* 부모 테마 base-dynamic.css 의 input[type="search"]:focus{background:#fff}(0,2,1)가 이 파일 뒤에 실려 누르면 입력칸만 흰 상자가 됐다(17차 운영자 캡처) */
.msh .msh-tip-find input:focus { background: none; }
.msh-tip-find:focus-within { box-shadow: inset 0 0 0 1px var(--primary); }
/* 정렬·보기 줄(17차) — [최신순|날짜순] · [전체|남은 책](회원) · 오른쪽 끝 권 수. 탭 모양은 멤버십 라이브 목록과 같은 .aih-tabs.msh-chips */
.msh-tip-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 8px; }
.msh-tip-tools .aih-tabs { margin: 0; }
.msh .msh-tip-n { margin: 12px 6px 6px; font-size: 12.5px; line-height: 1.4; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.msh .msh-tip-tools .msh-tip-n { margin: 0 6px 0 auto; }
.msh-tip-scroll { flex: 1; min-height: 0; overflow: auto; padding: 0 12px 24px 0; scrollbar-width: thin; }
.msh .msh-tip-items { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.msh-tip-it { display: flex; align-items: center; gap: 6px; border-radius: 6px; }
.msh-tip-it[hidden] { display: none; }
.msh-tip-it:hover { background: var(--sidenav-hover-bg); }
.msh-tip-it.is-on,
.msh-tip-it.is-on:hover { background: var(--sidenav-active-bg); }
.msh .msh-tip-a { flex: 1; min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0 8px 8px; color: var(--sidenav-text); }
.msh .msh-tip-a:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 6px; }
.msh-tip-cv { display: block; width: 38px; }
.msh-tip-cv .msh-bk { font-size: 4.5px; box-shadow: var(--shadow-sm); }
.msh-tip-tx { min-width: 0; }
.msh-tip-tx b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--sidenav-text); word-break: keep-all; overflow-wrap: anywhere; }
.msh-tip-it.is-on .msh-tip-tx b { font-weight: 700; color: var(--sidenav-active-text); }
.msh-tip-it.is-done .msh-tip-tx b { color: var(--aih-sub); } /* 따라 한 책은 제목을 옅게(할 일 목록처럼) */
.msh-tip-tx small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.msh-tip-it .msh-ck { width: 22px; height: 22px; margin-right: 8px; }
.msh-tip-it .msh-ck svg { width: 13px; height: 13px; }
.msh .msh-tip-empty { margin: 16px 6px; font-size: 13px; color: var(--aih-sub); }
.msh-tip-empty[hidden] { display: none; }
.msh-tip-read { min-width: 0; padding: 44px 0 96px 32px; }
.msh .msh-tip-back { display: none; }
.msh-tip-doc.is-loading { opacity: .45; pointer-events: none; } /* 다른 책을 받는 동안(js 6절) */

/* 본문 칸 — 낱장 책 모양에서 차례 판·본문 목차를 뺀 것(inc/membership-hub.php oppadu_msh_tip_book). 뿌리 .bn.msh-tipbook */
/* 16차 760 → 900 · 19차 900 → 720 + 가운데. width:100% — 영상 칸을 편 그리드 칸에서 auto 여백이 폭을 내용만큼 줄이지 않게 */
.msh-tipbook .bn-wrap { width: 100%; max-width: var(--msh-tip-w); margin: 0 auto; padding: 0; }
.msh-tipbook .bn-title { margin: 0 0 10px; font-size: 28px; }
.msh-tipbook .bn-toc { display: none; } /* 운영자 「본문의 목차는 뺀다 — 쇼츠엔 의미가 없다」 */
.msh-tipbook .bn-h2 { padding-bottom: 0; border-bottom: 0; font-size: 22px; }
.msh-tipbook .bn-sec { scroll-margin-top: calc(var(--aih-top) + 16px); }
.msh-tipbook .bn-tc { font-size: 12.5px; font-weight: 600; line-height: 1; } /* .aih button 의 font:inherit 가 장 제목 크기로 키운다 */
.msh-tipbook .bn-copy { font-size: 13px; font-weight: 600; }
.msh-tipbook .bn-vid-play { padding: 0; } /* 부모 테마 button 안쪽 여백(10px 20px) */
.msh-tipbook .bn-vm { display: flex; }
.msh-tipbook .bn-vid { display: none; }
.msh-tipbook .bn-vov { z-index: 260; } /* 사이트 머리글·폰 탭 막대(200) 위로 */
/* 제목 줄 — 제목 | 오른쪽 위 [영상 보기](16차 단추 줄에서 옮김) */
.msh-tip-ttl { display: flex; align-items: flex-start; gap: 16px; }
.msh-tip-ttl .bn-title { flex: 1; min-width: 0; }
/* 받기 단추 줄 — 16차 「A1 채움 없음」: [PDF 이북 받기] [예제 파일 받기] 둘 다 흰 단추 · [다 따라 했어요]는 줄 끝(B1) */
.msh-tip-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.msh-tip-acts .bn-btn { min-height: 40px; font-size: 14px; }
/* 틀의 .aih a{color:inherit}(0,1,1)가 bonus.css .bn-btn 글자색(0,1,0)을 이긴다 — 16차 앞 초록 단추는 흰 글자가 #343434 로 나왔다(10/11 실측) */
.msh-tip-acts .bn-btn { color: var(--gray-800); }
.msh-tip-acts .bn-btn svg { width: 16px; height: 16px; }
.msh-tip-acts .bn-btn .bn-logo-pdf { width: 22px; height: 22px; margin: -2px -2px -2px -4px; } /* 낱장 [PDF로 저장]과 같은 PDF 파일 아이콘 */
.msh-tip-acts .msh-tip-flogo { flex: none; width: 20px; height: 20px; margin-left: -2px; } /* 예제 파일 형식의 앱 로고(inc/membership-hub.php oppadu_msh_file_logo) */
.msh-tipbook .msh-tip-done { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 0 auto; padding: 0 14px 0 9px; border: 1px solid var(--gray-300); border-radius: var(--radius-md); background: var(--surface-white); color: var(--gray-800); font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; }
.msh-tipbook .msh-tip-done:hover { background: var(--gray-50); }
.msh-tipbook .msh-tip-done.is-done { border-color: transparent; background: var(--color-success-bg); color: var(--color-success-text); } /* 따라 했어요 = 결과 표시라 성공 색 */
.msh-tipbook .msh-tip-done:focus-visible,
.msh-tipbook .msh-tip-vbtn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.msh-tip-done .msh-ck { width: 20px; height: 20px; }
.msh-tip-done .msh-ck svg { width: 12px; height: 12px; }
/* [영상 보기] — 제목 오른쪽 위 글자 단추. 영상 칸을 접어 두는 폭(1025~1679)에만. 펴 두면 회색 바탕 + 「영상 접기」 */
.msh-tipbook .msh-tip-vbtn { display: none; flex: none; align-items: center; gap: 8px; min-height: 36px; margin: 2px 0 0; padding: 0 10px 0 8px; border: 0; border-radius: var(--radius-md); background: none; color: var(--gray-700); font-size: 13.5px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.msh-tipbook .msh-tip-vbtn:hover,
.msh-tipbook .msh-tip-vbtn[aria-expanded="true"] { background: var(--gray-100); }
.msh-tipbook .msh-tip-vbtn svg { width: 18px; height: 18px; color: var(--gray-600); }
/* 펴 둔 영상 칸 오른쪽 위 접기 × */
.msh .msh-tip-vx { display: none; position: absolute; top: -7px; right: -6px; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-md); background: none; color: var(--gray-500); cursor: pointer; }
.msh .msh-tip-vx:hover { background: var(--gray-100); color: var(--gray-900); }
.msh .msh-tip-vx:focus-visible { outline: 2px solid var(--primary); outline-offset: 0; }
.msh-tip-vx svg { width: 18px; height: 18px; }
@media (min-width: 1025px) {
	.msh-tipbook .bn-vm { display: none; }
	.msh-tipbook .msh-tip-vbtn { display: inline-flex; }
}
@media (min-width: 1366px) {
	.msh-tip.is-vid-open .msh-tipbook:not(.is-novid) { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; align-items: start; }
	.msh-tip.is-vid-open .msh-tipbook .bn-wrap { grid-column: 1; grid-row: 1; }
	.msh-tip.is-vid-open .msh-tipbook .bn-vid { display: block; grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--aih-top) + 44px); padding: 0; }
	body.admin-bar .msh-tip.is-vid-open .msh-tipbook .bn-vid { top: calc(var(--aih-top) + 76px); }
	.msh .msh-tip.is-vid-open .msh-tip-vx { display: inline-flex; }
}
@media (min-width: 1440px) {
	.msh .msh-tip-a { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 8px 0 8px 10px; }
	.msh-tip-cv { width: 44px; }
	.msh-tip-cv .msh-bk { font-size: 5.2px; }
}
@media (min-width: 1680px) {
	.msh-tip-read { padding-left: 44px; }
	.msh-tipbook:not(.is-novid),
	.msh-tip.is-vid-open .msh-tipbook:not(.is-novid) { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: start; } /* 19차 — 본문 칸이 남는 자리를 다 받고(그 안에서 가운데) 영상 칸은 오른쪽 끝 */
	.msh-tipbook .bn-wrap { grid-column: 1; grid-row: 1; }
	.msh-tipbook .bn-vid { display: block; grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--aih-top) + 44px); padding: 0; }
	body.admin-bar .msh-tipbook .bn-vid { top: calc(var(--aih-top) + 76px); }
	.msh-tipbook .msh-tip-vbtn,
	.msh .msh-tip.is-vid-open .msh-tip-vx { display: none; }
}
@media (min-width: 1880px) {
	.msh-tipbook:not(.is-novid),
	.msh-tip.is-vid-open .msh-tipbook:not(.is-novid) { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
}

/* 시작 화면(20차 — 10/11 운영자 「들어오면 바로 본문이 떠서 부담」 → 시안 S4 「Sketch 웹 Discover」, 아티팩트 HVFs…).
 * ?book= 없이 들어오면 본문 칸(.msh-tip-doc)에 그린다(inc/membership-hub.php oppadu_msh_tip_start · 누름은 js/membership.js 6-6). 폰은 목록이 먼저라 안 보인다.
 * 값은 시안 사진 그대로, 사이트 규칙과 부딪히는 곳만 바꿨다 — 칩·넘김 단추 모서리 = --radius-md(시안 알약·원) · 재생 표시 = --brand-action(시안 주황).
 * 분야로 거르는 중이면 목록 머리에 [분야 이름 ×](.msh-tip-catx). */
.msh-ts { container-type: inline-size; max-width: 1040px; margin: 0 auto; color: var(--gray-900); }
.msh .msh-ts h2 { margin: 0; padding: 0; border: 0; font-size: 23px; line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; color: var(--gray-900); }
.msh .msh-ts-sub { margin: 6px 0 18px; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.msh-ts-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 34px; }
.msh .msh-ts-chips a,
.msh .msh-ts-chips button { display: inline-flex; align-items: center; height: 30px; margin: 0; padding: 0 13px; border: 0; border-radius: var(--radius-md); background: var(--gray-100); color: var(--text-primary); font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; }
.msh .msh-ts-chips a:hover,
.msh .msh-ts-chips button:hover,
.msh .msh-ts-chips button:focus { background: var(--gray-200); color: var(--gray-900); }
.msh-ts-sec { scroll-margin-top: calc(var(--aih-top) + 16px); }
.msh-ts-sec + .msh-ts-sec { margin-top: 40px; }
.msh-ts-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.msh .msh-ts-c { display: flex; align-items: stretch; min-height: 118px; border-radius: 8px; overflow: hidden; background: var(--surface-white); box-shadow: 0 0 0 1px var(--gray-200); color: inherit; text-decoration: none; }
.msh .msh-ts-c:hover { box-shadow: 0 0 0 1px var(--gray-400); }
.msh-ts-th { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 150px; background: var(--gray-50); }
.msh-ts-th .msh-tip-cv { width: 58px; }
.msh-ts-th .msh-tip-cv .msh-bk { font-size: 6.8px; }
.msh-ts-pl { position: absolute; right: 14px; bottom: 12px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-md); background: var(--brand-action); color: var(--surface-white); }
.msh-ts-pl svg { width: 14px; height: 14px; fill: currentColor; }
.msh-ts-tx { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; padding: 14px 18px; }
.msh-ts-tx b { font-size: 15.5px; line-height: 1.4; font-weight: 600; color: var(--gray-900); word-break: keep-all; overflow-wrap: anywhere; }
.msh-ts-tx small { font-size: 13px; line-height: 1.5; color: var(--text-muted); word-break: keep-all; } /* 1440 폭에서 「예 / 제 파일」로 끊겼다 */
.msh-ts-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.msh .msh-ts-l { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; margin: 0; padding: 0 12px; border: 0; border-radius: var(--radius-md); background: var(--surface-white); box-shadow: 0 0 0 1px var(--gray-200); color: var(--gray-900); font-size: 14px; font-weight: 400; line-height: 1; text-align: left; cursor: pointer; }
.msh .msh-ts-l:hover,
.msh .msh-ts-l:focus { background: var(--gray-50); color: var(--gray-900); }
.msh-ts-l svg { flex: none; width: 16px; height: 16px; color: var(--gray-600); }
.msh-ts-l svg:last-child { width: 14px; height: 14px; color: var(--gray-400); }
.msh-ts-l span { flex: 1; min-width: 0; }
.msh-ts-l em { margin-left: 4px; font-style: normal; font-size: 13px; color: var(--text-muted); }
.msh-ts-hr { height: 1px; margin: 40px 0; background: var(--gray-200); }
.msh-ts-gh { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.msh-ts-nav { display: flex; gap: 6px; }
.msh .msh-ts-nav button { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-md); background: var(--gray-100); color: var(--text-primary); cursor: pointer; }
.msh .msh-ts-nav button:hover,
.msh .msh-ts-nav button:focus { background: var(--gray-200); color: var(--gray-900); }
.msh-ts-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 4); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.msh-ts-row::-webkit-scrollbar { display: none; }
.msh .msh-ts-g { display: flex; flex-direction: column; gap: 4px; min-width: 0; scroll-snap-align: start; color: inherit; text-decoration: none; }
.msh-ts-gt { display: flex; align-items: center; justify-content: center; height: 150px; margin-bottom: 6px; border-radius: 8px; background: var(--gray-50); }
.msh .msh-ts-g:hover .msh-ts-gt { background: var(--gray-100); }
.msh-ts-gt .msh-tip-cv { width: 74px; }
.msh-ts-gt .msh-tip-cv .msh-bk { font-size: 8.6px; }
.msh-ts-g b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--gray-900); word-break: keep-all; overflow-wrap: anywhere; }
.msh-ts-g small { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); word-break: keep-all; }
.msh .msh-ts a:focus-visible,
.msh .msh-ts button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@container (max-width: 640px) {
	.msh-ts-two, .msh-ts-links { grid-template-columns: minmax(0, 1fr); }
	.msh-ts-row { grid-auto-columns: calc((100% - 24px) / 3); }
}
.msh .msh-tip-catx { display: inline-flex; align-items: center; height: 30px; margin: 0; padding: 0 10px; border: 0; border-radius: var(--radius-md); background: var(--sidenav-active-bg); color: var(--sidenav-active-text); font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; }
.msh .msh-tip-catx:hover,
.msh .msh-tip-catx:focus { background: var(--primary-100); color: var(--sidenav-active-text); }
.msh .msh-tip-catx[hidden] { display: none; }

/* 질문란(18차) — 본문 끝. 질문 = 이어진 쇼츠 글의 댓글(inc/membership-hub.php oppadu_msh_tip_qa · 올리기 js/membership.js 6-5).
 * 가는 선으로 본문과 나누고, 질문 사이는 옅은 선 · 답글은 질문 아래 회색 칸(운영진 답변은 「답변」 글자만 — 배지 모양 없음).
 * 입력칸은 테두리 한 겹(초점 = 테두리 색만 바뀜). 테마 p 아래 여백(1.5em)·ol 들여쓰기는 여기서 직접 지운다. */
.msh-qa { margin: 56px 0 0; padding: 32px 0 0; border-top: 1px solid var(--gray-200); }
.msh .msh-qa-h { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 700; color: var(--gray-900); }
.msh-qa-n { margin-left: 2px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.msh .msh-qa-sub { margin: 4px 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }
.msh-qa-form { margin: 0 0 20px; }
.msh .msh-qa-form textarea { display: block; width: 100%; min-height: 96px; margin: 0; padding: 12px 14px; border: 1px solid var(--gray-300); border-radius: var(--radius-md); background: var(--surface-white); box-shadow: none; font: inherit; font-size: 15px; line-height: 1.6; color: var(--text-primary); resize: vertical; }
.msh .msh-qa-form textarea:focus { border-color: var(--primary); outline: 0; background: var(--surface-white); box-shadow: none; } /* 부모 테마 textarea:focus 바탕·테두리를 덮는다(17차 찾기 칸과 같은 함정) */
.msh .msh-qa-form textarea::placeholder { color: var(--gray-400); }
.msh-qa-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; }
.msh .msh-qa-attach { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 60%; height: 36px; margin: 0; padding: 0 10px 0 8px; border-radius: var(--radius-md); color: var(--gray-700); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.msh .msh-qa-attach:hover { background: var(--gray-100); }
.msh-qa-attach:focus-within { outline: 2px solid var(--primary); outline-offset: 0; }
.msh-qa-attach svg { flex: none; color: var(--gray-600); }
.msh-qa-attach span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msh .msh-qa-attach input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.msh .msh-qa-unfile { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-md); background: none; color: var(--gray-500); cursor: pointer; }
.msh .msh-qa-unfile:hover { background: var(--gray-100); color: var(--gray-900); }
.msh-qa-unfile[hidden] { display: none; }
.msh .msh-qa-msg { flex: 1 1 160px; min-width: 0; margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.msh .msh-qa-msg:empty { display: none; } /* 빈 안내가 자리를 잡아 폰에서 [질문 올리기]가 다음 줄로 밀리지 않게 */
.msh .msh-qa-msg.is-err { color: var(--color-danger-text); }
.msh .msh-qa-msg.is-ok { color: var(--color-success-text); }
.msh .msh-qa-send { flex: none; display: inline-flex; align-items: center; height: 38px; margin: 0 0 0 auto; padding: 0 16px; border: 0; border-radius: var(--radius-md); background: var(--brand-action); color: var(--surface-white); font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; }
.msh .msh-qa-send:hover { background: var(--brand-hover); color: var(--surface-white); }
.msh .msh-qa-send:disabled { opacity: .6; cursor: default; }
.msh .msh-qa-send:focus-visible,
.msh .msh-qa-unfile:focus-visible,
.msh .msh-qa-more:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.msh .msh-qa-login { margin: 0 0 20px; padding: 14px 16px; border-radius: 8px; background: var(--gray-50); font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.msh .msh-qa-login a { margin-left: 4px; font-weight: 700; color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.msh .msh-qa-list { margin: 0; padding: 0; list-style: none; }
.msh-qa-it { padding: 18px 0; border-top: 1px solid var(--gray-100); }
.msh-qa-it:first-child { padding-top: 6px; border-top: 0; }
.msh-qa-it[hidden] { display: none; }
.msh-qa-q,
.msh-qa-a { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
.msh-qa-av img { display: block; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.msh .msh-qa-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 4px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.msh-qa-meta b { font-size: 14px; font-weight: 600; color: var(--gray-900); }
.msh-qa-tag { font-weight: 700; color: var(--primary-700); }
.msh-qa-wait { font-weight: 600; color: var(--text-secondary); }
.msh-qa-t { font-size: 15px; line-height: 1.7; color: var(--text-primary); overflow-wrap: anywhere; }
.msh .msh-qa-t p { margin: 0 0 .5em; }
.msh-qa-t img { max-width: 100%; height: auto; }
.msh-qa-q.is-pending .msh-qa-t { color: var(--text-secondary); }
.msh .msh-qa-re { display: grid; gap: 8px; margin: 12px 0 0 48px; padding: 0; list-style: none; }
.msh-qa-a { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: 8px; background: var(--gray-50); }
.msh-qa-a .msh-qa-av img { width: 28px; height: 28px; }
.msh-qa-a .msh-qa-t { font-size: 14.5px; }
.msh-qa-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.msh-qa-img img { display: block; max-width: 220px; max-height: 160px; border-radius: 6px; box-shadow: 0 0 0 1px var(--gray-200); object-fit: cover; }
.msh .msh-qa-file { display: inline-flex; align-items: center; max-width: 100%; height: 32px; padding: 0 12px; overflow: hidden; border-radius: 6px; background: var(--gray-100); font-size: 13px; color: var(--gray-800); text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.msh .msh-qa-file:hover { background: var(--gray-200); }
.msh .msh-qa-more { display: inline-flex; align-items: center; gap: 4px; height: 36px; margin: 6px 0 0 -10px; padding: 0 10px; border: 0; border-radius: var(--radius-md); background: none; color: var(--gray-700); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.msh .msh-qa-more:hover { background: var(--gray-100); color: var(--gray-900); }
.msh-qa-more[hidden] { display: none; }
.msh .msh-qa-empty { margin: 4px 0 0; font-size: 14px; color: var(--text-muted); }
.msh-qa-empty[hidden] { display: none; }

/* 원형 체크 — 운영자 14차 「체크박스는 원형으로(네모는 목록에서 고르는 느낌) · 진행/미진행으로 보이게」.
 * 미진행 = 회색 고리(마우스를 올리면 옅은 체크), 진행 = 초록 원 + 흰 체크. 완전 원형은 이 체크 하나 — 운영자 지정(v3 의 「원형은 점·아바타 전용」 예외, CLAUDE.md).
 * 본문 칸 [다 따라 했어요] 안에도 같은 원을 쓴다(span). 목록 단추는 .aih 안이라 부모 테마 button 판(회색·10px 20px)을 직접 지운다. */
.msh-ck { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-white); box-shadow: inset 0 0 0 1.5px var(--gray-300); color: transparent; cursor: pointer; }
.msh-ck svg { width: 15px; height: 15px; }
button.msh-ck:hover,
.msh-tip-done:hover .msh-ck { box-shadow: inset 0 0 0 1.5px var(--gray-500); color: var(--gray-400); }
.msh-ck.is-done,
button.msh-ck.is-done:hover,
.msh-tip-done.is-done .msh-ck { background: var(--brand-action); box-shadow: none; color: var(--surface-white); }
.msh-ck:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 진행 막대 — 운영자 14차 H1(Optimal Workshop Academy 「0 of 3 completed」 + 가는 막대). 손님은 로그인 안내 한 줄 */
.msh-prog { max-width: 1000px; margin: 18px 0 0; }
.msh .msh-prog-t { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.msh-prog-t b { font-size: 15px; font-weight: 700; color: var(--aih-text); }
.msh-prog-bar { width: min(100%, 420px); height: 6px; border-radius: 2px; overflow: hidden; background: var(--surface-white); box-shadow: inset 0 0 0 1px var(--gray-300); }
.msh-prog-bar i { display: block; height: 100%; background: var(--brand-action); transition: width .2s ease; }
.msh .msh-prog--guest { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.msh .msh-prog--guest a { margin-left: 4px; color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.msh-empty[hidden] { display: none; }

/* 책 표지(글자로 그린 표지 — inc/membership-hub.php oppadu_msh_bonus_cover) — 흰 표지 · 먹색 책등 · 「오빠두 실습 가이드」 · No.번호 · 제목 · 아래 실제 로고.
 * 크기는 감싸개 폭을 따르고 글자는 표지 font-size(em)로 줄어든다(목록 76px = 9px · 홈 카드 86px = 10.2px · 폰 58px = 6.6px).
 * 색 = 운영자 12차(아티팩트 RkWX…) 「C1 먹색 한 벌」 — 책등·번호는 짙은 회색 하나, 색은 로고에만(10/10 분류색 일곱 가지는 걷었다).
 * ⚠️ 안쪽 여백이 % 라 감싸개 폭 = 표지 폭이어야 한다 — 넓은 판에 바로 넣으면 % 가 판 폭 기준이 되어 글자가 세로로 찌그러진다. */
.msh-bk { --bk-c: var(--gray-800); position: relative; display: flex; flex-direction: column; aspect-ratio: 3 / 4; padding: 9% 9% 9% 19%; border-radius: 2px 5px 5px 2px; overflow: hidden; background: var(--surface-white); color: var(--gray-900); font-size: 9px; text-align: left; word-break: keep-all; overflow-wrap: anywhere; box-shadow: var(--shadow-sm), var(--shadow-lg); }
.msh-bk::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 10%; background: var(--bk-c); box-shadow: inset -1px 0 0 rgba(0, 0, 0, .2); }
.msh-bk-k { font-size: .56em; line-height: 1.3; letter-spacing: .02em; color: var(--gray-500); }
.msh-bk-no { margin-top: .5em; font-size: 2.1em; line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--gray-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.msh-bk-no::before { content: 'No.'; margin-right: .18em; font-size: .3em; font-weight: 700; letter-spacing: 0; vertical-align: 1em; }
.msh-bk-t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: .6em; font-size: .95em; line-height: 1.26; font-weight: 700; } /* 세 줄까지 — 아래 로고 자리(11차) */
.msh-bk-cat { display: flex; align-items: center; gap: .35em; margin-top: auto; font-size: .6em; font-weight: 600; color: var(--bk-c); }
.msh-bk-cat svg { flex: none; width: 1.35em; height: 1.35em; }
/* 아래 로고 — 실제 앱·AI 로고(11차 운영자 「실제 로고를 사용」). 로고를 못 정한 책만 위 .msh-bk-cat(분류 아이콘·이름) */
.msh-bk-lg { display: block; flex: none; width: 1.8em; height: 1.8em; margin-top: auto; object-fit: contain; }

/* ── 비법 노트 목록 표 — 운영자 10/10 채용 A7 Mistral 「Libraries」(흰 판 · 위 찾기 칸 + 고르기 · 머리줄 · 아래 개수) + A6 Canva(번호 · 작은 썸네일 · 제목 아래 종류) ──
 * 굵은 글씨 없이 줄 사이 가는 선으로만 나눈다. 받기 단추는 줄 끝 6px 테두리 단추. */
.msh-tbl { margin-top: 22px; border-radius: 8px; background: var(--surface-white); box-shadow: 0 0 0 1px var(--gray-200); }
.msh-tbl-tools { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--gray-200); }
.msh-tbl-find { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; max-width: 320px; height: 36px; padding: 0 10px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--gray-200); color: var(--gray-500); } /* min-width 0 — 입력칸 기본 폭(20자)이 폰에서 판을 밀어내지 않게 */
.msh-tbl-find:focus-within { box-shadow: inset 0 0 0 1px var(--primary); }
.msh .msh-tbl-find input { flex: 1; width: 100%; min-width: 0; height: auto; margin: 0; padding: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 13.5px; color: var(--aih-text); }
.msh-tbl-sel { position: relative; flex: none; margin-left: auto; }
.msh .msh-tbl-sel select { appearance: none; height: 36px; margin: 0; padding: 0 30px 0 12px; border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--gray-200); background: var(--surface-white); font: inherit; font-size: 13.5px; color: var(--aih-text); cursor: pointer; }
.msh .msh-tbl-sel select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.msh-tbl-sel svg { position: absolute; right: 10px; top: 50%; width: 14px; height: 14px; margin-top: -7px; color: var(--gray-500); pointer-events: none; }
.msh-tbl-head,
.msh-tr { display: grid; grid-template-columns: 36px minmax(0, 1fr) 110px 150px; align-items: center; column-gap: 14px; padding: 0 16px; }
.msh-tbl-head { height: 38px; border-bottom: 1px solid var(--gray-200); font-size: 12.5px; color: var(--aih-sub); }
.msh .msh-tbl-rows { margin: 0; padding: 0; list-style: none; }
.msh-tr { min-height: 72px; border-bottom: 1px solid var(--gray-100); }
.msh-tr:last-child { border-bottom: 0; }
.msh-tr[hidden] { display: none; }
.msh-tr-no { font-size: 13px; color: var(--gray-400); font-variant-numeric: tabular-nums; }
.msh .msh-tr-main { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 10px 0; color: var(--aih-text); }
.msh-tr-th { flex: none; width: 88px; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--gray-100); }
.msh-tr-th img { width: 100%; height: 100%; object-fit: cover; }
.msh-tr-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msh-tr-tx b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; line-height: 1.4; font-weight: 500; word-break: keep-all; overflow-wrap: anywhere; }
.msh-tr-tx small { font-size: 12.5px; color: var(--aih-sub); }
.msh .msh-tr-main:hover b { text-decoration: underline; text-underline-offset: 3px; }
.msh .msh-tr-main:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.msh-tr-date { font-size: 13px; color: var(--aih-sub); font-variant-numeric: tabular-nums; }
.msh .msh-tr-act { justify-self: end; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--gray-300); font-size: 13px; font-weight: 500; color: var(--aih-text); white-space: nowrap; }
.msh .msh-tr-act:hover { box-shadow: inset 0 0 0 1px var(--gray-500); color: var(--aih-text); }
.msh-tr-act svg { width: 15px; height: 15px; }
.msh .msh-tbl-foot { margin: 0; padding: 12px 16px; border-top: 1px solid var(--gray-200); font-size: 12.5px; color: var(--aih-sub); }

/* ── 목록 화면 머리 ── */
.msh-list .aihx-crumb { padding-top: 22px; }
.msh-title { margin-top: 10px; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--aih-text); }
.msh-desc { margin-top: 4px; max-width: 760px; font-size: 13px; line-height: 1.5; color: var(--aih-sub); }
.msh-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 20px 0 22px; }
.msh-filters .aih-tabs { margin: 0; }
.msh .aih-tabs a,
.msh .msh-chips button {
	flex: none; display: inline-flex; align-items: center;
	height: 26px; padding: 0 11px; border: 0; border-radius: 4px;
	background: transparent; color: var(--text-primary);
	font: inherit; font-size: 12.5px; font-weight: 400; line-height: 1; white-space: nowrap; cursor: pointer;
}
.msh .aih-tabs a.is-on,
.msh .msh-chips button.is-on { background: var(--surface-white); box-shadow: 0 0 0 1px var(--gray-300); color: var(--aih-text); }
.msh .aih-tabs a:focus-visible,
.msh .msh-chips button:focus-visible { outline: 2px solid var(--chrome-focus, var(--gray-900)); outline-offset: 1px; }
.msh-list .msh-me { margin: 18px 0 4px; }
.msh-empty { margin-top: 24px; font-size: 13.5px; color: var(--aih-sub); }
.msh .aih-card[hidden] { display: none; }

/* 더 보기 */
.msh-more-wrap { display: flex; justify-content: center; margin-top: 32px; }
.msh-more-wrap[hidden] { display: none; } /* 끝까지 불러오면 js 가 hidden — 위 flex 가 hidden 을 이기지 않게 */
.msh .msh-more {
	height: 38px; padding: 0 22px; border: 0; border-radius: var(--radius-md);
	background: var(--surface-white); box-shadow: 0 0 0 1px var(--gray-300); color: var(--aih-text);
	font: inherit; font-size: 13.5px; cursor: pointer;
}
.msh .msh-more:hover { box-shadow: 0 0 0 1px var(--gray-500); }
.msh .msh-more[aria-busy="true"] { color: var(--aih-sub); cursor: progress; }
.msh .msh-more:focus-visible { outline: 2px solid var(--chrome-focus, var(--gray-900)); outline-offset: 2px; }

/* ── 채널 연동 안내 창(운영자 10/10 「맨 밑 연동 알림 문구 제거 · 연동관리 옆에 (i)」) — 첫 화면 단추 줄 바로 아래로 뜬다(js/membership.js 5절) ── */
.msh-hero-lnks { display: inline-flex; align-items: center; gap: 2px; }
.msh .msh-info-btn {
	display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 0; border-radius: 6px;
	background: none; color: var(--gray-400); font: inherit; font-size: 15px; cursor: pointer;
}
.msh .msh-info-btn:hover,
.msh .msh-info-btn[aria-expanded="true"] { background: none; color: var(--mh-ink); }
.msh .msh-info-btn.has-label { color: var(--primary); }
.msh .msh-info-btn.has-label:hover,
.msh .msh-info-btn.has-label[aria-expanded="true"] { color: var(--primary-dark); }
.msh .msh-info-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.msh-info {
	position: absolute; left: 50%; top: calc(100% + 10px); z-index: 7; width: min(400px, calc(100% - 32px)); transform: translateX(-50%);
	padding: 20px 22px 18px; border-radius: 8px; background: var(--surface-white); box-shadow: 0 18px 50px rgba(0, 0, 0, .2); text-align: left;
	word-break: keep-all; overflow-wrap: anywhere;
	scroll-margin-top: calc(var(--aih-top) + 200px); /* #ms-connect 주소로 열 때 단추 줄까지 보이게(머리글 아래) */
}
.msh-info[hidden] { display: none; }
.msh-info-h { display: block; padding-right: 28px; font-size: 16px; font-weight: 700; color: var(--mh-ink); }
.msh .msh-info-now { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 13.5px; color: var(--color-success-text); }
.msh-info-now svg { flex: none; width: 15px; height: 15px; color: var(--color-success); }
.msh .msh-info-d { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--mh-sub); } /* 테마 p 아래 여백(1.5em)을 직접 지운다 */
.msh-steps { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.msh-steps li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--text-primary); }
.msh-steps b { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--primary-50); color: var(--primary-700); font-size: 12px; font-weight: 700; }
.msh .msh-info-tip { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--gray-200); font-size: 12.5px; line-height: 1.6; color: var(--mh-sub); }
.msh-info-tip b { display: block; margin-bottom: 2px; font-weight: 600; color: var(--mh-ink); }
.msh .msh-info-x { position: absolute; right: 12px; top: 12px; display: flex; padding: 4px; border: 0; border-radius: 6px; background: none; color: var(--gray-500); cursor: pointer; }
.msh .msh-info-x:hover { background: var(--gray-100); color: var(--mh-ink); }
.msh .msh-info-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.msh-prog-bar i { transition: none; }
}

/* ── 태블릿·휴대폰(1024 이하) — 틀이 왼쪽 메뉴를 위 칩 줄로 바꾼다(css/ai-hub.css). 새 부품도 양옆 16px ── */
@media (max-width: 1024px) {
	.msh-me,
	.msh-h,
	.msh .msh-soon,
	.msh-list .aihx-crumb,
	.msh-title,
	.msh-desc,
	.msh-filters,
	.msh-empty,
	.msh-tbl,
	.msh-prog { margin-left: 16px; margin-right: 16px; }
	/* 하루 1분 오피스 팁 — 한 칸씩: 목록(머리 + 책 줄) → 누르면 본문(「← 책 목록」). ?book= 으로 들어오면 본문부터(.is-reading — inc/membership-hub.php).
	   머리가 목록 칸 안이라 본문을 읽을 땐 목록째 숨으면 끝이다(14차의 :has 숨김 줄은 걷었다) */
	.msh-tip { display: block; margin: 0 16px; }
	.msh-tip-list,
	body.admin-bar .msh-tip-list { position: static; display: block; height: auto; border-right: 0; }
	.msh-tip-head { padding: 0; } /* 위치 줄은 이 폭에서 틀이 숨긴다(css/ai-hub.css) — 제목이 칩 줄 바로 아래 */
	.msh .msh-tip-head > * { margin-left: 0; margin-right: 0; }
	.msh-tip-head .msh-title { margin-top: 10px; }
	.msh-tip-scroll { overflow: visible; padding: 0; }
	.msh-tip-it { border-bottom: 1px solid var(--gray-100); border-radius: 0; }
	.msh-tip-it:hover,
	.msh-tip-it.is-on,
	.msh-tip-it.is-on:hover { background: none; }
	.msh .msh-tip-a { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 12px 0; }
	.msh-tip-cv { width: 52px; }
	.msh-tip-cv .msh-bk { font-size: 6.2px; }
	.msh-tip-tx b { font-size: 15px; }
	.msh-tip-it .msh-ck { width: 26px; height: 26px; margin-right: 2px; }
	.msh-tip-read { display: none; max-width: var(--msh-tip-w); margin: 0 auto; padding: 10px 0 80px; } /* 19차 — 태블릿 가로에서도 「← 책 목록」과 본문이 같이 가운데 */
	.msh-tip.is-reading .msh-tip-list { display: none; }
	.msh-tip.is-reading .msh-tip-read { display: block; }
	.msh .msh-tip-back { display: inline-flex; align-items: center; gap: 6px; height: 40px; margin: 6px 0 10px -6px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--text-secondary); font-size: 14px; font-weight: 600; cursor: pointer; }
	.msh .msh-tip-back:hover { background: var(--gray-100); color: var(--gray-900); }
	.msh-tip-back svg { width: 18px; height: 18px; }
	.msh-tipbook .bn-title { font-size: 26px; }
	.msh-tipbook .msh-tip-done { display: none; } /* 16차 운영자 「폰에서는 다 따라 했어요 뺀다」 — 체크는 목록 줄의 원으로 */
	.msh-qa { margin-top: 40px; padding-top: 24px; }
	.msh .msh-qa-form textarea { font-size: 16px; } /* 16px 아래면 아이폰이 입력할 때 화면을 키운다 */
	.msh .msh-qa-re { margin-left: 0; }
	.msh .msh-qa-msg { order: 3; flex-basis: 100%; } /* 폰 — [파일 첨부] … [질문 올리기] 한 줄, 안내는 그 아래 */
	.msh-n4grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 16px; }
	.msh-rwgrid { padding: 0 16px; }
	.msh-rw-t { font-size: 28px; }
	.msh-hero { margin: 12px 0 0; padding-top: 24px; }
	.msh .msh-hero-lock { margin: 0 16px 16px; }
	.msh-hero-con { padding: 0 16px; }
	.msh .msh-hero-eye { font-size: 13.5px; }
	.msh .msh-hero-h { font-size: 24px; }
	.msh .msh-hero-sub { font-size: 14px; }
	.msh-hero-ctas { gap: 10px 16px; margin-top: 14px; }
	.msh .msh-hero-btn { height: 38px; padding: 0 16px; font-size: 14.5px; }
	.msh .msh-hero-lnk { font-size: 14.5px; }
	.msh-ring { margin-top: 18px; padding: 10px 0 12px; }
	.msh-ring-stage { height: 150px; }
	.msh .msh-win { width: 150px; margin: -50px 0 0 -75px; padding: 0 6px 6px; }
	.msh-win-bar { height: 15px; }
	.msh .msh-win[data-pos="1"] { transform: translateX(150px) rotateY(-14deg); }
	.msh .msh-win[data-pos="-1"] { transform: translateX(-150px) rotateY(14deg); }
	.msh .msh-win[data-pos="2"],
	.msh .msh-win[data-pos="-2"] { opacity: 0; visibility: hidden; }
	.msh-hero-bar { flex-direction: column; align-items: stretch; gap: 10px; margin: 6px 16px 0; padding: 14px 0 16px; }
	.msh .msh-hero-bar-t { font-size: 13px; text-align: center; }
	.msh-hero-bar-t b { display: block; margin: 0 0 2px; }
	.msh-hero-plans { justify-content: center; }
	.msh .msh-plan-btn { flex: 1; height: 40px; }
	.msh-pop { left: 0; right: 0; width: auto; }
	.msh-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.msh-filters::-webkit-scrollbar { display: none; }
	.msh-filters .aih-tabs { max-width: none; flex: none; }
}

/* ── 휴대폰(600 이하) — 홈 줄은 옆으로 넘기고(틀 그대로), 목록 화면은 P4(Weverse) 목록: 왼쪽 썸네일 + 자물쇠 · 오른쪽 제목 두 줄 ── */
@media (max-width: 600px) {
	.msh-me { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 6px 10px; }
	.msh-me > svg { margin-top: 2px; }
	.msh-me p { display: grid; gap: 2px; }
	.msh .msh-me > a { grid-column: 2; justify-self: start; margin-left: 0; }
	.msh-rwgrid,
	.msh-n4grid { display: flex; overflow-x: auto; gap: 10px; padding: 0 16px 12px; scroll-padding-inline: 16px; scroll-snap-type: x proximity; scrollbar-width: none; }
	.msh-rwgrid::-webkit-scrollbar,
	.msh-n4grid::-webkit-scrollbar { display: none; }
	.msh .msh-rwgrid > .msh-rw { flex: 0 0 86%; min-height: 300px; padding: 16px 16px 18px; scroll-snap-align: start; }
	.msh-rw-brand { left: 16px; top: 15px; }
	.msh-rw-img { right: 14px; top: 14px; }
	.msh-rw-t { font-size: 26px; }
	.msh-n4grid > .msh-n4 { flex: 0 0 74%; scroll-snap-align: start; }
	.msh .msh-n4-top { height: 140px; }

	.msh-list .aih-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; overflow: visible; padding: 0 16px; }
	.msh-list .aih-grid .aih-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px; flex: none; }
	.msh-list .aih-card .aih-card-img { grid-row: 1 / span 2; width: 132px; aspect-ratio: 16 / 9; border-radius: 8px; }
	.msh-list .aih-card > b { margin-top: 0; align-items: flex-start; }
	.msh-list .aih-card > b > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; font-size: 15px; line-height: 1.35; }
	.msh-list .aih-card-sub { margin-top: 4px; white-space: normal; }
	.msh-list .msh-tier { left: 5px; top: 5px; padding: 3px 5px; }
	.msh-list .msh-dur { right: 5px; bottom: 5px; }
	.msh-list .msh-rwgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; overflow: visible; padding: 0 16px; }
	/* 비법 노트 표 — 폰은 번호·날짜·받기 칸을 빼고 썸네일 + 제목 줄만(줄 전체가 받기 주소) */
	.msh-tbl-tools { padding: 10px 12px; }
	.msh-tbl-find { max-width: none; }
	.msh-tbl-head { display: none; }
	.msh-tr { grid-template-columns: minmax(0, 1fr); padding: 0 12px; }
	.msh-tr-no,
	.msh-tr-date,
	.msh .msh-tr-act { display: none; }
	.msh-tr-th { width: 72px; }
	.msh-list .msh-n4grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; overflow: visible; padding: 0 16px; }
	.msh-list .msh-n4grid > .msh-n4 { flex: none; }
}