:root{
  --bg:#fbfbf7;
  --paper:#ffffff;
  --ink:#1c1f1c;
  --muted:#5b615b;
  --line:#e6e6df;

  --green:#2e7d32;
  --green2:#1b5e20;

  --shadow: 0 18px 40px rgba(0,0,0,.10);
  --radius: 22px;
  --max: 1080px;

  --outline-bg: rgba(255,255,255,.86);
  --outline-border: rgba(46,125,50,.35);
  --outline-text: #1b5e20;
  --outline-hover: rgba(46,125,50,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(46,125,50,.06), transparent 55%),
    radial-gradient(1000px 700px at 110% 10%, rgba(255,179,0,.08), transparent 55%),
    var(--bg);
  color:var(--ink);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,p,button,a{word-break:keep-all}
:focus-visible{outline:3px solid rgba(46,125,50,.25);outline-offset:2px}

/* Intro */
#intro{
  position:fixed; inset:0; z-index:999;
  background: radial-gradient(circle at top left, #4caf50 0%, #2e7d32 40%, #1b1f1a 100%);
  display:flex; align-items:center; justify-content:center;
  color:#fff; text-align:center;
  transition: opacity .55s ease, transform .55s ease;
}
#intro.hide{opacity:0; transform:scale(1.02); pointer-events:none}
.intro-wrap{display:flex; flex-direction:column; align-items:center}
.intro-droplet{
  width:min(320px, 78vw); aspect-ratio:1/1;
  border-radius:55% 60% 70% 45% / 55% 45% 65% 60%;
  background: radial-gradient(circle at 30% 20%, #ffe082 0%, #ffb300 40%, #ffcc80 60%, #ffffff 100%);
  box-shadow: 0 28px 55px rgba(0,0,0,.38);
  position:relative; overflow:hidden;
  animation:introBlob 4.5s ease-in-out infinite alternate;
  display:flex; align-items:center; justify-content:center;
  padding:22px;
}
.intro-droplet::before{
  content:""; position:absolute; inset:8%;
  border-radius:inherit; border:1px solid rgba(255,255,255,.6);
  opacity:.85;
}
.intro-glow{
  position:absolute; inset:-30%;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.9), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(255,183,77,.8), transparent 60%);
  filter: blur(6px);
  mix-blend-mode: screen;
  opacity:.95;
  animation:introGlow 4s ease-in-out infinite alternate;
}
.intro-inner{position:relative; z-index:1}
.intro-kor{
  font-weight:900;
  font-size:2.05rem;
  letter-spacing:.16em;
  text-indent:.16em;
  color:#2e7d32;
  text-shadow: 0 3px 6px rgba(255,255,255,.65);
  opacity:0; transform:scale(.65) translateY(14px);
  animation:introTextGrow 1.4s cubic-bezier(.22,.73,.29,1.01) .15s forwards;
}
.intro-en{
  margin-top:.25rem;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#4e342e;
  opacity:0; transform:translateY(8px);
  animation:introTextFade 1s ease .8s forwards;
}
.intro-tag{
  margin-top:.8rem;
  display:inline-block;
  font-size:1.02rem;
  font-weight:800;
  color:#2e7d32;
  padding:.55rem 1.25rem;
  background: rgba(255,255,255,.9);
  border-radius:55% 45% 60% 50% / 50% 60% 45% 55%;
  border:2px solid rgba(76,175,80,.6);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  opacity:0; transform:scale(.72);
  animation:taglinePop 1.15s cubic-bezier(.25,.7,.3,1.2) .25s forwards;
}
.intro-skip{
  margin-top:1.6rem;
  padding:.48rem 1.15rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.85);
  background: rgba(0,0,0,.24);
  color:#fff;
  font-size:.88rem;
  cursor:pointer;
  backdrop-filter: blur(4px);
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.intro-skip::before{content:"⏩"; font-size:.95rem}
.intro-skip:hover{background: rgba(0,0,0,.38)}
@keyframes taglinePop{0%{transform:scale(.72) translateY(6px);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes introBlob{
  0%{border-radius:55% 60% 70% 45% / 55% 45% 65% 60%; transform:scale(1)}
  50%{border-radius:60% 50% 55% 65% / 60% 55% 60% 50%; transform:scale(1.04) translateY(-4px)}
  100%{border-radius:48% 70% 60% 50% / 50% 50% 70% 60%; transform:scale(1.07) translateY(-8px)}
}
@keyframes introGlow{0%{opacity:.7; transform:translate3d(0,0,0) scale(1)}100%{opacity:1; transform:translate3d(6px,-4px,0) scale(1.08)}}
@keyframes introTextGrow{0%{opacity:0; transform:scale(.65) translateY(14px)}60%{opacity:1; transform:scale(1.12) translateY(0)}100%{opacity:1; transform:scale(1) translateY(0)}}
@keyframes introTextFade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important;scroll-behavior:auto !important}
}

/* Header/Nav */
header{
  position:sticky; top:0; z-index:100;
  background: rgba(251,251,247,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{
  display:flex; flex-direction:column;
  font-weight:900;
  letter-spacing:.06em;
  color:var(--green2);
  line-height:1.05;
  font-size:1.05rem;
}
.brand span{font-size:.76rem; color:rgba(28,31,28,.72); letter-spacing:.12em}
.nav-links{display:flex; align-items:center; gap:14px}
.nav-links a{
  font-size:.92rem;
  color:rgba(28,31,28,.85);
  padding:8px 10px;
  border-radius:999px;
}
.nav-links a:hover{background: rgba(46,125,50,.06)}
.nav-cta{display:flex; gap:10px; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  font-size:.92rem;
  cursor:pointer;
  transition: transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  border:1px solid transparent;
  white-space:nowrap;
}
.btn-outline{
  background: var(--outline-bg);
  border-color: var(--outline-border);
  color: var(--outline-text);
  box-shadow: 0 8px 16px rgba(0,0,0,.05);
}
.btn-outline:hover{background: var(--outline-hover)}
.btn-outline:active{transform: translateY(1px)}
.btn-quiet{
  background: transparent;
  border-color: rgba(0,0,0,.10);
  color: rgba(28,31,28,.82);
}
.btn-quiet:hover{background: rgba(0,0,0,.04)}
.menu-toggle{
  display:none; border:none; background:transparent;
  font-size:1.4rem; cursor:pointer;
  padding:8px 10px; border-radius:10px;
}
.menu-toggle:hover{background: rgba(0,0,0,.04)}
@media (max-width:860px){
  .nav-cta{display:none}
  .menu-toggle{display:block}
  .nav-links{gap:8px}
  .nav-links a{display:none}
  .nav-links a.primary-link{display:inline-flex}
}
.drawer{
  display:none;
  border-top:1px solid var(--line);
  background: rgba(251,251,247,.98);
  padding:10px 18px 14px;
}
.drawer.open{display:block}
.drawer a{
  display:block;
  padding:11px 10px;
  border-radius:14px;
  font-size:.95rem;
  color: rgba(28,31,28,.88);
}
.drawer a:hover{background: rgba(46,125,50,.06)}
.drawer .drawer-cta{display:grid; gap:10px; margin-top:10px}

/* Main layout */
main{max-width:var(--max); margin:0 auto; padding:0 18px 64px}
section{padding:70px 0; scroll-margin-top:92px}
@media (max-width:520px){section{padding:56px 0}}
.kicker{
  font-size:.86rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(28,31,28,.55);
  margin-bottom:12px;
}
h1{
  font-size: clamp(2.1rem, 3vw, 3.1rem);
  line-height:1.12;
  letter-spacing:-0.02em;
  margin:0 0 14px;
}
h2.section-title{
  margin:0 0 10px;
  font-size:1.9rem;
  letter-spacing:-0.02em;
}
.lead{
  font-size:1.05rem;
  color: rgba(28,31,28,.72);
  max-width:56ch;
}

/* Hero */
.hero{
  padding-top:46px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:26px;
  align-items:start;
}
.hero-card{
  background: rgba(255,255,255,.78);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:22px;
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
}
.hero-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.hero-meta{margin-top:16px; font-size:.9rem; color: rgba(28,31,28,.62)}
.hero-visual{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  min-height:340px;
  position:relative;
  background:#e9efe7;
}
.hero-visual picture, .hero-visual img{width:100%; height:100%; object-fit:cover}
.hero-badge{
  position:absolute;
  bottom:14px; left:14px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:10px 12px;
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
  font-size:.88rem;
}
.hero-badge strong{color: var(--green2)}
.hero-em{color: var(--green2)}
@media (max-width:860px){
  .hero{grid-template-columns:1fr; padding-top:26px}
  .hero-visual{min-height:260px}
}

/* Cards */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}}
.card{
  background: rgba(255,255,255,.86);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.05);
}
.card h3{margin:0 0 6px; font-size:1.05rem; letter-spacing:-0.01em}
.card p{margin:0; color: rgba(28,31,28,.72); font-size:.95rem}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(46,125,50,.07);
  border:1px solid rgba(46,125,50,.14);
  color: var(--green2);
  font-size:.88rem;
  font-weight:650;
}

/* Services */
.svc .sub{color: rgba(28,31,28,.70); margin:0 0 18px; max-width:72ch}
.svc-card{display:flex; flex-direction:column; gap:10px; min-height:210px}
.svc-title{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.svc-title h3{margin:0; font-size:1.06rem}
.svc-tag{
  font-size:.78rem;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.65);
  color: rgba(28,31,28,.70);
  white-space:nowrap;
}
.svc-points{margin:0; padding-left:18px; color: rgba(28,31,28,.70); font-size:.94rem}
.svc-foot{margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* Portfolio */
.portfolio-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap:14px;
  margin-top:18px;
}
.portfolio-item{
  overflow:hidden;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: rgba(255,255,255,.86);
  box-shadow: 0 12px 26px rgba(0,0,0,.05);
  display:flex;
  flex-direction:column;
}
.portfolio-item img{width:100%; height:160px; object-fit:cover}
.portfolio-body{padding:14px 16px 16px}
.portfolio-title{font-weight:800; margin:0 0 4px}
.portfolio-meta{margin:0; font-size:.9rem; color: rgba(28,31,28,.66)}
.portfolio-cta{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* Gallery */
.gallery{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap:12px;
  margin-top:18px;
}
.gallery img{
  height:170px; width:100%;
  object-fit:cover;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  background:#f2f2ee;
}

/* Contact */
.contact-wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:16px; margin-top:18px}
@media (max-width:900px){.contact-wrap{grid-template-columns:1fr}}
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.tab{
  flex:1 1 180px;
  text-align:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.75);
  cursor:pointer;
  font-size:.92rem;
}
.tab.active{
  border-color: rgba(46,125,50,.35);
  background: rgba(46,125,50,.07);
  color: var(--green2);
  font-weight:750;
}
form{
  background: rgba(255,255,255,.86);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.05);
}
form.hidden{display:none}
label{display:block; font-size:.82rem; color: rgba(28,31,28,.70); margin:0 0 6px}
input, textarea, select{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(251,251,247,.9);
  font-size:.95rem;
  outline:none;
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(46,125,50,.45);
  box-shadow: 0 0 0 3px rgba(46,125,50,.10);
  background:#fff;
}
textarea{min-height:120px; resize:vertical}
.field{margin-bottom:12px}
.opt-row{display:flex; flex-wrap:wrap; gap:8px}
.opt{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.70);
  font-size:.9rem;
  color: rgba(28,31,28,.80);
  white-space:nowrap;
}
input[type="radio"], input[type="checkbox"]{accent-color: var(--green)}
.submit-wrap{margin-top:14px; display:grid; gap:8px; justify-items:start}
.submit-btn{
  padding:11px 14px;
  border-radius:999px;
  border:1px solid rgba(46,125,50,.40);
  background: rgba(255,255,255,.86);
  color: var(--green2);
  font-weight:850;
  cursor:pointer;
  transition: background .18s ease, transform .12s ease;
}
.submit-btn:hover{background: rgba(46,125,50,.08)}
.submit-btn:active{transform: translateY(1px)}
.submit-btn.is-sending{opacity:.7; cursor:wait}
.submit-btn.is-success{background: rgba(46,125,50,.92); border-color: rgba(46,125,50,.92); color:#fff}
.hint{margin:0; font-size:.84rem; color: rgba(28,31,28,.62)}
.side{
  background: rgba(255,255,255,.86);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.05);
  height: fit-content;
}
.side h3{margin:0 0 8px; font-size:1.05rem}
.side p{margin:0 0 10px; color: rgba(28,31,28,.70)}
.side .stack{display:grid; gap:10px; margin-top:10px}
.side .stack a{justify-content:flex-start}
.side-scope{margin-top:14px; border-top:1px solid var(--line); padding-top:14px}

/* Footer */
footer{
  border-top:1px solid var(--line);
  background: rgba(255,255,255,.55);
  padding:22px 18px 34px;
  color: rgba(28,31,28,.66);
  font-size:.82rem;
}
.footer-inner{max-width:var(--max); margin:0 auto; display:grid; gap:8px}
.footer-top{display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between}
.footer-strong{color: var(--green2); font-weight:800}

/* Utilities */
.mt-18{margin-top:18px}
.max-70ch{max-width:70ch}
.max-76ch{max-width:76ch}
.max-80ch{max-width:80ch}