/* ==========================================================
   가드샌드(주) — 제품 사이트 공통 스타일 (국내 기업형 레이아웃)
   브랜드 네이비(로고) + 해조 그린 포인트 · Pretendard
   ========================================================== */
:root {
  --navy: #2b2160;          /* 로고 색 */
  --navy-2: #1d1645;
  --ink: #0b1a2b;
  --text: #191f28;
  --sub: #4e5968;
  --muted: #8b95a1;
  --line: #e5e8eb;
  --bg: #ffffff;
  --gray: #f6f7f9;
  --gray-2: #eef1f4;
  --point: #12a05c;         /* 해조 그린 */
  --point-2: #0d8a4e;
  --point-soft: #e8f7ef;
  --ssuk: #6c3fb5;
  --ssuk-soft: #f3eefb;
  --ssing: #0f9bb0;
  --ssing-soft: #e7f6f8;
  --tun: #1f9a55;
  --tun-soft: #e8f6ee;
  --warn: #e5484d;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow: 0 12px 32px rgba(17, 24, 39, .08);
  --shadow-lg: 0 24px 48px rgba(17, 24, 39, .12);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --head: 80px;
}
@media (max-width: 1023px) { :root { --head: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 64px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0; font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--text); background: var(--bg); line-height: 1.65; letter-spacing: -.01em;
  word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; letter-spacing: -.03em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.num { font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
:focus-visible { outline: 3px solid var(--point); outline-offset: 3px; border-radius: 6px; }

/* ---------- 섹션 제목 (가운데 정렬) ---------- */
.section { padding: clamp(72px, 10vw, 128px) 0; position: relative; }
.section.gray { background: var(--gray); }
.section.dark { background: var(--ink); color: #fff; }
.tit { text-align: center; margin-bottom: clamp(36px, 5vw, 60px); display: grid; justify-items: center; gap: 14px; }
.tit .en { font-size: 14px; font-weight: 700; letter-spacing: .18em; color: var(--point); text-transform: uppercase; }
.tit h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; }
.tit p { font-size: clamp(16px, 1.4vw, 18px); color: var(--sub); max-width: 640px; }
.dark .tit p { color: rgba(255, 255, 255, .7); }
.dark .tit .en { color: #7ff0b4; }
.eyebrow { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: .14em; color: var(--point); text-transform: uppercase; }
.h-lg { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; }
.h-md { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; }
.lead { font-size: clamp(16px, 1.4vw, 18px); color: var(--sub); line-height: 1.75; max-width: 62ch; }
.muted { color: var(--sub); }

/* ---------- 버튼 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 28px; border-radius: 12px; font-size: 17px; font-weight: 700; white-space: nowrap; transition: background .25s, color .25s, transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); box-shadow: 0 10px 24px rgba(43, 33, 96, .3); }
.btn-point { background: var(--point); color: #fff; }
.btn-point:hover { background: var(--point-2); box-shadow: 0 10px 24px rgba(18, 160, 92, .3); }
.btn-line { border: 1px solid #d1d6db; background: #fff; color: var(--text); }
.btn-line:hover { border-color: var(--text); }
.btn-white { background: #fff; color: var(--navy); }
.btn-ghost { border: 1px solid rgba(255, 255, 255, .55); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.btn-sm { height: 44px; padding: 0 18px; font-size: 15px; border-radius: 10px; }
.btn-lg { height: 60px; padding: 0 32px; font-size: 18px; }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; }
.more svg { transition: transform .25s var(--ease); }
.more:hover svg, a:hover .more svg { transform: translateX(4px); }

/* ---------- 헤더 (GNB) ---------- */
.header { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--head); color: #fff; transition: background .3s, color .3s, box-shadow .3s; }
.header .wrap { height: 100%; display: flex; align-items: center; gap: 24px; }
.header .logo { flex: none; display: block; position: relative; width: 122px; height: 48px; }
.header .logo img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: contain; transition: opacity .3s; }
.header .logo .on-light { opacity: 0; }
.gnb { display: none; gap: 4px; }
.gnb a { position: relative; padding: 10px 20px; font-size: 17.5px; font-weight: 700; }
.gnb a::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transition: transform .3s var(--ease); }
.gnb a:hover::after, .gnb a[aria-current="page"]::after { transform: scaleX(1); }
.gnb .badge { position: absolute; top: -6px; right: 0; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--point); color: #fff; line-height: 1.5; }
.h-util { display: none; align-items: center; gap: 16px; }
.h-tel { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.burger { margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: .3s var(--ease); }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -7px; } .burger span::after { top: 7px; }
.header.solid, .nav-open .header { background: #fff; color: var(--text); box-shadow: 0 1px 0 var(--line); }
.header.solid .logo .on-dark, .nav-open .header .logo .on-dark { opacity: 0; }
.header.solid .logo .on-light, .nav-open .header .logo .on-light { opacity: 1; }
.nav-open .burger span { background: transparent; }
.nav-open .burger span::before { top: 0; transform: rotate(45deg); }
.nav-open .burger span::after { top: 0; transform: rotate(-45deg); }
@media (min-width: 1024px) {
  .gnb, .h-util { display: flex; }
  .gnb { margin-left: auto; }
  .h-util { margin-left: 24px; }
  .burger { display: none; }
}
.m-menu { position: fixed; inset: var(--head) 0 0; z-index: 39; background: #fff; padding: 8px var(--gutter) 32px; overflow-y: auto; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .3s var(--ease); }
.nav-open .m-menu { opacity: 1; visibility: visible; transform: none; }
.m-menu a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 4px; border-bottom: 1px solid var(--line); font-size: 20px; font-weight: 800; }
.m-menu a small { font-size: 13px; font-weight: 500; color: var(--muted); text-align: right; }
.m-menu .btn { margin-top: 24px; border: 0; justify-content: center; font-size: 17px; }
@media (min-width: 1024px) { .m-menu { display: none; } }
body.nav-open { overflow: hidden; }

/* ---------- 메인 비주얼 슬라이드 ---------- */
.visual { position: relative; height: 100svh; min-height: 640px; max-height: 940px; overflow: hidden; background: var(--ink); color: #fff; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 1s; }
.slide.on { opacity: 1; visibility: visible; z-index: 1; }
.slide .bg { position: absolute; inset: 0; }
.slide .bg img, .slide .bg video { width: 100%; height: 100% !important; object-fit: cover; transform: scale(1.08); transition: transform 7s linear; }
.slide.on .bg img, .slide.on .bg video { transform: scale(1); }
.slide .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 12, 32, .88) 0%, rgba(10, 12, 32, .6) 50%, rgba(10, 12, 32, .25) 100%); }
.slide .wrap { position: relative; height: 100%; display: grid; align-items: center; padding-top: var(--head); padding-bottom: 110px; gap: 20px; }
@media (min-width: 1024px) { .slide .wrap { grid-template-columns: 1.1fr .9fr; } }
.slide .copy > * { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.slide.on .copy > * { opacity: 1; transform: none; }
.slide.on .copy > *:nth-child(2) { transition-delay: .12s; } .slide.on .copy > *:nth-child(3) { transition-delay: .24s; }
.slide.on .copy > *:nth-child(4) { transition-delay: .36s; } .slide.on .copy > *:nth-child(5) { transition-delay: .48s; }
.slide .label { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 700; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); }
.slide .label i { width: 8px; height: 8px; border-radius: 50%; background: var(--glow, #7ff0b4); }
.slide .ttl { font-size: clamp(36px, 5.6vw, 72px); font-weight: 900; line-height: 1.18; margin: 18px 0 16px; letter-spacing: -.04em; }
.slide .ttl em { font-style: normal; color: var(--glow, #7ff0b4); }
.slide p.desc { font-size: clamp(16px, 1.5vw, 20px); color: rgba(255, 255, 255, .86); max-width: 32em; }
.slide .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.slide .prod { position: relative; display: flex; align-items: flex-end; justify-content: center; height: clamp(240px, 38vw, 480px); }
.slide .prod .jug { height: 100% !important; width: auto; max-width: 78%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); opacity: 0; transform: translateY(30px) scale(.96); transition: 1s var(--ease) .2s; }
.slide .prod .ch { width: 26%; margin-left: -12%; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .4)); opacity: 0; transform: translateY(20px); transition: 1s var(--ease) .5s; }
.slide.on .prod .jug, .slide.on .prod .ch { opacity: 1; transform: none; }
.slide.on .prod .ch { animation: bob 4s ease-in-out 1.5s infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 1023px) {
  .slide .wrap { align-content: center; padding-bottom: 150px; gap: 8px; }
  /* 스크롤 표시 자리(하단 150px)를 비워 두고, 남는 높이만큼만 제품 이미지를 키운다 */
  .slide .prod { height: min(30vh, calc(100svh - 540px)); order: -1; justify-content: flex-start; }
  .slide .ttl { margin: 12px 0 10px; }
  .slide p.desc { font-size: 15.5px; }
  .slide .acts { margin-top: 22px; }
  .slide .acts .btn { height: 50px; font-size: 16px; padding: 0 20px; }
}
@media (max-width: 1023px) and (max-height: 680px) { .slide .prod { display: none; } }
.v-ctrl { position: absolute; left: 0; right: 0; bottom: 36px; z-index: 5; }
.v-ctrl .wrap { display: flex; align-items: center; gap: 18px; }
.v-tabs { display: flex; gap: 8px; flex: 1; max-width: 680px; }
.v-tabs button { flex: 1; text-align: left; color: rgba(255, 255, 255, .55); font-size: 15px; font-weight: 800; padding-top: 14px; position: relative; transition: color .3s; }
.v-tabs button::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255, 255, 255, .25); border-radius: 3px; }
.v-tabs button::after { content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 0; background: #fff; border-radius: 3px; }
.v-tabs button.on { color: #fff; }
.v-tabs button.on::after { animation: prog var(--dur, 6s) linear forwards; }
.visual.paused .v-tabs button.on::after { animation-play-state: paused; }
@keyframes prog { to { width: 100%; } }
.v-tabs small { display: block; font-size: 12.5px; font-weight: 600; opacity: .85; }
.v-pause { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); display: grid; place-items: center; color: #fff; }
.v-pause .pl { display: none; }
.visual.paused .v-pause .pa { display: none; } .visual.paused .v-pause .pl { display: block; }
@media (max-width: 639px) { .v-tabs small { display: none; } .v-tabs button { font-size: 13.5px; } .v-ctrl { bottom: 28px; } }

/* ---------- 제품 라인업 (물김쑥쑥 대표) ---------- */
.lineup { display: grid; gap: 20px; }
@media (min-width: 1024px) { .lineup { grid-template-columns: 1.3fr 1fr; } .lineup .hero-card { grid-row: span 2; } }
.pc { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--soft); display: grid; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.pc:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pc.ssuk { --tint: var(--ssuk); --soft: var(--ssuk-soft); }
.pc.ssing { --tint: var(--ssing); --soft: var(--ssing-soft); }
.pc.tun { --tint: var(--tun); --soft: var(--tun-soft); }
.pc .body { padding: clamp(24px, 3vw, 40px); display: grid; gap: 10px; align-content: start; }
.pc .cat { display: inline-flex; align-self: start; justify-self: start; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px; background: #fff; color: var(--tint); font-size: 13.5px; font-weight: 800; }
.pc h3 { font-size: clamp(28px, 3vw, 40px); font-weight: 900; letter-spacing: -.04em; }
.pc .stage { font-size: 14px; font-weight: 800; color: var(--tint); }
.pc p { color: var(--sub); font-size: 16px; }
.pc ul { display: grid; gap: 6px; margin-top: 4px; }
.pc li { display: flex; gap: 8px; align-items: flex-start; font-size: 15.5px; font-weight: 600; }
.pc li svg { flex: none; margin-top: 4px; color: var(--tint); }
.pc .more { margin-top: 8px; color: var(--tint); }
.pc .pic { display: flex; align-items: flex-end; justify-content: center; padding: 0 24px 28px; }
.pc .pic .jug { width: min(56%, 240px); filter: drop-shadow(0 18px 24px rgba(17, 24, 39, .18)); transition: transform .5s var(--ease); }
.pc .pic .ch { width: min(26%, 110px); margin-left: -8%; transition: transform .5s var(--ease); }
.pc:hover .pic .jug { transform: translateY(-6px); }
.pc:hover .pic .ch { transform: translateY(-10px) rotate(5deg); }
.pc .ribbon { position: absolute; top: 22px; right: 22px; z-index: 2; height: 34px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; background: var(--tint); color: #fff; font-size: 14px; font-weight: 800; }
.pc.hero-card .pic .jug { width: min(62%, 340px); }
.pc.hero-card .pic .ch { width: min(26%, 140px); }
@media (min-width: 640px) { .pc.side { grid-template-columns: 1.15fr 1fr; align-items: center; } .pc.side .pic { padding: 24px; } }

/* ---------- 근거 수치 ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.stat { background: #fff; border-radius: var(--radius-lg); padding: clamp(20px, 2.6vw, 34px); display: grid; gap: 8px; align-content: start; }
.stat .tag { justify-self: start; font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 6px; background: var(--soft); color: var(--tint); }
.stat.ssuk { --tint: var(--ssuk); --soft: var(--ssuk-soft); } .stat.ssing { --tint: var(--ssing); --soft: var(--ssing-soft); }
.stat .big { font-size: clamp(36px, 4.6vw, 60px); font-weight: 900; line-height: 1.05; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat .big small { font-size: .42em; font-weight: 800; margin-left: 2px; color: var(--tint); }
.stat b { font-size: 17px; }
.stat .src { font-size: 13.5px; color: var(--sub); line-height: 1.55; }

/* ---------- 제품 탭 ---------- */
.tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: clamp(32px, 4vw, 52px); }
.tabs button { height: 54px; padding: 0 30px; border-radius: 999px; font-size: 17px; font-weight: 800; color: var(--sub); background: #fff; border: 1px solid #d1d6db; transition: .25s; }
.tabs button:hover { color: var(--text); border-color: var(--text); }
.tabs button[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
@media (max-width: 639px) { .tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .tabs button { height: 46px; padding: 0 4px; font-size: 15px; } }
.panel[hidden] { display: none; }
.panel { animation: fadeUp .6s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.feature { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .feature { grid-template-columns: 1fr 1fr; gap: 64px; } }
.f-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--gray); }
.f-media > img.photo { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.f-media .overlay-jug { position: absolute; width: 40%; right: 5%; bottom: 5%; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .45)); }
.f-media .overlay-char { position: absolute; width: 19%; left: 6%; bottom: 6%; animation: bob 4.5s ease-in-out infinite; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); }
.f-media .glass { position: absolute; left: 5%; top: 5%; padding: 12px 16px; border-radius: 12px; color: #fff; font-size: 14px; font-weight: 600; background: rgba(10, 12, 32, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.f-media .glass b { display: block; font-size: 20px; font-weight: 900; }
.f-media.pad { padding: clamp(16px, 2.6vw, 28px); }
.f-body { display: grid; gap: 18px; }
.f-body .kicker { font-size: 15px; font-weight: 800; color: var(--tint); }
.f-body h3 { font-size: clamp(26px, 3vw, 38px); font-weight: 900; }
.f-body .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.f-list { display: grid; gap: 10px; }
.f-list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 16px 18px; border-radius: 14px; background: var(--gray); }
.d-section.gray .f-list li { background: #fff; }
.f-list .n { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; background: var(--tint, var(--point)); color: #fff; font-variant-numeric: tabular-nums; }
.f-list b { display: block; font-size: 17px; }
.f-list span { color: var(--sub); font-size: 15px; }
.ssuk-scope { --tint: var(--ssuk); } .ssing-scope { --tint: var(--ssing); } .tun-scope { --tint: var(--tun); }

/* 실험 비교 */
.exp { display: grid; gap: 8px; }
.exp-head, .exp-row { display: grid; grid-template-columns: 70px repeat(4, 1fr); gap: 6px; align-items: center; }
.exp-head { font-size: 12.5px; font-weight: 700; color: var(--sub); text-align: center; }
.exp-row .rl { font-size: 13px; font-weight: 800; line-height: 1.3; }
.exp-row .rl small { display: block; font-weight: 500; color: var(--sub); }
.exp-cell { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: #ddd; }
.exp-cell img { width: 100%; height: 100% !important; object-fit: cover; }
.exp-cell em { position: absolute; left: 4px; right: 4px; bottom: 4px; text-align: center; font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 4px; border-radius: 6px; background: rgba(255, 255, 255, .92); line-height: 1.35; }
.exp-cell.bad em { background: var(--warn); color: #fff; }
.exp-note { font-size: 12.5px; color: var(--sub); margin-top: 4px; }

/* 단계 흐름 */
.flow { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .flow.four { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.flow figure { margin: 0; position: relative; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.flow img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.flow figcaption { padding: 10px 12px 12px; font-size: 14.5px; font-weight: 800; }
.flow figcaption small { display: block; color: var(--sub); font-weight: 500; font-size: 13px; }
.flow .stepn { position: absolute; left: 10px; top: 10px; font-weight: 800; font-size: 12px; padding: 3px 9px; border-radius: 6px; background: var(--tun); color: #fff; }

/* ---------- 영상 ---------- */
.shorts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 68%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 16px; margin: 0 calc(var(--gutter) * -1); scrollbar-width: none; }
.shorts::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .shorts { grid-auto-columns: minmax(240px, 40%); } }
@media (min-width: 1024px) { .shorts { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; padding: 0; margin: 0; gap: 20px; } .shorts.few { grid-template-columns: repeat(4, minmax(0, 280px)); } }
.short { scroll-snap-align: start; display: grid; gap: 10px; align-content: start; }
.short-frame { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: #000; }
.short-frame img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s var(--ease); }
.short-frame:hover img { transform: scale(1.04); }
.short-frame .play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .5)); }
.short-frame .play span { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .95); color: var(--navy); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); transition: transform .3s var(--ease); }
.short-frame:hover .play span { transform: scale(1.1); }
.short-frame .dur { position: absolute; right: 12px; top: 12px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: rgba(0, 0, 0, .6); color: #fff; }
.short .ptag { font-size: 13px; font-weight: 800; color: var(--point); margin-top: 4px; }
.dark .short .ptag { color: #7ff0b4; }
.short h3 { font-size: 18px; font-weight: 800; }
.short p { font-size: 14.5px; color: var(--sub); }
.dark .short p { color: rgba(255, 255, 255, .65); }

/* ---------- 기술력 ---------- */
.tech { display: grid; gap: 16px; }
@media (min-width: 1024px) { .tech { grid-template-columns: repeat(3, 1fr); gap: 20px; } .tech .wide { grid-column: span 2; } .tech .tall { grid-row: span 2; } }
.tc { border-radius: var(--radius-lg); background: var(--gray); padding: clamp(24px, 2.6vw, 36px); display: grid; gap: 12px; align-content: start; overflow: hidden; }
.tc h3 { font-size: 22px; font-weight: 800; }
.tc p { color: var(--sub); font-size: 15.5px; }
.tc .code { display: inline-block; justify-self: start; font-weight: 800; font-size: 15px; padding: 8px 12px; border-radius: 8px; background: #fff; color: var(--navy); }
.tc.navy { background: var(--navy); color: #fff; }
.tc.navy p { color: rgba(255, 255, 255, .78); }
.tc .stat-big { font-size: clamp(60px, 7vw, 96px); font-weight: 900; line-height: 1; letter-spacing: -.05em; }
.tc .stat-big small { font-size: .3em; margin-left: 6px; color: #7ff0b4; }
.tc .ph { margin: 6px calc(clamp(24px, 2.6vw, 36px) * -1) calc(clamp(24px, 2.6vw, 36px) * -1); }
.tc .ph img { width: 100%; height: 220px !important; object-fit: cover; }
.docs { display: flex; gap: 12px; align-items: flex-end; }
.docs img { width: 46%; max-width: 170px; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.spec { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec th, .spec td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec th { width: 32%; font-weight: 700; color: var(--sub); background: var(--gray); }
.table-wrap { border-radius: 4px; overflow: hidden; border: 1px solid var(--line); border-top: 2px solid var(--text); background: #fff; overflow-x: auto; }

/* ---------- M 시리즈 ---------- */
.mline { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .mline { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.m-item { border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s; }
.m-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.m-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.m-item div { padding: 14px 16px 18px; display: grid; gap: 2px; }
.m-item small { font-size: 12px; font-weight: 700; color: var(--point); }
.m-item b { font-size: 17px; }
.m-item span { font-size: 13.5px; color: var(--sub); }

/* ---------- 상담 배너 ---------- */
.cs { position: relative; overflow: hidden; color: #fff; background: var(--navy); isolation: isolate; }
.cs > img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; z-index: -2; opacity: .4; }
.cs::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(43, 33, 96, .96) 25%, rgba(43, 33, 96, .72)); }
.cs .wrap { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); display: grid; gap: 28px; align-items: center; }
@media (min-width: 1024px) { .cs .wrap { grid-template-columns: 1fr auto; gap: 64px; } }
.cs .en { font-size: 14px; font-weight: 700; letter-spacing: .18em; color: #7ff0b4; }
.cs h2 { font-size: clamp(26px, 3.4vw, 42px); font-weight: 900; margin-top: 10px; }
.cs p { color: rgba(255, 255, 255, .82); margin-top: 10px; font-size: 17px; max-width: 36em; }
.cs .tel-big { display: inline-block; font-size: clamp(34px, 4.6vw, 56px); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; margin-top: 22px; font-variant-numeric: tabular-nums; }
.cs .tel-big small { display: block; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .7); letter-spacing: 0; margin-bottom: 6px; }
.cs .side { display: grid; gap: 10px; min-width: min(100%, 360px); }
.cs .side a { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 64px; padding: 0 22px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); font-weight: 700; transition: background .25s; }
.cs .side a:hover { background: rgba(255, 255, 255, .18); }
.cs .side a b { font-size: 18px; font-variant-numeric: tabular-nums; }
.cs .side a.pri { background: var(--point); border-color: var(--point); }

/* ---------- 푸터 ---------- */
.footer { background: #f2f4f6; color: var(--sub); font-size: 14px; padding: 44px 0 40px; }
.f-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid #dfe3e8; }
.f-top img { height: 44px; width: auto; }
.f-links { display: flex; flex-wrap: wrap; gap: 6px 22px; font-weight: 700; color: var(--text); font-size: 15px; }
.f-info { padding-top: 22px; line-height: 1.9; }
.f-info p span { display: inline-block; margin-right: 12px; }
.f-info p span + span::before { content: ""; display: inline-block; width: 1px; height: 11px; background: #c5cad1; margin-right: 12px; vertical-align: -1px; }
.f-copy { margin-top: 14px; color: var(--muted); font-size: 13px; }

/* ---------- 우측 퀵메뉴 / 모바일 하단바 ---------- */
.quick { position: fixed; right: 20px; bottom: 28px; z-index: 35; display: none; flex-direction: column; gap: 8px; }
@media (min-width: 1024px) { .quick { display: flex; } }
.quick a, .quick button { width: 68px; height: 68px; border-radius: 16px; display: grid; place-items: center; align-content: center; gap: 3px; font-size: 12px; font-weight: 800; background: #fff; color: var(--text); box-shadow: var(--shadow); border: 1px solid var(--line); transition: transform .25s var(--ease), opacity .3s; }
.quick a:hover, .quick button:hover { transform: translateY(-3px); }
.quick .pri { background: var(--point); color: #fff; border-color: var(--point); }
.quick .top { opacity: 0; pointer-events: none; }
.quick .top.show { opacity: 1; pointer-events: auto; }
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -1px 0 var(--line), 0 -8px 24px rgba(17, 24, 39, .06); transform: translateY(110%); transition: transform .4s var(--ease); }
.dock.show { transform: none; }
.dock a { display: flex; align-items: center; justify-content: center; gap: 6px; height: 50px; border-radius: 12px; font-weight: 800; font-size: 16px; background: var(--gray-2); }
.dock a.pri { background: var(--point); color: #fff; }
@media (min-width: 1024px) { .dock { display: none; } }
@media (max-width: 1023px) { .footer { padding-bottom: 100px; } }

/* ---------- 영상 모달 ---------- */
.vmodal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .88); opacity: 0; visibility: hidden; transition: .3s; }
.vmodal.open { opacity: 1; visibility: visible; }
.vmodal video { height: min(86dvh, 900px) !important; width: auto; max-width: 100%; aspect-ratio: 9 / 16; border-radius: 18px; background: #000; }
.vmodal .close { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; display: grid; place-items: center; }

/* ---------- 제품 상세 ---------- */
.p-ssuk { --tint: var(--ssuk); --soft: var(--ssuk-soft); }
.p-ssing { --tint: var(--ssing); --soft: var(--ssing-soft); }
.p-tun { --tint: var(--tun); --soft: var(--tun-soft); }
.p-top { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--soft) 0%, #fff 100%); padding: calc(var(--head) + clamp(24px, 4vw, 56px)) 0 clamp(40px, 5vw, 64px); }
.p-top::after { content: ""; position: absolute; width: 46vw; aspect-ratio: 1; right: -10vw; top: -14vw; border-radius: 50%; background: var(--tint); opacity: .1; filter: blur(60px); }
.p-top .wrap { position: relative; z-index: 1; display: grid; gap: 24px; align-items: center; }
@media (min-width: 1024px) { .p-top .wrap { grid-template-columns: 1.05fr .95fr; } }
.crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--muted); }
.crumb a:hover { color: var(--text); }
.crumb b { color: var(--text); font-weight: 600; }
.p-top .type { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 8px; background: var(--tint); color: #fff; font-size: 15px; font-weight: 800; margin-top: 18px; }
.p-top h1 { font-size: clamp(48px, 7.4vw, 92px); font-weight: 900; letter-spacing: -.05em; line-height: 1.08; margin: 14px 0 16px; }
.p-top .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.p-top .meta span { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14px; font-weight: 700; }
.p-top .meta svg { color: var(--tint); }
.p-top .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.p-top .stage { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.p-top .stage::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: -4%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(17, 24, 39, .16), transparent); }
.p-top .stage .jug { position: relative; width: min(70%, 380px); filter: drop-shadow(0 26px 30px rgba(17, 24, 39, .2)); }
.p-top .stage .ch { position: relative; width: min(28%, 150px); margin-left: -10%; animation: bob 4s ease-in-out infinite; }
@media (max-width: 1023px) { .p-top .stage { order: -1; } .p-top .stage .jug { width: 50%; } .p-top .stage .ch { width: 22%; } .p-top .type { margin-top: 12px; } }
.subnav { position: sticky; top: var(--head); z-index: 30; background: #fff; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
.subnav .wrap { display: flex; overflow-x: auto; scrollbar-width: none; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav a { flex: none; position: relative; padding: 18px 20px; font-size: 16px; font-weight: 700; color: var(--muted); transition: color .2s; }
.subnav a::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 3px; background: var(--tint); transform: scaleX(0); transition: transform .3s var(--ease); }
.subnav a:hover, .subnav a.on { color: var(--text); }
.subnav a.on::after { transform: scaleX(1); }
@media (min-width: 1024px) { .subnav .wrap { justify-content: center; } }
@media (max-width: 639px) { .subnav a { padding: 15px 14px; font-size: 15px; } .subnav a::after { left: 14px; right: 14px; } }
.d-section { padding: clamp(64px, 8vw, 104px) 0; }
.d-section.gray { background: var(--gray); }
.d-head { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 44px); }
.d-head.center { text-align: center; justify-items: center; }
.d-head .eyebrow, .two .eyebrow { color: var(--tint, var(--point)); }
.two { display: grid; gap: 28px; }
@media (min-width: 1024px) { .two { grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; } .two.even { grid-template-columns: 1fr 1fr; } }
.card { border-radius: var(--radius); background: #fff; border: 1px solid var(--line); padding: 24px; }
.d-section.gray .card { border-color: transparent; }
.bullets { display: grid; gap: 10px; }
.bullets li { position: relative; padding-left: 20px; }
.bullets li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--tint, var(--point)); }
.caution li { color: var(--sub); font-size: 15px; }
.steps { counter-reset: s; display: grid; gap: 10px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); font-weight: 800; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--tint, var(--point)); color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }
.dose { display: grid; gap: 12px; border-radius: var(--radius-lg); padding: 28px; background: var(--tint, var(--navy)); color: #fff; }
@media (min-width: 640px) { .dose { grid-template-columns: auto 1fr; align-items: center; gap: 28px; } }
.dose .eq { font-weight: 900; font-size: clamp(28px, 4vw, 42px); white-space: nowrap; letter-spacing: -.03em; }
.dose .eq i { font-style: normal; opacity: .6; margin: 0 8px; }
.dose p { color: rgba(255, 255, 255, .9); }
.bars { display: grid; gap: 14px; }
.bar .bl { display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.bar .bt { height: 20px; border-radius: 6px; background: var(--gray-2); overflow: hidden; }
.bar .bf { height: 100%; border-radius: 6px; background: var(--tint); width: 0; transition: width 1.4s var(--ease); }
.bar.other .bf { background: #b0b8c1; }
.in .bar .bf { width: var(--w); }
.harvest { display: flex; flex-wrap: wrap; gap: 8px; }
.harvest span { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; background: var(--gray-2); color: var(--sub); }
.harvest span.plus { background: var(--tint); color: #fff; }
.doc-figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.doc-figure img { width: 100%; }
.doc-figure figcaption { padding: 12px 16px; font-size: 13.5px; color: var(--sub); border-top: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: 15px; }
.chips span b { color: var(--tint); }
.grid-cards { display: grid; gap: 14px; }
@media (min-width: 768px) { .grid-cards.c2 { grid-template-columns: 1fr 1fr; } .grid-cards.c3 { grid-template-columns: repeat(3, 1fr); } }
.other-products { display: grid; gap: 14px; }
@media (min-width: 768px) { .other-products { grid-template-columns: 1fr 1fr; } }
.op { display: grid; grid-template-columns: 88px 1fr auto; gap: 16px; align-items: center; padding: 18px 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s; }
.op:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.op img { width: 88px; height: 88px !important; object-fit: contain; }
.op b { font-size: 20px; display: block; }
.op span { font-size: 14px; color: var(--sub); }

/* ---------- 스크롤 등장 ---------- */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; }
.no-js .rv { opacity: 1; transform: none; }

/* 상세 페이지 섹션 머리 (제목 + 설명 2단) */
.section-head { display: grid; gap: 16px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head .eyebrow { color: var(--tint, var(--point)); }
@media (min-width: 1024px) { .section-head.split { grid-template-columns: 1fr 1fr; align-items: end; gap: 64px; } }
.pc.side .pic .jug { width: min(78%, 230px); }
.pc.side .pic .ch { width: min(30%, 90px); }

/* 메인 비주얼 하단 스크롤 안내 (가운데, 슬라이드 탭 위) */
.v-scroll { position: absolute; left: 50%; bottom: 128px; z-index: 5; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 8px; color: #fff; text-decoration: none; }
.v-scroll .txt { font-size: 11px; font-weight: 800; letter-spacing: .24em; margin-right: -.24em; opacity: .9; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.v-scroll .mouse { position: relative; width: 24px; height: 38px; border: 2px solid rgba(255, 255, 255, .85); border-radius: 14px; }
.v-scroll .mouse::before { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: wheel 1.6s ease-in-out infinite; }
.v-scroll .arr { display: none; width: 12px; height: 12px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); animation: arr 1.6s ease-in-out infinite; }
.v-scroll:hover .mouse { border-color: #fff; }
.v-scroll:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 8px; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes arr { 0%, 100% { transform: translateY(-3px) rotate(45deg); opacity: .6; } 50% { transform: translateY(3px) rotate(45deg); opacity: 1; } }
@media (max-width: 1023px) { .v-scroll { bottom: 112px; gap: 4px; } .v-scroll .mouse { display: none; } .v-scroll .arr { display: block; } }
@media (max-width: 639px) { .v-scroll { bottom: 90px; } }
@media (prefers-reduced-motion: reduce) { .v-scroll .mouse::before, .v-scroll .arr { animation: none; } }

/* 상세 페이지 상단: 어두운 배경 + 투명 헤더(스크롤 시 흰색) */
.p-ssuk { --deep: #1b1238; } .p-ssing { --deep: #072a33; } .p-tun { --deep: #0b2a1d; }
.p-top { background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--tint) 45%, var(--deep)) 0%, var(--deep) 55%, #0a0a14 100%); color: #fff; }
.p-top::after { opacity: .28; }
.p-top .crumb { color: rgba(255, 255, 255, .6); }
.p-top .crumb a:hover, .p-top .crumb b { color: #fff; }
.p-top .lead { color: rgba(255, 255, 255, .8); }
.p-top .type { background: #fff; color: var(--deep); }
.p-top .meta span { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
.p-top .meta svg { color: color-mix(in srgb, var(--tint) 40%, #fff); }
.p-top .btn-line { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.p-top .btn-line:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.p-top .stage::before { background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent); }
.p-top .stage .jug { filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .45)); }
.header:not(.solid) .gnb a[aria-current="page"] { color: #fff; }

/* 모바일·태블릿: 실험 사진 위 라벨을 사진 아래로 내려 사진이 가려지지 않게 */
@media (max-width: 1023px) {
  .exp-head, .exp-row { align-items: start; }
  .exp-head { align-items: end; }
  .exp-row .rl { align-self: center; }
  .exp-cell { aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; display: grid; gap: 4px; }
  .exp-cell img { aspect-ratio: 1; height: auto !important; border-radius: 10px; background: #ddd; }
  .exp-cell em { position: static; padding: 3px 2px; background: var(--gray-2); color: var(--text); word-break: keep-all; }
  .exp-cell.bad em { background: var(--warn); color: #fff; }
}
@media (max-width: 639px) { .exp-head, .exp-row { grid-template-columns: 54px repeat(4, 1fr); gap: 5px; } .exp-cell em { font-size: 10.5px; } }