/* =====================================================================
   ThingsOne flagship layer
   Brand-first hero, editorial storytelling and refined carousel controls.
   Loaded last so the existing page/admin architecture stays intact.
   ===================================================================== */

:root{
  --flagship-blue:#2f8cff;
  --flagship-sky:#8ddcff;
  --flagship-night:#07101d;
  --flagship-ink:#101827;
  --flagship-paper:#f4f7fb;
  --flagship-ease:cubic-bezier(.16,1,.3,1);
}

/* Section-by-section snap on desktop (운영자 요청: 스크롤/드래그 시 메인이 한 덩이씩 내려오게).
   scroll-padding-top는 고정 헤더만큼 비워 히어로가 헤더에 가리지 않게 하고,
   이는 과거 "로드 시 캐러셀로 튐" 현상(히어로가 스냅 시작점으로 정렬 안 되던 문제)도 완화한다. */
@media (min-width:961px) and (min-height:640px){   /* ★961: 861~960 은 experience 1열 전환으로 섹션이 뷰포트를 넘어 스냅이 깨진다 */
  html:has(body.is-home){scroll-snap-type:y mandatory;scroll-padding-top:0}
  /* ★.brand-intro 를 반드시 포함할 것 — mandatory 스냅에서 스냅 지점이 아닌 섹션은
     브라우저가 통째로 건너뛴다. 실제로 첫 화면(브랜드 선언)이 로드 직후 y=900 으로 밀려
     PC 에서는 존재하지 않는 것처럼 보였다(8/12 실측). */
  body.is-home .brand-intro,
  body.is-home .flagship-hero,body.is-home .showcase,body.is-home .cats,
  body.is-home .experience,body.is-home .ai-sol,body.is-home .brand-story,
  body.is-home .site-footer{scroll-snap-align:start;scroll-snap-stop:always}
  /* 앵커용 scroll-margin(헤더 보정 76px)이 스냅 지점을 위로 어긋내
     쇼케이스가 "덜 내려온 채" 멈추고 다음 섹션까지 한 화면+76px이 되던 문제(두 번 스크롤) — 스냅 모드에선 0 */
  body.is-home .flagship-hero,body.is-home .showcase#showcase{scroll-margin-top:0}
}

/* ============================== shared chrome ============================== */
body.is-home .site-header:not(.scrolled){background:linear-gradient(180deg,rgba(5,12,22,.68),rgba(5,12,22,.14));border-bottom:1px solid rgba(255,255,255,.08);color:#fff}
.header-buy{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:inherit;font-size:13px;font-weight:700;
  letter-spacing:-.01em;backdrop-filter:blur(var(--glass-blur));transition:background .3s,border-color .3s,color .3s}
.header-buy span{font-size:14px}
.header-buy:hover{background:#fff;border-color:#fff;color:var(--flagship-ink)}

.site-header.scrolled .header-buy{background:var(--flagship-ink);border-color:var(--flagship-ink);color:#fff}
.site-header.scrolled .header-buy:hover{background:var(--accent);border-color:var(--accent)}

.header-buy:focus-visible,.flagship-hero a:focus-visible,.fifa-controls button:focus-visible,.experience a:focus-visible{
  outline:3px solid var(--flagship-sky);outline-offset:4px
}

/* ============================== flagship hero ============================== */
.flagship-hero{--hero-x:0px;--hero-y:0px;position:relative;isolation:isolate;min-height:max(720px,100vh);min-height:max(720px,100svh);overflow:hidden;
  background:var(--flagship-night);color:#fff;scroll-margin-top:var(--header-h,72px)}
.flagship-media,.flagship-scrim,.flagship-grid{position:absolute;inset:0}
.flagship-media{z-index:-4;overflow:hidden;background:#dfe3e1}
.flagship-media img{width:100%;height:100%;object-fit:cover;object-position:58% 50%;transform:translate3d(var(--hero-x),var(--hero-y),0) scale(1.045);
  will-change:transform;filter:saturate(.86) contrast(1.02);transition:transform 1.8s var(--flagship-ease)}
.flagship-scrim{z-index:-3;background:
  linear-gradient(90deg,rgba(4,11,22,.93) 0%,rgba(6,14,25,.78) 37%,rgba(7,16,29,.25) 66%,rgba(7,16,29,.05) 100%),
  linear-gradient(180deg,rgba(3,9,17,.58) 0%,transparent 24%,transparent 68%,rgba(3,9,17,.88) 100%)}
.flagship-grid{z-index:-2;opacity:.3;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:88px 88px;mask-image:linear-gradient(90deg,#000,transparent 72%)}
/* aura 드리프트 애니메이션 제거(7/21 공식화 기준: 인지 불가 장식 애니메이션 정지) — 정적 글로우만 유지 */
.flagship-grid::after{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 30% 44%,rgba(47,140,255,.18),transparent 38%)}

.flagship-inner{position:relative;z-index:2;min-height:max(720px,100vh);min-height:max(720px,100svh);display:flex;flex-direction:column;justify-content:center;padding-top:clamp(118px,14vh,160px);padding-bottom:clamp(170px,20vh,220px)}
.flagship-copy{max-width:min(760px,64vw)}
.flagship-kicker{display:inline-flex;align-items:center;gap:11px;margin:0 0 clamp(20px,3vh,32px);font-size:11px;font-weight:700;letter-spacing:.19em;color:rgba(255,255,255,.78)}
/* flagship-live 점 제거(7/21): kicker의 라이브 연출 배제 */
.flagship-title{font-size:clamp(40px,5vw,72px);line-height:1.02;letter-spacing:-.04em;font-weight:800;color:#fff;text-wrap:balance}
/* ★자손이 아니라 **직계 자식**만 블록으로 만든다.
     to_guard_brand 가 넣는 <span translate="no">ThingsOne</span> 까지 블록이 되어,
     폭이 남는데도(1920px: 필요 841px / 여유 1120px) 'ThingsOne' 이 한 줄을 통째로 차지하고
     나머지가 다음 줄로 밀렸다. 광역 선택자는 브랜드 스팬을 삼킨다 — > 로 좁힌다. */
.flagship-title>span,.flagship-title>em{display:block;font-style:normal}
.flagship-title em{margin-top:.08em;background:linear-gradient(100deg,#fff 4%,#bdeaff 43%,#67b8ff 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
body.lang-en .flagship-copy{max-width:min(820px,68vw)}
.flagship-lead{max-width:640px;margin-top:clamp(24px,3.5vh,38px);font-size:clamp(16px,1.35vw,20px);line-height:1.72;letter-spacing:-.018em;color:rgba(255,255,255,.74);text-wrap:pretty}
.flagship-actions{display:flex;align-items:center;gap:12px;margin-top:clamp(28px,4vh,44px)}
.flagship-actions .btn{min-height:50px;padding:0 23px;border-radius:var(--radius-pill);font-size:14px;box-shadow:none}
/* 버튼은 호버에서 일절 움직이지 않는다 — 위치·크기·간격 모두 고정하고
   색·배경·테두리로만 반응한다(운영자 지시 8/6). 간격이 벌어지는 것도 움직임이다. */
.flagship-actions .btn{transition:background .3s,border-color .3s,color .3s}
.flagship-primary{background:#fff;color:#101827;border:1px solid #fff}
.flagship-primary:hover{background:var(--flagship-sky);border-color:var(--flagship-sky);color:#07101d}
.flagship-secondary{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(var(--glass-blur))}
.flagship-secondary:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}

.flagship-status{position:absolute;right:28px;bottom:clamp(176px,22vh,236px);width:min(340px,28vw);padding:18px;border:1px solid rgba(255,255,255,.22);border-radius:20px;
  background:linear-gradient(145deg,rgba(8,18,32,.67),rgba(15,28,45,.38));box-shadow:0 24px 70px rgba(0,0,0,.25);backdrop-filter:blur(22px) saturate(130%)}
/* status 패널 ::before 하이라이트 오버레이 제거(7/21): 한 패널에 유리+그라데이션 2겹+그림자 중첩 완화 */
.flagship-status-head{position:relative;display:flex;align-items:center;gap:12px}
.flagship-status-head>div{display:flex;flex-direction:column;gap:2px}
.flagship-status-head .mono{font-size:9px;letter-spacing:.16em;color:rgba(255,255,255,.52)}
.flagship-status-head strong{font-size:14px;color:#fff}
.flagship-status-mark{position:relative;width:38px;height:38px;border:1px solid rgba(141,220,255,.38);border-radius:50%;display:grid;place-items:center;background:rgba(47,140,255,.12)}
.flagship-status-mark::before,.flagship-status-mark::after,.flagship-status-mark i{content:"";position:absolute;border:1px solid rgba(141,220,255,.56);border-radius:50%}
.flagship-status-mark::before{width:7px;height:7px;background:var(--flagship-sky);box-shadow:0 0 12px rgba(141,220,255,.9)}
.flagship-status-mark::after{width:18px;height:18px;animation:statusPing 2.8s ease-out infinite}
.flagship-status-mark i{width:28px;height:28px;opacity:.32}
.flagship-protocols{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.flagship-protocols span{padding:6px 9px;border:1px solid rgba(255,255,255,.13);border-radius:var(--radius-pill);background:rgba(255,255,255,.055);font-size:10.5px;color:rgba(255,255,255,.7)}
/* flagship-signal(가짜 LIVE 신호) 제거 — 근거 없는 상태 연출 배제 (7/21 공식화 기준) */

.flagship-proof{position:absolute;left:28px;right:28px;bottom:34px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0;border-top:1px solid rgba(255,255,255,.2)}
.flagship-proof li{display:flex;align-items:flex-end;gap:12px;min-width:0;padding:22px 22px 0 0}
.flagship-proof li+li{padding-left:22px;border-left:1px solid rgba(255,255,255,.16)}
.flagship-proof strong{font-size:clamp(28px,2.7vw,44px);line-height:.9;letter-spacing:-.055em;color:#fff;white-space:nowrap}
.flagship-proof sup{font-size:.42em;vertical-align:top;margin-left:2px;color:var(--flagship-sky)}
.flagship-proof span{max-width:120px;padding-bottom:2px;font-size:11.5px;line-height:1.35;color:rgba(255,255,255,.55)}
/* count-up 숫자는 등폭(tabular)으로 — 자릿수/폭 변동에 따른 흔들림 방지 */
[data-count]{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

.flagship-scroll{position:absolute;z-index:3;right:28px;bottom:104px;display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:.16em;color:rgba(255,255,255,.6)}
.flagship-scroll i{position:relative;width:34px;height:1px;background:rgba(255,255,255,.25);overflow:hidden}
.flagship-scroll i::after{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-100%);animation:scrollLine 2.2s var(--flagship-ease) infinite}

/* flagship-orbit(장식 궤도 링) 제거(7/21 공식화 기준): opacity .24 장식 도형 — status 카드에 반쯤 가려 역할 없음 */

/* staged entrance; content stays visible when JavaScript is unavailable */
.flagship-hero.is-preparing .flagship-title span,.flagship-hero.is-preparing .flagship-title em,
.flagship-hero.is-preparing [data-flagship-reveal],.flagship-hero.is-preparing .flagship-proof li{opacity:0;transform:translateY(28px)}
.flagship-hero.is-preparing .flagship-media img{transform:translate3d(var(--hero-x),var(--hero-y),0) scale(1.12)}
.flagship-hero.is-ready .flagship-title span,.flagship-hero.is-ready .flagship-title em,
.flagship-hero.is-ready [data-flagship-reveal],.flagship-hero.is-ready .flagship-proof li{opacity:1;transform:none;transition:opacity .9s var(--flagship-ease),transform .9s var(--flagship-ease)}
.flagship-hero.is-ready .flagship-title em{transition-delay:.08s}
.flagship-hero.is-ready .flagship-lead{transition-delay:.16s}
.flagship-hero.is-ready .flagship-actions{transition-delay:.23s}
.flagship-hero.is-ready .flagship-status{transition-delay:.32s}
.flagship-hero.is-ready .flagship-proof li:nth-child(1){transition-delay:.3s}.flagship-hero.is-ready .flagship-proof li:nth-child(2){transition-delay:.36s}
.flagship-hero.is-ready .flagship-proof li:nth-child(3){transition-delay:.42s}.flagship-hero.is-ready .flagship-proof li:nth-child(4){transition-delay:.48s}
.flagship-hero.is-ready .flagship-media img{transform:translate3d(var(--hero-x),var(--hero-y),0) scale(1.045)}

/* ============================== showcase refinements ============================== */
.showcase#showcase{height:auto!important;min-height:100vh!important;min-height:100svh!important;display:flex;flex-direction:column;justify-content:center;padding:clamp(44px,6vh,88px) 0 clamp(40px,5.5vh,78px);scroll-margin-top:var(--header-h,72px);
  background:radial-gradient(ellipse at 50% 26%,rgba(35,91,162,.22),transparent 46%),linear-gradient(180deg,#07101d 0%,#0a1423 55%,#0b1523 100%)}
.showcase#showcase::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:88px 88px;mask-image:linear-gradient(180deg,#000,transparent 82%)}
.showcase#showcase .showcase-head{max-width:900px}
.showcase#showcase .showcase-title{font-size:clamp(30px,3.8vw,50px);letter-spacing:-.03em;text-wrap:balance}
.showcase#showcase .fifa-viewport{margin-top:clamp(36px,6vh,72px)}
.fifa-controls{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;gap:10px;margin:clamp(18px,2.4vh,28px) auto 0;color:#fff}
.fifa-control,.fifa-pause{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(255,255,255,.055);color:#fff;backdrop-filter:blur(var(--glass-blur));transition:background .25s,border-color .25s,transform .25s var(--flagship-ease)}
.fifa-control:hover,.fifa-pause:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.42)}
.fifa-index{display:flex;align-items:center;gap:8px;min-width:82px;justify-content:center;font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.55)}
.fifa-index b{font-size:15px;color:#fff}.fifa-index i{font-style:normal;opacity:.35}
.fifa-pause{margin-left:5px}
.fifa-pause>span{display:flex;align-items:center;justify-content:center;gap:3px;width:13px;height:13px}
.fifa-pause>span i{display:block;width:2px;height:11px;border-radius:2px;background:currentColor}
.fifa-pause[aria-pressed="true"]>span{position:relative}
.fifa-pause[aria-pressed="true"]>span i:first-child{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid currentColor;background:none;border-radius:0;margin-left:2px}
.fifa-pause[aria-pressed="true"]>span i:last-child{display:none}
.showcase#showcase .fifa-caption{margin-top:18px}
.showcase#showcase .fifa-cap-more{background:#fff;color:#111a28;border-color:#fff;font-weight:700}
.showcase#showcase .fifa-cap-more:hover{background:var(--flagship-sky);border-color:var(--flagship-sky)}

/* ============================== connected experience ============================== */
.experience{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(72px,9vh,120px) 0;background:var(--flagship-paper);overflow:hidden}
/* experience 좌상단 장식 블롭 제거(7/21 공식화 기준: 인지 기여 없는 배경 도형 정리) */
/* ★카피 열의 최소폭이 300px 고정이라 제목 글자만 커지고 상자는 그대로여서
   1920px 에서 "연결은 기술이 아니라 / 경험이어야 합니다" 가 3줄로 갈렸다
   ("연결은 기술이" / "아니라" / "경험이어야 합니다" — 운영자 지적 8/12).
   최소폭을 뷰포트에 따라 키워 의도한 2줄이 유지되게 한다. */
.experience-grid{display:grid;grid-template-columns:minmax(clamp(300px,26vw,470px),.82fr) minmax(0,1.35fr);align-items:center;gap:clamp(52px,7vw,112px)}
.experience-copy{position:relative;z-index:2}
.experience-copy .section-eyebrow{display:inline-flex}
.experience-title{margin-top:18px;font-size:clamp(29px,3.6vw,48px);line-height:1.12;letter-spacing:-.035em;color:var(--flagship-ink);text-wrap:balance}
.experience-lead{max-width:560px;margin-top:26px;font-size:clamp(15px,1.2vw,18px);line-height:1.82;color:#596477;text-wrap:pretty}
.experience-link{display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding-bottom:7px;border-bottom:1px solid #9ca7b8;font-size:14px;font-weight:700;color:var(--flagship-ink);transition:color .25s,border-color .25s}
.experience-link:hover{color:var(--accent);border-color:var(--accent)}
.experience-visual{--exp-y:0px;position:relative;min-width:0;padding:24px 24px 96px 70px}
.experience-photo{position:relative;overflow:hidden;aspect-ratio:1.34/1;border-radius:32px;background:#fff;box-shadow:0 32px 90px -34px rgba(25,45,77,.34)}
.experience-photo::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(15,33,58,.08);border-radius:inherit;pointer-events:none}
.experience-photo img{width:100%;height:112%;object-fit:cover;transform:translate3d(0,var(--exp-y),0) scale(1.02);will-change:transform}
.experience-flow{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 36px 1fr 36px 1fr;align-items:center;padding:18px;border:1px solid rgba(17,31,51,.1);border-radius:22px;background:rgba(255,255,255,.84);box-shadow:0 24px 58px -28px rgba(25,45,77,.4);backdrop-filter:blur(20px) saturate(145%)}
.experience-flow article{min-width:0;padding:5px 8px}
.experience-flow article span{display:block;font-size:9px;letter-spacing:.13em;color:#748197}
.experience-flow article strong{display:block;margin-top:5px;font-size:12.5px;line-height:1.4;color:#172134}
.experience-flow>i{position:relative;height:1px;background:#c9d1dc;overflow:hidden}
.experience-flow>i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:translateX(-100%)}
.experience.is-visible .experience-flow>i::after{animation:flowLine 2.8s var(--flagship-ease) infinite}
.experience-flow>i:nth-of-type(2)::after{animation-delay:.35s}
.experience-badge{position:absolute;right:-10px;top:0;width:118px;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(14,124,255,.22);background:rgba(244,249,255,.88);box-shadow:0 18px 44px -24px rgba(14,124,255,.5);backdrop-filter:blur(var(--glass-blur));text-align:center}
.experience-badge span{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(14,124,255,.11);margin-bottom:10px}
.experience-badge b{font-size:10px;letter-spacing:.1em;color:#16345d}.experience-badge small{font-size:7px;letter-spacing:.09em;color:#7a879a;margin-top:2px}

/* ============================== section continuity ============================== */
.cats{border-top:0!important}
.ai-sol{border-top:0!important}
.brand-story{position:relative}
.brand-story::before{content:"";position:absolute;left:50%;top:0;width:min(1120px,calc(100% - 56px));height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent)}

@keyframes statusPing{0%{transform:scale(.4);opacity:.9}80%,100%{transform:scale(1.35);opacity:0}}
@keyframes scrollLine{50%,100%{transform:translateX(100%)}}
@keyframes flowLine{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* ============================== responsive ============================== */
@media(max-width:1100px){
  .flagship-copy{max-width:68vw}
  .flagship-status{width:270px;right:24px}
  .flagship-proof li{flex-direction:column;align-items:flex-start;gap:7px}
  .flagship-proof span{max-width:none}
  .flagship-scroll{display:none}
  .experience-grid{grid-template-columns:minmax(280px,.78fr) minmax(0,1.1fr);gap:46px}
  .experience-visual{padding-left:30px}
}

@media(max-width:960px){
  .header-buy{display:none}
  .flagship-media img{object-position:64% 50%}
  .flagship-scrim{background:linear-gradient(90deg,rgba(4,11,22,.93),rgba(6,14,25,.69) 64%,rgba(7,16,29,.2)),linear-gradient(180deg,rgba(3,9,17,.52),transparent 24%,transparent 65%,rgba(3,9,17,.92))}
  .flagship-copy{max-width:78vw}
  .flagship-status{display:none}
  .flagship-proof{right:24px;left:24px}
  .experience-grid{grid-template-columns:1fr;gap:54px}
  .experience-copy{max-width:720px}
  .experience-visual{padding:20px 30px 90px}
}

@media(max-width:680px){
  .flagship-hero,.flagship-inner{min-height:max(700px,100vh);min-height:max(700px,100svh)}
  .flagship-media img{object-position:67% 46%;filter:saturate(.8) contrast(1.04)}
  .flagship-scrim{background:linear-gradient(180deg,rgba(4,11,22,.72) 0%,rgba(5,13,24,.68) 28%,rgba(5,13,24,.82) 60%,rgba(3,9,17,.98) 100%)}
  .flagship-grid{background-size:58px 58px;mask-image:linear-gradient(180deg,#000,transparent 80%)}
  .flagship-inner{justify-content:flex-end;padding:120px 20px 182px}
  .flagship-copy{max-width:none}
  body.lang-en .flagship-copy{max-width:none}
  .flagship-kicker{margin-bottom:18px;font-size:9.5px}
  .flagship-title{font-size:clamp(42px,12.6vw,64px);line-height:.98;letter-spacing:-.057em}
  .flagship-lead{max-width:540px;margin-top:20px;font-size:15px;line-height:1.65}
  .flagship-actions{margin-top:26px;gap:9px}
  .flagship-actions .btn{min-height:46px;padding:0 17px;font-size:13px}
  .flagship-proof{left:20px;right:20px;bottom:24px;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid rgba(255,255,255,.18)}
  .flagship-proof li{padding:15px 10px 0 0;gap:4px}
  .flagship-proof li+li{padding-left:14px}
  .flagship-proof li:nth-child(3){border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.13);margin-top:12px;padding-top:12px}
  .flagship-proof li:nth-child(4){border-top:1px solid rgba(255,255,255,.13);margin-top:12px;padding-top:12px}
  .flagship-proof strong{font-size:25px}.flagship-proof span{font-size:10px}
  .showcase#showcase{padding:76px 0 88px}
  .showcase#showcase .showcase-head{padding-inline:20px}
  .showcase#showcase .showcase-title{font-size:clamp(34px,10vw,50px)}
  .showcase#showcase .fifa-viewport{margin-top:24px}
  .fifa-controls{margin-top:8px}
  .fifa-control,.fifa-pause{width:39px;height:39px}
  .experience{padding:80px 0 96px}
  .experience-grid{padding-inline:20px;gap:44px}
  .experience-title{font-size:clamp(36px,10vw,52px)}
  .experience-lead{margin-top:20px;font-size:15px}
  .experience-visual{padding:0 0 160px}
  .experience-photo{aspect-ratio:.92/1;border-radius:24px}
  .experience-photo img{height:106%}
  .experience-flow{left:12px;right:12px;bottom:0;grid-template-columns:1fr;padding:12px 15px;border-radius:18px}
  .experience-flow>i{width:1px;height:16px;margin:1px 0 1px 18px;background:#c9d1dc}
  .experience-flow>i::after{transform:translateY(-100%)}
  .experience.is-visible .experience-flow>i::after{animation:flowLineY 2.8s var(--flagship-ease) infinite}
  .experience-flow article{padding:5px}
  .experience-badge{width:96px;right:-6px;top:-18px}
}

@media(max-width:420px){
  .flagship-inner{padding-inline:16px}
  .flagship-actions{align-items:stretch;flex-direction:column;max-width:260px}
  .flagship-actions .btn{width:100%}
  .flagship-proof{left:16px;right:16px}
  .experience-grid{padding-inline:16px}
}

/* short-viewport laptops (세로 짧은 화면): 홈 각 섹션이 한 화면에 들어가도록 콘텐츠 압축.
   데스크톱(≥901px 높이)은 이미 딱 맞으므로 건드리지 않는다. */
@media (min-width:861px) and (max-height:900px){
  body.is-home .cats{padding-top:16px;padding-bottom:12px}
  body.is-home .cats .cats-head{margin-bottom:8px}
  body.is-home .cats .cats-grid{gap:11px}
  body.is-home .cats .cat-tile{min-height:0}
  body.is-home .cats .sub-more{margin-top:10px}
  body.is-home .cats .cert-marquee{margin-top:10px}
  body.is-home .showcase#showcase{padding-top:18px;padding-bottom:14px}
  body.is-home .showcase#showcase .fifa-viewport{margin-top:14px}
  body.is-home .showcase#showcase .fifa-caption{margin-top:10px}
  body.is-home .experience{padding-top:34px;padding-bottom:34px}
  body.is-home .ai-sol{padding-top:36px;padding-bottom:36px}
  body.is-home .brand-story{padding-top:36px;padding-bottom:36px}
  body.is-home .site-footer{padding-top:42px;padding-bottom:28px}
}

/* even shorter laptops (~700 뷰포트): 카테고리 타일 이미지·본문과 푸터를 더 압축 */
@media (min-width:861px) and (max-height:770px){
  body.is-home .cats .cat-tile-media{height:150px}
  body.is-home .cats .cat-tile-body{padding-top:14px;padding-bottom:14px}
  body.is-home .cats .cats-grid{gap:10px}
  body.is-home .cats .cert-marquee{margin-top:8px}
  body.is-home .site-footer{padding-top:24px;padding-bottom:18px}
}

/* ── 짧은 노트북 뷰포트(<=800): hero 720px 하한 해제 + 쇼케이스 캐러셀 여백·푸터 4단 링크 압축.
      hero/showcase/footer가 여기서 근본적으로 뷰포트를 따라 줄어든다. 3D 캐러셀 자체 크기는 건드리지 않는다.
      mandatory 스냅이 걸리므로 한 섹션이라도 넘치면 스크롤이 갇힌다 → 영문 footer가 넘치는 767 부근까지 넉넉히 덮는다. ── */
@media (min-width:861px) and (max-height:800px){
  /* HERO: 720px 하한 제거 → 뷰포트를 따라 줄고, 상·하단 패딩과 하단 배치물을 축소 */
  body.is-home .flagship-hero,
  body.is-home .flagship-inner{min-height:100vh;min-height:100svh}
  body.is-home .flagship-inner{padding-top:clamp(70px,9vh,110px);padding-bottom:clamp(100px,12vh,150px)}
  body.is-home .flagship-status{bottom:clamp(118px,15vh,168px);padding:14px}
  body.is-home .flagship-proof{bottom:18px}
  body.is-home .flagship-proof li{padding-top:14px}
  body.is-home .flagship-scroll{display:none}
  /* SHOWCASE: 카드는 원본 크기 유지(리프트가 작아 위로 ~29px만 솟음). 상단 여백을 그만큼 확보해 카드가 제목을 덮지 않게 하고, 대신 제목·캡션·패딩을 줄여 한 화면에 맞춘다 */
  body.is-home .showcase#showcase{padding-top:2px;padding-bottom:2px}
  body.is-home .showcase#showcase .showcase-title{font-size:clamp(24px,3vw,36px)}
  body.is-home .showcase#showcase .fifa-viewport{margin-top:36px}
  body.is-home .showcase#showcase .fifa-caption{margin-top:6px;min-height:44px;gap:6px}
  body.is-home .showcase#showcase .fifa-controls{margin-top:6px}
  /* FOOTER: CTA·4단 링크의 고정 여백 압축 */
  body.is-home .site-footer{padding-top:20px;padding-bottom:14px}
  body.is-home .site-footer .foot-cta{padding-bottom:22px;margin-bottom:22px}
  body.is-home .site-footer .foot-main{gap:22px;padding-bottom:20px}
  body.is-home .site-footer .foot-bottom{padding-top:16px}
}

/* ── 아주 짧은 화면(<=659, 북마크바까지 켠 1366x768 등): 3D 캐러셀을 축소 + ai-sol/brand 패딩 추가 축소 ── */
@media (min-width:861px) and (max-height:659px){
  /* 카드를 뷰포트급으로 줄여 오버행을 없애고, 상단 여백을 3D 리프트만큼 확보해 카드가 제목을 침범하지 않게 한다. 대신 캡션 여백·패딩을 줄여 상쇄 */
  body.is-home .showcase#showcase{padding-top:4px;padding-bottom:4px}
  body.is-home .showcase#showcase .fifa-viewport{height:250px;margin-top:54px}
  body.is-home .showcase#showcase .fifa-card{width:195px;height:250px}
  body.is-home .showcase#showcase .fifa-caption{margin-top:4px;gap:4px}
  body.is-home .showcase#showcase .fifa-controls{margin-top:4px}
  body.is-home .showcase#showcase .showcase-title{font-size:clamp(24px,3vw,34px)}
  body.is-home .ai-sol{padding-top:20px;padding-bottom:20px}
  body.is-home .brand-story{padding-top:20px;padding-bottom:20px}
  /* 영문 푸터는 4단 링크·법무 문구가 더 길어 여기서 한 번 더 압축 */
  body.is-home .site-footer{padding-top:16px;padding-bottom:12px}
  body.is-home .site-footer .foot-cta{padding-bottom:16px;margin-bottom:16px}
  body.is-home .site-footer .foot-main{gap:16px;padding-bottom:14px}
}

/* ── 운영자 방향(7/21): 제목/리드 줄 수 축소 + '자세히 보기'를 인라인 화살표 링크로 = 섹션 높이 절감 (홈·데스크톱) ── */
@media (min-width:861px){
  /* 카테고리 제목을 한 줄로: 크기를 낮춰 자연스럽게 1줄에 안착 */
  body.is-home .cats .section-title{font-size:clamp(26px,2.9vw,36px)}
  /* 리드 폭을 넓혀 줄 수를 줄이고 균형 잡힌 줄바꿈 */
  body.is-home .ai-sol .section-lead{max-width:900px;text-wrap:balance}
  body.is-home .brand-story .section-lead{max-width:760px;text-wrap:balance}
  /* '자세히 보기' 큰 버튼 → 인라인 화살표 링크(experience-link 패턴)로 전환해 버튼 한 줄만큼 높이 절감 */
  body.is-home .ai-sol .sub-more,
  body.is-home .brand-story .sub-more{margin-top:clamp(14px,2vh,22px)}
  body.is-home .ai-sol .sub-more .btn,
  body.is-home .brand-story .sub-more .btn{
    padding:0 0 6px;min-height:0;border:0;border-bottom:1px solid currentColor;border-radius:0;
    background:none;box-shadow:none;font-size:14px;font-weight:700;line-height:1.3;
    display:inline-flex;align-items:center;gap:8px
  }
  body.is-home .ai-sol .sub-more .btn::after,
  body.is-home .brand-story .sub-more .btn::after{content:"\2197";font-size:1.05em;font-weight:400}
  body.is-home .ai-sol .sub-more .btn:hover,
  body.is-home .brand-story .sub-more .btn:hover{background:none;box-shadow:none;transform:none}
}

/* ── [7/22] brand-about: 수치 지표 2개를 한 카드에 세로로 묶음(카드 낭비 제거) ── */
.bt-stat-multi{gap:0}
.bt-stat-multi .bt-stat-row{display:flex;flex-direction:column;gap:3px}
.bt-stat-multi .bt-stat-row:first-of-type{margin-top:clamp(18px,2.6vw,30px)}
.bt-stat-multi .bt-stat-row + .bt-stat-row{margin-top:clamp(18px,2.6vw,28px);padding-top:clamp(16px,2.2vw,24px);border-top:1px solid var(--hairline)}
.bt-stat-multi .bt-stat-row strong{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,44px);letter-spacing:-.02em;color:var(--ink);line-height:1}
.bt-stat-multi .bt-stat-row span{font-size:13px;color:var(--ink-muted)}

/* ── [7/21 UI/UX] brand-about 대표 타일: 전폭 스플릿이 늘려 보이지 않게 비율·이미지 상한 보정 ── */
.bt-feature.bt-split{grid-template-columns:1.35fr 1fr;align-items:center;min-height:220px}
.bt-feature .bt-visual img{max-width:min(360px,100%);max-height:220px}
@media (max-width:560px){
  .bt-feature.bt-split{grid-template-columns:1fr}
}

/* ── [7/21 UI/UX] brand/company: 셀 격자 표 → 스탯 타일 2개 + 원장형 행 ── */
/* 타일이 3개가 되어(8/6 'AIoT 경험' 추가) 2열이면 마지막 한 장이 홀로 떨어진다 → 가로 한 줄로.
   3등분이라 폭이 좁아지므로 컨테이너를 960px 로 넓히고 큰 숫자 글자도 한 단계 줄인다. */
.facts-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px);max-width:960px;margin:clamp(26px,3.4vw,44px) auto 0}
.fact-stat{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:clamp(26px,3.2vw,38px) clamp(22px,2.6vw,32px);
  background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-tile);
  box-shadow:0 6px 22px rgba(20,22,26,.05),inset 0 1px 0 rgba(255,255,255,.7)}
.fact-stat-k{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.fact-stat-pre{font-size:13px;color:var(--ink-muted)}
/* 3열이 되면서 칸 폭이 좁아졌다 — "200만 대 이상" 이 두 줄로 깨지지 않게 한 단계 줄인다.
   ★margin-top:auto 로 숫자를 카드 하단에 붙여, 부제(누적 판매의 'AIoT 디바이스')가 있는
     카드와 없는 카드의 숫자 기준선을 맞춘다. */
.fact-stat strong{font-family:var(--serif);font-weight:400;letter-spacing:-.025em;
  font-size:clamp(26px,2.5vw,36px);line-height:1.15;color:var(--ink);
  margin-top:auto;word-break:keep-all}
.facts-ledger{max-width:860px;margin:clamp(18px,2.4vw,30px) auto 0;border-top:1px solid var(--hairline)}
.facts-ledger .fact-row{display:grid;grid-template-columns:clamp(120px,22%,190px) 1fr;gap:18px;align-items:baseline;padding:clamp(18px,2.2vw,26px) 4px;border-bottom:1px solid var(--hairline)}
.facts-ledger dt{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.facts-ledger dd{font-size:clamp(15px,1.5vw,16.5px);font-weight:500;color:var(--ink);line-height:1.65;word-break:keep-all;overflow-wrap:break-word}
@media (max-width:900px){
  /* 3등분으로는 "200만 대 이상" 같은 긴 값이 줄바꿈되므로 그 아래에서는 2열로 */
  .facts-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .facts-stats{grid-template-columns:1fr}
  .facts-ledger .fact-row{grid-template-columns:1fr;gap:6px;padding:16px 2px}
}

/* ── 제품 상세 사진 ──────────────────────────────────────────────────────────
   스튜디오 샷(assets/img/products/studio/{slug}.webp, 1200x1000)은 자체 배경판을 갖고 있다.
   여기에 회색 패널을 한 겹 더 씌우고 사진을 88%로 앉히면 '네모 안의 네모'가 된다.
   → 패널 비율을 자산 비율(6:5)에 맞추고 사진이 패널을 그대로 채우게 한다. 네모는 하나뿐이다.
      (multiply 도 필요 없다 — 지울 흰 바탕 자체가 화면에서 사라진다) */
.pd-media-studio{aspect-ratio:6/5;background:#f8f7f5;border:0;
  box-shadow:0 28px 64px -32px rgba(20,28,40,.26)}
.pd-media-studio img{width:100%;height:100%;max-width:none;object-fit:cover;mix-blend-mode:normal;filter:none}
.pd-media-studio::after{display:none}
/* 패널 깊이감: 상단 하이라이트 + 접지 그림자 */
.pd-media{box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -28px 56px rgba(20,28,40,.04),0 28px 64px -32px rgba(20,28,40,.26)}
/* 불투명 JPG/PNG 폴백(누끼 없는 자산) — 밝은 플레이트 위에서 흰 배경 소거 */
.pd-media img[src$=".jpg"],.pd-media img[src$=".png"],
.product-thumb img[src$=".jpg"],.product-thumb img[src$=".png"],
.pd-rel-thumb img[src$=".jpg"],.pd-rel-thumb img[src$=".png"]{mix-blend-mode:multiply;filter:none}

@media(prefers-reduced-motion:reduce){
  .flagship-grid::after,.flagship-status-mark::after,.flagship-scroll i::after,.experience-flow>i::after{animation:none!important}
  .flagship-media img,.experience-photo img{transform:none!important;will-change:auto}
  .flagship-hero.is-preparing .flagship-title span,.flagship-hero.is-preparing .flagship-title em,
  .flagship-hero.is-preparing [data-flagship-reveal],.flagship-hero.is-preparing .flagship-proof li{opacity:1;transform:none}
  .fifa-pause{display:none}
}

@keyframes flowLineY{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

@media print{
  .flagship-hero{min-height:auto;background:#fff;color:#111;padding:48px 0}
  .flagship-media,.flagship-scrim,.flagship-grid,.flagship-status,.flagship-scroll{display:none}
  .flagship-inner{min-height:auto;padding:0}.flagship-title,.flagship-title em{color:#111;background:none}
  .flagship-lead,.flagship-proof span{color:#444}.flagship-proof{position:static;margin-top:30px;border-color:#ccc}
}

/* ===== 데스크톱 제품 페이저 (3개씩 ← →) — 3D 회전 캐러셀 대체 (7/28 운영자 지시) =====
   JS(main.js)가 #fifa 에 .fifa-pager 를 붙이면 이 레이아웃이 적용된다.
   모바일(.mobile-layout)은 기존 가로 스와이프 레일 그대로. 선택자는 짧은 높이 티어
   (max-height:659 등)의 .fifa-viewport/.fifa-card 고정값보다 우선하도록 #fifa 포함. */
/* .showcase 가 flex-column(센터 정렬)이라 width 지정이 없으면 콘텐츠 폭으로 수축한다(실측 286px) — 100% 필수 */
#fifa.fifa-pager{width:100%;max-width:1140px;margin-inline:auto;padding-inline:clamp(20px,4vw,44px)}
body.is-home .showcase#showcase #fifa.fifa-pager .fifa-viewport{
  height:auto;perspective:none;overflow:hidden;margin:clamp(18px,3vh,40px) auto 0;padding-bottom:6px}
#fifa.fifa-pager .fifa-viewport::after{display:none}
body.is-home .showcase#showcase #fifa.fifa-pager .fifa-stage{
  position:static;display:flex;gap:22px;width:100%;height:auto;margin:0;
  transform:translateX(0);transition:transform .55s cubic-bezier(.22,.61,.36,1);
  will-change:transform;transform-style:flat}
body.is-home .showcase#showcase #fifa.fifa-pager .fifa-card{
  position:relative;left:auto;top:auto;flex:0 0 calc((100% - 44px)/3);
  width:auto;height:clamp(240px,36vh,372px);transform:none;cursor:pointer}
#fifa.fifa-pager .fifa-card .fifa-card-inner{
  transition:transform .35s var(--ease-c),border-color .35s var(--ease-c),box-shadow .35s var(--ease-c)}
#fifa.fifa-pager .fifa-card:hover .fifa-card-inner,
#fifa.fifa-pager .fifa-card:focus-visible .fifa-card-inner{
  border-color:rgba(127,215,238,.45)}
#fifa.fifa-pager .fifa-card[aria-hidden="true"]{pointer-events:none}
.fifa-control:disabled{opacity:.28;cursor:default}
.fifa-control:disabled:hover{background:none}
@media (prefers-reduced-motion:reduce){
  body.is-home .showcase#showcase #fifa.fifa-pager .fifa-stage{transition:none}
}

/* 히어로 키커의 브랜드명 — 로고 이미지 대신 타이포 대비로 세운다.
   헤더에 이미 마크가 있어 한 화면에 로고를 두 번 띄우지 않고,
   브랜드명이 텍스트로 남아야 검색·스크린리더에 잡힌다. */
.flagship-kicker .kicker-brand{font-weight:700;color:#fff;letter-spacing:.18em}
.flagship-kicker{color:rgba(255,255,255,.62)}

/* ── 히어로 제목: PC 한 줄 (운영자 지시 8/6) ──────────────────────────────
   기본은 line1/line2 를 각각 block 으로 쌓는다(좁은 화면에서 필요).
   1080px 이상에서는 두 조각을 inline 으로 이어 붙여 한 줄로 만든다.
   ★27자(공백 포함)라 기존 72px 로는 한 줄에 들어가지 않는다 — 폭에 맞춰 크기를 낮춘다.
     실측 기준: wrap 1200px 안에서 줄바꿈이 일어나지 않는 값. */
@media (min-width:1080px){
  /* 제목은 쉼표에서 줄을 바꾼다(운영자 지시 8/6). line1("기술을 넘어 일상으로,")과
     line2("삼진이 완성하는 맞춤형 AIoT 세상")이 각각 한 줄 — 기본 규칙의 display:block 이
     그 역할을 하므로 여기서 inline 으로 덮지 않는다.
     둘째 줄이 기본 카피 폭(760px)보다 넓어 세 줄로 접히므로 카피 폭만 넓혀 둔다.
     리드 문단은 .flagship-lead 의 max-width 640px 로 별도 제한되어 영향이 없다. */
  .flagship-copy,body.lang-en .flagship-copy{max-width:min(1120px,78vw)}
}

/* ===== 모바일 브랜드 인트로 (운영자 제안 8/12) =====================================
   '휴대폰에서 보면 Simple 하지 않다' → 히어로 앞에 매니페스토+사진+가치 3어만 담은
   한 화면을 둔다. 데스크톱 랜딩은 그대로(운영자: 컴퓨터로는 문제 없음) — ≤767px 전용.
   어두운 배경을 쓰는 이유: 홈 헤더는 최상단에서 흰 글자(투명 다크)라, 밝은 첫 화면을
   두면 로고·메뉴가 지워진다. */
/* ═══════════════════════════════════════════════════════════════════════════
   홈 첫 화면 — 브랜드 선언(운영자 지시 8/12: "모바일 메인처럼 PC 도 동일하게").
   구성은 한 줄기다: 워드마크 → 매니페스토 → 사진 → Simple·Trusted·Connected → ↓
   폭만 커지고 순서·요소는 모바일과 같다. 세 낱말은 설명 없이 글자만 둔다.
   ═══════════════════════════════════════════════════════════════════════════ */
.brand-intro{position:relative;display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:clamp(22px,3vh,34px);
  min-height:100vh;min-height:100svh;
  padding:calc(var(--header-h,76px) + 40px) clamp(24px,5vw,64px) 56px;
  background:var(--flagship-night);color:#fff;text-align:center}
.brand-intro>*{width:100%;max-width:1040px}
.brand-intro-kicker{margin:0;font-size:12px;font-weight:700;letter-spacing:.22em;
  color:rgba(255,255,255,.6)}
.brand-intro-manifesto{margin:0;font-size:clamp(30px,3.4vw,52px);line-height:1.34;
  letter-spacing:-.032em;font-weight:800;word-break:keep-all;text-wrap:balance}
.brand-intro-manifesto em{font-style:normal;
  background:linear-gradient(100deg,#fff 4%,#bdeaff 43%,#67b8ff 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.brand-intro-photo{margin:0;border-radius:20px;overflow:hidden;max-width:900px}
.brand-intro-photo img{display:block;width:100%;height:auto;max-height:44vh;object-fit:cover}
.brand-intro-values{display:flex;justify-content:center;gap:clamp(28px,5vw,72px);
  margin:0;padding:0;list-style:none;max-width:760px}
.brand-intro-values li{font-family:var(--mono);font-size:clamp(15px,1.35vw,19px);
  font-weight:700;letter-spacing:.12em;color:#bdeaff}
.brand-intro-cue{font-size:18px;color:rgba(255,255,255,.5);animation:none}

@media (max-width:767px){
  .brand-intro{align-items:stretch;gap:22px;text-align:left;
    padding:calc(var(--header-h,58px) + 18px) var(--mobile-gutter,18px) 30px}
  .brand-intro>*{max-width:none}
  .brand-intro-kicker{margin:0;font-size:11px;font-weight:700;letter-spacing:.19em;color:rgba(255,255,255,.6)}
  .brand-intro-manifesto{margin:0;font-size:clamp(23px,6.6vw,30px);line-height:1.44;letter-spacing:-.03em;
    font-weight:700;word-break:keep-all;text-wrap:balance}
  .brand-intro-manifesto em{font-style:normal;
    background:linear-gradient(100deg,#fff 4%,#bdeaff 43%,#67b8ff 92%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .brand-intro-photo{margin:0;border-radius:16px;overflow:hidden;max-width:none}
  .brand-intro-photo img{display:block;width:100%;height:auto;max-height:38vh}
  /* 세 낱말을 가로 3등분으로(운영자 지시 8/12). 각 칸 위에 괘선을 둬 세 값어치가
     같은 무게로 읽히게 한다. ★grid-template-columns·justify-content 를 반드시 다시 선언한다 —
     위 데스크톱 규칙의 `justify-content:center` 가 남으면 열이 max-content 로 줄어
     통째로 우측으로 밀린다(실측). 자간은 좁은 칸에서 'Connected' 가 넘치지 않게 낮춘다. */
  .brand-intro-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    justify-content:stretch;gap:10px;margin:0;padding:0;list-style:none;max-width:none}
  .brand-intro-values li{min-width:0;padding-top:10px;border-top:2px solid rgba(255,255,255,.88);
    font-family:var(--mono);font-size:clamp(11px,3.5vw,15px);font-weight:700;
    letter-spacing:.01em;color:#bdeaff;white-space:nowrap;text-align:center}
  /* ★margin-top:auto 를 쓰면 화살표가 화면 바닥까지 밀려 세 문구 아래에 거대한 공백이 남는다
     (운영자 지적 8/12). 흐름에 그대로 두고 고정 여백만 준다 — 섹션이 justify-content:center 라
     남는 공간은 위아래로 고르게 나뉜다. */
  /* ★text-align 필수 — 위 데스크톱 기본의 `.brand-intro>*{width:100%}` 가 남아
     화살표 span 이 전폭이 되고, 모바일 text-align:left 를 물려받아 좌측에 붙는다.
     align-self:center 는 이 경우 아무 효과가 없다(실측). */
  .brand-intro-cue{align-self:stretch;width:100%;text-align:center;
    margin-top:26px;padding-top:0;
    font-size:17px;color:rgba(255,255,255,.5);animation:none}
}