
:root{--bg:#101113;--fg:#f3f1eb;--muted:#999da5;--blue:#587cff;--line:#303237}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--fg);font-family:Arial,'Malgun Gothic',sans-serif}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}header{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;border-bottom:1px solid var(--line);position:sticky;top:0;background:#101113ef;z-index:10}.logo{font-size:25px;font-weight:900;letter-spacing:-2px}.logo small{font-size:10px;letter-spacing:2px;margin-left:12px;color:var(--muted)}nav{display:flex;gap:30px;font-size:13px}.pill,.btn{border:1px solid #555861;border-radius:30px;padding:13px 23px;display:inline-flex;align-items:center;gap:20px;background:transparent;color:var(--fg)}.pill{font-size:11px;padding:9px 14px}.dot{display:inline-block;width:6px;height:6px;background:var(--blue);border-radius:50%;margin-right:8px}.hero{min-height:690px;height:calc(100svh - 84px);max-height:1000px;position:relative;overflow:hidden;padding:60px 5% 40px;display:flex;flex-direction:column;justify-content:space-between}.art{position:absolute;inset:0;background:radial-gradient(ellipse at 67% 54%,#4966a277,transparent 42%),linear-gradient(125deg,#17191e 20%,#212d48 58%,#101113 100%);z-index:-1}.orb{position:absolute;width:440px;height:440px;left:53%;top:15%;border-radius:50%;background:radial-gradient(circle at 33% 25%,#e2e8f9,#7289c1 30%,#253c6b 52%,#090d1c 75%);box-shadow:inset -28px -15px 50px #080d20,0 50px 100px #090d20;transform:rotate(-25deg)}.ring{position:absolute;width:750px;height:180px;border:2px solid #a5bce877;border-radius:50%;left:42%;top:40%;transform:rotate(-32deg);box-shadow:0 0 30px #6b8fd233,inset 0 0 30px #6b8fd244}.hero-top,.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}.hero h1{font-size:clamp(65px,8.5vw,138px);line-height:1.08;letter-spacing:-7px;margin:20px 0 25px;font-weight:800}.hero h1 span{color:var(--blue)}.hero-copy{font-size:16px;line-height:1.9;max-width:420px}.hero .label{position:absolute;right:5%;top:38%;font-size:10px;letter-spacing:3px;writing-mode:vertical-rl;color:#b9c5df}.hero-bottom{border-top:1px solid #ffffff25;padding-top:23px}.hero-bottom p{font-size:12px;color:#b0b5c2}.blue{background:var(--blue);border-color:var(--blue);color:white}.intro{padding:100px 5%;display:grid;grid-template-columns:1fr 2fr;gap:70px;border-bottom:1px solid var(--line)}.intro h2{font-size:clamp(28px,3.6vw,52px);line-height:1.5;letter-spacing:-2px;margin:0}.intro p{color:var(--muted);font-size:15px;line-height:1.9;max-width:670px}section{padding:95px 5%}.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:38px}h2{font-size:clamp(38px,5vw,70px);letter-spacing:-2px;margin:14px 0}.section-head p{font-size:13px;color:var(--muted);line-height:1.8}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:25px}.filters button{background:transparent;color:#aaa;border:1px solid #393c43;border-radius:20px;padding:9px 17px;font-size:12px}.filters button.active{background:var(--fg);color:var(--bg);border-color:var(--fg)}.works{display:grid;grid-template-columns:1fr 1fr;gap:35px 24px}.work{border:0;background:none;text-align:left;color:inherit;padding:0}.visual{height:310px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.visual:after{content:'CONCEPT / 기획 예시';position:absolute;top:19px;left:19px;font-size:9px;letter-spacing:2px;color:#fff9}.v1{background:radial-gradient(ellipse at 50% 65%,#ffb499,#904e48 36%,#2d262a 75%)}.bottle{width:82px;height:145px;border-radius:10px 10px 24px 24px;background:linear-gradient(90deg,#ddd6bb66,#fff2cfdd,#be9c7077);box-shadow:25px 25px 40px #0005;position:relative;transform:rotate(-15deg)}.bottle:before{content:'';position:absolute;top:-29px;left:20px;width:42px;height:30px;background:#d4c8aa;border-radius:4px}.bottle:after{content:'SARANADA';font-size:9px;letter-spacing:2px;position:absolute;top:66px;left:9px;color:#4b3e32}.v2{background:linear-gradient(140deg,#0a293c,#367382 65%,#c1b9a1)}.building{width:220px;height:180px;background:repeating-linear-gradient(90deg,transparent 0 42px,#13272e 43px 48px),repeating-linear-gradient(0deg,#9fb6b9 0 45px,#1a3c47 46px 52px);transform:perspective(500px) rotateY(-23deg);box-shadow:30px 30px 0 #152c34}.v3{background:radial-gradient(circle at 70% 30%,#9f91df,#4a3a75 50%,#201b35)}.type-art{font-size:62px;font-weight:900;line-height:.95;letter-spacing:-4px;transform:rotate(-9deg);color:#dbd0ff}.v4{background:linear-gradient(130deg,#b0a58e,#e4d5b7,#837462)}.frame{width:140px;height:180px;background:linear-gradient(20deg,#6a806e,#c7c9b4 50%,#e4dbca);border:10px solid #f2ece0;transform:rotate(9deg);box-shadow:10px 15px 25px #0003;display:grid;place-items:center;color:#fff;font-size:40px}.work-caption{display:flex;justify-content:space-between;padding-top:16px;gap:10px}.work-caption strong{font-size:16px}.work-caption span{font-size:11px;color:var(--muted)}.work:hover .visual{filter:brightness(1.13)}.services{background:#eeede7;color:#17191c}.services .eyebrow,.services .section-head p{color:#73767d}.service-row{display:grid;grid-template-columns:65px 1.1fr 1fr 35px;align-items:center;gap:20px;border-top:1px solid #c8c9c6;padding:28px 0}.service-row:last-child{border-bottom:1px solid #c8c9c6}.service-row small{color:#757982}.service-row h3{font-size:25px;letter-spacing:-1px;margin:0 0 8px}.service-row p{font-size:13px;color:#6b7076;line-height:1.8;margin:0}.service-row .arrow{font-size:27px}.process{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}.step{border-top:1px solid var(--line);padding-top:25px}.step b{color:var(--blue);font-size:12px}.step h3{font-size:23px;margin:26px 0 12px}.step p{font-size:13px;color:var(--muted);line-height:1.9}.faq{padding-top:0;display:grid;grid-template-columns:1fr 1.5fr;gap:60px}details{border-top:1px solid var(--line);padding:22px 0}summary{cursor:pointer;font-size:15px}details p{color:var(--muted);font-size:13px;line-height:1.9}.contact{background:#1b2c68;display:grid;grid-template-columns:1fr 1fr;gap:70px}.contact h2{font-size:clamp(40px,5vw,70px);line-height:1.2}.contact p{color:#c3cbed;font-size:14px;line-height:1.9}.contact label{display:block;font-size:12px;margin:0 0 8px}.contact input,.contact select,.contact textarea{width:100%;border:0;border-bottom:1px solid #ffffff50;color:white;background:#ffffff08;padding:13px;margin-bottom:22px;border-radius:0}.contact select option{background:#1b2c68}.contact textarea{min-height:100px;resize:vertical}.form-note{font-size:12px!important}.contact .btn{background:#f3f1eb;color:#18224c;border:0}.status{padding:12px 0;line-height:1.7;font-size:13px}footer{padding:35px 5%;display:flex;justify-content:space-between;color:var(--muted);font-size:11px;gap:20px}.demo{background:#222631;color:#b7c6f7;padding:9px 5%;font-size:11px;text-align:center}dialog{background:#1b1e25;color:var(--fg);border:1px solid #4b5260;border-radius:14px;max-width:540px;width:90%;padding:32px}dialog::backdrop{background:#000b}dialog h3{font-size:26px}dialog p{color:#bbc0cb;line-height:1.9;font-size:14px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #85a1ff;outline-offset:5px}[hidden]{display:none!important}@media(max-width:760px){header{height:70px}.logo small,.pill,nav a:nth-child(3),nav a:nth-child(4){display:none}nav{gap:18px;font-size:12px}.hero{min-height:650px;height:85svh;padding-top:40px}.hero h1{letter-spacing:-4px}.orb{left:42%;top:25%;width:300px;height:300px;opacity:.65}.ring{left:15%;top:44%;width:500px}.hero-copy{font-size:13px;max-width:280px}.hero-top .eyebrow:last-child{display:none}.hero-bottom p{max-width:140px;line-height:1.7}.hero .label{display:none}.intro{grid-template-columns:1fr;gap:25px;padding:65px 6%}section{padding:65px 6%}.section-head{display:block}.works{grid-template-columns:1fr}.visual{height:280px}.service-row{grid-template-columns:28px 1fr 24px;gap:12px}.service-row>p{grid-column:2;grid-row:auto}.service-row .arrow{grid-column:3;grid-row:1}.service-row h3{font-size:21px}.process{grid-template-columns:1fr 1fr}.faq,.contact{grid-template-columns:1fr;gap:30px}.contact h2{margin-top:15px}footer{flex-direction:column}.work-caption{align-items:center}.work-caption strong{font-size:15px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.page-hero{padding:65px 5% 60px;border-bottom:1px solid var(--line)}.page-hero h1{font-size:clamp(42px,6vw,85px);letter-spacing:-3px;line-height:1.2;margin:25px 0}.page-hero p{max-width:680px;color:#a8adb8;font-size:16px;line-height:1.9}.breadcrumb{font-size:12px;color:#a8adb8}.catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.product-card{border:1px solid var(--line);padding:30px;display:flex;flex-direction:column;min-height:270px;transition:border-color .2s,transform .2s}.product-card:hover{border-color:var(--blue);transform:translateY(-3px)}.product-card h3{font-size:25px;line-height:1.4;margin:25px 0 12px}.product-card p{color:var(--muted);line-height:1.9;font-size:13px}.product-card .more{margin-top:auto;padding-top:20px;color:#9aafff;font-size:12px}.detail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:60px}.panel{border:1px solid var(--line);padding:28px;margin-bottom:22px}.panel h3{font-size:22px;margin:0 0 20px}.panel p,.panel li{font-size:14px;color:#acb1bc;line-height:2}.panel ul,.panel ol{padding-left:20px}.spec{display:flex;justify-content:space-between;gap:25px;border-top:1px solid var(--line);padding:16px 0;font-size:13px}.spec span{color:var(--muted)}.spec strong{text-align:right;font-weight:400}.detail-art{height:310px;background:radial-gradient(ellipse at 60% 30%,#536ca6,#202d48 45%,#14181f);display:flex;flex-direction:column;justify-content:space-between;padding:32px;margin:30px 0}.detail-art strong{font-size:42px;letter-spacing:-2px;max-width:440px}.detail-art small{color:#c0cbed;line-height:1.8}.category-links{display:flex;gap:9px;flex-wrap:wrap;margin-top:25px}.category-links a{padding:10px 17px;border:1px solid #4b4e57;border-radius:25px;font-size:12px}.category-links a[aria-current=page]{background:#f3f1eb;color:#141518}.notice{font-size:12px;color:var(--muted);line-height:1.9}.cta-section{background:#1b2c68;display:flex;align-items:center;justify-content:space-between;gap:30px}.cta-section h2{font-size:36px}.cta-section p{color:#b9c7ef;line-height:1.8;font-size:14px}@media(max-width:900px){.catalog{grid-template-columns:1fr 1fr}.detail-grid{grid-template-columns:1fr;gap:15px}}@media(max-width:600px){.catalog{grid-template-columns:1fr}.page-hero{padding:45px 6%}.page-hero h1{letter-spacing:-2px}.cta-section{align-items:flex-start;flex-direction:column}.detail-art strong{font-size:32px}}
header nav a{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:13px;background:rgba(0,255,232,.5);color:#101113;font-weight:600;white-space:nowrap;transition:background .2s;}
header nav{gap:10px;}
header nav a:hover{background:rgba(0,255,232,.75);}
@media(max-width:760px){header nav{gap:5px;}header nav a{padding:8px 8px;border-radius:10px;font-size:11px;}header .logo{font-size:22px;}}
@media(max-width:360px){header{padding-left:4%;padding-right:4%;}header nav a{padding:7px 6px;font-size:10px;}header .logo{font-size:20px;}}

header nav a{position:relative;background:transparent;color:#f3f1eb;border-radius:0;padding:8px 12px 13px;text-shadow:0 1px 8px #0009;}
header nav a:after{content:'';position:absolute;left:12px;right:12px;bottom:3px;height:4px;background:#00ffe8;pointer-events:none;}
header nav a:hover{background:transparent;color:#ffffff;}
header nav a:hover:after{height:6px;}
@media(max-width:760px){header nav a{padding:8px 8px 13px;}header nav a:after{left:8px;right:8px;height:3px;}}
@media(max-width:360px){header nav a{padding:7px 6px 12px;}header nav a:after{left:6px;right:6px;}}

header nav a:after{opacity:.5;}
