/* ================================================
   모아숏(moashot.com) 리뉴얼 테마
   실제 사이트의 색상/타이포/헤더·GNB 구조를 참고해
   .NET MVC + Bootstrap 5 위에 재현한 테마 스타일시트
   ================================================ */

:root {
    --moa-green: #6fbd25;
    --moa-green-dark: #3c8700;
    --moa-green-darker: #2a481a;
    --moa-red: #e1462a;
    --moa-red-dark: #c32323;
    --moa-text: #333333;
    --moa-text-muted: #777777;
    --moa-text-light: #999999;
    --moa-border: #dbdbdb;
    --moa-border-light: #e8e8e8;
    --moa-nav-bg: #f3f2f2;
    --moa-table-head: #3f4041;
    --moa-font: 'Malgun Gothic', '맑은 고딕', 'NanumGothic', 'Nanum Gothic', 'Dotum', '돋움', sans-serif;

    /* Bootstrap 5 변수 재정의 → 사이트 전역 버튼/링크 색상을 브랜드 컬러로 */
    --bs-primary: var(--moa-green);
    --bs-primary-rgb: 111, 189, 37;
    --bs-link-color: var(--moa-green-dark);
    --bs-link-hover-color: var(--moa-green);
    --bs-body-font-family: var(--moa-font);
    --bs-body-color: var(--moa-text);
}

body {
    font-family: var(--moa-font);
    color: var(--moa-text);
    font-size: 14px;
    background-color: #fff;
}

a { color: var(--moa-green-dark); }
a:hover { color: var(--moa-green); }

.btn-primary {
    --bs-btn-bg: var(--moa-green);
    --bs-btn-border-color: var(--moa-green);
    --bs-btn-hover-bg: var(--moa-green-dark);
    --bs-btn-hover-border-color: var(--moa-green-dark);
    --bs-btn-active-bg: var(--moa-green-dark);
    --bs-btn-active-border-color: var(--moa-green-dark);
}
.btn-outline-primary {
    --bs-btn-color: var(--moa-green-dark);
    --bs-btn-border-color: var(--moa-green);
    --bs-btn-hover-bg: var(--moa-green);
    --bs-btn-hover-border-color: var(--moa-green);
    --bs-btn-active-bg: var(--moa-green-dark);
}
.btn-danger, .btn-outline-danger {
    --bs-btn-bg: var(--moa-red);
    --bs-btn-border-color: var(--moa-red);
    --bs-btn-hover-bg: var(--moa-red-dark);
    --bs-btn-hover-border-color: var(--moa-red-dark);
    --bs-btn-color: var(--moa-red);
}
.btn-outline-danger { --bs-btn-color: var(--moa-red); --bs-btn-border-color: var(--moa-red); }

.badge.bg-success { background-color: var(--moa-green) !important; }
.badge.bg-danger { background-color: var(--moa-red) !important; }

/* ===================== 헤더 ===================== */
#moa-wrap { max-width: 100%; }

#moa-topbar { background: #fff; border-bottom: 1px solid var(--moa-border-light); }
#moa-topbar .wrapper {
    max-width: 1250px; margin: 0 auto; padding: 8px 20px;
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
#moa-topbar .login-inline { display: flex; align-items: center; gap: 6px; }
#moa-topbar .login-inline input.pill {
    height: 30px; border: 1px solid #d4d4d4; background: #ebeaea; border-radius: 15px;
    padding: 0 14px; font-size: 13px; width: 110px;
}
#moa-topbar .login-inline .chk { font-size: 12px; color: var(--moa-text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
#moa-topbar .login-inline a.find { font-size: 12px; color: var(--moa-text-muted); white-space: nowrap; display: inline-flex; align-items: center; }
#moa-topbar .login-inline a.find img { height: 14px; }
#moa-topbar .btn-login {
    background: var(--moa-red); color: #fff; border: none; border-radius: 15px;
    padding: 6px 22px; font-size: 14px; font-weight: 600; white-space: nowrap;
}
#moa-topbar .btn-login:hover { background: var(--moa-red-dark); color: #fff; }
#moa-topbar .user-box { font-size: 13px; color: var(--moa-text); display:flex; align-items:center; gap:10px; }
#moa-topbar .user-box strong { color: var(--moa-green-dark); }
#moa-topbar .user-box .btn-logout { background: none; border: none; color: var(--moa-text-muted); text-decoration: underline; font-size: 12px; padding: 0; }

#moa-header { background: #fff; border-bottom: 1px solid var(--moa-border); }
#moa-header .wrapper {
    max-width: 1250px; margin: 0 auto; padding: 18px 20px;
    display: flex; align-items: center; justify-content: space-between; position: relative;
}
#moa-hilogo { width: 160px; flex-shrink: 0; }
#moa-hilogo img { max-height: 48px; }
#moa-logo { text-align: center; flex: 1; }
#moa-logo a { text-decoration: none; display: inline-block; }
#moa-logo img { max-height: 56px; }

#moa-others { list-style: none; display: flex; align-items: center; gap: 0; margin: 0; padding: 0; border: 1px solid #d5d7d9; border-radius: 3px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
#moa-others li { padding: 0; position: relative; }
#moa-others li + li:before { content: ''; position: absolute; left: 0; top: 20%; height: 60%; border-left: 1px solid #c4c7ca; }
#moa-others a { display: block; padding: 10px 16px; color: var(--moa-text); font-size: 13px; text-decoration: none; }
#moa-others a:hover { text-decoration: underline; color: var(--moa-green-dark); }

/* ===================== GNB ===================== */
#moa-gnb { background-color: var(--moa-nav-bg); border-top: 1px solid var(--moa-border); border-bottom: 1px solid var(--moa-border); }
#moa-gnb .d1 { list-style: none; max-width: 1250px; margin: 0 auto; padding: 0; display: flex; justify-content: center; }
#moa-gnb .d1 > li { position: relative; flex: 1; text-align: center; max-width: 145px; }
#moa-gnb .d1 > li > a {
    display: block; line-height: 56px; font-size: 16px; font-weight: 700; color: var(--moa-text);
    text-decoration: none; position: relative;
}
#moa-gnb .d1 > li > a:after {
    content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 0; height: 3px; background: var(--moa-green-dark); transition: width .2s;
}
#moa-gnb .d1 > li:hover > a:after,
#moa-gnb .d1 > li.active > a:after { width: 70%; }
#moa-gnb .d1 > li:hover > a, #moa-gnb .d1 > li.active > a { color: var(--moa-green-dark); }
#moa-gnb .gnbsub {
    display: none; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
    background: #fff; border: 1px solid var(--moa-border); border-top: none; min-width: 160px;
    padding: 12px 0; z-index: 20; box-shadow: 0 6px 10px rgba(0,0,0,.06);
}
#moa-gnb .d1 > li:hover .gnbsub { display: block; }
#moa-gnb .gnbsub ul { list-style: none; margin: 0; padding: 0; }
#moa-gnb .gnbsub li a { display: block; padding: 6px 14px; font-size: 13px; color: #666; text-decoration: none; white-space: nowrap; }
#moa-gnb .gnbsub li a:hover { background: var(--moa-green); color: #fff; }
#moa-gnb .gnbsub li span.disabled { display: block; padding: 6px 14px; font-size: 13px; color: #bbb; white-space: nowrap; }

/* ===================== 컨텐츠 레이아웃 ===================== */
#moa-container { max-width: 1250px; margin: 0 auto; padding: 30px 20px 60px; }
.moa-with-sidebar { display: flex; gap: 30px; align-items: flex-start; }
.moa-sidebar { width: 220px; flex-shrink: 0; }
.moa-sidebar .sidebar-title {
    background: var(--moa-table-head); color: #fff; font-size: 18px; font-weight: 700;
    padding: 16px 18px; margin: 0;
}
.moa-sidebar ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--moa-border); border-top: none; }
.moa-sidebar li a, .moa-sidebar li span.disabled {
    display: block; padding: 12px 18px; font-size: 14px; color: var(--moa-text); text-decoration: none;
    border-bottom: 1px solid var(--moa-border-light);
}
.moa-sidebar li span.disabled { color: #bbb; }
.moa-sidebar li a:hover { background: #f7f7f7; }
.moa-sidebar li.active a { background: var(--moa-green); color: #fff; font-weight: 700; }
.moa-sidebar .cs-links { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.moa-sidebar .cs-links img { width: 68px; height: 68px; }
.moa-content { flex: 1; min-width: 0; }

.moa-page-title { font-size: 26px; font-weight: 800; margin-bottom: 6px; color: #222; }
.moa-breadcrumb { color: var(--moa-text-light); font-size: 13px; margin-bottom: 20px; }

/* ===================== 테이블/페이지네이션 ===================== */
.moa-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.moa-table thead th {
    background: var(--moa-table-head); color: #fff; font-weight: 600; font-size: 14px;
    padding: 12px 10px; text-align: center; border: none;
}
.moa-table tbody td { padding: 12px 10px; text-align: center; border-bottom: 1px solid var(--moa-border-light); font-size: 13px; vertical-align: middle; }
.moa-table tbody tr:hover { background: #f8f8f8; }
.moa-table a { color: var(--moa-text); text-decoration: none; }
.moa-table a:hover { color: var(--moa-green-dark); text-decoration: underline; }

.moa-pagination { display: flex; justify-content: center; gap: 4px; margin: 20px 0; }
.moa-pagination a, .moa-pagination span {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    border-radius: 50%; font-size: 13px; color: var(--moa-text-muted); text-decoration: none;
}
.moa-pagination .current { background: var(--moa-red); color: #fff; font-weight: 700; }

/* ===================== 폼 ===================== */
.moa-search-bar { display: flex; gap: 6px; margin-bottom: 20px; }
.moa-search-bar select, .moa-search-bar input[type="text"] { border: 1px solid var(--moa-border); padding: 8px 10px; font-size: 13px; }
.moa-search-bar button { background: var(--moa-table-head); color: #fff; border: none; padding: 0 20px; font-size: 13px; }

.card { border-color: var(--moa-border); }
.form-label { font-weight: 600; font-size: 13px; color: var(--moa-text); }

/* ===================== 알림 배너 ===================== */
.alert-success { background-color: #f1f8ea; border-color: var(--moa-green); color: var(--moa-green-darker); }

/* ===================== 푸터 ===================== */
#moa-footer { background: #f7f7f7; border-top: 1px solid var(--moa-border); margin-top: 40px; }
#moa-footer .wrapper { max-width: 1250px; margin: 0 auto; padding: 30px 20px; }
#moa-footer .quicklaunch { list-style: none; display: flex; gap: 16px; padding: 0; margin: 0 0 16px; flex-wrap: wrap; }
#moa-footer .quicklaunch a { color: var(--moa-text); font-size: 13px; text-decoration: none; }
#moa-footer .quicklaunch a:hover { text-decoration: underline; }
#moa-footer address { font-style: normal; color: var(--moa-text-muted); font-size: 12px; line-height: 1.8; margin-bottom: 6px; }
#moa-footer .copyrights { color: #aaa; font-size: 11px; margin: 0; }
#moa-footer img.cooperation { max-width: 100%; height: auto; margin-bottom: 16px; }
#moa-footer img.certification { width: 65px; height: 65px; margin-bottom: 10px; }

/* ===================== 홈 화면 ===================== */
.moa-hero { position: relative; overflow: hidden; border-radius: 8px; margin-bottom: 30px; }
.moa-hero .carousel-item { position: relative; height: 360px; display: flex; align-items: center; justify-content: center; transition: background-color .4s; }
.moa-hero .slide-subject { max-width: 80%; }
.moa-hero .slide-obj { position: absolute; right: 5%; bottom: 0; max-height: 90%; }
.moa-hero .carousel-indicators [data-bs-target] { background-color: rgba(255,255,255,.6); }
.moa-hero .carousel-indicators .active { background-color: #fff; }

.moa-quicklinks { display: flex; justify-content: center; gap: 40px; margin: 30px 0; }
.moa-quicklinks a { text-align: center; text-decoration: none; color: var(--moa-text); font-size: 13px; }
.moa-quicklinks .icon { display: block; width: 60px; height: 90px; margin: 0 auto 4px; background: url('/img/index7th/ico_links.png') no-repeat left top; }
.moa-quicklinks .icon.as { background-position: 0 0; }
.moa-quicklinks .icon.counsel { background-position: -60px 0; }
.moa-quicklinks .icon.faq { background-position: -120px 0; }
.moa-quicklinks .icon.download { background-position: -180px 0; }

.moa-service-banners { display: flex; gap: 20px; margin-bottom: 30px; }
.moa-service-banners a { flex: 1; }
.moa-service-banners img { width: 100%; border-radius: 8px; border: 1px solid var(--moa-border); }

.moa-customized { display: flex; gap: 30px; justify-content: center; margin-bottom: 30px; }
.moa-customized a { text-align: center; text-decoration: none; color: var(--moa-text); font-size: 13px; }
.moa-customized .icon { display: block; width: 70px; height: 70px; margin: 0 auto 6px; background-size: contain; background-repeat: no-repeat; }
.moa-customized .icon.sms { background-image: url('/img/index7th/ico_customized_sms.png'); }
.moa-customized .icon.rcs { background-image: url('/img/index7th/ico_customized_rcs.png'); }
.moa-customized .icon.kakao { background-image: url('/img/index7th/ico_customized_kakao.png'); }

.moa-charge img { max-width: 100%; margin-bottom: 30px; }
.moa-qr { text-align: center; margin-bottom: 30px; }
.moa-qr img { width: 140px; }

/* ===================== FAQ 아이콘 ===================== */
.moa-faq-icons { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.moa-faq-icons > div { flex: 1; min-width: 100px; text-align: center; padding: 14px 6px; border: 1px solid var(--moa-border); border-radius: 6px; }
.moa-faq-icons img { width: 40px; height: 40px; margin-bottom: 6px; }
.moa-faq-icons span { display: block; font-size: 12px; color: var(--moa-text-muted); }

.badge-new { height: 14px; margin-left: 4px; vertical-align: middle; }

/* ===================== 투표 이용안내 ===================== */
.vote-hero {
    background: linear-gradient(135deg, var(--moa-green-darker), var(--moa-green-dark));
    color: #fff; border-radius: 8px; padding: 40px 30px; text-align: center; margin-bottom: 30px;
}
.vote-hero .title { font-size: 28px; font-weight: 800; line-height: 1.3; margin-bottom: 12px; }
.vote-hero .title .emph { color: #ffe27a; }
.vote-hero .sub-desc { font-size: 14px; opacity: .9; margin-bottom: 24px; }
.vote-shortcuts { list-style: none; display: flex; justify-content: center; gap: 40px; margin: 0; padding: 0; }
.vote-shortcuts li { display: flex; flex-direction: column; align-items: center; }
.vote-shortcuts img { width: 44px; height: 44px; margin-bottom: 8px; }
.vote-shortcuts a { color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.vote-shortcuts a:hover { text-decoration: underline; }

.vote-merits { margin-top: 40px; }
.vote-merits img { width: 64px; height: 64px; }

/* ===================== 회원가입 유형 뱃지 ===================== */
.join-type-badges { display: flex; justify-content: center; gap: 24px; }
.join-type-badges span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--moa-text-muted); }
.join-type-badges img { width: 40px; height: 40px; }

/* ===================== 반응형 ===================== */
@media (max-width: 991px) {
    #moa-topbar .wrapper, #moa-header .wrapper { flex-wrap: wrap; }
    #moa-others { position: static; transform: none; margin-top: 10px; }
    #moa-gnb .d1 { flex-wrap: wrap; }
    #moa-gnb .d1 > li { max-width: none; flex: 1 1 33%; }
    .moa-with-sidebar { flex-direction: column; }
    .moa-sidebar { width: 100%; }
}