/* ==========================================================================
   reset + 타이포 기본값
   원본은 Meyer reset 위에 한국어 조판 규칙(word-break:keep-all, line-height 1.2)을
   덮어쓰는 구조다. 같은 결과를 최소 규칙으로 재작성했다.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0 auto;
  min-width: 340px;
  overflow-x: hidden;
  background: var(--white);
}

body.is-locked { height: 100%; overflow: hidden; }

h1, h2, h3, h4, h5, h6,
p, blockquote, figure, dl, dd,
ul, ol, li,
form, fieldset, legend,
table, caption, th, td,
article, aside, footer, header, main, nav, section {
  margin: 0;
  padding: 0;
}

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strong, sub, sup, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header,
hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video,
textarea, input, select, button {
  font-family: var(--font);
  font-size: 100%;
  font-weight: inherit;
  line-height: 1.2;
  color: var(--ink);
  word-break: keep-all;
}

body { font-family: var(--font); font-size: var(--fs-sm); font-weight: 400; color: var(--ink); line-height: 1.2; }

article { line-height: 1.5; }

ul, ol, li { list-style: none; }

a { color: #000; text-decoration: none; }

img { vertical-align: top; border: 0; max-width: 100%; }

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

input, textarea, select {
  border: 0;
  outline: none;
  background: none;
  border-radius: 0;
  -webkit-appearance: none;
          appearance: none;
}

table { border-collapse: collapse; border-spacing: 0; }
table th, table td { vertical-align: middle; }

svg { display: block; }

/* ---- 반응형 표시 토글 ------------------------------------------------- */
.mo { display: none; }

@media (max-width: 768px) {
  .pc { display: none !important; }
  .mo { display: block !important; }
}

/* ---- 레이아웃 셸 ------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--shell-pad);
}

/* ---- 스크린리더 전용 -------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- 섹션 공통 제목 --------------------------------------------------- */
.sec-head { min-width: max-content; }

.sec-head__sub {
  margin-bottom: 16px;
  font-family: var(--font-disp);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--brand);
}

.sec-head__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--ink-900);
}

.sec-head__desc {
  margin-top: 17.5px;
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-600);
}

@media (max-width: 1024px) {
  .sec-head__sub { margin-bottom: 12px; font-size: var(--fs-sm); }
  .sec-head__desc { font-size: var(--fs-sm); }
}

@media (max-width: 768px) {
  .sec-head__sub { font-size: var(--fs-2xs); }
  .sec-head__desc { font-size: var(--fs-2xs); }
}

/* ---- 슬라이더 PREV / NEXT 컨트롤 -------------------------------------- */
.slider-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}

/* 전역 img{max-width:100%} 때문에 flex 안에서 화살표 폭이 0 으로 계산돼 NEXT 화살표가 상자 밖으로 삐져나갔다 */
.slider-nav img { flex-shrink: 0; max-width: none; }

/* 헬베티카 볼드(박변 지시). 윈도우에는 헬베티카가 없어 Arial 로 보인다 */
.slider-nav p {
  font-family: Helvetica, Arial, sans-serif;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink-800);
}

.slider-nav:hover p { color: var(--brand); text-decoration: underline; }

@media (max-width: 1024px) {
  /* 원본은 최신뉴스·인사이트 화살표만 줄인다. 엑스퍼트 그룹 화살표는 24px 유지 */
  .news__ctrl .slider-nav p,
  .insight__ctrl .slider-nav p { font-size: var(--fs-2xs); }
  .news__ctrl .slider-nav img,
  .insight__ctrl .slider-nav img { height: 14px; }
}