/* ============================================================
   DeepAgent — Shared Stylesheet
   ============================================================ */

:root{
--bg:#070d18;
--bg-1:#0a1628;
--bg-2:#0f1d33;
--surface:#13243f;
--line:rgba(255,255,255,0.08);
--line-strong:rgba(255,255,255,0.15);
--text:#e8eef7;
--text-2:#9aa8bd;
--text-3:#5e6b82;
--accent:#3b82f6;
--accent-2:#06b6d4;
--accent-3:#f59e0b;
--font-sans:'Pretendard Variable','Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,monospace;
--nav-h:63px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:var(--font-sans);
background:var(--bg);
color:var(--text);
line-height:1.6;
overflow-x:hidden;
word-break:keep-all;
overflow-wrap:break-word;
-webkit-font-smoothing:antialiased;
font-feature-settings:"ss01","ss02";
}
body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:1;
opacity:0.025;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grid-bg{
position:fixed;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
background-size:64px 64px;
mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 80%);
pointer-events:none;
z-index:0;
}
::selection{background:rgba(6,182,212,0.3);color:#fff}

/* 읽는 문구는 클릭해도 커서가 들어가거나 하이라이트가 번지지 않게 한다.
   복사할 일이 있는 값(이메일 · 회사 정보 · 뉴스 · 약관)만 선택할 수 있다. */
body{
-webkit-user-select:none;user-select:none;
-webkit-tap-highlight-color:transparent;
}
.fact-val,.fact-key,.contact-email,.channel-mail,.callout,
.news-title,.news-desc,.prose,.prose *,
.foot-links a,.home-foot a,a[href^="mailto"]{
-webkit-user-select:text;user-select:text;
}

/* 언어 전환 중 잠깐 흐려졌다 돌아온다 */
body{transition:opacity 0.13s ease}
body.lang-swap{opacity:0.35}
@media(prefers-reduced-motion:reduce){
body{transition:none}
body.lang-swap{opacity:1}
}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:2px}

/* ============================================================
   NAV
   ============================================================ */
.nav{
position:fixed;
top:0;left:0;right:0;
z-index:100;
padding:20px 48px;
display:flex;
justify-content:space-between;
align-items:center;
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
background:rgba(7,13,24,0.6);
border-bottom:1px solid var(--line);
}
.nav-logo{height:22px;opacity:0.95;display:block}
.nav-brand{display:flex;align-items:center;flex-shrink:0}
.nav-menu{
display:flex;gap:32px;
font-family:var(--font-mono);
font-size:12px;letter-spacing:0.05em;text-transform:uppercase;
}
.nav-menu a{
color:var(--text-2);text-decoration:none;transition:color 0.2s;
position:relative;padding-bottom:4px;white-space:nowrap;
}
.nav-menu a:hover{color:var(--text)}
.nav-menu a.active{color:var(--text)}
.nav-menu a.active::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.nav-cta{
padding:8px 18px;
border:1px solid var(--line-strong);
border-radius:999px;
font-family:var(--font-mono);
font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
color:var(--text);text-decoration:none;transition:all 0.2s;
white-space:nowrap;
}
.nav-cta:hover{background:var(--text);color:var(--bg)}
.nav-right{display:flex;align-items:center;gap:12px}
.lang-toggle{
padding:8px 14px;border:1px solid var(--line-strong);border-radius:999px;
background:transparent;color:var(--text-2);cursor:pointer;
font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;transition:all 0.2s;
}
.lang-toggle:hover{color:var(--text);border-color:var(--text-2)}

/* Mobile menu */
.nav-burger{
display:none;
width:40px;height:40px;
border:1px solid var(--line-strong);border-radius:8px;
background:transparent;cursor:pointer;
padding:0;position:relative;flex-shrink:0;
}
.nav-burger span{
position:absolute;left:11px;width:18px;height:1.5px;
background:var(--text);transition:all 0.3s ease;
}
.nav-burger span:nth-child(1){top:14px}
.nav-burger span:nth-child(2){top:19.5px}
.nav-burger span:nth-child(3){top:25px}
body.menu-open .nav-burger span:nth-child(1){top:19.5px;transform:rotate(45deg)}
body.menu-open .nav-burger span:nth-child(2){opacity:0}
body.menu-open .nav-burger span:nth-child(3){top:19.5px;transform:rotate(-45deg)}

@media(max-width:1080px){
:root{--nav-h:55px}
.nav{padding:16px 20px}
.nav-burger{display:block}
.nav-menu{
position:fixed;top:var(--nav-h);left:0;right:0;
flex-direction:column;gap:0;
background:rgba(7,13,24,0.97);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
border-bottom:1px solid var(--line);
padding:8px 20px 20px;
font-size:14px;
max-height:0;overflow:hidden;
opacity:0;pointer-events:none;
transition:max-height 0.35s ease,opacity 0.25s ease;
}
body.menu-open .nav-menu{
max-height:70vh;opacity:1;pointer-events:auto;overflow-y:auto;
}
.nav-menu a{padding:16px 0;border-bottom:1px solid var(--line)}
.nav-menu a.active::after{display:none}
.nav-menu a.active{color:var(--accent-2)}
.nav-cta{display:none}
}

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{
position:relative;
min-height:100vh;
display:flex;
align-items:center;
padding:120px 48px 80px;
z-index:2;
overflow:hidden;
}
.hero-watermark{
position:absolute;
left:-2%;
bottom:-8%;
width:104%;
opacity:0.04;
filter:blur(0.5px);
pointer-events:none;
user-select:none;
}
.hero-orb{
position:absolute;
right:-200px;
top:30%;
width:800px;
height:800px;
border-radius:50%;
background:radial-gradient(circle,rgba(59,130,246,0.18) 0%,rgba(6,182,212,0.06) 30%,transparent 70%);
filter:blur(40px);
animation:orb-float 14s ease-in-out infinite;
pointer-events:none;
}
@keyframes orb-float{
0%,100%{transform:translateY(0) translateX(0)}
50%{transform:translateY(40px) translateX(-30px)}
}
.hero-lineart{
position:absolute;
right:6%;
top:50%;
transform:translateY(-50%);
width:min(420px,38vw);
height:min(420px,38vw);
opacity:0.55;
pointer-events:none;
}
.hero-lineart svg{width:100%;height:100%;overflow:visible}
.hero-lineart .ring{fill:none;stroke:var(--accent-2);stroke-width:1;opacity:0.4}
.hero-lineart .ring-2{
stroke:var(--accent);opacity:0.3;
animation:rot 30s linear infinite;transform-origin:center;
}
.hero-lineart .ring-3{
stroke:var(--accent-2);opacity:0.2;
animation:rot 50s linear infinite reverse;transform-origin:center;
stroke-dasharray:2 6;
}
@keyframes rot{to{transform:rotate(360deg)}}
.hero-lineart .node{fill:var(--accent-2);opacity:0.7}
.hero-lineart .node-pulse{animation:pulse-node 3s ease-in-out infinite;transform-origin:center}
@keyframes pulse-node{0%,100%{opacity:0.5}50%{opacity:1}}
.hero-lineart .connector{
fill:none;stroke:var(--accent-2);stroke-width:0.8;opacity:0.3;stroke-dasharray:3 4;
}
.hero-lineart .center-node{fill:var(--text);opacity:0.9}
@media(max-width:1024px){.hero-lineart{display:none}}

.hero-inner{position:relative;max-width:1400px;margin:0 auto;width:100%;z-index:3}
@keyframes pulse{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:0.5;transform:scale(0.85)}
}
.hero-title{
font-size:clamp(40px,7vw,96px);
line-height:1.05;font-weight:700;letter-spacing:-0.03em;
margin-bottom:32px;
}
.hero-title .line{display:block;opacity:0;animation:fade-up 1s forwards}
.hero-title .line:nth-child(1){animation-delay:0.2s}
.hero-title .line:nth-child(2){animation-delay:0.4s}

/* ---- Gradient text ----
   Korean webfonts have no true italic, so browsers synthesise an oblique
   that gets clipped by background-clip:text. We keep the gradient, drop the
   fake italic, and give the inline box room for the slant and descenders.
   `color` stays set as the fallback for engines without background-clip.   */
.hero-title em,.hero-title .em,
.page-title em,
.contact-hero h2 em,
.cta-band h2 em{
display:inline-block;
color:var(--accent-2);
background:linear-gradient(120deg,var(--accent) 0%,var(--accent-2) 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
font-style:normal;
font-weight:inherit;
padding:0 0.06em 0.12em;
margin-bottom:-0.12em;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
.hero-title em,.hero-title .em,.page-title em,
.contact-hero h2 em,.cta-band h2 em{
-webkit-text-fill-color:var(--accent-2);background:none;
}
}
.hero-subtitle{
font-size:clamp(16px,1.4vw,20px);
color:var(--text-2);max-width:580px;line-height:1.7;
margin-bottom:56px;
opacity:0;animation:fade-up 1s 0.6s forwards;
}
.hero-actions{
display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px;
opacity:0;animation:fade-up 1s 0.75s forwards;
}
.hero-meta{
display:flex;gap:48px;
font-family:var(--font-mono);
font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
color:var(--text-3);
opacity:0;animation:fade-up 1s 0.9s forwards;
flex-wrap:wrap;
}
.hero-meta-item{display:flex;flex-direction:column;gap:6px}
.hero-meta-val{color:var(--text);font-size:13px;font-weight:500}
@keyframes fade-up{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}

/* ============================================================
   PAGE HERO (subpages)
   ============================================================ */
.page-hero{
position:relative;z-index:2;
padding:148px 48px 64px;
border-bottom:1px solid var(--line);
overflow:hidden;
}
.page-hero::after{
content:"";position:absolute;right:-10%;top:-40%;
width:700px;height:700px;border-radius:50%;
background:radial-gradient(circle,rgba(59,130,246,0.13) 0%,rgba(6,182,212,0.04) 40%,transparent 70%);
filter:blur(50px);pointer-events:none;
}
.page-hero-inner{position:relative;z-index:2;max-width:1400px;margin:0 auto}
.breadcrumb{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
color:var(--text-3);margin-bottom:28px;
}
.breadcrumb a{color:var(--text-3);text-decoration:none;transition:color 0.2s}
.breadcrumb a:hover{color:var(--text-2)}
.breadcrumb .sep{opacity:0.5}
.breadcrumb .cur{color:var(--accent-2)}
.page-title{
font-size:clamp(34px,4.6vw,68px);
line-height:1.08;font-weight:700;letter-spacing:-0.03em;
margin-bottom:24px;max-width:900px;
}
.page-lead{
font-size:clamp(14px,1.15vw,17px);
color:var(--text-2);max-width:660px;line-height:1.75;
}
@media(max-width:768px){
.page-hero{padding:112px 20px 44px}
}

/* ============================================================
   SECTIONS / SHARED PRIMITIVES
   ============================================================ */
section{position:relative;z-index:2;padding:96px 48px}
/* 페이지 히어로 바로 다음 섹션은 위 여백을 줄인다 */
.page-hero+section{padding-top:72px}
.container{max-width:1400px;margin:0 auto}
.container-narrow{max-width:900px;margin:0 auto}
.section-label{
display:flex;align-items:center;gap:14px;
font-family:var(--font-mono);
font-size:11px;letter-spacing:0.15em;text-transform:uppercase;
color:var(--text-3);margin-bottom:32px;
}
.section-label::before{content:"";width:32px;height:1px;background:var(--text-3)}
.section-title{
font-size:clamp(32px,4.5vw,56px);
line-height:1.1;font-weight:600;letter-spacing:-0.02em;
margin-bottom:24px;max-width:900px;
}
.section-desc{
font-size:18px;color:var(--text-2);max-width:680px;
line-height:1.7;margin-bottom:56px;
}
.section-alt{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-1) 100%);border-top:1px solid var(--line)}
.section-bordered{border-top:1px solid var(--line)}
@media(max-width:768px){
section{padding:64px 20px}
.hero{padding:100px 20px 60px}
.hero-meta{flex-wrap:wrap;gap:24px}
.section-desc{margin-bottom:36px}
}

/* Buttons */
.btn{
display:inline-flex;align-items:center;gap:10px;
padding:14px 26px;border-radius:999px;
font-family:var(--font-mono);font-size:12px;
letter-spacing:0.1em;text-transform:uppercase;
text-decoration:none;cursor:pointer;transition:all 0.25s ease;
border:1px solid var(--line-strong);color:var(--text);background:transparent;
}
.btn:hover{border-color:var(--text-2);transform:translateY(-1px)}
.btn-primary{
background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
border-color:transparent;color:#04101f;font-weight:600;
}
.btn-primary:hover{opacity:0.9;transform:translateY(-1px)}
.btn .arr{transition:transform 0.25s ease}
.btn:hover .arr{transform:translateX(4px)}

/* Reveal animation */
.reveal{
opacity:0;transform:translateY(40px);
transition:opacity 0.8s ease,transform 0.8s ease;
}
.reveal.in{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
.reveal{opacity:1;transform:none}
html{scroll-behavior:auto}
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:40px}}
.about-text{font-size:20px;color:var(--text);line-height:1.8;font-weight:300}
.about-text strong{color:var(--accent-2);font-weight:500}
.about-text p+p{margin-top:24px}
.about-pillars{
display:flex;flex-direction:column;gap:1px;
background:var(--line);border:1px solid var(--line);border-radius:2px;
}
.pillar{
background:var(--bg-1);padding:32px 28px;
display:grid;grid-template-columns:40px 1fr;gap:24px;align-items:start;
transition:background 0.3s;
}
.pillar:hover{background:var(--bg-2)}
.pillar-num{
font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;
color:var(--accent);padding-top:4px;
}
.pillar-title{font-size:17px;font-weight:600;margin-bottom:8px;letter-spacing:-0.01em}
.pillar-desc{font-size:14px;color:var(--text-2);line-height:1.6}

/* Vision / value blocks */
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px}
@media(max-width:900px){.value-grid{grid-template-columns:1fr}}
.value-card{background:var(--bg-1);padding:44px 36px;transition:background 0.3s}
.value-card:hover{background:var(--bg-2)}
.value-num{
font-family:var(--font-mono);font-size:11px;color:var(--accent-2);
letter-spacing:0.15em;margin-bottom:24px;
}
.value-title{font-size:22px;font-weight:600;margin-bottom:14px;letter-spacing:-0.01em}
.value-desc{font-size:15px;color:var(--text-2);line-height:1.75}

/* Definition list (회사 개요 표) */
.fact-table{border-top:1px solid var(--line)}
.fact-row{
display:grid;grid-template-columns:200px 1fr;gap:32px;
padding:22px 4px;border-bottom:1px solid var(--line);align-items:baseline;
}
.fact-key{
font-family:var(--font-mono);font-size:11px;color:var(--text-3);
letter-spacing:0.12em;text-transform:uppercase;
}
.fact-val{font-size:15px;color:var(--text);line-height:1.7}
.fact-val small{display:block;color:var(--text-3);font-size:12px;margin-top:4px}
@media(max-width:768px){
.fact-row{grid-template-columns:1fr;gap:8px;padding:18px 4px}
}

/* Two-column variant — keeps long fact lists from leaving a tall empty gutter */
.fact-table.two-col{
display:grid;grid-template-columns:1fr 1fr;
column-gap:64px;
}
.fact-table.two-col .fact-row{grid-template-columns:130px 1fr;gap:24px}
@media(max-width:1100px){
.fact-table.two-col{column-gap:40px}
.fact-table.two-col .fact-row{grid-template-columns:110px 1fr;gap:16px}
}
@media(max-width:820px){
.fact-table.two-col{grid-template-columns:1fr;column-gap:0}
.fact-table.two-col .fact-row{grid-template-columns:1fr;gap:8px;padding:18px 4px}
}

/* ============================================================
   BRANDS
   ============================================================ */
.brand-row{
display:grid;grid-template-columns:140px 1fr 1fr;gap:60px;
padding:60px 0;border-bottom:1px solid var(--line);
align-items:start;position:relative;
transition:padding-left 0.4s ease;
}
.brand-row:hover{padding-left:24px}
.brand-row:hover .brand-arrow{transform:translateX(8px);color:var(--accent-2)}
.brand-row:first-of-type{padding-top:0}
.brand-row:last-of-type{border-bottom:none}
.brand-index{font-family:var(--font-mono);font-size:13px;color:var(--text-3);letter-spacing:0.1em}
.brand-index .num{
display:block;font-size:64px;font-weight:300;
color:var(--text);line-height:1;margin-bottom:8px;letter-spacing:-0.04em;
}
.brand-main{display:flex;flex-direction:column;gap:16px}
.brand-name{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.brand-name h3{font-size:42px;font-weight:700;letter-spacing:-0.02em}
.brand-tag{
font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
color:var(--accent-2);padding:4px 10px;
border:1px solid var(--line-strong);border-radius:4px;
}
.brand-tag.dev{color:var(--accent-3)}
.brand-tag.com{color:#8b5cf6;border-color:rgba(139,92,246,0.35)}
.brand-headline{font-size:20px;font-weight:500;color:var(--text);line-height:1.4;letter-spacing:-0.01em}
.brand-detail .brand-desc{max-width:720px;margin-top:12px;font-size:14px}
.brand-alias{font-size:0.5em;font-weight:300;color:var(--text-3)}
.brand-desc{font-size:15px;color:var(--text-2);line-height:1.7;max-width:520px}
.brand-features{display:flex;flex-direction:column;gap:12px;padding-top:8px}
.feature{
display:grid;grid-template-columns:90px 1fr;gap:16px;
font-size:13px;padding:10px 0;border-bottom:1px dashed var(--line);
}
.feature:last-child{border:none}
.feature-key{
font-family:var(--font-mono);font-size:11px;color:var(--text-3);
letter-spacing:0.1em;text-transform:uppercase;padding-top:2px;
}
.feature-val{color:var(--text);line-height:1.5}
.brand-arrow{
position:absolute;right:0;top:60px;
font-size:24px;color:var(--text-3);transition:all 0.3s;
}
.brand-row.dev{opacity:0.6}
.brand-row.dev:hover{opacity:0.85}
@media(max-width:1024px){
.brand-row{grid-template-columns:1fr;gap:32px;padding:48px 0}
.brand-row:hover{padding-left:0}
.brand-index .num{font-size:42px}
.brand-name h3{font-size:32px}
.brand-arrow{display:none}
}

/* Brand deep-dive blocks (제품 상세) */
.brand-grid{
display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
background:var(--line);border:1px solid var(--line);border-radius:2px;
margin-top:34px;
}
.brand-grid .brand-detail{
background:var(--bg-1);padding:30px 32px;border-bottom:0;
transition:background 0.3s;
}
.brand-grid .brand-detail:hover{background:var(--bg-2)}
.brand-grid .brand-detail-head h3{font-size:26px}
.brand-grid .brand-headline{font-size:17px;margin-top:4px}
.brand-grid .brand-desc{max-width:none;margin-top:10px;font-size:13.5px;line-height:1.65}
/* 카드 안에서는 스펙을 박스 없이 얹는다 */
.brand-grid .spec-grid{
background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;
grid-template-columns:repeat(2,1fr);gap:0 24px;margin-top:20px;padding-top:18px;
}
.brand-grid .spec-card{background:transparent;padding:0}
.brand-grid .spec-card:hover{background:transparent}
@media(max-width:900px){
.brand-grid{grid-template-columns:1fr}
.brand-grid .brand-detail{padding:26px 24px}
}
@media(max-height:820px){
.brand-grid{margin-top:26px}
.brand-grid .brand-detail{padding:24px 26px}
.brand-grid .spec-grid{margin-top:16px;padding-top:14px}
}
@media(max-height:700px){
.brand-grid .brand-detail{padding:20px 22px}
.brand-grid .brand-detail-head h3{font-size:23px}
.brand-grid .brand-headline{font-size:16px}
.brand-grid .brand-desc{font-size:13px}
.brand-grid .spec-grid{margin-top:12px;padding-top:12px}
}

.brand-detail{
padding:40px 0;border-bottom:1px solid var(--line);scroll-margin-top:90px;
}
.brand-detail:last-child{border-bottom:none}
.brand-detail-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.brand-detail-head h3{font-size:clamp(26px,3.2vw,38px);font-weight:700;letter-spacing:-0.02em}
.spec-grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;margin-top:24px;
}
.spec-card{background:var(--bg-1);padding:26px 24px}
.spec-card-key{
font-family:var(--font-mono);font-size:10px;color:var(--text-3);
letter-spacing:0.15em;text-transform:uppercase;margin-bottom:12px;
}
.spec-card-val{font-size:15px;color:var(--text);line-height:1.75}
.spec-card-val strong{
color:var(--text-3);font-weight:500;font-size:12px;
letter-spacing:0.02em;margin-right:8px;
}

/* Brand summary cards (홈) */
.brand-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:1024px){.brand-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.brand-cards{grid-template-columns:1fr}}
.brand-card{
background:var(--bg-1);padding:36px 28px;
text-decoration:none;color:inherit;display:block;
transition:background 0.3s;position:relative;
}
.brand-card:hover{background:var(--bg-2)}
.brand-card:hover .brand-card-go{transform:translateX(4px);color:var(--accent-2)}
.brand-card-tag{
font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
color:var(--accent-2);margin-bottom:18px;
}
.brand-card-tag.dev{color:var(--accent-3)}
.brand-card-tag.com{color:#8b5cf6}
.brand-card h3{font-size:28px;font-weight:700;letter-spacing:-0.02em;margin-bottom:12px}
.brand-card p{font-size:14px;color:var(--text-2);line-height:1.65;margin-bottom:22px}
.brand-card-go{
font-family:var(--font-mono);font-size:11px;color:var(--text-3);
letter-spacing:0.1em;transition:all 0.25s;display:inline-block;
}

/* ============================================================
   TEAM
   ============================================================ */
.team-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
background:var(--line);border:1px solid var(--line);
}
@media(max-width:900px){.team-grid{grid-template-columns:1fr}}
.member{background:var(--bg-1);padding:48px 36px;transition:background 0.3s;position:relative}
.team-compact .member{
padding:24px 26px;
display:grid;grid-template-columns:46px 1fr;column-gap:18px;row-gap:0;align-items:start;
}
.team-compact .member-avatar{grid-column:1;grid-row:1/span 3;width:46px;height:46px;font-size:15px;margin-bottom:0}
.team-compact .member-name{grid-column:2;grid-row:1;font-size:17px;margin-bottom:2px}
.team-compact .member-role{grid-column:2;grid-row:2;font-size:10px;margin-bottom:12px}
.team-compact .member-desc{grid-column:2;grid-row:3;font-size:13px;line-height:1.65}
.team-compact+.advisor-block{margin-top:24px;padding:22px 26px}
@media(max-width:900px){.team-compact .member{padding:24px 22px}}
.member:hover{background:var(--bg-2)}
.member-avatar{
width:64px;height:64px;border-radius:50%;
background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
display:flex;align-items:center;justify-content:center;
font-family:var(--font-mono);font-size:20px;font-weight:600;
color:var(--bg);margin-bottom:28px;letter-spacing:-0.02em;
}
.member-name{font-size:24px;font-weight:600;margin-bottom:4px;letter-spacing:-0.01em}
.member-role{
font-family:var(--font-mono);font-size:11px;color:var(--accent-2);
letter-spacing:0.1em;text-transform:uppercase;margin-bottom:20px;
}
.member-desc{font-size:14px;color:var(--text-2);line-height:1.7}
.advisor-block{
margin-top:40px;padding:32px 36px;
background:var(--bg-1);border:1px solid var(--line);
border-left:3px solid var(--accent);
}
.advisor-label{
font-family:var(--font-mono);font-size:11px;color:var(--text-3);
letter-spacing:0.1em;text-transform:uppercase;margin-bottom:16px;
}
.advisor-list{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:768px){.advisor-list{grid-template-columns:1fr}.advisor-block{padding:28px 24px}}
.advisor-item{font-size:14px;color:var(--text)}
.advisor-item span{color:var(--text-3);font-size:12px;display:block;margin-top:4px}

/* ============================================================
   TIMELINE / IP
   ============================================================ */
.timeline{position:relative;padding-left:40px}
.timeline::before{
content:"";position:absolute;left:8px;top:8px;bottom:8px;width:1px;
background:linear-gradient(180deg,var(--accent) 0%,var(--accent-2) 50%,transparent 100%);
}
.tl-item{position:relative;padding-bottom:48px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
content:"";position:absolute;left:-37px;top:8px;
width:13px;height:13px;border-radius:50%;
background:var(--bg);border:2px solid var(--accent);
box-shadow:0 0 0 4px rgba(59,130,246,0.15);
}
.tl-item.future::before{border-color:var(--text-3);box-shadow:0 0 0 4px rgba(94,107,130,0.12)}
.tl-item.future .tl-date{color:var(--text-3)}
.tl-date{
font-family:var(--font-mono);font-size:12px;color:var(--accent-2);
letter-spacing:0.1em;margin-bottom:6px;text-transform:uppercase;
}
.tl-title{font-size:18px;font-weight:500;margin-bottom:6px}
.tl-desc{font-size:14px;color:var(--text-2);line-height:1.6;max-width:600px}

.ip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:64px}
@media(max-width:768px){.ip-grid{grid-template-columns:1fr}}
.ip-card{
padding:32px;background:var(--bg-1);
border:1px solid var(--line);border-radius:2px;
transition:border-color 0.3s,transform 0.3s;
}
.ip-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.ip-label{
font-family:var(--font-mono);font-size:10px;color:var(--text-3);
letter-spacing:0.15em;text-transform:uppercase;margin-bottom:16px;
}
.ip-value{font-size:22px;font-weight:600;margin-bottom:10px;letter-spacing:-0.01em}
.ip-sub{font-size:13px;color:var(--text-2);line-height:1.6}
.ip-list{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.ip-list li{list-style:none;font-size:13px;color:var(--text-2);padding-left:14px;position:relative}
.ip-list li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:1px;background:var(--text-3)}

/* ============================================================
   METRICS (IR)
   ============================================================ */
.metric-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
background:var(--line);border:1px solid var(--line);
}
@media(max-width:900px){.metric-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.metric-grid{grid-template-columns:1fr}}
.metric{background:var(--bg-1);padding:36px 28px}
.metric-key{
font-family:var(--font-mono);font-size:10px;color:var(--text-3);
letter-spacing:0.15em;text-transform:uppercase;margin-bottom:16px;
}
.metric-val{
font-size:clamp(28px,3.4vw,40px);font-weight:600;letter-spacing:-0.02em;
line-height:1.25;margin-bottom:8px;
color:var(--text);
}
.metric-val .unit{font-size:0.55em;font-weight:500;color:var(--accent-2);margin-left:2px;letter-spacing:0}
.metric-sub{font-size:13px;color:var(--text-2);line-height:1.55}

/* Note / callout */
.callout{
padding:28px 32px;background:var(--bg-1);
border:1px solid var(--line);border-left:3px solid var(--accent-3);
font-size:15px;color:var(--text-2);line-height:1.75;
}
.callout strong{color:var(--text);font-weight:600}
.callout.info{border-left-color:var(--accent-2)}
@media(max-width:768px){.callout{padding:22px 20px}}

/* ============================================================
   NEWS
   ============================================================ */
.news-list{border-top:1px solid var(--line)}
body[data-page="news"] .page-hero+section{padding-top:56px;padding-bottom:64px}
.news-item{
display:grid;grid-template-columns:104px 76px minmax(0,1fr);gap:22px;
padding:24px 4px;border-bottom:1px solid var(--line);
align-items:baseline;transition:padding-left 0.35s ease,background 0.3s;
}
.news-item:hover{padding-left:16px;background:rgba(255,255,255,0.015)}
.news-date{font-family:var(--font-mono);font-size:12px;color:var(--text-3);letter-spacing:0.08em}
.news-cat{
font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;
color:var(--accent-2);border:1px solid var(--line-strong);border-radius:4px;
padding:3px 8px;display:inline-block;justify-self:start;
}
.news-cat.ip{color:var(--accent-3);border-color:rgba(245,158,11,0.35)}
.news-cat.corp{color:#8b5cf6;border-color:rgba(139,92,246,0.35)}
.news-title{font-size:17px;font-weight:600;line-height:1.45;margin-bottom:6px;letter-spacing:-0.01em}
.news-desc{font-size:13px;color:var(--text-2);line-height:1.6;max-width:680px}
@media(max-width:900px){
.news-item{grid-template-columns:1fr;gap:8px;padding:20px 4px}
.news-item:hover{padding-left:4px}
}

/* News preview (홈) */
.news-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.news-preview{grid-template-columns:1fr}}
.news-pv{background:var(--bg-1);padding:34px 28px;transition:background 0.3s}
.news-pv:hover{background:var(--bg-2)}
.news-pv .news-date{display:block;margin-bottom:14px}
.news-pv h3{font-size:17px;font-weight:500;line-height:1.5;letter-spacing:-0.01em}

/* ============================================================
   CAREERS
   ============================================================ */
.job-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.job{
background:var(--bg-1);padding:32px 30px;
display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
transition:background 0.3s;
}
.job:hover{background:var(--bg-2)}
.job-title{font-size:20px;font-weight:600;margin-bottom:8px;letter-spacing:-0.01em}
.job-meta{
font-family:var(--font-mono);font-size:11px;color:var(--text-3);
letter-spacing:0.1em;text-transform:uppercase;
display:flex;gap:16px;flex-wrap:wrap;
}
.job-desc{font-size:14px;color:var(--text-2);line-height:1.7;margin-top:14px;max-width:640px}
.job-status{
font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
padding:8px 16px;border:1px solid var(--line-strong);border-radius:999px;
color:var(--text-2);white-space:nowrap;
}
.job-status.open{color:var(--accent-2);border-color:rgba(6,182,212,0.4)}
@media(max-width:768px){
.job{grid-template-columns:1fr;padding:26px 22px}
.job-status{justify-self:start}
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-hero{text-align:center;position:relative;overflow:hidden}
.contact-hero::before{
content:"";position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);
width:1000px;height:600px;
background:radial-gradient(ellipse,rgba(59,130,246,0.08) 0%,transparent 60%);
pointer-events:none;
}
.contact-inner{position:relative;max-width:800px;margin:0 auto}
.contact-hero h2{
font-size:clamp(36px,5vw,64px);font-weight:600;
letter-spacing:-0.02em;line-height:1.1;margin-bottom:32px;
}
.contact-desc{font-size:18px;color:var(--text-2);margin-bottom:48px;line-height:1.7}
.contact-email{
display:inline-block;font-family:var(--font-mono);
font-size:clamp(20px,3vw,36px);
color:var(--text);text-decoration:none;
padding:12px 0;position:relative;letter-spacing:-0.01em;transition:color 0.3s;
}
.contact-email::after{
content:"";position:absolute;left:0;bottom:8px;
width:100%;height:1px;background:var(--text);
transform-origin:left;transition:transform 0.4s ease;
}
.contact-email:hover{color:var(--accent-2)}
.contact-email:hover::after{background:var(--accent-2);transform:scaleX(1.02)}
.contact-info{
margin-top:64px;display:flex;justify-content:center;gap:64px;flex-wrap:wrap;
font-family:var(--font-mono);font-size:12px;color:var(--text-3);letter-spacing:0.1em;
}
.contact-info-item{text-align:left}
.contact-info-key{text-transform:uppercase;margin-bottom:8px}
.contact-info-val{color:var(--text);font-size:14px;letter-spacing:0}

/* Contact channel cards */
.channel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:768px){.channel-grid{grid-template-columns:1fr}}
.channel{
background:var(--bg-1);padding:40px 34px;
text-decoration:none;color:inherit;display:block;transition:background 0.3s;
}
.channel:hover{background:var(--bg-2)}
.channel:hover .channel-mail{color:var(--accent-2)}
.channel-key{
font-family:var(--font-mono);font-size:10px;color:var(--accent-2);
letter-spacing:0.15em;text-transform:uppercase;margin-bottom:18px;
}
.channel h3{font-size:21px;font-weight:600;margin-bottom:12px;letter-spacing:-0.01em}
.channel p{font-size:14px;color:var(--text-2);line-height:1.7;margin-bottom:20px}
.channel-mail{
font-family:var(--font-mono);font-size:14px;color:var(--text);
transition:color 0.25s;word-break:break-all;
}

/* Location cards */
.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.loc-grid{grid-template-columns:1fr}}
.loc-card{padding:32px;background:var(--bg-1);border:1px solid var(--line);transition:border-color 0.3s}
.loc-card:hover{border-color:var(--line-strong)}
.loc-key{
font-family:var(--font-mono);font-size:10px;color:var(--text-3);
letter-spacing:0.15em;text-transform:uppercase;margin-bottom:16px;
}
.loc-name{font-size:19px;font-weight:600;margin-bottom:8px}
.loc-addr{font-size:14px;color:var(--text-2);line-height:1.7}

/* ============================================================
   PROSE (개인정보처리방침 등)
   ============================================================ */
.prose{max-width:820px;font-size:15px;color:var(--text-2);line-height:1.85}
.prose h2{
font-size:22px;font-weight:600;color:var(--text);
margin:56px 0 18px;letter-spacing:-0.01em;
padding-top:24px;border-top:1px solid var(--line);
}
.prose h2:first-of-type{margin-top:0;border-top:none;padding-top:0}
.prose h3{font-size:16px;font-weight:600;color:var(--text);margin:28px 0 10px}
.prose p{margin-bottom:16px}
.prose ul,.prose ol{margin:0 0 18px 20px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--accent-2)}
.prose table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.prose th,.prose td{border:1px solid var(--line);padding:12px 14px;text-align:left}
.prose th{background:var(--bg-1);color:var(--text);font-weight:600;font-size:13px}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{
border-top:1px solid var(--line);
background:linear-gradient(180deg,var(--bg-1) 0%,var(--bg) 100%);
text-align:center;
}
.cta-band h2{
font-size:clamp(28px,4vw,44px);font-weight:600;
letter-spacing:-0.02em;line-height:1.2;margin-bottom:16px;
}
.cta-band p{font-size:17px;color:var(--text-2);margin-bottom:30px;line-height:1.7}
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
border-top:1px solid var(--line);
position:relative;z-index:2;
padding:64px 48px 36px;
}
.foot-top{
max-width:1400px;margin:0 auto;
display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;
padding-bottom:48px;border-bottom:1px solid var(--line);
}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}}
.foot-brand .foot-logo{height:20px;opacity:0.8;margin-bottom:20px;display:block}
.foot-tagline{font-size:14px;color:var(--text-2);line-height:1.7;max-width:280px}
.foot-col-title{
font-family:var(--font-mono);font-size:10px;color:var(--text-3);
letter-spacing:0.15em;text-transform:uppercase;margin-bottom:18px;
}
.foot-links{display:flex;flex-direction:column;gap:11px}
.foot-links a{font-size:14px;color:var(--text-2);text-decoration:none;transition:color 0.2s}
.foot-links a:hover{color:var(--text)}
.foot-bottom{
max-width:1400px;margin:0 auto;padding-top:28px;
display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
font-family:var(--font-mono);font-size:11px;color:var(--text-3);letter-spacing:0.1em;
}
.foot-bottom a{color:var(--text-3);text-decoration:none;transition:color 0.2s}
.foot-bottom a:hover{color:var(--text-2)}
@media(max-width:768px){
.site-footer{padding:48px 20px 28px}
.foot-bottom{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   ABOUT — HORIZONTAL VARIANTS (about.html)
   about-stack / pillars-row / value-row / timeline-h
   ============================================================ */

/* 본문 텍스트 위, 필러 4개는 가로 배치 */
.about-stack{display:block}
.about-stack .about-text{max-width:920px}

.pillars-row{
display:grid;grid-template-columns:repeat(4,1fr);
gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:2px;
margin-top:52px;
}
.pillars-row .pillar{
display:flex;flex-direction:column;
grid-template-columns:none;gap:0;
padding:24px 26px 26px;
position:relative;overflow:hidden;
}
.pillars-row .pillar::after{
content:"";position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 100%);
transform:scaleX(0);transform-origin:left;
transition:transform 0.4s ease;
}
.pillars-row .pillar:hover::after{transform:scaleX(1)}
.pillars-row .pillar-num{padding-top:0;margin-bottom:20px}
.pillars-row .pillar-body{display:flex;flex-direction:column;flex:1}
.pillars-row .pillar-desc{display:flex;flex-direction:column;flex:1}
.pillars-row .pillar-note{margin-top:auto}
.pillars-row .pillar-title{font-size:17px;margin-bottom:8px}
.pillars-row .pillar-desc{font-size:13px;line-height:1.6}
.pillar-note{
display:block;margin-top:14px;padding-top:13px;
border-top:1px solid var(--line);
font-size:12px;line-height:1.55;color:var(--text-3);
}
.pillars-row .pillar:hover .pillar-note{color:var(--text-2)}

/* Moat — Pillar 아래 같은 리듬으로 이어지는 블록 */
.moat-head{
display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;
margin-top:56px;padding-top:28px;border-top:1px solid var(--line);
}
.moat-label{
font-family:var(--font-mono);font-size:11px;letter-spacing:0.18em;
text-transform:uppercase;color:var(--accent-3);
}
.moat-lead{font-size:14px;color:var(--text-2);line-height:1.7;max-width:820px}
.moat-row{margin-top:26px}
.section-title+.moat-head{margin-top:44px;padding-top:0;border-top:0}
.moat-row .pillar-num{color:var(--accent-3)}
.pillar-head .moat-label{color:var(--accent)}
.moat-row .pillar::after{background:linear-gradient(90deg,var(--accent-3) 0%,var(--accent) 100%)}
.moat-row .pillar-title{font-size:16px}
@media(max-width:1100px){.moat-head{margin-top:44px}}
@media(max-width:600px){.moat-head{gap:10px}}
@media(max-width:1100px){
.pillars-row{grid-template-columns:repeat(2,1fr);margin-top:40px}
}
@media(max-width:600px){
.pillars-row{grid-template-columns:1fr}
.pillars-row .pillar{padding:28px 24px 30px}
.pillars-row .pillar-num{margin-bottom:18px}
}

/* 원칙 — 번호는 왼쪽, 내용은 오른쪽 (가로 구성) */
.value-row{margin-top:44px}
.value-row .value-card{
display:grid;grid-template-columns:auto 1fr;gap:18px;
align-items:start;padding:24px 26px;
}
.value-row .value-num{margin-bottom:0;padding-top:5px}
.value-row .value-title{font-size:17px;margin-bottom:8px}
.value-row .value-desc{font-size:13px;line-height:1.7}
@media(max-width:600px){
.value-row .value-card{grid-template-columns:1fr;gap:14px;padding:32px 24px}
}

/* 연혁 — 가로 타임라인 */
.timeline-h{
display:grid;grid-template-columns:repeat(4,1fr);
row-gap:44px;padding:0;
}
.timeline-h::before{display:none}
.timeline-h .tl-item{padding:38px 28px 0 0}
.timeline-h .tl-item::before{left:0;top:0}
.timeline-h .tl-item::after{
content:"";position:absolute;left:15px;right:0;top:6px;height:1px;
background:var(--accent);opacity:0.35;
}
.timeline-h .tl-item.future::after{background:var(--text-3);opacity:0.5}
.timeline-h .tl-item:last-child::after{
background:linear-gradient(90deg,var(--text-3) 0%,transparent 100%);opacity:0.5;
}
.timeline-h .tl-date{margin-bottom:8px}
.timeline-h .tl-title{font-size:15px;line-height:1.5;margin-bottom:8px}
.timeline-h .tl-desc{font-size:12.5px;max-width:none;line-height:1.6}
@media(max-width:1240px){.timeline-h{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.timeline-h{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
.timeline-h{grid-template-columns:1fr;row-gap:34px}
.timeline-h .tl-item{padding:34px 0 0 0}
.timeline-h .tl-item::after{right:0}
}

/* ============================================================
   HOME — 단일 화면(무스크롤) 레이아웃
   회사소개 / 지금 상태 / 최근 소식을 한 화면에 담습니다.
   폭이 좁거나 화면이 낮으면 자동으로 스크롤 문서로 되돌아갑니다.
   ============================================================ */
.home{
position:relative;z-index:2;
min-height:100dvh;
display:flex;flex-direction:column;justify-content:center;
padding:calc(var(--nav-h) + 28px) 48px 84px;
overflow:hidden;
}
/* 배경 무드 — 아주 느리게 흐르는 그라데이션 덩어리 */
.home-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.home-bg .blob{position:absolute;border-radius:50%;filter:blur(60px);will-change:transform}
.home-bg .b1{
width:820px;height:820px;right:-220px;top:-160px;
background:radial-gradient(circle,rgba(59,130,246,0.20) 0%,rgba(59,130,246,0.05) 45%,transparent 70%);
animation:blob-a 26s ease-in-out infinite;
}
.home-bg .b2{
width:640px;height:640px;left:-180px;bottom:-200px;
background:radial-gradient(circle,rgba(6,182,212,0.16) 0%,rgba(6,182,212,0.04) 45%,transparent 70%);
animation:blob-b 34s ease-in-out infinite;
}
.home-bg .b3{
width:520px;height:520px;right:24%;bottom:-160px;
background:radial-gradient(circle,rgba(139,92,246,0.13) 0%,transparent 68%);
animation:blob-c 42s ease-in-out infinite;
}
/* 가로로 아주 천천히 지나가는 빛줄기 */
.home-bg .beam{
position:absolute;top:0;bottom:0;width:36%;left:-40%;
background:linear-gradient(90deg,transparent 0%,rgba(6,182,212,0.05) 45%,rgba(59,130,246,0.07) 55%,transparent 100%);
animation:beam-sweep 22s linear infinite;
}
@keyframes blob-a{
0%,100%{transform:translate3d(0,0,0) scale(1)}
50%{transform:translate3d(-60px,60px,0) scale(1.08)}
}
@keyframes blob-b{
0%,100%{transform:translate3d(0,0,0) scale(1)}
50%{transform:translate3d(70px,-50px,0) scale(0.94)}
}
@keyframes blob-c{
0%,100%{transform:translate3d(0,0,0) scale(1)}
50%{transform:translate3d(-90px,-30px,0) scale(1.12)}
}
@keyframes beam-sweep{
0%{left:-40%;opacity:0}
12%{opacity:1}
88%{opacity:1}
100%{left:104%;opacity:0}
}
@media(prefers-reduced-motion:reduce){
.home-bg .blob,.home-bg .beam{animation:none}
.home-bg .beam{display:none}
}
.home-grid{
position:relative;z-index:2;
flex:1;min-height:0;
max-width:1400px;width:100%;margin:0 auto;
display:grid;grid-template-columns:minmax(0,640px);
align-items:center;
}

/* ---- 좌: 회사소개 ---- */
/* .home-intro / .hcard 는 <section> 이라 전역 section 패딩을 상속받는다 */
.home .home-intro{min-width:0;padding:0;display:flex;flex-direction:column}
.home-title{
font-size:clamp(34px,4.6vw,68px);
line-height:1.06;font-weight:700;letter-spacing:-0.03em;
margin-bottom:22px;
}
/* 영문은 같은 문장이 길어져 줄이 늘어나므로 한 단계 작게 */
html[lang="en"] .home-title{font-size:clamp(30px,3.6vw,52px);letter-spacing:-0.02em}
.home-title .line{display:block;opacity:0;animation:fade-up 1s forwards}
.home-title .line:nth-child(1){animation-delay:0.15s}
.home-title .line:nth-child(2){animation-delay:0.3s}
.home-sub{
font-size:clamp(14px,1.05vw,17px);color:var(--text-2);line-height:1.75;
max-width:600px;margin-bottom:32px;
opacity:0;animation:fade-up 1s 0.45s forwards;
}

.home-actions{
display:flex;gap:12px;flex-wrap:wrap;
padding-top:4px;
opacity:0;animation:fade-up 1s 0.75s forwards;
}

/* ---- 서브 페이지 배경 아트 (아주 옅게) ---- */
.page-canvas{
position:fixed;inset:0;width:100%;height:100%;
display:block;z-index:1;pointer-events:none;
opacity:0.5;
-webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 45%,rgba(0,0,0,0.28) 0%,rgba(0,0,0,0.62) 55%,#000 100%);
mask-image:radial-gradient(ellipse 78% 62% at 50% 45%,rgba(0,0,0,0.28) 0%,rgba(0,0,0,0.62) 55%,#000 100%);
}
@media(prefers-reduced-motion:reduce){.page-canvas{opacity:0.3}}

/* ---- 인터랙션 아트 : 화면 전면 ---- */
.home-canvas{
position:absolute;inset:0;width:100%;height:100%;
display:block;z-index:0;pointer-events:none;
/* 글자가 놓이는 왼쪽은 옅게 깔아 가독성을 지킨다 */
-webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,0.10) 0%,rgba(0,0,0,0.20) 26%,rgba(0,0,0,0.62) 52%,#000 76%);
mask-image:linear-gradient(100deg,rgba(0,0,0,0.10) 0%,rgba(0,0,0,0.20) 26%,rgba(0,0,0,0.62) 52%,#000 76%);
}
@media(max-width:1080px){
.home-canvas{
-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0.14) 0%,rgba(0,0,0,0.30) 38%,#000 72%);
mask-image:linear-gradient(180deg,rgba(0,0,0,0.14) 0%,rgba(0,0,0,0.30) 38%,#000 72%);
}
}

/* ---- 한 줄 푸터 ---- */
.home-foot{
z-index:2;position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
width:calc(100% - 96px);max-width:1400px;margin:0;
padding-top:18px;border-top:1px solid var(--line);
display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.1em;color:var(--text-3);
}
.home-foot-links{display:flex;gap:20px;flex-wrap:wrap}
.home-foot a{color:var(--text-3);text-decoration:none;transition:color 0.2s}
.home-foot a:hover{color:var(--text-2)}

/* ---- 노트북처럼 낮은 화면: 전체 스케일 한 단계 축소 ---- */
@media(max-height:820px){
.home{padding:calc(var(--nav-h) + 20px) 48px 76px}
.home-title{font-size:clamp(30px,3.7vw,50px);margin-bottom:18px}
html[lang="en"] .home-title{font-size:clamp(28px,3vw,44px)}
.home-sub{font-size:15px;margin-bottom:24px}
.home-actions{padding-top:2px}
.home-side{gap:18px}
.hcard{padding:20px 22px}
.hcard-head{padding-bottom:12px;margin-bottom:16px}
.now-grid{gap:18px 16px}
.now-val{font-size:20px}
.hnews a{padding:12px 0}
.home-foot{bottom:22px;padding-top:14px}
}
@media(max-height:700px){
.home{padding:calc(var(--nav-h) + 14px) 48px 68px}
.home-title{font-size:clamp(26px,3.2vw,42px);margin-bottom:14px}
html[lang="en"] .home-title{font-size:clamp(26px,2.6vw,38px)}
.home-sub{font-size:14px;margin-bottom:20px;line-height:1.7}
.home-actions{padding-top:0}
.home-side{gap:14px}
.hcard{padding:18px 20px}
.now-grid{gap:14px}
.now-val{font-size:19px}
.hnews a{padding:10px 0}
.home-foot{bottom:18px;padding-top:12px}
}

/* ---- 좁거나 낮은 화면: 스크롤 문서로 복귀 ---- */
@media(max-width:1080px){
.home{padding:calc(var(--nav-h) + 36px) 20px 24px}
.home-actions{margin-top:0;padding-top:0}
.home-foot{position:static;transform:none;width:100%;margin-top:36px;bottom:auto}
.home-grid{grid-template-columns:minmax(0,1fr);align-items:start;align-content:start}
.home-side{animation-delay:0.5s}
}
@media(max-width:620px){
.now-grid{gap:18px}
.home-foot{flex-direction:column;align-items:flex-start;gap:10px}
.home-foot-loc{display:none}
}

/* ============================================================
   SECTION SNAP — 섹션 하나가 한 화면 (body[data-snap="1"])
   스크롤을 내리면 다음 섹션 머리에서 멈춘다.
   proximity 를 쓰는 이유: 뷰포트보다 긴 섹션이 있어도
   가운데가 갇히지 않고 자유롭게 읽을 수 있다.
   ============================================================ */
html.snap{
scroll-snap-type:y proximity;
scroll-padding-top:var(--nav-h);
}
html.snap .page-hero,
html.snap section{
scroll-snap-align:start;
scroll-snap-stop:always;
}
html.snap .page-hero,
html.snap section{
display:flex;
align-items:center;
}
/* 스냅 정렬 지점이 nav 아래(scroll-padding-top)라 그만큼 높이를 뺀다 */
html.snap section{
min-height:calc(100vh - var(--nav-h));
min-height:calc(100dvh - var(--nav-h));
padding-top:40px;
padding-bottom:40px;
}
/* 첫 화면만 nav 를 덮고 시작하므로 위쪽 여백을 따로 준다 */
html.snap .page-hero{
min-height:100vh;
min-height:100dvh;
padding-top:calc(var(--nav-h) + 40px);
padding-bottom:40px;
}
html.snap .page-hero>.page-hero-inner,
html.snap section>.container,
html.snap section>.container-narrow{width:100%}

/* 슬라이드 안에서의 간격은 조금 더 촘촘하게 */
html.snap .section-title{margin-bottom:20px}
html.snap .section-desc{margin-bottom:40px}
html.snap .pillars-row{margin-top:36px}
html.snap .moat-head{margin-top:40px;padding-top:24px}
html.snap .section-title+.moat-head{margin-top:32px}
html.snap .value-row{margin-top:36px}
html.snap .advisor-block{margin-top:32px}
html.snap .fact-table{margin-top:8px}

/* 카드가 두 줄 들어가는 Structure 슬라이드도 한 화면에 담기도록 압축 */
html.snap section{padding-top:30px;padding-bottom:30px}
html.snap .section-title{font-size:clamp(28px,3.1vw,42px)}
html.snap .pillars-row{margin-top:24px}
html.snap .moat-head{margin-top:28px;padding-top:18px}
html.snap .section-title+.moat-head{margin-top:26px}
html.snap .pillars-row .pillar{padding:24px 24px 26px}
html.snap .pillars-row .pillar-num{margin-bottom:16px}
html.snap .pillars-row .pillar-title{font-size:17px;margin-bottom:8px}
html.snap .pillars-row .pillar-desc{font-size:13px}
html.snap .pillar-note{margin-top:10px;padding-top:10px;font-size:12px}
html.snap .moat-lead{font-size:14px}
html.snap .moat-row{margin-top:20px}

/* 노트북처럼 화면이 낮으면 한 단계 더 조인다 */
@media(max-height:820px){
html.snap .section-title{font-size:clamp(26px,2.8vw,36px)}
html.snap .pillars-row .pillar{padding:20px 22px 22px}
html.snap .pillars-row .pillar-num{margin-bottom:12px}
html.snap .moat-head{margin-top:22px;padding-top:14px}
html.snap .moat-row{margin-top:16px}
html.snap .pillar-note{margin-top:8px;padding-top:8px}
}

/* 아주 낮은 화면(1366x768 등) */
@media(max-height:730px){
html.snap section{padding-top:14px;padding-bottom:14px}
html.snap .section-title{font-size:clamp(20px,2vw,26px)}
html.snap .section-label{margin-bottom:12px}
html.snap .pillars-row{margin-top:14px}
html.snap .pillars-row .pillar{padding:12px 14px 14px}
html.snap .pillars-row .pillar-num{margin-bottom:6px}
html.snap .pillar-note{margin-top:4px;padding-top:4px}
html.snap .moat-head{margin-top:8px;padding-top:8px}
html.snap .moat-row{margin-top:8px}
html.snap .pillars-row .pillar-title{font-size:16px;margin-bottom:6px}
html.snap .pillars-row .pillar-desc{font-size:12.5px}
html.snap .pillar-note{font-size:11.5px}
html.snap .moat-head{margin-top:16px;padding-top:12px}
html.snap .fact-row{padding:13px 4px}
html.snap .value-row .value-card{padding:26px 26px}
}

/* 가장 낮은 노트북(1280x720 등) */
@media(max-height:700px){
html.snap section{padding-top:10px;padding-bottom:10px}
html.snap .section-title{font-size:clamp(22px,2.1vw,27px)}
html.snap .section-label{margin-bottom:14px}
html.snap .pillars-row .pillar{padding:12px 16px 14px}
html.snap .pillars-row .pillar-num{margin-bottom:9px}
html.snap .pillar-note{margin-top:6px;padding-top:6px}
html.snap .moat-head{margin-top:12px;padding-top:10px}
html.snap .moat-row{margin-top:12px}
html.snap .fact-row{padding:10px 4px}
}

/* 모바일·저모션 환경에서는 자유 스크롤 */
@media(max-width:1080px){
html.snap{scroll-snap-type:none}
html.snap .page-hero,
html.snap section{min-height:0;display:block;padding-top:72px;padding-bottom:72px}
html.snap .page-hero{padding-top:120px}
}
@media(prefers-reduced-motion:reduce){
html.snap{scroll-snap-type:none}
}

/* ============================================================
   ABOUT SLIDES — 다이어그램 / 2단 구성 / 보조 블록
   ============================================================ */

/* --- 히어로: 문구 + 다이어그램 2단 --- */
.hero-split{display:grid;grid-template-columns:minmax(0,760px)}
.hero-copy{min-width:0}

/* --- 히어로 2단 (제품·브랜드) --- */
.hero-2col{grid-template-columns:1fr minmax(300px,440px);gap:clamp(32px,5vw,72px);align-items:center}
.hero-2col .hero-visual{justify-self:center;width:100%;max-width:440px}
@media(max-width:1080px){
.hero-2col{grid-template-columns:1fr;gap:32px}
.hero-2col .hero-visual{max-width:340px;margin:0 auto}
}
@media(max-height:820px){.hero-2col .hero-visual{max-width:380px}}
@media(max-height:700px){.hero-2col .hero-visual{max-width:310px}}

/* --- 공통 다이어그램 --- */
.dgm{width:100%;height:auto;display:block;overflow:visible}
.dgm .ring{fill:none;stroke:var(--accent-2);stroke-width:1.2;opacity:0.4}
.dgm .ring.faint{stroke:var(--accent);opacity:0.18}
.dgm .ring.dashed{stroke:var(--accent);opacity:0.28;stroke-dasharray:3 9;stroke-width:1}
.dgm .spin-slow{animation:rot 34s linear infinite;transform-origin:center}
.dgm .spin-rev{animation:rot 52s linear infinite reverse;transform-origin:center}
.dgm .link{stroke:var(--accent-2);stroke-width:1;opacity:0.32;stroke-dasharray:4 5}
.dgm .node{fill:var(--accent-2);opacity:0.9}
.dgm .node.sm{opacity:0.7}
.dgm .halo{fill:none;stroke:var(--accent-2);stroke-width:1;opacity:0.3}
.dgm .orbit-dot{transform-box:view-box;transform-origin:center;animation:rot 16s linear infinite}
.dgm .pulse{animation:pulse-node 3s ease-in-out infinite;transform-origin:center}
.dgm .lbl{
fill:var(--text);font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:0.12em;
}
.dgm .lbl-sub{
fill:var(--accent-2);font-family:var(--font-mono);font-size:9px;letter-spacing:0.18em;opacity:0.8;
}
.dgm .core{fill:var(--text)}
.dgm .core-halo{fill:none;stroke:var(--text);stroke-width:1;opacity:0.3}
.dgm .core-lbl{
fill:var(--text-2);font-family:var(--font-mono);font-size:11px;letter-spacing:0.22em;
}

/* --- 선순환 개념도 --- */
.dgm-loop .orbit-path{fill:none;stroke:var(--line-strong);stroke-width:1;opacity:0.35}
.dgm-loop .arc{
fill:none;stroke:var(--accent-2);stroke-width:1.6;opacity:0.7;stroke-linecap:round;
}
.dgm-loop .cnode circle{
fill:var(--bg-2);stroke:var(--accent-2);stroke-width:1.4;opacity:0.95;
}
.dgm-loop .cn-t{fill:var(--text);font-size:17px;font-weight:600}
html[lang="en"] .dgm-loop .cn-t{font-size:11.5px;font-weight:600;letter-spacing:0.06em;transform:translateY(8px)}
html[lang="en"] .dgm-loop .cn-s{opacity:0}
.dgm-loop .cn-s{
fill:var(--text-3);font-family:var(--font-mono);font-size:8.5px;letter-spacing:0.14em;
}
.dgm-loop .c-core{fill:var(--accent-2);font-size:19px;font-weight:600;letter-spacing:-0.01em}
.dgm-loop .c-core-s{
fill:var(--text-3);font-family:var(--font-mono);font-size:9px;letter-spacing:0.2em;
}

/* --- 01 What we do: 본문 + 개념도 --- */
.split-visual{
display:grid;grid-template-columns:1fr minmax(320px,470px);
gap:clamp(32px,5vw,72px);align-items:center;
}
.split-copy{min-width:0}
.split-copy .section-title{margin-bottom:22px}
.split-visual .about-text{max-width:none}
.concept{margin:0;justify-self:center;width:100%;max-width:470px}
.concept figcaption{
margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--text-3);text-align:center;
}

/* --- 02 Principles: 하지 않는 것 --- */
.nots{
margin-top:36px;padding-top:26px;border-top:1px solid var(--line);
display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;
}
.nots-label{
font-family:var(--font-mono);font-size:11px;letter-spacing:0.18em;
text-transform:uppercase;color:var(--text-3);padding-top:2px;white-space:nowrap;
}
.nots-list{
list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 28px;
}
.nots-list li{
position:relative;padding-left:22px;
font-size:13px;line-height:1.6;color:var(--text-2);
}
.nots-list li::before{
content:"✕";position:absolute;left:0;top:0;
color:var(--accent-3);font-size:11px;opacity:0.8;
}

/* --- 반응형 --- */
@media(max-width:1080px){
.split-visual{grid-template-columns:1fr;gap:36px}
.concept{max-width:420px;margin:0 auto}
.nots{grid-template-columns:1fr;gap:16px}
.nots-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
.concept{max-width:320px}
.nots-list{grid-template-columns:1fr}
}
/* 낮은 화면에서는 다이어그램을 줄여 한 화면을 유지 */
@media(max-height:820px){
.concept{max-width:400px}
.concept figcaption{margin-top:12px;font-size:12px}
.nots{margin-top:26px;padding-top:20px}
}
@media(max-height:700px){
.concept{max-width:330px}
.concept figcaption{margin-top:10px;font-size:11.5px}
.nots{margin-top:20px;padding-top:16px}
.nots-list li{font-size:12.5px}
}

/* ============================================================
   CLOSING SLIDE — 마무리 문구 + 회사 개요 카드
   ============================================================ */
.closing{
display:grid;grid-template-columns:1fr minmax(380px,520px);
gap:clamp(32px,5vw,72px);align-items:center;
}
.closing .cta-actions{justify-content:flex-start}
.closing-copy{min-width:0}
.closing-copy .section-title{margin-bottom:22px}
.closing-lead{
font-size:clamp(14px,1.15vw,17px);color:var(--text-2);
line-height:1.75;max-width:520px;margin-bottom:30px;
}
.closing-facts{
background:var(--bg-1);border:1px solid var(--line);border-radius:2px;
padding:30px 34px;
}
.facts-label{
font-family:var(--font-mono);font-size:12px;letter-spacing:0.18em;
text-transform:uppercase;color:var(--accent-2);
padding-bottom:16px;margin-bottom:8px;border-bottom:1px solid var(--line);
}
.closing-facts .fact-table{border-top:0}
.closing-facts .fact-row{
grid-template-columns:96px 1fr;gap:20px;padding:18px 0;
}
.closing-facts .fact-row:last-child{border-bottom:0;padding-bottom:0}
.closing-facts .fact-key{font-size:11.5px}
.closing-facts .fact-val{font-size:16px;line-height:1.55}
.closing-facts .fact-val small{font-size:12.5px;margin-top:3px}

@media(max-width:1080px){
.closing{grid-template-columns:1fr;gap:32px;margin-top:28px}
.closing-facts{max-width:520px}
}
@media(max-height:820px){
.closing{margin-top:26px}
.closing-lead{margin-bottom:24px}
.closing-facts{padding:24px 26px}
.closing-facts .fact-row{padding:14px 0}
}
@media(max-height:700px){
.closing{margin-top:18px}
.closing-lead{margin-bottom:18px}
.closing-facts{padding:20px 22px}
.closing-facts .fact-row{padding:11px 0}
.facts-label{padding-bottom:10px}
}