/* ─── 기본 ──────────────────────────────────────────
   색·타이포 토큰은 /css/tokens.css 가 소유한다. 테마는 그중
   바꾸고 싶은 변수만 여기서 다시 선언하면 이 값이 이긴다.       */
body {
    font-family: var(--font-sans);
    color: var(--text-body);
}

/* ─── 네비게이션 ────────────────────────────────── */
.navbar {
    border-bottom: 1px solid var(--border-hairline);
}
.navbar-brand {
    font-size: 1.3rem;
    font-weight: 700;
}
.nav-link {
    font-weight: 500;
    font-size: var(--fs-nav);
}
/* 현재 위치 표시 — aria-current 와 짝이 되는 시각 신호 */
.navbar-nav .nav-link.active {
    font-weight: 700;
    color: var(--primary);
    box-shadow: inset 0 -2px 0 var(--primary);
}
/* 데스크톱: 마우스 오버·키보드 포커스로 하위 메뉴 표시 (간격 없애 오버 끊김 방지) */
@media (min-width: 992px) and (hover: hover) {
    .navbar .dropdown-menu { margin-top: 0; }
    .navbar .dropdown:hover > .dropdown-menu,
    .navbar .dropdown:focus-within > .dropdown-menu { display: block; }
}

/* ─── 히어로 ─────────────────────────────────────── */
.hero-section {
    min-height: 70vh;
    display: flex;
    align-items: center;
}

/* ─── 페이지 콘텐츠 ──────────────────────────────── */
.page-content img {
    max-width: 100%;
    height: auto;
}
.page-content h2, .page-content h3 {
    margin-top: 1.5rem;
    margin-bottom: .75rem;
}

/* ─── 게시글 본문 ────────────────────────────────── */
.post-content {
    min-height: 200px;
    font-size: 1rem;
    line-height: 1.5;
    overflow-wrap: break-word;
}
.post-content p,
.post-content li > p {
    margin-bottom: .75rem;
}
.post-content li > p:last-child {
    margin-bottom: 0;
}
.post-content img {
    max-width: 100%;
    height: auto;
}
.board-post-content img {
    display: block;
    margin-block: 1rem;
}

/* ─── 게시판 ─────────────────────────────────────── */
.board-table th {
    background: #f8f9fa;
    font-weight: 600;
}

/* ─── 카드 공통 ──────────────────────────────────── */
.card {
    --bs-card-border-radius: .75rem;
    --bs-card-inner-border-radius: calc(.75rem - 1px);
}

/* ─── 푸터 ───────────────────────────────────────── */
footer a {
    color: #adb5bd; /* 다크 푸터 배경 대비 7.4:1 */
    text-decoration: none;
}
footer a:hover {
    color: #fff;
}

/* ─── 유틸 ───────────────────────────────────────── */
.object-fit-cover {
    object-fit: cover;
}

/* ─── 배너 슬롯 ──────────────────────────────────── */
.sp-banner-slot {
    width: 320px;
}
.sp-banner-img {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
    margin-bottom: 8px;
}

/* ─── 메인 배너 ──────────────────────────────────── */
.main-banner-wrap {
    max-width: 1000px;
    margin: 0 auto;
}
.main-banner-wrap img {
    display: block;
    width: 100%;
    max-width: 1000px;
    height: auto;
    margin-bottom: 8px;
}

/* ─── 팝업 레이어 ───────────────────────────────── */
.site-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    background: var(--surface-raised);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.22);
    width: max-content;
    max-width: min(380px, calc(100vw - 40px));
}
/* 관리자가 지정한 left/top 은 데스크톱 화면을 기준으로 잡은 절대 좌표라
   좁은 화면에서는 화면 밖으로 나갈 수 있다. 그 폭에서는 좌표를 무시하고
   가운데로 고정한다 — !important 없이는 인라인 style="left:...;top:..."
   을 이길 수 없다. */
@media (max-width: 480px) {
    .site-popup {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
    }
}
.site-popup-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0 4px;
}
.site-popup-close:hover { color: var(--text-strong); }
.site-popup-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px 8px 0 0;
}
.site-popup-body {
    padding: 1rem 1rem .5rem;
    font-size: .9rem;
    line-height: 1.6;
}
.site-popup-body:first-child { padding-top: 2rem; }
.site-popup-footer {
    padding: .5rem 1rem .75rem;
    border-top: 1px solid var(--border-hairline);
}
.site-popup-today {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

/* ─── 홈 기본 화면(aiVelo 소개) ─────────────────────────────────
   views/pages/_home_intro.php. 색은 전부 토큰이라 테마가 덮어쓴다. */
.intro-hero {
    background: var(--dark);
    color: var(--on-dark-strong);
    padding: 4.5rem 0 4rem;
}
.intro-eyebrow {
    color: var(--on-dark-body);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .06em;
    margin-bottom: .75rem;
}
.intro-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.25rem;
}
.intro-lead {
    color: var(--on-dark-body);
    font-size: 1.0625rem;
    max-width: 40rem;
    margin-bottom: 1.75rem;
    word-break: keep-all;
}
.intro-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.intro-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
}
.intro-badges li {
    border: 1px solid var(--on-dark-raised);
    border-radius: 50rem;
    color: var(--on-dark-body);
    font-size: .8125rem;
    padding: .2rem .8rem;
}
.intro-section { padding: 4rem 0; }
.intro-section-alt { background: var(--surface-body); }
.intro-heading {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
    word-break: keep-all;
}
@media (min-width: 992px) { .intro-heading.text-lg-start { text-align: left; } }
.intro-card {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: .75rem;
    padding: 1.5rem;
}
.intro-card-flat { padding: 1.25rem; }
.intro-card-icon { display: block; color: var(--primary); font-size: 1.75rem; margin-bottom: .75rem; }
.intro-card-title { font-size: 1.125rem; font-weight: 700; margin-bottom: .5rem; }
.intro-card-desc { color: var(--text-muted); font-size: .9375rem; margin-bottom: 0; word-break: keep-all; }
.intro-steps {
    counter-reset: step;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}
.intro-steps li {
    border-top: 3px solid var(--primary);
    counter-increment: step;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding-top: .85rem;
}
.intro-step-title::before { content: counter(step) ". "; color: var(--primary); }
.intro-step-title { font-size: 1.125rem; }
.intro-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.intro-checks li { padding-left: 1.75rem; position: relative; }
.intro-checks li::before {
    content: "\F26E"; /* bi-check-lg */
    font-family: "bootstrap-icons";
    color: var(--primary);
    left: 0;
    position: absolute;
}
.intro-cta { background: var(--dark); color: var(--on-dark-strong); padding: 3.5rem 0; text-align: center; }
.intro-cta-title { font-size: 1.5rem; font-weight: 700; margin-bottom: .5rem; }
.intro-cta-desc { color: var(--on-dark-body); margin-bottom: 1.5rem; }

/* 홈 FAQ */
.intro-faq { max-width: 52rem; margin: 0 auto; }
.intro-faq dt { margin-top: 1.25rem; }
.intro-faq dd { margin: .25rem 0 0; }