/*
 * 모두네트웍스 고객 후기 — 손님 화면 스타일 (모바일 우선 · .mrb 안에서만)
 * 사이트 밝은 톤(2026-10-23): 흰 바탕 · 글자 #15202e/#4b5a72 · 선 #dde4ee · 파랑 #1d4ed8 · 옅은 하늘 #eef3fd
 * 390px 에서 가로 스크롤 0 · 버튼 48px 이상 · 입력칸 글자 16px(아이폰 확대 방지)
 */

.mrb,
.mrb *,
.mrb *::before,
.mrb *::after {
	box-sizing: border-box;
}

.mrb {
	--mrb-ink: #15202e;
	--mrb-muted: #4b5a72;
	--mrb-line: #dde4ee;
	--mrb-blue: #0b7f93; /* 10-25 사장님 "너무 파랑" → 로고 남색 → 11-04 사장님 "남색 → 밝은 청록"(흰 글 대비 4.70:1 · 버튼·고른 칸·단계 번호·링크) */
	--mrb-blue-dark: #096a7b; /* 11-04 hover = 한 단계 어둡게 */
	--mrb-soft: #f5f7fa; /* 11-04 옅은 남색 → 거의 흰 */
	--mrb-green: #0f766e;
	--mrb-green-soft: #e6f4f1;
	--mrb-orange: #c2410c;
	--mrb-orange-soft: #fff1e8;
	--mrb-red: #b91c1c;
	--mrb-red-soft: #fdecec;
	--mrb-grey: #64748b;
	--mrb-grey-soft: #eef2f7;
	--mrb-navy: #096a7b; /* 11-04 발송완료 뱃지 — 남색 → 어두운 청록 */
	--mrb-navy-soft: #e3f4f7;
	--mrb-purple: #6d28d9;
	--mrb-purple-soft: #f1ebfd;
	--mrb-radius: 14px;
	max-width: 760px;
	margin: 0 auto;
	padding: 20px 16px 56px;
	color: var(--mrb-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.6;
	word-break: keep-all;
	overflow-wrap: break-word;
	overflow-wrap: anywhere;
	-webkit-text-size-adjust: 100%;
}

.mrb button,
.mrb input,
.mrb textarea,
.mrb select {
	font-family: inherit;
}

.mrb-board,
.mrb-wall {
	max-width: 960px;
}

.mrb a {
	color: var(--mrb-blue);
	text-decoration: none;
}

.mrb a:hover {
	text-decoration: underline;
}

.mrb p,
.mrb ul,
.mrb ol,
.mrb h1,
.mrb h2,
.mrb h3 {
	margin: 0;
}

.mrb ul,
.mrb ol {
	padding: 0;
}

.mrb img {
	max-width: 100%;
	height: auto;
}

.mrb-hide {
	display: none !important;
}

.mrb-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.mrb-break {
	word-break: break-all;
}

.mrb-muted {
	color: var(--mrb-muted);
}

/* ───────── 머리띠 · 이동 메뉴 ───────── */

.mrb-head {
	padding: 4px 0 8px;
}

.mrb-eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--mrb-blue);
}

.mrb-h1 {
	font-size: 26px;
	line-height: 1.3;
	font-weight: 800;
	margin-top: 6px;
	color: var(--mrb-ink);
}

.mrb-sub {
	margin-top: 10px;
	color: var(--mrb-muted);
	font-size: 15px;
}

.mrb-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 8px;
}

.mrb-nav-item {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--mrb-line);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	color: var(--mrb-muted);
	background: #fff;
}

.mrb-nav-item.is-current {
	color: #fff;
	background: var(--mrb-blue);
	border-color: var(--mrb-blue);
}

.mrb-nav-item:hover {
	text-decoration: none;
	border-color: var(--mrb-blue);
	color: var(--mrb-blue);
}

.mrb-nav-item.is-current:hover {
	color: #fff;
}

/* ───────── 섹션 · 제목 ───────── */

.mrb-sec {
	margin-top: 28px;
}

.mrb-h2 {
	font-size: 20px;
	line-height: 1.35;
	font-weight: 800;
	margin-bottom: 12px;
}

.mrb-h3 {
	font-size: 16px;
	font-weight: 800;
	margin: 22px 0 8px;
	color: var(--mrb-ink);
}

.mrb-label {
	display: block;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 8px;
	color: var(--mrb-ink);
}

.mrb-help,
.mrb-hint {
	margin-top: 8px;
	font-size: 14px;
	color: var(--mrb-muted);
}

.mrb-note {
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--mrb-soft);
	font-size: 15px;
}

.mrb-warn {
	margin-bottom: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--mrb-red-soft);
	color: var(--mrb-red);
	font-weight: 700;
	font-size: 15px;
}

.mrb-band {
	margin: 14px 0 0;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--mrb-soft);
	border: 1px solid #d6e2fb;
	font-size: 15px;
	font-weight: 600;
}

.mrb-band-off {
	background: var(--mrb-orange-soft);
	border-color: #f6d5c2;
	color: var(--mrb-orange);
}

/* §15 관리자 로그인 띠 · 목록의 회사명 원문 · 상세 관리자 칸 */
.mrb-band-admin {
	background: #fff7e6;
	border-color: #f5dfb0;
	color: #7a4a00;
}

.mrb-band-admin a {
	font-weight: 800;
	margin-left: 4px;
}

.mrb-row-real {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mrb-orange);
}

.mrb-admin-kv th {
	background: #fff7e6;
	color: #7a4a00;
}

.mrb-admin-go {
	margin-top: 12px;
}

.mrb-empty {
	padding: 28px 16px;
	text-align: center;
	color: var(--mrb-muted);
	border: 1px dashed var(--mrb-line);
	border-radius: var(--mrb-radius);
}

.mrb-more,
.mrb-wall-link {
	margin-top: 14px;
	font-weight: 700;
}

/* ───────── 버튼 ───────── */

.mrb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 10px 18px;
	border-radius: 12px;
	border: 1px solid var(--mrb-blue);
	background: #fff;
	color: var(--mrb-blue);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.mrb-btn:hover {
	text-decoration: none;
	background: var(--mrb-soft);
}

.mrb-btn:disabled {
	opacity: 0.55;
	cursor: default;
}

.mrb-btn-primary {
	background: var(--mrb-blue);
	color: #fff;
}

.mrb-btn-primary:hover {
	background: var(--mrb-blue-dark);
	color: #fff;
}

.mrb-btn-ghost {
	border-color: var(--mrb-line);
	color: var(--mrb-ink);
}

.mrb-btn-ghost:hover {
	border-color: var(--mrb-blue);
	color: var(--mrb-blue);
}

.mrb-btn-block {
	display: flex;
	width: 100%;
}

.mrb-btn-row {
	display: flex;
	gap: 10px;
	margin-top: 8px;
}

.mrb-btn-row .mrb-btn {
	flex: 1 1 0;
}

.mrb-cta-row {
	display: grid;
	gap: 10px;
	margin-top: 28px;
}

.mrb-link {
	font-weight: 700;
}

/* ───────── 뱃지 · 채널 아이콘 ───────── */

.mrb-cat,
.mrb-st,
.mrb-sponsored,
.mrb-gift-st {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 0 9px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.mrb-cat {
	background: var(--mrb-soft);
	color: var(--mrb-blue);
}

.mrb-cat-mvno {
	background: var(--mrb-green-soft);
	color: var(--mrb-green);
}

.mrb-cat-tablet {
	background: var(--mrb-purple-soft);
	color: var(--mrb-purple);
}

.mrb-st {
	background: var(--mrb-grey-soft);
	color: var(--mrb-grey);
}

.mrb-st-approved {
	background: var(--mrb-green-soft);
	color: var(--mrb-green);
}

.mrb-st-revise {
	background: var(--mrb-orange-soft);
	color: var(--mrb-orange);
}

.mrb-st-rejected,
.mrb-st-unreachable {
	background: var(--mrb-red-soft);
	color: var(--mrb-red);
}

.mrb-st-shipped {
	background: var(--mrb-navy-soft);
	color: var(--mrb-navy);
}

.mrb-sponsored {
	background: #fff7e6;
	color: #9a5b00;
	border: 1px solid #f5dfb0;
}

.mrb-ch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	flex: 0 0 22px;
	vertical-align: middle;
	position: relative;
}

.mrb-ch svg {
	display: block;
}

.mrb-ch-naver {
	background: #03c75a;
}

.mrb-ch-insta {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.mrb-ch-label {
	margin-left: 6px;
	font-size: 14px;
	color: var(--mrb-muted);
}

/* ───────── 표(사은품) ───────── */

.mrb-table-wrap {
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--mrb-line);
	border-radius: var(--mrb-radius);
}

.mrb-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 15px;
}

.mrb-table th,
.mrb-table td {
	padding: 12px 10px;
	border-bottom: 1px solid var(--mrb-line);
	text-align: left;
	vertical-align: middle;
}

.mrb-table thead th {
	background: var(--mrb-soft);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--mrb-muted);
}

.mrb-table tbody tr:last-child th,
.mrb-table tbody tr:last-child td {
	border-bottom: 0;
}

.mrb-gift-table th:first-child,
.mrb-gift-table td:first-child {
	width: 28%;
}

/* ───────── 3단계 ───────── */

.mrb-steps {
	list-style: none;
	display: grid;
	gap: 12px;
}

.mrb-step {
	display: flex;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--mrb-line);
	border-radius: var(--mrb-radius);
	background: #fff;
}

.mrb-step-no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--mrb-blue);
	color: #fff;
	font-weight: 800;
	font-size: 15px;
}

.mrb-step-t {
	display: block;
	font-size: 16px;
	font-weight: 800;
}

.mrb-step-d {
	margin-top: 4px;
	font-size: 14.5px;
	color: var(--mrb-muted);
}

/* ───────── 탭 · 상품 고르기 ───────── */

.mrb-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 14px;
}

.mrb-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid var(--mrb-line);
	border-radius: 12px;
	background: #fff;
	color: var(--mrb-muted);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	text-decoration: none;
}

.mrb-tab:hover {
	text-decoration: none;
	border-color: var(--mrb-blue);
	color: var(--mrb-blue);
}

.mrb-tab.is-on {
	background: var(--mrb-ink);
	border-color: var(--mrb-ink);
	color: #fff;
}

.mrb-tab.is-on:hover {
	color: #fff;
}

.mrb-tabs-ch .mrb-tab {
	flex: 1 1 0;
	justify-content: center;
}

.mrb-pick-wrap {
	margin-top: 8px;
	padding: 16px;
	border-radius: var(--mrb-radius);
	background: var(--mrb-soft);
}

.mrb-picks {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.mrb-pick {
	min-height: 48px;
	padding: 6px 8px;
	border: 1px solid var(--mrb-line);
	border-radius: 12px;
	background: #fff;
	color: var(--mrb-ink);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.mrb-pick.is-on {
	border-color: var(--mrb-blue);
	background: var(--mrb-blue);
	color: #fff;
}

.mrb-pick-mvno.is-on {
	border-color: var(--mrb-green);
	background: var(--mrb-green);
}

.mrb-pick-tablet.is-on {
	border-color: var(--mrb-purple);
	background: var(--mrb-purple);
}

.mrb-tabpanel {
	display: none;
}

.mrb-tabpanel.is-on {
	display: block;
}

.mrb-rc {
	display: none;
}

.mrb-rc.is-on {
	display: block;
}

ol.mrb-rc.is-on {
	display: block;
}

.mrb-photos.mrb-rc.is-on {
	display: grid;
}

/* ───────── 번호 목록 ───────── */

.mrb-numlist {
	list-style: none;
	counter-reset: mrb;
	display: grid;
	gap: 10px;
}

.mrb-numlist li {
	position: relative;
	padding: 0 0 0 40px;
	min-height: 28px;
	font-size: 15.5px;
}

.mrb-numlist li::before {
	counter-increment: mrb;
	content: counter(mrb);
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--mrb-soft);
	color: var(--mrb-blue);
	font-weight: 800;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mrb-numlist b,
.mrb-numlist strong {
	font-weight: 800;
	color: var(--mrb-ink);
}

.mrb-open-app {
	margin-top: 16px;
}

/* ───────── 복사 카드 ───────── */

.mrb-copycards {
	display: grid;
	gap: 12px;
}

.mrb-copycard {
	padding: 16px;
	border: 1px solid var(--mrb-line);
	border-radius: var(--mrb-radius);
	background: #fff;
}

.mrb-copycard-label {
	font-size: 14px;
	font-weight: 800;
	color: var(--mrb-blue);
}

.mrb-copycard-text {
	margin: 10px 0 12px;
	padding: 14px;
	border-radius: 10px;
	background: #f7f9fc;
	border: 1px dashed var(--mrb-line);
	font-size: 15.5px;
	line-height: 1.6;
	word-break: break-all;
	white-space: pre-wrap;
	-webkit-user-select: all;
	user-select: all;
}

.mrb-copycard-disclosure .mrb-copycard-text {
	font-weight: 700;
}

/* ───────── 질문 · 사진 ───────── */

.mrb-photos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.mrb-photo-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--mrb-line);
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
}

.mrb-photo-card .mrb-step-no {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	font-size: 14px;
}

/* ───────── 예시 글(블로그 글처럼) ───────── */

.mrb-example {
	border: 1px solid var(--mrb-line);
	border-radius: var(--mrb-radius);
	overflow: hidden;
	background: #fff;
}

.mrb-ex-blog-head {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 16px 16px 12px;
	border-bottom: 1px solid var(--mrb-line);
	background: #fafcff;
}

.mrb-ex-title {
	font-size: 17px;
	font-weight: 800;
	line-height: 1.4;
}

.mrb-ex-body {
	padding: 16px;
	display: grid;
	gap: 10px;
	font-size: 15.5px;
	line-height: 1.7;
}

.mrb-ex-disclosure b {
	font-weight: 800;
}

.mrb-ex-photos {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 10-24: 사진 자리 2칸(사이트 화면·요금제표 캡처) */
	gap: 6px;
	margin: 4px 0;
}

.mrb-ex-photo {
	position: relative;
	padding-top: 66%;
	border-radius: 8px;
	background: #e8edf5;
	color: var(--mrb-muted);
	font-size: 13px;
	font-weight: 700;
}

.mrb-ex-photo span {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mrb-ex-photos-sq .mrb-ex-photo {
	padding-top: 100%;
	border-radius: 4px;
}

.mrb-ex-closing {
	color: var(--mrb-muted);
}

.mrb-ex-tags {
	color: var(--mrb-blue);
	font-size: 14.5px;
	word-break: break-all;
}

.mrb-ex-insta-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--mrb-line);
	font-size: 14px;
	font-weight: 700;
}

.mrb-example-insta .mrb-ex-photos {
	margin: 0;
	gap: 2px;
	padding: 0;
}

.mrb-ex-caption {
	padding: 14px 16px 16px;
	display: grid;
	gap: 6px;
	font-size: 15px;
	line-height: 1.6;
}

/* ───────── 꼭 / 하지 마세요 ───────── */

.mrb-rules {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.mrb-rule-col {
	padding: 16px;
	border-radius: var(--mrb-radius);
	border: 1px solid var(--mrb-line);
}

.mrb-rule-col h3 {
	font-size: 16px;
	font-weight: 800;
	margin-bottom: 10px;
}

.mrb-rule-do {
	background: var(--mrb-green-soft);
	border-color: #cde9e3;
}

.mrb-rule-do h3 {
	color: var(--mrb-green);
}

.mrb-rule-dont {
	background: var(--mrb-red-soft);
	border-color: #f5d0d0;
}

.mrb-rule-dont h3 {
	color: var(--mrb-red);
}

.mrb-rule-col ul {
	list-style: none;
	display: grid;
	gap: 8px;
	font-size: 15px;
}

.mrb-rule-col li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.mrb-rule-ic {
	flex: 0 0 auto;
}

.mrb-done-wrap {
	margin-top: 32px;
}

/* ───────── 폼 ───────── */

.mrb-form {
	margin-top: 10px;
	display: grid;
	gap: 22px;
}

.mrb-field {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.mrb-field legend {
	padding: 0;
}

.mrb-input {
	display: block;
	width: 100%;
	min-height: 50px;
	padding: 12px 14px;
	border: 1px solid var(--mrb-line);
	border-radius: 12px;
	background: #fff;
	color: var(--mrb-ink);
	font-size: 16px;
	line-height: 1.4;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.mrb-input:focus {
	border-color: var(--mrb-blue);
	box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.mrb-input::placeholder {
	color: #9aa5b7;
}

.has-err .mrb-input {
	border-color: var(--mrb-red);
}

.mrb-err {
	margin: 6px 0 0;
	min-height: 0;
	color: var(--mrb-red);
	font-size: 14px;
	font-weight: 600;
}

.mrb-err:empty {
	display: none;
}

.mrb-err-top {
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--mrb-red-soft);
}

.mrb-inrow {
	display: flex;
	gap: 8px;
}

.mrb-inrow .mrb-input {
	flex: 1 1 auto;
	min-width: 0;
}

.mrb-inrow .mrb-btn {
	flex: 0 0 auto;
	padding: 10px 14px;
}

.mrb-urlstate {
	margin-top: 8px;
	font-size: 14px;
	font-weight: 600;
	word-break: break-all;
}

.mrb-urlstate:empty {
	display: none;
}

.mrb-urlstate.is-ok {
	color: var(--mrb-green);
}

.mrb-urlstate.is-bad {
	color: var(--mrb-red);
}

.mrb-choices {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.mrb-choices-2 {
	grid-template-columns: repeat(2, 1fr);
}

.mrb-choice {
	position: relative;
	display: block;
	cursor: pointer;
}

.mrb-choice input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

/* 직계 자식 span 만(안쪽 .mrb-ch 아이콘 · .mrb-sr 가 알약 상자로 번지는 사고 방지) */
.mrb-choice > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 50px;
	padding: 8px 6px;
	border: 1px solid var(--mrb-line);
	border-radius: 12px;
	background: #fff;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.mrb-choice input:checked + span {
	border-color: var(--mrb-blue);
	background: var(--mrb-blue);
	color: #fff;
}

.mrb-choice-mvno input:checked + span {
	border-color: var(--mrb-green);
	background: var(--mrb-green);
}

.mrb-choice-tablet input:checked + span {
	border-color: var(--mrb-purple);
	background: var(--mrb-purple);
}

.mrb-choice input:focus-visible + span {
	box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.25);
}

.mrb-file {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

.mrb-file-btn {
	margin-top: 10px;
	cursor: pointer;
}

.mrb-thumbs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 10px;
}

.mrb-thumbs:empty {
	display: none;
}

.mrb-thumb {
	position: relative;
	padding-top: 100%;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--mrb-line);
	background: #f7f9fc;
}

.mrb-thumb img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mrb-thumb-rm {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: rgba(21, 32, 46, 0.75);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.mrb-consent {
	padding: 16px;
	border-radius: var(--mrb-radius);
	background: #f7f9fc;
	border: 1px solid var(--mrb-line);
}

.mrb-consent-items {
	list-style: none;
	display: grid;
	gap: 4px;
	margin-bottom: 12px;
	font-size: 14.5px;
	color: var(--mrb-muted);
}

.mrb-consent-items li {
	padding-left: 12px;
	position: relative;
}

.mrb-consent-items li::before {
	content: '·';
	position: absolute;
	left: 0;
	font-weight: 800;
}

.mrb-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 48px;
	cursor: pointer;
	font-size: 15.5px;
	font-weight: 600;
}

.mrb-check input {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	accent-color: var(--mrb-blue);
}

.mrb-hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mrb-submit {
	margin-top: 4px;
	min-height: 54px;
	font-size: 17px;
}

.mrb-done {
	margin-top: 24px;
	padding: 32px 20px;
	border-radius: var(--mrb-radius);
	background: var(--mrb-soft);
	text-align: center;
	display: grid;
	gap: 10px;
}

.mrb-done-ic {
	width: 56px;
	height: 56px;
	margin: 0 auto 4px;
	border-radius: 50%;
	background: var(--mrb-green);
	color: #fff;
	font-size: 28px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mrb-done .mrb-btn {
	margin-top: 8px;
}

/* ───────── 게시판 목록(폰 = 2줄 카드) ───────── */

.mrb-mine {
	margin-top: 14px;
	border: 1px solid var(--mrb-line);
	border-radius: var(--mrb-radius);
	background: #fff;
}

.mrb-mine-sum {
	min-height: 52px;
	padding: 14px 16px;
	font-weight: 800;
	font-size: 16px;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mrb-mine-sum::-webkit-details-marker {
	display: none;
}

.mrb-mine-sum::after {
	content: '+';
	font-size: 22px;
	color: var(--mrb-blue);
	font-weight: 700;
}

.mrb-mine[open] .mrb-mine-sum::after {
	content: '−';
}

.mrb-mine-form {
	padding: 0 16px 16px;
	display: grid;
	gap: 14px;
	border-top: 1px solid var(--mrb-line);
	padding-top: 16px;
}

.mrb-mine-result {
	padding: 0 16px 16px;
}

.mrb-mine-result:empty {
	display: none;
}

.mrb-list-head {
	display: none;
}

.mrb-list {
	display: grid;
	gap: 8px;
}

.mrb-row {
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	grid-template-areas:
		'no cat co ch'
		'st st st date';
	align-items: center;
	gap: 6px 8px;
	padding: 12px 14px;
	border: 1px solid var(--mrb-line);
	border-radius: 12px;
	background: #fff;
	color: var(--mrb-ink);
	text-decoration: none;
	min-height: 56px;
}

.mrb-row:hover {
	text-decoration: none;
	border-color: var(--mrb-blue);
}

.mrb-row-no {
	grid-area: no;
	font-size: 13px;
	font-weight: 700;
	color: var(--mrb-muted);
}

.mrb-row .mrb-cat {
	grid-area: cat;
}

.mrb-row-co {
	grid-area: co;
	font-weight: 700;
	font-size: 15px;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mrb-lock {
	font-size: 13px;
}

.mrb-row .mrb-ch {
	grid-area: ch;
}

.mrb-row .mrb-st {
	grid-area: st;
	justify-self: start;
}

.mrb-row-date {
	grid-area: date;
	font-size: 13px;
	color: var(--mrb-muted);
}

.mrb-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 18px;
}

.mrb-pager-no {
	font-size: 14px;
	color: var(--mrb-muted);
	font-weight: 700;
}

/* ───────── 본인 확인 창 · 상세 ───────── */

.mrb-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.mrb-modal-bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
	background: rgba(29, 34, 48, 0.5); /* 11-04 남색 기 → 먹색 반투명 */
}

.mrb-sheet {
	position: relative;
	width: 100%;
	max-height: 92vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	border-radius: 18px 18px 0 0;
	padding: 20px 16px 28px;
	box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
	color: var(--mrb-ink);
}

.mrb-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--mrb-grey-soft);
	color: var(--mrb-ink);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.mrb-auth {
	padding-right: 44px;
}

.mrb-auth form {
	margin-top: 14px;
	display: grid;
	gap: 14px;
}

.mrb-auth .mrb-h2 {
	margin-bottom: 4px;
}

.mrb-detail-in {
	padding-right: 4px;
}

.mrb-detail-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-right: 44px;
}

.mrb-detail-head .mrb-st {
	min-height: 28px;
	font-size: 14px;
	padding: 0 12px;
}

.mrb-kv {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	border: 1px solid var(--mrb-line);
	border-radius: 12px;
	overflow: hidden;
}

.mrb-kv th,
.mrb-kv td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--mrb-line);
	text-align: left;
	vertical-align: top;
}

.mrb-kv th {
	width: 34%;
	background: #f7f9fc;
	color: var(--mrb-muted);
	font-weight: 700;
	font-size: 14px;
}

.mrb-kv tr:last-child th,
.mrb-kv tr:last-child td {
	border-bottom: 0;
}

.mrb-replies {
	display: grid;
	gap: 12px;
}

.mrb-bubble {
	padding: 14px 16px;
	border-radius: 16px 16px 16px 4px;
	background: var(--mrb-soft);
	font-size: 15.5px;
}

.mrb-bubble.is-admin {
	background: var(--mrb-green-soft);
}

.mrb-bubble.is-system {
	background: var(--mrb-grey-soft);
}

.mrb-bubble-head {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 13px;
	color: var(--mrb-muted);
}

.mrb-bubble-author {
	font-weight: 800;
	color: var(--mrb-ink);
}

.mrb-bubble-body {
	white-space: pre-line;
	line-height: 1.65;
	word-break: break-word;
}

.mrb-bubble-copy {
	margin-top: 12px;
	width: 100%;
	background: #fff;
}

.mrb-checking {
	border: 1px dashed #b8c8f2;
}

.mrb-gift {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid var(--mrb-line);
	border-radius: 12px;
}

.mrb-gift-st {
	background: var(--mrb-grey-soft);
	color: var(--mrb-grey);
	min-height: 28px;
	font-size: 14px;
	padding: 0 12px;
}

.mrb-gift-st.is-pending {
	background: var(--mrb-orange-soft);
	color: var(--mrb-orange);
}

.mrb-gift-st.is-shipped {
	background: var(--mrb-navy-soft);
	color: var(--mrb-navy);
}

.mrb-gift-name {
	font-weight: 700;
}

.mrb-detail-actions {
	display: grid;
	gap: 10px;
	margin-top: 22px;
}

/* ───────── 토스트 ───────── */

.mrb-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	z-index: 100000;
	transform: translate(-50%, 20px);
	max-width: calc(100vw - 32px);
	padding: 12px 18px;
	border-radius: 999px;
	background: rgba(21, 32, 46, 0.92);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s, transform 0.2s;
	word-break: keep-all;
}

.mrb-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ───────── 후기 모음 ───────── */

.mrb-wall-notice {
	background: #fff7e6;
	border-color: #f5dfb0;
	color: #7a4a00;
}

.mrb-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.mrb-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 16px;
	border: 1px solid var(--mrb-line);
	border-radius: var(--mrb-radius);
	background: #fff;
}

.mrb-card-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.mrb-card-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--mrb-muted);
}

.mrb-card-co {
	font-weight: 700;
	color: var(--mrb-ink);
}

.mrb-card-title {
	font-size: 17px;
	line-height: 1.4;
	font-weight: 800;
}

.mrb-card-sum {
	font-size: 15px;
	color: var(--mrb-muted);
	line-height: 1.6;
}

.mrb-card-link {
	margin-top: auto;
	padding-top: 6px;
	font-weight: 800;
	font-size: 15px;
}

.mrb-cta-box {
	margin-top: 36px;
	padding: 24px 18px;
	border-radius: var(--mrb-radius);
	background: var(--mrb-soft);
	text-align: center;
	display: grid;
	gap: 14px;
	justify-items: center;
	font-weight: 600;
}

/* ───────── 넓은 화면 ───────── */

@media (min-width: 640px) {
	.mrb {
		padding: 32px 16px 72px;
	}

	.mrb-h1 {
		font-size: 32px;
	}

	.mrb-steps {
		grid-template-columns: repeat(3, 1fr);
	}

	.mrb-step {
		flex-direction: column;
	}

	.mrb-cta-row {
		grid-template-columns: repeat(3, 1fr);
	}

	.mrb-photos.mrb-rc.is-on {
		grid-template-columns: repeat(3, 1fr);
	}

	.mrb-rules {
		grid-template-columns: 1fr 1fr;
	}

	.mrb-copycards {
		grid-template-columns: 1fr 1fr;
	}

	.mrb-list-head {
		display: grid;
		grid-template-columns: 64px 110px 1fr 56px 96px 96px;
		gap: 8px;
		padding: 0 14px 6px;
		font-size: 13px;
		font-weight: 700;
		color: var(--mrb-muted);
	}

	.mrb-row {
		grid-template-columns: 64px 110px 1fr 56px 96px 96px;
		grid-template-areas: 'no cat co ch st date';
		gap: 8px;
	}

	.mrb-row .mrb-ch {
		justify-self: center;
	}

	.mrb-row .mrb-st {
		justify-self: center;
	}

	.mrb-row-date {
		text-align: right;
	}

	.mrb-modal {
		align-items: center;
		padding: 24px;
	}

	.mrb-sheet {
		max-width: 600px;
		max-height: 88vh;
		border-radius: 18px;
		padding: 28px 28px 32px;
	}

	.mrb-cards {
		grid-template-columns: 1fr 1fr;
	}

	.mrb-mine-form {
		grid-template-columns: 1fr 1fr;
		align-items: end;
	}

	.mrb-mine-form .mrb-err,
	.mrb-mine-form .mrb-btn {
		grid-column: 1 / -1;
	}
}

@media (min-width: 900px) {
	.mrb-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ───────── 가이드 10-24: 이번 주 질문 · AI 질문 문구 카드 · 사진(선택 항목) · 사이트/요금제표 버튼 ───────── */

.mrb-week-note {
	margin: -6px 0 12px;
}

.mrb-qlist.mrb-rc.is-on {
	display: grid; /* 번호 목록의 줄 간격(gap) 유지 — .mrb-rc.is-on 의 block 보다 뒤에 와야 한다 */
	margin-bottom: 14px;
}

.mrb-copycards-ai {
	margin-top: 4px;
}

.mrb-copycard-ai_prompt .mrb-copycard-text {
	white-space: pre-line; /* 줄바꿈은 그대로, 연속 공백은 접음 */
	font-size: 15px;
	line-height: 1.65;
	max-height: none;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.mrb-photo-card.is-optional {
	border-style: dashed;
	background: #fafcff;
	color: var(--mrb-muted);
	font-weight: 500;
}

.mrb-photo-card.is-optional .mrb-step-no {
	background: #f1f4f9;
	color: var(--mrb-muted);
}

.mrb-photo-btns {
	display: flex;
	flex-direction: column; /* 폰: 위아래로 */
	gap: 10px;
	margin-top: 14px;
}

.mrb-photo-btns .mrb-btn {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
}

/* AI 바로가기 5개 — 아이콘 왼쪽·글자 오른쪽 한 줄 · 폰 3칸(3+2) · 640px 이상 5칸. 버튼 모양·칸 수·글자 크기는 파일 맨 끝 「AI 바로가기」 블록이 정본 · 칸은 minmax(0,1fr) 라 390px 에서 넘치지 않는다 */
.mrb-ai-links {
	margin-top: 14px;
}

.mrb-ai-links-title {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--mrb-ink);
}

.mrb-ai-links-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

/* 10-25 폰 실측: ellipsis 가 "챗·제·클·그·퍼" 첫 글자만 남겼다 → 줄임 규칙 제거. 여백·글자 크기는 맨 끝 「AI 바로가기」 블록 */
.mrb .mrb-ai-links-row a.mrb-ai-link {
	min-width: 0 !important;
}

.mrb-ai-links-note {
	margin-top: 8px;
}

@media (min-width: 640px) {
	.mrb-copycards-ai {
		grid-template-columns: 1fr; /* AI 질문 카드는 한 칸 가득 */
	}

	.mrb-ai-links-row {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.mrb-photo-btns {
		flex-direction: row; /* 넓은 화면: 나란히 */
	}

	.mrb-photo-btns .mrb-btn {
		flex: 1 1 0;
	}
}

/* ───────── 한 페이지(10-25 사장님: 원페이지 · 단순 · 짧게) — 3칸 메뉴 · 사은품 카드 · 고르기 2줄 · 단계 카드 · 미리보기 · AI 바로가기 · 모음 목록 ───────── */

.mrb-nav-3 .mrb-nav-item {
	flex: 1 1 0;
	justify-content: center;
	min-height: 44px;
	font-size: 15px;
}

/* 사은품 카드 3장(아이콘 네모 + 뱃지)은 11-02 쿠폰 모양 3장(.mrb-coupon · 파일 끝)으로 바뀜 */

/* 고르기 2줄(상품 · 올릴 곳) */
.mrb-pickrow {
	margin-bottom: 12px;
}

.mrb-pickrow .mrb-label {
	margin-bottom: 6px;
}

.mrb-picks-ch {
	grid-template-columns: repeat(2, 1fr);
}

/* 11-06 사장님: 태블릿 숨김 → 상품 고르기 버튼 2개(.mrb-picks-n2 · 서버가 보이는 상품 수로 붙임) = 2열(옛 모양·v2 모두 · 폰도 같음) */
.mrb-picks-cat.mrb-picks-n2 {
	grid-template-columns: repeat(2, 1fr);
}

.mrb-pick-ch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

/* 단계 카드 — 번호는 CSS 카운터(숨긴 단계는 세지 않아 인스타에서 ①②③로 자동) */
.mrb-osteps {
	list-style: none;
	counter-reset: ostep;
	display: grid;
	gap: 12px;
	margin: 16px 0 0;
	padding: 0;
}

.mrb-ostep {
	counter-increment: ostep;
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--mrb-line);
	border-radius: var(--mrb-radius);
	background: #fff;
}

.mrb-ostep-no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--mrb-blue);
	color: #fff;
	font-size: 17px;
	font-weight: 800;
}

.mrb-ostep-no::before {
	content: counter(ostep);
}

.mrb-ostep-main {
	display: grid;
	gap: 8px;
	min-width: 0;
}

.mrb-ostep-t {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
}

.mrb-ostep-d {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--mrb-muted);
	word-break: keep-all;
}

/* 접힌 미리보기(복사되는 내용 보기) */
.mrb-preview {
	border: 1px dashed var(--mrb-line);
	border-radius: 10px;
	background: #f7f9fc;
}

.mrb-preview summary {
	cursor: pointer;
	list-style: none;
	padding: 10px 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--mrb-blue);
}

.mrb-preview summary::-webkit-details-marker {
	display: none;
}

.mrb-preview summary::before {
	content: '▸ ';
}

.mrb-preview[open] summary::before {
	content: '▾ ';
}

.mrb-preview-text {
	padding: 0 14px 14px;
	white-space: pre-line;
	font-size: 15px;
	line-height: 1.65;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* AI 바로가기(단계 ③ 안) */
.mrb-ai-week {
	margin-top: 0;
}

.mrb-ai-go {
	display: grid;
	gap: 8px;
}

.mrb-ai-go-label {
	font-size: 14px;
	font-weight: 700;
}

.mrb-ai-img {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-right: 6px;
	border-radius: 5px;
}

.mrb-ai-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--mrb-soft);
	color: var(--mrb-blue);
	font-size: 12px;
	font-weight: 800;
}

.mrb-ai-label {
	min-width: 0;
}

/* 링크 제출 안내 한 줄 · 아래 버튼 2개 */
.mrb-submit-sub {
	margin: -4px 0 14px;
}

.mrb-cta-2 {
	margin-top: 32px;
}

/* 후기 모음 — 게시판 모양(폰: 뱃지+제목 / 회사·날짜 2줄) */
.mrb-wrow {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	grid-template-areas:
		'no cat title'
		'co co date';
	align-items: center;
	gap: 6px 8px;
	padding: 12px 14px;
	border: 1px solid var(--mrb-line);
	border-radius: 12px;
	background: #fff;
	color: var(--mrb-ink);
}

.mrb-wrow .mrb-row-no {
	grid-area: no;
}

.mrb-wrow .mrb-cat {
	grid-area: cat;
}

.mrb-wrow-title {
	grid-area: title;
	min-width: 0;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.mrb a.mrb-wrow-link,
.mrb a.mrb-wrow-link:link,
.mrb a.mrb-wrow-link:visited {
	color: var(--mrb-ink) !important;
	text-decoration: none !important;
}

.mrb a.mrb-wrow-link:hover,
.mrb a.mrb-wrow-link:focus {
	color: var(--mrb-blue) !important;
	text-decoration: underline !important;
}

.mrb-wrow-tag {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--mrb-grey-soft);
	color: var(--mrb-grey);
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.5;
	vertical-align: middle;
	white-space: nowrap;
}

.mrb-wrow-co {
	grid-area: co;
	font-size: 14px;
	color: var(--mrb-muted);
}

.mrb-wrow-date {
	grid-area: date;
	justify-self: end;
	font-size: 13.5px;
	color: var(--mrb-muted);
}

@media (min-width: 640px) {
	.mrb-cta-2 {
		grid-template-columns: 1fr 1fr;
	}

	.mrb-wall-head {
		display: grid;
		grid-template-columns: 64px 100px minmax(0, 1fr) 120px 92px;
		gap: 8px;
		padding: 0 14px 6px;
		font-size: 13px;
		font-weight: 700;
		color: var(--mrb-muted);
	}

	.mrb-wrow {
		grid-template-columns: 64px 100px minmax(0, 1fr) 120px 92px;
		grid-template-areas: 'no cat title co date';
	}

	.mrb-wrow-date {
		text-align: right;
	}
}

/* ───────── 전부 한 페이지(10-25): 메뉴는 같은 페이지 안의 자리로 · 부드러운 이동 · 고정 머리 아래 숨지 않게 · 아래 두 섹션 구분선 ───────── */

html {
	scroll-behavior: smooth;
}

.mrb-sec[id],
#mrb-root {
	scroll-margin-top: 96px;
}

.mrb-sec-mine,
.mrb-sec-wall {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 2px solid var(--mrb-line);
}

.mrb-sec-sub {
	margin: -4px 0 14px;
}

.mrb-sec-wall .mrb-wall-notice {
	margin-top: 4px;
}

/* ───────── 4차(10-25): 사진 3장 · 링크 4단계 띠 · 고지 한 줄 · 제출 직후 결과(돌아가는 표시) · 결과 다시 보기 버튼 ───────── */

.mrb-photos3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 4px 0 0;
}

.mrb-photo3 {
	margin: 0;
	min-width: 0;
	display: grid;
	gap: 6px;
	align-content: start;
}

.mrb-photo3-img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--mrb-line);
	border-radius: 10px;
	background: #f7f9fc;
}

.mrb-photo3-label {
	font-size: 12.5px;
	line-height: 1.3;
	color: var(--mrb-muted);
	text-align: center;
	word-break: keep-all;
}

.mrb-photo3-btns {
	display: grid;
	gap: 6px;
}

/* 좁은 칸(390px ÷ 3) 안의 버튼 — 하드닝 블록(.mrb a.mrb-btn / .mrb button.mrb-btn)보다 선택자가 구체적이라 이긴다 */
.mrb .mrb-photo3-btns a.mrb-btn,
.mrb .mrb-photo3-btns button.mrb-btn {
	display: flex !important;
	width: 100% !important;
	min-width: 0 !important;
	min-height: 40px !important;
	padding: 6px 4px !important;
	font-size: 14px !important;
	white-space: nowrap !important;
}

.mrb-osteps.is-insta .mrb-photo-copy {
	display: none !important; /* 인스타는 저장만 */
}

/* 링크 복사 4단계 띠 — 폰 2×2 · 넓은 화면 한 줄 · 번호 동그라미 + 작은 화살표 */
.mrb-linksteps {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0 0 14px;
	padding: 0;
	counter-reset: none;
}

.mrb-linkstep {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 22px 8px 10px;
	border: 1px solid var(--mrb-line);
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	word-break: keep-all;
}

.mrb-linkstep-no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--mrb-blue);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
}

.mrb-linkstep::after {
	content: '→';
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--mrb-muted);
	font-size: 13px;
}

.mrb-linkstep:last-child::after {
	content: '';
}

.mrb-link-insta-note {
	margin: -6px 0 14px;
}

.mrb-sec-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.mrb-sec-head .mrb-h2 {
	margin: 0;
}

.mrb .mrb-sec-head button.mrb-result-again {
	min-height: 40px !important;
	padding: 6px 12px !important;
	font-size: 14px !important;
}

.mrb-privacy {
	margin: 4px 0 12px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--mrb-muted);
	word-break: keep-all;
}

/* 접수 완료 자리의 돌아가는 표시 + 결과 */
.mrb-spinner {
	width: 28px;
	height: 28px;
	margin: 14px auto;
	border: 3px solid var(--mrb-line);
	border-top-color: var(--mrb-blue);
	border-radius: 50%;
	animation: mrb-spin 0.9s linear infinite;
}

@keyframes mrb-spin {
	to {
		transform: rotate(360deg);
	}
}

.mrb-done-body {
	margin: 6px 0 0;
}

.mrb-result {
	text-align: left;
	margin-top: 8px;
}

.mrb-result .mrb-detail-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.mrb-result-h {
	margin: 0;
}

.mrb-result .mrb-replies {
	margin-top: 12px;
}

@media (min-width: 640px) {
	.mrb-linksteps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ═════════════════════════════════════════════════════════════════════
 * 🔴 사이트 테마(OceanWP)·메인 공용 CSS 가 a·button 을 덮어쓴다 → 우리 버튼은 강하게 고정
 *   - a 는 테마가 글자색을 파랑으로 강제(우리 .mrb a 도 .mrb-btn-primary 보다 우선순위가 높았다)
 *     → 파란 바탕 위 글자가 안 보이던 사고
 *   - button[type=submit] 은 테마가 하늘색 바탕·작은 대문자 글씨로 덮어씀
 *   값은 위쪽 원래 규칙과 똑같다(새 색 없음). 선택자는 .mrb a.* / .mrb button.* + !important.
 * ═════════════════════════════════════════════════════════════════════ */

/* 기본 버튼(흰 바탕 · 파란 글씨 · 파란 테두리) */
.mrb a.mrb-btn,
.mrb a.mrb-btn:link,
.mrb a.mrb-btn:visited,
.mrb a.mrb-btn:focus,
.mrb a.mrb-btn:active,
.mrb button.mrb-btn,
.mrb button.mrb-btn:focus,
.mrb button.mrb-btn:active {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: auto !important;
	min-height: 48px !important;
	padding: 10px 18px !important;
	border: 1px solid var(--mrb-blue) !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: var(--mrb-blue) !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

/* 가로 폭: 꽉 채우는 종류(.mrb-btn-block · 말풍선 복사 버튼)만 빼고 자동 */
.mrb a.mrb-btn:not(.mrb-btn-block),
.mrb button.mrb-btn:not(.mrb-btn-block):not(.mrb-bubble-copy) {
	width: auto !important;
}

.mrb a.mrb-btn:hover,
.mrb button.mrb-btn:hover {
	background: var(--mrb-soft) !important;
	border-color: var(--mrb-blue) !important;
	color: var(--mrb-blue) !important;
	text-decoration: none !important;
}

/* 주 버튼(파란 바탕 · 흰 글씨) — 방문한 링크·포커스·눌림 모두 흰 글씨 */
.mrb a.mrb-btn-primary,
.mrb a.mrb-btn-primary:link,
.mrb a.mrb-btn-primary:visited,
.mrb a.mrb-btn-primary:focus,
.mrb a.mrb-btn-primary:active,
.mrb button.mrb-btn-primary,
.mrb button.mrb-btn-primary:focus,
.mrb button.mrb-btn-primary:active {
	background: var(--mrb-blue) !important;
	border-color: var(--mrb-blue) !important;
	color: #fff !important;
}

.mrb a.mrb-btn-primary:hover,
.mrb button.mrb-btn-primary:hover {
	background: var(--mrb-blue-dark) !important;
	border-color: var(--mrb-blue) !important;
	color: #fff !important;
}

/* 주 버튼 안의 글자·아이콘도 흰색 상속(svg 는 인라인 fill="#fff" 라 그대로 둔다) */
.mrb a.mrb-btn-primary *,
.mrb button.mrb-btn-primary * {
	color: #fff !important;
}

/* 보조 버튼(흰 바탕 · 검정 글씨 · 옅은 테두리) */
.mrb a.mrb-btn-ghost,
.mrb a.mrb-btn-ghost:link,
.mrb a.mrb-btn-ghost:visited,
.mrb a.mrb-btn-ghost:focus,
.mrb a.mrb-btn-ghost:active,
.mrb button.mrb-btn-ghost,
.mrb button.mrb-btn-ghost:focus,
.mrb button.mrb-btn-ghost:active {
	background: #fff !important;
	border-color: var(--mrb-line) !important;
	color: var(--mrb-ink) !important;
}

.mrb a.mrb-btn-ghost:hover,
.mrb button.mrb-btn-ghost:hover {
	background: var(--mrb-soft) !important;
	border-color: var(--mrb-blue) !important;
	color: var(--mrb-blue) !important;
}

/* 꽉 채우는 버튼(포커스·눌림·마우스 올림에도 유지) */
.mrb a.mrb-btn-block,
.mrb a.mrb-btn-block:link,
.mrb a.mrb-btn-block:visited,
.mrb a.mrb-btn-block:focus,
.mrb a.mrb-btn-block:active,
.mrb a.mrb-btn-block:hover,
.mrb button.mrb-btn-block,
.mrb button.mrb-btn-block:focus,
.mrb button.mrb-btn-block:active,
.mrb button.mrb-btn-block:hover {
	display: flex !important;
	width: 100% !important;
}

/* 보내기 버튼(조금 더 크게) */
.mrb button.mrb-submit,
.mrb button.mrb-submit:focus,
.mrb button.mrb-submit:active,
.mrb button.mrb-submit:hover {
	min-height: 54px !important;
	font-size: 17px !important;
}

/* 주소 입력칸 옆 버튼(좁은 안쪽 여백 유지) */
.mrb .mrb-inrow a.mrb-btn,
.mrb .mrb-inrow button.mrb-btn {
	padding: 10px 14px !important;
}

.mrb button.mrb-btn:disabled,
.mrb button.mrb-btn[disabled] {
	opacity: 0.55 !important;
	cursor: default !important;
}

/* 이동 메뉴 알약(a) — 현재 메뉴는 파란 바탕 · 흰 글씨 */
.mrb a.mrb-nav-item,
.mrb a.mrb-nav-item:link,
.mrb a.mrb-nav-item:visited,
.mrb a.mrb-nav-item:focus,
.mrb a.mrb-nav-item:active {
	background: #fff !important;
	border-color: var(--mrb-line) !important;
	color: var(--mrb-muted) !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.mrb a.mrb-nav-item:hover {
	border-color: var(--mrb-blue) !important;
	color: var(--mrb-blue) !important;
	text-decoration: none !important;
}

.mrb a.mrb-nav-item.is-current,
.mrb a.mrb-nav-item.is-current:link,
.mrb a.mrb-nav-item.is-current:visited,
.mrb a.mrb-nav-item.is-current:focus,
.mrb a.mrb-nav-item.is-current:active,
.mrb a.mrb-nav-item.is-current:hover {
	background: var(--mrb-blue) !important;
	border-color: var(--mrb-blue) !important;
	color: #fff !important;
}

/* 탭(a = 상품 종류 · button = 채널) — 켜진 탭은 검정 바탕 · 흰 글씨 */
.mrb a.mrb-tab,
.mrb a.mrb-tab:link,
.mrb a.mrb-tab:visited,
.mrb a.mrb-tab:focus,
.mrb a.mrb-tab:active,
.mrb button.mrb-tab,
.mrb button.mrb-tab:focus,
.mrb button.mrb-tab:active {
	min-height: 48px !important;
	padding: 0 16px !important;
	border: 1px solid var(--mrb-line) !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: var(--mrb-muted) !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.mrb a.mrb-tab:hover,
.mrb button.mrb-tab:hover {
	border-color: var(--mrb-blue) !important;
	color: var(--mrb-blue) !important;
	text-decoration: none !important;
}

.mrb a.mrb-tab.is-on,
.mrb a.mrb-tab.is-on:link,
.mrb a.mrb-tab.is-on:visited,
.mrb a.mrb-tab.is-on:focus,
.mrb a.mrb-tab.is-on:active,
.mrb a.mrb-tab.is-on:hover,
.mrb button.mrb-tab.is-on,
.mrb button.mrb-tab.is-on:focus,
.mrb button.mrb-tab.is-on:active,
.mrb button.mrb-tab.is-on:hover {
	background: var(--mrb-ink) !important;
	border-color: var(--mrb-ink) !important;
	color: #fff !important;
}

/* 상품 고르기 버튼 — 켜진 것은 종류별 색 바탕 · 흰 글씨 */
.mrb button.mrb-pick,
.mrb button.mrb-pick:focus,
.mrb button.mrb-pick:active,
.mrb button.mrb-pick:hover {
	min-height: 48px !important;
	padding: 6px 8px !important;
	border: 1px solid var(--mrb-line) !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: var(--mrb-ink) !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	box-shadow: none !important;
}

.mrb button.mrb-pick.is-on,
.mrb button.mrb-pick.is-on:focus,
.mrb button.mrb-pick.is-on:active,
.mrb button.mrb-pick.is-on:hover {
	border-color: var(--mrb-blue) !important;
	background: var(--mrb-blue) !important;
	color: #fff !important;
}

.mrb button.mrb-pick-mvno.is-on,
.mrb button.mrb-pick-mvno.is-on:focus,
.mrb button.mrb-pick-mvno.is-on:active,
.mrb button.mrb-pick-mvno.is-on:hover {
	border-color: var(--mrb-green) !important;
	background: var(--mrb-green) !important;
}

.mrb button.mrb-pick-tablet.is-on,
.mrb button.mrb-pick-tablet.is-on:focus,
.mrb button.mrb-pick-tablet.is-on:active,
.mrb button.mrb-pick-tablet.is-on:hover {
	border-color: var(--mrb-purple) !important;
	background: var(--mrb-purple) !important;
}

/* 본인 확인 창 닫기(×) · 사진 지우기(×) 둥근 버튼 */
.mrb button.mrb-close,
.mrb button.mrb-close:focus,
.mrb button.mrb-close:active,
.mrb button.mrb-close:hover {
	width: 44px !important;
	height: 44px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--mrb-grey-soft) !important;
	color: var(--mrb-ink) !important;
	font-size: 24px !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	box-shadow: none !important;
}

.mrb button.mrb-thumb-rm,
.mrb button.mrb-thumb-rm:focus,
.mrb button.mrb-thumb-rm:active,
.mrb button.mrb-thumb-rm:hover {
	width: 32px !important;
	height: 32px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(21, 32, 46, 0.75) !important;
	color: #fff !important;
	font-size: 20px !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	box-shadow: none !important;
}

/* 목록 한 줄(a) — 회사명 글자는 검정(링크 파랑 금지) */
.mrb a.mrb-row,
.mrb a.mrb-row:link,
.mrb a.mrb-row:visited,
.mrb a.mrb-row:focus,
.mrb a.mrb-row:active,
.mrb a.mrb-row:hover {
	color: var(--mrb-ink) !important;
	text-decoration: none !important;
}

/* 채널 고르기 안의 아이콘은 작은 원 그대로 · 읽어주기용 글자는 숨김 */
.mrb .mrb-choice > span .mrb-ch {
	width: 22px !important;
	height: 22px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	flex: 0 0 22px !important;
}

.mrb .mrb-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* 상품별 블록(.mrb-rc = 질문 목록 ol.mrb-qlist · 사진 div.mrb-photos · 예시 글 감싸개 div) — 고른 상품만 보이게.
 * .mrb-photos / .mrb-numlist 의 display 규칙이 .mrb-rc 의 none 과 같은 세기라 뒤에 온 쪽이 이겨 세 상품 블록이
 * 다 보이던 사고(10-24 데스크톱 실측) → 숨김은 !important 로, 보이는 블록의 display 는 종류별로 고정 */
.mrb .mrb-rc:not(.is-on) {
	display: none !important;
}

.mrb .mrb-rc.is-on {
	display: block !important;
}

.mrb ol.mrb-qlist.mrb-rc.is-on {
	display: grid !important;
}

.mrb .mrb-photos.mrb-rc.is-on {
	display: grid !important;
}

/* ───────── AI 바로가기(10-25 폰 390px 실측: nowrap + ellipsis 라 "챗·제·클·그·퍼" 첫 글자만 보이던 사고) ─────────
 * ① 블록을 단계 번호 들여쓰기(36px + 간격 12px = 48px) 밖으로 빼서 카드 폭 전체를 쓴다(오른쪽 끝은 그대로 → 가로 스크롤 없음).
 * ② 버튼 = 아이콘 20px 왼쪽 + 글자 오른쪽 한 줄(nowrap · 줄임 없음) · 폰 3칸(5개 → 3+2 · 둘째 줄도 같은 폭·왼쪽 정렬) · 640px 이상 5칸 한 줄.
 * ③ 하드닝 블록(.mrb a.mrb-btn !important · inline-flex · padding 10px 18px · 16px)보다 선택자가 구체적이라 이긴다.
 * 폭 계산(테마 여백 0 가정 · 카드 안폭 = 화면 − 66 · 칸 = (안폭 − 12)/3 · 글자 자리 = 칸 − 테두리 2 − 좌우 여백 4 − 아이콘 20 − 간격 4):
 *   390px → 칸 104 · 자리 74 → 「퍼플렉시티」 14px = 70 ✓ / 375px → 칸 99 · 자리 69 → 13px = 65 ✓ / 360px → 칸 94 · 자리 64 → 12px = 60 ✓
 *   (좌우 여백 6px·간격 6px 였다면 390px 에서 자리 64 → 13px 65 도 넘친다 → 여백 2px·간격 4px 로 줄임) */
.mrb .mrb-ostep .mrb-ai-go {
	margin-left: -48px;
	width: calc(100% + 48px);
}

.mrb .mrb-ai-links-row {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 6px !important;
}

.mrb .mrb-ai-links-row a.mrb-btn.mrb-ai-link,
.mrb .mrb-ai-links-row a.mrb-btn.mrb-ai-link:link,
.mrb .mrb-ai-links-row a.mrb-btn.mrb-ai-link:visited,
.mrb .mrb-ai-links-row a.mrb-btn.mrb-ai-link:focus,
.mrb .mrb-ai-links-row a.mrb-btn.mrb-ai-link:active,
.mrb .mrb-ai-links-row a.mrb-btn.mrb-ai-link:hover {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	width: auto !important;
	min-width: 0 !important;
	min-height: 48px !important;
	padding: 8px 2px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
	overflow: visible !important;
	text-overflow: clip !important;
}

/* 아이콘(그림·글자 원) 20px · 원래 margin-right 6px 는 gap 으로 대체 */
.mrb .mrb-ai-links-row a.mrb-btn.mrb-ai-link .mrb-ai-img,
.mrb .mrb-ai-links-row a.mrb-btn.mrb-ai-link .mrb-ai-ic {
	flex: 0 0 20px !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
}

/* 글자: 한 줄 · 줄임 없음 · 줄어들지 않음(모자라면 잘리지 않고 그대로 보인다) */
.mrb .mrb-ai-links-row a.mrb-btn.mrb-ai-link .mrb-ai-label {
	flex: 0 0 auto !important;
	min-width: 0 !important;
	white-space: nowrap !important;
	overflow: visible !important;
	text-overflow: clip !important;
}

@media (max-width: 399.98px) {
	.mrb .mrb-ai-links-row a.mrb-btn.mrb-ai-link .mrb-ai-label {
		font-size: 13px !important;
	}
}

@media (max-width: 374.98px) {
	.mrb .mrb-ai-links-row a.mrb-btn.mrb-ai-link .mrb-ai-label {
		font-size: 12px !important;
	}
}

@media (min-width: 640px) {
	.mrb .mrb-ai-links-row {
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	}
}

/* ───────── 4차 보정(10-25): 하드닝(.mrb button.mrb-btn !important)에 지지 않게 — 숨긴 버튼·인스타의 사진 복사 · 사진 3장 칸 맞춤 ───────── */
.mrb button.mrb-btn.mrb-hide,
.mrb a.mrb-btn.mrb-hide {
	display: none !important;
}

.mrb .mrb-osteps.is-insta .mrb-photo3-btns button.mrb-photo-copy {
	display: none !important; /* 인스타는 저장만 */
}

.mrb-photo3-img {
	aspect-ratio: 1 / 1;
	object-fit: contain; /* 세로가 긴 요금표도 통째로 · 세 칸 높이가 같아 버튼 줄이 맞는다 */
}

/* 5차(10-25): 사진 묶음은 상품별(.mrb-rc) · 4장이면 폰 2×2, 640px↑ 한 줄 4칸 · .mrb-rc.is-on 의 block 보다 세게 grid */
.mrb .mrb-photos3.mrb-rc.is-on {
	display: grid !important;
}

.mrb .mrb-photos3.mrb-photos3-n4.mrb-rc.is-on {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
	.mrb .mrb-photos3.mrb-photos3-n4.mrb-rc.is-on {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* 6차(10-25): 결과 찾기(접이식 · 회사명+비밀번호) · 찾은 글 작은 목록 · 인스타 캡처 안내 */
.mrb-lookup {
	margin: -4px 0 16px;
	border: 1px solid var(--mrb-line);
	border-radius: 12px;
	background: #fff;
}

.mrb-lookup-sum {
	cursor: pointer;
	list-style: none;
	padding: 12px 14px;
	font-size: 15px;
	font-weight: 700;
	color: var(--mrb-blue);
}

.mrb-lookup-sum::-webkit-details-marker {
	display: none;
}

.mrb-lookup-sum::before {
	content: '\25B8  ';
}

.mrb-lookup[open] .mrb-lookup-sum::before {
	content: '\25BE  ';
}

.mrb-lookup-form {
	display: grid;
	gap: 10px;
	padding: 0 14px 14px;
}

.mrb-lookup-form .mrb-field {
	margin: 0;
}

.mrb-lookup-list {
	padding: 0 14px 14px;
}

.mrb-lookup-list:empty {
	display: none;
}

.mrb .mrb-lookup-list button.mrb-lookup-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--mrb-line);
	border-radius: 10px;
	background: #fff;
	color: var(--mrb-ink);
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
	text-align: left;
}

.mrb .mrb-lookup-list button.mrb-lookup-item time {
	margin-left: auto;
	color: var(--mrb-muted);
	font-size: 13px;
}

.mrb-shots-field .mrb-link-insta-note {
	margin: 8px 0 0;
}

@media (min-width: 640px) {
	.mrb-lookup-form {
		grid-template-columns: 1fr 1fr;
		align-items: end;
	}

	.mrb-lookup-form .mrb-err,
	.mrb-lookup-form .mrb-btn {
		grid-column: 1 / -1;
	}
}

/* 10-25 꼭 지켜주세요 주황 상자(.mrb-keep · -t · -list)는 11-04 지켜 주세요 한 줄(.mrb .mrb-keep · 파일 끝)로 바뀌며 삭제 */

/* ───────── 7차(10-25): 티스토리 채널 · 올릴 곳 3개 + 바로가기 줄 · 모음 상태 뱃지 · 새 글 밝힘 ───────── */
.mrb-ch-tistory {
	background: #ff5a4a;
}

/* 11-04 사장님: 올릴 곳 4개(워드프레스 추가) — 폰 2×2 · 640px↑ 한 줄 4개(옛 .mrb-picks-3 은 안 씀) */
.mrb .mrb-picks-ch.mrb-picks-4 {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
	.mrb .mrb-picks-ch.mrb-picks-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.mrb-choices-ch {
	grid-template-columns: repeat(3, 1fr);
}

.mrb-pick-ch {
	padding-left: 6px;
	padding-right: 6px;
	font-size: 14px;
	gap: 5px;
}

.mrb-choices-ch .mrb-choice > span {
	gap: 5px;
	padding-left: 4px;
	padding-right: 4px;
	font-size: 14px;
}

.mrb-chlinks {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 8px;
}

.mrb .mrb-chlinks a.mrb-chlink,
.mrb .mrb-chlinks a.mrb-chlink:link,
.mrb .mrb-chlinks a.mrb-chlink:visited {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--mrb-blue) !important;
	text-decoration: none !important;
}

.mrb .mrb-chlinks a.mrb-chlink:hover,
.mrb .mrb-chlinks a.mrb-chlink:focus {
	text-decoration: underline !important;
}

.mrb-chlinks .mrb-ch {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

.mrb-chlinks .mrb-ch svg {
	width: 10px;
	height: 10px;
}

.mrb-wrow-badges {
	grid-area: cat;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.mrb-wrow .mrb-st {
	font-size: 12px;
}

.mrb-wrow.is-new {
	background: var(--mrb-soft);
	box-shadow: inset 0 0 0 2px var(--mrb-blue);
}

.mrb-wrow {
	transition: background-color 1.2s ease, box-shadow 1.2s ease;
}

@media (min-width: 640px) {
	.mrb-wall-head,
	.mrb-wrow {
		grid-template-columns: 56px 170px minmax(0, 1fr) 120px 84px;
	}
}

/* ───────── 8차(10-25): 사은품 아래 한눈에 4단계 카드 · ⑥ 링크 올리기 머리(단계 카드 모양) ───────── */
.mrb-quick {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin: 14px 0 0;
}

.mrb .mrb-quick button.mrb-quick-card {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	grid-template-areas:
		'no t'
		'no d';
	column-gap: 10px;
	row-gap: 2px;
	align-items: center;
	justify-items: start;
	width: 100%;
	min-height: 64px;
	margin: 0;
	padding: 12px 12px;
	border: 2px solid var(--mrb-blue);
	border-radius: 12px;
	background: var(--mrb-soft);
	color: var(--mrb-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	position: relative;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

.mrb .mrb-quick button.mrb-quick-card:hover,
.mrb .mrb-quick button.mrb-quick-card:focus {
	background: #fff;
	box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18);
	outline: none;
}

.mrb-quick-no {
	grid-area: no;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--mrb-blue);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
}

.mrb-quick-t {
	grid-area: t;
	font-size: 15.5px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--mrb-blue-dark);
	word-break: keep-all;
}

.mrb-quick-d {
	grid-area: d;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--mrb-muted);
	word-break: keep-all;
}

@media (min-width: 640px) {
	.mrb-quick {
		grid-template-columns: repeat(4, 1fr);
		gap: 18px;
	}

	.mrb .mrb-quick button.mrb-quick-card:not(:last-child)::after {
		content: '\203A';
		position: absolute;
		right: -15px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 22px;
		font-weight: 800;
		line-height: 1;
		color: var(--mrb-blue);
	}
}

/* ⑥ 링크 올리기 — ol 밖이라 카운터 대신 번호 글자(서버 6/5 · JS 가 보이는 단계 수+1 로 맞춤) */
.mrb-ostep-submit {
	counter-increment: none;
	margin-top: 4px;
}

.mrb-ostep-submit .mrb-ostep-no::before {
	content: none;
}

.mrb-ostep-submit .mrb-form {
	margin-top: 4px;
}

.mrb-ostep-submit .mrb-done {
	margin-top: 12px;
}

/* 10-25 안내 카드뉴스 3장(.mrb-gcards 그림)은 11-02 글로 된 안내 3장 → 11-04 흐름 띠 + 지켜 주세요 띠(.mrb-flow · .mrb-keep · 파일 끝)로 바뀜 */

/* ───────── 10-31 사장님: 머리 = 배경 그림(후기 이벤트/후기 모음 메뉴 삭제 · 11-04 남색 → 밝은 #f5f7fa) · 브런치 · 배송주소 동일 버튼 ───────── */
.mrb .mrb-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 230px;
	margin: 0 0 22px;
	padding: 30px 26px;
	border-radius: 20px;
	background-color: #f5f7fa; /* 11-04 사장님 "촌스럽게 남색 없애고 밝고 하얀색 느낌으로" — 점무늬는 옅은 청록 */
	background-image: radial-gradient(rgba(11, 127, 147, 0.1) 1px, transparent 1.2px);
	background-size: 18px 18px;
}

.mrb .mrb-hero-txt {
	position: relative;
	z-index: 1;
	max-width: 56%;
}

.mrb .mrb-hero .mrb-eyebrow {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: #e3f4f7; /* 11-04 옅은 청록 칩 + 청록 글 */
	color: var(--mrb-blue) !important;
	font-size: 13px;
}

.mrb .mrb-hero .mrb-h1 {
	margin-top: 14px;
	color: #1d2230 !important; /* 11-04 흰 → 먹색 */
	font-size: 32px;
	line-height: 1.25;
	word-break: keep-all;
}

.mrb .mrb-hero .mrb-sub {
	margin-top: 12px;
	color: #4a5163 !important; /* 11-04 */
	font-size: 16px;
}

.mrb .mrb-hero-art {
	position: absolute;
	right: -8px;
	bottom: -6px;
	width: 50%;
	max-width: 400px;
	height: auto;
}

@media (max-width: 640px) {
	.mrb .mrb-hero {
		display: block;
		min-height: 0;
		padding: 24px 18px 176px;
	}

	.mrb .mrb-hero-txt {
		max-width: none;
	}

	.mrb .mrb-hero .mrb-h1 {
		font-size: 25px;
	}

	.mrb .mrb-hero-art {
		right: -4%;
		bottom: -8px;
		width: 82%;
	}
}

.mrb-ch-brunch {
	background: #111;
}

/* 11-04 워드프레스 아이콘 — 파랑 동그라미에 흰 W */
.mrb-ch-wordpress {
	background: #3858e9;
}

.mrb .mrb-ch-note {
	margin-top: 8px;
}

.mrb button.mrb-addr-btn {
	display: block;
	width: 100%;
	min-height: 54px;
	margin-top: 6px;
	padding: 12px 16px;
	border: 2px dashed var(--mrb-blue) !important; /* 11-04 남색 글 → 먹색 · 청록은 토큰 */
	border-radius: 12px;
	background: #fff !important;
	color: #1d2230 !important;
	font-size: 17px;
	font-weight: 800;
	cursor: pointer;
}

.mrb button.mrb-addr-btn.is-on {
	border-style: solid !important;
	background: var(--mrb-blue) !important;
	color: #fff !important;
}

.mrb .mrb-addr-help {
	margin-top: 8px;
}

/* ═════════════════════════════════════════════════════════════════════
 * 11-02 사장님 "사은품 칸이 촌스럽고 AI스러워 → 이벤트 페이지처럼" · "색은 바꾸지 마" · "밑으로 가면 너무 양이 많아 보여 → 가로로"
 *   ① 사은품 = 상품별 쿠폰 모양 3장 — 셋 다 같은 색(거의 흰 #f5f7fa 바탕 · 먹색 글 · 그림 칸 흰) · 640px↑ 한 줄 3장(그림 위 · 홈 동그라미 왼쪽·오른쪽) · 폰 = 세로로 쌓인 납작한 가로 카드(그림 왼쪽 96px · 홈 위·아래) · 테두리·그림자·그라데이션 없음
 *   ② 참여 방법(11-04 사장님 2차 "참여방법 강조 · 1분 강조 · 한 줄 · 심플") = 밝은 띠 하나 div.mrb-guide(#f5f7fa · 머리 + 「1분」 청록 크게 + 흐름 4단어 · 청록 →) + 지켜 주세요 한 줄 p.mrb-keep(상자 없음) · 번호·아이콘·뱃지·테두리·그림자 없음
 *   ③ 제출 완료 팝업(#mrb-thanks) — 어두운 배경 · 가운데 흰 카드 400px · 「확인」 = 처음 화면으로
 *   ④ 이렇게 쓰세요 — ①②③ 복사 카드 가로 한 줄(폰은 옆으로 넘김) · AI 바로가기 띠 · ④ 세로(11-04 ⑤발행 삭제) · 카드 = 납작한 거의 흰(테두리 없음)
 *   🔴 11-04 사장님 "촌스럽게 남색 색상 없애고 밝고 하얀색 느낌으로": 남색 #18216a·#111e5e·옅은 남색 #eef1f8/#dfe4f2 전부 삭제 → 글 먹색 #1d2230(보조 #5b6274) · 바탕 #f5f7fa/흰 · 채움·버튼 = var(--mrb-blue) 청록 · 「1분」·→ 는 #1597ad. 글자색은 테마가 h·p 를 덮어쓴 전례가 있어 !important.
 * ═════════════════════════════════════════════════════════════════════ */

/* ① 쿠폰 3장 — 폰 기본 = 가로 카드(그림 96px 왼쪽 · 글 오른쪽 · 110px 안팎) */
.mrb .mrb-coupons {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mrb .mrb-coupon {
	position: relative;
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	min-height: 110px;
	overflow: hidden;
	border: 0;
	border-radius: 20px;
	box-shadow: none;
	background: #f5f7fa; /* 11-04 옅은 남색 → 거의 흰 · 글 먹색 */
	color: #1d2230;
}

/* 쿠폰 홈 — 그림 칸과 글 칸 경계에 바탕색(흰) 동그라미: 폰은 위·아래, 640px↑ 는 왼쪽·오른쪽 */
.mrb .mrb-coupon::before,
.mrb .mrb-coupon::after {
	content: "";
	position: absolute;
	left: 96px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	transform: translateX(-50%);
	pointer-events: none;
}

.mrb .mrb-coupon::before {
	top: -11px;
}

.mrb .mrb-coupon::after {
	bottom: -11px;
}

.mrb .mrb-coupon-art {
	position: relative;
	min-height: 110px;
	background: transparent; /* 11-04 그림 칸 = 카드와 같은 #f5f7fa(흰 바탕 사진은 multiply 라 사진만 보임 · 흰 칸만 따로 뜨면 쿠폰 모양이 깨짐) */
}

.mrb .mrb-coupon-art .mrb-coupon-svg,
.mrb .mrb-coupon-art .mrb-coupon-img {
	position: absolute;
	top: 10px;
	left: 10px;
	display: block;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	max-width: none;
}

/* 11-04 사장님 "사은품 칸에 휴대폰·유심 사진": 흰 바탕 PNG → multiply 로 그림 칸 위에서 흰색이 사라짐(칸이 흰이라 사진만 보임) · 폰 96px 칸은 여백 6px 로 사진을 조금 크게 */
.mrb .mrb-coupon-art .mrb-coupon-img {
	top: 6px;
	left: 6px;
	width: calc(100% - 12px);
	height: calc(100% - 12px);
	object-fit: contain;
	object-position: center;
	mix-blend-mode: multiply;
}

.mrb .mrb-coupon-txt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 14px 14px 14px 16px;
}

.mrb .mrb-coupon-txt p {
	margin: 0;
	color: #1d2230 !important; /* 11-04 먹색 · 보조 줄(누구·받는 법·인스타)은 #5b6274 */
}

.mrb .mrb-coupon-txt p.mrb-coupon-for,
.mrb .mrb-coupon-txt p.mrb-coupon-how,
.mrb .mrb-coupon-txt p.mrb-coupon-sub {
	color: #5b6274 !important;
}

.mrb .mrb-coupon-for {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.mrb .mrb-coupon-name {
	margin-top: 3px !important;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	word-break: keep-all;
}

.mrb .mrb-coupon-how {
	margin-top: 6px !important;
	font-size: 13.5px;
	line-height: 1.4;
}

.mrb .mrb-coupon-sub {
	margin-top: 3px !important;
	font-size: 13px;
	line-height: 1.4;
}

/* ② 참여 방법(11-04 사장님 2차 "참여방법을 강조 · 꼭 지켜주세요는 한 줄 · 1분 강조 · 좀더 심플하게" + "남색 없애고 밝고 하얀색 느낌으로" · 옛 카드 3장 .mrb-gpanel*·옅은 흐름 띠·남색 목록 띠 삭제)
 *   (a) 밝은 띠 하나 div.mrb-guide — #f5f7fa 먹색 #1d2230 글 · 모서리 20px(쿠폰 칸과 같음) · 폰 20px · 640px↑ 24px 28px
 *       머리 줄 .mrb-guide-top = h3 「참여 방법」(22px 800) + 「복사·붙여넣기만 하면 1분이면 끝나요」(16px · 「1분」만 strong 26px 청록 #1597ad 800) · 640px↑ 한 줄 · 폰 = 머리 아래
 *       흐름 ol.mrb-flow = 4단어만(19px 700 · 폰 16px) · 사이 청록 #1597ad 「→」(::after · 마지막 없음) · flex-wrap 이라 폰은 2줄 · 번호·아이콘·테두리·그림자·그라데이션 없음
 *   (b) 지켜 주세요 한 줄 p.mrb-keep — 띠 아래 10px · 상자 없음 · 굵은 「꼭 지켜 주세요」 #1d2230 + 15px #3b4263 문장 하나(1280 에서 한 줄 · 폰은 줄바꿈만) */
.mrb .mrb-guide {
	margin: 26px 0 0;
	padding: 20px;
	border: 0;
	border-radius: 20px;
	box-shadow: none;
	background: #f5f7fa;
	color: #1d2230;
}

.mrb .mrb-guide-top {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 14px;
}

.mrb .mrb-guide-h3 {
	margin: 0;
	padding: 0;
	color: #1d2230 !important;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.mrb .mrb-guide-lead {
	margin: 0;
	color: #1d2230 !important;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	word-break: keep-all;
}

.mrb .mrb-guide-min {
	color: #1597ad !important; /* 밝은 바탕에서 읽히는 청록(26px 굵은 글 3.2:1 · 큰 글 기준 통과) */
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
}

.mrb .mrb-flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px; /* 11-04 3차: 첫 단어가 길어져(제목·본문·AI 답 복붙) 폰은 자연 줄바꿈 2+2 · 글 15px */
	margin: 0;
	padding: 0;
	list-style: none;
}

.mrb .mrb-flow-i {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mrb .mrb-flow-t {
	display: block;
	margin: 0;
	color: #1d2230 !important;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

/* 단어 사이 「→」 — content 의 / "" 는 읽어 주는 글 없음(모르는 브라우저는 앞줄 "→" 그대로) · 마지막 단어 뒤엔 없음 */
.mrb .mrb-flow-i::after {
	content: "→";
	content: "→" / "";
	margin-left: 10px;
	color: #1597ad;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

.mrb .mrb-flow-i:last-child::after {
	content: none;
}

/* 지켜 주세요 = 상자 없는 글 한 줄(11-04 사장님 "밝고 하얀색 느낌") */
.mrb .mrb-keep {
	margin: 10px 0 0;
	padding: 0 4px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	color: #3b4263 !important;
	font-size: 15px;
	line-height: 1.5;
	word-break: keep-all;
}

/* 테마 CSS 가 span 을 block 으로 만들어 줄이 갈라진 적 있음(11-04 미리보기) → 둘 다 inline 고정 */
.mrb .mrb-keep-h {
	display: inline !important;
	margin: 0 8px 0 0;
	color: #1d2230 !important;
	font-size: 15px;
	font-weight: 800;
}

.mrb .mrb-keep-t {
	display: inline !important;
	color: #3b4263 !important;
	font-size: 15px;
}

@media (min-width: 640px) {
	/* 쿠폰 = 한 줄 3장 · 그림 위 120px · 글 아래 · 홈 동그라미는 왼쪽·오른쪽 가장자리(그림/글 경계 높이) */
	.mrb .mrb-coupons {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}

	/* 11-06 사장님: 태블릿 숨김 → 쿠폰 2장(.mrb-coupons-n2 · 서버가 보이는 상품 수로 붙임) = 한 줄 2장(옛 모양·v2 모두 · 폰은 위 세로 쌓임 그대로) */
	.mrb .mrb-coupons.mrb-coupons-n2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mrb .mrb-coupon {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: 120px minmax(0, 1fr);
		min-height: 0;
	}

	.mrb .mrb-coupon::before,
	.mrb .mrb-coupon::after {
		top: 120px;
		bottom: auto;
		transform: translateY(-50%);
	}

	.mrb .mrb-coupon::before {
		left: -11px;
	}

	.mrb .mrb-coupon::after {
		left: auto;
		right: -11px;
	}

	.mrb .mrb-coupon-art {
		min-height: 120px;
	}

	/* 11-04 위쪽 그림 칸 120px 안에 사진 104px(위아래 8px) */
	.mrb .mrb-coupon-art .mrb-coupon-img {
		top: 8px;
		height: calc(100% - 16px);
	}

	.mrb .mrb-coupon-txt {
		justify-content: flex-start;
		padding: 16px 18px 20px;
	}

	.mrb .mrb-coupon-for {
		font-size: 15px;
	}

	.mrb .mrb-coupon-name {
		font-size: 21px;
	}

	.mrb .mrb-coupon-how {
		font-size: 14px;
	}

	/* 11-04 2차 남색 띠 = 머리 「참여 방법」 과 「… 1분이면 끝나요」 한 줄 · 흐름 4단어 19px */
	.mrb .mrb-guide {
		padding: 24px 28px;
	}

	.mrb .mrb-guide-top {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 6px 18px;
		margin-bottom: 16px;
	}

	.mrb .mrb-flow {
		gap: 10px 14px;
	}

	.mrb .mrb-flow-i {
		flex: 0 0 auto;
	}

	.mrb .mrb-flow-t {
		font-size: 19px;
	}

	.mrb .mrb-flow-i::after {
		margin-left: 14px;
		font-size: 20px;
	}
}

/* ④ 이렇게 쓰세요(11-02 "밑으로 가면 너무 양이 많아 보여") — .mrb-osteps = 감싸개 div · ①②③ = ol.mrb-ostep-row(폰 옆으로 넘김 · 640px↑ 한 줄 3장 · 제목 숨김(is-insta)이면 2장) · AI 바로가기 띠 · ④ = ol.mrb-ostep-col(11-04 ⑤발행 삭제)
 *   카드 = 납작한 옅은 남색(테두리 없음) · 번호 동그라미 + 제목 한 줄 · 설명 · 복사 버튼은 바닥에(높이 같음 · 버튼 줄 맞음) · .mrb-ostep-main 은 display:contents 로 카드 격자에 바로 올린다 */
.mrb .mrb-osteps {
	display: grid;
	gap: 12px;
	margin: 16px 0 0;
	padding: 0;
	counter-reset: ostep;
}

.mrb .mrb-osteps .mrb-ostep-row,
.mrb .mrb-osteps .mrb-ostep-col {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mrb .mrb-osteps .mrb-ostep-col {
	display: grid;
	gap: 12px;
}

.mrb .mrb-osteps .mrb-ostep-row {
	display: flex;
	gap: 10px;
	padding-bottom: 2px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.mrb .mrb-osteps .mrb-ostep-row::-webkit-scrollbar {
	display: none;
}

.mrb .mrb-osteps .mrb-ostep-row > .mrb-ostep {
	flex: 0 0 84%;
	scroll-snap-align: start;
	grid-template-rows: auto minmax(0, 1fr) auto;
}

.mrb .mrb-ostep {
	border: 0;
	background: #f5f7fa; /* 11-04 옅은 남색 → 거의 흰 */
	box-shadow: none;
}

.mrb .mrb-osteps .mrb-ostep {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	column-gap: 10px;
	row-gap: 8px;
	align-items: start;
	padding: 16px;
}

.mrb .mrb-osteps .mrb-ostep-main {
	display: contents;
}

.mrb .mrb-osteps .mrb-ostep-main > * {
	grid-column: 1 / -1;
	min-width: 0;
}

.mrb .mrb-osteps .mrb-ostep-no,
.mrb .mrb-ostep-submit .mrb-ostep-no {
	grid-column: 1;
	grid-row: 1;
	width: 30px;
	height: 30px;
	font-size: 15px;
}

.mrb .mrb-osteps .mrb-ostep-t {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	font-size: 17px;
	color: var(--mrb-ink) !important;
}

.mrb .mrb-osteps .mrb-ostep-d {
	font-size: 14px;
}

.mrb .mrb-osteps .mrb-ostep-row .mrb-ostep button.mrb-copy {
	align-self: end;
}

/* ⑤ 링크 올리기 머리도 같은 번호 크기(카드 안쪽 틀은 그대로 · 11-04 발행 단계 삭제로 ⑥ → ⑤) */
.mrb .mrb-ostep-submit {
	grid-template-columns: 30px minmax(0, 1fr);
	column-gap: 10px;
}

/* AI 바로가기 띠 — ①②③ 줄 바로 아래 가로 전체(버튼 3칸/5칸 격자는 위 하드닝 규칙 그대로) */
.mrb .mrb-osteps > .mrb-ai-strip {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 14px 16px 16px;
	border-radius: 20px;
	background: #f5f7fa; /* 11-04 */
}

.mrb .mrb-osteps > .mrb-ai-strip .mrb-ai-go-label {
	font-size: 14.5px;
	font-weight: 700;
	color: #1d2230; /* 11-04 */
}

@media (min-width: 640px) {
	.mrb .mrb-osteps .mrb-ostep-row {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
		padding-bottom: 0;
		overflow: visible;
	}

	.mrb .mrb-osteps.is-insta .mrb-ostep-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mrb .mrb-osteps .mrb-ostep-row > .mrb-ostep {
		flex: none;
	}
}

/* ③ 제출 완료 팝업 — 화면 전체 어두운 배경 · 가운데 흰 카드(떠 있으니 그림자 허용) · 390px 에서 좌우 16px */
.mrb .mrb-thanks {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(245, 247, 250, 0.85); /* 11-06 사장님 "해당 색상 말고 밝게" — 먹색 반투명 → 밝은 회백색 */
}

.mrb .mrb-thanks-card {
	position: relative;
	width: 100%;
	max-width: 400px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 32px 24px;
	border-radius: 20px;
	background: #fff;
	color: var(--mrb-ink);
	text-align: center;
	box-shadow: 0 16px 48px rgba(29, 34, 48, 0.16);
	border: 1px solid #e3e8ef; /* 11-06 밝은 배경 위 카드 경계 */
	outline: 0;
}

.mrb .mrb-thanks-ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--mrb-blue); /* 11-04 청록 토큰 */
}

.mrb .mrb-thanks-ic svg {
	display: block;
	width: 40px;
	height: 40px;
}

.mrb .mrb-thanks-title {
	margin: 0;
	color: #1d2230 !important; /* 11-04 남색 → 먹색 */
	font-size: 24px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	word-break: keep-all;
}

.mrb .mrb-thanks-lead {
	margin: 10px 0 0;
	color: #1d2230 !important;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.45;
}

.mrb .mrb-thanks-cat {
	margin: 14px 0 0;
	color: var(--mrb-ink) !important;
	font-size: 16px;
	line-height: 1.55;
}

.mrb .mrb-thanks-keep {
	margin: 10px 0 0;
	color: var(--mrb-muted) !important;
	font-size: 15px;
	line-height: 1.5;
}

/* 「확인」 — 하드닝 블록(.mrb button.mrb-btn !important)보다 구체적인 선택자로 높이·모서리·색 고정 */
.mrb .mrb-thanks-card button.mrb-thanks-ok,
.mrb .mrb-thanks-card button.mrb-thanks-ok:hover,
.mrb .mrb-thanks-card button.mrb-thanks-ok:focus,
.mrb .mrb-thanks-card button.mrb-thanks-ok:active {
	margin-top: 22px !important;
	min-height: 52px !important;
	padding: 12px 18px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: var(--mrb-blue) !important; /* 11-04 청록 토큰 */
	color: #fff !important;
	font-size: 17px !important;
	font-weight: 800 !important;
}

.mrb .mrb-thanks-card button.mrb-thanks-ok:focus-visible {
	outline: 3px solid var(--mrb-blue-dark) !important;
	outline-offset: 2px;
}

/* ② 참여 방법 = 3단계 카드 3장(11-05 사장님 "3단계로 명확하게 줄여줘 · 카드뉴스 3장처럼 한눈에") — 옛 흐름 띠 ol.mrb-flow(4단어 · 위 CSS 는 남김) 대신 띠(.mrb-guide #f5f7fa) 안에 ol.mrb-gsteps
 *   카드 li.mrb-gstep = 흰 바탕 #fff · 모서리 16px · 테두리·그림자·그라데이션·아이콘 없음(색은 먹색 #1d2230 · 옅은 먹색 #3b4263 · 흰색 + 청록 #1597ad 포인트만)
 *   640px↑ = 3칸 격자(gap 14px) · 카드 안 세로(번호 원 → 제목(위 14px) → 설명(위 6px)) · 안쪽 22px 20px · min-height 150px · 카드 오른쪽 바깥 가운데 청록 「→」(::after · 마지막 카드 없음)
 *   폰(640px 미만) = 1칸 세로로 쌓고 카드 안은 가로(번호 왼쪽 40px | 글 오른쪽 · gap 12px · 안쪽 16px · min-height 없음 · 화살표 없음)
 *   번호 = 지름 40px 청록 원 · 흰 글자 20px 800 · 제목 20px 800 먹색 · 설명 15px #3b4263 줄간격 1.55 · 테마가 span·strong·li 색을 덮어서 글자색·배경은 !important */
.mrb .mrb-gsteps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mrb .mrb-gstep {
	position: relative;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	margin: 0;
	padding: 16px;
	border: 0;
	border-radius: 16px;
	background: #fff !important;
	color: #1d2230 !important;
	box-shadow: none;
	list-style: none;
}

.mrb .mrb-gstep-no {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background: #1597ad !important;
	color: #fff !important;
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
}

.mrb .mrb-gstep-b {
	display: block;
	min-width: 0;
}

.mrb .mrb-gstep-t {
	display: block;
	margin: 0;
	color: #1d2230 !important;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
	word-break: keep-all;
}

.mrb .mrb-gstep-d {
	display: block;
	margin: 6px 0 0;
	color: #3b4263 !important;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
	word-break: keep-all;
}

@media (min-width: 640px) {
	.mrb .mrb-gsteps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}

	.mrb .mrb-gstep {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		min-height: 150px;
		padding: 22px 20px;
	}

	.mrb .mrb-gstep-t {
		margin-top: 14px;
	}

	/* 카드 사이 「→」 — 카드 오른쪽 바깥(gap 14px 한가운데 · 세로 가운데) · content 의 / "" 는 읽어 주는 글 없음(모르는 브라우저는 앞줄 "→" 그대로) · 마지막 카드 뒤엔 없음 */
	.mrb .mrb-gstep::after {
		content: "→";
		content: "→" / "";
		position: absolute;
		top: 50%;
		right: -7px;
		transform: translate(50%, -50%);
		color: #1597ad;
		font-size: 20px;
		font-weight: 700;
		line-height: 1;
	}

	.mrb .mrb-gstep:last-child::after {
		content: none;
	}
}

/* 11-06 사장님 "1번 제목 복사 · 2번 본문 복사 양옆으로 균형 있게" — AI 단계가 숨으면(.is-noai) 두 칸이 줄을 반반 채운다(폰 포함) */
.mrb .mrb-osteps.is-noai .mrb-ostep-row > .mrb-ostep {
	flex: 1 1 0;
	min-width: 0;
}

@media (min-width: 640px) {
	.mrb .mrb-osteps.is-noai .mrb-ostep-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 11-06 v2 */
/* ═════════════════════════════════════════════════════════════════════
 * 11-06 사장님 "색감·모양을 고급스럽게"(참고 시안) — 새 모양(v2)은 루트에 .mrb-v2 가 붙을 때만(옵션 theme_v2 또는 주소 ?look=v2 · public.php mrb_ui_v2)
 *   🔴 전부 .mrb.mrb-v2 … 로만 — 옛 모양(.mrb-v2 없음)엔 영향 0 · 사장님 확인 전 손님 화면은 그대로
 *   토큰: 바탕 #EEF3FF · 글 #111318 · 보조 글 #4A5163 · 파랑 #1F5EFF · 옅은 파랑 #E3EBFF · 노랑 #FFE14D · 카드 흰 · 선 #111318
 *   굵은 선 2.5px · 떠 있는 그림자 6px 6px 0(폰 4px 4px 0) · 카드 모서리 24px · 버튼 모서리 14px · 그라데이션·흐림·이모지 없음
 *   테마(OceanWP)가 a·button·h·p 색을 덮으므로 글자색·배경은 !important(위 하드닝 블록 「.mrb a.… · .mrb button.…」 보다 선택자를 한 단계 더 구체적으로)
 * ═════════════════════════════════════════════════════════════════════ */
.mrb.mrb-v2 {
	--v2-bg: #EEF3FF;
	--v2-ink: #111318;
	--v2-muted: #4A5163;
	--v2-blue: #1F5EFF;
	--v2-blue-soft: #E3EBFF;
	--v2-yellow: #FFE14D;
	--v2-card: #FFFFFF;
	--v2-line: #111318;
	--v2-border: 2.5px solid #111318;
	--v2-shadow: 4px 4px 0 #111318;
	--v2-r-card: 24px;
	--v2-r-btn: 14px;
	/* 옛 토큰도 v2 색으로 — 토큰을 쓰는 곳(링크·뱃지·구분선·입력칸·보조 글)이 같이 바뀐다 */
	--mrb-ink: #111318;
	--mrb-muted: #4A5163;
	--mrb-line: #111318;
	--mrb-blue: #1F5EFF;
	--mrb-blue-dark: #1F5EFF;
	--mrb-soft: #E3EBFF;
	--mrb-navy: #1F5EFF;
	--mrb-navy-soft: #E3EBFF;
	padding: 20px 16px;
	border-radius: 32px;
	background: var(--v2-bg);
	color: var(--v2-ink);
}

/* 모든 제목 = 먹색 · 굵게 · 자간 좁게 */
.mrb.mrb-v2 h1,
.mrb.mrb-v2 h2,
.mrb.mrb-v2 h3,
.mrb.mrb-v2 .mrb-h1,
.mrb.mrb-v2 .mrb-h2,
.mrb.mrb-v2 .mrb-h3 {
	color: var(--v2-ink) !important;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.mrb.mrb-v2 .mrb-sec {
	margin-top: 36px;
}

.mrb.mrb-v2 .mrb-h2 {
	margin-bottom: 16px;
	font-size: 28px;
	font-weight: 900;
	line-height: 1.25;
}

/* 머리 = 흰 카드 + 굵은 선 + 그림자 · 왼쪽 글 / 오른쪽 사진(폰은 위아래) */
.mrb.mrb-v2 .mrb-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
	align-items: center;
	min-height: 0;
	margin: 0 0 28px;
	padding: 24px 20px;
	overflow: visible;
	border: var(--v2-border);
	border-radius: var(--v2-r-card);
	background: var(--v2-card);
	background-image: none;
	box-shadow: var(--v2-shadow);
}

.mrb.mrb-v2 .mrb-hero-txt {
	position: static;
	max-width: none;
	min-width: 0;
}

.mrb.mrb-v2 .mrb-hero .mrb-eyebrow {
	display: block;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: var(--v2-blue) !important;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.mrb.mrb-v2 .mrb-hero .mrb-h1 {
	margin-top: 10px;
	color: var(--v2-ink) !important;
	font-size: 32px;
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.02em;
	word-break: keep-all;
}

.mrb.mrb-v2 .mrb-hero .mrb-h1 .mrb-h1-em {
	display: block;
	color: var(--v2-blue) !important;
}

.mrb.mrb-v2 .mrb-hero .mrb-sub {
	margin-top: 14px;
	color: var(--v2-muted) !important;
	font-size: 18px;
	line-height: 1.5;
}

.mrb.mrb-v2 .mrb-hero-photo {
	position: static;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0 !important;
	padding: 0;
}

.mrb.mrb-v2 .mrb-hero-photo img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 18px;
}

/* v2 사진 주소가 비어 옛 SVG 그림이 그려질 때도 2단 안에(겹치지 않게) */
.mrb.mrb-v2 .mrb-hero .mrb-hero-art {
	position: static;
	width: 100%;
	max-width: none;
}

/* 사은품 = 흰 카드 + 굵은 선 + 그림자 · 그림 위(170px 흰 칸 · contain) · 글 아래 · 쿠폰 홈(동그라미) 없음 */
.mrb.mrb-v2 .mrb-coupons {
	gap: 18px;
}

.mrb.mrb-v2 .mrb-coupon {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 170px minmax(0, 1fr);
	min-height: 0;
	overflow: hidden;
	border: var(--v2-border);
	border-radius: var(--v2-r-card);
	background: var(--v2-card);
	color: var(--v2-ink);
	box-shadow: var(--v2-shadow);
}

.mrb.mrb-v2 .mrb-coupon::before,
.mrb.mrb-v2 .mrb-coupon::after {
	content: none;
	display: none;
}

.mrb.mrb-v2 .mrb-coupon-art {
	height: 170px;
	min-height: 170px;
	background: #fff;
}

.mrb.mrb-v2 .mrb-coupon-art .mrb-coupon-svg,
.mrb.mrb-v2 .mrb-coupon-art .mrb-coupon-img {
	top: 12px;
	left: 12px;
	width: calc(100% - 24px);
	height: calc(100% - 24px);
	object-fit: contain;
	object-position: center;
	mix-blend-mode: normal;
}

.mrb.mrb-v2 .mrb-coupon-txt {
	justify-content: flex-start;
	align-items: flex-start;
	padding: 18px 20px 22px;
}

.mrb.mrb-v2 .mrb-coupon-txt p {
	color: var(--v2-ink) !important;
}

/* 누구에게 = 노란 알약 */
.mrb.mrb-v2 .mrb-coupon-txt p.mrb-coupon-for {
	display: inline-block;
	align-self: flex-start;
	margin: 0;
	padding: 4px 12px;
	border: 2px solid var(--v2-line);
	border-radius: 999px;
	background: var(--v2-yellow);
	color: var(--v2-ink) !important;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.3;
}

.mrb.mrb-v2 .mrb-coupon-txt p.mrb-coupon-name {
	margin-top: 12px !important;
	color: var(--v2-ink) !important;
	font-size: 24px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.mrb.mrb-v2 .mrb-coupon-txt p.mrb-coupon-how,
.mrb.mrb-v2 .mrb-coupon-txt p.mrb-coupon-sub {
	color: var(--v2-muted) !important;
	font-size: 15px;
	line-height: 1.45;
}

/* 참여 방법 = 흰 카드 + 굵은 선 + 그림자 · 「1분」 파랑 · 단계 카드 #F4F7FF + 2px 선(그림자 없음) · 번호 원 파랑 · 화살표 파랑 */
.mrb.mrb-v2 .mrb-guide {
	margin-top: 28px;
	padding: 24px 20px;
	border: var(--v2-border);
	border-radius: var(--v2-r-card);
	background: var(--v2-card);
	color: var(--v2-ink);
	box-shadow: var(--v2-shadow);
}

.mrb.mrb-v2 .mrb-guide-h3 {
	color: var(--v2-ink) !important;
	font-size: 24px;
	font-weight: 900;
	letter-spacing: -0.02em;
}

.mrb.mrb-v2 .mrb-guide-lead {
	color: var(--v2-ink) !important;
	font-weight: 600;
}

.mrb.mrb-v2 .mrb-guide-min {
	color: var(--v2-blue) !important;
	font-size: 28px;
	font-weight: 900;
}

.mrb.mrb-v2 .mrb-gstep {
	border: 2px solid var(--v2-line);
	border-radius: 18px;
	background: #F4F7FF !important;
	color: var(--v2-ink) !important;
	box-shadow: none;
}

.mrb.mrb-v2 .mrb-gstep-no {
	border: 2px solid var(--v2-line);
	background: var(--v2-blue) !important;
	color: #fff !important;
	font-weight: 900;
}

.mrb.mrb-v2 .mrb-gstep-t {
	color: var(--v2-ink) !important;
	font-weight: 900;
	letter-spacing: -0.02em;
}

.mrb.mrb-v2 .mrb-gstep-d {
	color: var(--v2-muted) !important;
}

.mrb.mrb-v2 .mrb-gstep::after {
	color: var(--v2-blue);
	font-weight: 900;
}

/* 지켜 주세요 = 먹색 글(머리 굵게) */
.mrb.mrb-v2 .mrb-keep {
	margin-top: 14px;
	color: var(--v2-ink) !important;
}

.mrb.mrb-v2 .mrb-keep-h {
	color: var(--v2-ink) !important;
	font-weight: 900;
}

.mrb.mrb-v2 .mrb-keep-t {
	color: var(--v2-ink) !important;
}

/* 고르기 버튼(상품·올릴 곳) = 흰 바탕 2px 선 · 고른 것(is-on · aria-pressed) = 파랑 바탕 흰 글 + 3px 그림자 · 바로가기 글줄은 그대로 */
.mrb.mrb-v2 .mrb-picks {
	gap: 10px;
}

.mrb.mrb-v2 .mrb-pickrow .mrb-label {
	color: var(--v2-ink) !important;
	font-weight: 800;
}

.mrb.mrb-v2 button.mrb-pick,
.mrb.mrb-v2 button.mrb-pick:focus,
.mrb.mrb-v2 button.mrb-pick:active,
.mrb.mrb-v2 button.mrb-pick:hover {
	border: 2px solid var(--v2-line) !important;
	border-radius: var(--v2-r-btn) !important;
	background: #fff !important;
	color: var(--v2-ink) !important;
	font-weight: 700 !important;
	box-shadow: none !important;
}

.mrb.mrb-v2 button.mrb-pick:hover {
	background: var(--v2-blue-soft) !important;
}

.mrb.mrb-v2 button.mrb-pick.is-on,
.mrb.mrb-v2 button.mrb-pick.is-on:focus,
.mrb.mrb-v2 button.mrb-pick.is-on:active,
.mrb.mrb-v2 button.mrb-pick.is-on:hover,
.mrb.mrb-v2 button.mrb-pick-mvno.is-on,
.mrb.mrb-v2 button.mrb-pick-mvno.is-on:focus,
.mrb.mrb-v2 button.mrb-pick-mvno.is-on:active,
.mrb.mrb-v2 button.mrb-pick-mvno.is-on:hover,
.mrb.mrb-v2 button.mrb-pick-tablet.is-on,
.mrb.mrb-v2 button.mrb-pick-tablet.is-on:focus,
.mrb.mrb-v2 button.mrb-pick-tablet.is-on:active,
.mrb.mrb-v2 button.mrb-pick-tablet.is-on:hover {
	border-color: var(--v2-line) !important;
	background: var(--v2-blue) !important;
	color: #fff !important;
	box-shadow: 3px 3px 0 var(--v2-line) !important;
}

.mrb.mrb-v2 button.mrb-pick.is-on * {
	color: #fff !important;
}

/* 복사 카드(①②③) = 흰 카드 2px 선 모서리 20px 4px 그림자 · 번호 파랑 원 · 제목 20px 900 */
.mrb.mrb-v2 .mrb-osteps {
	gap: 14px;
}

/* 폰 가로 넘김 줄: 카드 그림자(4px)가 잘리지 않게 안쪽 여백 */
.mrb.mrb-v2 .mrb-osteps .mrb-ostep-row {
	padding: 2px 6px 8px 2px;
}

.mrb.mrb-v2 .mrb-ostep,
.mrb.mrb-v2 .mrb-osteps .mrb-ostep {
	border: 2px solid var(--v2-line);
	border-radius: 20px;
	background: var(--v2-card);
	color: var(--v2-ink);
	box-shadow: 4px 4px 0 var(--v2-line);
}

.mrb.mrb-v2 .mrb-osteps .mrb-ostep {
	padding: 18px;
}

.mrb.mrb-v2 .mrb-ostep-no {
	border: 2px solid var(--v2-line);
	background: var(--v2-blue) !important;
	color: #fff !important;
	font-weight: 900;
}

.mrb.mrb-v2 .mrb-ostep-t,
.mrb.mrb-v2 .mrb-osteps .mrb-ostep-t {
	color: var(--v2-ink) !important;
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -0.02em;
}

.mrb.mrb-v2 .mrb-ostep-d,
.mrb.mrb-v2 .mrb-osteps .mrb-ostep-d {
	color: var(--v2-muted) !important;
}

.mrb.mrb-v2 .mrb-osteps > .mrb-ai-strip {
	border: 2px solid var(--v2-line);
	border-radius: 20px;
	background: var(--v2-blue-soft);
}

.mrb.mrb-v2 .mrb-osteps > .mrb-ai-strip .mrb-ai-go-label {
	color: var(--v2-ink) !important;
	font-weight: 800;
}

/* 링크 올리기(#submit) = 흰 카드 + 굵은 선 + 그림자 */
.mrb.mrb-v2 .mrb-ostep-submit {
	padding: 20px 18px 22px;
	border: var(--v2-border);
	border-radius: var(--v2-r-card);
	background: var(--v2-card);
	box-shadow: var(--v2-shadow);
}

/* 버튼 공통 = 2px 선 · 모서리 14px · 먹색 글 · 흰 바탕(보조 버튼 .mrb-btn-ghost 도 이 모양) */
.mrb.mrb-v2 a.mrb-btn,
.mrb.mrb-v2 a.mrb-btn:link,
.mrb.mrb-v2 a.mrb-btn:visited,
.mrb.mrb-v2 a.mrb-btn:focus,
.mrb.mrb-v2 a.mrb-btn:active,
.mrb.mrb-v2 button.mrb-btn,
.mrb.mrb-v2 button.mrb-btn:focus,
.mrb.mrb-v2 button.mrb-btn:active,
.mrb.mrb-v2 label.mrb-btn,
.mrb.mrb-v2 a.mrb-btn-ghost,
.mrb.mrb-v2 a.mrb-btn-ghost:link,
.mrb.mrb-v2 a.mrb-btn-ghost:visited,
.mrb.mrb-v2 a.mrb-btn-ghost:focus,
.mrb.mrb-v2 a.mrb-btn-ghost:active,
.mrb.mrb-v2 button.mrb-btn-ghost,
.mrb.mrb-v2 button.mrb-btn-ghost:focus,
.mrb.mrb-v2 button.mrb-btn-ghost:active {
	border: 2px solid var(--v2-line) !important;
	border-radius: var(--v2-r-btn) !important;
	background: #fff !important;
	color: var(--v2-ink) !important;
	font-weight: 800 !important;
	box-shadow: none !important;
	transition: transform 0.12s, box-shadow 0.12s, background 0.15s !important;
}

.mrb.mrb-v2 a.mrb-btn:hover,
.mrb.mrb-v2 button.mrb-btn:hover,
.mrb.mrb-v2 label.mrb-btn:hover,
.mrb.mrb-v2 a.mrb-btn-ghost:hover,
.mrb.mrb-v2 button.mrb-btn-ghost:hover {
	border-color: var(--v2-line) !important;
	background: var(--v2-blue-soft) !important;
	color: var(--v2-ink) !important;
}

/* 주 버튼(복사 버튼·제출하기) = 노랑 바탕 · 먹색 글 · 2px 선 · 4px 그림자 · 올리면 -2px 떠서 6px · 누르면 2px 내려가 그림자 0 */
.mrb.mrb-v2 a.mrb-btn-primary,
.mrb.mrb-v2 a.mrb-btn-primary:link,
.mrb.mrb-v2 a.mrb-btn-primary:visited,
.mrb.mrb-v2 a.mrb-btn-primary:focus,
.mrb.mrb-v2 a.mrb-btn-primary:active,
.mrb.mrb-v2 button.mrb-btn-primary,
.mrb.mrb-v2 button.mrb-btn-primary:focus,
.mrb.mrb-v2 button.mrb-btn-primary:active {
	border: 2px solid var(--v2-line) !important;
	border-radius: var(--v2-r-btn) !important;
	background: var(--v2-yellow) !important;
	color: var(--v2-ink) !important;
	font-weight: 900 !important;
	box-shadow: 4px 4px 0 var(--v2-line) !important;
	transform: translate(0, 0);
}

.mrb.mrb-v2 a.mrb-btn-primary:hover,
.mrb.mrb-v2 a.mrb-btn-primary:focus-visible,
.mrb.mrb-v2 button.mrb-btn-primary:hover,
.mrb.mrb-v2 button.mrb-btn-primary:focus-visible {
	border-color: var(--v2-line) !important;
	background: var(--v2-yellow) !important;
	color: var(--v2-ink) !important;
	box-shadow: 6px 6px 0 var(--v2-line) !important;
	transform: translate(-2px, -2px);
}

.mrb.mrb-v2 a.mrb-btn-primary:active,
.mrb.mrb-v2 button.mrb-btn-primary:active {
	box-shadow: 0 0 0 var(--v2-line) !important;
	transform: translate(2px, 2px);
}

.mrb.mrb-v2 a.mrb-btn-primary *,
.mrb.mrb-v2 button.mrb-btn-primary * {
	color: var(--v2-ink) !important;
}

.mrb.mrb-v2 button.mrb-btn-primary:disabled,
.mrb.mrb-v2 button.mrb-btn-primary[disabled] {
	box-shadow: none !important;
	transform: none;
}

/* 제출하기 = 주 버튼 크게 */
.mrb.mrb-v2 button.mrb-submit,
.mrb.mrb-v2 button.mrb-submit:focus,
.mrb.mrb-v2 button.mrb-submit:active,
.mrb.mrb-v2 button.mrb-submit:hover {
	min-height: 60px !important;
	font-size: 20px !important;
}

/* 입력칸 = 흰 바탕 2px 선 모서리 12px 높이 52px · focus = 파랑 outline */
.mrb.mrb-v2 .mrb-label {
	color: var(--v2-ink) !important;
	font-weight: 800;
}

.mrb.mrb-v2 .mrb-help {
	color: var(--v2-muted);
}

.mrb.mrb-v2 .mrb-input {
	min-height: 52px;
	border: 2px solid var(--v2-line) !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: var(--v2-ink) !important;
	box-shadow: none;
}

.mrb.mrb-v2 .mrb-input:focus {
	border-color: var(--v2-line) !important;
	box-shadow: none;
	outline: 3px solid var(--v2-blue);
	outline-offset: 2px;
}

.mrb.mrb-v2 .has-err .mrb-input {
	border-color: var(--mrb-red) !important;
}

/* 배송주소 동일 버튼 = 점선 2px · 누르면 파랑 바탕 */
.mrb.mrb-v2 button.mrb-addr-btn {
	border: 2px dashed var(--v2-line) !important;
	border-radius: var(--v2-r-btn);
	background: #fff !important;
	color: var(--v2-ink) !important;
}

.mrb.mrb-v2 button.mrb-addr-btn.is-on {
	border-style: solid !important;
	background: var(--v2-blue) !important;
	color: #fff !important;
	box-shadow: 3px 3px 0 var(--v2-line);
}

/* 후기 모음 = 줄 카드 흰 2px 선 모서리 16px · 탭 알약 2px 선 · 고른 탭 파랑 */
.mrb.mrb-v2 .mrb-sec-wall {
	margin-top: 44px;
	padding-top: 28px;
	border-top: var(--v2-border);
}

.mrb.mrb-v2 .mrb-band {
	border: 2px solid var(--v2-line);
	border-radius: 14px;
	background: var(--v2-blue-soft);
	color: var(--v2-ink);
}

.mrb.mrb-v2 .mrb-tabs {
	gap: 10px;
}

.mrb.mrb-v2 a.mrb-tab,
.mrb.mrb-v2 a.mrb-tab:link,
.mrb.mrb-v2 a.mrb-tab:visited,
.mrb.mrb-v2 a.mrb-tab:focus,
.mrb.mrb-v2 a.mrb-tab:active,
.mrb.mrb-v2 button.mrb-tab,
.mrb.mrb-v2 button.mrb-tab:focus,
.mrb.mrb-v2 button.mrb-tab:active {
	border: 2px solid var(--v2-line) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--v2-ink) !important;
	font-weight: 800 !important;
}

.mrb.mrb-v2 a.mrb-tab:hover,
.mrb.mrb-v2 button.mrb-tab:hover {
	border-color: var(--v2-line) !important;
	background: var(--v2-blue-soft) !important;
	color: var(--v2-ink) !important;
}

.mrb.mrb-v2 a.mrb-tab.is-on,
.mrb.mrb-v2 a.mrb-tab.is-on:link,
.mrb.mrb-v2 a.mrb-tab.is-on:visited,
.mrb.mrb-v2 a.mrb-tab.is-on:focus,
.mrb.mrb-v2 a.mrb-tab.is-on:active,
.mrb.mrb-v2 a.mrb-tab.is-on:hover,
.mrb.mrb-v2 button.mrb-tab.is-on,
.mrb.mrb-v2 button.mrb-tab.is-on:focus,
.mrb.mrb-v2 button.mrb-tab.is-on:active,
.mrb.mrb-v2 button.mrb-tab.is-on:hover {
	border-color: var(--v2-line) !important;
	background: var(--v2-blue) !important;
	color: #fff !important;
}

.mrb.mrb-v2 .mrb-list {
	gap: 10px;
}

.mrb.mrb-v2 .mrb-wrow {
	border: 2px solid var(--v2-line);
	border-radius: 16px;
	background: #fff;
	color: var(--v2-ink);
}

.mrb.mrb-v2 .mrb-wall-head {
	color: var(--v2-muted);
}

/* 완료 창 = 굵은 선 + 8px 그림자 · 체크 원 파랑 · 「확인」 = 주 버튼 */
.mrb.mrb-v2 .mrb-thanks {
	background: rgba(238, 243, 255, 0.92);
}

.mrb.mrb-v2 .mrb-thanks-card {
	border: var(--v2-border);
	border-radius: var(--v2-r-card);
	background: var(--v2-card);
	color: var(--v2-ink);
	box-shadow: 8px 8px 0 var(--v2-line);
}

.mrb.mrb-v2 .mrb-thanks-ic {
	border: 2.5px solid var(--v2-line);
	background: var(--v2-blue);
}

.mrb.mrb-v2 .mrb-thanks-title {
	color: var(--v2-ink) !important;
	font-weight: 900;
	letter-spacing: -0.02em;
}

.mrb.mrb-v2 .mrb-thanks-lead,
.mrb.mrb-v2 .mrb-thanks-cat {
	color: var(--v2-ink) !important;
}

.mrb.mrb-v2 .mrb-thanks-keep {
	color: var(--v2-muted) !important;
}

.mrb.mrb-v2 .mrb-thanks-card button.mrb-thanks-ok,
.mrb.mrb-v2 .mrb-thanks-card button.mrb-thanks-ok:focus,
.mrb.mrb-v2 .mrb-thanks-card button.mrb-thanks-ok:active,
.mrb.mrb-v2 .mrb-thanks-card button.mrb-thanks-ok:hover {
	border: 2px solid var(--v2-line) !important;
	border-radius: var(--v2-r-btn) !important;
	background: var(--v2-yellow) !important;
	color: var(--v2-ink) !important;
	font-weight: 900 !important;
	box-shadow: 4px 4px 0 var(--v2-line) !important;
}

.mrb.mrb-v2 .mrb-thanks-card button.mrb-thanks-ok:hover {
	box-shadow: 6px 6px 0 var(--v2-line) !important;
	transform: translate(-2px, -2px);
}

.mrb.mrb-v2 .mrb-thanks-card button.mrb-thanks-ok:active {
	box-shadow: 0 0 0 var(--v2-line) !important;
	transform: translate(2px, 2px);
}

.mrb.mrb-v2 .mrb-thanks-card button.mrb-thanks-ok:focus-visible {
	outline: 3px solid var(--v2-blue) !important;
}

/* 640px↑ = 데스크톱 여백·그림자 6px · 머리 2단(사진 오른쪽 46%) · h1 46px */
@media (min-width: 640px) {
	.mrb.mrb-v2 {
		--v2-shadow: 6px 6px 0 #111318;
		padding: 40px 32px;
	}

	.mrb.mrb-v2 .mrb-hero {
		grid-template-columns: minmax(0, 1fr) 46%;
		gap: 28px;
		padding: 40px;
	}

	.mrb.mrb-v2 .mrb-hero .mrb-h1 {
		font-size: 46px;
	}

	.mrb.mrb-v2 .mrb-guide {
		padding: 28px;
	}

	.mrb.mrb-v2 .mrb-osteps .mrb-ostep-row {
		padding: 0;
	}

	.mrb.mrb-v2 .mrb-ostep-submit {
		padding: 28px;
	}
}

/* 11-06 사장님 "ys·비번이 저절로 들어감" — 숫자 4자리 칸을 비밀번호 칸(type=password)이 아닌 글 칸으로 바꿔 브라우저 저장 로그인 자동 채우기를 막고, 글자는 점으로 가린다 */
.mrb .mrb-pw {
	-webkit-text-security: disc;
}

/* 11-09 SK(yj) */
/* ═════════════════════════════════════════════════════════════════════
 * 11-09 SK법인폰 사이트(bizsktelecom.com · 와이제이네트웍스) 모양 — 루트에 .mrb-brand-yj 가 붙을 때만(브랜드 yj · public.php mrb_ui_root · theme_v2·?look 과 무관)
 *   🔴 전부 .mrb.mrb-brand-yj … 로만 — 모두네트웍스(bizphone1 · 이 클래스 없음)엔 영향 0
 *   토큰: 바탕 흰 #FFFFFF · 따뜻한 옅은 회색 면 #F7F7F8 · 글 #1A1A1A · 보조 #5B5F66 · SK 빨강 #EA002C(주 버튼·강조·번호 · hover #C80026) · 주황 #FF7A00(두 번째 강조 · 알약 · 「1분」) · 옅은 빨강 면 #FFF1F3
 *   선 없는 둥근 카드(20~28px) + 아주 옅은 그림자 0 8px 24px rgba(0,0,0,.06) · 버튼 알약 999px · 첫 화면 = 빨강·주황 두 면을 대각선(왼쪽 위 → 오른쪽 아래)으로 나눈 띠(clip-path 두 면 · 그라데이션 아님) 위 흰 글 · 사진은 흰 둥근 판
 *   테마(Avada)가 a·button·h·p 색을 덮으므로 글자색·배경은 !important(위 하드닝 블록 「.mrb a.… · .mrb button.…」 보다 선택자를 한 단계 더 구체적으로) · 그라데이션·흐림·이모지 없음
 * ═════════════════════════════════════════════════════════════════════ */
.mrb.mrb-brand-yj {
	--yj-bg: #FFFFFF;
	--yj-soft: #F7F7F8;
	--yj-ink: #1A1A1A;
	--yj-muted: #5B5F66;
	--yj-red: #EA002C;
	--yj-red-dark: #C80026;
	--yj-red-soft: #FFF1F3;
	--yj-orange: #FF7A00;
	--yj-card: #FFFFFF;
	--yj-line: #E3E4E8;
	--yj-line-dark: #C9CBD1;
	--yj-input: #F4F4F6;
	--yj-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
	--yj-r-card: 24px;
	--yj-r-btn: 999px;
	/* 옛 토큰도 SK 색으로 — 토큰을 쓰는 곳(링크·뱃지·구분선·입력칸·보조 글)이 같이 바뀐다 */
	--mrb-ink: #1A1A1A;
	--mrb-muted: #5B5F66;
	--mrb-line: #E3E4E8;
	--mrb-blue: #EA002C;
	--mrb-blue-dark: #C80026;
	--mrb-soft: #F7F7F8;
	--mrb-grey-soft: #F7F7F8;
	--mrb-navy: #EA002C;
	--mrb-navy-soft: #FFF1F3;
	padding: 20px 16px 56px;
	border-radius: 0;
	background: var(--yj-bg);
	color: var(--yj-ink);
}

/* 링크 = SK 빨강(테마 a 색을 이긴다 · 버튼·탭은 아래 규칙이 따로) */
.mrb.mrb-brand-yj a {
	color: var(--yj-red);
}

/* 모든 제목 = 먹색 · 굵게 · 자간 좁게 */
.mrb.mrb-brand-yj h1,
.mrb.mrb-brand-yj h2,
.mrb.mrb-brand-yj h3,
.mrb.mrb-brand-yj .mrb-h1,
.mrb.mrb-brand-yj .mrb-h2,
.mrb.mrb-brand-yj .mrb-h3 {
	color: var(--yj-ink) !important;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.mrb.mrb-brand-yj .mrb-sec {
	margin-top: 36px;
}

.mrb.mrb-brand-yj .mrb-h2 {
	margin-bottom: 16px;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.25;
}

/* 머리 = 빨강 면 + 주황 면(대각선) · 흰 글 · 왼쪽 글 / 오른쪽 사진(폰은 위아래) */
.mrb.mrb-brand-yj .mrb-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
	align-items: center;
	min-height: 0;
	margin: 0 0 28px;
	padding: 28px 22px 24px;
	overflow: hidden;
	border: 0;
	border-radius: 28px;
	background: var(--yj-red);
	background-image: none;
	color: #fff;
	box-shadow: var(--yj-shadow);
}

/* 두 번째 면(주황) — 왼쪽 위 → 오른쪽 아래로 기운 경계 · 폰 = 아래쪽 면(사진 뒤) · 640px↑ = 오른쪽 면(사진 뒤) · clip-path 를 모르는 브라우저는 빨강 한 면 */
@supports (clip-path: polygon(0 0, 100% 0, 100% 100%)) {
	.mrb.mrb-brand-yj .mrb-hero::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 0;
		background: var(--yj-orange);
		clip-path: polygon(0 46%, 100% 72%, 100% 100%, 0 100%);
		pointer-events: none;
	}
}

.mrb.mrb-brand-yj .mrb-hero-txt {
	position: relative;
	z-index: 1;
	max-width: none;
	min-width: 0;
}

/* 눈썹 줄 = 흰 알약 + 빨강 글 */
.mrb.mrb-brand-yj .mrb-hero .mrb-eyebrow {
	display: inline-block;
	margin: 0;
	padding: 6px 14px;
	border-radius: 999px;
	background: #fff !important;
	color: var(--yj-red) !important;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.mrb.mrb-brand-yj .mrb-hero .mrb-h1 {
	margin-top: 14px;
	color: #fff !important;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.02em;
	word-break: keep-all;
}

.mrb.mrb-brand-yj .mrb-hero .mrb-h1 .mrb-h1-em {
	display: block;
	color: #fff !important;
}

.mrb.mrb-brand-yj .mrb-hero .mrb-sub {
	margin-top: 14px;
	color: rgba(255, 255, 255, 0.92) !important;
	font-size: 17px;
	line-height: 1.5;
}

/* 사진 = 흰 둥근 판 위에 */
.mrb.mrb-brand-yj .mrb-hero-photo {
	position: relative;
	z-index: 1;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0 !important;
	padding: 10px;
	border-radius: 22px;
	background: #fff;
	box-shadow: var(--yj-shadow);
}

.mrb.mrb-brand-yj .mrb-hero-photo img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 14px;
}

/* v2 사진 주소가 비어 옛 SVG 그림이 그려질 때도 2단 안에(겹치지 않게) */
.mrb.mrb-brand-yj .mrb-hero .mrb-hero-art {
	position: relative;
	z-index: 1;
	right: auto;
	bottom: auto;
	width: 100%;
	max-width: none;
}

/* 사은품 = 흰 둥근 카드(선 없음 · 옅은 그림자) · 위 그림 칸 170px 옅은 빨강 면 · 글 아래 · 쿠폰 홈(동그라미) 없음 */
.mrb.mrb-brand-yj .mrb-coupons {
	gap: 16px;
}

.mrb.mrb-brand-yj .mrb-coupon {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 170px minmax(0, 1fr);
	min-height: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--yj-r-card);
	background: var(--yj-card);
	color: var(--yj-ink);
	box-shadow: var(--yj-shadow);
}

.mrb.mrb-brand-yj .mrb-coupon::before,
.mrb.mrb-brand-yj .mrb-coupon::after {
	content: none;
	display: none;
}

.mrb.mrb-brand-yj .mrb-coupon-art {
	height: 170px;
	min-height: 170px;
	background: var(--yj-red-soft);
}

.mrb.mrb-brand-yj .mrb-coupon-art .mrb-coupon-svg,
.mrb.mrb-brand-yj .mrb-coupon-art .mrb-coupon-img {
	top: 14px;
	left: 14px;
	width: calc(100% - 28px);
	height: calc(100% - 28px);
	object-fit: contain;
	object-position: center;
	mix-blend-mode: multiply;
}

.mrb.mrb-brand-yj .mrb-coupon-txt {
	justify-content: flex-start;
	align-items: flex-start;
	padding: 18px 20px 22px;
}

.mrb.mrb-brand-yj .mrb-coupon-txt p {
	color: var(--yj-ink) !important;
}

/* 누구에게 = 주황 알약 흰 글 */
.mrb.mrb-brand-yj .mrb-coupon-txt p.mrb-coupon-for {
	display: inline-block;
	align-self: flex-start;
	margin: 0;
	padding: 5px 12px;
	border: 0;
	border-radius: 999px;
	background: var(--yj-orange) !important;
	color: #fff !important;
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1.3;
}

.mrb.mrb-brand-yj .mrb-coupon-txt p.mrb-coupon-name {
	margin-top: 12px !important;
	color: var(--yj-ink) !important;
	font-size: 23px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.mrb.mrb-brand-yj .mrb-coupon-txt p.mrb-coupon-how,
.mrb.mrb-brand-yj .mrb-coupon-txt p.mrb-coupon-sub {
	color: var(--yj-muted) !important;
	font-size: 15px;
	line-height: 1.45;
}

/* 참여 방법 = 옅은 회색 면(선 없음) · 「1분」 주황 · 단계 카드 = 흰 카드 + 왼쪽 빨강 굵은 띠 4px · 번호 원 빨강 · 화살표 빨강 */
.mrb.mrb-brand-yj .mrb-guide {
	margin-top: 28px;
	padding: 22px 18px;
	border: 0;
	border-radius: var(--yj-r-card);
	background: var(--yj-soft);
	color: var(--yj-ink);
	box-shadow: none;
}

.mrb.mrb-brand-yj .mrb-guide-h3 {
	color: var(--yj-ink) !important;
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.mrb.mrb-brand-yj .mrb-guide-lead {
	color: var(--yj-ink) !important;
	font-weight: 600;
}

.mrb.mrb-brand-yj .mrb-guide-min {
	color: var(--yj-orange) !important;
	font-size: 28px;
	font-weight: 900;
}

.mrb.mrb-brand-yj .mrb-gstep {
	border: 0;
	border-left: 4px solid var(--yj-red);
	border-radius: 18px;
	background: #fff !important;
	color: var(--yj-ink) !important;
	box-shadow: var(--yj-shadow);
}

.mrb.mrb-brand-yj .mrb-gstep-no {
	border: 0;
	background: var(--yj-red) !important;
	color: #fff !important;
	font-weight: 800;
}

.mrb.mrb-brand-yj .mrb-gstep-t {
	color: var(--yj-ink) !important;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.mrb.mrb-brand-yj .mrb-gstep-d {
	color: var(--yj-muted) !important;
}

.mrb.mrb-brand-yj .mrb-gstep::after {
	color: var(--yj-red);
	font-weight: 800;
}

/* 지켜 주세요 = 머리 빨강 · 본문 먹색 */
.mrb.mrb-brand-yj .mrb-keep {
	margin-top: 14px;
	color: var(--yj-ink) !important;
}

.mrb.mrb-brand-yj .mrb-keep-h {
	color: var(--yj-red) !important;
	font-weight: 800;
}

.mrb.mrb-brand-yj .mrb-keep-t {
	color: var(--yj-ink) !important;
}

/* 고르기 버튼(상품·올릴 곳) = 흰 바탕 옅은 회색 선 1.5px 알약 · 고른 것(is-on · aria-pressed) = 빨강 바탕 흰 글 · 바로가기 글줄은 그대로 */
.mrb.mrb-brand-yj .mrb-picks {
	gap: 10px;
}

.mrb.mrb-brand-yj .mrb-pickrow .mrb-label {
	color: var(--yj-ink) !important;
	font-weight: 800;
}

.mrb.mrb-brand-yj button.mrb-pick,
.mrb.mrb-brand-yj button.mrb-pick:focus,
.mrb.mrb-brand-yj button.mrb-pick:active,
.mrb.mrb-brand-yj button.mrb-pick:hover {
	border: 1.5px solid var(--yj-line) !important;
	border-radius: var(--yj-r-btn) !important;
	background: #fff !important;
	color: var(--yj-ink) !important;
	font-weight: 700 !important;
	box-shadow: none !important;
}

.mrb.mrb-brand-yj button.mrb-pick:hover {
	border-color: var(--yj-line-dark) !important;
	background: var(--yj-soft) !important;
}

.mrb.mrb-brand-yj button.mrb-pick.is-on,
.mrb.mrb-brand-yj button.mrb-pick.is-on:focus,
.mrb.mrb-brand-yj button.mrb-pick.is-on:active,
.mrb.mrb-brand-yj button.mrb-pick.is-on:hover,
.mrb.mrb-brand-yj button.mrb-pick-mvno.is-on,
.mrb.mrb-brand-yj button.mrb-pick-mvno.is-on:focus,
.mrb.mrb-brand-yj button.mrb-pick-mvno.is-on:active,
.mrb.mrb-brand-yj button.mrb-pick-mvno.is-on:hover,
.mrb.mrb-brand-yj button.mrb-pick-tablet.is-on,
.mrb.mrb-brand-yj button.mrb-pick-tablet.is-on:focus,
.mrb.mrb-brand-yj button.mrb-pick-tablet.is-on:active,
.mrb.mrb-brand-yj button.mrb-pick-tablet.is-on:hover {
	border-color: var(--yj-red) !important;
	background: var(--yj-red) !important;
	color: #fff !important;
	box-shadow: none !important;
}

.mrb.mrb-brand-yj button.mrb-pick.is-on * {
	color: #fff !important;
}

/* 복사 카드(①②③) = 흰 둥근 카드 20px(선 없음 · 옅은 그림자) · 번호 빨강 원 · 제목 19px 800 */
.mrb.mrb-brand-yj .mrb-osteps {
	gap: 14px;
}

/* 폰 가로 넘김 줄: 카드 그림자가 잘리지 않게 안쪽 여백 */
.mrb.mrb-brand-yj .mrb-osteps .mrb-ostep-row {
	padding: 2px 6px 12px 2px;
}

.mrb.mrb-brand-yj .mrb-ostep,
.mrb.mrb-brand-yj .mrb-osteps .mrb-ostep {
	border: 0;
	border-radius: 20px;
	background: var(--yj-card);
	color: var(--yj-ink);
	box-shadow: var(--yj-shadow);
}

.mrb.mrb-brand-yj .mrb-osteps .mrb-ostep {
	padding: 18px;
}

.mrb.mrb-brand-yj .mrb-ostep-no {
	border: 0;
	background: var(--yj-red) !important;
	color: #fff !important;
	font-weight: 800;
}

.mrb.mrb-brand-yj .mrb-ostep-t,
.mrb.mrb-brand-yj .mrb-osteps .mrb-ostep-t {
	color: var(--yj-ink) !important;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.mrb.mrb-brand-yj .mrb-ostep-d,
.mrb.mrb-brand-yj .mrb-osteps .mrb-ostep-d {
	color: var(--yj-muted) !important;
}

.mrb.mrb-brand-yj .mrb-osteps > .mrb-ai-strip {
	border: 0;
	border-radius: 20px;
	background: var(--yj-soft);
	box-shadow: none;
}

.mrb.mrb-brand-yj .mrb-osteps > .mrb-ai-strip .mrb-ai-go-label {
	color: var(--yj-ink) !important;
	font-weight: 800;
}

/* 링크 올리기(#submit) = 흰 둥근 카드 + 옅은 그림자 */
.mrb.mrb-brand-yj .mrb-ostep-submit {
	padding: 22px 18px 24px;
	border: 0;
	border-radius: var(--yj-r-card);
	background: var(--yj-card);
	box-shadow: var(--yj-shadow);
}

/* 버튼 공통(보조 · .mrb-btn-ghost 포함) = 흰 바탕 · 옅은 회색 선 1.5px · 알약 · 먹색 글 */
.mrb.mrb-brand-yj a.mrb-btn,
.mrb.mrb-brand-yj a.mrb-btn:link,
.mrb.mrb-brand-yj a.mrb-btn:visited,
.mrb.mrb-brand-yj a.mrb-btn:focus,
.mrb.mrb-brand-yj a.mrb-btn:active,
.mrb.mrb-brand-yj button.mrb-btn,
.mrb.mrb-brand-yj button.mrb-btn:focus,
.mrb.mrb-brand-yj button.mrb-btn:active,
.mrb.mrb-brand-yj label.mrb-btn,
.mrb.mrb-brand-yj a.mrb-btn-ghost,
.mrb.mrb-brand-yj a.mrb-btn-ghost:link,
.mrb.mrb-brand-yj a.mrb-btn-ghost:visited,
.mrb.mrb-brand-yj a.mrb-btn-ghost:focus,
.mrb.mrb-brand-yj a.mrb-btn-ghost:active,
.mrb.mrb-brand-yj button.mrb-btn-ghost,
.mrb.mrb-brand-yj button.mrb-btn-ghost:focus,
.mrb.mrb-brand-yj button.mrb-btn-ghost:active {
	border: 1.5px solid var(--yj-line) !important;
	border-radius: var(--yj-r-btn) !important;
	background: #fff !important;
	color: var(--yj-ink) !important;
	font-weight: 700 !important;
	box-shadow: none !important;
	transition: background 0.15s, border-color 0.15s !important;
}

.mrb.mrb-brand-yj a.mrb-btn:hover,
.mrb.mrb-brand-yj button.mrb-btn:hover,
.mrb.mrb-brand-yj label.mrb-btn:hover,
.mrb.mrb-brand-yj a.mrb-btn-ghost:hover,
.mrb.mrb-brand-yj button.mrb-btn-ghost:hover {
	border-color: var(--yj-line-dark) !important;
	background: var(--yj-soft) !important;
	color: var(--yj-ink) !important;
}

/* 주 버튼(복사 버튼·제출하기) = SK 빨강 바탕 · 흰 글 · 알약 · hover 진하게 */
.mrb.mrb-brand-yj a.mrb-btn-primary,
.mrb.mrb-brand-yj a.mrb-btn-primary:link,
.mrb.mrb-brand-yj a.mrb-btn-primary:visited,
.mrb.mrb-brand-yj a.mrb-btn-primary:focus,
.mrb.mrb-brand-yj a.mrb-btn-primary:active,
.mrb.mrb-brand-yj button.mrb-btn-primary,
.mrb.mrb-brand-yj button.mrb-btn-primary:focus,
.mrb.mrb-brand-yj button.mrb-btn-primary:active {
	border: 1.5px solid var(--yj-red) !important;
	border-radius: var(--yj-r-btn) !important;
	background: var(--yj-red) !important;
	color: #fff !important;
	font-weight: 800 !important;
	box-shadow: none !important;
	transform: none;
}

.mrb.mrb-brand-yj a.mrb-btn-primary:hover,
.mrb.mrb-brand-yj a.mrb-btn-primary:focus-visible,
.mrb.mrb-brand-yj button.mrb-btn-primary:hover,
.mrb.mrb-brand-yj button.mrb-btn-primary:focus-visible {
	border-color: var(--yj-red-dark) !important;
	background: var(--yj-red-dark) !important;
	color: #fff !important;
}

.mrb.mrb-brand-yj a.mrb-btn-primary *,
.mrb.mrb-brand-yj button.mrb-btn-primary * {
	color: #fff !important;
}

.mrb.mrb-brand-yj button.mrb-btn-primary:disabled,
.mrb.mrb-brand-yj button.mrb-btn-primary[disabled] {
	opacity: 0.55;
}

/* 제출하기 = 주 버튼 크게 */
.mrb.mrb-brand-yj button.mrb-submit,
.mrb.mrb-brand-yj button.mrb-submit:focus,
.mrb.mrb-brand-yj button.mrb-submit:active,
.mrb.mrb-brand-yj button.mrb-submit:hover {
	min-height: 58px !important;
	font-size: 19px !important;
}

/* 입력칸 = 옅은 회색 바탕 · 선 없음 · 모서리 14px · 높이 52px · focus = 빨강 2px */
.mrb.mrb-brand-yj .mrb-label {
	color: var(--yj-ink) !important;
	font-weight: 800;
}

.mrb.mrb-brand-yj .mrb-help {
	color: var(--yj-muted);
}

.mrb.mrb-brand-yj .mrb-input {
	min-height: 52px;
	border: 0 !important;
	border-radius: 14px !important;
	background: var(--yj-input) !important;
	color: var(--yj-ink) !important;
	box-shadow: none;
}

.mrb.mrb-brand-yj .mrb-input:focus {
	border: 0 !important;
	box-shadow: none;
	outline: 2px solid var(--yj-red);
	outline-offset: 0;
}

.mrb.mrb-brand-yj .has-err .mrb-input {
	box-shadow: inset 0 0 0 2px var(--mrb-red);
}

/* 배송주소 동일 버튼 = 점선 1.5px · 누르면 빨강 바탕 */
.mrb.mrb-brand-yj button.mrb-addr-btn {
	border: 1.5px dashed var(--yj-line-dark) !important;
	border-radius: 14px;
	background: #fff !important;
	color: var(--yj-ink) !important;
}

.mrb.mrb-brand-yj button.mrb-addr-btn.is-on {
	border: 1.5px solid var(--yj-red) !important;
	background: var(--yj-red) !important;
	color: #fff !important;
}

/* 후기 모음 = 위 구분선 1px · 줄 = 흰 둥근 카드 16px(옅은 그림자) · 탭 알약 1.5px 선 · 고른 탭 빨강 */
.mrb.mrb-brand-yj .mrb-sec-wall {
	margin-top: 44px;
	padding-top: 28px;
	border-top: 1px solid var(--yj-line);
}

.mrb.mrb-brand-yj .mrb-band {
	border: 0;
	border-radius: 14px;
	background: var(--yj-soft);
	color: var(--yj-ink);
}

.mrb.mrb-brand-yj .mrb-band-off {
	background: var(--yj-red-soft);
}

.mrb.mrb-brand-yj .mrb-tabs {
	gap: 10px;
}

.mrb.mrb-brand-yj a.mrb-tab,
.mrb.mrb-brand-yj a.mrb-tab:link,
.mrb.mrb-brand-yj a.mrb-tab:visited,
.mrb.mrb-brand-yj a.mrb-tab:focus,
.mrb.mrb-brand-yj a.mrb-tab:active,
.mrb.mrb-brand-yj button.mrb-tab,
.mrb.mrb-brand-yj button.mrb-tab:focus,
.mrb.mrb-brand-yj button.mrb-tab:active {
	border: 1.5px solid var(--yj-line) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--yj-ink) !important;
	font-weight: 700 !important;
}

.mrb.mrb-brand-yj a.mrb-tab:hover,
.mrb.mrb-brand-yj button.mrb-tab:hover {
	border-color: var(--yj-line-dark) !important;
	background: var(--yj-soft) !important;
	color: var(--yj-ink) !important;
}

.mrb.mrb-brand-yj a.mrb-tab.is-on,
.mrb.mrb-brand-yj a.mrb-tab.is-on:link,
.mrb.mrb-brand-yj a.mrb-tab.is-on:visited,
.mrb.mrb-brand-yj a.mrb-tab.is-on:focus,
.mrb.mrb-brand-yj a.mrb-tab.is-on:active,
.mrb.mrb-brand-yj a.mrb-tab.is-on:hover,
.mrb.mrb-brand-yj button.mrb-tab.is-on,
.mrb.mrb-brand-yj button.mrb-tab.is-on:focus,
.mrb.mrb-brand-yj button.mrb-tab.is-on:active,
.mrb.mrb-brand-yj button.mrb-tab.is-on:hover {
	border-color: var(--yj-red) !important;
	background: var(--yj-red) !important;
	color: #fff !important;
}

.mrb.mrb-brand-yj .mrb-list {
	gap: 10px;
}

.mrb.mrb-brand-yj .mrb-wrow {
	border: 0;
	border-radius: 16px;
	background: #fff;
	color: var(--yj-ink);
	box-shadow: var(--yj-shadow);
}

.mrb.mrb-brand-yj .mrb-wall-head {
	color: var(--yj-muted);
}

/* 결과 창(접수 결과) = 둥근 판 */
.mrb.mrb-brand-yj .mrb-sheet {
	border-radius: var(--yj-r-card);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

/* 완료 창 = 밝은 배경 · 흰 둥근 카드 · 체크 원 빨강 · 「확인」 = 주 버튼(알약) */
.mrb.mrb-brand-yj .mrb-thanks {
	background: rgba(255, 255, 255, 0.9);
}

.mrb.mrb-brand-yj .mrb-thanks-card {
	border: 0;
	border-radius: var(--yj-r-card);
	background: #fff;
	color: var(--yj-ink);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.mrb.mrb-brand-yj .mrb-thanks-ic {
	border: 0;
	background: var(--yj-red);
}

.mrb.mrb-brand-yj .mrb-thanks-title {
	color: var(--yj-ink) !important;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.mrb.mrb-brand-yj .mrb-thanks-lead,
.mrb.mrb-brand-yj .mrb-thanks-cat {
	color: var(--yj-ink) !important;
}

.mrb.mrb-brand-yj .mrb-thanks-keep {
	color: var(--yj-muted) !important;
}

.mrb.mrb-brand-yj .mrb-thanks-card button.mrb-thanks-ok,
.mrb.mrb-brand-yj .mrb-thanks-card button.mrb-thanks-ok:focus,
.mrb.mrb-brand-yj .mrb-thanks-card button.mrb-thanks-ok:active,
.mrb.mrb-brand-yj .mrb-thanks-card button.mrb-thanks-ok:hover {
	border: 0 !important;
	border-radius: var(--yj-r-btn) !important;
	background: var(--yj-red) !important;
	color: #fff !important;
	font-weight: 800 !important;
	box-shadow: none !important;
	transform: none;
}

.mrb.mrb-brand-yj .mrb-thanks-card button.mrb-thanks-ok:hover {
	background: var(--yj-red-dark) !important;
}

.mrb.mrb-brand-yj .mrb-thanks-card button.mrb-thanks-ok:focus-visible {
	outline: 3px solid var(--yj-orange) !important;
	outline-offset: 2px;
}

/* 640px↑ = 데스크톱 여백 · 머리 2단(사진 오른쪽 44% · 주황 면은 오른쪽) · h1 44px */
@media (min-width: 640px) {
	.mrb.mrb-brand-yj {
		padding: 40px 32px 72px;
	}

	/* 11-10 사장님 「제목 줄만 고치고」: 사진 칸 44% → 36% · h1 38px · 둘째 줄(사은품 받아 가세요)·눈썹 알약은 한 줄로 */
	.mrb.mrb-brand-yj .mrb-hero {
		grid-template-columns: minmax(0, 1fr) 36%;
		gap: 28px;
		padding: 40px;
	}

	.mrb.mrb-brand-yj .mrb-hero::before {
		clip-path: polygon(60% 0, 100% 0, 100% 100%, 76% 100%);
	}

	.mrb.mrb-brand-yj .mrb-hero .mrb-h1 {
		font-size: clamp(29px, 4.5vw, 38px);
	}

	.mrb.mrb-brand-yj .mrb-hero .mrb-h1 .mrb-h1-em,
	.mrb.mrb-brand-yj .mrb-hero .mrb-eyebrow {
		white-space: nowrap;
	}

	.mrb.mrb-brand-yj .mrb-guide {
		padding: 28px;
	}

	.mrb.mrb-brand-yj .mrb-osteps .mrb-ostep-row {
		padding: 0;
	}

	.mrb.mrb-brand-yj .mrb-ostep-submit {
		padding: 28px;
	}
}