/* ============================================================================
   home-cokr.css — 1호(freebugo.co.kr) 랜딩 전용
   작성일: 2026-09-07
   @version 1.0.0
   ⛔ **공용 파일이 아니다.** shared-files.psd1 의 bugo 세트에 넣지 말 것.
      다른 랜딩 CSS(home-bugolink.css 등)와 같은 취급이다 — 사이트마다 손으로 관리한다.

   ■ 왜 갈라져 나왔나 (2026-09-07)
     home.css 는 partials/header.php 가 **모든 페이지에서 무조건** 불러오는
     전 사이트 공용 스타일시트인데, 그 안에 1호 랜딩 전용 규칙이 함께 들어 있었다.
     그래서 새 랜딩을 만들다 home.css 를 건드리면 라이브인 1호가 다치는 구조였다.
     여기로 1호 랜딩 규칙만 옮겨 그 위험을 끊는다.

   ■ 무엇이 여기 있고 무엇이 home.css 에 남았나
     여기      1호 랜딩에서만 쓰이는 규칙 (hero·trust·intro·feature·process·stats·
               랜딩 안 개인정보 섹션·faq·final-cta)
     home.css  전 사이트가 쓰는 것 (:root 토큰·header·nav·footer·정책 페이지·
               플로팅 메뉴·다른 랜딩도 쓰는 .trust-item/.hero-actions/.feature-icon 등)

   ⚠️ **이 파일은 home.css 뒤에 로드돼야 한다.** :root 의 --home-* 토큰이 home.css 에
      있고 여기서 var() 로 받아 쓴다. 로드는 views/sites/cokr/home.php 의 $pageExtraCss.

   ■ 분리 근거 (기계 검증, 2026-09-07)
     · 선언 수 1054 = 공용 688 + 1호 366 (하나도 안 사라졌다)
     · 양쪽에 같은 선택자가 있는 경우는 .final-cta h2 하나뿐이고,
       원본에서도 공용이 먼저·1호가 나중이라 로드 순서가 그대로다
     · 분류는 이름이 아니라 **마크업 실측**이다 — .hero-section 처럼 접두어 없는
       이름이라 이름만으로는 못 가른다. 그 클래스를 쓰는 뷰가 sites/cokr/home.php
       하나뿐인지 전체 뷰·JS 를 훑어 판정했다
   ============================================================================ */



.section-block {
    padding: var(--home-section) 0;
}

.section-heading {
    max-width: 780px;
    margin: 0 auto 44px;
    text-align: center;
}

.section-lead {
    max-width: 820px;
    margin: 14px auto 0;
    color: var(--home-muted);
    font-size: 16px;
    line-height: 1.75;
    word-break: keep-all;
}

/* ============================================================================
   4. Hero
   ============================================================================ */

.hero-section {
    position: relative;
    min-height: 506px;
    overflow: hidden;
    background-color: rgb(48, 59, 57);
    background-image: linear-gradient(
        90deg,
        rgba(48, 59, 57, 0.98) 0%,
        rgba(48, 59, 57, 0.95) 28%,
        rgba(48, 59, 57, 0.78) 48%,
        rgba(48, 59, 57, 0.45) 65%,
        rgba(48, 59, 57, 0.20) 80%,
        rgba(48, 59, 57, 0.00) 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.hero-section::before,
.hero-section::after { display: none; }

.hero-img {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: auto;
    z-index: 0;
    filter: brightness(0.62);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 45%);
    mask-image: linear-gradient(to right, transparent 0%, black 45%);
}

.hero-overlay {
    position: relative;
    z-index: 1;
    min-height: 506px;
    display: flex;
    align-items: center;
    background: transparent;
}

.hero-content {
    padding: 76px 0;
}

.hero-kicker {
    margin: 0 0 16px;
    color: var(--home-accent);
    font-size: 14px;
    font-weight: 850;
    letter-spacing: 0.02em;
}

.hero-subtitle {
    max-width: 640px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 17px;
    line-height: 1.8;
    word-break: keep-all;
}

/* ============================================================================
   5. Trust
   ============================================================================ */

.trust-section {
    padding: 48px 0;
    background: var(--home-bg);
    border-bottom: 1px solid var(--home-line);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 14px;
    color: var(--home-primary-dark);
}

/* ============================================================================
   6. Intro
   ============================================================================ */

.intro-section {
    background: var(--home-white);
}

.intro-section .section-lead {
    white-space: nowrap;
}

.intro-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.intro-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 22px;
    background: #f0f2f4;
    border: 1px solid #d6dbd8;
    border-radius: 14px;
    color: var(--home-primary-dark);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: background var(--home-speed) var(--home-ease),
                color var(--home-speed) var(--home-ease);
}

.intro-links a::after {
    font-weight: 400;
}

.intro-links a:hover {
    background: var(--home-primary-dark);
    color: #fff;
    text-decoration: none;
}

/* ============================================================================
   7. Feature Cards
   ============================================================================ */

.feature-section {
    background: var(--home-bg);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.feature-card {
    min-height: 250px;
    padding: 32px 28px;
    border: 1px solid var(--home-line);
    border-radius: var(--home-radius);
    background: var(--home-white);
    text-align: center;
    box-shadow: var(--home-shadow);
    transition:
        transform var(--home-speed) var(--home-ease),
        box-shadow var(--home-speed) var(--home-ease),
        border-color var(--home-speed) var(--home-ease);
}

.feature-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
    box-shadow: var(--home-shadow-hover);
}

.feature-card h3 {
    margin: 0 0 12px;
    color: var(--home-ink);
    font-size: 22px;
    font-weight: 850;
    letter-spacing: -0.04em;
}

.feature-card p {
    margin: 0;
    color: var(--home-muted);
    font-size: 14px;
    line-height: 1.7;
}

/* ============================================================================
   8. Process
   ============================================================================ */

.process-section {
    background: var(--home-white);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.process-item {
    position: relative;
    padding: 0 16px 0;
    text-align: center;
}

/* 연결선 — 오른쪽 절반 */
.process-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 36px;
    left: calc(50% + 36px);
    right: 0;
    height: 1px;
    background: var(--home-line);
}

/* 연결선 — 왼쪽 절반 */
.process-item:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 0;
    right: calc(50% + 36px);
    height: 1px;
    background: var(--home-line);
}

.process-item span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    border-radius: var(--home-pill);
    border: 2px solid var(--home-primary);
    background: transparent;
    color: var(--home-primary-dark);
    font-size: 20px;
    font-weight: 900;
    position: relative;
    z-index: 1;
    transition:
        background var(--home-speed) var(--home-ease),
        color var(--home-speed) var(--home-ease);
    cursor: default;
}

.process-item span:hover {
    background: var(--home-primary);
    color: var(--home-white);
}

.process-item strong {
    display: block;
    margin-bottom: 8px;
    color: var(--home-ink);
    font-size: 18px;
    font-weight: 850;
}

.process-item p {
    margin: 0;
    color: var(--home-muted);
    font-size: 14px;
    line-height: 1.65;
}

/* ============================================================================
   9. Stats
   ============================================================================ */

.stats-section {
    padding: 54px 0;
    background: #172019;
    color: var(--home-white);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.stat-item {
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.stat-item:last-child {
    border-right: 0;
}

.stat-item strong {
    display: block;
    margin-bottom: 8px;
    color: var(--home-white);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.04em;
}

.stat-item span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 700;
}

.privacy-heading-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.privacy-shield-icon {
    flex-shrink: 0;
    line-height: 0;
}

.privacy-highlights {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 13px;
}

.privacy-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--home-muted);
    font-size: 15px;
    line-height: 1.55;
}

.privacy-highlights li::before {
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--home-primary);
}

.split-box {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
    align-items: start;
}

.privacy-list {
    display: grid;
    gap: 14px;
}

.privacy-list div {
    padding: 22px 24px;
    border: 1px solid var(--home-line);
    border-radius: var(--home-radius-sm);
    background: var(--home-white);
}

.privacy-list strong {
    display: block;
    margin-bottom: 7px;
    color: var(--home-ink);
    font-size: 17px;
    font-weight: 850;
}

.privacy-list p {
    margin: 0;
    color: var(--home-muted);
    font-size: 14px;
    line-height: 1.65;
}

.search-section {
    padding: 64px 0;
    background: var(--home-white);
}

/* FAQ — 왼쪽 소개 열 + 오른쪽 아코디언 2단 (1.6.0)
   가운데 정렬 제목 + 좁은 목록이던 것을 바꿨다. 질문이 6개라 세로로만 쌓이면
   화면 오른쪽이 통째로 비었고, 제목이 스크롤 밖으로 나가면 무엇에 대한 질문인지
   맥락이 사라졌다. 왼쪽 열을 sticky 로 붙여 두면 그 두 가지가 같이 해결된다. */
.faq-section {
    background: var(--home-white);
}

.faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.faq-intro {
    position: sticky;
    top: 96px;
}

.faq-eyebrow {
    margin: 0 0 14px;
    color: var(--home-primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

/* 자간을 좁히지 않는다 — 한글은 한 글자 안에 자모가 모여 있어서, 굵은 제목에
   음수 자간을 주면 '질' 처럼 획이 많은 글자가 서로 붙어 보인다(영문에서는 안 생긴다). */
.faq-intro h2 {
    margin: 0;
    color: var(--home-ink);
    font-size: clamp(34px, 3.9vw, 48px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: normal;
}

.faq-intro h2 span {
    color: var(--home-primary);
}

.faq-intro-text {
    margin: 18px 0 0;
    color: var(--home-muted);
    font-size: 15px;
    line-height: 1.8;
}

.faq-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding: 13px 22px;
    border: 1px solid var(--home-primary);
    border-radius: var(--home-radius-sm);
    color: var(--home-primary);
    font-size: 15px;
    font-weight: 700;
    transition: background var(--home-speed) var(--home-ease),
                color var(--home-speed) var(--home-ease);
}

/* 전역 a:hover 가 밑줄을 넣는다(theme-*.css) — 배경이 채워지는 버튼에는 어울리지 않아 끈다 */
.faq-contact-btn:hover,
.faq-contact-btn:focus-visible {
    background: var(--home-primary);
    color: var(--home-white);
    text-decoration: none;
}

.faq-contact-arrow {
    transition: transform var(--home-speed) var(--home-ease);
}

.faq-contact-btn:hover .faq-contact-arrow,
.faq-contact-btn:focus-visible .faq-contact-arrow {
    transform: translateX(3px);
}

.faq-list {
    display: grid;
    gap: 10px;
}

.faq-item {
    border: 1px solid var(--home-line);
    border-radius: var(--home-radius-sm);
    background: var(--home-white);
    overflow: hidden;
    transition: border-color var(--home-speed) var(--home-ease);
}

.faq-item:hover,
.faq-item[open] {
    border-color: var(--color-primary-soft-border);
}

/* auto | 1fr | auto — 'Q.' / 질문 / 화살표. ::after 가 세 번째 칸을 차지한다 */
.faq-item summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 20px 22px;
    color: var(--home-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-q {
    color: var(--home-primary);
    font-weight: 800;
}

/* 글리프 대신 테두리로 그린 꺾쇠 — 폰트에 따라 모양이 달라지지 않는다 */
.faq-item summary::after {
    content: '';
    width: 9px;
    height: 9px;
    margin: 5px 2px 0 0;
    border-right: 2px solid var(--home-muted);
    border-bottom: 2px solid var(--home-muted);
    transform: rotate(45deg);
    transition: transform var(--home-speed) var(--home-ease),
                border-color var(--home-speed) var(--home-ease);
}

.faq-item[open] summary::after {
    border-color: var(--home-primary);
    transform: rotate(-135deg);
}

/* 왼쪽 여백은 'Q.' 폭 + gap — 답변이 질문 글자와 세로로 맞는다 */
.faq-answer {
    margin: 0;
    padding: 0 22px 22px 56px;
    color: var(--home-muted);
    font-size: 15px;
    line-height: 1.8;
}

@media (max-width: 900px) {
    .faq-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .faq-intro {
        position: static;
    }
}

@media (max-width: 600px) {
    .faq-item summary {
        gap: 10px;
        padding: 17px 16px;
        font-size: 15px;
    }

    .faq-answer {
        padding: 0 16px 18px 44px;
        font-size: 14px;
    }
}

.final-cta {
    padding: 88px 0;
    background: var(--home-white);
    text-align: center;
}

.final-cta h2 {
    max-width: 760px;
    margin: 0 auto 32px;
    color: var(--home-ink);
}

.final-cta-tag {
    margin: 0 0 18px;
    color: var(--home-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.final-cta-box {
    padding: 20px 10px;
    border: 1.5px solid var(--home-line);
    border-radius: 48px;
    background: var(--home-bg);
}

.btn-cta-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 48px;
    min-height: 56px;
    border-radius: var(--home-pill);
    background: #1f252b;
    color: var(--home-white);
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    transition:
        background var(--home-speed) var(--home-ease),
        transform var(--home-speed) var(--home-ease);
}

.btn-cta-pill:hover {
    background: var(--home-primary-dark);
    color: var(--home-white);
    text-decoration: none;
    transform: translateY(-2px);
}

/* ============================================================================
   13. Responsive
   ============================================================================ */

@media (max-width: 1080px) {
    .feature-grid,
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-card {
        min-height: 230px;
    }

    /* 2열 배치 시 2번→3번 사이 연결선 제거 */
    .process-item:nth-child(2)::after,
    .process-item:nth-child(3)::before {
        display: none;
    }

    .process-item:nth-child(1),
    .process-item:nth-child(2) {
        margin-bottom: 40px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

    .stat-item:nth-child(2) {
        border-right: 0;
    }

    .stat-item:nth-child(1),
    .stat-item:nth-child(2) {
        padding-bottom: 28px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .stat-item:nth-child(3),
    .stat-item:nth-child(4) {
        padding-top: 28px;
    }
}


@media (max-width: 768px) {

    .hero-section,
    .hero-overlay {
        min-height: 460px;
    }

    .hero-content {
        padding: 64px 0;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .feature-grid,
    .process-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .intro-section .section-lead {
        white-space: normal;
    }

    .intro-links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .intro-links a {
        justify-content: center;
    }

    .feature-card {
        min-height: auto;
    }

    /* 1열 배치 시 모든 연결선 숨김 */
    .process-item::before,
    .process-item::after {
        display: none;
    }

    .process-item {
        margin-bottom: 32px;
    }

    .process-item:last-child {
        margin-bottom: 0;
    }

    /* 모바일 2×2: 1080px 규칙을 그대로 승계 — 추가 override 없음 */
    .stat-item {
        padding: 24px 0;
    }
}


@media (max-width: 640px) {
    /* 모바일: 이미지를 전체 배경으로 깔고 어두운 오버레이로 텍스트 보호 */
    .hero-section {
        min-height: 460px;
        background-image: linear-gradient(
            rgba(30, 38, 36, 0.88) 0%,
            rgba(30, 38, 36, 0.82) 100%
        );
    }
    .hero-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(0.38);
        -webkit-mask-image: none;
        mask-image: none;
    }

    .feature-card {
        padding: 28px 22px;
    }
}