/* 자연가 소개 홈페이지 전용 스타일. 기존 쇼핑몰 CSS와 충돌하지 않도록 ng- 접두사를 사용합니다. */
/* 공통 색상: 이 변수들을 바꾸면 기본 브랜드 색상을 조정할 수 있습니다. */
:root {
    --ink:#173f32;
    --green:#255d45;
    --muted:#68786e;
    --paper:#fbfcf8;
    --line:#dde5db;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:110px;
}

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Malgun Gothic","맑은 고딕",sans-serif;
    -webkit-font-smoothing:antialiased;
}

a {
    color:inherit;
    text-decoration:none;
}

a:focus-visible {
    outline:3px solid #72a97c;
    outline-offset:6px;
}

h1,h2,h3,p {
    margin:0;
}

p {
    line-height:1.9;
    word-break:keep-all;
}

.ng-skip {
    position:fixed;
    left:20px;
    top:-80px;
    z-index:20;
    background:#fff;
    padding:16px;
}

.ng-skip:focus {
    top:12px;
}

.ng-header {
    height:100px;
    max-width:1440px;
    margin:auto;
    padding:0 6%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.ng-brand {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:30px;
    font-weight:700;
    letter-spacing:-1px;
    white-space:nowrap;
}

.ng-brand small {
    display:block;
    font-size:9px;
    letter-spacing:4px;
    margin-top:4px;
}

.ng-brand-leaf {
    width:25px;
    height:35px;
    display:block;
    border-radius:28px 0 28px 0;
    background:var(--green);
    transform:rotate(15deg);
}

.ng-header nav {
    display:flex;
    gap:38px;
    font-size:14px;
    font-weight:600;
}

.ng-header nav a:hover,.ng-text-link:hover {
    color:#54824e;
}

.ng-login {
    font-size:13px;
    padding:12px 21px;
    border:1px solid #c5d1c3;
    border-radius:30px;
    white-space:nowrap;
}

.ng-login span {
    margin-left:14px;
}

.ng-hero {
    max-width:1440px;
    margin:auto;
    min-height:590px;
    display:grid;
    grid-template-columns:1.05fr 1fr;
    background:#edf1e7;
    overflow:hidden;
}

.ng-hero-copy {
    padding:80px 0 60px 12%;
    position:relative;
    z-index:1;
}

.ng-eyebrow {
    font-size:11px;
    letter-spacing:3px;
    font-weight:600;
    color:#5c785f;
    margin-bottom:24px;
}

.ng-hero h1 {
    font-size:clamp(40px,4.2vw,64px);
    line-height:1.3;
    letter-spacing:-3px;
    font-weight:500;
    margin-bottom:26px;
    word-break:keep-all;
}

.ng-lead {
    font-size:16px;
    color:#596c5c;
}

.ng-button {
    display:inline-flex;
    gap:36px;
    align-items:center;
    background:var(--ink);
    color:white;
    border-radius:3px;
    padding:19px 25px;
    font-size:14px;
    margin-top:34px;
}

.ng-button:hover {
    background:#2f634b;
}

.ng-hero-note {
    margin-top:58px;
    font-size:11px;
    color:#73826d;
    display:flex;
    align-items:center;
    gap:10px;
}

.ng-hero-note>span {
    height:1px;
    width:28px;
    background:#809579;
}

/* 장식용 잎과 물방울. 제품 외형을 표현한 그림이 아닙니다. */
.ng-art {
    position:relative;
    min-height:590px;
    background:radial-gradient(ellipse at 60% 38%,#e6ecd1 0,transparent 48%),linear-gradient(135deg,#d8e1ca,#829c76);
    overflow:hidden;
}

.ng-orbit {
    position:absolute;
    width:560px;
    height:200px;
    border:1px solid #eef5db80;
    border-radius:50%;
    left:50%;
    bottom:5%;
    transform:translateX(-50%) rotate(-18deg);
}

.orbit-two {
    width:420px;
    height:150px;
    bottom:9%;
}

.orbit-three {
    width:270px;
    height:96px;
    bottom:13%;
}

.ng-leaf {
    position:absolute;
    background:linear-gradient(130deg,#92b17b,#356449 75%);
    border-radius:100% 0 100% 0;
    box-shadow:inset 1px 1px 1px #d5e5bc80,20px 40px 50px #28463225;
}

.leaf-one {
    width:190px;
    height:300px;
    left:23%;
    top:12%;
    transform:rotate(-25deg);
}

.leaf-two {
    width:150px;
    height:230px;
    left:53%;
    top:31%;
    transform:rotate(27deg);
    background:linear-gradient(130deg,#b6c69a,#567a4c);
}

.ng-leaf:after {
    content:"";
    position:absolute;
    height:85%;
    width:1px;
    background:#d4dfb080;
    left:50%;
    top:8%;
    transform:rotate(32deg);
}

.ng-droplet {
    position:absolute;
    left:47%;
    top:32%;
    width:100px;
    height:138px;
    border-radius:70% 30% 65% 35% / 65% 30% 70% 35%;
    transform:rotate(-30deg);
    background:linear-gradient(130deg,#ffffffaa,#e3efce25 55%,#ffffff90);
    border:1px solid #ffffff80;
    box-shadow:12px 15px 28px #29492c22,inset 8px 6px 20px #ffffff80;
}

.ng-art-label {
    position:absolute;
    right:28px;
    top:40px;
    writing-mode:vertical-rl;
    font-size:10px;
    letter-spacing:4px;
    color:#39573c;
}

.ng-art-number {
    position:absolute;
    bottom:28px;
    left:30px;
    font-size:11px;
    letter-spacing:3px;
    color:#f2f6e8;
}

.ng-strip {
    max-width:1440px;
    margin:auto;
    display:flex;
    justify-content:center;
    gap:62px;
    align-items:center;
    padding:24px;
    background:#183f32;
    color:#e1e8d9;
    font-size:12px;
    letter-spacing:1px;
}

.ng-strip i {
    width:3px;
    height:3px;
    border-radius:50%;
    background:#a8bfa1;
}

.ng-section {
    max-width:1200px;
    margin:auto;
    padding:95px 40px;
}

.ng-about {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
}

.ng-section h2,.ng-support h2 {
    font-size:36px;
    line-height:1.45;
    letter-spacing:-1.7px;
    font-weight:500;
}

.ng-about-copy {
    padding-top:30px;
    font-size:15px;
    color:var(--muted);
}

.ng-about-copy p+p {
    margin-top:20px;
}

.ng-signature {
    display:block;
    margin-top:25px;
    font-size:22px;
    color:var(--green);
    letter-spacing:5px;
}

.ng-product-section {
    background:#f0f3ec;
}

.ng-section-heading {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:25px;
    margin-bottom:40px;
}

.ng-section-heading .ng-eyebrow {
    margin-bottom:12px;
}

.ng-section-heading>p {
    font-size:13px;
    color:var(--muted);
}

.ng-product-card {
    display:grid;
    grid-template-columns:1fr 1fr;
    background:#fff;
    border-radius:5px;
    overflow:hidden;
}

.ng-product-art {
    min-height:390px;
    background:#dce6d6;
    position:relative;
    overflow:hidden;
    padding:50px;
    color:#517253;
}

.ng-product-art>span {
    position:relative;
    font-family:Georgia,serif;
    font-size:45px;
    line-height:1.15;
    letter-spacing:2px;
}

.ng-product-art>small {
    position:absolute;
    bottom:30px;
    left:50px;
    letter-spacing:5px;
    font-size:10px;
}

.ng-water-lines {
    position:absolute;
    border:1px solid #7e9d7590;
    width:540px;
    height:250px;
    border-radius:50%;
    transform:rotate(-30deg);
    left:30px;
    top:195px;
    box-shadow:0 0 0 25px #dce6d6,0 0 0 26px #9bb293,0 0 0 55px #dce6d6,0 0 0 56px #a9bfa0,0 0 0 90px #dce6d6,0 0 0 91px #b9ccb0;
}

.ng-product-copy {
    padding:45px 50px;
}

.ng-tag {
    display:inline-block;
    font-size:11px;
    color:#66835d;
    margin-bottom:17px;
}

.ng-product-copy h3 {
    font-size:30px;
    font-weight:500;
    letter-spacing:-1px;
    margin-bottom:18px;
}

.ng-product-copy p {
    font-size:14px;
    color:var(--muted);
}

.ng-specs {
    display:flex;
    gap:40px;
    margin-top:25px;
    padding:20px 0;
    border-top:1px solid var(--line);
}

.ng-specs span,.ng-specs strong {
    display:block;
    font-size:12px;
}

.ng-specs span {
    color:var(--muted);
    margin-bottom:8px;
}

.ng-specs strong {
    font-weight:500;
}

.ng-text-link {
    display:inline-flex;
    gap:35px;
    font-size:13px;
    border-bottom:1px solid #81967c;
    padding-bottom:7px;
}

.ng-guide-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.ng-guide-grid article {
    padding:28px 24px 32px;
    border-top:1px solid #a9bba1;
    background:#f2f5ee;
}

.ng-step {
    font:italic 30px Georgia,serif;
    color:#819875;
}

.ng-guide-grid h3 {
    font-size:19px;
    font-weight:500;
    margin:24px 0 12px;
}

.ng-guide-grid p {
    font-size:13px;
    color:var(--muted);
}

.ng-support {
    background:#214c3b;
    color:#f3f5eb;
    max-width:1120px;
    margin:0 auto 90px;
    padding:46px 50px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    border-radius:5px;
}

.ng-support .ng-eyebrow {
    color:#b1c6a1;
    margin-bottom:13px;
}

.ng-support h2 {
    font-size:28px;
}

.ng-support p {
    font-size:13px;
    color:#becfbf;
    margin-top:12px;
}

.ng-support>a {
    display:flex;
    flex-direction:column;
    gap:10px;
}

.ng-support small {
    font-size:12px;
    color:#c3d5b9;
}

.ng-support strong {
    font-size:29px;
    font-weight:400;
    letter-spacing:1px;
}

.ng-support a>span {
    font-size:12px;
}

.ng-footer {
    padding:48px max(6%,calc((100% - 1120px)/2));
    background:#eaf0e5;
}

.ng-footer-top {
    display:flex;
    align-items:center;
    gap:35px;
    border-bottom:1px solid #ccd8c5;
    padding-bottom:30px;
}

.ng-footer-top p {
    color:#64775d;
    font-size:13px;
}

.ng-footer-top>a:last-child {
    margin-left:auto;
    font-size:12px;
}

.ng-footer-bottom {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    padding-top:28px;
    font-size:11px;
    color:#6b7b65;
}

.ng-footer-bottom strong {
    font-weight:600;
    color:#3b573e;
    font-size:13px;
}

.ng-footer-bottom p {
    margin-top:9px;
}

.ng-footer-bottom p span {
    margin-left:20px;
}

.ng-footer-bottom small {
    font-size:10px;
    white-space:nowrap;
}

/* 모바일/태블릿: 메뉴를 두 줄로 배치하고 콘텐츠를 한 열로 전환합니다. */
@media(max-width:800px) {
    html {
        scroll-padding-top:20px;
    }

    .ng-header {
        height:auto;
        min-height:100px;
        padding:20px 24px;
        flex-wrap:wrap;
        gap:20px;
    }

    .ng-brand {
        font-size:25px;
    }

    .ng-header nav {
        order:3;
        flex-basis:100%;
        justify-content:space-between;
        gap:10px;
        font-size:12px;
        padding-top:8px;
    }

    .ng-login {
        margin-left:auto;
    }

    .ng-hero {
        grid-template-columns:1fr;
    }

    .ng-hero-copy {
        padding:48px 28px 35px;
    }

    .ng-hero h1 {
        font-size:43px;
        letter-spacing:-2px;
    }

    .ng-lead {
        font-size:14px;
    }

    .ng-eyebrow {
        font-size:9px;
        letter-spacing:2px;
    }

    .ng-hero-note {
        margin-top:30px;
    }

    /* 장식용 잎과 물방울. 제품 외형을 표현한 그림이 아닙니다. */
.ng-art {
        min-height:330px;
    }

    .leaf-one {
        width:125px;
        height:210px;
        left:30%;
        top:6%;
    }

    .leaf-two {
        width:100px;
        height:155px;
        left:57%;
        top:25%;
    }

    .ng-droplet {
        width:65px;
        height:90px;
        top:25%;
        left:49%;
    }

    .ng-strip {
        padding:20px 14px;
        gap:14px;
        font-size:9px;
        letter-spacing:0;
    }

    .ng-section {
        padding:58px 24px;
    }

    .ng-about {
        grid-template-columns:1fr;
        gap:0;
    }

    .ng-section h2 {
        font-size:29px;
    }

    .ng-about-copy {
        font-size:14px;
    }

    .ng-section-heading {
        display:block;
        margin-bottom:25px;
    }

    .ng-section-heading>p {
        margin-top:12px;
        font-size:12px;
    }

    .ng-product-card {
        grid-template-columns:1fr;
    }

    .ng-product-art {
        min-height:260px;
        padding:30px;
    }

    .ng-product-art>span {
        font-size:36px;
    }

    .ng-product-art>small {
        left:30px;
    }

    .ng-product-copy {
        padding:30px 25px;
    }

    .ng-guide-grid {
        grid-template-columns:1fr;
        gap:16px;
    }

    .ng-guide-grid article {
        padding:22px;
    }

    .ng-guide-grid h3 {
        margin-top:15px;
    }

    .ng-support {
        margin:0 24px 50px;
        padding:30px 24px;
        flex-direction:column;
        align-items:start;
        gap:25px;
    }

    .ng-support h2 {
        font-size:24px;
    }

    .ng-support strong {
        font-size:27px;
    }

    .ng-footer {
        padding:35px 24px;
    }

    .ng-footer-top {
        flex-wrap:wrap;
        gap:18px;
    }

    .ng-footer-top p {
        order:3;
        flex-basis:100%;
    }

    .ng-footer-bottom {
        display:block;
    }

    .ng-footer-bottom p span {
        display:block;
        margin-left:0;
    }

    .ng-footer-bottom small {
        display:block;
        margin-top:24px;
    }

}

/* 운영체제의 동작 줄이기 설정을 존중합니다. */
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }

}
/* 공개 상품 안내에는 소비자가격만 표시합니다. */
.ng-products-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; margin-top:30px; }
.ng-catalog-card { background:white; color:#183f32; text-decoration:none; border:1px solid #dbe4d4; border-radius:8px; overflow:hidden; }
.ng-catalog-image { aspect-ratio:1.2; display:grid; place-items:center; background:linear-gradient(130deg,#e2ecd9,#f5f7f0); }
.ng-catalog-image img { width:100%; height:100%; object-fit:contain; }
.ng-catalog-image span { color:#739565; font-size:32px; letter-spacing:5px; text-align:center; }
.ng-catalog-image small { display:block; font-size:10px; letter-spacing:3px; margin-top:12px; }
.ng-catalog-info { padding:25px; }
.ng-catalog-info h3 { margin:0; font-size:19px; overflow-wrap:anywhere; }
.ng-catalog-info p { color:#66775c; font-size:14px; }
.ng-public-detail { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px; margin:30px 0; }
.ng-description { white-space:pre-wrap; overflow-wrap:anywhere; }
.ng-image-gallery { display:flex; gap:20px; flex-wrap:wrap; }
.ng-image-gallery img { max-width:100%; width:350px; object-fit:contain; }
@media(max-width:750px) { .ng-products-grid,.ng-public-detail { grid-template-columns:1fr; } }