/*
 * 기업 러닝 캠페인 소개(business.php) 전용 스타일 — design.css 뒤에 싣는다.
 * 원본: web/design/business.html 의 <style>. 시안을 고치면 이 파일도 같이 옮길 것.
 *
 * 색: 사이트 헤더·푸터는 라임 그대로, 기업 이야기를 하는 섹션에만 data-area="company" 를 붙여 바이올렛.
 *   design.css 의 '[data-area="company"] main .btn-primary' 는 data-area 가 main 바깥(body)에 있을 때만 맞는다.
 *   여기서는 섹션에 붙이므로 같은 규칙을 섹션 기준으로 한 번 더 둔다.
 */
    [data-area="company"] .btn-primary { background: var(--area); color: var(--on-area); }
    [data-area="company"] .btn-primary:hover { background: #9F86F5; }
    [data-area="company"] .eyebrow { color: var(--area); }
    [data-area="company"] .area-text { color: var(--area); }
    [data-area="company"] .faq-item[open] summary i { color: var(--area); }
    [data-area="company"] :focus-visible { outline-color: var(--area); }

    /* 히어로 */
    .lp-hero {
      position: relative; isolation: isolate; overflow: hidden;
      padding: calc(var(--header-h) + 64px) 0 88px;
    }
    .lp-hero::before {
      content: ''; position: absolute; z-index: -1; width: 760px; height: 760px; right: -220px; top: -180px;
      background: radial-gradient(closest-side, rgba(176,154,251,.16), transparent);
      pointer-events: none;
    }
    .lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 56px; align-items: center; }
    .lp-hero h1 { font-size: 48px; line-height: 1.22; font-weight: 800; letter-spacing: -0.035em; }
    .lp-lead { margin: 20px 0 32px; max-width: 540px; font-size: 18px; color: var(--text-2); }
    .lp-btns { display: flex; flex-wrap: wrap; gap: 10px; }
    .lp-points { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; font-size: 14px; color: var(--text-2); }
    .lp-points span { display: inline-flex; align-items: center; gap: 6px; }
    .lp-points i { color: var(--area); font-size: 16px; }

    /* 기업 홈 화면 예시 — '이번 주 캠페인' + 임직원 랭킹 조각 */
    .preview { padding: 24px; border-radius: var(--radius-lg); box-shadow: 0 30px 70px rgba(0,0,0,.45); display: grid; gap: 14px; }
    .preview-top { display: flex; align-items: center; gap: 12px; }
    .preview-top .space-logo { width: 44px; height: 44px; border-radius: 14px; font-size: 22px; }
    .preview-top div { flex: 1; min-width: 0; }
    .preview-top strong { display: block; font-size: 16px; }
    .preview-top small { display: block; font-size: 13px; color: var(--text-2); }
    .pv-block { padding: 16px; border-radius: var(--radius-md); background: var(--bg-2); }
    .pv-rate { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
    .pv-rate strong { font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; }
    .pv-rate strong small { margin-left: 2px; font-size: 18px; font-weight: 600; color: var(--text-2); }
    .pv-block .wk-chart { height: 150px; gap: 10px; }
    .pv-block .wk-track { background: var(--surface); }
    /* 좁은 칸(1280px 에서 약 150px) — '이번 주'가 두 줄로 꺾이고, 이름이 거리 숫자 위로 넘쳤다 */
    .pv-block .wk-day { white-space: nowrap; font-size: 12px; }
    .pv-block .rank-name { min-width: 0; }
    .pv-block .rank-name strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /*
     * 말줄임만 했더니 이름이 '퇴…' '박대…' 로 잘려 순위를 읽을 수 없었다.
     * 미리보기에서는 아바타를 빼고 랭킹 칸을 넓힌다 (차트 0.8 : 랭킹 1.2).
     */
    .pv-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px; }
    .pv-block .crew-logo { display: none; }
    .pv-block .rank-row { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; padding: 8px 4px; }
    .pv-block .rank-row:hover { background: transparent; }
    .pv-block .rank-score strong { font-size: 14px; }
    .pv-label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--text-2); }

    /* 기능 카드 */
    .feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .feat { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
    .feat h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
    .feat ul { display: grid; gap: 10px; }
    .feat li { display: flex; gap: 8px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
    .feat li i { flex-shrink: 0; margin-top: 2px; font-size: 17px; color: var(--area); }
    .feat li b { color: var(--text); font-weight: 700; }
    .feat .tags { margin-top: auto; }

    /* 권한 3단 */
    .roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .role { padding: 24px; }
    .role-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
    .role-head h3 { font-size: 18px; font-weight: 800; }
    .role-head small { margin-left: auto; font-size: 13px; color: var(--text-2); }
    .role ul { display: grid; gap: 8px; }
    .role li { display: flex; gap: 8px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
    .role li i { flex-shrink: 0; margin-top: 1px; font-size: 16px; color: var(--area); }

    /* 공정성 · 개인정보 안내 */
    .trust { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; padding: 40px; border-radius: var(--radius-lg); }
    .trust h2 { font-size: 30px; line-height: 1.3; font-weight: 800; letter-spacing: -0.03em; }
    .trust > div > p { margin-top: 12px; color: var(--text-2); }
    .trust-list { display: grid; gap: 12px; }
    .trust-list li { display: flex; gap: 12px; padding: 16px; border-radius: var(--radius-md); background: var(--bg-2); }
    .trust-list li > i { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--area-tint); color: var(--area); font-size: 18px; }
    .trust-list strong { display: block; font-size: 15px; }
    .trust-list span { font-size: 14px; color: var(--text-2); }

    /* 도입 절차 4단계 */
    .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
    .step { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
    .step-no {
      width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
      background: var(--area); color: var(--on-area); font-size: 16px; font-weight: 800;
    }
    .step h3 { font-size: 18px; font-weight: 800; }
    .step p { font-size: 14px; color: var(--text-2); }
    .step .meta { margin-top: auto; padding-top: 6px; font-size: 13px; }

    /* 도입 문의 */
    .inq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
    .inq-copy h2 { font-size: 32px; line-height: 1.3; font-weight: 800; letter-spacing: -0.03em; }
    .inq-copy > p { margin: 12px 0 24px; color: var(--text-2); }
    .inq-copy ul { display: grid; gap: 10px; }
    .inq-copy li { display: flex; gap: 8px; font-size: 15px; color: var(--text-2); }
    .inq-copy li i { flex-shrink: 0; margin-top: 2px; color: var(--area); font-size: 17px; }

    @media (max-width: 1024px) {
      .lp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
      .lp-hero::before { top: auto; bottom: -360px; }
      .preview { max-width: 560px; }
      .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .roles { grid-template-columns: minmax(0, 1fr); }
      .trust { grid-template-columns: minmax(0, 1fr); gap: 28px; }
      .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .inq { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    }
    @media (max-width: 768px) {
      .lp-hero { padding: calc(var(--header-h) + 36px) 0 56px; }
      .lp-hero h1 { font-size: 32px; }
      .lp-lead { font-size: 16px; }
      .trust { padding: 24px 20px; }
      .trust h2, .inq-copy h2 { font-size: 24px; }
    }
    @media (max-width: 640px) {
      .feat-grid, .steps { grid-template-columns: minmax(0, 1fr); }
      .feat { padding: 20px; }
      .preview { padding: 16px; }
      .pv-split { grid-template-columns: minmax(0, 1fr); }
      .pv-block { padding: 14px 12px; }
    }
    @media (max-width: 480px) {
      .lp-btns .btn { flex: 1 1 100%; }
    }

/* ── PHP 이관 추가분 ─────────────────────────────────────────────── */
.preview { margin: 0; }
/* 문의 양식 대신 이메일 안내 카드 (비로그인 문의 엔드포인트가 없다) */
.inq-card { display: grid; gap: 16px; padding: 32px; border-radius: var(--radius-lg); }
.inq-card h3 { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 800; }
.inq-card h3 i { color: var(--area); font-size: 22px; }
.inq-card > p { color: var(--text-2); font-size: 15px; }
.inq-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.inq-fields li { padding: 12px 14px; border-radius: var(--radius-md); background: var(--bg-2); font-size: 14px; color: var(--text-2); }
.inq-card .btn { width: 100%; }
.inq-addr { font-size: 14px; color: var(--text-3); text-align: center; overflow-wrap: anywhere; }
.inq-addr b { color: var(--text-2); font-weight: 600; }
.inq-alt { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.inq-alt a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.inq-alt a:hover { color: var(--text); }
.inq-alt i { color: var(--area); font-size: 16px; }
@media (max-width: 768px) {
  .inq-card { padding: 24px 20px; }
}
@media (max-width: 480px) {
  .inq-fields { grid-template-columns: minmax(0, 1fr); }
}