/* =====================================================================
   preview_new.css  —  신규 메인(index_new.php) 전용 델타 스타일
   ---------------------------------------------------------------------
   · preview.css 뒤에 로드되어, 겹치는 클래스는 오버라이드하고
     신규 컴포넌트(prob/svc/ai/exp/work/sup/kpi-strip/cta-sec 등)를 추가한다.
   · 헤더(.nh*)·푸터(.nf/footer)·모바일메뉴는 포함하지 않는다
     (new_header_test.php / new_footer_test.php / preview_sub.css 가 담당).
   · index_new.php 는 표준 data-concept="light" 로 렌더된다. preview.css 의
     [data-concept="light"] 규칙이 활성화되므로, 신규 hero/ticker 레이아웃이 깨지지
     않도록 파일 하단의 "data-concept 호환 오버라이드" 블록에서 .pv-new-main 스코프로
     재확정한다(동일 특이도 + 후순위 로드로 승리). 색상 토큰은 :root 에서 공급한다.
   ===================================================================== */

/* ── 디자인 토큰(신규 팔레트) ── */
:root{
  --white:        #FFFFFF;
  --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-dark:  #0F5E3E;
  --accent-soft:  #E8F5EF;
  --accent-glow:  rgba(26,122,82,.15);
  --nav-bg:       rgba(244,247,245,.96);
  --ticker-bg:    #0D1F17;
  --hbox-bg:      #1A7A52;
  --hbox-fg:      #FFFFFF;

  /*--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);

  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    16px;
  --radius-full:  99px;*/

  --shadow-sm:    0 2px 8px rgba(24,36,58,.06);
  --shadow-md:    0 8px 24px rgba(47,122,99,.15);
  --shadow-lg:    0 24px 64px rgba(24,36,58,.14);

  /*--font-h:       'Unbounded', 'Pretendard GOV', sans-serif;
  --font-b:       'Pretendard GOV', sans-serif;*/
}

body{ word-break:keep-all; line-height:1.6; }

/* ── 레이아웃 유틸(뷰 인라인 스타일 대체) ── */
.pv-new-main{ position:relative;z-index:1; }
.kpi-num.kpi-num-sm1{ font-size:clamp(18px,2.5vw,32px); }
.kpi-num.kpi-num-sm2{ font-size:clamp(14px,2vw,26px); }
.kpi-num.kpi-num-ai2{ color:var(--accent);font-size:clamp(18px,2.5vw,32px); }
.sec-head-center{ text-align:center;max-width:600px;margin:0 auto 52px; }
.sec-eyebrow-center{ justify-content:center; }
.work-more{ text-align:center;margin-top:36px; }
.sup-head{ margin-bottom:48px; }
.sec-desc-gap{ margin-top:12px; }
.sup-cta{ margin-top:32px; }

/* ── 컨테이너 ── */
.wrap{ max-width:1200px; margin:0 auto; padding:0 32px; }

/* ── 섹션 공통(신규) ── */
.pv-new-main section{ position:relative; padding:96px 0; }
.pv-new-main section.bg{ background: rgb(26 122 82 / 10%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);}
/* 지원 섹션은 preview.css .section(80px) 대신 96px 로 통일 */
.pv-new-main section.section{ padding:96px 0; background:var(--bg-sub); }

.sec-head{ display:block; margin-bottom:52px; }
.sec-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px;display:flex;align-items:center;gap:8px;
}
.sec-eyebrow::before{ content:"";width:16px;height:1.5px;background:var(--accent);display:block; }
.sec-title{
  font-family:var(--font-h);
  font-size:clamp(26px,3vw,40px);font-weight:900;line-height:1.2;
  letter-spacing:-.025em;color:#0A1A0F;margin-bottom:12px;
}
.sec-desc{ font-size:var(--text-base);color:var(--text-s);line-height:1.75; }
.sec-label{
  font-size:var(--text-sm);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); }

/* ── 버튼(오버라이드/추가) ── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;border-radius:100px;
  font-size:var(--t-md);font-weight:700;cursor:pointer;transition:all .2s;
  border:none;font-family:inherit;white-space:nowrap;text-decoration:none;
}
.btn-p{ background:var(--accent);color:#fff;border:2px solid var(--accent); }
.btn-p:hover{ background:var(--accent-l);border-color:var(--accent-l);transform:translateY(-1px);box-shadow:0 8px 24px rgba(47,122,99,.35); }
.btn-g{ background:transparent;color:var(--accent);border:2px solid var(--accent); }
.btn-g:hover{ background:var(--accent-l);color:#fff;transform:translateY(-1px);box-shadow:0 8px 24px rgba(47,122,99,.35); }
.btn-o{ background:transparent;color:var(--accent);border:1.5px solid var(--accent); }
.btn-o:hover{ background:var(--accent-soft);transform:translateY(-1px); }
.btn-w{ background:#fff;color:var(--text-p);border:1.5px solid var(--border); }
.btn-w:hover{ border-color:var(--accent);color:var(--accent); }
.btn-outline-p{
  background:transparent;color:var(--accent);border:2px solid var(--accent);
  padding:13px 26px;font-size:var(--text-base);font-weight:700;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;gap:8px;transition:all .2s;cursor:pointer;
  font-family:inherit;text-decoration:none;
}
.btn-outline-p:hover{ background:var(--accent);color:#fff;transform:translateY(-1px); }

/* =====================================================================
   HERO (오버라이드)
   ===================================================================== */
.pv-new-main section.hero{padding: 0;}
.hero{ position:relative;overflow:hidden;background:var(--bg-sub); }
.hero::before{ content:"";position:absolute;top:-120px;right:-160px;width:620px;height:620px;z-index:0;background:radial-gradient(circle,rgba(64,200,150,.28) 0%,transparent 66%);pointer-events:none;animation:blobFloat 16s ease-in-out infinite; }
.hero::after{ content:"";position:absolute;bottom:-80px;left:-120px;width:480px;height:480px;z-index:0;background:radial-gradient(circle,rgba(47,122,99,.20) 0%,transparent 66%);pointer-events:none;animation:blobFloat2 20s ease-in-out infinite; }
@keyframes blobFloat{ 0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(30px,-20px) scale(1.05);}66%{transform:translate(-20px,30px) scale(.95);} }
@keyframes blobFloat2{ 0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(-25px,20px) scale(1.06);}66%{transform:translate(20px,-15px) scale(.96);} }

/* 전역 모핑 블롭 배경 : preview.css 의 #morph-canvas{display:none} 오버라이드 */
#morph-canvas{
  position:fixed !important;inset:0 !important;
  width:100% !important;height:100% !important;
  pointer-events:none !important;z-index:0 !important;display:block !important;
}

#hero-default{
  position:relative;z-index:2;
  padding:clamp(40px,5.6vw,80px) 40px 48px;margin:0 auto;
  min-height:0;
  display:flex;flex-direction:column;gap:48px;
}

.hero-top{ display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;position:static; }
.hero-tag{
  font-size:var(--text-sm);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-s);display:flex;align-items:center;gap:8px;font-weight:600;
}
.hero-tag::before{ content:'';width:18px;height:1px;background:currentColor;flex-shrink:0; }
.hdot{ width:8px;height:8px;border-radius:50%;background:var(--accent);animation:dotP 2s infinite;flex-shrink:0; }
@keyframes dotP{0%,100%{box-shadow:0 0 0 0 rgba(47,122,99,.3);}60%{box-shadow:0 0 0 8px transparent;}}
.hero-badge{
  display:flex;align-items:center;gap:7px;
  border:1px solid var(--border);border-radius:var(--radius-full);padding:6px 14px;
  font-size:var(--text-xs);color:var(--text-s);background:#fff;flex-shrink:0;
}
.hero-badge svg{ color:var(--accent); }

.hero-content{ flex:1;display:flex;flex-direction:column;justify-content:center;padding:48px 0; }
.hero-title{
  font-family:var(--font-h);font-size:clamp(34px,5.6vw,79px);font-weight:900;
  line-height:1.1;letter-spacing:-.04em;color:var(--text-p);
  padding:0;margin-bottom:0;max-width:none;text-align:left;
}
.hl-acc{ color:var(--accent); }

.hero-bottom{
  position:static;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  gap:32px;flex-wrap:wrap;
}
.hero-tag-chips{ display:flex;gap:8px;flex-wrap:wrap;margin-top:20px; }
.hero-tag-chip{
  padding:5px 14px;border-radius:var(--radius-full);border:1px solid var(--border);background:#fff;
  font-size:var(--text-sm);color:var(--text-s);transition:all .2s;
}
.hero-tag-chip:hover{ border-color:var(--accent);color:var(--accent); }
.hero-ai-txt{ font-size: var(--text-base);  color: var(--accent-dark);  font-weight: 700;  margin: 12px 0; }
.hero-actions{ display:flex;gap:10px;flex-wrap:wrap;align-items:center; }

/* =====================================================================
   KPI STRIP (오버라이드/추가)
   ===================================================================== */
.kpi-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--border);border-top:1px solid var(--border);
}
.kpi-cell{ background:var(--white);padding:22px 28px;position:relative;overflow:hidden;transition:background .2s;     display: flex;
  flex-direction: column;  align-items: flex-start;  justify-content: center;}

.kpi-num{
  font-family:var(--font-h);font-size:clamp(24px,3vw,40px);font-weight:900;
  letter-spacing:-.05em;color:var(--text-p);line-height:1;margin-bottom:6px;
}
.kpi-num .u{ font-size:clamp(11px,1.6vw,18px);color:var(--accent);margin-left:4px; }
.kpi-label{ font-size:var(--text-sm);color:var(--text-s);letter-spacing:.06em;text-transform:uppercase; }

/* =====================================================================
   TICKER (오버라이드)
   ===================================================================== */
.ticker{
  display:flex;background:#0d1f17;border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);padding:10px 0;overflow:hidden;white-space:nowrap;
}
.ticker-track{ display:inline-flex;animation:tick 24s 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-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.5);padding:0 20px;display:flex;align-items:center;gap:14px;
}
.t-item .t-dot{ width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0; }

/* =====================================================================
   PROBLEM
   ===================================================================== */
.prob-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }
/* svc-head 와 동일 구조: 아이콘(좌) + 번호(우) 한 줄. .prob-card 가 align-items:flex-start
   인 flex column 이므로 width:100% 로 늘려야 space-between 이 동작한다. */
.prob-head{ display:flex;align-items:flex-start;justify-content:space-between;width:100%;margin-bottom:20px; }
.prob-num{ font-family:var(--font-h);font-size:11px;font-weight:700;color:var(--text-m);letter-spacing:.06em; }
.prob-icon{ width:44px;height:44px;border-radius:var(--radius-sm);background:var(--accent-glow);display:flex;align-items:center;justify-content:center;transition:background .2s;flex-shrink:0; }
.prob-icon svg{ width:20px;height:20px;color:var(--accent); }
.prob-q{ font-size:var(--text-base);font-weight:700;color:var(--text-p);line-height:1.45;margin-bottom:10px; }
.prob-a{ font-size:var(--text-sm);color:var(--text-s);line-height:1.5;margin-bottom:18px; }
.prob-sol{ font-size:var(--text-sm);font-weight:700;color:var(--accent);display:flex;align-items:baseline;gap:4px; }
.prob-sol::before{ content:"→"; }

/* =====================================================================
   SERVICE
   ===================================================================== */
.svc-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:16px; }
.svc-card{ background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:36px;transition:all .2s; }
.svc-card:hover{ border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-3px); }
.svc-head{ display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px; }
.svc-icon{ width:48px;height:48px;border-radius:var(--radius-sm);background:var(--accent-soft);display:flex;align-items:center;justify-content:center;transition:background .2s; }
.svc-icon svg{ width:22px;height:22px;color:var(--accent); }
.svc-idx{ font-size:11px;font-weight:700;color:var(--text-m);font-family:var(--font-h);letter-spacing:.04em; }
.svc-title{ font-size:var(--text-md);font-weight:800;color:#0A1A0F;margin-bottom:10px; }
.svc-desc{ font-size:var(--text-sm);color:var(--text-s);line-height:1.75;margin-bottom:20px; }
.svc-tags{ display:flex;flex-wrap:wrap;gap:6px; }
.svc-tag{ font-size:var(--text-xs);font-weight:500;color:var(--text-s);background:var(--accent-soft);border:1px solid var(--border);padding:4px 12px;border-radius:100px; }

/* =====================================================================
   AI SECTION
   ===================================================================== */
.ai-sec{ background:var(--accent-dark);position:relative;overflow:hidden; }
.ai-sec::before{ content:"";position:absolute;top:-200px;right:-200px;width:600px;height:600px;background:radial-gradient(circle, rgb(255 255 255 / 16%) 0%, transparent 65%);pointer-events:none; }
.ai-in{ display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;position:relative;z-index:1; }
.ai-eyebrow{ color:var(--accent-l);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px; }
.ai-eyebrow::before{ content:"";width:16px;height:1.5px;background:var(--accent-l);display:block; }
.ai-title{ font-family:var(--font-h);font-size:clamp(20px,3vw,38px);font-weight:900;color:#fff !important;line-height:1.25;letter-spacing:-.02em;margin-bottom:16px; }
.ai-title em{ font-style:normal;color:var(--accent-l); }
.ai-desc{ font-size:var(--text-md);color:rgba(255,255,255,.8);line-height:1.25;margin-bottom:32px; }
.ai-steps{ display:flex;flex-direction:column;gap:0; }
.ai-step{ display:flex;gap:5px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1); }
.ai-step:last-child{ border-bottom:none; }
.ai-step-dot{ width:6px;height:6px;border-radius:50%;background:var(--accent-l);flex-shrink:0;margin-top:7px; }
.ai-step-body{ font-size:var(--text-base);color:rgba(255,255,255,.85);line-height:1.65; }
.ai-step-body strong{ color:#fff;font-weight:700; }
/* Before / After */
.ba-wrap{ background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;gap:12px;    box-shadow: inset 4px 4px 12px rgba(0, 0, 0, 0.15), inset -4px -4px 12px rgba(255, 255, 255, 0.15); }
.ba-label-row{ font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:4px; }
.ba-row{ display:grid;grid-template-columns:1fr 20px 1fr;gap:8px;align-items:stretch; }
.ba-b{ background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-sm);padding:12px 14px; }
.ba-a{ background:rgba(64,200,150,.12);border:1px solid rgba(64,200,150,.25);border-radius:var(--radius-sm);padding:12px 14px; }
.ba-lab{ font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px; }
.ba-b .ba-lab{ color:rgba(255,255,255,.6); }
.ba-a .ba-lab{ color:var(--accent-l); }
.ba-txt{ font-size:var(--text-sm);line-height:1.5; }
.ba-b .ba-txt{ color:rgba(255,255,255,.85); }
.ba-a .ba-txt{ color:#fff; }
.ba-arr{ align-self:center;text-align:center;color:var(--accent-l);font-size:var(--text-xs); }
@media(max-width:768px){
  .prob-card, .svc-card, .work-card, .exp-card, .sup-item, .sup-cases,.ba-wrap{ padding:clamp(20px,3.6vw,28px); }
}

/* =====================================================================
   EXPERIENCE LAB
   ===================================================================== */
.exp-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:14px; }
.exp-card{ position:relative; }
.exp-card.off::after{ content:"Soon";position:absolute;top:10px;right:10px;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-m);background:var(--accent-soft);padding:2px 8px;border-radius:100px; }
.exp-icon{ width:48px;height:48px;border-radius:var(--radius-sm);background:var(--accent-soft);display:flex;align-items:center;justify-content:center; }
.exp-icon svg{ width:22px;height:22px;color:var(--accent); }
.exp-title{ font-size:var(--text-base);font-weight:700;color:var(--text-p); }
.exp-desc{ font-size:var(--text-sm);color:var(--text-s);line-height:1.55; }
.exp-link{ font-size:var(--text-sm);font-weight:700;color:var(--accent); margin-top: auto;cursor: pointer;}

/* =====================================================================
   WORK
   ===================================================================== */
/* index.php works-grid 이식: preview.css 는 .works-grid 를 data-concept 별로만
   display:grid 로 켜므로(newtheme 미매칭 → display:none), 여기서 강제로 표시.
   .wcard* / .filter / .wcard-bg-N 등 나머지 스타일은 preview.css 의 비게이팅 규칙 사용. */
.pv-new-main .works-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }
@media(max-width:900px){ .pv-new-main .works-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .pv-new-main .works-grid{ grid-template-columns:1fr; } }

.work-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:16px; }
.work-mockup{ padding:16px;border-bottom:1px solid var(--border); }
.wm-blue{ background:linear-gradient(135deg,#EEF4FF,#F5F8FF); }
.wm-green{ background:linear-gradient(135deg,#EEF8F2,#F5FDF8); }
.wm-teal{ background:linear-gradient(135deg,#EEF8F5,#F2FDF9); }
.wm-mint{ background:linear-gradient(135deg,#F0FAF5,#F8FEFB); }
.wm-bar{ display:flex;align-items:center;gap:8px;margin-bottom:10px; }
.wm-dots{ display:flex;gap:4px; }
.wm-dots span{ width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,.12); }
.wm-title-bar{ font-size:10px;font-weight:600;color:var(--text-s); }
.wm-content{ display:flex;flex-direction:column;gap:6px; }
.wm-tag-list{ display:flex;flex-wrap:wrap;gap:5px;padding:4px 0; }
.wm-tag{ font-size:10px;font-weight:600;color:var(--accent);background:var(--accent-glow);border:1px solid rgba(47,122,99,.2);padding:4px 10px;border-radius:100px; }
.work-body{ padding:20px 20px 24px 20px; }
.work-cat{ font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:12px; }
.work-title{ font-size:var(--text-base);font-weight:700;color:var(--text-p);line-height:1.45;margin-bottom:18px; }
.work-rows{ display:flex;flex-direction:column;gap:10px;margin-bottom:0; }
.work-row{ display:grid;grid-template-columns:44px 1fr;gap:8px;font-size:13px;line-height:1.6; }
.work-rl{ font-size:11px;font-weight:700;color:var(--text-m);padding-top:2px; }
.work-rv{ color:var(--text-s); }

/* =====================================================================
   SUPPORT
   ===================================================================== */
.sup-bottom{ display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch; }
.sup-list{ display:flex;flex-direction:column;gap:12px; }
.sup-ico{ width:36px;height:36px;border-radius:var(--radius-sm);background:var(--accent-glow);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.sup-ico svg{ width:16px;height:16px;color:var(--accent); }
.sup-label{ font-size:var(--text-md);font-weight:700;color:var(--text-p); }
.sup-cases-title{ font-size:clamp(22px,2.5vw,30px);font-weight:900;color:var(--accent);margin-bottom:24px;letter-spacing:-.02em;line-height:1.3; }
.sup-cases ul{ list-style:none;display:flex;flex-direction:column;gap:11px; }
.sup-cases li{ font-size:var(--text-base);color:var(--text-s);display:flex;align-items:flex-start;gap:10px;line-height:1.7;padding:0;border-bottom:1px solid var(--border); }
.sup-cases li:last-child{ border-bottom:none; }
.sup-cases li::before{ content:"✓";color:var(--accent);font-weight:900;flex-shrink:0;margin-top:2px; }

/* =====================================================================
   CTA
   ===================================================================== */
.cta-sec{ background:var(--accent-dark);position:relative;overflow:hidden;text-align:center;padding:96px 0; }
.cta-sec::before{ content:"";position:absolute;top:-150px;left:50%;transform:translateX(-50%);width:800px;height:500px;background:radial-gradient(ellipse, rgb(255 255 255 / 15%) 0%, transparent 65%);pointer-events:none; }
.cta-watermark{ position:absolute;bottom:-10px;left:0;right:0;font-family:var(--font-h);font-size:clamp(50px,10vw,120px);font-weight:900;color:rgba(255,255,255,.03);white-space:nowrap;overflow:hidden;pointer-events:none;user-select:none; }
/* preview.css .cta-wrap(padding:100px 40px) 무력화 */
.cta-sec .cta-wrap{ position:relative;z-index:1;padding:0 32px; }
.cta-title{ font-family:var(--font-h);font-size:clamp(24px,4vw,44px);font-weight:900;color:#fff;line-height:1.25;letter-spacing:-.025em;margin-bottom:16px;
  background: linear-gradient(135deg, #FFFFFF 0%, #A8E6CF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;}
.cta-desc{ font-size:var(--text-base);color:rgba(255,255,255,.75);line-height:1.75;margin-bottom:40px;max-width:500px;margin-left:auto;margin-right:auto; }
.cta-btns{ display:flex;gap:14px;justify-content:center;flex-wrap:wrap; }
.btn-cta-p{ background:var(--accent-l);color:var(--accent-dark);border:none; }
.btn-cta-p:hover{ background:#5BD4A8;transform:translateY(-1px); }
.btn-cta-o{ background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.3); }
.btn-cta-o:hover{ background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6); }

/* =====================================================================
   FAQ (SEO / FAQPage)
   ===================================================================== */
.faq-list{ display:flex;flex-direction:column;gap:12px;max-width:900px;margin:0 auto; }
.faq-item{ background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all .2s; }
.faq-item[open]{ border-color:var(--accent);box-shadow:0 8px 24px rgba(47,122,99,.10); }
.faq-q{
  padding:24px 60px 24px 28px;
  font-size:clamp(16px,1.8vw,18px);font-weight:700;color:var(--text-p);
  cursor:pointer;list-style:none;position:relative;
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q::after{
  content:"+";position:absolute;right:28px;top:50%;transform:translateY(-50%);
  font-size:24px;font-weight:400;color:var(--accent);transition:transform .2s;
}
.faq-item[open] .faq-q::after{ content:"−"; }
.faq-a{ padding:0 28px 28px;color:var(--text-s);line-height:1.7;font-size:15px; }
.faq-a p{ margin:0; }
@media(max-width:768px){
  .faq-q{ padding:clamp(16px,3.1vw,24px) clamp(44px,7.8vw,60px) clamp(16px,3.1vw,24px) clamp(18px,3.6vw,28px); }
  .faq-a{ padding:0 clamp(18px,3.6vw,28px) clamp(18px,3.6vw,28px); }
}

/* =====================================================================
   카드 통일(prob/svc/work/exp/sup)
   ===================================================================== */
.prob-card, .svc-card, .work-card, .exp-card, .sup-item, .sup-cases{
  background:rgba(255, 255, 255, 0.2);
  border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 2px 12px rgba(24,36,58,0.06);
  transition:all .2s;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.prob-card{ padding:32px 28px; }
.work-card{ padding:0;overflow:hidden; }
.exp-card{ padding:28px 20px;background: #fff; }
.sup-item, .sup-cases{ padding:20px 22px; }

.prob-card:hover, .work-card:hover, .exp-card.on:hover, .sup-item:hover{
  border-color:var(--accent);
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
}

.prob-card{ display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
  border: 1.5px solid var(--border-m);
  box-shadow: inset 4px 4px 12px rgba(0, 0, 0, 0.15), inset -4px -4px 12px rgba(255, 255, 255, 0.15);
  background: rgba(244, 247, 245, .96);}
.sup-item{ display:flex;flex-direction:row;align-items:center;gap:14px; }
.exp-card{ display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;box-shadow: var(--shadow-md);}
.exp-card.off{ opacity:.4;pointer-events:none;background: var(--bg);box-shadow: var(--shadow-sm); }

/* =====================================================================
   스크롤 등장(.rv)  ※ .fade-up 는 preview.css 정의 재사용
   ===================================================================== */
.rv{ opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease; }
.rv.in{ opacity:1;transform:none; }
.rv.d1{transition-delay:.08s;}.rv.d2{transition-delay:.16s;}.rv.d3{transition-delay:.24s;}.rv.d4{transition-delay:.32s;}

/* =====================================================================
   반응형
   ===================================================================== */
@media(max-width:1024px){
  .ai-in{ grid-template-columns:1fr;gap:40px; }
  .work-grid{ grid-template-columns:1fr; }
}
@media(max-width:768px){
  .sup-bottom{ grid-template-columns:1fr; }
  .prob-grid{ grid-template-columns:1fr; }
  .svc-grid{ grid-template-columns:1fr; }
  .work-grid{ grid-template-columns:1fr; }
  .exp-grid{ grid-template-columns:repeat(2,1fr); }
  .kpi-strip{ grid-template-columns:repeat(2,1fr); }
  .ai-in{ grid-template-columns:1fr; }
  #hero-default{ padding:clamp(42px,7.8vw,60px) clamp(14px,2.6vw,20px) clamp(28px,5.2vw,40px);gap:clamp(22px,4.2vw,32px); }
  .hero-content{ padding:clamp(17px,3.1vw,24px) 0; }
  .hero-actions{ width:100%;flex-direction:column; }
  .hero-actions .btn{ width:100%;justify-content:center; }
  .pv-new-main section{ padding:clamp(45px,8.3vw,64px) 0; }
  .pv-new-main section.section{ padding:clamp(45px,8.3vw,64px) 0; }
  .wrap{ padding:0 clamp(14px,2.6vw,20px); }
  .cta-sec{ padding:clamp(45px,8.3vw,64px) 0; }
  .cta-btns{ flex-direction:column;align-items:center; }
  .cta-btns .btn{ width:100%;max-width:clamp(210px,39vw,300px);justify-content:center; }
}
@media(max-width:480px){
  .exp-grid{ grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce){
  .rv{ transition:none;opacity:1;transform:none; }
  .hdot,.hero::before,.hero::after{ animation:none; }
}
.kakao-consult-fab{
  position:fixed; right:24px; bottom:24px; z-index:9999;
  display:flex; align-items:center; gap:10px;
  padding:14px 20px 14px 16px;
  background:#FAE100; color:#3C1E1E;
  text-decoration:none; font-size:15px; font-weight:700;
  border-radius:999px; box-shadow:0 6px 20px rgba(0,0,0,.18);
  transition:transform .18s ease, box-shadow .18s ease; white-space:nowrap;
}
.kakao-consult-fab:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.24); }
.kakao-consult-fab svg{ width:24px; height:24px; flex:none; }
@media (max-width:600px){
  .kakao-consult-fab{ right:16px; bottom:16px; padding:12px 16px 12px 14px; font-size:14px; }
}

/* =====================================================================
   data-concept(light/dark/fluid) 호환 오버라이드
   ---------------------------------------------------------------------
   index_new 는 표준 헤더(data-concept="light" 등)로 렌더되어 preview.css 의
   [data-concept] 규칙(특이도 0,2,0 / 1,1,0)이 hero·ticker 를 덮어쓴다.
   아래처럼 .pv-new-main 으로 스코프하면 동일 특이도가 되고, preview.css 보다 나중에
   로드되므로 신규 레이아웃이 최종 적용된다.
   ※ preview.css 가 [data-concept="light"] 로 바꾸는 속성만 재확정한다.
   ===================================================================== */
.pv-new-main .ticker{ display:flex; }                 /* light: .ticker{display:none} 무력화 */
.pv-new-main #hero-default{                            /* light: min-height:80svh, 대형 padding, align/justify 변경 */
  min-height:0;
  padding:clamp(40px,5.6vw,80px) 40px ;            /* 상단 여백 최소 절반(40px)까지 축소 */
  align-items:stretch;
  justify-content:flex-start;
  text-align:left;
}
.pv-new-main .hero-top{ position:static; top:auto; left:auto; right:auto; }   /* dark: .hero-top 절대배치 무력화 */
.pv-new-main .hero-title{                              /* light/dark: font-size/line-height/max-width 변경 무력화 */
  font-size:clamp(34px,5.6vw,79px);
  line-height:1.1;
  text-align:left;
  max-width:none;
}
.pv-new-main .hero-bottom{                             /* light: position:absolute 등으로 하단 절대배치 */
  position:static; left:auto; right:auto; bottom:auto;
  align-items:flex-start; justify-content:flex-end; flex-wrap:wrap;
}

.pv-new-main .hero-tag-chip{                           /* light: border/background 색 변경 */
  border-color:var(--border); background:#fff; color:var(--text-s);
}
@media(max-width:768px){
  /* light #hero-default(1,1,0) 가 모바일 clamp padding 을 덮으므로 재확정 */
  .pv-new-main #hero-default{ padding:clamp(42px,7.8vw,60px) clamp(14px,2.6vw,20px) clamp(28px,5.2vw,40px); }
}

/* =====================================================================
   data-concept="dark" : 신규 메인 다크 테마
   ---------------------------------------------------------------------
   preview.css 의 dark 팔레트를 참고. preview_new 의 :root 가 토큰을 라이트로
   덮으므로, 여기서 dark 토큰을 다시 공급하고(후순위 로드로 dark 에서 승리)
   하드코딩된 밝은 표면(#fff·#F6FAF8·#0A1A0F 등)은 .pv-new-main 스코프로 오버라이드.
   ===================================================================== */
[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-soft:rgba(26,122,82,.14); --accent-glow:rgba(26,122,82,.2);
  --ticker-bg:#141414;
  --nav-bg:rgba(13,17,14,.96);          /* 헤더(.nh) 배경 다크 */
  /* 헤더/공용(preview_sub 토큰: --text/--text-sub/--bg-hover) 다크 */
  --text:#e8f0ec; --text-sub:#9dbdaa; --text-muted:#5a7868; --bg-hover:rgba(255,255,255,.06);
}
/* 헤더 로고: 다크 컨셉에서 라이트(흰) 로고로 스왑 (헤더는 data-theme="light" 고정이라 수동 스왑) */
[data-concept="dark"] .nh-logo-light{ display:none; }
[data-concept="dark"] .nh-logo-dark{ display:block; }
/* 투명 섹션 뒤 다크 배경 : body 에 지정(.pv-new-main 은 투명 유지 → 모프 블롭이 비쳐 보임) */
[data-concept="dark"] body{ background:var(--bg); }
/* 밝은 alt 섹션(#F6FAF8) → 다크 */
[data-concept="dark"] .pv-new-main section.bg{ background:var(--bg-sub); }
/* 하드코딩 어두운 텍스트(#0A1A0F) → 라이트 */
[data-concept="dark"] .pv-new-main .sec-title,
[data-concept="dark"] .pv-new-main .svc-title{ color:var(--text-p); }
/* 하드코딩 흰 배경(#fff / --white) 카드류 → 다크 카드 */
[data-concept="dark"] .pv-new-main .kpi-cell,
[data-concept="dark"] .pv-new-main .prob-card,
[data-concept="dark"] .pv-new-main .svc-card,
[data-concept="dark"] .pv-new-main .exp-card,
[data-concept="dark"] .pv-new-main .sup-item,
[data-concept="dark"] .pv-new-main .sup-cases,
[data-concept="dark"] .pv-new-main .hero-badge,
[data-concept="dark"] .pv-new-main .hero-tag-chip,
[data-concept="dark"] .pv-new-main .faq-item,
[data-concept="dark"] .pv-new-main .btn-w{ background:var(--bg-card); }