/* ============================================================================
 *  Pretendard — 이 사이트가 쓰는 글자만 남기고 잘라낸 사본 (한 벌 21KB)
 *  SIL Open Font License 1.1 · assets/fonts/LICENSE
 *  원본과 잘라내는 스크립트는 tools/ 에 있습니다. 글을 고치면 다시 돌려야 합니다.
 *
 *  OS 기본 한글 폰트(애플 SD 산돌고딕)를 그냥 쓰면 어느 앱 화면처럼 보입니다.
 *  명함은 브랜드가 얼굴이라 글자체부터 우리 것이어야 합니다.
 * ========================================================================== */
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;   /* 폰트를 기다리느라 글자가 안 보이는 일이 없게 */
  src: url("/assets/fonts/pretendard-400.woff2?v=e8349c0c") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/pretendard-600.woff2?v=2cd515e8") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/pretendard-800.woff2?v=2a0d4034") format("woff2");
}

/* ============================================================================
 *  ORBIQ 디지털 명함 — 스타일
 *  다크 한 벌로 고정합니다. 명함은 브랜드가 매번 같은 얼굴로 보여야 해서,
 *  보는 사람 기기 설정(라이트/다크)에 따라 색이 달라지지 않게 했습니다.
 * ========================================================================== */

:root {
  /* ORBIQ 브랜드 팔레트 — 로고·브랜드시트와 같은 값입니다. 여기서 벗어나지 않게 하세요. */
  --blue:      #3B6BFF;
  --cyan:      #22D3EE;
  --violet:    #A855F7;
  --slate:     #64748B;

  --bg:        #070A14;
  --surface:   #0B1020;   /* 브랜드 Ink */
  --surface-2: #121A33;
  --line:      rgba(255,255,255,.10);
  --ink:       #EAEFFB;
  --muted:     #8B97AE;
  --accent:    var(--blue);
  --accent-2:  var(--cyan);
  --radius:    18px;
  --font: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
          "Noto Sans KR", "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  /* 하단 홈 인디케이터에 버튼이 가리지 않도록 */
  padding: 0 0 max(24px, env(safe-area-inset-bottom));
}

a { color: inherit; }

/* ------------------------------------------------------------------ 언어 토글
 * 한국어/영문 두 벌이 HTML에 다 들어 있고, 여기서 한쪽만 보여줍니다. */
[data-lang="ko"] .en,
[data-lang="en"] .ko { display: none; }

.card {
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  position: relative;
  overflow: hidden;
}
@media (min-width: 480px) {
  body { align-items: center; padding-block: 32px; }
  .card { border-radius: 26px; border: 1px solid var(--line);
          box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); }
}

.lang {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  display: flex; gap: 6px;
}
.lang button {
  width: 40px; height: 32px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(11,16,32,.55); backdrop-filter: blur(8px);
  color: var(--muted); font: 600 13px/1 var(--font);
  cursor: pointer; transition: .18s;
}
.lang button.on { background: var(--blue); border-color: var(--blue); color: #FFFFFF; }

/* ------------------------------------------------------------------ 헤더 */
.hero { position: relative; padding: 46px 26px 30px; }
.hero.slim { padding: 30px 26px 24px; }
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 100% at 18% 0%, rgba(59,107,255,.34), transparent 62%),
    radial-gradient(90% 85%  at 95% 10%, rgba(168,85,247,.20), transparent 58%),
    radial-gradient(70% 70%  at 60% 0%,  rgba(34,211,238,.12), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
}
.hero > * { position: relative; }

.logo { display: flex; align-items: center; gap: 14px; }
.mark { flex: none; }
/* 궤도 간 도약(퀀텀점프) 궤적이 아주 느리게 숨쉽니다. 시선을 뺏지 않을 정도로만. */
.jump { animation: pulse 4.5s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .55 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .jump { animation: none; opacity: .85 } }

/* 워드마크 그라데이션.
 * 브랜드 원칙은 'Q만 그라데이션' 이었는데, 글자 전체에 걸되 색이 Q 쪽으로 갈수록
 * 짙어지게 해서 두 가지를 같이 만족시킵니다 — 앞글자는 거의 흰색, Q에서 보라색.
 * 잘라내기(background-clip)가 안 먹는 브라우저에서는 그냥 흰 글자로 보입니다. */
.wordmark b {
  display: inline-block;
  font-size: 27px; font-weight: 800; letter-spacing: .20em;
  line-height: 1.15;
  color: var(--ink);
  background: linear-gradient(100deg,
              var(--ink) 0%, var(--ink) 26%, var(--blue) 64%, var(--violet) 100%);
  -webkit-background-clip: text;
          background-clip: text;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wordmark b { color: transparent; }
}
.wordmark .tagline {
  display: block; margin-top: 8px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--slate);
}

/* ------------------------------------------------------------------ 이름 */
.who { padding: 26px 26px 0; }
.who h1 {
  margin: 0;
  font-size: 38px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15;
}
/* 직함은 영문 표기라, 이름과 대비되게 소문자 트래킹을 넓혀 조판합니다. */
.who .role {
  margin: 10px 0 0;
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  color: var(--muted);
}

/* ------------------------------------------------------------------ 버튼 */
.actions { display: flex; gap: 10px; padding: 22px 26px 0; }
.btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 16px; font-weight: 600; text-decoration: none;
  transition: transform .12s, filter .18s;
}
.btn:active { transform: scale(.975); }
.btn.primary {
  flex: 1.6;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  border-color: transparent; color: #FFFFFF;
  box-shadow: 0 12px 28px -12px var(--blue);
}
.btn.primary:hover { filter: brightness(1.07); }

.hint {
  margin: 14px 26px 0; padding: 0;
  color: var(--muted); font-size: 12.5px; line-height: 1.55;
}

/* ------------------------------------------------------------------ 정보 행 */
.rows { padding: 26px 26px 0; }
.row { padding: 15px 0; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row-label {
  font-size: 11px; font-weight: 600; letter-spacing: .10em;
  text-transform: uppercase; color: var(--muted);
}
.row-value { margin-top: 6px; font-size: 15.5px; line-height: 1.5; word-break: break-word; }
.row-value a { color: var(--accent); text-decoration: none; }
.row-value a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ QR 페이지 */
.qr-frame { padding: 26px 26px 0; }
.qr-frame img {
  display: block; width: 100%; height: auto;
  border-radius: 14px; background: #fff;
}

/* ------------------------------------------------------------------ 푸터 */
.foot {
  display: flex; justify-content: space-between; align-items: center;
  margin: 30px 26px 0; padding: 18px 0 6px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12px;
}
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* ============================================================================
 *  보여주기 화면 (/show/) — 내 폰을 상대에게 내밀어 찍게 하는 전체화면
 *  종이 명함을 건네는 자리를 대신하는 화면이라, 스크롤 없이 한 눈에 끝나야 합니다.
 * ========================================================================== */
.show-body {
  /* 이 화면만은 스크롤이 없습니다. 내미는 순간 보이는 게 전부여야 합니다. */
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(90% 60% at 50% 0%,   rgba(59,107,255,.22), transparent 62%),
    radial-gradient(80% 55% at 50% 100%, rgba(168,85,247,.16), transparent 62%),
    var(--surface);
}

.show {
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* QR 묶음이 화면 정중앙에 옵니다 */
  gap: 22px;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  text-align: center;
  position: relative;
}

.show-top { display: flex; align-items: center; gap: 11px; }
.show-top b {
  display: block; font-size: 17px; font-weight: 800; letter-spacing: .20em; line-height: 1;
}
.show-top span { display: block; margin-top: 5px; font-size: 13px; color: var(--muted); }

/* QR 판.
 * 흰 여백을 넉넉히 둡니다 — 어두운 배경이 QR에 바로 닿으면 인식률이 떨어집니다.
 * 크기는 가로(vw)·세로(vh) 양쪽으로 묶어서, 작은 폰이든 큰 폰이든 가로 화면이든
 * 잘리지 않으면서 상대가 찍기 충분한 크기(대략 4~6cm)를 유지합니다. */
.show-qr {
  background: #fff;
  padding: 14px;
  border-radius: 20px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.8);
  line-height: 0;
}
.show-qr img {
  display: block;
  width:  min(66vw, 42vh, 340px);
  height: min(66vw, 42vh, 340px);
}

.show-msg { margin: 0; font-size: 15px; color: var(--ink); }

.show-foot {
  position: absolute; left: 0; right: 0;
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted);
}
.show-foot a { color: var(--muted); text-decoration: none; }
.show-foot .wake { font-size: 11px; opacity: .55; }

/* 가로로 눕히면 위아래가 좁아지므로 요소 간격을 줄여 QR을 최대한 키웁니다. */
@media (orientation: landscape) and (max-height: 520px) {
  .show { gap: 14px; }
  .show-foot { position: static; }
}

/* ============================================================================
 *  배경화면 페이지 (/wall/)
 * ========================================================================== */
.walls { padding: 22px 26px 0; display: grid; gap: 12px; }

/* 한 줄에 [미리보기] + [기종·해상도] + [저장].
 * 저장을 별도 버튼으로 뺀 이유: 그림 전체가 링크면 안드로이드에서 '다운로드' 폴더로만
 * 떨어져서, 갤러리를 뒤져 배경화면으로 지정하기까지 손이 여러 번 갑니다.
 * 버튼은 공유 시트를 열어 '사진에 저장' 한 번으로 끝냅니다. */
.wall {
  display: flex; align-items: center; gap: 12px;
  /* 그리드 항목은 기본값(min-width:auto)이라 내용보다 작아지지 않습니다.
     0으로 풀어주지 않으면 좁은 폰에서 저장 버튼이 화면 밖으로 밀려납니다. */
  min-width: 0;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface-2);
  transition: border-color .18s;
}
/* 이 폰에 맞는 해상도는 테두리로 표시합니다 (wall.js가 붙입니다) */
.wall.pick { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }

.wall-open { flex: none; display: block; line-height: 0; }
.wall-open img {
  display: block; width: 76px; height: auto;   /* 원본 비율 그대로 */
  border-radius: 9px; border: 1px solid var(--line);
}

.wall-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.wall-meta b {
  font-size: 13px; font-weight: 600; color: var(--ink);
  line-height: 1.35; overflow-wrap: anywhere;
}
.wall-meta span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pick-tag { color: var(--blue); font-weight: 600; }

.wall-save {
  flex: none;
  min-height: 40px; padding: 0 16px; white-space: nowrap;
  border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  color: #fff; font: 600 14px/1 var(--font); cursor: pointer;
  transition: transform .12s, filter .18s;
}
.wall-save:hover { filter: brightness(1.08); }
.wall-save:active { transform: scale(.96); }

/* 저장 버튼은 .btn 과 같은 모양을 쓰되, button 요소라 폰트가 상속되지 않습니다 */
button.btn { font-family: var(--font); cursor: pointer; }

.hint b { color: var(--ink); font-weight: 600; }

/* 푸터에 링크가 둘 이상일 때 */
.foot-links { display: flex; gap: 14px; }

/* 배경화면 저장 순서 안내.
 * 기본값은 두 OS 안내를 다 보여주고, JS가 기기를 알아낸 뒤 해당하는 것만 남깁니다.
 * (JS가 실패해도 안내가 통째로 사라지지는 않게) */
.steps {
  margin: 12px 26px 0; padding-left: 20px;
  color: var(--muted); font-size: 12.5px; line-height: 1.75;
}
.steps b { color: var(--ink); font-weight: 600; }
body[data-os="ios"]   li[data-os="other"],
body[data-os="other"] li[data-os="ios"]   { display: none; }


/* ============================================================================
 *  홈페이지 (/)
 *  명함(.card)이 손안에 들어오는 한 장이라면, 여기는 회사를 설명하는 문서입니다.
 *  그래서 폭도 리듬도 다릅니다 — 명함 스타일을 물려받지 않고 따로 세웁니다.
 * ========================================================================== */

/* body 는 명함을 가운데 세우려고 flex 였습니다. 홈에서는 그냥 흐르게 둡니다. */
body.home-body { display: block; padding: 0; }

.wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* ------------------------------------------------------------------ 상단 바 */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px max(16px, env(safe-area-inset-left)) 12px max(16px, env(safe-area-inset-right));
  /* 스크롤하면 내용이 뒤로 지나갑니다. 불투명하게 덮으면 화면이 답답해집니다. */
  background: rgba(7, 10, 20, .72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-brand b {
  font-size: 17px; font-weight: 800; letter-spacing: .20em;
  color: var(--ink);
  background: linear-gradient(100deg,
              var(--ink) 0%, var(--ink) 26%, var(--blue) 64%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .nav-brand b { color: transparent; }
}
.nav-right { display: flex; align-items: center; gap: 10px; }
/* .lang 은 명함에서 절대배치였습니다. 상단 바 안에서는 흐름대로 놓습니다. */
.nav .lang { position: static; }
.nav-card {
  padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none;
  transition: .18s;
}
.nav-card:hover { color: var(--ink); border-color: var(--blue); }

/* ------------------------------------------------------------------ 히어로 */
.hero-home { position: relative; overflow: hidden; padding: 84px 0 72px; }
.hero-home .wrap { position: relative; }
.eyebrow {
  margin: 0 0 16px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.hero-home h1 {
  margin: 0;
  /* 폰에서는 30px, 넓은 화면에서 50px 까지. 제목이 두세 줄로 앉는 게 가장 읽기 좋습니다. */
  font-size: clamp(30px, 6.2vw, 50px);
  font-weight: 800; letter-spacing: -.032em; line-height: 1.2;
}
.lead {
  margin: 20px 0 0; max-width: 46ch;
  font-size: clamp(15px, 2.4vw, 17.5px); line-height: 1.78; color: var(--muted);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
/* .btn 은 명함 안에서 폭을 나눠 갖는 전제(flex:1)라, 여기서는 내용만큼만 차지하게 둡니다. */
.hero-cta .btn { flex: 0 1 auto; min-width: 166px; }

/* ------------------------------------------------------------------ 섹션 공통 */
.sec { padding: 68px 0; border-top: 1px solid var(--line); }
/* 한 칸 걸러 바탕을 살짝 올려 섹션 경계를 만듭니다. 선 하나로는 긴 문서에서 잘 안 읽힙니다. */
.sec.band { background: var(--surface); }
.sec h2 {
  margin: 0;
  font-size: clamp(22px, 4.2vw, 31px);
  font-weight: 800; letter-spacing: -.022em; line-height: 1.32;
}
.sec-lead { margin: 16px 0 0; max-width: 54ch; font-size: 15px; line-height: 1.78; color: var(--muted); }

.grid { display: grid; gap: 12px; margin-top: 34px; }
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.tile {
  padding: 20px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface-2);
}
.tile h3 { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.45; }
.tile p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.78; color: var(--muted); }
/* band 안에서는 타일 바탕이 섹션과 붙어 보여서, 한 단계 더 어둡게 깝니다. */
.sec.band .tile { background: var(--bg); }

/* ------------------------------------------------------------------ 붙이는 순서
 * 번호를 CSS 카운터로 매깁니다. 항목을 늘리거나 순서를 바꿔도 숫자가 알아서 따라옵니다. */
.steps-num { counter-reset: step; list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 12px; }
.steps-num li {
  counter-increment: step; position: relative;
  padding: 20px 20px 20px 64px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--bg);
}
.steps-num li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 20px; top: 21px;
  font-size: 13px; font-weight: 800; letter-spacing: .04em;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.steps-num h3 { margin: 0; font-size: 15.5px; font-weight: 600; }
.steps-num p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.78; color: var(--muted); }

/* ------------------------------------------------------------------ 문의 */
.contact-rows { padding: 34px 0 0; max-width: 560px; }

/* ------------------------------------------------------------------ 푸터 */
.home-foot {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
  max-width: 880px; margin: 0 auto;
  padding: 26px 24px max(34px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12.5px;
}
.home-foot a { color: var(--muted); text-decoration: none; }
.home-foot a:hover { color: var(--ink); }

/* 안드로이드에서 연락처 저장을 누른 뒤 뜨는 안내.
 * 파일을 받는 것까지는 되는데 '한 번 더 눌러 연락처로 연다' 에서 막히는 사람이 많습니다. */
.dl-hint {
  border-left: 2px solid var(--blue);
  padding-left: 12px;
  color: var(--ink);
}
.dl-hint b { font-weight: 600; }