:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --ink: #111112;
  --muted: #5f6368;
  --line: #e7e7e7;
  --tint: #f7f7f7;
  --accent: #111112;
  --on-accent: #ffffff;
  --step-line: #cfcfcf;
  --phone-edge: #111112;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0e0f;
  --surface: #1a1a1c;
  --ink: #f4f4f5;
  --muted: #a6a6ab;
  --line: #2b2b2e;
  --tint: #141416;
  --accent: #f4f4f5;
  --on-accent: #0e0e0f;
  --step-line: #3e3e42;
  --phone-edge: #3e3e42;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; scrollbar-width: none; }
html:has(.ask[open]) { overflow: hidden; overscroll-behavior: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; word-break: keep-all;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }

/* 버튼 */
.pill { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; height: 60px; padding: 0 34px; border-radius: 999px; font-size: 19px; font-weight: 600; text-decoration: none; }
.pill.sm { height: 44px; padding: 0 22px; font-size: 15px; }
.pill { border: 0; font-family: inherit; cursor: pointer; }
.pill.solid { background: var(--accent); color: var(--on-accent); }
.pill.solid:hover { opacity: .82; }
.pill.line { border: 1.5px solid var(--ink); color: var(--ink); background: var(--surface); }
.pill.line:hover { background: var(--tint); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* 문의 창 */
.ask { width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 20px; background: var(--surface); color: var(--ink); }
.ask { scrollbar-width: none; overscroll-behavior: none; }
.ask::-webkit-scrollbar { display: none; }
.ask::backdrop { background: rgb(0 0 0 / .5); }
.ask form { position: relative; display: grid; gap: 10px; padding: 20px 32px; }
.ask h2 { outline: none; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.ask-lead { margin-top: -8px; font-size: 15px; color: var(--muted); }
.ask label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.ask input:not([type=checkbox], [type=radio]), .ask textarea, .ask select { width: 100%; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; font-weight: 400; resize: vertical; }
.ask input:not([type=checkbox], [type=radio]):focus, .ask textarea:focus, .ask select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ask-consent input:focus { outline: none; }
.ask ::placeholder { color: var(--muted); }
/* 지원 브라우저에서는 입력칸 아래로 열림. 미지원이면 기존 메뉴로 표시 */
.ask select, .ask select::picker(select) { appearance: base-select; }
.ask select::picker(select) { margin-top: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 12px 32px rgb(0 0 0 / .14); }
.ask option { padding: 8px 10px; border-radius: 8px; font-size: 15px; }
.ask option:hover { background: var(--tint); }
.ask option::checkmark { display: none; }
.ask b { color: var(--ink); font-weight: 700; }
.ask-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ask fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.ask legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.ask .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ask label.chip { display: block; }
.chip input { position: absolute; opacity: 0; }
.chip span { display: block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color .15s, color .15s; }
.chip input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ask .ask-trap { position: absolute; left: -9999px; width: 1px; }
.ask label.ask-consent { grid-template-columns: auto 1fr; align-items: start; gap: 10px; font-weight: 500; }
.ask-consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.ask-consent small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--muted); }
.ask-send { width: 100%; }
.ask-send:disabled { opacity: .5; cursor: default; }
.ask-status:empty { display: none; }
.ask-status { font-size: 14px; text-align: center; color: var(--muted); }
.ask-close { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.ask-close svg { width: 20px; height: 20px; fill: currentColor; }


/* 상단 */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 20; background: transparent; transition: background .2s, box-shadow .2s; }
.top.solid { background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.top-in { display: flex; align-items: center; gap: 12px 40px; height: 72px; max-width: 1368px; margin: 0 auto; padding: 0 24px; }
.label { display: block; color: var(--ink); }
.label svg { display: block; width: auto; height: 24px; }
.theme-btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.theme-btn svg { width: 22px; height: 22px; fill: currentColor; }
.theme-btn .sun, [data-theme="dark"] .theme-btn .moon { display: none; }
[data-theme="dark"] .theme-btn .sun { display: block; }
.top nav { display: flex; gap: 32px; margin-right: auto; }
.theme-btn + .pill { margin-left: -32px; }
.top nav a { text-decoration: none; color: var(--muted); font-size: 16px; font-weight: 500; }
.top nav a:hover { color: var(--ink); }

/* 메뉴로 이동하면 섹션 위 여백 일부를 넘겨 제목과 내용이 한 화면에 들어오게 함 */
#process, #faq { scroll-margin-top: -64px; }
#cases { scroll-margin-top: -118px; }

/* 첫 화면 */
.hero { position: relative; display: flex; align-items: center; justify-content: center; height: 100dvh; min-height: 692px; background: var(--bg); text-align: center; overflow: hidden; }
.hero-copy { position: relative; z-index: 1; padding: 72px 24px 0; }
.hero h1 { font-size: clamp(38px, min(5.4vw, 9vh), 76px); line-height: 1.2; font-weight: 800; letter-spacing: -0.03em; }
.lead { margin-top: 18px; font-size: clamp(17px, 1.6vw, 22px); color: var(--muted); }
.biz { margin-bottom: 12px; font-size: 15px; font-weight: 600; color: var(--muted); }
/* 상단 메뉴와 겹치지 않게 위쪽만 흐리게 지움 */
.ring-box { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 64px, #000 128px); mask-image: linear-gradient(to bottom, transparent 64px, #000 128px); }
.ring { will-change: rotate; animation: ring-spin 80s linear infinite; position: absolute; left: 50%; top: calc(50% + 36px); width: clamp(640px, max(68vw, 116vh), 1400px); aspect-ratio: 1; translate: -50% -50%; z-index: 0; overflow: visible; }
.ring text { font-size: 92px; font-weight: 900; fill: var(--accent); }

/* 화면 틀 */
.win { position: absolute; overflow: hidden; background: #fff; border-radius: 14px; box-shadow: 0 22px 48px rgba(16, 19, 26, .24); }
.win img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.phone { position: absolute; aspect-ratio: 9 / 18; overflow: hidden; background: #fff; border: 7px solid var(--phone-edge); border-radius: 30px; box-shadow: 0 22px 48px rgba(16, 19, 26, .28); }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* 섹션 머리 */
.head { text-align: center; padding: 0 24px; }
.head h2 { font-size: clamp(34px, 4.8vw, 64px); line-height: 1.25; font-weight: 800; letter-spacing: -0.03em; }
.head p { margin-top: 18px; font-size: clamp(17px, 1.6vw, 22px); color: var(--muted); }

/* 작업 사례: 틀 없이 글과 화면을 번갈아 놓음 */
.cases { padding: 150px 24px 170px; overflow-x: clip; }
.case-list { display: flex; flex-direction: column; gap: clamp(120px, 14vw, 200px); max-width: 1320px; margin: 56px auto 0; }
.case { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(56px, 13vw, 190px); align-items: center; }
.case:nth-child(even) { grid-template-columns: 7fr 5fr; }
.case:nth-child(even) .case-text { order: 2; }
.kind { font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--accent); }
.case h3 { margin-top: 10px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.25; font-weight: 800; letter-spacing: -0.025em; }
.when { margin: 10px 0 18px; font-size: 15px; font-weight: 600; color: var(--muted); }
.desc { display: grid; gap: 6px; }
.desc li { position: relative; padding-left: 14px; }
.desc li::before { content: ""; position: absolute; left: 0; top: .72em; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.tags { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--ink); }
.tag { padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .35s ease; }
@media (hover: hover) { .tag:hover { background-size: 100% 1.5px; } }
.note { margin-top: 8px; font-size: 14px; color: var(--muted); }
.tile { display: block; position: relative; aspect-ratio: 16 / 11.4; container-type: inline-size; }
.tile[href] { text-decoration: none; }
.tile .win.a { left: 0; top: 0; width: 100%; aspect-ratio: 16 / 10; }
/* 폰 공통: 실제 화면 비율을 쓰고 상단 안전 영역만 살짝 비움 */
.tile .phone { aspect-ratio: 390 / 830; padding-top: 4%; border-width: max(2px, .66cqw); border-radius: 5cqw; background: #fff; }
.tile .phone::before { content: ""; position: absolute; top: 1.5%; left: 50%; width: 28%; height: 3%; transform: translateX(-50%); border-radius: 99px; background: #12151b; }
.tile .phone img { height: 100%; }
.tile .phone.m { left: -8%; bottom: -12%; width: 29%; }
.case:nth-child(even) .tile .phone.m { left: auto; right: -8%; }
.tile.phones { aspect-ratio: 16 / 12; }
.tile .phone.a { left: 3%; top: 0; width: 34%; transform: rotate(-4deg); }
.tile .phone.b { left: 42%; top: 7%; width: 34%; transform: rotate(4deg); }

/* 링크가 있는 카드 위에서는 커서가 얇은 화살표로 바뀜. 배경색에 따라 색이 반전됨 */
.tile .win, .tile .phone { transition: scale .6s cubic-bezier(.2, .7, .2, 1); }
.cursor-arrow {
  position: fixed; left: 0; top: 0; z-index: 30; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  pointer-events: none; opacity: 0;  transition: opacity .15s;
}
.cursor-arrow path { fill: none; stroke: #fff; stroke-width: 3.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .35s ease-out; }
.arrow-on .tile { cursor: none; }
.cursor-arrow.on { opacity: 1; mix-blend-mode: exclusion; }
.cursor-arrow.on path { stroke-dashoffset: 0; }
@media (hover: hover) {
  .tile:hover .win, .tile:hover .phone { scale: 1.05 !important; } /* GSAP이 인라인 scale: none을 남김 */
}

/* 걱정과 진행 방식 */
.worry { background: var(--tint); padding: 150px 24px; }
.worries { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1180px; margin: 64px auto 0; }
.worries li { display: flex; flex-direction: column; align-items: center; gap: 14px; background: var(--surface); border-radius: 20px; padding: 28px 20px 32px; text-align: center; font-size: 19px; font-weight: 700; line-height: 1.45; }
.face { width: 104px; height: 104px; overflow: visible; border-radius: 50%; box-shadow: 0 8px 12px -5px rgb(0 0 0 / .2); }
.face .brow { fill: none; stroke: #5a2d12; stroke-width: 9; stroke-linecap: round; }
.face .mouth { fill: none; stroke: #6b3415; stroke-width: 6.5; stroke-linecap: round; }
.head.after { margin-top: 130px; }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 20px; max-width: 1180px; margin: 64px auto 0; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding-top: 52px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.steps li::before { content: counter(step); position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 700; box-shadow: 0 0 0 6px var(--tint); }
.steps li:not(:last-child)::after { content: ""; position: absolute; top: 16px; left: 50%; right: calc(-50% - 20px); height: 2px; transform: scaleX(var(--draw, 1)); transform-origin: left; background: var(--step-line); }
.steps strong { font-size: 19px; }
.steps span { font-size: 15px; color: var(--muted); }

/* 자주 묻는 질문 */
.faq { padding: 150px 24px; }
.qa { max-width: 860px; margin: 64px auto 0; border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { cursor: pointer; padding: 24px 12px; font-size: 19px; font-weight: 700; }
.qa details p { padding: 0 12px 24px; color: var(--muted); }

@media (max-width: 960px) {
  .top nav { display: none; }
  .label { margin-right: auto; }
  .top-in { gap: 8px; }
  .ask form { padding: 24px 20px; }
  .ask-row { grid-template-columns: 1fr; }
  .theme-btn + .pill { margin-left: 0; }
  .top-in { justify-content: space-between; padding: 0 20px; }
  .worries { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 0; max-width: 520px; }
  .steps li { padding: 0 0 30px 54px; align-items: flex-start; text-align: left; }
  .steps li::before { left: 0; transform: none; }
  .steps li:not(:last-child)::after { top: 16px; bottom: -16px; left: 16px; right: auto; width: 2px; height: auto; transform: scaleY(var(--draw, 1)); transform-origin: top; }
  .case, .case:nth-child(even) { grid-template-columns: 1fr; gap: 36px; }
  .case:nth-child(even) .case-text { order: 0; }
  .tile .phone.m { left: -1%; bottom: -8%; width: 32%; }
  .case:nth-child(even) .tile .phone.m { right: -1%; }
}
@media (max-width: 640px) {
  .hero-copy { padding: 72px 20px 0; }
  .ring { width: 122vw; }
  .lead { max-width: 310px; margin-inline: auto; font-size: 16px; text-wrap: balance; }
  .cases, .worry, .faq { padding-top: 96px; padding-bottom: 96px; }
  .worries { grid-template-columns: 1fr; }
}

/* 테마 전환: 새 화면이 옛 화면 위로 서서히 덮임. 기본값인 plus-lighter는 전환 중에 화면이 밝게 번쩍임 */
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: theme-fade .45s ease; }
@keyframes theme-fade { from { opacity: 0; } }

/* 첫 화면 등장은 CSS로 처리해 스크립트를 기다리지 않음 */
@keyframes hero-in { from { opacity: 0; scale: .96; } }
@keyframes ring-in { from { opacity: 0; } }
@keyframes ring-spin { to { rotate: 360deg; } }
.biz, .hero h1, .lead { animation: hero-in .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero h1 { animation-delay: .08s; }
.lead { animation-delay: .16s; }
.ring-box { animation: ring-in 1.2s .15s both; }

/* 문의 창: 열 때 살짝 커지며 나타나고, 닫을 때 반대로 사라짐 */
.ask { opacity: 0; scale: .96; transition: opacity .25s ease, scale .25s cubic-bezier(.2, .7, .2, 1), overlay .25s allow-discrete, display .25s allow-discrete; }
.ask[open] { opacity: 1; scale: none; } /* 1이면 모달이 fixed 기준이 되어 1Password 메뉴가 밀리고 잘림 */
@starting-style { .ask[open] { opacity: 0; scale: .96; } }
.ask::backdrop { background: rgb(0 0 0 / 0); transition: background-color .25s ease, overlay .25s allow-discrete, display .25s allow-discrete; }
.ask[open]::backdrop { background: rgb(0 0 0 / .5); }
@starting-style { .ask[open]::backdrop { background: rgb(0 0 0 / 0); } }

/* 404: 표정이 두리번거림 */
.lost { display: grid; place-content: center; justify-items: center; gap: 12px; min-height: 100dvh; padding: 96px 24px 48px; text-align: center; }
.lost .face { width: 168px; height: 168px; margin-bottom: 16px; animation: lost-float 2.4s ease-in-out infinite alternate; }
.lost .face-body, .lost .eye { transform-box: fill-box; transform-origin: center; }
.lost .face-body { animation: lost-tilt 3s ease-in-out infinite alternate; }
.lost .eye { animation: lost-blink 4.2s linear infinite; }
.lost .pupil { animation: lost-look 3.6s ease-in-out infinite; }
.lost .brow-r { animation: lost-brow 3.6s ease-in-out infinite; }
.lost-code { font-size: 15px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.lost h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.03em; }
.lost-text { font-size: 17px; color: var(--muted); }
.lost .pill { margin-top: 20px; text-decoration: none; }
@keyframes lost-float { to { translate: 0 -12px; } }
@keyframes lost-tilt { from { rotate: -5deg; } to { rotate: 5deg; } }
@keyframes lost-blink { 0%, 94%, 100% { scale: 1 1; } 97% { scale: 1 .08; } }
@keyframes lost-look { 0%, 100% { translate: 0 0; } 25%, 40% { translate: -9px -2px; } 65%, 80% { translate: 8px 1px; } }
@keyframes lost-brow { 0%, 100% { translate: 0 0; } 25%, 40% { translate: 0 -7px; } }