:root{
  --navy:#0f3850;
  --blue:#1f6d91;
  --sea:#80c7d8;
  --sand:#f4ead7;
  --cream:#fbfaf5;
  --ink:#18313e;
  --muted:#617680;
  --line:#d9e2e6;
  --white:#fff;
  --shadow:0 18px 46px rgba(15,56,80,.13);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif;
  line-height:1.7;
}
a{color:inherit}
.container{width:min(1120px,calc(100% - 36px));margin:auto}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:10px;z-index:100}
.skip:focus{left:10px;top:10px}
.topbar{
  position:sticky;top:0;z-index:30;background:rgba(251,250,245,.94);
  border-bottom:1px solid rgba(217,226,230,.9);backdrop-filter:blur(14px)
}
.nav{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900}
.logo-icon{width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center}
.menu{display:flex;gap:24px}
.menu a,.footer-links a{text-decoration:none}
.menu a:hover,.menu a:focus,.footer-links a:hover,.footer-links a:focus{text-decoration:underline}
.menu-toggle{display:none;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-weight:800}
.hero{padding:62px 0 45px}
.hero-layout{display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:center}
.kicker{margin:0 0 10px;color:var(--blue);font-size:13px;font-weight:900;letter-spacing:.13em}
.kicker.light{color:#bfe7f3}
h1,h2,h3{letter-spacing:-.04em}
h1{font-size:clamp(42px,7vw,72px);line-height:1.05;margin:0 0 20px}
h2{font-size:clamp(30px,5vw,44px);line-height:1.2;margin:0 0 14px}
h3{font-size:21px;margin:0 0 8px}
.lead{font-size:18px;color:var(--muted);max-width:650px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 18px}
.btn{padding:14px 20px;border-radius:15px;text-decoration:none;font-weight:900;display:inline-flex;justify-content:center}
.primary{background:var(--navy);color:#fff;box-shadow:0 12px 28px rgba(15,56,80,.22)}
.ghost{background:#fff;border:1px solid var(--line)}
.disclaimer{font-size:13px;color:var(--muted)}
.scene{height:480px;position:relative;overflow:hidden;border-radius:34px;box-shadow:var(--shadow);background:#dceff3}
.sky{position:absolute;inset:0 0 40% 0;background:linear-gradient(#d9f0f5,#f6eee0)}
.sun{position:absolute;right:54px;top:48px;width:82px;height:82px;border-radius:50%;background:#f2c76b}
.island{position:absolute;bottom:150px;clip-path:polygon(50% 0,100% 100%,0 100%)}
.island-a{left:-60px;width:380px;height:250px;background:#557d72}
.island-b{right:-90px;width:450px;height:300px;background:#315f5c}
.sea{position:absolute;left:0;right:0;bottom:0;height:190px;background:linear-gradient(#77bfd1,#b9dfe7)}
.wave{position:absolute;height:4px;background:rgba(255,255,255,.75);border-radius:999px}
.wave-a{left:40px;bottom:100px;width:190px}
.wave-b{right:30px;bottom:55px;width:230px}
.lighthouse{position:absolute;right:115px;bottom:128px;z-index:5}
.tower{width:48px;height:125px;background:#f7f1e6;clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);border:4px solid #8c4a3d}
.light{width:68px;height:28px;background:#8c4a3d;border-radius:8px 8px 3px 3px;margin-left:-10px}
.pine{position:absolute;bottom:116px;width:56px;height:120px;background:#183f37;clip-path:polygon(50% 0,100% 36%,72% 36%,100% 68%,68% 68%,82% 100%,18% 100%,32% 68%,0 68%,28% 36%,0 36%)}
.pine-a{left:55px}.pine-b{left:115px;height:95px;width:48px}
.section{padding:82px 0}
.alt{background:#e8f0ed}
.heading{max-width:730px;margin-bottom:30px}
.heading>p:last-child{color:var(--muted)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:var(--shadow)}
.feature p,.timeline p,.legal p,.contact-box p{color:var(--muted)}
.tag{display:inline-block;background:#e2f0f5;color:var(--blue);padding:6px 10px;border-radius:999px;font-size:13px;font-weight:900;margin-bottom:16px}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:28px}
.forest-panel{background:var(--navy);color:#fff;border-radius:30px;padding:30px;min-height:410px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.tree-row{display:flex;align-items:end;gap:12px;height:160px}
.tree-row span{flex:1;background:#2f7766;clip-path:polygon(50% 0,100% 100%,0 100%)}
.tree-row span:nth-child(1){height:100px}.tree-row span:nth-child(2){height:150px}.tree-row span:nth-child(3){height:125px}.tree-row span:nth-child(4){height:160px}.tree-row span:nth-child(5){height:110px}
.forest-copy p{color:#cddfd9}
.info-cards{display:grid;gap:16px}
.info-cards article{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px}
.info-cards strong{font-size:20px}
.info-cards p{color:var(--muted);margin-bottom:0}
.timeline{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.timeline article{display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px}
.timeline span{flex:0 0 50px;width:50px;height:50px;border-radius:16px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:900}
.tips-section{padding-top:30px}
.tips-card{background:linear-gradient(135deg,var(--navy),#1c6079);color:#fff;border-radius:30px;padding:34px;display:grid;grid-template-columns:.8fr 1.2fr;gap:32px;align-items:center}
.tips-card ul{margin:0;padding-left:20px}
.tips-card li+li{margin-top:10px}
.contact-section{padding-top:30px}
.contact-box{background:#fff;border:1px solid var(--line);border-radius:28px;padding:30px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;box-shadow:var(--shadow)}
.email-link{background:var(--sand);padding:16px 20px;border-radius:16px;font-weight:900;text-decoration:none}
.legal{padding-top:30px}
.legal-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.legal article{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px}
.legal h2{font-size:28px}
.legal h3{font-size:17px;margin-top:20px}
footer{background:#102c39;color:#dce8ed;padding:38px 0}
.footer-inner{display:grid;grid-template-columns:1fr auto;gap:18px}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.copy{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;font-size:13px}
@media(max-width:820px){
  .menu-toggle{display:block}
  .menu{display:none;position:absolute;left:18px;right:18px;top:62px;flex-direction:column;gap:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:var(--shadow)}
  .menu.open{display:flex}
  .menu a{padding:12px}
  .hero-layout,.split,.tips-card,.contact-box,.legal-grid{grid-template-columns:1fr}
  .hero{padding-top:38px}
  .feature-grid,.timeline{grid-template-columns:1fr 1fr}
  .scene{height:390px}
}
@media(max-width:560px){
  .container{width:min(100% - 28px,1120px)}
  h1{font-size:42px}
  .actions .btn{width:100%}
  .scene{height:330px;border-radius:24px}
  .sun{width:64px;height:64px;right:26px}
  .island-a{width:300px;height:210px}
  .island-b{width:350px;height:240px}
  .lighthouse{right:65px;bottom:115px}
  .feature-grid,.timeline{grid-template-columns:1fr}
  .section{padding:60px 0}
  .footer-inner{grid-template-columns:1fr}
  .copy{grid-column:1}
}