:root { --ink:#15171C; --ink2:#1F222A; --m:#5F6470; --line:#E6E8EC; --bg:#F6F6F4; --acc:#FF5A4E; --acc2:#FF8A5B; --acc-soft:#FFF0EE; --cream:#FFF8F3; }
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; font-family:"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic",sans-serif; color:var(--ink); background:#fff; line-height:1.75; word-break:keep-all; overflow-wrap:anywhere; overflow-x:hidden }
a { color:inherit }
img { max-width:100% }
.wrap { max-width:1160px; margin:0 auto; padding:0 20px }
.en-font, h1, h2, .eyebrow, .tape, .big, .num, .rot { font-family:"Poppins","Noto Sans KR",sans-serif }
html[data-lang="ko"] [lang="en"], html[data-lang="en"] [lang="ko"] { display:none !important }

/* ── 머리말 (어두움) ── */
header.top { position:sticky; top:0; z-index:30; background:rgba(21,23,28,.92); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.08) }
header.top .wrap { display:flex; align-items:center; gap:18px; height:68px }
.brand img { height:28px; display:block }
nav.menu { display:flex; gap:4px; margin-left:auto; align-items:center }
nav.menu > .item { position:relative }
nav.menu > .item > a { display:block; padding:10px 13px; color:#B9BDC6; text-decoration:none; font-weight:600; font-size:14.5px; border-radius:10px; transition:color .2s }
nav.menu > .item > a:hover, nav.menu > .item.on > a { color:#fff }
nav.menu > .item.on > a::after { content:""; display:block; height:2px; background:var(--acc); border-radius:2px; margin-top:4px }
nav.menu .sub { display:none; position:absolute; top:100%; left:0; min-width:200px; background:var(--ink2); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:8px; box-shadow:0 18px 40px rgba(0,0,0,.35) }
nav.menu .item:hover .sub, nav.menu .item:focus-within .sub { display:block }
nav.menu .sub a { display:block; padding:9px 12px; border-radius:9px; text-decoration:none; font-size:14px; color:#E5E7EB }
nav.menu .sub a:hover { background:rgba(255,90,78,.16); color:#fff }
.lang-btn { border:1px solid rgba(255,255,255,.25); background:transparent; font-weight:700; font-size:13px; padding:6px 14px; border-radius:999px; cursor:pointer; color:#fff; transition:background .2s }
.lang-btn:hover { background:var(--acc); border-color:var(--acc) }
.burger { display:none; border:0; background:none; font-size:24px; cursor:pointer; padding:4px 6px; color:#fff }
@media (max-width:900px) {
  .burger { display:block; margin-left:auto }
  nav.menu { display:none; position:absolute; top:68px; left:0; right:0; background:var(--ink); border-bottom:1px solid rgba(255,255,255,.1); flex-direction:column; align-items:stretch; padding:10px 16px 18px; gap:0 }
  nav.menu.open { display:flex }
  nav.menu .sub { display:block; position:static; border:0; box-shadow:none; padding:0 0 6px 12px; min-width:0; background:transparent }
  nav.menu > .item.on > a::after { display:none }
}

/* ── 첫 화면 (홈) ── */
.hero { position:relative; overflow:hidden; background:var(--ink); color:#fff; padding:120px 0 150px; isolation:isolate }
.hero::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); z-index:-1 }
.blob { position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; z-index:-1; animation:float 14s ease-in-out infinite }
.blob.b1 { width:520px; height:520px; background:var(--acc); right:-120px; top:-140px }
.blob.b2 { width:380px; height:380px; background:var(--acc2); right:260px; bottom:-200px; animation-delay:-5s; opacity:.35 }
.blob.b3 { width:260px; height:260px; background:#8B5CF6; left:-80px; top:120px; animation-delay:-9s; opacity:.18 }
@keyframes float { 0%,100% { transform:translate(0,0) scale(1) } 33% { transform:translate(-40px,30px) scale(1.08) } 66% { transform:translate(30px,-20px) scale(.95) } }
.hero .eyebrow { color:var(--acc) }
.hero h1 { font-size:clamp(40px,7.4vw,96px); line-height:1.02; margin:18px 0 26px; letter-spacing:-2px; font-weight:800 }
.hero h1 .thin { font-weight:600; color:#D9DBE1 }
.rot { display:inline-block; position:relative; color:var(--acc); min-width:4ch }
.rot span { display:inline-block; animation:wordIn .6s cubic-bezier(.2,.8,.2,1) both }
@keyframes wordIn { from { opacity:0; transform:translateY(40%) rotate(4deg) } to { opacity:1; transform:none } }
.hero p.lead { font-size:18.5px; color:#B9BDC6; max-width:640px; margin:0 }
.btns { margin-top:36px; display:flex; gap:12px; flex-wrap:wrap }
.btn { display:inline-flex; align-items:center; gap:8px; padding:14px 22px; border-radius:999px; font-weight:700; text-decoration:none; font-size:15px; border:1px solid transparent; transition:transform .2s, background .2s, color .2s }
.btn:hover { transform:translateY(-2px) }
.btn.primary { background:var(--acc); color:#fff } .btn.primary:hover { background:#ff6e63 }
.btn.ghost { border-color:rgba(255,255,255,.3); color:#fff } .btn.ghost:hover { background:#fff; color:var(--ink) }
.btn.dark { background:var(--ink); color:#fff }
.btn.line { border-color:var(--line); background:#fff; color:var(--ink) }
.btn.small { padding:9px 16px; font-size:14px }
.scroll-hint { position:absolute; left:50%; bottom:110px; transform:translateX(-50%); font-size:12px; letter-spacing:3px; color:#8C919C; text-transform:uppercase }
.scroll-hint::after { content:""; display:block; width:1px; height:34px; background:linear-gradient(#8C919C, transparent); margin:8px auto 0; animation:drop 1.8s ease-in-out infinite }
@keyframes drop { 0% { transform:scaleY(0); transform-origin:top } 50% { transform:scaleY(1); transform-origin:top } 51% { transform-origin:bottom } 100% { transform:scaleY(0); transform-origin:bottom } }

/* ── 대각선 띠 ── */
.tapes { position:relative; height:190px; margin-top:-96px; z-index:5; pointer-events:none }
.tape { position:absolute; left:-10%; width:120%; overflow:hidden; white-space:nowrap; padding:16px 0; font-weight:800; font-size:clamp(18px,2.2vw,28px); letter-spacing:.5px; text-transform:uppercase; box-shadow:0 10px 30px rgba(0,0,0,.18) }
.tape.t1 { top:30px; background:var(--acc); color:#fff; transform:rotate(-4deg) }
.tape.t2 { top:92px; background:#fff; color:var(--ink); transform:rotate(3deg); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink) }
.tape .track { display:inline-flex; gap:0; animation:marquee 36s linear infinite }
.tape.t2 .track { animation-direction:reverse; animation-duration:44s }
.tape .track span { padding:0 22px }
.tape .track span.star { color:var(--ink) } .tape.t2 .track span.star { color:var(--acc) }
@keyframes marquee { from { transform:translateX(0) } to { transform:translateX(-50%) } }
.tape-solo { position:relative; height:84px; overflow:hidden; pointer-events:none }
.tape-solo .tape { top:14px; transform:rotate(-2deg) }

/* ── 공통 섹션 ── */
section.block { padding:92px 0 }
section.alt { background:var(--bg) }
section.dark { background:var(--ink); color:#fff }
section.dark .sub { color:#B9BDC6 }
.eyebrow { color:var(--acc); font-weight:800; font-size:12.5px; letter-spacing:3px; text-transform:uppercase; display:inline-flex; align-items:center; gap:10px }
.eyebrow::before { content:""; width:22px; height:2px; background:currentColor; display:inline-block }
h2 { font-size:clamp(30px,4.4vw,52px); margin:10px 0 14px; letter-spacing:-1px; line-height:1.12; font-weight:800 }
h2 em { font-style:normal; color:var(--acc) }
h3 { line-height:1.35 }
.sub { color:var(--m); margin:0 0 36px; max-width:720px; font-size:16.5px }
.row-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap }
.row-head .sub { margin-bottom:0 }
.grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.grid.two { grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)) }
.card { background:#fff; border:1px solid var(--line); border-radius:22px; padding:26px; transition:transform .25s, box-shadow .25s, border-color .25s }
.card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(21,23,28,.08); border-color:#d9dce2 }
.card .ic { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:22px; background:var(--acc-soft); margin-bottom:16px }
.card h3 { margin:0 0 6px; font-size:18.5px }
.card p { margin:0; color:var(--m); font-size:15px }
.card ul { margin:12px 0 0; padding-left:18px; color:var(--m); font-size:14.5px }
a.card { text-decoration:none; display:block }
.more { display:inline-flex; gap:6px; margin-top:16px; font-weight:800; font-size:14px; color:var(--acc) }

/* ── 좌우로 넘기는 사업분야 ── */
.hscroll { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 20px 26px; margin:0 -20px; scrollbar-width:thin; scrollbar-color:var(--acc) transparent }
.hscroll::-webkit-scrollbar { height:6px } .hscroll::-webkit-scrollbar-thumb { background:var(--acc); border-radius:3px }
.bcard { flex:0 0 min(360px, 84vw); scroll-snap-align:start; border-radius:28px; padding:30px; position:relative; overflow:hidden; color:#fff; min-height:380px; display:flex; flex-direction:column; text-decoration:none; transition:transform .3s }
.bcard:hover { transform:translateY(-6px) rotate(-.6deg) }
.bcard .num { font-size:84px; font-weight:800; line-height:1; opacity:.25; margin-bottom:auto }
.bcard h3 { font-size:24px; margin:18px 0 8px }
.bcard p { margin:0; opacity:.85; font-size:15px }
.bcard ul { margin:14px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px }
.bcard li { font-size:12.5px; font-weight:700; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.18) }
.bcard .emo { position:absolute; right:22px; top:22px; font-size:40px; transition:transform .4s }
.bcard:hover .emo { transform:rotate(-12deg) scale(1.15) }
.bcard.c1 { background:linear-gradient(150deg, var(--acc), var(--acc2)) }
.bcard.c2 { background:var(--ink) }
.bcard.c3 { background:linear-gradient(150deg, #2A2D36, #4A3A3A) }
.bcard.c4 { background:linear-gradient(150deg, #FF8A5B, #FFB36B); color:var(--ink) } .bcard.c4 li { background:rgba(21,23,28,.1) }
.hs-nav { display:flex; gap:8px }
.hs-nav button { width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:#fff; font-size:18px; cursor:pointer; transition:background .2s, color .2s }
.hs-nav button:hover { background:var(--ink); color:#fff }

/* ── 자체 서비스 ── */
.prod { border-radius:30px; padding:34px; position:relative; overflow:hidden; text-decoration:none; display:flex; flex-direction:column; min-height:360px; transition:transform .3s }
.prod:hover { transform:translateY(-6px) }
.prod.tapa { background:linear-gradient(150deg,#FF5A4E 0%,#FF9A6B 100%); color:#fff }
.prod.jeongi { background:#0D0E09; color:#fff; border:1px solid #2A2B1E }
.prod.jeongi::after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(245,230,20,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(245,230,20,.06) 1px, transparent 1px); background-size:28px 28px; pointer-events:none }
.prod .top { display:flex; align-items:center; gap:14px; position:relative; z-index:1 }
.prod .top img { width:64px; height:64px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.25) }
.prod h3 { margin:0; font-size:26px }
.prod p { position:relative; z-index:1; margin:16px 0 0; opacity:.9; max-width:440px }
.prod .more { color:inherit; margin-top:auto; padding-top:22px; position:relative; z-index:1 }
.badge { display:inline-block; font-size:12px; font-weight:800; padding:4px 11px; border-radius:999px; background:rgba(255,255,255,.22); color:inherit; margin-left:8px; vertical-align:middle }
.badge.y { background:#F5E614; color:#1A1A00 }
.badge.g { background:#E9F8EF; color:#18794E }

/* ── 자동으로 흐르는 화면 띠 ── */
.shots-marquee { overflow:hidden; padding:10px 0; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) }
.shots-marquee .track { display:flex; gap:16px; width:max-content; animation:marquee 60s linear infinite }
.shots-marquee:hover .track { animation-play-state:paused }
.shots-marquee img { width:190px; border-radius:20px; box-shadow:0 12px 30px rgba(0,0,0,.18); transform:rotate(-2deg); transition:transform .3s }
.shots-marquee img:nth-child(even) { transform:rotate(2deg) translateY(14px) }
.shots-marquee img:hover { transform:scale(1.06) }
.shots { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory }
.shots img { width:210px; flex:none; border-radius:18px; border:1px solid var(--line); scroll-snap-align:start }

/* ── 숫자 띠 ── */
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12) }
.facts div { padding:34px 24px; border-right:1px solid rgba(255,255,255,.12) }
.facts div:last-child { border-right:0 }
.facts .big { font-size:clamp(36px,4.4vw,58px); font-weight:800; line-height:1; color:var(--acc); white-space:nowrap }
.facts span { display:block; color:#B9BDC6; margin-top:10px; font-size:14.5px }

/* ── 문의 띠 ── */
.cta { background:var(--acc); color:#fff; border-radius:34px; padding:64px 44px; position:relative; overflow:hidden }
.cta::before { content:"place lab. place lab. place lab. place lab."; position:absolute; left:-2%; bottom:-34px; font-family:Poppins,sans-serif; font-weight:800; font-size:120px; letter-spacing:-4px; color:rgba(255,255,255,.12); white-space:nowrap; pointer-events:none }
.cta h2 { color:#fff; margin-top:0 }
.cta p { margin:0; font-size:17px; opacity:.92 }
.cta a.mail { display:inline-block; margin-top:26px; font-family:Poppins,sans-serif; font-weight:800; font-size:clamp(20px,3.2vw,34px); color:#fff; text-decoration:none; border-bottom:3px solid #fff; position:relative }

/* ── 하위 페이지 머리 ── */
.page-head { background:var(--ink); color:#fff; padding:84px 0 110px; position:relative; overflow:hidden; isolation:isolate }
.page-head::before { content:""; position:absolute; width:440px; height:440px; border-radius:50%; background:var(--acc); filter:blur(80px); opacity:.35; right:-120px; top:-160px; z-index:-1; animation:float 16s ease-in-out infinite }
.page-head h1 { margin:12px 0 10px; font-size:clamp(34px,5.4vw,64px); line-height:1.1; letter-spacing:-1.2px; font-weight:800 }
.page-head p { margin:0; color:#B9BDC6; font-size:17px; max-width:720px }
.page-head + .tape-solo { margin-top:-46px }

.split { display:grid; gap:44px; grid-template-columns:1fr 1fr; align-items:start }
@media (max-width:860px) { .split { grid-template-columns:1fr } }
.prose p { color:#3D414B; margin:0 0 16px; font-size:16px }
.sign { margin-top:24px; font-weight:800 }
.timeline { list-style:none; margin:0; padding:0; border-left:2px solid var(--line) }
.timeline li { position:relative; padding:0 0 24px 24px }
.timeline li::before { content:""; position:absolute; left:-8px; top:8px; width:14px; height:14px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 5px var(--acc-soft) }
.timeline b { display:block; font-size:14px; color:var(--acc); font-family:Poppins,sans-serif }
dl.info { display:grid; grid-template-columns:170px 1fr; gap:12px 18px; margin:0; background:#fff; border:1px solid var(--line); border-radius:22px; padding:28px }
dl.info dt { color:var(--m); font-weight:700 } dl.info dd { margin:0 }
@media (max-width:560px) { dl.info { grid-template-columns:1fr } dl.info dd { margin-bottom:10px } }
.svc { display:flex; gap:16px; align-items:center; margin-bottom:12px }
.svc img { width:68px; height:68px; border-radius:18px; flex:none }
.svc h3 { margin:0; font-size:22px }
.feat { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) }
.note { background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:16px 20px; color:var(--m); font-size:14.5px }
.note.warn { background:#FFFBE6; border-color:#F2E39B; color:#6B5B00 }
table.list { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden }
table.list th, table.list td { padding:13px 16px; border-bottom:1px solid var(--line); text-align:left; font-size:14.5px; vertical-align:top }
table.list th { background:var(--bg); font-weight:700 }
table.list tr:last-child td { border-bottom:0 }
table.list a { color:var(--acc); font-weight:700; text-decoration:none }
.doc { max-width:840px }
.doc h2 { font-size:24px; margin:40px 0 10px; letter-spacing:-.3px }
.doc h3 { font-size:17px; margin:22px 0 6px }
.doc p, .doc li { color:#3D414B; font-size:15px }
.doc table { border-collapse:collapse; width:100%; margin:8px 0 }
.doc td, .doc th { border:1px solid var(--line); padding:8px 10px; font-size:14px; text-align:left; vertical-align:top }
.doc th { background:var(--bg) }
.muted { color:var(--m); font-size:14px }
.posts { display:grid; gap:14px }
.post { border:1px solid var(--line); border-radius:20px; padding:22px 24px; background:#fff; transition:transform .2s, border-color .2s }
.post:hover { transform:translateX(6px); border-color:var(--acc) }
.post time { color:var(--acc); font-size:13.5px; font-weight:700; font-family:Poppins,sans-serif }
.post h3 { margin:4px 0 6px; font-size:18px }
.post p { margin:0; color:#3D414B; font-size:15px }

/* ── 꼬리말 ── */
footer { background:var(--ink); color:#8C919C; padding:56px 0 40px; font-size:13.5px; position:relative; overflow:hidden }
footer .bigword { font-family:Poppins,sans-serif; font-weight:800; font-size:clamp(64px,13vw,180px); letter-spacing:-6px; line-height:.9; color:#fff; margin:0 0 34px }
footer .bigword b { color:var(--acc) }
footer .links a { color:#fff; margin-right:20px; text-decoration:none; font-weight:600 }
footer .links a:hover { color:var(--acc) }
footer p { margin:14px 0 0 }

/* ── 스크롤하면 나타남 ── */
.rv { opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1) }
.rv.in { opacity:1; transform:none }
.rv.d1 { transition-delay:.1s } .rv.d2 { transition-delay:.2s } .rv.d3 { transition-delay:.3s }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important }
  .rv { opacity:1; transform:none }
}

/* 휴대폰 */
@media (max-width:700px) {
  .scroll-hint { display:none }
  .hero { padding:84px 0 130px }
  .prod { min-height:0 }
  .bcard { min-height:340px }
  .cta { padding:44px 26px }
  .facts div { border-right:0; border-bottom:1px solid rgba(255,255,255,.12) }
}