/* app/static/css/landing.css
   공개 랜딩 페이지 전용 스타일 (Figma node 10829:26471).
   색상은 colors.css 토큰 우선 + hex 폴백. 공통 요소(.icon 등)는 common.css 재사용.
   navbar·footer 는 landing_layout.css 소관 — 여기서는 본문 섹션만 스타일링. */

/* ── 공통 레이아웃 ─────────────────────────────────────────────── */
/* landing_layout 의 .main-container 가 display:flex(row) 이므로
   전폭 단일 컬럼 래퍼로 세로 스택을 복원한다. */
.lp-root {
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    align-self: stretch;
    /* ⚠️ overflow-x:hidden 금지 — .lp-root 가 스크롤 컨테이너가 되어 해시(앵커) 스크롤이 깨진다.
       가로 오버플로는 Hero 자체 overflow:hidden + html{overflow-x:hidden} 로 이미 방지됨. */
}

.lp-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.lp-section {
    width: 100%;
    min-height: 800px;
    padding: 80px;
    scroll-margin-top: 88px; /* 상단 navbar 높이 보정(앵커 스크롤) */
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-section-coolgrey { background: var(--Background-BGCoolGrey, #F4F6FA); padding-bottom: 120px;}
.lp-section-white    { background: var(--Background-BGWhite, #FFFFFF); }
.lp-section-navy     { background: var(--Background-BGNavy, #002D58); }
.lp-section-deepnavy { background: var(--Primary-950, #0A1F42); min-height: 160px; }

.lp-heading {
    font-family: var(--Font-Family);
    font-weight: 700;
    font-size: 40px;
    line-height: 52px;
    letter-spacing: -1px;
    color: var(--Text-Grey-Title, #232222);
    margin: 0 0 80px;
}
.lp-heading-center { text-align: center; }

/* ── 버튼 ─────────────────────────────────────────────────────── */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--Font-Family);
    font-weight: 500;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease;
}
.lp-btn-primary {
    background: var(--Fill-Primary-Main, #0097D5);
    color: #fff;
    border: none;
}
.lp-btn-primary:hover { background: var(--Blue-600, #0079AA); color: #fff; }
.lp-btn-ghost {
    background: transparent;
    color: #fff;
    border: 1px solid var(--Fill-White, #FFFFFF);
}
.lp-btn-ghost:hover { 
    color: var(--Text-Blue-Main, #0097D5);
    background: #FFF;
 }
.lp-btn-block { width: 100%; }

/* ============================================================
   Hero
   ============================================================ */
.lp-hero {
    position: relative;
    width: 100%;
    min-height: 1080px;
    background: var(--Background-BGNavy, #002D58);
    overflow: hidden;
    display: flex;
    align-items: center;
}
.lp-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.lp-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* 하단 페이드(Figma 12567:57136) — Hero 아래 299px(높이 1080 기준 27.7%)를 바로 아래 튜토리얼 섹션
   배경(Primary-950)으로 이어지게. 사진·오버레이 위, 본문 아래 */
.lp-hero-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(120px, 27.7%, 299px);
    background: linear-gradient(180deg, rgba(10, 31, 66, 0) 0%, var(--Primary-950, #0A1F42) 100%);
    z-index: 1;
    pointer-events: none;
}
.lp-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 120px 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}
.lp-hero-text { max-width: 698px; flex-shrink: 0; }
.lp-hero-title {
    font-family: var(--Font-Family);
    font-weight: 500;
    font-size: clamp(40px, 5vw, 80px);
    line-height: 120%;
    color: var(--Text-White, #FFF);
    margin: 0 0 44px;
}
.lp-hero-title-line { display: block; }
.lp-hero-title strong { font-weight: 700; }
.lp-hero-sub {
    max-width: 562px;
    font-family: var(--Font-Family);
    font-weight: 400;
    font-size: clamp(18px, 1.8vw, 30px);
    line-height: 150%;
    color: var(--Text-White, #FFF);
    margin: 0 0 86px;
}
.lp-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.lp-hero-actions .lp-btn {
    width: 250px;
    height: 66px;
    max-width: 46vw;
    text-align: center;
    font-size: 22px;
    font-weight: 400;
    line-height: 150%;
}

/* Hero 우측 데모 프리뷰(글래스 카드) */
.lp-hero-graphic {
    position: relative;
    width: 620px;
    height: 560px;
    flex-shrink: 0;
}
.lp-glass {
    position: absolute;
    background: rgba(255, 255, 255, .10);
    border-top: 1px solid rgba(255, 255, 255, 0.80);
    border-bottom: 1px solid rgba(255, 255, 255, 0.80);
    border-radius: 14px;
    padding: 20px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
}
.lp-glass-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    margin-bottom: 22px;
}
.lp-card-matching {
    top: 0;
    left: 50px;
    width: 441px;
    text-align: center;
}
.lp-card-shipment { top: 350px; left: -110px ; }
.lp-card-doc      { top: 450px; left: 390px; }

.lp-donut-row { display: flex; gap: 70px; justify-content: center; }
.lp-donut-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lp-donut-label { font-size: 14px; font-weight: 500; line-height: 150%; }
/* 도넛 차트 — Figma 시안(굵은 링: 진한 arc + 흐린 트랙, round cap). SVG 스트로크 아크. */
.lp-donut {
    position: relative;
    width: 110px;
    height: 110px;
}
.lp-donut-svg { display: block; width: 100%; height: 100%; }
.lp-donut-track {
    fill: none;
    stroke: rgba(0, 45, 88, .3);        /* Figma: #002D58 opacity 0.3 */
    stroke-width: 11;
}
.lp-donut-arc {
    fill: none;
    stroke: #002D58;                     /* Figma FCL Space: #002D58 (진한 arc) */
    stroke-width: 11;
    stroke-linecap: round;
    transform: rotate(-90deg);          /* 12시 방향에서 시계방향 시작 */
    transform-origin: center;
}
/* LCL Demand 차트 — 채움 arc = #005DB6 (Figma node 10829:26726) */
.lp-donut-arc--lcl { stroke: #005DB6; }
.lp-donut span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: 800;
    line-height: 150%;
}

/* 카드 연결 점선 Vector (Figma Graphic 내 카드 사이 연결선 + 끝점) */
.lp-connectors {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;                          /* 카드(뒤 DOM) 아래에 깔려 카드 사이 간격에서 보임 */
    pointer-events: none;
    overflow: visible;
}
.lp-conn-line {
    fill: none;
    stroke: rgba(255, 255, 255, .6);
    stroke-width: 1.5;
    stroke-dasharray: 3 4;
    stroke-linecap: round;
}
/* 끝점(dot) 레이어 — 카드 위(z-index)로 올라와 카드 표면에 보이게 */
.lp-conn-dots {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;                          /* 카드(z-auto) 보다 위 */
    pointer-events: none;
    overflow: visible;
}
.lp-conn-dot { fill: #fff; }

.lp-status-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    width: 237px;
    flex-direction: column;
    gap: 10px;
}
.lp-status-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    color: var(--Text-White, #FFF);
    font-family: var(--Font-Family);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.40);
}
.lp-status-list li:last-child { border-bottom: none; padding-bottom: unset; }
.lp-status-list li span b { font-weight: 700; }
.lp-badge {
    flex-shrink: 0;
    width: 60px;
    height: 20px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    font-style: normal;
    line-height: 150%;
    color: #fff;
}
.lp-badge-blue   { background: rgba(0, 151, 213, .50); }
.lp-badge-green  { background: rgba(30, 142, 62, .50); }
.lp-badge-orange { background: rgba(213, 146, 0, .50); }

/* ============================================================
   핵심 가치 — 원형 3열
   ============================================================ */
/* 원형 3개(360*3 + gap)를 한 줄에 담기 위해 이 섹션만 컨테이너 폭 확장 */
#value .lp-container { max-width: 1280px; }
.lp-value-row {
    display: flex;
    gap: 48px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.lp-value-circle {
    position: relative;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: var(--Background-BGWhite, #FFFFFF);
    /* border: 2px dashed var(--Fill-Primary-300, #66C1E6); */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
}
.lp-value-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 0 40px;
}
.lp-value-tag {
    font-size: 16px;
    font-weight: 500;
    color: var(--Text-Blue-Main, #0097D5);
    line-height: var(--LIne-Height-24, 24px);
    letter-spacing: -0.4px;
}
.lp-value-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--Text-Grey-Title, #232222);
    line-height: 40px;
    letter-spacing: -0.8px;
}
.lp-value-desc {
    font-size: 16px;
    font-weight: 500;
    line-height: var(--LIne-Height-24, 24px);
    color: var(--Text-Grey-800, #2E2E2E);
    letter-spacing: -0.4px;
}

/* ============================================================
   강력한 기능 — 카드 그리드
   ============================================================ */
.lp-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
}
.lp-feature-card {
    background: var(--Fill-CoolGrey-100, #F4F6FA);
    border-radius: 8px;
    padding: 24px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.lp-feature-icon { color: var(--Fill-Primary-Main, #0097D5); }
.lp-feature-title {
    font-size: 20px;
    font-weight: 700;
    line-height: var(--LIne-Height-30, 30px);
    letter-spacing: -0.5px;
    color: var(--Text-Grey-800, #2E2E2E);
    margin: 0;
}
.lp-feature-desc {
    font-size: 16px;
    font-weight: 500;
    line-height: var(--LIne-Height-24, 24px);
    letter-spacing: -0.4px;
    color: var(--Text-Grey-500, #6E6E6E);
    margin: 0;
}

/* ============================================================
   FAQ 아코디언
   ============================================================ */
.lp-faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}
.lp-faq-item {
    background: var(--Fill-White, #FFFFFF);
    border-radius: 8px;
    overflow: hidden;
}
.lp-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--Font-Family);
    font-size: 18px;
    font-weight: 700;
    line-height: var(--LIne-Height-24, 24px);
    letter-spacing: -0.45px;
    color: var(--Text-Grey-800, #2E2E2E);
}
.lp-faq-arrow {
    flex-shrink: 0;
    color: var(--Text-Grey-800, #2E2E2E);
    transition: transform .2s ease;
}
.lp-faq-item.is-open .lp-faq-arrow { transform: rotate(180deg); }
/* 아코디언 본문: 콘텐츠 실제 높이를 JS 로 측정해 --faq-h(px)에 주입 →
   height 트랜지션으로 부드럽게 펼침(toss FAQ 패턴). max-height 고정 캡 방식 대체. */
.lp-faq-a {
    height: var(--faq-h, 0px);
    overflow: hidden;
    transition: height .2s ease;
}
.lp-faq-a p {
    margin: 0;
    padding: 0 40px 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: var(--LIne-Height-24, 24px);
    letter-spacing: -0.4px;
    color: var(--Text-Grey-500, #6E6E6E);
}

/* ============================================================
   CTA / 상담신청
   ============================================================ */
.lp-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
}
/* .lp-cta-text { flex: 1 1 420px; } */
.lp-cta-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 52px;
    letter-spacing: -1px;
    color: #fff;
    margin: 0 0 16px;
}
.lp-cta-sub {
    font-size: 20px;
    font-weight: 500;
    line-height: var(--LIne-Height-24, 24px);
    letter-spacing: -0.5px;
    color: var(--Text-Grey-300, #A8A8A8);
    margin: 0;
}
.lp-cta-card {
    flex: 0 0 440px;
    max-width: 100%;
    background: var(--Fill-White, #FFFFFF);
    border-radius: 16px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.lp-field { display: flex; flex-direction: column; gap: 8px; }
.lp-field label {
    font-size: 16px;
    font-weight: 500;
    line-height: var(--LIne-Height-24, 24px);
    letter-spacing: -0.4px;
    color: var(--Text-Grey-800, #2E2E2E);
}
/* 이메일 입력(.form-group-control)·역할 선택(.custom-select)은 공통 스타일 그대로 사용
   — 테두리·hover·focus 를 여기서 덮어쓰지 않는다 */
.lp-field .custom-select { width: 100%; }
/* 드롭다운이 카드 안에 갇혀 보이지 않도록 — 카드 밖으로 확실히 떠서 펼쳐지게
   (행 높이·오프셋·그림자 강화). CTA 폼(#lpConsultForm)의 역할 선택 전용. */
.lp-field .custom-select .select-items {
    top: calc(100% + 6px);
    box-shadow: 0 8px 24px rgba(0, 45, 88, 0.18);
}
.lp-field .custom-select .select-items div { padding: 11px 12px; }
.lp-cta-submit-wrap { display: flex; flex-direction: column; gap: 8px; }
.lp-cta-submit-wrap .lp-btn { height: 40px; font-weight: 700; font-size: 16px; line-height: var(--LIne-Height-24, 24px); letter-spacing: -0.4px; }
.lp-cta-consent {
    font-size: 14px;
    font-weight: 400;
    line-height: var(--LIne-Height-22, 22px);
    letter-spacing: -0.35px;
    color: var(--Text-Grey-500, #6E6E6E);
    margin: 0;
}

/* ============================================================
   반응형
   ============================================================ */
/* Hero 그래픽: 카드가 텍스트와 겹치지 않는 폭(≥1500px)에서만 표시 — 잘림/겹침 방지.
   (shipment 카드 left:-110 등 카드가 좌우로 퍼져 있어 1500px 미만에선 텍스트와 충돌) */
@media (max-width: 1499px) {
    .lp-hero-graphic { display: none; }
}
@media (max-width: 1200px) {
    .lp-hero-inner { justify-content: flex-start; padding: 100px 48px; }
}
/* 태블릿 — 기능 2열, CTA 세로 스택 */
@media (max-width: 1024px) {
    .lp-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-cta { flex-direction: column; align-items: stretch; }
    .lp-cta-card { flex-basis: auto; width: 100%; }
    .lp-cta-title { font-size: 30px; }
}

/* ── 모바일 (Figma node 10853:27697) ─────────────────────────────
   헤더=로고+ENG+햄버거(landing_layout 모바일 모드) / Hero=중앙정렬 단일 CTA(그래픽 없음)
   / 핵심가치 원형 세로 스택 / 기능 1열 / CTA 세로 스택(폼 전폭) */
@media (max-width: 767px) {
    .lp-container { padding-left: 0; padding-right: 0; }
    .lp-section { padding: 80px 20px; min-height: unset; }
    .lp-section-coolgrey { padding-top: 80px; padding-bottom: 80px; }
    .lp-heading { font-size: 24px; line-height: 150%; letter-spacing: -0.6px; margin: 0 0 40px; }

    /* Hero — 중앙정렬 + 단일 버튼(무료로 시작하기) */
    .lp-hero { min-height: 650px; }
    /* 배경: Figma 모바일(node 10853:27868) — 선수(bow) 중심으로 확대된 크롭 + 다크 오버레이 */
    .lp-hero-bg { background-size: auto 118%; background-position: 72% 42%; }
    .lp-hero-overlay { background: rgba(0, 9, 17, .5); }
    .lp-hero-inner { justify-content: center; padding: 80px 20px; }
    .lp-hero-text { max-width: 100%; text-align: center; height: 480px; display: flex; flex-direction: column; padding-top: 80px;}
    .lp-hero-title { font-size: 35px; margin: 0 0 30px; }
    .lp-hero-sub { font-size: 16px; margin: 0 0 220px; }
    .lp-hero-actions { justify-content: center; width: 100%; }
    .lp-hero-actions .lp-btn-ghost { display: none; }            /* Figma 모바일: 단일 CTA */
    .lp-hero-actions .lp-btn-primary { width: 250px; max-width: 100%; height: 48px; font-size: 22px; }

    /* 핵심 가치 — 원형 세로 스택 */
    #value .lp-container { max-width: 100%; }
    .lp-value-row { flex-direction: column; gap: 32px; }
    .lp-value-circle { width: 280px; height: 280px; max-width: 100%; }
    .lp-value-inner { padding: 0 20px; }
    .lp-value-title { font-size: 24px; font-weight: 600; line-height: 140%; letter-spacing: -0.6px; }
    .lp-value-desc { font-size: 14px; line-height: 135%; letter-spacing: -0.35px; }

    /* 강력한 기능 — 카드 1열 */
    .lp-feature-grid { grid-template-columns: 1fr; gap: 16px; }
    .lp-feature-card { min-height: 0; padding: 16px; gap: 8px; }
    .lp-feature-icon { font-size: 24px; }
    .lp-feature-title { font-size: 16px; line-height: var(--LIne-Height-24, 24px); letter-spacing: -0.4px; }
    .lp-feature-desc { font-size: 14px; line-height: var(--LIne-Height-22, 22px); letter-spacing: -0.35px; }

    /* FAQ */
    .lp-faq-q { font-size: 16px; padding: 10px; letter-spacing: -0.4px; }
    .lp-faq-a p { padding: 0 24px 10px; font-size: 14px; }

    /* CTA — 세로 스택, 중앙 텍스트, 폼 전폭 */
    .lp-cta { gap: 40px; }
    .lp-cta-text { text-align: center; }
    .lp-cta-title { font-size: 24px; line-height: 150%; letter-spacing: -0.6px; margin: 0 0 8px;}
    .lp-cta-sub { font-size: 14px; line-height: var(--LIne-Height-22, 22px); letter-spacing: -0.35px; }
    .lp-cta-card { padding: 16px; gap: 16px; }
    .lp-cta-submit-wrap { margin-top: 8px;}
}

/* ── 히어로 카드 순차 등장 + 커넥터 연결 인터랙션 ──
   순서: Matching(도넛) → line1 그려짐 → Shipment 카드 열림 → line2 그려짐 → Document 카드 열림.
   JS(landing.html)가 .is-seq 로 초기 은닉 후 타임라인대로 클래스 부여. 무JS/reduced-motion=최종 상태. */
.lp-conn-line { transition: opacity .5s ease !important; }
.lp-conn-dot  { transform-box: fill-box !important; transform-origin: center !important; }

/* 초기(시퀀스 대기): 선/끝점 은닉 + Shipment·Document 카드 은닉(Matching 은 노출 유지) */
.lp-hero-graphic.is-seq .lp-conn-line { opacity: 0; }
.lp-hero-graphic.is-seq .lp-conn-dot  { transform: scale(0); }
.lp-hero-graphic.is-seq .lp-card-shipment,
.lp-hero-graphic.is-seq .lp-card-doc {
    opacity: 0 !important;
    transform: translateY(16px) scale(.96) !important;
}

/* 카드 열림(팝업 느낌) — 은닉 규칙(.is-seq 하위, 클래스3)보다 높은 우선순위 위해 .is-seq 로 스코프 */
.lp-hero-graphic.is-seq .lp-card-shipment.is-card-open,
.lp-hero-graphic.is-seq .lp-card-doc.is-card-open {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity .35s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1) !important;
}

/* 커넥터 선 그려짐(점선이 시작점에서 흘러들어와 이어짐) */
.lp-hero-graphic.is-seq .lp-conn-line.is-drawn {
    opacity: 1 !important;
    animation: lp-conn-flow .45s ease-out both !important;
}
/* 끝점 dot pop */
.lp-hero-graphic.is-seq .lp-conn-dot.is-pop {
    animation: lp-conn-pop .35s cubic-bezier(.34, 1.56, .64, 1) both !important;
}
@keyframes lp-conn-flow { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@keyframes lp-conn-pop  { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* html.lp-force-motion(랜딩 애니메이션 강제)이면 reduce 무시 */
@media (prefers-reduced-motion: reduce) {
    html:not(.lp-force-motion) .lp-hero-graphic.is-seq .lp-conn-line,
    html:not(.lp-force-motion) .lp-hero-graphic.is-seq .lp-card-shipment,
    html:not(.lp-force-motion) .lp-hero-graphic.is-seq .lp-card-doc { opacity: 1; transform: none; }
    html:not(.lp-force-motion) .lp-hero-graphic.is-seq .lp-conn-dot  { transform: none; }
    html:not(.lp-force-motion) .lp-conn-line.is-drawn { animation: none; }
    html:not(.lp-force-motion) .lp-conn-dot.is-pop    { animation: none; }
}

/* ── 스크롤 진입 시 텍스트가 아래에서 위로 올라오는 인터랙션(reveal-up) ──
   JS(landing.html)가 대상에 .lp-reveal 부여 후 진입 시 .is-in 으로 재생.
   무JS/reduced-motion = 최종 상태(마크업 그대로) 노출(단, html.lp-force-motion 이면 reduce 무시). */
.lp-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
                transform .7s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}
.lp-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html:not(.lp-force-motion) .lp-reveal { opacity: 1; transform: none; transition: none; }
}