/* S20 Weather only. Reference: Plus X OLO (#km), composition rather than source code. */
:root:has(.fe-wx){
 --wx-panel:clamp(32px,5vw,96px);
 --wx-bezel:8px;--wx-radius:36px;--wx-device-width:300px;
}
.fe-wx{--ui:#5B9BD5;--wx-cell:#E3ECF6;--wx-s25:.101;--wx-r:calc(var(--wx-device-width) * var(--wx-s25))}  /* S92 X4: S25 화면 모서리 r 165 / 화면 폭 1634(Samsung Galaxy S25_V3D.png). X2: 칠한 바탕 토큰(sky · surface) 없앰 */
/* S22: the approved S20 title composition; body/chapter grammar stays shared. */
.fe-wx .md-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px var(--gutter);padding:48px 0 64px;margin:0}
.fe-wx .md-head .bp-back{grid-column:1/-1;margin:0 0 12px}
.fe-wx .md-head h1{grid-column:1/8;align-self:last baseline;font-size:clamp(64px,7.4vw,144px);line-height:.98;letter-spacing:-.045em;margin:0;max-width:8em}
.fe-wx .md-head .md-sub{grid-column:9/-1;grid-row:2;font-size:var(--r-lead);line-height:var(--heading-lh);letter-spacing:var(--ls-ko-d);margin:0;width:auto;align-self:last baseline}
.fe-wx .md-head .fe-work{grid-column:9/-1;font-size:16px;line-height:1.65;margin:0;color:var(--muted)}
.fe-wx .md-head .fe-meta{grid-column:1/8;grid-row:3;align-self:end;font-size:16px;margin:0;color:var(--muted)}
/* One showcase language for final screens, iterations and tablet output. */
.fe-wx .wx-devices{display:flex;justify-content:center;align-items:flex-start;gap:clamp(32px,5vw,96px);padding:var(--wx-panel);grid-column:1/-1;margin-top:48px}

.fe-wx .wx-device{width:var(--wx-device-width);flex:0 1 var(--wx-device-width);min-width:0;margin:0;position:relative}
.fe-wx .wx-hardware{container-type:inline-size;position:relative;padding:var(--wx-bezel);background:#20262d;border:1px solid #87919a;border-radius:var(--wx-radius);box-shadow:inset 0 0 0 2px #505a63,0 0 0 1px #17212a,0 22px 32px -18px rgb(20 38 54 / .35)}
.fe-wx .wx-hardware::before{content:"";position:absolute;z-index:3;left:50%;top:16px;width:7px;height:7px;translate:-50% 0;border-radius:50%;background:#10151a;box-shadow:0 0 0 1px #39434c;pointer-events:none}
.fe-wx .wx-key{position:absolute;right:-3px;top:24%;width:3px;height:10%;background:#535e68;border-radius:0 2px 2px 0}
.fe-wx .wx-key::after{content:"";position:absolute;top:140%;width:100%;height:60%;background:inherit;border-radius:inherit}
.fe-wx .wx-display{position:relative;overflow:hidden;border-radius:calc(100cqw * var(--wx-s25))}  /* 컨테이너 = 기기 몸체(안쪽 폭 = 화면 폭) */
.fe-wx .wx-hardware{--wx-radius:calc((var(--wx-device-width) * 1.25 - 2 * var(--wx-bezel)) * var(--wx-s25) + var(--wx-bezel))}  /* 몸체 = 화면 모서리 + 테두리(Snow 폰 = 기기 폭 1.25배) */

.fe-wx .wx-display>img,.fe-wx .wx-display>video{display:block;width:100%;height:100%;object-fit:contain;max-height:none}

.fe-wx .wx-device figcaption{margin:24px 0 0;padding:0;color:var(--muted);font-size:var(--r-cap);line-height:1.4;max-width:none;text-align:left}
.fe-wx .wx-device figcaption b{display:block;font-size:var(--r-cap);color:var(--ink);font-weight:500;margin-bottom:8px}
.fe-wx .wx-device figcaption span{display:block}.fe-wx .wx-device figcaption .fe-who{display:inline-block;margin-left:6px}
.fe-wx .wx-device figcaption small{display:block;font-size:var(--r-lab);line-height:1.5;margin-top:8px;letter-spacing:0}

/* Typography, chapter grid, dividers and spacing inherit the CookieRun case grammar. */
.fe-wx .fe-b>.wx-devices{margin-top:var(--gap-s)}
@media(max-width:1100px){
 :root:has(.fe-wx){--wx-device-width:250px;--wx-bezel:7px;--wx-radius:30px}
 .fe-wx .md-head h1{font-size:88px}.fe-wx .md-head .md-sub,.fe-wx .md-head .fe-work{grid-column:8/-1}
}
@media(max-width:700px){
 .fe-wx .md-head{display:block;padding:24px 0 40px}.fe-wx .md-head .bp-back{margin-bottom:32px}
 .fe-wx .md-head h1{font-size:64px;max-width:6em}.fe-wx .md-head .md-sub{font-size:var(--r-lead);margin-top:24px}
 .fe-wx .md-head .fe-work{font-size:15px;margin-top:20px}.fe-wx .md-head .fe-meta{font-size:14px;margin-top:24px}
 :root:has(.fe-wx){--wx-panel:24px;--wx-device-width:240px;--wx-radius:28px;--wx-bezel:6px}
 .fe-wx .wx-devices{gap:24px;flex-wrap:wrap;padding:32px 24px}
 .fe-wx .wx-devices:not(.is-hero) .wx-device{flex:0 0 min(100%,240px);width:240px}

 .fe-wx .wx-device figcaption{font-size:var(--r-cap);margin-top:16px}.fe-wx .wx-device figcaption b{font-size:var(--r-cap)}
 .fe-wx .wx-device figcaption small{font-size:var(--r-lab)}.fe-wx .wx-hardware::before{top:11px;width:4px;height:4px}
}

/* W-R(10/25) 지시서 14: Plus X OLO(#km) 표면만, 쿠키런 문법(뼈대)은 그대로. 패널 · 띠 값은 아래 토큰만 */
.fe-wx{--wx-gray:#eceef1;--wx-brand:#1c6fe0;--wx-night:#0b1330;--wx-night-ink:#dfe7f5;
 --wx-panel-r:16px;  /* 2안 B = 0 */
 --wx-strip-1:#1c6fe0;--wx-strip-2:#8db8ff;--wx-strip-3:#5c9be6;--wx-strip-4:#c9deec;--wx-strip-5:#ffd27a;--wx-strip-6:#e8edf0;--wx-strip-7:#315aca;--wx-strip-8:#9fc48a;--wx-strip-9:#fff2b3}

/* B03 Snow 전후: 파랑 패널(행 1)에 폰 2대, 캡션은 패널 밖 아래 좌 · 우 */
.fe-wx .wx-devices.is-brand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gutter);padding:0;background:none;margin-left:calc(var(--margin) * -1);margin-right:calc(var(--margin) * -1);isolation:isolate}
.fe-wx .wx-devices.is-brand>figure{display:contents}
.fe-wx .wx-devices.is-brand .wx-hardware{grid-row:1;grid-column:1;justify-self:end;width:calc(var(--wx-device-width) * 1.25);margin:calc(var(--wx-panel) / 2) 0;transform:perspective(1400px) rotate(-10deg) rotateY(16deg)}
.fe-wx .wx-devices.is-brand>figure:last-of-type .wx-hardware{grid-column:2;justify-self:start;transform:perspective(1400px) rotate(8deg) rotateY(-12deg)}
.fe-wx .wx-devices.is-brand figcaption{grid-row:2;grid-column:1;padding:0 var(--margin)}
.fe-wx .wx-devices.is-brand>figure:last-of-type figcaption{grid-column:2;text-align:right}
.fe-wx .wx-devices.is-brand>figure:last-of-type .fe-who{margin-left:auto}

/* B07 층 띠 9단 + 출력 견본 */

.fe-wx .wx-spec{grid-column:1/-1;margin-top:calc(var(--gap-s) / 2)}
.fe-wx .wx-spec ol{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 48px;list-style:none;margin:0;padding:0;font-family:Montreal,var(--f);font-weight:400;font-size:clamp(40px,5vw,96px);line-height:1;letter-spacing:-.03em;color:var(--wx-brand)}
.fe-wx .wx-spec p{margin:16px 0 0;font-size:var(--r-cap);color:var(--muted)}

/* B09 태블릿 와이드 배너 · B10 크레딧 2열 */

@media(min-width:1440px){.fe-wx .fe-cr div{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
@media(max-width:1500px){
 :root:has(.fe-wx){--wx-device-width:250px}

}

@media(max-width:700px){
 .fe-wx{--wx-panel-r:12px}

 .fe-wx .wx-devices.is-brand .wx-hardware,.fe-wx .wx-devices.is-brand>figure:last-of-type .wx-hardware{--wx-radius:calc((180px - 2 * var(--wx-bezel)) * var(--wx-s25) + var(--wx-bezel));width:auto;max-width:180px;justify-self:center;margin:24px 12px;transform:none}

}
/* S92(주영 10/25 4차-2) X2 바탕 하나: 옷 카드 칠한 바탕 · 회색 영상 바탕 없앰(글자는 먹). X4 라운드: 그림 · 영상 = 폰 화면과 같은 px, 폰 비율 그림 = 폭의 10.1% */

.fe-wx :is(.md-grid,.wx-mix) :is(img,video){border-radius:var(--wx-r)}

/* 사람 키 맞춤: Sunny · Thunder 그림은 사람만 꽉 자른 것(높이 = 키), Rain 그림은 우산 · 아래 빈칸 포함이라 사람 = 그림 높이의 70.5%(y 210 ~ 915 / 1000) → 136% ÷ .705, 아래 빈칸 8.5%만큼 내림 */

.fe-wx .wx-pop.is-car{padding-top:calc(var(--bh) * .45)}  /* 회전판: 카드 밖으로 나온 머리가 앞 줄에 겹치지 않게 */
/* ── S100 지시서 16: 쿠키런 문법 재구성(weather_mix.py WX_ADD). 표, 도해, 기기, 막대, 타임라인, 폴더 = HTML/CSS/SVG. 색 = 먹, 회색, 선 + Weather 하늘(--ui, --wx-cell)만.
   JY 상세 클래스 이름(os-ic, os-speed, sp-r, os-ex, jy-steps)을 같은 뜻으로 씀, 값은 1px 선, 8px 배수, style.css 토큰 ── */

.fe-wx .wx-src{margin:16px 0 0;font-size:var(--r-lab);color:var(--muted)}
.fe-wx .os-ic{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* 3 피드백 5줄, 전후 폰, B안 단계 */

.fe-wx .wx-mix .wx-annot-row{margin-top:48px}

.fe-wx .wx-bstep{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n,8),minmax(0,1fr));gap:var(--gutter)}  /* --n 칸 수: B안 8칸 중 4 · Snow 5 · Set 4 */
.fe-wx .wx-bstep li{position:relative}
.fe-wx .wx-bstep li+li::before{content:"→";position:absolute;left:calc(var(--gutter) / -2);top:40%;transform:translateX(-50%);color:var(--muted)}
.fe-wx .wx-bstep :is(img,video){display:block;width:100%;height:auto;aspect-ratio:var(--ar,9/19.5);object-fit:cover}
/* 4 기온 × 날씨 표: 머리 = 기온 축(옷 아이콘 + 단계 선), 칸 = 벤토(정지 = 첫 프레임, 올림, 초점, 탭 = 재생) */

.fe-wx .wx-mix .wx-an.is-2{grid-template-columns:repeat(2,minmax(0,1fr));grid-column:1/span 6}
.fe-wx .wx-mix .wx-an.is-4{grid-template-columns:repeat(4,minmax(0,1fr));grid-column:1/-1}

/* 5 숫자 블록 끝 = 하늘(쿠키런 분홍 자리), 층 반복 + 목록, 타임라인, 세트 카드, 막대, 폴더 */
.fe-wx .dg-fl li:last-child b{color:var(--ui)}
.fe-wx .wx-lay{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center;margin-top:16px}

.fe-wx .wx-lay-ls{grid-column:8/-1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column-reverse}
.fe-wx .wx-lay-ls li{display:grid;grid-template-columns:2.4em 8em 1fr;column-gap:12px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);font-size:var(--r-cap)}
.fe-wx .wx-lay-ls span{color:var(--muted);font-variant-numeric:tabular-nums}
.fe-wx .wx-lay-ls b{font-weight:500}
.fe-wx .wx-lay-ls em{grid-column:2;grid-row:2;justify-self:start;font-style:normal;font-size:var(--r-lab);color:var(--ui)}
.fe-wx .wx-lay-ls small{grid-column:3;grid-row:1/span 2;color:var(--muted)}
.fe-wx .wx-tline{margin:16px 0 0}
.fe-wx .wx-tline ol{list-style:none;margin:0;padding:0}
.fe-wx .wx-tline li,.fe-wx .wx-tline-ax{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center;padding:8px 0;border-top:1px solid var(--line);margin:0}
.fe-wx .wx-tline li>span,.fe-wx .wx-tline-ax>span:first-child{grid-column:1/span 3;font-size:var(--r-cap)}
.fe-wx .wx-tline li>p,.fe-wx .wx-tline-ax>span:last-child{grid-column:4/-1;position:relative;height:32px;margin:0}
.fe-wx .wx-tline i{position:absolute;top:0;bottom:0;left:calc(var(--a) * 100%);width:calc((var(--z) - var(--a)) * 100% - 2px);display:flex;align-items:center;padding:0 8px;border:1px solid var(--ink);border-radius:4px;font-style:normal;font-size:var(--r-lab);white-space:nowrap;overflow:hidden}
.fe-wx .wx-tline i.is-l{background:var(--ui);border-color:var(--ui);color:#fff}
.fe-wx .wx-tline i.is-r{background:var(--wx-cell);border-color:var(--line)}
.fe-wx .wx-tline-ax{border-top:0;padding-top:0}
.fe-wx .wx-tline-ax>span:last-child{height:20px}
.fe-wx .wx-tline-ax i{border:0;padding:0;width:auto;transform:translateX(-50%);color:var(--muted);font-variant-numeric:tabular-nums}
.fe-wx .wx-tline-ax i:first-child{transform:none}.fe-wx .wx-tline-ax i:last-child{transform:translateX(-100%)}

.fe-wx .wx-set{padding:24px;border:1px solid var(--line);border-radius:var(--wx-r);font-size:var(--r-cap);line-height:1.55}
.fe-wx .wx-set.is-4{border-color:var(--ui);box-shadow:inset 0 0 0 1px var(--ui)}
.fe-wx .wx-set h4{margin:0;font-size:var(--r-body);font-weight:500}
.fe-wx .wx-set h4 small{margin-left:8px;font-size:var(--r-lab);font-weight:400;color:var(--muted)}
.fe-wx .wx-set p{margin:8px 0 0;color:var(--muted)}
.fe-wx .wx-set strong{font-weight:500;color:var(--ui)}
.fe-wx .wx-set ol{list-style:none;margin:16px 0 0;padding:0}
.fe-wx .wx-set ol li{display:flex;gap:12px;align-items:baseline;padding:6px 0;border-top:1px solid var(--line)}
.fe-wx .wx-set ol b{min-width:6em;font-weight:500}

.fe-wx .wx-mix .wx-cap2>.os-speed{grid-column:9/-1;margin:16px 0 0}
.fe-wx .os-speed figcaption{margin:0 0 8px}
.fe-wx .sp-r{display:grid;grid-template-columns:56px 1fr;column-gap:16px;row-gap:4px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.fe-wx .sp-r>span{font-size:var(--r-body)}
.fe-wx .sp-bar{position:relative;height:16px;margin:0;border-left:1px solid var(--line)}
.fe-wx .sp-bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--w) * 100%);background:var(--wx-cell);border-radius:0 4px 4px 0}
.fe-wx .sp-bar i.is-a{background:var(--ui)}
.fe-wx .sp-v{grid-column:2;font-weight:400;font-size:var(--r-cap);color:var(--muted);font-variant-numeric:tabular-nums}

.fe-wx .wx-osx{margin:16px 0 0}
.fe-wx .os-ex{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-areas:"side path" "side list";gap:8px;padding:8px;border:1px solid var(--ink);border-radius:var(--wx-r);background:var(--wx-cell)}
.fe-wx .os-ex>div{padding:16px 20px;border-radius:calc(var(--wx-r) - 8px);background:var(--paper);min-width:0}
.fe-wx .ex-side{grid-area:side}.fe-wx .ex-path{grid-area:path;font-size:var(--r-cap);color:var(--muted)}.fe-wx .ex-list{grid-area:list}
.fe-wx .os-ex ul{list-style:none;margin:0;padding:0}
.fe-wx .os-ex li{display:grid;grid-template-columns:auto 1fr auto;column-gap:12px;align-items:center;padding:8px;border-radius:8px;font-size:var(--r-cap)}
.fe-wx .os-ex li.is-on{background:var(--wx-cell)}
.fe-wx .os-ex li b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fe-wx .os-ex li small{font-size:var(--r-lab);color:var(--muted);font-variant-numeric:tabular-nums}
.fe-wx .os-ex .os-ic{width:18px;height:18px;color:var(--ui)}
/* 6 적용: 폰 + 태블릿 2, 적용 범위 띠 */
.fe-wx .wx-out{display:flex;flex-wrap:wrap;align-items:flex-start;gap:24px}
.fe-wx .wx-out>.wx-devices{margin:16px 0 0;padding:0;flex:0 1 auto}

@media(max-width:1100px){
 .fe-wx .wx-lay-ls{grid-column:1/-1}
}
@media(max-width:700px){

 .fe-wx .wx-bstep{grid-template-columns:repeat(min(var(--n,8),4),minmax(0,1fr))}
 .fe-wx .wx-bstep[style*="--n:5"]{grid-template-columns:repeat(2,minmax(0,1fr))}

 .fe-wx .wx-mix .wx-an.is-2{grid-column:1/-1}
 .fe-wx .wx-mix .wx-an.is-4{grid-template-columns:repeat(2,minmax(0,1fr))}

 .fe-wx .wx-tline li>span,.fe-wx .wx-tline-ax>span:first-child,.fe-wx .wx-tline li>p,.fe-wx .wx-tline-ax>span:last-child{grid-column:1/-1}
 .fe-wx .wx-mix .wx-cap2>.os-speed{grid-column:1/-1}
 .fe-wx .os-ex{grid-template-columns:1fr;grid-template-areas:"side" "path" "list"}
}

/* Z3 B안 단계 끝 = 결과 폰, Snow 띠 간격 */

.fe-wx .wx-bstep figcaption{margin-top:8px}
.fe-wx .wx-bstep[style*="--n:5"]{column-gap:calc(var(--gutter) * 1.5)}

/* Z7 목업 3장: 이미지 자체가 폰(몸체 · 테두리 · 라운드 없음), 같은 높이 */
.fe-wx .wx-mock{flex:1 1 100%;display:flex;gap:var(--gutter);margin-top:16px}
.fe-wx .wx-mock figure{margin:0;min-width:0}
.fe-wx .wx-mock img{display:block;width:100%;height:auto;border-radius:0}
.fe-wx .wx-mock figcaption{margin-top:8px;font-size:var(--r-cap);color:var(--muted)}

@media(max-width:700px){
 .fe-wx .wx-mock{flex-direction:column}
}
/* ── S104 장 순서 잠금(원인 → 근거 → 결정 → 결과). 표 → 카드, 빈 칸 자리, 회전판 되살림 ── */

.fe-wx .wx-cards4{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.fe-wx .wx-cards4 h4{font-family:Montreal,var(--f)}

.fe-wx .wx-pop:not(.is-car){row-gap:calc(var(--bh) * .8)}  /* 격자 2줄(5장): 카드 밖 머리가 윗줄에 겹치지 않게 */
@media(max-width:700px){
 .fe-wx .wx-cards4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ── S107 주영 10/26 피드백 ── */
.fe-wx .wx-annot.is-loop .wx-pin{opacity:0;transform:translateY(8px) scale(.96);transition:opacity var(--t-2) var(--ease-out),transform var(--t-2) var(--ease-out)}  /* 01 피드백 요지: 핀이 차례로 떠오름(WX_PIN_JS) */
.fe-wx .wx-annot.is-loop .wx-pin.is-on{opacity:1;transform:none}

.fe-wx .wx-mix>.wx-devices.is-brand{margin-top:16px}

/* ── S108 주영 10/26 ── */
.fe-wx .wx-hl{position:absolute;border:2px solid var(--ui);border-radius:8px;opacity:0;transition:opacity var(--t-2) var(--ease-out);pointer-events:none}  /* 03-01 핀마다 네모 강조 */
.fe-wx .wx-hl.is-warn{border-color:#e2563b}
.fe-wx .wx-hl.is-cur{opacity:1}
.fe-wx .wx-annot.is-loop .wx-pin.is-on:not(:has(~.wx-pin.is-on)){box-shadow:0 0 0 2px var(--ui),0 10px 24px -12px rgb(8 22 40 / .5)}  /* 마지막에 뜬 핀 = 지금 핀 */
.fe-wx .wx-mix .wx-annot-row{align-items:stretch}  /* 우선순위 = 그림과 같은 높이 한 판 */
.fe-wx .wx-mix .wx-prio{grid-column:6/-1;display:flex;flex-direction:column}
.fe-wx .wx-mix .wx-prio>.wx-cap{margin-top:0}
.fe-wx .wx-mix .wx-prio ol{flex:1;display:flex;flex-direction:column;margin:16px 0 0}
.fe-wx .wx-mix .wx-prio li{flex:1;align-content:center;transition:background var(--t-2) var(--ease-out)}
.fe-wx .wx-mix .wx-prio li.is-cur{background:var(--wx-cell)}

@media(max-width:700px){.fe-wx .wx-mix .wx-prio{grid-column:1/-1}}
/* ── S111 주영 10/26 ── */

.fe-wx .wx-ba2{display:grid;grid-template-columns:3em repeat(var(--n,4),minmax(0,1fr));gap:8px var(--cg);align-items:center;margin-top:16px}  /* 01-01 2D 줄 ▼ 3D 줄(Behance Before & After 문법) */
.fe-wx .wx-ba2>b{font-family:Montreal,var(--f);font-size:var(--r-body);font-weight:500}
.fe-wx .wx-ba2>i{justify-self:center;font-style:normal;font-size:var(--r-lab);line-height:1;color:var(--muted)}
.fe-wx .wx-ba2>p{margin:0;padding-top:8px;border-top:1px solid var(--line);font-size:var(--r-cap)}

@media(max-width:700px){.fe-wx .wx-ba2{grid-template-columns:2em repeat(var(--n,4),minmax(0,1fr));gap:6px}}

/* S123 Weather: 최종 모션 선택 · 판단 그림 · 접힌 기록. 머리 · 개요 · 장 배치는 쿠키런과 같은 공용 문법(featured.css)을 그대로 씀 */

.md.fe-wx.wx-editorial .wx-record{display:block;margin-top:32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-column:1/-1}
.md.fe-wx.wx-editorial .wx-record>summary{padding:20px 0;cursor:pointer;font-size:var(--r-body);color:var(--ink)}
.md.fe-wx.wx-editorial .wx-record-body{padding-bottom:32px;min-width:0}
.md.fe-wx.wx-editorial .wx-an.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.md.fe-wx.wx-editorial .wx-an.is-2 .wx-cell-m{aspect-ratio:6/7}

/* S125 의상 색: 폰 3대(Snow 변경안 · 초기 시안 가운데 정면 · 컬러 변경안) */
.fe-wx .wx-devices.is-brand.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fe-wx .wx-devices.is-brand.is-3>figure:nth-of-type(1) .wx-hardware{grid-column:1;justify-self:end;width:var(--wx-device-width);transform:perspective(1400px) rotate(-8deg) rotateY(16deg)}
.fe-wx .wx-devices.is-brand.is-3>figure:nth-of-type(2) .wx-hardware{grid-column:2;justify-self:center;width:var(--wx-device-width);transform:none}
.fe-wx .wx-devices.is-brand.is-3>figure:nth-of-type(3) .wx-hardware{grid-column:3;justify-self:start;width:var(--wx-device-width);transform:perspective(1400px) rotate(8deg) rotateY(-16deg)}
.fe-wx .wx-devices.is-brand.is-3>figure:nth-of-type(2) figcaption{grid-column:2;text-align:center}
.fe-wx .wx-devices.is-brand.is-3>figure:nth-of-type(3) figcaption{grid-column:3}
@media(max-width:700px){.fe-wx .wx-devices.is-brand.is-3>figure:nth-of-type(n) .wx-hardware{transform:none;margin:16px 4px;width:calc(100% - 8px);max-width:110px;justify-self:center}}
/* S126 히어로 = 와이드 영상 하나(Behance Sunny 문법) */
.fe-wx .wx-hero-main{margin:0}
.fe-wx .wx-hero-main video{display:block;width:100%;height:auto;aspect-ratio:1920/870;object-fit:cover}
.fe-wx .wx-hero-main figcaption{margin-top:8px}
/* S127 의상 색 루프: 지금 단계 폰만 색 · 조금 확대, 나머지는 회색(JS 없음 · 동작 줄이기 = 모두 색) */
.fe-wx .wx-trio.is-loop .wx-device .wx-hardware{transition:filter var(--t-3) var(--ease-io),scale var(--t-3) var(--ease-io)}
.fe-wx .wx-trio.is-loop .wx-device:not(.is-cur) .wx-hardware{filter:grayscale(1) opacity(.55)}
.fe-wx .wx-trio.is-loop .wx-device.is-cur:not(:nth-of-type(2)) .wx-hardware{scale:1.08}
.fe-wx .wx-trio.is-loop .wx-device figcaption{transition:opacity var(--t-3) var(--ease-io)}
.fe-wx .wx-trio.is-loop .wx-device:not(.is-cur) figcaption{opacity:.45}

@media(max-width:700px){.fe-wx .wx-trio.is-loop .wx-device.is-cur:not(:nth-of-type(2)) .wx-hardware{scale:1.04}.fe-wx .wx-devices.is-brand.is-3{overflow-x:clip}}
/* S129 캡션을 그림 오른쪽으로 · 우선순위 지금 줄 본문 굵게 */
.fe-wx .wx-mix .wx-side{display:grid;grid-template-columns:subgrid;align-items:end}
.fe-wx .wx-mix .wx-side>.wx-an{grid-column:1/span 7}
.fe-wx .wx-mix .wx-side>.wx-why{grid-column:9/-1;margin:0 0 40px}  /* S130 작은 캡션 → S135 소본문 */
.fe-wx .wx-mix .wx-why{margin-top:24px;font-size:var(--r-role);line-height:var(--body-lh);color:var(--ink)}  /* S135 주영: 바꾼 이유 = 소본문(캡션보다 크고 먹색) */
.fe-wx .wx-mix>.wx-why{grid-column:1/span 8}  /* 그림 아래 근거 = 8칸(.wx-rh+.wx-cap와 같은 폭) */
.fe-wx .wx-mix .wx-sh{margin:40px 0 16px;font-size:var(--r-cap);font-weight:500;line-height:1.4;color:var(--ink)}  /* S135 소제목: h3(장 소단락)보다 작게, 캡션과는 굵기 · 먹색으로 구분 */
.fe-wx .wx-mix .wx-prio li span{transition:font-weight var(--t-2) var(--ease-out)}
.fe-wx .wx-mix .wx-prio li.is-cur span{font-weight:600}
@media(max-width:700px){.fe-wx .wx-mix .wx-side>:is(.wx-an,.wx-why){grid-column:1/-1}.fe-wx .wx-mix .wx-side>.wx-why{margin:16px 0 0}.fe-wx .wx-mix>.wx-why{grid-column:1/-1}}
/* S133 Modular Weather System(Behance 영상 문법 다듬기): 왼쪽 = 세로 긴 폰(장면 + 앱 패널 자리), 오른쪽 = 한 장 ↔ 9겹(--e). 층은 세로선이 서 있는 Y축 회전만, 오른쪽 아래로 고르게 계단. 바꾸는 층은 위로 빠짐(--o). data-t 23|27 = Character, data-w partly|sunny = Cloud. 색 = 먹 선 + 지금 층만 파랑 */
.fe-wx .wx-ms{--e:1;position:relative;margin:0;display:grid;grid-template-columns:30% 1fr;align-items:center;column-gap:6%}
.fe-wx .wx-lay>.wx-ms{grid-column:1/span 7}
.fe-wx .wx-ms-ph{aspect-ratio:9/19.5;padding:2.2%;border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);border-radius:14% / 6.5%;background:color-mix(in srgb,var(--ink) 6%,var(--paper))}
.fe-wx .wx-ms-scr{position:relative;width:100%;height:100%;border-radius:12% / 5.6%;overflow:hidden;container-type:inline-size;background:linear-gradient(#6dc0c6 40%,#4f8fd6)}
.fe-wx .wx-ms-sc{position:relative;aspect-ratio:720/900}
.fe-wx .wx-ms-sc::after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(transparent,#6dc0c6)}  /* 장면 아래를 바탕 색으로 이어 붙임 */
.fe-wx :is(.wx-ms-p,.wx-ms-l>div){position:absolute;inset:0}
.fe-wx :is(.wx-ms-p,.wx-ms-l>div)>img{position:absolute;inset:0;width:100%;height:100%;border-radius:0;transition:opacity var(--t-2) var(--ease-out)}
.fe-wx .wx-ms :is(.wx-ms-p,.wx-ms-l>div)>img.wx-ms-hot{inset:auto;left:68.5%;bottom:30.6%;height:26%;width:auto;translate:-50% 0;opacity:0}
.fe-wx .wx-ms[data-t="27"] [data-l="l07-character"] img:first-child{opacity:0}
.fe-wx .wx-ms[data-t="27"] [data-l="l07-character"] img.wx-ms-hot{opacity:1}
.fe-wx .wx-ms[data-w="sunny"] [data-l="l06-cloud"] img{opacity:0}
.fe-wx .wx-ms-ui{position:absolute;left:9%;top:12%;margin:0;color:#fff;font-family:Montreal,var(--f);line-height:1}
.fe-wx .wx-ms-ui small{display:block;font-size:5cqw}
.fe-wx .wx-ms-ui b{display:block;font-weight:300;font-size:19cqw;margin-top:4cqw;letter-spacing:-.02em}
.fe-wx .wx-ms-ui em{display:block;font-style:normal;font-size:5.4cqw;margin-top:2cqw}
.fe-wx .wx-ms-ui :is(b,em)>span+span,.fe-wx .wx-ms[data-t="27"] .wx-ms-t>span:first-child,.fe-wx .wx-ms[data-w="sunny"] .wx-ms-w>span:first-child{display:none}
.fe-wx .wx-ms[data-t="27"] .wx-ms-t>span+span,.fe-wx .wx-ms[data-w="sunny"] .wx-ms-w>span+span{display:inline}
.fe-wx .wx-ms-pn{display:block;height:15%;margin:4% 6% 0;border-radius:7cqw;background:rgb(255 255 255 / .18);border:1px solid rgb(255 255 255 / .22)}
.fe-wx .wx-ms-pn:first-of-type{margin-top:-14%;position:relative}
.fe-wx .wx-ms-pn.is-s{height:8%}
.fe-wx .wx-ms-st{container-type:inline-size;position:relative;aspect-ratio:1/1.05;perspective:1200px}
.fe-wx .wx-ms-pl{position:absolute;left:26%;top:22%;width:34%;aspect-ratio:720/900;transform-style:preserve-3d}
.fe-wx .wx-ms-l{--o:0;position:absolute;inset:0;transform:translate(calc((4 - var(--i)) * var(--e) * 7cqw),calc((4 - var(--i)) * var(--e) * 4cqw - var(--o) * 14cqw)) rotateY(calc(var(--e) * -48deg)) translateZ(calc(var(--i) * 1px));transform-origin:50% 50%}  /* 1px = 한 장일 때도 층 순서 유지 */
.fe-wx .wx-ms-l>div{border:1px solid color-mix(in srgb,var(--ink) calc(var(--e) * 55%),transparent);background:color-mix(in srgb,#fff calc(var(--e) * 28%),transparent);transition:border-color var(--t-2) var(--ease-out),background var(--t-2) var(--ease-out)}
.fe-wx .wx-ms-l.is-cur>div{border-color:var(--ui);background:color-mix(in srgb,var(--ui) 12%,transparent)}
.fe-wx .wx-lay>.wx-ms+.wx-lay-ls li.is-cur b{color:var(--ui)}
@media(max-width:1100px){.fe-wx .wx-lay>.wx-ms{grid-column:1/-1}}