:root {
  --paper:#fafcfb;
  --white:#ffffff;
  --forest:#356a57;
  --forest-dark:#285b49;
  --ink:#1d2d26;
  --secondary:#53685e;
  --muted:#71847a;
  --line:#dce8e1;
  --tint:#f1f7f3;
  --tint-strong:#e8f2ec;
}
*, *::before, *::after {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:90px}
body {margin:0;background:var(--white);color:var(--ink);font-family:"Pretendard", "Noto Sans KR", "Noto Sans CJK KR", "Apple SD Gothic Neo", "Malgun Gothic",system-ui,sans-serif;font-size:16px;line-height:1.7;letter-spacing:-.025em;word-break:keep-all;-webkit-font-smoothing:antialiased}
a {color:inherit;text-decoration:none}
button {font:inherit;cursor:pointer}
img {max-width:100%;display:block}
button:focus-visible,a:focus-visible,summary:focus-visible {outline:3px solid #6eaa8b;outline-offset:4px}
.wrap {width:min(1200px,calc(100% - 96px));margin-inline:auto}
.skip-link {position:absolute;top:-60px;left:18px;background:#fff;padding:10px 15px;z-index:1000}
.skip-link:focus {top:12px}

/* Navigation */
.site-header {position:sticky;top:0;z-index:30;background:rgba(250,252,251,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.header-layout {height:76px;display:flex;align-items:center;gap:52px}
.brand,.footer-brand {font-family:Arial,"Noto Sans KR",sans-serif;font-size:26px;font-weight:800;letter-spacing:-.055em;line-height:1;color:var(--forest-dark)}
.brand-period,.footer-brand span {color:#71a58d}
.desktop-nav {margin-left:auto;display:flex;align-items:center;gap:35px;font-size:14px;font-weight:600;color:#3c5348}
.desktop-nav a {transition:color .15s}
.desktop-nav a:hover {color:var(--forest)}
.header-contact {display:inline-flex;align-items:center;gap:25px;background:var(--forest-dark);color:white;font-size:14px;font-weight:650;padding:10px 19px;border-radius:4px;transition:background .15s}
.header-contact:hover,.button-primary:hover {background:#234d3e}
.menu-toggle,.mobile-menu {display:none}

/* Shared styles */
.overline,.section-kicker,.feature-label {font-size:13px;font-weight:750;color:var(--forest);margin:0;letter-spacing:-.012em}
h1,h2,h3,p,figure {margin-top:0}
h1,h2,h3 {letter-spacing:-.065em}
h2 {font-size:clamp(34px,3.4vw,46px);line-height:1.32;font-weight:740;margin:14px 0 0}
.button {border:0;display:inline-flex;align-items:center;justify-content:space-between;gap:28px;padding:14px 19px;border-radius:4px;font-size:14px;font-weight:700;min-height:50px;transition:background .15s,color .15s}
.button-primary {background:var(--forest-dark);color:#fff}
.button-white {background:var(--white);color:var(--forest-dark)}
.button-white:hover {background:#e9f3ec}

/* Hero */
.hero {background:var(--paper);overflow:hidden}
.hero-layout {display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.07fr);gap:58px;align-items:center;padding-top:104px;padding-bottom:112px;min-height:680px}
.hero-copy {padding-bottom:6px}
.hero h1 {font-size:clamp(38px,4.15vw,58px);line-height:1.3;font-weight:780;margin:28px 0 24px;letter-spacing:-.071em}
.hero h1 span {color:var(--forest)}
.hero-description {font-size:17px;line-height:1.92;max-width:510px;color:var(--secondary);margin-bottom:32px;letter-spacing:-.03em}
.hero-actions {display:flex;align-items:center;gap:31px;flex-wrap:wrap}
.text-link {font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:9px;color:var(--forest-dark);border-bottom:1px solid #a6c3b1;padding-block:10px}
.text-link:hover {border-bottom-color:var(--forest-dark)}
.hero-meta {display:flex;flex-wrap:wrap;gap:0;margin-top:57px;color:#6d8377;font-size:12px;letter-spacing:-.02em}
.hero-meta span+span::before {content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:#aac7b4;vertical-align:middle;margin:0 13px}
.hero-product {min-width:0}
.hero-image {border:1px solid #e0e7e2;border-radius:6px;padding:12px;background:#fff;box-shadow:0 18px 48px rgba(47,85,66,.055)}
.hero-image img {width:100%;height:auto;border-radius:3px}
.hero-product-footer {display:flex;justify-content:space-between;gap:15px;align-items:start;margin-top:13px;color:var(--secondary);font-size:12px}
.screen-note {color:#8d9c92;font-size:11px;text-align:right}

/* Intro */
.intro {border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:white}
.intro-layout {display:grid;grid-template-columns:1fr 1fr;gap:105px;align-items:center;padding-block:74px}
.intro h2 {font-size:clamp(29px,3.2vw,41px);margin:0;line-height:1.42;font-weight:730}
.intro p {font-size:16px;line-height:2;color:var(--secondary);margin:0;max-width:530px}

/* Feature editorial section */
.features {padding:118px 0 104px}
.section-opening,.pricing-intro {display:flex;align-items:end;justify-content:space-between;gap:60px}
.section-opening>p,.pricing-intro>p {max-width:350px;margin:0 0 5px;color:var(--secondary);font-size:15px;line-height:1.9}
.feature-row {border-top:1px solid var(--line);display:grid;grid-template-columns:.82fr 1.18fr;align-items:center;gap:84px;padding:66px 0 80px;margin-top:60px}
.feature-row + .feature-row {margin-top:0}
.feature-row.reverse {grid-template-columns:1.18fr .82fr}
.feature-row.reverse .feature-copy {order:2}
.feature-row.reverse .feature-figure {order:1}
.feature-copy {max-width:440px}
.feature-copy h3 {font-size:clamp(27px,2.9vw,39px);font-weight:740;line-height:1.42;margin:18px 0 22px}
.feature-copy>p:not(.feature-label) {font-size:16px;color:var(--secondary);line-height:1.98;margin-bottom:32px}
.feature-detail {border-left:2px solid #94bea4;padding-left:19px;display:flex;flex-direction:column;gap:5px}
.feature-detail strong {font-size:14px;color:#2d5a46;letter-spacing:-.025em}
.feature-detail span {font-size:13px;color:#718479;line-height:1.85}
.feature-figure {margin:0;min-width:0}
.image-open {width:100%;padding:16px;border:1px solid #e3ebe6;border-radius:5px;background:#f8faf9;text-align:initial;position:relative;display:block;transition:border-color .16s;overflow:hidden}
.image-open:hover {border-color:#9bbcad}
.image-open img {width:100%;height:auto;object-fit:contain;border-radius:2px}
.zoom-cue {position:absolute;right:26px;bottom:25px;color:var(--forest-dark);font-size:12px;font-weight:700;padding:8px 12px;background:rgba(255,255,255,.97);border:1px solid #e4ebe7;border-radius:3px}
.feature-figure figcaption {margin-top:11px;color:#82948a;font-size:12px}

/* Responsible records */
.care-section {background:var(--tint);border-block:1px solid #e4eee7;padding:102px 0}
.care-grid {display:grid;grid-template-columns:1fr 1.05fr;gap:120px}
.care-head p:last-child {max-width:400px;margin:28px 0 0;color:var(--secondary);font-size:15px;line-height:1.9}
.care-items {border-top:1px solid #c9dcd0}
.care-item {padding:24px 0;border-bottom:1px solid #c9dcd0}
.care-item h3 {font-size:20px;font-weight:700;margin:0 0 7px;letter-spacing:-.045em}
.care-item p {color:#64796c;font-size:14px;margin:0;line-height:1.85}

/* Prices in rows, not repetitive cards */
.pricing-section {padding:112px 0 108px;background:#fff}
.pricing-intro {margin-bottom:51px}
.plan-list {border-top:2px solid var(--forest-dark)}
.plan-row {display:grid;grid-template-columns:1.32fr .95fr 1.26fr auto;gap:34px;align-items:center;padding:33px 4px;border-bottom:1px solid var(--line)}
.plan-label {display:block;font-weight:800;font-size:12px;color:var(--forest-dark);letter-spacing:.025em;margin-bottom:8px}
.plan-identity h3 {font-size:19px;margin:0 0 6px;font-weight:700}
.plan-identity p {margin:0;color:#75877c;font-size:13px}
.plan-price {display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.plan-price strong {font-size:33px;letter-spacing:-.065em;line-height:1.3;white-space:nowrap}
.plan-price strong span {font-size:20px;font-weight:580;margin-left:2px}
.plan-price>span {color:#84958c;font-size:12px}
.plan-features {display:flex;flex-direction:column;gap:7px;font-size:13px;color:#586f62;line-height:1.66}
.plan-features span:first-child {color:#2e5b45;font-weight:600}
.plan-action {font-size:13px;font-weight:720;color:var(--forest-dark);white-space:nowrap;display:inline-flex;align-items:center;gap:14px;border:1px solid #bfcfc4;border-radius:3px;padding:11px 15px;transition:border .15s,background .15s}
.plan-action:hover {background:var(--tint);border-color:#6ca183}
.pricing-smallprint {color:#829287;font-size:12px;margin:18px 0 0;line-height:1.75}
.institution-cta {background:var(--forest-dark);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:45px;padding:37px 48px;margin-top:56px;border-radius:4px}
.institution-cta p {font-size:12px;margin:0 0 7px;color:#b5d2c1}
.institution-cta h3 {font-size:24px;margin:0 0 8px;font-weight:720}
.institution-cta span {font-size:13px;color:#d2e1d6}
.institution-cta .button {flex:none;color:var(--forest-dark);min-width:165px}
.institution-cta .button span {color:inherit}

/* FAQ */
.faq-section {padding:107px 0;background:var(--paper);border-top:1px solid var(--line)}
.faq-layout {display:grid;grid-template-columns:.8fr 1.2fr;gap:110px}
.faq-list {border-top:1px solid #cbdcd0}
.faq-list details {border-bottom:1px solid #cbdcd0}
.faq-list summary {display:flex;justify-content:space-between;gap:24px;align-items:center;list-style:none;font-size:16px;font-weight:670;padding:23px 0;cursor:pointer}
.faq-list summary::-webkit-details-marker {display:none}
.faq-list summary span {font-weight:300;color:var(--forest);font-size:27px;line-height:1;transition:transform .18s}
.faq-list details[open] summary span {transform:rotate(45deg)}
.faq-list details p {font-size:14px;color:var(--secondary);margin:-3px 0 27px;line-height:1.93;max-width:600px}

/* Contact */
.contact-section {padding:111px 0 115px;background:var(--tint-strong)}
.contact-layout {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:90px}
.contact-layout h2 {margin:15px 0 20px}
.contact-layout>div>p:last-child {color:var(--secondary);font-size:15px;max-width:430px;line-height:1.9;margin:0}
.contact-details {border-left:1px solid #c7dacb;padding:6px 0 4px 53px}
.contact-details>p:first-child {color:#607568;font-size:13px;margin:0 0 9px;font-weight:700}
.email-display {color:var(--forest-dark);font-size:clamp(18px,2.1vw,26px);font-weight:740;letter-spacing:-.05em;display:flex;align-items:center;gap:10px;overflow-wrap:anywhere}
.email-display span {font-size:17px}
.contact-buttons {display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-top:27px}
.copy-email {border:0;border-bottom:1px solid #8da996;background:none;color:var(--forest-dark);font-size:13px;padding:8px 1px;font-weight:650}
.contact-hint {font-size:12px;color:#829489;margin:16px 0 0}
.copy-feedback {font-size:12px;color:#285b49;min-height:17px;margin:2px 0 0}

/* Footer */
.site-footer {background:#fff;padding:45px 0 25px}
.footer-top {display:flex;align-items:flex-start;justify-content:space-between;gap:50px;padding-bottom:65px}
.footer-brand {display:inline-block;font-size:25px}
.footer-top p {color:#77897e;font-size:13px;margin:14px 0 0}
.footer-links {display:flex;gap:25px;color:#405c4a;font-size:13px;font-weight:600}
.footer-links a:hover {color:var(--forest)}
.footer-bottom {border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:25px;color:#8c9a91;font-size:12px}

/* Screenshot dialog */
.image-dialog {border:0;border-radius:6px;background:#fff;padding:20px;box-shadow:0 30px 90px rgba(0,0,0,.2);width:min(1080px,calc(100vw - 36px));max-height:calc(100vh - 42px);overflow:auto}
.image-dialog::backdrop {background:rgba(13,30,21,.75)}
.image-dialog-inner {display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.image-dialog img {width:100%;height:auto;max-height:calc(100vh - 130px);object-fit:contain}
.dialog-close {border:1px solid #d7e5d9;background:#fff;padding:6px 14px;border-radius:3px;color:var(--forest-dark);font-size:13px;font-weight:700}

@media (max-width:1100px) {
 .wrap {width:min(100% - 70px,1100px)}
 .hero-layout {gap:36px;padding-top:85px;padding-bottom:88px;min-height:0}
 .hero h1 {font-size:clamp(36px,4.5vw,52px)}
 .hero-description {font-size:15px}
 .feature-row {gap:40px}
 .plan-row {gap:20px;grid-template-columns:1.18fr .72fr 1.2fr auto}
 .plan-price strong {font-size:29px}
 .care-grid {gap:70px}
 .faq-layout {gap:70px}
}
@media (max-width:850px) {
 .wrap {width:min(100% - 52px,720px)}
 .header-layout {height:67px}
 .desktop-nav,.header-contact {display:none}
 .menu-toggle {display:flex;margin-left:auto;border:1px solid #c8d9cf;background:#fff;width:42px;height:42px;border-radius:3px;flex-direction:column;align-items:center;justify-content:center;gap:6px}
 .menu-toggle span {width:18px;height:2px;background:var(--forest-dark)}
 .mobile-menu:not([hidden]) {display:flex;flex-direction:column;background:var(--paper);padding:10px 26px 20px;border-bottom:1px solid var(--line)}
 .mobile-menu a {font-size:15px;font-weight:650;border-bottom:1px solid #e3ece6;padding:12px 0}
 .hero-layout {grid-template-columns:1fr;padding:72px 0 75px;gap:45px}
 .hero-copy {max-width:640px}
 .hero h1 {font-size:clamp(40px,6vw,53px)}
 .hero-meta {margin-top:35px}
 .hero-product {width:100%}
 .intro-layout,.care-grid,.faq-layout,.contact-layout {grid-template-columns:1fr;gap:30px}
 .intro-layout {padding-block:60px}
 .intro h2 {font-size:37px}
 .features {padding:84px 0 70px}
 .section-opening,.pricing-intro {align-items:flex-start;flex-direction:column;gap:19px}
 .feature-row,.feature-row.reverse {grid-template-columns:1fr;gap:25px;padding:46px 0 58px;margin-top:42px}
 .feature-row.reverse .feature-copy,.feature-row.reverse .feature-figure {order:initial}
 .feature-copy {max-width:660px}
 .feature-copy h3 {font-size:32px}
 .feature-copy>p:not(.feature-label) {margin-bottom:20px}
 .care-section,.pricing-section,.faq-section,.contact-section {padding:80px 0}
 .care-grid {gap:33px}
 .care-items {margin-top:10px}
 .plan-row {grid-template-columns:1.2fr .8fr;gap:15px;padding:26px 6px}
 .plan-features {grid-column:1;grid-row:2}
 .plan-action {grid-column:2;grid-row:2;justify-self:end;align-self:center}
 .plan-price {align-items:flex-end}
 .institution-cta {padding:32px;gap:18px}
 .faq-layout {gap:35px}
 .contact-layout {gap:31px}
 .contact-details {padding-left:0;border-left:0;border-top:1px solid #c7dacb;padding-top:27px}
}
@media (max-width:540px) {
 html {scroll-padding-top:72px}
 .wrap {width:calc(100% - 38px)}
 .header-layout {height:62px}
 .brand {font-size:24px}
 .mobile-menu:not([hidden]) {padding-inline:19px}
 .hero-layout {padding:63px 0 56px;gap:37px}
 .overline,.section-kicker,.feature-label {font-size:12px}
 .hero h1 {font-size:clamp(33px,8.4vw,43px);margin:19px 0 20px;line-height:1.38}
 .hero-description {font-size:15px;line-height:1.93;margin-bottom:24px}
 .hero-actions {gap:21px}
 .button {min-height:46px;padding:11px 14px;font-size:13px;gap:17px}
 .text-link {font-size:13px}
 .hero-meta {margin-top:32px;font-size:11px;gap:5px 0}
 .hero-meta span+span::before {margin:0 8px}
 .hero-image {padding:6px}
 .hero-product-footer {flex-direction:column;gap:1px;font-size:11px}
 .screen-note {text-align:left;font-size:10px}
 .intro-layout {padding-block:47px;gap:15px}
 .intro h2 {font-size:30px}
 .intro p {font-size:14px;line-height:1.95}
 h2 {font-size:33px}
 .features {padding:71px 0 40px}
 .section-opening>p,.pricing-intro>p {font-size:14px}
 .feature-row,.feature-row.reverse {padding:35px 0 44px;margin-top:34px;gap:24px}
 .feature-copy h3 {font-size:27px;margin:12px 0 15px}
 .feature-copy>p:not(.feature-label) {font-size:14px;margin-bottom:19px}
 .feature-detail {padding-left:14px}
 .feature-detail strong {font-size:13px}
 .feature-detail span {font-size:12px}
 .image-open {padding:8px}
 .zoom-cue {font-size:11px;right:13px;bottom:13px;padding:4px 7px}
 .feature-figure figcaption {font-size:11px}
 .care-section,.pricing-section,.faq-section,.contact-section {padding:71px 0}
 .care-head p:last-child {font-size:14px;margin-top:19px}
 .care-item h3 {font-size:18px}
 .care-item p {font-size:13px}
 .pricing-intro {margin-bottom:34px}
 .plan-row {grid-template-columns:minmax(0,1fr) auto;gap:13px;padding:27px 0}
 .plan-identity h3 {font-size:17px}
 .plan-identity p {font-size:12px;line-height:1.6}
 .plan-price strong {font-size:28px}
 .plan-price strong span {font-size:16px}
 .plan-features {font-size:12px}
 .plan-action {padding:9px 11px;gap:5px;font-size:12px}
 .pricing-smallprint {font-size:11px}
 .institution-cta {flex-direction:column;align-items:flex-start;padding:26px 22px;margin-top:32px}
 .institution-cta h3 {font-size:20px}
 .institution-cta span {font-size:12px}
 .institution-cta .button {width:100%}
 .faq-list summary {font-size:14px;padding:20px 0}
 .faq-list details p {font-size:13px;margin-bottom:21px}
 .contact-layout h2 {margin-bottom:16px}
 .contact-layout>div>p:last-child {font-size:14px}
 .email-display {font-size:20px}
 .footer-top {flex-direction:column;gap:20px;padding-bottom:30px}
 .footer-links {gap:20px;flex-wrap:wrap}
 .footer-bottom {flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce) {
 html {scroll-behavior:auto}
 *,*::before,*::after {scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
