/* ═══════════════════════════════════════════
   Firecrawl식 테마 (2026-11-10) — home.css 다음에 불러온다 (메인 · 서비스 자세히)
   연회색 바탕 · 양옆 세로선 틀 · 고정폭 글꼴 섹션 띠 · 칸으로 나뉜 카드 · 코드 창 · ASCII 글자 그림
   포인트 컬러는 파랑 하나. 이 파일과 fc.js 대신 glass.css/glass.js를 걸면 글래스 버전으로 돌아간다.
   ═══════════════════════════════════════════ */
html { background: #f9f9f9; }
body.light {
  --blue: #2b5cff; --blue-d: #1f4ae6; --blue-soft: rgba(43, 92, 255, .08);
  --ink: #262626; --ink2: #5c5c5c; --ink3: #a1a1a1; --ln: #e8e8e8; --ln2: #dcdcdc; --l: #e8e8e8;
  --soft: #f3f3f3; --soft2: #ececec; --acc: var(--blue); --acc-soft: var(--blue-soft); --okc: var(--blue);
  --mono: "Geist Mono", "Pretendard Variable", Pretendard, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fw: min(1180px, calc(100% - 32px));
  background: #f9f9f9; color: var(--ink);
}
body.light ::selection { background: rgba(43, 92, 255, .18); }
.light main, .light .hf { position: relative; z-index: 1; }

/* ── 양옆 세로선 ── */
.fc-frame { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.fc-frame::before, .fc-frame::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--l); }
.fc-frame::before { left: max(16px, calc(50% - 590px)); }
.fc-frame::after { right: max(16px, calc(50% - 590px)); }

/* ── 맨 위 알림 띠 ── */
.fc-ann { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; width: var(--fw); margin: 12px auto 0; padding: 10px 16px; border-radius: 10px; background: var(--blue); color: #fff; font-size: 14px; text-decoration: none; text-align: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.fc-ann u { text-underline-offset: 3px; }
.fc-ann b { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.fc-ann:hover b { text-decoration-thickness: 2px; }

/* ── 상단바 ── */
body.light.home .lp-nav { position: sticky; inset: auto; top: 0; }
body.light .lp-nav, body.light .lp-nav.scrolled { background: rgba(249, 249, 249, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--l); margin-top: 12px; }
body.light .nav-in { height: 72px; }
body.light .lp-links > a, body.light .nav-drop-btn { border-radius: 8px; color: var(--ink); font-weight: 500; }
body.light .lp-links > a:hover, body.light .nav-drop-btn:hover, body.light .lp-links > a.active, body.light .nav-drop.active > .nav-drop-btn { background: #efefef; color: var(--ink); }
body.light .nav-menu { border-radius: 14px; border: 1px solid var(--l); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .18); }
body.light .nav-menu a { border-radius: 10px; }
body.light .nav-menu a:hover, body.light .nav-menu a.current { background: #f5f5f5; }
body.light .nm-ic { color: var(--blue); background: var(--blue-soft); border-radius: 9px; }
body.light .nav-menu a.current .nm-ic { color: #fff; background: var(--blue); }
body.light .lp-nav .btn-primary { border-radius: 10px; background: var(--blue); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 14px -8px rgba(43, 92, 255, .8); }
body.light .lp-nav .btn-primary:hover { background: var(--blue-d); }
body.light .menu-btn { border-radius: 10px; border-color: var(--l); }

/* ── 버튼 ── */
.light .btn-dark, .light .btn-white { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 10px; border: 0; font-size: 15px; font-weight: 600; color: #fff; background: var(--blue); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .08), 0 8px 18px -8px rgba(43, 92, 255, .75); transition: background .2s, transform .15s, box-shadow .2s; }
.light .btn-dark:hover, .light .btn-white:hover { background: var(--blue-d); transform: none; }
.light .btn-dark:active, .light .btn-white:active, .fc-btn2:active, .fc-ask button:active { transform: scale(.97); }
.light .btn-line, .light .btn-wline, .fc-btn2 { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 10px; border: 0; font-size: 15px; font-weight: 500; color: var(--ink); background: #ececec; text-decoration: none; transition: background .2s, transform .15s; }
.light .btn-line:hover, .light .btn-wline:hover, .fc-btn2:hover { background: #e2e2e2; }
.fc-btn2 { padding: 7px 12px 7px 7px; }
.fc-stack { display: flex; }
.fc-stack img { width: 28px; height: 28px; padding: 5px; margin-left: -8px; border-radius: 50%; background: #fff; border: 1.5px solid #ececec; transition: margin .25s var(--ease); }
.fc-stack img:first-child { margin-left: 0; }
.fc-btn2:hover .fc-stack img { margin-left: -3px; }
.fc-btn2:hover .fc-stack img:first-child { margin-left: 0; }
.fc-btn2 .chev { width: 15px; height: 15px; color: var(--ink3); transition: transform .2s; }
.fc-btn2:hover .chev { transform: translateX(2px); }

/* ── 글자 강조: 파랑 단색 ── */
.light .s h2 em, .light .sx h2 em, .light .sv-hero h1 em, .light h1 em, .light h2 em, .light .s.dark h2 em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--blue); -webkit-text-fill-color: var(--blue); }

/* ═══ HERO ═══ */
.light .fc-hero { min-height: 0; display: block; padding: 0; overflow: hidden; position: relative; }
.fc-grid { position: absolute; left: 0; right: 0; top: 0; height: 520px; pointer-events: none;
  background-image: radial-gradient(circle, #d6d6d6 1.4px, transparent 1.6px), linear-gradient(var(--l) 1px, transparent 1px), linear-gradient(90deg, var(--l) 1px, transparent 1px);
  background-size: 101px 101px; background-position: calc(50% + 50px) 50px, center 0, calc(50% - 0px) 0;
  -webkit-mask-image: linear-gradient(#000 55%, transparent 98%); mask-image: linear-gradient(#000 55%, transparent 98%); }
.fc-tag { position: absolute; font-family: var(--mono); font-size: 12px; color: #c4c4c4; letter-spacing: .04em; white-space: pre; }
.fc-tag.t1 { left: max(28px, calc(50% - 570px)); top: 22px; }
.fc-tag.t2 { right: max(28px, calc(50% - 570px)); top: 22px; }
.fc-tag.t3 { left: max(28px, calc(50% - 570px)); top: 470px; }
.fc-tag.t4 { right: max(28px, calc(50% - 570px)); top: 470px; }
.fc-star { position: absolute; top: 79px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--l); background: #f9f9f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.6 5.4 4.6 9.4 10 10-5.4.6-9.4 4.6-10 10-.6-5.4-4.6-9.4-10-10 5.4-.6 9.4-4.6 10-10z' fill='%232b5cff'/%3E%3C/svg%3E") center / 20px no-repeat; animation: fcTwinkle 4s ease-in-out infinite; }
.fc-star.s1 { left: calc(50% - 22px - 354px); }
.fc-star.s2 { left: calc(50% - 22px + 354px); animation-delay: 2s; }
@keyframes fcTwinkle { 0%, 100% { background-size: 20px; } 50% { background-size: 14px; } }
.fc-sq { position: absolute; width: 12px; height: 12px; background: #e0e0e0; animation: fcBlink 3s steps(1) infinite; }
.fc-sq.q1 { left: calc(50% - 6px - 454px); top: 145px; }
.fc-sq.q2 { left: calc(50% - 6px + 555px); top: 44px; animation-delay: 1s; }
.fc-sq.q3 { left: calc(50% - 6px + 252px); top: 347px; animation-delay: 2s; }
@keyframes fcBlink { 50% { opacity: 0; } }
.fc-ascii { display: block; pointer-events: none; }
.fc-asc-l, .fc-asc-r { position: absolute; top: 380px; width: 300px; height: 180px; z-index: 1; }
.fc-asc-l { left: max(20px, calc(50% - 575px)); }
.fc-asc-r { right: max(20px, calc(50% - 575px)); transform: scaleX(-1); }

.fc-hero-in { position: relative; z-index: 2; width: var(--fw); margin: 0 auto; padding: 112px 0 0; text-align: center; }
.fc-top-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 999px; border: 1px solid var(--l); background: #fff; font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: none; transition: border-color .2s; }
.fc-top-pill:hover { border-color: var(--ln2); }
.fc-top-pill i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; }
.fc-top-pill i svg { width: 11px; height: 11px; transition: transform .2s; }
.fc-top-pill:hover i svg { transform: translateX(1px); }
.light .fc-hero .hx-title { margin: 22px 0 18px; white-space: normal; font-size: clamp(36px, 5.3vw, 70px); font-weight: 600; letter-spacing: -.045em; line-height: 1.1; color: var(--ink); }
.light .fc-hero .hx-title .hx-w:last-child { background: none; color: var(--blue); -webkit-text-fill-color: var(--blue); padding-bottom: .04em; }
.light .fc-hero .hx-lead { max-width: 640px; margin: 0 auto; font-size: clamp(16px, 1.35vw, 18px); line-height: 1.7; color: var(--ink2); }
.light .fc-hero .hx-btns { margin-top: 28px; gap: 10px; }

/* 질문 입력창 */
.fc-ask { width: min(560px, 100%); margin: 36px auto 0; text-align: left; border-radius: 14px; border: 1px solid var(--l); background: #fff; box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .22); transition: border-color .2s, box-shadow .2s; }
.fc-ask:focus-within { border-color: rgba(43, 92, 255, .45); box-shadow: 0 0 0 4px rgba(43, 92, 255, .1), 0 24px 50px -28px rgba(0, 0, 0, .22); }
.fc-ask input { display: block; width: 100%; padding: 18px 18px 16px; border: 0; border-bottom: 1px solid #f0f0f0; outline: 0; background: none; font: inherit; font-size: 15.5px; color: var(--ink); border-radius: 14px 14px 0 0; }
.fc-ask input::placeholder { color: var(--ink3); }
.fc-ask-b { display: flex; align-items: center; gap: 10px; padding: 9px 9px 9px 16px; }
.fc-ask-ic svg { width: 17px; height: 17px; color: var(--ink2); }
.light .fc-ask-b small { font-size: 12.5px; font-family: var(--mono); color: var(--ink3); }
.fc-ask button { margin-left: auto; padding: 8px 16px; border: 0; border-radius: 8px; font-size: 14px; font-weight: 600; color: #fff; background: var(--blue); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 14px -8px rgba(43, 92, 255, .8); transition: background .2s, transform .15s; }
.fc-ask button:hover { background: var(--blue-d); }

/* 측정 장면: 실제 AI 채팅 화면처럼 (낮고 촘촘하게) */
.fc-demo { position: relative; z-index: 2; width: min(980px, calc(100% - 32px)); margin: 64px auto 0; padding: 0 8px; border: 1px solid var(--l); border-bottom: 0; border-radius: 16px 16px 0 0; background: rgba(255, 255, 255, .5); text-align: left; }
.fc-demo-top { display: flex; align-items: flex-end; gap: 7px; height: 42px; padding: 0 8px; }
.fc-demo-top > i, .fc-chrome > i { align-self: center; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #d6d6d6; }
.fc-tabs2 { display: flex; gap: 2px; margin-left: 12px; }
.fc-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 8px; border-radius: 9px 9px 0 0; border: 1px solid transparent; border-bottom: 0; font-size: 12.5px; font-weight: 500; color: var(--ink3); transition: background .3s, color .3s; }
.fc-tab img { opacity: .45; transition: opacity .3s; }
.fc-tab.on { color: var(--ink); background: #fff; border-color: var(--l); }
.fc-tab.on img { opacity: 1; }
.fc-demo-top em { align-self: center; margin-left: auto; padding: 3px 10px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--blue); background: var(--blue-soft); }
.fc-demo-body { display: grid; grid-template-columns: 1fr 250px; height: 292px; border: 1px solid var(--l); border-bottom: 0; border-radius: 12px 12px 0 0; background: #fff; overflow: hidden; }
.fc-chat { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px 26px 14px; }
.fc-thread { flex: 1; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.fc-u { align-self: flex-end; max-width: 78%; }
.light .fc-u p { padding: 9px 15px; border-radius: 18px 18px 4px 18px; background: #f2f2f2; font-size: 14.5px; color: var(--ink); }
.fc-a { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.fc-av { width: 28px; height: 28px; padding: 5px; border-radius: 50%; border: 1px solid var(--l); background: #fff; }
.fc-a-body { min-width: 0; padding-top: 3px; }
.light .fc-text { min-height: 72px; font-size: 14.5px; line-height: 1.7; color: #3a3a3a; }
.fc-text mark { padding: 1px 4px; border-radius: 4px; font-weight: 700; color: var(--blue); background: var(--blue-soft); }
.fc-text.typing::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; vertical-align: 1px; background: var(--ink); animation: blink 1s steps(1) infinite; }
.fc-srcs { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; margin-top: 8px; }
.fc-srcs span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: #f2f2f2; font-size: 12px; color: var(--ink2); animation: popIn .35s var(--ease) both; animation-delay: var(--dl, 0s); }
.fc-srcs span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c4c4c4; }
.fc-srcs span.me { color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px rgba(43, 92, 255, .3); }
.fc-srcs span.me::before { background: var(--blue); }
.fc-composer { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 7px 7px 7px 18px; border-radius: 999px; border: 1px solid var(--l); box-shadow: 0 4px 14px -10px rgba(0, 0, 0, .25); }
.light .fc-composer span { flex: 1; font-size: 13.5px; color: var(--ink3); }
.fc-composer i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; }
.fc-composer svg { width: 14px; height: 14px; transform: rotate(-90deg); }
.fc-meter { position: relative; display: flex; flex-direction: column; padding: 18px 18px 16px; border-left: 1px solid var(--l); background: #fafafa; }
.fc-meter-h { display: flex; align-items: center; gap: 8px; }
.fc-meter-h img { border-radius: 5px; }
.fc-meter-h b { font-size: 13px; font-weight: 600; }
.fc-run { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--ink3); }
.fc-meter dl { margin: 16px 0 0; display: grid; gap: 8px; }
.fc-meter dl div { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--l); background: #fff; }
.fc-meter dt { font-size: 12.5px; color: var(--ink2); }
.fc-meter dd { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink3); }
.fc-meter dd.y { color: var(--blue); animation: popIn .35s var(--ease) both; }
.fc-meter dd.n { color: var(--ink); animation: popIn .35s var(--ease) both; }
.fc-done { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; border: 1px solid var(--l); background: #fff; font-size: 12px; font-weight: 500; color: var(--ink); }
.fc-done i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #dcdcdc; border-top-color: var(--blue); animation: spin .8s linear infinite; }
.fc-done.ok i { border: 0; animation: none; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
.fc-done.ok { animation: popIn .35s var(--ease); }

/* AI 6곳 띠 */
.fc-logos { position: relative; z-index: 2; border-top: 1px solid var(--l); border-bottom: 1px solid var(--l); background: #f9f9f9; }
.fc-logos-in { display: grid; grid-template-columns: 240px 1fr; width: var(--fw); margin: 0 auto; }
.light .fc-logos p { display: flex; align-items: center; padding: 0 28px; border-right: 1px solid var(--l); font-size: 15px; line-height: 1.5; color: var(--ink); }
.fc-logos p b { color: var(--blue); font-weight: 600; }
.fc-mq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fc-mq-track { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; animation: ticker 36s linear infinite; }
.fc-mq:hover .fc-mq-track { animation-play-state: paused; }
.fc-mq-track li { position: relative; display: flex; align-items: center; gap: 12px; height: 112px; padding: 0 44px; border-right: 1px solid var(--l); font-size: 18px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; color: var(--ink); transition: background .2s; }
.fc-mq-track li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.fc-mq-track li:hover { background: #fff; }
.fc-mq-track li:hover::after { transform: scaleX(1); }

/* ═══ 섹션 공통 ═══ */
.light .s, .light .s.alt { padding: 0 0 130px; background: transparent; }
.light .s:first-of-type { margin-top: 0; }
.fc-bar { position: relative; margin-bottom: 110px; border-top: 1px solid var(--l); border-bottom: 1px solid var(--l); background: #f9f9f9; }
.fc-logos + .s .fc-bar { margin-top: 110px; }
.fc-bar::before, .fc-bar::after { content: ""; position: absolute; top: -5px; width: 9px; height: 9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='%23cfcfcf'/%3E%3C/svg%3E"); }
.fc-bar::before { left: calc(max(16px, calc(50% - 590px)) - 4px); }
.fc-bar::after { right: calc(max(16px, calc(50% - 590px)) - 4px); }
.fc-bar-in { position: relative; display: flex; align-items: center; gap: 12px; width: var(--fw); height: 70px; margin: 0 auto; padding-left: 40px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--ink3); }
.fc-bar-in::before { content: ""; position: absolute; left: -1px; top: 50%; width: 2px; height: 22px; margin-top: -11px; background: var(--blue); transform: scaleY(.2); opacity: .4; transition: transform .5s var(--ease), opacity .5s; }
.fc-bar.on .fc-bar-in::before { transform: scaleY(1); opacity: 1; }
.fc-idx b { font-weight: 500; color: var(--ink3); transition: color .4s; }
.fc-bar.on .fc-idx b { color: var(--blue); }
.fc-bar-in i { font-style: normal; color: #cfcfcf; }
.fc-lab { white-space: pre; }
.light .s-head .s-num { display: none; }
.fc-pill { display: inline-flex; align-items: center; gap: 8px; padding: 0 4px 12px; border-bottom: 1px solid var(--l); font-size: 14px; font-weight: 500; color: var(--ink); }
.fc-pill s { text-decoration: none; font-family: var(--mono); font-size: 12px; color: #c4c4c4; }
.fc-pill svg { width: 17px; height: 17px; color: var(--blue); }
.light .s h2 { margin: 22px 0 18px; font-size: clamp(32px, 4vw, 54px); font-weight: 600; letter-spacing: -.045em; line-height: 1.15; color: var(--ink); }
.light .s.dark h2 { color: var(--ink); }
.light .s-p { color: var(--ink2); font-size: clamp(16px, 1.4vw, 18px); }

/* 01 문제: 칸으로 나뉜 카드 (마우스를 올리거나 차례로 흰 카드가 떠오른다) */
.light .ic3 { width: 100%; gap: 0; border-top: 1px solid var(--l); border-bottom: 1px solid var(--l); }
.light .ic3 li { position: relative; padding: 48px 28px 44px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.light .ic3 li + li { border-left: 1px solid var(--l); }
.light .ic3 li::before { content: ""; position: absolute; inset: 10px; z-index: 0; border-radius: 14px; background: #fff; border: 1px solid #efefef; box-shadow: 0 18px 36px -20px rgba(0, 0, 0, .16); opacity: 0; transform: scale(.97); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.light .ic3 li.on::before, .light .ic3 li:hover::before { opacity: 1; transform: none; }
.light .ic3 li > * { position: relative; z-index: 1; }
.light .ic3 .ic { width: 52px; height: 52px; border-radius: 0; background: none; border: 0; box-shadow: none; color: #bdbdbd; animation: none; transition: color .3s; }
.light .ic3 li.on .ic, .light .ic3 li:hover .ic { color: var(--blue); }
.light .ic3 .ic > svg { width: 34px; height: 34px; }
.light .ic3 .ic i { width: 20px; height: 20px; right: -4px; top: -2px; background: var(--ink); border: 2px solid #fff; animation: none; }
.light .ic3 .ic i svg { width: 9px; height: 9px; }
.light .ic3 b { margin-top: 18px; font-size: 18px; font-weight: 600; }
.light .ic3 small { font-size: 14.5px; color: var(--ink2); }

/* 창 (주간 리포트 · 운영 시스템) */
.light .win { border-radius: 14px; border: 1px solid var(--l); background: #fff; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .2); }
.fc-chrome { display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--l); background: #fafafa; }
.fc-tabs { border: 1px solid var(--l); border-radius: 14px 14px 0 0; }
.fc-tabs em { padding: 5px 12px; border-radius: 8px; border: 1px solid transparent; font-style: normal; font-size: 13px; font-weight: 500; color: var(--ink3); }
.fc-tabs i + i + i { margin-right: 10px; }
.fc-tabs em.on { color: var(--ink); background: #fff; border-color: var(--l); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.light .rpt-in, .light .sy-main { background: #fff; }
.light .rpt-kpi > div, .light .rpt-box, .light .sy-kpis div, .light .hw-card { background: #fafafa; border: 1px solid var(--l); box-shadow: none; border-radius: 10px; }
.light .rpt-kpi em, .light .sy-kpis em { color: var(--blue); }
.light .ai-r i { background: #efefef; }
.light .ai-r i::after { background: var(--blue); }
.light .ai-r i::before { background: #cfcfcf; }
.light .ai-r em { color: var(--blue); }
.light .pill-soft { border-radius: 6px; font-family: var(--mono); font-weight: 500; background: #f3f3f3; border-color: var(--l); }
.light .sy { border-radius: 0 0 14px 14px; border: 1px solid var(--l); border-top: 0; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .2); }
.light .sy-side { background: #fafafa; }
.light .sy-side i { border-radius: 8px; }
.light .sy-side i.on { color: var(--blue); background: var(--blue-soft); }
.light .s-cap span { border-radius: 6px; font-family: var(--mono); font-weight: 500; color: var(--blue); background: var(--blue-soft); }

/* 04 결과 숫자 */
.light .proof { border-radius: 14px; border: 1px solid var(--l); background: #fff; color: var(--ink); box-shadow: none; }
.light .proof div { padding: 40px 24px 36px; }
.light .proof div + div { border-left: 1px solid var(--l); }
.light .proof dt { font-family: var(--mono); font-size: 12.5px; font-weight: 400; color: var(--ink3); }
.light .proof dd { margin-top: 14px; font-size: clamp(40px, 4.8vw, 62px); font-weight: 600; color: var(--ink); }
.light .proof dd small { color: var(--blue); }
.light .s-more { color: var(--blue); font-weight: 500; }

/* 05 보증: 밝은 칸 + 도는 ASCII 지구 */
.light .s.dark { position: relative; overflow: hidden; color: var(--ink); background: transparent; }
.light .s.dark > .fc-ascii { position: absolute; left: 0; right: 0; top: 71px; bottom: 0; width: 100%; height: calc(100% - 71px); z-index: 0; opacity: .5; }
.light .s.dark .wrap { position: relative; z-index: 1; }
.light .s.dark .s-p { color: var(--ink2); }
.light .s.dark .s-head { background: radial-gradient(closest-side, #f9f9f9 55%, rgba(249, 249, 249, 0)); }
.light .tl { width: min(880px, 100%); margin-top: 52px; border: 1px solid var(--l); border-radius: 14px; background: #fff; overflow: hidden; }
.light .tl li { padding: 28px 12px 24px; }
.light .tl li + li { border-left: 1px solid var(--l); }
.light .tl li + li::before { display: none; }
.light .tl span { width: 54px; height: 54px; border-radius: 12px; background: #fafafa; border: 1px solid var(--l); color: var(--ink2); box-shadow: none; animation: none; }
.light .tl span svg { width: 24px; height: 24px; }
.light .tl b { margin-top: 14px; font-size: 16px; font-weight: 600; color: var(--ink); }
.light .tl small { color: var(--ink3); font-family: var(--mono); font-size: 12px; }
.light .tl li.g { background: linear-gradient(180deg, rgba(43, 92, 255, .05), transparent); }
.light .tl li.g span { background: var(--blue); border-color: var(--blue); color: #fff; animation: fcRing 2s ease-out infinite; }
@keyframes fcRing { 0% { box-shadow: 0 0 0 0 rgba(43, 92, 255, .35); } 100% { box-shadow: 0 0 0 12px rgba(43, 92, 255, 0); } }
.light .tl li.g b { color: var(--blue); }

/* 06 신청 */
.light .lead { border-radius: 16px; border: 1px solid var(--l); background: #fff; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .2); }
.light .lead-head { padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid #f0f0f0; }
.light .lead-head h3 { font-size: 19px; font-weight: 600; }
.light .lead-head p { margin: 6px 0 0; }
.light .lead label > span, .light .lead legend { font-weight: 500; color: var(--ink2); }
.light .lead input:not([type="checkbox"]), .light .lead textarea { border-radius: 10px; border-color: #e6e6e6; background: #fafafa; }
.light .lead input:focus, .light .lead textarea:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(43, 92, 255, .12); }
.light .lead-interest span { border-radius: 8px; border-color: #e3e3e3; font-weight: 500; transition: all .2s; }
.light .lead-interest label:hover span { border-color: var(--ink3); }
.light .lead-interest input:checked + span { color: #fff; background: var(--blue); border-color: var(--blue); }
.light .agree input { accent-color: var(--blue); }
.light .done-ic { background: var(--blue); box-shadow: 0 0 0 10px rgba(43, 92, 255, .12); }
.light .mini-steps { counter-reset: ms; }
.light .mini-steps li { position: relative; counter-increment: ms; font-size: 16px; font-weight: 500; }
.light .mini-steps li::after { content: "0" counter(ms); order: -1; font-family: var(--mono); font-size: 12px; color: var(--ink3); width: 18px; }
.light .mini-steps li + li::before { content: ""; position: absolute; left: 51px; top: -12px; height: 12px; border-left: 1px dashed var(--ln2); }
.light .mini-steps span { width: 44px; height: 44px; border-radius: 10px; background: #fff; border: 1px solid var(--l); color: var(--blue); animation: none; box-shadow: none; }
.light .mini-steps span svg { width: 20px; height: 20px; }

/* 푸터 · 하단 고정 버튼 · 퀵메뉴 */
.light .hf { background: transparent; margin-top: 0; }
.light .hf-in { border-top: 1px solid var(--l); }
.light .hf-btn { border-radius: 8px; color: #fff; background: var(--blue); }
.light .hf-btn:hover { background: var(--blue-d); }
.light .hf-cols b { font-family: var(--mono); font-size: 12.5px; }
.light .hf-cols a:hover { color: var(--blue); }
.light .hf-mark i { background: #ececec; }
.light .hf-mark:hover i { background: rgba(43, 92, 255, .18); }
.light .sticky-cta { border-radius: 12px; background: var(--blue); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 16px 30px -12px rgba(43, 92, 255, .7); }
.light .quick-menu { border-radius: 16px; background: rgba(255, 255, 255, .92); border-color: var(--l); box-shadow: 0 16px 32px -18px rgba(0, 0, 0, .25); }
.light .qm-btn { border-radius: 10px; background: #f3f3f3; }
.light .qm-top { border-radius: 12px; background: var(--blue); }
.light .qm-top:hover { background: var(--blue-d); }

/* 서비스 자세히 페이지 부품 */
.light .lbl { font-family: var(--mono); font-size: 12.5px; font-weight: 400; letter-spacing: .04em; color: var(--ink3); }
.light .lbl::before { content: "[ "; color: #cfcfcf; } .light .lbl::after { content: " ]"; color: #cfcfcf; }
.light .sx { padding-top: 120px; }
.light .sx + .sx { border-top: 1px solid var(--l); margin-top: 120px; }
.light .sx h2, .light .sv-hero h1 { font-weight: 600; color: var(--ink); }
.light .sv-nav a { border-radius: 8px; border-color: var(--l); background: #fff; font-weight: 500; }
.light .sv-nav a:hover { border-color: var(--blue); color: var(--blue); background: #fff; }
.light .cmp, .light .case-hero, .light .qc, .light .pb-card, .light .ug-flow > li, .light .gate-card:not(.block), .light .ug-check, .light .path:not(.us), .light .web-banner, .light .sv-cta, .light .mid-cta, .light .final-in, .light .stats > div, .light .jobs li.you { border-radius: 14px; border: 1px solid var(--l); background: #fff; box-shadow: none; transition: box-shadow .3s, border-color .3s; }
.light .case-hero:hover, .light .qc:hover, .light .pb-card:hover, .light .ug-flow > li:hover, .light .web-banner:hover { border-color: #dedede; box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .2); }
.light .cmp-row > .us { background: var(--blue-soft); }
.light .cmp-head > .us { background: var(--blue); }
.light .ch-stats div { background: #fafafa; border: 1px solid var(--l); }
.light .ch-stats .main { box-shadow: inset 0 0 0 1.5px var(--blue); }
.light .ug-quote { border-radius: 14px; background: #1c1c1c; }
.light .ug-quote .qm { color: var(--blue); }
.light .ug-quote blockquote em { color: #8eaaff; }
.light .gate-card.block { border-radius: 14px; background: #1c1c1c; }
.light .path.us { border-radius: 14px; background: var(--blue); border-color: var(--blue); }
.light .tabs-bar { border-radius: 12px; border-color: var(--l); background: rgba(255, 255, 255, .92); box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .3); }
.light .tabs-bar button { border-radius: 8px; }
.light .tabs-bar button.on { background: var(--blue-soft); color: var(--blue); }
.light .ds-bar { background: var(--blue); }
.light .rv blockquote, .light .rv blockquote::after { background: #fff; }
.light .rv blockquote { border: 1px solid var(--l); }
.light .qc { background: #fff; }
.light .qc-int { background: var(--blue); }
.light .ug-track i, .light .ug-ppl i.on { background: var(--blue); }
.light .sh.me i::after { background: var(--blue); }
.light .faq-list summary:hover { color: var(--blue); }

/* ═══ 반응형 ═══ */
@media (max-width: 1100px) {
  .fc-asc-l, .fc-asc-r, .fc-tag.t3, .fc-tag.t4 { display: none; }
}
@media (max-width: 860px) {
  .fc-demo-body { grid-template-columns: 1fr; height: auto; }
  .fc-thread { min-height: 210px; }
  .fc-meter { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-left: 0; border-top: 1px solid var(--l); }
  .fc-meter-h { width: 100%; }
  .fc-meter dl { margin: 0; flex: 1 1 100%; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .fc-meter dl div { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; }
  .fc-meter dt { font-size: 11px; }
  .fc-done { margin-top: 0; }
  .fc-logos-in { grid-template-columns: 1fr; }
  .light .fc-logos p { padding: 16px 20px; border-right: 0; border-bottom: 1px solid var(--l); justify-content: center; text-align: center; }
  .fc-mq-track li { height: 84px; padding: 0 30px; font-size: 16px; }
}
@media (max-width: 640px) {
  .fc-ann { font-size: 12.5px; padding: 8px 12px; margin-top: 8px; }
  body.light .lp-nav, body.light .lp-nav.scrolled { margin-top: 8px; }
  .fc-tag, .fc-star, .fc-sq { display: none; }
  .fc-grid { height: 420px; background-size: 72px 72px; background-position: calc(50% + 36px) 36px, center 0, center 0; }
  .fc-hero-in { padding-top: 48px; }
  .light .fc-hero .hx-title { font-size: clamp(32px, 9vw, 40px); }
  .light .fc-hero .hx-btns a { flex: 1 1 100%; justify-content: center; }
  .fc-demo { margin-top: 44px; padding: 0 5px; }
  .fc-tab { padding: 6px 9px 7px; font-size: 11.5px; }
  .fc-demo-top > i { display: none; }
  .fc-tab:not(.on) { font-size: 0; gap: 0; }
  .fc-tabs2 { margin-left: 0; }
  .fc-chat { padding: 14px 14px 12px; }
  .fc-a { grid-template-columns: 24px 1fr; gap: 9px; }
  .fc-av { width: 24px; height: 24px; padding: 4px; }
  .light .fc-text { font-size: 13.5px; min-height: 92px; }
  .fc-bar { margin-bottom: 70px; }
  .fc-logos + .s .fc-bar { margin-top: 70px; }
  .fc-bar-in { padding-left: 20px; height: 56px; font-size: 11.5px; }
  .fc-bar::before, .fc-bar::after { display: none; }
  .light .s, .light .s.alt { padding-bottom: 90px; }
  .light .ic3 li + li { border-left: 0; border-top: 1px solid var(--l); }
  .light .ic3 li { padding: 26px 18px; }
  .light .proof div + div { border-left: 0; border-top: 1px solid var(--l); }
  .light .tl { grid-template-columns: repeat(2, 1fr); }
  .light .tl li:nth-child(3) { border-left: 0; }
  .light .tl li:nth-child(n+3) { border-top: 1px solid var(--l); }
  .fc-tabs em:not(.on) { display: none; }
  .light .sx { padding-top: 80px; }
  .light .sx + .sx { margin-top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-star, .fc-sq, .fc-mq-track, .light .tl li.g span { animation: none; }
}

/* 한글이 들어가는 작은 글자는 고정폭 대신 본문 글꼴 (고정폭 띄어쓰기가 너무 넓어 보여서) */
.light .fc-ask-b small, .fc-k, .light .tl small, .light .pill-soft, .light .proof dt, .light .s-cap span, .light .hf-cols b, .light .lbl { font-family: inherit; letter-spacing: 0; }
.fc-k { font-weight: 500; }

/* 결과 숫자 아래 기준 시점 */
.light .proof .proof-asof { margin-top: 8px; font-size: 12.5px; color: var(--ink3); }

/* ── 세로선과 글자 겹침 방지 (2026-11-12) ──
   본문 틀(.wrap 1240px)이 양옆 세로선(1180px)보다 넓어서 선이 제목·문단·표·푸터 글자를 지나갔다.
   틀을 세로선 폭(--fw)에 맞추고, 안쪽 여백(--fpad)을 둬서 글자가 선에 붙지 않게 한다. */
body.light { --fpad: clamp(16px, 3vw, 40px); }
.light .wrap { width: var(--fw); padding-inline: var(--fpad); }
.light .hx-stage, .light .dx-stage { width: calc(var(--fw) - 2 * var(--fpad)); }
.light .fc-hero-in { padding-inline: var(--fpad); }
.light .hf-in, .light .hf-mark { max-width: none; width: var(--fw); padding-left: var(--fpad); padding-right: var(--fpad); }
/* 히어로 격자: 제목·설명 뒤쪽은 지워서 세로선이 글자를 가로지르지 않게 */
.fc-grid {
  -webkit-mask-image: radial-gradient(ellipse 44% 48% at 50% 50%, transparent 58%, #000 90%), linear-gradient(#000 55%, transparent 98%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 44% 48% at 50% 50%, transparent 58%, #000 90%), linear-gradient(#000 55%, transparent 98%);
  mask-composite: intersect;
}
@media (max-width: 640px) {
  .fc-grid {
    -webkit-mask-image: radial-gradient(ellipse 70% 32% at 50% 52%, transparent 50%, #000 100%), linear-gradient(#000 40%, transparent 90%);
    mask-image: radial-gradient(ellipse 70% 32% at 50% 52%, transparent 50%, #000 100%), linear-gradient(#000 40%, transparent 90%);
  }
}

/* ── 일하는 사람들: 사진 띠 (2026-11-12) ──
   목록을 fc.js가 한 번 복제하고 home.css의 ticker(-50%)로 끝없이 흐른다.
   간격은 gap 대신 margin-right로 둬야 -50% 이동 때 이음매가 안 튄다. 짝수 칸은 아래로 내려 리듬을 준다 */
.fc-team { overflow: hidden; }
.fc-team .s-in { gap: 0; }
.fc-team-mq { margin-top: 48px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.fc-team-track { list-style: none; margin: 0; padding: 0 0 40px; display: flex; align-items: flex-start; width: max-content; animation: ticker 105s linear infinite; }
.fc-team-mq:hover .fc-team-track { animation-play-state: paused; }
.fc-team-track li { position: relative; flex: none; width: clamp(280px, 30vw, 440px); aspect-ratio: 16 / 10; margin-right: 20px; overflow: hidden; border-radius: 16px; border: 1px solid var(--l); background: #ececec; }
.fc-team-track li.lo { margin-top: 40px; }
.fc-team-track img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.fc-team-track li:hover img { transform: scale(1.04); }
.fc-team-track span { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink); background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-width: 640px) {
  .fc-team-mq { margin-top: 32px; }
  .fc-team-track li { width: 260px; margin-right: 12px; }
  .fc-team-track li.lo { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-team-track { animation: none; }
  .fc-team-mq { overflow-x: auto; }
}

/* 무료 측정 섹션: 소개서 받기 카드 */
.doc-dl { margin-top: 40px; display: grid; gap: 10px; max-width: 460px; }
.doc-dl-t { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--ink3); }
.doc-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--l); background: #fff; color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .15s; }
.doc-card:hover { border-color: var(--blue); box-shadow: 0 14px 30px -18px rgba(43, 92, 255, .55); transform: translateY(-1px); }
.doc-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.doc-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--blue); background: var(--blue-soft); }
.doc-ic svg { width: 21px; height: 21px; }
.doc-tx { min-width: 0; flex: 1; display: grid; gap: 2px; word-break: keep-all; }
.doc-tx b { font-size: 16px; font-weight: 650; }
.doc-tx small { font-size: 13px; color: var(--ink3); }
.doc-go { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); transition: transform .2s; }
.doc-go svg { width: 15px; height: 15px; transform: rotate(90deg); }
.doc-card:hover .doc-go { transform: translateY(2px); }
.doc-note { margin: 4px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; color: var(--ink); background: var(--blue-soft); }
@media (max-width: 900px) { .doc-dl { max-width: none; margin-top: 28px; } }
/* 사진 띠 끌어서 넘기기 (fc.js가 .is-drag를 붙이면 CSS 애니메이션을 끄고 JS로 움직인다) */
.fc-team-mq.is-drag { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.fc-team-mq.is-drag .fc-team-track { animation: none; will-change: transform; }
.fc-team-mq.is-drag img { -webkit-user-drag: none; pointer-events: none; }
.fc-team-mq.is-grab { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .fc-team-mq.is-drag { overflow-x: hidden; } }