/* =====================================================================
   about_new.css — about_new 페이지 전용 델타 (연혁 History 슬라이드)
   ---------------------------------------------------------------------
   · preview_sub.css(헤더 로드) + Swiper CSS 뒤에 로드된다.
   · 색상/토큰은 preview_sub.css 의 :root 변수를 그대로 사용한다.
   ===================================================================== */

.ah-history{ margin-top:8px; }

/* ── 상단: Since + 이전/다음 화살표 ── */
.ah-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.ah-since{
  font-family:var(--font-h); font-size:var(--t-sm); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
}
.ah-ctrl{ display:flex; gap:8px; }
.ah-btn{
  width:44px; height:44px; flex-shrink:0; border:1.5px solid var(--border); border-radius:50%;
  background:var(--bg-card); color:var(--text-sub);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .18s;
}
.ah-btn:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.ah-btn svg{ width:18px; height:18px; }
.ah-btn.swiper-button-disabled{ opacity:.35; cursor:default; pointer-events:none; }

/* ── 슬라이드 카드 ── */
.ah-swiper{ width:100%; }
.ah-slide{
  box-sizing:border-box; height:auto; position:relative; overflow:hidden;
  background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:36px 40px;
}
.ah-slide::before{
  content:''; position:absolute; top:-40px; right:-30px; width:260px; height:260px;
  background:radial-gradient(circle, var(--accent-glow) 0%, transparent 68%); pointer-events:none;
}
.ah-year-big{
  position:relative; z-index:1;
  font-family:var(--font-h); font-size:clamp(32px,5vw,52px); font-weight:900;
  letter-spacing:-.02em; color:var(--accent); line-height:1;
  margin-bottom:24px; padding-bottom:18px; border-bottom:1px solid var(--border);
}
.ah-list{
  position:relative; z-index:1; list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:11px 32px;
}
.ah-list li{
  position:relative; padding-left:20px;
  font-size:var(--t-sm); color:var(--text-sub); line-height:1.55; word-break:keep-all;
}
.ah-list li::before{
  content:''; position:absolute; left:0; top:8px;
  width:6px; height:6px; border-radius:50%; background:var(--accent);
}

/* ── 페이지네이션 ── */
.ah-pagination{ position:static; margin-top:22px; text-align:center; }
.ah-pagination .swiper-pagination-bullet{
  width:8px; height:8px; background:var(--border-m); opacity:1; transition:all .18s;
}
.ah-pagination .swiper-pagination-bullet-active{
  background:var(--accent); width:22px; border-radius:5px;
}

/* ── 반응형 ── */
@media(max-width:768px){
  .ah-head{ margin-bottom:16px; }
  .ah-btn{ width:clamp(36px,7vw,44px); height:clamp(36px,7vw,44px); }
  .ah-slide{ padding:clamp(22px,4.7vw,36px) clamp(20px,3.9vw,40px); }
  .ah-year-big{ margin-bottom:clamp(16px,3.1vw,24px); padding-bottom:clamp(13px,2.3vw,18px); }
  .ah-list{ grid-template-columns:1fr; gap:clamp(8px,1.6vw,11px); }
}

/* =====================================================================
   about 페이지 인라인 style 전환분 (view 의 style="..." 제거 대응)
   ===================================================================== */

/* ── 히어로 ── */
.ah-hero-title{ font-size:var(--t-2xl); }
.ah-hero-sub{ max-width:520px; }

/* ── KPI ── */
.ah-kpi-accent{ color:var(--accent); }

/* ── Our Story ── */
.ah-story-title{ margin-bottom:20px; }
.ah-story-p{
  font-size:var(--t-base); color:var(--text-sub); line-height:1.9; margin-bottom:16px;
}
.ah-story-p-last{ margin-bottom:28px; }
.ah-btn-row{ display:flex; gap:12px; flex-wrap:wrap; }

/* ── 기술 스택 ── */
.ah-tech-list{ display:flex; flex-wrap:wrap; gap:10px; }
.ah-tech-item{
  padding:8px 18px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--r-full);
  font-size:var(--t-sm); font-weight:500; color:var(--text-sub); transition:all .15s;
}
/* 기존 onmouseover/onmouseout 인라인 JS 를 CSS :hover 로 대체 */
.ah-tech-item:hover{ border-color:var(--accent); color:var(--accent); }

/* ── 반응형 ── */
@media(max-width:768px){
  .ah-hero-sub{ max-width:100%; }
  .ah-story-title{ margin-bottom:clamp(14px,2.6vw,20px); }
  .ah-story-p{ margin-bottom:clamp(11px,2.1vw,16px); }
  .ah-story-p-last{ margin-bottom:clamp(19px,3.6vw,28px); }
  .ah-btn-row{ gap:clamp(8px,1.6vw,12px); }
  .ah-tech-list{ gap:clamp(7px,1.3vw,10px); }
  .ah-tech-item{ padding:clamp(6px,1vw,8px) clamp(13px,2.3vw,18px); }
}