/* ══════════ CSS VARIABLES & RESET ══════════ */
:root {
    --bg: #0a0c10;
    --bg2: #0f1117;
    --bg3: #141720;
    --border: rgba(255, 255, 255, 0.08);
    --accent: #5b8dee;
    --accent2: #818cf8;
    --accent3: #10b981;
    --text: #e8f1fc;
    --muted: #6b87a8;
    --card: rgba(255, 255, 255, 0.04);
    --grid-line: rgba(91, 141, 238, 0.07);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', -apple-system, sans-serif;
    overflow-x: hidden;
}

/* ── PAGE SYSTEM ── */
.page { display: none; min-height: 100vh; padding-top: 64px; }
.page.active { display: block; }

/* ── BREADCRUMB ── */
.breadcrumb {
    padding: 1rem 6%;
    display: none;
    font-size: 0.85rem; color: var(--muted);
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
}
.breadcrumb a { color: var(--muted); text-decoration: none; cursor: pointer; font-size: 0.88rem; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb .sep { color: var(--border); }
.breadcrumb .current { color: var(--text); }

/* ── PAGE HEADER ── */
.page-header {
    padding: 0.6rem 6% 0.5rem;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    position: relative; overflow: hidden;
    display: flex;
    flex-direction: column;
}
.page-header-inner {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: nowrap;
}
.page-header-orb {
    position: absolute; width: 400px; height: 400px; border-radius: 50%;
    background: radial-gradient(circle, rgba(91,141,238,0.07), transparent 65%);
    top: -150px; right: -100px; pointer-events: none;
}
.page-header h1 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 900; letter-spacing: -1px; margin-bottom: 0;
    white-space: nowrap;
}
.page-header p { color: var(--muted); font-size: 1.15rem; line-height: 1; white-space: nowrap; margin: 0; }

/* ── SUB TABS ── */
.sub-tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg2); padding: 0 6%;
}
.sub-tab {
    padding: 0.75rem 1.3rem; font-size: 1.05rem; font-weight: 600;
    color: var(--muted); cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all .2s; text-decoration: none;
}
.sub-tab:hover { color: var(--text); }
.sub-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── SUB PANELS ── */
.sub-panel { display: none; padding: 3rem 6%; }
.sub-panel.active { display: block; }
.sub-panel-inner { max-width: 1200px; margin: 0 auto; }

/* ── 업데이트 게시판 카테고리 필터 (boardKey=6) ── */
.art-cat-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .18s;
    cursor: pointer;
}
.art-cat-btn:hover {
    border-color: rgba(91,141,238,0.5);
    color: var(--text);
    background: rgba(91,141,238,0.05);
}
.art-cat-btn.on {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(91,141,238,0.08);
    box-shadow: 0 0 12px rgba(91,141,238,0.18);
}
.art-cat-btn.cat-wizflow { color: #548CF1; border-color: rgba(84,140,241,0.45); }
.art-cat-btn.cat-wizflow:hover, .art-cat-btn.cat-wizflow.on { background: rgba(84,140,241,0.08); border-color: #548CF1; }
.art-cat-btn.cat-wizbase { color: #34A96D; border-color: rgba(52,169,109,0.45); }
.art-cat-btn.cat-wizbase:hover, .art-cat-btn.cat-wizbase.on { background: rgba(52,169,109,0.08); border-color: #34A96D; }
.art-cat-btn.cat-wizlog { color: #FF5847; border-color: rgba(255,88,71,0.45); }
.art-cat-btn.cat-wizlog:hover, .art-cat-btn.cat-wizlog.on { background: rgba(255,88,71,0.08); border-color: #FF5847; }
.art-cat-btn.cat-lems { color: #8A59A9; border-color: rgba(138,89,169,0.45); }
.art-cat-btn.cat-lems:hover, .art-cat-btn.cat-lems.on { background: rgba(138,89,169,0.08); border-color: #8A59A9; }

/* ── FORM CONTROLS (검색/입력) ── */
input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"],
select, textarea {
    background: #0f1117;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem 0.8rem;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.15s;
}
input[type="text"]::placeholder, input[type="search"]::placeholder, textarea::placeholder {
    color: var(--muted);
    opacity: 0.7;
}
input[type="text"]:focus, input[type="search"]:focus, select:focus, textarea:focus {
    border-color: var(--accent);
}
/* select 드롭다운 옵션 (브라우저별 스타일 적용 제한적이지만 가능한 범위) */
select option {
    background-color: #0f1117;
    color: var(--text);
}
select option:checked,
select option:hover,
select option:focus {
    background-color: var(--accent);
    color: #fff;
}

/* ── SHARED COMPONENTS ── */
.sec-label {
    display: none !important;
}
.sec-title {
    font-size: clamp(1.6rem, 2.5vw, 2.3rem);
    font-weight: 900; letter-spacing: 2px; margin-bottom: 0.8rem;
}
.sec-title .hl {
    background: linear-gradient(135deg, #5b8dee, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sec-sub { color: var(--muted); font-size: 1.15rem; line-height: 1.7; }

/* ── SHIMMER ANIMATION ── */
/* 전체 주기 5s: shimmer 0.6s × 4개 + 간격 0.5s × 3 + 대기 1s ≈ 5s */
/* btn1: 0~12%에서 통과 / btn2: 14~26% / btn3: 28~40% / btn4: 42~54% / 54~100% 대기 */
@keyframes btn-shimmer-1 {
    0%        { left: -100%; opacity: 1; }
    12%       { left: 200%;  opacity: 1; }
    12.01%    { left: -100%; opacity: 0; }
    100%      { left: -100%; opacity: 0; }
}
@keyframes btn-shimmer-2 {
    0%        { left: -100%; opacity: 0; }
    14%       { left: -100%; opacity: 0; }
    14.01%    { left: -100%; opacity: 1; }
    26%       { left: 200%;  opacity: 1; }
    26.01%    { left: -100%; opacity: 0; }
    100%      { left: -100%; opacity: 0; }
}
@keyframes btn-shimmer-3 {
    0%        { left: -100%; opacity: 0; }
    28%       { left: -100%; opacity: 0; }
    28.01%    { left: -100%; opacity: 1; }
    40%       { left: 200%;  opacity: 1; }
    40.01%    { left: -100%; opacity: 0; }
    100%      { left: -100%; opacity: 0; }
}
@keyframes btn-shimmer-4 {
    0%        { left: -100%; opacity: 0; }
    42%       { left: -100%; opacity: 0; }
    42.01%    { left: -100%; opacity: 1; }
    54%       { left: 200%;  opacity: 1; }
    54.01%    { left: -100%; opacity: 0; }
    100%      { left: -100%; opacity: 0; }
}

.btn-p {
    display: inline-flex; align-items: center; gap: 0.45rem;
    background: linear-gradient(135deg, #5b8dee, #818cf8);
    color: #fff; padding: 0.8rem 1.8rem;
    border: none; border-radius: 8px;
    font-size: 0.95rem; font-weight: 700; cursor: pointer;
    transition: all .2s;
    box-shadow: 0 0 24px rgba(91,141,238,0.25);
    position: relative; overflow: hidden;
}
.btn-p:hover { box-shadow: 0 0 36px rgba(91,141,238,0.45); transform: translateY(-1px); }
.btn-p::after {
    content: ''; position: absolute;
    top: 0; left: -100%; width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    animation: btn-shimmer-1 5s linear infinite;
    pointer-events: none;
}
.btn-p:hover svg { transform: rotate(-12deg) scale(1.15); }
.btn-p svg { transition: transform .25s ease; }

.btn-s {
    background: transparent; color: var(--text);
    padding: 0.8rem 1.8rem;
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all .2s;
}
.btn-s:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.04); }

.btn-talktalk {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: #03C75A; color: #fff;
    padding: 0.8rem 1.8rem;
    border: none; border-radius: 8px;
    font-size: 0.95rem; font-weight: 700; cursor: pointer;
    text-decoration: none;
    transition: all .2s;
    box-shadow: 0 0 20px rgba(3,199,90,0.3);
    position: relative; overflow: hidden;
}
.btn-talktalk:hover { background: #02b050; box-shadow: 0 0 32px rgba(3,199,90,0.5); transform: translateY(-1px); }
.btn-talktalk::after {
    content: ''; position: absolute;
    top: 0; left: -100%; width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    animation: btn-shimmer-2 5s linear infinite;
    pointer-events: none;
}
.btn-talktalk:hover svg { transform: translateY(-3px) scale(1.15); }
.btn-talktalk svg { transition: transform .25s ease; }

.btn-eln {
    display: inline-flex; align-items: center; gap: 0.45rem;
    background: transparent; color: #a5b4fc;
    padding: 0.8rem 1.8rem;
    border: none; border-radius: 8px;
    font-size: clamp(0.65rem, 1.1vw, 0.95rem); font-weight: 700; cursor: pointer;
    transition: all .2s;
    position: relative;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(99,102,241,0.4);
    overflow: hidden;
}
.btn-eln::before {
    content: '';
    position: absolute; inset: -1px;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(99,102,241,0.7), rgba(168,85,247,0.5));
    z-index: -1;
    opacity: 0.6;
    transition: opacity .2s;
}
.btn-eln::after {
    content: ''; position: absolute;
    top: 0; left: -100%; width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    animation: btn-shimmer-3 5s linear infinite;
    pointer-events: none;
    z-index: 1;
}
.btn-eln:hover::before { opacity: 1; }
.btn-eln:hover { background: rgba(99,102,241,0.1); transform: translateY(-1px); box-shadow: 0 0 24px rgba(99,102,241,0.25); }
.btn-eln:hover svg { transform: rotate(-8deg) scale(1.15); }
.btn-eln-wrap:hover .badge-free { transform: rotate(-12deg); }
.badge-free { transition: transform .25s ease; display: inline-block; }
.btn-eln svg { transition: transform .25s ease; }

.btn-cloud {
    display: inline-flex; align-items: center; gap: 0.45rem;
    background: transparent; color: #7dd3fc;
    padding: 0.8rem 1.8rem;
    border: none; border-radius: 8px;
    font-size: clamp(0.65rem, 1.1vw, 0.95rem); font-weight: 700; cursor: pointer;
    transition: all .2s;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(14,165,233,0.4);
    overflow: hidden;
}
.btn-cloud::before {
    content: '';
    position: absolute; inset: -1px;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(14,165,233,0.7), rgba(56,189,248,0.4));
    z-index: -1;
    opacity: 0.6;
    transition: opacity .2s;
}
.btn-cloud::after {
    content: ''; position: absolute;
    top: 0; left: -100%; width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    animation: btn-shimmer-4 5s linear infinite;
    pointer-events: none;
    z-index: 1;
}
.btn-cloud:hover::before { opacity: 1; }
.btn-cloud:hover { background: rgba(14,165,233,0.1); transform: translateY(-1px); box-shadow: 0 0 24px rgba(14,165,233,0.25); }
.btn-cloud:hover svg { transform: translateY(-3px) scale(1.15); }
.btn-cloud-wrap:hover .badge-new { transform: scale(1.15); }
.badge-new { transition: transform .25s ease; display: inline-block; }
.btn-cloud svg { transition: transform .25s ease; }

.card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; padding: 1.8rem;
    transition: border-color .2s, transform .2s;
}
.card:hover { border-color: rgba(91,141,238,0.3); transform: translateY(-3px); }

.grid-2 { display: grid; grid-template-columns:1fr 1fr; gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns:1fr 1fr 1fr; gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns:1fr 1fr 1fr 1fr; gap: 1rem; }

.badge-chip { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 0.85rem; font-weight: 700; }
.badge-chip.blue  { background: rgba(91,141,238,0.1);  color: #5b8dee; }
.badge-chip.purple{ background: rgba(129,140,248,0.1); color: #818cf8; }
.badge-chip.green { background: rgba(16,185,129,0.1);  color: #34d399; }
.badge-chip.orange{ background: rgba(249,115,22,0.1);  color: #fb923c; }
.badge-chip.pink  { background: rgba(236,72,153,0.1);  color: #f472b6; }
.badge-chip.yellow{ background: rgba(234,179,8,0.1);   color: #facc15; }

/* ── FOOTER ── */
footer {
    background: #131c28; border-top: 1px solid var(--border);
    padding: 2.5rem 6% 1.5rem;
    display: grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap: 2rem;
}
.ft-logo-text { font-size: 1.05rem; font-weight: 800; color: var(--text); margin-bottom: 0.6rem; display: block; }
.ft-logo-text span { color: var(--accent); }
.ft-desc { font-size: 0.9rem; color: var(--muted); line-height: 1.65; }
.ft-col h4 { font-size: 0.9rem; font-weight: 800; color: var(--text); letter-spacing: 0.5px; margin-bottom: 0.9rem; }
.ft-col a { display: block; color: var(--muted); text-decoration: none; font-size: 0.9rem; margin-bottom: 0.45rem; cursor: pointer; transition: color .2s; }
.ft-col a:hover { color: var(--text); }
.ft-bottom {
    background: #131c28; padding: 1rem 6%;
    border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;
}
.ft-copy { font-size: 0.88rem; color: var(--muted); }
.ft-links { display: flex; gap: 1.5rem; }
.ft-links a { font-size: 0.88rem; color: var(--muted); text-decoration: none; cursor: pointer; }

/* ── FOOTER SNS ── */
.ft-sns { display: flex; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }
.ft-sns-btn {
    display: flex; align-items: center; gap: 0.4rem;
    text-decoration: none;
    font-size: 0.88rem; font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    transition: all .2s;
}
.ft-sns-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.ft-sns-btn.sns-tistory svg { width: 22px; height: 22px; }
/* 네이버 블로그 - #03C75A */
.ft-sns-btn.sns-naver { color: #4dd68a; background: rgba(3,199,90,0.07); border: 1px solid rgba(3,199,90,0.2); }
.ft-sns-btn.sns-naver:hover { transform: translateY(-3px); color: #03C75A; background: rgba(3,199,90,0.1); border-color: rgba(3,199,90,0.5); box-shadow: 0 8px 20px rgba(3,199,90,0.3); }
/* 티스토리 - #FF6600 */
.ft-sns-btn.sns-tistory { color: #ff9955; background: rgba(255,102,0,0.07); border: 1px solid rgba(255,102,0,0.2); }
.ft-sns-btn.sns-tistory:hover { transform: translateY(-3px); color: #FF6600; background: rgba(255,102,0,0.1); border-color: rgba(255,102,0,0.5); box-shadow: 0 8px 20px rgba(255,102,0,0.3); }
/* 유튜브 - #FF0000 */
.ft-sns-btn.sns-youtube { color: #ff6666; background: rgba(255,0,0,0.07); border: 1px solid rgba(255,0,0,0.2); }
.ft-sns-btn.sns-youtube:hover { transform: translateY(-3px); color: #ff3333; background: rgba(255,0,0,0.12); border-color: rgba(255,0,0,0.5); box-shadow: 0 8px 20px rgba(255,0,0,0.3); }

/* ── RESPONSIVE ── */
/* ══ 플로팅 문의 버튼 ══ */
.float-btns {
    position: fixed;
    right: 1.5rem;
    bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    z-index: 999;
}
.float-btn {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0.6rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: padding .6s ease, gap .6s ease, transform .4s, box-shadow .4s;
    white-space: nowrap;
    text-decoration: none;
    overflow: hidden;
    width: fit-content;
    align-self: flex-end;
}
.float-btn .float-btn-text {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width .6s ease, margin .6s ease;
}
.float-btn:hover .float-btn-text {
    max-width: 100px;
    margin-left: 6px;
}
.float-btn:hover {
    padding: 0.6rem 1rem 0.6rem 0.7rem;
    gap: 0.2rem;
    transform: translateY(-3px);
}
.float-btn.float-talk {
    background: #03C75A;
    color: #fff;
    box-shadow: 0 4px 20px rgba(3,199,90,0.35);
}
.float-btn.float-talk:hover { box-shadow: 0 6px 28px rgba(3,199,90,0.5); }
.float-btn.float-neural {
    background: rgba(91,141,238,0.15);
    color: #7dd3fc;
    border: 1px solid rgba(91,141,238,0.35);
    box-shadow: 0 4px 20px rgba(91,141,238,0.2);
}
.float-btn.float-neural:hover {
    background: rgba(91,141,238,0.35);
    color: #fff;
    border-color: rgba(91,141,238,0.7);
    box-shadow: 0 6px 28px rgba(91,141,238,0.5);
    transform: translateY(0) !important;
    padding: 0.6rem !important;
    gap: 0 !important;
    width: 2.4rem !important;
    border-radius: 50% !important;
}
.float-btn.float-neural:hover .float-btn-text {
    max-width: 0 !important;
    opacity: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.float-btn.float-neural.neural-off {
    background: rgba(255,255,255,0.06);
    color: #64748b;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: none;
}
.float-btn.float-neural.neural-off:hover {
    background: rgba(255,255,255,0.12);
    color: #94a3b8;
    border-color: rgba(255,255,255,0.2);
    box-shadow: none;
    transform: none;
    width: 2.4rem !important;
    border-radius: 50% !important;
    padding: 0.6rem;
    gap: 0;
}
.float-btn.float-inquiry {
    background: linear-gradient(135deg, #5b8dee, #818cf8);
    color: #fff;
    box-shadow: 0 4px 20px rgba(91,141,238,0.35);
}
.float-btn.float-inquiry:hover { box-shadow: 0 6px 28px rgba(91,141,238,0.5); }
.float-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 600px) {
    .float-btns { right: 1rem; bottom: 1.2rem; }
    .float-btn span { display: none; }
    .float-btn { padding: 0.75rem; border-radius: 50%; }
}

@media (max-width: 900px) {
    nav .nav-menu { display: none; }
    .grid-2, .grid-3, .grid-4,
    .sol-summary-grid, .case-sum-grid,
    .about-greeting, .location-wrap,
    .sol-detail-wrap, .inquiry-wrap,
    .cust-grid, .si-grid,
    .knowledge-grid, .func-grid { grid-template-columns:1fr; }
    .recruit-benefit-grid, .recruit-job-grid { grid-template-columns:1fr 1fr; }
    .ptl-year-block { grid-template-columns:80px 1fr; gap: 0 1rem; }
    .ptl-year-block::before { left: 80px; }
    .ptl-year span { font-size: 0.9rem; }
    footer { grid-template-columns:1fr 1fr; }
    .ai-tech-grid { grid-template-columns: 1fr 1fr; }
    .cta-inner { flex-direction: column; }
    .hero-layout { grid-template-columns: 1fr; }
    .hero-stats { flex-wrap: wrap; }
    .hs { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ══════════════════════════════════════
   A — 스크롤 등장 (Fade + Slide Up)
══════════════════════════════════════ */
@keyframes fadeUpIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
    opacity: 0;
    animation: fadeUpIn 0.65s cubic-bezier(.22,.68,0,1.2) both;
}
.fade-up.delay-1 { animation-delay: .08s; }
.fade-up.delay-2 { animation-delay: .16s; }
.fade-up.delay-3 { animation-delay: .24s; }
.fade-up.delay-4 { animation-delay: .32s; }
.fade-up.delay-5 { animation-delay: .40s; }
.fade-up.delay-6 { animation-delay: .48s; }
/* IntersectionObserver로 뷰포트 진입 시 클래스 부여 */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s cubic-bezier(.22,.68,0,1.2), transform .65s cubic-bezier(.22,.68,0,1.2); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: .08s; }
.reveal.delay-2 { transition-delay: .16s; }
.reveal.delay-3 { transition-delay: .24s; }
.reveal.delay-4 { transition-delay: .32s; }
.reveal.delay-5 { transition-delay: .40s; }
.reveal.delay-6 { transition-delay: .48s; }

/* ══════════════════════════════════════
   B — 카드 Hover Glow (전체 카드 일관 적용)
══════════════════════════════════════ */
.ai-tech-card,
.aiready-step-card,
.aiready-prob-card,
.kc-card,
.rj-card,
.rb-item,
.sol-effect-item {
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.ai-tech-card:hover,
.aiready-step-card:hover,
.aiready-prob-card:hover,
.kc-card:hover {
    border-color: rgba(91,141,238,0.35) !important;
    box-shadow: 0 0 24px rgba(91,141,238,0.12), 0 8px 32px rgba(0,0,0,0.2);
    transform: translateY(-4px);
}
.rj-card:hover {
    border-color: rgba(91,141,238,0.3) !important;
    box-shadow: 0 0 18px rgba(91,141,238,0.1);
}
.rb-item:hover {
    border-color: rgba(91,141,238,0.25) !important;
    box-shadow: 0 0 14px rgba(91,141,238,0.08);
    transform: translateY(-2px);
}

/* ══════════════════════════════════════
   D — Pulse Dot (.sec-label 앞에 자동 삽입)
══════════════════════════════════════ */
@keyframes pulseDot {
    0%,100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.7); opacity: .45; }
}
.sec-label::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: 7px;
    vertical-align: middle;
    animation: pulseDot 1.8s ease-in-out infinite;
}

/* ══════════════════════════════════════
   E — 플로팅 문의 버튼
══════════════════════════════════════ */
.float-btns {
    position: fixed;
    right: 20px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    z-index: 9999;
}
.float-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    text-decoration: none;
    overflow: hidden;
    transition: width .7s cubic-bezier(.4,0,.2,1), border-radius .7s, box-shadow .3s;
    font-family: inherit;
}
.float-btn:hover {
    width: auto;
    border-radius: 20px;
}
.float-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.float-btn-text {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: max-width .7s cubic-bezier(.4,0,.2,1), opacity .5s, padding .7s;
    padding: 0;
    white-space: nowrap;
}
.float-btn:hover .float-btn-text {
    max-width: 220px;
    opacity: 1;
    padding-left: 6px;
}
.float-inquiry {
    background: rgba(91,141,238,0.9);
    color: #fff;
    box-shadow: 0 4px 16px rgba(91,141,238,0.35);
}
.float-talk {
    background: #03c75a;
    color: #fff;
    box-shadow: 0 4px 16px rgba(3,199,90,0.35);
}
.float-eln {
    background: rgba(124,58,237,0.85);
    color: #fff;
    box-shadow: 0 4px 16px rgba(124,58,237,0.3);
}
.float-cloud {
    background: #c2410c;
    color: #fff;
    box-shadow: 0 4px 16px rgba(194,65,12,0.4);
}
.float-badge-free, .float-badge-new {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.6px;
    flex-shrink: 0;
}
.float-badge-free { background: #7c3aed; color: #fff; }
.float-badge-new  { background: #9a3009; color: #ffd4b8; }

/* ══ WizFlow 원리 슬라이더 ══ */
.wfp-slider {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
.wfp-step-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.wfp-tab {
    padding: 0.4rem 1.2rem;
    border-radius: 20px;
    border: 1px solid rgba(84,140,241,0.3);
    background: transparent;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.wfp-tab.active {
    background: rgba(84,140,241,0.15);
    border-color: #548CF1;
    color: #548CF1;
}
.wfp-track-wrap {
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.07);
}
.wfp-track {
    position: relative;
    width: 100%;
}
.wfp-slide {
    display: none;
    width: 100%;
}
.wfp-slide.active {
    display: block;
}
.wfp-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 11px;
}
.wfp-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.8rem;
}
.wfp-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    cursor: pointer;
    transition: background 0.2s;
}
.wfp-dot.active {
    background: #548CF1;
}
@keyframes wfpPulse {
    0%,100% { opacity:0.9; box-shadow:0 0 0 0 rgba(84,140,241,0.4); }
    50%      { opacity:0.4; box-shadow:0 0 0 7px rgba(84,140,241,0); }
}

/* ══════════ 게시글 상세 (ArticleView) ══════════ */
.av-head {
    padding: 1.8rem 0 1.4rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2rem;
}
.av-head h1 {
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 800;
    color: var(--text);
    line-height: 1.4;
    margin: 0 0 0.9rem;
    word-break: keep-all;
}
.av-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    color: var(--muted);
    font-size: 0.88rem;
}
.av-meta .av-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.av-meta .av-meta-label {
    color: var(--muted);
    opacity: 0.7;
}
.av-meta .av-meta-value {
    color: var(--text);
}

/* 본문 영역 (DB HTML 콘텐츠) */
.av-content {
    min-height: 240px;
    line-height: 1.8;
    color: var(--text);
    font-size: 1rem;
    padding-bottom: 2rem;
    word-break: break-word;
    overflow-wrap: anywhere;
}
/* 이미지 사이즈 일관 - 인라인 width/height 모두 무력화하여 부모 폭 기준 자동 */
/*.av-content img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block;
    margin: 0.8rem auto;
    border-radius: 6px;
}

.tb_contents img {
    width : 50% !important;
}*/
.av-content a { color: var(--accent); text-decoration: underline; }
.av-content p { margin: 0 0 0.8rem; color: var(--text); }
.av-content h1, .av-content h2, .av-content h3,
.av-content h4, .av-content h5, .av-content h6 {
    color: var(--text);
    margin: 1.2rem 0 0.8rem;
    font-weight: 700;
    line-height: 1.4;
}
.av-content ul, .av-content ol { margin: 0 0 0.8rem 1.6rem; }
.av-content li { margin-bottom: 0.3rem; color: var(--text); }
.av-content blockquote {
    margin: 0.8rem 0;
    padding: 0.8rem 1rem;
    border-left: 3px solid var(--accent);
    background: rgba(91,141,238,0.06);
    color: var(--muted);
}
.av-content table {
    border-collapse: collapse;
    margin: 0.8rem auto !important; /* 좌우 auto - 인라인 style 의 margin:0px 도 override */
    margin-left: auto !important;
    margin-right: auto !important;
    background: rgba(255,255,255,0.02);
    /* width:100% 강제 제거 - 게시물 인라인 width:50%/특정px 등 존중 */
}
/* 인라인 width 가 없는 table 만 100% 폭 */
.av-content table:not([style*="width:"]) {
    width: 100%;
}
/* 게시물 본문 안 가운데 정렬용 flex 컨테이너 (인라인 display:flex 가 다른 CSS 에 의해 무력화될 경우 대비) */
.av-content div[style*="justify-content:center"],
.av-content div[style*="justify-content: center"] {
    display: flex !important;
    justify-content: center !important;
}
/* text-align:center 컨테이너의 자식 table 도 가운데 정렬 보강 */
.av-content [style*="text-align:center"] > table,
.av-content [style*="text-align: center"] > table,
.av-content [align="center"] > table {
    margin-left: auto !important;
    margin-right: auto !important;
}
.av-content table th,
.av-content table td {
    border: 1px solid var(--border);
    padding: 0.6rem 0.8rem;
    color: var(--text);
    text-align: left;
    background: transparent !important;
}
.av-content table th {
    background: rgba(255,255,255,0.04) !important;
    font-weight: 700;
    color: var(--text);
}
.av-content hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1.2rem 0;
}
.av-content code,
.av-content pre {
    background: #0a0c10;
    color: var(--text);
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
}
.av-content code { padding: 2px 6px; font-size: 0.9em; }
.av-content pre {
    padding: 0.8rem 1rem;
    overflow-x: auto;
    border: 1px solid var(--border);
    line-height: 1.6;
}
/* 옛 인라인 색상 (검정/어두운 RGB 텍스트) 강제 override - 다크 테마에서 가독성 보장 */
/* 모든 자식 텍스트 요소 color 를 부모 .av-content 의 color (=var(--text)) 로 강제 상속 */
.av-content *:not(a):not(code):not(pre):not(.kc-tag):not(button) {
    color: inherit !important;
}
/* code/pre 는 자체 색상 유지 */
.av-content code, .av-content pre { color: var(--text); }
/* 링크는 accent 색 */
.av-content a { color: var(--accent) !important; }
/* 추가 안전망: 인라인 흑/회 RGB 색도 모두 var(--text) 로 */
.av-content [style*="color:#000"],
.av-content [style*="color: #000"],
.av-content [style*="color:black"],
.av-content [style*="color: black"],
.av-content [style*="color:rgb(0"],
.av-content [style*="color: rgb(0"],
.av-content [style*="color:rgb(34"],
.av-content [style*="color: rgb(34"],
.av-content [style*="color:rgb(51"],
.av-content [style*="color: rgb(51"],
.av-content [style*="color:rgb(102"],
.av-content [style*="color: rgb(102"],
.av-content [style*="color:rgb(145"],
.av-content [style*="color: rgb(145"],
.av-content [style*="color:rgb(153"],
.av-content [style*="color: rgb(153"],
.av-content [style*="color:#222"],
.av-content [style*="color: #222"],
.av-content [style*="color:#333"],
.av-content [style*="color: #333"],
.av-content [style*="color:#555"],
.av-content [style*="color: #555"],
.av-content [style*="color:#666"],
.av-content [style*="color: #666"],
.av-content [style*="color:#999"],
.av-content [style*="color: #999"] {
    color: var(--text) !important;
}
/* 인라인 흰/회 배경 (rgb(248,248,248) 등) 도 투명 처리 */
.av-content [style*="background-color:#fff"],
.av-content [style*="background-color: #fff"],
.av-content [style*="background-color:white"],
.av-content [style*="background-color: white"],
.av-content [style*="background-color:rgb(248"],
.av-content [style*="background-color: rgb(248"],
.av-content [style*="background-color:rgb(245"],
.av-content [style*="background-color: rgb(245"],
.av-content [style*="background-color:rgb(250"],
.av-content [style*="background-color: rgb(250"],
.av-content [style*="background:#fff"],
.av-content [style*="background: #fff"],
.av-content [style*="background:white"],
.av-content [style*="background: white"] {
    background-color: rgba(255,255,255,0.04) !important;
}

/* 첨부파일 */
.av-attach {
    padding: 1rem 1.2rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 1.5rem;
}
.av-attach-title {
    font-weight: 700;
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.av-attach-item {
    margin-top: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.av-attach-item a {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.95rem;
}
.av-attach-item a:hover { text-decoration: underline; }

/* 액션 버튼 영역 */
.av-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 1.8rem 0 0;
    flex-wrap: wrap;
}
.av-actions .av-actions-right {
    display: flex;
    gap: 0.5rem;
}

/* 이전/다음글 */
.av-nav {
    border-top: 1px solid var(--border);
    margin-top: 2.5rem;
}
.av-nav-item {
    padding: 1rem 0;
    display: flex;
    gap: 1rem;
    align-items: center;
}
.av-nav-item + .av-nav-item {
    border-top: 1px solid rgba(255,255,255,0.05);
}
.av-nav-label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    min-width: 64px;
}
.av-nav-link {
    flex: 1;
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.av-nav-link:hover { color: var(--accent); }
.av-nav-date {
    color: var(--muted);
    font-size: 0.82rem;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .av-meta { flex-direction: column; gap: 0.4rem; }
    .av-actions { flex-direction: column; }
    .av-actions .av-actions-right { width: 100%; justify-content: flex-end; }
    .av-nav-item { flex-wrap: wrap; }
    .av-nav-date { width: 100%; padding-left: 64px; }
}