/* ═══════════════════════════════════════════════════════════════
   흐놀 HNOL — forsale.css  (매각 프로젝트 /for-sale/)
   site.css 의 토큰 · 타이포 · 버튼 · 섹션 문법을 그대로 쓰고,
   이 페이지에만 있는 것(기기 프레임 · 화면 벽 · 제품 상세 · 라이트박스)만 더한다.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --fs-navh: 64px;        /* 고정 내비 높이 — forsale.js 가 실측해 갱신 */
  --fs-jumph: 54px;       /* 제품 바로가기 바 높이 */
  --warn: #fbbf24;
}

/* JS 가 없으면 등장 애니메이션용 숨김을 풀어 전부 보이게 한다 */
html:not(.js) .reveal{ opacity:1; transform:none; }

/* 무대의 빛 번짐처럼 본문 폭을 넘는 장식이 모바일 레이아웃 폭을 늘리지 않게 자른다.
   clip 은 스크롤 컨테이너를 만들지 않아 안쪽 sticky(바로가기 바 · 문의 카드)가 그대로 동작한다. */
.fs-page main{ z-index:10; overflow-x:clip; }
#why, #index, #process, #contact{ scroll-margin-top:var(--fs-navh); }

.fs-skip{
  position:fixed; left:12px; top:-64px; z-index:300;
  padding:10px 16px; border-radius:10px;
  background:linear-gradient(96deg, #d9fffd, #cfe0ff); color:#06070d;
  font-weight:600; font-size:14px;
  transition:top .2s var(--ease);
}
.fs-skip:focus{ top:12px; }

.fs-foot__home{ color:var(--dim); border-bottom:1px solid var(--line); transition:.25s var(--ease); }
.fs-foot__home:hover{ color:var(--cyan); border-color:var(--cyan); }

/* ═══════════════════ 기기 프레임 (CSS 로만 그린다) ═══════════════════ */
.fr{ display:block; position:relative; }
.fr img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:50% 0;
}

/* 브라우저 창 */
.fr--browser{
  border-radius:12px; overflow:hidden;
  background:#0c0f18;
  border:1px solid rgba(150,170,220,.2);
  box-shadow:0 50px 120px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.035) inset;
}
.fr__bar{
  display:flex; align-items:center; gap:7px;
  height:32px; padding:0 14px;
  background:linear-gradient(180deg, #161a29, #10131f);
  border-bottom:1px solid rgba(150,170,220,.1);
}
.fr__bar i{ flex:none; width:10px; height:10px; border-radius:50%; background:rgba(150,170,220,.2); }
.fr__bar i:nth-child(1){ background:rgba(255,95,86,.62); }
.fr__bar i:nth-child(2){ background:rgba(255,189,46,.58); }
.fr__bar i:nth-child(3){ background:rgba(39,201,63,.52); }
.fr__url{
  flex:0 1 auto; min-width:0; max-width:46%;
  margin:0 auto; transform:translateX(-26px);
  padding:4px 16px; border-radius:7px;
  background:rgba(150,170,220,.07);
  border:1px solid rgba(150,170,220,.08);
  font:500 10.5px/1.2 var(--mono); letter-spacing:.08em;
  color:var(--dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fr__url:empty{ visibility:hidden; }
.fr--browser .fr__screen{
  display:block; overflow:hidden;
  aspect-ratio:var(--ar, 16/10);
  background:linear-gradient(180deg, #151927, #0d1019);
}

/* 작은 창(썸네일) */
.fr--sm.fr--browser{ border-radius:8px; box-shadow:0 26px 60px -30px rgba(0,0,0,.9); }
.fr--sm .fr__bar{ height:15px; gap:4px; padding:0 7px; }
.fr--sm .fr__bar i{ width:5px; height:5px; }
.fr--sm .fr__url{ display:none; }

/* 휴대폰 — 화면 위 베젤에 스피커 홈만 둔다(캡처 내용을 가리지 않게) */
.fr--phone{ width:100%; }
.fr--phone .fr__body{
  display:block;
  padding:3.4%;
  border-radius:15% / 7%;
  background:linear-gradient(150deg, #282e43, #0b0d15 62%);
  border:1px solid rgba(150,170,220,.26);
  box-shadow:0 50px 110px -45px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.05);
}
.fr--phone .fr__body::before{
  content:""; display:block;
  width:24%; aspect-ratio:7/1;
  margin:.6% auto 2.8%;
  border-radius:99px;
  background:#04050a;
  box-shadow:inset 0 0 0 1px rgba(150,170,220,.14);
}
.fr--phone .fr__screen{
  display:block; overflow:hidden;
  aspect-ratio:390/844;
  border-radius:12% / 5.6%;
  background:#000;
}
.fr--sm.fr--phone .fr__body{ box-shadow:0 26px 60px -30px rgba(0,0,0,.9); }

/* 라이트박스를 여는 버튼 */
.fs-open{
  position:relative; display:block; width:100%;
  padding:0; text-align:left;
  cursor:zoom-in;
  border-radius:14px;
  transition:transform .55s var(--ease-out);
}
.fs-open:hover{ transform:translateY(-4px); }
.fs-open:focus-visible{ outline-offset:6px; }
.fs-open__zoom{
  position:absolute; right:14px; bottom:14px;
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(5,6,11,.74);
  border:1px solid rgba(150,170,220,.28);
  color:var(--ink);
  opacity:0; transform:translateY(6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events:none;
}
.fs-open__zoom svg{ width:18px; height:18px; }
.fs-open:hover .fs-open__zoom,
.fs-open:focus-visible .fs-open__zoom{ opacity:1; transform:none; }
.fr--phone + .fs-open__zoom{ right:10%; bottom:5%; }
.fs-stage__side .fs-open__zoom,
.fs-stage__phone .fs-open__zoom{ display:none; }
@media (hover:none){
  .fs-stage__hero .fs-open__zoom{ opacity:.92; transform:none; width:34px; height:34px; right:10px; bottom:10px; }
  .fs-stage__hero .fr--phone + .fs-open__zoom{ right:9%; bottom:4%; }
}

/* ═══════════════════ 히어로 ═══════════════════ */
.fs-hero{
  position:relative;
  padding:calc(var(--fs-navh) + clamp(36px, 7vh, 84px)) 0 clamp(56px, 9vh, 104px);
  overflow:clip;
}
.fs-hero__grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.04fr);
  gap:clamp(24px, 4vw, 56px);
  align-items:center;
}
.fs-hero__txt{ position:relative; z-index:2; }
.fs-kicker{ margin-bottom:26px; gap:10px; letter-spacing:.1em; }
.fs-live{
  flex:none;
  width:7px; height:7px; border-radius:50%;
  background:#3ddc84;
  animation:statlive 2.4s var(--ease) infinite;
}
.fs-hero__title{
  font-size:clamp(2.1rem, 4.9vw, 3.9rem);
  font-weight:800; letter-spacing:-.05em; line-height:1.12;
}
.fs-hero__title em{
  font-style:normal;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.fs-hero__lede{
  margin-top:24px; max-width:50ch;
  color:var(--ink-2);
  font-size:clamp(.98rem, 1.4vw, 1.1rem); line-height:1.85;
}
.fs-hero__cta{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }
.fs-hero__cta .btn--ghost svg{ width:18px; height:18px; }
.fs-hero__stats{
  margin-top:38px; padding-top:22px;
  border-top:1px solid var(--line-2);
  display:flex; flex-wrap:wrap; gap:18px clamp(26px, 4vw, 52px);
}
.fs-hero__stats dt{
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.05em;
  color:var(--dim); margin-bottom:6px;
}
.fs-hero__stats .fs-stat__k{ font-size:clamp(1.3rem, 2.2vw, 1.7rem); }
.fs-stat__k--txt{ font-size:clamp(1.02rem, 1.6vw, 1.22rem) !important; font-weight:700; letter-spacing:-.03em; color:var(--ink-2); padding-top:.3em; }

/* 실화면 벽 — 세 줄이 기울어진 채로 서로 반대 방향으로 흐른다 */
.fs-wall{
  position:relative;
  height:clamp(520px, 74vh, 720px);
  /* 오른쪽은 화면 끝까지 흘려보낸다(본문 폭 밖 여백 + 패딩만큼) */
  margin-right:calc((100vw - min(100vw, var(--wrap))) / -2 - var(--pad));
  perspective:1700px;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 13%, #000 85%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 9%, #000 88%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(180deg, transparent 0, #000 13%, #000 85%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 9%, #000 88%, transparent 100%);
          mask-composite:intersect;
}
.fs-wall::before{
  content:""; position:absolute; inset:10% 0 10% 8%;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(53,231,224,.16), transparent 70%),
    radial-gradient(40% 40% at 70% 70%, rgba(106,75,255,.2), transparent 70%);
  pointer-events:none;
}
.fs-wall__tilt{
  position:absolute; inset:-8% -14% -8% 2%;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  transform:rotateX(16deg) rotateY(-20deg) rotateZ(6deg);
  transform-origin:30% 50%;
}
.fs-wall__col{
  display:flex; flex-direction:column;
  animation:fsWallY 90s linear infinite;
  will-change:transform;
}
.fs-wall__col--2{ animation-direction:reverse; animation-duration:104s; margin-top:-80px; }
.fs-wall__col--3{ animation-duration:78s; margin-top:-30px; }
.fs-wall__it{ display:block; margin-bottom:18px; }
.fs-wall__it .fr--phone{ width:56%; margin-inline:auto; }
.fs-wall.is-paused .fs-wall__col{ animation-play-state:paused; }
@keyframes fsWallY{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,-50%,0); } }
@keyframes fsWallX{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

@media (max-width:980px){
  .fs-hero__grid{ grid-template-columns:minmax(0, 1fr); }
  .fs-wall{
    height:auto; margin:6px calc(var(--pad) * -1) 0;
    overflow:hidden;
    perspective:none;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-composite:source-over;
            mask-composite:add;
  }
  .fs-wall::before{ inset:0; }
  .fs-wall__tilt{
    position:relative; inset:auto;
    display:flex; flex-direction:column; gap:14px;
    padding:26px 0;
    transform:rotate(-4deg) scale(1.06);
  }
  .fs-wall__col{
    flex-direction:row; align-items:center;
    width:max-content;
    animation-name:fsWallX; animation-duration:70s;
  }
  .fs-wall__col--2{ margin:0 0 0 -140px; animation-duration:84s; }
  .fs-wall__col--3{ display:none; }
  .fs-wall__it{ margin:0 14px 0 0; width:212px; flex:none; }
  .fs-wall__it:has(.fr--phone){ width:66px; }
  .fs-wall__it .fr--phone{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .fs-wall__col, .fs-live{ animation:none; }
}

/* ═══════════════════ 01 인수 포인트 ═══════════════════ */
.fs-why{
  margin-top:52px;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1px;
  background:var(--line-2);
  border:1px solid var(--line-2);
  border-radius:14px; overflow:hidden;
}
.fs-why__it{ padding:clamp(24px, 3vw, 36px); background:rgba(8,10,18,.76); transition:background .4s var(--ease); }
.fs-why__it:hover{ background:rgba(19,23,36,.82); }
.fs-why__no{ font-family:var(--mono); font-size:11px; color:var(--cyan); opacity:.75; letter-spacing:.08em; }
.fs-why__it h3{ margin:16px 0 10px; font-size:1.16rem; letter-spacing:-.033em; }
.fs-why__it p{ color:var(--ink-2); font-size:.93rem; line-height:1.85; }
@media (max-width:860px){ .fs-why{ grid-template-columns:1fr; } }

.fs-note{
  margin-top:22px; max-width:74ch;
  display:flex; gap:10px; align-items:flex-start;
  font-size:.86rem; line-height:1.75; color:var(--dim);
}
.fs-note svg{ flex:none; width:16px; height:16px; margin-top:3px; color:var(--cyan); }

/* ═══════════════════ 02 제품 목록 ═══════════════════ */
.fs-index{
  margin-top:52px;
  display:grid; grid-template-columns:repeat(var(--cols, 4), minmax(0, 1fr));
  gap:22px 16px;
}
#index{ padding-bottom:clamp(40px, 7vh, 80px); }
.fs-card a{
  display:flex; flex-direction:column; height:100%;
  border:1px solid var(--line);
  border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, rgba(19,23,36,.62), rgba(8,10,18,.74));
  transition:border-color .4s var(--ease), transform .5s var(--ease-out), box-shadow .5s var(--ease);
}
.fs-card a:hover{
  border-color:rgba(53,231,224,.36);
  transform:translateY(-4px);
  box-shadow:0 26px 60px -34px rgba(53,231,224,.45);
}
.fs-card__thumb{
  display:block; position:relative;
  aspect-ratio:16/10; overflow:hidden;
  padding:14px 14px 0;
  background:radial-gradient(90% 80% at 50% 120%, rgba(106,75,255,.18), transparent 70%), #070912;
  border-bottom:1px solid var(--line-2);
}
.fs-card__thumb--phone{ display:flex; justify-content:center; }
.fs-card__thumb--phone .fr--phone{ width:36%; }
.fs-card__thumb .fr{ transition:transform .6s var(--ease-out); }
.fs-card a:hover .fr{ transform:translateY(-5px); }
.fs-card__body{ display:flex; flex-direction:column; gap:6px; padding:14px 16px 18px; flex:1; }
.fs-card__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fs-card__no{ font-family:var(--mono); font-size:10.5px; color:var(--cyan); letter-spacing:.08em; }
.fs-card__stage{
  min-width:0; font-size:10.5px; color:var(--dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fs-card__name{ font-size:1.08rem; font-weight:750; letter-spacing:-.035em; line-height:1.3; }
.fs-card__cat{ font-size:.84rem; color:var(--ink-2); line-height:1.55; }

/* 번들 — 점선 상자 하나에 묶고, 라벨은 테두리 위에 걸친다 */
.fs-bundle{
  grid-column:span var(--span, 2);
  position:relative;
  padding:10px;
  border:1px dashed rgba(53,231,224,.36);
  border-radius:20px;
  background:rgba(53,231,224,.025);
}
.fs-bundle__lab{
  position:absolute; z-index:2; top:-13px; left:18px;
  display:flex; align-items:center; gap:9px;
  max-width:calc(100% - 36px);
  padding:3px 12px 3px 4px;
  border-radius:999px;
  background:#0a0d17;
  border:1px dashed rgba(53,231,224,.4);
  font-size:.8rem; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fs-bundle__lab span{
  flex:none;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  color:#06070d; background:var(--cyan);
  padding:2px 8px; border-radius:999px;
}
.fs-bundle__cards{
  display:grid; grid-template-columns:repeat(var(--span, 2), minmax(0, 1fr));
  gap:10px; height:100%;
}

@media (max-width:1080px){
  .fs-index{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .fs-bundle{ grid-column:1 / -1; }
  .fs-card--wide2{ grid-column:1 / -1; }
  .fs-card--wide2 a{ flex-direction:row; }
  .fs-card--wide2 .fs-card__thumb{ flex:none; width:calc(50% - 5px); border-bottom:0; border-right:1px solid var(--line-2); }
  .fs-card--wide2 .fs-card__body{ justify-content:center; }
}
@media (max-width:560px){
  .fs-index{ gap:22px 10px; }
  .fs-bundle{ padding:8px; border-radius:18px; }
  .fs-bundle__cards{ gap:8px; }
  .fs-card__thumb{ padding:10px 10px 0; }
  .fs-card__body{ padding:11px 12px 14px; gap:4px; }
  .fs-card__stage{ display:none; }
  .fs-card__name{ font-size:.98rem; }
  .fs-card__cat{ font-size:.78rem; }
}

/* ═══════════════════ 제품 바로가기 바 ═══════════════════ */
.fs-products{ position:relative; }
.fs-jump__sentinel{ display:block; height:0; }
.fs-jump{
  position:sticky; top:var(--fs-navh); z-index:60;
  height:var(--fs-jumph);
  transition:background .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.fs-jump.is-stuck{
  background:rgba(5,6,11,.84);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-2);
}
.fs-jump__in{
  display:flex; align-items:center; gap:6px;
  height:100%;
  max-width:var(--wrap); margin:0 auto;
  padding:0 var(--pad);
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.fs-jump__in::-webkit-scrollbar{ display:none; }
/* 목록 바로 밑에서는 같은 내용이 겹쳐 보이므로, 달라붙은 뒤에만 드러낸다 */
html.js .fs-jump:not(.is-stuck) .fs-jump__in{ opacity:0; visibility:hidden; transform:translateY(-6px); }
.fs-jump a{
  flex:none;
  display:inline-flex; align-items:center; gap:7px;
  max-width:210px;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid var(--line-2);
  background:rgba(8,10,18,.6);
  font-size:12.5px; font-weight:500; color:var(--ink-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.fs-jump a span{ font-family:var(--mono); font-size:10px; color:var(--dim); }
.fs-jump a:hover{ color:#fff; border-color:rgba(150,170,220,.3); }
.fs-jump a.is-on{
  color:#06070d; font-weight:650;
  border-color:transparent;
  background:linear-gradient(96deg, #d9fffd, #cfe0ff);
}
.fs-jump a.is-on span{ color:rgba(6,7,13,.55); }
.fs-jump__all{ color:var(--dim) !important; }
.fs-jump__bundle{
  flex:none; display:inline-flex; gap:4px;
  padding:3px; border-radius:999px;
  border:1px dashed rgba(53,231,224,.36);
}
.fs-jump__bundle a{ padding:4px 11px; }

/* ═══════════════════ 번들 밴드 ═══════════════════ */
.fs-bband{ position:relative; padding-top:clamp(30px, 5vh, 56px); }
.fs-bband__in{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:12px 28px;
  padding:clamp(22px, 3vw, 30px) clamp(22px, 3vw, 34px);
  border:1px dashed rgba(53,231,224,.36);
  border-radius:20px;
  background:linear-gradient(120deg, rgba(53,231,224,.07), rgba(106,75,255,.05));
}
.fs-bband__lab{
  flex-basis:100%;
  display:flex; align-items:center; gap:10px;
  font-size:.88rem; font-weight:600; color:var(--ink-2);
}
.fs-bband__lab span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  color:#06070d; background:var(--cyan);
  padding:2px 8px; border-radius:999px;
}
.fs-bband__names{
  font-size:clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight:800; letter-spacing:-.04em; line-height:1.25;
}
.fs-bband__names i{ font-style:normal; color:var(--cyan); margin:0 .38em; font-weight:500; }
.fs-bband__desc{ flex:1 1 300px; color:var(--ink-2); font-size:.94rem; line-height:1.75; }
.fs-bband__mail{ margin-left:auto; }
.fs-bband__mail svg{ width:18px; height:18px; }

/* ═══════════════════ 제품 상세 ═══════════════════ */
.fs-prod{
  position:relative;
  padding:clamp(84px, 12vh, 140px) 0 clamp(40px, 6vh, 72px);
  scroll-margin-top:max(0px, calc(var(--fs-navh) + var(--fs-jumph) + 18px - clamp(84px, 12vh, 140px)));
}
.fs-prod::before{
  content:"";
  position:absolute; top:0; left:var(--pad); right:var(--pad);
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}
.fs-bband + .fs-prod::before{ display:none; }
.fs-bband + .fs-prod{ padding-top:clamp(56px, 8vh, 90px); }

.fs-prod__head{ max-width:900px; }
.fs-prod__idx{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin-bottom:18px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--dim);
}
.fs-prod__idx span{
  color:rgb(var(--acc));
  padding:3px 8px; border-radius:5px;
  background:rgba(var(--acc), .1);
  border:1px solid rgba(var(--acc), .26);
}
.fs-prod__idx i{ font-style:normal; }
.fs-prod__name{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px;
  font-size:clamp(2rem, 4.6vw, 3.4rem);
  font-weight:800; letter-spacing:-.048em; line-height:1.1;
}
.fs-prod__name small{
  font-family:var(--mono);
  font-size:clamp(.72rem, 1.1vw, .86rem); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim);
}
.fs-prod__chips{ margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; }
.fs-chip{
  display:inline-flex; align-items:center;
  font-style:normal;
  padding:5px 12px; border-radius:999px;
  border:1px solid var(--line);
  background:rgba(150,170,220,.04);
  font-size:12.5px; font-weight:500; color:var(--ink-2);
  line-height:1.4;
}
.fs-chip--stage{
  color:rgb(var(--acc));
  border-color:rgba(var(--acc), .34);
  background:rgba(var(--acc), .07);
}
.fs-chip--bundle{
  padding:3px 10px;
  font-family:var(--sans); font-size:11.5px; letter-spacing:0;
  color:#cfe0ff;
  border-style:dashed; border-color:rgba(53,231,224,.36);
}
.fs-prod__headline{
  margin-top:28px;
  font-size:clamp(1.35rem, 2.8vw, 2.15rem);
  font-weight:750; letter-spacing:-.04em; line-height:1.32;
}
/* 이 제품이 푸는 문제 — 헤드 바로 아래, 설명보다 먼저 */
.fs-pains{
  margin-top:22px; display:grid; gap:10px;
  list-style:none; padding:0;
}
.fs-pains li{
  position:relative; padding:4px 0 4px 18px;
  border-left:2px solid rgba(var(--acc), .55);
  color:var(--ink);
  font-size:clamp(.98rem, 1.4vw, 1.08rem); font-weight:500; line-height:1.65;
  color:var(--ink-2);
  letter-spacing:-.02em;
}
.fs-prod__sub{
  margin-top:22px; max-width:62ch;
  color:var(--ink-2);
  font-size:clamp(.96rem, 1.35vw, 1.06rem); line-height:1.85;
}

/* 무대 — 대표 화면 + 뒤의 빛 (keyvisual 이 있으면 그 이미지를 깐다) */
.fs-stage{ position:relative; margin-top:clamp(40px, 5.4vw, 70px); isolation:isolate; }
.fs-stage::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%;
  width:min(1320px, 124%); height:128%;
  transform:translate(-50%, -50%);
  background:
    radial-gradient(46% 44% at 50% 50%, rgba(var(--acc), .24), transparent 72%),
    radial-gradient(28% 32% at 80% 72%, rgba(106,75,255,.18), transparent 70%),
    radial-gradient(26% 30% at 18% 30%, rgba(59,107,253,.12), transparent 70%);
  pointer-events:none;
}
.fs-stage.has-kv::before{
  left:calc(var(--pad) * -1); right:calc(var(--pad) * -1);
  top:-10%; bottom:-6%; width:auto; height:auto;
  transform:none;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(5,6,11,.25) 24%, rgba(5,6,11,.35) 72%, var(--bg) 100%),
    var(--kv) center / cover no-repeat;
  opacity:.9;
}
.fs-stage__in{ position:relative; max-width:1080px; margin:0 auto; }
.fs-stage__hero{ display:block; position:relative; z-index:2; }

.fs-stage--combo .fs-stage__in{ padding-right:clamp(0px, 5vw, 70px); }
.fs-stage__phone{
  position:absolute; z-index:3;
  right:0; bottom:-9%;
  width:clamp(92px, 20%, 224px);
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));
}

.fs-stage--trio .fs-stage__in{
  display:flex; justify-content:center; align-items:flex-end;
  max-width:880px;
}
.fs-stage--trio .fs-stage__hero{ width:clamp(170px, 34%, 300px); }
.fs-stage__side{
  position:relative; z-index:1;
  width:clamp(120px, 26%, 232px);
  margin-bottom:5%;
}
.fs-stage__side--l{ margin-right:-4%; transform:rotate(-5deg); }
.fs-stage__side--r{ margin-left:-4%; transform:rotate(5deg); }
@media (max-width:560px){
  .fs-stage--trio .fs-stage__hero{ width:46%; }
  .fs-stage__side{ width:31%; }
  .fs-stage__side--l{ margin-right:-6%; }
  .fs-stage__side--r{ margin-left:-6%; }
}
.fs-stage__side .fr--phone .fr__body{ filter:brightness(.82); transition:filter .4s var(--ease); }
.fs-stage__side .fs-open:hover .fr__body{ filter:none; }

/* 본문 — 왼쪽 내용 · 오른쪽 달라붙는 인수 문의 카드 */
.fs-prod__body{
  margin-top:clamp(64px, 8vw, 104px);
  display:grid;
  grid-template-columns:minmax(0, 1fr) 340px;
  column-gap:clamp(32px, 5vw, 72px);
  align-items:start;
}
.fs-b{ grid-column:1; margin-bottom:clamp(46px, 5vw, 66px); min-width:0; }
.fs-aside{
  grid-column:2; grid-row:1 / span 8;
  position:sticky; top:calc(var(--fs-navh) + var(--fs-jumph) + 22px);
  align-self:start;
  padding:26px;
  border:1px solid rgba(var(--acc), .3);
  border-radius:18px;
  background:linear-gradient(160deg, rgba(var(--acc), .1), rgba(8,10,18,.84) 58%);
  box-shadow:0 30px 80px -52px rgba(var(--acc), .7);
}
@media (max-width:1080px){
  .fs-prod__body{ grid-template-columns:minmax(0, 1fr); }
  .fs-aside{ grid-column:1; grid-row:auto; position:static; order:2; margin-bottom:clamp(46px, 5vw, 66px); }
  .fs-b{ order:3; }
  .fs-b--vision{ order:1; }
}

.fs-lab{
  display:flex; align-items:center; gap:10px;
  margin-bottom:20px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim);
}
.fs-lab::before{ content:""; flex:none; width:18px; height:1px; background:rgb(var(--acc, 53,231,224)); }
.fs-lab i{ font-style:normal; color:rgba(150,170,220,.45); letter-spacing:.06em; }

.fs-vision p{
  max-width:38em;
  font-size:clamp(1.06rem, 1.7vw, 1.3rem);
  line-height:1.8; letter-spacing:-.022em;
  color:var(--ink);
}
.fs-vision p + p{ margin-top:18px; font-size:clamp(.98rem, 1.4vw, 1.1rem); color:var(--ink-2); }

.fs-buyers{ display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.fs-buyers li{ display:flex; gap:10px; font-size:.95rem; line-height:1.6; color:var(--ink); }
.fs-buyers svg{ flex:none; width:16px; height:16px; margin-top:4px; color:rgb(var(--acc)); }
.fs-mail svg{ width:18px; height:18px; }
.btn--solid.fs-mail:hover svg{ transform:none; }
.fs-mail--block{ display:flex; width:100%; justify-content:center; white-space:normal; text-align:center; }
.fs-aside__small{ margin-top:12px; text-align:center; font-size:.78rem; line-height:1.6; color:var(--dim); }
.fs-aside__small span{ font-family:var(--mono); letter-spacing:.02em; overflow-wrap:anywhere; }

/* 기능 */
.fs-feat{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1px;
  background:var(--line-2);
  border:1px solid var(--line-2);
  border-radius:14px; overflow:hidden;
}
.fs-feat li{ padding:22px 22px 24px; background:rgba(8,10,18,.82); }
.fs-feat li:last-child:nth-child(odd){ grid-column:1 / -1; }
.fs-feat__no{ font-family:var(--mono); font-size:10.5px; color:rgb(var(--acc)); opacity:.85; letter-spacing:.08em; }
.fs-feat h4{ margin:10px 0 8px; font-size:1.02rem; font-weight:700; letter-spacing:-.03em; line-height:1.45; }
.fs-feat p{ font-size:.9rem; color:var(--ink-2); line-height:1.78; }
@media (max-width:640px){ .fs-feat{ grid-template-columns:1fr; } }

/* 지금 있는 것 — 숫자 타일 */
.fs-proof{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(136px, 100%), 1fr)); gap:12px; }
.fs-proof li{
  position:relative; overflow:hidden;
  padding:20px 18px 18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(19,23,36,.62), rgba(8,10,18,.74));
}
.fs-proof li::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, rgba(var(--acc), .9), transparent 80%);
}
.fs-stat__k{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:1px 3px;
  font-size:clamp(1.4rem, 2.3vw, 1.9rem);
  font-weight:800; letter-spacing:-.045em; line-height:1.15;
  font-variant-numeric:tabular-nums;
  color:#fff;
  overflow-wrap:anywhere;
}
.fs-stat__pre, .fs-stat__suf{ font-size:.56em; font-weight:600; letter-spacing:-.01em; color:var(--ink-2); }
.fs-stat__l{ display:block; margin-top:9px; font-size:.84rem; line-height:1.55; color:var(--dim); }
.fs-num{ display:inline-block; }
.fs-num.is-counting{ display:inline-grid; }
.fs-num__ghost, .fs-num__live{ grid-area:1 / 1; }
.fs-num__ghost{ visibility:hidden; }
.fs-num__live{ justify-self:end; }

/* 수익 시나리오 — 가정임이 한눈에 보이게(점선 · 노란 '가정' 표) */
.fs-money__intro{ max-width:62ch; margin-bottom:22px; color:var(--ink-2); line-height:1.85; font-size:.98rem; }
.fs-scen{ display:flex; flex-direction:column; gap:12px; }
.fs-sc{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-areas:"tag note" "title note" "math note";
  grid-template-rows:auto auto 1fr;
  gap:10px 26px;
  padding:22px 22px 22px;
  border:1px solid rgba(var(--acc), .24);
  border-radius:16px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(var(--acc), .1), transparent 60%),
    rgba(8,10,18,.8);
}
.fs-sc__tag{
  grid-area:tag; justify-self:start;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  color:rgb(var(--acc));
  padding:3px 8px; border-radius:5px;
  background:rgba(var(--acc), .1);
  border:1px solid rgba(var(--acc), .22);
}
.fs-sc h4{ grid-area:title; font-size:1.02rem; font-weight:700; letter-spacing:-.03em; line-height:1.45; }
.fs-sc__math{ grid-area:math; font-size:.92rem; line-height:1.6; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.fs-sc__eq{ display:block; }
.fs-sc__res{
  display:block; margin-top:4px;
  font-size:clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight:800; letter-spacing:-.04em; line-height:1.25;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.fs-sc__more{ display:block; margin-top:3px; font-size:.82rem; color:var(--dim); }
.fs-sc__pre{ display:block; margin-bottom:6px; padding-bottom:6px; border-bottom:1px dashed var(--line); font-size:.84rem; color:var(--dim); }

/* 큰 그림 — 시장 규모를 놓고 그린 가정. 강조하되 '가정' 표는 그대로 보인다 */
.fs-sc--big{
  border-color:transparent;
  background:
    linear-gradient(#090b14, #090b14) padding-box,
    linear-gradient(120deg, rgba(var(--acc), .85), rgba(106,75,255,.7) 55%, rgba(168,85,247,.55)) border-box;
  box-shadow:0 30px 80px -46px rgba(var(--acc), .75);
}
.fs-sc--big::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(70% 90% at 0% 0%, rgba(var(--acc), .13), transparent 62%);
}
.fs-sc--big > *{ position:relative; }
.fs-sc--big .fs-sc__tag{ color:#06070d; background:linear-gradient(96deg, #d9fffd, #cfe0ff); border-color:transparent; font-weight:600; }
.fs-sc--big .fs-sc__res{ font-size:clamp(1.5rem, 2.8vw, 2rem); }
.fs-sc__note{
  grid-area:note;
  display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  padding:14px 16px;
  border:1px dashed rgba(251,191,36,.34);
  border-radius:12px;
  background:rgba(251,191,36,.035);
  font-size:.8rem; line-height:1.68; color:var(--ink-2);
}
@media (max-width:640px){
  .fs-sc{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"tag" "title" "math" "note"; grid-template-rows:auto; }
}
.fs-sc__note span{
  flex:none; margin-top:1px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  color:var(--warn);
  padding:1px 7px; border-radius:5px;
  border:1px dashed rgba(251,191,36,.5);
}
.fs-money__fine{
  margin-top:14px;
  display:flex; gap:8px; align-items:center;
  font-size:.78rem; color:var(--dim);
}
.fs-money__fine::before{ content:""; flex:none; width:6px; height:6px; border-radius:50%; border:1px dashed var(--warn); }

/* 시장 근거 */
.fs-market{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.fs-market li{
  padding:18px 20px;
  border-left:2px solid rgba(var(--acc), .5);
  border-radius:0 12px 12px 0;
  background:rgba(150,170,220,.035);
}
.fs-market p{ font-size:.95rem; line-height:1.72; color:var(--ink); }
.fs-src{
  display:block; margin-top:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.02em; line-height:1.6;
  color:var(--dim);
  overflow-wrap:anywhere;
}
.fs-market li:last-child:nth-child(odd){ grid-column:1 / -1; }
@media (max-width:640px){ .fs-market{ grid-template-columns:1fr; } }

/* 넘겨받는 것 */
.fs-hand{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 26px; }
.fs-hand li{
  display:flex; gap:10px;
  padding:12px 0;
  border-bottom:1px solid var(--line-2);
  font-size:.94rem; line-height:1.6; color:var(--ink-2);
}
.fs-hand svg{ flex:none; width:18px; height:18px; margin-top:2px; color:rgb(var(--acc)); }
@media (max-width:640px){ .fs-hand{ grid-template-columns:1fr; } }

/* 현재 상태 — 솔직한 한 줄 */
.fs-caveat{
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline;
  padding:16px 20px;
  border:1px solid rgba(251,191,36,.24);
  border-radius:12px;
  background:rgba(251,191,36,.045);
  font-size:.9rem; line-height:1.72; color:var(--ink-2);
}
.fs-caveat__lab{
  flex:none;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  color:var(--warn);
}
.fs-caveat__lab svg{ width:14px; height:14px; position:relative; top:2px; }

/* 실제 화면 갤러리 */
.fs-gal-wrap{ margin-top:clamp(8px, 2vw, 24px); }
.fs-gal{ display:grid; grid-template-columns:repeat(auto-fill, minmax(236px, 1fr)); gap:16px; }
.fs-shot__btn{
  display:flex; flex-direction:column;
  width:100%; height:100%;
  padding:0; text-align:left;
  border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
  background:rgba(8,10,18,.74);
  cursor:zoom-in;
  transition:border-color .35s var(--ease), transform .45s var(--ease-out), box-shadow .45s var(--ease);
}
.fs-shot__btn:hover{
  border-color:rgba(var(--acc), .42);
  transform:translateY(-3px);
  box-shadow:0 24px 60px -34px rgba(var(--acc), .55);
}
.fs-shot__stage{
  display:block; position:relative;
  aspect-ratio:16/10.5; overflow:hidden;
  padding:16px 16px 0;
  background:radial-gradient(90% 80% at 50% 120%, rgba(var(--acc), .2), transparent 70%), #070912;
  border-bottom:1px solid var(--line-2);
}
.fs-shot__stage--phone{ display:flex; justify-content:center; padding-top:14px; }
.fs-shot__stage--phone .fr--phone{ width:40%; }
.fs-shot__stage .fr{ transition:transform .55s var(--ease-out); }
.fs-shot__btn:hover .fr{ transform:translateY(-5px); }
.fs-shot__meta{ display:flex; flex-direction:column; gap:5px; padding:14px 16px 16px; }
.fs-shot__meta b{ font-size:.92rem; font-weight:700; letter-spacing:-.025em; line-height:1.45; }
.fs-shot__meta span{
  font-size:.8rem; line-height:1.62; color:var(--dim);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
@media (max-width:560px){
  .fs-gal{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .fs-shot__stage{ padding:10px 10px 0; }
  .fs-shot__meta{ padding:10px 11px 12px; }
  .fs-shot__meta b{ font-size:.84rem; }
  .fs-shot__meta span{ display:none; }
}

/* 제품 끝 — 인수 문의 띠 */
.fs-cta{
  margin-top:clamp(40px, 5vw, 60px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px 28px;
  padding:clamp(22px, 3vw, 30px) clamp(22px, 3vw, 34px);
  border:1px solid rgba(var(--acc), .32);
  border-radius:18px;
  background:linear-gradient(120deg, rgba(var(--acc), .1), rgba(106,75,255,.06));
}
.fs-cta__txt{ flex:1 1 280px; }
.fs-cta__h{ font-size:clamp(1.1rem, 2vw, 1.4rem); font-weight:800; letter-spacing:-.035em; }
.fs-cta__s{ margin-top:6px; font-size:.88rem; line-height:1.7; color:var(--ink-2); }
@media (max-width:560px){ .fs-mail--end{ width:100%; justify-content:center; } }

/* ═══════════════════ 03 절차 · 04 문의 ═══════════════════ */
.fs-steps{ grid-template-columns:repeat(var(--n, 4), minmax(0, 1fr)); }
@media (max-width:980px){ .fs-steps{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:560px){ .fs-steps{ grid-template-columns:1fr; } }

.fs-final__prods{ width:100%; padding-top:26px; border-top:1px solid var(--line-2); }
.fs-final__prods ul{ display:flex; flex-wrap:wrap; gap:8px; }
.fs-final__prods a{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:999px;
  border:1px solid var(--line);
  font-size:13px; color:var(--ink-2);
  transition:.25s var(--ease);
}
.fs-final__prods a:hover{ color:var(--cyan); border-color:rgba(53,231,224,.45); background:rgba(53,231,224,.06); }
.fs-final__prods svg{ width:15px; height:15px; }

/* ═══════════════════ 라이트박스 ═══════════════════ */
.fs-lb{
  position:fixed; inset:0; z-index:9500;
  opacity:0;
  transition:opacity .22s var(--ease);
}
.fs-lb[hidden]{ display:none; }
.fs-lb.is-open{ opacity:1; }
.fs-lb__scrim{
  position:absolute; inset:0;
  background:rgba(3,4,9,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.perf-lite .fs-lb__scrim{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(3,4,9,.97); }
/* 패널의 빈 곳을 누르면 뒤의 스크림이 받아 닫힌다 */
.fs-lb__panel{
  position:relative; height:100%;
  width:min(1500px, 100%); margin:0 auto;
  display:flex; flex-direction:column;
  padding:12px clamp(12px, 5.4vw, 92px) 20px;
  pointer-events:none;
}
.fs-lb__top, .fs-lb__imgwrap, .fs-lb__cap, .fs-lb__nav{ pointer-events:auto; }
.fs-lb__top{ display:flex; align-items:center; gap:14px; min-height:52px; }
.fs-lb__prod{ font-weight:700; letter-spacing:-.02em; }
.fs-lb__count{ font-family:var(--mono); font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums; }
.fs-lb__close{
  margin-left:auto;
  width:46px; height:46px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(8,10,18,.72);
  transition:.25s var(--ease);
}
.fs-lb__close svg{ width:20px; height:20px; }
.fs-lb__close:hover{ border-color:rgba(53,231,224,.5); color:var(--cyan); }
.fs-lb__fig{
  flex:1; min-height:0; margin:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px;
}
.fs-lb__imgwrap{ display:block; max-width:100%; touch-action:pan-y; }
.fs-lb__imgwrap img{
  display:block; margin:0 auto;
  width:auto; height:auto;
  max-width:100%;
  max-height:calc(100vh - 200px);
  max-height:calc(100svh - 200px);
  border-radius:10px;
  background:#fff;
  box-shadow:0 40px 120px -40px #000, 0 0 0 1px rgba(150,170,220,.16);
  opacity:0; transform:scale(.985);
  transition:opacity .22s var(--ease), transform .3s var(--ease-out);
}
.fs-lb__imgwrap img.is-ready{ opacity:1; transform:none; }
.fs-lb.is-phone .fs-lb__imgwrap img{ border-radius:24px; background:#000; }
.fs-lb__cap{ max-width:70ch; text-align:center; display:flex; flex-direction:column; gap:4px; }
.fs-lb__cap b{ font-size:1rem; font-weight:700; letter-spacing:-.02em; }
.fs-lb__cap span{ font-size:.86rem; line-height:1.65; color:var(--ink-2); }
.fs-lb__nav{
  position:absolute; top:50%;
  width:52px; height:52px; margin-top:-26px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(8,10,18,.78);
  color:var(--ink);
  transition:.25s var(--ease);
}
.fs-lb__nav svg{ width:22px; height:22px; }
.fs-lb__nav:hover{ border-color:rgba(53,231,224,.5); color:var(--cyan); }
.fs-lb__nav[hidden]{ display:none; }
.fs-lb__nav--prev{ left:clamp(8px, 1.6vw, 24px); }
.fs-lb__nav--next{ right:clamp(8px, 1.6vw, 24px); }
@media (max-width:760px){
  .fs-lb__panel{ padding:8px 12px 84px; }
  .fs-lb__nav{ top:auto; bottom:18px; margin-top:0; width:48px; height:48px; }
  .fs-lb__nav--prev{ left:calc(50% - 60px); }
  .fs-lb__nav--next{ right:calc(50% - 60px); }
  .fs-lb__imgwrap img{ max-height:calc(100svh - 250px); }
  .fs-lb__cap span{ font-size:.8rem; }
}
@media (prefers-reduced-motion:reduce){
  .fs-lb, .fs-lb__imgwrap img{ transition:none; }
}