/* base.css — 리셋 + 타이포 + 유틸리티 (원본 base.css/common.css 유틸 기반 재작성) */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, em, img, ins, small, strike, strong, sub, sup,
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, iframe, button, input, select, textarea {
  margin: 0; padding: 0; border: 0; vertical-align: top; font: inherit; color: inherit; background: transparent;
}
html { width: 100%; -webkit-text-size-adjust: none; }
body {
  width: 100%; height: auto;
  font-family: var(--font-sans);
  font-size: 18px; line-height: 1.5; letter-spacing: -0.01em;
  color: var(--primary-color); background: #fff;
  word-break: keep-all; word-wrap: break-word;
}
img { display: inline-block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { text-decoration: none; }
table { border-collapse: collapse; border-spacing: 0; }
button { cursor: pointer; overflow: visible; }
input, select, textarea { border-radius: 0; -webkit-appearance: none; appearance: none; }
input[type=text], input[type=password], input[type=number], select, textarea {
  padding: 15px 20px; border: 1px solid #ebebeb; background: #fff; color: #696969; font-size: 16px; width: 100%;
}
input::placeholder, textarea::placeholder { color: #696969; }
textarea { resize: none; }
select { padding-right: 40px; background: url(/assets/img/ico-select.svg) #fff no-repeat center right 20px; border: 1px solid #ddd; }
address, em, cite, dfn { font-style: normal; }
:focus-visible { outline: none; }
hr { display: none; }
video, iframe { position: relative; max-width: 100%; }

/* 인라인 요소 — 원본 base.css와 동일 (pill/label의 패딩·마진이 적용되도록) */
cite, code, dfn, del, em, ins, label, q, span, strong { display: inline-block; }

/* 타이포 스케일 */
h1 { font-size: 80px; font-weight: bold; line-height: normal; }
h2 { font-size: 60px; font-weight: bold; margin-bottom: 20px; }
h3 { font-size: 48px; font-weight: bold; line-height: normal; }
h4 { font-size: 32px; font-weight: bold; }
.heading { font-weight: bold; }

/* 유틸리티 */
.inner { max-width: var(--container); margin: 0 auto; width: 90%; }
.inner.large { max-width: var(--container-large); }
.inner-left { padding-left: calc(max((100vw - var(--container)) / 2, 5vw)) !important; }
.inner-right { padding-right: calc(max((100vw - var(--container)) / 2, 5vw)) !important; }
.blind { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); overflow: hidden; }
.hide { position: absolute; left: -9999%; font-size: 0; height: 0; line-height: 0; text-indent: -9999px; }
.mo { display: none; }
.pc { display: inline; }
.accent { vertical-align: baseline; color: var(--accent-color); display: inline; }
.grid-box { display: grid; }
.flex-box { display: flex; }
.sticky { position: sticky; top: 0; }
.w-100 { width: 100%; }
.tac { text-align: center !important; }
.tal { text-align: left !important; }
.tar { text-align: right !important; }
.sub-heading { font-size: 20px; font-weight: 500; color: #666; margin-bottom: 5px; }
.content-top .text { font-size: 20px; color: #333; }
.heading-sub { font-size: 20px; color: var(--accent-color); margin-bottom: 20px; }
.dot { width: 4px; height: 4px; border-radius: 50%; vertical-align: middle; margin-right: 10px; background: #000; flex-shrink: 0; }

figure { position: relative; width: 100%; height: 0; padding-bottom: 50%; overflow: hidden; }
figure img, figure video, figure iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.img-box img, figure img { display: block; }
.img-box { position: relative; overflow: hidden; }
.img-box > img { width: 100%; }

.view { font-weight: 700; }
.view-more { width: 28px; height: 28px; background: url(/assets/img/view-more.svg) no-repeat center/auto 100%; margin-left: 14px; display: inline-block; vertical-align: middle; }
.view-more.black { background-image: url(/assets/img/view-more.svg); }
.view-more.white { background-image: url(/assets/img/view-more-white.svg); }

.btns-group { display: flex; align-items: center; }
.down-btn { display: flex; align-items: center; cursor: pointer; }

.sec-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.sec-group { position: relative; }
.wrap.sub { padding-top: 0; }

/* 등장 애니메이션 (ScrollReveal fadeUp 대체 — JS가 .is-reveal 부여) */
[data-reveal] { opacity: 0; transform: translateY(60px); transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1); }
[data-reveal="left"] { transform: translateX(-60px); }
[data-reveal="zoom"] { transform: scale(0.5); }
[data-reveal].is-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

@media screen and (max-width: 1240px) {
  h1 { font-size: 60px; } h2 { font-size: 48px; } h3 { font-size: 32px; } h4 { font-size: 24px; }
}
@media screen and (max-width: 767px) {
  body { font-size: 14px; }
  h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 22px; } h4 { font-size: 18px; }
  .pc { display: none; } .mo { display: block; }
  .heading-sub { font-size: 16px; margin-bottom: 10px; }
  .view-more { width: 18px; height: 18px; margin-left: 5px; }
}