/* 뼈대: 남색 첫 화면(왼쪽 글, 오른쪽에 움직이는 홈 화면) → "하루" 구간은 왼쪽 글이 흐르고
   오른쪽 화면이 고정된 채 장면만 바뀐다. 판 위의 시각이 스크롤을 따라 하루를 지난다.
   색은 제품(admin/globals.css)과 같은 값. 움직임은 전부 "화면에서 무슨 일이 일어나는지" 설명용이다. */
:root {
  --navy: #0b1f42;
  --blue: #1d4e9b;
  --mint: #86d0ab;
  --ink: #1c2430;
  --muted: #5c6774;
  --faint: #7e8998;
  --line: #e3e7ee;
  --canvas: #f6f8fa;
  --paper: #ffffff;
  --on-dark-mute: #8ea4c4;
  --ok: #1d7a4a;
  --frame: 1160px;   /* 바깥 틀 */
  --sheet: 980px;    /* 아래쪽 읽는 구간 */
  --prose: 34rem;    /* 읽는 글 */
  --gutter: 24px;
  --fast: 150ms;     /* 누름, 상태 바뀜 */
  --med: 400ms;      /* 들어옴 */
  --slow: 900ms;     /* 선이 그려짐, 글자가 쳐짐 */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
html { background: var(--canvas); color: var(--ink); scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "SUIT Variable", "SUIT", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; text-wrap: balance; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 4px; }
.frame { max-width: var(--frame); margin-inline: auto; padding-inline: var(--gutter); }

/* ── 인트로: 접속하면 화면 전체에서 먼저 재생된다 ── */
html.intro-on { overflow: hidden; }
.splash { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--navy); transition: opacity 500ms ease, visibility 0s 500ms; }
.splash[hidden] { display: none; }
.splash.gone { opacity: 0; visibility: hidden; }
.splash video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.splash::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 31, 66, .78) 0%, rgba(11, 31, 66, .2) 60%); }
.splash p { position: absolute; z-index: 1; left: max(24px, 7vw); bottom: max(72px, 12vh); margin: 0; color: #fff; }
.splash p img { display: block; width: 40px; height: 40px; margin-bottom: 18px; }
.splash p b { display: block; font-size: clamp(32px, 4.6vw, 60px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.15; }
.splash p span { display: block; margin-top: 14px; font-size: clamp(16px, 1.6vw, 22px); color: #c9d6ea; }
.splash button { position: absolute; z-index: 1; right: 28px; bottom: 28px; padding: 10px 18px; background: rgba(11, 31, 66, .6); color: #fff; border: 1px solid rgba(255, 255, 255, .5); border-radius: 8px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.splash button:hover { background: rgba(255, 255, 255, .14); }
.splash button:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

/* ── 머리: 문의 버튼이 스크롤 내내 남는다 ── */
.top { position: sticky; top: 0; z-index: 9; background: rgba(11, 31, 66, .94); backdrop-filter: blur(8px); color: #fff; }
.top .frame { display: flex; align-items: center; gap: 28px; height: 60px; }
.mark { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; text-decoration: none; }
.mark img { width: 24px; height: 24px; }
.top nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; color: var(--on-dark-mute); }
.top nav a { text-decoration: none; }
.top nav a:hover { color: #fff; }
.act { display: inline-flex; align-items: center; height: 40px; padding-inline: 18px; background: var(--blue); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; border-radius: 8px; white-space: nowrap; transition: background-color var(--fast) ease; }
.act:hover { background: #2a62b8; }
.act:active { transform: scale(.97); }

/* ── 첫 화면: 남색 바탕. 홈 화면 창이 아래로 잘려 나간다 ── */
.hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
/* 바탕 영상(Google Flow 로 만든 사무실 아침). 글이 읽히도록 남색을 덮는다 */
.hero > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(11, 31, 66, .94) 0%, rgba(11, 31, 66, .82) 36%, rgba(11, 31, 66, .18) 74%, rgba(11, 31, 66, .08) 100%); }
.hero .frame { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: min(78vh, 720px); padding-block: 96px 72px; }
.hero .frame > div { max-width: 33rem; }
.hero .what { color: var(--mint); font-weight: 600; font-size: 15px; }
.hero h1 { font-size: clamp(34px, 4vw, 50px); letter-spacing: -0.04em; line-height: 1.14; margin-top: 14px; }
.hero .sub { margin-top: 22px; color: var(--on-dark-mute); font-size: 17px; }
.hero .go { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px; }
.hero .go .act { height: 48px; padding-inline: 24px; font-size: 16px; }

.play { height: 48px; padding-inline: 22px; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .5); border-radius: 8px; font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; transition: background-color var(--fast) ease; }
.play:hover { background: rgba(255, 255, 255, .12); }
.play:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.play span { margin-left: 6px; font-weight: 400; color: var(--on-dark-mute); }
.intro { width: min(1100px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 12px; background: var(--navy); overflow: hidden; }
.intro::backdrop { background: rgba(4, 12, 28, .8); }
.intro video { display: block; width: 100%; aspect-ratio: 16 / 9; }
.intro form { display: flex; justify-content: flex-end; padding: 10px 12px; }
.intro button { padding: 6px 14px; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .4); border-radius: 6px; font: inherit; font-size: 14px; cursor: pointer; }

/* ── 제품 화면 창: 하루 구간의 예시 화면 ── */
.win { position: relative; background: var(--canvas); color: var(--ink); border-radius: 12px; overflow: hidden; font-size: 14px; line-height: 1.5; }
.win-bar { display: flex; align-items: center; gap: 8px; height: 38px; padding-inline: 16px; background: var(--paper); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.win-bar img { width: 16px; height: 16px; }
.win-bar b { color: var(--ink); font-weight: 600; }
.win-body { padding: 18px; }
.card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.label { font-size: 13px; color: var(--muted); }
.big { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.row { display: flex; align-items: baseline; gap: 10px; padding-block: 8px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.row:first-child { border-top: 0; padding-top: 0; }
.row:last-child { padding-bottom: 0; }
.row b { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.row .r { flex: 0 0 auto; text-align: right; }
.pin { color: var(--blue) !important; font-weight: 600; font-size: 13px !important; }
.ok { color: var(--ok) !important; font-weight: 600; }
.sum { border-top: 2px solid var(--ink); margin-top: 8px; padding-top: 10px; }
.sum b { font-size: 18px; }
.bar { height: 8px; margin-top: 10px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; width: 79%; background: var(--mint); border-radius: 4px; transform-origin: left; }
.typed { display: inline-block; white-space: nowrap; }
.stamp { position: absolute; right: 18px; top: 14px; padding: 4px 12px; border: 2px solid var(--ok); border-radius: 6px; color: var(--ok); font-weight: 600; font-size: 15px; transform: rotate(-8deg); }

/* 결재선: 사람 → 사람. 사이의 선이 차례로 그려진다 */
.flow { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; align-items: center; margin-top: 10px; }
.flow li { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.flow li.done { border-color: var(--mint); }
.flow li.link { padding: 0; border: 0; height: 2px; background: var(--mint); border-radius: 0; transform-origin: left; }
.flow .who { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow .st { font-size: 13px; color: var(--muted); }
.wait::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--blue); vertical-align: 2px; }

/* 일정: 한 주 */
.week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.week div { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 6px 7px; min-height: 88px; min-width: 0; }
.week .d { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.week .e { display: block; margin-top: 4px; padding: 2px 5px; border-radius: 4px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgba(29, 78, 155, .1); color: var(--blue); }
.week .e.off { background: rgba(134, 208, 171, .28); color: var(--ok); }

/* ── 움직임: 기본 모습이 "끝난 상태"다. 장면이 켜질 때(.on) 시작 상태에서 끝 상태로 한 번 재생한다.
   그래서 움직임을 끈 환경이나 스크립트가 없는 환경에서도 끝 상태가 그대로 보인다 ── */
.on [data-a] { animation: rise var(--med) var(--ease-out) backwards; animation-delay: calc(var(--d, 0) * 1ms); }
.on [data-a="pop"] { animation-name: pop; }
.on [data-a="grow"] { animation-name: grow; animation-duration: var(--slow); }
.on [data-a="type"] { animation: type var(--slow) steps(20) backwards; animation-delay: calc(var(--d, 0) * 1ms); }
.on [data-a="stamp"] { animation-name: stamp; animation-duration: var(--fast); }
.on .wait::before { animation: wait 1.6s ease-in-out infinite; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes pop { from { opacity: 0; transform: scale(.94); } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes stamp { from { opacity: 0; transform: rotate(-8deg) scale(1.3); } }
@keyframes wait { 50% { opacity: .25; } }

/* ── 하루: 왼쪽 글이 흐르고 오른쪽 화면은 붙어 있다 ── */
.day { padding-block: 120px 40px; }
.day .frame { display: grid; grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); gap: 0 72px; }
.day-head { grid-column: 1 / -1; margin-bottom: 24px; }
.day-head h2 { font-size: 34px; color: var(--navy); }
.day-head p { margin-top: 8px; font-size: 14px; color: var(--faint); }
.steps-rail { position: relative; padding-left: 28px; }
.steps-rail::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.step { position: relative; min-height: 58vh; padding-top: 16vh; opacity: .5; transition: opacity var(--med) ease; }
.step.now { opacity: 1; }
.step::before { content: ""; position: absolute; left: -28px; top: calc(16vh + 9px); width: 12px; height: 12px; border-radius: 50%; background: var(--canvas); border: 2px solid var(--line); transition: background-color var(--fast) ease, border-color var(--fast) ease; }
.step.now::before { background: var(--blue); border-color: var(--blue); }
.step time { display: block; font-size: 15px; font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; }
.step h3 { font-size: 26px; margin-top: 6px; color: var(--navy); }
.step p { margin-top: 12px; color: var(--muted); }
.step p + p { margin-top: 8px; }
.stage { position: sticky; top: 60px; height: calc(100vh - 60px); display: grid; align-items: center; }
/* 남색 판: 지금 시각이 크게 뜨고, 그 아래 화면이 장면마다 바뀐다 */
.panel { display: grid; grid-template-rows: auto 1fr; gap: 22px; min-height: min(580px, calc(100vh - 110px)); padding: 30px 34px 38px; background: var(--navy); border-radius: 20px; }
.at { display: flex; align-items: baseline; gap: 12px; color: var(--mint); font-variant-numeric: tabular-nums; }
.at b { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.at span { font-size: 15px; font-weight: 600; color: var(--on-dark-mute); }
.scenes { display: grid; }
.scene { display: block; width: 100%; height: auto; border-radius: 12px; grid-area: 1 / 1; align-self: center; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity var(--med) var(--ease-out), transform var(--med) var(--ease-out), visibility 0s var(--med); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5); }
.scene.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* ── 되는 것 전부: 그림 없이 업무별로 묶은 목록. 왼쪽에 묶음 이름, 오른쪽에 항목 ── */
.index { background: var(--paper); border-top: 1px solid var(--line); padding-block: 96px; }
.index .frame { max-width: calc(var(--sheet) + 2 * var(--gutter)); }
.index h2 { font-size: 34px; color: var(--navy); margin-bottom: 40px; }
.grp { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 0 40px; padding-block: 22px; border-top: 1px solid var(--ink); }
.grp h3 { font-size: 20px; color: var(--navy); }
.grp dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; }
.grp dt { font-weight: 600; }
.grp dt small { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--blue); }
.grp dd { margin-top: 2px; font-size: 15px; color: var(--muted); }

/* ── 도입: 세 단계는 실제 순서라 번호를 붙이고, 위의 선이 차례대로 그려진다 ── */
.setup { padding-block: 96px 0; }
.setup .frame { max-width: calc(var(--sheet) + 2 * var(--gutter)); }
.setup h2 { font-size: 30px; max-width: 18em; color: var(--navy); }
.setup .lede { margin-top: 12px; color: var(--muted); max-width: var(--prose); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-top: 44px; counter-reset: step; }
.steps li { position: relative; padding-top: 24px; counter-increment: step; }
.steps li::after { content: ""; position: absolute; left: 0; right: -40px; top: 0; height: 2px; background: var(--blue); transform-origin: left; }
.steps li:last-child::after { right: 0; }
.steps.on li::after { animation: grow var(--slow) var(--ease-out) backwards; }
.steps.on li:nth-child(2)::after { animation-delay: 500ms; }
.steps.on li:nth-child(3)::after { animation-delay: 1000ms; }
.steps li::before { content: counter(step); display: block; color: var(--blue); font-size: 30px; font-weight: 600; line-height: 1; }
.steps h3 { font-size: 18px; margin-top: 14px; }
.steps p { margin-top: 8px; color: var(--muted); font-size: 15px; }
.setup .yours { margin-top: 40px; font-size: 15px; color: var(--muted); max-width: var(--prose); }
.setup .yours b { color: var(--ink); font-weight: 600; }

/* ── 없는 것 · 자주 묻는 것 ── */
.plain { padding-block: 96px 0; }
.plain .frame { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px 72px; max-width: calc(var(--sheet) + 2 * var(--gutter)); }
.plain h2 { font-size: 24px; }
.plain .lede { margin-top: 10px; color: var(--muted); }
.not li { padding: 12px 0; border-top: 1px solid var(--line); }
.not { margin-top: 22px; border-bottom: 1px solid var(--line); }
.not b { font-weight: 600; }
.not span { display: block; color: var(--muted); font-size: 15px; }
.qa { margin-top: 22px; }
.qa details { border-top: 1px solid var(--line); padding: 14px 0; }
.qa details:last-child { border-bottom: 1px solid var(--line); }
.qa summary { cursor: pointer; font-weight: 600; }
.qa p { margin-top: 8px; color: var(--muted); font-size: 15px; }

/* ── 맺음: 첫 화면과 같은 남색으로 닫는다 ── */
.close { margin-top: 96px; background: var(--navy); color: #fff; padding-block: 80px 48px; }
.close .frame { max-width: calc(var(--sheet) + 2 * var(--gutter)); }
.close h2 { font-size: 34px; }
.close p { margin-top: 12px; color: var(--on-dark-mute); max-width: var(--prose); }
.close .go { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 28px; }
.close .go .act { height: 48px; padding-inline: 24px; }
.close .addr { font-weight: 600; user-select: all; }
.close .who { margin-top: 64px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 14px; max-width: none; }

/* ── 좁은 화면: 화면 창이 위에 붙고 글이 그 아래로 지나간다 ── */
@media (max-width: 900px) {
  .top nav { display: none; }
  .top .frame { justify-content: space-between; }
  .hero .frame { min-height: 70vh; padding-block: 64px 48px; }
  .hero::before { background: rgba(11, 31, 66, .8); }
  .day { padding-block: 72px 0; }
  .day .frame { grid-template-columns: 1fr; }
  .day-head h2 { font-size: 26px; }
  .stage { grid-row: 2; z-index: 2; height: auto; padding-block: 10px; background: var(--canvas); align-items: start; }
  .panel { min-height: 0; padding: 14px; gap: 10px; border-radius: 14px; }
  .at b { font-size: 22px; }
  .flow { grid-template-columns: 1fr 12px 1fr 12px 1fr; }
  .flow li { padding: 8px; }
  .flow .who { font-size: 13px; }
  .flow .st { display: block; font-size: 12px; white-space: nowrap; }
  .scene { align-self: start; box-shadow: none; }
  .scene .win-body { padding: 12px; }
  .steps-rail { grid-row: 3; }
  .step { min-height: 62vh; padding-top: 10vh; }
  .step::before { top: calc(10vh + 9px); }
  .step h3 { font-size: 21px; }
  .plain .frame { grid-template-columns: 1fr; gap: 28px; }
  .index { padding-block: 64px; }
  .index h2 { font-size: 26px; margin-bottom: 28px; }
  .grp { grid-template-columns: 1fr; gap: 12px; }
  .grp dl { grid-template-columns: 1fr; gap: 12px; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .steps li::after { right: 0; }
}

/* 움직임을 줄인 환경: 이동과 재생을 끄고 끝 상태만 보여 준다. 장면 전환은 겹쳐 바뀌기만 한다 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .on [data-a], .on .wait::before, .steps.on li::after { animation: none; }
  .scene { transform: none; }
  .hero > video { display: none; }
  .act:active { transform: none; }
}