@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');

:root{
  --cream:#f6f3ed;
  --paper:#fffdf9;
  --green:#234b3b;
  --green2:#315d4c;
  --ink:#202321;
  --muted:#70736d;
  --line:#e5e1d8;
  --yellow:#f4c51b;
  --radius:24px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Noto Sans KR',sans-serif;
  color:var(--ink);
  background:#ddd;
  line-height:1.6;
}
a{text-decoration:none;color:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}
button{font:inherit}

.page{
  width:100%;
  max-width:520px;
  min-height:100vh;
  margin:0 auto;
  background:var(--paper);
  overflow:hidden;
  position:relative;
  box-shadow:0 0 50px rgba(0,0,0,.08);
}

.header{
  height:72px;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:14px;
  background:rgba(255,253,249,.96);
  border-bottom:1px solid rgba(0,0,0,.05);
  position:sticky;
  top:0;
  z-index:20;
}
.brand{display:flex;align-items:center;gap:9px;min-width:150px}
.brand-mark{
  width:34px;height:34px;
  border:2px solid var(--ink);
  display:grid;place-items:center;
  font-size:21px;
  line-height:1;
}
.brand strong{display:block;font-size:16px;letter-spacing:-.06em}
.brand small{display:block;font-size:7px;letter-spacing:.24em;color:#777}
.header-desc{font-size:11px;color:#666;white-space:nowrap}
.menu-btn{
  margin-left:auto;
  width:34px;height:34px;
  border:0;background:none;
  display:flex;flex-direction:column;justify-content:center;gap:5px;
}
.menu-btn span{width:24px;height:2px;background:#222;display:block;margin-left:auto}

.hero{
  background:var(--cream);
  padding:42px 20px 30px;
  display:grid;
  gap:25px;
}
.eyebrow{
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--green2);
  margin-bottom:10px;
}
.hero h1{
  font-size:35px;
  line-height:1.25;
  letter-spacing:-.075em;
  font-weight:800;
}
em{font-style:normal;color:var(--green)}
.hero-text{
  margin-top:17px;
  font-size:15px;
  line-height:1.75;
  color:#555951;
}
.btn{
  min-height:52px;
  border-radius:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-weight:700;
  font-size:14px;
  padding:0 22px;
}
.btn-dark{margin-top:24px;background:#20211f;color:#fff}
.btn-dark span{font-size:20px;font-weight:400}

.hero-visual{position:relative;padding:0 5px 18px}
.hero-photo{
  height:330px;
  border-radius:46% 46% 30px 30px;
  overflow:hidden;
  border:8px solid #f0eadf;
  box-shadow:0 18px 35px rgba(51,54,45,.12);
}
.material-card{
  position:absolute;
  bottom:0;
  left:0;
  width:180px;
  padding:17px 16px;
  border-radius:17px;
  background:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}
.material-card span{font-size:8px;letter-spacing:.15em;color:#718078}
.material-card b{display:block;font-size:15px;margin:2px 0}
.material-card small{font-size:10px;color:#777}

.trust{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  padding:7px 10px;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.trust div{
  padding:18px 8px;
  text-align:center;
  border-right:1px solid var(--line);
}
.trust div:nth-child(2n){border-right:0}
.trust div:nth-child(-n+2){border-bottom:1px solid var(--line)}
.trust .icon{display:block;font-size:22px;color:var(--green);height:31px}
.trust b{display:block;font-size:12px}
.trust small{display:block;font-size:9px;color:#8a8d87;margin-top:2px}

.section{padding:60px 20px}
.why{background:#fff}
.section h2{
  font-size:31px;
  line-height:1.28;
  letter-spacing:-.07em;
}
.section-intro{
  color:#777a74;
  font-size:13px;
  margin:13px 0 25px;
}
.feature-grid{display:grid;gap:16px}
.feature{
  border:1px solid #e7e4dc;
  border-radius:22px;
  overflow:hidden;
  background:#fff;
}
.feature-img{height:185px}
.feature-body{padding:18px 18px 20px}
.feature-body span{font-size:10px;color:#8c928a;letter-spacing:.1em}
.feature h3{font-size:18px;margin:2px 0 5px;letter-spacing:-.05em}
.feature p{font-size:12px;color:#777;line-height:1.65}

.gallery{background:#f3f1eb}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}
.section-head h2{font-size:30px}
.section-head>a{font-size:11px;color:#666;padding-bottom:4px}
.gallery-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.gallery-item{
  height:150px;
  border-radius:17px;
  overflow:hidden;
  position:relative;
}
.gallery-item.large{grid-column:span 2;height:220px}
.gallery-item:after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(transparent 45%,rgba(0,0,0,.55));
}
.gallery-item span{
  position:absolute;
  left:14px;bottom:11px;
  z-index:1;color:#fff;
  font-size:11px;font-weight:600;
}

.review{
  margin:0 20px 10px;
  padding:24px 20px;
  border-radius:22px;
  background:#eaf1ed;
  display:grid;
  grid-template-columns:42px 1fr;
  gap:8px 13px;
}
.review-mark{
  width:42px;height:42px;
  border-radius:50%;
  background:#fff;
  display:grid;place-items:center;
  font-size:31px;color:var(--green);
  line-height:1;
}
.review p{font-size:14px;font-weight:600;line-height:1.65}
.review small{display:block;font-size:10px;color:#6f766f;margin-top:5px}
.review>b{grid-column:2;font-size:9px;color:#7a817b}

.process{background:#fff}
.steps{margin-top:30px;display:grid;gap:0}
.steps div{
  display:grid;
  grid-template-columns:45px 65px 1fr;
  align-items:center;
  min-height:58px;
  border-bottom:1px solid var(--line);
}
.steps strong{color:var(--green);font-size:11px}
.steps b{font-size:14px}
.steps span{font-size:11px;color:#888}

.footer{
  background:var(--green);
  color:#fff;
  padding:52px 20px 105px;
}
.footer .eyebrow{color:#b8c9bf}
.footer h2{font-size:31px;line-height:1.3;letter-spacing:-.07em}
.footer h2 em{color:#fff}
.footer>p:not(.eyebrow){font-size:12px;color:#d0d9d4;margin-top:12px}
.contact-buttons{display:grid;gap:10px;margin-top:26px}
.btn-yellow{background:var(--yellow);color:#20211f}
.btn-outline{border:1px solid rgba(255,255,255,.6);color:#fff}
.footer-info{
  margin-top:35px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.15);
  display:grid;gap:4px;
  font-size:9px;color:#b8c5be;
}
.footer-info b{font-size:12px;color:#fff}

.floating-call{
  position:fixed;
  z-index:30;
  bottom:16px;
  left:50%;
  width:min(calc(100% - 30px),490px);
  transform:translateX(-50%);
}
.floating-call a{
  height:52px;
  border-radius:28px;
  background:#20211f;
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  font-size:16px;
}
.floating-call span{font-size:13px;font-weight:700}

@media (min-width:700px){
  body{padding:30px 0}
}
@media (max-width:380px){
  .header-desc{display:none}
  .hero h1{font-size:31px}
  .hero-photo{height:285px}
  .section h2,.footer h2{font-size:28px}
}