/* ==========================================================
   매직투데이 리뉴얼 (2026-10)
   공통 상단·하단 + 메인 페이지
   모든 선택자는 mt- 접두어 (기존 화면과 충돌 방지)
   ========================================================== */
:root {
    --mt-bg: #ffffff;
    --mt-surface: #f4f6f8;
    --mt-ink: #191f28;
    --mt-sub: #4e5968;
    --mt-muted: #8b95a1;
    --mt-line: #e5e8eb;
    --mt-primary: #3182f6;
    --mt-primary-soft: #e8f3ff;
    --mt-deep: #0f2a55;
    --mt-red: #f04452;
    --mt-ok: #12b886;
    --mt-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
    --mt-shadow: 0 24px 60px -28px rgba(20, 40, 80, .35), 0 2px 6px rgba(20, 40, 80, .06);
}

body { margin: 0; background: var(--mt-bg); }

.mt-gnb, .mt-gnb *, .mt-home, .mt-home *, .mt-foot, .mt-foot * { box-sizing: border-box; }
.mt-gnb, .mt-home, .mt-foot {
    font-family: var(--mt-font);
    color: var(--mt-ink);
    text-align: left;
    letter-spacing: -.01em;
    word-break: keep-all;
    -webkit-font-smoothing: antialiased;
}
.mt-gnb a, .mt-home a, .mt-foot a { color: inherit; text-decoration: none; }
.mt-home h1, .mt-home h2, .mt-home h3, .mt-home p, .mt-home ul { margin: 0; }
.mt-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---------- 상단 ---------- */
.mt-gnb {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--mt-line);
}
.mt-gnb .mt-wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.mt-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 20px; letter-spacing: -.03em; color: var(--mt-ink) !important; }
.mt-logo span { width: 28px; height: 28px; border-radius: 8px; background: var(--mt-primary); color: #fff; display: grid; place-items: center; font-size: 15px; }
.mt-menu { display: flex; gap: 2px; }
.mt-menu a { padding: 8px 12px; border-radius: 8px; color: var(--mt-sub) !important; font-weight: 500; font-size: 16px; }
.mt-menu a:hover { background: var(--mt-surface); color: var(--mt-ink) !important; }
.mt-menu a.on { color: var(--mt-primary) !important; font-weight: 700; }
.mt-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.mt-pill { font-size: 15px; font-weight: 600; padding: 8px 14px; border-radius: 10px; white-space: nowrap; }
.mt-pill-soft { background: var(--mt-primary-soft); color: var(--mt-primary) !important; }
.mt-pill-solid { background: var(--mt-primary); color: #fff !important; }
.mt-pill-text { color: var(--mt-muted) !important; }

/* 로그인 중 안내 문구(그누보드 기본) 숨김: 상단에 이미 표시 */
#hd_login_msg { display: none; }

/* ---------- 기존 하위 페이지(소개/FAQ/게시판) 여백 ---------- */
#magic-today.mt-sub { margin-top: 28px !important; margin-bottom: 48px !important; }

/* ---------- 메인 ---------- */
#magic-today.mt-home { width: auto !important; font-size: 17px; line-height: 1.65; }

.mt-hero { background: radial-gradient(1200px 500px at 85% -10%, var(--mt-primary-soft), transparent 60%), var(--mt-bg); padding: 64px 0 72px; }
.mt-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: center; }
.mt-eyebrow { display: inline-block; font-size: 14px; font-weight: 700; color: var(--mt-primary); background: var(--mt-primary-soft); padding: 6px 12px; border-radius: 999px; margin-bottom: 20px; }
.mt-hero h1 { font-size: 56px; font-weight: 800; line-height: 1.22; letter-spacing: -.035em; margin-bottom: 18px; }
.mt-hero h1 em { font-style: normal; color: var(--mt-primary); }
.mt-lead { font-size: 19px; color: var(--mt-sub); max-width: 28em; margin-bottom: 28px !important; }
.mt-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.mt-btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 26px; border: 0; border-radius: 14px; font-family: var(--mt-font); font-size: 17px; font-weight: 700; cursor: pointer; }
.mt-btn:hover { filter: brightness(.96); }
.mt-btn-primary { background: var(--mt-primary); color: #fff !important; }
.mt-btn-ghost { background: var(--mt-surface); color: var(--mt-ink) !important; }
.mt-btn-block { width: 100%; }
.mt-points { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin-top: 28px !important; color: var(--mt-sub); font-size: 15px; font-weight: 500; }
.mt-points li { display: flex; align-items: center; gap: 6px; }
.mt-points svg { color: var(--mt-ok); }

/* 로그인 카드 */
.mt-login { background: #fff; border: 1px solid var(--mt-line); border-radius: 24px; padding: 28px; box-shadow: var(--mt-shadow); }
.mt-login h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.mt-login-desc { color: var(--mt-muted); font-size: 15px; margin-top: 2px !important; }
.mt-login form { display: grid; gap: 10px; margin: 20px 0 0; }
.mt-field { position: relative; }
.mt-field label { position: absolute; left: 16px; top: 8px; font-size: 12px; color: var(--mt-muted); font-weight: 500; }
.mt-field input { width: 100%; height: 60px; padding: 22px 16px 6px; border-radius: 12px; border: 1px solid var(--mt-line); background: var(--mt-surface); color: var(--mt-ink); font-family: var(--mt-font); font-size: 17px; }
.mt-field input:focus { outline: none; border-color: var(--mt-primary); background: #fff; }
.mt-opts { display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: var(--mt-sub); margin: 2px 0 4px; }
.mt-opts label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.mt-opts input { width: 18px; height: 18px; margin: 0; accent-color: var(--mt-primary); }
.mt-login-alt { margin-top: 16px !important; padding-top: 16px; border-top: 1px solid var(--mt-line); text-align: center; font-size: 15px; color: var(--mt-muted); }
.mt-login-alt a { color: var(--mt-primary) !important; font-weight: 600; margin-left: 6px; }
.mt-login-on .mt-btn { margin-top: 20px; }
.mt-login-meta { list-style: none; padding: 16px 0 0; margin-top: 16px !important; border-top: 1px solid var(--mt-line); display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; color: var(--mt-sub); }
.mt-login-meta b { color: var(--mt-primary); }

/* 섹션 공통 */
.mt-sec { padding: 88px 0; }
.mt-sec-tight { padding-top: 0; }
.mt-gray { background: var(--mt-surface); }
.mt-sec-head { max-width: 640px; margin-bottom: 40px; }
.mt-k { display: block; font-size: 15px; font-weight: 700; color: var(--mt-primary); margin-bottom: 8px; }
.mt-sec-head h2 { font-size: 36px; font-weight: 800; line-height: 1.28; letter-spacing: -.035em; }

/* 기능 */
.mt-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mt-feat { background: #fff; border-radius: 20px; padding: 26px; display: grid; gap: 8px; align-content: start; }
.mt-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--mt-primary-soft); color: var(--mt-primary); display: grid; place-items: center; margin-bottom: 6px; }
.mt-feat h3 { font-size: 19px; font-weight: 700; }
.mt-feat p { color: var(--mt-sub); font-size: 16px; }
.mt-more-link { margin-top: 24px !important; font-size: 16px; font-weight: 600; }
.mt-more-link a { color: var(--mt-primary) !important; }

/* 커뮤니티 */
.mt-comm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mt-box { background: var(--mt-surface); border-radius: 20px; padding: 24px 26px; min-width: 0; }
.mt-box-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; min-height: 40px; }
.mt-box-head h3 { font-size: 19px; font-weight: 700; }
.mt-more { font-size: 14px; color: var(--mt-muted) !important; }
.mt-list { list-style: none; padding: 0; }
.mt-list a { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--mt-line); font-size: 16px; }
.mt-list li:last-child a { border-bottom: 0; }
.mt-list a:hover .mt-t { color: var(--mt-primary); }
.mt-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-badge, .mt-lock { flex: none; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--mt-primary-soft); color: var(--mt-primary); }
.mt-lock { background: #fff; color: var(--mt-muted); }
.mt-cmt { flex: none; font-size: 13px; font-weight: 700; color: var(--mt-primary); }
.mt-date { flex: none; font-size: 14px; color: var(--mt-muted); font-variant-numeric: tabular-nums; }
.mt-empty { padding: 20px 0; color: var(--mt-muted); }
.mt-seg { display: flex; gap: 4px; background: #fff; border-radius: 12px; padding: 4px; max-width: 100%; overflow-x: auto; }
.mt-seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 9px; color: var(--mt-sub); font-family: var(--mt-font); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.mt-seg button[aria-selected="true"] { background: var(--mt-primary-soft); color: var(--mt-primary); }
.mt-board[hidden] { display: none !important; }

/* 무료 안내 */
.mt-free { background: var(--mt-deep); color: #fff; border-radius: 28px; padding: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: center; }
.mt-free h2 { font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
.mt-free p { color: rgba(255, 255, 255, .78); margin-top: 10px !important; }
.mt-free-link { display: inline-block; margin-top: 18px; font-weight: 600; color: #9cc6ff !important; }
.mt-free ul { list-style: none; padding: 0; display: grid; gap: 12px; }
.mt-free li { background: rgba(255, 255, 255, .08); border-radius: 14px; padding: 16px 18px; display: grid; gap: 2px; }
.mt-free li b { font-size: 17px; }
.mt-free li span { font-size: 15px; color: rgba(255, 255, 255, .72); }

/* ---------- 하단 ---------- */
.mt-foot { border-top: 1px solid var(--mt-line); background: #fff; padding: 32px 0 40px; font-size: 14px; color: var(--mt-muted); }
.mt-foot .mt-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: start; }
.mt-foot p { margin: 8px 0 0; }
.mt-logo-sm { font-size: 17px; }
.mt-logo-sm span { width: 24px; height: 24px; font-size: 13px; border-radius: 7px; }
.mt-foot-links { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 4px; }
.mt-foot-links a:hover, .mt-foot-family a:hover { color: var(--mt-ink); }
.mt-foot-family { grid-column: 1 / -1; display: flex; gap: 6px 16px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--mt-line); }
.mt-foot-family span { color: var(--mt-sub); font-weight: 600; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 960px) {
    .mt-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .mt-login { max-width: 480px; }
    .mt-hero h1 { font-size: 44px; }
    .mt-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mt-comm, .mt-free { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .mt-menu, .mt-pill-soft { display: none; }
    .mt-hero { padding: 40px 0 48px; }
    .mt-hero h1 { font-size: 36px; }
    .mt-sec { padding: 60px 0; }
    .mt-sec-head h2 { font-size: 28px; }
    .mt-grid3 { grid-template-columns: minmax(0, 1fr); }
    .mt-free { padding: 32px 24px; border-radius: 20px; }
    .mt-btn { flex: 1; }
    .mt-login { padding: 22px 20px; }
    .mt-foot .mt-wrap { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 2026-10 메인 단순화: 로그인 + 공지사항 + 질문과답 ---------- */
.mt-main { padding: 48px 0 72px; background: radial-gradient(1000px 420px at 50% -10%, var(--mt-primary-soft), transparent 70%), var(--mt-bg); }
.mt-main-login { max-width: 440px; margin: 0 auto 48px; }
.mt-main .mt-box { background: #fff; border: 1px solid var(--mt-line); }
@media (max-width: 600px) {
    .mt-main { padding: 24px 0 48px; }
    .mt-main-login { margin-bottom: 28px; }
    .mt-menu { display: flex; gap: 0; }
    .mt-menu a { padding: 8px 8px; font-size: 15px; }
    .mt-gnb .mt-wrap { gap: 10px; padding: 0 12px; }
    .mt-logo { font-size: 18px; }
    .mt-logo span { display: none; }
    .mt-box { padding: 18px 18px; }
    .mt-field input { font-size: 16px; }
}
@media (max-width: 380px) {
    .mt-logo { font-size: 16px; }
    .mt-menu a { padding: 8px 6px; font-size: 14px; }
}
@media (max-width: 600px) {
    .mt-menu a { white-space: nowrap; }
    .mt-pill-text { display: none; }      /* 로그아웃은 로그인 카드에 있음 */
    .mt-right .mt-pill { padding: 7px 10px; font-size: 14px; }
}

/* ---------- 2026-10 다크 모드 (가계부 [스킨설정 > 화면 모드]와 같은 설정을 따름) ---------- */
:root[data-theme="dark"] {
    --mt-bg: #17191d;
    --mt-surface: #23272d;
    --mt-ink: #eef0f3;
    --mt-sub: #b0b8c1;
    --mt-muted: #7e8794;
    --mt-line: #2c3037;
    --mt-primary: #4b96ff;
    --mt-primary-soft: #1b2a40;
    --mt-deep: #13233d;
    --mt-red: #ff6b76;
    --mt-ok: #38d9a9;
    --mt-shadow: 0 24px 60px -28px rgba(0, 0, 0, .7);
    color-scheme: dark;
}
:root[data-theme="dark"] body { background: var(--mt-bg) !important; color: #d5dae0; }
:root[data-theme="dark"] .mt-gnb { background: rgba(16, 18, 21, .92); }
:root[data-theme="dark"] .mt-login,
:root[data-theme="dark"] .mt-main .mt-box,
:root[data-theme="dark"] .mt-feat { background: #1e2126; }
:root[data-theme="dark"] .mt-field input:focus { background: var(--mt-bg); }
:root[data-theme="dark"] .mt-lock,
:root[data-theme="dark"] .mt-seg { background: var(--mt-bg); }
:root[data-theme="dark"] .mt-foot { background: #101215; }
:root[data-theme="dark"] .mt-field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--mt-surface) inset; -webkit-text-fill-color: var(--mt-ink); }
/* 소개/게시판 등 하위 페이지 기본 글자색 */
:root[data-theme="dark"] #magic-today { color: #d5dae0; }
:root[data-theme="dark"] #magic-today.mt-home { color: var(--mt-ink); }