@charset "utf-8";
/* 웹아티 메인 v2 : bbs5 home/index 스타일 (그린 카드형 레이아웃) */
:root {
	--mn-green:#2db24a; --mn-green-d:#239a3d; --mn-green-l:#e9f7ec;
	--mn-text:#1f2328; --mn-sub:#6b7280; --mn-mute:#9ca3af;
	--mn-line:#e5e7eb; --mn-bg:#ffffff; --mn-soft:#f6f7f8;
	--mn-radius:10px;
	--mn-font:'Pretendard', 'Malgun Gothic', '맑은 고딕', sans-serif;
}
*, *::before, *::after {box-sizing:border-box;}
html {-webkit-text-size-adjust:100%;}
body.mn_page {margin:0; padding:0; background:var(--mn-bg); color:var(--mn-text); font-family:var(--mn-font); font-size:14px; line-height:1.5; word-break:keep-all;}
.mn_page ul, .mn_page ol {list-style:none; margin:0; padding:0;}
.mn_page h1, .mn_page h2, .mn_page h3, .mn_page p {margin:0;}
.mn_page img {border:0; max-width:100%;}
.mn_page button {font:inherit; border:0; cursor:pointer; padding:0;}
.mn_page a {color:inherit; text-decoration:none;}
.mn_inner {max-width:1200px; margin:0 auto; padding:0 20px;}
.mn_sr {position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.mn_skip {position:absolute; left:-9999px; top:0; z-index:100; padding:10px 16px; background:var(--mn-green); color:#fff !important;}
.mn_skip:focus {left:10px;}
.mn_page a:focus-visible, .mn_page button:focus-visible, .mn_page input:focus-visible {outline:2px solid var(--mn-green); outline-offset:2px;}

/* 머리글 */
.mn_top {display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-top:22px; padding-bottom:14px;}
.mn_logo {font-size:32px; font-weight:800; letter-spacing:-1px; line-height:1;}
.mn_util {display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--mn-sub);}
.mn_util a:hover {color:var(--mn-green);}

/* GNB */
.mn_gnb_wrap {position:relative; z-index:20;}
.mn_gnb {display:flex; align-items:center; background:var(--mn-green); border-radius:8px; padding:0 8px 0 16px; min-height:46px;}
.mn_gnb_list {flex:1; display:flex; flex-wrap:wrap; gap:0 2px; min-width:0;}
.mn_gnb_list > li {position:relative;}
.mn_gnb_list a {display:block; padding:13px 14px; color:#fff !important; font-size:14px; font-weight:600; border-radius:6px; line-height:20px;}
.mn_gnb_list a:hover, .mn_gnb_list a:focus-visible {background:rgba(0,0,0,.12);}
.mn_gnb_sub {display:none; position:absolute; left:0; top:100%; z-index:30; min-width:160px; padding:6px; margin-top:4px; background:#fff; border:1px solid var(--mn-line); border-radius:8px; box-shadow:0 10px 24px rgba(0,0,0,.1);}
.mn_gnb_sub::before {content:''; position:absolute; left:0; right:0; top:-6px; height:6px;}
.mn_gnb_list .has_sub:hover > .mn_gnb_sub, .mn_gnb_list .has_sub:focus-within > .mn_gnb_sub {display:block;}
.mn_gnb_list .mn_gnb_sub a {padding:8px 12px; color:var(--mn-text) !important; font-size:13px; font-weight:500; white-space:nowrap; border-radius:5px;}
.mn_gnb_list .mn_gnb_sub a:hover, .mn_gnb_list .mn_gnb_sub a:focus-visible {background:var(--mn-green-l); color:var(--mn-green-d) !important;}
.mn_gnb_btns {display:flex; gap:2px; flex:none;}
.mn_icon_btn {width:40px; height:40px; background:transparent; color:#fff; border-radius:6px; display:inline-flex; align-items:center; justify-content:center;}
.mn_icon_btn svg {width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round;}
.mn_icon_btn:hover, .mn_icon_btn[aria-expanded=true] {background:rgba(0,0,0,.14);}
.mn_layer {position:absolute; left:20px; right:20px; top:calc(100% + 6px); background:#fff; border:1px solid var(--mn-line); border-radius:var(--mn-radius); box-shadow:0 12px 30px rgba(0,0,0,.08); padding:16px;}
.mn_layer[hidden] {display:none;}
.mn_search_layer form {display:flex; gap:8px; max-width:560px; margin:0 auto;}
.mn_search_layer input {flex:1; min-width:0; height:44px; border:2px solid var(--mn-green); border-radius:8px; padding:0 14px; font-size:15px; font-family:inherit;}
.mn_search_layer button {height:44px; padding:0 20px; background:var(--mn-green); color:#fff; border-radius:8px; font-weight:700;}
.mn_all_menu ul.mn_all_root {display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:8px;}
.mn_all_menu a {display:block; padding:10px 12px; border-radius:6px; background:var(--mn-soft); font-weight:600;}
.mn_all_menu a:hover {background:var(--mn-green-l); color:var(--mn-green-d);}
.mn_all_menu .mn_all_sub {margin-top:4px; padding-left:6px;}
.mn_all_menu .mn_all_sub a {padding:4px 8px; background:transparent; font-size:12.5px; font-weight:500; color:var(--mn-sub);}
.mn_all_menu .mn_all_sub a::before {content:'- ';}

/* 본문 레이아웃 */
.mn_body {display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:24px; margin-top:24px; align-items:start;}
.mn_main, .mn_side {display:flex; flex-direction:column; gap:24px; min-width:0;}
.mn_row2 {display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px;}

/* 카드 */
.mn_card {border:1px solid var(--mn-line); border-radius:var(--mn-radius); background:#fff; padding:18px 20px 20px; min-width:0;}
.mn_card_head {display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;}
.mn_card_title {font-size:17px; font-weight:800; letter-spacing:-.3px;}
.mn_more {font-size:12px; color:var(--mn-mute) !important; white-space:nowrap;}
.mn_more:hover {color:var(--mn-green) !important;}

/* 히어로 */
.mn_hero {position:relative; border-radius:var(--mn-radius); overflow:hidden; background:linear-gradient(120deg, #fdf3d7, #e9f7ec); padding:48px 40px 40px;}
.mn_hero::after {content:''; position:absolute; right:-80px; top:-80px; width:340px; height:340px; border-radius:50%; background:rgba(45,178,74,.14);}
.mn_hero::before {content:''; position:absolute; right:60px; top:60px; width:200px; height:200px; border-radius:50%; background:rgba(45,178,74,.14);}
.mn_hero_in {position:relative; z-index:1;}
.mn_hero_badge {display:inline-block; padding:4px 12px; border:1px solid var(--mn-green); border-radius:999px; color:var(--mn-green-d); font-size:13px; font-weight:700; background:#fff;}
.mn_hero_title {margin-top:14px; font-size:38px; font-weight:800; letter-spacing:-1px; line-height:1.25; color:var(--mn-green-d);}
.mn_hero_desc {margin-top:10px; color:var(--mn-sub);}
.mn_hero_cta {display:flex; flex-wrap:wrap; gap:8px; margin-top:22px;}
.mn_hero_cta a {padding:10px 20px; border-radius:8px; background:var(--mn-green); color:#fff !important; font-weight:700; font-size:14px;}
.mn_hero_cta a:hover {background:var(--mn-green-d);}
.mn_hero_cta a.alt {background:#fff; color:var(--mn-green-d) !important; border:1px solid var(--mn-green);}
.mn_hero_cta a.alt:hover {background:var(--mn-green-l);}

/* 호스팅 상품 */
.mn_prod {display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px;}
.mn_prod a {display:flex; flex-direction:column; gap:6px; padding:16px 14px; border:1px solid var(--mn-line); border-radius:8px; background:#fff; transition:border-color .15s, box-shadow .15s;}
.mn_prod a:hover {border-color:var(--mn-green); box-shadow:0 6px 16px rgba(45,178,74,.12);}
.mn_prod .tag {align-self:flex-start; padding:1px 8px; border-radius:4px; background:var(--mn-green-l); color:var(--mn-green-d); font-size:11px; font-weight:700;}
.mn_prod strong {font-size:15px; font-weight:800;}
.mn_prod .spec {font-size:12px; color:var(--mn-sub); line-height:1.6; flex:1;}
.mn_prod .price {font-size:16px; font-weight:800; color:var(--mn-green-d); font-variant-numeric:tabular-nums; margin-top:4px;}
.mn_prod .price small {font-size:11px; color:var(--mn-mute); font-weight:500;}

/* 도메인 검색 */

/* 홈페이지 제작 */
.mn_svc {display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px;}
.mn_svc a {display:block; padding:18px 16px; border-radius:8px; background:var(--mn-soft); transition:background .15s;}
.mn_svc a:hover {background:var(--mn-green-l);}
.mn_svc strong {display:block; font-size:15px; font-weight:800;}
.mn_svc span {display:block; margin-top:4px; font-size:12px; color:var(--mn-sub);}

/* 썸네일 */
.mn_thumb_grid {display:grid; gap:16px 14px;}
.mn_cols5 {grid-template-columns:repeat(5, minmax(0, 1fr));}
.mn_thumb {display:block; position:relative; aspect-ratio:1 / 1; border-radius:8px; overflow:hidden; background:var(--mn-soft); border:1px solid var(--mn-line);}
.mn_thumb img {width:100%; height:100%; object-fit:cover; transition:transform .25s ease;}
.mn_thumb_item:hover .mn_thumb img {transform:scale(1.05);}
.mn_thumb_title {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:8px; font-size:13px; font-weight:600; line-height:1.45;}
.mn_thumb_item:hover .mn_thumb_title {color:var(--mn-green-d);}

/* 글 목록 */
.mn_list li {display:flex; align-items:center; gap:8px; padding:6px 0; font-size:13.5px; min-width:0;}
.mn_list li > a {flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mn_list li > a:hover {color:var(--mn-green-d); text-decoration:underline;}
.mn_tag {flex:none; padding:1px 6px; border-radius:4px; background:var(--mn-green-l); color:var(--mn-green-d); font-size:11px; font-weight:700;}

/* 스킨샵 */
.mn_skin li + li {margin-top:10px;}
.mn_skin a {display:flex; gap:12px; align-items:center;}
.mn_skin .mn_thumb {flex:none; width:52px; aspect-ratio:1;}
.mn_skin .nm {display:block; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mn_skin .ct {display:block; font-size:12px; color:var(--mn-mute);}
.mn_skin a:hover .nm {color:var(--mn-green-d);}
.mn_skin .body {min-width:0; flex:1;}

/* 로그인 */
.mn_login {padding:16px;}
.mn_login_row {display:flex; gap:8px;}
.mn_login_inputs {flex:1; display:flex; flex-direction:column; gap:6px; min-width:0;}
.mn_login input[type=text], .mn_login input[type=password] {width:100%; height:36px; border:1px solid var(--mn-line); border-radius:6px; padding:0 10px; font-size:13px; font-family:inherit; background:#fff;}
.mn_login input:focus {border-color:var(--mn-green); outline:none;}
.mn_btn_login {width:78px; flex:none; background:var(--mn-green); color:#fff; border-radius:6px; font-weight:700; font-size:14px;}
.mn_btn_login:hover {background:var(--mn-green-d);}
.mn_btn_login:disabled {opacity:.6; cursor:wait;}
.mn_login_foot {display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; margin-top:10px; font-size:11.5px; color:var(--mn-sub);}
.mn_login_foot input {vertical-align:-2px; margin-right:2px; accent-color:var(--mn-green);}
.mn_login_foot a:hover {color:var(--mn-green);}
.mn_hello {font-size:14px;}
.mn_svc_count {margin-top:10px; display:grid; gap:4px;}
.mn_svc_count li {display:flex; justify-content:space-between; align-items:center; padding:7px 10px; background:var(--mn-soft); border-radius:6px; font-size:12.5px;}
.mn_svc_count b {color:var(--mn-green-d); font-variant-numeric:tabular-nums;}
.mn_svc_count a {color:var(--mn-sub);}
.mn_svc_count a:hover {color:var(--mn-green);}
.mn_login_links {display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; margin-top:10px;}
.mn_login_links a {display:block; padding:7px 0; text-align:center; background:var(--mn-soft); border-radius:6px; font-size:12px; line-height:18px;}
.mn_login_links a:hover {background:var(--mn-green-l); color:var(--mn-green-d);}

/* 사이드 : 솔루션 / 고객센터 / 입금 */
.mn_sol li + li {margin-top:2px;}
.mn_sol a {display:block; padding:9px 10px; border-radius:6px; font-size:13.5px; font-weight:600;}
.mn_sol a:hover {background:var(--mn-green-l); color:var(--mn-green-d);}
.mn_sol small {display:block; font-size:11.5px; font-weight:400; color:var(--mn-mute);}
.mn_tel {font-size:22px; font-weight:800; letter-spacing:-.5px; color:var(--mn-green-d);}
.mn_kv {margin-top:8px; font-size:12.5px; color:var(--mn-sub); line-height:1.8;}
.mn_kv b {color:var(--mn-text); font-weight:600;}
.mn_ns p {padding:8px 10px; background:var(--mn-soft); border-radius:6px; font-size:13px; line-height:1.5;}
.mn_ns p + p {margin-top:6px;}
.mn_ns b {display:block; font-weight:700;}
.mn_ns span {color:#3a6ae3; font-size:12.5px;}
.mn_bank_no {font-size:18px; font-weight:800; letter-spacing:-.3px; font-variant-numeric:tabular-nums;}
.mn_bank_btns {display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:12px;}
.mn_bank_btns a {display:block; padding:8px 4px; text-align:center; background:var(--mn-soft); border-radius:6px; font-size:12px;}
.mn_bank_btns a:hover {background:var(--mn-green-l); color:var(--mn-green-d);}
.mn_side_banner a, .mn_side_banner img {display:block; width:100%; height:auto; border-radius:var(--mn-radius);}

/* 푸터 */
.mn_footer {margin-top:48px; border-top:1px solid var(--mn-line); color:var(--mn-sub); font-size:13px;}
.mn_sitemap ul {display:grid; grid-template-columns:repeat(6, 1fr); gap:14px 20px; padding:28px 0;}
.mn_sitemap a {font-weight:700; color:var(--mn-text);}
.mn_sitemap a:hover {color:var(--mn-green);}
.mn_foot_bottom {background:var(--mn-soft); padding:22px 0 28px;}
.mn_foot_info {display:flex; justify-content:space-between; align-items:flex-start; gap:20px;}
.mn_foot_info address {font-style:normal; display:flex; flex-direction:column; gap:2px; font-size:12px; line-height:1.7;}
.mn_copy {margin-top:14px; font-size:11px; color:var(--mn-mute); letter-spacing:.3px;}

@media (max-width:1024px) {
	.mn_body {grid-template-columns:minmax(0, 1fr) 260px; gap:20px;}
	.mn_main, .mn_side {gap:20px;}
	.mn_row2 {gap:20px;}
	.mn_prod {grid-template-columns:repeat(2, minmax(0, 1fr));}
	.mn_cols5 {grid-template-columns:repeat(4, minmax(0, 1fr));}
	.mn_all_menu ul.mn_all_root, .mn_sitemap ul {grid-template-columns:repeat(3, 1fr);}
}
@media (max-width:860px) {
	.mn_body {display:flex; flex-direction:column; align-items:stretch; gap:20px;}
	.mn_main, .mn_side {display:contents;}
	.mn_hero {order:1;}
	.mn_login_card {order:2;}
	.mn_main > *:not(.mn_hero) {order:3;}
	.mn_side > *:not(.mn_login_card) {order:4;}
	.mn_row2 {grid-template-columns:minmax(0, 1fr);}
	.mn_cols5 {grid-template-columns:repeat(3, minmax(0, 1fr));}
}
@media (max-width:768px) {
	.mn_inner {padding:0 16px;}
	.mn_top {padding-top:16px; padding-bottom:10px; align-items:center;}
	.mn_logo {font-size:26px;}
	.mn_gnb {padding:0 4px 0 6px;}
	.mn_gnb_list {flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;}
	.mn_gnb_list::-webkit-scrollbar {display:none;}
	.mn_gnb_list a {padding:13px 10px; white-space:nowrap;}
	.mn_gnb_list .has_sub:hover > .mn_gnb_sub, .mn_gnb_list .has_sub:focus-within > .mn_gnb_sub {display:none;}
	.mn_layer {left:16px; right:16px;}
	.mn_all_menu ul.mn_all_root, .mn_sitemap ul {grid-template-columns:repeat(2, 1fr);}
	.mn_foot_info {flex-direction:column;}
}
@media (max-width:640px) {
	.mn_card {padding:16px;}
	.mn_hero {padding:32px 22px 28px;}
	.mn_hero_title {font-size:26px;}
	.mn_svc {grid-template-columns:minmax(0, 1fr);}
	.mn_cols5 {grid-template-columns:repeat(2, minmax(0, 1fr));}
		}
@media (max-width:420px) {
	.mn_prod {grid-template-columns:minmax(0, 1fr);}
}

/* 전체 메뉴 레이어 : 1160px (컨테이너 1200px - 좌우 패딩 20px) */
#mn_all_layer {left:0; right:0;}
@media (max-width:768px) {#mn_all_layer {left:16px; right:16px;}}

/* GNB 항목(has_sub) 좌우 여백 +5px (14px -> 19px) */
.mn_gnb_list .has_sub > a {padding-left:19px; padding-right:19px;}
@media (max-width:768px) {.mn_gnb_list .has_sub > a {padding-left:10px; padding-right:10px;}}

/* v9 : 바로가기 줄 + 서비스 카드 아이콘 + 히어로 다듬기 */
.mn_quick {display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px;}
.mn_quick a {display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 10px; border:1px solid var(--mn-line); border-radius:var(--mn-radius); background:#fff; font-weight:700; font-size:14px; transition:border-color .15s, box-shadow .15s, transform .15s;}
.mn_quick a i {font-size:18px; color:var(--mn-green);}
.mn_quick a:hover {border-color:var(--mn-green); box-shadow:0 6px 16px rgba(45,178,74,.12); transform:translateY(-1px);}
.mn_svc a i {display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; margin-bottom:10px; border-radius:10px; background:#fff; color:var(--mn-green-d); font-size:19px; box-shadow:0 1px 3px rgba(0,0,0,.06);}
.mn_svc a:hover i {background:var(--mn-green); color:#fff;}
.mn_hero_title {text-wrap:balance;}
.mn_prod a:hover {transform:translateY(-2px);}
.mn_prod .price::after {content:''; }
@media (max-width:640px) {.mn_quick {grid-template-columns:repeat(2, minmax(0, 1fr));}}
@media (prefers-reduced-motion:reduce) {.mn_quick a, .mn_prod a {transition:none; transform:none !important;}}

.mn_icon_btn i {font-size:20px; line-height:1;}

/* v10 : 호스팅 상품 카드 아이콘 디자인 */
.mn_prod a {position:relative; gap:10px; padding:16px 16px 14px;}
.mn_prod .pd_top {display:flex; align-items:center; justify-content:space-between;}
.mn_prod .pd_ic {display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; font-size:22px; background:var(--pd-bg, #e9f7ec); color:var(--pd-fg, #239a3d); transition:transform .15s;}
.mn_prod a:hover .pd_ic {transform:scale(1.06);}
.mn_prod .pd_win {--pd-bg:#e8f1fd; --pd-fg:#2563eb;}
.mn_prod .pd_lnx {--pd-bg:#fff0e6; --pd-fg:#e95420;}
.mn_prod .pd_mail {--pd-bg:#e9f7ec; --pd-fg:#239a3d;}
.mn_prod .pd_srv {--pd-bg:#f0ecfb; --pd-fg:#7c3aed;}
.mn_prod ul.spec {display:flex; flex-direction:column; gap:5px; flex:1; margin:0; padding:0; list-style:none; font-size:12px; color:var(--mn-sub); line-height:1.5;}
.mn_prod ul.spec li {display:flex; align-items:flex-start; gap:7px;}
.mn_prod ul.spec li i {flex:none; margin-top:2px; color:var(--pd-fg, #239a3d); font-size:12px;}
.mn_prod .pd_foot {display:flex; align-items:center; justify-content:space-between; margin-top:2px; padding-top:10px; border-top:1px dashed var(--mn-line);}
.mn_prod .pd_foot .price {margin:0; color:var(--pd-fg, #239a3d);}
.mn_prod .pd_foot > i {color:var(--mn-mute); font-size:18px; transition:color .15s, transform .15s;}
.mn_prod a:hover .pd_foot > i {color:var(--pd-fg, #239a3d); transform:translateX(2px);}
@media (prefers-reduced-motion:reduce) {.mn_prod .pd_ic, .mn_prod .pd_foot > i {transition:none;} .mn_prod a:hover .pd_ic {transform:none;}}

/* v11 : 제작사이트 썸네일 가로 3개 × 세로 4줄 */
.mn_cols3 {grid-template-columns:repeat(3, minmax(0, 1fr));}
@media (max-width:640px) {.mn_cols3 {grid-template-columns:repeat(2, minmax(0, 1fr));}}

/* v12 : 제작사이트 썸네일 가로 4개 × 세로 3줄 */
.mn_cols4 {grid-template-columns:repeat(4, minmax(0, 1fr));}
@media (max-width:860px) {.mn_cols4 {grid-template-columns:repeat(3, minmax(0, 1fr));}}
@media (max-width:640px) {.mn_cols4 {grid-template-columns:repeat(2, minmax(0, 1fr));}}