/* 런웨이 홈(F18) — 폰 세로(420px 이하) 코디 탭 첫 화면. 값은 3단계 확정 docs/v2_3단계_시안_런웨이홈_확정_11-06.md §1
   1C 회색 스튜디오 · 2A 무광 · 3A 넓고 옅은 그림자 · 4A 얇은 막대 · 5A 기호만 · 6B 흰 네모 아이콘 · 7C 먹 알약 · 8A · 9A · 10A · 11B 종이(실험 B) */

/* 머리 줄: style.css grid(옷방 | 날씨, 요약은 둘째 줄)를 그대로 두고 아이콘(홈 [⊞][+] · 목록 [◎])을 셋째 칸에.
   아이콘이 숨으면(넓은 화면) 원래 두 칸 그대로. 날씨 → 첫 버튼 10(F20 3단계 시안) = column-gap 12 − 2 */
.head:has(.hics:not([hidden])){grid-template-columns:1fr auto auto}
.hics{grid-column:3;display:flex;margin:-7px -10px -7px -2px}
.ib{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ink);flex:none}
.ib .bx{width:38px;height:38px;border-radius:12px;background:#fff;box-shadow:var(--sh-card);display:flex;align-items:center;justify-content:center}
.ib svg{width:20px;height:20px}

/* 홈일 때: 요약 줄 숨김, 목록 숨김. 아래 여백 = 탭바 높이 — 무대가 최소(300)에 닿는 작은 화면에선 홈이 스크롤되고 막대 줄이 탭바 위로 올라옴(2단계 §1-2) */
body.rw-home .head p{display:none}
body.rw-home .app{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
body.rw-home #tab-looks>:not(.rw){display:none}
/* 폰 목록: [+]는 머리 줄 오른쪽 끝으로 옮겼으니 필터 옆 [+]는 숨김(11-06) */
body.rw-list #similar-btn{display:none}

.rw{display:flex;flex-direction:column;
  margin:0 calc(-1*max(16px,env(safe-area-inset-left,0px))) 0 calc(-1*max(16px,env(safe-area-inset-right,0px)));
  height:calc(100vh - 52px - 60px - env(safe-area-inset-bottom,0px));
  height:calc(100dvh - 52px - 60px - env(safe-area-inset-bottom,0px));
  min-height:388px}

/* 기온 줄 44 · 먹 알약 32 */
.rw-tl{height:44px;flex:none;display:flex;align-items:center;padding:0 16px;order:0}
.rw-tb{display:inline-flex;align-items:center;height:44px;max-width:100%;min-width:0}
.rw-tb .pl{display:inline-flex;align-items:center;gap:4px;height:32px;max-width:100%;min-width:0;padding:0 10px 0 12px;border-radius:999px;background:var(--point);color:#fff;font-size:14px;font-weight:600;white-space:nowrap}
.rw-tb .tx{overflow:hidden;text-overflow:ellipsis;min-width:0}
.rw-tb .big{font-family:var(--num)}
.rw-tb svg{width:14px;height:14px;flex:none}

/* 무대 — 회색 스튜디오, 화면 끝까지 */
.rw-st{position:relative;isolation:isolate;flex:1;min-height:300px;overflow:hidden;order:1; /* isolate: 모델 z-index가 시트 위로 새지 않게 */touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  background:linear-gradient(to bottom,#f2f2f1 0,#ececea 40%,#e4e4e0 62%,#dcdcd7 76%,#d6d6d1 100%)}
.rw-m{position:absolute;left:50%;bottom:10%;height:78%;padding:0;pointer-events:none;transform-origin:50% 73%;will-change:transform,filter,opacity}
.rw-m:focus-visible{outline:2px solid var(--point);outline-offset:4px}
/* 종이 그림은 둘레 여백만큼 모델 자리 밖으로 펼침. max-width:none — 폭만 줄어 홀쭉해지지 않게(3단계 3판) */
.rw-m img{position:absolute;left:var(--pl);top:var(--pt);width:var(--pw);height:var(--phh);max-width:none;display:block;z-index:2;-webkit-user-drag:none;opacity:0;transition:opacity .2s}
.rw-m img.on{opacity:1}
.rw-shd{position:absolute;left:50%;top:100%;transform:translate(-50%,-50%);border-radius:50%;z-index:1;width:calc(var(--mh)*.58);height:calc(var(--mh)*.08);
  background:radial-gradient(closest-side,rgba(26,26,26,.20),rgba(26,26,26,.08) 55%,rgba(26,26,26,0))}

/* 빈 무대 — 버튼 세로로(정한 것 13), 8A 연한 면 */
.rw-emp{position:absolute;inset:0;z-index:600;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 28px 8%}
.rw-emp p{margin:0 0 16px;font-size:15px;line-height:22px;color:var(--sub);word-break:keep-all}
.rw-emp .bs{display:flex;flex-direction:column;gap:8px;align-items:center}
.rw-emp .bs button{width:220px;height:44px;border-radius:12px;font-size:14px;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--soft);color:var(--ink)}

/* 저장 실패 줄 — 무대 위에 떠서(정한 것 9) */
.rw-fail{position:absolute;left:12px;right:12px;top:8px;z-index:650}
.rw-fail .fail{margin:0}

/* 막대 줄 44 — 바탕 = 무대 아래쪽 회색, 4A 얇은 선, 5A 기호만 */
.rw-pb{height:44px;flex:none;display:flex;align-items:center;gap:6px;padding:0 6px 0 16px;order:2;background:#d6d6d1;
  --h:2px;--gap:4px;--r:1px;--track:rgba(26,26,26,.12);--pastc:rgba(26,26,26,.45);--nowc:#1a1a1a}
.rw-pb.off>*{visibility:hidden}
.rw-segs{flex:1;display:flex;align-self:stretch;cursor:pointer;touch-action:pan-y}
.rw-seg{flex:1;position:relative;margin-right:var(--gap)}
.rw-seg:last-child{margin-right:0}
.rw-seg i{position:absolute;left:0;right:0;top:50%;height:var(--h);margin-top:calc(var(--h)/-2);border-radius:var(--r);background:var(--track);overflow:hidden}
.rw-seg i b{display:block;height:100%;width:0;background:var(--nowc)}
.rw-seg.past i b{background:var(--pastc)}
.rw-pp{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.rw-pp svg{width:16px;height:16px}

/* 화면 읽기 전용 */
.rw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 필터 시트 [초기화][조회] 줄을 시트 아래에 붙임 — 390×664에서 홈은 ±3° 줄, 목록은 날씨 출처 링크 줄(F20, 11-06 저녁 뺌)만큼 길어져 [조회]가 화면 밖으로 나가서
   (홈: 4단계 첫 확인 · 목록: 11-06 합칠 때). 작은 폰에선 여전히 넘침. 시트가 짧으면 전과 같은 자리 */
.sheet:has(>.actions.fstick){padding-bottom:0} /* 시트 아래 여백은 붙는 줄 안으로(브라우저마다 붙는 자리가 여백 안쪽·바깥쪽으로 달라서) */
.actions.fstick{position:sticky;bottom:0;z-index:2;background:#fff;margin:10px -20px 0;padding:10px 20px calc(20px + env(safe-area-inset-bottom,0px))}

/* 홈에서 연 필터의 ±3° 줄 — 9A 위에 선 하나 */
.rw-ck{border-top:1px solid var(--line);margin-top:6px;padding-top:4px}
.rw-ck .check{width:100%;height:44px}