/* 비밥소프트웨어 메인 새 시안 — unslop 과정으로 다시 그림(2026-11-14)
   unslop: Damir Sokolovsky(@heydamir), https://github.com/heydamir/unslop, CC BY 4.0
   방향: 관제실·운영실(24시간 켜진 화면, 운영 기록). 따뜻한 무채색 한 벌 + 브랜드 골드 하나(드물게).
   간격은 4px 단위, 굵기 400·500(드물게 600), 움직임은 첫 화면 한 번 + 전광판만. */

@font-face { font-family: "Pretendard"; src: url("/theme/u/fonts/PretendardVariable.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }

:root {
  /* 밝은 바탕(종이 쪽 따뜻한 무채색) */
  --bg: #f7f4ee; --card: #fdfbf7; --raised: #efe9df;
  --ink: #1f1b16; --ink-2: #5e554a; --ink-3: #7b7266;
  --line: rgba(31, 27, 22, .1); --line-2: rgba(31, 27, 22, .18);
  /* 어두운 바탕(야간 관제실) */
  --d-bg: #12110f; --d-bg-2: #161513; --d-card: #1c1a18; --d-raised: #262421;
  --d-ink: #efe9de; --d-ink-2: #c3bbad; --d-ink-3: #8f897f;
  --d-line: rgba(239, 233, 222, .1); --d-line-2: rgba(239, 233, 222, .22);
  /* 브랜드 골드: 바탕엔 쓰지 않고 주 행동·핵심 숫자에만 */
  --gold: #c9a24a; --gold-hover: #d4ae58; --gold-ink: #7a5a14;
  /* 가동 표시등(의미가 있는 곳에만) */
  --run: #4cc38a; --run-ink: #23885a;
  --font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", "Cascadia Mono", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --pad: 32px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.65 var(--font); word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible, .cta :focus-visible { outline-color: var(--gold); }

.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--pad); }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* 버튼: 높이 48(첫 화면)·36(머리줄), 모서리 10 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: 10px; border: 1px solid transparent; font: 500 15px/1 var(--font); white-space: nowrap; transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .12s var(--ease); }
.btn:active { transform: scale(.98); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 14px; border-radius: 8px; }
.btn-gold { background: var(--gold); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn-gold:hover { background: var(--gold-hover); }
.btn-ghost { color: var(--d-ink); border-color: var(--d-line-2); }
.btn-ghost:hover { background: rgba(239, 233, 222, .06); border-color: rgba(239, 233, 222, .34); }

/* 가동 표시등: 깜빡이지 않는 작은 점. '24시간 운영'·'장기 가동' 옆에만 */
.lamp { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--run); vertical-align: middle; margin-right: 8px; transform: translateY(-1px); }

/* ── 첫 화면: 관제실 사진 한 장 ── */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: max(680px, 100svh); display: flex; align-items: center; padding-block: 120px 160px; background: var(--d-bg); color: var(--d-ink); }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% center; z-index: 0; filter: saturate(.5) brightness(.8); }
.hero-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(18, 17, 15, .95) 0%, rgba(18, 17, 15, .88) 30%, rgba(18, 17, 15, .44) 58%, rgba(18, 17, 15, .1) 82%),
    linear-gradient(180deg, rgba(18, 17, 15, .6) 0, rgba(18, 17, 15, 0) 160px),
    linear-gradient(0deg, rgba(18, 17, 15, .5) 0, rgba(18, 17, 15, 0) 28%); }
.hero-copy { position: relative; z-index: 2; }
.hero-copy > * { max-width: 620px; }
.eyebrow { font-size: 14px; line-height: 20px; color: var(--d-ink-2); }
.hero h1 { margin-top: 20px; font-size: 60px; line-height: 1.16; font-weight: 500; letter-spacing: -.025em; color: var(--d-ink); }
.lede { margin-top: 24px; font-size: 18px; line-height: 30px; color: var(--d-ink-2); max-width: 560px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
/* 첫 화면 문구만 한 번 짧게 떠오름(최대 4개, 50ms 간격) */
.hero-copy > * { animation: rise .5s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: .05s; }
.hero-copy > :nth-child(3) { animation-delay: .1s; }
.hero-copy > :nth-child(4) { animation-delay: .15s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* 전광판 층(unslop.js): 사진과 같은 자리·같은 필터 */
.hm-screens { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hm-screens-map { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
.hm-screens canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

/* ── 공통 섹션 ── */
.sec { padding-block: 112px; }
.sec.alt { background: var(--card); border-block: 1px solid var(--line); }
.alt .route { background: var(--bg); }
.sec h2 { font-size: 36px; line-height: 1.34; font-weight: 500; letter-spacing: -.015em; }
.body { margin-top: 16px; font-size: 16px; line-height: 28px; color: var(--ink-2); max-width: 560px; }
.note { margin-top: 24px; font-size: 14px; line-height: 22px; color: var(--ink-3); }
.note a, .link { color: var(--ink); border-bottom: 1px solid var(--line-2); transition: color .15s var(--ease), border-color .15s var(--ease); }
.note a:hover, .link:hover { color: var(--gold-ink); border-color: var(--gold-ink); }
.link { display: inline-flex; align-items: center; gap: 8px; margin-top: 32px; padding-bottom: 4px; font-size: 15px; font-weight: 500; border-bottom: 1px solid var(--line-2); }
.label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-3); }
.sec-head { margin-bottom: 48px; }
.sec-head.wide .body { max-width: 720px; }
.idx { font: 400 13px/20px var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ── 업력·납품 이력 ── */
.since-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.figures { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 32px; }
.figures > div { padding-top: 20px; border-top: 1px solid var(--line-2); }
.figures dt { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.figures .num { display: block; margin-top: 12px; font-size: 48px; line-height: 1; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.figures small { margin-left: 2px; font-size: 22px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.figures dd span { display: block; margin-top: 12px; font-size: 14px; line-height: 22px; color: var(--ink-3); }
.figures .key .num, .figures .key small { color: var(--gold-ink); }
.figures .key .lamp { background: var(--run-ink); }
.log-wrap { margin-top: 96px; }
.log-wrap > .label { margin-bottom: 12px; }
.log { border-top: 1px solid var(--line-2); }
.log li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 24px; }
.log time { font: 400 14px/24px var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.log li:first-child time { color: var(--ink); }
.log-more > .log { border-top: 0; }
.log-more > .log li:first-child time { color: var(--ink-3); }
.log-more summary { list-style: none; display: flex; align-items: center; justify-content: space-between; height: 52px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-2); cursor: pointer; transition: color .15s var(--ease); }
.log-more summary::-webkit-details-marker { display: none; }
.log-more summary:hover { color: var(--ink); }
.log-more summary .i { transition: transform .2s var(--ease); }
.log-more[open] summary .i { transform: rotate(45deg); }
.log-more .when-open, .log-more[open] .when-closed { display: none; }
.log-more[open] .when-open { display: inline; }

/* ── 개발 분야: 줄 목록 ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.split-head { position: sticky; top: 48px; }
.rows { border-top: 1px solid var(--line-2); }
.rows li { display: grid; grid-template-columns: 18px 1fr; gap: 20px; padding-block: 24px; border-bottom: 1px solid var(--line); }
.rows .i { margin-top: 4px; color: var(--ink-3); }
.rows h3 { font-size: 18px; line-height: 26px; font-weight: 500; }
.rows p { margin-top: 4px; font-size: 15px; line-height: 24px; color: var(--ink-2); }
.rows .stack { margin-top: 12px; font: 400 13px/20px var(--mono); color: var(--ink-3); }

/* ── 상황별 안내 ── */
.route-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.route { display: flex; flex-direction: column; padding: 24px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.route:hover { background: #fff; border-color: var(--line-2); }
.route > .i { color: var(--ink-3); }
.route-kind { margin-top: 20px; font-size: 13px; line-height: 20px; color: var(--ink-3); }
.route strong { margin-top: 4px; font-size: 18px; line-height: 28px; font-weight: 500; }
.route-desc { flex: 1; margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--ink-2); }
.route-go { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 500; }
.route-go .i { color: var(--ink-3); transition: transform .15s var(--ease), color .15s var(--ease); }
.route:hover .route-go .i { transform: translateX(2px); color: var(--gold-ink); }

/* ── 고객사: 운영과 같은 3줄 흐름(화면 끝까지, 가운데 줄은 반대로). 버튼·멈춤 없음 ── */
.marquee { --logo-w: 180px; --gap: 16px; --logo-h: 64px; display: grid; gap: 8px; overflow: hidden; line-height: 0;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.mq-row { display: flex; width: max-content; height: var(--logo-h); animation: mq var(--dur, 70s) linear infinite; }
.mq-row:nth-child(2) { animation-direction: reverse; }
.mq-set { display: flex; flex: none; align-items: center; gap: var(--gap); padding-right: var(--gap); }
.marquee .logo { flex: 0 0 var(--logo-w); height: var(--logo-h); display: flex; align-items: center; justify-content: center; padding: 0 12px; }
.marquee .logo img { width: 100%; height: 100%; object-fit: contain; filter: saturate(.8); mix-blend-mode: multiply; }
@keyframes mq { to { transform: translateX(-33.3333%); } }

/* ── 고객 후기: 폭을 채운 어두운 띠, 화살표로 한 장씩 넘기는 카드(끝에서 처음으로 이어짐) ── */
.voices { background: var(--d-bg-2); color: var(--d-ink); }
.voices h2 { color: var(--d-ink); }
.voices .body { color: var(--d-ink-2); }
.voices-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.voices-head .sec-head { margin-bottom: 0; }
.carousel-ctrl { display: flex; align-items: center; gap: 8px; flex: none; }
.carousel-count { margin-right: 8px; font: 400 13px/20px var(--mono); color: var(--d-ink-3); font-variant-numeric: tabular-nums; }
.carousel-count b { font-weight: 400; color: var(--d-ink); }
.cbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 10px; border: 1px solid var(--d-line-2); background: transparent; color: var(--d-ink); cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .12s var(--ease); }
.cbtn:hover { background: rgba(239, 233, 222, .06); border-color: rgba(239, 233, 222, .34); }
.cbtn:active { transform: scale(.97); }
/* 카드 줄은 본문 왼쪽 선에서 시작해 화면 오른쪽 끝까지 */
.voice-viewport { overflow-x: auto; scrollbar-width: none; padding-left: max(var(--pad), calc((100% - 1280px) / 2 + var(--pad))); touch-action: pan-y; }
.voice-viewport::-webkit-scrollbar { display: none; }
.voice-viewport.js { overflow: hidden; }
.voice-track { --card-w: 400px; display: flex; gap: 16px; width: max-content; padding-right: var(--pad); }
.voice-track .v { flex: 0 0 var(--card-w); display: flex; flex-direction: column; padding: 28px; border-radius: 16px; background: var(--d-card); border: 1px solid var(--d-line); }
.v blockquote { font-size: 15px; line-height: 26px; color: var(--d-ink); }
.v blockquote::before { content: '“'; }
.v blockquote::after { content: '”'; }
.v figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: auto; padding-top: 20px; }
.v figcaption b { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--d-ink); }
.v figcaption span { font-size: 14px; line-height: 22px; color: var(--d-ink-3); }

/* ── 왜 비밥인가 ── */
.why-list { border-top: 1px solid var(--line-2); }
.why-list li { display: grid; grid-template-columns: 64px minmax(0, 4fr) minmax(0, 8fr); gap: 0 32px; padding-block: 32px; border-bottom: 1px solid var(--line); }
.why-list h3 { font-size: 20px; line-height: 30px; font-weight: 500; }
.why-list .idx { line-height: 30px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.cols p { font-size: 15px; line-height: 26px; color: var(--ink-2); }
.std-title { margin-top: 80px; margin-bottom: 16px; }
.std { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.std li { padding-top: 16px; border-top: 1px solid var(--line-2); }
.std h4 { margin-top: 8px; font-size: 16px; line-height: 24px; font-weight: 500; }
.std p { margin-top: 8px; font-size: 14px; line-height: 23px; color: var(--ink-2); }

/* ── 마무리 문의 + 다음 페이지 ── */
.cta { background: var(--d-bg-2); color: var(--d-ink); padding-top: 96px; }
.cta-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.cta h2 { font-size: 36px; line-height: 1.32; font-weight: 500; letter-spacing: -.02em; }
.cta p { margin-top: 12px; font-size: 16px; line-height: 26px; color: var(--d-ink-2); }
.pager { display: grid; grid-template-columns: 72px 1fr 18px; align-items: center; gap: 24px; margin-top: 80px; padding-block: 24px; border-top: 1px solid var(--d-line); color: var(--d-ink-2); transition: color .15s var(--ease); }
.pager:hover { color: var(--d-ink); }
.pager-step { font: 400 13px/20px var(--mono); color: var(--d-ink-3); }
.pager-text b { display: block; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--d-ink); }
.pager-text span { font-size: 14px; line-height: 22px; }
.pager .i { transition: transform .15s var(--ease); }
.pager:hover .i { transform: translateX(2px); }

/* ── 반응형 ── */
@media (max-width: 1100px) {
  .split, .since-grid { grid-template-columns: 1fr; gap: 48px; }
  .split-head { position: static; }
  .why-list li { grid-template-columns: 64px 1fr; }
  .why-list .cols { grid-column: 2; margin-top: 16px; }
  .std { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}
@media (max-width: 760px) {
  :root { --pad: 20px; }
  .hero { align-items: flex-start; min-height: max(640px, 100svh); padding-block: 112px 64px; }
  .hero-photo { object-position: 62% center; }
  .hero-shade { background: linear-gradient(180deg, rgba(18, 17, 15, .9) 0%, rgba(18, 17, 15, .84) 52%, rgba(18, 17, 15, .4) 80%, rgba(18, 17, 15, .55) 100%); }
  .hero h1 { font-size: 36px; line-height: 1.22; letter-spacing: -.02em; }
  .lede { font-size: 16px; line-height: 27px; }
  .actions { margin-top: 32px; }
  .actions .btn { flex: 1 1 auto; }
  .sec { padding-block: 64px; }
  .sec h2 { font-size: 28px; line-height: 1.36; }
  .sec-head { margin-bottom: 32px; }
  .figures { gap: 32px 16px; }
  .figures .num { font-size: 36px; }
  .figures small { font-size: 18px; }
  .log-wrap { margin-top: 64px; }
  .log li { grid-template-columns: 56px 1fr; gap: 12px; font-size: 15px; }
  .route-grid { grid-template-columns: 1fr; }
  .marquee { --logo-w: 150px; --gap: 12px; --logo-h: 52px; gap: 4px; }
  .marquee .logo { padding: 0 8px; }
  .voices-head { margin-bottom: 32px; }
  .carousel-count { display: none; }
  .voice-track { --card-w: 300px; gap: 12px; }
  .voice-track .v { padding: 24px; }
  .why-list li { grid-template-columns: 1fr; }
  .why-list .idx { line-height: 20px; }
  .why-list h3 { margin-top: 4px; font-size: 19px; line-height: 28px; }
  .why-list .cols { grid-column: 1; grid-template-columns: 1fr; gap: 12px; }
  .std { grid-template-columns: 1fr; gap: 24px; }
  .cta { padding-top: 64px; }
  .cta-row { flex-direction: column; align-items: flex-start; }
  .cta h2 { font-size: 26px; }
  .pager { grid-template-columns: 1fr 18px; margin-top: 56px; }
  .pager-step { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* 로고는 멈춘 판으로 */
  .marquee { mask-image: none; -webkit-mask-image: none; padding-inline: var(--pad); }
  .mq-row { width: 100%; height: auto; }
  .mq-set { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; padding: 0; }
  .mq-set[aria-hidden="true"] { display: none; }
  .marquee .logo { width: auto; }
}

/* 일본어: 낱말 사이 공백이 없어 keep-all 이면 줄바꿈이 안 된다. 글꼴은 Pretendard 뒤에 일본어 글꼴 */
html:lang(ja) body { word-break: normal; line-break: strict; }
/* 후기 따옴표는 언어 관례대로 */
html:lang(ja) .v blockquote::before { content: '「'; } html:lang(ja) .v blockquote::after { content: '」'; }
html:lang(de) .v blockquote::before { content: '„'; } html:lang(de) .v blockquote::after { content: '“'; }
html:lang(fr) .v blockquote::before { content: '«a0'; } html:lang(fr) .v blockquote::after { content: 'a0»'; }