/* ═══════════════════════════════════════════════════════════════
   home.css — 홈 = 라이브 데모
   첫 화면(데스크톱 · 모바일 모두)은 데모 빌더 하나가 꽉 채운다:
   위에 훅 한 줄 + 실제 제작 기간, 아래에 왼쪽 대화 · 오른쪽 미리보기.
   그 아래는 다음 단계 세 갈래 → 회사 한 줄(h1) → 서비스 → FAQ → 푸터.
   site.css(토큰 · 내비 · 섹션 · FAQ · 푸터)와 studio.css(데모 빌더) 위에 얹힌다.
   ═══════════════════════════════════════════════════════════════ */

.skiplink{
  position:absolute; left:-9999px; top:0; z-index:200;
  padding:12px 18px; border-radius:0 0 10px 0;
  background:var(--cyan); color:#06070d; font-weight:700;
}
.skiplink:focus{ left:0; }

/* ─────────────────── 첫 화면 ─────────────────── */
.stage{
  --navh: 62px;
  position:relative; isolation:isolate;
  height:100vh; height:100svh;
  min-height:620px;
  padding:calc(var(--navh) + clamp(10px, 2vh, 22px)) var(--pad) clamp(14px, 2.4vh, 26px);
  display:flex;
}
/* 배경: 은은한 빛 두 개 + 아주 옅은 격자. 셰이더 없이 CSS 만 — 첫 페인트를 막지 않는다 */
.stage::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(46% 52% at 74% 34%, rgba(106,75,255,.22), transparent 70%),
    radial-gradient(38% 46% at 16% 78%, rgba(53,231,224,.13), transparent 72%),
    radial-gradient(60% 40% at 50% 0%, rgba(59,107,253,.10), transparent 70%),
    var(--bg);
}
.stage::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(rgba(150,170,220,.055) 1px, transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg, rgba(150,170,220,.055) 1px, transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 42%, #000 20%, transparent 80%);
          mask-image:radial-gradient(75% 70% at 50% 42%, #000 20%, transparent 80%);
}
.stage__anchor{ position:absolute; top:0; left:0; width:1px; height:1px; }

.stage__in{
  position:relative;
  width:100%; max-width:1480px; margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  grid-template-rows:auto minmax(0, 1fr);
  grid-template-areas:"hook speed" "studio studio";
  gap:clamp(12px, 2vh, 20px) 40px;
}
.stage__head{ display:contents; }
.stage__hookwrap{ grid-area:hook; align-self:end; min-width:0; }
.stage__speed{ grid-area:speed; align-self:end; }
.stage__studio{ grid-area:studio; min-height:0; display:flex; flex-direction:column; }

.stage__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:10px;
  font-size:12.5px; font-weight:600; letter-spacing:.02em;
  color:var(--ink-2);
}
/* 파비콘 'Hi' 의 보라색 점 — 상태 LED */
.stage__led{
  flex:none; width:7px; height:7px; border-radius:2px;
  background:#c084fc;
  box-shadow:0 0 0 0 rgba(168,85,247,.55), 0 0 10px rgba(168,85,247,.85);
  animation:stageLed 2.6s var(--ease) infinite;
}
@keyframes stageLed{
  0%{ box-shadow:0 0 0 0 rgba(168,85,247,.5), 0 0 10px rgba(168,85,247,.85); }
  70%,100%{ box-shadow:0 0 0 7px rgba(168,85,247,0), 0 0 10px rgba(168,85,247,.85); }
}
.stage__hook{
  font-size:clamp(1.42rem, 2.55vw, 2.35rem);
  font-weight:800; letter-spacing:-.045em; line-height:1.2;
  color:var(--ink);
  text-wrap:balance;
}
.stage__hook span{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* 실제 제작 기간 — 속도가 흐놀의 가장 센 숫자다 */
.stage__speedh{
  margin-bottom:8px;
  font-size:11.5px; color:var(--dim); text-align:right;
}
.stage__speed dl{
  display:flex; gap:0;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(8,10,18,.55);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  overflow:hidden;
}
.stage__speed dl > div{
  display:flex; flex-direction:column; gap:3px;
  padding:9px 16px 10px;
  border-left:1px solid var(--line-2);
}
.stage__speed dl > div:first-child{ border-left:0; }
.stage__speed dt{ font-size:11.5px; color:var(--ink-2); white-space:nowrap; }
.stage__speed dd{
  font-size:15.5px; font-weight:750;
  letter-spacing:-.02em; color:var(--cyan);
  font-variant-numeric:tabular-nums;
}

/* 데모 빌더가 남은 높이를 전부 쓴다 */
.stage .studio{ flex:1; min-height:0; display:flex; flex-direction:column; }
.stage .studio__shell{ flex:1; height:auto; min-height:0; grid-template-rows:minmax(0, 1fr); }
.stage__noscript{
  padding:28px; border:1px solid var(--line); border-radius:16px;
  color:var(--ink-2); background:rgba(8,10,18,.7);
}
.stage__noscript a{ color:var(--cyan); }

/* 태블릿 · 작은 노트북: 기간 표를 훅 아래 한 줄로 내린다(훅이 세 줄로 꺾이지 않게) */
@media (min-width:761px) and (max-width:1100px){
  .stage__in{
    grid-template-columns:minmax(0, 1fr);
    grid-template-rows:auto auto minmax(0, 1fr);
    grid-template-areas:"hook" "speed" "studio";
  }
  .stage__speed{ display:flex; align-items:center; gap:12px; }
  .stage__speedh{ margin:0; text-align:left; white-space:nowrap; }
  .stage__speed dl > div{ flex-direction:row; align-items:baseline; gap:8px; padding:8px 14px; }
}

/* 폰: 훅 → 데모(대화 · 미리보기 탭) → 제작 기간. 데모 패널 높이는 home.js 가 잰 --studio-top 으로 맞춘다
   (못 재면 고정값으로 떨어진다) — 첫 화면 안에 대화창 입력칸까지 들어오게. */
@media (max-width:760px){
  .stage{
    --navh: 58px;
    height:auto; min-height:0;
    padding-bottom:18px;
  }
  .stage__in{
    grid-template-columns:minmax(0, 1fr);
    grid-template-rows:auto auto auto;
    grid-template-areas:"hook" "studio" "speed";
    gap:12px;
  }
  .stage__eyebrow{ margin-bottom:6px; font-size:12px; }
  .stage__hook{ font-size:clamp(1.3rem, 5.6vw, 1.7rem); }
  .stage .studio__chat,
  .stage .studio__view{
    height:calc(100vh - var(--studio-top, 150px) - 66px);
    height:calc(100svh - var(--studio-top, 150px) - 66px);
    min-height:420px; max-height:760px;
  }
  .stage__speed{ align-self:stretch; }
  .stage__speedh{ text-align:left; }
  .stage__speed dl{ flex-direction:column; }
  .stage__speed dl > div{
    flex-direction:row; justify-content:space-between; align-items:baseline; gap:12px;
    border-left:0; border-top:1px solid var(--line-2);
  }
  .stage__speed dl > div:first-child{ border-top:0; }
}

/* ─────────────────── 데모 다음 — 세 갈래 ─────────────────── */
.doors{ position:relative; z-index:1; padding:clamp(28px, 5vh, 56px) 0 clamp(20px, 4vh, 40px); }
.doors__grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.door{
  position:relative;
  display:flex; flex-direction:column; gap:10px;
  min-height:190px;
  padding:22px 22px 20px;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg, rgba(14,17,28,.85), rgba(8,10,18,.9));
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.door:hover{
  border-color:rgba(150,170,220,.3);
  transform:translateY(-3px);
  box-shadow:0 26px 70px -36px rgba(0,0,0,.9);
}
.door--main{
  border-color:rgba(53,231,224,.34);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(53,231,224,.12), transparent 60%),
    linear-gradient(180deg, rgba(14,20,30,.9), rgba(8,10,18,.92));
  box-shadow:0 22px 70px -40px rgba(53,231,224,.5);
}
.door--main:hover{ border-color:rgba(53,231,224,.6); box-shadow:0 26px 80px -36px rgba(53,231,224,.55); }
.door__no{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--dim); }
.door--main .door__no{ color:var(--cyan); }
.door__title{ font-size:clamp(1.08rem, 1.5vw, 1.24rem); font-weight:750; letter-spacing:-.035em; line-height:1.35; padding-right:28px; }
.door__txt{ font-size:.9rem; line-height:1.7; color:var(--ink-2); }
.door__meta{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; color:var(--dim);
}
.door__meta::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.7; }
.door--main .door__meta{ color:var(--ink-2); }
.door--main .door__meta::before{ background:var(--cyan); opacity:1; box-shadow:0 0 8px rgba(53,231,224,.8); }
.door__go{
  position:absolute; top:22px; right:20px;
  width:18px; height:18px; color:var(--ink-2);
  transition:transform .3s var(--ease), color .3s var(--ease);
}
.door:hover .door__go{ transform:translateX(4px); color:var(--cyan); }
@media (max-width:860px){
  .doors{ padding-top:14px; }
  .doors__grid{ grid-template-columns:1fr; gap:10px; }
  .door{ min-height:0; padding:18px 18px 16px; }
}

/* ─────────────────── 회사 한 줄 (h1) ─────────────────── */
.sec--intro{ padding-block:clamp(56px, 10vh, 110px) clamp(40px, 7vh, 80px); }
.intro{
  display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);
  gap:clamp(24px, 5vw, 80px); align-items:end;
}
.intro__title{
  font-size:clamp(1.9rem, 4.2vw, 3.3rem);
  font-weight:800; letter-spacing:-.047em; line-height:1.14;
}
.intro__title .line{ display:block; }
.intro__title em{
  font-style:normal;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.intro__side .hero__sub{ margin-bottom:14px; }
.intro__side .hero__entity{ margin:0 0 18px; max-width:46ch; }
.intro__more{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.9rem; font-weight:600; color:var(--ink-2);
  border-bottom:1px solid var(--line); padding-bottom:3px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.intro__more svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.intro__more:hover{ color:var(--cyan); border-color:var(--cyan); }
.intro__more:hover svg{ transform:translateX(3px); }
@media (max-width:860px){ .intro{ grid-template-columns:1fr; align-items:start; } }

/* 서비스 · FAQ 는 홈에서 조금 더 촘촘하게 */
.home .sec--menu,
.home .sec--faq{ padding-block:clamp(64px, 10vh, 112px); }

@media (prefers-reduced-motion:reduce){
  .stage__led{ animation:none; }
  .door, .door__go{ transition:none; }
}

/* ─────────────────── 첫 화면 — 서비스 한 줄 ───────────────────
   데모가 첫 화면이어도 '무엇을 파는 회사인지'가 먼저 읽혀야 한다(광고 심사 · 처음 온 방문자).
   '서비스와 비용 보기'는 아래 #pricing 으로 내려간다. */
.stage__biz{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  margin-bottom:10px;
  font-size:13.5px; line-height:1.5;
}
.stage__bizlist{ font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.stage__bizlink{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px 3px 11px; border-radius:999px;
  border:1px solid rgba(53,231,224,.35);
  background:rgba(53,231,224,.07);
  font-size:12.5px; font-weight:600; color:var(--cyan);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.stage__bizlink svg{ width:13px; height:13px; }
.stage__bizlink:hover{ background:rgba(53,231,224,.14); border-color:rgba(53,231,224,.6); }
@media (max-width:760px){
  .stage__biz{ margin-bottom:6px; font-size:12.5px; gap:4px 10px; }
  .stage__bizlink{ font-size:12px; padding:2px 9px; }
}

/* ─────────────────── 기간과 비용 (#pricing) ─────────────────── */
.home .sec--offer,
.home .sec--steps,
.home .sec--made,
.home .sec--ask{ padding-block:clamp(64px, 10vh, 112px); }
.offer{
  margin-top:44px;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px;
}
@media (max-width:1100px){ .offer{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:700px){ .offer{ grid-template-columns:1fr; } }
.offer__item{
  display:flex; flex-direction:column; gap:12px;
  padding:clamp(20px, 2.4vw, 28px);
  border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(180deg, rgba(19,23,36,.55), rgba(8,10,18,.7));
}
.offer__no{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--cyan); opacity:.75; }
.offer__name{ font-size:clamp(1.05rem, 1.5vw, 1.22rem); font-weight:750; letter-spacing:-.035em; }
.offer__name a{ color:inherit; transition:color .25s var(--ease); }
.offer__name a:hover{ color:var(--cyan); }
.offer__sum{ font-size:.9rem; line-height:1.75; color:var(--ink-2); }
.offer__facts{
  display:flex; flex-direction:column; gap:0;
  margin:2px 0 0; border-top:1px solid var(--line-2);
}
.offer__facts > div{
  display:grid; grid-template-columns:52px minmax(0, 1fr); gap:12px;
  padding:10px 0; border-bottom:1px solid var(--line-2);
}
.offer__facts dt{ font-size:12px; font-weight:600; color:var(--dim); padding-top:1px; }
.offer__facts dd{ margin:0; font-size:.86rem; line-height:1.65; color:var(--ink); }
.offer__more{
  margin-top:auto; padding-top:6px; align-self:flex-start;
  font-size:.84rem; font-weight:600; color:var(--ink-2);
  border-bottom:1px solid var(--line);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.offer__more::after{ content:" →"; }
.offer__more:hover{ color:var(--cyan); border-color:var(--cyan); }
.offer__note{ margin-top:22px; max-width:70ch; font-size:.86rem; line-height:1.7; color:var(--dim); }
.offer__note a{ color:var(--cyan); border-bottom:1px solid rgba(53,231,224,.35); }

/* ─────────────────── 진행 절차 (#process) ─────────────────── */
.steps{
  margin:44px 0 0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px;
  counter-reset:none;
}
@media (max-width:1100px){ .steps{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:640px){ .steps{ grid-template-columns:1fr; } }
.steps__item{
  display:flex; flex-direction:column; gap:10px;
  padding:22px 20px 20px;
  border:1px solid var(--line); border-radius:14px;
  background:rgba(8,10,18,.6);
}
.steps__no{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--dim); }
.steps__name{ font-size:1.08rem; font-weight:750; letter-spacing:-.03em; }
.steps__item p{ font-size:.88rem; line-height:1.72; color:var(--ink-2); }
.steps__item p.steps__term{
  margin-top:auto; padding-top:10px;
  border-top:1px dashed var(--line);
  font-size:.82rem; font-weight:600; color:var(--cyan);
}

/* ─────────────────── 직접 만든 제품 (#products) ─────────────────── */
.made{
  margin-top:44px;
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px;
}
@media (max-width:1100px){ .made{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:560px){ .made{ grid-template-columns:1fr; } }
.made__card{
  display:flex; flex-direction:column; gap:8px;
  padding:12px 12px 18px;
  border:1px solid var(--line); border-radius:14px;
  background:rgba(8,10,18,.6);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.made__card:hover{ border-color:rgba(53,231,224,.35); transform:translateY(-3px); }
.made__shot{
  margin:0 0 6px; aspect-ratio:16 / 10; overflow:hidden;
  border-radius:9px; border:1px solid var(--line-2); background:#0b0e18;
}
.made__shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.made__tag{ padding:0 6px; font-size:11.5px; color:var(--dim); }
.made__name{ padding:0 6px; font-size:1.02rem; font-weight:750; letter-spacing:-.03em; }
.made__txt{ padding:0 6px; font-size:.86rem; line-height:1.7; color:var(--ink-2); }
.made__more{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; }
.made__sale{ font-size:.88rem; color:var(--ink-2); border-bottom:1px solid var(--line); }
.made__sale:hover{ color:var(--cyan); border-color:var(--cyan); }

/* ─────────────────── 문의 (#inquiry) ─────────────────── */
.ask{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr);
  gap:20px clamp(24px, 5vw, 72px); align-items:start;
}
@media (max-width:900px){ .ask{ grid-template-columns:1fr; } }
.ask__ways{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.ask__way{
  display:flex; flex-direction:column; gap:3px;
  padding:16px 20px;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(8,10,18,.6);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.ask__way strong{ font-size:1rem; font-weight:700; letter-spacing:-.025em; color:var(--ink); }
.ask__way span{ font-size:.84rem; color:var(--ink-2); }
.ask__way:hover{ border-color:rgba(53,231,224,.4); background:rgba(19,23,36,.8); }
.ask__way--main{ border-color:rgba(53,231,224,.38); background:linear-gradient(120deg, rgba(53,231,224,.09), rgba(106,75,255,.06)); }
.ask__consent{ grid-column:1 / -1; font-size:.8rem; line-height:1.6; color:var(--dim); }
.ask__consent a{ color:var(--ink-2); border-bottom:1px solid var(--line); }
.ask__consent a:hover{ color:var(--cyan); border-color:var(--cyan); }
@media (max-width:900px){ .ask__consent{ grid-column:auto; } }

@media (prefers-reduced-motion:reduce){
  .made__card{ transition:none; }
}