/* hero.css — 첫 화면(C 레이아웃 + c2 홈 코발트 + 꽉 채움). 원본: site-design/linkbiseo-v4/hero-abc.css + hero-c.css + hero-c-bg.css 를 이 순서로 합쳤어요. */
/*
 * hero-abc.css — 첫 화면 A·B·C 공통 (홈 토큰만, home-system.css + linkbiseo-v4.css 위에 얹어요).
 * 공통 규칙: 제목 그대로 · 설명 한 줄(#hero-lead 한 곳) · 버튼 하나 + 보조 링크 ·
 * 폰 둘레 칩·연결선 없음 · 폰은 결과(카드 → 9:00 알림)부터 · 최대 굵기 600.
 * 안별 차이는 hero-a.css / hero-b.css / hero-c.css.
 */

/* Sky intensity knobs: same home gradient, washed toward white per option. */
.hero-x .hero-shell::after { content: ""; position: absolute; inset: 0; background: rgb(255 255 255 / var(--wash, 0)); }
.hero-x .hero-aurora { opacity: var(--aurora, 0.9); }
.hero-x .hero-dots { opacity: var(--dots, 1); }

.hx-copy { display: flex; flex-direction: column; align-items: flex-start; }
.hx-eyebrow { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--link); }
.hx-eyebrow + .hx-title { margin-top: 12px; }
.hx-title { font-size: 34px; line-height: 44px; }
.hx-title br { display: none; }
.hx-lead { margin-top: 14px; font-size: 16px; line-height: 25px; color: var(--hero-sub); text-wrap: pretty; }
.hx-actions { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.hx-note { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: rgb(9 11 12 / 0.6); }
.hx-note .ico { width: 14px; height: 14px; }
@media (width >= 48rem) {
  .hx-title { font-size: 58px; line-height: 68px; }
  .hx-title br { display: inline; }
  .hx-lead { margin-top: 16px; font-size: 19px; line-height: 30px; }
  .hx-actions { margin-top: 28px; }
  .hx-note { margin-top: 12px; }
}

/* Split layout (B, C): text left, picture right; stacked on phones. */
.hx-split { margin-inline: auto; display: grid; max-width: 1248px; gap: 28px; padding: 28px 20px 0; }
@media (width >= 64rem) {
  .hx-split { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 56px; padding: 32px 72px 40px; }
  .hx-split .hx-title { font-size: 52px; line-height: 64px; letter-spacing: -0.025em; }
  .hx-split .hx-lead { font-size: 18px; line-height: 28px; }
}

/* Phone (v5 markup) without the side captions */
.pd { display: block; max-width: none; margin: 0; }
.pd .iphone { zoom: var(--pz, 1); }
.pd-wrap { position: relative; isolation: isolate; width: max-content; margin-inline: auto; }
.pd-pause {
  position: absolute; right: -46px; bottom: 12px; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9999px;
  background: rgb(255 255 255 / 0.72); color: var(--muted-foreground); outline: none;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgb(9 11 12 / 0.1);
  transition: color 150ms var(--ease-ui), background-color 150ms var(--ease-ui), scale 150ms var(--ease-ui);
}
.pd-pause:hover { color: var(--foreground); background: #fff; }
.pd-pause:active { scale: 0.96; }
.pd-pause:focus-visible { box-shadow: 0 0 0 3px rgb(115 115 115 / 0.4); }
.pd-pause .ico { width: 14px; height: 14px; }
.pd-pause [data-icon="play"] { position: absolute; translate: 1px 0; }

/* 2026-10-27 캐치프레이즈: 제목 아래 한 줄(#hero-lead)을 설명이 아니라 내세우는 말로.
   제목(SemiBold 600, 48–58px)보다 한 단계 아래: 500, 22–24px, 진한 남색(홈 --hero-ink 계열). */
.hx-lead { font-size: 19px; line-height: 28px; font-weight: 500; color: rgb(9 11 12 / 0.82); letter-spacing: -0.01em; }
@media (width >= 48rem) { .hx-lead { margin-top: 18px; font-size: 24px; line-height: 34px; } }
@media (width >= 64rem) { .hx-split .hx-lead { font-size: 22px; line-height: 32px; } }

/* 보관함 마지막 장면: "보관한 자료는 내 AI가 읽는 곳에 자동으로 쌓여요" 줄이 브랜드 색으로 켜져요. */
.pd .l-ai { margin: 8px 10px 0; padding: 6px 8px; border-radius: 9px; transition: background-color 450ms var(--ease-ui), color 450ms var(--ease-ui), box-shadow 450ms var(--ease-ui); }
.pd.is-ai .l-ai { background: rgb(43 76 255 / 0.08); color: #1f38c4; box-shadow: inset 0 0 0 1px rgb(43 76 255 / 0.2); }
@media (prefers-reduced-motion: reduce) { .pd .l-ai { transition: none; } }
/* C. 자료가 모이는 그림 — 받은 링크 카드들(지어낸 자료, 출처는 플랫폼 이름 글자 + 중립 아이콘)이 폰 쪽으로 겹쳐
   들어가고, 폰은 그중 한 장의 카드와 9:00 알림을 보여 줘요. 데이터는 가상의 사용자 한 명("디자인 인턴 지원 준비") 기준.
   배치는 좌우 분할: 가운데 정렬로 두면 글 아래에 그림을 놓아야 해서 1440×900 안에 폰을 넣으려면
   폰이 0.7배 아래로 작아지고 링크 카드가 폰 둘레에 떠 있는 모양(빼기로 한 칩 배치)이 돼요.
   분할이면 폰을 0.95배로 크게 두고, 카드가 한쪽에서 폰으로 '흘러 들어가는' 방향이 생겨요. */
.hero-c { --wash: 0.64; --aurora: 0.35; --dots: 0.18; --hero-overhang: 96px; }
.hero-c .pd { --pz: 0.7; }
@media (width >= 64rem) { .hero-c { --hero-overhang: 0px; } .hero-c .pd { --pz: 0.95; } }

.hc-scene { display: flex; align-items: center; justify-content: center; }
.hc-scene .pd-wrap { margin-inline: 0; z-index: 2; }
.hc-links { position: relative; z-index: 1; display: grid; width: 166px; flex: none; gap: 8px; margin-right: -26px; }
.hc-link {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px;
  border-radius: var(--radius-sm); background: #fff; padding: 8px 10px 8px 8px;
  box-shadow: 0 0 0 0.5px rgb(9 11 12 / 0.1), 0 6px 16px -8px rgb(16 28 110 / 0.2);
}
.hc-link:nth-child(even) { margin-left: 14px; margin-right: -14px; }
.hc-link:nth-child(n + 5) { display: none; }
.hc-link.is-focus { box-shadow: 0 0 0 1.5px rgb(43 76 255 / 0.55), 0 10px 24px -10px rgb(43 76 255 / 0.35); }
.hc-tile { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 7px; background: var(--muted); color: rgb(9 11 12 / 0.82); }
.hc-tile .ico { width: 13px; height: 13px; }
.hc-text { min-width: 0; }
.hc-text b { display: block; font-size: 12px; line-height: 16px; font-weight: 500; }
.hc-text small { display: block; font-size: 10.5px; line-height: 14px; color: var(--muted-foreground); }
@media (width >= 64rem) {
  .hc-links { width: 268px; gap: 10px; margin-right: -40px; }
  .hc-link { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px 14px 10px 10px; }
  .hc-link:nth-child(even) { margin-left: 22px; margin-right: -22px; }
  .hc-link:nth-child(n + 5) { display: grid; }
  .hc-tile { width: 30px; height: 30px; border-radius: 8px; }
  .hc-tile .ico { width: 14px; height: 14px; }
  .hc-text b { font-size: 13px; line-height: 18px; }
  .hc-text small { font-size: 11.5px; line-height: 16px; }
}
/* Cards slide in from the left, one after another, toward the phone. */
@keyframes hc-in { from { opacity: 0; translate: -28px 0; } }
.js .hc-link { animation: hc-in 700ms var(--ease-reveal) both; animation-delay: calc(500ms + var(--i, 0) * 90ms); }
@media (prefers-reduced-motion: reduce) { .js .hc-link { animation: none; } }
/* SemiBold 제목이 글 칸(≈580px)에서 세 줄로 넘어가지 않게: 48/60, 링크 칸 250px. */
@media (width >= 64rem) {
  .hero-c .hx-title { font-size: 48px; line-height: 60px; }
  .hero-c .hc-links { width: 250px; }
}

/* 마지막 장면(보관함): 받은 링크 카드들이 폰 쪽으로 모여 들어가고, 폰 안에서 "내 AI가 읽는 곳" 줄이 켜져요.
   카드 장면으로 돌아가면 다시 나와요. 들어오는 애니메이션은 backwards만 써서 이 transition과 겹치지 않아요. */
.js .hc-link { animation-fill-mode: backwards; }
.hc-link { transition: opacity 450ms var(--ease-ui), translate 650ms var(--ease-reveal); transition-delay: calc(var(--i, 0) * 60ms); }
.hero-c[data-gather] .hc-link { opacity: 0; translate: 56px 0; }
@media (prefers-reduced-motion: reduce) { .hc-link { transition: none; } }

/* 보관함 타일 "디자인 인턴 공고 모아 보기" = 큐레이션·목록 (앱 ds.css .k-curation) */
.k-curation { --k-deep: #2cb8c4; --k-mid: #9ee3e8; --k-pale: #e3f8fa; --k-tone: #157780; }

/* 링크 카드가 폰 밑으로 들어가는 만큼(--tuck) 글자 오른쪽을 비워 둬서 제목이 폰에 가려지지 않게 해요. */
.hc-links { margin-right: -20px; }
.hc-link { --tuck: 20px; padding-right: calc(8px + var(--tuck)); color: var(--foreground); }
.hc-link:nth-child(even) { margin-left: 10px; margin-right: -10px; --tuck: 30px; }
@media (width >= 64rem) {
  .hero-c .hc-links { margin-right: -26px; }
  .hc-link { --tuck: 26px; padding-right: calc(12px + var(--tuck)); }
  .hc-link:nth-child(even) { margin-left: 14px; margin-right: -14px; --tuck: 40px; }
}
/*
 * hero-c-bg.css — C 레이아웃은 그대로, 첫 화면 배경만 세 가지 + 바깥 테두리 두 가지.
 *   c1 차분한 무채색 · c2 홈 코발트 한 색 · c3 깊은 잉크색(첫 화면만 어두움)
 *   data-frame="full"  (가) 꽉 채움: 바깥 여백·테두리·둥근 모서리 없음, 내비도 배경 위
 *   data-frame="inset" (나) 정돈된 여백: 사방 12px, 테두리 없이 둥근 모서리 하나
 * 홈 토큰만 써요(--brand #2b4cff, --foreground, --radius-xl). 보라·하늘 빛 덩어리(aurora)는 세 안 모두 꺼요.
 * 줄무늬 방지: 홈과 같은 grain(soft-light)을 그대로 깔아 디더링해요.
 */
.hero-cbg .hero-aurora { display: none; }
.hero-cbg .hero-shell::after { display: none; }
.hero-cbg .hero-dots { opacity: var(--dots, 0); }

/* ---------- 바깥 테두리 ---------- */
.hero-cbg[data-frame="full"] { padding: 0; }
.hero-cbg[data-frame="full"] .hero-shell { border-radius: 0; box-shadow: inset 0 -1px 0 var(--hairline); }
.hero-cbg[data-frame="full"] .hero-navwrap { padding-top: 8px; }
.hero-cbg[data-frame="inset"] { padding: 12px; }
.hero-cbg[data-frame="inset"] .hero-shell { border-radius: var(--radius-xl); box-shadow: none; }
.hero-cbg[data-frame="inset"] .hero-navwrap { padding-top: 0; }

/* ---------- c1 차분한 무채색: 웜 오프화이트 → 아주 옅은 회색. 색은 폰 뒤(그림자·빛)와 링크 카드에만. ---------- */
.hero-c1 { --dots: 0; }
.hero-c1 .hero-bg {
  background:
    radial-gradient(42% 30% at 50% 88%, rgb(43 76 255 / 0.07), rgb(43 76 255 / 0) 70%),
    linear-gradient(180deg, #fbfaf7 0%, #f6f5f1 55%, #efeeeb 100%);
}
@media (width >= 64rem) {
  .hero-c1 .hero-bg {
    background:
      radial-gradient(30% 46% at 79% 56%, rgb(43 76 255 / 0.08), rgb(43 76 255 / 0) 70%),
      radial-gradient(26% 36% at 66% 50%, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0) 70%),
      linear-gradient(180deg, #fbfaf7 0%, #f6f5f1 55%, #efeeeb 100%);
  }
}
.hero-c1 .hero-grain { opacity: 0.22; }
.hero-c1 .hc-link.is-focus { box-shadow: 0 0 0 1.5px rgb(43 76 255 / 0.5), 0 10px 24px -10px rgb(43 76 255 / 0.3); }
.hero-c1 .iphone { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), inset 0 0 0 2.5px #0c0d10, 0 0 0 0.5px rgb(9 11 12 / 0.35), 0 40px 70px -26px rgb(20 24 40 / 0.35), 0 14px 28px -14px rgb(20 24 40 / 0.22); }

/* ---------- c2 홈 코발트 한 색: 위는 거의 흰색, 아래로 아주 옅은 파랑. 점 무늬 아주 약하게. ---------- */
.hero-c2 { --dots: 0.18; }
.hero-c2 .hero-bg {
  background:
    radial-gradient(70% 45% at 50% 108%, rgb(43 76 255 / 0.2), rgb(43 76 255 / 0) 72%),
    linear-gradient(180deg, #ffffff 0%, #f7f9ff 45%, #e8edff 100%);
}
@media (width >= 64rem) {
  .hero-c2 .hero-bg {
    background:
      radial-gradient(40% 60% at 78% 100%, rgb(43 76 255 / 0.2), rgb(43 76 255 / 0) 72%),
      radial-gradient(45% 40% at 20% 110%, rgb(43 76 255 / 0.1), rgb(43 76 255 / 0) 72%),
      linear-gradient(180deg, #ffffff 0%, #f7f9ff 45%, #e8edff 100%);
  }
}
.hero-c2 .hero-grain { opacity: 0.3; }

/* ---------- c3 깊은 잉크색: 첫 화면만 어둡고 글은 흰색, 폰·링크 카드가 밝게 떠요. ---------- */
.hero-c3 { --dots: 0; --hero-ink: #ffffff; --hero-sub: rgb(255 255 255 / 0.86); --hero-link: rgb(255 255 255 / 0.84); color: #fff; }
.hero-c3 .hero-bg {
  background:
    radial-gradient(46% 34% at 50% 92%, rgb(43 76 255 / 0.42), rgb(43 76 255 / 0) 70%),
    linear-gradient(180deg, #0a0e1c 0%, #0c1329 60%, #101a3c 100%);
}
@media (width >= 64rem) {
  .hero-c3 .hero-bg {
    background:
      radial-gradient(32% 52% at 78% 56%, rgb(43 76 255 / 0.4), rgb(43 76 255 / 0) 70%),
      radial-gradient(50% 50% at 8% 0%, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0) 70%),
      linear-gradient(180deg, #0a0e1c 0%, #0c1329 60%, #101a3c 100%);
  }
}
.hero-c3 .hero-grain { opacity: 0.45; }
.hero-c3 .hero-shell { box-shadow: none !important; }
.hero-c3 .hx-title { color: #fff; }
.hero-c3 .hx-lead { color: rgb(255 255 255 / 0.86); }
.hero-c3 .hx-eyebrow { color: #aebcff; }
.hero-c3 .hero-link { color: var(--hero-link); }
.hero-c3 .hero-link:hover { color: #fff; }
.hero-c3 .hero-cta { background: #fff; color: var(--foreground); box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.6); }
.hero-c3 .hero-cta:hover { background: rgb(255 255 255 / 0.86); }
.hero-c3 .hero-cta::after { background: linear-gradient(105deg, transparent 30%, rgb(43 76 255 / 0.14) 50%, transparent 70%); }
.hero-c3 .hero-nav .logo-word, .hero-c3 .hero-nav .nav-links a, .hero-c3 .hero-nav .mobile-menu summary { color: #fff; }
.hero-c3 .hero-nav .nav-cta { background: #fff; color: var(--foreground); }
.hero-c3 .hero-nav .nav-cta:hover { background: rgb(255 255 255 / 0.86); }
.hero-c3 .hero-nav .mobile-menu summary:hover { background: rgb(255 255 255 / 0.1); }
.hero-c3 .pd-pause { background: rgb(255 255 255 / 0.12); color: rgb(255 255 255 / 0.84); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16); }
.hero-c3 .pd-pause:hover { background: rgb(255 255 255 / 0.2); color: #fff; }
.hero-c3 .iphone { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2), inset 0 0 0 2.5px #0c0d10, 0 0 0 1px rgb(255 255 255 / 0.1), 0 40px 80px -30px rgb(0 0 0 / 0.7), 0 0 90px -20px rgb(43 76 255 / 0.45); }
.hero-c3 .hc-link { box-shadow: 0 0 0 0.5px rgb(255 255 255 / 0.25), 0 12px 28px -12px rgb(0 0 0 / 0.6); }
.hero-c3 .hc-link.is-focus { box-shadow: 0 0 0 1.5px #8ea2ff, 0 12px 28px -10px rgb(43 76 255 / 0.55); }
.hero-c3 :where(a, summary):not(.btn):focus-visible, .hero-c3 .btn-pill:focus-visible, .hero-c3 .pd-pause:focus-visible { box-shadow: 0 0 0 3px rgb(255 255 255 / 0.55); }
.hero-c3 .hc-link, .hero-c3 .hc-text b { color: var(--foreground); }

/* =====================================================================
 * v6-fix (2026-10-28): 첫 화면도 같은 컨테이너(--pad-x, site.css).
 *  - 로고 · 첫 화면 글 · 아래 섹션 내용이 한 왼쪽 선, 폰·멈춤 버튼은 "베타 신청하기" 오른쪽 끝 안쪽.
 *  - 링크 카드는 폰 옆에 나란히(겹침 없음), 제목은 PC에서 한 줄(긴 것만 두 줄).
 *  - 멈춤 버튼은 폰 아래 오른쪽. 1280 아래는 글 → 그림 순서로 쌓고, 폰(<768)에서는 링크 카드 3장을 폰 아래에.
 * ===================================================================== */
.hero-cbg .hero-navwrap { margin: 0; padding-inline: var(--pad-x); }
.hero-cbg .hero-nav { max-width: none; }
.hero-cbg .hx-split { max-width: none; margin: 0; padding: 28px var(--pad-x) 40px; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.hero-c2 { --hero-overhang: 0px; }
@media (width >= 80rem) {
  .hero-cbg .hx-split { grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: center; padding-block: 32px 48px; }
  .hero-cbg .hx-split .hx-title { font-size: 52px; line-height: 64px; }
}

/* scene: link cards | phone — side by side, never overlapping */
.hero-cbg .hc-scene { display: flex; align-items: center; justify-content: center; gap: 20px; }
@media (width >= 80rem) { .hero-cbg .hc-scene { justify-content: flex-end; } }
.hero-cbg .hc-links { width: 300px; margin: 0; gap: 10px; }
.hero-cbg .hc-link, .hero-cbg .hc-link:nth-child(even) { --tuck: 0px; margin: 0; padding: 10px 14px 10px 10px; }
.hero-cbg .hc-link:nth-child(odd) { margin-right: 20px; }
.hero-cbg .hc-link:nth-child(even) { margin-left: 20px; }
.hero-cbg .hc-link:nth-child(n + 5) { display: grid; }
.hero-cbg .hc-text b { font-size: 13px; line-height: 18px; }
.hero-cbg .hc-text small { font-size: 11.5px; line-height: 16px; }
.hero-cbg .hc-scene .pd-wrap { margin: 0; padding-bottom: 46px; }
.hero-cbg .pd { --pz: 0.92; }
.hero-c[data-gather] .hc-link { translate: 32px 0; }
/* pause: under the phone, right edge = phone right edge */
.hero-cbg .pd-pause { right: 4px; bottom: 0; }

@media (width < 48rem) {
  .hero-cbg .hc-scene { flex-direction: column-reverse; align-items: stretch; gap: 20px; } /* 폰 먼저(첫 화면 안), 링크 카드 3장은 그 아래 */
  .hero-cbg .hc-links { width: auto; }
  .hero-cbg .hc-link:nth-child(odd), .hero-cbg .hc-link:nth-child(even) { margin: 0; }
  .hero-cbg .hc-link:nth-child(n + 4) { display: none; }
  .hero-cbg .hc-scene .pd-wrap { margin-inline: auto; }
  .hero-cbg .pd { --pz: 0.78; }
  .hero-c[data-gather] .hc-link { translate: 0 -16px; }
}
.hc-settled .hc-link { animation: none; }