:root {
  --color-bg:           #060908;
  --color-bg-sub:       #0d110e;
  --color-bg-card:      #111714;
  --color-text:         #e8f0ec;
  --color-text-sub:     #9dbdaa;
  --color-text-muted:   #5a7868;
  --color-border:       #1e2821;
  --color-border-m:     #2a3830;
  --color-primary:      #1a7a52;
  --color-primary-l:    #25a870;
  --color-primary-glow: rgba(26,122,82,.2);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
  --font-heading: 'Unbounded', sans-serif;
  --font-body:    'Noto Sans KR', sans-serif;
  --text-xs:   clamp(11px,1.2vw,12px);
  --text-sm:   clamp(12px,1.4vw,14px);
  --text-base: clamp(14px,1.6vw,16px);
  --text-md:   clamp(15px,1.8vw,18px);
  --text-lg:   clamp(20px, 2.5vw, 24px);
  --text-xl:   clamp(24px, 3.5vw, 36px);
  --text-2xl:  clamp(32px, 5vw, 56px);
  --text-3xl:  clamp(40px, 7vw, 80px);
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-full: 99px;
}

/* ═══════════════════════════════════
   컨셉 변수 (dark / light / fluid)
═══════════════════════════════════ */
[data-concept="dark"] {
  --bg:#242424; --bg-sub:#141414; --bg-card:#1a1a1a;
  --border:#282828; --border-m:#383838;
  --text-p:#e8f0ec; --text-s:#9dbdaa; --text-m:#5a7868;
  --accent:#1a7a52; --accent-l:#25a870; --accent-glow:rgba(26,122,82,.2);
  --nav-bg:rgba(12,12,12,0); --ticker-bg:#141414;
  --hbox-bg:#f0f0ee; --hbox-fg:#0c0c0c;
  --font-h:'Unbounded',sans-serif; --font-b:'Noto Sans KR',sans-serif;
}
[data-concept="light"] {
  --bg:#f4f7f5; --bg-sub:#ffffff; --bg-card:#ffffff;
  --border:#dce8e2; --border-m:#b8d0c8;
  --text-p:#0d1f17; --text-s:#4a7060; --text-m:#80a898;
  --accent:#1a7a52; --accent-l:#25a870; --accent-glow:rgba(26,122,82,.2);
  --nav-bg:rgba(244,247,245,.96); --ticker-bg:#0d1f17;
  --hbox-bg:#1a7a52; --hbox-fg:#ffffff;
  --font-h:'Unbounded',sans-serif; --font-b:'Noto Sans KR',sans-serif;
}
[data-concept="light"] #hero-canvas{display:none;}
[data-concept="light"] #morph-canvas{display:block;}
[data-concept="light"] .ticker{display:none;}
[data-concept="dark"] #hero-default,
[data-concept="light"] #hero-default{
  min-height: 80svh;
  padding: 0 clamp(20px, 5vw, 60px) clamp(60px, 15vh, 200px);
  align-items:flex-start;
  justify-content:center;
  text-align:left;
}
[data-concept="light"] .hero-title{
  font-size:clamp(36px,6vw,88px);line-height:.97;
  text-align:left;
}
[data-concept="light"] .hero-bottom{
  position:absolute;bottom:48px;left:40px;right:40px;
  justify-content:space-between;align-items:flex-end;flex-wrap:nowrap;
}
[data-concept="light"] .works-list{display:none;}
[data-concept="light"] .wp{display:none;}
[data-concept="light"] .works-grid{display:grid;}

/* ── 컨셉 8: FLUID UNDERWATER (수중 물감 Canvas) ── */
[data-concept="fluid"] {
  --bg:#060908; --bg-sub:#0d110e; --bg-card:#111714;
  --border:#1e2821; --border-m:#2a3830;
  --text-p:#e8f0ec; --text-s:#9dbdaa; --text-m:#5a7868;
  /*--bg:#04080a; --bg-sub:#0a1418; --bg-card:#0f1e24;
  --border:#142028; --border-m:#1e3040;
  --text-p:#e8f4f0; --text-s:#6a9aaa; --text-m:#3a6070;
  --accent:#00e5a0; --accent-l:#00c48a; --accent-glow:rgba(0,229,160,.15);
  --nav-bg:rgba(4,8,10,.9); --ticker-bg:#0a1418;
  --hbox-bg:#e8f4f0; --hbox-fg:#04080a;*/
  --accent:#1a7a52; --accent-l:#25a870; --accent-glow:rgba(26,122,82,.2);
  --nav-bg:rgba(6,9,8,.94); --ticker-bg:#111714;
  --hbox-bg:#e8f0ec; --hbox-fg:#060908;


  --font-h:'Unbounded',sans-serif; --font-b:'Noto Sans KR',sans-serif;
}

/* ═══════════════════════════════════
   리셋
═══════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0;}

/* ═══ FLUID CANVAS ═══ */
#fluid-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  display:none;opacity:0;
}
[data-concept="fluid"] #fluid-canvas{display:block;opacity:1;}
[data-concept="fluid"] #hero-canvas{display:none;}

/* ═══ FLUID CURSOR ═══ */
.fluid-cursor{
  position:fixed;z-index:9999;
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);pointer-events:none;
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;
  display:none;
  cursor:none;
}
.fluid-cursor-ring{
  position:fixed;z-index:9998;
  width:28px;height:28px;border-radius:50%;
  border:1px solid var(--accent-glow);
  pointer-events:none;
  transform:translate(-50%,-50%);
  display:none;
  cursor:none;
}
[data-concept="fluid"] .fluid-cursor,
[data-concept="fluid"] .fluid-cursor-ring{
  display:block;
}
[data-concept="fluid"],
[data-concept="fluid"] body,
[data-concept="fluid"] html{
  cursor:none !important;
}

/* fluid 히어로 오버레이 */
[data-concept="fluid"] .hero-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(4,8,10,.2) 0%,transparent 25%,transparent 65%,rgba(4,8,10,.7) 100%),
    radial-gradient(ellipse 70% 60% at 50% 50%,transparent 40%,rgba(4,8,10,.4) 100%);
}

/* fluid 전용 히어로 콘텐츠 부유 애니메이션 */
[data-concept="fluid"] #hero-default{
  position:relative;
}
[data-concept="fluid"] #hero-default .hero-content{
  animation:floatY 6s ease-in-out infinite;
}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* fluid 타이포 글로우 */
[data-concept="fluid"] .hero-title{
  text-shadow:0 0 80px rgba(0,229,160,.1),0 2px 10px rgba(0,0,0,.5);
}

/* ═══ WORKS GRID (muee rotate3d 방식) ═══ */
.works-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  display:none; /* 기본 숨김 — fluid/fullscreen 컨셉에서만 표시 */
}
[data-concept="fluid"] .works-grid{display:grid;gap : 1em;}
[data-concept="fluid"] .works-list{display:none;}
[data-concept="fluid"] .wp{display:none;}
[data-concept="dark"] .works-list{display:none;}
[data-concept="dark"] .wp{display:none;}
[data-concept="dark"] .works-grid{display:grid;gap: 1em;}

/* 카드 */
.wcard{
  position:relative;overflow:hidden;
  aspect-ratio:1;background:var(--bg-card);
  cursor:pointer;text-decoration:none;display:block;
  perspective:972px;
}
.wcard-bg{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .5s cubic-bezier(.25,.46,.45,.94);
  will-change:transform;
}
.wcard-bg-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.5;
}
.wcard-bg-icon{font-size:56px;opacity:.22;}
.wcard-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,8,10,.85) 0%,rgba(4,8,10,.1) 60%,transparent 100%);
  z-index:1;transition:opacity .3s;
}
/* ★ project_view = wcard-text — muee 원본 rotate3d */
.wcard-text{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;
  position:absolute;left:0;top:0;width:100%;height:100%;
  color:#fff;text-align:right;
  background:rgba(4,8,10,.88);
  padding:1.875rem 1.875rem 1.875rem 3.125rem;
  z-index:2;word-break:keep-all;pointer-events:none;
  transform:rotate3d(1,0,0,90deg);
}
.wcard-cat{
  position:absolute;top:16px;left:16px;z-index:3;
  font-size:var(--text-xs);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:#fff;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.2);
  padding:3px 10px;border-radius:99px;
  backdrop-filter:blur(6px);
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.wcard-badge{
  position:absolute;top:16px;right:16px;z-index:3;
  font-size:var(--text-xs);font-weight:700;padding:3px 10px;border-radius:var(--radius-sm);
  background:rgba(0,0,0,.6);color:#fff;backdrop-filter:blur(4px);
}
.wcard-name{
  font-family:var(--font-h);
  font-size:clamp(15px,1.4vw,20px);font-weight:800;
  color:#fff;letter-spacing:-.02em;line-height:1.3;margin-bottom:8px;text-align:right;
}
.wcard-desc{font-size:var(--text-sm);color:rgba(255,255,255,.5);line-height:1.45;margin-bottom:12px;text-align:right;}
.wcard-more{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--text-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;
}
[data-concept="dark"] .wcard-name{color:#fff!important;text-shadow:0 1px 8px rgba(0,0,0,.8);}
[data-concept="dark"] .wcard-desc{color:rgba(255,255,255,.75)!important;text-shadow:0 1px 4px rgba(0,0,0,.6);}
[data-concept="dark"] .wcard-more{color:#fff!important;}
[data-concept="dark"] .wcard-text{background:rgba(0,0,0,.85)!important;}
.wcard-more i{transition:transform .2s;}

/* in_/out_ 애니메이션 — muee 원본 */
.wcard.in_top    .wcard-text{transform-origin:50% 0%;   animation:in_top    300ms ease forwards;}
.wcard.in_right  .wcard-text{transform-origin:100% 0%;  animation:in_right  300ms ease forwards;}
.wcard.in_bottom .wcard-text{transform-origin:50% 100%; animation:in_bottom 300ms ease forwards;}
.wcard.in_left   .wcard-text{transform-origin:0% 0%;    animation:in_left   300ms ease forwards;}
.wcard.out_top   .wcard-text{transform-origin:50% 0%;   animation:out_top   300ms ease forwards;}
.wcard.out_right .wcard-text{transform-origin:100% 50%; animation:out_right 300ms ease forwards;}
.wcard.out_bottom .wcard-text{transform-origin:50% 100%;animation:out_bottom 300ms ease forwards;}
.wcard.out_left  .wcard-text{transform-origin:0% 0%;    animation:out_left  300ms ease forwards;}

@keyframes in_top   {from{transform:rotate3d(-1,0,0,90deg);}to{transform:rotate3d(0,0,0,0deg);}}
@keyframes in_right {from{transform:rotate3d(0,-1,0,90deg);}to{transform:rotate3d(0,0,0,0deg);}}
@keyframes in_bottom{from{transform:rotate3d( 1,0,0,90deg);}to{transform:rotate3d(0,0,0,0deg);}}
@keyframes in_left  {from{transform:rotate3d(0, 1,0,90deg);}to{transform:rotate3d(0,0,0,0deg);}}
@keyframes out_top  {from{transform:rotate3d(0,0,0,0deg);}to{transform:rotate3d(-1,0,0,104deg);}}
@keyframes out_right{from{transform:rotate3d(0,0,0,0deg);}to{transform:rotate3d(0,-1,0,104deg);}}
@keyframes out_bottom{from{transform:rotate3d(0,0,0,0deg);}to{transform:rotate3d(1,0,0,104deg);}}
@keyframes out_left {from{transform:rotate3d(0,0,0,0deg);}to{transform:rotate3d(0,1,0,104deg);}}

.wcard.in_top .wcard-bg,.wcard.in_bottom .wcard-bg,
.wcard.in_left .wcard-bg,.wcard.in_right .wcard-bg{transform:scale(1.05);}
.wcard.in_top .wcard-more i,.wcard.in_bottom .wcard-more i,
.wcard.in_left .wcard-more i,.wcard.in_right .wcard-more i{transform:translateX(4px);}

@media(max-width:900px){.works-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.works-grid{grid-template-columns:1fr;}}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-b);
  background:var(--bg);color:var(--text-p);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .4s,color .4s;
}


/* ═══════════════════════════════════
   HERO — 공통
═══════════════════════════════════ */
.hero{
  position:relative;overflow:hidden;
  background:var(--bg);
  transition:background .4s;
}
/* 히어로 파티클 캔버스 (기본 5종) */
#hero-canvas{
  position:absolute;inset:0;
  pointer-events:none;z-index:0;
}
/* ripple 캔버스 (editorial) */
#ripple-canvas{
  position:absolute;inset:0;
  pointer-events:none;z-index:0;
  display:none;
}

/* morph 캔버스 (fullscreen) */
#morph-canvas{
  position:absolute;inset:0;
  pointer-events:none;z-index:0;
  display:none;
}
[data-concept="dark"] #morph-canvas{display:block;}
[data-concept="dark"] #hero-canvas{display:none;}

/* ── 기본 히어로 레이아웃 ── */
#hero-default{
  position:relative;z-index:1;
  min-height:calc(100svh - 58px);
  display:flex;flex-direction:column;
  justify-content:space-between;
  padding:56px 40px 48px;
}
[data-concept="dark"] .ticker{display:none;}
.hero-bg-txt{
  position:absolute;bottom:-30px;left:-10px;
  font-family:var(--font-h);
  font-size:clamp(82px,16vw,242px);font-weight:900;
  line-height:1;color:var(--accent-glow);
  white-space:nowrap;pointer-events:none;user-select:none;
  letter-spacing:-.05em;
  animation:bgSlide 18s ease-in-out infinite alternate;
  transition:color .4s;z-index:0;
}
@keyframes bgSlide{0%{transform:translateX(0)}100%{transform:translateX(-4%)}}
.hero-orb{
  position:absolute;right:-100px;top:-100px;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);
  animation:orbP 6s ease-in-out infinite;
  pointer-events:none;z-index:0;
}
@keyframes orbP{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

.hero-top{
  display:flex;align-items:flex-start;
  justify-content:space-between;gap:12px;flex-wrap:wrap;
}
[data-concept="dark"] .hero-top{
  position:absolute;top:72px;left:40px;right:40px;
}
.hero-tag{
  font-size:var(--text-sm);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-s);display:flex;align-items:center;gap:8px;
}
.hero-tag::before{content:'';width:18px;height:1px;background:currentColor;flex-shrink:0;}
.hdot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:dotP 2s infinite;flex-shrink:0;}
@keyframes dotP{0%,100%{box-shadow:0 0 0 0 var(--accent-glow)}60%{box-shadow:0 0 0 7px transparent}}
.hero-badge{
  display:flex;align-items:center;gap:7px;
  border:1px solid var(--border-m);border-radius:var(--radius-full);
  padding:5px 12px;font-size:var(--text-xs);color:var(--text-s);
  background:var(--bg-card);flex-shrink:0;
}
.hero-badge i{color:var(--accent);font-size:var(--text-xs);}

.hero-title{
  font-family:var(--font-h);
  font-size:clamp(34px,7vw,98px);font-weight:900;
  line-height:1.1;letter-spacing:-.04em;
  color:var(--text-p);padding:24px 0;
}
[data-concept="dark"] .hero-title{
  font-size:clamp(36px,6vw,88px);
  line-height:.97;padding:0;
  max-width:1000px;
  text-align:left;
}
.hl-box{
  background:var(--hbox-bg);color:var(--hbox-fg);
  padding:2px 12px;border-radius:5px;display:inline-block;
}
.hl-acc{color:var(--accent);}

.hero-bottom{
  display:flex;align-items:flex-end;
  justify-content:space-between;gap:24px;flex-wrap:wrap;
}
[data-concept="dark"] .hero-bottom{
  position:absolute;bottom:48px;left:40px;right:40px;
  justify-content:space-between;align-items:flex-end;flex-wrap:nowrap;
}
.hero-sub{font-size:var(--text-base);color:var(--text-s);line-height:1.85;max-width:400px;}
.hero-sub strong{color:var(--text-p);}
.hero-tag-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.hero-tag-chip{
  display:inline-block;
  padding:4px 14px;
  border-radius:99px;
  border:1px solid rgba(255,255,255,0.3);
  font-size:var(--text-sm);
  color:rgba(255,255,255,0.85);
  background:rgba(255,255,255,0.08);
}
[data-concept="light"] .hero-tag-chip{
  border-color:rgba(13,31,23,0.2);
  color:var(--text-s);
  background:rgba(13,31,23,0.05);
}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;}

.btn{display:inline-flex;align-items:center;gap:7px;padding:13px 22px;font-size:var(--text-base);font-weight:700;text-decoration:none;border-radius:var(--radius-sm);transition:all .2s;white-space:nowrap;}
.btn-p{background:var(--accent);color:var(--bg);}
.btn-p:hover{background:var(--accent-l);transform:translateY(-2px);box-shadow:0 8px 20px var(--accent-glow);}
.btn-g{border:1px solid var(--border-m);color:var(--text-p);}
.btn-g:hover{border-color:var(--text-s);}

.scroll-hint{
  position:absolute;bottom:24px;right:40px;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-m);
}
[data-concept="dark"] .scroll-hint{display:none;}
.scroll-line{
  width:1px;height:40px;
  background:linear-gradient(to bottom,transparent,var(--accent));
  animation:sLine 1.5s ease-in-out infinite;
}
@keyframes sLine{0%{height:0;opacity:1}100%{height:40px;opacity:0}}

/* ── EDITORIAL 전용 히어로 ── */
#hero-editorial{
  display:none;
  position:relative;z-index:1;
  min-height:calc(100svh - 58px);
}

.ed-left{
  flex:1;display:flex;flex-direction:column;
  justify-content:space-between;padding:56px 48px;
  border-right:1px solid var(--border);
  background:var(--bg);
}
.ed-right{
  width:380px;flex-shrink:0;
  display:flex;flex-direction:column;
  justify-content:flex-end;padding:48px 44px;gap:0;
  background:var(--bg-card);
}
.ed-stat{
  border-top:1px solid var(--border);
  padding:20px 0;
}
.ed-stat-n{
  font-family:var(--font-h);font-size:44px;font-weight:900;
  letter-spacing:-.04em;color:var(--text-p);line-height:1;margin-bottom:4px;
}
.ed-stat-n span{font-size:.48em;color:var(--accent);}
.ed-stat-l{font-size:var(--text-sm);color:var(--text-s);letter-spacing:.08em;text-transform:uppercase;}

/* ═══════════════════════════════════
   KPI
═══════════════════════════════════ */
.kpi{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--border);border-top:1px solid var(--border);
  transition:background .4s,border-color .4s;
}
.kpi-cell{
  background:var(--bg-sub);padding:24px 28px;
  position:relative;overflow:hidden;transition:background .2s;
}
.kpi-cell::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  transform:scaleX(0);transition:transform .3s,background .4s;
}
.kpi-cell:hover::after{transform:scaleX(1);}
.kpi-cell:hover{background:var(--bg-card);}
.kpi-num{
  font-family:var(--font-h);
  font-size:clamp(32px,3.5vw,48px);font-weight:900;
  letter-spacing:-.05em;color:var(--text-p);line-height:1;margin-bottom:5px;
}
.kpi-num .u{font-size:.45em;color:var(--accent);    margin-left: 5px;}
.kpi-label{font-size:var(--text-base);color:var(--text-s);letter-spacing:.08em;text-transform:uppercase;}

/* ═══════════════════════════════════
   TICKER
═══════════════════════════════════ */
.ticker{
  background:var(--ticker-bg);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);padding:10px 0;
  overflow:hidden;white-space:nowrap;
  transition:background .4s;
}
.ticker-track{display:inline-flex;animation:tick 22s linear infinite;}
.ticker-track:hover{animation-play-state:paused;}
@keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.t-item{
  font-size:var(--text-sm);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-s);padding:0 20px;display:flex;align-items:center;gap:18px;
}
.t-item i{color:var(--accent);font-size:8px;}

/* ═══════════════════════════════════
   섹션 공통
═══════════════════════════════════ */
.section{padding:80px 0;transition:background .4s;background: var(--bg);}
.section.sub{background:var(--bg-sub);}
.inner{max-width:1080px;margin:0 auto;padding:0 40px;}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:36px;gap:16px;flex-wrap:wrap;}
.sec-label{
  font-size:var(--text-base);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:8px;margin-bottom:8px;
}
.sec-label::before{content:'';width:14px;height:1px;background:var(--accent);}
.sec-title{
  font-family:var(--font-h);
  font-size:clamp(22px,2.8vw,38px);font-weight:900;
  letter-spacing:-.04em;line-height:1.1;color:var(--text-p);
}
.sec-link{
  font-size:var(--text-base);color:var(--text-s);text-decoration:none;
  border-bottom:1px solid var(--border);padding-bottom:2px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  transition:all .2s;white-space:nowrap;flex-shrink:0;
}
.sec-link:hover{color:var(--accent);border-color:var(--accent);}

/* ═══════════════════════════════════
   WORKS
═══════════════════════════════════ */
.filter{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:28px;}
.f-btn{
  padding:6px 14px;border-radius:var(--radius-full);font-size:var(--text-base);font-weight:500;
  border:1px solid var(--text-s);color:var(--text-s);background:transparent;
  cursor:pointer;transition:all .15s;text-decoration:none;
}
.f-btn.on,.f-btn:hover{background:var(--text-p);color:var(--bg);border-color:var(--text-p);}

.works-list{list-style:none;}
.works-item{border-top:1px solid var(--border);}
.works-item:last-child{border-bottom:1px solid var(--border);}
.wi-inner{
  display:grid;grid-template-columns:52px 1fr auto;
  align-items:center;gap:20px;padding:20px 0;
  text-decoration:none;transition:padding .2s;
}
.works-item:hover .wi-inner{padding-left:10px;padding-right:10px;}
.wi-num{
  font-family:var(--font-h);font-size:var(--text-base);font-weight:700;
  color:var(--text-m);letter-spacing:.04em;transition:color .2s;
}
.works-item:hover .wi-num{color:var(--accent);}
.wi-cat{font-size:var(--text-base);color:var(--text-s);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;opacity:.8;}
.wi-name{font-size:var(--text-base);font-weight:700;color:var(--text-p);letter-spacing:-.02em;transition:color .2s;}
.works-item:hover .wi-name{color:var(--accent);}
.wi-arrow{font-size:var(--text-base);color:var(--text-m);transition:all .2s;flex-shrink:0;}
.works-item:hover .wi-arrow{color:var(--accent);transform:translateX(4px);}

/* 호버 프리뷰 */
.wp{
  position:fixed;pointer-events:none;z-index:9999;
  width:260px;height:174px;border-radius:12px;overflow:hidden;
  opacity:0;transform:scale(.9) rotate(-2deg);
  transition:opacity .2s,transform .2s;
  box-shadow:0 20px 56px rgba(0,0,0,.5);
  border:1px solid var(--border);
}
.wp.on{opacity:1;transform:scale(1) rotate(0deg);}
.wp-inner{
  width:100%;height:100%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;
}
.wp-ico{font-size:36px;}
.wp-lbl{font-size:var(--text-base);letter-spacing:.1em;text-transform:uppercase;font-weight:700;}

/* ═══════════════════════════════════
   솔루션
═══════════════════════════════════ */
.sol-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:12px;
  overflow:hidden;margin-top:36px;
}
.sol-card{
  background:var(--bg-card);padding:24px 20px;
  text-decoration:none;display:block;
  position:relative;overflow:hidden;transition:background .2s;
}
.sol-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--accent);transform:scaleX(0);
  transform-origin:left;transition:transform .3s;
}
.sol-card:hover::after{transform:scaleX(1);}
.sol-card:hover{background:var(--bg-sub);}
.sol-ico{
  width:40px;height:40px;border-radius:var(--radius-md);
  background:var(--accent-glow);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;font-size:17px;color:var(--accent);
  transition:transform .3s;
}
.sol-card:hover .sol-ico{transform:scale(1.1) rotate(-5deg);}
.sol-name{font-size:var(--text-base);font-weight:700;color:var(--text-p);margin-bottom:5px;}
.sol-desc{font-size:var(--text-base);color:var(--text-s);line-height:1.5;}

/* ═══════════════════════════════════
   CTA
═══════════════════════════════════ */
.cta-wrap{padding:100px 40px;}
.cta{
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-l) 100%);
  border-radius:18px;padding:60px 52px;
  display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap;position:relative;overflow:hidden;
}
.cta::before{
  content:'';position:absolute;right:-80px;top:-80px;
  width:360px;height:360px;border-radius:50%;
  background:rgba(255,255,255,.08);pointer-events:none;
}
.cta-title{
  font-family:var(--font-h);
  font-size:clamp(20px,2.8vw,34px);font-weight:900;
  color:#fff;letter-spacing:-.04em;line-height:1.15;margin-bottom:8px;
  position:relative;z-index:1;
}
.cta-sub{font-size:var(--text-base);color:rgba(255,255,255,.75);position:relative;z-index:1;}
.btn-white{
  background:#fff;color:var(--accent);border-radius:5px;
  padding:14px 28px;font-size:var(--text-base);font-weight:700;
  position:relative;z-index:1;white-space:nowrap;transition:all .2s;
}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.15);}


/* 스크롤 등장 */
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s;}

/* ══ 인라인 스타일 추출 (index.php) ══ */

/* 히어로 캔버스 */
#hero-canvas{position:fixed;inset:0;pointer-events:none;z-index:0;}

/* SVG 아이콘 (nav/btn/badge 공통) */
.btn svg,.hero-badge svg{display:inline;vertical-align:middle;margin-right:4px;}
.btn-white svg{margin-right:6px;}

/* Editorial 컨셉 오버라이드 */

/* KPI AI 셀 */
.kpi-num-ai{color:var(--accent);font-size:min(28px,5vw);}

/* 티커 점 */
.ticker-dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;vertical-align:middle;}

/* Works 그리드 카드 배경 색상 */
.wcard-bg-1{background:linear-gradient(135deg,#0d3d28,#1a7a52);}
.wcard-bg-2{background:linear-gradient(135deg,#0d3a35,#177a6e);}
.wcard-bg-3{background:linear-gradient(135deg,#0d3320,#166644);}
.wcard-bg-4{background:linear-gradient(135deg,#113524,#1f7a48);}
.wcard-bg-5{background:linear-gradient(135deg,#0d3228,#147a62);}
.wcard-bg-6{background:linear-gradient(135deg,#113320,#1a7a50);}
[data-concept="dark"] .wcard-bg-1{background:linear-gradient(135deg,#1a7a52,#2cb070);}
[data-concept="dark"] .wcard-bg-2{background:linear-gradient(135deg,#177a6e,#2cb0a0);}
[data-concept="dark"] .wcard-bg-3{background:linear-gradient(135deg,#166644,#28a060);}
[data-concept="dark"] .wcard-bg-4{background:linear-gradient(135deg,#1f7a48,#34b06a);}
[data-concept="dark"] .wcard-bg-5{background:linear-gradient(135deg,#147a62,#26b090);}
[data-concept="dark"] .wcard-bg-6{background:linear-gradient(135deg,#1a7a50,#30b072);}
.wcard-bg svg{width:56px;height:56px;opacity:.15;}
.wcard-bg-1 svg{color:#00e5a0;}
.wcard-bg-2 svg{color:#ffe644;}
.wcard-bg-3 svg{color:#4488ff;}
.wcard-bg-4 svg{color:#f0a020;}
.wcard-bg-5 svg{color:#ff5c8a;}
.wcard-bg-6 svg{color:#ff8800;}

/* Works 필터 — 숨김 처리 */
.wcard.is-hidden,.works-item.is-hidden{display:none;}


.fade-up.vis{opacity:1;transform:none;}

/* ═══════════════════════════════════
   반응형
═══════════════════════════════════ */
@media(max-width:900px){
  .sol-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  #hero-default{padding:36px 16px 36px;min-height:auto;}
  [data-concept="dark"] #hero-default{padding:88px 16px 36px;min-height:100svh;}
  [data-concept="dark"] .hero-top{left:16px;right:16px;top:68px;}
  [data-concept="dark"] .hero-bottom{left:16px;right:16px;bottom:32px;flex-direction:column;align-items:flex-start;gap:16px;}
  [data-concept="light"] .hero-bottom{left:16px;right:16px;bottom:32px;flex-direction:column;align-items:flex-start;gap:16px;}
  .hero-title{font-size:clamp(30px,9vw,54px);}
  [data-concept="dark"] .hero-title{font-size:clamp(34px,10vw,66px);}
  .kpi{grid-template-columns:repeat(2,1fr);}
  .section{padding:56px 0;}
  .inner{padding:0 16px;}
  .sec-head{flex-direction:column;align-items:flex-start;gap:10px;}
  .wi-inner{grid-template-columns:40px 1fr auto;gap:12px;padding:16px 0;}
  .sol-grid{grid-template-columns:repeat(2,1fr);}
  .cta-wrap{padding:80px 16px ;}
  .cta{padding:32px 24px;flex-direction:column;}
.ed-right{width:100%;padding:32px 20px;}
  .ed-left{padding:40px 20px;}
}
@media(max-width:768px){
  .kpi-label,.sec-label,.hero-tag,.t-item,
  .wi-cat,.wi-num,.wp-lbl,.sol-desc,
  .f-btn,.sec-link,.cta-sub{
    font-size:clamp(13px,1.5vw,16px);
  }
}

/* ════════════════════════════
   popup.php
════════════════════════════ */
.pp-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
  z-index:9000;align-items:center;justify-content:center;
}
.pp-overlay.open{display:flex;}

.pp-popup-box{
  background:var(--bg,#060908);
  border:1px solid var(--border,#1e2821);
  border-radius:var(--radius-lg);
  width:min(480px,94vw);
  overflow:hidden;
  position:relative;
  animation:ppIn .35s cubic-bezier(.25,.46,.45,.94);
}
@keyframes ppIn{from{opacity:0;transform:translateY(24px) scale(.97);}to{opacity:1;transform:none;}}

.pp-header{
  padding:28px 28px 0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
.pp-tag{
  font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent,#1a7a52);
  background:rgba(26,122,82,.1);border:1px solid rgba(26,122,82,.2);
  padding:3px 10px;border-radius:var(--radius-full);
}
.pp-close{
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.06);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-s,#9dbdaa);font-size:var(--text-base);transition:background .2s;
  flex-shrink:0;z-index:9001;
}
.pp-close:hover{background:rgba(255,255,255,.12);}

.pp-body{padding:20px 28px 28px;}
.pp-title{
  font-family:var(--font-h);
  font-size:clamp(20px,3vw,26px);font-weight:900;
  letter-spacing:-.04em;line-height:1.2;
  color:var(--text-p,#e8f0ec);margin-bottom:12px;
}
.pp-title em{font-style:normal;color:var(--accent,#1a7a52);}
.pp-desc{font-size:var(--text-base);color:var(--text-s,#9dbdaa);line-height:1.75;margin-bottom:24px;}

.pp-btns{display:flex;gap:10px;flex-wrap:wrap;}
.pp-btn{
  flex:1;min-width:120px;
  padding:12px 20px;border-radius:var(--radius-sm);
  font-size:var(--text-base);font-weight:700;text-align:center;
  text-decoration:none;cursor:pointer;border:none;
  transition:all .2s;
}
.pp-btn.primary{background:var(--accent,#1a7a52);color:#fff;}
.pp-btn.primary:hover{opacity:.85;}
.pp-btn.ghost{background:transparent;border:1px solid var(--border,#1e2821);color:var(--text-s,#9dbdaa);}
.pp-btn.ghost:hover{border-color:var(--text-m,#5a7868);}

.pp-footer{
  padding:14px 28px;
  border-top:1px solid var(--border,#1e2821);
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(0,0,0,.2);
}
.pp-footer label{
  display:flex;align-items:center;gap:8px;
  font-size:var(--text-sm);color: var(--accent, #1a7a52);cursor:pointer;
}
.pp-footer input[type=checkbox]{
  width:14px;height:14px;accent-color:var(--accent,#1a7a52);
}
.pp-footer-close{
  font-size:var(--text-sm);color: var(--accent, #1a7a52);;
  background:none;border:none;cursor:pointer;
  text-decoration:underline;
}
@media(max-width:400px){
  .sol-grid{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .kpi-label,.sec-label,.hero-tag,.t-item,
  .wi-cat,.wi-num,.wp-lbl,.sol-desc,
  .f-btn,.sec-link,.cta-sub{
    font-size:clamp(12px,2.5vw,14px);
  }
}