/* =========================================================
   main-short — 또바기 스피치 명예의전당 (Landing)
   Scoped under .ms-page — isolated from WordPress theme / thof plugin
   Target artboard: 1400 × 941
   ========================================================= */

/* ---------- HARD SCOPE RESET ---------- */
.ms-page,
.ms-page *,
.ms-page *::before,
.ms-page *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: inherit;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	background: transparent;
	border: 0;
	outline: 0;
	color: inherit;
	float: none;
	clear: none;
	max-width: none;
	min-width: 0;
	vertical-align: baseline;
}

.ms-page a,
.ms-page a:hover,
.ms-page a:visited,
.ms-page a:focus,
.ms-page a:active {
	text-decoration: none;
	color: inherit;
	background: transparent;
	box-shadow: none;
}

.ms-page button {
	background: transparent;
	border: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}

.ms-page input,
.ms-page select,
.ms-page textarea {
	background: transparent;
	border: 0;
	font: inherit;
	color: inherit;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}

.ms-page table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

.ms-page th,
.ms-page td {
	background: transparent;
	border: 0;
	font-weight: normal;
	text-align: left;
}

.ms-page ul,
.ms-page ol {
	list-style: none;
}

.ms-page p,
.ms-page h1,
.ms-page h2,
.ms-page h3,
.ms-page h4,
.ms-page h5,
.ms-page h6 {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.ms-page img { display: block; max-width: 100%; height: auto; border: 0; }
.ms-page svg { display: block; }

/* ---------- TOKENS ---------- */
.ms-page {
	--ms-navy: #243d60;
	--ms-navy-dark: #1e3456;
	--ms-text-gray: #767676;
	--ms-text-light: #999999;
	--ms-text-muted: #888888;
	--ms-bg: #ffffff;
	--ms-gold: #c9a86c;
	--ms-gold-light: #d4b87a;
	--ms-pill-bg: #f3f4f6;
	--ms-pill-text: #555555;
	--ms-stat-icon-bg: #f0f1f3;
	--ms-radius-card: 16px;
	--ms-radius-cta: 14px;
	--ms-radius-stats: 20px;
	--ms-radius-pill: 6px;
	--ms-shadow-card: 0 2px 16px rgba(0, 0, 0, 0.06);
	--ms-shadow-stats: 0 4px 24px rgba(0, 0, 0, 0.08);
	--ms-font: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
	--ms-artboard-w: 1400px;
	--ms-artboard-h: 941px;
	--ms-hero-w: 526px;
	--ms-grid-row-h: 168px;
	--ms-grid-gap: 12px;
	--ms-grid-pad-top: 97px;
	--ms-grid-pad-bottom: 35px;
	--ms-grid-pad-left: 122px;
	--ms-grid-pad-right: 42px;

	width: var(--ms-artboard-w);
	height: var(--ms-artboard-h);
	min-height: var(--ms-artboard-h);
	margin: 0 auto;
	background: var(--ms-bg);
	color: var(--ms-navy);
	font-family: var(--ms-font);
	font-size: 14px;
	line-height: 1.5;
	display: flex;
	overflow: visible;
	position: relative;
	isolation: isolate;
	-webkit-font-smoothing: antialiased;
}

body {
	margin: 0;
	padding: 0;
	background: #f5f5f5;
}

/* =========================================================
   LEFT HERO (≈40%)
   ========================================================= */
.ms-page .ms-hero {
	position: relative;
	flex: 0 0 var(--ms-hero-w);
	width: var(--ms-hero-w);
	height: var(--ms-artboard-h);
	display: flex;
	flex-direction: column;
	padding: 0;
	z-index: 1;
	overflow: visible;
}

.ms-page .ms-hero-bg {
	position: absolute;
	/* Break out of centered 1400px layout — pin to viewport left edge */
	left: calc((var(--ms-artboard-w) - 100vw) / 2);
	top: 0;
	width: 680px;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.ms-page .ms-hero-bg-img {
	position: absolute;
	left: 0;
	top: 50%;
	height: 100%;
	width: auto;
	min-width: 680px;
	max-width: none;
	transform: translateY(-50%);
	object-fit: cover;
	object-position: left center;
}

.ms-page .ms-hero-content {
	position: relative;
	z-index: 2;
	padding: 108px 20px 148px 80px;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	min-height: 0;
	width: 100%;
	max-width: 460px;
}

/* Brand — text + line + star (mockup) */
.ms-page .ms-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	max-width: 400px;
	margin-bottom: 26px;
}

.ms-page .ms-brand-text {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32em;
	color: var(--ms-navy);
}

.ms-page .ms-brand-line {
	flex: 1;
	height: 1px;
	background: var(--ms-navy);
	opacity: 0.88;
	min-width: 0;
}

.ms-page .ms-star {
	flex-shrink: 0;
	color: var(--ms-navy);
}

.ms-page .ms-star--sm { width: 11px; height: 11px; }
.ms-page .ms-star--md { width: 13px; height: 13px; }

/* Kicker + Title */
.ms-page .ms-kicker {
	font-size: 15px;
	font-weight: 400;
	color: #7a8494;
	margin-bottom: 10px;
	letter-spacing: -0.02em;
}

.ms-page .ms-title {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 18px;
	width: 100%;
}

.ms-page .ms-title-line {
	display: block;
	font-size: 36px;
	font-weight: 300;
	line-height: 1.34;
	color: var(--ms-navy);
	letter-spacing: -0.04em;
}

.ms-page .ms-title-line strong {
	font-weight: 800;
}

/* Divider */
.ms-page .ms-divider {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 400px;
	margin-bottom: 22px;
	position: relative;
	height: 13px;
}

.ms-page .ms-divider-line {
	flex: 1;
	height: 1px;
	background: var(--ms-navy);
	opacity: 0.88;
}

.ms-page .ms-divider .ms-star {
	position: absolute;
	right: 0;
}

/* Description */
.ms-page .ms-desc {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.85;
	color: #6b7585;
	margin-bottom: 28px;
	letter-spacing: -0.02em;
	width: 100%;
	max-width: 400px;
}

/* CTA Box */
.ms-page .ms-cta {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	max-width: 400px;
	background: var(--ms-navy);
	border-radius: 16px;
	padding: 22px 24px;
	margin-bottom: 0;
	text-align: left;
	align-self: flex-start;
}

.ms-page .ms-cta-icon {
	flex: 0 0 54px;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.28);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ms-page .ms-cta-icon-img {
	width: 26px;
	height: auto;
	filter: brightness(0) invert(1);
}

.ms-page .ms-cta-text {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.75;
	color: #ffffff;
	letter-spacing: -0.02em;
}

/* Stats Bar */
.ms-page .ms-stats-bar {
	position: absolute;
	left: 28px;
	bottom: calc(
		var(--ms-artboard-h)
		- var(--ms-grid-pad-top)
		- (var(--ms-grid-row-h) * 4)
		- (var(--ms-grid-gap) * 3)
	);
	z-index: 4;
	display: flex;
	align-items: stretch;
	width: 598px;
	background: var(--ms-bg);
	border-radius: 22px;
	box-shadow: 0 6px 28px rgba(0, 0, 0, 0.09);
	padding: 22px 12px;
	min-height: 104px;
}

.ms-page .ms-stat {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 0 10px;
}

.ms-page .ms-stat-divider {
	width: 1px;
	background: #e4e4e4;
	align-self: stretch;
	margin: 6px 0;
}

.ms-page .ms-stat-icon {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #eef0f2;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ms-page .ms-stat-icon img {
	width: 23px;
	height: 23px;
	object-fit: contain;
	opacity: 0.7;
}

.ms-page .ms-stat-body {
	text-align: left;
}

.ms-page .ms-stat-value {
	font-size: 23px;
	font-weight: 800;
	color: var(--ms-navy);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.ms-page .ms-stat-label {
	font-size: 12px;
	font-weight: 500;
	color: #6e6e6e;
	line-height: 1.35;
	margin-top: 3px;
}

.ms-page .ms-stat-sub {
	font-size: 10.5px;
	font-weight: 400;
	color: #a3a3a3;
	line-height: 1.2;
	margin-top: 2px;
}

/* =========================================================
   RIGHT GRID — 3×4 row-aligned grid (featured spans rows 1–2)
   ========================================================= */
.ms-page .ms-grid {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(4, var(--ms-grid-row-h));
	gap: var(--ms-grid-gap);
	padding: var(--ms-grid-pad-top) var(--ms-grid-pad-right) var(--ms-grid-pad-bottom) var(--ms-grid-pad-left);
	align-self: stretch;
	align-content: start;
	height: var(--ms-artboard-h);
	min-height: 0;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}

.ms-page .ms-col {
	display: contents;
}

/* Col 1 */
.ms-page .ms-col:nth-child(1) .ms-card:nth-child(1) {
	grid-column: 1;
	grid-row: 1 / 3;
}

.ms-page .ms-col:nth-child(1) .ms-card:nth-child(2) {
	grid-column: 1;
	grid-row: 3;
}

.ms-page .ms-col:nth-child(1) .ms-card:nth-child(3) {
	grid-column: 1;
	grid-row: 4;
}

/* Col 2 */
.ms-page .ms-col:nth-child(2) .ms-card:nth-child(1) {
	grid-column: 2;
	grid-row: 1;
}

.ms-page .ms-col:nth-child(2) .ms-card:nth-child(2) {
	grid-column: 2;
	grid-row: 2 / 4;
}

.ms-page .ms-col:nth-child(2) .ms-card:nth-child(3) {
	grid-column: 2;
	grid-row: 4;
}

/* Col 3 */
.ms-page .ms-col:nth-child(3) .ms-card:nth-child(1) {
	grid-column: 3;
	grid-row: 1;
}

.ms-page .ms-col:nth-child(3) .ms-card:nth-child(2) {
	grid-column: 3;
	grid-row: 2;
}

.ms-page .ms-col:nth-child(3) .ms-card:nth-child(3) {
	grid-column: 3;
	grid-row: 3 / 5;
}

.ms-page .ms-col:nth-child(2) .ms-card:nth-child(2) .ms-card-inner,
.ms-page .ms-col:nth-child(3) .ms-card:nth-child(3) .ms-card-inner {
	justify-content: center;
}

.ms-page .ms-col:nth-child(2) .ms-card:nth-child(2) .ms-card-pill,
.ms-page .ms-col:nth-child(3) .ms-card:nth-child(3) .ms-card-pill {
	position: absolute;
	top: 13px;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 0;
	z-index: 2;
}

.ms-page .ms-col:nth-child(2) .ms-card:nth-child(2) .ms-card-wreath,
.ms-page .ms-col:nth-child(3) .ms-card:nth-child(3) .ms-card-wreath {
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	align-items: center;
}

/* Card base */
.ms-page .ms-card {
	position: relative;
	background: var(--ms-bg);
	border-radius: 16px;
	box-shadow: 0 2px 10px rgba(26, 48, 94, 0.04);
	border: 1px solid rgba(26, 48, 94, 0.04);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	width: 100%;
}

.ms-page .ms-card-inner {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 13px 12px 11px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Wreath row — dual mirrored laurel leaves */
.ms-page .ms-card-wreath {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	flex: 1;
	min-height: 0;
	gap: 0;
}

.ms-page .ms-card-leaf {
	width: 54px;
	height: auto;
	flex-shrink: 0;
	opacity: 0.34;
	pointer-events: none;
	filter: sepia(0.25) saturate(0.22) brightness(1.04) hue-rotate(-8deg);
}

.ms-page .ms-card-leaf--l {
	margin-right: -12px;
}

.ms-page .ms-card-leaf--r {
	transform: scaleX(-1);
	margin-left: -12px;
}

.ms-page .ms-card-center {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 156px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 0 2px;
}

/* Year pill */
.ms-page .ms-card-pill {
	display: inline-block;
	background: #f3f4f6;
	color: #666666;
	font-size: 11px;
	font-weight: 500;
	padding: 3px 11px;
	border-radius: 4px;
	border: none;
	margin-bottom: 7px;
	line-height: 1.35;
	letter-spacing: -0.01em;
	flex-shrink: 0;
}

.ms-page .ms-card-pill--featured {
	background: #eef0f3;
	color: #5a5a5a;
	border: none;
}

.ms-page .ms-card-achievement {
	font-size: 20px;
	font-weight: 700;
	color: var(--ms-navy);
	line-height: 1.3;
	letter-spacing: -0.03em;
	word-break: keep-all;
}

.ms-page .ms-card-achievement--sm {
	font-size: 16px;
	line-height: 1.38;
}

.ms-page .ms-card-name {
	font-size: 17px;
	font-weight: 700;
	color: var(--ms-navy);
	margin-top: 2px;
	letter-spacing: -0.02em;
}

.ms-page .ms-card-sub {
	font-size: 15px;
	font-weight: 700;
	color: var(--ms-navy);
	line-height: 1.38;
	margin-top: 2px;
	letter-spacing: -0.02em;
}

.ms-page .ms-card-divider {
	display: block;
	width: calc(100% - 36px);
	height: 1px;
	background: #e6e6e6;
	margin: 0 auto;
	flex-shrink: 0;
}

.ms-page .ms-card-footer-wrap {
	margin-top: auto;
	width: 100%;
	padding-top: 8px;
	flex-shrink: 0;
}

.ms-page .ms-card-footer {
	font-size: 11px;
	font-weight: 400;
	color: #999999;
	line-height: 1.5;
	margin-top: 0;
	padding-top: 8px;
	padding-bottom: 2px;
	letter-spacing: -0.01em;
	flex-shrink: 0;
}

/* Featured card */
.ms-page .ms-card--featured {
	background: var(--ms-navy);
	border-color: transparent;
	box-shadow: 0 4px 16px rgba(26, 48, 94, 0.18);
}

.ms-page .ms-card--featured .ms-card-leaf {
	opacity: 0.32;
	filter: brightness(0) invert(1);
	width: 60px;
}

.ms-page .ms-card--featured .ms-card-achievement {
	font-size: 22px;
	color: #ffffff;
}

.ms-page .ms-card--featured .ms-card-name {
	font-size: 18px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.95);
}

.ms-page .ms-card--featured .ms-card-footer-wrap {
	padding-top: 10px;
}

.ms-page .ms-card--featured .ms-card-divider {
	background: rgba(255, 255, 255, 0.28);
	width: calc(100% - 44px);
}

.ms-page .ms-card--featured .ms-card-footer {
	color: rgba(255, 255, 255, 0.52);
	font-size: 11px;
	padding-top: 10px;
	margin-top: 0;
}

/* Footer variant — tall cards (2-row span, matches featured height) */
.ms-page .ms-card--has-footer .ms-card-wreath {
	flex: 1;
	min-height: 0;
}

.ms-page .ms-card--has-footer .ms-card-footer-wrap {
	padding-top: 10px;
}

.ms-page .ms-card--has-footer .ms-card-footer {
	padding-top: 10px;
	padding-bottom: 4px;
}

/* Star cards */
.ms-page .ms-card--stars .ms-card-inner {
	padding: 11px 10px 8px;
}

.ms-page .ms-card--stars .ms-card-pill {
	margin-bottom: 5px;
}

.ms-page .ms-card--stars .ms-card-center {
	gap: 2px;
	max-width: 150px;
}

.ms-page .ms-card--stars .ms-card-achievement--sm {
	font-size: 13px;
	line-height: 1.34;
}

.ms-page .ms-card--stars .ms-card-sub {
	font-size: 12px;
	line-height: 1.34;
	margin-top: 1px;
}

.ms-page .ms-card-stars {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 4px;
	padding-bottom: 2px;
	flex-shrink: 0;
}

.ms-page .ms-card-stars .ms-card-star {
	width: 9px;
	height: 9px;
	flex-shrink: 0;
	color: #c4b5a0;
}

.ms-page .ms-card--stars .ms-card-leaf {
	opacity: 0.3;
	width: 46px;
}

.ms-page .ms-card--stars .ms-card-wreath {
	flex: 1;
	min-height: 0;
	align-items: center;
}

/* Dense multi-line standard cards */
.ms-page .ms-card:not(.ms-card--featured):not(.ms-card--stars):has(.ms-card-sub) .ms-card-achievement--sm {
	font-size: 14px;
	line-height: 1.34;
}

.ms-page .ms-card:not(.ms-card--featured):not(.ms-card--stars):has(.ms-card-sub) .ms-card-sub {
	font-size: 13px;
	line-height: 1.34;
}

.ms-page .ms-card--has-footer .ms-card-achievement--sm {
	font-size: 14px;
	line-height: 1.34;
}

.ms-page .ms-card--has-footer .ms-card-sub {
	font-size: 13px;
	line-height: 1.34;
}