/* freedy 브랜드 안내 사이트 공통 스타일
   기조: 흑백 + 여백 + 큰 타이포. 발광·파티클·스피드라인 같은 장식은 쓰지 않는다(이 프로젝트의 실패 조건).
   '웅장함'은 화면을 가득 쓰는 사진·큰 활자·넉넉한 여백으로만 만든다. */
:root{
  /* LIA(lialive.ai) 참조 — 순수 블랙 캔버스. 제품 사진이 가장 밝은 요소가 되게 한다.
     강조색은 브랜드 제품의 오렌지 링에서 가져왔다(형광·네온 대신 한 가지 색만 절제해 쓴다). */
  --ink:#ffffff; --ink-2:#b9bec6; --muted:#7d838c; --line:#1e2126;
  --paper:#000000; --paper-2:#0a0b0d; --dark:#000000; --accent:#ff5a1f; --max:1240px;
  --font:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);
  font-size:16px;line-height:1.75;letter-spacing:-.012em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}

/* 헤더 — 랜딩에서는 어두운 히어로 위에 얹히므로 처음엔 투명·흰 글자, 스크롤하면 흰 배경으로 바뀐다 */
.hd{position:fixed;top:0;left:0;right:0;z-index:30;transition:background .35s ease,border-color .35s ease}
.hd .wrap{display:flex;align-items:center;gap:28px;height:68px}
.hd .logo img{height:19px;width:auto;transition:filter .35s ease}
.hd nav{margin-left:auto;display:flex;gap:26px;font-size:14px}
.hd nav a{text-decoration:none;color:inherit;opacity:.72}
.hd nav a:hover,.hd nav a[aria-current]{opacity:1}
.hd nav a.cta{font-weight:600;opacity:1}
.hd.over{color:#fff}
.hd.over .logo img{filter:invert(1) brightness(2)}
.hd.solid{background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);color:var(--ink)}
.hd.solid .logo img{filter:none}
body.sub{padding-top:68px}          /* 하위 페이지는 헤더가 항상 흰색이라 자리를 비워둔다 */

/* 히어로 — 화면을 가득 채운다 */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  background:var(--dark);color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.92;filter:grayscale(.08) contrast(1.02)}
/* 사진은 최대한 살리고, 글자가 놓이는 아래쪽만 강하게 덮는다(전체를 균일하게 어둡게 하면 사진이 회색으로 죽는다) */
/* 아래쪽 + 왼쪽 두 방향으로 덮는다. 글자는 왼쪽 아래에 놓이고 오른쪽 사진은 밝게 남는다
   (전체를 균일하게 어둡게 하면 사진이 회색으로 죽고, 안 덮으면 흰 글자가 밝은 책상 위에서 안 읽힌다) */
.hero .bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(13,16,19,.86) 0%,rgba(13,16,19,.52) 42%,rgba(13,16,19,.06) 78%),
    linear-gradient(180deg,rgba(13,16,19,.5) 0%,rgba(13,16,19,.1) 34%,rgba(13,16,19,.5) 72%,rgba(13,16,19,.9) 100%)}
.hero .wrap{position:relative;padding-bottom:96px;padding-top:140px}
.hero .mark{height:30px;width:auto;margin-bottom:38px;filter:invert(1) brightness(2)}
.hero h1{margin:0;font-weight:700;letter-spacing:-.045em;line-height:1.08;
  font-size:clamp(38px,7.2vw,86px)}
.hero h1 .thin{font-weight:300;color:#c9cdd2;display:block}
.hero p{margin:26px 0 0;max-width:34em;color:#d4d8dc;font-size:clamp(15px,1.5vw,18px)}
.hero .down{margin-top:52px;font-size:12px;letter-spacing:.16em;color:#8d949b}

/* 숫자 스트립 */
.stats{background:var(--dark);color:#fff;padding:0}
.stats .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#23282e;
  border-top:1px solid #23282e}
.stats .it{background:var(--dark);padding:32px 24px 40px}
.stats .n{font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.03em}
.stats .k{margin-top:6px;color:#8d949b;font-size:13px}

section{padding:104px 0}
section+section{border-top:1px solid var(--line)}
.eyebrow{font-size:11.5px;letter-spacing:.18em;color:var(--muted);margin:0 0 16px}
h1,h2{margin:0;font-size:clamp(24px,3.4vw,40px);font-weight:680;letter-spacing:-.035em;line-height:1.22}
.lead{max-width:46em;color:var(--ink-2);margin:20px 0 0;font-size:17px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.cols.narrow{grid-template-columns:.85fr 1.15fr}

/* 전면 사진 밴드 */
.band{height:min(62vh,560px);background-size:cover;background-position:center}

/* 목록형 사실 나열 */
.facts{margin:34px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.facts li{display:flex;gap:22px;padding:15px 0;border-bottom:1px solid var(--line);font-size:15px}
.facts .y{flex:0 0 84px;color:var(--muted);font-variant-numeric:tabular-nums}
.facts .t{color:var(--ink-2)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.tags span{border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;color:var(--ink-2)}

/* 제품 카테고리 — 첫 화면에서는 상품을 늘어놓지 않는다(사용자 지시). 카테고리로만 안내한다 */
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:38px}
.cats a{text-decoration:none;border:1px solid var(--line);border-radius:12px;padding:22px 18px;
  transition:border-color .25s ease,background .25s ease}
.cats a:hover{border-color:var(--ink);background:var(--paper-2)}
.cats .c{font-size:15px;font-weight:620}
.cats .n{margin-top:4px;font-size:12.5px;color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;
  padding:0 26px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:#fff;
  font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;font-family:inherit}
.btn:hover{background:#000}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--paper-2)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.note{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:26px 28px}
.note h4{margin:0 0 8px;font-size:15px;font-weight:650}
.note p{margin:0;color:var(--ink-2);font-size:14.5px}
.todo{color:#8a5417;background:#fdf6e8;border-color:#f0e2c4}

/* 스크롤 등장 — 8px 올라오며 페이드. 튀는 이징·오버슛은 쓰지 않는다 */
.rv{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* 제품 목록 페이지 */
.cat{margin-bottom:62px}
.cat:last-child{margin-bottom:0}
.cat h3{margin:0 0 18px;font-size:15px;font-weight:650;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cat h3 span{color:var(--muted);font-weight:500;margin-left:8px;font-size:13px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 22px}
.card{display:flex;flex-direction:column;text-decoration:none}
.card .ph{background:var(--paper-2);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.card .ph img{width:100%;height:100%;object-fit:contain;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card:hover .ph img{transform:scale(1.03)}
.card .nm{margin-top:12px;font-size:14px;line-height:1.5}
.card .go{margin-top:5px;font-size:12.5px;color:var(--muted)}
.card:hover .go{color:var(--ink)}

/* AS 안내 — 문의 경로 두 갈래(웹 채팅 / 카카오톡) */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:820px;margin-top:40px}
.way{border:1px solid var(--line);border-radius:16px;padding:26px 26px 28px;background:var(--paper-2);
  display:flex;flex-direction:column}
.way b{font-size:17px;letter-spacing:-.01em}
.way p{margin:9px 0 20px;font-size:13.5px;line-height:1.62;color:var(--ink-2)}
.way .btn{align-self:flex-start}
/* 둘 중 하나를 고르는 구조 — 가운데 '또는' 구분선으로 양자택일임을 드러낸다 */
.way-kakao{display:flex;gap:16px;align-items:stretch}
.pick-one{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}
/* ⚠️ 위쪽 `.way .btn{align-self:flex-start}` 가 여기까지 먹어 버튼이 왼쪽에 붙는다 → 되돌린다 */
.pick-one .btn{align-self:center}
.pick-cap{font-size:12px;color:var(--muted);text-align:center;line-height:1.4}
.or{display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:11.5px;color:var(--muted);flex:none}
.or::before,.or::after{content:"";flex:1;width:1px;background:var(--line);min-height:14px}

/* 화살표 — 평소엔 거의 멈춰 있다가 아주 가끔 4px만 민다(주의만 끌고 튀지 않게) */
.arw{display:inline-block;margin-left:7px;transition:transform .25s ease;
  animation:arw-nudge 2.8s ease-in-out infinite}
@keyframes arw-nudge{0%,74%,100%{transform:translateX(0)}84%{transform:translateX(4px)}}
.btn:hover .arw{animation:none;transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.arw{animation:none;transition:none}}
/* 카카오 브랜드 버튼 — 배경 #FEE500 은 카카오 공식 색이라 임의로 바꾸지 않는다.
   ⚠️ 좌우 폭이 좁아 기본 padding(26px)이면 '카카오톡 열기'가 두 줄로 깨진다 → nowrap + 축소 */
.btn.kakao{background:#FEE500;color:#191919;border-color:#FEE500;
  white-space:nowrap;padding:0 18px}
.btn.kakao:hover{background:#F2DA00;border-color:#F2DA00}
.qr-img{display:block;width:104px;height:104px;border:1px solid var(--line);border-radius:8px;background:#fff}
@media(max-width:720px){.ways{grid-template-columns:1fr}}
/* 좁은 화면에선 구분선을 가로로 눕힌다(세로선이 남으면 어색하다).
   아이폰(375px)에선 버튼+구분선+QR 가로 배치가 카드 폭을 넘긴다 → 반드시 세로로 쌓아야 한다. */
@media(max-width:520px){
  .way-kakao{flex-direction:column;gap:14px}
  .or{flex-direction:row;width:100%}
  .or::before,.or::after{width:auto;height:1px;min-height:0}
}

/* 접수 전 준비 안내 */
.prep{max-width:820px;margin-top:34px;border:1px solid var(--line);border-radius:16px;padding:26px 28px}
.prep b{font-size:15px}
.prep ol{margin:14px 0 0;padding-left:20px}
.prep li{font-size:14px;line-height:1.9;color:var(--ink-2)}
.prep li span{color:var(--muted);font-size:13px}
.prep .note-s{margin:18px 0 0;font-size:13px;line-height:1.65;color:var(--muted)}

/* AS 접수 폼 (⚠️ 2026-08-06 폼 제거로 현재 미사용. 폼을 되살릴 때를 위해 남겨 둠) */
.form{max-width:680px}
.f{margin-bottom:22px}
.f label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px}
.f .hint{font-weight:400;color:var(--muted);margin-left:6px}
.f input[type=text],.f input[type=tel],.f input[type=email],.f select,.f textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:13px 14px}
.f textarea{min-height:150px;resize:vertical;line-height:1.6}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--ink)}
.f .row{display:flex;gap:12px}
.f .row>*{flex:1}
.pick{display:flex;gap:10px;flex-wrap:wrap}
.pick .btn{min-height:44px;font-size:14px}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;margin-top:14px}
.thumbs figure{margin:0;position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper-2)}
.thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover}
.thumbs figcaption{font-size:11px;color:var(--muted);padding:5px 7px;text-align:center}
.thumbs button{position:absolute;top:5px;right:5px;width:26px;height:26px;border-radius:50%;
  border:none;background:rgba(16,16,16,.72);color:#fff;font-size:14px;line-height:1;cursor:pointer}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-2)}
.agree input{margin-top:4px;width:17px;height:17px}
.msg{margin-top:16px;font-size:14px;padding:13px 15px;border-radius:10px;display:none}
.msg.on{display:block}
.msg.err{background:#fdecec;color:#8a1c1c;border:1px solid #f3c9c9}
.msg.ok{background:#eef7f2;color:#1c5e3f;border:1px solid #cfe7db}

footer{background:var(--dark);color:#9aa1a8;padding:64px 0 72px;font-size:13.5px}
footer .cols2{display:flex;gap:48px;flex-wrap:wrap;justify-content:space-between}
footer strong{color:#fff;font-weight:650}
footer a{text-decoration:none}
footer a:hover{color:#fff}
footer .biz{line-height:1.95;max-width:34em}

@media(max-width:1000px){
  .cols,.cols.narrow{grid-template-columns:1fr;gap:30px}
  .grid{grid-template-columns:repeat(3,1fr)}
  .cats{grid-template-columns:repeat(3,1fr)}
  .stats .grid4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .wrap{padding:0 18px}
  section{padding:62px 0}
  .hero .wrap{padding-bottom:64px}
  .grid{grid-template-columns:repeat(2,1fr);gap:22px 14px}
  .cats{grid-template-columns:repeat(2,1fr)}
  .hd .wrap{gap:14px;height:60px}
  .hd nav{gap:15px;font-size:13.5px}
  body.sub{padding-top:60px}
  .f .row{flex-direction:column}
  .facts li{gap:14px}
  .facts .y{flex-basis:64px}
}


/* ══════════════════════════════════════════════════════════════════════════
   랜딩 연출 — 스크롤 구동 애니메이션(CSS scroll-driven animations) 기반.
   지원 브라우저에서는 JS 없이 CSS만으로 돌고, 미지원 브라우저는 site.js가
   IntersectionObserver로 같은 결과를 만든다. 움직임 민감 설정이면 전부 끈다.
   ⚠️ 발광·파티클·튀는 이징은 쓰지 않는다. 마스크로 드러내고, 천천히 밀어 올린다.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){

  /* 히어로 — 사진이 고정된 채 스크롤에 따라 아주 조금 밀려 올라가며 어두워진다 */
  .hero{--par:0}
  .hero .bg{will-change:transform,opacity}
  @supports (animation-timeline:view()){
    .hero .bg{animation:heroPar linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes heroPar{
      from{transform:scale(1.08) translateY(0)}
      to{transform:scale(1.14) translateY(-4%)}
    }
    /* 줄 단위 마스크 등장 — 아래에서 밀려 올라오며 드러난다 */
    .rise>span{display:block;animation:riseIn .9s cubic-bezier(.22,.68,0,1) both}
    .rise>span:nth-child(2){animation-delay:.12s}
    .rise>span:nth-child(3){animation-delay:.2s}
    /* 섹션 등장 — 뷰포트에 들어오는 구간에 맞춰 진행 */
    .rv{animation:fadeUp linear both;animation-timeline:view();animation-range:entry 8% entry 46%}
    @keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
    /* 사진 밴드 — 위아래에서 잘려 있다가 열린다 */
    .band{animation:wipe linear both;animation-timeline:view();animation-range:entry 0% entry 62%}
    @keyframes wipe{
      from{clip-path:inset(18% 0 18% 0);filter:saturate(.7)}
      to{clip-path:inset(0 0 0 0);filter:none}
    }
    .band .in{animation:bandZoom linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes bandZoom{from{transform:scale(1.16)}to{transform:scale(1.02)}}
  }
  @keyframes riseIn{from{opacity:0;transform:translateY(105%)}to{opacity:1;transform:none}}
}
.rise{overflow:hidden}
.rise>span{display:block}

/* 스크롤 구동 애니메이션이 없는 브라우저용 — site.js가 .on을 붙인다 */
@supports not (animation-timeline:view()){
  .rise>span{opacity:0;transform:translateY(105%);transition:opacity .8s ease,transform .9s cubic-bezier(.22,.68,0,1)}
  .rise.on>span{opacity:1;transform:none}
  .rise.on>span:nth-child(2){transition-delay:.1s}
  .rise.on>span:nth-child(3){transition-delay:.18s}
  .band{clip-path:inset(18% 0 18% 0);transition:clip-path 1s cubic-bezier(.22,.68,0,1)}
  .band.on{clip-path:inset(0 0 0 0)}
}
@media (prefers-reduced-motion:reduce){
  .rise>span,.band{opacity:1!important;transform:none!important;clip-path:none!important}
}

/* 밴드 안쪽 이미지(확대용 레이어) */
.band{position:relative;overflow:hidden}
.band .in{position:absolute;inset:0;background-size:cover;background-position:center;will-change:transform}

/* 스티키 스토리텔링 — 왼쪽 사진이 고정된 채 오른쪽 내용이 지나간다 */
.sticky{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.sticky .pin{position:sticky;top:104px;border-radius:16px;overflow:hidden;aspect-ratio:4/5;
  background:var(--paper-2)}
.sticky .pin img{width:100%;height:100%;object-fit:cover}

/* 숫자 카운트업 */
.stats .n{font-variant-numeric:tabular-nums}

/* 인증 마퀴 — 느리게 흐르고, 마우스를 올리면 멈춘다 */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:44px;width:max-content;animation:slide 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{font-size:15px;color:var(--ink-2);white-space:nowrap;letter-spacing:.02em}
.marquee span::after{content:"·";margin-left:44px;color:var(--line)}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none}}

/* 페이지 전환 — 지원 브라우저에서 부드럽게 넘어간다(미지원은 평소대로) */
@view-transition{navigation:auto}


/* ══════════════════════════════════════════════════════════════════════════
   블랙 캔버스 개편 (lialive.ai 참조, 2026-08-01)
   가져온 것: 순수 블랙 배경 / 중앙 발광 비주얼 / 초대형 아웃라인 고스트 타이포 /
             기울어진 3D 카드 / 우측 스티키 인덱스 / 알약형 CTA
   바꾼 것 : 보라 네온 → 제품의 오렌지 링 한 색만, 광량은 절반 이하로.
   ══════════════════════════════════════════════════════════════════════════ */
body{background:#000;color:#fff}
.hd.solid{background:rgba(0,0,0,.72);border-bottom:1px solid var(--line);color:#fff}
.hd.solid .logo img{filter:invert(1) brightness(2)}
.hd .logo img{filter:invert(1) brightness(2)}
.hd nav a{opacity:.62}
.hd nav a.cta{border:1px solid rgba(255,90,31,.55);border-radius:999px;padding:9px 18px;
  opacity:1;letter-spacing:.02em;transition:box-shadow .3s ease,border-color .3s ease}
.hd nav a.cta:hover{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,90,31,.12)}

/* 히어로 — 왼쪽 카피 / 가운데 제품 / 오른쪽 인덱스 3열 */
.hero{min-height:100svh;align-items:center;background:#000}
.hero .bg{display:none}
.hero .wrap{display:grid;grid-template-columns:1fr 1.15fr .8fr;gap:48px;align-items:center;
  padding-top:120px;padding-bottom:80px}
.hero h1{font-size:clamp(34px,3.6vw,54px);line-height:1.12}
.hero h1 .thin{color:#8b9099}
.hero p{font-size:15.5px;color:#9aa0a8;max-width:30em}
.hero .kicker{font-size:11.5px;letter-spacing:.24em;color:var(--accent);margin-bottom:22px}
.hero .mark{display:none}

/* 가운데 제품 — 뒤에 오렌지 광원 하나. 동심원 링·파티클은 쓰지 않는다 */
.orb{position:relative;display:grid;place-items:center}
.orb::before{content:"";position:absolute;width:min(46vw,560px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,90,31,.34) 0%,rgba(255,90,31,.10) 38%,transparent 68%);
  filter:blur(18px)}
/* 컷아웃(투명 PNG)이라 사각 테두리가 없다 — 필드가 제품을 감싸는 것처럼 보인다 */
.orb img{position:relative;width:min(46vw,600px);
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.85)) drop-shadow(0 0 60px rgba(255,90,31,.18))}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .orb img{animation:orbIn 1.2s cubic-bezier(.22,.68,0,1) both}
    @keyframes orbIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
  }
}

/* 오른쪽 인덱스 — 지금 보고 있는 항목만 밝다 */
.idx{border-left:1px solid var(--line);padding-left:20px}
.idx h4{margin:0 0 16px;font-size:12px;letter-spacing:.2em;color:var(--muted);font-weight:600}
.idx a{display:block;text-decoration:none;padding:11px 0;border-bottom:1px solid var(--line);
  color:#6f757d;font-size:13.5px;transition:color .3s ease,padding-left .3s ease}
.idx a strong{display:block;font-size:14.5px;font-weight:600;color:#9aa0a8;transition:color .3s ease}
.idx a:hover{padding-left:8px}
.idx a:hover strong,.idx a:hover{color:#fff}

/* 섹션 — 뒤에 깔리는 초대형 아웃라인 글자 */
section{position:relative;overflow:clip}
.ghost{position:absolute;left:-2vw;top:8%;font-size:clamp(90px,17vw,260px);font-weight:800;
  letter-spacing:-.04em;line-height:.9;color:transparent;-webkit-text-stroke:1px #1b1e23;
  pointer-events:none;user-select:none;z-index:0;white-space:nowrap}
section>.wrap{position:relative;z-index:1}
.stats{background:#000}
.stats .grid4{background:var(--line);border-top:1px solid var(--line)}
.stats .it{background:#000}
.stats .k{color:var(--muted)}
.facts,.facts li{border-color:var(--line)}
.facts .t{color:var(--ink-2)}
.tags span{border-color:var(--line);color:var(--ink-2);background:var(--paper-2)}
.note{background:var(--paper-2);border-color:var(--line)}
.note p{color:var(--ink-2)}
.lead{color:#9aa0a8}
.btn{background:var(--accent);border-color:var(--accent);color:#0a0a0a}
.btn:hover{background:#ff6b34;border-color:#ff6b34}
.btn.ghost{background:transparent;color:#fff;border-color:#2a2e34}
.btn.ghost:hover{background:#111418}

/* 기울어진 3D 카드 — 스크롤에 따라 반듯해진다 */
.tilt{perspective:1400px}
.tilt .card3{transform:rotateY(-14deg) rotateX(6deg) translateZ(0);transform-style:preserve-3d;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper-2);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.9)}
.tilt .card3 img{width:100%;display:block}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .tilt .card3{animation:straighten linear both;animation-timeline:view();animation-range:entry 10% cover 55%}
    @keyframes straighten{
      from{transform:rotateY(-16deg) rotateX(7deg) scale(.94)}
      to{transform:rotateY(0deg) rotateX(0deg) scale(1)}
    }
  }
}

/* 제품 카테고리 카드 — 어두운 판 위에서 테두리가 오렌지로 살아난다 */
.cats a{border-color:var(--line);background:var(--paper-2)}
.cats a:hover{border-color:var(--accent);background:#0e1013}
.cats .n{color:var(--muted)}

/* 밴드·스티키 사진 */
.band{height:min(66vh,600px)}
.sticky .pin{background:var(--paper-2);border:1px solid var(--line)}

/* 제품 목록·폼도 같은 톤으로 */
.card .ph{background:var(--paper-2);border-color:var(--line)}
.card .go{color:var(--muted)}
.f input,.f select,.f textarea{background:#0a0b0d!important;border-color:var(--line)!important;color:#fff!important}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--accent)!important}
.agree{color:var(--ink-2)}
.msg.err{background:#2a1414;color:#ffb4b4;border-color:#4a2020}
.msg.ok{background:#12251b;color:#9fe3c0;border-color:#1f4534}
.thumbs figure{background:var(--paper-2);border-color:var(--line)}
footer{background:#000;border-top:1px solid var(--line);color:var(--muted)}

@media(max-width:1000px){
  .hero .wrap{grid-template-columns:1fr;gap:34px;padding-top:104px}
  .orb img{width:min(72vw,420px)}
  .idx{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:18px}
  .ghost{top:4%;font-size:clamp(64px,20vw,140px)}
}


/* ── 인터랙션 레이어 (fx.js와 짝) ───────────────────────────────────────────── */
/* 히어로 캔버스 — 제품 뒤에서 에너지 필드가 계속 돈다 */
.orb{position:relative}
#field{position:absolute;inset:-30% -26%;width:152%;height:160%;pointer-events:none;z-index:0}
.orb img{position:relative;z-index:1;transition:transform .25s cubic-bezier(.2,.8,.2,1);will-change:transform}

/* 커서 스포트라이트 — 마우스 주변만 아주 옅게 (검은 화면이 죽지 않게) */
#spot{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(280px circle at var(--x,-500px) var(--y,-500px),
    rgba(255,90,31,.09),transparent 62%)}
@media (prefers-reduced-motion:reduce){#spot{display:none}}

/* 오른쪽 스크롤 레일 */
#rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:25;
  display:flex;flex-direction:column;gap:12px;align-items:flex-end}
#rail a{display:flex;align-items:center;gap:9px;text-decoration:none}
#rail i{display:block;width:22px;height:1px;background:#2b3037;transition:width .3s ease,background .3s ease}
#rail em{font-style:normal;font-size:10.5px;letter-spacing:.14em;color:#4a5058;opacity:0;
  transform:translateX(6px);transition:opacity .3s ease,transform .3s ease,color .3s ease}
#rail a:hover em,#rail a.on em{opacity:1;transform:none}
#rail a.on i{width:40px;background:var(--accent)}
#rail a.on em{color:#fff}
@media(max-width:1100px){#rail{display:none}}

/* 3D 틸트 대상 */
[data-tilt]{transition:transform .4s cubic-bezier(.2,.8,.2,1);will-change:transform}

/* 마퀴 — 인증 배지가 계속 흐른다 */
.mq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:20px 0;margin-top:34px;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq .track{display:flex;gap:38px;width:max-content;animation:mqSlide 26s linear infinite}
.mq:hover .track{animation-play-state:paused}
.mq b{font-weight:600;font-size:14px;color:#cdd3da;white-space:nowrap;letter-spacing:.04em}
.mq b::after{content:"◦";margin-left:38px;color:#3a4048}
@keyframes mqSlide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq .track{animation:none}}


/* ══════════════════════════════════════════════════════════════════════════
   메인 = 애플 홈페이지 방식 타일 (2026-08-01 개편 2차)
   1차의 문제: 타일 높이가 내용에 맞춰 줄어들어 사진이 작고 여백만 남았다.
   → 타일을 화면 높이로 고정하고, 사진이 남은 공간을 꽉 채우게 했다.
     스크롤에 맞춰 사진이 확대에서 제자리로 돌아오고 글이 차례로 올라온다.
   ══════════════════════════════════════════════════════════════════════════ */
body.apple{background:#000;color:#f5f5f7}
.apple .hd{position:fixed;background:rgba(0,0,0,.72);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:none}
.apple .hd .wrap{height:46px;max-width:1024px}
.apple .hd nav{gap:32px;font-size:12px}
.apple .hd nav a{opacity:.86;font-weight:400}
.apple .hd nav a:hover{opacity:1}
.apple .hd nav a.cta{border:none;padding:0;font-weight:400}
.apple .hd nav a.cta:hover{box-shadow:none}
.apple .hd .logo img{height:15px}

/* 타일 — 화면 높이를 채우고, 글은 위 / 사진은 아래를 가득 */
.tile{min-height:100svh;display:grid;grid-template-rows:auto 1fr;justify-items:center;
  text-align:center;padding:calc(46px + 6.4vh) 22px 0;overflow:hidden;position:relative}
.tile.dark{background:#000;color:#f5f5f7}
.tile.light{background:#fff;color:#1d1d1f}
.tile.gray{background:#f5f5f7;color:#1d1d1f}
.tile .copy{max-width:min(92vw,880px)}
.tile h2{font-size:clamp(40px,5.6vw,74px);font-weight:700;letter-spacing:-.035em;line-height:1.04;margin:0}
.tile .sub{font-size:clamp(20px,2.4vw,30px);font-weight:600;letter-spacing:-.022em;margin:10px 0 0;opacity:.92}
.tile .body{max-width:32em;margin:14px auto 0;font-size:17px;line-height:1.5;opacity:.72}
.tile .links{display:flex;gap:14px;justify-content:center;margin-top:22px;flex-wrap:wrap;align-items:center}
.tile .links a{color:#2997ff;text-decoration:none;font-size:17px}
.tile.light .links a,.tile.gray .links a{color:#0066cc}
.tile .links a:hover{text-decoration:underline}
.tile .links a.pill{background:#0071e3;color:#fff;border-radius:980px;padding:11px 21px;font-size:16px}
.tile .links a.pill:hover{background:#0077ed;text-decoration:none}

/* 사진 — 남은 영역을 꽉 채운다(잘리지 않게 contain, 아래로 살짝 흘림) */
.tile .stage{width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;
  margin-top:26px}
.tile .stage img{max-height:100%;max-width:min(94vw,1000px);object-fit:contain;
  will-change:transform,opacity}
.tile.photo .stage img{border-radius:20px;max-height:100%;object-fit:cover;width:min(94vw,1180px)}

/* 스크롤 연출 — 사진은 확대에서 제자리로, 글은 차례로 올라온다 */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .tile .stage img{animation:tileZoom linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
    @keyframes tileZoom{from{transform:scale(1.14) translateY(3%);opacity:.35}to{transform:none;opacity:1}}
    .tile h2,.tile .sub,.tile .body,.tile .links{animation:tileUp .8s cubic-bezier(.22,.68,0,1) both;
      animation-timeline:view();animation-range:entry 4% entry 42%}
    .tile .sub{animation-delay:.05s}.tile .body{animation-delay:.1s}.tile .links{animation-delay:.15s}
    @keyframes tileUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
  }
}

/* 2단 타일 */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:#000;padding:10px 0}
.duo>.tile{min-height:78svh;padding-top:6.4vh}
.duo .tile h2{font-size:clamp(30px,3.4vw,46px)}
.duo .tile .stage img{max-width:min(44vw,520px)}

/* 인증 마퀴 — 밝은 타일용 */
.mqline{padding:26px 0 34px;background:#000;border-top:1px solid #1c1c1e}
.mqline .track{display:flex;gap:40px;width:max-content;animation:mqSlide 30s linear infinite}
.mqline b{font-weight:500;font-size:13.5px;color:#86868b;white-space:nowrap;letter-spacing:.05em}
.mqline b::after{content:"·";margin-left:40px;color:#3a3a3c}
.mqline:hover .track{animation-play-state:paused}

@media(max-width:820px){
  .duo{grid-template-columns:1fr}
  .duo>.tile{min-height:66svh}
  .tile{padding-top:calc(46px + 4.6vh)}
  .tile .stage{margin-top:18px}
}


/* ══════════════════════════════════════════════════════════════════════════
   컬러 — 애플 시스템 값으로 통일 (2026-08-01 사용자 지시 "컬러도 전부 애플로")
     배경  #000 / #fff / #f5f5f7        본문  #1d1d1f (밝은 배경) · #f5f5f7 (어두운 배경)
     보조  #86868b / #6e6e73            경계  #d2d2d7
     링크  #0066cc (밝은 배경) · #2997ff (어두운 배경)     버튼 #0071e3 → hover #0077ed
   브랜드 오렌지는 제품 사진 안에만 남기고 UI에서는 쓰지 않는다.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --accent:#0071e3; --link:#0066cc; --link-dark:#2997ff;
  --ink:#1d1d1f; --ink-2:#6e6e73; --muted:#86868b; --line:#d2d2d7;
  --paper:#fff; --paper-2:#f5f5f7;
}
/* 하위 페이지(제품·AS)도 애플 톤의 밝은 화면으로 */
body.sub{background:#fff;color:#1d1d1f}
body.sub .hd{position:fixed;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);color:#1d1d1f}
body.sub .hd .wrap{height:46px;max-width:1024px}
body.sub .hd nav{gap:32px;font-size:12px}
body.sub .hd nav a{color:#1d1d1f;opacity:.86;font-weight:400}
body.sub .hd nav a.cta{border:none;padding:0;font-weight:400}
body.sub .hd .logo img{filter:none;height:15px}
body.sub section{padding:74px 0 90px;background:#fff;border:none}
body.sub h1,body.sub h2{color:#1d1d1f;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.03em}
body.sub .eyebrow{color:var(--muted)}
body.sub .lead{color:var(--ink-2)}

/* 제품 카드 */
body.sub .cat h3{color:#1d1d1f;border-bottom-color:var(--line)}
body.sub .cat h3 span{color:var(--muted)}
body.sub .card .ph{background:#f5f5f7;border:none;border-radius:18px}
body.sub .card .nm{color:#1d1d1f}
body.sub .card .go{color:var(--link)}
body.sub .card:hover .go{color:var(--link)}

/* 폼 */
body.sub .f label{color:#1d1d1f}
body.sub .f input,body.sub .f select,body.sub .f textarea{
  background:#fff!important;border:1px solid var(--line)!important;color:#1d1d1f!important;border-radius:12px}
body.sub .f input:focus,body.sub .f select:focus,body.sub .f textarea:focus{
  border-color:var(--accent)!important;box-shadow:0 0 0 4px rgba(0,113,227,.15)}
body.sub .btn{background:var(--accent);border:none;color:#fff;border-radius:980px;font-weight:400}
body.sub .btn:hover{background:#0077ed}
body.sub .btn.ghost{background:#f5f5f7;color:#1d1d1f}
body.sub .btn.ghost:hover{background:#ebebed}
/* 🔴 `.btn.ghost` 를 새로 쓰지 말 것. 위쪽의 장식용 `.ghost`(초대형 아웃라인 글자,
   position:absolute; left:-2vw)와 이름이 겹쳐 버튼이 화면 밖으로 날아간다.
   실제로 AS 폼의 사진 첨부 버튼이 이 때문에 죽어 있었다(2026-08-06 발견).
   보조 버튼이 필요하면 다른 이름을 쓰고 `body.sub` 스코프로 정의할 것. */
/* ⚠️ body.sub .btn(0,2,1)이 .btn.kakao(0,2,0)를 이기므로 여기서도 스코프를 맞춰야 색이 먹는다 */
body.sub .btn.kakao{background:#FEE500;color:#191919;border:none}
body.sub .btn.kakao:hover{background:#F2DA00}
body.sub .agree{color:var(--ink-2)}
body.sub .note{background:#f5f5f7;border:none;border-radius:18px}
body.sub .note p{color:var(--ink-2)}
body.sub .msg.err{background:#fff2f2;color:#b3261e;border:1px solid #f5c2c0}
body.sub .msg.ok{background:#f0f9f4;color:#1d6f42;border:1px solid #c9e7d5}
body.sub .thumbs figure{background:#f5f5f7;border:1px solid var(--line);border-radius:14px}

/* 푸터 — 애플식 밝은 회색 */
footer{background:#f5f5f7;color:#6e6e73;border-top:1px solid var(--line);padding:40px 0 44px;font-size:12px}
footer .wrap{max-width:1024px}
footer strong{color:#1d1d1f;font-weight:600}
footer a{color:#424245}
footer a:hover{color:#1d1d1f}
footer .biz{line-height:1.9;max-width:40em}
footer span{color:#86868b!important}

/* 히어로 브랜드명 = CI 워드마크 이미지 */
.tile .wordmark{margin:0;line-height:1}
.tile .wordmark img{height:clamp(40px,6vw,86px);width:auto;display:block;margin:0 auto}

/* 헤더 — 로고와 메뉴가 너무 작다는 지적(2026-08-01). 애플 기본값보다 키운다 */
.apple .hd .wrap,body.sub .hd .wrap{height:58px}
.apple .hd .logo img,body.sub .hd .logo img{height:24px}
.apple .hd nav,body.sub .hd nav{gap:34px;font-size:15px}
.apple .hd nav a,body.sub .hd nav a{opacity:.9}
.apple .hd nav a.cta,body.sub .hd nav a.cta{font-weight:600}
body.sub{padding-top:58px}
.tile{padding-top:calc(58px + 6.4vh)}
@media(max-width:640px){
  .apple .hd .wrap,body.sub .hd .wrap{height:54px}
  .apple .hd .logo img,body.sub .hd .logo img{height:21px}
  .apple .hd nav,body.sub .hd nav{gap:18px;font-size:14px}
  body.sub{padding-top:54px}
  .tile{padding-top:calc(54px + 4.6vh)}
}

/* ── 히어로: 밝은 배경 + 제품 2종 (2026-08-01) ─────────────────────────────
   제품이 검정이라 배경을 검정으로 두면 실루엣이 묻힌다 → 애플 제품 페이지처럼 밝은 회색 그라데이션. */
body.apple{background:#fff;color:#1d1d1f}
.apple .hd{background:rgba(255,255,255,.72);border-bottom:1px solid rgba(0,0,0,.06);color:#1d1d1f}
.apple .hd .logo img{filter:none}
.apple .hd nav a{color:#1d1d1f}
.tile.hero2{background:linear-gradient(180deg,#fbfbfd 0%,#f0f0f3 62%,#e9e9ee 100%);color:#1d1d1f}
.tile.hero2 .links a{color:#0066cc}
.tile.dark{background:#f5f5f7;color:#1d1d1f}   /* 남아 있던 검정 타일도 밝게 */
.tile.dark .links a{color:#0066cc}
.mqline{background:#f5f5f7;border-top:1px solid var(--line)}
.mqline b{color:#6e6e73}

/* 두 제품 — 크기·높이를 달리해 하나는 앞, 하나는 뒤로 */
.stage.duo2{position:relative;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:2vw}
.stage.duo2 img{max-height:100%;object-fit:contain}
.stage.duo2 .p1{width:min(46vw,560px);z-index:2}
.stage.duo2 .p2{width:min(34vw,420px);margin-bottom:2%;opacity:.98}

/* 스크롤에 따라 서로 다른 속도로 움직인다(패럴랙스) */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* ⚠️ 히어로는 처음부터 화면 안에 있다 → view() 타임라인은 이미 끝난 상태로 잡혀
       스크롤해도 안 움직인다(2026-08-01 실측). 문서 스크롤 진행도(scroll())를 쓴다. */
    /* 애니메이션 2개를 겹친다: ① 로드 직후 등장(시간 기반) ② 스크롤 패럴랙스(스크롤 기반).
       ⚠️ 타임라인·구간·재생시간을 **각각** 지정해야 한다. 하나만 쓰면 목록이 반복 적용돼
          등장 애니메이션까지 스크롤에 묶이고, 화면 위에서는 opacity 0으로 남아 제품이 안 보인다(실측). */
    .stage.duo2 .p1{animation-name:heroIn,heroP1}
    .stage.duo2 .p2{animation-name:heroIn,heroP2}
    .stage.duo2 img{
      animation-duration:1s,1s;
      animation-timing-function:cubic-bezier(.22,.68,0,1),linear;
      animation-fill-mode:both,both;
      animation-timeline:auto,scroll(root block);
      animation-range:normal,0 100vh}
    .stage.duo2 .p2{animation-delay:.12s,0s}
    @keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
    @keyframes heroP1{from{transform:none}to{transform:translateY(-14%) scale(1.04)}}
    @keyframes heroP2{from{transform:none}to{transform:translateY(-30%) scale(1.1) rotate(-2deg)}}
  }
}
@media(max-width:820px){
  .stage.duo2{gap:0}
  .stage.duo2 .p1{width:58vw}
  .stage.duo2 .p2{width:38vw;margin-left:-6vw}
}

/* 히어로 카피는 처음부터 화면에 있다 → view() 타임라인을 쓰면 중간 상태로 멈춰 흐릿하게 보인다.
   로드 시간 기반 등장으로 바꾼다(실측 2026-08-01: '제품 보기' 버튼 글자가 반투명으로 남았다). */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .tile.hero2 h2,.tile.hero2 .sub,.tile.hero2 .body,.tile.hero2 .links{
      animation:heroIn .9s cubic-bezier(.22,.68,0,1) both;animation-timeline:auto;animation-range:normal}
    .tile.hero2 .sub{animation-delay:.07s}
    .tile.hero2 .links{animation-delay:.14s}
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   히어로 마무리 (2026-08-01 3차)
   · 배경: 생성한 스튜디오 배경(backdrop.jpg) — 제품이 바닥선 위에 서 있는 것처럼 보이게
   · CI 워드마크: 가우시안 블러에서 선명해지며 나타남
   · 🔴 파란 알약 버튼 글자가 안 보이던 버그: 뒤에 추가한 `.tile.hero2 .links a{color:#0066cc}`가
     흰 글자를 덮어썼다. pill은 항상 흰 글자로 못박는다.
   ══════════════════════════════════════════════════════════════════════════ */
.tile.hero2{background:#ececed;position:relative}
.tile.hero2::before{content:"";position:absolute;inset:0;z-index:0;
  background:url(assets/brand/photo/backdrop.jpg) center/cover no-repeat}
.tile.hero2::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 42%,rgba(255,255,255,0) 70%)}
.tile.hero2>*{position:relative;z-index:1}

/* 제품이 바닥에 놓인 느낌 — 접지 그림자 */
.stage.duo2 img{filter:drop-shadow(0 34px 30px rgba(24,26,30,.22)) drop-shadow(0 6px 10px rgba(24,26,30,.12))}

/* 파란 알약 — 글자색 고정 */
.tile .links a.pill,.tile.hero2 .links a.pill,.tile.dark .links a.pill{color:#fff}
.tile .links a.pill:hover{color:#fff}

/* CI 워드마크 — 흐릿하게 번져 있다가 선명해진다 */
@media (prefers-reduced-motion:no-preference){
  .tile .wordmark img{animation:ciIn 1.15s cubic-bezier(.22,.68,0,1) both}
  @keyframes ciIn{
    0%{opacity:0;filter:blur(16px);transform:scale(1.06)}
    60%{opacity:1}
    100%{opacity:1;filter:blur(0);transform:none}
  }
}

/* ── 아래쪽 섹션 효과 보강 ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* 사진 타일: 안쪽 이미지가 스크롤 내내 천천히 움직인다(패럴랙스) */
    .tile.photo .stage img{animation:photoPar linear both;animation-timeline:view();
      animation-range:entry 0% exit 100%}
    @keyframes photoPar{from{transform:translateY(4%) scale(1.08)}to{transform:translateY(-4%) scale(1.02)}}
    /* 마퀴 줄: 들어올 때 좌우에서 열린다 */
    .mqline{animation:mqIn linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    @keyframes mqIn{from{opacity:0;clip-path:inset(0 22% 0 22%)}to{opacity:1;clip-path:inset(0)}}
    /* 2단 타일: 두 장이 시차를 두고 올라온다 */
    .duo>.tile:first-child .copy{animation-delay:0s}
    .duo>.tile:last-child .copy{animation-delay:.12s}
  }
}
/* 사진 타일 이미지에 라운드와 그림자를 줘 판이 떠 보이게 */
.tile.photo .stage img{border-radius:22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
/* 마퀴 줄에 overflow를 안 줘서 페이지 가로가 넘쳤다(실측 2026-08-01) */
.mqline{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

/* ══════════════════════════════════════════════════════════════════════════
   히어로 = 스크롤 무대 (2026-08-01 전면 개편)
   340vh를 스크롤하는 동안 화면은 고정되고, 그 안에서 배경·빛·제품·문구가 이어서 움직인다.
   불꽃·파티클 대신 **빛이 지나가고 제품이 다가오는** 방식으로 고급 톤을 만든다.
   ══════════════════════════════════════════════════════════════════════════ */
.saga{height:340svh;position:relative;background:#0b0c0e}
.saga .pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.saga .bg{position:absolute;inset:-6%;background:url(assets/brand/photo/stage_bg.jpg) center/cover no-repeat;
  will-change:transform,filter}
.saga .sweep{position:absolute;inset:-20% -30%;background:url(assets/brand/photo/stage_sweep.jpg) center/cover no-repeat;
  mix-blend-mode:screen;opacity:0;pointer-events:none;will-change:transform,opacity}
.saga .glow{position:absolute;left:50%;top:64%;width:min(80vw,900px);aspect-ratio:2.6/1;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,rgba(255,238,214,.55),rgba(255,238,214,0) 68%);filter:blur(14px);
  pointer-events:none;will-change:transform,opacity}
.saga .prod{position:absolute;bottom:8vh;display:flex;align-items:flex-end;justify-content:center;width:100%;
  pointer-events:none}
.saga .prod img{position:absolute;bottom:0;will-change:transform,opacity;
  filter:drop-shadow(0 40px 40px rgba(0,0,0,.55))}
.saga .pA{width:min(38vw,520px)}
.saga .pB{width:min(30vw,400px)}
.saga .stack{position:relative;z-index:3;text-align:center;color:#fff;padding-bottom:34vh}
.saga .mark img{height:clamp(38px,5.2vw,74px);width:auto;display:block;margin:0 auto;
  filter:invert(1) brightness(2)}
.saga .mark{will-change:transform,filter,opacity}
.saga .line{position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(92vw,780px);
  will-change:transform,opacity}
.saga .c1{position:relative;left:auto;transform:none;width:auto;margin:22px auto 0}
.saga .line h1{margin:0;font-size:clamp(24px,3.2vw,42px);font-weight:600;letter-spacing:-.03em;line-height:1.18}
.saga .line p{margin:10px 0 0;font-size:clamp(14.5px,1.5vw,18px);color:#c8ccd2}
.saga .line .links{margin-top:20px}
.saga .cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:11px;
  letter-spacing:.2em;color:rgba(255,255,255,.45);z-index:4}
@media(max-width:820px){
  .saga{height:300svh}
  .saga .pA{width:56vw}.saga .pB{width:44vw}
  .saga .stack{padding-bottom:42vh}
}

/* 무대 레이아웃 교정 — 문구 3장이 서로 겹쳐 보이던 문제(실측 2026-08-01).
   글은 위쪽 고정 박스 안에서 교대하고, 제품은 아래쪽 바닥선에 선다. */
.saga .pin{display:block}
.saga .stack{position:absolute;left:50%;top:13vh;transform:translateX(-50%);
  width:min(92vw,860px);height:auto;padding:0;text-align:center;z-index:3}
.saga .mark{margin-bottom:26px}
.saga .lines{position:relative;height:190px}
.saga .line,.saga .c1{position:absolute;left:0;right:0;top:0;width:auto;transform:none;margin:0}
.saga .line p{color:#c9ced5}
.saga .prod{bottom:6vh;height:56vh}
.saga .prod img{bottom:0;max-height:56vh;object-fit:contain}
@media(max-width:820px){
  .saga .stack{top:11vh}
  .saga .lines{height:230px}
  .saga .prod{height:44vh}
  .saga .prod img{max-height:44vh}
}

/* 무대 안 링크 — 타일과 같은 애플식 알약/셰브론 */
.saga .links{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
.saga .links a{text-decoration:none;font-size:16px}
.saga .links a.pill{background:#0071e3;color:#fff;border-radius:980px;padding:11px 22px}
.saga .links a.pill:hover{background:#0077ed}

/* 무대 — 첫 화면이 이미 완성된 그림이어야 한다(JS 로드 전에도 비어 보이지 않게 기본값을 켜둔다) */
.saga{height:320svh}
.saga .prod img{opacity:1}
.saga .pC{width:min(26vw,340px)}
.saga .mark img{opacity:1}
.saga .c1{opacity:1}
.saga .cue{animation:none}

/* 배경 레이어가 위쪽을 못 덮어 검은 띠가 보였다(실측: bg top 11px) → 여유를 더 준다 */
.saga .bg{inset:-14%;transform-origin:center}
.saga .pin{background:#0b0c0e}

/* 제품이 화면에 비해 작고 서로 뭉쳐 보였다(지적 2026-08-01) → 크게, 그리고 넓게 벌린다 */
.saga .prod{bottom:4vh;height:74vh}
.saga .prod img{max-height:74vh}
.saga .pA{width:min(56vw,860px)}
.saga .pB{width:min(42vw,620px)}
.saga .pC{width:min(34vw,500px)}
.saga .stack{top:9vh}
.saga .lines{height:210px}
@media(max-width:820px){
  .saga .prod{height:52vh}
  .saga .prod img{max-height:52vh}
  .saga .pA{width:82vw}.saga .pB{width:66vw}.saga .pC{width:56vw}
}

/* 무대 균형 — 제품이 바닥에 붙어 보이지 않게 중앙 쪽으로 올린다(지적 2026-08-01) */
.saga .prod{bottom:12vh;height:62vh;align-items:center}
.saga .prod img{max-height:62vh}
.saga .pA{width:min(46vw,700px)}
.saga .pB{width:min(38vw,560px)}
.saga .stack{top:8vh}

/* 세 기기 라벨 — 2막에서 제품 옆에 차례로 붙는다 */
.saga .tags{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(78vw,900px);height:min(52vh,520px);pointer-events:none}
.saga .tg{position:absolute;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:13.5px;color:#eef1f5;background:rgba(18,20,24,.55);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);border-radius:999px;padding:8px 14px;opacity:0}
.saga .tg i{width:6px;height:6px;border-radius:50%;background:#2997ff;box-shadow:0 0 0 4px rgba(41,151,255,.22)}
.saga .t1{left:2%;top:26%}
.saga .t2{right:0;top:52%}
.saga .t3{left:6%;bottom:16%}
@media(max-width:820px){
  .saga .prod{bottom:16vh;height:44vh}
  .saga .prod img{max-height:44vh}
  .saga .pA{width:76vw}.saga .pB{width:62vw}
  .saga .tg{font-size:12px;padding:6px 11px}
  .saga .t1{left:-2%}.saga .t3{left:0}
}

.saga{height:300svh}

/* 사용 장면 레이어 — 스튜디오 컷에서 이 장면으로 넘어간다(글자 라벨은 쓰지 않는다) */
.saga .scene{position:absolute;inset:0;background:url(assets/brand/photo/scene_desk.jpg) center/cover no-repeat;
  opacity:0;z-index:2;will-change:transform,opacity}
.saga .scene::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,9,11,.55) 0%,rgba(8,9,11,.12) 40%,rgba(8,9,11,.62) 100%)}
.saga .stack{z-index:4}
.saga .cue{z-index:5}
/* 3막 문구의 제목이 헤더에 가려졌다(실측) → 무대 카피 블록을 내린다 */
.saga .stack{top:15vh}
.saga .lines{height:230px}
@media(max-width:820px){.saga .stack{top:13vh}.saga .lines{height:260px}}
/* 무대 카피가 sticky 안에서 절대배치되니 위치가 어긋났다(실측: 계산값 149px인데 실제 -54px).
   흐름 배치로 바꿔 헤더 아래에 확실히 놓는다. */
.saga .pin{display:flex;flex-direction:column;align-items:center;padding-top:calc(58px + 4.5vh)}
.saga .stack{position:relative;left:auto;top:auto;transform:none;z-index:4}
/* 🔴 section{overflow:clip}이 .saga에도 걸려 sticky가 죽어 있었다(무대가 고정되지 않고 같이 스크롤됨).
   클리핑은 .pin이 하고, 섹션 자체는 자르지 않는다. */
.saga{overflow:visible}
/* sticky 요소가 뷰포트보다 크면 붙어 있지 못하고 밀려 올라간다(실측 pin 993px > 860px).
   높이를 뷰포트와 정확히 맞춘다. */
.saga .pin{height:100vh;max-height:100vh}

/* ══════════════════════════════════════════════════════════════════════════
   히어로 = 사용 장면 한 컷 고정 (2026-08-02)
   이미지는 움직이지 않는다. 브랜드 로고와 글자에만 효과를 준다(사용자 지시).
   ══════════════════════════════════════════════════════════════════════════ */
.saga{height:100vh;overflow:hidden}
.saga .pin{position:relative;height:100vh;padding-top:0;display:grid;place-items:center}
.saga .scene{position:absolute;inset:0;opacity:1;transform:none;
  background:url(assets/brand/photo/scene_desk.jpg) center/cover no-repeat}
.saga .scene::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,9,11,.62) 0%,rgba(8,9,11,.26) 46%,rgba(8,9,11,.68) 100%)}
.saga .stack{position:relative;z-index:4;text-align:center;top:auto;transform:none;padding-bottom:6vh}
.saga .lines{position:relative;height:auto}
.saga .line{position:relative;opacity:1}
.saga .mark{margin-bottom:30px}
.saga .mark img{height:clamp(40px,5.4vw,78px)}
.saga .line h1{font-size:clamp(26px,3.6vw,48px)}
.saga .line p{color:#d7dbe1;margin-top:12px}
.saga .line .links{margin-top:26px}

/* 로고 — 흐릿하게 번져 있다가 선명해진다 */
@media (prefers-reduced-motion:no-preference){
  .saga .mark img{animation:ciBlurIn 1.25s cubic-bezier(.22,.68,0,1) both}
  @keyframes ciBlurIn{
    0%{opacity:0;filter:blur(18px);transform:scale(1.08)}
    100%{opacity:1;filter:blur(0);transform:none}
  }
  /* 글자 — 아래에서 차례로 올라온다 */
  .saga .line h1{animation:txtUp .95s cubic-bezier(.22,.68,0,1) .18s both}
  .saga .line p{animation:txtUp .95s cubic-bezier(.22,.68,0,1) .3s both}
  .saga .line .links{animation:txtUp .95s cubic-bezier(.22,.68,0,1) .42s both}
  @keyframes txtUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
}
/* 상단 스크림이 헤더 아래에서 띠처럼 보였다 → 위쪽을 더 옅게 */
.saga .scene::after{background:linear-gradient(180deg,rgba(8,9,11,.34) 0%,rgba(8,9,11,.2) 40%,rgba(8,9,11,.66) 100%)}

/* ══════════════════════════════════════════════════════════════════════════
   메인 하단 — 히어로(어둡고 따뜻한 사진)와 같은 톤으로 재구성 (2026-08-02)
   밝은 애플 타일 대신, 검정 바탕 + 큰 활자 + 전면 사진 밴드의 편집 디자인.
   ══════════════════════════════════════════════════════════════════════════ */
body.apple{background:#0a0a0b;color:#f2f3f5}
.apple .hd{background:rgba(10,10,11,.72);border-bottom:1px solid rgba(255,255,255,.08);color:#f2f3f5}
.apple .hd .logo img{filter:invert(1) brightness(2)}
.apple .hd nav a{color:#f2f3f5}

.sec{padding:clamp(80px,11vh,150px) 0;background:#0a0a0b;position:relative}
.sec + .sec{border-top:1px solid rgba(255,255,255,.07)}
.sec .wrap{max-width:1160px}
.sec .eyebrow{font-size:11px;letter-spacing:.22em;color:#8b8f96;margin:0 0 18px}
.sec h2{font-size:clamp(30px,4.2vw,58px);font-weight:650;letter-spacing:-.035em;line-height:1.12;color:#fff;margin:0}
.sec .lead{max-width:44em;color:#a9aeb6;font-size:17px;margin-top:22px}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px}
.sechead .more{color:#2997ff;text-decoration:none;font-size:16px;white-space:nowrap}
.sechead .more:hover{text-decoration:underline}

/* 숫자 줄 */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.09);
  margin-top:56px;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09)}
.nums>div{background:#0a0a0b;padding:26px 20px 30px}
.nums b{display:block;font-size:clamp(20px,2.4vw,30px);font-weight:680;letter-spacing:-.03em;color:#fff}
.nums span{display:block;margin-top:6px;font-size:12.5px;color:#8b8f96}

/* 카테고리 카드 */
.cgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.ccard{display:block;text-decoration:none;border:1px solid rgba(255,255,255,.09);border-radius:18px;
  overflow:hidden;background:linear-gradient(180deg,#141517 0%,#0d0e10 100%);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s ease}
.ccard:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.24)}
.ccard .thumb{display:block;aspect-ratio:1/1;display:grid;place-items:center;padding:14%}
.ccard .thumb img{width:100%;height:100%;object-fit:contain;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ccard:hover .thumb img{transform:scale(1.06)}
.ccard .meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:0 18px 20px}
.ccard .meta b{font-size:15px;font-weight:600;color:#f2f3f5}
.ccard .meta i{font-style:normal;font-size:12.5px;color:#7f838a}

/* 전면 사진 밴드 */
.film{position:relative;min-height:78vh;display:grid;align-items:center;overflow:hidden}
.film .ph{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(.92) brightness(.72) contrast(1.04)}
.film::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,6,7,.86) 0%,rgba(6,6,7,.5) 48%,rgba(6,6,7,.15) 100%)}
.film .wrap{position:relative;z-index:2;max-width:1160px}
.film h3{margin:0;font-size:clamp(28px,3.8vw,52px);font-weight:650;letter-spacing:-.035em;line-height:1.15;color:#fff}
.film p{margin:16px 0 0;max-width:34em;color:#c3c7cd;font-size:16.5px}
.film .links{margin-top:30px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.film .links a{text-decoration:none;font-size:16px;color:#2997ff}
.film .links a.pill{background:#0071e3;color:#fff;border-radius:980px;padding:12px 24px}
.film .links a.pill:hover{background:#0077ed}

/* 사실 나열 */
.sec .facts{margin-top:40px;border-top:1px solid rgba(255,255,255,.1)}
.sec .facts li{border-bottom:1px solid rgba(255,255,255,.1);padding:17px 0;gap:26px}
.sec .facts .y{color:#8b8f96;flex-basis:92px}
.sec .facts .t{color:#c3c7cd}

.mqline{background:#0a0a0b;border-color:rgba(255,255,255,.08)}
.mqline b{color:#8b8f96}

footer{background:#08080a;border-top:1px solid rgba(255,255,255,.08);color:#8b8f96}
footer strong{color:#fff}
footer a{color:#b9bec6}
footer a:hover{color:#fff}
footer span{color:#71757c!important}

@media(max-width:1000px){
  .cgrid{grid-template-columns:repeat(3,1fr)}
  .nums{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .cgrid{grid-template-columns:repeat(2,1fr)}
  .film{min-height:64vh}
  .film::after{background:linear-gradient(180deg,rgba(6,6,7,.5) 0%,rgba(6,6,7,.86) 70%)}
  .sechead{flex-direction:column;align-items:flex-start;gap:12px}
}
/* 제품 사진이 흰 배경이라 어두운 카드 위에서 흰 사각형으로 보였다 → 밝은 판 위에 얹는다 */
.ccard{background:#101113;padding:12px}
.ccard .thumb{background:linear-gradient(180deg,#f6f6f8 0%,#e9eaee 100%);border-radius:14px;padding:12%;
  aspect-ratio:1/1}
.ccard .meta{padding:14px 6px 6px}
.ccard:hover{border-color:rgba(255,255,255,.28)}

/* 전면 사진 밴드 — 글은 왼쪽 정렬 편집 배치로 */
.film .wrap{text-align:left}
.film h3,.film p,.film .links{margin-left:0}
.film .eyebrow{font-size:11px;letter-spacing:.22em;color:#9aa0a8;margin:0 0 16px}

/* ── 제품 개별 페이지 (2026-08-08) ────────────────────────────────────────────
   ⚠️ 이 파일은 append 방식이라 뒤 규칙이 앞을 덮는다. 여기 있는 것이 최종값이다.
   ⚠️ `.btn.ghost` 는 장식용 `.ghost`(position:absolute)와 이름이 겹쳐 버튼이 화면 밖으로
      날아간다 — 이 블록에서도 쓰지 않았다. 자세한 경위는 HANDOFF-20260806.md §4. */
.pdet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;margin-top:40px;align-items:start}
.pshot{background:linear-gradient(180deg,#f6f6f8 0%,#e9eaee 100%);border-radius:18px;padding:8%;
  display:flex;align-items:center;justify-content:center}
.pshot img{width:100%;height:auto;display:block}
.pinfo .links{margin-top:28px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
/* 사양표 — 값이 길어도 항목 열이 찌그러지지 않게 항목 폭을 고정한다 */
.spec{width:100%;border-collapse:collapse;font-size:14px;line-height:1.55}
.spec caption{text-align:left;font-weight:650;font-size:15px;margin:0 0 12px;color:#1d1d1f}
.spec th,.spec td{border-top:1px solid var(--line);padding:11px 0;vertical-align:top;text-align:left}
.spec th{width:34%;font-weight:500;color:var(--muted);padding-right:14px}
.spec td{color:#1d1d1f;word-break:break-word}
.pnote{margin-top:22px;font-size:12.5px;line-height:1.7;color:var(--muted)}
.pnote a{color:inherit;text-decoration:underline}
/* eyebrow 안의 '제품' 링크 — 브레드크럼 역할 */
.eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
@media(max-width:760px){
  .pdet{grid-template-columns:1fr;gap:30px}
  .spec th{width:38%}
}