/* ─────────────────────────────────────────────────────────────
   오토팜허브 소개 페이지(landing.html) 전용 스타일 — 2026-07-30 신설

   ★style.css(대시보드)·member.css(회원화면)와 완전히 분리되어 있다.
     소개 페이지를 아무리 고쳐도 로그인 후 화면들은 영향받지 않는다.
   ★클래스 접두사 lp- (landing page).
   ★라이트 전용이다. 소개 페이지는 다크모드 토글이 없다(대시보드에만 있음).
   ★색은 오토모드(automode.kr)에서 실측한 라벤더 계열을 그대로 쓴다 — 같은 회사
     서비스라는 인상이 신뢰에 유리하고, 오토모드 방문자가 자연스럽게 넘어온다.
     보조색만 '성장'을 뜻하는 초록을 소량 얹는다.
   ───────────────────────────────────────────────────────────── */

.lp {
    --lp-primary: #5b46e0;
    --lp-primary-deep: #3a2aa8;
    --lp-primary-light: #7a5cf0;
    --lp-grow: #12a06a;          /* 보조색 — 성장/수확. 아주 조금만 쓴다 */
    --lp-ink: #1c1830;
    --lp-ink-soft: #5a5470;
    --lp-ink-dim: #8b849f;
    --lp-line: #ece9f6;
    --lp-lav-50: #f7f5fe;
    --lp-lav-100: #efeafd;
    --lp-radius: 18px;
    --lp-radius-sm: 12px;
    --lp-maxw: 1080px;

    color: var(--lp-ink);
    background: #fff;
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.lp *,
.lp *::before,
.lp *::after { box-sizing: border-box; }

.lp img { max-width: 100%; }

.lp-wrap {
    max-width: var(--lp-maxw);
    margin: 0 auto;
    padding: 0 24px;
}

/* ── 상단 바 ── */
.lp-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--lp-line);
}

.lp-nav-inner {
    max-width: var(--lp-maxw);
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.lp-logo {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lp-ink);
    text-decoration: none;
}

.lp-logo b { color: var(--lp-primary); }

.lp-nav-links {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lp-nav-links a {
    font-size: 15px;
    color: var(--lp-ink-soft);
    text-decoration: none;
    padding: 9px 12px;
    border-radius: 9px;
}

.lp-nav-links a:hover { color: var(--lp-ink); background: var(--lp-lav-50); }

/* ── 버튼 ── */
.lp-btn {
    display: inline-block;
    padding: 13px 24px;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.lp-btn-primary {
    background: var(--lp-primary);
    color: #fff;
}

.lp-btn-primary:hover { background: var(--lp-primary-deep); }

.lp-btn-ghost {
    background: #fff;
    color: var(--lp-ink);
    border-color: var(--lp-line);
}

.lp-btn-ghost:hover { border-color: var(--lp-primary); color: var(--lp-primary); }

.lp-nav-links .lp-btn { padding: 10px 18px; font-size: 14px; }
.lp-nav-links .lp-btn-primary { color: #fff; }
.lp-nav-links .lp-btn-primary:hover { color: #fff; background: var(--lp-primary-deep); }

/* ── 히어로 ── */
.lp-hero {
    background:
        radial-gradient(1000px 420px at 50% -140px, var(--lp-lav-100), transparent 70%),
        #fff;
    padding: 84px 0 76px;
    text-align: center;
}

.lp-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.09em;
    color: var(--lp-primary);
    background: var(--lp-lav-100);
    border-radius: 999px;
    padding: 7px 15px;
    margin-bottom: 22px;
}

.lp-hero h1 {
    font-size: 46px;
    line-height: 1.28;
    letter-spacing: -0.03em;
    font-weight: 800;
    margin: 0 0 20px;
}

.lp-hero h1 .lp-hl {
    color: var(--lp-primary);
}

.lp-hero-sub {
    font-size: 18px;
    color: var(--lp-ink-soft);
    margin: 0 auto 34px;
    max-width: 640px;
    line-height: 1.75;
}

.lp-hero-cta {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lp-hero-note {
    margin-top: 20px;
    font-size: 13px;
    color: var(--lp-ink-dim);
}

/* ── 섹션 공통 ── */
.lp-section { padding: 78px 0; }
.lp-section-alt { background: var(--lp-lav-50); }

.lp-sec-head {
    text-align: center;
    margin-bottom: 46px;
}

/* ★섹션마다 WHY / FEATURES / HOW IT WORKS 같은 영어 라벨을 붙여두면 어디서 본 듯한
   템플릿 인상이 강해져서 전부 뺐다(2026-07-30 미르 지적). 제목이 알아서 말하게 둔다. */

.lp-sec-head h2 {
    font-size: 31px;
    line-height: 1.38;
    letter-spacing: -0.025em;
    font-weight: 800;
    margin: 0;
}

.lp-sec-head p {
    margin: 14px auto 0;
    max-width: 620px;
    color: var(--lp-ink-soft);
    font-size: 16px;
}

/* ── 문제 제기 ── */
.lp-problem {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.lp-problem div {
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-sm);
    padding: 24px 22px;
    font-size: 15px;
    color: var(--lp-ink-soft);
    line-height: 1.7;
}

.lp-problem strong {
    display: block;
    color: var(--lp-ink);
    font-size: 16px;
    margin-bottom: 7px;
}

/* ── 기능 카드 ── */
.lp-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.lp-card {
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    padding: 28px 24px;
}

/* 이모지 아이콘을 6개 나란히 박으면 '템플릿'처럼 보여서 뺐다(2026-07-30 미르 지적).
   대신 제목 위에 짧은 강조선 하나만 둔다 — 조용하고 덜 꾸민 인상. */
.lp-card h3 {
    font-size: 17.5px;
    font-weight: 700;
    margin: 0 0 11px;
    letter-spacing: -0.015em;
    padding-top: 16px;
    position: relative;
}

.lp-card h3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--lp-primary);
}

.lp-card p {
    margin: 0;
    font-size: 14.5px;
    color: var(--lp-ink-soft);
    line-height: 1.72;
}

/* ── 작동 방식 3단계 ── */
.lp-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    counter-reset: lpstep;
}

.lp-step {
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    padding: 30px 24px;
    position: relative;
}

.lp-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--lp-primary);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 15px;
}

.lp-step h3 {
    font-size: 17px;
    margin: 0 0 9px;
    font-weight: 700;
}

.lp-step p {
    margin: 0;
    font-size: 14.5px;
    color: var(--lp-ink-soft);
    line-height: 1.72;
}

/* ── 추천 대상 ── */
.lp-who {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.lp-who li {
    list-style: none;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-sm);
    padding: 17px 20px 17px 48px;
    font-size: 15.5px;
    position: relative;
    color: var(--lp-ink);
}

.lp-who li::before {
    content: "✓";
    position: absolute;
    left: 19px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lp-grow);
    font-weight: 800;
}

.lp-who { margin: 0; padding: 0; }

/* ── FAQ ── */
.lp-faq { max-width: 760px; margin: 0 auto; }

.lp-faq details {
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-sm);
    margin-bottom: 10px;
    overflow: hidden;
}

.lp-faq summary {
    cursor: pointer;
    padding: 19px 22px;
    font-size: 16px;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.lp-faq summary::after {
    content: "+";
    margin-left: auto;
    color: var(--lp-primary);
    font-size: 20px;
    font-weight: 400;
}

.lp-faq details[open] summary::after { content: "−"; }

.lp-faq-body {
    padding: 0 22px 20px;
    color: var(--lp-ink-soft);
    font-size: 15px;
    line-height: 1.78;
}

/* ── 마무리 CTA ── */
.lp-cta {
    background: linear-gradient(135deg, var(--lp-primary), var(--lp-primary-deep));
    color: #fff;
    text-align: center;
    padding: 68px 24px;
}

.lp-cta h2 {
    font-size: 29px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}

.lp-cta p {
    margin: 0 0 28px;
    font-size: 16px;
    opacity: 0.9;
}

.lp-cta .lp-btn-ghost {
    background: #fff;
    color: var(--lp-primary);
    border-color: #fff;
}

.lp-cta .lp-btn-ghost:hover { background: var(--lp-lav-100); color: var(--lp-primary-deep); }

/* ── 푸터 ── */
.lp-footer {
    background: #fff;
    border-top: 1px solid var(--lp-line);
    padding: 42px 0 56px;
    font-size: 13px;
    color: var(--lp-ink-dim);
    line-height: 1.9;
}

.lp-footer-links {
    margin-bottom: 16px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.lp-footer-links a {
    color: var(--lp-ink-soft);
    text-decoration: none;
    font-weight: 600;
}

.lp-footer-links a:hover { color: var(--lp-primary); }

.lp-footer-biz { margin: 0; }

/* ── 모바일 ── */
@media (max-width: 900px) {
    .lp-features,
    .lp-steps,
    .lp-problem { grid-template-columns: 1fr; }
    .lp-who { grid-template-columns: 1fr; }
    .lp-hero h1 { font-size: 33px; }
    .lp-hero-sub { font-size: 16px; }
    .lp-sec-head h2 { font-size: 25px; }
    .lp-section { padding: 58px 0; }
    .lp-hero { padding: 58px 0 52px; }
    .lp-nav-links a:not(.lp-btn) { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   문서형 페이지(이용약관·개인정보처리방침) — 2026-07-31 신설

   ★새 CSS 파일을 만들지 않고 여기 붙인 이유: 약관/개인정보/향후 문서 페이지가
     전부 같은 모양이라 한 곳에서 고치는 게 유지보수에 낫다(소개 페이지 스타일과
     같은 파일 = 상단바·푸터가 자동으로 같은 모양을 유지한다).
   ★긴 글이라 본문 폭을 소개 페이지(1080px)보다 좁게(760px) 잡는다 — 한 줄이
     너무 길면 읽다가 줄을 놓친다.
   ───────────────────────────────────────────────────────────── */

.lp-doc {
    max-width: 760px;
    margin: 0 auto;
    padding: 56px 24px 80px;
}

.lp-doc-head {
    padding-bottom: 22px;
    margin-bottom: 34px;
    border-bottom: 2px solid var(--lp-line);
}

.lp-doc-head h1 {
    font-size: 31px;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
}

.lp-doc-head p {
    margin: 0;
    color: var(--lp-ink-dim);
    font-size: 14px;
}

.lp-doc h2 {
    font-size: 19px;
    letter-spacing: -0.01em;
    margin: 40px 0 12px;
    padding-left: 12px;
    border-left: 4px solid var(--lp-primary);
    line-height: 1.4;
}

.lp-doc h2:first-of-type { margin-top: 0; }

.lp-doc p,
.lp-doc li {
    color: var(--lp-ink-soft);
    font-size: 15.5px;
    line-height: 1.85;
}

.lp-doc p { margin: 0 0 12px; }

.lp-doc ul,
.lp-doc ol { margin: 0 0 14px; padding-left: 22px; }

.lp-doc li { margin-bottom: 6px; }

.lp-doc strong { color: var(--lp-ink); }

/* 표 — 개인정보 수집항목·보유기간 등에 쓴다 */
.lp-doc table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
    font-size: 14.5px;
}

.lp-doc th,
.lp-doc td {
    border: 1px solid var(--lp-line);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    color: var(--lp-ink-soft);
}

.lp-doc th {
    background: var(--lp-lav-50);
    color: var(--lp-ink);
    font-weight: 600;
    white-space: nowrap;
}

/* 강조 상자 — "쉽게 말하면" 같은 요약을 담는다 */
.lp-doc-note {
    background: var(--lp-lav-50);
    border: 1px solid var(--lp-lav-100);
    border-radius: var(--lp-radius-sm);
    padding: 16px 18px;
    margin: 0 0 18px;
}

.lp-doc-note p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .lp-doc { padding: 38px 20px 64px; }
    .lp-doc-head h1 { font-size: 25px; }
    .lp-doc h2 { font-size: 17.5px; margin-top: 32px; }
    .lp-doc p, .lp-doc li { font-size: 15px; }
    .lp-doc table { font-size: 13.5px; }
    .lp-doc th, .lp-doc td { padding: 8px 9px; }
}

/* ─────────────────────────────────────────────────────────────
   요금제 페이지 — 2026-08-02 신설
   ★플랜은 2개(PRO/MAX). 3개에서 줄인 것이므로 카드가 커도 어색하지 않게 2열 고정.
   ★"첫 달"과 "둘째 달부터"를 나눠 보여준다 — 개설비 때문에 첫 달 금액이 튀는데,
     이걸 숨기면 상담 때 반드시 문제가 된다(정직하게 먼저 보여주는 쪽이 신뢰에 낫다).
   ───────────────────────────────────────────────────────────── */

.lp-basic {
    background: var(--lp-lav-50);
    border: 1px solid var(--lp-lav-100);
    border-radius: var(--lp-radius);
    padding: 30px 32px;
    margin-bottom: 44px;
}

.lp-basic h3 {
    margin: 0 0 6px;
    font-size: 19px;
}

.lp-basic > p {
    margin: 0 0 18px;
    color: var(--lp-ink-soft);
    font-size: 15px;
}

.lp-basic ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 26px;
}

.lp-basic li {
    position: relative;
    padding-left: 24px;
    color: var(--lp-ink-soft);
    font-size: 15px;
    line-height: 1.6;
}

.lp-basic li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    width: 6px;
    height: 10px;
    border: solid var(--lp-grow);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.lp-basic li b { color: var(--lp-ink); font-weight: 600; }

/* ── 플랜 카드 ── */
.lp-plans {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-bottom: 44px;
}

.lp-plan {
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    padding: 30px 28px 32px;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.lp-plan-best {
    border-color: var(--lp-primary);
    box-shadow: 0 10px 30px rgba(91, 70, 224, 0.13);
}

.lp-plan-tag {
    display: inline-block;
    align-self: flex-start;
    background: var(--lp-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.lp-plan h3 {
    margin: 0 0 4px;
    font-size: 22px;
}

.lp-plan-vol {
    margin: 0 0 18px;
    color: var(--lp-ink-dim);
    font-size: 14.5px;
}

.lp-plan-price {
    font-size: 33px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.lp-plan-price span {
    font-size: 15px;
    font-weight: 500;
    color: var(--lp-ink-dim);
}

.lp-plan-sub {
    margin: 6px 0 20px;
    font-size: 13.5px;
    color: var(--lp-ink-dim);
}

.lp-plan ul {
    list-style: none;
    margin: 0 0 24px;
    padding: 20px 0 0;
    border-top: 1px solid var(--lp-line);
    flex: 1;
}

.lp-plan li {
    padding: 7px 0 7px 22px;
    position: relative;
    font-size: 15px;
    color: var(--lp-ink-soft);
}

.lp-plan li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 15px;
    width: 5px;
    height: 9px;
    border: solid var(--lp-primary);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.lp-plan li b { color: var(--lp-ink); font-weight: 600; }

/* ── 개설비·호스팅(별도 비용) ── */
.lp-onceoff {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 16px;
}

.lp-onceoff div {
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-sm);
    padding: 20px 22px;
}

.lp-onceoff strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
}

.lp-onceoff em {
    display: block;
    font-style: normal;
    font-size: 24px;
    font-weight: 700;
    margin: 6px 0 4px;
}

.lp-onceoff p {
    margin: 0;
    font-size: 13.5px;
    color: var(--lp-ink-dim);
    line-height: 1.6;
}

/* ── 결제 안내 ── */
.lp-pay {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 8px;
}

.lp-pay div {
    background: var(--lp-lav-50);
    border-radius: var(--lp-radius-sm);
    padding: 20px 22px;
}

.lp-pay strong { display: block; margin-bottom: 8px; font-size: 15px; }
.lp-pay p { margin: 0; font-size: 14px; color: var(--lp-ink-soft); line-height: 1.7; }

@media (max-width: 900px) {
    .lp-basic { padding: 24px 22px; }
    .lp-basic ul,
    .lp-plans,
    .lp-onceoff,
    .lp-pay { grid-template-columns: 1fr; }
    .lp-plan { padding: 26px 22px 28px; }
    .lp-plan-price { font-size: 29px; }
}

/* ─────────────────────────────────────────────────────────────
   가입 신청 폼 — 2026-08-02 신설
   ★비밀번호 칸이 없는 게 정상이다. 이건 계정 생성이 아니라 신청서 접수라서
     비밀번호를 아예 받지 않는다(미르 확정). 나중에 칸을 추가하지 말 것.
   ───────────────────────────────────────────────────────────── */

.lp-formwrap {
    max-width: 560px;
    margin: 0 auto;
    padding: 52px 24px 80px;
}

.lp-formwrap > h1 {
    font-size: 30px;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    text-align: center;
}

.lp-formwrap > .lp-form-lead {
    text-align: center;
    color: var(--lp-ink-soft);
    margin: 0 0 32px;
    font-size: 15.5px;
    line-height: 1.7;
}

.lp-form label {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    margin: 0 0 7px;
}

.lp-form label span { color: var(--lp-primary); }

.lp-form-row { margin-bottom: 20px; }

.lp-form input[type="text"],
.lp-form input[type="email"],
.lp-form input[type="tel"],
.lp-form textarea {
    width: 100%;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-sm);
    padding: 13px 14px;
    font-size: 15.5px;
    font-family: inherit;
    color: var(--lp-ink);
    background: #fff;
    transition: border-color .15s;
}

.lp-form input:focus,
.lp-form textarea:focus {
    outline: none;
    border-color: var(--lp-primary);
}

.lp-form textarea { min-height: 110px; resize: vertical; line-height: 1.6; }

.lp-form-hint {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--lp-ink-dim);
    line-height: 1.6;
}

/* 허니팟 — 사람 눈에 절대 안 보이게. display:none은 일부 봇이 눈치채므로 위치로 숨긴다. */
.lp-form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lp-form button {
    width: 100%;
    border: 0;
    border-radius: var(--lp-radius-sm);
    background: var(--lp-primary);
    color: #fff;
    font-size: 16.5px;
    font-weight: 600;
    font-family: inherit;
    padding: 15px;
    cursor: pointer;
    margin-top: 4px;
}

.lp-form button:hover { background: var(--lp-primary-deep); }

.lp-form-err {
    background: #fdf0f0;
    border: 1px solid #f5d2d2;
    color: #a92a2a;
    border-radius: var(--lp-radius-sm);
    padding: 12px 14px;
    font-size: 14.5px;
    margin-bottom: 20px;
}

.lp-form-agree {
    margin: 18px 0 0;
    font-size: 13px;
    color: var(--lp-ink-dim);
    line-height: 1.7;
    text-align: center;
}

.lp-form-agree a { color: var(--lp-ink-soft); }

/* ── 접수 완료 ── */
.lp-done {
    text-align: center;
    border: 1px solid var(--lp-lav-100);
    background: var(--lp-lav-50);
    border-radius: var(--lp-radius);
    padding: 44px 30px;
}

.lp-done h2 { margin: 0 0 14px; font-size: 24px; }
.lp-done p { color: var(--lp-ink-soft); margin: 0 0 10px; line-height: 1.8; font-size: 15.5px; }
.lp-done .lp-btn { margin-top: 18px; }

@media (max-width: 900px) {
    .lp-formwrap { padding: 36px 20px 64px; }
    .lp-formwrap > h1 { font-size: 25px; }
    .lp-done { padding: 34px 22px; }
}