:root {
  --bg: #F4F8F7;
  --card: #FFFFFF;
  --ink: #17322F;
  --ink-soft: #4F6B67;
  --rule: #CFE0DD;
  --accent: #00847E;
  --accent-soft: #EBF6F5;
  --header-h: 60px;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font: 17px/1.7 "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
a { color: var(--accent); }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 400; background: var(--card); padding: .5rem 1rem; }
.skip:focus { left: .5rem; top: .5rem; }

.site-header {
  position: sticky; top: 0; z-index: 300;
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 60px; padding: .5rem clamp(1rem, 4vw, 3rem);
  background: rgba(244, 248, 247, .94); border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.1rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.site-header nav { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; margin-right: auto; }
.site-header nav a { color: var(--ink-soft); text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; }
.site-header nav a:hover { color: var(--ink); }
.site-header nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.lang { border: 1px solid var(--rule); border-radius: 999px; padding: .25rem .9rem; color: var(--ink); text-decoration: none; background: var(--card); white-space: nowrap; }

main { position: relative; z-index: 100; background: var(--bg); }
main > section { max-width: 1040px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem) 0; }
main > section:last-child { padding-bottom: clamp(3rem, 7vw, 5rem); }

.hero.with-art { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1rem, 4vw, 3rem); align-items: center; }
.hero .art { width: 100%; height: auto; }
.hero h1 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.22; margin: 0 0 1rem; letter-spacing: -.01em; }
.hero.small h1, .hero.small h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin: 0 0 .75rem; }
.lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 46rem; margin: 0 0 1.5rem; }
.tagline { font-size: 1.2rem; font-weight: 600; color: var(--accent); margin: 0 0 .5rem; }
.status { display: inline-block; background: var(--accent-soft); border: 1px solid var(--rule); border-radius: 8px; padding: .5rem .9rem; margin: 0; }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.btn { display: inline-block; padding: .65rem 1.3rem; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); background: var(--card); text-decoration: none; font-weight: 600; }
.btn.primary { background: var(--accent); color: #fff; }
.btn:hover { filter: brightness(.96); }

.block h2, .cta h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); line-height: 1.3; margin: 0 0 1rem; }
.block h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
.block p { margin: 0 0 .75rem; max-width: 46rem; }
.block ul { margin: 0 0 .75rem; padding-left: 1.2rem; max-width: 46rem; }
.block li { margin: .3rem 0; }
.sub { margin-top: 1.5rem !important; color: var(--ink-soft); }
.note { color: var(--ink-soft); font-size: .95rem; border-left: 3px solid var(--rule); padding-left: .8rem; }
.rep { font-weight: 600; }

.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 0; padding: 0; }
.steps li { counter-increment: step; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 1.1rem 1.2rem; margin: 0; }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; margin-bottom: .6rem; }
.steps p { margin: 0; color: var(--ink-soft); }

.types { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; padding: 0 !important; max-width: none !important; }
.types li { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: .9rem .5rem .7rem; margin: 0; text-align: center; font-weight: 600; }
.types img { display: block; width: auto; height: 120px; margin: 0 auto .5rem; }
/* 유형 이름은 한 줄로 둔다. 카드가 좁으면 이름이 낱말 중간에서 끊기므로(예: Perfectionist) 카드 폭에 맞춰 글자를 줄인다.
   15cqi 는 영어의 가장 긴 이름, 19cqi 는 한국어 다섯 글자가 카드 안에 들어가는 비율이다. */
.types .nm { display: block; container-type: inline-size; }
.types .nm > span { display: block; white-space: nowrap; font-size: clamp(.65em, 15cqi, 1em); }
:lang(ko) .types .nm > span { font-size: clamp(.65em, 19cqi, 1em); }
/* 유형 카드에 마우스를 올리면 캐릭터가 0.6초 동안 눌렸다 뛰어오르고 말풍선이 튕기듯 나타난다.
   서비스 랜딩 페이지 맨 아래 영역(#start)의 값을 그대로 옮겼다. */
.types .cw { position: relative; }
.types .jp { transform-origin: 50% 100%; }
.types .jp img { transform-origin: 50% 100%; }
.types li:hover .jp { animation: types-jump .6s cubic-bezier(.3, .7, .3, 1); }
.types .bub { position: absolute; left: 50%; bottom: 100%; margin-bottom: 6px; transform: translate(-50%, 8px) scale(.9); opacity: 0; pointer-events: none; white-space: nowrap; padding: 10px 14px; border-radius: 14px; background: #fff; border: 2px solid #E0E0E0; font-size: 14px; font-weight: 700; line-height: 1; color: #1A1A1A; transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); z-index: 5; }
.types .bub::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -7px; border: 7px solid transparent; border-top-color: #E0E0E0; }
.types li:hover .bub { opacity: 1; transform: translate(-50%, 0) scale(1); }
@keyframes types-jump {
  0% { transform: none; }
  15% { transform: scale(1.06, .92); }
  45% { transform: translateY(-36px) scale(.96, 1.05); }
  70% { transform: scale(1.05, .95); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .types li:hover .jp { animation: none; } }
/* 원본은 한 줄 말풍선이다. 카드가 좁아지는 폭에서는 말풍선이 화면 밖으로 나가지 않게 카드 폭 안에서 줄을 바꾼다. */
@media (max-width: 1100px) { .types .bub { white-space: normal; width: max-content; max-width: calc(100% + 20px); line-height: 1.25; text-align: center; } }
.screens { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 0 !important; max-width: 760px !important; }
.screens li { margin: 0; text-align: center; color: var(--ink-soft); font-size: .95rem; }
.screens img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 18px; margin-bottom: .5rem; background: var(--card); }
video.loop { display: block; width: 100%; max-width: 860px; height: auto; border: 1px solid var(--rule); border-radius: 12px; background: var(--accent-soft); margin-bottom: 1rem; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 !important; }
.chips li { background: var(--accent-soft); border: 1px solid var(--rule); border-radius: 999px; padding: .2rem .9rem; margin: 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.cards article { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 1.1rem 1.2rem; }
.cards article p { margin: 0; color: var(--ink-soft); }
.cards article ul { margin: 0; }

.scroll { overflow-x: auto; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; margin-bottom: 1rem; }
table { width: 100%; border-collapse: collapse; font-size: .97rem; }
th, td { text-align: left; vertical-align: top; padding: .7rem 1rem; border-bottom: 1px solid var(--rule); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th { color: var(--ink-soft); font-weight: 600; background: var(--accent-soft); }
tbody th { font-weight: 600; min-width: 9rem; }

.cta { text-align: left; }
.cta h2 { margin-bottom: 1.2rem; }

dl.contact { margin: 0 0 1.25rem; }
dl.contact div { display: flex; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--rule); }
dl.contact dt { min-width: 7rem; color: var(--ink-soft); }
dl.contact dd { margin: 0; font-weight: 600; }

.site-footer { position: relative; z-index: 100; background: var(--ink); color: #DCEBE8; padding: 2.25rem clamp(1rem, 4vw, 3rem) 2.5rem; font-size: .93rem; }
.site-footer dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .6rem 2rem; margin: 0 auto 1.25rem; max-width: 1040px; }
.site-footer dt { color: #9DBAB5; font-size: .82rem; }
.site-footer dd { margin: 0; }
.site-footer a { color: #9FE3DC; }
.site-footer .links, .site-footer .copy { max-width: 1040px; margin: 0 auto .4rem; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.site-footer .copy { color: #9DBAB5; }

/* 홈의 스크롤 인트로. 엔진은 레이어를 화면에 고정하고, 본문(.after-intro)이 그 위로 올라온다.
   본문이 다 덮으면 site.js 가 is-covered 를 붙여 레이어를 숨긴다. 엔진 파일은 고치지 않고 여기서 덧씌운다. */
.intro { position: relative; background: #EBF6F5; }
/* 엔진 테마. 배경색은 영상의 배경과 같아야 포스터가 이음매 없이 보인다. */
.intro.sw-root {
  --sw-bg: #EBF6F5; --sw-ink: #17322F; --sw-ink-soft: #4F6B67; --sw-accent: #00847E;
  --sw-font-display: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --sw-font-body: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
}
/* 엔진이 html 과 body 에 overflow-x: hidden 을 넣어 sticky 머리글이 풀린다. clip 은 풀지 않는다. */
html:has(.intro), html:has(.intro) body { overflow-x: clip; }
body { background: var(--bg); }
.intro .sw-sky, .intro .sw-stage, .intro .sw-copylayer { top: var(--header-h); }
.intro .sw-scrollbar { top: var(--header-h); }
.intro .sw-topbar { display: none; }
.intro.is-covered .sw-sky, .intro.is-covered .sw-stage, .intro.is-covered .sw-copylayer,
.intro.is-covered .sw-route, .intro.is-covered .sw-hint, .intro.is-covered .sw-scrollbar { visibility: hidden; }

.after-intro { z-index: 150; }
.after-intro::before { content: ""; position: absolute; left: 0; right: 0; top: -48px; height: 48px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
.after-intro:focus { outline: none; }

/* 문구 패널: 흐린 유리. 영상의 색과 형태가 비쳐 보이고, 흐림과 어두운 글자 그림자가 가독성을 지킨다.
   배경 투명도는 실제 배경 픽셀 기준 본문 줄 대비 4.5 이상이 되는 값이다(밝은 장면이라 가이드 기본값 .36 보다 진하다). */
.intro .sw-copy { padding: clamp(18px, 2vw, 28px) clamp(18px, 2.2vw, 30px); border-radius: 18px; background: rgba(11, 18, 32, var(--glass-alpha, .64)); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 18px 48px rgba(0, 0, 0, .24); -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15); }
/* 엔진이 패널에 인라인 transform 을 넣어 세로 가운데 맞춤이 풀린다. translate 속성으로 되돌린다. */
@media not all and (max-width: 860px) { .intro .sw-copy { width: min(44vw, 500px); translate: 0 -50%; } }
.intro .sw-copy__title, .intro h2 { color: #fff; letter-spacing: -0.03em; }
/* 제목 문구에 넣은 줄바꿈을 그대로 보인다(예: 장면 2 한국어). */
.intro .sw-copy__title { white-space: pre-line; }
.intro .sw-copy__body { white-space: pre-line; color: #F1F5F9; }
.intro .sw-copy__num { color: #E2E8F0; }
.intro .sw-copy__eyebrow { color: color-mix(in srgb, var(--sw-accent) 30%, #fff); }
.intro .sw-copy__num, .intro .sw-copy__eyebrow, .intro .sw-copy__title, .intro .sw-copy__body { text-shadow: 0 1px 2px rgba(11, 18, 32, .9), 0 0 6px rgba(11, 18, 32, .75), 0 0 16px rgba(11, 18, 32, .6); }
.intro .sw-copy__tags li { color: var(--ink); }
.intro .sw-btn--primary { background: #fff; color: var(--ink); }
.intro .sw-btn--ghost { color: #fff; border-color: color-mix(in srgb, #fff 45%, transparent); }
.intro .sw-route__label { background: rgba(11, 18, 32, .82); color: #fff; border-color: rgba(255, 255, 255, .28); }
/* 패널 아래 그늘: 옅게. 넓은 화면은 왼쪽에서, 좁은 화면은 아래에서. */
.intro .sw-copylayer::before { width: min(64vw, 860px); background: linear-gradient(90deg, rgba(11, 18, 32, .14) 0%, rgba(11, 18, 32, .1) 40%, rgba(11, 18, 32, .04) 68%, transparent 100%); }
@media (max-width: 860px) {
  .intro .sw-copylayer::before { width: 100%; background: linear-gradient(0deg, rgba(11, 18, 32, .28) 0%, rgba(11, 18, 32, .14) 45%, transparent 75%); }
}
/* 낮은 휴대폰: 아래쪽 패널이 머리글 밑으로 올라오지 않게 줄인다. */
@media (max-width: 860px) and (max-height: 680px) {
  .intro .sw-copy__title { font-size: clamp(1.6rem, 6.6vw, 2.2rem); }
  .intro .sw-copy__body { margin-top: 10px; }
  .intro .sw-copy__tags { margin-top: 12px; }
  .intro .sw-copy__cta { margin-top: 14px; gap: 8px; }
  .intro .sw-btn { padding: 11px 20px; }
}
@media (max-width: 860px) and (max-height: 600px) { .intro .sw-copy__tags { display: none; } }

/* 건너뛰기 링크: 모든 장면에 보이고 마지막 장면과 본문에서는 숨는다. */
.intro-skip { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 200; color: #fff; font-size: .9rem; background: rgba(11, 18, 32, .9); border: 1px solid rgba(255, 255, 255, .28); padding: .45rem .9rem; border-radius: 999px; text-decoration: none; }
.intro.is-covered .intro-skip, .intro.is-past .intro-skip { display: none; }
@media (max-width: 600px) { .intro-skip { right: 1rem; bottom: 1rem; } }

/* 이동 안내. 마우스 사용자에게는 휠과 아래 방향키 그림, 터치 사용자에게는 엔진의 안내를 계속 보인다. */
.intro-hint { display: none; }
@media (hover: hover) and (pointer: fine) {
  .intro .sw-hint { display: none; }
  .intro-hint { position: fixed; left: 50%; bottom: 1.5rem; z-index: 200; transform: translateX(-50%); display: flex; align-items: center; gap: .55rem; padding: .4rem .85rem .4rem .7rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(11, 18, 32, .9); color: #fff; font-size: .85rem; white-space: nowrap; pointer-events: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
  .intro.is-covered .intro-hint, .intro.is-past .intro-hint { display: none; }
}
/* 창이 좁으면 장면 점이 가운데까지 오므로 안내를 건너뛰기 링크 위로 옮긴다. */
@media (hover: hover) and (pointer: fine) and (max-width: 960px) {
  .intro-hint { left: auto; right: 1.5rem; bottom: 4.4rem; transform: none; }
}
/* 패널이 화면 아래를 채우는 폭에서는 안내를 머리글 밑으로 옮긴다. */
@media (hover: hover) and (pointer: fine) and (max-width: 860px) {
  .intro-hint { top: calc(var(--header-h) + 1rem); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
}
/* 좁고 낮은 창에는 둘 자리가 없다. */
@media (hover: hover) and (pointer: fine) and (max-width: 600px) and (max-height: 700px) {
  .intro-hint { display: none; }
}
.intro-hint__mouse { position: relative; width: 14px; height: 21px; border: 1.5px solid #fff; border-radius: 7px; }
.intro-hint__mouse::after { content: ""; position: absolute; left: 50%; top: 4px; width: 2px; height: 5px; margin-left: -1px; border-radius: 1px; background: #5EEAD4; }
.intro-hint__key { display: grid; place-items: center; width: 20px; height: 18px; border: 1.5px solid #fff; border-bottom-width: 3px; border-radius: 4px; }
.intro-hint__key svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .intro-hint__mouse::after { animation: intro-hint-wheel 3.2s ease-in-out infinite; }
  .intro-hint__key { animation: intro-hint-key 3.2s ease-in-out infinite; }
}
@keyframes intro-hint-wheel {
  0%, 8% { transform: translateY(0); opacity: 1; }
  32% { transform: translateY(7px); opacity: 0; }
  33%, 100% { transform: translateY(0); opacity: 1; }
}
@keyframes intro-hint-key {
  0%, 52% { transform: translateY(0); border-bottom-width: 3px; border-color: #fff; }
  60%, 70% { transform: translateY(2px); border-bottom-width: 1.5px; border-color: #5EEAD4; }
  80%, 100% { transform: translateY(0); border-bottom-width: 3px; border-color: #fff; }
}
/* 터치용 안내: 엔진은 반 화면 뒤에 안내를 흐리게 지운다. 마지막 장면 전까지 계속 보이게 한다. */
.intro .sw-hint { opacity: 1 !important; flex-direction: row; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(11, 18, 32, .9); border: 1px solid rgba(255, 255, 255, .28); color: #fff; pointer-events: none; }
.intro .sw-hint i { width: 14px; height: 21px; border-width: 1.5px; border-color: #fff; }
.intro .sw-hint i::after { top: 4px; width: 2px; height: 5px; }
@media (max-width: 600px) { .intro .sw-hint { left: 1rem; transform: none; } }

/* 메인화면 버튼: 마지막 장면의 클립이 끝까지 재생된 뒤에만 site.js 가 보인다. */
.intro-main { position: fixed; left: 50%; bottom: 1.5rem; z-index: 210; transform: translateX(-50%); display: flex; align-items: center; gap: .55rem; padding: .7rem 1.2rem .7rem 1rem; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: .95rem; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: 0 10px 30px rgba(11, 18, 32, .45); }
.intro-main[hidden] { display: none; }
.intro-main:hover { background: var(--accent-soft); }
.intro-main svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.intro-main .intro-main__down { width: 14px; height: 14px; }
.intro.is-end .intro-hint, .intro.is-end .sw-hint, .intro.is-end .intro-skip { display: none; }
.intro.is-covered .intro-main { display: none; }
@media (prefers-reduced-motion: no-preference) { .intro-main { animation: intro-main-in .45s ease-out; } }
@keyframes intro-main-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (max-width: 640px) {
  body { font-size: 16px; }
  /* 좁은 화면에서는 머리글이 두 줄이 된다. 첫 줄에 상호와 언어 전환, 둘째 줄에 메뉴. */
  .site-header { flex-wrap: wrap; gap: .2rem .6rem; padding-top: .45rem; padding-bottom: .25rem; }
  .site-header nav { order: 3; width: 100%; gap: .1rem 1rem; margin-right: 0; }
  .brand { margin-right: auto; }
  dl.contact div { flex-direction: column; gap: .1rem; }
  .hero.with-art { grid-template-columns: 1fr; }
  .hero .art { max-width: 340px; margin: 0 auto; }
  .types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  .site-header, .intro, .skip { display: none; }
}