/**
 * 랜딩페이지 전용 스타일
 * 루트(/)는 계산기 페이지가 아니라 5개 영역으로 들어가는 관문 역할만 한다.
 * 글자색은 노란 브랜드 배경 위에서도 WCAG AA(4.5:1)를 넘기는 진한 갈색을 쓴다.
 *
 * 이 파일은 index.html 에서만 로드되므로 body/.main-content 같은 전역 선택자를
 * 여기서 덮어써도 다른 페이지에는 영향이 없다. (common.css 는 수정하지 않는다.)
 */

/* ------------------------------------------------------------------
   푸터 고정 — common.css 의 .main-content{min-height:calc(100vh - 200px)}
   때문에 카드 아래로 약 370px 의 빈 공간이 생겼다.
   랜딩은 콘텐츠가 짧으므로 body 를 세로 flex 로 만들어 푸터를 화면 하단에
   자연스럽게 붙이고, 남는 공간에는 카드 묶음을 세로 중앙 정렬한다.
   (플로팅 메뉴·채팅 위젯은 모두 position:fixed 라 flex 흐름에서 빠진다.)
   ------------------------------------------------------------------ */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > .header,
body > .footer {
    flex: none;
}

.main-content {
    flex: 1 0 auto;
    min-height: 0;         /* common.css 의 calc(100vh - 200px) 무력화 */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 64px 20px;
    text-align: center;
}

.landing-contact {
    font-size: 0.875rem;
    color: #7A6647;
    margin: 0 0 40px;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.landing-contact a {
    color: #8A4B00;
    text-decoration: underline;
    text-underline-offset: 2px;
    border-radius: 4px;
}
.landing-contact a:hover { color: #6B3A00; }
.landing-contact a:focus-visible {
    outline: 2px solid #A35F00;
    outline-offset: 2px;
}

/* 5개 진입 카드 — auto-fit 을 쓰면 4+1 로 갈라지므로 열 수를 명시한다 */
.landing-menu {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    text-align: left;
}

.landing-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    background: #fff;
    border: 1px solid #EFE6D2;
    border-radius: 12px;
    text-decoration: none;
    /* 그림자 2층: contact + elevation, 광원은 위쪽(Y+ 방향으로 떨어짐) */
    box-shadow:
        0 1px 2px rgba(62, 44, 0, .07),
        0 2px 6px rgba(62, 44, 0, .05);
    transition:
        transform .16s ease-out,
        box-shadow .16s ease-out,
        border-color .16s ease-out;
}
/* 카드는 세로 flex 라 배지가 기본값(stretch)으로 카드 폭 전체를 먹는다.
   알약 모양은 글자를 감싸야 뜻이 통하므로 시작점에 붙여 내용만큼만 차지하게 한다. */
.landing-card > .sg-token-badge {
    align-self: flex-start;
    margin-top: 2px;
}
.landing-card:hover {
    transform: translateY(-2px);
    border-color: #F0C33C;
    box-shadow:
        0 1px 2px rgba(62, 44, 0, .09),
        0 8px 20px rgba(62, 44, 0, .11);
}
.landing-card:focus-visible {
    outline: 2px solid #A35F00;
    outline-offset: 2px;
    border-color: #F0C33C;
}
.landing-card:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(62, 44, 0, .09);
}

/* 아이콘 칩 — 24px 그리드 SVG 를 40px 칩 안에 담는다 */
.landing-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #FFF6DC;
    color: #8A4B00;
    margin-bottom: 4px;
    transition: background-color .16s ease-out, color .16s ease-out;
}
.landing-card-icon svg { display: block; }
.landing-card:hover .landing-card-icon {
    background: #FFE9A8;
    color: #6B3A00;
}

.landing-card-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #3E2C00;
    letter-spacing: -0.01em;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.landing-card-sub {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #7A6647;
    word-break: keep-all;
    overflow-wrap: break-word;
    font-variant-numeric: tabular-nums;
}

/* 클릭 가능하다는 어포던스 — margin-top:auto 라서 부제가 2줄이 되어도
   화살표는 모든 카드에서 같은 높이(카드 하단)에 정렬된다. */
.landing-card-arrow {
    margin-top: auto;
    padding-top: 12px;
    align-self: flex-end;
    display: inline-flex;
    color: #C0A468;
    transition: transform .16s ease-out, color .16s ease-out;
}
.landing-card-arrow svg { display: block; }
.landing-card:hover .landing-card-arrow,
.landing-card:focus-visible .landing-card-arrow {
    color: #8A4B00;
    transform: translateX(3px);
}

/* 스마트 분석은 주력 기능이라 한 단계 강조 */
.landing-card.is-featured {
    border-color: #F5C93B;
    background: #FFFDF4;
}
.landing-card.is-featured .landing-card-icon {
    background: #FFC107;
    color: #3E2C00;      /* 노랑 위에서는 진한 갈색만 판독 가능하다 */
}
.landing-card.is-featured .landing-card-sub {
    color: #6B5535;
    font-weight: 600;
}

/* 5열 → 3열(가운데 2개는 아래줄) → 2열 → 1열 */
@media (max-width: 1000px) {
    .landing-menu { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .main-content { align-items: flex-start; }
    .landing { padding: 40px 16px 56px; }
    .landing-menu { grid-template-columns: repeat(2, 1fr); }
    .landing-contact { margin-bottom: 32px; }
}
/* 560px 이하는 폰 화면이라 1열로 — 2열이면 카드 폭이 190px 아래로 떨어져
   부제가 3줄씩 접힌다 */
@media (max-width: 560px) {
    .landing-menu { grid-template-columns: 1fr; gap: 12px; }
    .landing-card { padding: 16px 20px; }
    .landing-card-arrow { padding-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .landing-card,
    .landing-card-icon,
    .landing-card-arrow {
        transition: none;
    }
    .landing-card:hover { transform: none; }
    .landing-card:hover .landing-card-arrow { transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   랜딩 — 도구 카탈로그 한 덩어리만 둔다.
   히어로(업로드 드롭존)·사용법 3단계는 걷어냈다: 방문자가 어떤 도구가
   있는지부터 알게 하는 편이 낫다는 판단.
   ══════════════════════════════════════════════════════════════ */

/* .main-content 중앙정렬은 히어로만 있던 시절의 것이라 해제한다 */
.main-content { align-items: stretch; }
.landing { padding: 56px 20px 72px; }

.lp-h1 {
    font-size: clamp(1.5rem, 3.2vw, 2.125rem);
    font-weight: 800;
    line-height: 1.35;
    color: #3E2C00;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    word-break: keep-all;
    overflow-wrap: break-word;
}
/* 브랜드명만 강조 — 배경 대비 7:1 이상이라 단색으로도 충분히 눈에 띈다 */
.lp-h1 .brand { color: #A35F00; }

.lp-h1-sub {
    max-width: 620px;
    margin: 0 auto 36px;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #6B5F4A;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ── 도구 ──────────────────────────────────────────────────── */
/* 랜딩에 남은 유일한 콘텐츠라 카드를 키운다. 4열이면 기능 목록이 한 줄에
   한 단어씩 접혀서 읽히지 않으므로 2열로 넓게 간다. */
.lp-tools { margin-bottom: 56px; }
.lp-tools .landing-menu {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.lp-tools .landing-card { padding: 28px 28px 22px; border-radius: 16px; }
.lp-tools .landing-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    margin-bottom: 6px;
}
.lp-tools .landing-card-icon svg { width: 28px; height: 28px; }
.lp-tools .landing-card-title { font-size: 1.375rem; }
.lp-tools .landing-card-sub { font-size: 0.9375rem; line-height: 1.65; }

/* 하위 기능 목록 — 들어가 보지 않아도 무엇이 들어 있는지 알게 하는 부분.
   칩을 노랑으로 채우면 아래 토큰 표시와 생김새가 같아져 둘 다 '태그'로 읽힌다.
   칩은 흰 바탕 + 얇은 테두리로 낮추고, 강조는 제목 > 설명 > 칩 순으로 둔다. */
.landing-card-feats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 2px;
    padding: 0;
    list-style: none;
}
.landing-card-feats li {
    padding: 5px 11px;
    border-radius: 8px;
    background: #FFFCF3;
    border: 1px solid #EFE6D2;
    color: #6B5535;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.45;
    word-break: keep-all;
    transition: border-color .16s ease-out, background-color .16s ease-out;
}
.landing-card:hover .landing-card-feats li {
    background: #FFF9E8;
    border-color: #EFDDAE;
}

/* ── 카드 바닥 줄: 비용 안내 + 화살표 ─────────────────────────
   토큰 값을 기능 칩과 같은 알약으로 두면 '또 하나의 기능'처럼 읽혔다.
   구분선 아래 메타 정보로 내리고, 무엇에 드는 값인지(엑셀 다운로드)를 함께 적는다. */
.landing-card-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #F3EDDF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* 단가는 /api/downloads/cost 응답이 와야 채워진다. 못 받으면 배지 클래스가
   붙지 않으므로, 라벨만 덩그러니 남지 않도록 줄 자체를 감춘다. */
.landing-card-cost { display: none; }
.landing-card-cost:has(.sg-token-badge) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.landing-card-cost-icon { flex: 0 0 auto; color: #C2A464; }
.landing-card-cost-label {
    font-size: 0.8125rem;
    color: #8A7A5E;
    letter-spacing: -0.01em;
}

/* 배지에서 알약 껍데기를 벗기고 숫자만 진하게 — 값이 눈에 먼저 들어오게 */
.landing-card .sg-token-badge {
    padding: 0;
    border: 0;
    background: none;
    color: #8A4B00;
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.landing-card .sg-token-badge-free { color: #1E6B3A; }
.landing-card.is-featured .landing-card-cost-icon { color: #B98C2E; }

/* 화살표는 이제 바닥 줄의 오른쪽 칸이라 자체 정렬값이 필요 없다 */
.landing-card-foot .landing-card-arrow {
    margin-top: 0;
    padding-top: 0;
    align-self: center;
}

/* ── 문의 ──────────────────────────────────────────────────── */
.lp-contact { text-align: center; padding-bottom: 8px; }
.lp-support {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 22px;
    border: 1px solid #EFE6D2;
    border-radius: 999px;
    background: #fff;
    color: #3E2C00;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .16s ease-out, background-color .16s ease-out;
}
.lp-support:hover { border-color: #FFC107; background: #FFFDF4; }
.lp-support:focus-visible { outline: 2px solid #A35F00; outline-offset: 2px; }
.lp-contact .landing-contact { margin: 18px 0 0; }

@media (max-width: 760px) {
    .landing { padding: 36px 16px 56px; }
    .lp-tools .landing-menu { grid-template-columns: 1fr; gap: 14px; }
    .lp-tools .landing-card { padding: 22px 20px 18px; }
    .lp-tools .landing-card-title { font-size: 1.1875rem; }
    .lp-tools .landing-card-sub { font-size: 0.875rem; }

    /* 폰에서 쭉 내리면 본문 끝에서 한 번 멈추고, 한 번 더 내려야 푸터가 나온다.
       사업자 정보·약관이 도구를 보던 흐름에 곧바로 딸려 오지 않게 하는 장치.
       mandatory 는 중간 스크롤까지 잡아채 읽기를 방해하므로 proximity 로,
       스냅 지점 근처에서만 걸리게 한다. (이 파일은 랜딩 전용이라 도구
       페이지의 긴 본문 스크롤에는 영향이 없다.) */
    html { scroll-snap-type: y proximity; }
    .landing { scroll-snap-align: end; }     /* 본문 끝 = 화면 아래끝 → 푸터는 아직 안 보임 */
    body > .footer { scroll-snap-align: start; }  /* 다시 내리면 푸터가 화면 위로 붙는다 */
}

@media (prefers-reduced-motion: reduce) {
    .lp-support { transition: none; }
    /* 스냅도 의도치 않은 움직임이라 끈다 */
    html { scroll-snap-type: none; }
}