/* ===== Tokens ===== */
:root {
  --brand: #d9734e;          /* soft terracotta (warmed logo orange) */
  --brand-dark: #b85a3a;
  --brand-soft: #fbe8dc;
  --ink: #3b2f29;
  --ink-2: #6b5a50;
  --ink-3: #9b8a7e;
  --line: #ede3d9;
  --bg: #fffcf8;
  --bg-alt: #f8f0e7;
  --dark: #4b3b33;
  --dark-2: #5b4940;
  --radius: 22px;
  --shadow: 0 10px 30px rgba(120, 80, 50, .10);
  --surface: #fffefb;
  --on-dark: #fbf3ea;
  --on-dark-2: #e3d0c2;
  --accent-light: #f5b892;
  --serif: "Gowun Batang", "Nanum Myeongjo", serif;
  --container: 1180px;
  --header-h: 72px;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  font-family: "Pretendard", -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.3; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 12px;
}
.accent { color: var(--brand); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 26px; border-radius: 999px;
  font-weight: 700; font-size: 15px; transition: .2s;
  border: 1.5px solid transparent;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-ghost-light { border-color: rgba(255,255,255,.5); color: #fff; }
.btn-ghost-light:hover { background: var(--surface); color: var(--ink); }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,252,248,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.site-header.scrolled { border-color: var(--line); }
.header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 18px; }
.brand-text small { font-size: 10.5px; letter-spacing: .12em; color: var(--ink-3); font-weight: 600; }
.nav { display: flex; align-items: center; gap: 30px; font-size: 15px; font-weight: 600; }
.nav a { color: var(--ink-2); transition: color .15s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--brand); }
.nav .nav-cta { background: var(--ink); color: #fff; padding: 9px 18px; border-radius: 999px; }
.nav .nav-cta:hover { background: var(--brand); color: #fff; }
.nav-toggle { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; padding: 10px; }
.nav-toggle span { display: block; height: 2px; background: var(--ink); margin: 5px 0; transition: .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Hero ===== */
.hero { padding: 72px 0 88px; background: radial-gradient(1000px 500px at 85% 0%, var(--brand-soft), transparent 70%); }
.hero-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(32px, 4.6vw, 54px); font-weight: 800; letter-spacing: -0.035em; }
.hero .lead { margin-top: 22px; font-size: 18px; color: var(--ink-2); max-width: 540px; }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.hero-visual { position: relative; }
.hero-img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow); }
.hero-badge {
  position: absolute; left: -28px; bottom: 32px;
  background: var(--surface); border-radius: 16px; padding: 18px 22px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 14px;
}
.hero-badge strong { font-size: 30px; color: var(--brand); font-weight: 800; }
.hero-badge span { font-size: 13px; color: var(--ink-2); line-height: 1.4; font-weight: 600; }

/* ===== Stats ===== */
.stats { background: var(--dark); color: #fff; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 38px 24px; text-align: center; border-left: 1px solid rgba(255,255,255,.08); }
.stat:first-child { border-left: 0; }
.stat strong { display: block; font-size: 40px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat strong em { font-style: normal; font-size: 18px; font-weight: 600; margin-left: 3px; color: var(--accent-light); }
.stat > span { font-size: 14px; color: var(--on-dark-2); }

/* ===== Sections ===== */
.section { padding: 110px 0; }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--dark); color: #fff; }
.section-dark .section-desc { color: var(--on-dark-2); }
.section-head { margin-bottom: 52px; max-width: 720px; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; }
.section-desc { margin-top: 14px; font-size: 17px; color: var(--ink-2); }

/* About */
.about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; }
.info-list { margin: 32px 0 0; border-top: 1px solid var(--line); }
.info-list div { display: grid; grid-template-columns: 110px 1fr; padding: 14px 0; border-bottom: 1px solid var(--line); }
.info-list dt { color: var(--ink-3); font-weight: 600; font-size: 14px; }
.info-list dd { margin: 0; font-weight: 600; }
.sites { display: grid; gap: 20px; }
.site-card { background: var(--bg-alt); border-radius: var(--radius); padding: 28px; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 4px 10px; border-radius: 999px; }
.site-card h3 { font-size: 22px; margin-top: 12px; }
.site-card .addr { color: var(--ink-2); font-size: 15px; margin-top: 4px; }
.site-card ul { margin-top: 18px; display: grid; gap: 8px; font-size: 15px; }
.site-card li span { display: inline-block; width: 92px; color: var(--ink-3); font-weight: 600; }

/* History */
.history-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding-bottom: 22px; }
.timeline li::before {
  content: ""; position: absolute; left: -28px; top: 7px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--brand);
}
.timeline li:first-child::before { background: var(--brand); }
.timeline .year { font-weight: 800; font-size: 18px; color: var(--ink); }
.timeline p { color: var(--ink-2); font-size: 15px; margin-top: 2px; }

/* Business */
.biz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.biz-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.biz-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.biz-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: var(--bg-alt); padding: 16px; }
.biz-card > div { padding: 22px 24px 26px; }
.biz-card h3 { font-size: 19px; }
.biz-card p { font-size: 14.5px; color: var(--ink-2); margin-top: 6px; }

/* Products */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.product { background: var(--surface); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.product > img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface); padding: 20px; border-bottom: 1px solid var(--line); }
.product > div { padding: 24px; }
.product h3 { font-size: 20px; }
.product p { color: var(--ink-2); font-size: 15px; margin-top: 8px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; font-size: 14px; font-weight: 600; }
.meta span { color: var(--ink-3); margin-right: 6px; font-weight: 500; }
.product-wide { grid-column: 1 / -1; flex-direction: row; }
.product-wide > img { width: 44%; aspect-ratio: auto; object-fit: cover; border-bottom: 0; padding: 0; }
.product-wide > img[src$=".png"] { object-fit: contain; padding: 24px; background: var(--bg-alt); }
.product-wide > div { flex: 1; padding: 36px; }
.chips-label { font-weight: 700; color: var(--ink) !important; margin-top: 22px !important; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chips li { font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-dark); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.split > div { background: var(--bg-alt); border-radius: 10px; padding: 16px; }
.split p { margin-top: 2px !important; font-size: 14px !important; }

/* EPP features */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.08); border-radius: var(--radius); overflow: hidden; }
.feature-grid li { background: var(--dark-2); padding: 34px 30px; }
.ico { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(245,184,146,.18); }
.ico svg { width: 26px; height: 26px; fill: none; stroke: var(--accent-light); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature-grid h3 { font-size: 20px; margin-top: 18px; }
.feature-grid p { color: var(--on-dark-2); font-size: 15px; margin-top: 6px; }

/* Technology */
.tech-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.tech-visual { display: grid; gap: 16px; }
.tech-visual img { width: 100%; border-radius: var(--radius); background: var(--bg-alt); padding: 20px; aspect-ratio: 16 / 9; object-fit: contain; }
.tech-list { counter-reset: t; display: grid; gap: 4px; }
.tech-list li { counter-increment: t; display: grid; grid-template-columns: 48px 1fr; padding: 18px 0; border-bottom: 1px solid var(--line); }
.tech-list li::before { content: counter(t, decimal-leading-zero); font-weight: 800; color: var(--brand); font-size: 15px; padding-top: 2px; grid-row: span 2; }
.tech-list h3 { font-size: 18px; display: flex; align-items: center; gap: 8px; }
.tech-list p { color: var(--ink-2); font-size: 15px; margin-top: 4px; }
.pill { font-size: 11px; font-weight: 700; color: #fff; background: var(--brand); padding: 2px 8px; border-radius: 999px; }
.cert-row { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; margin-top: 64px; }
.cert-list, .ip { background: var(--bg-alt); border-radius: var(--radius); padding: 32px; }
.cert-list h3, .ip h3 { font-size: 20px; margin-bottom: 18px; }
.cert-list ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cert-list li { background: var(--surface); border-radius: 10px; padding: 14px 16px; font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.cert-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
.ip-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ip-nums div { background: var(--surface); border-radius: 10px; padding: 16px; text-align: center; }
.ip-nums strong { display: block; font-size: 32px; font-weight: 800; color: var(--brand); line-height: 1.1; }
.ip-nums span { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.ip-list { margin-top: 18px; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-2); }
.ip-list li { padding-left: 16px; position: relative; }
.ip-list li::before { content: "–"; position: absolute; left: 0; color: var(--ink-3); }

/* Facility */
.process { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin-bottom: 48px; }
.process li { background: var(--surface); border-radius: 12px; padding: 18px 14px; position: relative; }
.process li:not(:last-child)::after {
  content: ""; position: absolute; right: -9px; top: 50%; width: 8px; height: 8px;
  border-top: 2px solid var(--brand); border-right: 2px solid var(--brand); transform: translateY(-50%) rotate(45deg); z-index: 1;
}
.process span { font-size: 12px; font-weight: 800; color: var(--brand); }
.process strong { display: block; font-size: 15px; margin-top: 4px; }
.process p { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.45; }
.facility-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.facility-grid figure { margin: 0; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.facility-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.facility-grid img.contain { object-fit: contain; padding: 16px; background: var(--surface); }
.facility-grid figcaption { padding: 18px 20px 22px; font-size: 14px; color: var(--ink-2); }
.facility-grid figcaption strong { display: block; font-size: 16px; color: var(--ink); margin-bottom: 2px; }

/* Contact */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.contact-layout h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.contact-list { margin: 0; background: var(--dark-2); border-radius: var(--radius); padding: 10px 30px; }
.contact-list div { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.contact-list div:last-child { border-bottom: 0; }
.contact-list dt { font-size: 13px; color: var(--on-dark-2); font-weight: 600; }
.contact-list dd { margin: 4px 0 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.contact-list dd a { font-size: 12px; font-weight: 700; color: var(--accent-light); border: 1px solid rgba(245,184,146,.55); border-radius: 999px; padding: 2px 9px; margin-left: 6px; white-space: nowrap; }

/* Footer */
.site-footer { background: var(--bg-alt); color: var(--ink-2); border-top: 1px solid var(--line); padding: 40px 0; font-size: 13.5px; }
.footer-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; }
.site-footer .brand-text strong { color: var(--ink); font-size: 16px; }
.site-footer .copy { white-space: nowrap; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== Responsive ===== */
@media (max-width: 1080px) {
  .process { grid-template-columns: repeat(4, 1fr); }
  .process li:nth-child(4)::after { display: none; }
  .facility-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px 24px 20px;
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: .2s;
  }
  .nav.open { transform: none; opacity: 1; visibility: visible; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav .nav-cta { margin-top: 14px; text-align: center; border-bottom: 0; }
  .hero { padding: 40px 0 64px; }
  .hero-inner, .about-grid, .history-layout, .tech-layout, .cert-row, .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .hero-badge { left: 16px; bottom: 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat { border-top: 1px solid rgba(255,255,255,.08); }
  .biz-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .product-wide { flex-direction: column; }
  .product-wide > img { width: 100%; aspect-ratio: 16 / 9; }
  .footer-inner { grid-template-columns: 1fr; gap: 16px; }
  .section { padding: 80px 0; }
}
@media (max-width: 560px) {
  .container { padding: 0 16px; }
  .hero .lead { font-size: 16px; }
  .stat { padding: 28px 12px; }
  .stat strong { font-size: 30px; }
  .biz-grid, .feature-grid, .cert-list ul, .split { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .process { grid-template-columns: repeat(2, 1fr); }
  .process li::after { display: none; }
  .facility-grid { grid-template-columns: 1fr; }
  .info-list div { grid-template-columns: 90px 1fr; }
  .product-wide > div, .cert-list, .ip { padding: 24px; }
  .section { padding: 64px 0; }
  .site-footer .copy { white-space: normal; }
}

/* ===== Multi-page additions ===== */
.nav .nav-cta[aria-current="page"] { background: var(--brand); color: #fff; }
.h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; }
.h2 small { display: block; font-size: 16px; font-weight: 600; color: var(--ink-3); margin-top: 6px; letter-spacing: 0; }
.h3 { font-size: 22px; margin: 64px 0 20px; }
.section-desc a, .note a, .info-list a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.note { margin-top: 18px; font-size: 14px; color: var(--ink-3); }

/* Sub-page banner + sticky in-page menu */
.page-hero { padding: 72px 0 56px; background: radial-gradient(900px 400px at 90% 0%, var(--brand-soft), transparent 70%); }
.page-hero h1 { font-size: clamp(34px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.035em; }
.page-hero .lead { margin-top: 14px; font-size: 18px; color: var(--ink-2); max-width: 640px; }
.subnav { position: sticky; top: var(--header-h); z-index: 40; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.subnav .container { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.subnav a { flex: none; padding: 16px 14px; font-weight: 600; font-size: 15px; color: var(--ink-2); border-bottom: 2px solid transparent; }
.subnav a:hover, .subnav a.active { color: var(--brand); border-color: var(--brand); }
html:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 56px); }

/* Home */
.biz-grid-4 { grid-template-columns: repeat(4, 1fr); }
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cap-card { background: var(--surface); border-radius: var(--radius); padding: 0 0 26px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.cap-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.cap-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; padding: 18px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.cap-card h3, .cap-card p { padding: 0 26px; }
.cap-card h3 { font-size: 20px; }
.cap-card p { color: var(--ink-2); font-size: 15px; margin-top: 6px; }
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel { background: var(--bg-alt); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; }
.panel h3 { font-size: 20px; margin-bottom: 18px; }
.more { margin-top: auto; padding-top: 22px; font-weight: 700; color: var(--brand); }
.partner-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.panel .partner-list { margin-top: 0; }
.partner-list li, .cert-chips li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; font-weight: 700; font-size: 15px; }
.cert-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.eco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.eco-card { background: var(--dark-2); border-radius: var(--radius); overflow: hidden; display: block; transition: transform .2s; }
a.eco-card:hover { transform: translateY(-4px); }
.eco-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--surface); }
.eco-card img[src$=".png"] { object-fit: contain; padding: 16px; }
.eco-card > div { padding: 22px 24px 26px; }
.eco-card h3 { font-size: 19px; }
.eco-card p { color: var(--on-dark-2); font-size: 15px; margin-top: 6px; }
.eco-grid-light .eco-card { background: var(--bg-alt); }
.eco-grid-light .eco-card p { color: var(--ink-2); }
.map { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radius); background: var(--bg-alt); display: block; }
.contact-list-light { background: var(--bg-alt); margin-top: 32px; }
.contact-list-light div { border-color: var(--line); }
.contact-list-light dt { color: var(--ink-3); }
.contact-list a.plain { color: inherit; border: 0; padding: 0; margin: 0; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* About */
.greeting { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; }
.greeting-body p { color: var(--ink-2); font-size: 17px; margin-bottom: 16px; }
.greeting-body .sign { color: var(--ink); margin-top: 28px; }
.greeting-body .sign strong { font-size: 20px; margin-left: 6px; }
.vision { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
.vision li, .quality-grid > * { background: var(--bg-alt); border-radius: var(--radius); padding: 28px; }
.vision span, .quality-grid span, .steps span { font-size: 13px; font-weight: 800; color: var(--brand); }
.vision h3, .quality-grid h3 { font-size: 20px; margin-top: 8px; }
.vision p, .quality-grid p { color: var(--ink-2); font-size: 15px; margin-top: 6px; }
.timeline-wide { max-width: 760px; }
.map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.map-grid figure { margin: 0; }
.map-grid figcaption { margin-top: 14px; font-size: 15px; color: var(--ink-2); }
.map-grid figcaption strong { display: block; color: var(--ink); font-size: 17px; }
.map-grid figcaption a { color: var(--brand); font-weight: 700; margin-left: 6px; }

/* Products */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.steps li { background: var(--bg-alt); border-radius: 12px; padding: 20px; }
.steps strong { display: block; font-size: 17px; margin-top: 4px; }
.steps p { font-size: 14px; color: var(--ink-3); margin-top: 4px; }
.cta-band { margin-top: 40px; background: var(--dark); color: #fff; border-radius: var(--radius); padding: 32px 36px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cta-band p { font-size: 18px; font-weight: 600; }

/* EPP */
.app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.app-grid a { background: var(--bg-alt); border-radius: var(--radius); padding: 18px 18px 22px; transition: transform .2s; }
.app-grid a:hover { transform: translateY(-4px); }
.app-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface); border-radius: 10px; padding: 10px; margin-bottom: 14px; }
.app-grid h3 { font-size: 18px; }
.app-grid p { font-size: 14px; color: var(--ink-2); margin-top: 2px; }

/* Technology */
.quality-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.quality-grid-3 { grid-template-columns: repeat(3, 1fr); }
.section-alt .quality-grid > * { background: var(--surface); }
.quality-grid a { color: var(--brand); overflow-wrap: anywhere; }

/* Certification */
.cert-row { margin-top: 0; }
.table-wrap { overflow-x: auto; background: var(--surface); border-radius: var(--radius); }
.records { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.records th { text-align: left; font-size: 13px; color: var(--ink-3); font-weight: 700; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.records td { padding: 16px 22px; border-bottom: 1px solid var(--line); }
.records tr:last-child td { border-bottom: 0; }
.records td:first-child { font-weight: 700; }
.records td:last-child { font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* Contact form */
.quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; background: var(--bg-alt); border-radius: var(--radius); padding: 36px; }
.quote-form label { display: block; font-weight: 700; font-size: 14px; }
.quote-form .full { grid-column: 1 / -1; }
.quote-form input, .quote-form select, .quote-form textarea {
  display: block; width: 100%; margin-top: 8px; font: inherit; font-weight: 500; font-size: 16px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink);
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.req { color: var(--brand); }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.form-foot p { font-size: 14px; color: var(--ink-3); }
.form-foot .btn { border: 0; cursor: pointer; font-family: inherit; }

@media (max-width: 1080px) {
  .biz-grid-4, .app-grid, .quality-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .cap-grid, .eco-grid, .split-2, .greeting, .vision, .map-grid, .quality-grid-3 { grid-template-columns: 1fr; gap: 20px; }
  .greeting { gap: 24px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .page-hero { padding: 48px 0 40px; }
}
@media (max-width: 560px) {
  .biz-grid-4, .quality-grid, .steps { grid-template-columns: 1fr; }
  .app-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .quote-form { grid-template-columns: 1fr; padding: 22px; }
  .panel, .cta-band { padding: 24px; }
}

/* Buoy spec tables */
.chips a { color: inherit; }
.buoy-type { display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: start; margin-top: 40px; background: var(--surface); border-radius: var(--radius); padding: 28px; }
.buoy-type img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #4d6a7d; border-radius: 12px; padding: 12px; }
.buoy-type > div { min-width: 0; } /* let the wide table scroll instead of stretching the page */
.buoy-type h3 { font-size: 22px; }
.buoy-type h3 small { font-size: 14px; font-weight: 700; color: var(--brand); margin-left: 8px; }
.buoy-type > div > p { color: var(--ink-2); font-size: 15px; margin: 6px 0 18px; }
.buoy-type .table-wrap { border: 1px solid var(--line); }
.buoy-table { min-width: 620px; }
.buoy-table td:first-child { color: var(--brand); white-space: nowrap; }
.buoy-table td { white-space: nowrap; }
.buoy-table td:last-child { color: var(--ink-2); font-variant-numeric: normal; }
@media (max-width: 900px) {
  .buoy-type { grid-template-columns: 1fr; padding: 20px; gap: 18px; }
  .buoy-type img { max-width: 180px; }
}

/* ===== Warm theme (v2) — overrides; previous look kept in style-v1.css ===== */
h1, h2, .h2, .page-hero h1, .hero h1, .stat strong, .ip-nums strong, .fact-row strong, .greeting-body .sign strong {
  font-family: var(--serif); font-weight: 700; letter-spacing: -0.01em;
}
.eyebrow {
  display: inline-block; text-transform: none; letter-spacing: .02em; font-size: 13px;
  background: var(--brand-soft); color: var(--brand-dark); padding: 6px 14px; border-radius: 999px;
}
.section-dark .eyebrow { background: rgba(245,184,146,.18); color: var(--accent-light); }
.section-head { text-align: center; margin-left: auto; margin-right: auto; }
.section-head .section-desc { margin-left: auto; margin-right: auto; max-width: 640px; }
.btn-ghost { border-color: var(--line); background: var(--surface); }
.nav .nav-cta { background: var(--brand); }
.nav .nav-cta:hover { background: var(--brand-dark); }

/* Organic hero shapes */
.hero, .page-hero { background:
  radial-gradient(700px 380px at 92% 10%, #fbe1cf, transparent 70%),
  radial-gradient(600px 320px at 0% 100%, #f3ead9, transparent 70%), var(--bg); }
.hero-img { border-radius: 220px 32px 32px 32px; box-shadow: 0 24px 50px rgba(120, 80, 50, .18); }
.hero-badge { border-radius: 999px; padding: 14px 26px; }

/* Soft surfaces instead of borders */
.stats { background: var(--bg-alt); color: var(--ink); }
.stat { border-color: var(--line) !important; }
.stat > span { color: var(--ink-2); }
.stat strong em { color: var(--brand); }
.biz-card, .site-card, .product, .cap-card, .panel, .process li, .facility-grid figure, .cert-list, .ip, .buoy-type, .steps li, .vision li, .quality-grid > * {
  border: 0; box-shadow: var(--shadow);
}
.site-card, .panel, .cert-list, .ip, .vision li { background: var(--surface); }
.biz-card img, .tech-visual img { background: var(--bg-alt); }
.feature-grid { gap: 16px; background: none; }
.feature-grid li { border-radius: var(--radius); }
.section-dark h3, .section-dark h2 { color: var(--on-dark); }
/* Light card so address & email stay readable on any section */
.contact-list, .contact-list-light { background: var(--surface); color: var(--ink); }
.contact-list div { border-color: var(--line); }
.contact-list dt { color: var(--ink-3); }
.contact-list dd a { color: var(--brand-dark); border-color: var(--brand-soft); }
.tag { background: var(--brand-soft); color: var(--brand-dark); }
.partner-list li, .cert-chips li { border-radius: 999px; padding: 10px 18px; }
.subnav { background: rgba(255,252,248,.95); backdrop-filter: blur(8px); }
.subnav a.active, .subnav a:hover { border-color: var(--brand); }
.records th { background: var(--bg-alt); }
.compare { margin-top: 40px; color: var(--ink); }
.compare .records td:nth-child(2) { color: var(--brand-dark); font-weight: 700; }

/* EPP page: facts, molding flow, applications */
.fact-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.fact-row li { background: var(--bg-alt); border-radius: var(--radius); padding: 26px 22px; text-align: center; }
.fact-row strong { display: block; font-size: 32px; color: var(--brand-dark); line-height: 1.2; }
.fact-row strong em { font-style: normal; font-size: 16px; margin-left: 2px; color: var(--ink-2); }
.fact-row span { font-size: 14px; color: var(--ink-2); font-weight: 600; }
.ratio { margin-top: 32px; }
.ratio .panel p { color: var(--ink-2); font-size: 15px; }
.ratio .panel h3 { margin: 12px 0 8px; }
.mold-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: none; }
.mold-flow li { position: relative; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.mold-flow li:not(:nth-child(4n))::after {
  content: ""; position: absolute; right: -12px; top: 36px; width: 8px; height: 8px; z-index: 1;
  border-top: 2px solid var(--brand); border-right: 2px solid var(--brand); transform: rotate(45deg);
}
.mold-flow .no { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font-weight: 800; font-size: 13px; }
.mold-flow h3 { font-size: 17px; }
.mold-flow p { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.55; }
.mold-flow dl { margin: 10px 0 0; display: grid; gap: 4px; font-size: 12.5px; }
.mold-flow dl div { display: grid; grid-template-columns: 34px 1fr; gap: 6px; }
.mold-flow dt { color: var(--brand); font-weight: 700; }
.mold-flow dd { margin: 0; color: var(--ink); }
.made { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--brand-dark); background: var(--brand-soft); border-radius: 999px; padding: 3px 10px; text-decoration: none !important; }
.app-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.app-list article { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: start; }
.app-list img, .app-ph { width: 84px; height: 84px; border-radius: 16px; background: var(--bg-alt); object-fit: contain; padding: 8px; }
.app-ph { display: grid; place-items: center; font-family: var(--serif); font-weight: 700; color: var(--brand); font-size: 18px; }
.app-list h3 { font-size: 18px; }
.app-list p { font-size: 14px; color: var(--ink-2); margin: 4px 0 10px; }

@media (max-width: 1080px) {
  .mold-flow, .fact-row { grid-template-columns: repeat(2, 1fr); }
  .mold-flow li::after { display: none; }
  .app-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mold-flow, .app-list { grid-template-columns: 1fr; }
  .fact-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .fact-row strong { font-size: 24px; }
  .hero-img { border-radius: 120px 24px 24px 24px; }
}

/* Photo slot until the real file is added (images/dabo-molding.jpg, images/drying-room.jpg) */
.facility-grid figure.ph img { display: none; }
.facility-grid figure.ph::before { content: "사진 준비 중"; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--bg-alt); color: var(--ink-3); font-weight: 700; font-size: 14px; }
.buoy-type img[src$="-pp.png"] { object-fit: cover; padding: 0; background: var(--bg-alt); }
@media (max-width: 560px) { .ip-nums { grid-template-columns: repeat(2, 1fr); } }

/* ===== Motion v3: floating hero, stacking cards, marquee, masked titles ===== */
:root { --ease-out: cubic-bezier(.22,1,.36,1); --ease-state: cubic-bezier(.4,0,.2,1); }
html, body { overflow-x: clip; }
::selection { background: rgba(217,115,78,.28); }
body::after { /* film grain unifies photos and flat colour */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Header gains a soft shadow after scroll */
.site-header { transition: background .3s var(--ease-state), box-shadow .3s var(--ease-state); }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(120,80,50,.08); }

/* Masked line rise (titles) */
.mask-lines .ml { display: block; overflow: hidden; padding: .06em .15em .14em; margin: -.06em -.15em -.14em; }
.mask-lines .ml > span { display: block; animation: ml-up .9s var(--ease-out) both; animation-delay: calc(.15s + var(--i) * .14s); }
@keyframes ml-up { from { transform: translateY(110%); } }
.fx { animation: fx-up .8s var(--ease-out) both; animation-delay: calc(.55s + var(--i) * .1s); }
@keyframes fx-up { from { opacity: 0; transform: translateY(22px); filter: blur(8px); } }
.page-hero .lead { animation: fx-up .8s var(--ease-out) .45s both; }
.page-hero .eyebrow { animation: fx-up .7s var(--ease-out) .05s both; }

/* Pill buttons with arrow chip */
.btn { transition: background .25s var(--ease-state), color .25s var(--ease-state), transform .2s var(--ease-state), box-shadow .25s var(--ease-state); }
.btn:active { transform: scale(.97); }
.btn-primary { box-shadow: 0 1px 2px rgba(120,60,30,.12), 0 6px 16px rgba(217,115,78,.28); }
.btn-arrow { gap: 12px; padding-right: 8px; }
.btn-arrow .chip { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.22); transition: transform .35s var(--ease-out); }
.btn-arrow .chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-arrow:hover .chip { transform: rotate(-45deg); }

/* --- Home hero: products float around the headline --- */
.hero-x { position: relative; min-height: min(calc(100dvh - var(--header-h)), 860px); display: grid; place-items: center; padding: 72px 0 96px; overflow: hidden;
  background: radial-gradient(900px 460px at 50% 0%, #fbe1cf, transparent 70%), radial-gradient(700px 360px at 50% 100%, #f3ead9, transparent 70%), var(--bg); }
.hero-x-copy { position: relative; z-index: 2; text-align: center; max-width: 880px; }
.hero-x h1 { font-size: clamp(40px, 6.2vw, 84px); line-height: 1.12; letter-spacing: -.02em; margin: 18px 0 0; }
.hero-x .lead { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-2); max-width: 34rem; margin: 26px auto 0; }
.hero-x .hero-actions { justify-content: center; margin-top: 34px; }
.proof { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin-top: 40px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.proof li { display: flex; align-items: center; gap: 8px; }
.proof li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

.float-field { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.float-tile { position: absolute; margin: 0; width: var(--w, 170px); background: var(--surface); border-radius: 28px; padding: 14px 14px 10px;
  box-shadow: 0 2px 6px rgba(120,80,50,.06), 0 18px 40px rgba(120,80,50,.14);
  translate: var(--px, 0px) var(--py, 0px); rotate: var(--r, 0deg);
  animation: tile-in 1s var(--ease-out) both, bob 7s ease-in-out infinite alternate;
  animation-delay: calc(.8s + var(--i) * .12s), calc(var(--i) * -1.3s); }
.float-tile img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 18px; background: var(--bg-alt); }
.float-tile figcaption { margin-top: 8px; text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-2); }
@keyframes tile-in { from { opacity: 0; scale: .82; filter: blur(10px); } }
@keyframes bob { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
.t1 { left: 5%;  top: 9%;  --w: 150px; --r: -6deg; }
.t2 { left: 1%;  top: 45%; --w: 200px; --r: 4deg; }
.t3 { left: 11%; top: 68%; --w: 140px; --r: -3deg; }
.t4 { right: 6%; top: 8%;  --w: 170px; --r: 5deg; }
.t5 { right: 2%; top: 44%; --w: 150px; --r: -5deg; }
.t6 { right: 10%; top: 66%; --w: 180px; --r: 3deg; }
@media (max-width: 1180px) {
  .t1, .t6 { display: none; }
  .t2 { --w: 160px; left: -2%; } .t5 { --w: 130px; right: -1%; } .t3, .t4 { --w: 120px; }
}
@media (max-width: 860px) {
  .hero-x { display: flex; flex-direction: column-reverse; padding: 40px 0 28px; min-height: 0; }
  .float-field { position: relative; inset: auto; display: flex; gap: 12px; overflow-x: auto; padding: 32px 16px 12px; scroll-snap-type: x mandatory; pointer-events: auto; scrollbar-width: none; }
  .float-tile, .t1, .t6 { display: block; position: relative; left: auto; right: auto; top: auto; flex: none; --w: 132px; scroll-snap-align: center; }
}

/* --- Sticky stacking product cards --- */
.stack { position: relative; padding-bottom: 6vh; }
.stack-slot { position: sticky; top: calc(var(--header-h) + 8px); height: 78vh; min-height: 520px; display: flex; justify-content: center; align-items: flex-start; padding-top: 24px; }
.stack-card { position: relative; top: calc(var(--i) * 22px); width: 100%; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center;
  background: var(--surface); border-radius: 40px; padding: clamp(24px, 3.4vw, 48px); transform-origin: top center; will-change: transform;
  box-shadow: 0 1px 2px rgba(120,80,50,.06), 0 24px 60px rgba(120,80,50,.14); }
.stack-card .idx { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; color: var(--brand); }
.stack-card h3 { font-family: var(--serif); font-weight: 700; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.2; margin: 14px 0; letter-spacing: -.01em; }
.stack-card p { color: var(--ink-2); font-size: 16px; max-width: 32rem; }
.stack-card .tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 30px; }
.stack-card .tags li { font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px; background: var(--bg-alt); color: var(--ink-2); }
.stack-media { background: var(--bg-alt); border-radius: 30px; aspect-ratio: 4 / 3.2; display: grid; place-items: center; overflow: hidden; }
.stack-media img { width: 78%; height: 78%; object-fit: contain; transition: transform .7s var(--ease-out); }
.stack-card:hover .stack-media img { transform: scale(1.05); }
@media (max-width: 860px) {
  .stack-slot { position: static; height: auto; min-height: 0; padding-top: 16px; }
  .stack-card { top: 0; grid-template-columns: 1fr; gap: 22px; border-radius: 28px; }
  .stack-media { order: -1; }
}

/* --- Partner marquee --- */
.marquee { overflow: hidden; margin: 8px 0 48px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee var(--dur, 30s) linear infinite; }
.marquee__group { display: flex; align-items: center; flex: none; gap: 16px; padding: 12px 16px 24px 0; }
.logo-pill { flex: none; padding: 16px 30px; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px rgba(120,80,50,.06), 0 8px 22px rgba(120,80,50,.08);
  font-family: var(--serif); font-weight: 700; font-size: 19px; color: var(--ink-2); white-space: nowrap; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Reveal: blur-rise, stagger set from JS via --rd */
.reveal { opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); transition-delay: var(--rd, 0s); }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* Media hover zoom */
.biz-card img, .product > img, .eco-card img, .cap-card img, .facility-grid img { transition: transform .7s var(--ease-out); }
.product:hover > img, .eco-card:hover img, .cap-card:hover img, .facility-grid figure:hover img { transform: scale(1.05); }
.product, .facility-grid figure, .eco-card, .cap-card { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mask-lines .ml > span, .fx, .page-hero .lead, .page-hero .eyebrow, .float-tile, .marquee__track { animation: none !important; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .marquee { overflow-x: auto; }
  .stack-card { transform: none !important; }
}
.panel-lead { color: var(--ink-2); font-size: 16px; }
.float-tile figcaption { font-size: 12.5px; color: var(--ink); }

/* ===== Home hero: 3D eco scene (js/hero3d.js) ===== */
.hero3d { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); max-height: 940px; padding: 64px 0 120px;
  /* Fallback before/without WebGL: same sky as the scene */
  background: linear-gradient(180deg, #f3c9ad 0%, #fdf1e4 58%, #9cc4b9 58.2%, #6fa69d 100%); }
.hero3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.hero3d.is-ready .hero3d__canvas { opacity: 1; }
.hero3d::after { /* soft fade into the page below */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg)); }
.hero3d__copy { position: relative; z-index: 1; }
.hero3d__copy > * { max-width: 600px; }
.hero3d h1 { font-size: clamp(40px, 5.6vw, 80px); line-height: 1.12; letter-spacing: -.02em; margin: 18px 0 0; color: var(--ink); }
.hero3d__brand { margin-top: 18px; font-family: var(--serif); font-weight: 700; font-size: clamp(19px, 1.9vw, 26px); color: var(--ink-2); }
.hero3d .lead { font-size: clamp(16px, 1.3vw, 18px); color: var(--ink-2); max-width: 32rem; margin-top: 18px; text-shadow: 0 1px 12px rgba(253,241,228,.9); }
.hero3d .hero-actions { margin-top: 30px; }
.hero3d .proof { justify-content: flex-start; margin-top: 30px; }
.hero3d .eyebrow { background: rgba(255,252,248,.75); backdrop-filter: blur(6px); }
.hero3d .btn-ghost { background: rgba(255,252,248,.8); backdrop-filter: blur(6px); }
@media (max-width: 860px) {
  .hero3d { align-items: flex-start; padding: 40px 0 46vh; min-height: 0; max-height: none; }
  .hero3d__copy { text-align: center; }
  .hero3d__copy > * { margin-left: auto; margin-right: auto; }
  .hero3d .hero-actions, .hero3d .proof { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .hero3d__canvas { transition: none; } }
.hero3d::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(253,241,228,.88) 0%, rgba(253,241,228,.62) 32%, rgba(253,241,228,0) 58%); }
.hero3d__copy > * { max-width: 760px; }
.hero3d h1 .ml > span { white-space: nowrap; }
@media (max-width: 860px) { .hero3d::before { background: linear-gradient(180deg, rgba(253,241,228,.9) 0%, rgba(253,241,228,.7) 45%, rgba(253,241,228,0) 70%); } .hero3d h1 .ml > span { white-space: normal; } }

/* ===== Home hero v2: nature photo + 3D beads (overrides the sea-scene hero above) ===== */
.hero3d { background: #1f4d4a; color: #fff; }
.hero3d__photo { max-width: none; position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover; object-position: 60% 50%; z-index: -2;
  animation: photo-in 2.2s var(--ease-out) both; } /* CSS-only so the photo never depends on JS */
@keyframes photo-in { from { opacity: 0; scale: 1.08; } }
.hero3d__canvas { z-index: 0; pointer-events: none; }
.hero3d::before { z-index: -1; /* scrim keeps the copy readable over the water */
  background: linear-gradient(90deg, rgba(12,38,36,.72) 0%, rgba(12,38,36,.48) 38%, rgba(12,38,36,0) 66%), linear-gradient(0deg, rgba(12,38,36,.35), transparent 40%); }
.hero3d::after { z-index: 1; }
.hero3d__copy { z-index: 2; }
.hero3d h1 { color: #fff; text-shadow: 0 16px 38px rgba(0,0,0,.28); }
.hero3d h1 .accent { color: #ffd2b8; }
.hero3d .lead { color: rgba(255,255,255,.86); text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.hero3d .proof { color: rgba(255,255,255,.78); }
.hero3d .proof li::before { background: #ffd2b8; }
.hero3d .eyebrow { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(10px); }
.hero3d .btn-ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(10px); }
.hero3d .btn-ghost:hover { background: #fff; color: var(--ink); }
@media (max-width: 860px) {
  .hero3d { padding: 56px 0 120px; min-height: calc(100svh - var(--header-h)); align-items: center; }
  .hero3d::before { background: linear-gradient(180deg, rgba(12,38,36,.6) 0%, rgba(12,38,36,.45) 60%, rgba(12,38,36,.2) 100%); }
  .hero3d__photo { object-position: 70% 50%; }
}
@media (prefers-reduced-motion: reduce) { .hero3d__photo { animation: none; } }
.buoy-type img[src$="cutout.png"] { background: var(--bg-alt); padding: 14px; object-fit: contain; }
/* Buoy slots: two photos for the foam type, full-bleed photo for the covered type */
.buoy-imgs { display: grid; gap: 10px; }
.buoy-imgs figure { margin: 0; }
.buoy-imgs img { aspect-ratio: 4 / 3 !important; }
.buoy-imgs figcaption { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-top: 6px; }
.buoy-type img[src$="-large.jpg"] { object-fit: cover; padding: 0; background: var(--bg-alt); }
@media (max-width: 900px) { .buoy-imgs { grid-template-columns: 1fr 1fr; max-width: 360px; } }

/* ===== 회사소개: photo mosaic ===== */
.photo-mosaic { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: repeat(2, 240px); gap: 16px; }
.photo-mosaic figure { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.photo-mosaic .big { grid-row: span 2; }
.photo-mosaic figure:nth-child(4) { grid-column: span 2; }
.photo-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-out); }
.photo-mosaic figure:hover img { scale: 1.05; }
.photo-mosaic figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; font-size: 13px; color: rgba(255,255,255,.85);
  background: linear-gradient(0deg, rgba(40,28,22,.72), transparent); }
.photo-mosaic figcaption strong { display: block; font-size: 16px; color: #fff; }
@media (max-width: 860px) {
  .photo-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 200px 200px; }
  .photo-mosaic .big { grid-column: span 2; grid-row: auto; }
}

/* ===== EPP: 3D bead stage ===== */
.what-grid { align-items: start; }
.bead-stage { position: relative; margin: 28px 0 0; aspect-ratio: 1 / .9; border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(120% 90% at 30% 20%, #fff7ee 0%, var(--bg-alt) 55%, #efdccb 100%); box-shadow: var(--shadow); }
.bead-stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; }
.bead-stage.is-ready .bead-stage__canvas { opacity: 1; }
.bead-stage.is-ready .bead-stage__fallback { opacity: 0; }
.bead-stage__fallback { position: absolute; inset: 0; transition: opacity .6s ease; }
.bead-stage__fallback i { position: absolute; width: 34px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #efe6da 55%, #c9b8a6 100%); box-shadow: 0 6px 14px rgba(120,80,50,.18);
  animation: bead-float 6s ease-in-out infinite alternate; }
.bead-stage__fallback i:nth-child(3n) { background: radial-gradient(circle at 35% 30%, #77706b 0%, #3a3532 60%, #221f1d 100%); }
.bead-stage__fallback i:nth-child(4n) { width: 24px; animation-duration: 8s; }
.bead-stage__fallback i:nth-child(5n) { width: 44px; animation-duration: 7s; }
.bead-stage figcaption { position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: rgba(255,252,248,.82); backdrop-filter: blur(8px); color: var(--ink); }
.bead-stage figcaption span { margin-left: 8px; font-weight: 500; color: var(--ink-3); }
@keyframes bead-float { to { transform: translate(10px, -18px); } }
.greeting-body .lead-strong { font-family: var(--serif); font-size: 22px; line-height: 1.55; color: var(--ink); margin-bottom: 22px; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 56px; }
.why-grid li { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; transition: transform .3s var(--ease-out), box-shadow .3s; }
.why-grid li:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.why-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); display: grid; place-items: center; }
.why-ico svg { width: 18px; fill: none; stroke: var(--brand-dark); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.why-grid h4 { margin: 4px 0; font-size: 17px; }
.why-grid p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }

/* ===== EPP: property photo cards ===== */
.prop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.prop-card { background: var(--dark-2); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .4s var(--ease-out), box-shadow .4s; }
.prop-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.prop-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.prop-card__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) sepia(.12); transition: scale 1.2s var(--ease-out), filter .6s; }
.prop-card:hover .prop-card__media img { scale: 1.07; filter: none; }
.prop-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--dark-2) 0%, rgba(91,73,64,0) 55%); }
.prop-card__tag { position: absolute; z-index: 1; top: 14px; left: 14px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: rgba(255,252,248,.88); color: var(--brand-dark); backdrop-filter: blur(6px); }
.prop-card__body { position: relative; padding: 0 26px 28px; margin-top: -26px; }
.prop-card__body .ico { position: relative; z-index: 1; }
.prop-card h3 { font-size: 20px; margin-top: 14px; }
.prop-card p { color: var(--on-dark-2); font-size: 15px; margin-top: 6px; }
.section-dark .note.credit { color: var(--on-dark-2); opacity: .7; font-size: 12.5px; margin: 14px 0 48px; }
@media (max-width: 900px) { .prop-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .prop-grid { grid-template-columns: 1fr; } }

/* ===== 기술: process flowchart ===== */
.flow { display: flex; flex-direction: column; }
.flow-phase { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: center; }
.flow-phase header span { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--brand); }
.flow-phase header h3 { font-family: var(--serif); font-size: 24px; margin: 4px 0 8px; }
.flow-phase header p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.flow-nodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.flow-nodes--2 { grid-template-columns: repeat(2, 1fr); }
.flow-nodes--4 { grid-template-columns: repeat(4, 1fr); gap: 30px; }
.fnode { position: relative; background: var(--bg-alt); border-radius: 16px; padding: 18px 16px 16px; display: flex; flex-direction: column; }
.fnode:not(:last-child)::after { content: ""; position: absolute; top: 38px; right: -28px; width: 22px; height: 12px;
  background: var(--brand); clip-path: polygon(0 35%, 60% 35%, 60% 0, 100% 50%, 60% 100%, 60% 65%, 0 65%); opacity: .75; }
.flow-nodes--4 .fnode:not(:last-child)::after { right: -26px; }
.fnode__ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(120,80,50,.08); }
.fnode__ico svg, .qc-stage__ico svg, .qc-items__ico svg { width: 24px; fill: none; stroke: var(--brand-dark); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fnode__no { position: absolute; top: 16px; right: 16px; font-size: 12px; font-weight: 800; color: var(--ink-3); }
.fnode strong { font-size: 16px; margin-top: 12px; }
.fnode em { font-style: normal; font-size: 13.5px; color: var(--ink); margin-top: 2px; }
.fnode small { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.45; }
.fnode--end { background: var(--brand-soft); }
.qc-badge { align-self: flex-start; margin-top: 10px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #fff; background: #5f8f7a; }
.flow-down { width: 2px; height: 34px; margin: 0 auto; background: repeating-linear-gradient(var(--brand) 0 5px, transparent 5px 9px); position: relative; }
.flow-down::after { content: ""; position: absolute; left: 50%; bottom: -4px; translate: -50% 0; border: 7px solid transparent; border-top: 9px solid var(--brand); border-bottom: 0; }
.flow-mold { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: center; }
.cycle { margin: 0; text-align: center; }
.cycle svg { width: 100%; max-width: 320px; }
.cycle__ring { fill: none; stroke: var(--brand); stroke-opacity: .35; stroke-width: 4; stroke-dasharray: 2 10; animation: ring-dash 14s linear infinite; }
@keyframes ring-dash { to { stroke-dashoffset: -240; } }
.cycle__arrow { fill: var(--brand); }
.cycle__node circle { fill: var(--surface); stroke: var(--brand); stroke-width: 2; }
.cycle__node.hot circle { fill: var(--brand); }
.cycle svg text { text-anchor: middle; font-size: 13.5px; font-weight: 700; fill: var(--ink); font-family: inherit; }
.cycle svg text.n { font-size: 15px; font-weight: 800; fill: var(--brand); }
.cycle__node.hot text, .cycle__node.hot text.n { fill: #fff; }
.cycle svg .cycle__title { font-family: var(--serif); font-size: 20px; }
.cycle svg .cycle__sub { font-size: 12px; font-weight: 500; fill: var(--ink-3); }
.cycle figcaption { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.flow-loop { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 16px 20px; border: 1.5px dashed #9cbfae; border-radius: 16px; background: #f1f7f3; }
.flow-loop .fnode__ico svg { stroke: #4f7f6a; }
.flow-loop p { font-size: 14.5px; color: var(--ink-2); }
.flow-loop strong { color: #3f6f5a; margin-right: 8px; }
.timebar { display: flex; gap: 4px; margin-top: 18px; border-radius: 14px; overflow: hidden; }
.timebar div { flex: var(--w); padding: 12px 14px; background: var(--brand-soft); font-size: 13px; min-width: 0; }
.timebar div:nth-child(2) { background: #f6d2bd; }
.timebar div:nth-child(3) { background: #f1bc9d; }
.timebar div:nth-child(4) { background: #e9e0d6; }
.timebar b { display: block; font-size: 14px; }
.timebar span { color: var(--ink-2); }
@media (max-width: 1080px) {
  .flow-phase { grid-template-columns: 1fr; }
  .flow-nodes--4 { grid-template-columns: repeat(2, 1fr); }
  .flow-nodes--4 .fnode:nth-child(2)::after { display: none; }
}
@media (max-width: 760px) {
  .flow-nodes, .flow-nodes--2, .flow-nodes--4 { grid-template-columns: 1fr; gap: 26px; }
  .fnode:not(:last-child)::after, .flow-nodes--4 .fnode:nth-child(2)::after { display: block; top: auto; bottom: -21px; right: auto; left: 30px; width: 12px; height: 16px;
    clip-path: polygon(35% 0, 65% 0, 65% 60%, 100% 60%, 50% 100%, 0 60%, 35% 60%); }
  .flow-mold { grid-template-columns: 1fr; }
  .timebar { flex-direction: column; }
}

/* ===== 기술: quality diagrams ===== */
.qc-top { display: grid; grid-template-columns: 340px 1fr; gap: 36px; align-items: center; }
.quality-grid-2 { grid-template-columns: 1fr 1fr; }
.pdca { margin: 0; }
.pdca svg { width: 100%; max-width: 320px; display: block; margin: 0 auto; }
.pdca__ring { animation: pdca-spin 50s linear infinite; transform-origin: 160px 160px; }
@keyframes pdca-spin { to { rotate: 360deg; } }
.pdca__seg.s0 { fill: #d9734e; }
.pdca__seg.s1 { fill: #e69472; }
.pdca__seg.s2 { fill: #5f8f7a; }
.pdca__seg.s3 { fill: #86ad9a; }
.pdca__arrow { fill: var(--ink-3); }
.pdca svg text { text-anchor: middle; fill: #fff; font-family: inherit; }
.pdca svg .pdca__l { font-size: 26px; font-weight: 800; }
.pdca svg .pdca__k { font-size: 13px; font-weight: 700; }
.pdca svg .pdca__c { fill: var(--ink); font-size: 20px; font-weight: 800; }
.pdca svg .pdca__cs { fill: var(--ink-3); font-size: 12.5px; }
.pdca figcaption { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 14px; font-size: 12.5px; color: var(--ink-2); }
.pdca figcaption b { color: var(--brand-dark); }
.qc-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.qc-stage { position: relative; background: var(--surface); border-radius: var(--radius); padding: 24px 22px; border-top: 4px solid var(--brand); }
.qc-stage:nth-child(4) { border-top-color: #5f8f7a; }
.qc-stage:not(:last-child)::after { content: ""; position: absolute; top: 44px; right: -25px; width: 20px; height: 12px; background: var(--brand); opacity: .7;
  clip-path: polygon(0 35%, 60% 35%, 60% 0, 100% 50%, 60% 100%, 60% 65%, 0 65%); }
.qc-stage__ico { width: 46px; height: 46px; border-radius: 50%; background: var(--brand-soft); display: grid; place-items: center; }
.qc-stage b { display: block; margin-top: 14px; font-size: 12px; color: var(--brand); letter-spacing: .06em; }
.qc-stage h4 { font-size: 19px; margin: 2px 0 10px; }
.qc-stage ul li { position: relative; padding-left: 16px; font-size: 14px; color: var(--ink-2); margin-top: 5px; }
.qc-stage ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-light); }
.qc-items { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.qc-items li { text-align: center; background: var(--surface); border-radius: 18px; padding: 24px 16px; }
.qc-items__ico { width: 56px; height: 56px; margin: 0 auto; border-radius: 16px; background: var(--bg-alt); display: grid; place-items: center; }
.qc-items__ico svg { width: 28px; }
.qc-items h4 { margin-top: 12px; font-size: 16px; }
.qc-items p { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; }
@media (max-width: 1080px) {
  .qc-top { grid-template-columns: 1fr; }
  .qc-flow { grid-template-columns: 1fr 1fr; }
  .qc-stage:nth-child(2)::after { display: none; }
  .qc-items { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .qc-flow, .quality-grid-2 { grid-template-columns: 1fr; }
  .qc-stage:not(:last-child)::after { display: none; }
  .qc-items { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pdca__ring, .cycle__ring, .bead-stage__fallback i { animation: none; }
}