@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root{
  --ground:#F5F7FA;
  --surface:#FFFFFF;
  --ink:#1B2A40;
  --ink-soft:#55657D;
  --line:#DCE3ED;
  --accent:#1F5EDB;
  --accent-ink:#FFFFFF;
  --copper:#4A6FA5;
  --green:#1A7F5A;
  --green-bg:#EAF6F1;
  --mono:"SF Mono","Cascadia Code",Consolas,Menlo,monospace;
  --sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;}
[data-lang="ko"] .en{display:none}
[data-lang="en"] .ko{display:none}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{max-width:100%}

/* ── NAV ── */
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:10;}
.nav{display:flex;align-items:center;gap:20px;height:60px}
.brand{font-family:var(--sans);font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:9px;flex:none}
.brand b{color:var(--accent)}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{color:var(--ink-soft);text-decoration:none;font-size:14px;padding:6px 14px;border-radius:6px}
.nav-links a:hover{background:var(--ground);color:var(--ink)}
.nav-links a.active{background:var(--ground);color:var(--ink);font-weight:600}
.lang-btn{font-family:var(--mono);font-size:12px;letter-spacing:.06em;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:5px 13px;cursor:pointer;border-radius:999px;flex:none}
.lang-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ── BUTTONS ── */
.btn{display:inline-block;text-decoration:none;font-size:15px;font-weight:600;padding:11px 26px;border-radius:8px;cursor:pointer;border:none}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:var(--surface)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{filter:brightness(1.08)}
.btn-white{background:#fff;color:var(--ink);font-weight:600;padding:11px 24px;border-radius:8px;text-decoration:none;display:inline-block;font-size:15px}
.btn-white:hover{filter:brightness(.97)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ── SHARED HEADINGS ── */
.eyebrow{font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.eyebrow.copper{color:var(--copper)}
.eyebrow.blue{color:var(--accent)}
.eyebrow.green{color:var(--green)}
.lede{color:var(--ink-soft);font-size:15px}
.section{padding:72px 0;border-top:1px solid var(--line)}
h2.sec-title{font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.01em;text-wrap:balance;margin-bottom:12px}

/* ── PAGE HERO ── */
.page-hero{padding:64px 0 56px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.page-hero h1{font-size:clamp(28px,4.2vw,44px);font-weight:700;letter-spacing:-.015em;text-wrap:balance;line-height:1.22;margin-bottom:18px}
.page-hero .sub{color:var(--ink-soft);max-width:36em;margin-bottom:30px;font-size:15.5px}

/* ── HOME: PROGRAM CARDS ── */
.prog-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.prog-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:30px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:14px;transition:border-color .2s,box-shadow .2s;position:relative}
.prog-card:hover{border-color:var(--accent);box-shadow:0 6px 28px rgba(31,94,219,.1)}
.prog-card.green:hover{border-color:var(--green);box-shadow:0 6px 28px rgba(26,127,90,.1)}
.prog-card .badge{font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:6px;width:fit-content}
.badge-blue{background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent)}
.badge-green{background:var(--green-bg);color:var(--green)}
.prog-card h2{font-size:20px;font-weight:700;letter-spacing:-.01em}
.prog-card p{font-size:14px;color:var(--ink-soft);line-height:1.6}
.prog-card .arrow{font-size:20px;margin-top:auto;font-family:var(--mono)}
.prog-card .arrow.blue{color:var(--accent)}
.prog-card .arrow.green{color:var(--green)}
.prog-card .thumb{border-radius:10px;padding:14px;margin-bottom:4px}
.prog-card .thumb.blue{background:#EEF4FF}
.prog-card .thumb.green{background:var(--green-bg)}
.prog-card .thumb svg{width:100%;height:auto;display:block}

/* ── HOME: ABOUT CARDS ── */
.about-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.about-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px}
.about-card .ico{font-size:24px;margin-bottom:12px}
.about-card h3{font-size:16px;font-weight:600;margin-bottom:7px}
.about-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.55}

/* ── PROGRAM PAGE HERO ── */
.art-box{border-radius:16px;padding:20px;display:flex;align-items:center;justify-content:center}
.art-box.blue{background:#EEF4FF;border:1px solid var(--line)}
.art-box.green{background:var(--green-bg);border:1px solid color-mix(in srgb,var(--green) 20%,var(--line))}
.art-box svg{width:100%;height:auto;display:block}

/* ── STATS ── */
.stats-row{display:grid;gap:16px}
.stats-3{grid-template-columns:repeat(3,1fr)}
.stats-4{grid-template-columns:repeat(4,1fr)}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.stat-card .num{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.1}
.stat-card .num .unit{font-size:16px;font-weight:400}
.num-blue{color:var(--accent)}
.num-green{color:var(--green)}
.stat-card .lbl{font-size:13px;color:var(--ink-soft);margin-top:5px;line-height:1.45}

/* ── FEATURES ── */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px}
.feat-ico{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.ico-blue{background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.ico-green{background:var(--green-bg)}
.feat-ico svg{width:22px;height:22px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svg-blue{stroke:var(--accent)}
.svg-green{stroke:var(--green)}
.feat h3{font-size:15.5px;font-weight:600;margin-bottom:8px}
.feat p{font-size:13.5px;color:var(--ink-soft);line-height:1.55}

/* ── CTA BAND ── */
.cta-band{border-radius:14px;padding:32px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cta-blue{background:var(--accent);color:var(--accent-ink)}
.cta-green{background:var(--green);color:#fff}
.cta-band h3{font-size:18px;font-weight:700;margin-bottom:5px}
.cta-band p{font-size:14px;opacity:.92;max-width:34em}

/* ── PHOTO HERO ── */
.hero-photo{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-photo::before{content:"";position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;z-index:0}
.hero-photo::after{content:"";position:absolute;inset:0;z-index:1}
.hero-plant::before{background-image:url('img/plant-hero.jpg')}
.hero-plant::after{background:linear-gradient(105deg,rgba(11,19,34,.93) 0%,rgba(11,19,34,.78) 42%,rgba(11,19,34,.45) 100%)}
.hero-care::before{background-image:url('img/care-hero.jpg');background-position:center 32%}
.hero-care::after{background:linear-gradient(105deg,rgba(7,38,27,.94) 0%,rgba(7,38,27,.80) 42%,rgba(7,38,27,.46) 100%)}
.hero-tech::before{background-image:url('img/tech-hero.jpg')}
.hero-tech::after{background:linear-gradient(105deg,rgba(11,19,34,.95) 0%,rgba(13,26,50,.84) 45%,rgba(13,26,50,.58) 100%)}
.hero-tech .eyebrow{color:#9DC0FF}
.hero-photo .wrap{position:relative;z-index:2}
.hero-plant .eyebrow{color:#9DC0FF}
.hero-care .eyebrow{color:#9EE7C8}
.hero-photo h1{color:#fff}
.hero-photo .sub{color:#D6DEEC}
.hero-photo .diff-line{color:#C3D0E6;border-left-color:#5B8DEF}
.hero-photo .diff-line b{color:#fff}
.hero-photo .btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);color:#fff}
.hero-photo .btn-ghost:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff}
.photo-credit{position:absolute;right:10px;bottom:8px;z-index:2;font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.5)}

/* ── PHOTO CTA BAND ── */
.cta-band.cta-photo{position:relative;overflow:hidden;color:#fff}
.cta-band.cta-photo::before{content:"";position:absolute;inset:0;background:url('img/pipelines.jpg') center/cover no-repeat;z-index:0}
.cta-band.cta-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,52,120,.94) 0%,rgba(31,94,219,.80) 100%);z-index:0}
.cta-band.cta-photo > *{position:relative;z-index:1}

/* ── PROGRAM CARD PHOTO THUMB ── */
.prog-card .thumb.photo{padding:0;overflow:hidden;height:160px;position:relative}
.prog-card .thumb.photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ── DIFFERENTIATION LINE ── */
.diff-line{margin-top:22px;font-size:14px;color:var(--ink-soft);border-left:3px solid var(--accent);padding-left:14px;line-height:1.6;max-width:34em}
.diff-line b{color:var(--ink)}

/* ── BEFORE / AFTER ── */
.ba-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:stretch}
.ba-col{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column}
.ba-col.after{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.ba-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.ba-col.before .ba-label{color:var(--ink-soft)}
.ba-col.after .ba-label{color:var(--accent)}
.ba-dot{width:8px;height:8px;border-radius:50%;flex:none}
.ba-col.before .ba-dot{background:var(--ink-soft)}
.ba-col.after .ba-dot{background:var(--accent)}
.ba-art{background:#F4F6FA;border-radius:8px;padding:12px;flex:1;display:flex;align-items:center}
.ba-col.after .ba-art{background:#EEF4FF}
.ba-art svg{width:100%;height:auto;display:block}
.ba-note{font-size:13px;color:var(--ink-soft);margin-top:12px;line-height:1.5}
.ba-arrow{display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--accent);font-family:var(--mono);font-weight:700}

/* ── INDUSTRY CHIPS ── */
.chip-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.chip-row span{font-size:13px;font-weight:500;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);padding:6px 15px;border-radius:999px}
.hero-photo .chip-row span{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.10);color:#E6EDF7}

/* ── PARTNER / ENGINEERING BAND ── */
.partner-band{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:24px}
.partner-band .p-txt{max-width:40em}
.partner-band .p-txt h3{font-size:17px;font-weight:700;margin-bottom:7px}
.partner-band .p-txt p{font-size:14px;color:var(--ink-soft);line-height:1.6}
.partner-band .p-logo{font-weight:800;font-size:20px;letter-spacing:-.01em;color:var(--accent);margin-bottom:6px}
@media(max-width:820px){.partner-band{padding:24px 22px}}

/* ── FAQ ── */
.faq{max-width:48em}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-size:16px;font-weight:600;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--accent);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--ink-soft);font-size:14.5px;padding:0 0 18px;max-width:44em}

/* ── PROCESS ── */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:step}
.step{counter-increment:step}
.step::before{content:"0" counter(step);font-family:var(--mono);font-size:12.5px;color:var(--copper);letter-spacing:.08em;display:block;border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:11px}
.step h3{font-size:15px;font-weight:600;margin-bottom:6px}
.step p{font-size:13px;color:var(--ink-soft)}

/* ── CONTACT ── */
.contact-box{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:40px;display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center}
.contact-box h2{font-size:clamp(20px,2.8vw,28px);font-weight:700;margin-bottom:12px}
.contact-box .sub{color:var(--ink-soft);font-size:15px;margin-bottom:24px}
.contact-meta{font-family:var(--mono);font-size:13.5px;line-height:2.2}
.contact-meta svg{width:36px;height:36px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:10px}
.contact-meta a{text-decoration:none;color:var(--accent)}
.contact-meta a:hover{text-decoration:underline}
.contact-meta .lbl{color:var(--ink-soft);display:inline-block;width:5em}

/* ── FOOTER ── */
footer{border-top:1px solid var(--line);padding:26px 0;font-size:13px;color:var(--ink-soft)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer .mono{font-family:var(--mono);letter-spacing:.05em;font-weight:600}

/* ── RESPONSIVE ── */
@media(max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .prog-cards{grid-template-columns:1fr}
  .about-cards{grid-template-columns:1fr}
  .stats-3,.stats-4{grid-template-columns:1fr 1fr}
  .feat-grid{grid-template-columns:1fr}
  .cta-band{padding:24px 22px}
  .steps{grid-template-columns:1fr 1fr}
  .ba-grid{grid-template-columns:1fr}
  .ba-arrow{transform:rotate(90deg);padding:4px 0}
  .contact-box{grid-template-columns:1fr;padding:28px 22px}
  .nav-links{gap:0}
  .nav-links a{padding:6px 9px;font-size:13px}
  .section{padding:52px 0}
  .page-hero{padding:44px 0 40px}
}
@media(max-width:520px){
  .stats-3,.stats-4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}