/* ---- base.css ---- */
:root { --pad: clamp(20px, 2.5vw, 36px); --grey: #929292; --soft: #c2c2c2; --blue: #1418c8; --hover: #1a6aff; --hd-wait: 1.1s; }
* { box-sizing: border-box; }
/* 바탕: 원본은 문서 바탕이 흰색이고 검은색은 내용 상자에만 칠해진다 — 내용이 화면보다 짧은 페이지(세로로 긴 화면)의 아래쪽과, 끝에서 더 당겼을 때 드러나는 곳이 희다.
   html에 바탕을 따로 주면 body의 검은색이 문서 전체로 번지지 않고 body 상자에만 칠해진다 */
html { overflow-y: scroll; background: #fff; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #000; color: #fff; font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Malgun Gothic', sans-serif; font-weight: 400; line-height: 1.6; word-break: keep-all; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, video, iframe { display: block; max-width: 100%; border: 0; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
strong { font-weight: 800; }
/* 키보드로 이동할 때만 보이는 초점 테두리(원본과 같은 흰색+파랑 이중 테두리). z-index: 1도 원본 그대로 — 초점 받은 요소가 따로 그려져 글자 윤곽 처리가 원본과 같아진다 */
a:focus-visible, button:focus-visible { z-index: 1; outline: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #116dff; }
/* '본문으로 건너뛰기' 단추 — 키보드로 처음 Tab을 눌렀을 때만 헤더 아래 가운데에 나타난다(원본의 자리·모양 그대로). 누르면 초점이 본문 첫 구역으로 간다(base.js) */
.skip { position: absolute; z-index: 9999; top: 60px; left: 50%; width: 0; height: 0; margin-left: -94px; padding: 0 24px; border: 0; border-radius: 24px; background: #fff; color: #116dff; font: 14px Helvetica, Arial, "メイリオ", meiryo, "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif; opacity: 0; pointer-events: none; cursor: pointer; }
.skip:focus { z-index: 9999; width: auto; height: 40px; border: 2px solid; outline: 0; box-shadow: none; opacity: 1; pointer-events: auto; } /* z-index를 다시 적는 것은 위 초점 규칙(z-index: 1)에 덮이지 않게 하려는 것 */
main > [tabindex="-1"]:focus { outline: 0; } /* 건너뛰기 단추가 초점을 옮겨 놓는 본문 첫 구역 */

/* 헤더 — 위치·크기는 원본 Wix의 규칙을 그대로 옮긴 것이라 수치가 길다. cqw = 헤더 너비의 1%.
   구간은 원본과 같이 셋: 1001px 이상(가로 메뉴), 751~1000px(가로 메뉴, 배치만 다름), 750px 이하(햄버거).
   쌓임 순서도 원본대로: 화면에 고정되지 않는 헤더에는 z-index가 없고(본문과 같은 층 — 메뉴 글자의 윤곽 처리가 원본과 같아진다) 펼침 메뉴·언어 목록만 본문 위로 올라온다.
   .hd-up은 container-type이 쌓임 맥락을 만드는 옛 브라우저용(base.js가 붙인다): 거기서는 펼침 메뉴가 본문 뒤에 깔리지 않게 헤더 전체를 올린다. */
.hd { position: relative; display: grid; grid-template-rows: minmax(81.0859px, auto); container-type: inline-size; transition: opacity .3s cubic-bezier(.5, 0, .75, 0), visibility .3s; }
.hd > * { grid-area: 1 / 1; }
.hd-up .hd { z-index: 49; }
.pin .hd { position: fixed; top: 0; left: 0; z-index: 55; width: 100%; }
.hd.gone { opacity: 0; visibility: hidden; } /* 아래로 스크롤하면 base.js가 붙인다 */
.logo { align-self: center; justify-self: start; width: 6.011908cqw; aspect-ratio: 1 / .281841; margin: .388931cqw 0 0 1.891578cqw; overflow: hidden; }
.logo img { width: 100%; height: 100%; object-fit: cover; }
.hd-r { align-self: start; justify-self: end; display: flex; align-items: flex-start; width: max-content; margin: .992744cqw 4.003329cqw 0 0; }
.hd-r > * { flex: none; }
.hd nav { display: flex; align-items: flex-start; width: 30.9443cqw; min-height: 30px; margin: .48735cqw .05727cqw 0 0; }
.menu, .menu ul, .mnav ul { margin: 0; padding: 0; list-style: none; }
.menu { display: flex; flex-wrap: wrap; flex-grow: 1; justify-content: center; margin: -4px; } /* 폭이 모자라면 원본처럼 두 줄로 넘어간다 */
.menu > li { position: relative; display: flex; flex-grow: 1; }
.menu > li > a { display: block; flex-grow: 1; margin: 4px; padding: 4px 10px; font-size: 15px; font-weight: 600; line-height: normal; letter-spacing: .05em; white-space: nowrap; }
.menu > li > a:focus-visible { box-shadow: inset 0 0 0 2px #116dff, inset 0 0 0 4px #fff; }
/* 들어올 때만 0.08초, 나갈 때는 즉시. 지금 보고 있는 페이지의 항목은 마우스를 올려도 흰색 그대로다(원본과 같다) */
.menu > li:hover > a:not([aria-current]), .menu > li.open > a:not([aria-current]) { color: var(--hover); transition: color .08s linear; }
/* 하위 메뉴 여닫이 단추(키보드용). 평소에는 크기 0으로 숨어 있고, Tab으로 닿으면(.kb) 나타나면서 옆 항목들을 밀어낸다. 펼친 동안(.open)은 화살표가 뒤집힌다 */
.sub-tg { flex: none; align-self: center; width: 0; height: 0; padding: 0; border: 0; background: none; clip-path: inset(50%); cursor: default; }
.sub-tg svg { display: block; margin: 0 auto 1px; }
.menu > .kb > .sub-tg { width: 24px; height: 24px; margin: 0 8px 0 4px; background: #fff; clip-path: none; }
.menu > .open > .sub-tg { rotate: 180deg; }
.sub { position: absolute; z-index: 47; top: 30px; left: 4px; display: none; width: max-content; }
.menu > li:hover > .sub, .menu > li.open > .sub { display: block; }
.menu > li.shut:not(.open) > .sub { display: none; } /* 지금 페이지의 링크를 누른 뒤(base.js): 마우스가 올라가 있어도 닫아 둔다 */
.sub ul { margin: 3px 0 -6px; opacity: 0; animation: hd-fade .1s ease .05s forwards; }
.sub a { display: block; margin-bottom: 6px; padding: 11px 15px; font-size: 13px; line-height: 1.3; letter-spacing: .02em; white-space: nowrap; }
.sub a:hover, .sub a[aria-current] { text-decoration: underline; }
/* sticky는 원본 그대로 둔 것: 위치는 변하지 않지만 브라우저가 이 버튼을 따로 그리게 되어 뒤따르는 언어 선택 글자의 윤곽 처리(회색조)가 원본과 같아진다 */
.nvoice { position: sticky; top: 0; display: flex; align-items: center; justify-content: center; width: 5.88514cqw; min-height: 39.3068px; margin-right: .86971cqw; padding: 9.911px 18.583px; border-radius: 25px; background: #150ca2; font-size: 15px; font-weight: 600; line-height: 1.6; text-align: center; transition: background-color .4s ease, color .4s ease; }
.nvoice:hover { background: var(--hover); color: #000; }
.lang { position: relative; width: 111.09375px; height: 50.60546875px; font: 400 14px/1.2 Poppins, sans-serif; }
.lang > button, .lang-menu > * { display: flex; align-items: center; color: #fff; cursor: pointer; }
.lang > button { position: relative; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 10px; background: none; font: inherit; overflow: hidden; }
.lang > button:hover, .lang-menu > a:hover { background: #fff; color: #000; }
.lang > button:active { background: rgba(179, 205, 255, .52); color: #000; } /* 누르고 있는 동안 */
.lang.open { z-index: 47; }
.lang.open > button { opacity: 0; pointer-events: none; }
.lang-menu { position: absolute; z-index: 1; top: 0; left: 0; display: none; flex-direction: column; width: 100%; border-radius: 10px; overflow: hidden; }
.lang.open .lang-menu { display: flex; }
.lang-menu > * { height: 51px; }
.lang-menu > * + * { border-top: 1px solid rgba(255, 255, 255, .46); }
.lang-menu .lang-cur { background: rgba(179, 205, 255, .52); color: #000; cursor: default; }
.lang-menu .lang-cur .arr { transform: rotate(180deg); }
.lang-menu > :focus-visible { outline: 2px solid #116dff; outline-offset: -2px; box-shadow: 0 0 1px 2px #fff; }
.flag { flex: none; width: 20px; height: 20px; margin: 0 -6px 0 14px; border-radius: 50%; }
.flag + span { position: relative; top: -1px; margin-left: 14px; } /* 원본이 쓰는 옛 Poppins 파일과 기준선이 1px 달라 맞춘 것 */
.arr { width: 12px; fill: currentColor; }
.lang .arr { flex: none; margin: 0 14px 0 auto; }
.burger { display: none; }

/* 처음 열릴 때 로고와 N voice 버튼의 등장 효과. 원본은 화면이 처음 그려진 뒤에도 Wix 스크립트가 준비될 때까지 등장 효과가 걸린 요소를 숨겨 두었다가
   한꺼번에 시작한다 — 그 기다림을 animation-delay(--hd-wait)로 흉내 낸 것. 원본의 기다림은 회선·기기에 따라 0.6~1.6초로 달라져서 가운데 값(1.1초)을 썼다.
   페이지의 첫 화면에서 바로 시작하는 등장 효과도 같은 값을 쓰면 원본처럼 헤더와 함께 시작한다 */
@media (prefers-reduced-motion: no-preference) {
  .logo { animation: hd-fade 1.2s cubic-bezier(.25, .46, .45, .94) var(--hd-wait) backwards, hd-wink-clip 1.2s cubic-bezier(.86, 0, .07, 1) var(--hd-wait) backwards, hd-wink-scale 1.02s cubic-bezier(.86, 0, .07, 1) var(--hd-wait) backwards; }
  .nvoice { animation: hd-shutters 1.2s cubic-bezier(.47, 0, .745, .715) var(--hd-wait) backwards; }
  .logo.hd-in, .nvoice.hd-in { animation: none; } /* 한 번 끝나면 base.js가 .hd-in을 붙인다 — 창 폭을 바꿔 버튼이 다시 나타날 때 효과가 되풀이되지 않게. 페이지들이 쓰는 .in과 겹치지 않게 이름을 따로 둔다 */
}
@keyframes hd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hd-wink-clip { from { clip-path: polygon(0% 50%, 100% 50%, 100% 50%, 0% 50%); } to { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } }
@keyframes hd-wink-scale { from { transform: scale(1, 0); } to { transform: scale(1, 1); } }
/* 세로 띠 12개가 왼쪽부터 차례로 넓어지며 열린다 */
@keyframes hd-shutters {
  from { clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%, 8% 0%, 8% 100%, 8% 100%, 8% 0%, 16% 0%, 16% 100%, 16% 100%, 16% 0%, 25% 0%, 25% 100%, 25% 100%, 25% 0%, 33% 0%, 33% 100%, 33% 100%, 33% 0%, 41% 0%, 41% 100%, 41% 100%, 41% 0%, 50% 0%, 50% 100%, 50% 100%, 50% 0%, 58% 0%, 58% 100%, 58% 100%, 58% 0%, 66% 0%, 66% 100%, 66% 100%, 66% 0%, 75% 0%, 75% 100%, 75% 100%, 75% 0%, 83% 0%, 83% 100%, 83% 100%, 83% 0%, 91% 0%, 91% 100%, 91% 100%, 91% 0%); }
  to { clip-path: polygon(0% 0%, 0% 100%, 8% 100%, 8% 0%, 8% 0%, 8% 100%, 18% 100%, 18% 0%, 16% 0%, 16% 100%, 29% 100%, 29% 0%, 25% 0%, 25% 100%, 41% 100%, 41% 0%, 33% 0%, 33% 100%, 55% 100%, 55% 0%, 41% 0%, 41% 100%, 70% 100%, 70% 0%, 50% 0%, 50% 100%, 87% 100%, 87% 0%, 58% 0%, 58% 100%, 105% 100%, 105% 0%, 66% 0%, 66% 100%, 124% 100%, 124% 0%, 75% 0%, 75% 100%, 145% 100%, 145% 0%, 83% 0%, 83% 100%, 168% 100%, 168% 0%, 91% 0%, 91% 100%, 191% 100%, 191% 0%); }
}

/* 좁은 화면 메뉴(헤더 밖, 화면 전체를 덮는다). 원본처럼 효과 없이 바로 열리고 닫힌다 */
.mnav { position: fixed; inset: 0; z-index: 100000; overflow: auto; background: rgba(0, 0, 0, .82); visibility: hidden; container-type: inline-size; scrollbar-width: none; }
.mnav::-webkit-scrollbar { display: none; }
.mnav.open { visibility: visible; }
.mnav:focus { outline: 0; }
.mnav-in { display: grid; grid-template-rows: minmax(max-content, 100%); min-height: 100%; }
.mnav-in > * { grid-area: 1 / 1; }
.mnav-close { align-self: start; justify-self: end; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 30px 30px 0 0; padding: 0; border: 0; border-radius: 300px; background: rgba(255, 255, 255, 0); cursor: pointer; transition: background-color .2s ease, border-radius .2s ease, box-shadow .2s ease; } /* box-shadow: 초점 테두리도 원본처럼 0.2초에 걸쳐 나타난다 */
.mnav-close svg { flex: none; width: 22px; height: 22px; margin-right: 1px; fill: var(--hover); transition: fill .2s ease, transform .2s ease; }
.mnav-close:hover { border-radius: 0; background: #fff; }
.mnav-close:hover svg { fill: #000; transform: rotate(90deg); }
.mnav nav { align-self: end; justify-self: center; width: 69.784685%; margin: 0 .054457% 121.510556% 0; }
.mnav-menu a { display: block; padding: 10px 0; font-size: 8.14607cqw; line-height: 1.3; text-align: center; }
.mnav-menu .mnav-row { display: grid; grid-template-columns: 50px 1fr 50px; }
.mnav-menu .mnav-row a { grid-column: 2; }
.mnav-menu .mnav-tg { display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--hover); cursor: pointer; }
.mnav-menu .mnav-tg .arr { margin-right: 2px; transform: translateY(.4px); }
.mnav-menu .mnav-tg[aria-expanded="true"] .arr { transform: translateY(-.4px) rotate(180deg); }
.mnav-menu ul a { color: var(--soft); font-size: 20px; font-weight: 300; font-style: italic; line-height: 1.6; }
.mnav-menu a[aria-current], .mnav-menu .mnav-cur > .mnav-row > a { color: var(--hover); }
.mnav-menu ul a[aria-current] { background: rgba(255, 255, 255, .26); }
body.lock { position: fixed; width: 100%; } /* 메뉴가 열린 동안 뒤 화면이 스크롤되지 않게 */

/* 푸터 — 원본은 푸터 위에서 손 모양(도트 그림) 커서를 쓴다 */
.ft { display: grid; place-items: center; min-height: 52px; background: #000; font-size: 14px; font-weight: 300; line-height: normal; text-align: center; cursor: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg data-bbox='45.85 19 108.3 162' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 200 200' data-type='color'%3E%3Cg%3E%3Cpath fill='%23000001' d='M75.26 27.54H69.1v66h-6.06v-6H45.85v19.73h6.24v6.27h6.25v15.64h6.24v14.18H71v15h6.25V181h64.33v-21.82h6.24v-21.91h6.33V85.18h-6.24v-6.36l-6.06-.1v-6.36h-14.57v-6.18h-21.8v-6.36H91.27V27.54h-6.24V19h-9.77v8.54' data-color='1'/%3E%3Cpath d='M147.82 85.095v51.73h-6.33v22h-6.25v15.63H83.58v-16.54h-6.24v-14.91h-6.25v-14.18h-6.42v-15.64h-6.24v-6.18h-6.25v-13.27h10.59v6h6.33v7.27h6.34v-79.46h9.5v64.82h6.33v-26.36h13.75v26.36h6.34v-20h15.65v27.37h6.33v-21.19h8.24v6.55h6.24z' fill='%23FFFFFF' data-color='2'/%3E%3C/g%3E%3C/svg%3E%0A") 16 16, auto; }
.ft p { width: 27.559486%; }
.pin .ft { position: relative; z-index: 50; }

/* 공통 */
.btn { display: inline-block; padding: 7px 28px; border: 1px solid #fff; border-radius: 999px; background: none; color: #fff; font: inherit; font-weight: 700; font-size: 17px; cursor: pointer; transition: background .2s, color .2s; }
.btn:hover { background: #fff; color: #000; }
.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.about { display: flex; align-items: center; justify-content: flex-end; gap: 22px; flex-wrap: wrap; padding: 70px clamp(20px, 6vw, 90px); }
.about span { color: var(--grey); font-size: clamp(16px, 1.6vw, 22px); }
.about a { display: inline-flex; align-items: center; gap: 18px; font-size: clamp(28px, 3.2vw, 46px); font-weight: 700; line-height: 1.2; }
.about a:hover { opacity: .75; }
.chev { width: 20px; height: 34px; flex: none; }
.phead { padding: clamp(40px, 5vw, 62px) var(--pad) clamp(30px, 4vw, 60px); }
.phead.wide { padding-left: clamp(20px, 9vw, 130px); padding-right: clamp(20px, 9vw, 130px); }
.phead h1 { font-size: clamp(34px, 3.7vw, 53px); font-weight: 800; line-height: 1.25; margin-bottom: clamp(20px, 3vw, 44px); }
.phead p { font-size: clamp(15px, 1.4vw, 20px); font-weight: 300; line-height: 2.05; }
.phead p.small { font-size: clamp(14px, 1.2vw, 17px); line-height: 1.6; }
.phead .grey { color: var(--grey); font-size: clamp(17px, 1.75vw, 25px); font-weight: 600; line-height: 1.95; }
.phead h2 { margin-top: 60px; color: var(--soft); font-size: clamp(16px, 1.5vw, 22px); font-weight: 400; }
.eyebrow { font-weight: 300; font-size: 15px; }

.vid { margin-bottom: clamp(50px, 6vw, 90px); }

.vid .frame { width: 100%; max-height: 92vh; margin: 0 auto; background: #0a0a0a; }

.vid iframe { width: 100%; height: 100%; }

.vid figcaption { padding: 14px 0 0; font-size: clamp(16px, 1.7vw, 24px); font-weight: 500; }

.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; padding: 10px var(--pad) 80px; }

.card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #111; transition: opacity .2s; }

.card:hover img { opacity: .8; }

.card h3 { margin-top: 16px; font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; line-height: 1.4; }

.card time { display: block; margin-top: 8px; color: var(--grey); font-size: 14px; }


@media (min-width: 861px) and (max-width: 1100px) { .posts { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 1000px) {
  .logo { align-self: start; width: 12.851516cqw; aspect-ratio: 1 / .281758; margin: 3.333056cqw 0 0 1.758073cqw; }
  .hd-r { margin: 1.774717cqw 1.106858cqw 0 0; }
  .hd nav { width: 48.18842cqw; margin: 1.49012cqw 1.35601cqw 0 0; }
  .nvoice { width: 14.0178cqw; min-height: 30.2969px; margin: .33634cqw 0 0; }
  .ft { min-height: 42px; }
  .ft p { width: 62.5%; }
}
@media (max-width: 860px) {
  .about { justify-content: flex-start; padding: 50px var(--pad); }
  .vid figcaption, .proj { padding-left: var(--pad); padding-right: var(--pad); }
}
@media (max-width: 750px) {
  .logo { align-self: center; justify-self: center; width: 28.216079cqw; aspect-ratio: 1 / .281824; margin: .004196cqw .054457cqw 0 0; }
  .hd-r { align-self: center; justify-self: start; margin: .004196cqw 0 0 .657674cqw; }
  .hd nav, .nvoice { display: none; }
  /* 전환은 마우스를 올릴 때 바뀌는 속성과 초점 테두리(box-shadow)에만 건다. 폭·여백(cqw)까지 걸면 헤더 폭이 잠깐 바뀔 때(첫 화면을 덮는 페이지를 열 때) 단추가 늘었다 줄며 움직인다 —
     원본은 크기를 바깥 상자가, 전환을 안쪽 상자(폭 100%)가 맡아 그런 일이 없다 */
  .burger { align-self: center; justify-self: end; display: flex; align-items: center; justify-content: center; width: 7.506702cqw; height: 28px; margin: .314182cqw 5.906501cqw 0 0; padding: 0; border: 0; background: rgba(0, 0, 0, .06); overflow: hidden; cursor: pointer; transition: background-color .2s ease, box-shadow .2s ease; }
  .burger svg { flex: none; width: 60px; height: 60px; fill: rgba(26, 106, 255, .89); transition: fill .2s ease; }
  .burger:hover { background: rgba(255, 255, 255, 0); }
  .burger:hover svg { fill: var(--hover); }
  .ft { min-height: 552px; font-size: 10px; }
  .ft p { width: 68.491972%; }
}

/* ---- contact.css ---- */
/* Contact — 위치·크기는 원본 Wix의 규칙을 그대로 옮긴 것이라 수치가 길다.
   각 구역은 칸이 하나뿐인 그리드이고, 글 상자들은 그 한 칸 안에서 바깥 여백(%)으로 자리를 잡는다.
   cqw = 구역 너비의 1%, 여백의 % = 그 상자가 놓인 칸의 너비 기준. 750px 이하는 모바일 배치. */
.page-contact main { display: contents; } /* 맨 아래 지도(sticky)가 푸터 높이만큼 밀려 내려갈 수 있게 기준 상자를 body로 넓힌다 */
.page-contact .ft { position: relative; } /* 밀려 내려온 지도 위를 푸터가 덮는다 */
.page-contact main > section { container-type: inline-size; }
.page-contact .in, .page-contact dl { display: grid; grid-template-columns: minmax(0, 1fr); }
.page-contact :is(.in > *, dt, dd) { grid-area: 1 / 1; align-self: start; justify-self: start; }
.page-contact :is(.eyebrow, h1, .lede, h2, dt, dd) { line-height: 1.3; word-break: normal; overflow-wrap: break-word; }

/* 제목 + 문의 폼 */
.page-contact .cform .in { grid-template-rows: minmax(42.9897cqw, auto); }
.page-contact .eyebrow { width: 34.2174%; margin: 3.3563% 0 0 15.5722%; font-size: 1.05097cqw; font-weight: 300; }
.page-contact h1 { width: 38.931%; margin: 5.7201% 0 0 15.5722%; font-size: 2.10195cqw; font-weight: 700; }
.page-contact .lede { width: 35.824%; margin: 9.6618% 0 0 15.5716%; font-size: 1.10034cqw; font-weight: 300; }
.page-contact .fbox { position: sticky; top: 0; width: 43.1161%; min-height: 539.265px; margin: 14.1824% 0 0 25.445%; }
/* 폼 바탕은 원본처럼 불투명한 검정(배경과 같은 색이라 보이지는 않지만, 이것이 있어야 1440px에서 글자가 원본과 같은 LCD 방식으로 그려진다) */
.page-contact .fpad { padding: 24px 0; background: #000; }

/* 칸들은 330px보다 좁아지지 않는다(원본 폼은 12칸 격자에 칸 사이가 30px라 그 아래로 줄지 않는다). 폼 상자가 더 좁은 화면(390px 미만 휴대폰, 751~765px 창)에서는
   오른쪽으로 삐져나가고, 화면 밖으로 나간 부분은 잘린다(원본도 가로 스크롤 없이 페이지 상자에서 잘린다). clip은 스크롤 상자를 만들지 않아 폼 상자의 sticky에 영향이 없다 */
.page-contact .cform { overflow-x: clip; }
.page-contact .rows { display: flex; flex-direction: column; gap: 40px; min-width: 330px; }
.page-contact .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; align-items: start; }
.page-contact .f { display: flex; flex-direction: column; min-width: 0; }
.page-contact .f.full { grid-column: 1 / -1; }
.page-contact label { align-self: flex-start; margin-bottom: 8px; font-size: 14px; font-weight: 300; line-height: 1.4; word-break: break-word; }
.page-contact label span { display: inline-block; margin-inline-start: 4px; }
/* 밑줄 상자: 밑줄은 입력 칸이 아니라 이 상자에 있다 */
.page-contact .ctl { position: relative; display: flex; align-items: center; padding-right: 12px; border-bottom: 1px solid #fff; background: #000; font-size: 16px; font-weight: 300; line-height: 24px; }
.page-contact .ctl input, .page-contact textarea { width: 100%; min-width: 0; margin: 0; border: 0; border-radius: 0; outline: 0; background: transparent; color: #fff; font: inherit; }
.page-contact .ctl input { flex: 1; padding: 8px 2px 8px 0; text-indent: 12px; text-overflow: ellipsis; }
.page-contact .ctl ::placeholder { color: #616161; opacity: 1; }
.page-contact .ctl input::selection { background: rgba(255, 255, 255, .2); } /* 한 줄 입력 칸만. Message 글상자는 브라우저 기본 선택 색 */
/* 브라우저가 자동으로 채운 칸도 흰 글자·검은 바탕 그대로: 브라우저가 입히는 연한 파랑 바탕은 5000초에 걸쳐 바뀌게 해서 사실상 보이지 않는다(원본과 같은 방법) */
.page-contact .ctl input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 5000s ease-in-out; }
.page-contact .ctl.ta { align-items: stretch; height: 92px; padding: 8px 0; }
.page-contact textarea { height: 100%; padding: 0 12px; resize: none; overflow: hidden; }
.page-contact textarea:hover, .page-contact textarea:focus { overflow: auto; }
/* 초점 테두리: Tab을 한 번이라도 쓴 뒤부터 보인다(.kf와 form.kbd는 contact.js가 붙인다). 버튼은 그중에서도 키보드로 옮겨 왔을 때 */
.page-contact .ctl.kf { box-shadow: 0 0 0 1px #fff, 0 0 0 3px #116dff; }
.page-contact :is(.cc, .submit):focus-visible { outline: 0; box-shadow: none; }
.page-contact .kbd :is(.cc, .submit):focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #116dff; }
/* 잘못 입력했을 때: 밑줄과 안내 문구가 파란색 */
.page-contact .f.bad .ctl { border-color: #1a6aff; }
.page-contact .err { display: flex; align-items: flex-start; min-height: 20px; margin-top: 8px; color: #1a6aff; font: 14px/1.4 Madefor, "Helvetica Neue", Helvetica, Arial, "メイリオ", meiryo, "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif; word-break: normal; overflow-wrap: break-word; }
.page-contact .err[hidden] { display: none; }
.page-contact .err svg { position: relative; flex-shrink: 0; width: 20px; height: 20px; margin-inline-end: 2px; } /* relative: 아이콘이 글자와 따로 그려져야 좁은 화면에서도 오류가 뜬 뒤 폼 글자가 원본처럼 LCD 방식으로 그려진다 */
/* 다만 칸들이 폼 상자 밖으로 1px 넘게 삐져나가는 너비(위의 min-width 330px 참고)에서는 원본이 오류가 뜬 뒤 글자를 회색조로 그리므로, 그 구간만 되돌린다 */
@media (max-width: 389px), (min-width: 751px) and (max-width: 763px) { .page-contact .err svg { position: static; } }
/* 이메일 오타 제안("혹시 …?"): 칸을 떠나면 밑줄 8px 아래에 뜨고, 주소는 누를 수 있는 밑줄 글자 */
.page-contact .sugg > div { margin-top: 8px; color: #fff; font-size: 14px; font-weight: 300; line-height: normal; word-break: normal; }
.page-contact .sugg button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

/* 전화 칸 앞의 국가 선택 버튼(지구본 또는 국기 + 화살표) */
.page-contact .cc { display: inline-flex; align-items: center; flex-shrink: 0; margin: 0 0 0 12px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.page-contact .cc:hover, .page-contact .cc:focus { opacity: .7; }
.page-contact .cc svg { display: block; }
.page-contact .cc .g { width: 24px; height: 24px; }
.page-contact .cc .v { width: 16px; height: 16px; }
.page-contact .cc[aria-expanded="true"] .v { transform: rotate(180deg); }
.page-contact .cc + input { text-indent: 4px; }
.page-contact .fl { display: block; flex-shrink: 0; width: 22.4px; height: 14px; background: url(/contact/flags.webp) no-repeat; background-size: 313.6px auto; }

.page-contact .submit { display: block; width: 100%; padding: 11px min(5%, 15px); border: 1px solid #fff; border-radius: 100px; background: rgba(255, 255, 255, 0); color: #fff; font: inherit; font-size: 16px; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out; }
.page-contact .submit:hover, .page-contact .submit:active { border-color: transparent; background: rgba(26, 106, 255, .7); color: #000; }
.page-contact .status { margin-top: 24px; font-size: 16px; font-weight: 300; line-height: 1.5; text-align: center; opacity: 0; transition: opacity .35s ease-in-out; }
.page-contact .status:empty { display: none; }
.page-contact .status.on { opacity: 1; }

/* 국가 목록: 넓은 화면에서는 전화 칸 아래(자리가 없으면 위)에 뜨는 상자, 휴대폰에서는 화면 아래에서 올라오는 판. body 끝에 붙는다 */
.page-contact .cc-pop { position: absolute; left: 0; top: 0; z-index: 100001; margin: 1px 0 1px -13px; padding-top: 12px; border: 1px solid rgba(255, 255, 255, .4); background: #000; box-shadow: 0 4px 8px rgba(0, 0, 0, .1), 0 0 4px rgba(0, 0, 0, .1); font-size: 16px; font-weight: 300; line-height: 24px; }
.page-contact .cc-search { padding: 8px 24px; }
.page-contact .cc-search svg { flex-shrink: 0; width: 24px; height: 24px; margin-left: 12px; }
.page-contact .cc-search input { text-indent: 4px; }
.page-contact .cc-list { position: relative; height: 198px; padding-bottom: 8px; overflow: auto; outline: 0; }
.page-contact .cc-list > div { display: flex; align-items: center; padding: 10px 24px; white-space: nowrap; cursor: pointer; }
.page-contact .cc-list > div.on { background: rgba(255, 255, 255, .06); }
.page-contact .cc-list > div[aria-selected="true"] { background: rgba(255, 255, 255, .16); }
.page-contact .cc-list .fl { margin-inline-end: 12px; }
.page-contact .cc-list > span { display: inline-block; padding: 10px 24px; color: #616161; }
.page-contact .cc-sheet { position: fixed; inset: 0; z-index: 100001; font-size: 16px; font-weight: 300; line-height: 24px; }
.page-contact .cc-sheet::before { content: ""; position: absolute; inset: 0; background: #000; opacity: .6; }
.page-contact .cc-sheet > div { position: absolute; left: 0; bottom: -100%; width: 100%; max-height: 320px; padding: 12px 0; background: #000; transition: bottom .3s cubic-bezier(.25, .46, .45, .94); }
.page-contact .cc-sheet.on > div { bottom: 0; }
.page-contact .cc-sheet .cc-body { display: flex; flex-direction: column; height: 296px; max-height: 50vh; overflow: hidden; }
.page-contact .cc-sheet .cc-list { flex: 1; height: auto; min-height: 0; padding-bottom: 0; }

/* 사무소 두 곳 */
.page-contact .blk { display: flex; flex-direction: column; }
.page-contact .office h2 { font-size: 2.10194cqw; font-weight: 400; }
.page-contact .office h2 span { font-weight: 100; }
.page-contact dl { width: 100%; }
.page-contact dt, .page-contact dd { font-size: 1.05097cqw; }
.page-contact dd { color: #c2c2c2; }
.page-contact .kr .in { grid-template-rows: minmax(13.66273cqw, auto); }
.page-contact .kr .blk { align-self: center; width: 64.7579%; margin: 0 0 .1921% 14.6258%; }
.page-contact .kr h2 { width: 28.2389%; }
.page-contact .kr dl { grid-template-rows: minmax(8.74524cqw, auto); }
.page-contact .kr .k1 { width: 4.5353%; margin: 1.9817% 0 0 2.0438%; }
.page-contact .kr .k2 { width: 4.5353%; margin: 5.3937% 0 0 2.0426%; }
.page-contact .kr .k3 { width: 7.6189%; margin: 8.5572% 0 0 2.0401%; }
.page-contact .kr .k4 { width: 9.6476%; margin: 1.9805% 0 0 37.8729%; }
.page-contact .kr .v1 { width: 12.8111%; margin: 1.9792% 0 0 12.1771%; }
.page-contact .kr .v2 { width: 14.9209%; margin: 5.3925% 0 0 12.1759%; }
.page-contact .kr .v3 { width: 14.9208%; margin: 8.5559% 0 0 12.1759%; }
.page-contact .kr .v4 { justify-self: end; width: 21.1692%; margin: 1.9805% 31.3115% 0 0; }
.page-contact .kr .v5 { justify-self: end; width: 45.838%; margin: 5.4736% 6.6415% 0 0; }
.page-contact .ph .in { grid-template-rows: minmax(15.55445cqw, auto); }
.page-contact .ph .blk { width: 64.7579%; margin: 1.39336% 0 0 14.6241%; }
.page-contact .ph h2 { width: 43.7378%; }
.page-contact .ph dl { grid-template-rows: minmax(8.37903cqw, auto); }
.page-contact .ph .k1 { width: 4.5353%; margin: 1.9817% 0 0 2.0438%; }
.page-contact .ph .k3 { width: 7.6189%; margin: 5.7982% 0 0 2.0401%; }
.page-contact .ph .k4 { width: 9.6476%; margin: 1.9805% 0 0 37.8729%; }
.page-contact .ph .v1 { width: 14.9197%; margin: 1.9792% 0 0 12.1771%; }
.page-contact .ph .v3 { width: 14.9208%; margin: 5.7969% 0 0 12.1759%; }
.page-contact .ph .v4 { justify-self: end; width: 45.838%; margin: 1.978% 6.6441% 0 0; }

/* 지도: 화면 맨 위에 닿으면 붙어서, 푸터가 그 위로 올라온다 */
.page-contact .map { position: sticky; top: 0; }
.page-contact .map .in { grid-template-rows: minmax(48.97367cqw, auto); }
.page-contact .gmap { position: relative; align-self: stretch; justify-self: stretch; color: #000; line-height: normal; word-break: normal; -webkit-font-smoothing: auto; } /* 지도 안의 글은 사이트 글 설정을 물려받지 않게(원본은 별도 프레임 안) */
.page-contact .gmap > iframe { position: absolute; inset: 0; width: 100%; height: 100%; filter: grayscale(1) brightness(.55) contrast(2) brightness(.48) sepia(1) hue-rotate(160deg) saturate(2.2); } /* 키 없는 지도에 원본과 비슷한 색을 입힌다 */
/* 구글 지도(키가 있을 때)가 사이트 공통 스타일에 흐트러지지 않게, 말풍선은 원본과 같은 모양으로 */
.page-contact .gmap img { max-width: none; }
.page-contact .gmap .gm-style-iw p { width: 101%; margin: 0; }
.page-contact .gmap .gm-style-iw a { color: #00e; text-decoration: underline; }
.page-contact .gmap .iw { overflow-x: hidden; }

@media (max-width: 750px) {
  .page-contact .cform .in { grid-template-rows: minmax(197.37346cqw, auto); }
  .page-contact .eyebrow { width: 82.815%; margin: 3.0943% 0 0 7.5156%; font-size: 3.9267cqw; }
  .page-contact h1 { width: 82.9258%; margin: 9.2132% 0 0 7.3763%; font-size: 6.5445cqw; }
  .page-contact .lede { width: 82.8027%; margin: 28.0062% 0 0 7.3763%; font-size: 3.92672cqw; }
  .page-contact .fbox { justify-self: end; width: 84.6064%; min-height: 548.953px; margin: 36.4617% 7.878% 0 0; }
  .page-contact .office h2 { font-size: 6.43432cqw; }
  .page-contact dt, .page-contact dd { font-size: 4.02145cqw; }
  .page-contact .kr .in { grid-template-rows: minmax(76.36048cqw, auto); padding: 40px 8vw; }
  .page-contact .kr .blk { width: 102.0531%; margin: 0 0 .1969%; }
  .page-contact .kr h2 { width: 59.9132%; }
  .page-contact .kr dl { grid-template-rows: minmax(max-content, 100%); padding: 6.4309% 0 13.2186%; }
  .page-contact .kr :is(.k1, .k2, .k3, .k4) { justify-self: end; width: 99.9196%; }
  .page-contact .kr .k1 { margin: 2.8347% -6.85375px 0 0; }
  .page-contact .kr .k2 { margin: 12.9744% -6.85375px 0 0; }
  .page-contact .kr .k3 { margin: 23.7699% -6.85375px 0 0; }
  .page-contact .kr .k4 { margin: 37.6474% -6.85375px 0 0; }
  .page-contact .kr .v1 { justify-self: end; width: 74.824%; margin: 2.8411% -6.85375px 0 0; }
  .page-contact .kr .v2 { justify-self: end; width: 74.8174%; margin: 12.9744% -6.85376px 0 0; }
  .page-contact .kr .v3 { justify-self: end; width: 71.7021%; margin: 23.7634% -6.97877px 0 0; }
  .page-contact .kr .v4 { justify-self: center; width: 94.0967%; margin: 47.6683% 2.88581px 0 0; }
  .page-contact .kr .v5 { align-self: end; justify-self: start; width: 92.2729%; margin: 0 0 -60.6768px 7.125px; }
  /* 마닐라: 모바일에서는 상자 구분 없이 구역 한 칸에 바로 놓인다 */
  .page-contact .ph .in { grid-template-rows: minmax(87.57332cqw, auto); }
  .page-contact .ph .blk, .page-contact .ph dl { display: contents; }
  .page-contact .ph h2 { grid-area: 1 / 1; align-self: start; justify-self: end; width: 83.2965%; margin: 10.7544% 6.5551% 0 0; }
  .page-contact .ph :is(.k1, .k3, .k4) { justify-self: end; width: 83.3559%; }
  .page-contact .ph .k1 { margin: 27.6313% 6.2803% 0 0; }
  .page-contact .ph .k3 { margin: 37.6555% 5.6802% 0 0; }
  .page-contact .ph .k4 { margin: 49.2383% 5.6802% 0 0; }
  .page-contact .ph .v1 { justify-self: end; width: 62.4207%; margin: 27.6411% 6.4313% 0 0; }
  .page-contact .ph .v3 { justify-self: end; width: 59.8165%; margin: 37.4003% 6.4313% 0 0; }
  .page-contact .ph .v4 { justify-self: center; width: 78.4986%; margin: 57.5981% 0 0 .79247%; }
  .page-contact .map .in { grid-template-rows: minmax(80.42911cqw, auto); }
}
/* 휴대폰(터치 기기)에서만 폼이 한 줄에 한 칸으로 바뀐다 — 원본은 창 너비가 아니라 기기 종류로 가른다. 같은 조건을 contact.js도 쓴다 */
@media (hover: none) and (pointer: coarse) and (max-width: 750px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  .page-contact .row { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
}

/* ---- content.css ---- */
/* Content & Creative — 원본(Wix)의 배치 규칙을 그대로 옮긴 것이라 수치가 길다.
   구역(.cc-s)마다 칸이 하나뿐인 격자이고, 안의 요소들은 그 한 칸에 겹쳐 놓인 뒤 바깥 여백(%)으로 자리를 잡는다.
   %는 모두 구역 너비(화면 너비, 최대 1600px) 기준. 구역 높이와 글자 크기는 --s에 비례한다.
   --s = min(창 너비, 1600px) − 세로 스크롤바 너비. 100cqw는 .cc의 너비(스크롤바를 뺀 화면 너비)이고,
   --sb(스크롤바 너비)는 content.js가 .cc에 넣는다. 그래서 스크롤바가 있는 넓은 화면에서는 --s가 1600px보다 조금 작다(원본과 같다).
   구간은 원본과 같이 둘: 751px 이상, 320~750px(제목·소개 글·contact만 달라진다). */
/* 글꼴: 원본은 굵기별로 나뉜 Pretendard 정적 파일을 쓴다. 사이트 공용인 가변 글꼴은 글자 폭이 0.1~0.4px 달라 윤곽이 미세하게 어긋나므로,
   이 페이지 본문은 같은 정적 파일(v1.3.9, 글자 묶음별 조각)을 쓴다. 한글 조각은 지금 문구에 쓰인 글자만 적어 두었다.
   문구를 고쳐 여기 없는 글자가 생기면 그 글자만 공용 글꼴로 그려진다(눈에 띄는 차이는 없다). */
@font-face { font-family: cc-pretendard; font-weight: 300; font-display: swap; src: url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Light.subset.91.woff2) format('woff2'); unicode-range: U+20-22, U+27-2A, U+2C-3B, U+3F, U+41-5D, U+61-7B, U+7D, U+A0-A1, U+AB, U+AD-AE, U+B7, U+BB, U+BF, U+2013-2014, U+201C-201D, U+2122, U+AC00, U+AE30, U+B2E4, U+B85C, U+B9AC, U+C2A4, U+C774, U+C778, U+C9C0, U+D558; } /* 영문·숫자·기호, 가기다로리스이인지하 */
@font-face { font-family: cc-pretendard; font-weight: 300; font-display: swap; src: url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Light.subset.90.woff2) format('woff2'); unicode-range: U+AC1C, U+ACBD, U+ACFC, U+B294, U+B2C8, U+B3C4, U+B4DC, U+B85D, U+B97C, U+BCF4, U+C11C, U+C218, U+C2E0, U+C544, U+C5B4, U+C6B0, U+C744, U+C758, U+C785, U+C804, U+C815, U+CCB4, U+D55C, U+D569; } /* 개경과는니도드록를보서수신아어우을의입전정체한합 */
@font-face { font-family: cc-pretendard; font-weight: 300; font-display: swap; src: url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Light.subset.89.woff2) format('woff2'); unicode-range: U+ACC4, U+B2E8, U+B41C, U+B514, U+B9E4, U+BB3C, U+BE0C, U+C5ED, U+C608, U+C640, U+C801, U+D1A0, U+D560, U+D589; } /* 계단된디매물브역예와적토할행 */
@font-face { font-family: cc-pretendard; font-weight: 300; font-display: swap; src: url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Light.subset.88.woff2) format('woff2'); unicode-range: U+AC01, U+ACB0, U+B2EC, U+BA70, U+C21C, U+CC3D, U+CE20; } /* 각결달며순창츠 */
@font-face { font-family: cc-pretendard; font-weight: 300; font-display: swap; src: url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Light.subset.87.woff2) format('woff2'); unicode-range: U+B79C, U+B9C1, U+C220, U+CF58, U+D150, U+D5C8; } /* 랜링술콘텐허 */
@font-face { font-family: cc-pretendard; font-weight: 300; font-display: swap; src: url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Light.subset.86.woff2) format('woff2'); unicode-range: U+B2CC; } /* 닌 */
@font-face { font-family: cc-pretendard; font-weight: 300; font-display: swap; src: url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Light.subset.85.woff2) format('woff2'); unicode-range: U+D138, U+D154, U+D601; } /* 털텔혁 */
@font-face { font-family: cc-pretendard; font-weight: 300; font-display: swap; src: url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Light.subset.71.woff2) format('woff2'); unicode-range: U+2019; } /* ’ */
@font-face { font-family: cc-pretendard; font-weight: 400; font-display: swap; src: url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Regular.subset.91.woff2) format('woff2'); unicode-range: U+20-22, U+27-2A, U+2C-3B, U+3F, U+41-5D, U+61-7B, U+7D, U+A0-A1, U+AB, U+AD-AE, U+B7, U+BB, U+BF, U+2013-2014, U+201C-201D, U+2122; } /* 영문·숫자·기호 */
@font-face { font-family: cc-pretendard; font-weight: 600; font-display: swap; src: url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-SemiBold.subset.91.woff2) format('woff2'); unicode-range: U+20-22, U+27-2A, U+2C-3B, U+3F, U+41-5D, U+61-7B, U+7D, U+A0-A1, U+AB, U+AD-AE, U+B7, U+BB, U+BF, U+2013-2014, U+201C-201D, U+2122; } /* 영문·숫자·기호 */
@font-face { font-family: cc-pretendard; font-weight: 700; font-display: swap; src: url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Bold.subset.91.woff2) format('woff2'); unicode-range: U+20-22, U+27-2A, U+2C-3B, U+3F, U+41-5D, U+61-7B, U+7D, U+A0-A1, U+AB, U+AD-AE, U+B7, U+BB, U+BF, U+2013-2014, U+201C-201D, U+2122; } /* 영문·숫자·기호 */
@font-face { font-family: cc-pretendard; font-weight: 700; font-display: swap; src: url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Bold.subset.88.woff2) format('woff2'); unicode-range: U+26; } /* & */

.page-content .cc { container-type: inline-size; overflow: clip; font-family: cc-pretendard, 'Pretendard Variable', Pretendard, -apple-system, 'Malgun Gothic', sans-serif; word-break: normal; overflow-wrap: break-word; }
.page-content .cc-s { --s: min(100cqw, 1600px - var(--sb, 0px)); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(calc(var(--k) * var(--s)), auto); max-width: 1600px; margin: 0 auto; }
/* 구역마다 깔린 불투명한 검은 바탕. 원본처럼 구역과 따로 떨어진 층으로 두고, 1600px보다 넓은 화면에서는 화면 끝까지 넓힌다.
   눈에 보이는 색은 같지만, 이 바탕이 있어야 크롬이 소개 글 등을 원본과 같은 방식(LCD 서브픽셀)으로 그린다.
   구역 자체에 배경색을 주면 스크롤 위치에 따라 원본과 다르게 그려지는 경우가 있어 이렇게 둔다. */
.page-content .cc-s::before { content: ''; position: absolute; inset: 0 calc(50% - 50cqw); background: #000; }
.page-content .cc-s > * { position: relative; grid-area: 1 / 1; align-self: start; justify-self: start; }

/* 제목과 소개 글 */
.page-content .cc-head { --k: .2313479; }
.page-content .cc-head h1 { width: 40.287354%; margin: 3.142822% 0 0 3.4375%; font-size: calc(var(--s) * .0375); font-weight: 700; line-height: 1.3; }
.page-content .cc-lead { width: 52.000244%; margin: 11.549683% 0 0 3.4375%; font-size: calc(var(--s) * .014375); font-weight: 300; line-height: 1.6; }

/* 영상 다섯 개. 플레이어 상자의 비율은 영상 비율과 무관하게 원본에서 정해 둔 값이고, 남는 곳은 검게 보인다.
   2·4번째는 구역보다 넓어 양옆으로 넘친다(화면 밖은 .cc에서 잘린다). 첫 번째는 설명 글이 플레이어 왼쪽 아래에 겹쳐 놓인다. */
.page-content .cc-player { background: #000; }
.page-content .cc-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; }
.page-content .cc-s h2 { font-size: calc(var(--s) * .015625); font-weight: 400; line-height: 1.3; text-align: left; }
.page-content .cc-v1 { --k: .5567381; }
.page-content .cc-v1 .cc-player { align-self: center; width: 100%; aspect-ratio: 1 / .55294678; }
.page-content .cc-v1 h2 { width: 35.224609%; margin: 50.674072% 0 0; }
.page-content .cc-v2 { --k: .64624; }
.page-content .cc-v2 .cc-player { width: 115.101056%; aspect-ratio: 1 / .4888469; margin-left: -7.550049%; }
.page-content .cc-v2 h2 { width: 28.139893%; margin: 59.075195% 0 0; }
.page-content .cc-v3 { --k: .6651906; }
.page-content .cc-v3 .cc-player { align-self: center; justify-self: center; width: 100%; aspect-ratio: 1 / .56425781; margin-bottom: 4.968273%; }
.page-content .cc-v3 h2 { width: 41.849854%; margin: 62.143066% 0 0; }
.page-content .cc-v4 { --k: .63625; }
.page-content .cc-v4 .cc-player { width: 107.685267%; aspect-ratio: 1 / .51809082; margin: .437012% 0 0 -3.832397%; }
.page-content .cc-v4 h2 { width: 27.450439%; margin: 59.734375% 0 0; }
.page-content .cc-v5 { --k: .6744187; }
.page-content .cc-v5 .cc-player { align-self: center; justify-self: center; width: 100%; aspect-ratio: 1 / .56510742; margin-bottom: 6.0575%; }
.page-content .cc-v5 h2 { width: 28.962891%; margin: 62.207031% 0 0; }

/* 맨 아래 contact. 화살표에 마우스를 올리면 0.3초 동안 오른쪽으로 10px 움직인다(.hov는 content.js가 PC에서만 붙인다 — 원본도 휴대폰·태블릿에서는 움직이지 않는다).
   contact 글자의 1초 전환도 원본 설정 그대로다(창 너비가 바뀌면 글자 크기가 천천히 따라온다). */
.page-content .cc-end { --k: .1203663; }
.page-content .cc-arrow { justify-self: end; width: 3.599893%; aspect-ratio: 1 / .69117647; margin: 3.692627% 3.164063% 0 0; transform: rotate(90.0001deg); transition: all .3s ease-in-out; }
.page-content .hov .cc-arrow:hover { transform: translateX(10px) rotate(90.0001deg); }
.page-content .cc-arrow svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; fill: #fff; } /* 화살표 끝이 그림 테두리에 닿아 있어, 원본처럼 넘치는 가장자리를 자르지 않는다 */
.page-content .cc-contact { justify-self: end; width: 17.378906%; margin: 2.907715% 5.59375% 0 0; font-size: calc(var(--s) * .0373856); font-weight: 600; line-height: 1.1; text-align: center; }
.page-content .set .cc-contact, .page-content .set .cc-contact * { transition: all 1s ease-in-out; } /* .set은 content.js가 붙인다 */

@media (min-width: 320px) and (max-width: 750px) {
  .page-content .cc-head { --k: .796617; }
  .page-content .cc-head h1 { width: 64.175659%; margin: 2.015397% 0 0 3.434477%; font-size: calc(var(--s) * .0664894); }
  .page-content .cc-lead { width: 90.854379%; margin: 16.640231% 0 0 3.426929%; font-size: calc(var(--s) * .037234); }
  .page-content .cc-arrow { margin: 4.242424% 3.164983% 0 0; }
  .page-content .cc-contact { width: 26.799242%; margin: 2.651515% 6.130051% 0 0; font-size: calc(var(--s) * .0670244); }
}

/* ---- convention.css ---- */
/* Convention & Exhibition — 원본(Wix)의 배치 규칙을 그대로 옮긴 것이라 수치가 길다.
   구역마다 칸이 하나뿐인 grid이고, 안의 요소는 모두 그 한 칸에 겹쳐 놓인 채 margin(구역 너비의 %)으로 자리를 잡는다.
   글자 크기와 구역 높이는 --u에 비례한다. 원본처럼 스크롤바(Windows에서 마우스를 쓸 때 보이는 15~17px)를 뺀 폭이다:
   첫 구역은 본문 폭(100cqw, main이 기준 상자), 둘째·셋째 구역은 min(창 폭, 1600px) − 스크롤바 폭(= min(본문 폭, 1600px − 스크롤바 폭)).
   둘째·셋째 구역의 상자는 1600px에서 더 넓어지지 않고 가운데에 놓인다. 스크롤바 폭(--sbw)은 페이지 맨 앞 스크립트가 잰다(convention.mjs).
   100vw로는 안 된다 — html이 overflow-y: scroll이면 스크롤바를 빼는 브라우저(최신 Edge·Chrome)와 빼지 않는 브라우저가 갈린다.
   구간은 원본과 같이 셋: 1001px 이상, 751~1000px(제목 크기만 다름), 320~750px.
   글꼴은 원본과 같은 정적 Pretendard(페이지 본문 첫머리에서 불러온다)를 쓴다. 요소마다 붙인 position: relative도 원본 그대로(겹친 요소가 그려지는 순서).
   main을 검은 바탕의 독립된 층(position + z-index: 0 + background, 셋 다 필요)으로 묶는 것은 글자 가장자리 때문이다. 헤더 안의 sticky 단추 탓에
   본문 글자가 투명한 층에 따로 그려지면 Windows에서 색 번짐(ClearType) 없는 회색조가 되는데, 원본은 컬러 윤곽이다.
   약 50px이 넘는 큰 글자(1440px의 BIXPO 제목·content & creative, 1920px의 제목)가 회색조인 것은 브라우저 자체 동작이라 원본과 같게 나온다. */
.page-convention main { position: relative; z-index: 0; background: #000; container-type: inline-size; --u: 100cqw; font-family: Pretendard, 'Pretendard Variable', -apple-system, 'Malgun Gothic', sans-serif; word-break: normal; overflow-wrap: break-word; }
.page-convention main section { display: grid; grid-template-columns: minmax(0, 1fr); }
.page-convention main section > * { position: relative; grid-area: 1 / 1; align-self: start; justify-self: start; }
.page-convention .cv-proj, .page-convention .cv-about { --u: min(100cqw, 1600px - var(--sbw, 0px)); max-width: 1600px; margin: 0 auto; }

/* 제목과 소개 글 */
.page-convention .cv-head { grid-template-rows: minmax(calc(var(--u) * .1945123), auto); }
.page-convention .cv-head h1 { z-index: 1; width: 40.287354%; margin: 1.618333% 0 0 7.956188%; font-size: calc(var(--u) * .0315294); font-weight: 500; line-height: 1.3; }
.page-convention .cv-head h1 b { font-weight: 700; }
.page-convention .cv-lead { width: 66.135707%; margin: 7.818248% 0 0 7.956188%; font-size: calc(var(--u) * .0120862); font-weight: 300; line-height: 1.6; }

/* BIXPO 2022 — 제목·영상·부제 순으로 겹쳐 놓인다 */
.page-convention .cv-proj { grid-template-rows: minmax(calc(var(--u) * .6801025), auto); }
.page-convention .cv-proj h2 { width: 25.5625%; margin: 3.209961% 0 0 .188477%; font-size: calc(var(--u) * .0375); font-weight: 800; line-height: 1.3; letter-spacing: .04em; }
.page-convention .cv-player { width: 99.944517%; aspect-ratio: 1 / .5056638; margin-top: 15.185547%; background: #000; }
.page-convention .cv-proj iframe { width: 100%; height: 100%; }
.page-convention .cv-proj p { width: 27.412354%; margin: 8.87207% 0 0 .1875%; font-size: calc(var(--u) * .014375); font-weight: 300; line-height: 1.6; }

/* about → content & creative. 화살표에 마우스를 올리면 오른쪽으로 10px 움직인다 */
.page-convention .cv-about { grid-template-rows: minmax(calc(var(--u) * .1387281), auto); }
.page-convention .cv-about > * { justify-self: end; }
.page-convention .cv-arrow { width: 3.096641%; aspect-ratio: 1 / .94; margin: 3.983398% 3.59375% 0 0; transform: rotate(90deg); }
.page-convention .cv-arrow:hover { transform: translateX(10px) rotate(90deg); }
.page-convention .cv-arrow svg { display: block; width: 100%; height: 100%; fill: #fff; }
.page-convention .cv-to { width: 33.072266%; margin: 3.417969% 7.695068% 0 0; font-size: calc(var(--u) * .0373856); font-weight: 700; line-height: 1.1; text-align: center; }
.page-convention .cv-lbl { width: 4.808865%; margin: 3.503418% 40.766357% 0 0; color: #929292; font-size: calc(var(--u) * .0152214); line-height: 1.3; text-align: center; }
/* 원본은 이 두 요소의 모든 속성에 전환 효과를 걸어 두었다(창 크기를 바꾸면 글자 크기도 천천히 따라온다) */
.page-convention .cv-arrow, .page-convention .cv-arrow * { transition: all .3s ease-in-out, visibility 0s; }
.page-convention .cv-to, .page-convention .cv-to * { transition: all 1s ease-in-out, visibility 0s; }

@media (min-width: 320px) and (max-width: 1000px) {
  .page-convention .cv-head h1 { font-size: calc(var(--u) * .0375); }
}
@media (min-width: 320px) and (max-width: 750px) {
  .page-convention .cv-head { grid-template-rows: minmax(calc(var(--u) * .796617), auto); }
  .page-convention .cv-head h1 { width: 64.175659%; margin: 2.015397% 0 0 3.434477%; font-size: calc(var(--u) * .0664894); }
  .page-convention .cv-lead { width: 90.854379%; margin: 30.060308% 0 0 3.432018%; font-size: calc(var(--u) * .0372337); }
  .page-convention .cv-proj { grid-template-rows: minmax(calc(var(--u) * .9415838), auto); }
  .page-convention .cv-proj h2 { width: 28.580135%; margin: 5.049814% 0 0 5.330611%; font-size: calc(var(--u) * .0664894); }
  .page-convention .cv-player { width: 99.999898%; aspect-ratio: 1 / .4835025; margin-top: 36.008773%; }
  .page-convention .cv-proj p { width: 44.522148%; margin: 24.882128% 0 0 5.328947%; font-size: calc(var(--u) * .037234); }
  .page-convention .cv-about { grid-template-rows: minmax(calc(var(--u) * .3440144), auto); }
  .page-convention .cv-arrow { width: 6.714974%; aspect-ratio: 1 / .9166667; margin: 4.648999% 3.2119% 0 0; }
  .page-convention .cv-to { margin: 3.498635% 11.145921% 0 0; font-size: calc(var(--u) * .0670244); }
  .page-convention .cv-lbl { width: 16.839506%; margin: 3.502414% 40.764701% 0 0; font-size: calc(var(--u) * .0402144); }
}

/* ---- culture.css ---- */
/* Culture & Communication — 원본(Wix)의 배치 규칙을 그대로 옮긴 것이라 수치가 길다.
   구역(.cu-sec)마다 칸이 하나뿐인 grid(.cu-in)가 있고, 안의 요소는 모두 그 한 칸에 겹쳐 놓인 채 margin(칸 너비의 %)으로 자리를 잡는다.
   글자 크기와 구역 높이는 화면 너비(--sf)에 비례하고, 1600px에서 더 커지지 않으며 그보다 넓으면 가운데에 놓인다.
   구간은 원본과 같이 둘: 751px 이상, 750px 이하. 가로로 삐져나오는 부분(오른쪽으로 튀는 하단 링크 등)은 원본처럼 잘라 낸다.
   갤러리와 확대 보기의 세부 설정은 화면 폭이 아니라 기기 종류를 따른다: 휴대폰이면 .m이 붙는다(culture.mjs, culture.js). */
.page-culture main { overflow-x: clip; word-break: normal; overflow-wrap: break-word; }
.page-culture .cu-sec { --sf: min(100vw, 1600px); display: flex; flex-direction: column; }
.page-culture .cu-in { flex-grow: 1; display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1600px; margin-left: clamp(0px, (100% - 1600px) / 2, 100vw); }
.page-culture .cu-in > * { grid-area: 1 / 1; align-self: start; justify-self: start; position: relative; }

/* 제목, 소개 글, 갤러리 */
.page-culture .cu-hero .cu-in { grid-template-rows: minmax(calc(.6958688 * var(--sf)), auto); }
.page-culture .cu-title { width: 52.262939453125%; margin: 4.37353515625% 0 0 2.375%; font-size: calc(.0375 * var(--sf)); font-weight: 800; line-height: 1.3; }
.page-culture .cu-intro { width: 60.87524414062499%; margin: 16.49658203125% 0 0 2.374267578125%; font-size: calc(.014375 * var(--sf)); font-weight: 300; line-height: 2; }
.page-culture .cu-gal { --iw: 377px; --ih: 502px; --gap: 32px; --step: calc(var(--iw) + var(--gap)); width: 99.67653658514978%; height: 502.07828840229445px; margin-top: 33.03515625%; overflow: hidden; }

/* 갤러리: 3:4 카드가 가로로 이어지고 왼쪽으로 끊임없이 흐른다(움직임은 culture.js).
   .cu-gal-sc는 실제로 가로 스크롤되는 상자이고, 흐르는 동안에는 그 안의 .cu-gal-in이 transform으로 움직인다.
   .cu-g::before는 카드와 같은 자리에 놓인 스크롤 맞춤 기준(카드가 가운데 오는 위치에 멈춘다). */
.page-culture .cu-gal-v { position: relative; height: var(--ih); }
.page-culture .cu-gal-sc { height: 100%; overflow: scroll hidden; scrollbar-width: none; scroll-snap-type: x mandatory; }
.page-culture .cu-gal-sc::-webkit-scrollbar { display: none; }
.page-culture .cu-gal-in { position: relative; will-change: transform; }
.page-culture .cu-g::before { content: ""; position: absolute; top: 0; left: calc(var(--k) * var(--step)); width: var(--iw); height: 1px; scroll-snap-align: center; pointer-events: none; }
.page-culture .cu-it { position: absolute; top: 0; left: calc(var(--k) * var(--step)); width: var(--iw); height: var(--ih); border-radius: 20px; overflow: hidden; cursor: pointer; }
.page-culture .cu-it img { width: 100%; height: 100%; object-fit: cover; }
/* 키보드 초점을 받는 1px 점. 원본은 카드 왼쪽 위에 두지만, 왼쪽으로 흘러가는 카드가 화면 밖으로 먼저 나가는 쪽이 왼쪽이라
   초점을 줄 때 갤러리가 저절로 옆으로 스크롤되지 않도록 오른쪽 위에 둔다(눈에 보이지 않는 점이라 겉모습은 같다) */
.page-culture .cu-act { position: absolute; top: 0; right: 0; width: 1px; height: 1px; outline: 0; }
/* 초점을 받은 카드: 마우스를 올린 모양(.hov, culture.js)에 안쪽 파란 테두리 */
.page-culture .cu-it:has(> .cu-act:focus-visible)::after { content: ""; position: absolute; inset: 0; border-radius: 20px; box-shadow: #116dff 0 0 1px 2px inset, #fff 0 0 7px 0 inset, #116dff 0 0 10px -5px inset; pointer-events: none; }
/* 아직 차례가 안 된 카드는 오른쪽으로 100px 밀려 있다가, 스크롤 위치가 기준을 넘으면 제자리로 미끄러져 들어온다 */
.page-culture .cu-gal.on .cu-g:not(.in) .cu-it { transform: translateX(100px); }
.page-culture .cu-gal.live .cu-it { transition: transform .8s cubic-bezier(.13, .78, .53, .92); }
/* 카드 위의 제목과 옅은 어둠. 마우스를 올리면(.hov) 어둠은 왼쪽으로 밀려 나가고 제목은 흐려져 사라진다.
   제목은 두 겹이 같은 시간(0.4초) 동안 함께 흐려져, 보이는 투명도는 둘을 곱한 값이다(원본과 같다) */
.page-culture .cu-ov { position: absolute; inset: 0; padding: 30px; overflow: hidden; font-size: 31px; line-height: 43.4px; text-align: left; }
.page-culture .cu-ov::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .06); transition: transform .4s cubic-bezier(.3, .13, .12, 1), opacity .5s; }
.page-culture .cu-ti { position: relative; }
.page-culture .cu-ti span { display: block; }
.page-culture .cu-ti, .page-culture .cu-ti span { transition: opacity .4s; }
.page-culture .cu-it.hov .cu-ov::before { opacity: 0; transform: translateX(-100%); }
.page-culture .cu-it.hov .cu-ti, .page-culture .cu-it.hov .cu-ti span { opacity: 0; }
.page-culture .cu-gal-arr { position: absolute; top: calc(50% - 25px); display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; background: #fff; opacity: .9; cursor: pointer; }
.page-culture .cu-gal-arr[hidden] { display: none; }
@media (hover: hover) { .page-culture .cu-gal-arr:hover { opacity: 1; } } /* 원본은 터치 기기에서 마우스 올림 효과를 쓰지 않는다 */
.page-culture .cu-gal-arr svg { flex: none; transform: scale(.534188); }
.page-culture .cu-gal-arr.cu-prev { left: 23px; }
.page-culture .cu-gal-arr.cu-prev svg { transform: scaleX(-1) scale(.534188); }
.page-culture .cu-gal-arr.cu-next { right: 23px; }
/* 휴대폰용 설정(.m): 카드 간격 30px, 제목은 굵은 Wix Madefor Text 22px, 어둠이 더 짙고, 화살표는 40px */
.page-culture .cu-gal.m { --gap: 30px; }
.page-culture .cu-gal.m .cu-ov { font: 700 22px/27px cu-madefor, 'Pretendard Variable', Pretendard, sans-serif; }
.page-culture .cu-gal.m .cu-ov::before { background: rgba(0, 0, 0, .3); }
.page-culture .cu-gal.m .cu-gal-arr { top: calc(50% - 20px); width: 40px; height: 40px; }
.page-culture .cu-gal.m .cu-gal-arr svg { transform: scale(.42735); }
.page-culture .cu-gal.m .cu-gal-arr.cu-prev svg { transform: scaleX(-1) scale(.42735); }

/* 영상 셋 — 재생기 상자가 영상(16:9)보다 세로로 길어 아래위에 검은 띠가 생기고, 제목은 그 아래 띠 위에 겹쳐 놓인다 */
.page-culture .cu-v1 .cu-in { grid-template-rows: minmax(calc(.7309 * var(--sf)), auto); }
.page-culture .cu-v2 .cu-in { grid-template-rows: minmax(calc(.6441356 * var(--sf)), auto); }
.page-culture .cu-v3 .cu-in { grid-template-rows: minmax(calc(.648535 * var(--sf)), auto); }
.page-culture .cu-player { background: #000; }
.page-culture .cu-player iframe { width: 100%; height: 100%; }
.page-culture .cu-v1 .cu-player { width: 99.9081364314665%; aspect-ratio: 1 / .6665170959194492; }
.page-culture .cu-v2 .cu-player { width: 100.01484730841565%; aspect-ratio: 1 / .5827857247473515; margin-top: .00244140625%; }
.page-culture .cu-v3 .cu-player { width: 99.630126953125%; aspect-ratio: 1 / .5696484800960584; margin-top: .408935546875%; }
.page-culture .cu-cap { font-size: calc(.01875 * var(--sf)); font-weight: 600; line-height: 1.3; }
.page-culture .cu-v1 .cu-cap { width: 34.161460876464844%; margin-top: 64.49479293823242%; }
.page-culture .cu-v2 .cu-cap { width: 34.162353515625%; margin-top: 59.872314453125%; }
.page-culture .cu-v3 .cu-cap { width: 31.162353515625%; margin-top: 59.62646484375%; }

/* about → Convention & Exhibition. 묶음 전체가 5.2초마다 오른쪽으로 두 번 툭툭 움직이고(구역이 화면 가까이 온 뒤부터, 멀어지면 멈춘다 — culture.js의 .go),
   마우스를 올리거나 Tab으로 초점이 들어오면(.kf, culture.js) 글자가 오른쪽으로 30px, 화살표 위에서는 화살표가 10px 움직인다. 묶음 위의 커서는 푸터와 같은 손 모양 */
.page-culture .cu-about .cu-in { grid-template-rows: minmax(calc(.3291162 * var(--sf)), auto); }
.page-culture .cu-to { display: flex; width: max-content; min-height: 145.38671875px; align-self: end; justify-self: end; margin-right: .369873046875%; cursor: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg data-bbox='45.85 19 108.3 162' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 200 200' data-type='color'%3E%3Cg%3E%3Cpath fill='%23000001' d='M75.26 27.54H69.1v66h-6.06v-6H45.85v19.73h6.24v6.27h6.25v15.64h6.24v14.18H71v15h6.25V181h64.33v-21.82h6.24v-21.91h6.33V85.18h-6.24v-6.36l-6.06-.1v-6.36h-14.57v-6.18h-21.8v-6.36H91.27V27.54h-6.24V19h-9.77v8.54' data-color='1'/%3E%3Cpath d='M147.82 85.095v51.73h-6.33v22h-6.25v15.63H83.58v-16.54h-6.24v-14.91h-6.25v-14.18h-6.42v-15.64h-6.24v-6.18h-6.25v-13.27h10.59v6h6.33v7.27h6.34v-79.46h9.5v64.82h6.33v-26.36h13.75v26.36h6.34v-20h15.65v27.37h6.33v-21.19h8.24v6.55h6.24z' fill='%23FFFFFF' data-color='2'/%3E%3C/g%3E%3C/svg%3E%0A") 16 16, auto; }
.page-culture .cu-to > * { flex: none; align-self: flex-start; }
.page-culture .cu-to-l { width: calc(.0549925 * var(--sf)); margin: calc(.0009888 * var(--sf)) calc(.0004881 * var(--sf)) 0 0; color: #929292; font-size: calc(.0148224 * var(--sf)); line-height: 1.3; text-align: center; }
.page-culture .cu-to-t { position: sticky; top: 0; width: calc(.3831855 * var(--sf)); margin-right: calc(.0055931 * var(--sf)); font-size: calc(.0327262 * var(--sf)); font-weight: 700; line-height: 1.1; text-align: center; transition: transform 1s ease-in-out; }
.page-culture .cu-to:focus-visible { z-index: 1; outline: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #116dff; } /* 묶음 전체도 Tab으로 들른다(원본과 같다) */
.page-culture .cu-to a { cursor: pointer; }
.page-culture .cu-to-a { position: relative; width: calc(.0370304 * var(--sf)); aspect-ratio: 1 / 1.034883720930234; margin-top: calc(.0015514 * var(--sf)); transform: rotate(90deg); transition: transform .3s ease-in-out; }
/* 마우스 올림·키보드 초점 효과는 마우스가 있는 기기에서만(원본은 터치 기기에서 쓰지 않는다) */
@media (hover: hover) {
  .page-culture .cu-to:hover .cu-to-t, .page-culture .cu-to.kf .cu-to-t { transform: translateX(30px); }
  .page-culture .cu-to-a:hover { transform: translateX(10px) rotate(90deg); }
}
.page-culture .cu-to-a svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fff; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .page-culture .cu-to { animation: cu-poke 5.2s linear infinite paused; }
  .page-culture .cu-to.go { animation-play-state: running; }
}
@keyframes cu-poke {
  3.91% { translate: 11.2px; } 7.36% { translate: 40px; } 11.04% { translate: 12.8px; } 12.88% { translate: 17.6px; }
  15.18% { translate: 40px; } 19.09% { translate: 6.4px; } 23% { translate: 0px; }
}

/* 갤러리 카드를 누르면 뜨는 확대 보기(흰 화면). 넓은 화면: 왼쪽 70%에 그림, 오른쪽에 제목. 제목이 없는 그림은 화면 전체를 쓴다.
   --pw는 그림 영역의 폭으로 culture.js가 넣는다 */
.page-culture .cu-fs { position: fixed; inset: 0; z-index: 100005; display: flex; flex-direction: column; overflow: hidden; background: #fff; color: #000; touch-action: none; }
.page-culture .cu-fs:focus, .page-culture .cu-fs-stage:focus { outline: 0; }
.page-culture .cu-fs button { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
/* 초점 테두리는 키보드로 열었거나 열린 뒤 Tab을 누른 다음(.kb, culture.js)에만 보인다 — 마우스로 열면 초점이 '전체 화면' 단추에 가도 아무것도 그리지 않는다.
   위의 두 단추는 원본처럼 아이콘 둘레 46px 상자에 테두리가 그려지면서 아이콘이 오른쪽으로 4px 밀리고, 닫기 단추는 제 상자에도 테두리가 하나 더 생긴다.
   화살표는 .kb일 때, 그리고 마우스로 누른 화살표(.in)에서 키보드를 쓸 때 테두리가 보인다 */
.page-culture .cu-fs button:focus-visible { box-shadow: none; }
.page-culture .cu-fs .cu-fs-close:focus-visible, .page-culture .cu-fs.kb .cu-fs-arr:focus-visible, .page-culture .cu-fs .cu-fs-arr.in:focus-visible { border-radius: 7px; box-shadow: inset 0 0 0 1px #fff, inset 0 0 1px 4px #116dff; }
.page-culture .cu-fs.kb:not(.m) .cu-fs-bar button:focus::before { content: ""; position: absolute; top: 1px; left: 0; width: 46px; height: 46px; border-radius: 7px; box-shadow: inset 0 0 0 1px #fff, inset 0 0 1px 4px #116dff; }
.page-culture .cu-fs.kb:not(.m) .cu-fs-bar button:focus svg { left: 4px; }
.page-culture .cu-fs [hidden] { display: none; }
.page-culture .cu-fs-bar { position: relative; z-index: 999; display: flex; align-items: center; justify-content: space-between; margin-top: 30px; }
.page-culture .cu-fs-bar button { position: relative; width: 38px; height: 44px; }
.page-culture .cu-fs-bar svg { position: relative; top: 1px; display: block; margin: 0 auto; }
.page-culture .cu-fs-full { margin: -8px 45px 0 35px; }
.page-culture .cu-fs-close { margin-right: 30px; }
.page-culture .cu-fs-close .cu-back { display: none; }
.page-culture .cu-fs-stage { position: absolute; top: 74px; left: 0; width: var(--pw); height: calc(100% - 148px); }
.page-culture .cu-fs-item { position: absolute; top: 0; left: 90px; width: calc(var(--pw) - 180px); height: 100%; opacity: 0; pointer-events: none; transition: opacity .6s; } /* 다섯 장이 한자리에 겹쳐 있다 — 보이는 그림만 마우스에 닿는다 */
.page-culture .cu-fs-item.on { opacity: 1; pointer-events: auto; }
.page-culture .cu-fs-item img { position: absolute; inset: 0; max-width: 100%; max-height: 100%; margin: auto; }
.page-culture .cu-fs-item figcaption { display: none; }
.page-culture .cu-fs h1 { font-size: 31px; font-weight: 400; line-height: 43.4px; text-align: left; overflow-wrap: break-word; }
.page-culture .cu-fs .cu-fs-arr { position: absolute; top: calc(50% - 25px); display: flex; justify-content: center; width: 50px; height: 50px; padding-top: 10px; opacity: .9; }
.page-culture .cu-fs .cu-fs-arr[hidden] { display: none; }
.page-culture .cu-fs .cu-fs-arr:hover { opacity: 1; }
.page-culture .cu-fs-arr svg { filter: drop-shadow(0 1px .15px #b2b2b2); }
.page-culture .cu-fs-arr.cu-prev { left: 20px; }
.page-culture .cu-fs-arr.cu-next { left: calc(var(--pw) - 70px); }
.page-culture .cu-fs-side { position: fixed; z-index: 99; top: 0; right: 0; left: 70%; max-height: calc(100% - 1px); padding: 130px 120px 0 4px; overflow: hidden auto; }
.page-culture .cu-fs-side h1 { margin-bottom: 18px; }

@media (max-width: 750px) {
  .page-culture .cu-hero .cu-in { grid-template-rows: minmax(calc(1.5774441 * var(--sf)), auto); }
  .page-culture .cu-title { margin: 9.416506372053188% 0 0 4.812042083563469%; font-size: calc(.0664894 * var(--sf)); }
  .page-culture .cu-intro { justify-self: center; width: 90.00595117828787%; margin: 32.547522117734026% .38128365207534487% 0 0; font-size: calc(.0345744 * var(--sf)); }
  .page-culture .cu-gal { --iw: 210px; --ih: 280px; justify-self: center; width: 90.00000000000001%; height: 280px; margin: 60.076177436314616% .3737427215782065% 0 0; }
  .page-culture .cu-about .cu-in { grid-template-rows: minmax(calc(.694391 * var(--sf)), auto); }
  .page-culture .cu-to { min-height: 92.37214660644531px; align-self: start; margin: 29.155321193483072% 5.145019183556339% 0 0; }
  .page-culture .cu-to-l { width: calc(.1447655 * var(--sf)); margin: calc(.0035889 * var(--sf)) 0 0; font-size: calc(.0402144 * var(--sf)); }
  .page-culture .cu-to-t { width: calc(.4180519 * var(--sf)); margin-right: calc(.001633 * var(--sf)); font-size: calc(.0670244 * var(--sf)); }
  .page-culture .cu-to-a { width: calc(.0797872 * var(--sf)); aspect-ratio: 1; margin-top: calc(.0013449 * var(--sf)); }
}

/* 확대 보기(휴대폰, .m): 위에 뒤로 가기 단추, 그림 아래에 제목. 옆으로 밀어 넘긴다.
   그림 칸은 원본처럼 화면 높이만큼이라 아래 60px이 화면 밖으로 나가 있고(그만큼 아래 여백을 둔다), 내용이 길면 칸 안에서 세로로 스크롤된다.
   --box는 그림이 들어가는 상자의 높이: 세로로 든 화면에서는 화면 높이 − 200px, 가로로 든 화면에서는 화면 높이.
   그림은 이 높이까지만 커지고, 그림이 더 작아도 칸의 내용 높이는 이만큼은 된다(::before) */
.page-culture .cu-fs.m { --box: calc(100dvh - 200px); touch-action: auto; }
@media (orientation: landscape) { .page-culture .cu-fs.m { --box: 100dvh; } }
.page-culture .cu-fs.m .cu-fs-bar { flex: none; height: 60px; margin: 0; background: #fff; }
.page-culture .cu-fs.m .cu-fs-bar button { width: 60px; height: 60px; }
.page-culture .cu-fs.m .cu-fs-bar svg { top: 0; }
.page-culture .cu-fs.m .cu-fs-full, .page-culture .cu-fs.m .cu-fs-close .cu-x, .page-culture .cu-fs.m .cu-fs-arr, .page-culture .cu-fs.m .cu-fs-side { display: none; }
.page-culture .cu-fs.m .cu-fs-close { margin: 0; }
.page-culture .cu-fs.m .cu-fs-close .cu-back { display: block; }
.page-culture .cu-fs.m .cu-fs-stage { position: static; flex: none; display: flex; width: 100%; height: 100%; overflow: scroll hidden; scrollbar-width: none; scroll-snap-type: x mandatory; overscroll-behavior: contain; }
.page-culture .cu-fs.m .cu-fs-stage::-webkit-scrollbar { display: none; }
.page-culture .cu-fs.m .cu-fs-item { position: static; flex: 0 0 100%; width: auto; padding-bottom: 60px; overflow: hidden auto; opacity: 1; pointer-events: auto; scroll-snap-align: center; overscroll-behavior-y: contain; transition: none; }
.page-culture .cu-fs.m .cu-fs-item::before { content: ""; float: left; height: var(--box); }
.page-culture .cu-fs.m .cu-fs-item img { position: static; max-height: var(--box); margin: 0 auto 20px; }
.page-culture .cu-fs.m .cu-fs-item figcaption { display: block; padding: 0 10px; }
.page-culture .cu-fs.m .cu-fs-item h1 { margin: 0 10px 14px; white-space: pre-wrap; }

/* 휴대폰용 카드 제목 글꼴(원본: Wix Madefor Text Bold). 원본이 쓰는 파일과 글자 높낮이 값이 달라 같은 값(위 72%, 아래 28%)으로 맞춘다 */
@font-face { font-family: cu-madefor; font-weight: 700; font-display: swap; ascent-override: 72%; descent-override: 28%; line-gap-override: 0%; src: url(https://fonts.gstatic.com/s/wixmadefortext/v17/-W_oXI_oSymQ8Qj-Apx3HGN_Hu1RTCk5FtSDETgf0cJYM9eCiJU.woff2) format('woff2'); }

/* ---- home.css ---- */
/* 홈 — 크기·여백은 원본(Wix)의 규칙을 그대로 옮긴 것이라 수치가 길다. vw = 화면 폭의 1%, 퍼센트 여백은 구역 폭 기준.
   구간은 원본과 같이 셋: 1001px 이상, 751~1000px, 750px 이하. */
.page-home { background: #fff; } /* 원본은 구역마다 검은 바탕을 따로 깔고 그 뒤는 흰색이다 — 구역의 바탕이 걷힐 때(아래 '움직임') 이 흰색이 비친다 */
.page-home main { display: contents; } /* 구역들의 기준 상자를 문서 전체로 둔다 — 화면 위에 붙는(sticky) 구역이 원본처럼 푸터가 지나갈 때까지 머문다 */
.page-home :is(.hero, .vsec, .h-about) { display: grid; grid-template: minmax(var(--h), auto) / minmax(0, 1fr); word-break: normal; overflow-wrap: break-word; }
.page-home :is(.hero, .vsec, .h-about, .vb) > * { grid-area: 1 / 1; }
.page-home :is(.hero, .vsec) .lay { position: absolute; inset: 0; overflow: clip; background: #000; }
.page-home :is(.hero, .vsec) video { width: 100%; height: 100%; object-fit: cover; }

/* 첫 화면: 배경 영상은 구역보다 크게 깔려 가운데만 보인다 */
.page-home .hero { position: relative; --h: 57.74098vw; }
.page-home .hero .lay { container-type: size; }
.page-home .hero .med { height: 100%; opacity: .5; }
.page-home .hero .ttl { position: relative; align-self: start; justify-self: center; width: 28.26603325415677%; margin-top: 25.399040987913825%; }
.page-home .hero h1 { color: #fff; font-size: 3.125vw; font-weight: 800; line-height: 1.3em; text-align: center; transition: color .2s ease-in-out; }
.page-home .hero h1 span { font-weight: 600; }
.page-home .hero .ttl:hover h1 { color: #1a6aff; }
.page-home .hero .down { position: relative; align-self: start; justify-self: center; width: 2.7325275880189177%; aspect-ratio: 1; margin-top: 52.75880189174987%; transform: rotate(180.0001deg); } /* 각도의 끝자리(.0001)도 원본 그대로 — 꼭 맞는 180°·90°로 돌리면 선이 더 또렷하게 그려져 원본과 달라 보인다 */
.page-home :is(.hero .down, .h-about .a) svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fff; }
.page-home .hero .down svg { opacity: .5; }

/* 영상 구역 셋: 화면 위에 붙어 있고 다음 구역이 그 위로 올라온다 */
.page-home .vsec { position: sticky; top: 0; view-timeline: --home-sec; }
.page-home #s1 { --h: 56.7526vw; }
.page-home #s2 { --h: 57.77227vw; }
.page-home #s3 { --h: 57.26405vw; }
.page-home #s3 .lay { background: #fff; } /* 세 번째 구역만 바탕이 흰색 — 영상이 나타나기 전 잠깐 보인다 */
.page-home .vsec .vb { position: relative; display: grid; }
.page-home .vsec .vb:focus { outline: 0; }
.page-home .vsec .vb:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #116dff; } /* 키보드 초점: 영상 상자 바깥 테두리(원본도 셋 다 같다. 상자가 화면 폭만큼 넓어 위쪽 변만 보인다) */
.page-home .vsec .vb video { position: absolute; inset: 0; pointer-events: none; } /* 마우스는 영상이 아니라 상자가 받는다(원본도 그렇다) — 영상이 직접 받으면 마우스를 움직일 때마다 화면 갱신이 0.1~0.3초 끊긴다 */
.page-home .vsec .txt { position: relative; display: flex; flex-direction: column; align-items: flex-start; align-self: start; }
.page-home .vsec h2 { font-size: 3.41566vw; font-weight: 800; line-height: 1.3em; }
.page-home .vsec h2 span { font-weight: 500; }
.page-home .vsec :is(.d, .cap) { font-size: 1.31372vw; line-height: 1.6em; }
.page-home .vsec .cap { position: relative; align-self: end; width: 47.50558328954283%; margin-bottom: 5%; font-weight: 500; }
.page-home #s1 .txt { justify-self: start; width: 51.86054913294798%; margin: 15% 0 0 2.494416710457173%; }
.page-home #s1 h2 { width: 100%; }
.page-home #s1 .d { width: 91.60254583452075%; }
.page-home #s1 .cap { justify-self: start; width: 47.505938242280294%; margin-left: 2.494416710457173%; }
.page-home #s2 .txt { justify-self: end; width: 47.50558328954283%; margin: 15% 1.0501510772464526% 0 0; text-align: right; }
.page-home #s2 h2 { width: 86.82291126551212%; margin-left: 13.177088734487883%; }
.page-home #s2 .d { width: 100%; }
.page-home #s2 .cap { justify-self: end; margin-right: 1.0501510772464526%; text-align: right; }
.page-home #s3 .txt { justify-self: start; width: 51.86054913294797%; margin: 7.688404010519395% 0 0 4.017710387902697%; }
.page-home #s3 h2 { width: 100%; margin-bottom: .8612773503055635%; }
.page-home #s3 .d { width: 91.60254583452075%; }
.page-home #s3 .cap { justify-self: start; margin-left: 3%; }

/* 영상 위 단추: 소리(오른쪽 아래. 영상 위에서 마우스를 움직이거나 누르면 나타났다가 2초 뒤 사라진다 — .aud는 home.js가 붙인다), 멈춤/재생(세 번째 영상만. '움직임 줄이기'를 켠 기기에서는 셋 다) */
.page-home .vb .snd { position: relative; align-self: end; justify-self: end; width: 66px; height: 44px; margin: 0 2px 2px; cursor: pointer; opacity: 0; filter: drop-shadow(0 0 1px #000); transition: opacity .2s cubic-bezier(.12, 0, .39, 0) .2s; }
.page-home .vb .snd:focus { outline: 0; opacity: 1; } /* 누른 뒤에는 다른 곳을 누를 때까지 보인다 */
.page-home .vb .snd:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #116dff; }
.page-home .vb.aud .snd { opacity: 1; transition: opacity .35s cubic-bezier(.61, 1, .88, 1) .2s; }
.page-home .vb .snd svg { position: absolute; top: 5px; left: 8px; width: 48px; height: 32px; fill: #fff; opacity: 0; filter: drop-shadow(0 0 4.27px rgba(0, 0, 0, .4)); }
.page-home .vb .snd[aria-pressed="true"] .off, .page-home .vb .snd[aria-pressed="false"] .on { opacity: 1; } /* aria-pressed="true" = 소리 꺼짐 */
.page-home .vb[data-toggle] { cursor: pointer; }
.page-home .vb:not([data-toggle]) .pp { display: none; } /* 눌러서 멈출 수 있는 영상에만 보인다(home.js가 정한다) */
.page-home .vb .pp { position: relative; align-self: center; justify-self: center; width: 60px; height: 60px; opacity: .8; }
.page-home .vb .pp :is(svg, .pl) { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-home .vb :is(.pa, .pl) { opacity: 0; }
.page-home .vb .pa { transform: scale(.95); transition: all .3s cubic-bezier(.12, 0, .39, 0); }
/* 재생 표시는 원본처럼 두 겹(.pl 안에 .pl)이고 겹마다 같은 값이 걸린다 — 보이는 값은 둘을 곱한 것(다 나타나면 .99 × .99, 마우스를 올리면 1.07 × 1.07배) */
.page-home .vb .pl { transition: transform .15s cubic-bezier(.12, 0, .39, 0), opacity .3s cubic-bezier(.61, 1, .88, 1); }
.page-home .vb:hover .pl { transform: scale(1.07); transition-duration: .25s, .3s; }
.page-home .vb[aria-pressed="false"] .pl { opacity: .99; transition-duration: .15s, .5s; } /* aria-pressed="false" = 사용자가 멈춤 */
.page-home .vb[aria-pressed="false"]:hover .pl { transition-duration: .25s, .5s; }
.page-home .vb[aria-pressed="true"]:hover .pa { opacity: 1; transform: scale(1); transition-delay: .35s; }
/* 키보드 초점만 있을 때: 멈춤 표시는 커지지 않고 곧바로, 재생 표시는 완전히 불투명하게 */
.page-home .vb[aria-pressed="true"]:focus-visible .pa { opacity: 1; }
.page-home .vb[aria-pressed="false"]:focus-visible .pl { opacity: 1; }
/* 터치 기기: 소리 단추를 톡 치면 멈춤 표시가 곧바로 사라진다(원본과 같이). 마우스로는 소리 단추 위에 있어도 그대로 보인다 */
@media (hover: none) {
  .page-home .vb:has(.snd:is(:hover, :focus)) .pa { opacity: 0; transform: scale(.95); transition-delay: 0s; }
}
.page-home .vb:focus-visible .pp { outline: 2px solid #116dff; outline-offset: 1px; box-shadow: 0 0 1px 2px #fff; }

/* about → THE NEXT. 커서는 원본의 손 모양(도트 그림) */
.page-home .h-about { position: relative; --h: 15.9403vw; overflow-x: clip; background: #000; }
.page-home .h-about .row { position: relative; display: flex; align-items: flex-start; align-self: start; justify-self: end; width: max-content; margin: 5.214628218602207% 3.5733053074093535% 0 0; cursor: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg data-bbox='45.85 19 108.3 162' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 200 200' data-type='color'%3E%3Cg%3E%3Cpath fill='%23000001' d='M75.26 27.54H69.1v66h-6.06v-6H45.85v19.73h6.24v6.27h6.25v15.64h6.24v14.18H71v15h6.25V181h64.33v-21.82h6.24v-21.91h6.33V85.18h-6.24v-6.36l-6.06-.1v-6.36h-14.57v-6.18h-21.8v-6.36H91.27V27.54h-6.24V19h-9.77v8.54' data-color='1'/%3E%3Cpath d='M147.82 85.095v51.73h-6.33v22h-6.25v15.63H83.58v-16.54h-6.24v-14.91h-6.25v-14.18h-6.42v-15.64h-6.24v-6.18h-6.25v-13.27h10.59v6h6.33v7.27h6.34v-79.46h9.5v64.82h6.33v-26.36h13.75v26.36h6.34v-20h15.65v27.37h6.33v-21.19h8.24v6.55h6.24z' fill='%23FFFFFF' data-color='2'/%3E%3C/g%3E%3C/svg%3E%0A") 16 16, auto; }
.page-home .h-about .l { width: 5.91666vw; margin-top: .40643vw; color: #929292; font-size: 1.57646vw; line-height: 1.3em; text-align: center; }
/* sticky는 원본 그대로 둔 것: 위치는 변하지 않지만 브라우저가 이 글자와 뒤따르는 화살표를 따로 그리게 되어 화살표 선의 굵기·밝기가 원본과 같아진다 */
.page-home .h-about .t { position: sticky; top: 0; width: 16.32784vw; margin-right: .06404vw; font-size: 3.125vw; font-weight: 700; line-height: 1.3em; text-align: center; }
/* 원본은 글자와 그 안의 링크, 화살표에 모든 속성의 전환을 건다 — 링크의 키보드 초점 테두리도 1초(화살표는 0.3초)에 걸쳐 나타나고 사라진다 */
.page-home .h-about :is(.t, .t a) { transition: all 1s ease-in-out; }
.page-home .h-about .t:lang(en) { font-weight: 800; }
/* 줄 전체가 키보드 초점을 받는다(원본 그대로). .hov = 키보드로 초점이 들어와 마우스를 올린 것과 같은 상태(home.js) */
.page-home .h-about .row:focus-visible { outline: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #116dff; }
.page-home .h-about .row:is(:hover, .hov) .t { transform: translateX(30px); }
.page-home .h-about .a { position: relative; width: 2.63705vw; aspect-ratio: 1 / 1.34; margin-top: .32309vw; transform: rotate(90.0001deg); transition: all .3s ease-in-out; }
.page-home .h-about .a:hover { transform: translateX(10px) rotate(90.0001deg); }

@media (max-width: 1000px) {
  .page-home #s2 { --h: 59.38134vw; }
  .page-home #s3 { --h: 58.03815vw; }
}
@media (max-width: 750px) {
  .page-home .hero { --h: 127.01501vw; }
  .page-home .hero .ttl { align-self: center; justify-self: end; width: 48.92233710455223%; margin: 0 24.019772117962468% 0 0; }
  .page-home .hero h1 { font-size: 5.54462vw; }
  .page-home .hero .down { align-self: end; margin-top: 0; }
  .page-home #s1 { --h: 120.64353vw; }
  .page-home #s2 { --h: 122.26757vw; }
  .page-home #s3 { --h: 93.45409vw; }
  .page-home .vsec .cap { display: none; }
  /* 첫째·둘째 영상의 소리 단추는 원본에서 아이콘 없이 높이 7px의 띠로 줄어든다 — 보이지 않지만 톡 치면 소리가 켜지고 꺼진다 */
  .page-home :is(#s1, #s2) .snd { width: 83.91420911528151%; height: 7px; }
  .page-home :is(#s1, #s2) .snd svg { width: calc(100% - 18px); height: 0; }
  .page-home .vsec h2 { font-size: 6.70241vw; }
  .page-home .vsec .d { font-size: 4.02145vw; }
  .page-home #s1 .txt { align-items: center; justify-self: center; width: 83.91420911528152%; margin: 5.361930294906166% 0 0; padding: 20px 0; }
  .page-home #s1 h2 { width: 99.77382875605817%; margin-bottom: 20px; font-size: 25px; }
  .page-home #s1 .d { width: 99.77382875605817%; font-size: 15px; }
  .page-home #s2 .txt { justify-self: center; width: 87.18163538873995%; margin: 19.550100536193025% 0 0 1.0053619302949062%; text-align: left; }
  .page-home #s2 h2 { width: 74.9807803190467%; margin: 0 0 6.765327695560253%; }
  .page-home #s3 .txt { width: 83.22721179624664%; margin: 15.00083780160858% 0 0 4.017258713136729%; }
  .page-home #s3 h2 { margin-bottom: 3.7579330378892126%; }
  .page-home .h-about { --h: 12.64921vw; }
  .page-home .h-about .row { align-self: center; margin: 0 2.7522935779816513% 0 0; }
  .page-home .h-about .l { width: 14.674vw; margin-top: .37017vw; font-size: 4.02145vw; }
  .page-home .h-about .t { width: 35.03351vw; margin-right: .16335vw; font-size: 6.70242vw; }
  .page-home .h-about .a { width: 8.11314vw; aspect-ratio: 1; margin-top: .19634vw; }
}

/* 움직임 — 원본과 같이 '움직임 줄이기'를 켜 둔 기기에서는 쓰지 않는다 */
@media (prefers-reduced-motion: no-preference) {
  .page-home .hero .med { width: max(100%, 92.718cqw + 37.461cqh); height: max(100%, 37.461cqw + 92.718cqh); translate: calc(50cqw - 50%) calc(50cqh - 50%); }
  .page-home .hero .down { animation: home-breathe 1.5s linear infinite; }
  /* about 줄의 '툭 치기'는 구역이 화면에 다가오면(.on, home.js) 돌고, 벗어나면 그 자리에 멈춘다 */
  .page-home .h-about .row { animation: home-poke 5.2s linear infinite paused; }
  .page-home .h-about.on .row { animation-play-state: running; }
  /* 스크롤 위치에 묶인 효과: 첫 영상은 화면에 들어오면서부터 서서히 밝아지고, 각 구역의 검은 바탕은 구역이 화면 위에 붙은 뒤 구역 높이만큼 더 내리는 동안 걷힌다.
     animation-timeline을 모르는 브라우저에서는 home.js가 같은 값을 대신 계산한다 */
  @supports (animation-timeline: view()) {
    .page-home #s1 .vb { animation: home-in linear backwards; animation-timeline: view(); animation-range: cover 0% cover 50%; }
    .page-home .vsec .lay { animation: home-out cubic-bezier(.39, .575, .565, 1) both; animation-timeline: --home-sec; animation-range: cover 100vh cover calc(100vh + var(--h)); }
  }
}
/* 등장 효과: 화면에 들어오면 home.js가 .go를 붙여 한 번 재생한다. 스크립트가 꺼져 있으면 처음부터 보이는 상태로 둔다 */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .page-home .hero .ttl { animation: home-in 1.2s cubic-bezier(.25, .46, .45, .94) backwards, home-flip 1.2s cubic-bezier(.39, .575, .565, 1) backwards; }
  .page-home :is(#s2, #s3) .vb { animation: home-in 1.2s cubic-bezier(.445, .05, .55, .95) backwards; }
  .page-home .vsec .txt { animation: home-float 1.2s cubic-bezier(.445, .05, .55, .95) backwards; }
  .page-home .vsec .cap { animation: home-reveal 1.2s cubic-bezier(.645, .045, .355, 1) backwards; }
  .page-home :is(.hero .ttl, .vsec .txt, .vsec .cap, #s2 .vb, #s3 .vb):not(.go) { animation-play-state: paused; }
}
/* 시작(0%)에는 투명하기만 하고 변형은 그 직후(.0001%)부터 — 기다리는 동안 요소가 제자리에 있어야 화면에 들어왔는지를 바르게 잰다 */
@keyframes home-in { from { opacity: 0; } }
@keyframes home-out { to { opacity: 0; } }
@keyframes home-flip { .0001% { transform: perspective(800px) rotateX(-90deg); } to { transform: perspective(800px) rotateX(0); } }
@keyframes home-float { 0% { opacity: 0; animation-timing-function: step-end; } .0001% { opacity: 0; transform: translateY(60px); } }
@keyframes home-reveal { 0% { opacity: 0; animation-timing-function: step-end; } .0001% { opacity: 1; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes home-breathe { 0%, to { transform: translate3d(0, 0, 0) rotate(180deg); } 25% { transform: translate3d(0, 15px, 0) rotate(180deg); } 75% { transform: translate3d(0, -15px, 0) rotate(180deg); } }
@keyframes home-poke { 3.91% { translate: 11.2px; } 7.36% { translate: 40px; } 11.04% { translate: 12.8px; } 12.88% { translate: 17.6px; } 15.18% { translate: 40px; } 19.09% { translate: 6.4px; } 23%, to { translate: 0; } }

/* ---- intro.css ---- */
/* 회사 소개 — 위치·크기는 원본(Wix)의 규칙을 그대로 옮긴 것이라 숫자가 길다.
   구역마다 칸이 하나뿐인 그리드이고, 바탕·사진·글 상자가 그 한 칸에 겹쳐 놓인 채 폭(%)과 바깥 여백(%, 칸 너비 기준)으로 자리를 잡는다.
   원본은 거의 모든 크기를 화면 너비에 비례시키는데 기준이 둘이다: cqw = 본문 너비의 1%(스크롤바 제외), --tw = 창 너비의 1%(스크롤바 포함).
   테마 글꼴 크기를 그대로 쓰는 큰 제목 몇 개만 창 너비 기준이다. --sb(스크롤바 너비)는 intro.mjs 맨 앞의 짧은 스크립트가 넣는다.
   구간은 원본과 같이 둘: 751px 이상, 750px 이하. */
.page-intro main { --tw: calc(1cqw + var(--sb, 0px) / 100); container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); overflow: clip; overflow-wrap: break-word; word-break: normal; } /* clip: 옆으로 삐져나가는 움직임이 가로 스크롤을 만들지 않게. 줄바꿈은 원본처럼 한글도 글자 단위 */
/* convention 칸은 원본처럼 문서 맨 끝에 있고(그래서 Tab·화면 낭독 순서도 같다) 화면에서만 culture 다음에 놓인다.
   order가 아니라 줄 번호로 자리를 잡는 까닭: 칸끼리 겹쳐 그려지는 순서도 원본처럼 문서 순서여야 한다(order는 그 순서까지 바꾼다) —
   좁은 화면에서 글 상자가 떠오르는 동안 칸 아래로 삐져나온 부분이, convention 칸의 것은 아래 칸(content) 위에 보이고 나머지 칸의 것은 아래 칸에 가려진다 */
.page-intro .ihero { grid-row: 1; } .page-intro .ib-culture { grid-row: 2; } .page-intro .ib-convention { grid-row: 3; } .page-intro .ib-content { grid-row: 4; }
.page-intro .ib-connect { grid-row: 5; } .page-intro .iabout { grid-row: 6; } .page-intro .ipartner { grid-row: 7; }
.page-intro :is(.ihero, .iblock, .ia-in, .ipartner) { display: grid; grid-template-columns: minmax(0, 1fr); }
.page-intro :is(.ihero, .iblock, .ipartner) { position: relative; }
.page-intro :is(.ih-box, .ib-img, .ib-box, .ia-box, .ipartner > *) { grid-area: 1 / 1; }
.page-intro :is(.ih-bg, .ib-bg) { position: absolute; inset: 0; overflow: clip; }
.page-intro :is(.ih-box, .ib-box) { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.page-intro .w3 { font-weight: 300; } .page-intro .w6 { font-weight: 600; } .page-intro .w7 { font-weight: 700; } .page-intro .w8 { font-weight: 800; }

/* 첫 화면: 배경 영상 위에 글 */
.page-intro .ihero { grid-template-rows: minmax(79.17691cqw, auto); }
.page-intro .ih-bg video { width: 100%; height: 100%; object-fit: cover; }
.page-intro .ih-box { align-self: start; justify-self: start; width: 49.140857%; margin: 19.99969% 0 0 14.997832%; }
.page-intro .ihero h1 { width: 96.668473%; margin-bottom: 6.019311%; font-size: calc(5.416667 * var(--tw)); font-weight: 400; line-height: 1.2; }
.page-intro .ih-lead { width: 96.668473%; margin-bottom: 4.847896%; font-size: 1.97941cqw; font-weight: 600; line-height: 1.3; }
.page-intro .ih-body { width: 100%; font-size: 1.31372cqw; font-weight: 500; line-height: 1.6; }

/* 사진 바탕의 네 칸. 사진은 반투명하게 깔리고(칸마다 농도가 다르다) 글 상자는 왼쪽·오른쪽 번갈아 놓인다 */
.page-intro .iblock { grid-template-rows: minmax(31.67063cqw, auto); }
.page-intro .ib-convention { grid-template-rows: minmax(36.23394cqw, auto); }
.page-intro .ib-connect { grid-template-rows: minmax(31.8463cqw, auto); }
.page-intro .ib-bg { background: #000; }
.page-intro .ib-convention .ib-bg { background: #fff; } /* 원본 설정 그대로: 이 칸이 화면에 들어설 때 사진이 나타나기 전까지 흰 바탕이 비친다 */
.page-intro .ib-img { position: relative; overflow: hidden; }
.page-intro .ib-convention .ib-img { background: #000; }
.page-intro .ib-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.page-intro .ib-content .ib-img img { opacity: .3; }
/* 이 사진만 초점(가로 50%, 세로 67%)이 칸 가운데 오도록 자른다. 사진 비율 4:3 → 칸 너비에 맞춘 사진 높이는 75cqw */
.page-intro .ib-connect .ib-img { container-type: size; }
.page-intro .ib-connect .ib-img img { opacity: .4; object-position: 50% min(0px, max(100cqh - 75cqw, 50cqh - 50.25cqw)); }
.page-intro .ib-box { width: 50.596298%; }
.page-intro .ib-culture .ib-box { align-self: center; justify-self: start; margin: 1.018949% 0 0 14.997832%; }
.page-intro .ib-convention .ib-box { align-self: start; justify-self: end; margin: 5.381876% 5.145875% 0 0; }
.page-intro .ib-content .ib-box { align-self: center; justify-self: start; margin: 0 0 .001549% 14.997832%; }
.page-intro .ib-connect .ib-box { align-self: center; justify-self: end; margin-right: 5.146477%; }
.page-intro .iblock h2 { width: 80.277764%; margin-bottom: 2.782114%; font-size: calc(3.125 * var(--tw)); font-weight: 400; line-height: 1.3; }
.page-intro :is(.ib-culture, .ib-connect) h2 { font-size: max(24px, 3.20309cqw); }
.page-intro .ib-culture h2 { margin-bottom: 2.785174%; }
.page-intro .ib-connect h2 { margin-bottom: 2.784977%; }
.page-intro .ib-txt { width: 100%; font-size: 1.31372cqw; font-weight: 400; line-height: 1.3; }
.page-intro .ib-culture .ib-txt { margin-bottom: 9.861353%; }
.page-intro .ib-convention .ib-txt { margin-bottom: 7.988247%; font-size: 1.34814cqw; }
.page-intro .ib-content .ib-txt { margin-bottom: 9.864414%; font-size: 1.3137cqw; }
.page-intro .ib-btn { display: flex; align-items: center; justify-content: center; width: 20.971911%; aspect-ratio: 1 / .29436; padding: .15623cqw; border: .1586cqw solid #fff; border-radius: 3.17209cqw; font-size: 1.34814cqw; font-weight: 700; line-height: 1.6; transition: border-color .4s ease, background-color .4s ease; }
.page-intro .ib-btn span { transition: color .4s ease; }
.page-intro .ib-btn:hover { border-color: rgba(50, 50, 50, 0); background-color: var(--hover); }
.page-intro .ib-btn:hover span { color: #000; }
.page-intro .ib-convention .ib-btn { width: 21.090207%; }
.page-intro .ib-content .ib-btn { width: 20.181801%; }

/* about → 다음 페이지. 원본은 이 칸만 내용 폭을 1600px로 묶어, 그보다 넓은 화면에서는 크기가 더 커지지 않고 가운데에 놓인다(--sf가 크기의 기준 너비).
   검은 바탕과 position도 원본 그대로다: 좁은 화면에서 바로 위 칸(connect)의 글이 떠오르는 동안 칸 아래로 삐져나온 줄이 이 칸 뒤에 가려진다 */
.page-intro .iabout { --sf: calc(min(100 * var(--tw), 1600px) - var(--sb, 0px)); position: relative; display: flex; flex-direction: column; background: #000; }
.page-intro .ia-in { flex-grow: 1; grid-template-rows: minmax(calc(.131778 * var(--sf)), auto); max-width: 1600px; margin-left: max(0px, (100% - 1600px) / 2); }
/* cursor: 원본이 이 상자 위에서 쓰는 손 모양(도트 그림) 커서 */
.page-intro .ia-box { position: relative; display: flex; align-items: flex-start; align-self: center; justify-self: end; width: max-content; min-height: 77.98828125px; margin-right: 1.120843%; cursor: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg data-bbox='45.85 19 108.3 162' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 200 200' data-type='color'%3E%3Cg%3E%3Cpath fill='%23000001' d='M75.26 27.54H69.1v66h-6.06v-6H45.85v19.73h6.24v6.27h6.25v15.64h6.24v14.18H71v15h6.25V181h64.33v-21.82h6.24v-21.91h6.33V85.18h-6.24v-6.36l-6.06-.1v-6.36h-14.57v-6.18h-21.8v-6.36H91.27V27.54h-6.24V19h-9.77v8.54' data-color='1'/%3E%3Cpath d='M147.82 85.095v51.73h-6.33v22h-6.25v15.63H83.58v-16.54h-6.24v-14.91h-6.25v-14.18h-6.42v-15.64h-6.24v-6.18h-6.25v-13.27h10.59v6h6.33v7.27h6.34v-79.46h9.5v64.82h6.33v-26.36h13.75v26.36h6.34v-20h15.65v27.37h6.33v-21.19h8.24v6.55h6.24z' fill='%23FFFFFF' data-color='2'/%3E%3C/g%3E%3C/svg%3E%0A") 16 16, auto; }
.page-intro .ia-box > * { flex: none; }
.page-intro .ia-label { width: calc(.0591663 * var(--sf)); margin: calc(.003897 * var(--sf)) calc(-.0450193 * var(--sf)) 0 0; color: var(--grey); font-size: calc(.0157646 * var(--sf)); font-weight: 400; line-height: 1.3; text-align: center; }
/* 상자는 키보드로 초점이 가는 칸이고 고리도 링크와 같다. 링크 안의 글자는 원본처럼 모든 변화가 1초에 걸쳐 일어난다(초점 고리도 서서히 나타난다) */
.page-intro .ia-box:focus-visible { z-index: 1; outline: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #116dff; }
.page-intro .ia-link { position: sticky; top: 0; width: calc(.4699952 * var(--sf)); margin-right: calc(-.0385986 * var(--sf)); font-size: calc(.0317205 * var(--sf)); font-weight: 700; line-height: 1.6; text-align: center; transition: all 1s ease-in-out; }
.page-intro .ia-link * { transition: all 1s ease-in-out; }
.page-intro .ia-arrow { position: relative; width: calc(.0356857 * var(--sf)); aspect-ratio: 1 / .733333; margin-top: calc(.0123095 * var(--sf)); transform: rotate(90deg); transition: all .3s ease-in-out; }
.page-intro .ia-arrow svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fff; overflow: visible; }
/* 마우스를 올리면: 상자 어디에 올려도 글자가 오른쪽으로 밀리고, 화살표는 화살표 위에 올렸을 때만 움직인다.
   원본은 휴대폰·태블릿에서는 마우스 대신 누르면 이렇게 된다 — 어느 쪽인지, 키보드 초점은 어떤지는 intro.js가 정해 .hov·.on을 붙인다 */
.page-intro .ia-box:is(.hov:hover, .on) .ia-link { transform: translateX(30px); }
.page-intro :is(.hov .ia-arrow:hover, .ia-arrow.on) { transform: translateX(10px) rotate(90deg); }

/* 협력사·고객사 로고 띠(흰 바탕). 로고 묶음 그림 넉 장이 정해진 자리에 놓인다 */
.page-intro .ipartner { grid-template-rows: minmax(13.12008cqw, auto); background: #fff; color: #000; }
.page-intro .ipartner > * { align-self: start; }
.page-intro .ipartner h2 { justify-self: start; width: 40.617577%; margin: 1.636728% 0 0 2.54231%; font-size: 2.77118cqw; font-weight: 700; line-height: 1.3; }
.page-intro .ipartner img { object-fit: cover; }
.page-intro .ip-1 { justify-self: start; width: 24.217206%; aspect-ratio: 1 / .176476; margin: 6.683598% 0 0 2.147857%; }
.page-intro .ip-2 { justify-self: start; width: 27.863069%; aspect-ratio: 1 / .176499; margin: 6.361497% 0 0 26.04559%; }
.page-intro .ip-3 { justify-self: end; width: 22.63108%; aspect-ratio: 1 / .176511; margin: 6.822968% 23.62023% 0 0; }
.page-intro .ip-4 { justify-self: end; width: 22.15446%; aspect-ratio: 1 / .176511; margin: 6.822968% 2.450136% 0 0; }

@media (max-width: 750px) {
  .page-intro .ihero { grid-template-rows: minmax(131.15369cqw, auto); padding: 40px calc(8 * var(--tw)); }
  .page-intro .ih-box { width: 100.120724%; margin: 88.391125px 0 0 -.2px; padding: 20px 0; }
  .page-intro .ihero h1, .page-intro .ih-lead, .page-intro .ih-body { align-self: center; width: 100.136512%; margin: 0 0 20px .005024%; }
  .page-intro .ihero h1 { font-size: 34px; }
  .page-intro .ih-lead { font-size: 20px; }
  .page-intro .ih-body { margin-bottom: 0; font-size: 15px; }

  .page-intro .iblock { grid-template-rows: minmax(107.23861cqw, auto); }
  .page-intro .ib-content { grid-template-rows: minmax(99.7319cqw, auto); }
  .page-intro .ib-connect { grid-template-rows: minmax(62.66016cqw, auto); }
  .page-intro .ib-box { width: 83.914209%; padding: 20px 0; }
  .page-intro .ib-culture .ib-box { justify-self: center; margin: 0 0 19.980875px; }
  .page-intro .ib-convention .ib-box { align-self: center; justify-self: center; margin: 0; }
  .page-intro .ib-content .ib-box { align-self: start; justify-self: center; width: 84.094336%; margin: 30.508207% .178872% 0 0; padding: 0; }
  .page-intro .ib-connect .ib-box { justify-self: center; margin: 0 0 .015625px; }
  .page-intro .iblock h2 { font-size: 24px; }
  .page-intro .ib-culture h2 { margin-bottom: 2.777429%; }
  .page-intro .ib-content h2 { margin-bottom: 2.777778%; font-size: 6.43432cqw; }
  .page-intro .ib-connect h2, .page-intro .ib-connect .ib-txt { align-self: center; width: 100.149031%; margin-left: .004992%; }
  .page-intro .ib-connect h2 { margin-bottom: 20px; }
  .page-intro .ib-txt { font-size: 16px; }
  .page-intro .ib-culture .ib-txt { margin-bottom: 9.862069%; }
  .page-intro .ib-convention .ib-txt { margin-bottom: 7.985187%; font-size: 16px; }
  .page-intro .ib-content .ib-txt { margin-bottom: 9.85986%; font-size: 4.28954cqw; }
  .page-intro .ib-culture .ib-btn { margin-left: .363636%; }
  .page-intro .ib-content .ib-btn { margin-left: .212713%; }

  .page-intro .ia-box { align-self: end; min-height: 69.59765625px; margin: 0 3.029251% -1.878168% 0; }
  .page-intro .ia-label { width: calc(.1486685 * var(--sf)); margin: calc(.0036334 * var(--sf)) 0 0; font-size: calc(.0402145 * var(--sf)); }
  .page-intro .ia-link { width: calc(.5680909 * var(--sf)); margin-right: calc(.0016334 * var(--sf)); font-size: calc(.0670238 * var(--sf)); }
  .page-intro .ia-box:is(.hov:hover, .on) .ia-link { font-size: calc(.0317205 * var(--sf)); } /* 원본 그대로: 이 폭에서 마우스를 올리거나(누르거나) 하면 글자가 넓은 화면용 크기로 줄어든다 */
  .page-intro .ia-arrow { width: calc(.0811321 * var(--sf)); aspect-ratio: 1; margin-top: calc(.0023801 * var(--sf)); }
}

/* 움직임. 재생을 시작·정지시키는 일(.in 붙이기)은 intro.js가 한다 */
@keyframes i-fade-in { from { opacity: 0; } }
@keyframes i-fade-out { to { opacity: 0; } }
@keyframes i-float-in { 0% { opacity: 0; animation-timing-function: step-end; } .0001% { opacity: 0; transform: translateY(60px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes i-poke { 3.91% { translate: 11.2px; } 7.36% { translate: 40px; } 11.04% { translate: 12.8px; } 12.88% { translate: 17.6px; } 15.18% { translate: 40px; } 19.09% { translate: 6.4px; } 23% { translate: 0; } }
@media (prefers-reduced-motion: no-preference) {
  /* 글 상자: 화면에 들어오면 한 번, 아래에서 떠오르며 나타난다(content 칸은 제자리에서 나타나기만 한다) */
  .page-intro .ib-box { animation: i-float-in 1.2s 1ms cubic-bezier(.445, .05, .55, .95) backwards paused; }
  .page-intro .ib-content .ib-box { animation-name: i-fade-in; }
  /* about 상자: 5.2초마다 오른쪽으로 두 번 툭툭 */
  .page-intro .ia-box { animation: i-poke 5.2s 1ms linear infinite paused; }
  .page-intro :is(.ib-box, .ia-box).in { animation-play-state: running; }
  /* 스크롤 위치에 묶인 효과: 칸의 바탕(첫 화면은 영상)은 칸이 화면 위로 빠져나가는 동안 사라지고, 사진은 칸이 화면 아래에서 들어와 절반쯤 지날 때까지 서서히 나타난다.
     이 CSS를 모르는 브라우저에서는 intro.js가 같은 계산을 한다 */
  @supports (animation-timeline: view()) {
    .page-intro :is(.ih-bg, .ib-culture .ib-bg, .ib-convention .ib-bg, .ib-connect .ib-bg) { animation: i-fade-out cubic-bezier(.39, .575, .565, 1) both; animation-timeline: view(); animation-range: exit-crossing 0% exit-crossing 100%; }
    .page-intro .ib-img { animation: i-fade-in linear backwards; animation-timeline: view(); animation-range: cover 0% cover 50%; }
  }
}

/* ---- nvoice.css ---- */
/* N voice — 수치는 원본(Wix) 규칙을 그대로 옮긴 것이다. --sf = 화면 폭(최대 1600px)이고, 제목 구역의 크기·여백은 모두 여기에 비례한다. */

/* 제목 글꼴: 원본은 Regular 한 벌뿐인 글꼴에 bold를 지정해, 브라우저가 획을 덧칠한 '합성 굵기'로 보인다(진짜 Bold와 모양·폭이 다르다).
   같은 결과가 나오도록 본문 글꼴의 조각 파일을 굵기 400 전용으로 한 번 더 선언하고 제목에 font-weight: 700을 준다.
   ascent-override는 원본이 쓰는 통짜 Regular 파일의 세로 치수(1949/2048)에 맞춘 것 — 조각 글꼴은 이 값이 1950이라 글자 크기에 따라 줄이 1px 어긋난다.
   unicode-range에는 지금 제목에 쓰인 글자만 적었다. 문구를 바꿔 새 한글 글자가 생기면 그 글자가 든 조각을 찾아(Pretendard의 pretendardvariable-dynamic-subset.css) 추가해야 하고,
   빠뜨리면 그 글자만 진짜 Bold로 나온다. */
@font-face { font-family: nv-regular; font-weight: 400; font-display: swap; ascent-override: 95.166%; src: url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/variable/woff2-dynamic-subset/PretendardVariable.subset.91.woff2) format('woff2-variations'); unicode-range: U+20-22, U+27-2A, U+2C-3B, U+3F, U+41-5D, U+61-7B, U+7D, U+C2A4; } /* 영문·숫자, 스 */
@font-face { font-family: nv-regular; font-weight: 400; font-display: swap; ascent-override: 95.166%; src: url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/variable/woff2-dynamic-subset/PretendardVariable.subset.90.woff2) format('woff2-variations'); unicode-range: U+C18C, U+C694, U+C744, U+C758, U+C804, U+D2B8, U+D574; } /* 소요을의전트해 */
@font-face { font-family: nv-regular; font-weight: 400; font-display: swap; ascent-override: 95.166%; src: url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/variable/woff2-dynamic-subset/PretendardVariable.subset.89.woff2) format('woff2-variations'); unicode-range: U+B354, U+C2DD; } /* 더식 */
@font-face { font-family: nv-regular; font-weight: 400; font-display: swap; ascent-override: 95.166%; src: url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/variable/woff2-dynamic-subset/PretendardVariable.subset.82.woff2) format('woff2-variations'); unicode-range: U+B125; } /* 넥 */
/* 글 제목 글꼴: 원본 블로그는 영문·숫자를 Wix Madefor Display로, 한글·그림문자는 기기의 기본 글꼴로 그린다 */
@font-face { font-family: nv-madefor; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/wixmadefordisplay/v12/SZcl3EX9IbbyeJ8aOluD52KXgUA_7Ed1CVHuAg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.page-nvoice .nv-head, .page-nvoice .nv-list { container-type: inline-size; }
.page-nvoice .nv-in { --sf: min(100cqw, 1600px); display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1600px; margin: 0 auto; }
/* 원본은 사이트 바탕이 흰색이고 이 페이지에는 푸터가 없어서, 내용이 화면보다 짧으면(영어판) 아래 남는 자리가 희게 보인다.
   그림자는 스크롤 길이를 늘리지 않으므로, 본문 끝에서 아래로 흰 그림자를 드리워 같은 모습을 만든다. */
.page-nvoice main::after { content: ''; display: block; height: 0; box-shadow: 0 100vh 0 100vh #fff; }

/* 제목 구역: 세 줄이 같은 칸에 겹쳐 놓이고 위 여백으로 자리를 잡는다(원본 배치 방식 그대로) */
.page-nvoice .nv-head .nv-in { grid-template-rows: minmax(calc(.2005737 * var(--sf)), auto); }
.page-nvoice :is(.nv-eye, .nv-t1, .nv-t2) { grid-area: 1 / 1; align-self: start; justify-self: start; font-family: nv-regular, 'Pretendard Variable', Pretendard, -apple-system, 'Malgun Gothic', sans-serif; font-weight: 700; line-height: 1.3em; letter-spacing: 0; word-break: normal; overflow-wrap: break-word; }
.page-nvoice .nv-eye { width: 21.75%; margin: calc(.0391531 * var(--sf)) 0 0 calc(.00375 * var(--sf)); color: #c2c2c2; font-size: calc(var(--sf) * 31 / 1920); font-weight: 400; line-height: 1.4em; }
.page-nvoice .nv-t1 { width: 66.435791%; margin: calc(.083938 * var(--sf)) 0 0; font-size: calc(var(--sf) * 60 / 1920); }
.page-nvoice .nv-t2 { width: 66.435547%; margin: calc(.1249409 * var(--sf)) 0 0; font-size: calc(.022082 * var(--sf)); }
/* 좁은 화면: 원본에서 둘째 줄(한국어)은 위치를 따로 잡지 않아 영문 제목 위, 왼쪽 끝에 붙어 나온다 */
@media (min-width: 320px) and (max-width: 750px) {
  .page-nvoice .nv-head .nv-in { grid-template-rows: minmax(calc(.3902016 * var(--sf)), auto); }
  .page-nvoice .nv-eye { margin: calc(.0744411 * var(--sf)) 0 0 calc(.0405975 * var(--sf)); font-size: calc(.0379404 * var(--sf)); }
  .page-nvoice .nv-t1 { width: 78.634534%; margin: calc(.1757389 * var(--sf)) 0 0 calc(.0405975 * var(--sf)); font-size: calc(.0487805 * var(--sf)); }
  .page-nvoice .nv-t2 { width: 78.634534%; font-size: calc(.0487805 * var(--sf)); }
}

/* 목록 구역 */
.page-nvoice .nv-list .nv-in { grid-template-rows: minmax(calc(.2598388 * var(--sf)), auto); align-items: center; }
/* 정사각형 칸을 --g 간격으로 늘어놓는다. 칸 수(--n)는 원본 갤러리와 같이 '칸+간격' 폭이 '454px+간격'에 가장 가까워지는 수다
   (목록 폭 624px부터 2칸, 1164px부터 3칸. 휴대전화는 간격이 50px이라 경계가 623px·1161px).
   --gw = 목록 폭 + 간격, --col = 한 칸과 간격을 합친 폭, --c2·--c3 = 2칸·3칸일 때의 칸 폭 배분.
   --gw의 .01px는 반올림 보정: 100cqw가 414px 대신 413.99999…px처럼 계산되는 폭이 있어, 그대로 두면 아래 내림·반올림이 1px 모자라게 나온다 */
.page-nvoice .nv-grid { --g: 53px; --n: 1; --gw: calc(var(--sf) + var(--g) + .01px);--col: calc(var(--gw) / var(--n)); --c2: repeat(2, minmax(0, 1fr)); --c3: repeat(3, minmax(0, 1fr)); display: grid; gap: var(--g); grid-template-columns: minmax(0, 1fr); grid-auto-rows: calc(var(--col) - var(--g)); }
/* 원본 갤러리는 칸 폭·높이를 정수 px로 맞춘다(폭은 앞 칸부터 반올림하고 나머지를 마지막 칸에, 높이는 내림). round()를 아는 브라우저에서는 그대로 따른다 */
@supports (width: round(down, 1px, 1px)) {
  .page-nvoice .nv-grid { --c2: calc(round(var(--col), 1px) - var(--g)) minmax(0, 1fr); --c3: calc(round(var(--col), 1px) - var(--g)) calc(round((var(--gw) - round(var(--col), 1px)) / 2, 1px) - var(--g)) minmax(0, 1fr); grid-auto-rows: calc(round(down, var(--col), 1px) - var(--g)); }
}
.page-nvoice.nv-m .nv-grid { --g: 50px; }
@container (min-width: 623px) { .page-nvoice.nv-m .nv-grid { --n: 2; grid-template-columns: var(--c2); } }
@container (min-width: 624px) { .page-nvoice .nv-grid { --n: 2; grid-template-columns: var(--c2); } }
@container (min-width: 1161px) { .page-nvoice.nv-m .nv-grid { --n: 3; grid-template-columns: var(--c3); } }
@container (min-width: 1164px) { .page-nvoice .nv-grid { --n: 3; grid-template-columns: var(--c3); } }
.page-nvoice .nv-item { position: relative; overflow: hidden; }
.page-nvoice .nv-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
/* 사진을 덮는 어두운 막. translateZ(0)은 막을 사진과 따로 그리게 하려는 것으로, 이래야 제목 글자의 윤곽 처리(회색조)가 원본과 같아진다 */
.page-nvoice .nv-ov { position: relative; display: flex; flex-direction: column; height: 100%; padding: 27px 67px; background: rgba(0, 0, 0, .55); cursor: default; transform: translateZ(0); }
/* 제목을 아래에 붙여 놓는 안쪽 상자. 이 상자 위에 마우스가 있으면 제목이 파랗게 바뀐다(전환 효과 없이 바로) */
.page-nvoice .nv-box { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; margin: -3px; padding: 3px; overflow: hidden; }
.page-nvoice .nv-box h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 1px; font: 400 20px/normal nv-madefor, sans-serif; letter-spacing: 0; text-align: center; word-break: break-word; overflow-wrap: break-word; }
.page-nvoice .nv-box:hover h2 { color: #1a6aff; }
/* 원본 블로그 규칙: 목록 폭이 660px보다 좁으면 제목 링크 위쪽에 18px 여백이 붙고, 휴대전화에서는 제목이 작아지고 왼쪽으로 정렬된다 */
@container (max-width: 659px) { .page-nvoice .nv-box h2 { margin-top: 18px; } }
.page-nvoice.nv-m .nv-box h2 { font-size: 15px; text-align: start; }

/* 글이 없을 때의 안내(영어판) */
.page-nvoice .nv-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 30px; font: 400 16px/normal nv-madefor, sans-serif; text-align: center; }
.page-nvoice .nv-empty p { margin: 0; word-break: normal; }
.page-nvoice .nv-empty .nv-e1 { margin-bottom: 12px; font-size: 24px; line-height: 34px; }
@container (min-width: 980px) {
  .page-nvoice .nv-empty { height: 450px; padding: 0; }
  .page-nvoice .nv-empty p { max-width: 620px; }
  .page-nvoice .nv-empty .nv-e1 { font-size: 32px; line-height: 1.5; }
}

/* ---- post.css ---- */
/* N voice 글 상세 — 원본은 Wix 블로그 위젯이다. 아래 수치와 구간은 그 위젯의 규칙을 그대로 옮긴 것.
   위젯은 화면 폭이 아니라 "자기 폭"(.blog, 화면의 90%·최대 1440px)으로 배치를 바꾸므로 @container를 쓴다.
   휴대폰(html.pv-m — post.mjs 첫머리의 스크립트가 붙인다)은 원본도 다른 배치를 쓴다: 테두리·All Posts 없음, 작은 글자, 최근 글 슬라이더. */
/* 글꼴: 원본은 굵기별 통짜 Pretendard 파일(Light·Regular)을 쓴다. 사이트 공용인 가변·분할 글꼴은 a·t의 폭과 따옴표+한글 자간이 미세하게 달라
   줄 끝이 2~3px 어긋나므로, 이 위젯만 원본과 같은 파일을 쓴다. 굵은 글씨(strong)는 원본처럼 Light를 브라우저가 굵게 그린다. */
@font-face { font-family: 'Post Pretendard L'; font-weight: 300; font-display: swap; src: url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Light.woff2) format('woff2'); }
@font-face { font-family: 'Post Pretendard R'; font-weight: 400; font-display: swap; src: url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2) format('woff2'); }
.page-post { --fl: 'Post Pretendard L', 'Pretendard Variable', Pretendard, -apple-system, 'Malgun Gothic', sans-serif; --fr: 'Post Pretendard R', 'Pretendard Variable', Pretendard, -apple-system, 'Malgun Gothic', sans-serif; }
.page-post main { background: #030303; } /* 원본 페이지 바탕(검정 99%). 위젯 안쪽만 완전한 검정이다 */
.page-post main, .page-post .pm, .page-post .pf { -webkit-tap-highlight-color: transparent; } /* 원본은 휴대폰에서 눌러도 하이라이트 상자가 없다 */
.page-post .pg { display: flow-root; max-width: 1600px; margin: 0 auto; }
.page-post .blog { margin: 20px 5%; container: blog / inline-size; font-family: var(--fl); font-weight: 300; word-break: normal; }
.page-post .b-in { position: relative; padding: 0 20px 20px; background: #000; }
.pv-m .page-post .b-in { padding: 0; }

/* All Posts 줄 */
.page-post .b-bar { display: flex; align-items: center; height: 80px; margin: 0 -20px; padding: 0 20px; }
.page-post .b-bar a { font-size: 23px; line-height: 1.6; white-space: nowrap; }
.page-post .b-bar a:hover, .page-post .b-more:hover, .page-post .b-recent > header a:hover, .page-post .b-card .tx a:hover, .page-post .b-menu button:hover { color: #1a6aff; }
.pv-m .page-post .b-bar { display: none; }

/* 글이 없을 때의 안내(없는 주소, 영문 글 주소) — 글 상자 자리에 높이 450px 칸, 가운데 정렬. 위젯 폭 980px부터 큰 글자(아래 @container) */
.page-post .b-nf { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 940px; min-height: 450px; margin: 0 auto; padding: 36px 30px; background: #000; font-size: 16px; line-height: 1.5; text-align: center; }
.page-post .b-nf .t { margin-bottom: 12px; font-family: var(--fr); font-size: 24px; font-weight: 400; line-height: 34px; }
.page-post .b-nf a { position: relative; display: flex; align-items: center; height: 40px; margin-top: 18px; padding: 0 24px; background: #1a6aff; color: #000; font-size: 14px; line-height: 22px; white-space: nowrap; }
.page-post .b-nf a:hover { color: #1a6aff; } /* 원본 그대로: 올리면 글자가 바탕색과 같아져 보이지 않는다 */
.page-post .b-nf a:active::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .2); pointer-events: none; }

.page-post .b-page { display: flex; flex-direction: column; max-width: 940px; margin: 0 auto; padding-top: 20px; }
.pv-m .page-post .b-page { padding-top: 0; }

/* 글 상자. --w 본문 최대 폭, --hp 좌우 여백, --vp 위아래 여백, --sp 제목 위 간격 */
.page-post .b-post, .page-post .b-recent { --w: 740px; --hp: clamp(18px, 8vmin, 60px); --vp: clamp(32px, 8vmin, 60px); --sp: clamp(8px, 2.5vmin, 18px); --line: rgba(194, 194, 194, .75); }
.pv-m .page-post .b-post, .pv-m .page-post .b-recent { --hp: 18px; --vp: 32px; }
.page-post .b-post { border: 1px solid var(--line); background: #000; font-size: 18px; line-height: 22px; overflow-wrap: break-word; }
.pv-m .page-post .b-post { border: 0; }
.page-post .b-box { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-block: var(--vp); }
.page-post .b-side { display: flex; flex-direction: column; align-items: center; width: 100%; padding-inline: var(--hp); }
.page-post .b-col { display: flex; flex-direction: column; gap: var(--sp); width: 100%; max-width: var(--w); margin-inline: auto; }
.page-post .b-head { flex-direction: column-reverse; }
.page-post .b-post h1 { font-family: var(--fr); font-size: 40px; font-weight: 400; line-height: 50px; word-break: break-word; }
.pv-m .page-post .b-post h1 { font-size: 26px; line-height: 1.4; }
.page-post .b-meta { display: flex; align-items: center; justify-content: flex-end; }
.page-post .b-more { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.page-post .b-more svg { position: absolute; top: 3.5px; left: 9.5px; width: 19px; height: 19px; fill: currentColor; }

/* 추가 작업 메뉴 — 위치는 post.js가 버튼 바로 아래·왼쪽으로 잡는다 */
.page-post .b-pop { position: relative; }
/* will-change: 원본에서 메뉴와 "링크 복사 완료" 말풍선은 따로 합성되는 층이라 글자가 색 번짐 없이(회색조로) 그려진다. 같은 조건을 만든다 */
.page-post .b-menu { position: absolute; z-index: 900; min-width: min(240px, 100%); margin: 5px; background: #000; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .2); will-change: transform; }
.page-post .b-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 17px 25px; border: 0; background: none; color: #fff; font: inherit; font-size: 14px; line-height: 1.5; white-space: nowrap; cursor: pointer; touch-action: manipulation; }
.page-post .b-menu span { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; }
.page-post .b-menu svg { display: block; width: 100%; fill: currentColor; }

/* 본문. 블록마다 좌우 여백 = max(--hp, 남는 폭의 절반) → 넓으면 가운데 740px */
.page-post .b-body { width: 100%; --np: max(var(--hp), calc((100% - var(--w)) / 2)); --lh: 27px; }
.pv-m .page-post .b-body { --lh: 24px; }
.page-post .b-body.gap { padding-top: 14px; } /* 이미지로 시작하는 글은 위에 14px */
.page-post .b-body > * { padding-inline: var(--np); }
.page-post .b-p { font-size: 18px; line-height: var(--lh); white-space: break-spaces; }
.pv-m .page-post .b-p { font-size: 16px; }
.page-post .b-p strong { font-weight: 700; }
.page-post .b-p .b-hl, .page-post .b-p .b-bg { background-color: #ffd02f; }
.page-post .b-p .b-hl { color: #000; }
.page-post .b-p a { color: #1a6aff; }
.page-post .b-fig figure { margin: 0; }
.page-post .b-img { position: relative; overflow: hidden; outline: 0; cursor: pointer; } /* 눌러서 초점이 와도(tabindex="-1") 테두리는 없다 */
.page-post .b-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; background: center / cover no-repeat; transition: filter .8s ease-in; }
.pv-js .page-post .b-img img:not(.ok) { filter: blur(9px); }
.page-post .b-img img.ok { background-image: none !important; }
/* 링크가 걸린 이미지: 링크가 이미지 전체를 덮고, Tab으로 오면 이미지 둘레에 기본 초점 테두리. .b-img가 overflow: hidden이라 테두리는 .b-img에 그린다 */
.page-post .b-img > a { position: absolute; inset: 0; display: block; }
.page-post .b-img > a:focus-visible { box-shadow: none; }
.page-post .b-img:has(> a:focus-visible) { outline: 5px auto -webkit-focus-ring-color; outline-offset: 1px; }
.page-post .b-exp { position: absolute; z-index: 10; top: 12px; right: 12px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 30px; background: #fff; opacity: 0; pointer-events: none; cursor: pointer; }
.page-post .b-img:hover .b-exp, .page-post .b-exp:focus { opacity: 1; pointer-events: auto; }
.page-post .b-exp svg { position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; fill: #000; }
.page-post .b-fig figcaption { padding: 16px; font-size: 14px; line-height: var(--lh); text-align: center; white-space: break-spaces; }

/* 글 아래 공유 버튼 */
.page-post .b-share { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-height: 66px; padding-block: 18px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 14px; line-height: 1.5; }
.page-post .b-share > div { display: flex; flex-grow: 1; align-items: center; gap: 30px; line-height: 0; }
.page-post .b-sh { position: relative; display: block; width: 19px; height: 19px; padding: 0; border: 0; background: none; color: inherit; line-height: 0; cursor: pointer; }
.page-post .b-sh::before { content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; transform: translate(-50%, -50%); } /* 누르는 범위 36px */
.page-post .b-sh svg { width: 19px; height: 19px; fill: currentColor; }
.page-post .b-facebook { --c: #4464a3; } .page-post .b-x { --c: #55acee; } .page-post .b-linkedin { --c: #0077b5; } .page-post .b-link { --c: #1a6aff; }
.page-post .b-share .b-sh:hover svg { fill: var(--c); }
/* "링크 복사 완료" 말풍선 */
.page-post .b-tip { position: absolute; z-index: 1000; top: -35px; padding-bottom: 5px; color: #fff; font: 400 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; text-align: left; cursor: default; will-change: top, left; }
.page-post .b-tip > div { padding: 4px 12px; border: 1px solid #757575; border-radius: 3px; background: #212121; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 0 4px 0 rgba(0, 0, 0, .1); -webkit-font-smoothing: auto; } /* 이 말풍선만 원본도 글자 다듬기를 기본값으로 둔다(맥에서 조금 굵게 보인다) */
.page-post .b-tip svg { position: absolute; top: 29px; display: block; width: 12px; height: 7px; }

/* 최근 게시물 */
.page-post .b-recent { display: flex; flex-direction: column; gap: 20px; margin-top: 30px; }
.page-post .b-recent > header { display: flex; justify-content: space-between; font-size: 18px; line-height: 1.5; }
.page-post .b-recent h2 { font: inherit; }
.page-post .b-recent > header a { font-size: 14px; line-height: 1.5; }
.page-post .b-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 34px; justify-content: flex-start; }
.page-post .b-slide.cl, .page-post .b-dots { display: none; }
.page-post .b-card { position: relative; overflow: hidden; padding-top: calc(56.25% + 103px); border: 1px solid var(--line); background: #000; }
.page-post .b-card > div { position: absolute; inset: 0; display: flex; flex-direction: column; }
.page-post .b-card .th { position: relative; display: block; padding-top: 56.25%; }
/* 원본은 썸네일을 정수 픽셀 크기로 놓는다(칸보다 1px 미만 크거나 작다) */
.page-post .b-card .th img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; width: round(100%, 1px); height: round(100%, 1px); max-width: none; object-fit: cover; }
.page-post .b-card .th:active::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); pointer-events: none; }
.page-post .b-card .tx { display: flex; flex-direction: column; flex-grow: 1; padding: 24px; overflow-wrap: break-word; }
.page-post .b-card .tx a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; font-family: var(--fr); font-size: 18px; font-weight: 400; line-height: normal; }

/* 위젯 폭에 따른 배치 (원본은 폭을 내림한 정수로 비교한다) */
@container blog (width < 980px) { .page-post .b-card { max-width: 454px; } .page-post .b-slide.n3 { display: none; } }
@container blog (width >= 940px) { .page-post .b-slide.n3 { display: block; } }
@container blog (width >= 980px) {
  .page-post .b-nf { padding: 0; } .page-post .b-nf .t { max-width: 620px; font-size: 32px; line-height: 1.5; }
  .page-post .b-nf .d { max-width: 620px; } .page-post .b-nf a { margin-top: 48px; }
}
@container blog (width < 901px) { .page-post .b-post, .page-post .b-recent { --w: calc(round(down, 100cqw, 1px) - 160px); } }
@container blog (width < 747px) {
  .page-post .b-post, .page-post .b-recent { --w: 100%; --hp: 18px; --vp: 32px; }
  .page-post .b-recent > header { padding-inline: var(--hp); }
}
@container blog (width < 686px) {
  .page-post .b-share { flex-direction: column; align-items: flex-start; }
  .page-post .b-card { width: 100%; max-width: none; } .page-post .b-slide.n2 { display: none; }
}

/* 휴대폰: 최근 글은 가운데 한 장 + 양옆이 살짝 보이는 슬라이더. 넘기는 동작은 post.js(--i 몇 번째, --dx 끄는 중 이동량) */
.pv-m .page-post .b-rp { display: flex; flex-direction: column; overflow: hidden; }
/* touch-action은 원본처럼 따로 두지 않는다 — 끄는 동안 브라우저의 스크롤·당김도 함께 일어난다 */
.pv-m .page-post .b-cards { display: flex; gap: 0; margin: 0 30px; transform: translate3d(calc((var(--i, 0) + 2) * -100% + var(--dx, 0px)), 0, 0); }
.pv-m .page-post .b-cards.go { transition: transform .5s ease; }
.pv-m .page-post .b-slide, .pv-m .page-post .b-slide.cl { display: block; flex: 0 0 100%; padding: 0 6px; user-select: none; -webkit-user-drag: none; }
.pv-m .page-post .b-slide:only-child { padding: 0; }
.pv-m .page-post .b-card { border: 0; }
.pv-m .page-post .b-dots { display: flex; align-items: center; justify-content: center; gap: 6px; height: 42px; margin: 0; padding: 0; list-style: none; }
.pv-m .page-post .b-dots li { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.pv-m .page-post .b-dots li.on { background: #1a6aff; }

/* ── post.js가 body 끝에 붙이는 창들 ── */
/* 공유 창 */
.page-post .pm { position: fixed; inset: 0; z-index: 999999999; display: flex; align-items: center; justify-content: center; animation: pm-fade .2s ease-in; }
.page-post .pm-ov { position: absolute; inset: 0; background: #000; opacity: .8; }
.page-post .pm-x { position: absolute; top: 15px; right: 19px; width: 30px; height: 33px; padding: 0; border: 0; background: none; cursor: pointer; }
.page-post .pm-x svg { width: 30px; height: 30px; fill: #fff; fill-rule: evenodd; }
.page-post .pm-box { position: relative; z-index: 1; width: 452px; max-width: 100%; padding: 60px; background: #000; animation: pm-drop .2s ease-in; }
.page-post .pm-box h2 { margin-bottom: 30px; color: #000; font-family: var(--fr); font-size: 16px; font-weight: 700; line-height: 16px; text-align: center; }
.page-post .pm-box > div { display: flex; justify-content: center; gap: 38px; }
.page-post .pm .b-sh { width: 45px; height: 45px; border-radius: 50%; background: var(--c); }
.page-post .pm .b-sh svg { position: absolute; top: 11.5px; left: 13px; fill: #fff; }
.page-post .pm .b-link { --c: #333; }
.page-post .pm .b-tip { top: -105px; padding-bottom: 5px; font: 400 14px/50px var(--fr); will-change: transform; }
.page-post .pm .b-tip > div { min-width: 40px; max-width: 320px; padding: 20px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 0; background: #000; -webkit-font-smoothing: antialiased; }
.page-post .pm .b-tip i { position: absolute; top: 91px; margin: 0 5px 5px; border: solid transparent; border-width: 5px 5px 0; border-top-color: #000; }
.pv-m .page-post .pm-box { width: 100%; padding: 26px 16px; }
.pv-m .page-post .pm-box h2 { margin-bottom: 24px; line-height: 50px; }
.pv-m .page-post .pm-box > div { gap: 24px; }
@keyframes pm-fade { from { opacity: 0; } }
@keyframes pm-drop { from { opacity: 0; transform: translateY(-30%); } }

/* 이미지 확대 보기: 흰 바탕, 좌우로 넘기는 목록(스크롤 스냅) */
.page-post .pf { position: fixed; inset: 0; z-index: 100001; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); padding: 70px 0 20px; background: #fff; color: #000; }
.page-post .pf > button { position: fixed; z-index: 1001; top: 10px; display: block; padding: 0; border: 0; border-radius: 4px; background: none; font: 400 13.3333px Arial, sans-serif; cursor: pointer; }
.page-post .pf > button svg { width: 60px; height: 60px; }
.page-post .pf-fs { left: 22px; } .page-post .pf-x { right: 17px; }
.page-post .pf button:focus-visible { box-shadow: none; outline: 5px auto -webkit-focus-ring-color; }
.page-post .pf-w { position: relative; min-height: 0; }
.page-post .pf-c { height: 100%; overflow: auto hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.page-post .pf-c::-webkit-scrollbar { display: none; }
.page-post .pf ol { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; }
.page-post .pf li { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.page-post .pf li span { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; overflow: hidden; }
/* 칸의 가로세로 비는 post.js가 원본과 같게 넣는다. 파일의 비와 1px 미만 다르므로 cover로 채워 가장자리에 틈이 비치지 않게 한다 */
.page-post .pf li img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: cover; }
.page-post .pf-a { position: absolute; z-index: 1; top: 50%; width: 23px; height: 39px; padding: 0; border: 0; background: none; overflow: hidden; transform: translateY(-50%); transition: opacity .12s; cursor: pointer; }
.page-post .pf-a:disabled { visibility: hidden; }
.page-post .pf-a svg { position: absolute; top: 0; left: 0; width: 46px; height: 39px; filter: drop-shadow(0 1px .15px #b2b2b2); }
.page-post .pf .pf-a:focus-visible { outline: 2px solid #3899ec; outline-offset: 2px; }
.page-post .pf-prev { left: 20px; } .page-post .pf-next { right: 20px; } .page-post .pf-next svg { left: -23px; }
.page-post .pf-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; white-space: nowrap; }
.page-post .pf:fullscreen { padding: 0; } /* 브라우저 전체 화면에서는 위아래 여백 없이 이미지가 화면 높이를 채운다 */
.pv-m .page-post .pf { padding-top: 40px; }
.pv-m .page-post .pf-x { top: 5px; right: 20px; }
.pv-m .page-post .pf-x svg { width: 30px; height: 30px; }
.pv-m .page-post .pf-fs, .pv-m .page-post .pf-a { display: none; }

/* ---- works.css ---- */
/* Our Works — 위치·크기는 원본 Wix의 규칙을 그대로 옮긴 것이라 수치가 길다.
   구역마다 칸이 하나뿐인 그리드이고, 그 안의 상자는 폭(%)과 바깥 여백(%)으로 자리를 잡는다(여백의 %는 칸 너비 기준).
   --sf = min(창 너비, 1600px): 슬라이더·배너 구역의 높이 기준. 750px 이하는 모바일 배치. */
.page-works main { --sf: min(100vw, 1600px); }

/* 제목 */
.page-works .wt { display: grid; grid-template: minmax(25.46723vw, auto) / minmax(0, 1fr); }
.page-works .wt-in { align-self: start; justify-self: start; display: flex; flex-direction: column; align-items: flex-start; width: 59.737913820283765%; margin: 3.4107330530740936% 0 0 9.119646610614819%; }
.page-works .wt :is(h2, p) { font-weight: 400; line-height: 1.3; word-break: normal; overflow-wrap: break-word; }
.page-works .wt .wt-h { width: 41.87695860135246%; margin-bottom: 5.101984716037165%; font-size: 3.125vw; font-weight: 800; }
.page-works .wt-p { width: 99.29765242729123%; margin: 0 0 6.605640771895102% .70234757270878%; }
.page-works .wt-p p { color: #929292; font-size: 1.7341vw; font-weight: 600; line-height: 2; }
.page-works .wt .wt-s { width: 77.81763703337182%; margin-left: .70234757270878%; color: #c2c2c2; font-size: 1.57814vw; }

/* 구역 공통: 내용 폭은 1600px까지, 넘으면 가운데. 원본처럼 구역마다 불투명한 검은 바탕이 있어서(제목 구역만 투명),
   앞 구역에서 아래로 삐져나온 것(평창 구역의 작은 사진 .bu)은 다음 구역이 덮는다 */
.page-works :is(.wg, .bn) { position: relative; display: flex; flex-direction: column; background: #000; }
.page-works :is(.wg-in, .bn-in) { flex-grow: 1; display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1600px; margin-left: clamp(0px, (100% - 1600px) / 2, 100vw); }

/* 포스터 슬라이더. 원본(Wix Pro Gallery)의 구조와 동작을 그대로 따른다:
   .wg-box = 보이는 창(밖은 잘린다), .wg-view = 항목 여백(--m)만큼 사방으로 넓힌 상자, .wg-sc = 실제 가로 스크롤 상자, .wg-rail = 항목이 놓이는 띠.
   --g = 항목 한 칸의 폭(항목 + 양쪽 여백). 넓은 화면은 한 화면에 4칸이고 works.js가 정수 px로 맞춘다 */
.page-works .wg-m { display: none; }
.page-works .wg-d .wg-in { grid-template-rows: minmax(calc(.5160337 * var(--sf)), auto); }
.page-works .wg-box { position: relative; overflow: hidden; --m: 16px; --g: 25%; }
.page-works .wg-d .wg-box { align-self: start; justify-self: center; width: 94.4347644021502%; height: 541.9794370217871px; margin: 2.599365234375% .213623046875% 0 0; }
.page-works .wg-view { position: absolute; top: calc(-1 * var(--m)); left: calc(-1 * var(--m)); width: calc(100% + 2 * var(--m)); height: calc(100% + var(--m)); }
.page-works .wg-sc { width: 100%; height: 100%; overflow: scroll hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.page-works .wg-sc::-webkit-scrollbar { display: none; }
.page-works .wg-rail { position: relative; height: 100%; will-change: transform; }
.page-works .wg-g::before { content: ""; position: absolute; top: 0; left: calc(var(--i) * var(--g)); width: var(--g); height: 1px; scroll-snap-align: center; pointer-events: none; } /* 스크롤이 멈추는 자리: 칸의 가운데 */
/* 차례가 아닌 항목은 오른쪽으로 100px 밀려 있다가, 스크롤이 제 차례에 닿으면(.in — works.js) 제자리로 들어온다.
   첫 화면 항목은 처음에 모두 .in으로 그려지고(works.mjs), works.js가 켜질 때 차례가 아닌 것만 같은 0.8초 움직임으로 밀려난다 */
.page-works .wg-it { position: absolute; top: 0; left: calc(var(--i) * var(--g)); width: calc(var(--g) - 2 * var(--m)); height: calc(100% - var(--m)); margin: var(--m); overflow: hidden; border-radius: 16px; background: #aeefc5; cursor: pointer; transform: translateX(100px); transition: transform .8s cubic-bezier(.13, .78, .53, .92); }
.page-works .wg-it.in { transform: translateX(0); }
.page-works .wg-it.ld { background: none; } /* 이미지가 뜨기 전에만 바탕색이 보인다 */
.page-works .wg-box.init .wg-it { transition: none; }
/* 키보드 초점: 항목 안의 1×1px 자리(.wg-ac)가 초점을 받고, 테두리는 항목 전체에 그린다 */
.page-works :is(.wg-sc, .wg-ac):focus { outline: 0; }
.page-works .wg-ac { position: absolute; top: 0; left: 0; z-index: -1; width: 1px; height: 1px; overflow: hidden; pointer-events: none; }
.page-works .wg-it:has(.wg-ac:focus-visible)::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; box-shadow: inset 0 0 1px 2px #116dff, inset 0 0 7px 0 #fff, inset 0 0 10px -5px #116dff; pointer-events: none; }
.page-works .wg-it img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* 항목 위의 옅은 막: 마우스를 올리면 왼쪽으로 빠지며 사라진다 */
.page-works .wg-ov, .page-works .wg-ov::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.page-works .wg-ov::before { content: ""; background: rgba(0, 0, 0, .06); transition: transform .4s cubic-bezier(.3, .13, .12, 1), filter .5s ease, opacity .5s ease; }
html:not(.wk-m) .page-works .wg-d .wg-it:hover .wg-ov::before, .page-works .wg-d .wg-it.hov .wg-ov::before { opacity: 0; filter: opacity(0); transform: translateX(-100%); }
/* 화살표 */
.page-works .wg-ar { position: absolute; top: calc(50% - 17px); display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; background: #fff; opacity: .9; cursor: pointer; }
.page-works .wg-ar[hidden] { display: none; }
.page-works .wg-ar:hover { opacity: 1; }
.page-works .wg-ar.prev { left: 39px; }
.page-works .wg-ar.next { right: 39px; }
.page-works .wg-ar svg { flex: none; fill: #000; transform: scale(.534188); }
.page-works .wg-ar.prev svg { transform: scaleX(-1) scale(.534188); }

/* 프로젝트 배너 */
.page-works .bi { grid-area: 1 / 1; align-self: start; position: relative; overflow: clip; }
.page-works .bi img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } /* 그림은 표시 크기에 맞춰 미리 잘라 둔 것(works.mjs) */
.page-works .bu { grid-area: 1 / 1; align-self: end; justify-self: end; width: 27.221838386507375%; aspect-ratio: 1 / .666555574070988; margin: 0 34.45166015625% -25.851798828124974% 0; }
.page-works .bu img { width: 100%; height: 100%; object-fit: cover; }
/* 등장 효과: 15%가 화면에 들어오면(.go — works.js) 왼쪽에서 밀려 들어오며 나타난다. 시작 전에는 제자리에서 투명한 상태로 기다린다.
   html.wk-js는 페이지 첫머리의 스크립트가 붙인다 — 스크립트가 꺼진 환경에서는 효과 없이 그냥 보인다 */
@media (prefers-reduced-motion: no-preference) {
  .wk-js .page-works .bi:not(.done) { animation: wk-in 1.5s cubic-bezier(.645, .045, .355, 1) .1s backwards paused; }
  .wk-js .page-works .bi.go { animation-play-state: running; }
}
@keyframes wk-in {
  0% { opacity: 0; }
  .0001% { transform: translateX(-100%); clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); }
  100% { opacity: 1; transform: translateX(0); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}
.page-works .wsp { display: none; }

/* 포스터 확대 보기(항목을 누르면 works.js가 body 끝에 만든다). 흰 바탕에 이미지를 원본 비율로 맞춰 보여 준다 */
.page-works .wfs { position: fixed; top: 0; left: 0; z-index: 100005; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; background: #fff; color: #000; transition: opacity .8s; }
.page-works .wfs.out { opacity: 0; }
.page-works .wfs:focus { outline: 0; }
.page-works .wfs button { flex: none; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.page-works .wfs svg { display: block; overflow: visible; fill: currentColor; }
.page-works .wfs-bar { position: relative; z-index: 999; flex: none; display: flex; justify-content: space-between; height: 44px; margin-top: 30px; }
.page-works .wfs-ic { position: relative; width: 38px; height: 44px; }
.page-works .wfs-ic svg { position: absolute; top: 10px; left: 6px; width: 26px; height: 26px; transform: translateY(.25px); } /* 원본은 아이콘 글꼴이라 1/4px 아래에 그려진다 */
.page-works .wfs-ex { margin: -4px 0 0 35px; }
.page-works .wfs-x { margin-right: 30px; }
.page-works .wfs-stage { position: relative; flex: none; height: calc(100% - 148px); margin: 0 90px; }
.page-works .wfs-sl { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity .6s; }
.page-works .wfs-sl.on { z-index: 1; opacity: 1; pointer-events: auto; }
.page-works .wfs-sl img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.page-works .wfs-ar { position: absolute; top: calc(50% - 25px); z-index: 2; width: 50px; height: 50px; opacity: .9; }
.page-works .wfs-ar[hidden] { display: none; }
.page-works .wfs-ar:hover { opacity: 1; }
.page-works .wfs-ar.prev { left: -70px; }
.page-works .wfs-ar.next { right: -70px; }
.page-works .wfs-ar svg { position: absolute; top: 10px; left: 17.5px; width: 15px; height: 27px; filter: drop-shadow(0 1px .15px #b2b2b2); }
/* 초점 테두리는 키보드(Tab)로 옮겨 다닐 때만(.kb — works.js) 보인다. 원본을 잰 그대로다: 화살표·닫기 단추는 단추 상자에 그려지고,
   귀퉁이 단추 둘은 거기에 더해(전체 화면 단추는 그것만) 아이콘 둘레 46px 상자에도 그려지며 그때 아이콘이 오른쪽으로 4px 밀린다 */
.page-works .wfs button:focus-visible { box-shadow: none; }
.page-works .wfs.kb button:focus-visible, .page-works .wfs.full .wfs-ic:focus-visible { border-radius: 7px; box-shadow: inset 0 0 0 1px #fff, inset 0 0 1px 4px #116dff; }
.page-works .wfs.kb:not(.full) .wfs-ex:focus-visible { box-shadow: none; }
.page-works .wfs.kb .wfs-ic:focus-visible::after { content: ""; position: absolute; top: 1px; left: 0; width: 46px; height: 46px; border-radius: 7px; box-shadow: inset 0 0 0 1px #fff, inset 0 0 1px 4px #116dff; pointer-events: none; }
.page-works .wfs.kb:not(.full) .wfs-ic:focus-visible svg { left: 10px; }
/* 브라우저 전체 화면으로 넓혔을 때: 여백 없이 꽉 채우고 단추는 반투명한 원 안에. 단추는 70%로 흐리다가 마우스를 움직이면(.lit — works.js) 0.8초에 걸쳐 또렷해진다.
   이 상태에서는 .kb가 아니어도 초점 테두리가 보인다(위 규칙 — 키보드로 연 뒤 마우스로 전체 화면을 켰을 때) */
.page-works .wfs.full .wfs-bar { position: absolute; top: 0; left: 0; width: 100%; height: 100px; margin: 0; }
.page-works .wfs.full .wfs-ic { isolation: isolate; width: 80px; height: 80px; margin: 10px; border-radius: 50%; opacity: .7; }
.page-works .wfs.full .wfs-ic.lit { opacity: 1; transition: opacity .8s; }
.page-works .wfs.full .wfs-ic::before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; border-radius: 50%; background: #fff; opacity: .4; }
.page-works .wfs.full .wfs-ic svg { top: 27px; left: 27px; transform: translateY(-.75px); } /* 이 상태에서는 원본 아이콘이 3/4px 위에 그려진다 */
.page-works .wfs.kb.full .wfs-ic:focus-visible::after { top: 17px; left: 17px; }
.page-works .wfs.full .wfs-stage { height: 100%; margin: 0; }
.page-works .wfs.full .wfs-ar { top: calc(50% - 40px); width: 80px; height: 80px; border-radius: 50%; background: rgba(255, 255, 255, .4); }
.page-works .wfs.full .wfs-ar.prev { left: 10px; }
.page-works .wfs.full .wfs-ar.next { right: 10px; }
.page-works .wfs.full .wfs-ar svg { top: 25px; left: 32.5px; }
/* 휴대폰: 위에 뒤로 가기 띠(60px), 아래는 손가락으로 넘기는 가로 스크롤 */
.page-works .wfs-m .wfs-bar { align-items: center; height: 60px; margin: 0; background: #fff; }
.page-works .wfs-back { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; }
.page-works .wfs-back svg { width: 24.92px; height: 20px; }
.page-works .wfs-m .wfs-stage { flex: 1; display: flex; height: auto; min-height: 0; margin: 0; overflow: scroll hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.page-works .wfs-m .wfs-stage::-webkit-scrollbar { display: none; }
.page-works .wfs-m .wfs-sl { position: static; flex: none; align-items: flex-start; height: calc(100% - 140px); opacity: 1; pointer-events: auto; scroll-snap-align: center; transition: none; }

@media (max-width: 750px) {
  .page-works .wt { grid-template-rows: minmax(63.48652vw, auto); }
  .page-works .wt-in { justify-self: center; width: 83.70056970509384%; margin: 3.40985254691689% 1.9814008042895441% 0 0; }
  .page-works .wt .wt-h { width: 97.07573632538569%; margin-bottom: 3.6398990419596746%; font-size: 6.51042vw; }
  .page-works .wt-p { margin: 0 0 4.7126494600372295% .5003352667326604%; }
  .page-works .wt-p p { font-size: 3.90625vw; }
  .page-works .wt .wt-s { margin-left: .5003352667326604%; font-size: 3.12501vw; }

  /* 좁은 화면 슬라이더: 항목은 193×257px 고정, 막은 더 짙다. 마우스를 올리면 막이 걷히고 이미지가 천천히 커진다 */
  .page-works .wg-d { display: none; }
  .page-works .wg-m { display: flex; }
  .page-works .wg-m .wg-in { grid-template-rows: minmax(calc(.900407 * var(--sf)), auto); }
  .page-works .wg-m .wg-box { align-self: start; justify-self: start; width: 82.56269484097267%; height: 256.86171274668493px; margin: 7.629419191919192% 0 0 6.394675925925926%; --g: calc(193px + 2 * var(--m)); }
  .page-works .wg-m .wg-it { background: #eee; }
  .page-works .wg-m .wg-it.ld { background: none; }
  .page-works .wg-m .wg-ov::before { background: rgba(0, 0, 0, .3); transition: filter .4s ease, opacity .4s ease; }
  html:not(.wk-m) .page-works .wg-m .wg-it :is(img, .wg-ov), .page-works .wg-m .wg-it.hov :is(img, .wg-ov) { transition: transform 2.2s cubic-bezier(.14, .4, .09, .99); }
  html:not(.wk-m) .page-works .wg-m .wg-it:hover img, .page-works .wg-m .wg-it.hov img { transform: scale(1.1); }
  html:not(.wk-m) .page-works .wg-m .wg-it:hover .wg-ov, .page-works .wg-m .wg-it.hov .wg-ov { transform: scale(1.11); }
  html:not(.wk-m) .page-works .wg-m .wg-it:hover .wg-ov::before, .page-works .wg-m .wg-it.hov .wg-ov::before { opacity: 0; filter: opacity(0); }
  /* 휴대폰(html.wk-m — 같은 스크립트가 붙인다)은 여백과 화살표가 조금 작다 */
  .wk-m .page-works .wg-m .wg-box { --m: 15px; }
  .wk-m .page-works .wg-m .wg-ar { top: calc(50% - 12.5px); width: 40px; height: 40px; }
  .wk-m .page-works .wg-m .wg-ar.prev { left: 38px; }
  .wk-m .page-works .wg-m .wg-ar.next { right: 38px; }
  .wk-m .page-works .wg-m .wg-ar svg { transform: scale(.42735); }
  .wk-m .page-works .wg-m .wg-ar.prev svg { transform: scaleX(-1) scale(.42735); }

  .page-works .wsp { display: block; height: calc(.2423775 * var(--sf)); }
}