@charset "utf-8";

/* =====================================================================
   armanager_landing.css — FrontMainView 랜딩 전용 스타일
   armanager_main.css 뒤에 로드한다. 모달·헤더 마크업은 기존 것을 쓰고,
   본문 섹션은 .lp-* 로 새로 짠다. JS 가 의존하는 클래스(.pricing-plan,
   .plan-*, .faq-*, .footer-links, .main-nav 등)는 이름을 유지하고
   여기서 모양만 덮어쓴다.
   ===================================================================== */

:root {
    --primary-color: #1f4fa8;      /* 기존 변수 재정의 → 모달·헤더 색도 함께 바뀜 */
    --lp-ink: #16202e;
    --lp-body: #3b4a5e;
    --lp-muted: #5d6b7e;
    --lp-line: #e2e7ee;
    --lp-line-soft: #edf1f6;
    --lp-soft: #f7f9fc;
    --lp-accent: #1f4fa8;
    --lp-accent-dark: #173f8a;
    --lp-max: 1328px;
}

/* ---------------------------------------------------------------------
   1. 헤더 (기존 마크업 유지, 색·모양만 덮어씀)
   --------------------------------------------------------------------- */
.logo,
.logo:hover {
    color: var(--lp-ink);
    transform: none;
}
.logo::after {
    background-color: var(--lp-accent);
}
.logo span,
.logo:hover span {
    color: var(--lp-muted);
    font-weight: 500;
}
.main-nav a {
    text-transform: none;
    font-size: 15px;
    font-weight: 500;
    color: #2c3a4c;
    letter-spacing: 0;
}
.main-nav a:hover,
.main-nav a.active {
    color: var(--lp-accent);
    transform: none;
}
.main-nav a::after {
    background-color: var(--lp-accent);
    transition-duration: 0.15s; /* 밑줄이 늘어나는 상태 표시는 짧게 (원래 0.3s) */
}
.nav-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    box-shadow: none;
    letter-spacing: 0;
    font-size: 15px;
}
.btn-primary {
    background-color: var(--lp-accent);
    border-color: var(--lp-accent);
}
.btn-primary:hover {
    background-color: var(--lp-accent-dark);
    transform: none;
    box-shadow: none;
}
.btn-outline {
    border: 1px solid #c8d0dc;
    color: #2c3a4c;
}
.btn-outline:hover {
    background-color: #f4f6fa;
    color: var(--lp-ink);
    border-color: #b3bdcb;
    transform: none;
    box-shadow: none;
}
/* 누르는 순간(키보드 Space 포함)에도 버튼이 내려가지 않게 */
.btn-primary:active,
.btn-outline:active {
    transform: none;
    box-shadow: none;
}
/* 헤더 폭을 본문(.lp-wrap)과 맞춘다 — 넓은 화면에서 로고가 본문보다 안쪽에 있던 것 */
.nav-container {
    max-width: var(--lp-max);
    padding-left: 24px;
    padding-right: 24px;
}
/* 햄버거는 키보드로도 열 수 있게 button 이다 — 기본 버튼 모양을 지운다 */
.mobile-menu {
    background: transparent;
    border: 0;
    font-family: inherit;
}
.mobile-menu,
.mobile-menu.active {
    color: var(--lp-ink);
}
.mobile-menu:hover {
    background-color: #f4f6fa;
    transform: none;
}
/* 헤더: 그림자 대신 아래 1px 규칙선. armanager_main.css 가 그림자·전환을 !important 로 걸어 두어
   한 단계 구체적인 선택자로 같은 방식으로 덮는다(전환도 꺼야 동작 줄이기 설정의 * 규칙에 지지 않는다) */
html body > header {
    border-bottom: 1px solid var(--lp-line);
    box-shadow: none !important;
    transition: none !important;
}
/* 아이콘 CSS(Font Awesome)는 늦게 적용되므로(FrontMainView.jsp) 첫 화면 아이콘 두 개는 글리프 크기(폭 0.875em·높이 1em)만큼
   자리를 미리 잡아, 아이콘이 나타날 때 로그인 버튼 폭이 흔들리지 않게 한다 */
.mobile-menu .fa-bars {
    display: inline-block;
    width: 0.875em;
    height: 1em;
}
header .btn-icon.fa-user {
    width: 0.875em;
    height: 1em;
}
/* 로그인 버튼의 사람 아이콘은 좁은 화면(≤768, 글자 옆에 아이콘)에서만 보인다. armanager_main.css 의 기본 숨김(.btn-icon)을
   나중에 불리는 Font Awesome(.fas 의 display)이 덮어 데스크톱에서도 보였으므로 여기서 다시 정한다. hover 때 옆으로 밀지 않는다 */
header .btn-outline .btn-icon {
    display: none;
}
header .btn-outline:hover .btn-icon {
    transform: none;
}
@media (max-width: 768px) {
    header .btn-outline .btn-icon {
        display: block;
    }
}
@media (max-width: 992px) {
    /* 펼친 메뉴: 그림자·나타나는 애니메이션 대신 경계선. 위는 헤더 아래선과 같은 1px(원래 3px 띠),
       콘텐츠와 닿는 오른쪽·아래는 조금 짙은 선으로 구분한다 */
    .main-nav {
        border-top: 1px solid var(--lp-line);
        border-right: 1px solid #c8d0dc;
        border-bottom: 1px solid #c8d0dc;
        box-shadow: none;
    }
    .main-nav.active {
        animation: none;
    }
    .main-nav a:hover {
        background-color: #f4f6fa;
    }
}

/* ---------------------------------------------------------------------
   2. 공통
   --------------------------------------------------------------------- */
.lp {
    color: var(--lp-ink);
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
/* 주소의 #섹션(…FrontMainView.do#pricing)으로 들어오면 브라우저가 먼저 그 섹션으로 옮긴다 — 고정 헤더에 가리지 않게
   랜딩 load 처리(FrontMainView.jsp, 80px)와 같은 만큼 위를 비운다 */
.lp-section[id],
.lp-cta[id] {
    scroll-margin-top: 80px;
}
.lp-wrap {
    max-width: var(--lp-max);
    margin: 0 auto;
    padding: 0 24px;
}
.lp-section {
    padding: 84px 0;
}
.lp-section--soft {
    background-color: var(--lp-soft);
}
.lp-section--line-top {
    border-top: 1px solid var(--lp-line);
}
.lp-eyebrow {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--lp-muted);
    margin-bottom: 14px;
}
.lp-h2 {
    margin: 0 0 16px;
    font-size: 38px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--lp-ink);
}
.lp-lead {
    margin: 0;
    font-size: 18px;
    line-height: 1.8;
    color: var(--lp-body);
}
.lp-head {
    max-width: 800px;
    margin-bottom: 44px;
}
.lp-head--center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 14px 34px;
    border-radius: 6px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
}
.lp-btn-primary {
    background-color: var(--lp-accent);
    color: #ffffff;
    border: 1px solid var(--lp-accent);
}
.lp-btn-primary:hover {
    background-color: var(--lp-accent-dark);
    border-color: var(--lp-accent-dark);
    color: #ffffff;
}
/* 「이용 신청」(헤더·히어로·하단 마무리) 외곽 펄스 — 업무 화면 머리 「이용 신청」 버튼(headerMenu.jsp btn-pulse-glow)과 같은 효과,
   색만 랜딩 강조색(#1f4fa8). 마우스를 올리거나 키보드로 고르면 멈춘다. 동작 줄이기 설정이면 20절 규칙으로 멈춘다 */
@keyframes lp-apply-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(31, 79, 168, 0.6);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(31, 79, 168, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(31, 79, 168, 0);
    }
}
.lp-apply-pulse {
    animation: lp-apply-pulse 2s ease-out infinite;
}
.lp-apply-pulse:hover,
.lp-apply-pulse:focus-visible {
    animation: none;
}
.lp-btn-secondary {
    background-color: #ffffff;
    color: #2c3a4c;
    border: 1px solid #c8d0dc;
    font-weight: 500;
}
.lp-btn-secondary:hover {
    background-color: #f4f6fa;
    border-color: #b3bdcb;
    color: var(--lp-ink);
}
.lp-tag {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    color: #ffffff;
    background-color: #5d6b7e;
    border-radius: 4px;
    padding: 3px 8px;
    vertical-align: middle;
}
.lp-note {
    font-size: 16px;
    line-height: 1.8;
    color: var(--lp-body);
}

/* ---------------------------------------------------------------------
   3. 히어로  (고정 헤더 70px 만큼 위 여백)
   --------------------------------------------------------------------- */
.lp-hero {
    background-color: var(--lp-soft);
    border-bottom: 1px solid var(--lp-line);
    padding: calc(70px + 72px) 0 76px;
}
.lp-hero__inner {
    display: flex;
    align-items: center;
    gap: 56px;
}
.lp-hero__copy {
    width: 640px;
    flex-shrink: 0;
}
.lp-hero__lead {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--lp-muted);
}
.lp-hero__title {
    margin: 0 0 24px;
    font-size: 54px;
    line-height: 1.26;
    font-weight: 900;
    letter-spacing: -0.035em;
    color: var(--lp-ink);
}
.lp-hero__sub {
    margin: 0 0 18px;
    font-size: 20px;
    line-height: 1.75;
    font-weight: 500;
    color: var(--lp-ink);
}
.lp-hero__desc {
    margin: 0 0 48px;
    font-size: 17px;
    line-height: 1.8;
    color: var(--lp-body);
}
.lp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.lp-hero__meta {
    font-size: 15.5px;
    color: var(--lp-body);
}
.lp-hero__panel {
    flex-grow: 1;
    min-width: 0;
    background-color: #ffffff;
    border: 1px solid var(--lp-line);
    border-radius: 6px;
    padding: 28px 30px 30px;
}
.lp-hero__panel-title {
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--lp-line-soft);
    margin-bottom: 4px;
}
.lp-moments {
    list-style: none;
    margin: 0;
    padding: 0;
}
.lp-moment {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid var(--lp-line-soft);
}
.lp-moment:last-child {
    border-bottom: none;
    padding-bottom: 2px;
}
.lp-moment__num {
    padding-top: 3px;
    font-size: 13.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--lp-muted);
}
.lp-moment__body {
    min-width: 0;
}
.lp-moment__body strong {
    display: block;
    margin-bottom: 7px;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--lp-ink);
}
.lp-moment__body span {
    display: block;
    font-size: 15px;
    line-height: 1.65;
    color: var(--lp-muted);
}

/* ---------------------------------------------------------------------
   4. 보안 및 데이터 관리 (주요 화면과 요금 안내 사이)
   --------------------------------------------------------------------- */
.lp-trust {
    background-color: #ffffff;
    border-bottom: 1px solid var(--lp-line);
}
/* 제목과 두 묶음을 나란히 — 상자로 감싸지 않고 묶음 위쪽 2px 규칙선으로 구분한다 */
.lp-trust__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
}
.lp-trust__head .lp-h2 {
    margin-bottom: 16px;
}
.lp-trust__head .lp-lead {
    margin: 0;
}
.lp-trust__groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
}
.lp-trust__group {
    border-top: 2px solid var(--lp-ink);
}
.lp-trust__group-title {
    margin: 0;
    padding: 16px 0 14px;
    border-bottom: 1px solid var(--lp-line);
    font-size: 15px;
    font-weight: 700;
    color: var(--lp-muted);
}
.lp-trust__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.lp-trust__list li {
    padding: 17px 0;
    border-bottom: 1px solid var(--lp-line);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--lp-ink);
}

/* ---------------------------------------------------------------------
   5. 업무 흐름
   --------------------------------------------------------------------- */
.lp-flow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}
/* 단계 구분은 색 띠가 아니라 같은 굵기의 잉크 규칙선으로 */
.lp-flow__step {
    border-top: 2px solid var(--lp-ink);
    padding-top: 20px;
}
.lp-flow__no {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--lp-muted);
    margin-bottom: 12px;
}
.lp-flow__title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
}
.lp-flow__desc {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--lp-body);
}

/* ---------------------------------------------------------------------
   6. 인허가 기한 알림
   --------------------------------------------------------------------- */
/* 상자 안에 상자를 두지 않는다 — 위쪽 2px 규칙선 아래에 설명과 알림 목록을 나란히 */
.lp-alert {
    border-top: 2px solid var(--lp-ink);
    padding: 40px 0 0;
    display: flex;
    align-items: center;
    gap: 56px;
}
.lp-alert__copy {
    flex-grow: 1;
    min-width: 0;
}
.lp-alert__copy .lp-h2 {
    font-size: 32px;
}
.lp-alert__copy p {
    margin: 0;
    font-size: 17px;
    line-height: 1.85;
    color: var(--lp-body);
}
.lp-alert__cards {
    width: 480px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.lp-alert__card {
    border-top: 1px solid var(--lp-line);
    padding: 20px 0 2px;
}
.lp-alert__card:first-child {
    border-top: 0;
    padding-top: 0;
}
.lp-alert__card h3 {
    margin: 0 0 7px;
    font-size: 17px;
    font-weight: 700;
}
.lp-alert__card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--lp-body);
}

/* ---------------------------------------------------------------------
   7. 주요 기능
   --------------------------------------------------------------------- */
.lp-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background-color: var(--lp-line);
    border: 1px solid var(--lp-line);
    border-radius: 6px;
    overflow: hidden;
}
.lp-feature {
    background-color: #ffffff;
    padding: 30px 28px 32px;
}
/* 항목 수(11)가 열 수로 나누어떨어지지 않을 때 마지막 빈 칸이 격자 배경(회색)으로 보이지 않게 흰 칸으로 채운다 */
.lp-features::after {
    content: "";
    background-color: #ffffff;
}
.lp-feature--planned {
    background-color: var(--lp-soft);
}
.lp-feature h3 {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}
.lp-feature--planned h3 {
    color: #46556a;
}
.lp-feature p {
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    color: var(--lp-body);
}
.lp-feature--planned p {
    color: #46556a;
}

/* ---------------------------------------------------------------------
   8. 주요 화면
   --------------------------------------------------------------------- */
.lp-shot {
    background-color: #ffffff;
    border: 1px solid var(--lp-line);
    border-radius: 6px;
    padding: 12px;
}
.lp-shot picture {
    display: block;
}
.lp-shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2331 / 1096; /* lazy 로드 전에도 높이를 확보해 앵커 스크롤 위치가 밀리지 않게 함 */
    border-radius: 3px;
    background-color: #eef1f5;
}
.lp-shot--main {
    margin-bottom: 20px;
}
.lp-shot__cap {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 16px 10px 8px;
}
.lp-shot__cap strong {
    font-size: 18px;
    font-weight: 700;
}
.lp-shot__cap span {
    font-size: 16px;
    color: var(--lp-muted);
}
.lp-shots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.lp-shots .lp-shot {
    padding: 10px;
}
.lp-shots .lp-shot__cap {
    flex-direction: column;
    gap: 5px;
    padding: 14px 8px 6px;
}
.lp-shots .lp-shot__cap strong {
    font-size: 17px;
}
.lp-shots .lp-shot__cap span {
    font-size: 15.5px;
    line-height: 1.65;
}
/* 「좌우로 밀어서…」 안내는 가로 한 줄이 되는 폰에서만 보인다 */
.lp-shots__hint {
    display: none;
}
/* 데스크톱·태블릿: 처음 6장만 보이고 「더보기」로 펼친다 (6 은 FrontMainView.jsp 스크립트의 VISIBLE 과 같은 값) */
.lp-shots:not(.is-expanded) .lp-shot:nth-child(n+7) {
    display: none;
}
.lp-shots__more-wrap {
    margin-top: 24px;
    text-align: center;
}
.lp-shots__more {
    min-width: 200px;
    font-family: inherit;
}

/* ---------------------------------------------------------------------
   9. 요금 — .pricing-plan / .plan-* 는 JS 가 쓰는 이름이라 유지하고
      armanager_main.css 의 카드 규칙을 여기서 전부 덮어쓴다.
   --------------------------------------------------------------------- */
/* 안내는 색 상자 없이 한 줄 — 첫 3개월 무료만 굵게 */
.lp-pricing__notice {
    font-size: 18px;
    color: var(--lp-ink);
}
.lp-pricing__notice strong {
    font-weight: 700;
    color: var(--lp-ink);
}
.lp-pricing__vat {
    margin-top: 14px;
    font-size: 16px;
    color: var(--lp-body);
}
.lp-pricing .pricing-plans {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
    margin: 40px 0 0;
    overflow: visible;
}
.lp-pricing .pricing-plans .pricing-plan {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    min-width: 0;
    width: auto;
    /* armanager_main.css(≤1100·≤768)의 min-height 230px · margin-bottom 20px 이 카드를 늘리고 간격을 벌려 해제 */
    min-height: 0;
    margin: 0;
    background-color: #ffffff;
    border: 1px solid var(--lp-line);
    border-radius: 6px;
    padding: 28px 24px 26px;
    box-shadow: none;
    text-align: left;
    transform: none;
    overflow: visible;
    cursor: default;
}
/* 카드는 누르는 곳이 아니므로 hover 에 반응하지 않는다 (누르는 곳은 아래 버튼) */
.lp-pricing .pricing-plans .pricing-plan:hover {
    transform: none;
    box-shadow: none;
    border: 1px solid var(--lp-line) !important;
}
/* 추천(10인): 2px 강조 테두리 + 채운 버튼. 테두리가 1px 두꺼워진 만큼 안쪽 여백을 줄여 내용 위치를 맞춘다 */
.lp-pricing .pricing-plans .pricing-plan.lp-plan--featured,
.lp-pricing .pricing-plans .pricing-plan.lp-plan--featured:hover {
    border: 2px solid var(--lp-accent) !important;
    padding: 27px 23px 25px;
}
.lp-pricing .pricing-plan .plan-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.lp-pricing .pricing-plan .plan-name {
    margin: 0;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 900;
    color: var(--lp-ink);
    text-align: left;
    width: auto;
}
.lp-pricing .pricing-plan .plan-tag {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--lp-body);
    border: 1px solid #c8d0dc;
    border-radius: 3px;
    padding: 2px 8px;
}
.lp-pricing .pricing-plan .plan-tag--accent {
    color: var(--lp-accent);
    border-color: var(--lp-accent);
}
.lp-pricing .pricing-plan .plan-accounts {
    margin: 5px 0 0;
    padding: 0;
    border: none;
    font-size: 15.5px;
    font-weight: 400;
    color: var(--lp-muted);
    text-align: left;
    width: auto;
}
.lp-pricing .pricing-plan .plan-price-container {
    margin: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--lp-line-soft);
}
.lp-pricing .pricing-plan .plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 0;
    font-size: 29px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -0.035em;
    color: var(--lp-ink);
}
.lp-pricing .pricing-plan .plan-price span {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--lp-muted);
}
.lp-pricing .pricing-plan .plan-price-note {
    margin: 3px 0 0;
    font-size: 14.5px;
    font-weight: 400;
    color: var(--lp-muted);
    text-align: left;
}
/* 요금제별 기능 목록은 없앴다(모든 요금제 동일) — 버튼을 카드 아래에 맞춘다 */
.lp-pricing .pricing-plan .plan-button {
    display: block;
    width: 100%;
    min-width: 0;
    margin: auto 0 0;
    padding: 13px 0;
    border-radius: 6px;
    /* 누르는 곳임이 보이게 강조색 테두리·글자 (흰 버튼은 눌러도 되는지 알기 어려웠다) */
    border: 1px solid var(--lp-accent);
    background-color: #ffffff;
    color: var(--lp-accent);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
}
.lp-pricing .pricing-plan .plan-button:hover {
    background-color: var(--lp-accent);
    border-color: var(--lp-accent);
    color: #ffffff;
    transform: none;
    box-shadow: none;
}
.lp-pricing .pricing-plan.lp-plan--featured .plan-button {
    background-color: var(--lp-accent);
    border-color: var(--lp-accent);
    color: #ffffff;
}
.lp-pricing .pricing-plan.lp-plan--featured .plan-button:hover {
    background-color: var(--lp-accent-dark);
    border-color: var(--lp-accent-dark);
    color: #ffffff;
}
.lp-pricing__foot {
    margin-top: 20px;
    text-align: center;
}
.lp-pricing__foot strong {
    font-weight: 700;
    color: var(--lp-ink);
}
.lp-pricing__foot a {
    color: var(--lp-accent);
    font-weight: 700;
}

section#pricing + section#pricing-faq {
    margin-top: 0;
    padding-top: 84px;
}

/* ---------------------------------------------------------------------
   10. FAQ — .faq-item/.faq-question 는 JS(slider.js) 아코디언이 쓰는 이름
   --------------------------------------------------------------------- */
.lp-faq__inner {
    display: flex;
    gap: 80px;
}
.lp-faq__side {
    width: 360px;
    flex-shrink: 0;
}
.lp-faq__side .lp-h2 {
    font-size: 36px;
}
.lp-faq__side .lp-lead {
    font-size: 17px;
    margin-bottom: 24px;
}
.lp-faq__list {
    flex-grow: 1;
    min-width: 0;
    border-bottom: 1px solid var(--lp-line);
}
.lp-faq .faq-item {
    margin: 0;
    max-width: none;
    border: none;
    border-top: 1px solid var(--lp-line);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    overflow: hidden;
}
.lp-faq .faq-item:hover {
    transform: none;
    box-shadow: none;
}
.lp-faq .faq-item::before {
    display: none;
}
/* 질문은 키보드로 열 수 있게 button — 기본 버튼 모양을 지우고 한 줄 행으로 */
.lp-faq .faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 22px 0;
    border: 0;
    background-color: transparent;
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0;
    text-align: left;
    color: var(--lp-ink);
    gap: 16px;
    cursor: pointer;
}
/* 키보드 포커스: 질문 버튼의 외곽선(20절)은 .faq-item 의 overflow:hidden 에 잘려 안 보였다 → 잘리지 않는 항목 자체에 그린다 */
@supports selector(:has(*)) {
    .lp-faq .faq-question:focus-visible {
        outline: none;
    }
    .lp-faq .faq-item:has(.faq-question:focus-visible) {
        outline: 2px solid var(--lp-accent);
        outline-offset: 2px;
    }
}
.lp-faq .faq-item.active .faq-question {
    color: var(--lp-ink);
}
/* 열림 표시는 원형 배경 없이 흐린 꺾쇠만 */
.lp-faq .faq-question i {
    flex-shrink: 0;
    width: auto;
    height: auto;
    background-color: transparent;
    color: var(--lp-muted);
    opacity: 1;
    font-size: 0.8em;
}
.lp-faq .faq-item.active .faq-question i {
    background-color: transparent;
    color: var(--lp-ink);
    opacity: 1;
}
.lp-faq .faq-answer {
    padding: 0;
    background-color: transparent;
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--lp-body);
}
.lp-faq .faq-item.active .faq-answer {
    padding: 0 0 22px;
    max-height: 600px;
}
.lp-faq .faq-answer p {
    margin: 0;
    color: var(--lp-body);
}

/* ---------------------------------------------------------------------
   11. 시스템 버전
   --------------------------------------------------------------------- */
.lp-versions {
    border-top: 2px solid var(--lp-ink);
}
.lp-version {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 20px 0;
    border-bottom: 1px solid var(--lp-line);
}
.lp-version__code {
    width: 156px;
    flex-shrink: 0;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--lp-muted);
}
.lp-version--active .lp-version__code {
    color: var(--lp-ink);
}
.lp-version__name {
    width: 372px; /* 가장 긴 이름(전기통신소방 …, 약 353px)이 한 줄에 들어가는 폭 */
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 17px;
    color: #2c3a4c;
}
.lp-version--active .lp-version__name {
    font-weight: 500;
    color: var(--lp-ink);
}
.lp-version__en {
    flex-grow: 1;
    min-width: 0;
    font-size: 15px;
    color: var(--lp-muted);
}
/* 상태는 채우지 않은 사각 라벨 — 서비스중만 잉크색으로 또렷하게 */
.lp-version__state {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--lp-muted);
    border: 1px solid #c8d0dc;
    border-radius: 3px;
    padding: 5px 12px;
}
.lp-version--active .lp-version__state {
    color: var(--lp-ink);
    border-color: var(--lp-ink);
}

/* ---------------------------------------------------------------------
   12. 문의하기 — 입력 요소 ID 는 contact.js 가 쓰므로 유지
   --------------------------------------------------------------------- */
.lp-contact__inner {
    display: flex;
    gap: 64px;
    align-items: flex-start;
}
.lp-contact__side {
    width: 420px;
    flex-shrink: 0;
}
.lp-contact__side .lp-lead {
    margin-bottom: 28px;
}
.lp-contact__info {
    border-top: 2px solid var(--lp-ink);
}
.lp-contact__info div {
    display: flex;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--lp-line);
    font-size: 16px;
    line-height: 1.7;
    color: var(--lp-body);
}
.lp-contact__info strong {
    width: 88px;
    flex-shrink: 0;
    font-weight: 700;
    color: var(--lp-ink);
}
.lp-contact__form {
    flex-grow: 1;
    min-width: 0;
    background-color: #ffffff;
    border: 1px solid var(--lp-line);
    border-radius: 6px;
    padding: 32px 34px 34px;
}
.lp-field {
    margin-bottom: 20px;
}
.lp-field label,
.lp-field .lp-field__label {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--lp-ink);
    margin-bottom: 8px;
}
.lp-field__hint {
    font-size: 14px;
    font-weight: 400;
    color: var(--lp-muted);
    margin-left: 8px;
}
.lp-input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #858f9e; /* 입력칸 경계는 흰 배경 대비 3:1 이상(3.27:1) */
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--lp-ink);
    background-color: #ffffff;
    transition: border-color 0.15s ease;
}
.lp-input:focus {
    border-color: var(--lp-accent);
    outline: 2px solid var(--lp-accent);
    outline-offset: -1px;
}
.lp-input::placeholder {
    color: #6b7584; /* 안내 문구도 읽히게 4.5:1 이상(4.66:1) */
}
textarea.lp-input {
    height: 150px;
    resize: vertical;
}
.lp-captcha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.lp-captcha__code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    height: 50px;
    padding: 0 18px;
    border-radius: 6px;
    border: 1px solid var(--lp-line);
    background-color: var(--lp-soft);
    font-family: 'Courier New', monospace;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 5px;
    color: var(--lp-ink);
}
.lp-captcha__refresh {
    width: 48px;
    height: 48px;
    border: 1px solid #c8d0dc;
    border-radius: 6px;
    background-color: #ffffff;
    color: var(--lp-body);
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.lp-captcha__refresh:hover {
    background-color: #f4f6fa;
}
.lp-captcha .lp-input {
    flex: 1 1 180px;
    width: auto;
    min-width: 0;
    margin: 0;
}
.lp-contact__submit {
    width: 100%;
    margin-top: 6px;
    border: none;
}

/* ---------------------------------------------------------------------
   13. 마무리 CTA · 푸터
   --------------------------------------------------------------------- */
/* armanager_main.css(≤768)의 .pricing-plans 테두리(#cdc2c2)가 카드 묶음 바깥에 이중선으로 보이는 문제 차단 */
.lp-pricing .pricing-plans {
    border: none;
}
.lp-nowrap {
    white-space: nowrap;
}

.lp-cta {
    background-color: var(--lp-soft);
    border-top: 1px solid var(--lp-line);
    padding: 72px 0 76px;
    text-align: center;
}
.lp-cta .lp-h2 {
    font-size: 40px;
    letter-spacing: -0.035em;
}
.lp-cta .lp-h2 strong {
    color: var(--lp-ink);
}
.lp-cta .lp-lead {
    margin-bottom: 44px;
}
.lp-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
}
footer.lp-footer {
    background-color: #ffffff;
    color: var(--lp-body);
    border-top: 1px solid var(--lp-line);
    padding: 48px 0 32px;
}
.lp-footer__inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px 60px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--lp-line);
}
.lp-footer__brand {
    width: 320px;
}
.lp-footer__logo {
    font-size: 22px;
    font-weight: 900;
    color: var(--lp-ink);
    margin-bottom: 12px;
}
.lp-footer__brand p {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.8;
}
.lp-footer__contact {
    font-size: 15.5px;
    line-height: 1.9;
}
.lp-footer__cols {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 80px;
}
.lp-footer__col h3 {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--lp-ink);
}
.lp-footer .footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.lp-footer .footer-links li {
    margin: 0;
}
.lp-footer .footer-links a {
    font-size: 16px;
    color: var(--lp-body);
}
.lp-footer .footer-links a:hover {
    color: var(--lp-accent);
}
.lp-footer__copy {
    padding-top: 20px;
    font-size: 15px;
    color: var(--lp-muted);
}

/* ---------------------------------------------------------------------
   14. 반응형 — 태블릿(≤1200 / ≤992)
   --------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .lp-hero__copy {
        width: 52%;
    }
    .lp-hero__title {
        font-size: 46px;
    }
    .lp-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px 24px;
    }
    /* 5개 카드가 3+2 / 2+2+1 로 끊기지 않게, 태블릿에서는 요금제당 한 줄(이름 | 가격 | 버튼) 목록으로 */
    .lp-pricing .pricing-plans {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
    .lp-pricing .pricing-plans .pricing-plan {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto 168px;
        grid-template-areas: "head price btn";
        align-items: center;
        gap: 0 32px;
        padding: 20px 24px;
    }
    .lp-pricing .pricing-plans .pricing-plan.lp-plan--featured,
    .lp-pricing .pricing-plans .pricing-plan.lp-plan--featured:hover {
        padding: 19px 23px;
    }
    .lp-pricing .pricing-plan .plan-head-wrap {
        grid-area: head;
        min-width: 0;
    }
    .lp-pricing .pricing-plan .plan-price-container {
        grid-area: price;
        padding: 0;
        border: none;
        text-align: right;
    }
    .lp-pricing .pricing-plan .plan-price {
        justify-content: flex-end;
    }
    .lp-pricing .pricing-plan .plan-price-note {
        text-align: right;
    }
    .lp-pricing .pricing-plan .plan-button {
        grid-area: btn;
        margin: 0;
    }
    .lp-alert__cards {
        width: 400px;
    }
}
@media (max-width: 992px) {
    .lp-section,
    section#pricing + section#pricing-faq {
        padding: 64px 0;
    }
    .lp-h2 {
        font-size: 32px;
    }
    .lp-lead {
        font-size: 17px;
    }
    .lp-hero {
        padding: calc(65px + 48px) 0 56px;
    }
    .lp-hero__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 36px;
    }
    .lp-hero__copy {
        width: auto;
    }
    .lp-hero__title {
        font-size: 42px;
    }
    .lp-alert {
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
        padding: 32px 0 0;
    }
    .lp-alert__cards {
        width: auto;
    }
    .lp-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lp-shots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lp-faq__inner {
        flex-direction: column;
        gap: 36px;
    }
    .lp-faq__side {
        width: auto;
    }
    .lp-version {
        flex-wrap: wrap;
        gap: 8px 20px;
    }
    .lp-version__name {
        width: auto;
        flex-grow: 1;
    }
    .lp-version__en {
        flex-basis: 100%;
        order: 4;
    }
    .lp-contact__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 36px;
    }
    .lp-trust__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
    .lp-trust__head .lp-h2 br {
        display: none;
    }
    .lp-faq__side .lp-h2 br,
    .lp-contact__side .lp-h2 br {
        display: none;
    }
    .lp-contact__side {
        width: auto;
    }
    .lp-footer__inner {
        flex-direction: column;
    }
    .lp-footer__brand {
        width: auto;
    }
}

/* ---------------------------------------------------------------------
   15. 반응형 — 모바일(≤768) : 한 열, 큰 글자, 짧은 여백, 탭 영역 48px
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    .lp-wrap {
        padding: 0 18px;
    }
    .lp-section,
    section#pricing + section#pricing-faq {
        padding: 48px 0;
    }
    .lp-h2 {
        font-size: 26px;
        margin-bottom: 12px;
    }
    .lp-lead {
        font-size: 16px;
        line-height: 1.75;
    }
    .lp-head {
        margin-bottom: 28px;
    }
    .lp-eyebrow {
        font-size: 13.5px;
        margin-bottom: 10px;
    }
    .nav-buttons .btn {
        min-height: 40px;
        padding: 8px 14px;
        font-size: 14px;
    }
    .lp-btn {
        min-height: 48px;
        padding: 13px 24px;
        font-size: 16px;
    }

    /* 히어로 */
    .lp-hero {
        padding: calc(60px + 36px) 0 40px;
    }
    .lp-hero__inner {
        gap: 26px;
    }
    .lp-hero__lead {
        font-size: 16px;
        margin-bottom: 10px;
    }
    .lp-hero__title {
        font-size: 32px;
        line-height: 1.28;
        margin-bottom: 16px;
    }
    .lp-hero__sub {
        font-size: 17px;
        line-height: 1.65;
        margin-bottom: 12px;
    }
    .lp-hero__sub br {
        display: none;
    }
    .lp-hero__desc {
        font-size: 16px;
        margin-bottom: 22px;
    }
    .lp-hero__actions {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 14px;
    }
    .lp-hero__actions .lp-btn {
        width: 100%;
    }
    .lp-hero__meta {
        font-size: 14.5px;
        line-height: 1.7;
    }
    .lp-hero__panel {
        padding: 18px 18px 8px;
        border-radius: 6px;
    }
    .lp-hero__panel-title {
        font-size: 15.5px;
        padding-bottom: 10px;
    }
    .lp-moment {
        grid-template-columns: 26px minmax(0, 1fr);
        column-gap: 10px;
        padding: 12px 0;
    }
    .lp-moment:last-child {
        padding-bottom: 12px;
    }
    .lp-moment__num {
        padding-top: 2px;
        font-size: 13px;
    }
    .lp-moment__body strong {
        font-size: 15.5px;
        margin-bottom: 6px;
    }
    .lp-moment__body span {
        font-size: 14.5px;
        line-height: 1.6;
    }

    /* 보안 및 데이터 관리 */
    .lp-trust__inner {
        gap: 22px;
    }
    .lp-trust__head .lp-h2 {
        margin-bottom: 10px;
    }
    .lp-trust__groups {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .lp-trust__group-title {
        padding: 13px 0 11px;
        font-size: 14.5px;
    }
    .lp-trust__list li {
        padding: 13px 0;
        font-size: 16px;
    }

    /* 업무 흐름 → 세로 타임라인 */
    .lp-flow {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .lp-flow__step {
        padding: 14px 0 24px;
    }
    .lp-flow__step:last-child {
        padding-bottom: 4px;
    }
    .lp-flow__no {
        font-size: 14px;
        margin-bottom: 6px;
    }
    .lp-flow__title {
        font-size: 17px;
        margin-bottom: 6px;
    }
    .lp-flow__desc {
        font-size: 15.5px;
        line-height: 1.65;
        margin-bottom: 8px;
    }
    /* 인허가 기한 알림 */
    .lp-alert {
        padding: 22px 0 0;
        gap: 18px;
    }
    .lp-alert__copy .lp-h2 {
        font-size: 22px;
    }
    .lp-alert__copy p {
        font-size: 15.5px;
        line-height: 1.7;
    }
    .lp-alert__cards {
        gap: 14px;
    }
    .lp-alert__card {
        padding: 14px 0 0;
    }
    .lp-alert__card:first-child {
        padding-top: 0;
    }
    .lp-alert__card h3 {
        font-size: 16px;
    }
    .lp-alert__card p {
        font-size: 14.5px;
    }

    /* 주요 기능 */
    .lp-features {
        grid-template-columns: minmax(0, 1fr);
    }
    .lp-features::after {
        display: none;
    }
    .lp-feature {
        padding: 20px 18px 22px;
    }
    .lp-feature h3 {
        font-size: 17px;
        margin-bottom: 8px;
    }
    .lp-feature p {
        font-size: 15.5px;
        line-height: 1.7;
    }

    /* 주요 화면 */
    .lp-shot {
        padding: 8px;
        border-radius: 6px;
    }
    .lp-shot__cap {
        padding: 12px 6px 4px;
    }
    .lp-shot__cap strong {
        font-size: 16px;
    }
    .lp-shot__cap span {
        font-size: 14.5px;
    }
    /* 9개 화면을 세로로 쌓으면 화면 3장 넘게 차지하고 글씨도 읽히지 않아, 가로로 넘기는 한 줄로.
       다음 카드가 조금 보이게(78%) 해 넘길 수 있다는 걸 알린다. 크게보기는 그대로 */
    .lp-shots {
        display: flex;
        gap: 12px;
        margin: 0 -18px;
        padding: 0 18px 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 18px;
    }
    .lp-shots .lp-shot {
        flex: 0 0 78%;
        display: flex;
        flex-direction: column;
        scroll-snap-align: start;
    }
    .lp-shots__hint {
        display: block;
        margin: 6px 0 0;
        font-size: 13px;
        color: var(--lp-muted);
    }
    /* 가로 한 줄에서는 9장을 모두 넘겨 보므로 「더보기」로 숨기지 않고 버튼도 감춘다 */
    .lp-shots:not(.is-expanded) .lp-shot:nth-child(n+7) {
        display: flex;
    }
    .lp-shots__more-wrap {
        display: none;
    }
    .lp-shots .lp-shot__cap strong {
        font-size: 16px;
    }
    .lp-shots .lp-shot__cap span {
        font-size: 14.5px;
    }

    /* 요금 → 컴팩트 카드 (이름·계정수 | 가격 / 제공 내용 한 줄 / 버튼) */
    .lp-pricing__notice {
        display: block;
        padding: 12px 16px;
        font-size: 15.5px;
        line-height: 1.6;
    }
    .lp-pricing__vat {
        font-size: 15px;
        margin-top: 12px;
    }
    .lp-pricing .pricing-plans {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-top: 26px;
    }
    .lp-pricing .pricing-plans .pricing-plan {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "head price"
            "btn btn";
        align-items: center;
        gap: 12px 14px;
        padding: 18px 18px 16px;
    }
    .lp-pricing .pricing-plans .pricing-plan.lp-plan--featured,
    .lp-pricing .pricing-plans .pricing-plan.lp-plan--featured:hover {
        padding: 17px 17px 15px;
    }
    .lp-pricing .pricing-plan .plan-head-wrap {
        grid-area: head;
        min-width: 0;
    }
    .lp-pricing .pricing-plan .plan-name {
        font-size: 20px;
    }
    .lp-pricing .pricing-plan .plan-accounts {
        margin-top: 2px;
        font-size: 14.5px;
    }
    .lp-pricing .pricing-plan .plan-price-container {
        grid-area: price;
        padding: 0;
        border: none;
        text-align: right;
    }
    .lp-pricing .pricing-plan .plan-price {
        justify-content: flex-end;
        font-size: 24px;
    }
    .lp-pricing .pricing-plan .plan-price span {
        font-size: 14px;
    }
    .lp-pricing .pricing-plan .plan-price-note {
        font-size: 13px;
        text-align: right;
    }
    .lp-pricing .pricing-plan .plan-button {
        grid-area: btn;
        display: block !important;
        margin-top: 0 !important;
        padding: 12px 0;
        font-size: 15.5px;
    }
    .lp-pricing__foot {
        font-size: 15px;
        text-align: left;
        margin-top: 16px;
    }

    /* FAQ */
    .lp-faq__side .lp-h2 {
        font-size: 26px;
    }
    .lp-faq__side .lp-h2 br {
        display: none;
    }
    .lp-faq__side .lp-lead {
        font-size: 16px;
        margin-bottom: 18px;
    }
    .lp-faq .faq-question {
        font-size: 16.5px;
        line-height: 1.5;
        padding: 16px 0;
    }
    .lp-faq .faq-question i {
        width: 26px;
        height: 26px;
    }
    .lp-faq .faq-answer {
        font-size: 15.5px;
        line-height: 1.75;
    }
    .lp-faq .faq-item.active .faq-answer {
        padding: 0 0 16px;
    }

    /* 시스템 버전 — 영문명은 모바일에서 숨김 */
    .lp-version {
        gap: 6px 12px;
        padding: 14px 0;
    }
    .lp-version__code {
        width: auto;
        font-size: 18px;
    }
    .lp-version__name {
        font-size: 15.5px;
        flex-basis: 100%;
        order: 3;
        white-space: normal;
    }
    .lp-version__en {
        display: none;
    }
    .lp-version__state {
        font-size: 13px;
        padding: 5px 10px;
        margin-left: auto;
    }

    /* 문의 */
    .lp-contact__side .lp-h2 br {
        display: none;
    }
    .lp-contact__side .lp-lead {
        margin-bottom: 18px;
    }
    .lp-contact__info div {
        font-size: 15.5px;
        padding: 12px 0;
    }
    .lp-contact__info strong {
        width: 72px;
    }
    .lp-contact__form {
        padding: 20px 16px 22px;
        border-radius: 6px;
    }
    .lp-field {
        margin-bottom: 16px;
    }
    .lp-field label,
    .lp-field .lp-field__label {
        font-size: 15px;
    }
    .lp-field__hint {
        display: block;
        margin: 4px 0 0;
        font-size: 13.5px;
    }
    .lp-input {
        padding: 12px 12px;
        font-size: 16px; /* iOS 자동 확대 방지 */
    }
    textarea.lp-input {
        height: 130px;
    }
    .lp-captcha__code {
        min-width: 0;
        flex-grow: 1;
        height: 48px;
        font-size: 22px;
    }
    .lp-captcha .lp-input {
        width: 100%;
    }

    /* 마무리 · 푸터 */
    .lp-cta {
        padding: 48px 0 52px;
    }
    .lp-cta .lp-h2 {
        font-size: 26px;
    }
    .lp-cta .lp-lead {
        margin-bottom: 30px;
    }
    .lp-cta__actions {
        flex-direction: column;
        gap: 10px;
    }
    .lp-cta__actions .lp-btn {
        width: 100%;
    }
    footer.lp-footer {
        padding: 36px 0 24px;
    }
    .lp-footer__inner {
        gap: 24px;
        padding-bottom: 22px;
    }
    .lp-footer__brand p {
        font-size: 15.5px;
        margin-bottom: 10px;
    }
    .lp-footer__contact {
        font-size: 15px;
    }
    .lp-footer__cols {
        gap: 20px 36px;
    }
    .lp-footer .footer-links {
        gap: 2px;
    }
    .lp-footer .footer-links a {
        display: inline-block;
        padding: 7px 0;
        font-size: 15.5px;
    }
    .lp-footer__copy {
        font-size: 14px;
        padding-top: 16px;
    }
}
@media (max-width: 400px) {
    .lp-hero__title {
        font-size: 29px;
    }
    .lp-pricing .pricing-plan .plan-price {
        font-size: 22px;
    }
    .lp-footer__cols {
        gap: 18px 28px;
    }
}

/* ---------------------------------------------------------------------
   16. 주요 화면 확대 보기 (8절 카드의 「크게보기」 클릭 → 모달)
   --------------------------------------------------------------------- */
.lp-shot {
    position: relative;
    cursor: zoom-in;
    transition: border-color 0.15s ease;
}
/* hover 는 테두리만 짙게 — 떠오르거나 그림자를 두지 않는다 */
.lp-shot:hover {
    border-color: #8e99a8;
}
.lp-shots .lp-shot__cap,
.lp-shot--main .lp-shot__cap {
    padding-right: 108px;
}
.lp-shot__zoom {
    position: absolute;
    right: 14px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #c8d0dc;
    border-radius: 4px;
    background: #ffffff;
    color: var(--lp-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.lp-shot:hover .lp-shot__zoom,
.lp-shot__zoom:hover {
    background: #f4f6fa;
    border-color: #8e99a8;
}
.lp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: flex-start; /* 가운데 정렬은 .lp-lightbox__box 의 margin:auto 로 — 화면보다 높으면 위에서부터 배치해 스크롤 */
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(15, 23, 42, 0.62);
    cursor: zoom-out;
}
.lp-lightbox.is-open {
    display: flex;
}
.lp-lightbox__box {
    position: relative;
    max-width: min(1280px, 96vw);
    margin: auto; /* 들어가면 가운데, 넘치면 위쪽부터 (가로 휴대폰에서 위쪽·닫기 버튼이 잘리던 문제) */
    background: #ffffff;
    border-radius: 6px;
    padding: 10px 10px 8px;
    cursor: default;
}
.lp-lightbox__scroll {
    overflow: hidden;
    border-radius: 6px;
}
.lp-lightbox__box img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 140px);
    border-radius: 6px;
}
.lp-lightbox__hint {
    display: none;
}
.lp-lightbox__cap {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 10px 6px 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--lp-ink);
}
.lp-lightbox__cap span {
    font-size: 15px;
    font-weight: 400;
    color: var(--lp-muted);
}
.lp-lightbox__close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #111827;
    color: #ffffff;
    font-size: 22px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
}
.lp-lightbox__close:hover {
    background: #000000;
}
@media (max-width: 768px) {
    .lp-shot--main .lp-shot__cap {
        padding-right: 100px;
    }
    .lp-shot__zoom {
        right: 10px;
        bottom: 12px;
        height: 30px;
        padding: 0 11px;
        font-size: 12.5px;
    }
    /* 가로 한 줄 카드는 폭이 좁아 버튼을 설명 옆이 아니라 카드 맨 아래에 둔다 (카드 높이가 달라도 버튼 줄이 맞게) */
    .lp-shots .lp-shot__cap {
        padding-right: 6px;
        padding-bottom: 10px;
    }
    .lp-shots .lp-shot__zoom {
        position: static;
        align-self: flex-start;
        margin: auto 6px 4px;
    }
    .lp-lightbox {
        padding: 12px;
    }
    .lp-lightbox__box {
        max-width: 100%;
        padding: 6px 6px 4px;
    }
    /* 모바일: 화면 폭에 맞추면 카드와 같은 크기라 읽을 수 없으므로 가로 스크롤로 크게 보여준다 */
    .lp-lightbox__scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .lp-lightbox__box img {
        width: 960px;
        max-width: none;
        max-height: none;
    }
    .lp-lightbox__hint {
        display: block;
        padding: 0 4px 6px;
        font-size: 12.5px;
        color: var(--lp-muted);
    }
    .lp-lightbox__cap {
        font-size: 15px;
        padding: 8px 4px 2px;
    }
    .lp-lightbox__cap span {
        font-size: 14px;
    }
    .lp-lightbox__close {
        top: -10px;
        right: -10px;
    }
}

/* ---------------------------------------------------------------------
   17. 인허가 기한 알림(6절) 「메일 예시 보기」 + 메일 미리보기 모달
   --------------------------------------------------------------------- */
.lp-alert__mail {
    display: inline-flex;
    align-items: center;
    height: 32px;
    margin-top: 14px;
    padding: 0 12px;
    border: 1px solid #c8d0dc;
    border-radius: 4px;
    background: #ffffff;
    color: var(--lp-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.lp-alert__mail:hover {
    background: #f4f6fa;
    border-color: #8e99a8;
}
.lp-mailbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.62);
    cursor: zoom-out;
}
.lp-mailbox.is-open {
    display: flex;
}
.lp-mailbox__box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(900px, 96vw);
    max-height: calc(100vh - 48px);
    background: #ffffff;
    border-radius: 6px;
    padding: 14px 14px 12px;
    cursor: default;
}
.lp-mailbox__head {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 10px;
    padding: 2px 4px 12px;
    border-bottom: 1px solid var(--lp-line-soft);
}
.lp-mailbox__head strong {
    font-size: 16px;
    font-weight: 700;
    color: var(--lp-ink);
}
.lp-mailbox__head span {
    font-size: 13.5px;
    color: var(--lp-muted);
}
.lp-mailbox__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--lp-line);
    border-radius: 6px;
    background: #ffffff;
}
.lp-mailbox__scroll iframe {
    display: block;
    width: 100%;
    min-width: 840px;
    height: 600px;
    border: 0;
}
.lp-mailbox__hint {
    display: none;
}
.lp-mailbox__close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #111827;
    color: #ffffff;
    font-size: 22px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
}
.lp-mailbox__close:hover {
    background: #000000;
}
@media (max-width: 768px) {
    .lp-alert__mail {
        height: 30px;
        margin-top: 12px;
        padding: 0 11px;
        font-size: 12.5px;
    }
    .lp-mailbox {
        padding: 12px;
    }
    .lp-mailbox__box {
        width: 100%;
        max-height: calc(100vh - 24px);
        padding: 10px 8px 8px;
    }
    /* 오른쪽 위 닫기 버튼(안쪽으로 26px 걸침)에 제목이 가리지 않게 */
    .lp-mailbox__head {
        padding-right: 28px;
    }
    .lp-mailbox__head strong {
        font-size: 15px;
    }
    .lp-mailbox__head span {
        font-size: 13px;
    }
    .lp-mailbox__close {
        top: -10px;
        right: -10px;
    }
}
/* 메일 본문(800px)보다 모달이 좁아 가로 스크롤이 생기는 폭부터 안내 문구 표시 */
@media (max-width: 920px) {
    .lp-mailbox__hint {
        display: block;
        padding: 6px 4px 0;
        font-size: 12.5px;
        color: var(--lp-muted);
    }
}

/* ---------------------------------------------------------------------
   18. 화면 높이가 낮을 때(가로 모드 휴대폰 등) 기존 모달이 위로 잘리는 문제
   - armanager_main.css 의 로그인·비밀번호 재설정 모달은 flex 가운데 정렬이라
     내용이 화면보다 길면 윗부분(제목·닫기 버튼)이 화면 밖으로 밀려 스크롤로도 닿지 않는다.
   - 컨테이너에 margin:auto 를 주면 들어갈 때는 가운데, 넘칠 때는 위에서부터 배치되어 스크롤된다.
   - 랜딩 전용 CSS 에서만 덮어써 다른 화면(SWOM 등)에는 영향 없음.
   --------------------------------------------------------------------- */
@media (max-height: 700px) {
    .login-modal,
    .reset-password-modal,
    .system-pwd-reset-modal {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* 위아래만 줄이고 좌우 여백은 각 모달의 기존 값을 유지 (0 으로 덮으면 작은 화면에서 모달이 가장자리에 붙음) */
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .login-modal .login-container,
    .reset-password-modal .reset-password-container,
    .system-pwd-reset-modal .system-pwd-reset-container {
        margin: auto;
    }
}

/* =====================================================================
   19. 랜딩에서 여는 모달 정돈 — 로그인·비밀번호 초기화·이용 신청·알림·처리 중
   armanager_main.css 는 SWOM 과 공유라 손대지 않고 여기서 덮어쓴다.
   모서리 6px 한 단, 그림자·튀어 오르는 전환·반짝임 없음, 머리는 색 띠 대신 흰 바탕 + 규칙선,
   장식 아이콘은 숨기고 글자로만 말한다. (마크업의 id·class 는 JS 가 쓰므로 그대로)
   ===================================================================== */
.login-modal,
.reset-password-modal,
.system-usage-modal,
.alert-modal,
.progress-modal {
    background-color: rgba(15, 23, 42, 0.55);
    backdrop-filter: none;
}
.login-container,
.reset-password-container,
.system-usage-container,
.alert-container,
.system-pwd-reset-container,
.progress-container {
    border-radius: 6px;
    box-shadow: none;
}
.login-modal .login-container,
.login-modal.active .login-container,
.system-usage-modal .system-usage-container,
.system-usage-modal.active .system-usage-container,
.alert-modal .alert-container,
.alert-modal.active .alert-container,
.reset-password-modal .reset-password-container,
.reset-password-modal.active .reset-password-container {
    transform: none;
    transition: none;
    animation: none;
}

/* 머리: 색 띠 → 흰 바탕 + 아래 규칙선 */
.system-usage-header,
.alert-header {
    background: #ffffff;
    color: var(--lp-ink);
    border-bottom: 1px solid var(--lp-line);
    border-radius: 6px 6px 0 0;
}
.system-usage-header h2,
.alert-header h3 {
    color: var(--lp-ink);
}
.alert-header h3 i {
    display: none;
}
.close-login-btn,
.close-reset-password-btn,
.close-system-usage-btn,
.close-alert-btn {
    color: var(--lp-muted);
}
.close-login-btn:hover,
.close-reset-password-btn:hover,
.close-system-usage-btn:hover,
.close-alert-btn:hover {
    color: var(--lp-ink);
    transform: none;
}

/* 입력칸: 아이콘 없이, 경계 3:1, 포커스는 2px 외곽선 */
.login-modal .input-with-icon i,
.reset-password-modal .input-with-icon i {
    display: none;
}
.login-modal .input-with-icon input,
.reset-password-modal .input-with-icon input {
    height: 50px;
    padding: 0 14px;
    border: 1px solid #858f9e;
    border-radius: 6px;
    font-size: 16px;
    box-shadow: none;
}
.login-modal .input-with-icon input:focus,
.reset-password-modal .input-with-icon input:focus,
.system-usage-form input:focus,
.system-usage-form select:focus,
.system-usage-form textarea:focus {
    border-color: var(--lp-accent);
    box-shadow: none;
    outline: 2px solid var(--lp-accent);
    outline-offset: -1px;
}
/* 이용 신청 입력칸 경계도 3:1 (armanager_main.css 의 #ddd 는 1.36:1) — 요금제 고르기 라디오는 제외 */
.system-usage-form input:not([type="radio"]):not([type="checkbox"]),
.system-usage-form select,
.system-usage-form textarea {
    border-color: #858f9e;
}
/* 안내 문구 색을 문의 폼과 같게 (4.66:1) */
.login-modal .input-with-icon input::placeholder,
.reset-password-modal .input-with-icon input::placeholder,
.system-usage-form input::placeholder,
.system-usage-form textarea::placeholder {
    color: #6b7584;
}
/* 오류 칸: 번지는 그림자·연분홍 배경 대신 빨간 테두리, 포커스가 오면 외곽선 2px.
   armanager_main.css 의 .login-form .form-group input.error-field(:focus) 등이 위 포커스 규칙보다 구체적이라
   같은 선택자에 body 를 붙여 한 단계 높인다 (로그인 화면은 login_landing.css 에서 같은 모양) */
body .login-form .form-group input.error-field,
body .reset-password-form .form-group input.error-field,
body .system-usage-form .form-group input.error-field,
body .system-pwd-reset-form input.error-field {
    border-color: #c93b3b;
    background-color: #ffffff;
    box-shadow: none;
    outline: 1px solid #c93b3b;
    outline-offset: -1px;
}
body .login-form .form-group input.error-field:focus,
body .reset-password-form .form-group input.error-field:focus,
body .system-usage-form .form-group input.error-field:focus,
body .system-pwd-reset-form input.error-field:focus {
    border-color: #c93b3b;
    background-color: #ffffff;
    box-shadow: none;
    outline: 2px solid #c93b3b;
    outline-offset: -1px;
}

/* 강조 버튼: 네이비 단색, hover 는 색만 짙게 */
.login-submit-btn,
.confirm-alert-btn,
.submit-system-usage-btn {
    border-radius: 6px;
    background-color: var(--lp-accent);
    box-shadow: none;
}
.login-submit-btn:hover,
.login-submit-btn:active,
.confirm-alert-btn:hover,
.confirm-alert-btn:active,
.submit-system-usage-btn:hover,
.submit-system-usage-btn:active {
    background-color: var(--lp-accent-dark);
    transform: none;
    box-shadow: none;
    letter-spacing: normal;
}
/* 버튼 위에 덧씌우던 그라디언트 막 */
.confirm-alert-btn::before,
.confirm-alert-btn::after,
.submit-system-usage-btn::before {
    display: none;
}
/* 비밀번호 초기화의 인증번호 요청·인증 버튼: 그림자·떠오름 없이 (비활성 회색은 공용 CSS 그대로) */
.reset-password-modal .request-verification-btn,
.reset-password-modal .verify-code-btn {
    border-radius: 6px;
    box-shadow: none;
}
.reset-password-modal .request-verification-btn:not(:disabled),
.reset-password-modal .verify-code-btn:not(:disabled) {
    background-color: var(--lp-accent);
}
.reset-password-modal .request-verification-btn:not(:disabled):hover,
.reset-password-modal .verify-code-btn:not(:disabled):hover {
    background-color: var(--lp-accent-dark);
    transform: none;
    box-shadow: none;
}

/* 이용 신청 모달의 요금제 선택: 파스텔·✓ 원형 배지·위로 이동 없이, 선택은 테두리로만 */
.system-usage-modal .plan-option,
.system-usage-modal .plan-option:hover,
.system-usage-modal .plan-option.selected {
    background-color: #ffffff;
    box-shadow: none;
    transform: none;
}
.system-usage-modal .plan-option {
    border: 1px solid #c8d0dc;
    border-radius: 6px;
}
.system-usage-modal .plan-option:hover {
    border-color: #8e99a8;
}
.system-usage-modal .plan-option.selected {
    border-color: var(--lp-accent);
    outline: 1px solid var(--lp-accent);
    outline-offset: -2px;
}
.system-usage-modal .plan-option.selected::before {
    display: none;
}
.system-usage-modal .plan-option .plan-price {
    color: var(--lp-body);
}
.system-usage-modal .vat-notice i {
    display: none;
}
/* 좁은 폭에서 「요금제 선택」이 두 줄로 꺾이지 않게 제목은 한 줄, 안내 문구가 줄바꿈 */
.system-usage-modal .plan-selection-group > div:first-child {
    gap: 12px;
}
.system-usage-modal .plan-selection-title {
    flex-shrink: 0;
    white-space: nowrap;
}
/* 선택해도 글자 크기는 그대로 — 커지면 줄이 흔들린다 */
.system-usage-modal .plan-option.selected .plan-name {
    color: var(--lp-accent);
    font-size: 16px;
}
.system-usage-modal .plan-option.selected .plan-price {
    color: var(--lp-accent);
    font-size: 15px;
}
@media (max-width: 768px) {
    .system-usage-modal .plan-option.selected .plan-name {
        font-size: 15px;
    }
    .system-usage-modal .plan-option.selected .plan-price {
        font-size: 14px;
    }
}

/* 알림 모달 본문 */
.alert-message-email {
    background-color: var(--lp-soft);
    border-radius: 4px;
}
.alert-message-instruction {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
}
.alert-footer {
    background-color: #ffffff;
    border-top: 1px solid var(--lp-line-soft);
}

/* 처리 중 모달: 상단 색 띠 없음, 튀어 오르며 커지는 전환 없음 */
.progress-container {
    border: 1px solid var(--lp-line);
}
.progress-container::before {
    display: none;
}
.progress-modal .progress-container,
.progress-modal.active .progress-container {
    transform: none;
    transition: none;
}
.progress-content {
    box-shadow: none; /* 안쪽 그림자(inset) 없음 */
}

/* SYSTEM 계정 비밀번호 초기화 버튼(로컬에서만 보임): 그라디언트·그림자·떠오름 없이 테두리 버튼으로 */
.system-pwd-reset-btn {
    background: #ffffff;
    border: 1px solid #c8d0dc;
    border-radius: 6px;
    color: #2c3a4c;
    box-shadow: none;
}
.system-pwd-reset-btn:hover {
    background: #f4f6fa;
    transform: none;
    box-shadow: none;
}
/* SYSTEM 인증 영역의 인증번호 요청 버튼: 비밀번호 초기화의 같은 버튼처럼 네이비 단색 */
.system-auth-area .request-verification-btn {
    background: var(--lp-accent);
    border-radius: 6px;
    box-shadow: none;
}
.system-auth-area .request-verification-btn:hover {
    background: var(--lp-accent-dark);
    transform: none;
    box-shadow: none;
}

/* 이용약관·개인정보처리방침 전체 화면의 닫기 버튼: 로그인 화면과 같은 모양(흰 바탕 + 테두리).
   armanager_main.css 의 hover 는 어디에도 정의되지 않은 변수(--primary-dark)를 써서 배경이 투명해지고 흰 글자가 사라졌다 */
.close-terms-btn {
    border: 1px solid #c8d0dc;
    background: #ffffff;
    color: #2c3a4c;
    box-shadow: none;
}
.close-terms-btn:hover,
.close-terms-btn:active {
    background: #f4f6fa;
    box-shadow: none;
    transform: none;
}
/* 약관 머리: 그림자 대신 아래 1px 선. 위치(원래 80px 고정)를 실제 헤더 높이(70·65·60px + 아래선 1px)에 붙여
   헤더와 머리 사이 흰 틈을 없앤다 — 컨테이너 윗 여백도 같은 만큼 옮겨 본문 위치 관계는 그대로 */
.terms-header {
    top: 71px;
    border-bottom-color: var(--lp-line);
    box-shadow: none;
}
.terms-container {
    padding-top: 71px;
}
@media (max-width: 992px) {
    .terms-header {
        top: 66px;
    }
    .terms-container {
        padding-top: 66px;
    }
}
@media (max-width: 768px) {
    .terms-header {
        top: 61px;
    }
    .terms-container {
        padding-top: 61px;
    }
}

/* =====================================================================
   20. 포커스·움직임
   ===================================================================== */
/* 키보드 포커스는 어디서나 2px 외곽선으로 보인다 */
.lp a:focus-visible,
.lp button:focus-visible,
header a:focus-visible,
header button:focus-visible,
.lp-footer a:focus-visible,
.lp-lightbox__close:focus-visible,
.lp-mailbox__close:focus-visible,
.login-modal a:focus-visible,
.login-modal button:focus-visible,
.reset-password-modal a:focus-visible,
.reset-password-modal button:focus-visible,
.system-usage-modal a:focus-visible,
.system-usage-modal button:focus-visible,
.alert-modal button:focus-visible,
.lp-trial button:focus-visible,
.selectIds button:focus-visible,
.terms-container a:focus-visible,
.terms-container button:focus-visible {
    outline: 2px solid var(--lp-accent);
    outline-offset: 2px;
}
/* 움직임 줄이기 설정을 켠 사용자에게는 전환·애니메이션을 끈다 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =====================================================================
   21. 테스트 사이트 체험 모달 (#testSiteModal — 2026-10-03 간소화)
   제목(작게) → 큰 한 줄 → 설명 → 규칙선 아래 주석 → 버튼. 기능 목록·아이콘·안내 상자 없음.
   .active 토글·바깥 클릭·Esc 는 test_site.js 그대로. 여닫을 때 160ms 투명도 + 상자 6px 이동만.
   ===================================================================== */
.lp-trial {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-start; /* 가운데 정렬은 상자의 margin:auto — 화면보다 높으면 위에서부터 배치해 스크롤 */
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: rgba(15, 23, 42, 0.55);
    color: var(--lp-ink);
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: anywhere;
    opacity: 0;
    visibility: hidden;
    /* 닫을 때는 투명해진 뒤 숨긴다 */
    transition: opacity 0.16s ease-out, visibility 0s linear 0.16s;
}
.lp-trial.active {
    opacity: 1;
    visibility: visible;
    /* 열 때는 바로 보이게 — 그래야 여는 즉시 버튼에 포커스를 옮길 수 있다 */
    transition: opacity 0.16s ease-out, visibility 0s linear 0s;
}
.lp-trial__box {
    width: 100%;
    max-width: 560px;
    margin: auto;
    padding: 32px 36px;
    background-color: #ffffff;
    border-radius: 6px;
    transform: translateY(6px);
    transition: transform 0.16s ease-out;
}
.lp-trial.active .lp-trial__box {
    transform: none;
}
/* 제목은 본문 섹션 머리(.lp-eyebrow)와 같은 작은 글자. 닫기는 아래 [닫기]·바깥 클릭·Esc 로만(오른쪽 위 닫기 없음) */
.lp-trial__title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.1em;
    color: var(--lp-muted);
}
.lp-trial__lead {
    margin: 0 0 14px;
    font-size: 30px;
    line-height: 1.32;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--lp-ink);
}
.lp-trial__desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: var(--lp-body);
}
.lp-trial__note {
    margin: 24px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--lp-line);
    font-size: 14px;
    line-height: 1.7;
    color: var(--lp-muted);
}
.lp-trial__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 28px;
}
.lp-trial__actions form {
    display: flex;
    margin: 0;
}
/* 휴대폰: 상자 여백을 줄이고, 주 버튼이 남은 폭을 채운다(닫기는 글자 폭) */
@media (max-width: 480px) {
    .lp-trial {
        padding: 16px;
    }
    .lp-trial__box {
        padding: 22px 20px 20px;
    }
    .lp-trial__lead {
        font-size: 23px;
        line-height: 1.36;
    }
    .lp-trial__desc {
        font-size: 15.5px;
    }
    /* 설명의 줄바꿈(「관리까지」 뒤)은 넓은 화면용 — 좁으면 자연스럽게 흐르게 */
    .lp-trial__desc br {
        display: none;
    }
    .lp-trial__note {
        margin-top: 20px;
        padding-top: 12px;
        font-size: 13.5px;
    }
    .lp-trial__actions {
        margin-top: 22px;
    }
    .lp-trial__actions form {
        flex: 1 1 auto;
    }
    .lp-trial__actions form .lp-btn {
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .lp-trial,
    .lp-trial.active,
    .lp-trial__box {
        transition: none;
    }
}