.lite-about-page {
    --lite-bg: #f7f4ec;
    --lite-bg-soft: #fbf9f3;
    --lite-surface: #fffefa;
    --lite-surface-muted: #f1ede3;
    --lite-ink: #182216;
    --lite-muted: #5f6a5a;
    --lite-subtle: #8b927f;
    --lite-primary: #25531f;
    --lite-primary-strong: #173d14;
    --lite-primary-soft: #e4edd9;
    --lite-title-underline: #dfead3;
    --lite-button-primary: #25531f;
    --lite-button-primary-hover: #173d14;
    --lite-button-primary-text: #ffffff;
    --lite-accent: #9d684f;
    --lite-line: #ded6c4;
    --lite-line-strong: #c9bea6;
    --lite-tree-ground: rgba(139, 107, 74, 0.34);
    --lite-tree-trunk: #8b6b4a;
    --lite-tree-leaf-dark: #3f5a3b;
    --lite-tree-leaf: #4f6b4a;
    --lite-tree-leaf-mid: #6b8a5e;
    --lite-tree-fruit: #b5654e;
    --lite-tree-autumn-dark: #8b4d38;
    --lite-tree-autumn: #b5654e;
    --lite-tree-star: #e8c879;
    --lite-shadow: 0 24px 64px rgba(37, 83, 31, 0.12);
    --lite-shadow-soft: 0 14px 36px rgba(37, 83, 31, 0.08);
    min-height: 100vh;
    padding-bottom: 0;
    overflow-x: clip;
    background:
        linear-gradient(180deg, rgba(255, 254, 250, 0.62), rgba(247, 244, 236, 0) 520px),
        var(--lite-bg);
    color: var(--lite-ink);
    font-family: "Noto Sans KR", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

[data-theme="dark"] .lite-about-page {
    --lite-bg: #0c110b;
    --lite-bg-soft: #11170f;
    --lite-surface: #151b13;
    --lite-surface-muted: #1d2519;
    --lite-ink: #f2f6ee;
    --lite-muted: #c0c9b8;
    --lite-subtle: #8c9985;
    --lite-primary: #a9d36f;
    --lite-primary-strong: #c5e58d;
    --lite-primary-soft: rgba(169, 211, 111, 0.16);
    --lite-title-underline: rgba(169, 211, 111, 0.24);
    --lite-button-primary: #a9d36f;
    --lite-button-primary-hover: #c5e58d;
    --lite-button-primary-text: #10200d;
    --lite-accent: #d9a088;
    --lite-line: rgba(232, 239, 224, 0.16);
    --lite-line-strong: rgba(232, 239, 224, 0.28);
    --lite-tree-ground: rgba(213, 189, 148, 0.38);
    --lite-tree-trunk: #b38b62;
    --lite-tree-leaf-dark: #5f8f52;
    --lite-tree-leaf: #7bac67;
    --lite-tree-leaf-mid: #9cc783;
    --lite-tree-fruit: #e1a18b;
    --lite-tree-autumn-dark: #b66850;
    --lite-tree-autumn: #d68d72;
    --lite-tree-star: #f1cf7a;
    --lite-shadow: 0 28px 70px rgba(0, 0, 0, 0.36);
    --lite-shadow-soft: 0 18px 42px rgba(0, 0, 0, 0.28);
    background:
        linear-gradient(180deg, rgba(21, 27, 19, 0.7), rgba(12, 17, 11, 0) 520px),
        var(--lite-bg);
}

.lite-about-page a {
    color: inherit;
    text-decoration: none;
}

.lite-about-container {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
}

.lite-about-hero {
    padding: 64px 0 72px;
}

.lite-about-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
    gap: 64px;
    align-items: center;
}

.lite-about-page.has-reveal [data-lite-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.54s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.54s cubic-bezier(0.16, 1, 0.3, 1);
}

.lite-about-page.is-ready [data-lite-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

.lite-about-brand-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 5px 13px 5px 5px;
    border: 1px solid var(--lite-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--lite-surface) 82%, transparent);
    color: var(--lite-primary-strong);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.lite-about-brand-line img {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.lite-about-hero h1,
.lite-about-editorial h2,
.lite-about-section-head h2,
.lite-about-cta h2 {
    overflow-wrap: anywhere;
    color: var(--lite-ink);
    font-weight: 900;
    letter-spacing: 0;
}

.lite-about-hero h1 {
    max-width: 560px;
    margin: 20px 0 18px;
    font-size: 3.82rem;
    line-height: 1.08;
}

.lite-about-hero h1 > span {
    display: block;
}

.lite-about-title-mark {
    background: linear-gradient(
        to top,
        transparent 0,
        transparent 0.12em,
        var(--lite-title-underline) 0.12em,
        var(--lite-title-underline) 0.44em,
        transparent 0.44em
    );
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.lite-about-hero-lead {
    max-width: 520px;
    margin: 0 0 28px;
    color: var(--lite-muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

.lite-about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.lite-about-btn,
.lite-about-store {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 850;
    line-height: 1.2;
    transition:
        transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        color 0.18s ease;
}

.lite-about-btn {
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid transparent;
}

.lite-about-btn:hover,
.lite-about-store:hover {
    transform: translateY(-2px);
}

.lite-about-btn:active,
.lite-about-store:active {
    transform: translateY(0);
}

.lite-about-page .lite-about-btn-primary,
.lite-about-page .lite-about-btn-primary:visited {
    background: var(--lite-button-primary);
    color: var(--lite-button-primary-text);
    box-shadow: 0 12px 26px rgba(37, 83, 31, 0.2);
}

.lite-about-page .lite-about-btn-primary:hover {
    background: var(--lite-button-primary-hover);
    color: var(--lite-button-primary-text);
}

.lite-about-btn-secondary {
    border-color: var(--lite-line);
    background: var(--lite-surface);
    color: var(--lite-ink);
}

.lite-about-page .lite-about-btn-secondary,
.lite-about-page .lite-about-btn-secondary:visited {
    color: var(--lite-ink);
}

.lite-about-btn-secondary:hover {
    border-color: var(--lite-line-strong);
    color: var(--lite-primary-strong);
    box-shadow: var(--lite-shadow-soft);
}

.lite-about-btn-light {
    background: #ffffff;
    color: #173d14;
}

.lite-about-page .lite-about-btn-light,
.lite-about-page .lite-about-btn-light:visited,
.lite-about-page .lite-about-btn-light:hover {
    color: #173d14;
}

.lite-about-btn-outline {
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
}

.lite-about-page .lite-about-btn-outline,
.lite-about-page .lite-about-btn-outline:visited,
.lite-about-page .lite-about-btn-outline:hover {
    color: #ffffff;
}

.lite-about-page .lite-about-btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
}

.lite-about-store-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.lite-about-store {
    min-height: 42px;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--lite-line);
    background: color-mix(in srgb, var(--lite-surface) 78%, transparent);
    color: var(--lite-muted);
}

.lite-about-page .lite-about-store,
.lite-about-page .lite-about-store:visited {
    color: var(--lite-muted);
}

.lite-about-store.is-preferred {
    border-color: var(--lite-primary);
    background: var(--lite-primary-soft);
    color: var(--lite-primary-strong);
}

.lite-about-page .lite-about-store.is-preferred,
.lite-about-page .lite-about-store.is-preferred:visited,
.lite-about-page .lite-about-store:hover {
    color: var(--lite-primary-strong);
}

.lite-about-page.is-ios-store [data-lite-store-android],
.lite-about-page.is-android-store [data-lite-store-ios] {
    display: none;
}

.lite-about-hero-visual {
    position: relative;
    min-height: 560px;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(130px, 190px);
    gap: 20px;
    align-items: center;
    justify-content: center;
    padding: 28px;
    border: 1px solid var(--lite-line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--lite-surface) 92%, transparent), color-mix(in srgb, var(--lite-primary-soft) 46%, transparent)),
        var(--lite-surface);
    box-shadow: var(--lite-shadow);
}

.lite-about-phone-frame {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--lite-line) 78%, transparent);
    border-radius: 8px;
    background: var(--lite-surface);
    box-shadow: 0 18px 42px rgba(37, 83, 31, 0.14);
}

[data-theme="dark"] .lite-about-phone-frame {
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34);
}

.lite-about-phone-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.lite-about-phone-frame-main {
    width: min(310px, 100%);
}

.lite-about-phone-frame-small {
    width: min(178px, 100%);
}

.lite-about-hero-stack {
    display: grid;
    gap: 16px;
    align-content: center;
}

.lite-about-media-note {
    padding: 12px 14px;
    border: 1px solid var(--lite-line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--lite-surface) 88%, transparent);
    color: var(--lite-muted);
    font-size: 0.9rem;
    line-height: 1.55;
    font-weight: 750;
    box-shadow: var(--lite-shadow-soft);
}

.lite-about-editorial {
    padding: 58px 0;
    border-top: 1px solid var(--lite-line);
    border-bottom: 1px solid var(--lite-line);
    background: var(--lite-surface);
}

.lite-about-editorial-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
    gap: 52px;
    align-items: start;
}

.lite-about-kicker {
    margin: 0 0 10px;
    color: var(--lite-primary-strong);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0;
}

.lite-about-editorial h2 {
    margin: 0;
    font-size: 2.55rem;
    line-height: 1.2;
}

.lite-about-editorial-body {
    display: grid;
    gap: 10px;
    color: var(--lite-muted);
    font-size: 1.04rem;
    line-height: 1.85;
}

.lite-about-editorial-body p,
.lite-about-editorial-body strong {
    margin: 0;
}

.lite-about-editorial-body strong {
    color: var(--lite-primary-strong);
    font-weight: 900;
}

.lite-about-section {
    padding: 86px 0;
}

.lite-about-section-head {
    max-width: 680px;
    margin: 0 auto 34px;
    text-align: center;
}

.lite-about-section-head h2,
.lite-about-cta h2 {
    margin: 0;
    font-size: 2.85rem;
    line-height: 1.18;
}

.lite-about-section-lead {
    max-width: 540px;
    margin: 14px auto 0;
    color: var(--lite-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.lite-about-value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.lite-about-value,
.lite-about-growth-step,
.lite-about-faq-list details {
    border: 1px solid var(--lite-line);
    border-radius: 8px;
    background: var(--lite-surface);
}

.lite-about-value {
    padding: 24px;
    box-shadow: var(--lite-shadow-soft);
}

.lite-about-value i {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: 8px;
    background: var(--lite-primary-soft);
    color: var(--lite-primary-strong);
    font-size: 1.05rem;
}

.lite-about-value h3,
.lite-about-flow-copy h3 {
    margin: 0 0 10px;
    color: var(--lite-ink);
    font-weight: 900;
    letter-spacing: 0;
}

.lite-about-value h3 {
    font-size: 1.2rem;
    line-height: 1.35;
}

.lite-about-value p,
.lite-about-flow-copy p,
.lite-about-growth-step p,
.lite-about-faq-list p {
    margin: 0;
    color: var(--lite-muted);
    line-height: 1.72;
}

.lite-about-flow-band,
.lite-about-faq-band {
    border-top: 1px solid var(--lite-line);
    border-bottom: 1px solid var(--lite-line);
    background: color-mix(in srgb, var(--lite-surface) 54%, transparent);
}

.lite-about-flow {
    display: grid;
    gap: 18px;
}

.lite-about-flow-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 330px);
    gap: 44px;
    align-items: center;
    padding: 28px;
    border: 1px solid var(--lite-line);
    border-radius: 8px;
    background: var(--lite-surface);
    box-shadow: var(--lite-shadow-soft);
}

.lite-about-flow-step.is-reverse {
    grid-template-columns: minmax(230px, 330px) minmax(0, 1fr);
}

.lite-about-flow-step.is-reverse .lite-about-flow-copy {
    order: 2;
}

.lite-about-flow-copy span {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--lite-primary-soft);
    color: var(--lite-primary-strong);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0;
}

.lite-about-flow-copy h3 {
    font-size: 2.05rem;
    line-height: 1.22;
}

.lite-about-flow-media {
    display: flex;
    justify-content: center;
}

.lite-about-flow-media .lite-about-phone-frame {
    width: min(250px, 100%);
}

.lite-about-flow-step-final {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--lite-primary-soft) 64%, transparent), color-mix(in srgb, var(--lite-surface) 86%, transparent)),
        var(--lite-surface);
}

.lite-about-growth {
    border-top: 1px solid var(--lite-line);
    border-bottom: 1px solid var(--lite-line);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--lite-bg-soft) 88%, transparent), var(--lite-bg-soft)),
        var(--lite-bg-soft);
}

.lite-about-growth-inner {
    max-width: 1080px;
}

.lite-about-growth-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.lite-about-growth-grid::before {
    content: "";
    position: absolute;
    right: 5%;
    left: 5%;
    top: 48%;
    height: 2px;
    background: repeating-linear-gradient(
        to right,
        var(--lite-line-strong) 0 7px,
        transparent 7px 15px
    );
}

.lite-about-growth-step {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    align-content: start;
    min-height: 292px;
    padding: 24px 18px 26px;
    text-align: center;
    box-shadow: var(--lite-shadow-soft);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.lite-about-growth-step:hover {
    border-color: var(--lite-line-strong);
    box-shadow: var(--lite-shadow);
    transform: translateY(-4px);
}

.lite-about-growth-visual {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 124px;
    margin-bottom: 12px;
}

.lite-about-growth-visual svg {
    display: block;
    width: 90px;
    max-width: 100%;
    height: 124px;
    overflow: visible;
}

.lite-about-growth-visual-forest svg {
    width: 148px;
}

.lite-about-growth-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--lite-primary-soft);
    color: var(--lite-primary-strong);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.lite-about-growth-step h3 {
    margin: 12px 0 8px;
    color: var(--lite-ink);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.42;
    letter-spacing: 0;
}

.lite-about-faq-list {
    max-width: 820px;
    margin: 0 auto;
    display: grid;
    gap: 10px;
}

.lite-about-faq-list details {
    padding: 0 18px;
}

.lite-about-faq-list summary {
    cursor: pointer;
    padding: 18px 0;
    color: var(--lite-ink);
    font-weight: 900;
    list-style-position: outside;
}

.lite-about-faq-list details[open] summary {
    color: var(--lite-primary-strong);
}

.lite-about-faq-list p {
    padding: 0 0 18px;
}

.lite-about-cta {
    padding: 56px 0;
    background: var(--lite-primary-strong);
    color: #ffffff;
}

[data-theme="dark"] .lite-about-cta {
    background: #1f3e18;
}

.lite-about-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.lite-about-cta .lite-about-kicker,
.lite-about-cta h2,
.lite-about-cta span {
    color: #ffffff;
}

.lite-about-cta span {
    display: block;
    margin-top: 8px;
    opacity: 0.84;
}

@media (prefers-reduced-motion: reduce) {
    .lite-about-page.has-reveal [data-lite-reveal],
    .lite-about-page.has-reveal.is-ready [data-lite-reveal].is-visible,
    .lite-about-btn,
    .lite-about-store {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (max-width: 980px) {
    .lite-about-hero-grid,
    .lite-about-editorial-inner {
        grid-template-columns: 1fr;
    }

    .lite-about-hero {
        padding-top: 44px;
    }

    .lite-about-hero-copy,
    .lite-about-editorial-inner {
        text-align: center;
    }

    .lite-about-hero h1,
    .lite-about-hero-lead {
        margin-right: auto;
        margin-left: auto;
    }

    .lite-about-actions,
    .lite-about-store-row {
        justify-content: center;
    }

    .lite-about-hero-visual {
        min-height: auto;
        width: min(640px, 100%);
        margin: 0 auto;
    }

    .lite-about-flow-step,
    .lite-about-flow-step.is-reverse {
        grid-template-columns: 1fr;
    }

    .lite-about-flow-step.is-reverse .lite-about-flow-copy {
        order: 0;
    }

    .lite-about-flow-copy {
        text-align: center;
    }

    .lite-about-value-grid,
    .lite-about-growth-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lite-about-growth-grid::before {
        display: none;
    }

    .lite-about-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .lite-about-container {
        width: min(100% - 28px, 1120px);
    }

    .lite-about-hero {
        padding: 28px 0 52px;
    }

    .lite-about-hero-grid {
        gap: 32px;
    }

    .lite-about-hero h1 {
        font-size: 2.65rem;
        line-height: 1.08;
    }

    .lite-about-hero-lead {
        font-size: 1rem;
        line-height: 1.72;
    }

    .lite-about-actions,
    .lite-about-store-row {
        align-items: stretch;
        flex-direction: column;
    }

    .lite-about-btn,
    .lite-about-store {
        width: 100%;
    }

    .lite-about-hero-visual {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px;
    }

    .lite-about-phone-frame-main,
    .lite-about-flow-media .lite-about-phone-frame {
        width: min(260px, 100%);
    }

    .lite-about-hero-stack {
        justify-items: center;
    }

    .lite-about-phone-frame-small {
        width: min(210px, 84%);
    }

    .lite-about-media-note {
        width: 100%;
        text-align: center;
    }

    .lite-about-editorial {
        padding: 44px 0;
    }

    .lite-about-editorial h2,
    .lite-about-section-head h2,
    .lite-about-cta h2 {
        font-size: 1.95rem;
        line-height: 1.26;
    }

    .lite-about-editorial-body {
        font-size: 0.98rem;
        line-height: 1.76;
    }

    .lite-about-section {
        padding: 64px 0;
    }

    .lite-about-value-grid,
    .lite-about-growth-grid {
        grid-template-columns: 1fr;
    }

    .lite-about-value,
    .lite-about-flow-step {
        padding: 20px;
    }

    .lite-about-growth-step {
        min-height: 270px;
    }

    .lite-about-flow {
        gap: 14px;
    }

    .lite-about-flow-copy h3 {
        font-size: 1.62rem;
    }

    .lite-about-cta {
        padding: 42px 0;
    }
}