@charset "utf-8";
/* 사용자 메인 화면 본문 */
.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_body a {color:inherit; text-decoration:none;}
.mn_body a:hover .mn_thumb_title, .mn_body .mn_list a:hover {color:var(--mn-green-d); text-decoration:underline;}
.mn_body a:focus-visible, .mn_body button:focus-visible, .mn_body input:focus-visible {outline:2px solid var(--mn-green); outline-offset:2px;}
.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 {margin:0; 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_empty {padding:28px 0; text-align:center; color:var(--mn-mute); font-size:13px; background:var(--mn-soft); border-radius:8px;}

/* 탭 */
.mn_tab_list {display:flex; gap:4px; border-bottom:1px solid var(--mn-line); margin-bottom:10px; overflow-x:auto; scrollbar-width:none;}
.mn_tab_list::-webkit-scrollbar {display:none;}
.mn_tab_list button {flex:1 0 auto; min-width:64px; padding:9px 10px; background:transparent; color:var(--mn-sub); font-size:13px; font-weight:600; border-bottom:2px solid transparent; margin-bottom:-1px;}
.mn_tab_list button[aria-selected=true] {color:var(--mn-green-d); border-bottom-color:var(--mn-green);}
.mn_tab_list button:hover {color:var(--mn-text);}
.mn_tab_panel[hidden] {display:none;}

/* 글 목록 */
.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 time {flex:none; font-size:12px; color:var(--mn-mute); font-variant-numeric:tabular-nums;}
.mn_list_bullet li > a::before {content:''; display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--mn-green); vertical-align:middle; margin:-2px 8px 0 0;}
.mn_list_none {color:var(--mn-mute); font-size:12px;}
.mn_rank {flex:none; width:20px; height:20px; border-radius:5px; background:#eef0f2; color:var(--mn-sub); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;}
.mn_rank_top {background:var(--mn-green); color:#fff;}
.mn_cmt {font-style:normal; color:var(--mn-green-d); font-size:12px; font-weight:700;}
.mn_new {display:inline-flex; width:14px; height:14px; border-radius:3px; background:#ff6b3d; color:#fff; font-size:9px; font-style:normal; font-weight:800; align-items:center; justify-content:center; vertical-align:1px;}
.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_thumb_grid {display:grid; gap:16px 14px;}
.mn_cols4 {grid-template-columns:repeat(4, minmax(0, 1fr));}
.mn_cols2 {grid-template-columns:repeat(2, minmax(0, 1fr));}
.mn_thumb {display:block; position:relative; aspect-ratio:4 / 3; border-radius:8px; overflow:hidden; background:var(--mn-soft);}
.mn_thumb img {width:100%; height:100%; object-fit:cover; transition:transform .25s ease;}
.mn_body a:hover .mn_thumb img {transform:scale(1.04);}
.mn_thumb_none {display:flex; align-items:center; justify-content:center; color:#c8ccd1; font-size:30px;}
.mn_thumb_title {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:8px; font-size:13.5px; font-weight:600; line-height:1.45;}
.mn_thumb_meta {display:flex; justify-content:space-between; gap:6px; margin-top:4px; font-size:11.5px; color:var(--mn-mute);}
.mn_feature .mn_big {grid-column:1 / -1;}
.mn_feature .mn_big .mn_thumb {aspect-ratio:16 / 9;}
.mn_feature .mn_big .mn_thumb_title {font-size:15px;}
.mn_tab_thumb {display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:20px; align-items:start;}

/* 히어로 */
.mn_hero {position:relative; border-radius:var(--mn-radius); overflow:hidden; background:#fdf3d7;}
.mn_hero_track {position:relative; height:325px;}
.mn_hero_slide {position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s;}
.mn_hero_slide.is_on {opacity:1; visibility:visible;}
.mn_hero_slide img, .mn_hero_slide picture {display:block; width:100%; height:100%; object-fit:cover;}
.mn_hero_link {display:block; height:100%;}
.mn_hero_ctrl {position:absolute; right:16px; bottom:16px; display:flex; background:rgba(17,24,39,.75); border-radius:6px; overflow:hidden;}
.mn_hero_ctrl button {width:34px; height:30px; background:transparent; color:#fff; font-size:16px;}
.mn_hero_ctrl button:hover {background:rgba(255,255,255,.15);}
.mn_hero_default {box-sizing:border-box; height:325px; padding:53px 40px; background:linear-gradient(120deg, #fdf3d7, #e9f7ec);}
.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;}
.mn_hero_title {margin-top:14px; font-size:40px; font-weight:800; letter-spacing:-1px; color:var(--mn-green-d);}
.mn_hero_desc {margin-top:10px; color:var(--mn-sub);}

/* 로그인 */
.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; 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_msg {min-height:0; color:#dc2626; font-size:12px; margin-top:6px;}
.mn_login_msg:empty {display:none;}
.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_mypoint {margin-top:6px; padding:10px 12px; background:var(--mn-green-l); border-radius:6px; font-size:13px; color:var(--mn-green-d);}
.mn_mypoint b {font-size:18px; font-variant-numeric:tabular-nums;}
.mn_login_links {display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; margin-top:10px;}
.mn_login_links a, .mn_login_links button {display:block; width:100%; padding:7px 0; text-align:center; background:var(--mn-soft); border-radius:6px; font-size:12px; line-height:18px; cursor:pointer;}
.mn_login_links a:hover, .mn_login_links button:hover {background:var(--mn-green-l); color:var(--mn-green-d);}

/* 사이드 배너 */
.mn_side_banner a, .mn_side_banner div, .mn_side_banner picture, .mn_side_banner img {display:block; width:100%; border-radius:var(--mn-radius);}
.mn_side_banner img {height:auto;}

/* 랭킹 */
.mn_rank_list li {display:flex; align-items:center; gap:8px; padding:5px 0; font-size:13px;}
.mn_rank_name {flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mn_rank_list b, .mn_rank_cnt {flex:none; font-size:12px; color:var(--mn-sub); font-variant-numeric:tabular-nums;}
.mn_rank_list b {color:var(--mn-green-d);}
.mn_list_notice li > a {font-weight:500;}

/* 설문 */
.mn_poll fieldset {border:0; padding:0; margin:0; min-width:0;}
.mn_poll_q {position:static; height:auto; text-indent:0; overflow:visible; font-size:14px; font-weight:700; line-height:1.45; margin-bottom:10px; padding:0;}
.mn_poll_q i {color:var(--mn-green);}
.mn_poll_items li {display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:2px 8px; padding:4px 0; font-size:13px;}
.mn_poll_items label {display:flex; align-items:center; gap:6px;}
.mn_poll_items input {accent-color:var(--mn-green);}
.mn_poll_bar, .mn_poll_pct {display:none;}
.mn_poll .is_voted .mn_poll_bar, .mn_poll .is_result .mn_poll_bar {display:block; grid-column:1; height:6px; background:#eef0f2; border-radius:3px; overflow:hidden;}
.mn_poll .is_voted .mn_poll_bar span, .mn_poll .is_result .mn_poll_bar span {display:block; height:100%; background:var(--mn-green); border-radius:3px;}
.mn_poll .is_voted .mn_poll_pct, .mn_poll .is_result .mn_poll_pct {display:block; grid-column:2; grid-row:1 / span 2; font-size:12px; color:var(--mn-sub); font-variant-numeric:tabular-nums;}
.mn_poll_msg {margin-top:8px; font-size:12px; color:var(--mn-sub);}
.mn_poll_msg:empty {display:none;}
.mn_btn_poll {display:block; width:100%; height:40px; margin-top:12px; background:var(--mn-green); color:#fff; border-radius:6px; font-weight:700;}
.mn_btn_poll:hover {background:var(--mn-green-d);}
.mn_btn_result {display:block; width:100%; margin-top:6px; padding:6px; background:transparent; color:var(--mn-sub); font-size:12px;}

/* 중고장터 */
.mn_market {display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 24px;}
.mn_market a {display:flex; gap:14px; align-items:flex-start;}
.mn_market .mn_thumb {flex:none; width:110px; aspect-ratio:1;}
.mn_market_body {flex:1; min-width:0;}
.mn_market .mn_thumb_title {margin-top:2px;}
.mn_price {display:block; margin-top:4px; font-size:15px; font-weight:800; color:var(--mn-text); font-variant-numeric:tabular-nums;}
.mn_summary {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:4px; font-size:12px; color:var(--mn-mute); line-height:1.5;}

@media (prefers-reduced-motion:reduce) {
	.mn_hero_slide, .mn_thumb img {transition:none;}
}
@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_cols4 {grid-template-columns:repeat(3, minmax(0, 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 {order:2;}
	.mn_main > *:not(.mn_hero) {order:3;}
	.mn_side > *:not(.mn_login) {order:4;}
	.mn_row2 {grid-template-columns:minmax(0, 1fr);}
	.mn_cols4 {grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:640px) {
	.mn_card {padding:16px;}
	.mn_tab_thumb {grid-template-columns:minmax(0, 1fr);}
	.mn_market {grid-template-columns:minmax(0, 1fr);}
	.mn_market .mn_thumb {width:92px;}
	/* 폰 폭에서 325px 고정이면 배너 좌우가 크게 잘리므로 배너 비율(1200:440)을 따른다 */
	.mn_hero_track {height:auto; aspect-ratio:1200 / 440;}
	.mn_hero_default {height:auto; padding:37px 22px;}
	.mn_hero_title {font-size:28px;}
}