/* =========================================================
   2026 겨울학기 인터랙티브 랜딩 (winter2026)
   - 모든 장면은 고정된 논리 무대(.w26-stage) 위에서 그려지고, JS가 화면에 맞춰 배율(--s)을 준다
     · 가로 화면  : 1920 × 1080 (Figma 프레임과 같은 좌표)
     · 세로 화면  :  720 × 1440 (모바일 전용 배치)
   - 무대 안의 px 값은 전부 "무대 좌표"다. 화면 px가 아니다.
   - 클래스는 .w26- 접두사로 묶어 사이트 공통 style.css와 섞이지 않게 한다
   - 가로/세로 판정은 CSS와 JS 모두 (orientation: portrait) 하나로 한다 (서로 어긋나지 않게)
   - 사이트 공통 헤더는 position: fixed (PC 72px · 1280px 미만 90px, 아래로 스크롤하면 위로 51px 숨음).
     고정 화면은 창 전체를 덮고, 장면은 헤더 아래 영역(--w26-head 아래)에 맞춘다
   ========================================================= */

.w26 {
    --w26-bg: #1a1a1a;          /* Figma Rectangle 3376 */
    --w26-dark: #252525;        /* 채워진 원 */
    --w26-mid: #5a5a5a;         /* 밝은 원 · 원 테두리 */
    --w26-sub: #a9a9a9;         /* 보조 글자 */
    --w26-orange: #fa4616;      /* D.LAB --dlab-color-orange */
    --w26-white: #ffffff;
    --w26-font-base: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    --w26-font-heading: Paperozi, Paperlogy, 'Pretendard Variable', Pretendard, sans-serif;

    background: var(--w26-bg);
    color: var(--w26-white);
    font-family: var(--w26-font-base);
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;
}
.w26 *, .w26 *::before, .w26 *::after { box-sizing: border-box; }
.w26 :where(p, h1, h2, h3) { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: normal; }
.page-landing .main.w26 { background: var(--w26-bg); }    /* 공통 CSS의 .page-landing .main 회색 배경을 덮는다 */
/* 공통 CSS의 `.page-landing .main > section { width: 123.2rem; margin: 0 auto }` (1280px 이상)를 이긴다.
   이게 없으면 PC에서 스토리가 1232px 폭으로 좁아지고, 헤더 밑으로 끌어올리는 여백도 사라진다 */
#w26 > .w26-story { width: auto; margin-left: 0; margin-right: 0; }

/* ---------- 스크롤 구간 + 고정 화면 ----------
   스토리는 히어로 다음(2번째 섹션)이라 끌어올리지 않는다. 창 맨 위에 닿으면 고정되고,
   고정 화면은 창 전체를 덮되 장면은 헤더 아래 영역에 맞춘다(fit). */
.w26-story,
#w26 > .w26-story {
    position: relative;
    margin-top: 0;
    background: var(--w26-bg);
}
.w26-viewport {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: var(--w26-bg);
}
.w26-stage {
    position: absolute;
    left: 50%;
    top: calc(var(--w26-head, 0px) + (100% - var(--w26-head, 0px)) / 2);   /* 헤더 아래 영역의 가운데 */
    width: 1920px;
    height: 1080px;
    transform: translate(-50%, -50%) scale(var(--s, 0.5));
    transform-origin: 50% 50%;
}

.w26-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }

/* ---------- 원 ---------- */
/* 원은 테두리만으로 그린다: 테두리 두께 = 반지름이면 채운 원, 2px이면 아웃라인.
   두께를 바꾸면 가운데 구멍이 열리고 닫힌다. 밝기(마우스 주변)는 JS가 filter로 준다. */
.w26-c {
    position: absolute;
    border-radius: 50%;
    border: 0 solid var(--w26-mid);
    background: transparent;
}

.w26-portrait {
    position: absolute;
    left: 786px; top: 366px; width: 349px; height: 349px;   /* JS가 들어오기 전 자리 (JS가 덮어쓴다) */
    border-radius: 50%;
    overflow: hidden;
    background: #d9d9d9;
}
.w26-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 글자 공통 ---------- */
.w26-t { position: absolute; pointer-events: none; opacity: 0; }
.w26-t.is-first { opacity: 1; }                /* JS가 없어도 첫 장면은 보이게 */
.w26-center { text-align: center; }
.w26-h { font-family: var(--w26-font-heading); font-weight: 800; letter-spacing: 0; }
.w26-lh14 { line-height: 1.4; }
.w26-xb { font-weight: 800; }
.w26-b  { font-weight: 700; }
.w26-m  { font-weight: 500; }
.w26-r  { font-weight: 400; }
.w26-thin { font-weight: 100; }
.w26-orange { color: var(--w26-orange); }
.w26-subc { color: var(--w26-sub); }

/* ===== 장면 1 · 파레토 ===== */
.w26-s1-title { left: 0; width: 1920px; top: 151px; font-size: 52px; line-height: 1.4; }
.w26-s1-lead  { left: 0; width: 1920px; top: 245px; font-size: 24px; line-height: 1.4; }
.w26-s1-cap   { left: 0; width: 1920px; top: 768px; font-size: 24px; line-height: 1.4; }
.w26-hint {
    left: 0; width: 1920px; top: 960px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    font-size: 18px; color: var(--w26-sub);
}
.w26-hint svg { width: 40px; height: 40px; animation: w26-bob 1.8s ease-in-out infinite; }
@keyframes w26-bob { 50% { transform: translateY(8px); } }

/* ===== 장면 3~5 · 80% / AI / 남는 20% ===== */
.w26-g1 { left: 240px; top: 346px; width: 640px; }
.w26-g1-label { font-size: 32px; line-height: 1.4; }
.w26-g1-title { font-size: 96px; line-height: 1.4; margin-top: 6px; }
.w26-g1-body  { font-size: 32px; line-height: 1.4; margin-top: 109px; }

.w26-g2 { left: 779px; top: 303px; width: 363px; }
.w26-g2-lead  { font-size: 32px; line-height: 1.4; }
.w26-g2-words { font-size: 96px; line-height: 1.2; margin-top: 37px; }

.w26-g3 {
    left: 1405px; top: 473px;
    font-size: 32px; line-height: 1.4; white-space: nowrap;
}

/* ===== 장면 7~8 · 두 개의 원 ===== */
.w26-duo-c {
    position: absolute;
    border-radius: 50%;
    border: 0 solid transparent;
    background: transparent;
    opacity: 0;
    pointer-events: none;
}
.w26-head7 { left: 0; width: 1920px; top: 119px; font-size: 32px; line-height: 1.4; }
.w26-top8  { left: 0; width: 1920px; top: 94px;  font-size: 28px; line-height: 1.4; }
.w26-bot8  { left: 0; width: 1920px; top: 861px; font-size: 28px; line-height: 1.4; }

/* 원 안 글자 상자: 원과 같은 크기 · 같은 자리 (JS가 left/top/width/height를 준다) */
.w26-duo-box { position: absolute; pointer-events: none; opacity: 0; }
.w26-duo-label { position: absolute; left: 0; right: 0; top: 13.9%; font-size: 32px; line-height: 1.4; }
.w26-duo-main  {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    font-size: 60px; line-height: 1.4;
}
.w26-duo-sub   { position: absolute; left: 0; right: 0; top: 78.8%; font-size: 32px; line-height: 1.4; }
/* 장면 8: 라벨이 내려오고 숫자 밑에 설명이 붙는다 (Figma 2026-10-22 수정본) */
.w26-duo-label8 { top: 22.1%; }
.w26-duo-sub8   { top: 73.1%; }
.w26-duo-num   {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    font-size: 150px; line-height: 1.4; font-variant-numeric: tabular-nums;
}

/* ===== 장면 10 · 결론 ===== */
.w26-s10-title { left: 1142px; top: 402px; font-size: 60px; line-height: 1.4; }
.w26-s10-sub   { left: 1142px; top: 639px; font-size: 28px; line-height: 1.4; }
.w26-s10-cta {
    left: 0; width: 1920px; top: 927px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    font-size: 24px; line-height: 1.4;
    color: inherit; text-decoration: none;
}
.w26-s10-cta { pointer-events: auto; }   /* 숨어 있을 땐 visibility:hidden이라 눌리지 않는다 */
.w26 .w26-s10-cta, .w26 .w26-s10-cta:hover, .w26 .w26-s10-cta:visited { color: var(--w26-white); }
.w26-s10-cta svg { width: 50px; height: 50px; transition: transform .3s ease; }
.w26-s10-cta:hover svg { transform: translateY(6px); }
.w26-s10-cta:focus-visible { outline: 2px solid var(--w26-orange); outline-offset: 8px; border-radius: 8px; }

/* 모바일에서 줄바꿈이 필요한 문장 */
.w26-br-mob { display: none; }

/* =========================================================
   세로 화면 (720 × 1440 무대) — JS의 matchMedia와 같은 조건
   ========================================================= */
@media (orientation: portrait) {
    .w26 .w26-stage { width: 720px; height: 1440px; }
    .w26 .w26-portrait { left: 210px; top: 570px; width: 300px; height: 300px; }

    .w26 .w26-s1-title { width: 720px; top: 250px; font-size: 52px; }
    .w26 .w26-s1-lead  { width: 720px; top: 345px; font-size: 28px; }
    .w26 .w26-s1-cap   { width: 720px; top: 905px; font-size: 26px; }
    .w26 .w26-hint     { width: 720px; top: 1250px; font-size: 22px; }
    .w26 .w26-hint svg { width: 48px; height: 48px; }

    .w26 .w26-g1 { left: 60px; top: 470px; width: 600px; }
    .w26 .w26-g1-body { margin-top: 70px; }

    .w26 .w26-g2 { left: 60px; top: 300px; width: 600px; }

    .w26 .w26-g3 { left: 60px; top: 1000px; }

    .w26 .w26-head7 { width: 720px; top: 110px; font-size: 32px; }
    .w26 .w26-top8  { width: 720px; top: 40px; font-size: 28px; }
    .w26 .w26-bot8  { width: 720px; top: 1240px; font-size: 26px; }
    .w26 .w26-duo-label { font-size: 30px; top: 14%; }
    .w26 .w26-duo-main  { font-size: 40px; }
    .w26 .w26-duo-sub   { font-size: 27px; top: 73%; }
    .w26 .w26-duo-num   { font-size: 120px; }
    .w26 .w26-duo-label8 { top: 22%; }
    .w26 .w26-duo-sub8   { top: 73%; }

    .w26 .w26-s10-title { left: 0; width: 720px; top: 770px; text-align: center; font-size: 60px; }
    .w26 .w26-s10-sub   { left: 0; width: 720px; top: 960px; text-align: center; font-size: 28px; }
    .w26 .w26-s10-cta   { width: 720px; top: 1210px; font-size: 26px; }

    .w26 .w26-br-mob { display: inline; }
    .w26 .w26-br-desk { display: none; }
}

/* ---------- 움직임 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
    .w26-hint svg { animation: none; }
}