/**
 * 만들어진 홈페이지.
 *
 * 색·글꼴·모서리는 한 군데도 직접 적지 않는다. 전부 var(--ms-*) 로만 쓴다 —
 * 그래야 "전체를 파란 톤으로" 같은 요청이 섹션을 한 개도 건드리지 않고 끝난다.
 * 여기에 #1f6feb 같은 값이 한 번 섞여 들어가면 테마가 그 자리만 비껴간다.
 */

/* 홈페이지 전체를 감싸는 껍데기.
   섹션 안의 설명 글은 .ms-body 다 - 이름을 갈라 두지 않으면
   여기 적은 배경색이 설명 글마다 흰 칸으로 깔린다 */
/* 라이믹스는 <body> 에 color_scheme_light · color_scheme_dark · color_scheme_auto 중
   하나를 붙이고, 거기에 여백을 건다. 그것이 우리 여백을 이기고 있었다.

   셋 다 짚는다. light 만 막으면 어두운 화면으로 보는 사람에게만 여백이 남는데,
   그런 고장은 만든 사람 눈에는 평생 안 보인다.

   !important 를 쓰는 까닭: 셈(html body.ms-page)으로 먼저 해 봤고 안 됐다.
   그때는 저쪽이 !important 로 박아 둔 줄로 봤는데, 지금은 다르게 본다 —
   .ms-page 가 body 에 남아 있지 않아 그 선택자가 맞는 데가 없었을 수 있다.
   그래서 알맹이는 body 가 아니라 우리가 쓴 .ms-site 상자에 담았다 (site_layout.html).
   여백만은 body 에 걸 수밖에 없으므로 color_scheme 쪽 이름으로 짚는다.

   body 를 직접 짚어도 되는 까닭: 이 파일은 우리 쪽에서만 불러온다.
   남의 화면에는 실리지 않으므로 다른 쪽 배치를 건드릴 일이 없다. */
html { margin: 0; padding: 0; }

body.ms-page,
body.color_scheme_light,
body.color_scheme_dark,
body.color_scheme_auto { margin: 0 !important; padding: 0 !important; }

.ms-page {
	margin: 0;
	padding: 0;
	font-family: var(--ms-font);
	color: var(--ms-text);
	background: var(--ms-bg);
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
}

/* 쪽 알맹이를 감싸는 틀. 여기에도 여백이 붙으면 섹션 배경이 끝까지 안 간다 */
.ms-page > .ms-main { margin: 0; padding: 0; }

/* 쪽이 짧아도 꼬리말은 화면 맨 아래에 선다.
   안 그러면 꼬리말이 중간쯤에서 끝나고 그 아래가 통째로 빈다.

   .ms-site 에만 건다 (손님 쪽 레이아웃이 쓴 상자다).
   편집기 미리보기 껍데기도 .ms-page 인데 거기에 100vh 를 주면
   상자보다 커져서 짧은 쪽에도 스크롤이 생긴다 — 그래서 .ms-page 가 아니라 .ms-site 다.
   body 에 걸지 않는 까닭: body 의 클래스는 라이믹스가 제 것을 붙이는 자리라
   우리 클래스가 거기 남아 있는지를 우리가 정할 수 없다 */
.ms-site { min-height: 100vh; display: flex; flex-direction: column; }
.ms-site > .ms-main { flex: 1 0 auto; }

/* 남는 자리를 꼬리말 위가 먹는다. 세로로 세운 상자가 아닐 때는 0 이라 아무 일도 안 한다 */
.ms-foot { margin-top: auto; }

.ms-wrap { max-width: var(--ms-width); margin: 0 auto; padding: 0 20px; }
.ms-wrap-narrow { max-width: 760px; }

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

/* 글 속의 링크는 그 글의 색을 따라가고 밑줄이 없다.

   셈이 (0,1,1) 이다. 라이믹스 바탕 CSS 의 a 규칙(셈 0,0,1)을 이겨야 하기 때문이다 —
   전에는 :where() 로 감싸 셈을 0 으로 두었더니 그 바탕 규칙에 져서,
   손님 쪽에서 모든 링크가 파란 색에 밑줄로 나왔다.

   이 규칙을 파일 맨 앞에 두는 까닭: 뒤에 오는 같은 셈의 규칙이 이기게 하려고다.
   .ms-menu a · .ms-foot-menu a (둘 다 0,1,1) 는 뒤에 있어 제 색을 그대로 지킨다.
   셈이 (0,1,0) 이라 모자란 것들(.ms-btn-primary·.ms-link 같은 것)은
   저마다 한 칸 올려 두었다 — 값은 그대로고 셀 자리만 늘렸다.
   안 올리면 단추 글자색이 '제 색' 이 아니라 '놓인 자리에서 물려받은 색' 이 되어,
   같은 단추가 섹션마다 다른 색으로 나온다 */
.ms-page a { color: inherit; text-decoration: none; }

/* ── 머리·꼬리 ── */

.ms-nav {
	position: sticky; top: 0; z-index: 30;
	/* color-mix 를 모르는 브라우저를 위해 먼저 불투명한 값을 둔다 —
	   이 줄이 없으면 그런 브라우저에서 머리띠가 비쳐 글자가 겹친다 */
	background: var(--ms-bg);
	background: color-mix(in srgb, var(--ms-bg) 88%, transparent);
	backdrop-filter: saturate(160%) blur(8px);
	border-bottom: 1px solid var(--ms-border);
}
.ms-nav-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; }

/* 로고는 남는 자리만 쓴다. 폭을 안 막으면 이름이 길거나 로고 그림이 넓을 때
   좁은 화면에서 ☰ 단추를 다음 줄로 밀어낸다 */
.ms-brand {
	font-weight: var(--ms-heading-weight); font-size: 18px; text-decoration: none;
	letter-spacing: -.01em; min-width: 0; flex: 0 1 auto;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-brand img { max-height: 32px; width: auto; max-width: 100%; display: block; }
.ms-menu { display: flex; gap: 4px; flex-wrap: wrap; }
.ms-menu a {
	padding: 8px 12px; border-radius: calc(var(--ms-radius) / 2);
	text-decoration: none; color: var(--ms-muted); font-size: 15px;
}
.ms-menu a:hover { color: var(--ms-text); background: var(--ms-bg_alt); }
.ms-menu a.on { color: var(--ms-primary); font-weight: 600; }

/* ── 좁은 화면 메뉴 단추 ──

   자바스크립트를 쓰지 않는다. 체크박스 하나로 여닫는다 —
   스크립트가 늦게 오거나 막혀도 메뉴는 열려야 한다.
   메뉴가 안 열리는 홈페이지는 그냥 못 쓰는 홈페이지다. */

.ms-navtoggle { position: absolute; opacity: 0; width: 0; height: 0; }
.ms-navbtn { display: none; }

@media (max-width: 860px) {
	/* 로고와 ☰ 는 반드시 한 줄. 메뉴만 둘째 줄로 내려온다.
	   height 가 아니라 min-height 다 — 못박으면 열린 메뉴가 잘린다 */
	.ms-nav-in {
		flex-direction: row; align-items: center; flex-wrap: wrap;
		min-height: 58px; height: auto; padding: 0; gap: 0;
	}
	.ms-brand { max-width: calc(100% - 52px); font-size: 17px; }
	.ms-brand img { max-height: 28px; }

	.ms-navbtn {
		display: block; width: 42px; height: 42px; flex: none;
		cursor: pointer; position: relative; margin-left: auto;
	}
	/* 줄 세 개 — 가운데 줄은 span, 위아래는 가짜 요소 */
	.ms-navbtn span,
	.ms-navbtn span::before,
	.ms-navbtn span::after {
		content: ''; position: absolute; left: 11px; width: 20px; height: 2px;
		background: var(--ms-text); border-radius: 2px; transition: transform .18s, opacity .18s;
	}
	.ms-navbtn span { top: 20px; }
	.ms-navbtn span::before { left: 0; top: -6px; }
	.ms-navbtn span::after { left: 0; top: 6px; }

	.ms-navtoggle:checked ~ .ms-navbtn span { background: transparent; }
	.ms-navtoggle:checked ~ .ms-navbtn span::before { transform: translateY(6px) rotate(45deg); }
	.ms-navtoggle:checked ~ .ms-navbtn span::after { transform: translateY(-6px) rotate(-45deg); }

	/* 열기 전에는 자리를 아예 차지하지 않는다 */
	.ms-nav .ms-menu {
		display: none; order: 3; width: 100%;
		flex-direction: column; gap: 0;
		border-top: 1px solid var(--ms-border); padding: 6px 0 10px;
	}
	.ms-navtoggle:checked ~ .ms-menu { display: flex; }
	.ms-nav .ms-menu a { padding: 13px 4px; border-radius: 0; font-size: 16px; }

	.ms-nav-band .ms-navbtn span,
	.ms-nav-band .ms-navbtn span::before,
	.ms-nav-band .ms-navbtn span::after { background: var(--ms-on_primary); }
	.ms-nav-band .ms-menu { border-top-color: rgba(255,255,255,.22); }

	/* 로고 가운데 모양도 좁은 화면에서는 왼쪽으로 내린다 — 가운데 두면 ☰ 와 겹친다 */
	.ms-nav.ms-nav-center .ms-nav-in { justify-content: space-between; padding: 0; }
	.ms-nav.ms-nav-center .ms-brand {
		flex: 0 1 auto; text-align: left; margin-bottom: 0; font-size: 17px;
	}
	.ms-nav.ms-nav-center .ms-menu { flex: 1 1 100%; }
}

/* ── 메뉴 모양 ── */

/* 로고 가운데 — 로고가 한 줄, 메뉴가 그 아래 한 줄 */
.ms-nav-center .ms-nav-in { flex-wrap: wrap; justify-content: center; padding: 22px 0 14px; }
.ms-nav-center .ms-brand { flex: 1 1 100%; text-align: center; margin-bottom: 12px; font-size: 22px; }
.ms-nav-center .ms-menu { flex: 1 1 100%; justify-content: center; }

.ms-nav-band { background: var(--ms-primary); border-bottom: 0; }
.ms-nav-band .ms-brand { color: var(--ms-on_primary); }
.ms-nav-band .ms-menu a { color: var(--ms-on_primary); opacity: .82; }
.ms-nav-band .ms-menu a:hover { background: rgba(255,255,255,.14); opacity: 1; color: var(--ms-on_primary); }
.ms-nav-band .ms-menu a.on { opacity: 1; background: rgba(255,255,255,.2); color: var(--ms-on_primary); }

/* ── 꼬리말 모양 ── */

.ms-foot-center { text-align: center; }
.ms-foot-center .ms-foot-menu { justify-content: center; }

.ms-foot-dark { background: #14161a; border-top: 0; color: #e6e8ea; }
.ms-foot-dark .ms-foot-menu a { color: #e6e8ea; }
.ms-foot-dark .ms-foot-info,
.ms-foot-dark .ms-foot-extra,
.ms-foot-dark .ms-foot-copy,
.ms-foot-dark .ms-foot-by { color: #9aa1a9; }
.ms-foot-dark .ms-foot-menu a:hover,
.ms-foot-dark .ms-foot-info a:hover { color: #fff; }

/* 위에 빈 자리를 두지 않는다. 한동안 margin-top: 80px 이 붙어 있었는데,
   그 80px 은 어디에도 딸리지 않은 빈 자리라 꼬리말 높이를 줄여도 그대로 남았다.
   줄 하나와 바탕색이 이미 꼬리말을 갈라 준다 */
.ms-foot { border-top: 1px solid var(--ms-border); background: var(--ms-bg_alt); padding: 44px 0 40px; }
.ms-foot-menu { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 22px; }
.ms-foot-menu a { color: var(--ms-text); text-decoration: none; font-size: 14px; font-weight: 600; }
.ms-foot-menu a:hover { color: var(--ms-primary); }

.ms-foot-name { font-weight: var(--ms-heading-weight); margin: 0 0 10px; font-size: 15px; }
.ms-foot-info { color: var(--ms-muted); font-size: 13px; margin: 0 0 8px; line-height: 2; }
.ms-foot-info a { color: inherit; text-decoration: none; }
.ms-foot-info a:hover { color: var(--ms-primary); }
.ms-foot .ms-dot { margin: 0 9px; opacity: .45; }
.ms-foot-extra { color: var(--ms-muted); font-size: 13px; margin: 0 0 12px; }
.ms-foot-copy { color: var(--ms-muted); font-size: 12px; margin: 14px 0 0; }
.ms-foot-by { color: var(--ms-muted); font-size: 12px; margin: 6px 0 0; opacity: .7; }

@media (max-width: 520px) {
	.ms-foot .ms-dot { display: block; height: 0; overflow: hidden; margin: 0; }
}

/* 주인에게만 보이는 떠 있는 단추. a. 로 셈을 맞춘다 */
a.ms-ownerbar {
	position: fixed; right: 20px; bottom: 20px; z-index: 50;
	background: var(--ms-primary); color: var(--ms-on_primary);
	padding: 12px 18px; border-radius: 999px; text-decoration: none;
	font-size: 14px; font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,.18);
}

/* ── 공통 ── */

.ms-sec { padding: 72px 0; }
.ms-sec + .ms-sec { border-top: 1px solid transparent; }
.ms-sechead { margin-bottom: 36px; }
.ms-h2 { font-size: 30px; font-weight: var(--ms-heading-weight); margin: 0 0 8px; letter-spacing: -.02em; }
.ms-lead { color: var(--ms-muted); margin: 0; font-size: 16px; }
/* 섹션 안의 설명 글. 배경도 글자색도 적지 않는다 -
   섹션 배경색을 무엇으로 바꾸든 그 위에 그대로 얹혀야 한다 */
.ms-body { font-size: 16px; margin: 0 0 20px; }
.ms-btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 28px 0 0; }

.ms-btn {
	display: inline-block; padding: 13px 24px; border-radius: var(--ms-radius);
	text-decoration: none; font-weight: 600; font-size: 15px; border: 1px solid transparent;
	transition: transform .1s ease, opacity .1s ease;
}
.ms-btn:hover { transform: translateY(-1px); opacity: .92; }
/* 클래스 둘(0,2,0)로 적는다 — 위의 .ms-page a (0,1,1) 를 이겨야 한다.
   둘은 늘 'ms-btn' 과 짝으로 나오므로(ms_btn 에 넘기는 클래스) 걸릴 것이 없다 */
.ms-btn.ms-btn-primary { background: var(--ms-primary); color: var(--ms-on_primary); }
.ms-btn.ms-btn-ghost { border-color: var(--ms-border); color: var(--ms-text); background: var(--ms-bg); }

/* 단추마다 따로 고른 색. 정한 쪽만 덮어쓴다 —
   바탕만 고르고 글자색은 모양이 정한 대로 두는 일이 흔하다.
   클래스 둘(0,2,0)이라 .ms-btn-primary·ghost(0,1,0)를 이긴다 */
.ms-btn.ms-btn-ownbg { background: var(--ms-btn-bg); }
.ms-btn.ms-btn-ownfg { color: var(--ms-btn-fg); }
.ms-btn-lg { padding: 16px 32px; font-size: 16px; }
/* a. 를 붙여 셈을 (0,1,1) 로 맞춘다. 뒤에 있으므로 .ms-page a 를 이긴다 —
   이것은 일부러 주 색으로 두는 '글 속 링크' 다 */
a.ms-link { color: var(--ms-primary); font-weight: 600; font-size: 14px; text-decoration: none; }

.ms-figure {
	display: block; width: 100%; border-radius: var(--ms-radius);
	object-fit: cover; aspect-ratio: 4 / 3; background: var(--ms-bg_alt);
}
.ms-empty {
	display: flex; align-items: center; justify-content: center;
	background: var(--ms-bg_alt); color: var(--ms-muted); font-size: 14px;
	border: 1px dashed var(--ms-border); aspect-ratio: 4 / 3; border-radius: var(--ms-radius);
}

.ms-grid { display: grid; gap: 24px; }
.ms-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ms-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ms-cols-4 { grid-template-columns: repeat(4, 1fr); }

.ms-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
/* 사진을 먼저 놓는 모양. 글은 HTML 에서 늘 먼저 오게 두고 자리만 바꾼다 —
   그래야 화면을 못 보는 사람도 글부터 읽는다 */
.ms-imgleft .ms-split-media { order: -1; }

/* ── 머리 비주얼 ── */

.ms-hero { padding: 96px 0; background: var(--ms-bg_alt); background-size: cover; background-position: center; }
.ms-hero-sm { padding: 64px 0; }
.ms-hero-lg { padding: 140px 0; }
.ms-hero-photo { color: #fff; position: relative; }
.ms-hero-photo::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.6));
}
.ms-hero-photo .ms-wrap { position: relative; }
.ms-align-center { text-align: center; }
.ms-align-center .ms-btns { justify-content: center; }
.ms-hero-title { font-size: 46px; line-height: 1.25; font-weight: var(--ms-heading-weight); margin: 0 0 16px; letter-spacing: -.03em; }
.ms-hero-sub { font-size: 18px; margin: 0; opacity: .88; }

.ms-headline { padding: 64px 0; background: var(--ms-bg_alt); background-size: cover; background-position: center; }
.ms-headline-photo { color: #fff; position: relative; }
.ms-headline-photo::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.ms-headline-photo .ms-wrap { position: relative; }
.ms-headline-title { font-size: 34px; font-weight: var(--ms-heading-weight); margin: 0 0 6px; letter-spacing: -.02em; }
.ms-headline-sub { margin: 0; opacity: .8; }

/* ── 글 ── */

.ms-prose { font-size: 16px; }
.ms-prose p { margin: 0 0 16px; }
.ms-prose h2, .ms-prose h3 { font-weight: var(--ms-heading-weight); margin: 32px 0 12px; }
.ms-prose ul, .ms-prose ol { padding-left: 22px; margin: 0 0 16px; }
.ms-prose blockquote {
	margin: 20px 0; padding: 12px 20px;
	border-left: 3px solid var(--ms-primary); color: var(--ms-muted);
}

/* ── 카드 ── */

.ms-card {
	padding: 28px; border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius); background: var(--ms-bg);
}
.ms-card-icon { font-size: 26px; color: var(--ms-primary); margin-bottom: 12px; }

/* 카드 사진 — 카드 맨 위를 꽉 채운다. 안쪽 여백만큼 밖으로 빼서 테두리에 맞춘다 */
.ms-card-withimg { padding: 0 0 26px; overflow: hidden; }
.ms-card-img { margin-bottom: 18px; }
.ms-card-withimg .ms-card-title,
.ms-card-withimg .ms-card-desc,
.ms-card-withimg .ms-link { margin-left: 24px; margin-right: 24px; }
.ms-card-photo {
	width: 100%; display: block; aspect-ratio: 4 / 3;
	object-fit: cover; background: var(--ms-bg_alt);
}
.ms-card-title { font-size: 18px; font-weight: var(--ms-heading-weight); margin: 0 0 8px; }
.ms-card-desc { color: var(--ms-muted); font-size: 15px; margin: 0 0 12px; }

/* ── 사진 모음 ── */

.ms-shot { margin: 0; }
.ms-shot figcaption { color: var(--ms-muted); font-size: 14px; margin-top: 10px; }

/* ── 숫자 ── */

.ms-statrow { display: flex; flex-wrap: wrap; gap: 20px; }
.ms-stat {
	flex: 1 1 160px; text-align: center; padding: 28px 16px;
	background: var(--ms-bg_alt); border-radius: var(--ms-radius);
}
.ms-stat-v { font-size: 40px; font-weight: 800; color: var(--ms-primary); line-height: 1.1; letter-spacing: -.03em; }
.ms-stat-u { font-size: 18px; margin-left: 3px; font-weight: 600; }
.ms-stat-l { color: var(--ms-muted); font-size: 14px; margin-top: 8px; }

/* ── 사양표 ── */

.ms-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ms-table th, .ms-table td { padding: 15px 16px; border-bottom: 1px solid var(--ms-border); text-align: left; }
.ms-table th { width: 30%; background: var(--ms-bg_alt); font-weight: 600; color: var(--ms-muted); }

/* 맨 윗줄 위에도 선을 긋는다. 줄마다 아래에만 그어 두면
   마지막 줄 아래에는 선이 있는데 맨 위에는 없어서, 표가 위만 트인 채로 보인다 */
.ms-table tr:first-child th,
.ms-table tr:first-child td { border-top: 1px solid var(--ms-border); }

/* ── 단계 ── */

.ms-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.ms-step { position: relative; padding-left: 60px; }
.ms-step-n {
	position: absolute; left: 0; top: 0; width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 999px; background: var(--ms-primary); color: var(--ms-on_primary);
	font-weight: 700;
}
.ms-step-t { font-size: 18px; font-weight: var(--ms-heading-weight); margin: 6px 0 6px; }
.ms-step-d { color: var(--ms-muted); margin: 0; font-size: 15px; }

/* ── 문답 ── */

.ms-qa { border-bottom: 1px solid var(--ms-border); }
.ms-qa summary {
	cursor: pointer; padding: 18px 0; font-weight: 600; font-size: 16px;
	list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.ms-qa summary::-webkit-details-marker { display: none; }
.ms-qa summary::after { content: '+'; color: var(--ms-muted); font-weight: 400; }
.ms-qa[open] summary::after { content: '−'; }
.ms-qa-a { padding: 0 0 20px; color: var(--ms-muted); font-size: 15px; }

/* ── 사람 ── */

.ms-person { text-align: center; }
.ms-portrait { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--ms-radius); }
.ms-person-n { font-size: 17px; font-weight: var(--ms-heading-weight); margin: 14px 0 2px; }
.ms-person-r { color: var(--ms-primary); font-size: 14px; margin: 0 0 8px; font-weight: 600; }
.ms-person-d { color: var(--ms-muted); font-size: 14px; margin: 0; }

/* ── 로고 ── */

.ms-logorow { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; }
.ms-logo {
	min-width: 140px; height: 72px; display: flex; align-items: center; justify-content: center;
	padding: 12px 20px; border: 1px solid var(--ms-border); border-radius: var(--ms-radius);
	color: var(--ms-muted); font-size: 14px; background: var(--ms-bg);
}
.ms-logo-img { max-height: 44px; width: auto; }

/* ── 문의 유도 ── */

.ms-cta-in { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.ms-cta .ms-body { margin: 0; }
.ms-tone-primary { background: var(--ms-primary); color: var(--ms-on_primary); }
.ms-tone-primary .ms-btn-primary { background: var(--ms-on_primary); color: var(--ms-primary); }
.ms-tone-plain { background: var(--ms-bg_alt); }

/* ── 연락처 ── */

.ms-deflist { margin: 0; display: grid; grid-template-columns: 90px 1fr; gap: 12px 16px; font-size: 15px; }
.ms-deflist dt { color: var(--ms-muted); }
.ms-deflist dd { margin: 0; }
.ms-map { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--ms-radius); }

/* ── 슬라이드 ──
   옆으로 흐르는 상자에 한 칸씩 딱 맞춰 선다(scroll-snap).
   자바스크립트가 멈춰도 손가락으로 밀어 넘길 수 있다 */

.ms-slider { position: relative; background: var(--ms-bg_alt); overflow: hidden; }
.ms-slides {
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth; scrollbar-width: none;
}
.ms-slides::-webkit-scrollbar { display: none; }

.ms-slide {
	flex: 0 0 100%; scroll-snap-align: start;
	display: flex; align-items: center;
	padding: 96px 0; background-size: cover; background-position: center;
}
.ms-slider-sm .ms-slide { padding: 64px 0; }
.ms-slider-lg .ms-slide { padding: 150px 0; }

.ms-slide-photo { color: #fff; position: relative; }
.ms-slide-photo::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.6));
}
.ms-slide-photo .ms-wrap { position: relative; }
.ms-slide .ms-wrap { width: 100%; }
.ms-slide-title { font-size: 40px; font-weight: var(--ms-heading-weight); margin: 0 0 14px; letter-spacing: -.03em; line-height: 1.25; }
.ms-slide-sub { font-size: 17px; margin: 0; opacity: .9; }

.ms-slide-nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
	width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--ms-border); background: var(--ms-bg); color: var(--ms-text);
	font-size: 22px; line-height: 1; opacity: .85;
}
.ms-slide-nav:hover { opacity: 1; }
.ms-slide-nav.prev { left: 16px; }
.ms-slide-nav.next { right: 16px; }

.ms-slide-dots {
	position: absolute; left: 0; right: 0; bottom: 18px; z-index: 4;
	display: flex; justify-content: center; gap: 7px;
}
.ms-slide-dots button {
	width: 9px; height: 9px; padding: 0; border-radius: 999px; cursor: pointer;
	border: 0; background: var(--ms-muted); opacity: .45;
}
.ms-slide-dots button.on { background: var(--ms-primary); opacity: 1; width: 22px; }

/* ── 영상 ── */

.ms-videobox { position: relative; aspect-ratio: 16 / 9; border-radius: var(--ms-radius); overflow: hidden; background: #000; }
.ms-videobox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ms-videocap { color: var(--ms-muted); font-size: 14px; margin: 12px 0 0; text-align: center; }

/* 화면 꽉 — 본문 너비를 넘어선다 */
.ms-video-wide { padding-bottom: 0; }
.ms-videobox-wide { border-radius: 0; }

/* 글 옆에 */
.ms-video-side .ms-videobox { border-radius: var(--ms-radius); }

/* ── 영상 배경 ──

   영상은 뒤에 깔고 글은 그 위에 올린다.
   영상이 안 뜨는 기기(자동재생을 막는 폰, 데이터 절약 모드)에서는
   '대신 보일 사진' 이 그 자리를 지킨다 — 아무것도 안 보이는 것보다 낫다. */

.ms-vhero { position: relative; overflow: hidden; display: flex; align-items: center; color: #fff; }
.ms-vhero-md { min-height: 420px; padding: 80px 0; }
.ms-vhero-lg { min-height: 620px; padding: 100px 0; }
.ms-vhero-full { min-height: 100vh; padding: 100px 0; }

.ms-vhero-bg { position: absolute; inset: 0; z-index: 0; background: #111; }

/* 영상은 칸을 꽉 채우도록 키운다. 16:9 가 아닌 화면에서는 넘치는 쪽이 잘린다 —
   찌그러뜨리는 것보다 잘리는 편이 낫다 */
.ms-vhero-media {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 100%; height: 100%; object-fit: cover; border: 0; pointer-events: none;
}
iframe.ms-vhero-media {
	width: 177.78vh;      /* 높이에 맞춘 16:9 너비 */
	min-width: 100%;
	height: 56.25vw;      /* 너비에 맞춘 16:9 높이 */
	min-height: 100%;
}
.ms-vhero-fallback {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center; z-index: -1;
}

.ms-vhero-in { position: relative; z-index: 2; width: 100%; }
.ms-vhero-title { font-size: 48px; line-height: 1.22; font-weight: var(--ms-heading-weight); margin: 0 0 16px; letter-spacing: -.03em; }
.ms-vhero-sub { font-size: 18px; margin: 0; opacity: .92; }

/* 글이 읽히게 덮는다. 영상 위의 흰 글씨는 그냥 두면 거의 안 읽힌다 */
.ms-shade-soft .ms-vhero-bg::after,
.ms-shade-hard .ms-vhero-bg::after {
	content: ''; position: absolute; inset: 0; z-index: 1;
}
.ms-shade-soft .ms-vhero-bg::after { background: rgba(0,0,0,.38); }
.ms-shade-hard .ms-vhero-bg::after { background: rgba(0,0,0,.62); }

@media (max-width: 860px) {
	.ms-vhero-title { font-size: 32px; }
	.ms-vhero-lg, .ms-vhero-full { min-height: 460px; }
}

/* ── 공지·소식 ── */

.ms-notices { list-style: none; padding: 0; margin: 0; }
.ms-notices li {
	display: flex; gap: 16px; align-items: baseline;
	padding: 15px 2px; border-bottom: 1px solid var(--ms-border);
}
.ms-notice-d { color: var(--ms-muted); font-size: 13px; flex: none; width: 92px; }
.ms-notice-t { font-size: 15px; text-decoration: none; }
a.ms-notice-t:hover { color: var(--ms-primary); }

/* ── 고객 후기 ── */

.ms-quote {
	margin: 0; padding: 26px; border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius); background: var(--ms-bg);
}
.ms-quote blockquote {
	margin: 0 0 18px; font-size: 15px; line-height: 1.8; color: var(--ms-text);
}
.ms-quote blockquote::before { content: '“'; font-size: 30px; color: var(--ms-primary); line-height: 0; vertical-align: -12px; margin-right: 4px; }
.ms-quote figcaption { display: flex; align-items: center; gap: 10px; }
.ms-quote-face { width: 38px; height: 38px; border-radius: 999px; object-fit: cover; flex: none; }
.ms-quote figcaption b { display: block; font-size: 14px; }
.ms-quote figcaption em { display: block; font-style: normal; font-size: 12px; color: var(--ms-muted); }

/* ── 요금 ──

   값이 주인공이다. 이름은 작게 위에, 값은 크게, 그 아래 설명 한 줄.
   추천 칸은 색이 아니라 '자리' 로 말한다 — 한 칸 들어올리고 어깨에 표를 단다.
   색만 바꾸면 "저건 왜 저 색이지" 로 끝나고, 고를 이유가 화면에 안 남는다. */

.ms-plans { align-items: stretch; }

.ms-plan {
	position: relative;
	padding: 32px 28px 28px;
	border: 1px solid var(--ms-border);
	border-radius: calc(var(--ms-radius) + 6px);
	background: var(--ms-bg);
	display: flex; flex-direction: column;
	transition: transform .18s ease, box-shadow .18s ease;
}
.ms-plan:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, .07); }

/* 한 칸 들어올린다. transform 은 자리를 안 먹으므로 칸 높이는 그대로 나란하다 */
.ms-plan.on {
	border-color: transparent;
	box-shadow: 0 0 0 2px var(--ms-primary), 0 20px 48px rgba(0, 0, 0, .13);
	transform: translateY(-10px);
}
.ms-plan.on:hover { transform: translateY(-13px); }

.ms-plan-tag {
	position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
	background: var(--ms-primary); color: var(--ms-on_primary);
	font-size: 11px; font-weight: 700; letter-spacing: .04em;
	padding: 5px 15px; border-radius: 999px; white-space: nowrap;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

.ms-plan-n { font-size: 15px; font-weight: 700; margin: 0 0 14px; color: var(--ms-muted); letter-spacing: .02em; }
.ms-plan-p {
	font-size: 42px; font-weight: 800; margin: 0; line-height: 1; letter-spacing: -.035em;
	display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.ms-plan-p span { font-size: 14px; font-weight: 500; color: var(--ms-muted); letter-spacing: 0; margin: 0; }
.ms-plan-d { font-size: 14px; color: var(--ms-muted); margin: 11px 0 0; }

/* 값과 항목 사이를 선으로 끊는다. 값이 어디까지인지가 분명해진다 */
.ms-plan-f {
	list-style: none; padding: 22px 0 0; margin: 22px 0 24px; flex: 1;
	border-top: 1px solid var(--ms-border);
}
.ms-plan-f li { font-size: 14px; padding: 8px 0 8px 27px; position: relative; }
/* 맨 ✓ 대신 옅은 동그라미 안에 넣는다. 줄이 여럿일 때 훨씬 정돈돼 보인다 */
.ms-plan-f li::before {
	content: ''; position: absolute; left: 0; top: 10px;
	width: 17px; height: 17px; border-radius: 999px;
	background: var(--ms-primary); opacity: .13;
}
.ms-plan-f li::after {
	content: ''; position: absolute; left: 5.5px; top: 14px;
	width: 4px; height: 8px;
	border: solid var(--ms-primary); border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.ms-plan > .ms-btn { display: block; text-align: center; margin-top: auto; }

/* ── 요금: 표로 견주기 ──

   한 상자 안에 칸을 나눈다. 칸마다 테두리를 두르면 상자가 셋으로 보여
   '견주는 표' 가 아니라 '카드 세 장' 이 된다. */

.ms-pricetable {
	gap: 0;
	border: 1px solid var(--ms-border);
	border-radius: calc(var(--ms-radius) + 6px);
	overflow: hidden; background: var(--ms-bg);
}
.ms-ptcol { display: flex; flex-direction: column; padding: 0 0 26px; border-left: 1px solid var(--ms-border); }
.ms-ptcol:first-child { border-left: 0; }
.ms-ptcol.on { background: var(--ms-bg_alt); }

.ms-pthead {
	position: relative; padding: 30px 22px 22px; text-align: center;
	border-bottom: 1px solid var(--ms-border); border-top: 3px solid transparent;
}
.ms-ptcol.on .ms-pthead { border-top-color: var(--ms-primary); }
.ms-pthead .ms-plan-p { justify-content: center; }
.ms-pt-tag {
	display: inline-block; margin-bottom: 10px;
	background: var(--ms-primary); color: var(--ms-on_primary);
	font-size: 11px; font-weight: 700; letter-spacing: .04em;
	padding: 4px 12px; border-radius: 999px;
}

.ms-ptlist { list-style: none; margin: 0; padding: 0; flex: 1; }
.ms-ptlist li {
	padding: 13px 20px; font-size: 14px; text-align: center;
	border-bottom: 1px solid var(--ms-border); color: var(--ms-muted);
}
.ms-ptlist li:last-child { border-bottom: 0; }
.ms-ptcol > .ms-btn { display: block; margin: 22px 20px 0; text-align: center; }

/* ── 요금: 선만 ──

   상자를 없애고 가는 세로선으로만 나눈다. 굵은 선을 칸마다 따로 그으면
   조용한 것이 아니라 덜 만든 것으로 보인다. */

.ms-priceflat { gap: 0; }
.ms-pflat { padding: 0 28px; border-left: 1px solid var(--ms-border); display: flex; flex-direction: column; }
.ms-pflat:first-child { border-left: 0; padding-left: 0; }
.ms-pflat .ms-plan-p { font-size: 34px; }
.ms-pflat.on .ms-plan-p { color: var(--ms-primary); }

/* 추천은 이름 옆의 점 하나로만 알린다 */
.ms-pflat-dot {
	display: inline-block; width: 7px; height: 7px; border-radius: 999px;
	background: var(--ms-primary); margin-left: 7px; vertical-align: middle;
}

.ms-pflat-f { border-top: 0; padding-top: 16px; margin: 16px 0 18px; }
.ms-pflat-f li { padding: 9px 0; color: var(--ms-muted); border-bottom: 1px solid var(--ms-border); }
.ms-pflat-f li::before, .ms-pflat-f li::after { display: none; }
.ms-pflat > .ms-link { margin-top: auto; }

/* ── 연혁 ── */

.ms-years { list-style: none; padding: 0; margin: 0; }
.ms-years li {
	display: flex; gap: 22px; padding: 16px 0;
	border-left: 2px solid var(--ms-border); padding-left: 24px; margin-left: 8px; position: relative;
}
.ms-years li::before {
	content: ''; position: absolute; left: -7px; top: 24px;
	width: 12px; height: 12px; border-radius: 999px;
	background: var(--ms-primary); border: 3px solid var(--ms-bg);
}
.ms-year { font-weight: 800; color: var(--ms-primary); flex: none; width: 62px; font-size: 16px; }
.ms-years b { font-size: 15px; font-weight: 600; }
.ms-years p { margin: 4px 0 0; color: var(--ms-muted); font-size: 14px; }

/* ── 자료 내려받기 ── */

.ms-downs { list-style: none; padding: 0; margin: 0; }
.ms-downs li {
	display: flex; align-items: center; gap: 14px;
	padding: 16px; margin-bottom: 10px;
	border: 1px solid var(--ms-border); border-radius: var(--ms-radius);
}
.ms-downs li > div { flex: 1; min-width: 0; }
.ms-down-i {
	width: 36px; height: 36px; flex: none; border-radius: 999px;
	background: var(--ms-bg_alt); color: var(--ms-primary);
	display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.ms-downs b { display: block; font-size: 15px; }
.ms-downs em { display: block; font-style: normal; font-size: 12px; color: var(--ms-muted); margin-top: 2px; }

/* ── 지도 ── */

.ms-bigmap { width: 100%; border: 0; border-radius: var(--ms-radius); display: block; }
.ms-bigmap-sm { height: 280px; }
.ms-bigmap-md { height: 420px; }
.ms-bigmap-lg { height: 600px; }

/* ── 알림 띠 ── */

.ms-banner { padding: 11px 0; font-size: 14px; }
.ms-banner-in { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.ms-bn-primary { background: var(--ms-primary); color: var(--ms-on_primary); }
.ms-bn-warn { background: var(--ms-accent); color: #fff; }
.ms-bn-plain { background: var(--ms-bg_alt); color: var(--ms-text); border-bottom: 1px solid var(--ms-border); }
/* 밑줄을 일부러 그었다. a. 로 셈을 맞추지 않으면 위의 되돌리기 규칙이 밑줄을 지운다 */
a.ms-banner-btn {
	text-decoration: underline; font-weight: 600; font-size: 13px; color: inherit; white-space: nowrap;
}

/* ── 여백·구분선 ── */

.ms-divider .ms-wrap span { display: block; }
.ms-dv-sm { padding: 18px 0; }
.ms-dv-md { padding: 36px 0; }
.ms-dv-lg { padding: 72px 0; }
.ms-dv-line .ms-wrap span { border-top: 1px solid var(--ms-border); }
.ms-dv-dots .ms-wrap span {
	height: 5px; background-image: radial-gradient(var(--ms-border) 40%, transparent 41%);
	background-size: 14px 5px; background-repeat: repeat-x; background-position: center;
}

/* ══════════════════════════════════════════════════
   스킨 — 같은 글, 다른 생김새

   칸(props)은 기본 스킨과 똑같다. 여기서 바뀌는 것은 모양뿐이다.
   색은 한 군데도 직접 적지 않는다. 전부 var(--ms-*) 로만.
   ══════════════════════════════════════════════════ */

/* ── 메인 비주얼: 좌우 나눔 ── */
.ms-hero2 { background: var(--ms-bg_alt); padding: 80px 0; }
.ms-hero2-title { font-size: 40px; line-height: 1.25; font-weight: var(--ms-heading-weight); margin: 0 0 14px; letter-spacing: -.03em; }
.ms-hero2-sub { font-size: 17px; color: var(--ms-muted); margin: 0; }
.ms-hero2-img { aspect-ratio: 1 / 1; }

/* ── 메인 비주얼: 글자만 ── */
.ms-hero3 { padding: 110px 0; background: var(--ms-bg); border-bottom: 1px solid var(--ms-border); }
.ms-hero3.ms-hero-sm { padding: 70px 0; }
.ms-hero3.ms-hero-lg { padding: 160px 0; }
.ms-hero3-title { font-size: 52px; line-height: 1.2; font-weight: var(--ms-heading-weight); margin: 0 0 18px; letter-spacing: -.04em; }
.ms-hero3-sub { font-size: 18px; color: var(--ms-muted); margin: 0; }

/* ── 카드: 줄로 ── */
.ms-card2 { padding: 0 0 4px; border-top: 2px solid var(--ms-text); padding-top: 20px; }
.ms-card2-icon { color: var(--ms-primary); font-size: 20px; }
.ms-card2-img { margin-bottom: 14px; }
.ms-card2-img .ms-card-photo { border-radius: var(--ms-radius); aspect-ratio: 16 / 10; }
.ms-card2-title { font-size: 17px; font-weight: var(--ms-heading-weight); margin: 10px 0 8px; }
.ms-card2-desc { color: var(--ms-muted); font-size: 15px; margin: 0 0 10px; }

/* ── 카드: 번호 매김 ── */
.ms-card3 { padding: 24px; background: var(--ms-bg_alt); border-radius: var(--ms-radius); }
.ms-card3-n { font-size: 30px; font-weight: 800; color: var(--ms-primary); opacity: .35; letter-spacing: -.03em; }

.ms-card3-withimg { padding: 0 0 24px; overflow: hidden; }
.ms-card3-img { position: relative; margin-bottom: 16px; }
.ms-card3-img .ms-card-photo { aspect-ratio: 16 / 10; }
.ms-card3-badge {
	position: absolute; left: 0; bottom: 0;
	background: var(--ms-primary); color: var(--ms-on_primary);
	font-size: 15px; font-weight: 800; padding: 6px 14px;
	border-radius: 0 var(--ms-radius) 0 0;
}
.ms-card3-withimg .ms-card3-title,
.ms-card3-withimg .ms-card3-desc,
.ms-card3-withimg .ms-link { margin-left: 22px; margin-right: 22px; }
.ms-card3-title { font-size: 17px; font-weight: var(--ms-heading-weight); margin: 6px 0 8px; }
.ms-card3-desc { color: var(--ms-muted); font-size: 15px; margin: 0 0 10px; }

/* ── 숫자: 색 띠 ── */
.ms-statband {
	display: flex; flex-wrap: wrap; background: var(--ms-primary);
	color: var(--ms-on_primary); border-radius: var(--ms-radius); overflow: hidden;
}
.ms-stat2 { flex: 1 1 150px; text-align: center; padding: 34px 16px; }
.ms-stat2 + .ms-stat2 { border-left: 1px solid rgba(255,255,255,.18); }
.ms-stat2-v { font-size: 38px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
.ms-stat2-v span { font-size: 17px; margin-left: 3px; }
.ms-stat2-l { font-size: 13px; opacity: .8; margin-top: 8px; }

/* ── 사진 모음: 들쭉날쭉 ── */
.ms-bricks { column-gap: 20px; }
.ms-bricks-2 { column-count: 2; }
.ms-bricks-3 { column-count: 3; }
.ms-bricks-4 { column-count: 4; }
.ms-brick { break-inside: avoid; margin: 0 0 20px; }
.ms-brick-img { width: 100%; display: block; border-radius: var(--ms-radius); }
.ms-brick figcaption { color: var(--ms-muted); font-size: 13px; margin-top: 8px; }

/* ── 문답: 모두 펼침 ── */
.ms-qa2 { padding: 20px 0; border-bottom: 1px solid var(--ms-border); }
.ms-qa2-q { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.ms-qa2-q::before { content: 'Q. '; color: var(--ms-primary); }
.ms-qa2-a { color: var(--ms-muted); font-size: 15px; margin: 0; }

/* ── 문의 유도: 가운데 모음 ── */
.ms-cta2 { padding: 80px 0; }
.ms-cta2-title { font-size: 30px; font-weight: var(--ms-heading-weight); margin: 0 0 10px; letter-spacing: -.02em; }

/* ── 사진 + 글: 겹치기 ── */
.ms-overlap-in { position: relative; }
.ms-overlap-img { width: 100%; display: block; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--ms-radius); }
.ms-overlap-box {
	background: var(--ms-bg); border-radius: var(--ms-radius);
	padding: 32px; max-width: 520px; margin: -70px 0 0 40px;
	position: relative; box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
.ms-overlap .ms-overlap-box { margin-left: auto; margin-right: 40px; }

/* ── 고객 후기: 크게 한 줄 ── */
.ms-bigquote { margin: 0 0 36px; text-align: center; }
.ms-bigquote blockquote {
	margin: 0 0 14px; font-size: 21px; line-height: 1.7;
	font-weight: 500; letter-spacing: -.01em;
}
.ms-bigquote blockquote::before { content: '“'; color: var(--ms-primary); }
.ms-bigquote blockquote::after { content: '”'; color: var(--ms-primary); }
.ms-bigquote figcaption { color: var(--ms-muted); font-size: 14px; }
.ms-bigquote figcaption em { font-style: normal; opacity: .8; }

/* ── 연혁: 표로 ── */
.ms-timeline2 .ms-table th { width: 110px; color: var(--ms-primary); font-weight: 800; background: transparent; }

/* ── 진행 단계: 가로로 ── */
.ms-steprow { display: flex; gap: 16px; flex-wrap: wrap; }
.ms-step2 {
	flex: 1 1 170px; padding: 24px 20px; background: var(--ms-bg_alt);
	border-radius: var(--ms-radius); position: relative;
}
.ms-step2-n {
	width: 32px; height: 32px; border-radius: 999px; margin-bottom: 12px;
	background: var(--ms-primary); color: var(--ms-on_primary);
	display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.ms-step2-t { font-size: 16px; font-weight: var(--ms-heading-weight); margin: 0 0 6px; }
.ms-step2-d { color: var(--ms-muted); font-size: 14px; margin: 0; }

/* ══════════════════════════════════════════════════
   섹션 상자 — 위아래 여백 · 좌우 안쪽 여백

   배경은 건드리지 않는다.
     위아래 여백은 섹션 자신의 padding 을 덮는다 (배경은 그대로 늘고 준다)
     좌우는 max-width 가 아니라 .ms-wrap 의 padding 을 키운다 —
     max-width 를 건드리면 '좁게(ms-wrap-narrow)' 로 짠 섹션이 오히려 넓어진다.

   손대지 않은 섹션에는 ms-has-* 가 안 붙는다. 그래야 스킨이 정한 여백이 그대로 산다.
   ══════════════════════════════════════════════════ */

.ms-box.ms-has-pad > section,
.ms-box.ms-has-pad > .ms-divider,
.ms-box.ms-has-pad > .ms-edit-body > section,
.ms-box.ms-has-pad > .ms-edit-body > .ms-divider {
	padding-top: var(--ms-pad);
	padding-bottom: var(--ms-pad);
}

/* 가로는 '안쪽 여백' 이 아니라 '콘텐츠 너비' 다.
   920 이라고 적히면 그 섹션은 920px 다 — 다른 섹션에 같은 숫자를 주면 같아진다.
   max-width 라서 창이 그보다 좁으면 알아서 창에 맞는다.
   .ms-wrap(0,1,0) 보다 셈이 높아(0,2,0) '좁게' 로 짠 섹션도 이 값이 이긴다 */
.ms-box.ms-has-w .ms-wrap { max-width: var(--ms-w); }

/* 머리띠·꼬리말은 .ms-box 로 감싸지 않는다 (sticky·absolute 가 깨진다).
   그래서 같은 일을 하는 규칙을 한 줄 더 둔다 */
.ms-nav.ms-has-w .ms-wrap, .ms-foot.ms-has-w .ms-wrap { max-width: var(--ms-w); }

/* ── 섹션 배경색과 아래 선 ──

   스킨이 제 배경을 갖고 있으므로(.ms-hero 는 보조 바탕) 그것을 이겨야 한다.
   .ms-box.ms-bg-x > section 은 셈이 0,2,1 이라 .ms-hero(0,1,0)를 이긴다.
   편집기에서는 .ms-edit-body 가 한 겹 끼므로 그 길도 같이 적는다.

   글자색도 같이 바꾼다 — 어두운 바탕에 검은 글씨가 남으면 그 섹션은 통째로 안 읽힌다. */

.ms-box.ms-bg-bg > section,      .ms-box.ms-bg-bg > .ms-edit-body > section,
.ms-box.ms-bg-alt > section,     .ms-box.ms-bg-alt > .ms-edit-body > section,
.ms-box.ms-bg-primary > section, .ms-box.ms-bg-primary > .ms-edit-body > section,
.ms-box.ms-bg-dark > section,    .ms-box.ms-bg-dark > .ms-edit-body > section,
.ms-box.ms-bg-own > section,     .ms-box.ms-bg-own > .ms-edit-body > section {
	background-image: none;
}

.ms-box.ms-bg-bg > section,  .ms-box.ms-bg-bg > .ms-edit-body > section  { background-color: var(--ms-bg); }
.ms-box.ms-bg-alt > section, .ms-box.ms-bg-alt > .ms-edit-body > section { background-color: var(--ms-bg_alt); }

.ms-box.ms-bg-primary > section, .ms-box.ms-bg-primary > .ms-edit-body > section {
	background-color: var(--ms-primary); color: var(--ms-on_primary);
}
.ms-box.ms-bg-dark > section, .ms-box.ms-bg-dark > .ms-edit-body > section {
	background-color: #14161a; color: #e6e8ea;
}
.ms-box.ms-bg-own > section, .ms-box.ms-bg-own > .ms-edit-body > section {
	background-color: var(--ms-bgc); color: var(--ms-bgt);
}

/* 바탕이 바뀌면 그 안의 흐린 글씨·제목도 따라가야 한다 */
.ms-box.ms-bg-primary section .ms-h2, .ms-box.ms-bg-dark section .ms-h2, .ms-box.ms-bg-own section .ms-h2,
.ms-box.ms-bg-primary section .ms-lead, .ms-box.ms-bg-dark section .ms-lead, .ms-box.ms-bg-own section .ms-lead,
.ms-box.ms-bg-primary section .ms-body, .ms-box.ms-bg-dark section .ms-body, .ms-box.ms-bg-own section .ms-body,
.ms-box.ms-bg-primary section .ms-card-desc, .ms-box.ms-bg-dark section .ms-card-desc, .ms-box.ms-bg-own section .ms-card-desc {
	color: inherit;
}
.ms-box.ms-bg-primary section .ms-lead, .ms-box.ms-bg-dark section .ms-lead, .ms-box.ms-bg-own section .ms-lead,
.ms-box.ms-bg-primary section .ms-card-desc, .ms-box.ms-bg-dark section .ms-card-desc, .ms-box.ms-bg-own section .ms-card-desc {
	opacity: .82;
}

/* 아래 선 */
.ms-box.ms-edge-thin > section,  .ms-box.ms-edge-thin > .ms-edit-body > section,
.ms-box.ms-edge-thin > .ms-divider, .ms-box.ms-edge-thin > .ms-edit-body > .ms-divider {
	border-bottom: 1px solid var(--ms-border);
}
.ms-box.ms-edge-thick > section,  .ms-box.ms-edge-thick > .ms-edit-body > section,
.ms-box.ms-edge-thick > .ms-divider, .ms-box.ms-edge-thick > .ms-edit-body > .ms-divider {
	border-bottom: 3px solid var(--ms-primary);
}

/* 사진·영상 세로 길이.
   비율(aspect-ratio) 을 끄고 높이를 못박는다. 사진은 가운데를 기준으로 잘리므로
   찌그러지지 않는다 — 늘어나 보이던 것이 이것 때문이었다.

   값은 섹션에 하나뿐이라 카드가 여섯이어도 여섯 장이 같이 바뀐다.
   로고와 작은 얼굴 사진은 뺀다 — 로고가 잘리면 안 되고, 얼굴은 동그라미가 깨진다 */
.ms-box.ms-has-mh .ms-figure,
.ms-box.ms-has-mh .ms-card-photo,
.ms-box.ms-has-mh .ms-portrait,
.ms-box.ms-has-mh .ms-brick-img,
.ms-box.ms-has-mh .ms-overlap-img,
.ms-box.ms-has-mh .ms-videobox,
.ms-box.ms-has-mh .ms-bigmap,
.ms-box.ms-has-mh .ms-map,
.ms-box.ms-has-mh .ms-empty {
	height: var(--ms-mh);
	aspect-ratio: auto;
	object-fit: cover;
	object-position: center;
}

/* ── 사진·지도·영상 가로 크기 ──

   세로와 같은 자리에 붙는다. 값은 섹션에 하나뿐이라 카드가 여섯이어도 여섯 장이 같이 바뀐다.

   제 칸 가운데에 둔다. 줄이면 양쪽에서 똑같이 줄어든다 —
   카드가 셋이면 세 장이 각자 제 카드 가운데에서 줄어든다.
   한쪽에 붙여 두었더니 세 장이 다 한쪽으로 쏠렸다.

   예외는 사진과 글이 나란히 선 모양(.ms-split-media)뿐이다. 거기서는 사진이
   글 쪽으로 줄어야 하고, 빨강바(사진 가로)도 파랑바(콘텐츠 영역)와 겹치면 안 된다 —
   파랑바는 늘 콘텐츠 양쪽 끝에 서 있으니, 사진이 붙은 쪽 끝에는 이미 파랑바가 있다.
   그래서 그 모양만 바깥쪽에 붙이고 안쪽 끝을 움직인다.

   가운데 정렬은 끌 때 양쪽이 같이 움직인다 — 손은 100 가는데 끝은 50 만 가면
   손잡이가 미끄러진다. 그래서 editor.js 의 mwGeom() 이 '가운데인가' 를 CSS 에게
   물어보고 (4px 줄여 그 4px 이 양쪽으로 갈라지는지 본다) 두 배로 셈한다.
   여기 규칙을 고치면 거기도 저절로 따라온다.

   max-width 로 한 번 더 막는다. 칸보다 넓게 잡아 두면 옆으로 삐져나가
   좁은 화면에서 가로 스크롤이 생긴다 */
.ms-box.ms-has-mw .ms-figure,
.ms-box.ms-has-mw .ms-card-photo,
.ms-box.ms-has-mw .ms-portrait,
.ms-box.ms-has-mw .ms-brick-img,
.ms-box.ms-has-mw .ms-overlap-img,
.ms-box.ms-has-mw .ms-videobox,
.ms-box.ms-has-mw .ms-bigmap,
.ms-box.ms-has-mw .ms-map,
.ms-box.ms-has-mw .ms-empty {
	width: var(--ms-mw);
	max-width: 100%;
	/* 기본은 가운데. 카드·갤러리처럼 글과 나란하지 않은 것이 대부분이고,
	   그때 한쪽으로 쏠리면 줄인 것이 아니라 밀린 것처럼 보인다 */
	margin-left: auto;
	margin-right: auto;
}

/* 사진이 오른쪽 칸에 있는 모양(사진 + 글). 오른쪽에 붙어야 글 쪽으로 줄어든다 */
.ms-box.ms-has-mw .ms-split-media > * {
	margin-left: auto;
	margin-right: 0;
}
/* 사진이 왼쪽 칸에 오는 변형은 도로 왼쪽에 붙인다 */
.ms-box.ms-has-mw .ms-imgleft .ms-split-media > * {
	margin-right: auto;
	margin-left: 0;
}

/* 이 둘은 인라인이라 margin: auto 가 안 듣는다 (<img> 와 <iframe>).
   가로를 정한 때만 블록으로 바꾼다 — 늘 바꾸면 다른 배치가 딸려 움직인다.
   .ms-empty 는 여기 넣지 않는다. flex 라서 블록으로 바꾸면 가운데 정렬이 풀린다 */
.ms-box.ms-has-mw .ms-portrait,
.ms-box.ms-has-mw .ms-map { display: block; }

/* 슬라이드는 한 장 한 장이 제 여백을 갖는다 */
.ms-box.ms-has-pad > section.ms-slider,
.ms-box.ms-has-pad > .ms-edit-body > section.ms-slider { padding: 0; }
.ms-box.ms-has-pad .ms-slide { padding-top: var(--ms-pad); padding-bottom: var(--ms-pad); }

/* ══════════════════════════════════════════════════
   스킨 더하기 — 섹션마다 세 장씩

   모양만 다르고 담기는 값은 똑같다. 그래서 모양을 바꿔도 적어 둔 글이 안 사라진다.
   되도록 이미 있는 뼈대(.ms-grid · .ms-card · .ms-table)를 다시 쓴다 —
   스킨마다 새 규칙을 쓰면 이 파일이 스킨 수만큼 불어난다.
   ══════════════════════════════════════════════════ */

/* ── 알림 띠 ── */

.ms-banner-ribbon { background: none; border-bottom: 0; padding: 20px 0; }
.ms-ribbon {
	display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 10px 22px; border-radius: 999px;
	background: var(--ms-bg_alt); border: 1px solid var(--ms-border);
}
.ms-banner-ribbon.ms-bn-primary .ms-ribbon { background: var(--ms-primary); color: var(--ms-on_primary); border-color: transparent; }
.ms-banner-ribbon.ms-bn-warn .ms-ribbon { background: var(--ms-accent); color: #fff; border-color: transparent; }
a.ms-ribbon-btn { text-decoration: underline; font-weight: 600; font-size: 13px; }

.ms-banner-edge {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	border-left: 4px solid currentColor; padding-left: 14px;
}

/* ── 사이 띄우기 ── */

/* 가운데가 진하고 양끝으로 흐려진다. 선이 뚝 끊기지 않는다 */
.ms-dv-fade .ms-wrap span {
	height: 1px; border: 0;
	background: linear-gradient(90deg, transparent, var(--ms-border), transparent);
}
/* 가운데 마름모. 글이 길게 이어질 때 숨을 준다 */
.ms-dv-mark .ms-wrap span {
	height: 1px; border: 0; background: var(--ms-border); position: relative;
}
.ms-dv-mark .ms-wrap span::after {
	content: ''; position: absolute; left: 50%; top: 50%;
	width: 9px; height: 9px; transform: translate(-50%, -50%) rotate(45deg);
	background: var(--ms-bg); border: 1px solid var(--ms-border);
}

/* ── 자료 내려받기 ── */

.ms-down-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ms-down-card .ms-btn { margin-top: auto; }
.ms-down-go { margin-left: 10px; white-space: nowrap; }

/* ── 페이지 머리 ── */

.ms-headline-band { padding: 96px 0; }
.ms-headline-line { background: none; border-bottom: 1px solid var(--ms-border); padding: 48px 0 26px; }

/* ── 거래처 로고 ── */

.ms-logorow-plain { gap: 28px 40px; }
.ms-logo2 { display: flex; align-items: center; justify-content: center; color: var(--ms-muted); font-size: 14px; }
.ms-logorow-plain .ms-logo2 { opacity: .72; transition: opacity .15s; }
.ms-logorow-plain .ms-logo2:hover { opacity: 1; }
.ms-logorow-plain .ms-logo-img { max-height: 40px; }

.ms-logos-strip { padding: 36px 0; }
.ms-logorow-strip { gap: 14px 28px; }
.ms-logorow-strip .ms-logo-img { max-height: 26px; }
.ms-logorow-strip .ms-logo2 { font-size: 13px; }

/* ── 지도 ── */

.ms-mapcard {
	border: 1px solid var(--ms-border); border-radius: var(--ms-radius);
	overflow: hidden; background: var(--ms-bg);
}
.ms-mapcard .ms-bigmap { border-radius: 0; }
.ms-mapcard-n { margin: 0; padding: 14px 18px; font-size: 14px; color: var(--ms-muted); border-top: 1px solid var(--ms-border); }

.ms-map-wide .ms-bigmap { border-radius: 0; }

/* ── 공지·뉴스 ── */

.ms-notice-card { display: flex; flex-direction: column; gap: 6px; }
.ms-notice-card .ms-card-title { text-decoration: none; display: block; }

.ms-notices-big li { display: block; padding: 18px 0; }
.ms-notice-d2 { display: block; font-size: 22px; font-weight: var(--ms-heading-weight); color: var(--ms-primary); letter-spacing: -.02em; }
.ms-notices-big .ms-notice-t { font-size: 17px; }

/* ── 글 ── */

.ms-prosecard {
	background: var(--ms-bg); border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius); padding: 36px 34px;
}
/* 한 줄이 짧아져 읽기 쉬워진다. 좁은 화면에서는 한 단으로 돌린다 */
.ms-prose-two { column-count: 2; column-gap: 44px; }
.ms-prose-two > * { break-inside: avoid; }

/* ── 슬라이드 ── */

.ms-slider-card .ms-slide { background: none; color: inherit; }
.ms-slidecard {
	background: var(--ms-bg); border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius); overflow: hidden;
	display: grid; grid-template-columns: 1fr 1fr; align-items: center;
}
.ms-slidecard .ms-figure { border-radius: 0; height: 100%; }
.ms-slidecard-t { padding: 28px 30px; }

/* 사진 아래 띠에 한 줄로. 사진이 주인공일 때 쓴다 */
.ms-slider-quiet .ms-slide { align-items: flex-end; padding: 0; }
.ms-slidebar {
	width: 100%; background: rgba(0, 0, 0, .55); color: #fff;
	backdrop-filter: blur(4px); padding: 14px 0;
}
.ms-slidebar .ms-wrap { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ms-slider-quiet .ms-slide-title { font-size: 20px; margin: 0; }
.ms-slider-quiet .ms-slide-sub { font-size: 14px; opacity: .85; margin: 0; }
a.ms-slidebar-go { color: #fff; margin-left: auto; text-decoration: underline; }

/* ── 사양표 ── */

.ms-specgrid { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.ms-specpair { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--ms-border); }
.ms-specpair dt { color: var(--ms-muted); margin: 0; }
.ms-specpair dd { margin: 0; }

.ms-table-line th { background: none; }
.ms-table-line th, .ms-table-line td { padding: 12px 4px; }

/* ── 사람들 ── */

.ms-personcard { text-align: center; padding: 24px 20px; }
.ms-personcard .ms-portrait { width: 96px; height: 96px; border-radius: 999px; margin: 0 auto 14px; }

.ms-personrows { display: flex; flex-direction: column; gap: 4px; }
.ms-personrow { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--ms-border); }
.ms-personrow .ms-portrait { width: 96px; height: 96px; border-radius: 999px; }
.ms-personrow .ms-person-n { margin-top: 0; }

/* ── 영상 머리 ── */

.ms-vhero-split { padding: 72px 0; }
.ms-vhero-split .ms-vhero-title { font-size: 38px; font-weight: var(--ms-heading-weight); margin: 0 0 12px; letter-spacing: -.02em; }
.ms-vhero-split .ms-vhero-sub { color: var(--ms-muted); margin: 0; font-size: 17px; }
.ms-vsplit-md .ms-videobox { aspect-ratio: 16 / 9; }
.ms-vsplit-lg .ms-videobox { aspect-ratio: 4 / 3; }
.ms-vsplit-full .ms-videobox { aspect-ratio: 1 / 1; }

.ms-vhero-under { padding: 0 0 56px; }
.ms-vhero-under .ms-vhero-bg { position: relative; overflow: hidden; }
.ms-vunder-in { padding-top: 40px; }
.ms-vhero-under .ms-vhero-title { font-size: 34px; font-weight: var(--ms-heading-weight); margin: 0 0 10px; letter-spacing: -.02em; }
.ms-vhero-under .ms-vhero-sub { color: var(--ms-muted); margin: 0; }

/* ── 오시는 길 ── */

.ms-contact-stack .ms-bigmap { margin: 22px 0; }
.ms-deflist-row { grid-template-columns: repeat(4, auto); justify-content: start; gap: 6px 28px; }
.ms-deflist-row dt { grid-row: 1; }
.ms-deflist-row dd { grid-row: 2; font-weight: 600; }

/* ── 문의 유도 ── */

.ms-cta3 { background: none; }
.ms-ctabox {
	border: 2px solid var(--ms-primary); border-radius: var(--ms-radius);
	padding: 34px 32px; text-align: center; background: var(--ms-bg);
}
.ms-ctabox .ms-btns { justify-content: center; }
.ms-cta3.ms-tone-plain .ms-ctabox { border-color: var(--ms-border); background: var(--ms-bg_alt); }

/* ── 자주 묻는 질문 ── */

.ms-qas-two { column-count: 2; column-gap: 32px; }
.ms-qas-two .ms-qa { break-inside: avoid; }

/* ── 사진 모음 ── */

/* 옆으로 밀어 넘긴다. 자바스크립트가 없어도 손가락·트랙패드로 넘어간다 */
.ms-shotstrip {
	display: flex; gap: 18px; overflow-x: auto; padding: 4px 20px 18px;
	scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.ms-shotstrip .ms-shot { flex: 0 0 min(72vw, 420px); scroll-snap-align: center; }

/* ── 진행 단계 ── */

.ms-steps2 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ms-step2 { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--ms-border); }
.ms-step2-n { font-size: 40px; line-height: 1; font-weight: var(--ms-heading-weight); color: var(--ms-primary); opacity: .35; }

/* ── 숫자 ── */

.ms-statrow-card { gap: 18px; }
.ms-statcard {
	background: var(--ms-bg); border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius); padding: 26px 20px;
}

/* ── 고객 후기 ── */

.ms-quote-face2 { text-align: center; }
.ms-quote-face2 .ms-quote-face { margin: 0 auto 12px; }
.ms-quote-face2 figcaption { justify-content: center; margin: 0 0 14px; }
.ms-quote-face2 blockquote { margin: 0; }

/* ── 연혁 ── */

.ms-years2 { list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 2px solid var(--ms-border); }
.ms-years2 li { position: relative; padding: 0 0 26px; }
.ms-years2 li::before {
	content: ''; position: absolute; left: -33px; top: 6px;
	width: 12px; height: 12px; border-radius: 999px;
	background: var(--ms-primary); border: 2px solid var(--ms-bg);
}
.ms-year2 { display: block; font-size: 14px; font-weight: 700; color: var(--ms-primary); }
.ms-year2-b b { display: block; margin-top: 2px; }
.ms-year2-b p { margin: 4px 0 0; color: var(--ms-muted); font-size: 14px; }

/* ── 끌어서 크기 바꾸기 ──
   고른 섹션에만 손잡이가 보인다. 늘 보이면 화면이 손잡이로 뒤덮인다 */

.ms-editing .ms-hdl { display: none; position: absolute; z-index: 8; }
.ms-editing .ms-edit-sec.on .ms-hdl { display: block; }

/* 고른 섹션에서는 옅게라도 늘 보인다.
   마우스를 올려야만 보이면 "끌 수 있는 것이 있다" 는 것 자체를 모른다 */
.ms-editing .ms-hdl::after {
	content: ''; position: absolute; inset: 0; margin: auto;
	background: var(--ms-pick); border-radius: 999px;
	opacity: .45; transition: opacity .12s;
}
.ms-editing .ms-hdl:hover::after,
.ms-editing .ms-hdl.on::after { opacity: 1; }

/* 낱개 손잡이. 색이 다른 것이 곧 설명이다 —
   "이건 영역이 아니라 이 물건 하나를 바꾸는 것" */
.ms-editing .ms-hdl-one::after { background: var(--ms-pick-one); }

/* 아래 손잡이는 섹션의 아래 테두리에 붙인다 — 그 자리가 곧 '영역 높이' 의 끝이다.
   높이를 늘리면 아래 테두리가 내려가므로 손잡이가 마우스를 그대로 따라온다.
   위 손잡이는 두지 않는다. 섹션은 위에서 아래로 쌓여 위 테두리가 못 움직이기 때문이다 */
.ms-editing .ms-hdl-b {
	left: 50%; bottom: 0; transform: translate(-50%, 50%);
	width: 110px; height: 18px; cursor: ns-resize;
}
.ms-editing .ms-hdl-b::after { width: 86px; height: 5px; }

/* ── 레일 ──
   .ms-wrap 과 똑같은 규칙(같은 max-width · 같은 좌우 20px · 같은 가운데 정렬)으로 깔린
   보이지 않는 상자. 그 안쪽 가장자리가 곧 콘텐츠 경계다.
   점선도 손잡이도 여기에 붙이니 둘이 어긋날 수가 없다 */
.ms-hdl-rail {
	display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
	margin: 0 auto; max-width: var(--ms-w, var(--ms-width));
	padding: 0 20px; pointer-events: none; z-index: 7;
}
.ms-editing .ms-edit-sec.on .ms-hdl-rail { display: block; }

.ms-hdl-rail::before, .ms-hdl-rail::after {
	content: ''; position: absolute; top: 0; bottom: 0; width: 0;
	border-left: 1px dashed rgba(37, 99, 235, .55);
}
.ms-hdl-rail::before { left: 20px; }
.ms-hdl-rail::after { right: 20px; }

.ms-editing.ms-sizing .ms-hdl-rail::before,
.ms-editing.ms-sizing .ms-hdl-rail::after { border-left-color: var(--ms-pick); border-left-width: 2px; }

.ms-editing .ms-hdl-l, .ms-editing .ms-hdl-r {
	display: block; pointer-events: auto;
	top: 50%; width: 18px; height: 88px; cursor: ew-resize;
}
.ms-editing .ms-hdl-l { left: 20px; transform: translate(-50%, -50%); }
.ms-editing .ms-hdl-r { right: 20px; transform: translate(50%, -50%); }
.ms-editing .ms-hdl-l::after, .ms-editing .ms-hdl-r::after { width: 5px; height: 64px; }

/* 끄는 동안 — 글자가 선택되면 끌기가 끊긴다.
   touch-action 이 없으면 손가락으로 끌 때 화면이 같이 스크롤된다 */
.ms-editing.ms-sizing { user-select: none; }
/* 손잡이는 늘 잡을 수 있어야 한다.
   아래 '링크는 안 눌린다' 규칙이 .ms-brand 에 걸리고 pointer-events 는 안으로
   물려받는 값이라, 로고 손잡이가 <a> 안에 있다는 이유만으로 꿈쩍하지 않았다 */
.ms-editing .ms-hdl { touch-action: none; pointer-events: auto; }

@media (hover: none) {
	.ms-editing .ms-hdl-b { width: 140px; height: 30px; }
	.ms-editing .ms-hdl-b::after { width: 96px; height: 6px; }
	.ms-editing .ms-hdl-l, .ms-editing .ms-hdl-r { width: 30px; height: 120px; }
	.ms-editing .ms-hdl-l::after, .ms-editing .ms-hdl-r::after { width: 6px; height: 84px; }
	.ms-editing .ms-hdl::after { opacity: .7; }
}
.ms-editing.ms-sizing .ms-edit-sec.on { outline-color: var(--ms-pick); }

/* ── 편집 중에만 ── */

/*
   고른 자리를 또렷하게.

   테두리만으로는 안 보인다 — 섹션 하나가 화면을 꽉 채우는 일이 흔해서
   가장자리의 선 2px 은 눈에 안 들어온다.
   그래서 세 가지를 같이 쓴다: 나머지를 흐리게 · 테두리 · 늘 보이는 이름표.
   색은 테마를 따르지 않고 고정값(#2563eb)을 쓴다 —
   테마가 파랑이면 파란 테두리가 배경에 묻혀 안 보이기 때문이다.
*/
.ms-editing {
	--ms-pick: #2563eb;   /* 영역(가로·세로) 크기 — 섹션이라는 '자리' 를 바꾼다 */
	--ms-pick-one: #dc2626;  /* 낱개 크기 — 로고·사진처럼 '그 물건 하나' 를 바꾼다 */
}

.ms-editing .ms-edit-sec {
	position: relative; cursor: pointer;
	outline: 2px dashed transparent; outline-offset: -2px;
	transition: opacity .18s ease, outline-color .12s ease;
}
.ms-editing .ms-edit-sec:hover { outline-color: rgba(37, 99, 235, .55); }

/* 하나를 고르면 나머지는 뒤로 물러난다 */
.ms-editing.ms-has-sel .ms-edit-sec:not(.on) { opacity: .42; }
.ms-editing.ms-has-sel .ms-edit-sec:not(.on):hover { opacity: .75; }

.ms-editing .ms-edit-sec.on {
	outline: 3px solid var(--ms-pick);
	outline-offset: -3px;
	/* 바깥으로 퍼지는 빛. 화면을 덮는 큰 그림자는 쓰지 않는다 —
	   아래에 깔린 섹션을 가려 무엇이 있었는지 못 보게 된다 */
	box-shadow: 0 0 0 1px rgba(37, 99, 235, .3), 0 10px 34px rgba(37, 99, 235, .22);
	z-index: 2;
}

.ms-editing .ms-edit-tag {
	position: absolute; left: 0; top: 0; z-index: 6;
	background: var(--ms-pick); color: #fff;
	font-size: 11px; font-weight: 700; letter-spacing: -.01em;
	padding: 4px 10px 4px 7px; border-radius: 0 0 8px 0;
	opacity: 0; transition: opacity .12s;
	font-family: -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
	white-space: nowrap;
	/* 이름표는 잡을 수 있어야 한다. 예전에는 pointer-events 를 꺼 두어 못 잡았다 */
	cursor: grab;
	display: flex; align-items: center; gap: 5px;
}
.ms-editing .ms-edit-tag:active { cursor: grabbing; }
.ms-grip { opacity: .65; font-size: 10px; letter-spacing: -2px; }
.ms-editing .ms-edit-sec:hover .ms-edit-tag { opacity: .85; }
.ms-editing .ms-edit-sec.on .ms-edit-tag {
	opacity: 1;
	box-shadow: 0 2px 10px rgba(37, 99, 235, .45);
}
/* 고른 것에는 무엇을 하고 있는지 덧붙인다 */
.ms-editing .ms-edit-sec.on .ms-edit-tag::after { content: ' — 고치는 중'; font-weight: 400; }

/* 편집 중에는 링크를 따라가지 않는다. 고치던 것을 잃는다 */
.ms-editing .ms-edit-sec a { pointer-events: none; }

/* 단추는 뺀다. 눌러서 창을 열어 글자·보낼 곳·색을 고친다 —
   누른 것과 고칠 자리가 이어져야 한다 */
.ms-editing .ms-edit-sec a[data-ms-btn] { pointer-events: auto; cursor: pointer; }
.ms-editing a[data-ms-btn]:hover {
	outline: 2px dashed var(--ms-pick-one); outline-offset: 3px;
}

/* ── 메뉴 누르기·끌기 ──

   메뉴만 위 규칙에서 빼낸다. 머리띠·꼬리말도 ms-edit-sec 를 달고 나오니
   그 규칙에 같이 걸려 있었고, 그래서 메뉴를 눌러도 링크에 닿지 못해
   머리띠가 골라지기만 했다 — 누르면 그 쪽으로 가는 길은 진작 있었는데
   사건이 거기까지 간 적이 없었다.

   누르면 그 쪽을 고치러 가고, 끌면 메뉴 차례가 바뀐다 (= 쪽의 차례) */
.ms-editing .ms-edit-chrome a[data-ms-page],
.ms-editing .ms-edit-chrome a[data-ms-addpage] {
	pointer-events: auto; position: relative; cursor: pointer;
}
.ms-editing .ms-edit-chrome a[data-ms-page]:hover {
	outline: 2px dashed rgba(37, 99, 235, .6); outline-offset: 3px;
}
.ms-editing a[data-ms-page].ms-mdrag { opacity: .35; }

/* ＋ 메뉴 추가. 고치는 중에만 나온다 (renderNav 가 그때만 끼워 넣는다).
   메뉴 글자와 다르게 보여야 한다 — 같이 보이면 손님에게도 보이는 메뉴인 줄 안다.
   점선과 옅은 색으로 '이건 메뉴가 아니라 단추' 라고 말한다 */
.ms-editing .ms-menu-add {
	border: 1px dashed var(--ms-pick);
	color: var(--ms-pick);
	border-radius: 999px;
	opacity: .75;
	font-weight: 600;
}
.ms-editing .ms-menu-add:hover { opacity: 1; background: rgba(37, 99, 235, .08); outline: none; }

/* 놓을 자리. 글자 옆에 막대를 세운다 — 메뉴는 가로로 서 있어서
   섹션처럼 위아래 선을 그으면 어느 글자의 앞인지 알 수 없다 */
.ms-editing a[data-ms-page].ms-mdrop-b::before,
.ms-editing a[data-ms-page].ms-mdrop-a::after {
	content: ''; position: absolute; top: -2px; bottom: -2px; width: 3px;
	background: var(--ms-pick); border-radius: 2px;
}
.ms-editing a[data-ms-page].ms-mdrop-b::before { left: -6px; }
.ms-editing a[data-ms-page].ms-mdrop-a::after { right: -6px; }

/* ── 줄 하나 고르기 ──
   카드가 셋인 섹션에서 세 번째 카드를 누르면 그 칸으로 바로 데려간다.
   누른 것과 고칠 자리가 이어져야 한다 */

.ms-editing [data-ms-row] { cursor: pointer; transition: outline-color .12s; }
.ms-editing [data-ms-row]:hover { outline: 2px dashed rgba(37, 99, 235, .6); outline-offset: 3px; }
/* ── 로고 크기 ──

   0 이면 표시를 안 붙이므로 스킨이 정한 max-height 32px 이 그대로다.
   크기를 정하면 가로로 잡는다 — 로고는 가로로 긴 것이 대부분이라
   세로로 잡으면 같은 32px 이어도 폭이 제각각이 된다.
   max-height 를 풀어 줘야 한다. 안 풀면 32px 에서 더 안 커진다. */

.ms-brand img.ms-brandimg-sized {
	width: var(--ms-logo-w, auto); height: var(--ms-logo-h, auto);
	max-width: 100%; max-height: none;
	/* 정해 준 상자 안에 비율 그대로 넣고 남는 쪽을 비운다.
	   기본값(fill)이면 두 수가 원본 비율과 안 맞는 순간 그림이 눌리거나 늘어난다 —
	   로고가 찌그러지는 것은 글자가 깨지는 것만큼 티가 난다 */
	object-fit: contain; object-position: left center;
}

/* ── 로고가 안 열릴 때 ──

   그림 바로 뒤에 상호가 글자로 같이 나간다. 그림이 있는 동안은 숨어 있다.
   그림이 onerror 로 스스로 빠지면 이 규칙(img 바로 뒤)이 안 맞게 되어
   글자가 나타난다 — 자바스크립트가 글자를 만들어 넣지 않아도 된다.

   로고를 아예 안 넣은 사이트는 처음부터 글자만 나가므로 이 규칙과 상관이 없다 */
.ms-brand img + .ms-brandname { display: none; }

/* 좌우 손잡이는 88px 인데 머리띠는 64px 다. 그대로 두면 위아래로 삐져나와
   첫 섹션 위를 덮는다 — 그 자리를 누르면 엉뚱한 것이 잡힌다 */
.ms-editing .ms-edit-chrome .ms-hdl-l,
.ms-editing .ms-edit-chrome .ms-hdl-r { height: 70%; max-height: 88px; }

/* 고치는 중에는 로고 오른쪽 끝에 손잡이가 선다.
   overflow 를 풀어 줘야 한다 — .ms-brand 는 긴 이름이 ☰ 를 밀어내지 않게
   hidden 이 걸려 있어서, 9px 밖에 세운 손잡이가 통째로 잘린다 */
.ms-editing .ms-brand { position: relative; overflow: visible; }
.ms-editing .ms-hdl-e {
	right: -9px; top: 50%; transform: translateY(-50%);
	width: 18px; height: 34px; cursor: ew-resize;
}
.ms-editing .ms-hdl-e::after { width: 5px; height: 26px; }

.ms-editing .ms-hdl-s {
	bottom: -9px; left: 50%; transform: translateX(-50%);
	width: 34px; height: 18px; cursor: ns-resize;
}
.ms-editing .ms-hdl-s::after { width: 26px; height: 5px; }

/* ── 투명 머리띠 ──

   바탕 없이 첫 섹션 위에 얹힌다. absolute 라 흐름에서 빠지므로 첫 섹션이
   화면 맨 위부터 시작하고, 그 위에 메뉴가 겹친다 — 사진 머리 비주얼에 쓰는 모양이다.
   fixed 가 아닌 까닭: 내려가면 같이 올라가 사라져야 한다. 사진 위를 떠나면
   투명한 메뉴는 어디에도 안 붙어 글자만 떠다니게 된다.

   글자에 그림자를 깐다. 사진이 밝은 쪽이면 흰 글자가 그대로 지워진다 —
   바탕색을 깔면 '투명' 이 아니게 되므로 그림자로 읽히게 한다. */

.ms-nav-clear {
	position: absolute; top: 0; left: 0; right: 0; z-index: 30;
	background: none; border-bottom: 0; backdrop-filter: none;
	color: #fff;
}
.ms-nav-clear .ms-brand,
.ms-nav-clear .ms-menu a { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.ms-nav-clear .ms-menu a.on { color: #fff; }
.ms-nav-clear .ms-navbtn span,
.ms-nav-clear .ms-navbtn span::before,
.ms-nav-clear .ms-navbtn span::after { background: #fff; }

/* 메뉴를 열면 그때는 바탕이 있어야 한다 — 사진 위에 글자만 떠 있으면 못 읽는다 */
.ms-nav-clear .ms-navtoggle:checked ~ .ms-menu {
	background: rgba(0, 0, 0, .82); backdrop-filter: blur(6px);
}

/* ── 꼬리말 색 직접 고르기 ──

   고른 모양(스킨)이 정한 색을 덮어쓴다. 안 고르면 표시 자체가 안 붙는다.
   셈을 한 겹 높여 둔다 — 어두운 꼬리말 모양이 .ms-foot-dark .ms-foot-info 로
   흐린 글씨 색을 따로 정해 두어서, 그것보다 세지 않으면 글자색이 반만 바뀐다. */

.ms-foot.ms-foot-ownbg { background: var(--ms-footbg); }

.ms-foot.ms-foot-ownfg,
.ms-foot.ms-foot-ownfg .ms-foot-name,
.ms-foot.ms-foot-ownfg .ms-foot-menu a,
.ms-foot.ms-foot-ownfg .ms-foot-info,
.ms-foot.ms-foot-ownfg .ms-foot-info a,
.ms-foot.ms-foot-ownfg .ms-foot-extra,
.ms-foot.ms-foot-ownfg .ms-foot-copy,
.ms-foot.ms-foot-ownfg .ms-foot-by { color: var(--ms-footfg); }

/* 상호 아래의 잔글씨는 조금 죽인다. 전부 같은 세기면 무엇이 중요한지 안 보인다 */
.ms-foot.ms-foot-ownfg .ms-foot-info,
.ms-foot.ms-foot-ownfg .ms-foot-extra,
.ms-foot.ms-foot-ownfg .ms-foot-copy { opacity: .82; }
.ms-foot.ms-foot-ownfg .ms-foot-by { opacity: .6; }

/* ── 머리띠·꼬리말 높이 ──

   섹션의 --ms-pad 와 같은 뜻이다. 0 이면 손대지 않은 것이라 표시 자체를 안 붙인다. */

.ms-nav.ms-has-pad .ms-nav-in { padding-top: var(--ms-pad); padding-bottom: var(--ms-pad); }
.ms-foot.ms-has-pad { padding-top: var(--ms-pad); padding-bottom: var(--ms-pad); }

/* ── 고치는 중의 머리띠·꼬리말 ──

   섹션과 같은 표시를 쓰되, 흐려지지는 않게 한다. 모든 쪽에 똑같이 나오는 것이라
   "고르지 않았으니 뒤로 물러나 있어라" 가 어울리지 않는다. */

.ms-editing.ms-has-sel .ms-edit-chrome:not(.on) { opacity: 1; }
.ms-editing .ms-edit-chrome { position: relative; }
/* 투명 머리띠는 흐름 밖이라 이름표가 첫 섹션 위로 겹친다. 조금 내려 둔다 */
.ms-editing .ms-nav-clear .ms-edit-tag { top: auto; bottom: -22px; }

/* ── 챗봇 제안 미리보기 ──

   아직 담기지 않은 화면이라는 것이 한눈에 보여야 한다.
   왼쪽만 보고 다 된 줄 알고 저장하면, 저장된 값으로 다시 그려지면서
   방금 본 화면이 그대로 사라진다 — 넣은 적이 없으니 되돌릴 것도 없다.

   주황이다. 고른 섹션과 끌고 있는 중은 둘 다 파랑이라,
   '담기기를 기다리는 중' 은 그 어느 것과도 헷갈리면 안 된다. */

.ms-editing .ms-edit-sec.ms-proposed {
	outline: 3px dashed #d97706; outline-offset: -3px;
}
/* 고르지 않은 섹션은 흐려지는데, 제안이 걸린 섹션은 흐려지면 안 된다 */
.ms-editing.ms-has-sel .ms-edit-sec.ms-proposed:not(.on) { opacity: 1; }

.ms-prop-band {
	position: absolute; left: 0; right: 0; top: 0; z-index: 12;
	display: flex; flex-wrap: wrap; gap: 8px;
	align-items: center; justify-content: center;
	padding: 9px 12px; background: #d97706; color: #fff;
	font-size: 13px; font-weight: 600; line-height: 1.4; text-align: center;
}
.ms-prop-band button {
	border: 0; border-radius: 6px; padding: 6px 12px;
	font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.ms-prop-band .ms-prop-yes { background: #fff; color: #b45309; }
.ms-prop-band .ms-prop-no { background: rgba(0, 0, 0, .28); color: #fff; }

/* ── 눌러서 바로 고치는 글자 ──

   글자 위에 갔을 때만 옅게 밑줄이 뜬다. 테두리를 두르면
   글이 여덟 군데인 섹션이 온통 네모로 뒤덮여 무엇이 무엇인지 안 보인다. */

.ms-editing [data-ms-text] {
	cursor: text; border-radius: 3px;
	/* 글 흐름을 건드리지 않는 것으로만 표시한다 - padding 을 주면
	   눌러 보기도 전에 줄바꿈 자리가 달라진다 */
	box-shadow: inset 0 -1px 0 0 transparent;
	transition: box-shadow .1s ease, background-color .1s ease;
}
.ms-editing [data-ms-text]:hover {
	box-shadow: inset 0 -2px 0 0 var(--ms-pick);
	background-color: rgba(37, 99, 235, .07);
}

/* 고치는 중. 여기서는 테두리를 두른다 - 어디까지가 이 칸인지 알아야 한다 */
.ms-editing [data-ms-text].ms-t-on {
	outline: 2px solid var(--ms-pick); outline-offset: 2px;
	background-color: rgba(37, 99, 235, .07);
	box-shadow: none; border-radius: 2px;
}

/* 값이 빈 칸. 누를 자리가 없으면 "여기에 글을 넣으려면 어디를 봐야 하나" 가 된다 */
.ms-editing .ms-t-empty { opacity: .5; font-style: italic; }
.ms-editing .ms-t-empty.ms-t-on { opacity: 1; font-style: normal; }

/* 고치는 중에는 그 섹션이 흐려지지 않아야 한다 (다른 섹션을 누른 것이 아니다) */
.ms-editing.ms-t-live .ms-edit-sec:hover { outline-color: transparent; }

.ms-editing [data-ms-row].ms-row-on { outline: 2px solid var(--ms-pick); outline-offset: 3px; }

/* ── 사진을 끌어다 놓는 자리 ──

   파일을 끌고 들어오면 놓을 수 있는 칸에 테두리가 생긴다.
   어느 칸에 놓이는지 놓아 보기 전에 보여야 한다 */

.ms-editing [data-ms-img] { position: relative; }
.ms-editing.ms-dropping [data-ms-img] {
	outline: 2px dashed rgba(37, 99, 235, .45); outline-offset: 2px;
}
.ms-editing [data-ms-img].ms-img-on {
	outline: 3px solid var(--ms-pick); outline-offset: 2px;
}
/* 카드처럼 아직 사진이 없는 자리는 '넣는다' 고 말해 준다 */
.ms-editing .ms-card.ms-img-on::after,
.ms-editing .ms-card2.ms-img-on::after,
.ms-editing .ms-card3.ms-img-on::after { content: '여기에 놓으면 이 카드에 사진이 들어갑니다'; }

.ms-editing [data-ms-img].ms-img-on::after {
	content: '여기에 놓으면 이 사진이 바뀝니다';
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	background: var(--ms-pick); color: #fff; z-index: 9;
	font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
	white-space: nowrap; pointer-events: none;
	font-family: -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}

/* 끌어다 놓은 사진은 칸을 꽉 채운다. 찌그러뜨리지 않고 넘치는 쪽을 잘라 낸다 */
.ms-figure, .ms-portrait, .ms-quote-face, .ms-overlap-img, .ms-hero2-img { object-fit: cover; }

/* ── 끌어서 자리 옮기기 ──
   끌고 있는 것은 흐리게, 놓일 자리는 굵은 줄로.
   줄이 없으면 "위에 놓이나 아래에 놓이나" 를 놓아 봐야 안다 */

.ms-editing .ms-edit-sec.ms-dragging { opacity: .3; }

.ms-editing .ms-edit-sec.ms-drop-before::before,
.ms-editing .ms-edit-sec.ms-drop-after::after {
	content: ''; position: absolute; left: 0; right: 0; height: 4px;
	background: var(--ms-pick); z-index: 7; border-radius: 2px;
	box-shadow: 0 0 10px rgba(37, 99, 235, .7);
}
.ms-editing .ms-edit-sec.ms-drop-before::before { top: -2px; }
.ms-editing .ms-edit-sec.ms-drop-after::after { bottom: -2px; }
.ms-edit-blank { padding: 100px 20px; text-align: center; color: var(--ms-muted); }
.ms-dim { color: var(--ms-muted); }

/* ── 좁은 화면 ── */

@media (max-width: 860px) {
	.ms-cols-3, .ms-cols-4 { grid-template-columns: repeat(2, 1fr); }
	.ms-split { grid-template-columns: 1fr; gap: 28px; }
	.ms-imgleft .ms-split-media { order: 0; }
	.ms-hero-title, .ms-slide-title { font-size: 32px; }
	.ms-slide { padding: 64px 0; }
	.ms-slide-nav { width: 36px; height: 36px; font-size: 18px; }
	.ms-notices li { flex-direction: column; gap: 3px; }
	.ms-hero2-title { font-size: 30px; }
	.ms-hero3-title { font-size: 34px; }
	.ms-hero3 { padding: 70px 0; }
	.ms-bricks-3, .ms-bricks-4 { column-count: 2; }
	.ms-overlap-box { margin: -40px 16px 0; max-width: none; padding: 24px; }
	.ms-overlap .ms-overlap-box { margin-right: 16px; }
	.ms-bigquote blockquote { font-size: 17px; }
	.ms-notice-d { width: auto; }
	.ms-hero { padding: 64px 0; }
	.ms-hero-lg { padding: 80px 0; }
	.ms-sec { padding: 48px 0; }
	/* 메뉴 띠를 세로로 쌓던 줄은 걷어냈다 — ☰ 단추가 생기기 전의 것이고,
	   파일 뒤쪽에 있어 새 규칙을 덮어쓰고 있었다 */
}

/* ── 좁은 화면에서 빠져 있던 것들 ── */

@media (max-width: 860px) {
	.ms-video-side .ms-split { gap: 24px; }
	.ms-downs li { flex-wrap: wrap; }
	.ms-downs li > div { flex: 1 1 100%; }
	/* 요금 — 좁은 화면에서는 들어올리지 않는다. 한 칸씩 내려오므로 올릴 위가 없다 */
	.ms-plan.on, .ms-plan.on:hover, .ms-plan:hover { transform: none; }
	.ms-plan { padding: 28px 22px 24px; }
	.ms-plan-p { font-size: 32px; }
	.ms-pricetable { gap: 14px; border: 0; border-radius: 0; background: none; }
	.ms-ptcol {
		border: 1px solid var(--ms-border); border-radius: var(--ms-radius);
		overflow: hidden;
	}
	.ms-priceflat { gap: 26px; }
	.ms-pflat { border-left: 0; padding: 0 0 22px; border-bottom: 1px solid var(--ms-border); }
	.ms-pflat:last-child { border-bottom: 0; }
	.ms-statband { flex-direction: column; }
	.ms-stat2 + .ms-stat2 { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
	.ms-steprow { flex-direction: column; }
	.ms-bigmap-lg { height: 380px; }
	.ms-slide-dots { bottom: 12px; }
}

@media (max-width: 520px) {
	.ms-years li { gap: 12px; padding-left: 18px; }
	.ms-year { width: 48px; font-size: 14px; }
	.ms-table th { width: 34%; padding: 12px 10px; }
	.ms-table td { padding: 12px 10px; }
	.ms-qa summary { font-size: 15px; }
	.ms-banner-in { flex-direction: column; gap: 6px; }
	.ms-slide-nav { display: none; }   /* 손가락으로 밀면 된다. 화살표가 글을 가린다 */
	.ms-cols-2, .ms-cols-3, .ms-cols-4 { grid-template-columns: 1fr; }
	.ms-bricks-2, .ms-bricks-3, .ms-bricks-4 { column-count: 1; }
	.ms-deflist { grid-template-columns: 1fr; gap: 4px 0; }

	/* 더한 스킨 — 좁은 화면 */
	.ms-prose-two, .ms-qas-two { column-count: 1; }
	.ms-specgrid { grid-template-columns: 1fr; }
	.ms-specpair { grid-template-columns: 96px 1fr; gap: 12px; }
	.ms-slidecard { grid-template-columns: 1fr; }
	.ms-slidecard-t { padding: 20px 18px; }
	.ms-personrow, .ms-step2 { grid-template-columns: 1fr; gap: 12px; }
	.ms-personrow .ms-portrait { width: 72px; height: 72px; }
	.ms-deflist-row { grid-template-columns: 90px 1fr; }
	.ms-deflist-row dt, .ms-deflist-row dd { grid-row: auto; }
	.ms-prosecard { padding: 24px 20px; }
	.ms-headline-band { padding: 64px 0; }

	.ms-deflist dt { margin-top: 10px; }
}

/* ══════════════════════════════════════════════════
   문의 폼

   손님이 적어 보내면 홈페이지 주인의 가입 메일로 간다.
   색은 모두 테마 변수에서 받는다 — 박아 두면 테마를 바꿔도 폼만 옛 색으로 남는다.
   ══════════════════════════════════════════════════ */

.ms-cform-form { display: flex; flex-direction: column; gap: 14px; }

.ms-cform-fld { display: flex; flex-direction: column; gap: 6px; }
.ms-cform-fld > span { font-size: 13px; font-weight: 600; color: var(--ms-muted); }
/* 꼭 적어야 하는 칸 표. 별만 두면 왜 붙었는지 모르니 색으로 한 번 더 말한다 */
.ms-cform-fld > span i { font-style: normal; color: var(--ms-primary); }

.ms-cform-form input,
.ms-cform-form textarea {
	width: 100%; box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius);
	background: var(--ms-bg);
	color: var(--ms-text);
	font-family: inherit; font-size: 15px; line-height: 1.6;
}
.ms-cform-form textarea { resize: vertical; min-height: 120px; }
.ms-cform-form input:focus,
.ms-cform-form textarea:focus {
	outline: none; border-color: var(--ms-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-primary) 18%, transparent);
}

.ms-cform-send { margin-top: 4px; }
.ms-cform-send .ms-btn { width: 100%; justify-content: center; text-align: center; }

.ms-cform-note { margin: 0; font-size: 12px; color: var(--ms-muted); line-height: 1.6; }

/* 보낸 뒤. 폼이 있던 자리에 들어가므로 높이를 어느 정도 잡아 준다 —
   폼이 사라지면서 쪽이 훌쩍 줄어들면 무엇이 일어났는지 못 본다 */
.ms-cform-done {
	margin: 0; padding: 28px 24px;
	border: 1px solid var(--ms-border); border-radius: var(--ms-radius);
	background: var(--ms-bg_alt); color: var(--ms-text);
	font-size: 16px; line-height: 1.7; text-align: center;
}

/* 덫. 사람 눈에는 안 보이고 자동 프로그램만 채운다.
   display:none 으로 숨기지 않는다 — 그건 알아채고 비워 두고 온다.
   화면 밖으로 밀어 두기만 한다 */
.ms-cform-trap {
	position: absolute; left: -9999px; top: auto;
	width: 1px; height: 1px; overflow: hidden;
}

/* 가운데 좁게.
   폭은 .ms-wrap 이 정한다 (--ms-w · 끌어서 바꾸는 그 값).
   여기서 또 좁히면 끌어도 그 선에서 멈춘다 — 전에 560px·620px 을 박아 두어
   콘텐츠 너비를 늘려도 폼만 그대로였다 */
.ms-cform-center .ms-cform-head { text-align: center; margin: 0 auto 32px; }
.ms-cform-narrow { width: 100%; margin: 0 auto; }

/* 상자에 담아. 폭은 .ms-wrap 이 정한다 */
.ms-cform-box { background: var(--ms-bg_alt); }
.ms-cform-card {
	width: 100%; box-sizing: border-box; margin: 0 auto;
	background: var(--ms-bg); border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius); padding: 36px 32px;
}
.ms-cform-card .ms-cform-head { margin-bottom: 24px; }

@media (max-width: 760px) {
	.ms-cform-card { padding: 24px 18px; }
}

/* 고치는 중에는 칸이 잠겨 있다 (ms_cform 이 disabled 를 붙인다).
   눌러도 사건이 안 일어나는 칸이라, 그대로 두면 섹션을 고르려고 폼을 눌렀을 때
   아무 일도 안 일어난다. 눌림을 상자로 흘려보내 섹션이 골라지게 한다 */
.ms-editing .ms-cform-form input:disabled,
.ms-editing .ms-cform-form textarea:disabled,
.ms-editing .ms-cform-form button:disabled { pointer-events: none; }
.ms-editing .ms-cform-form :disabled { opacity: .72; }
.ms-editing .ms-cform-edit { color: var(--ms-primary); font-weight: 600; }

/* ── 게시판 ──
   목록 · 카드 · 펼친 글이 같은 이름표(ms-post-*)를 나눠 쓴다.
   색은 전부 테마 변수다 — 테마를 바꾸면 게시판도 같이 바뀐다 */
.ms-blist { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ms-border); }
.ms-blist li { border-bottom: 1px solid var(--ms-border); }
.ms-blist a {
	display: flex; align-items: center; gap: 12px; padding: 16px 4px;
	color: var(--ms-text);
}
.ms-blist a:hover .ms-blist-t { color: var(--ms-primary); }
.ms-blist-t { flex: 1; min-width: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-blist-d { flex: none; color: var(--ms-muted); font-size: 13px; margin: 0; }
.ms-blist li.is-notice { background: var(--ms-bg_alt); }
.ms-blist li.is-notice .ms-blist-t { font-weight: 600; }

.ms-post-tag {
	display: inline-block; flex: none; padding: 2px 8px; border-radius: 999px;
	background: var(--ms-primary); color: var(--ms-on_primary);
	font-size: 12px; font-weight: 600; line-height: 1.6;
}

a.ms-bcard { display: flex; flex-direction: column; gap: 6px; color: var(--ms-text); padding: 0 0 20px; overflow: hidden; }
a.ms-bcard > :not(.ms-bcard-img) { margin-left: 22px; margin-right: 22px; }
a.ms-bcard > :first-child:not(.ms-bcard-img) { margin-top: 22px; }
a.ms-bcard .ms-post-tag { align-self: flex-start; }
a.ms-bcard:hover .ms-card-title { color: var(--ms-primary); }
.ms-bcard-img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--ms-bg_alt); margin-bottom: 10px; }
.ms-bcard .ms-card-title, .ms-bcard .ms-card-desc { margin-bottom: 0; }

.ms-post { border-top: 2px solid var(--ms-text); padding-top: 24px; }
.ms-post-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-bottom: 18px; border-bottom: 1px solid var(--ms-border); }
.ms-post-title { flex: 1 1 100%; order: 2; font-size: 24px; font-weight: var(--ms-heading-weight); margin: 0; letter-spacing: -.02em; }
.ms-post-head .ms-post-tag { order: 1; }
.ms-post-date { order: 3; color: var(--ms-muted); font-size: 13px; margin: 0; }
.ms-post-img { display: block; max-width: 100%; height: auto; margin: 24px auto 0; border-radius: var(--ms-radius); }
.ms-post-body { padding: 24px 0 8px; font-size: 16px; line-height: 1.85; word-break: break-word; }
.ms-post-body a { color: var(--ms-primary); text-decoration: underline; }
.ms-post-foot { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--ms-border); }

.ms-pager { display: flex; justify-content: center; gap: 4px; margin: 28px 0 0; }
.ms-pager a, .ms-pager-on {
	min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: calc(var(--ms-radius) / 2); font-size: 14px;
}
.ms-pager a { color: var(--ms-muted); }
.ms-pager a:hover { background: var(--ms-bg_alt); color: var(--ms-text); }
.ms-pager-on { background: var(--ms-primary); color: var(--ms-on_primary); font-weight: 600; }

.ms-board-empty { text-align: center; color: var(--ms-muted); padding: 40px 0; margin: 0; border-top: 1px solid var(--ms-border); }
.ms-board-hint { border-top: 0; padding-top: 0; color: var(--ms-primary); font-size: 14px; }
.ms-board-bar { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.ms-board-bar .ms-btn { padding: 9px 16px; font-size: 14px; }

@media (max-width: 860px) {
	.ms-post-title { font-size: 20px; }
	.ms-blist a { padding: 14px 2px; }
}