@charset "utf-8";
/* ==========================================================================
 * home-legacy.css
 * 새 홈(main.html) 하단에 붙인 기존 소개(index.html) 섹션 전용 스타일
 * - 차별점(#diff) · 고객사(#customer) · 도입사례 · FAQ(#faq) · 소식(#news)
 * - 출처: index.html <head> 인라인 <style> (2026-11-05 기준) + 이번 배치용 보정
 * 주의: index.html 인라인 스타일을 수정하면 이 파일도 같이 맞춰야 함(현재 사본 관계)
 * ========================================================================== */

/* ---- index.html 인라인 스타일 사본 ----
 * 보정: 원본의 단독 .workflow-step 규칙(3곳)은 '최근 업데이트'의 .workflow-strip 전용인데,
 *       그대로 두면 새 홈 5단계 타임라인 카드(.workflow-step)까지 덮어써 디자인이 깨짐 → 범위 한정 */
.lw-loading-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.45);z-index:99999;justify-content:center;align-items:center;flex-direction:column}
.lw-loading-overlay.active{display:flex}
.lw-spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:lw-spin .7s linear infinite}
@keyframes lw-spin{to{transform:rotate(360deg)}}
.lw-loading-overlay p{color:#fff;margin-top:16px;font-size:15px}
.lw-toast{position:fixed;top:30px;left:50%;transform:translateX(-50%);padding:14px 28px;border-radius:8px;color:#fff;font-size:15px;z-index:100000;opacity:0;transition:opacity .3s;pointer-events:none}
.lw-toast.show{opacity:1}
.lw-toast.success{background:#2563eb}
.lw-toast.fail{background:#dc2626}
.diff-list .img.diff-list__update-icon{display:flex;align-items:center;justify-content:center;border-radius:18px;background:linear-gradient(135deg,#edf5ff 0%,#f2ecff 100%);color:#5b78dc;font-size:34px}
.diff-list>li:last-child:nth-child(3n+1){margin-left:auto;margin-right:auto}
.hero-badges{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px}
.hero-badges span{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;background:#f3f7ff;color:#1d4ed8;font-size:15px;font-weight:700;line-height:1.4}
.hero-badges>p{flex-basis:100%;margin:0 0 4px;color:#4d3ba3;font-size:15px;font-weight:700;line-height:1.5}
.update-showcase{padding:72px 0 84px;background:#f6f8fb;text-align:left}
.update-showcase *{box-sizing:border-box}
.update-showcase .container{max-width:1180px;margin:0 auto;padding:0 20px}
.update-showcase__head{text-align:center;margin-bottom:34px}
.update-showcase__eyebrow{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;background:#eaf1ff;color:#1d4ed8;font-size:14px;font-weight:700;margin-bottom:14px}
.update-showcase__title{margin:0;color:#111827;font-size:42px;line-height:1.28;font-weight:800;letter-spacing:0}
.update-showcase__desc{margin:16px auto 0;max-width:860px;color:#4b5563;font-size:20px;line-height:1.75}
.update-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:34px}
.update-card{min-height:260px;padding:26px 24px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;box-shadow:0 16px 36px rgba(15,23,42,.06)}
.update-card__icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:8px;background:#eef4ff;color:#2563eb;font-size:24px;font-weight:800;margin-bottom:18px}
.update-card h3{margin:0 0 12px;color:#111827;font-size:23px;line-height:1.35;font-weight:800;letter-spacing:0}
.update-card p{margin:0;color:#4b5563;font-size:17px;line-height:1.75;word-break:keep-all}
.update-card__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.update-card__tags span{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:999px;background:#f3f4f6;color:#374151;font-size:13px;font-weight:700}
.update-card--featured{grid-column:1/-1;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:24px;align-items:center;min-height:0;padding:28px 30px;border-color:#cfe0ff;background:linear-gradient(120deg,#fff 0%,#f4f8ff 100%);box-shadow:0 18px 42px rgba(37,99,235,.09)}
.update-card--featured .update-card__icon{width:56px;height:56px;margin:0;background:#2563eb;color:#fff}
.update-card--featured h3{margin-bottom:8px;font-size:27px}
.update-card--featured p{max-width:720px}
.update-card--featured .update-card__tags{margin-top:14px}
.update-card--featured .update-card__tags span{background:#fff;color:#1d4ed8;border:1px solid #dbeafe}
.update-card__link{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border:1px solid #2563eb;border-radius:8px;color:#1d4ed8;font-size:15px;font-weight:800;text-decoration:none;white-space:nowrap;transition:.18s}
.update-card__link:hover{background:#2563eb;color:#fff}
.workspace-preview{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:30px;align-items:center;margin-top:48px;padding:30px;border-radius:8px;background:#111827;color:#fff}
.workspace-copy h3{margin:0 0 14px;font-size:33px;line-height:1.35;font-weight:800;letter-spacing:0}
.workspace-copy p{margin:0;color:#d1d5db;font-size:18px;line-height:1.75}
.workspace-points{display:grid;gap:10px;margin-top:22px;padding:0;list-style:none}
.workspace-points li{display:flex;gap:10px;align-items:flex-start;color:#f9fafb;font-size:17px;line-height:1.6}
.workspace-points li:before{content:"";flex:0 0 7px;width:7px;height:7px;margin-top:9px;border-radius:50%;background:#60a5fa}
.workspace-mock{overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:#0f172a;box-shadow:0 24px 50px rgba(0,0,0,.26)}
.workspace-tabs{display:flex;gap:6px;padding:12px 12px 0;background:#1f2937}
.workspace-tabs span{display:block;padding:9px 14px;border-radius:7px 7px 0 0;background:#374151;color:#d1d5db;font-size:13px;font-weight:700;white-space:nowrap}
.workspace-tabs span:first-child{background:#fff;color:#1f2937}
.workspace-panels{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;background:#fff}
.workspace-panel{min-height:112px;padding:14px;border:1px solid #e5e7eb;border-radius:8px;background:#f9fafb}
.workspace-panel strong{display:block;margin-bottom:12px;color:#111827;font-size:14px}
.workspace-line{height:9px;border-radius:999px;background:#dbeafe;margin-top:8px}
.workspace-line:nth-child(3){width:78%;background:#e5e7eb}
.workspace-line:nth-child(4){width:58%;background:#bfdbfe}
.workflow-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:28px}
.workflow-strip .workflow-step{position:relative;padding:20px 16px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}
.workflow-strip .workflow-step b{display:block;margin-bottom:8px;color:#1d4ed8;font-size:13px}
.workflow-strip .workflow-step span{display:block;color:#111827;font-size:17px;font-weight:800;line-height:1.45}
.update-audience{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:28px}
.update-audience__box{padding:26px;border-radius:8px;background:#fff;border:1px solid #e5e7eb}
.update-audience__box h3{margin:0 0 14px;color:#111827;font-size:24px;font-weight:800;letter-spacing:0}
.update-audience__box ul{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.update-audience__box li{position:relative;padding-left:18px;color:#4b5563;font-size:17px;line-height:1.55}
.update-audience__box li:before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:#2563eb}
.update-cta{display:flex;justify-content:center;gap:10px;margin-top:34px}
@media (max-width:1024px){
    .update-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .update-card--featured{grid-column:1/-1}
    .workspace-preview{grid-template-columns:1fr}
    .workflow-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
    .hero-badges{margin-top:14px}
    .hero-badges span{font-size:13px}
    .hero-badges>p{font-size:11px;white-space:nowrap}
    .update-showcase{padding:54px 0 64px}
    .update-showcase__title{font-size:29px}
    .update-showcase__desc{font-size:16px}
    .update-card-grid,.workflow-strip,.update-audience{grid-template-columns:1fr}
    .update-card--featured{grid-column:auto;display:block;padding:26px 24px}
    .update-card--featured .update-card__icon{margin-bottom:18px}
    .update-card__link{margin-top:20px}
    .workspace-preview{padding:22px 16px}
    .workspace-copy h3{font-size:24px}
    .workspace-tabs{overflow:auto}
    .workspace-panels{grid-template-columns:1fr}
    .update-cta{flex-direction:column}
    .update-cta .button{text-align:center}
}

/* ---- 이번 배치용 보정 ---- */

/* 후기 목록을 뺀 자리: 도입사례 위 컨테이너 상단 여백 160px → 40px */
#customer .customer-review { margin-top: 0; }
#customer .customer-review > .container { padding-top: 40px; }

/* FAQ 더보기: 4번째 이후 항목은 hidden 속성으로 접어 두고 버튼으로 펼침 (js/home-legacy.js) */
#faq .faq-more { margin-top: 36px; }
#faq .faq-more .button { display: inline-flex; align-items: center; gap: 6px; }
#faq .faq-more .button span { color: #b9c6da; font-weight: 600; }

/* ---- 2026-11-06 audit 보정: main.html 하단 기존 섹션을 DESIGN.md 규칙에 맞춤 ----
 * 범위를 .workflow-home .legacy-sections 로 한정 → common.css를 같이 쓰는 다른 페이지는 그대로 */
/* Signal-Only Gradient: 섹션 제목·강조어·고객 수치의 그라디언트 글자를 단색으로 (그라디언트는 히어로 강조어·주 버튼에만) */
.workflow-home .legacy-sections .color-gradient,
.workflow-home .legacy-sections .color-gradient2 { background: none; -webkit-background-clip: border-box; background-clip: border-box; }
.workflow-home .legacy-sections .color-gradient { color: #15243d; }
.workflow-home .legacy-sections .color-gradient2 { color: #2d6ac0; }
/* '그럼' 손글씨 라벨: 원색 빨강(4.0:1) → 같은 빨강 계열로 4.5:1 이상 */
.workflow-home .legacy-sections .section__title small { color: #c42b2b; }
/* 주 버튼 그라디언트: 흰 글자 대비 4.5:1 이상 (workflow-button--primary와 같은 값) */
.workflow-home .legacy-sections .button-gradient { background: linear-gradient(102deg, #1e74d5, #7b5fdb); }
/* 5px 색 띠 → 제거 (테두리는 1px 원칙). 도입사례 결과 상자와 도입 전후 카드 */
.workflow-home .legacy-sections .case-card__details .case-card__result::before,
.workflow-home .legacy-sections .solution-change > div::before { display: none; }
.workflow-home .legacy-sections .solution-change > div { border-top-width: 1px; }
/* FAQ 답변 줄 간격: 1.23 → 한국어 본문 기준 1.7 */
.workflow-home .legacy-sections .faq__answer { line-height: 1.7; }
/* common.css의 .btn:focus { outline: 0 !important } 가 지우는 키보드 포커스 표시를 되살림 */
.workflow-home .btn:focus-visible { outline: 2px solid #1e74d5 !important; outline-offset: 3px; }
/* 고객사 로고: width/height 속성은 자리 확보(레이아웃 밀림 방지)용. 실제 크기는 기존처럼 칸에 맞춰 비율 유지 */
.workflow-home .legacy-sections img[src*="company_new/"] { width: auto; height: auto; }