:root {color-scheme:light;--cream:#f8f7f0;--ink:#17322b;--green:#234c40;--muted:#52665e;--line:#dce3d8;--lime:#d8ec9d;--panel:#e8eee3;font-family:Inter,"Noto Sans KR","Malgun Gothic",system-ui,sans-serif}
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--cream);color:var(--ink);font-size:15px;line-height:1.65}
    a{color:inherit;text-decoration:none}
    :focus-visible{outline:3px solid #6b9d7f;outline-offset:5px}
    h1,h2,h3,p,ol,ul,dl,dd{margin:0}
    h1,h2,h3{line-height:1.24;letter-spacing:-.045em;word-break:keep-all}
    p{word-break:keep-all;overflow-wrap:anywhere}
    .wrap{width:min(1200px,calc(100% - 96px));margin-inline:auto}
    .skip{position:absolute;left:16px;top:-100px;z-index:3;background:#fff;padding:9px 14px}
    .skip:focus{top:12px}
    .masthead{border-bottom:1px solid var(--line)}
    .masthead .wrap{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:22px}
    .brand{display:inline-flex;align-items:center;gap:10px;flex:none}
    .brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:#203f36;color:#e5f3bb;font-family:Georgia,serif;font-weight:800;font-size:25px;letter-spacing:-.08em}
    .brand-name{display:block;font-size:14px;letter-spacing:.11em;line-height:1.24;font-weight:850}
    .brand-caption{display:block;font-size:9px;letter-spacing:.21em;color:var(--muted);font-weight:700;margin-top:3px}
    .nav{display:flex;align-items:center;gap:26px;font-size:13px;font-weight:700;color:#38554b}
    .nav>a:hover,.footer a:hover{text-decoration:underline;text-underline-offset:4px}
    .nav .login{border:1px solid #b9c9bf;border-radius:8px;padding:7px 13px;color:var(--ink)}
    .hero{padding:60px 0 57px;background:radial-gradient(ellipse at 8% 15%,#fffdf5 0,transparent 60%),var(--cream)}
    .hero-copy{max-width:540px}
    .hero-visual{margin:0;min-width:0}
    .editorial-image{position:relative;isolation:isolate;aspect-ratio:1.25;overflow:hidden;border-radius:20px;background:#c9c7b4}
    .editorial-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
    .editorial-image::after{position:absolute;inset:40% 0 0;content:"";background:linear-gradient(transparent,#142e248c);pointer-events:none}
    .image-index{position:absolute;top:16px;left:16px;z-index:1;padding:6px 10px;border-radius:999px;background:#faf8eeeb;color:#214638;font-size:10px;letter-spacing:.14em;font-weight:850}
    .preview-badge{position:absolute;z-index:1;bottom:16px;left:16px;display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:9px 13px;border-radius:10px;background:#f9f8ee;color:#203e33;box-shadow:0 5px 18px #11291f3d;font-size:12px;font-weight:750}
    .preview-badge:hover{background:#eef4da}
    .preview-badge b{font-size:23px;line-height:1;white-space:nowrap;letter-spacing:-.06em}
    .hero-visual figcaption{display:flex;justify-content:space-between;gap:10px;margin-top:9px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.13em}
    .hero-visual figcaption span:last-child{white-space:nowrap}
    .hero .wrap{display:grid;grid-template-columns:1fr .96fr;gap:clamp(28px,5vw,75px);align-items:center}
    .eyebrow{display:block;color:#416958;font-size:11px;font-weight:850;letter-spacing:.18em;text-transform:uppercase}
    .hero h1{font-size:clamp(36px,4.7vw,65px);line-height:1.13;letter-spacing:-.065em;margin:13px 0 20px}
    .hero h1 span{color:#3c6c59;display:block}
    .lead{font-size:clamp(14px,1.5vw,17px);line-height:1.8;color:var(--muted);max-width:495px}
    .actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:25px}
    .button{min-height:45px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 16px;border-radius:9px;background:var(--green);color:#fff;font-size:14px;font-weight:800;border:1px solid transparent}
    .button:hover{background:#16382e}
    .button.alt{background:transparent;border-color:#c7d3c8;color:var(--ink)}
    .button.alt:hover{background:#eef1e8}
    .button.light{background:var(--lime);color:#16332a}
    .button.light:hover{background:#e5f4b7}
    .under-actions{margin-top:13px;color:var(--muted);font-size:12px}
    .match-section{background:#eef1e7}
    .match-layout{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,75px)}
    .match-intro .intro{max-width:350px}
    .match-points{list-style:none;display:grid;gap:10px;margin-top:20px;padding:0;color:#2a5143;font-size:13px;font-weight:700}
    .match-points li{display:flex;align-items:center;gap:9px}
    .match-points li::before{content:"";width:6px;height:6px;border-radius:50%;background:#5f8b71;flex:none}
    .sample-frame{position:relative;isolation:isolate;overflow:hidden;background:var(--panel);border:1px solid #d5e0d3;border-radius:21px;padding:26px;scroll-margin-top:20px}
    .sample-frame::before{position:absolute;z-index:-1;content:"";width:280px;height:280px;border-radius:50%;inset:auto -90px -106px auto;border:1px solid #8cae9b77;box-shadow:0 0 0 18px #a8c4b346,0 0 0 36px #a8c4b335,0 0 0 55px #a8c4b325}
    .sample-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}
    .pill{display:inline-flex;align-items:center;border-radius:999px;background:#f4f7ee;padding:4px 9px;font-size:11px;font-weight:750;color:#395d4e;white-space:nowrap}
    .result{background:#fff;border:1px solid #dce5d9;border-radius:14px;padding:18px 19px;box-shadow:0 8px 25px #2845360a}
    .result-top{display:flex;justify-content:space-between;gap:10px;align-items:center;padding-bottom:12px;border-bottom:1px solid #e8ece6}
    .section .result-top h2{font-size:20px;margin:0}
    .result-top>div p{margin-top:4px;color:var(--muted);font-size:12px}
    .count{font-size:37px;line-height:1;letter-spacing:-.07em;color:#2c5a49;font-weight:850;white-space:nowrap}
    .count span{font-size:13px;letter-spacing:0;margin-left:3px}
    .regions{list-style:none;padding:10px 0 0;display:grid;gap:7px}
    .region{display:grid;grid-template-columns:71px minmax(0,1fr) 26px;align-items:center;gap:9px;font-size:12px}
    .region b{text-align:right}
    .track{height:6px;background:#eef2eb;border-radius:10px;overflow:hidden}
    .track i{display:block;height:100%;border-radius:10px;background:#79a38a}
    .reason{background:#edf4e8;border-radius:8px;margin-top:13px;padding:9px 10px;font-size:12px;color:#365749}
    .reason strong{display:block;color:#1e4a3b;margin-bottom:3px}
    .example-note{color:#465f55;margin-top:10px;font-size:11px}
    .section{padding:44px 0 50px;border-top:1px solid var(--line);scroll-margin-top:10px}
    .section h2{font-size:clamp(26px,3.2vw,42px);margin:5px 0 9px}
    .section .intro{color:var(--muted);font-size:14px}
    .steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;margin-top:24px;gap:16px}
    .steps li{border:1px solid var(--line);border-radius:12px;background:#fcfcf7;padding:17px}
    .step-no{display:inline-grid;place-items:center;width:29px;height:29px;background:#e6efe0;color:#315b4a;border-radius:8px;font-size:12px;font-weight:850;margin-bottom:9px}
    .step-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
    .step-top .step-no{margin:0}
    .step-icon{width:24px;height:24px;color:#507a67;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
    .steps h3{font-size:17px;margin-bottom:5px}
    .steps p{font-size:13px;color:var(--muted)}
    .plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:21px}
    .plan{border:1px solid var(--line);border-radius:13px;padding:20px 22px;background:#fdfdf8}
    .plan h3{font-size:20px;margin:7px 0 8px}
    .plan ul{padding-left:19px;font-size:13px;margin-bottom:15px}
    .plan.pro{background:#24473b;border-color:#24473b;color:#f4f8ed}
    .plan.pro .eyebrow{color:#deefa8}
    .plan.pro .small{color:#d9e5da}
    .small{font-size:12px;color:var(--muted)}
    .footer{border-top:1px solid var(--line);padding:20px 0;font-size:12px;color:var(--muted)}
    .footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px}
    .footer strong{letter-spacing:.1em;color:var(--ink)}
    @media(max-width:950px){
      .wrap{width:calc(100% - 56px)}
      .hero{padding:48px 0}
      .sample-frame{padding:18px}
    }
    @media(max-width:700px){
      .wrap{width:calc(100% - 34px)}
      .masthead .wrap{min-height:0;padding:12px 0;flex-wrap:wrap;gap:10px}
      .nav{gap:14px;font-size:12px;flex-wrap:wrap}
      .nav .login{padding:4px 8px}
      .hero{padding:34px 0}
      .hero .wrap,.match-layout{grid-template-columns:1fr;gap:24px}
      .editorial-image{aspect-ratio:1.45}
      .preview-badge{bottom:10px;left:10px}
      .image-index{top:10px;left:10px}
      .hero h1{margin:10px 0 13px}
      .actions{margin-top:17px}
      .sample-frame{padding:14px}
      .section{padding:33px 0}
      .steps,.plans{gap:9px}
      .steps li,.plan{padding:13px}
    }
    @media(max-width:480px){.steps,.plans{grid-template-columns:1fr}.footer .wrap{align-items:flex-start;flex-wrap:wrap}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}