/* Layout: white sticky header, warm off-white page, 55.625rem centered column, deep-green footer — mirrors silverpath.kr */
:root{
  --green:#336b4e; --green-hover:#28573f; --green-soft:#eaf1ec; --green-text:#3a6b50;
  --bg:#f6f5f1; --card:#ffffff; --line:#e6e4de; --line-strong:#cfccc4;
  --ink:#1c1c1a; --muted:#5f5e59; --faint:#9a9892; --red:#c81e1e; --tan:#f1e3c9; --cream:#fffbe8;
  --sans:"DM Sans","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --serif:"Noto Serif",Georgia,"Times New Roman",serif;
  --serif-kr:"Noto Serif KR","Noto Serif",Georgia,serif;
  --wrap:55.625rem; --radius:0.875rem;
  color-scheme:light;
}
*{box-sizing:border-box}
html{font-size:17px}
@media (min-width:1200px){html{font-size:18.4px}}
html[data-fs="lg"]{font-size:19.5px}
@media (min-width:1200px){html[data-fs="lg"]{font-size:21px}}
body{word-break:keep-all;overflow-wrap:break-word}
button,a[href],label.opt,select,[role=button]{cursor:pointer}
button svg,a svg,.lb-x *,.share *,.x *{pointer-events:none}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--card)}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
svg.ion{display:block;flex:none}
h1,h2,h3{text-wrap:balance;margin:0;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.wrap{width:100%;max-width:calc(var(--wrap) + 2rem);margin:0 auto;padding-left:max(1rem,env(safe-area-inset-left,0px));padding-right:max(1rem,env(safe-area-inset-right,0px))}

/* ---------- Header ---------- */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--card);border-bottom:1px solid transparent}
.hdr-in{height:4rem;display:flex;align-items:center;gap:1rem;padding-left:max(1rem,env(safe-area-inset-left,0px));padding-right:max(1rem,env(safe-area-inset-right,0px))}
.logo{white-space:nowrap;display:flex;align-items:center;gap:0.5rem;font-family:var(--serif);font-weight:700;font-size:1.4375rem;color:var(--green);letter-spacing:-.01em;flex:none}
.logo-ic{width:1.75rem;height:1.75rem;border-radius:0.5rem;background:var(--green-soft);display:grid;place-items:center;color:var(--green)}
.logo-ic svg{width:1rem;height:1rem}
.nav{flex:1;display:flex;justify-content:center;gap:1.75rem;font-size:0.84375rem}
.nav a{white-space:nowrap;color:#2b2b28;padding:0.375rem 0;transition:color .15s}
.nav a:hover{color:var(--green)}
.nav a.on{color:var(--green);font-weight:500}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.375rem;border:0;border-radius:1.25rem;background:var(--green);color:#fff;font-size:0.875rem;padding:0.5625rem 1.375rem;transition:background .15s}
.btn:hover{background:var(--green-hover)}
.btn.sm{font-size:0.8125rem;padding:0.4375rem 1rem}
.btn.lg{font-size:1rem;padding:0.75rem 1.75rem}
.btn.ghost{background:transparent;color:var(--green);border:1px solid var(--green)}
.btn.ghost:hover{background:var(--green-soft)}
.btn[disabled]{background:#c9c9c6;cursor:not-allowed}
.hdr .cta{flex:none;border-radius:1.25rem;padding:0.625rem 1.625rem}
.fsbtn{flex:none;height:2.4rem;border:1px solid var(--line-strong);border-radius:1.25rem;background:var(--card);color:#3a3936;display:inline-flex;align-items:center;gap:0.375rem;padding:0 0.875rem 0 0.7rem;font-size:0.875rem;font-weight:500;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.fsbtn svg{width:1.15rem;height:1.15rem;flex:none}
.fsbtn:hover{border-color:var(--green);color:var(--green)}
.fsbtn[aria-pressed="true"]{background:var(--green-soft);border-color:var(--green);color:var(--green)}
@media (max-width:480px){.fsbtn{padding:0 0.7rem;height:2.2rem;font-size:0.8rem}.fsbtn svg{display:none}.logo{font-size:1.25rem}}
@media (max-width:400px){html[data-fs="lg"] .logo-ic{display:none}html[data-fs="lg"] .logo{font-size:1.1rem}}
@media (max-width:340px){.logo-ic{display:none}.logo{font-size:1.1rem}}
html.navc .fsbtn{margin-left:auto}
.burger{display:none;margin-left:auto;width:2.75rem;height:2.75rem;border:0;border-radius:0.625rem;background:transparent;color:var(--ink);place-items:center}
.burger svg{width:1.5rem;height:1.5rem}
.mnav{display:none}
/* compact header: html.navc is set by script whenever the full nav would not fit */
html.navc .nav,html.navc .hdr .cta{display:none}
html.navc .burger{display:grid;margin-left:0.25rem}
html.navc .mnav{display:block;position:fixed;inset:calc(4rem + env(safe-area-inset-top,0px)) 0 0;z-index:49;background:rgba(28,28,26,.35);opacity:0;pointer-events:none;transition:opacity .2s}
html.navc .mnav.open{opacity:1;pointer-events:auto}
html.navc .mnav-panel{background:var(--card);border-top:1px solid var(--line);padding:0.5rem max(1rem,env(safe-area-inset-right,0px)) 1.5rem max(1rem,env(safe-area-inset-left,0px));transform:translateY(-8px);transition:transform .2s;box-shadow:0 0.75rem 1.5rem rgba(0,0,0,.08)}
html.navc .mnav.open .mnav-panel{transform:none}
html.navc .mnav-panel a.ml{display:flex;align-items:center;justify-content:space-between;padding:1rem 0.25rem;border-bottom:1px solid var(--line);font-size:1.0625rem}
html.navc .mnav-panel a.ml.on{color:var(--green);font-weight:600}
html.navc .mnav-panel a.ml svg{width:1.125rem;height:1.125rem;color:var(--faint)}
html.navc .mnav-panel .btn{width:100%;margin-top:1.25rem;border-radius:1.25rem;padding:0.875rem;font-size:1rem}
html.navc body.menu-open{overflow:hidden}

/* ---------- Shared sections ---------- */
main{flex:1 0 auto}
.hdr,.ftr{flex:none}
.page-hero{text-align:center;padding-block:4.75rem 4rem}
.eyebrow{font-size:0.84375rem;color:var(--green-text);margin-bottom:0.875rem}
.page-hero h1{font-size:clamp(1.75rem,4.4vw,2.375rem);line-height:1.3}
.page-hero .sub{margin:1.375rem auto 0;max-width:40rem;color:var(--green-text);font-size:1.03125rem;line-height:1.65}
.sec{padding-block:3.5rem}
.sec-label{font-size:0.875rem;color:var(--green-text);margin-bottom:0.625rem}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.75rem}
.sec h2{font-size:clamp(1.625rem,3.6vw,2.125rem);line-height:1.3}
.sec .lead{margin-top:1rem;color:#3d3c38;font-size:1.03125rem}
.card{background:var(--card);border-radius:var(--radius)}

/* ---------- Footer ---------- */
.ftr{background:var(--green);color:#fff;margin-top:4.5rem}
.ftr-in{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:2rem;padding-block:2.75rem 3.25rem}
.ftr .logo{color:#fff;font-size:1.25rem}
.ftr .logo-ic{background:#fff;color:var(--green)}
.ftr p.d{font-size:0.8125rem;line-height:1.6;opacity:.92;margin-top:0.875rem;max-width:16.25rem}
.ftr .copy{font-size:0.78125rem;opacity:.85;margin-top:1.375rem}
.ftr h4{font-size:0.78125rem;margin:0.375rem 0 0.625rem;font-weight:600}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:0.4375rem;font-size:0.8125rem}
.ftr ul a{opacity:.92}.ftr ul a:hover{opacity:1;text-decoration:underline}
.ftr .si{display:flex;align-items:center;gap:0.5rem}
.ftr .si svg{width:0.875rem;height:0.875rem}
@media (max-width:760px){.ftr-in{grid-template-columns:repeat(2,minmax(0,1fr))}.ftr-in>div:first-child{grid-column:1/-1}}
@media (max-width:480px){.ftr-in{grid-template-columns:minmax(0,1fr)}}
.ftr .si{overflow-wrap:anywhere;word-break:break-all}

/* ---------- Home ---------- */
.home-hero>*{min-width:0}
.home-hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem;align-items:center;padding-block:4.25rem 4rem}
.pill{display:inline-block;background:var(--tan);color:#3b3324;font-size:0.8125rem;padding:0.25rem 0.625rem;border-radius:62.4375rem}
.home-hero h1{font-size:clamp(2.125rem,5vw,3rem);line-height:1.38;margin-top:1.125rem}
.home-hero h1 em{font-style:normal;color:var(--green)}
.home-hero .intro{margin-top:1rem;font-size:1.03125rem;color:#2e2d2a;line-height:1.7}
.hsearch{margin-top:1.625rem;display:flex;align-items:center;background:var(--card);border-radius:1.5rem;padding:0.375rem 0.375rem 0.375rem 1.125rem;box-shadow:0 1px 0.1875rem rgba(0,0,0,.04)}
.hsearch input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:0.9375rem;color:var(--ink)}
.hsearch input::placeholder{color:#b4b2ab}
.hsearch .btn{border-radius:1.25rem;padding:0.5rem 1rem}
.hsearch svg{width:0.9375rem;height:0.9375rem}
.partners{display:flex;gap:1rem;margin-top:1.625rem;align-items:flex-start}
.partners .lbl{display:flex;align-items:center;gap:0.375rem;font-weight:600;font-size:0.9375rem;white-space:nowrap;padding-top:0.625rem}
.partners .lbl svg{width:1rem;height:1rem;color:var(--green)}
.plogos{display:grid;gap:0.5rem}
.plogo{width:9.375rem;height:2.5rem;background:var(--card);border-radius:0.75rem;display:grid;place-items:center;padding:0.25rem 0.625rem;overflow:hidden}
.plogo img{max-height:2rem;width:auto;object-fit:contain}
.plogo span{font-size:0.78125rem;font-weight:700;color:#2a2a28;text-align:center;line-height:1.2}
.hero-art{background:var(--cream);border-radius:1.375rem;aspect-ratio:1.2/1;display:grid;place-items:center;overflow:hidden;max-width:100%}
.hero-art img{width:100%;height:100%;object-fit:contain}
.cats-sec{text-align:center;padding-block:3.75rem 2.5rem}
.cats-sec h2{font-size:clamp(1.625rem,3.6vw,2rem);margin-top:0.625rem}
.cats-sec .sub{color:var(--green-text);margin-top:1.25rem;font-size:1rem;line-height:1.6}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:0.875rem;margin-top:2.25rem;text-align:left}
.cat{background:var(--card);border:1px solid var(--line);border-radius:0.875rem;padding:1rem 0.875rem 0.875rem;transition:border-color .15s,box-shadow .15s}
.cat:hover{border-color:var(--green);box-shadow:0 4px 14px rgba(0,0,0,.05)}
.cat .ic{width:1.625rem;height:1.625rem;border-radius:0.4375rem;background:var(--green-soft);display:grid;place-items:center;color:var(--green)}
.cat .ic svg{width:0.9375rem;height:0.9375rem}
.cat b{display:block;margin-top:0.625rem;font-size:1rem}
.cat small{display:block;color:var(--green-text);font-size:0.84375rem;margin-top:2px}
.toast{position:fixed;z-index:40;right:calc(1.25rem + env(safe-area-inset-right,0px));bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));width:21.25rem;max-width:calc(100vw - 2rem);background:var(--card);border-radius:1.25rem;padding:1.125rem 1.125rem 1.125rem;box-shadow:0 0.75rem 2rem rgba(30,45,36,.14),0 2px 0.375rem rgba(30,45,36,.06);display:grid;grid-template-columns:2.75rem minmax(0,1fr);column-gap:0.875rem;align-items:center;animation:toastIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes toastIn{from{opacity:0;transform:translateY(1rem)}}
.toast .ti{width:2.75rem;height:2.75rem;border-radius:0.875rem;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center;grid-row:span 2}
.toast .ti svg{width:1.375rem;height:1.375rem}
.toast .tt{font-weight:700;font-size:1rem;line-height:1.3;padding-right:1.5rem}
.toast .ts{font-size:0.84375rem;color:var(--muted);line-height:1.4;margin-top:2px}
.toast .tb{grid-column:1/-1;display:flex;gap:0.5rem;margin-top:0.875rem}
.toast .tb .btn{flex:1;font-size:0.875rem;padding:0.5625rem 0.75rem}
.toast .tb .btn svg{width:0.9375rem;height:0.9375rem}
.toast .tb .later{flex:none;background:transparent;color:var(--muted);border:0;font-size:0.875rem;padding:0.5625rem 0.75rem;border-radius:1.25rem}
.toast .tb .later:hover{background:#f1f0ec}
.toast .x{position:absolute;top:0.75rem;right:0.75rem;border:0;background:transparent;color:var(--faint);width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;border-radius:1.25rem;padding:0}
.toast .x:hover{background:#f1f0ec;color:var(--ink)}
.toast .x svg{width:1.125rem;height:1.125rem}
@media (max-width:520px){.toast{right:1rem;left:1rem;width:auto;bottom:calc(1rem + env(safe-area-inset-bottom,0px))}}
@media (max-width:860px){
  .home-hero{grid-template-columns:minmax(0,1fr);padding-block:2.5rem 2rem}
  .hero-art{order:-1;aspect-ratio:16/10}
  .cats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:440px){.partners{flex-direction:column;gap:0.625rem}.partners .lbl{padding-top:0}.plogos{grid-template-columns:repeat(2,1fr);width:100%}.plogo{width:auto}}

/* partners marquee */
.partners-sec{padding-block:0.5rem 1.75rem}
.plbl{display:flex;align-items:center;gap:0.5rem;font-weight:600;font-size:1rem;margin-bottom:0.875rem}
.plbl svg{width:1.125rem;height:1.125rem;color:var(--green)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.mtrack{display:flex;width:max-content;animation:marq 40s linear infinite}
.marquee:hover .mtrack{animation-play-state:paused}
.mgroup{display:flex;gap:0.875rem;padding-right:0.875rem}
.mgroup .plogo{width:11.25rem;height:3.5rem;flex:none;border-radius:0.875rem}
.mgroup .plogo img{max-height:var(--lh,2.25rem);max-width:100%}
.mgroup .plogo span{font-size:0.875rem}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mtrack{animation:none;width:auto;flex-wrap:wrap;justify-content:center}.mgroup{flex-wrap:wrap;justify-content:center}.mgroup[aria-hidden]{display:none}.marquee{mask-image:none;-webkit-mask-image:none}}
/* featured jobs */
.band{background:#f2f1ec;margin-top:2.5rem}
.fjobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.875rem;margin-top:1.75rem}
.fjob{background:var(--card);border-radius:0.875rem;padding:0.875rem 0.875rem 0.875rem;display:flex;flex-direction:column}
.fjob .tags{margin:0 0 0.375rem}.fjob .tag{font-size:0.78125rem}
.fjob .co{font-size:0.90625rem;color:#2b2b28}
.fjob h3{font-size:1.0625rem;line-height:1.45;margin-top:0.25rem;overflow-wrap:anywhere}
.fmeta{display:grid;gap:0.375rem;margin:0.625rem 0 1rem;font-size:0.90625rem;color:#2b2b28;flex:1;align-content:start}
.fmeta span{display:flex;gap:0.5rem;align-items:flex-start}
.fmeta svg{width:1rem;height:1rem;color:var(--green);flex:none;margin-top:0.1875rem}
.fjob .btn{width:100%;border-radius:1.25rem;padding:0.4375rem}
/* why */
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;align-items:center;padding-block:4.5rem 2.5rem}
.why-tx{color:var(--green-text);font-size:1.0625rem;line-height:1.65;margin:1.375rem 0 1.375rem}
.why .btn{border-radius:1.25rem;padding:0.4375rem 0.875rem}
.why-list{display:grid;gap:0.875rem}
@media (max-width:760px){.fjobs,.why{grid-template-columns:minmax(0,1fr)}.mgroup .plogo{width:9.375rem;height:3.125rem}}
/* ---------- About ---------- */
.story{display:grid;grid-template-columns:20rem 1fr;gap:2rem;margin-top:1.375rem;align-items:start}
.ceo{background:var(--card);border-radius:1rem;padding:1.75rem 1.25rem 1.625rem;text-align:center}
.avatar{width:10.75rem;height:10.75rem;border-radius:50%;margin:0 auto;background:#e3e2de;overflow:hidden;display:grid;place-items:center;color:#9b9993}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar svg{width:5rem;height:5rem}
.ceo b{display:block;font-size:1.3125rem;margin-top:1.375rem}
.ceo span{color:var(--green-text);font-size:0.9375rem}
.story-text{color:var(--green-text);font-size:1.0625rem;line-height:1.6;display:grid;gap:1rem}
.label-up{font-size:0.875rem;color:var(--green-text);letter-spacing:.02em}
.values{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.125rem}
.val{background:var(--card);border:1px solid var(--line);border-radius:0.875rem;padding:1rem 1.125rem;display:flex;gap:0.875rem}
.val .ic{flex:none;width:1.875rem;height:1.875rem;border-radius:0.5rem;background:var(--green-soft);display:grid;place-items:center;color:var(--green)}
.val .ic svg{width:1.0625rem;height:1.0625rem}
.val b{font-size:1.125rem;display:block}
.val p{color:var(--green-text);font-size:0.9375rem;margin-top:0.375rem;line-height:1.55}
@media (max-width:760px){.story{grid-template-columns:1fr}.values{grid-template-columns:1fr}.story-text{font-size:1rem}}

/* ---------- Jobs ---------- */
.jsearch{max-width:35rem;margin:2.125rem auto 0;display:flex;gap:0.375rem;align-items:center}
.jsearch input{flex:1;min-width:0;border:0;background:var(--card);border-radius:1.375rem;height:2.75rem;padding:0 1.125rem;font:inherit;font-size:0.9375rem;outline:none;box-shadow:0 1px 0.1875rem rgba(0,0,0,.04)}
.jsearch input:focus{box-shadow:0 0 0 2px var(--green-soft),0 0 0 0.1875rem var(--green)}
.jsearch input::placeholder{color:#b4b2ab}
.icobtn{flex:none;width:2.75rem;height:2.75rem;border-radius:50%;border:0;background:var(--green);color:#fff;display:grid;place-items:center}
.icobtn svg{width:1.25rem;height:1.25rem}
.filters{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;margin-top:0.375rem}
.filters>b{font-size:0.9375rem;margin-right:0.25rem}
.chip{border:1px solid var(--green);color:var(--green);background:transparent;border-radius:62.4375rem;padding:0.1875rem 0.625rem;font-size:0.875rem;line-height:1.5;transition:background .15s}
.chip:hover{background:var(--green-soft)}
.chip.on{background:var(--green);color:#fff}
.chip small{font-size:0.75rem;opacity:.7;font-variant-numeric:tabular-nums}
.count-row{display:flex;justify-content:flex-end;align-items:center;gap:0.875rem;margin:1.125rem 0 0.875rem;font-size:0.9375rem}
.count-row b{font-variant-numeric:tabular-nums}
.reset{border:0;background:transparent;display:flex;align-items:center;gap:0.3125rem;color:#2b2b28;font-size:0.9375rem;padding:0.25rem}
.reset svg{width:0.9375rem;height:0.9375rem}
.jlist{display:grid;gap:0.875rem}
.job{background:var(--card);border-radius:0.875rem;padding:1.125rem 1rem;display:flex;gap:1rem;align-items:flex-start;transition:box-shadow .15s}
.job:hover{box-shadow:0 0.25rem 1rem rgba(0,0,0,.06)}
.job-main{flex:1;min-width:0}
.job .num{font-size:0.9375rem;color:#2b2b28;font-variant-numeric:tabular-nums}
.tags{display:flex;gap:0.4375rem;flex-wrap:wrap;margin:0.375rem 0 0.5rem}
.tag{border:1px solid var(--green);color:var(--green);border-radius:62.4375rem;padding:0 0.5625rem;font-size:0.875rem;line-height:1.65}
.tag.closed{background:var(--red);border-color:var(--red);color:#fff}
.tag.open{background:var(--green-soft);border-color:var(--green-soft)}
.job .co{font-size:0.90625rem;color:#2b2b28}
.job h3{font-size:1.125rem;margin-top:0.25rem;line-height:1.4;overflow-wrap:anywhere}
.meta{display:flex;flex-wrap:wrap;gap:0.375rem 1.625rem;margin-top:0.5rem;font-size:0.90625rem;color:#2b2b28}
.meta span{display:flex;gap:0.375rem;align-items:center;min-width:0}
.meta svg{width:1rem;height:1rem;color:var(--green);flex:none}
.job .btn{flex:none;border-radius:1.25rem;padding:0.625rem 1.125rem}
.job.expired{background:#efeeea;box-shadow:none}
.job.expired .job-main{opacity:.55}
.job.expired .tag:not(.closed){border-color:#9a9892;color:#77756f}
.job.expired .meta svg{color:#9a9892}
.job.expired .btn{background:#b9b7b1}
.job.expired .btn:hover{background:#a5a39d}
.job.expired:hover{box-shadow:none}
.more-wrap{display:flex;justify-content:center;margin-top:1.5rem}
.empty{background:var(--card);border-radius:0.875rem;padding:2.5rem 1rem;text-align:center;color:var(--muted)}
@media (max-width:640px){
  .job{flex-direction:column;gap:0.75rem}
  .job .btn{width:100%}
  .filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:0.375rem;margin-inline:-16px;padding-inline:1rem;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap;flex:none}
  .filters>b{flex:none}
}

/* ---------- Job detail ---------- */
.back{display:inline-flex;align-items:center;gap:0.5rem;color:var(--green-text);font-size:0.96875rem;margin:1.875rem 0 1rem;border:0;background:none;padding:0.25rem 0}
.back svg{width:1.125rem;height:1.125rem}
.dcard{background:var(--card);border-radius:0.875rem;padding:1.125rem 1rem 1.25rem;margin-bottom:0.875rem}
.dtop{display:flex;justify-content:space-between;gap:0.75rem}
.share{width:2rem;height:2rem;border-radius:0.5rem;border:0;background:var(--green-soft);color:var(--green);display:grid;place-items:center;flex:none}
.share svg{width:1.0625rem;height:1.0625rem}
.dcard h1{font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.35;margin-top:0.875rem;overflow-wrap:anywhere}
.dcard .co{color:var(--green-text);font-size:0.96875rem;margin-top:0.875rem}
.dinfo{display:grid;gap:0.75rem;margin-top:0.875rem;font-size:1rem}
.dinfo div{display:flex;gap:0.625rem;align-items:flex-start}
.dinfo svg{width:1.125rem;height:1.125rem;color:var(--green);flex:none;margin-top:0.1875rem}
.dh{display:flex;align-items:center;gap:0.625rem;font-size:1.1875rem;font-weight:700;margin-bottom:0.75rem}
.dh .ic{width:1.875rem;height:1.875rem;border-radius:0.5rem;background:var(--green-soft);display:grid;place-items:center;color:var(--green)}
.dh .ic svg{width:1.125rem;height:1.125rem}
.dbody{display:grid;gap:0.75rem;font-size:1rem;white-space:pre-line;overflow-wrap:anywhere}
.dbody b{font-weight:700}
.snack{position:fixed;left:50%;bottom:calc(1.75rem + env(safe-area-inset-bottom,0px));transform:translate(-50%,1.25rem);background:#1f2a24;color:#fff;font-size:0.90625rem;padding:0.625rem 1.125rem;border-radius:62.4375rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:120;max-width:calc(100vw - 2rem);text-align:center}
.snack.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Wise words ---------- */
.ww-story{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem;align-items:center}
.story-art{background:#f0b8b9;border-radius:1rem;aspect-ratio:1.5/1;overflow:hidden;display:grid;place-items:center;max-width:100%}
.story-art img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.ww-story h2{font-size:clamp(1.75rem,3.6vw,2.125rem);margin-top:0.5rem}
.ww-story .tx{color:var(--green-text);font-size:1.03125rem;line-height:1.6;display:grid;gap:1.375rem;margin-top:1.125rem}
.ww-story .tx b{color:var(--green)}
.voices{display:grid;gap:0.5rem;margin-top:1.875rem}
.voice{background:var(--card);border-radius:0.75rem;padding:0.875rem 0.875rem 1rem}
.voice b{font-size:1.125rem;display:block}
.voice p{font-size:0.9375rem;margin-top:0.25rem;color:#2b2b28}
.lib-h{font-size:1.125rem;font-weight:600;margin:1.875rem 0 0.75rem}
.lib{display:grid;gap:0.5rem}
.lrow{display:flex;align-items:center;gap:0.875rem;background:var(--card);border:1px solid var(--line);border-radius:0.75rem;padding:0.75rem 0.875rem;transition:border-color .15s}
.lrow:hover{border-color:var(--green)}
.lrow .ic{width:1.875rem;height:1.875rem;border-radius:0.5rem;background:var(--green-soft);display:grid;place-items:center;color:var(--green);flex:none;overflow:hidden}
.lrow .ic.round{border-radius:50%}
.lrow .ic svg{width:1.0625rem;height:1.0625rem}
.lrow .ic img{width:100%;height:100%;object-fit:cover}
.lrow b{flex:1;font-weight:600;font-size:1rem}
.chev{width:1.125rem;height:1.125rem;color:#3a3936;flex:none}
.vids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.5rem;margin-top:1.875rem}
.vid{display:flex;align-items:center;gap:0.75rem;background:var(--card);border:1px solid var(--line);border-radius:0.625rem;padding:0.8125rem 0.875rem;font-family:var(--sans);font-weight:600;font-size:0.9375rem;transition:border-color .15s}
.vid:hover{border-color:var(--green)}
.vid span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.5rem;margin-top:1.875rem}
.chan{background:var(--card);border-radius:0.75rem;padding:0.875rem 0.5rem 1.125rem;text-align:center;transition:box-shadow .15s}
.chan:hover{box-shadow:0 0.25rem 1rem rgba(0,0,0,.07)}
.chan .av{width:min(8.125rem,80%);aspect-ratio:1;border-radius:50%;margin:0 auto;overflow:hidden;background:var(--green-soft);display:grid;place-items:center;color:var(--green);font-size:2.125rem;font-weight:700}
.chan .av img{width:100%;height:100%;object-fit:cover}
.chan b{display:block;margin-top:1rem;font-size:1.0625rem;font-weight:600;overflow-wrap:anywhere}
.bigquote{display:grid;grid-template-columns:2.5rem minmax(0,1fr) 2.5rem;gap:0.5rem;align-items:start;padding-block:5rem 1.25rem;text-align:center}
.bigquote .qm{font-family:var(--serif);font-size:4rem;line-height:1;font-weight:700;color:#1c1c1a;margin-top:-6px}
.bigquote .qm.r{text-align:right}
.bigquote .en{font-size:clamp(1.125rem,2.4vw,1.4375rem);font-weight:600;line-height:1.5}
.bigquote .kr{font-size:clamp(1.0625rem,2.2vw,1.375rem);line-height:1.55;margin-top:1rem}
@media (max-width:760px){
  .ww-story{grid-template-columns:minmax(0,1fr)}
  .vids{grid-template-columns:minmax(0,1fr)}
  .chans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bigquote{grid-template-columns:1.5rem minmax(0,1fr) 1.5rem}
  .bigquote .qm{font-size:2.5rem}
}
.qlist{display:grid;gap:0.625rem;margin-top:0.5rem}
.q{background:var(--card);border-radius:0.75rem;padding:1.125rem 1.125rem}
.q .en{font-weight:600;font-size:1.03125rem;line-height:1.5}
.q .kr{margin-top:0.375rem;color:var(--green-text);font-size:0.96875rem}
.q .src{margin-top:0.5rem;font-size:0.875rem;color:var(--muted)}
.q .n{font-size:0.8125rem;color:var(--faint);font-variant-numeric:tabular-nums;margin-bottom:0.25rem}

/* ---------- Guides (cards) ---------- */
.rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.875rem}
.rcard{background:var(--card);border-radius:0.875rem;overflow:hidden;display:flex;flex-direction:column}
.rimg{aspect-ratio:4/5;background:var(--green-soft);overflow:hidden;display:grid;place-items:center;max-width:100%;border:0;padding:0;width:100%;cursor:zoom-in}
.rimg img{width:100%;height:100%;object-fit:cover;object-position:top}
.ph{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0.625rem;padding:1.125rem;text-align:center;color:var(--green);font-weight:700;font-size:1.0625rem;line-height:1.4;background:linear-gradient(160deg,#eef4ef,#dfeae2)}
.ph svg{width:1.75rem;height:1.75rem;opacity:.6}
.rcard .rt{padding:0.875rem 0.875rem 0;font-size:1.0625rem;font-weight:500;line-height:1.45;flex:1}
.rcard .ra{display:flex;justify-content:center;padding:1rem 0.875rem 1.125rem}
.rcard .ra .btn{border-radius:1.25rem;padding:0.5625rem 1.125rem}
.gsec{padding-block:1.875rem}
.gsec h2{font-size:clamp(1.625rem,3.6vw,2rem)}
@media (max-width:760px){.rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.rcard .rt{font-size:0.96875rem}.rgrid{gap:0.625rem}}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:100;background:rgba(18,20,18,.82);display:flex;align-items:center;justify-content:center;padding:calc(1rem + env(safe-area-inset-top,0px)) max(1rem,env(safe-area-inset-right,0px)) calc(1rem + env(safe-area-inset-bottom,0px)) max(1rem,env(safe-area-inset-left,0px))}
.lb-box{background:var(--card);border-radius:1rem;max-width:38.75rem;width:100%;max-height:100%;display:flex;flex-direction:column;overflow:hidden}
.lb-top{display:flex;align-items:center;gap:0.625rem;padding:0.75rem 0.75rem 0.75rem 1.125rem;border-bottom:1px solid var(--line)}
.lb-top b{flex:1;font-size:1rem;min-width:0}
.lb-x{width:2.25rem;height:2.25rem;border:0;border-radius:0.5rem;background:var(--green-soft);color:var(--green);display:grid;place-items:center;flex:none}
.lb-x svg{width:1.125rem;height:1.125rem}
.lb-body{overflow:auto;padding:0.875rem;display:grid;gap:0.75rem}
.lb-body img{width:100%;border-radius:0.625rem}
.lb-body .ph{min-height:20rem;border-radius:0.625rem}
.lb-body p{color:var(--muted);font-size:0.9375rem}

/* ---------- Forms ---------- */
.form{max-width:36rem;margin:0.75rem auto 0;display:grid;gap:1.125rem;background:var(--card);border-radius:1.25rem;padding:1.875rem 1.75rem 1.75rem}
.field label{display:block;font-size:0.96875rem;font-weight:400;margin-bottom:0.5rem}
.form .hint{font-size:0.84375rem;color:var(--muted);margin-top:-4px}
@media (max-width:520px){.form{padding:1.375rem 1rem}}
.req{color:var(--red)}
.inp{width:100%;border:1px solid var(--line-strong);border-radius:1.25rem;background:var(--card);font:inherit;font-size:0.96875rem;line-height:1.4;padding:0.5625rem 1rem;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
.inp:focus{border-color:var(--green);box-shadow:0 0 0 0.1875rem var(--green-soft)}
textarea.inp{min-height:7.5rem;resize:vertical;border-radius:1.125rem}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#777 50%),linear-gradient(135deg,#777 50%,transparent 50%);background-position:calc(100% - 1.25rem) 55%,calc(100% - 0.9375rem) 55%;background-size:0.3125rem 0.3125rem;background-repeat:no-repeat;padding-right:2.5rem}
.form .btn.full{width:100%;border-radius:1.25rem;padding:0.6875rem;font-size:1rem;margin-top:0.375rem}
.form .btn.full[disabled]{background:var(--green);opacity:.6}
.contact-page .page-hero,.survey-page .page-hero{padding-block:6rem 3.5rem}
.contact-wrap{padding-bottom:1.5rem}
.okmsg{max-width:36rem;margin:1.25rem auto 0;background:var(--card);border-radius:1rem;padding:2rem 1.375rem;text-align:center}
.okmsg .ic{width:3.25rem;height:3.25rem;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;margin:0 auto 0.875rem}
.okmsg .ic svg{width:1.625rem;height:1.625rem}
.okmsg b{font-size:1.25rem;display:block}
.okmsg p{margin-top:0.5rem;color:var(--muted)}

.survey{max-width:34.125rem;margin:0.75rem auto 0;background:var(--card);border-radius:1rem;padding:1.75rem 1.75rem 1.75rem}
.dots{display:flex;justify-content:center;align-items:center;margin-bottom:0.875rem}
.dots i{width:0.625rem;height:0.625rem;border-radius:50%;background:#e2e1dc;display:block}
.dots i.on{background:var(--green)}
.dots s{width:0.9375rem;height:2px;background:#e2e1dc;display:block}
.survey h2{font-size:1.3125rem;margin-bottom:1rem}
.survey h2 small{font-size:0.875rem;font-weight:400;color:var(--muted)}
.sq{margin-bottom:1.25rem}
.sq>.qt{font-size:1.0625rem;margin-bottom:0.625rem;display:block}
.opt{display:flex;align-items:center;gap:0.625rem;padding:0.375rem 2px;font-size:0.96875rem;cursor:pointer}
.opt input[type=radio],.opt input[type=checkbox]{width:1.125rem;height:1.125rem;accent-color:var(--green);margin:0;flex:none}
.opt .inp.inline{padding:0.3125rem 0.75rem;border-radius:1.25rem;font-size:0.9375rem;flex:1;min-width:0}
.opt .inp.num{width:4.375rem;flex:none}
.snav{display:flex;justify-content:center;gap:0.625rem;margin-top:1.5rem}
.snav .btn{border-radius:1.25rem;padding:0.5625rem 1.5rem;min-width:5rem}
@media (max-width:520px){.survey{padding:1.375rem 1rem}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}