/* judge.css — 구매 판정(Fit) 화면. 소유: 개발자 배선 초안(디자이너 재스킨 대상).
   result.css .rwrap과 동일하게 팔레트를 스코프(.jwrap)해 다른 화면과 격리. 값은 tokens.css 딥그린. */
/* 팔레트·wrapper 규격은 result.css .rwrap과 동일하게 맞춰 형제 화면으로 통일. */
.jwrap{
  /* ⚠ --ink/--line/--warn는 :root와 같은 이름이라 var(--rink) 자기참조=순환(무효)이 됨 → 배지·테두리 사라짐. 이름 다른 로컬(--rink 등)으로 토큰 참조. */
  --g:var(--accent); --gs:#E7EFEA; --gl:#CBDDD2; --rink:var(--ink); --ink2:#3A382F;
  --sub:var(--muted); --sub2:var(--faint); --rline:var(--line); --line2:var(--field-line); --soft:#EDEDEA;
  --rwarn:var(--warn); --wsoft:#F7ECE8; --surface:#fff;
  max-width:1240px; margin:0 auto; padding:38px 30px 90px; color:var(--rink);   /* 컨테이너를 스타일리스트·마이(.wrap 1240·30 + .page 38)와 통일 → 헤더 좌측 정렬·위치 일치 */
}
.jwrap [hidden]{display:none !important;}   /* .jsetup/.jresult의 display:flex가 UA [hidden]을 덮는 것 방지 */
.jtitle{font-size:25px; font-weight:800; letter-spacing:-.04em; line-height:1.2; color:var(--rink); margin:6px 0 0;}   /* 스타일리스트 h2.sec(margin:0)+listhead(margin-top:6)와 동일 위치·간격 */
.jsub{font-size:15px; color:var(--sub); margin-top:8px; line-height:1.55;}   /* 스타일리스트 .shoplead와 동일 크기 */
/* 부제 = 흐름 안내(옷 종류 → 사이즈표 → 판정) */
.jflow-sub{font-size:15.5px;}
.jflow-sub b{color:var(--g); font-weight:800;}
/* 입력부 = 번호 스텝 카드(①판정기준 ②옷종류 ③사이즈표) */
.jcard{border:1px solid var(--gl); border-radius:20px; background:#FBFCFB; padding:22px;   /* 입력 존 = 옅은 그린 틴트로 결과 패널(흰)과 구분·돋보이게 */
  box-shadow:0 2px 4px rgba(46,74,59,.04), 0 14px 32px -20px rgba(46,74,59,.30);}
.jstep + .jstep{margin-top:18px; padding-top:18px; border-top:1px solid var(--rline);}
.jcard.needdx .jstep + .jstep{opacity:.4; pointer-events:none;}   /* 진단 전엔 ②옷종류·③사이즈표(업로드) 잠금 — 진단 먼저 */
.jstep-hd{display:flex; align-items:center; gap:10px; margin-bottom:12px;}   /* 숫자·라벨 한 줄 정중앙 정렬 */
.jstep-n{flex:none; width:24px; height:24px; border-radius:7px; background:var(--rink); color:#fff;
  font-size:12.5px; font-weight:800; line-height:1; display:grid; place-items:center; text-align:center;}
.jstep-l{font-size:15px; font-weight:800; color:var(--rink); letter-spacing:-.01em;}
.jstep-auto{margin-left:auto; font-size:11px; font-weight:800; color:var(--sub2); background:var(--soft); padding:2px 9px; border-radius:20px; white-space:nowrap;}   /* ①은 자동 채움 = 확인만 */
.jstep .jtabs{margin-bottom:11px;}
.jstep .jseg{display:flex; gap:8px;}   /* 상의·하의 한 줄로 꽉 채움 */
.jstep .jseg .jseg-b{flex:1;}
.jcard .jbtn{display:block; width:100%; margin-top:20px;}
/* 폼·결과 본문은 읽기 좋은 폭으로 좌측 정렬(헤더는 위 gutter에 정렬, 본문은 컬럼 유지) */
.jgate, .jresult, .jloading{max-width:680px;}

.jloading{margin-top:40px; font-size:15px; font-weight:700; color:var(--sub2);}

/* 메인 앱 내비바 — index .nav와 동일 규격(max-width·height·gap·padding)으로 맞춰 페이지 간 위치 고정 */
.dhead .dhead-in{max-width:1320px; margin:0 auto; height:66px; gap:48px; padding:0 24px;}
.dhead{letter-spacing:-.02em;}   /* index 본문 자간(--ls-body)과 동일 → 메뉴·navr 글자폭 일치(내비 밀림 방지) */
.dhead .logo{font-size:22px; letter-spacing:-.05em; line-height:1;}   /* index .logo와 동일 크기 → 전환 시 로고 움찔 방지 */
.dhead .logo i{margin-left:2px;}
.dhead .jmenu{display:flex; gap:2px;}
.dhead .jmenu a{position:relative; padding:8px 14px; border-radius:10px; font-size:16px; font-weight:600; color:var(--muted,var(--muted)); text-decoration:none;}
.dhead .jmenu a:hover{color:var(--ink,var(--rink));}
.dhead .jmenu a.on{color:var(--ink,var(--rink)); font-weight:800;}
.dhead .jmenu a.on::after{content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:3px; width:5px; height:5px; border-radius:50%; background:var(--accent,var(--accent));}
@media (max-width:640px){ .dhead .dhead-in{height:56px; gap:0; padding:0 16px;} .dhead .jmenu a{padding:8px 10px; font-size:14.5px;} }
/* 우측 내비 — index .navr와 동일(스타일리스트 지원·알림·프로필) */
.dhead .navr{position:relative; margin-left:auto; display:flex; align-items:center; gap:16px; font-size:15px; color:var(--muted,var(--muted));}
.dhead .navr .sup{font-weight:700; color:var(--accent,var(--accent)); text-decoration:none; cursor:pointer; white-space:nowrap;}
.dhead .navr .navdiv{width:1px; height:18px; background:var(--field-line,var(--field-line)); display:inline-block; flex:none;}
.dhead .navr .navbell{position:relative; display:inline-flex; align-items:center; color:var(--muted,var(--muted));}
.dhead .navr .navuser{display:flex; align-items:center; gap:9px; cursor:pointer;}
.dhead .navr .navname{color:var(--ink,var(--rink)); font-weight:700; white-space:nowrap;}
.dhead .navr .navav{width:34px; height:34px; border-radius:50%; background:var(--ink,var(--rink)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; overflow:hidden; flex:none;}
.dhead .navr .usermenu{position:absolute; top:calc(100% + 6px); right:0; background:#fff; border:1px solid var(--line,var(--rline)); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.13); padding:6px; display:none; z-index:60; min-width:150px;}
.dhead .navr .usermenu.on{display:block;}
.dhead .navr .usermenu a{display:block; padding:10px 12px; font-size:13.5px; font-weight:700; color:var(--ink,var(--rink)); border-radius:8px; text-decoration:none;}
.dhead .navr .usermenu a:hover{background:#EDEDEA;}
@media (max-width:820px){ .dhead .navr .sup, .dhead .navr .navname{display:none;} }

/* ── 진단 유도 게이트: 에디토리얼 헤드라인 + 히트맵 예시 + 시작 ─────── */
.jgate{margin-top:20px; display:flex; flex-direction:column; gap:24px;}
.jgate-lead{display:flex; flex-direction:column; gap:0;}
.jgate-ey{font-size:11px; font-weight:800; color:var(--sub2); letter-spacing:.14em; text-transform:uppercase;}
.jgate-t{font-size:29px; font-weight:800; letter-spacing:-.055em; line-height:1.18; margin-top:13px;}
.jgate-t b{color:var(--g);}
.jgate-d{font-size:14.5px; color:var(--sub); line-height:1.65; margin-top:14px;}
.jgate-d b{color:var(--ink2); font-weight:700;}
/* 예시 히트맵 */
.jgate-demo{border:1px solid var(--rline); border-radius:16px; padding:20px 22px 18px; background:var(--surface);}
.jgate-demo-h{font-size:12.5px; font-weight:800; color:var(--sub2); letter-spacing:.04em; margin-bottom:14px; display:flex; align-items:center; gap:9px;}
.jgate-eg{font-size:10.5px; font-weight:800; color:var(--g); background:var(--gs); padding:2px 8px; border-radius:20px; letter-spacing:.02em;}
.jgate-hm{position:relative; display:grid; grid-template-columns:44px repeat(3,1fr); gap:7px; align-items:center;}
.jgate-hm > *:not(.hm-lane){position:relative; z-index:1;}
/* 추천 열(M)을 셀마다 링 대신 세로 레인 하나로 감싸기(그리드 영역에 절대배치) */
.jgate-hm .hm-lane{position:absolute; z-index:0; grid-column:3; grid-row:1 / -1; inset:0; margin:-4px;
  border-radius:14px; box-shadow:0 0 0 2px var(--g); background:linear-gradient(var(--gs), transparent 62%); pointer-events:none;}
.jgate-hm .rw{font-size:12.5px; font-weight:800; color:var(--ink2);}
.jgate-hm .col{font-size:13px; font-weight:800; text-align:center; color:var(--sub); padding-bottom:2px;}
.jgate-hm .col.pk{color:var(--g);}
.jgate-hm .pkpill{display:inline-block; font-size:10.5px; font-weight:800; color:#fff; background:var(--g); border-radius:20px; padding:2px 9px; letter-spacing:.02em;}
.jgate-hm .c{height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; letter-spacing:-.01em;}
.jgate-hm .c.t{background:var(--wsoft); color:var(--rwarn);} .jgate-hm .c.s{background:var(--gs); color:var(--g);} .jgate-hm .c.r{background:var(--soft); color:var(--sub2);}
.jgate-demo-c{margin-top:16px; text-align:center;}
.jgate-demo-c .pill{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:800; color:var(--g); background:var(--gs); border:1px solid var(--gl); border-radius:22px; padding:8px 16px;}
.jgate-demo-c .pill svg{width:15px; height:15px;}
.jgate-demo-c b{color:var(--g); font-weight:800; margin:0 2px;}
/* 시작 — A 시안: 풀폭 버튼 + 그 아래 짧은 안내문(가운데) */
.jgate-start{display:flex; flex-direction:column; gap:12px;}
.jgate-start .jbtn{display:block; width:100%; margin-top:0;}
.jgate-note{font-size:13px; color:var(--sub2); line-height:1.6; text-align:center;}
.jgate-note b{color:var(--ink2); font-weight:700;}

/* ── 버튼 (초록 버튼 금지 원칙: 주요=잉크블랙) ─────── */
.jbtn{display:inline-block; margin-top:8px; background:var(--rink); color:#fff; border:none; cursor:pointer;
      font-family:inherit; font-size:15px; font-weight:800; letter-spacing:-.02em; padding:14px 20px; border-radius:12px;
      text-align:center; text-decoration:none;}
.jbtn:hover{background:#000;}
.jbtn:disabled{background:var(--line2); cursor:not-allowed;}
.jbtn.ghost{background:transparent; color:var(--rink); border:1.5px solid var(--line2);}
.jbtn.ghost:hover{background:var(--soft);}

/* ── 상품(셀) 선택 ────────────────────────────────── */
.jsetup{margin-top:26px; max-width:1080px;}
/* 한 화면: 좌=좁은 입력 레일(고정) · 우=넓은 결과 캔버스. 판정 후에도 화면을 안 바꾸고 우측만 예시→결과로 교체. */
.jsetup-cols{display:grid; grid-template-columns:380px minmax(0,1fr); gap:28px; align-items:start; position:relative;}
/* 리셋 전환 로딩 = 2단 전체 덮개(부분만 도는 어색함 방지) */
.jcols-load{position:absolute; inset:-6px; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px;
  background:rgba(246,246,245,.82); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); border-radius:18px;}
.jsetup-main{display:flex; flex-direction:column; gap:22px; min-width:0; position:sticky; top:20px;}
/* 판정 후 = 입력부 '사용됨'으로 흐리게(다시 만지면 해제) */
.jsetup-main.judged .jcard{opacity:.5; pointer-events:none; transition:opacity .25s ease;}   /* 결과 중엔 왼쪽 입력 잠금 — 다른 옷 판정하기로만 리셋 */
.jsetup-side{display:flex; flex-direction:column; gap:16px; min-width:0;}
.jsetup-side .jresult{margin-top:0; max-width:none;}   /* 캔버스에 꽉 차게 */
@media (max-width:760px){ .jsetup-cols{grid-template-columns:1fr; gap:24px;} .jsetup-main{position:static;} .jsetup-side{margin-top:0;} }

/* 내 체형(판정 기준) — 유형색 옅은 틴트 카드(정체성만 색으로, 회색 박스 탈피). 유형 바뀌면 인라인 --jtype만 교체 */
.jmine{--jtype:#9db8ff; display:flex; align-items:center; gap:13px; border-radius:14px; padding:13px 15px;
  background:#eef3ff; background:color-mix(in srgb, var(--jtype) 13%, #fff);
  border:1px solid #d6e2ff; border:1px solid color-mix(in srgb, var(--jtype) 32%, #fff);}
/* 진단 안 한 신규 사용자 — ① 판정 기준 자리에 체형 결과 대신 진단 유도 CTA */
.jneeddx{display:flex; align-items:center; gap:12px; border-radius:14px; padding:14px 16px; background:#F4F8F5; border:1px solid var(--gl);}
.jneeddx-tx{flex:1; font-size:13.5px; color:var(--ink2); line-height:1.5;} .jneeddx-tx b{color:var(--g); font-weight:800;}
.jneeddx-cta{flex:none; display:inline-flex; align-items:center; text-decoration:none; padding:11px 16px; border-radius:11px; background:var(--g); color:#fff; font-size:13.5px; font-weight:800; white-space:nowrap;}
.jneeddx-cta:hover{background:#263E31;}
/* 유형 아바타 = 홈·마이(#myAv)·상단 내비와 동일한 얼굴 그림. 유형색(--jtype) 원 위에 얹음. */
.jmine-av{flex:none; width:44px; height:44px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--jtype);}
.jmine-av .head{position:relative; width:34px; height:38px; transform:scale(.64); transform-origin:center;}
.jmine-av .head .face{position:absolute; inset:0; border-radius:10px 10px 8px 8px; background:#ecd9c9; z-index:2; background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px 7px),repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 1px,transparent 1px 7px);}
.jmine-av .head .cap{position:absolute; top:-3px; left:-3px; right:-3px; height:13px; border-radius:10px 10px 45% 45%; background:#2a2b30; z-index:3;}
.jmine-av .head.female .cap{background:#9a7350;}
.jmine-av .head .longhair{position:absolute; top:-5px; left:-7px; right:-7px; bottom:1px; background:#9a7350; border-radius:50% 50% 36% 36% / 46% 46% 30% 30%; z-index:1;}
.jmine-av .head .ey{position:absolute; top:18px; width:4px; height:5px; border-radius:50%; background:#2a2b30; z-index:4;} .jmine-av .head .ey.l{left:9px;} .jmine-av .head .ey.r{right:9px;}
.jmine-tx{flex:1; min-width:0;}
.jmine-k{display:block; font-size:10.5px; font-weight:800; color:var(--sub2); letter-spacing:.09em; text-transform:uppercase; margin-bottom:1px;}
.jmine-tx b{display:block; font-size:15px; font-weight:800; color:var(--rink); letter-spacing:-.02em;}
.jmine-code{display:inline-block; font-size:10.5px; font-weight:800; color:var(--sub); background:var(--surface); border:1px solid var(--rline); border-radius:5px; padding:1px 5px; margin-left:6px; letter-spacing:.03em; vertical-align:1.5px;}
.jmine-re{flex:none; font-size:12px; font-weight:700; color:var(--sub); text-decoration:none; border-bottom:1px solid var(--line2); padding-bottom:1px; white-space:nowrap;}
.jmine-re:hover{color:var(--ink2); border-color:var(--sub);}
.jfield{display:flex; flex-direction:column; gap:10px;}
.jlabel{font-size:13px; font-weight:800; color:var(--sub2); letter-spacing:.06em; text-transform:uppercase;}
.jseg{display:inline-flex; gap:8px; align-self:flex-start;}
.jseg-b{background:var(--surface); border:1.5px solid var(--line2); border-radius:11px; cursor:pointer; font-family:inherit; font-size:15px; font-weight:700;
        color:var(--sub); padding:10px 24px;}
.jseg-b.on{background:var(--gs); color:var(--g); border-color:var(--g); font-weight:800;}   /* green-soft 채움 + 딥그린 (딥그린 꽉채움 지양) */
.jselect{font-family:inherit; font-size:16px; padding:13px 14px; border:1.5px solid var(--line2); border-radius:12px;
         background:var(--surface); color:var(--rink); max-width:320px;}
.jchips{display:flex; flex-wrap:wrap; gap:8px;}
.jchip{background:var(--surface); border:1.5px solid var(--line2); border-radius:20px; cursor:pointer;
       font-family:inherit; font-size:13.5px; font-weight:600; color:var(--sub); padding:9px 15px;}
.jchip.on{background:var(--gs); border-color:var(--g); color:var(--g); font-weight:800;}
.jmiss{font-size:14px; color:var(--rwarn); font-weight:700; line-height:1.55;}

/* ── 사이즈표 넣기(탭: 캡처 업로드 ↔ 직접 입력) ─────── */
.jinput{display:flex; flex-direction:column; gap:11px;}
.jtabs{display:flex; gap:4px; background:var(--soft); border-radius:11px; padding:4px;}
.jtab{flex:1; text-align:center; padding:9px; border:none; background:transparent; border-radius:8px; cursor:pointer;
      font-family:inherit; font-size:13px; font-weight:800; color:var(--sub); letter-spacing:-.01em;}
.jtab.on{background:var(--surface); color:var(--g); box-shadow:0 2px 6px rgba(20,18,16,.08);}
.jtab:hover:not(.on){color:var(--ink2);}

/* ── 캡처 입력 ─────────────────────────────────────── */
.jcap{display:flex; flex-direction:column; gap:14px;}
.jcap-zone{border:1.5px dashed var(--gl); border-radius:16px; padding:40px 20px; text-align:center; cursor:pointer;
  background:#F4F8F5; display:flex; flex-direction:column; align-items:center; gap:11px; transition:border-color .15s, background .15s;}   /* 입력의 주 액션 — 아주 옅은 초록 틴트(과하지 않게) */
.jcap-zone:hover, .jcap-zone.over{border-color:var(--g); background:#EAF1EC;}
.jcap-ic{width:56px; height:56px; border-radius:15px; background:#fff; color:var(--g); display:grid; place-items:center; box-shadow:0 2px 8px rgba(46,74,59,.08);}
.jcap-ic svg{width:26px; height:26px; display:block;}
.jcap-t{font-size:16px; font-weight:800; letter-spacing:-.03em;}
.jcap-d{font-size:13px; color:var(--sub); line-height:1.5;} .jcap-d b{color:var(--ink2); font-weight:700;}
.jcap-alt{text-align:center;}
.jlink{font-size:13.5px; font-weight:700; color:var(--g); cursor:pointer; text-decoration:none; border-bottom:1px solid var(--gl);}

/* ── 인식·보정 ─────────────────────────────────────── */
.jcorrect{display:flex; flex-direction:column; gap:16px;}
.jcorrect-top{display:flex; align-items:center; gap:11px;}
.jcap-thumb{width:52px; height:52px; object-fit:cover; border-radius:9px; border:1px solid var(--rline); flex:none;}
.jcap-cap{flex:1; min-width:0; font-size:13px; font-weight:700; color:var(--sub);}
.jparsehint{font-size:14px; color:var(--ink2); line-height:1.55;}
.jparsehint b{font-weight:800;} .jparsehint .w{color:var(--rwarn); font-weight:700;}
.jreup{flex:none; font-size:12.5px; white-space:nowrap;}
/* 캡처 출처 헤더 = 썸네일+다시올리기만 칩처럼(안내문은 아래 줄로 분리) · 직접입력(.man)은 헤더 없음 */
.jcorrect:not(.man) .jcorrect-top{background:var(--soft); border-radius:12px; padding:10px 12px;}
.jcorrect.man .jcorrect-top{display:none;}
/* 수집 opt-in 카드 (결과 하단) */
/* 수집 opt-in = 입력창 안 한 줄 체크(판정 전에 선택) */
.jconsent-row{display:flex; align-items:center; gap:9px; margin-top:14px; cursor:pointer; font-size:13px; color:var(--sub); line-height:1.45;}
.jconsent-row input{width:16px; height:16px; accent-color:var(--g); flex:none; cursor:pointer;}
.jconsent-row b{color:var(--ink2); font-weight:700;}
.jshare-msg{font-size:12.5px; font-weight:700; color:var(--g); margin-top:6px;}
/* 사이즈표 인식 중 = 입력부 잠금(분석 도중 옷 종류·탭·재업로드 조작 방지) */
.jcard.parsing{pointer-events:none;}
.jcard.parsing .jstep:not(:last-child){opacity:.5; transition:opacity .2s;}

.jmeta{padding-bottom:14px; border-bottom:1px solid var(--rline);}
/* 캡처 후 = 읽은 사이즈표 그대로 표로(행=사이즈, 열=부위) — 업로드한 표와 같은 모양 */
.jctab-wrap{overflow-x:auto;}
.jctab{width:100%; border-collapse:collapse;}
.jctab th{font-size:13.5px; font-weight:800; color:var(--ink2); letter-spacing:.01em; text-align:center; padding:0 4px 9px; white-space:nowrap;}
.jctab th:first-child{text-align:left; padding-left:2px;}
.jctab-u{font-weight:600; font-size:9px; color:var(--sub2); margin-left:2px; opacity:.8;}
.jopt{font-size:9px; font-weight:700; color:var(--sub2); margin-left:3px; opacity:.75;}
.jctab td{padding:4px; border-top:1px solid var(--rline); vertical-align:middle;}
.jctab td:first-child{padding-left:2px;}
.jctab td.sl{width:1%; white-space:nowrap;}
.jctab input{width:100%; min-width:54px; font:inherit; font-size:14px; text-align:center; padding:9px 8px; border:1.5px solid var(--line2); border-radius:9px; background:var(--surface); color:var(--rink);}
.jctab td.sl input{width:64px; min-width:0; font-weight:800;}
.jctab input.jce{font-feature-settings:"tnum";}
.jbasis{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:4px 0 14px; padding:10px 0 0; border-top:1px solid var(--rline); font-size:13px; color:var(--sub);}
.jbasis-l{font-weight:700; color:var(--ink2);}
.jbz{font:inherit; font-size:12.5px; font-weight:700; padding:6px 12px; border:1.5px solid var(--line2); border-radius:20px; background:var(--surface); color:var(--sub); cursor:pointer;}
.jbz.on{background:var(--gs); border-color:var(--g); color:var(--g); font-weight:800;}
.jbasis-n{flex-basis:100%; font-size:12px; color:var(--sub2); line-height:1.5;}

/* ── 직접 입력 = 한 사이즈 세로 필드 폼(표 아님) ─────── */
.jform{display:flex; flex-direction:column; gap:9px;}
.jf-line{display:flex; align-items:center; gap:10px;}
.jf-k{flex:none; width:48px; font-size:13px; font-weight:700; color:var(--ink2);}
.jf-req{color:var(--rwarn); font-style:normal; margin-left:1px;}
.jf-k .jopt{margin-left:0;}
.jf-in{flex:1; min-width:0; font:inherit; font-size:14px; padding:10px 11px; border:1.5px solid var(--line2); border-radius:9px; background:var(--surface); color:var(--rink); font-feature-settings:"tnum";}
.jf-in.jf-sz{font-weight:800; font-feature-settings:normal;}
.jf-u{flex:none; font-size:11.5px; font-weight:700; color:var(--sub2);}

/* 판정 전 = 아이콘 3스텝 한 줄 + 결과 골격(스켈레톤). 판정하면 #jaside→#jresult로 '같은 자리'가 채워져 갑작스런 전환을 줄임 */
#jaside{display:flex; flex-direction:column; gap:14px; position:relative;}
/* 판정 중 = 아래 골격도 함께 '만들어지는 중'으로 반짝임(위 카드만 도는 어색함 방지) */
#jaside.judging .jgh-grid span, #jaside.judging .jgh-bar{position:relative; overflow:hidden;}
#jaside.judging .jgh-grid span::after, #jaside.judging .jgh-bar::after{content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); animation:jshim 1.25s infinite;}
@keyframes jshim{ to{ transform:translateX(100%); } }
/* 결과 등장 = 카드가 열리기 시작한 뒤(≈.42s) 아래 패널이 뒤따라 살짝 떠오름 — 뒤집힘과 경쟁하지 않게 */
.jresult.reveal > *:not(.jflip){opacity:0; transform:translateY(8px); animation:jrise .58s cubic-bezier(.16,.84,.28,1) forwards;}
.jresult.reveal > *:nth-child(2){animation-delay:.42s} .jresult.reveal > *:nth-child(3){animation-delay:.54s}
.jresult.reveal > *:nth-child(4){animation-delay:.64s} .jresult.reveal > *:nth-child(5){animation-delay:.72s}
@keyframes jrise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  #jaside.judging .jgh-grid span::after, #jaside.judging .jgh-bar::after{animation:none;}
  .jresult.reveal > *:not(.jflip){opacity:1; transform:none; animation:none;}
}
/* 판정 중 = 결과 카드 자리에 카드 뒷면(.jflip-back과 동일)이 서서 로딩 → 결과가 오면 그 카드가 그대로 뒤집힘 */
/* 로고는 뒷면과 같은 자리·크기로 두고 링만 회전 → 카드로 넘어갈 때 내용이 안 바뀌어 이음새가 없음 */
.jloadcard{height:200px; border-radius:20px; border:1px solid #22232a; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;   /* 링+문구를 한 덩어리로 중앙정렬 */
  background:radial-gradient(ellipse 72% 34% at 50% 12%, rgba(156,193,174,.22), transparent 60%), linear-gradient(165deg,#191a1f,#0f1014);}
.jloadcard-in{position:relative; width:118px; height:118px; display:grid; place-items:center;}
.jloadcard-ring{position:absolute; inset:0; width:118px; height:118px; animation:jspin 1.4s cubic-bezier(.5,.1,.5,.9) infinite;}
.jloadcard-ring .trk{stroke:rgba(255,255,255,.14);} .jloadcard-ring .arc{stroke:#9FD9B7;}
.jloadcard .cblogo{font-size:52px; font-weight:800; letter-spacing:-.05em; line-height:1; color:#f3f4f2;}
.jloadcard .cblogo .sq{display:inline-block; width:10px; height:10px; background:var(--gl); margin-left:4px; vertical-align:baseline;}
.jloadcard-tx{text-align:center; font-size:12.5px; font-weight:700; color:rgba(255,255,255,.6);}   /* 절대배치 해제 → 링과 한 덩어리로 중앙 */
@media (max-width:520px){ .jloadcard{height:212px;} }
/* 로딩 모션 = 브랜드 링(FIT 마크 + 얇은 아크) — 결과 카드의 FIT 게이지와 이어지게 */
/* 리셋 로딩 마크 = 판정 카드와 같은 브랜드 모션(로고 + 링). 밝은 배경이라 딥그린.
   ※ 박스에 링과 같은 크기를 줘야 문구가 링 위로 겹치지 않음(링은 절대배치라 높이에 안 잡힘) */
.jload-mk{position:relative; width:132px; height:132px; display:grid; place-items:center;}
.jload-ring{position:absolute; inset:0; width:132px; height:132px; animation:jspin 1.4s cubic-bezier(.5,.1,.5,.9) infinite;}
.jload-ring .trk{stroke:var(--gs);} .jload-ring .arc{stroke:var(--g);}
.jload-lg{font-size:42px; font-weight:800; letter-spacing:-.05em; line-height:1; color:var(--g);}
.jload-lg .sq{display:inline-block; width:9px; height:9px; background:var(--gl); margin-left:4px; vertical-align:baseline;}
@keyframes jspin{to{transform:rotate(360deg);}}
.jload-tx{font-size:14.5px; font-weight:700; color:var(--sub); text-align:center; line-height:1.5;}
/* 왼쪽 인식 로딩 = 힌트 옆 작은 스피너(사진 올린 자리) */
.jspin-sm{display:inline-block; width:13px; height:13px; border:2px solid var(--gl); border-top-color:var(--g); border-radius:50%; animation:jspin .8s linear infinite; vertical-align:-2px; margin-right:7px;}
/* 흐름 안내 = 무채색 스트립(초록 없음, 위아래 얇은 선). 번호 대신 아이콘이라 왼쪽 ①②③과 안 겹침 */
.jhowto{display:flex; align-items:center; flex-wrap:wrap; gap:7px 14px; padding:12px 4px; border-top:1px solid var(--line2); border-bottom:1px solid var(--line2);}
.jsetup > .jhowto{margin:2px 0 20px;}
.jhowto-s{display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:800; color:var(--ink2);}
.jhowto-ic{flex:none; width:26px; height:26px; border-radius:7px; background:var(--soft); color:var(--ink2); display:flex; align-items:center; justify-content:center;}
.jhowto-ic svg{width:16px; height:16px; display:block;}
.jhowto-ar{color:var(--sub2); font-size:13px; font-weight:800;}
/* 히어로 자리 — 실제 B 게이지 요약과 같은 배치(게이지 왼쪽)의 대시 스켈레톤 */
.jgh-hero{display:flex; align-items:center; gap:22px; border:1.5px dashed var(--line2); border-radius:20px; padding:22px 24px; background:var(--surface);}
.jgh-gauge{flex:none; width:88px; height:88px; border-radius:50%; border:2px dashed var(--line2); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; letter-spacing:.08em; color:var(--sub2);}
.jgh-htx{display:flex; flex-direction:column; gap:6px; min-width:0;}
.jgh-ph{font-size:22px; font-weight:800; letter-spacing:-.04em; color:var(--line2);}
.jgh-ey{font-size:12.5px; font-weight:700; color:var(--sub2);}
/* 패널 자리 = 실제 .jpanel 헤더 재사용 + 스켈레톤 바 */
.jgh-panel{border-style:dashed; border-color:var(--line2);}
.jgh-panel .jpt{color:var(--sub);}
.jgh-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:16px;}
.jgh-grid span{height:26px; border-radius:7px; background:var(--soft);}
.jgh-bar{height:34px; border-radius:9px; background:var(--soft); margin-top:16px;}
.jgh-cap{margin-top:13px; font-size:12.5px; color:var(--sub); line-height:1.5; text-align:center;}

/* ── 판정 결과 ────────────────────────────────────── */
.jresult{margin-top:26px; display:flex; flex-direction:column; gap:20px;}
/* ── 리빌 카드: 뒷면(Fit) → 앞면(B 게이지 요약)으로 뒤집힘 ── */
.jflip{perspective:1600px; height:200px;}
.jflip-inner{position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .85s cubic-bezier(.2,.85,.25,1);}
.jflip.on .jflip-inner{transform:rotateY(180deg);}
.jflip-face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:20px;}
.jflip-back{display:flex; align-items:center; justify-content:center; border:1px solid #22232a;
  background:radial-gradient(ellipse 72% 34% at 50% 12%, rgba(156,193,174,.22), transparent 60%), linear-gradient(165deg,#191a1f,#0f1014);}
.jflip-back .cblogo{font-size:52px; font-weight:800; letter-spacing:-.05em; line-height:1; color:#f3f4f2;}
.jflip-back .cblogo .sq{display:inline-block; width:10px; height:10px; background:var(--gl); margin-left:4px; vertical-align:baseline;}
.jflip-front{transform:rotateY(180deg);}

/* B 게이지 요약(앞면) = #jverdict.rsum : 원형 게이지(FIT 채움)+가운데 사이즈 / 판정·문장·신뢰메타 */
.rsum{height:100%; display:grid; grid-template-columns:auto 1fr; gap:24px; border:1px solid var(--rline);
  border-radius:20px; padding:22px 26px; background:var(--surface); align-items:center;}
.rsum .gg{position:relative; width:104px; height:104px; flex:none;}
.rsum .ring{width:100%; height:100%; border-radius:50%;}
.rsum .hole{position:absolute; inset:10px; border-radius:50%; background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center;}
.rsum .hole .m{font-size:38px; font-weight:800; letter-spacing:-.04em; line-height:.9; color:var(--rink);}
.rsum .hole .f{font-size:9.5px; font-weight:800; color:var(--g); letter-spacing:.08em; margin-top:3px;}
.rsum.warn .hole .f{color:var(--rwarn);}
.rsum-r{display:flex; flex-direction:column; min-width:0;}
.rsum-vd{font-size:23px; font-weight:800; color:var(--g); letter-spacing:-.03em;}
.rsum.warn .rsum-vd{color:var(--rwarn);}
.rsum-say{margin:8px 0 0; font-size:15.5px; color:var(--ink2); line-height:1.55;}
.rsum-note{font-size:13px; color:var(--sub2); margin-top:12px; padding-top:12px; border-top:1px solid var(--rline);}

/* 대안 사이즈(다른 핏 원할 때) */
.jalt{border:1px solid var(--rline); border-radius:18px; padding:22px 24px; background:var(--surface);}
.jalt-h{font-size:18px; font-weight:800; color:var(--rink); letter-spacing:-.035em; margin-bottom:16px;}   /* 다른 메인 섹션 제목(.jpt)과 동일 톤 */
.jalt-row{display:flex; align-items:center; gap:13px; padding:9px 0;}
.jalt-row + .jalt-row{border-top:1px solid var(--rline);}
.jalt-sz{flex:none; width:40px; height:40px; border-radius:11px; border:1.5px solid var(--line2); display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:800; color:var(--ink2);}
.jalt-tx{font-size:13.5px; color:var(--sub); line-height:1.45;} .jalt-tx b{color:var(--rink); font-weight:800;}
@media (max-width:520px){ .jflip{height:212px;} }

.jpanel{border:1px solid var(--rline); border-radius:18px; padding:22px 24px; background:var(--surface); min-width:0;}
.jphead{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.jpt{font-size:18px; font-weight:800; letter-spacing:-.035em;}
.jpd{font-size:13.5px; color:var(--sub); line-height:1.55; margin:5px 0 18px;}
/* result.css .pill과 동일한 초록 배지 모티프(섹션 코너 라벨) */
.jpill{padding:5px 11px; border-radius:20px; background:var(--gs); color:var(--g); font-weight:800; font-size:11.5px; white-space:nowrap;}
.jpill:empty{display:none;}

/* 사이즈 매트릭스 */
.jmatrix-wrap{overflow-x:auto; min-width:0; padding-top:11px;}   /* padding-top = 추천 뱃지 클리어런스(표를 살짝 위로) */
.jmatrix{border-collapse:collapse; width:100%; min-width:440px;}
.jmatrix th, .jmatrix td{padding:12px 9px; text-align:center; font-size:13.5px; border-top:1px solid var(--line2);}   /* line2=회색 추천열 위에서도 구분선이 이어지도록 살짝 진하게 */
.jmatrix thead th{border-top:none; font-size:16px; font-weight:800; letter-spacing:-.03em; color:var(--rink); position:relative;}
.jmatrix thead th small{display:block; font-size:10px; font-weight:700; color:var(--sub2); margin-top:2px;}
.jmatrix thead th{padding-top:16px;}   /* '추천' 뱃지와 사이즈 글자 사이 간격 */
.jmatrix thead th.pick::after{content:"추천"; position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  background:var(--g); color:#fff; font-size:9px; font-weight:800; padding:2px 8px; border-radius:20px;}
.jmatrix tbody th{text-align:left; font-weight:800; color:var(--ink2); white-space:nowrap; font-size:13.5px;}
.jmatrix td.pickcol{background:var(--gs);}
/* 추천 열 = 초록 테두리 레인(C안) — 헤더~마지막 행을 초록 박스로 감쌈 */
.jmatrix thead th.pick{border-top:2px solid var(--g);}
.jmatrix th.pick, .jmatrix td.pickcol{border-left:2px solid var(--g); border-right:2px solid var(--g);}
.jmatrix tbody tr:last-child td.pickcol{border-bottom:2px solid var(--g);}
.jmatrix .fp{display:inline-block; font-size:12px; font-weight:800; padding:4px 9px; border-radius:20px; letter-spacing:-.01em;}
.fp.tight{background:var(--wsoft); color:var(--rwarn);}
.fp.snug{background:var(--gl); color:var(--g);}   /* 추천 열 배경(--gs)과 같은 색이면 배지가 묻혀서 한 톤 진하게 */
.fp.relax{background:#E4E3DE; color:var(--ink2);}   /* 여유 = 진한 회색 배경 */
.fp.big{background:#F4F3EF; color:#8C887F;}          /* 넉넉 = 옅은 배경 + 중간 회색 글자(sub2보단 진하게) */
.fp.na{color:var(--sub2); background:transparent; font-weight:700;}
.fp.brd{background:var(--wsoft); color:var(--rwarn); outline:1.5px dashed var(--rwarn); outline-offset:-1.5px;}
.jmxnote{font-size:12.5px; color:var(--sub2); line-height:1.6; margin-top:14px; padding-top:14px; border-top:1px solid var(--rline);}
.jmxnote:empty{display:none;}   /* 노트 없을 때 빈 회색선 제거 */
/* 마지막 행(어깨) 바닥 = 추천 박스 초록 아랫선과 같은 높이의 회색 마감선 */
.jmatrix tbody tr:last-child td, .jmatrix tbody tr:last-child th{border-bottom:1px solid var(--line2);}

/* 자세히 = 체형(회색) 위에 추천 옷 테두리(초록) — 뜬 만큼 여유 */
.bf{display:flex; gap:20px; align-items:center; flex-wrap:wrap;}
.bf-fig{flex:none; width:148px;}
.bf-fig svg{width:100%; display:block; overflow:visible;}
.bf-leg{flex:1; min-width:150px; display:flex; flex-direction:column; gap:12px;}
.bf-item{display:flex; flex-direction:column; gap:3px;}
.bf-item-top{display:flex; align-items:center; gap:8px;}   /* 점·부위·상태 한 줄 정렬 */
.bf-dot{flex:none; width:11px; height:11px; border-radius:50%;}
.bf-item-top b{font-size:14.5px; font-weight:800;}
.bf-st{font-size:12.5px; font-weight:800;}
.bf-cm{margin:0 0 0 19px; font-size:12.5px; color:var(--sub); font-feature-settings:"tnum";}   /* 점 너비만큼 들여써서 부위와 정렬 */
/* 다른 옷 판정하기 버튼 — 연한초록 채움 + 딥그린 아이콘·글자(되돌리기 아이콘) */
.jredo-btn{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:-8px; background:var(--surface); color:var(--ink2); border:1.5px solid var(--line2);}
.jredo-btn:hover{background:var(--soft); border-color:var(--sub2);}
.jredo-btn svg{width:17px; height:17px;}
/* 사이즈 토글 — 누르면 그 사이즈가 몸에 어떻게 걸리는지. 기본=추천 고정 */
.jbf-tog{display:flex; gap:6px; background:var(--soft); border-radius:12px; padding:4px; margin-top:6px;}
.jbf-tog button{flex:1; position:relative; border:none; background:transparent; border-radius:9px; padding:9px 0; font:inherit; font-size:14px; font-weight:800; color:var(--sub); cursor:pointer;}
.jbf-tog button.on{background:var(--surface); color:var(--g); box-shadow:0 2px 6px rgba(20,18,16,.08);}
.jbf-rec{position:absolute; top:-8px; left:50%; transform:translateX(-50%); font-size:8px; font-weight:800; color:#fff; background:var(--g); padding:1px 6px; border-radius:20px;}
.jbf-say{display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:14px 0 2px;}   /* 한 줄 정렬 */
.jbf-say b{font-size:15px; font-weight:800; color:var(--rink);}
.jbf-ft{font-size:13px; font-weight:800; color:var(--g);}
.jbf-rs{font-size:13px; color:var(--sub);}
.jbf-recl{font-size:10.5px; font-weight:800; color:var(--g); background:var(--gs); border:1px solid var(--gl); padding:1px 7px; border-radius:20px;}
.jbf-key{margin-top:16px; padding-top:14px; border-top:1px solid var(--rline); font-size:11.5px; color:var(--sub); line-height:1.6;}
.jbf-sep{color:var(--line2); margin:0 4px;}
.jbf-key b{color:var(--ink2); font-weight:800;}
.jbf-kg{display:inline-block; width:15px; border-top:2px solid var(--g); vertical-align:middle; margin-right:1px;}
.jbf-kb{display:inline-block; width:11px; height:11px; background:#E4E3DE; border-radius:3px; vertical-align:middle; margin-right:1px;}

/* 밴드 차트 */
/* ── 줄자 게이지(방향2) — 홈 줄자 + 스펙트럼 바 언어. 눈금 위 '나' 위치로 여유·오차 직관화 ── */
.jrul{display:flex; flex-direction:column;}
.jrul + .jrul{margin-top:16px; padding-top:16px; border-top:1px solid var(--rline);}
.jrul-hd{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:13px;}
.jrul-nm{font-size:14.5px; font-weight:800; letter-spacing:-.02em;}
.jrul-nm .w{font-size:10.5px; font-weight:800; color:var(--rwarn); margin-left:7px;}
.jrul-ev{font-size:12.5px; font-weight:700; color:var(--sub); font-feature-settings:"tnum";}
.jrul-track{position:relative; height:52px;}
.jrul-zone{position:absolute; top:16px; height:9px; border-radius:5px;}
.jz-t{background:var(--wsoft);} .jz-s{background:var(--gs);} .jz-r{background:var(--soft);}
.jrul-znlab{position:absolute; top:0; font-size:9px; font-weight:800; color:var(--sub2); white-space:nowrap;}
.jrul-ticks{position:absolute; left:0; right:0; top:20px; height:12px;}
.jrul-ticks i{position:absolute; top:0; width:1px; height:6px; background:var(--line2);}
.jrul-ticks i.maj{height:12px; background:var(--sub2);}
.jrul-cmlab{position:absolute; left:0; right:0; top:35px; height:12px;}
.jrul-cmlab span{position:absolute; font-size:9px; font-weight:700; color:var(--sub2); font-feature-settings:"tnum"; white-space:nowrap;}
.jrul-whisk{position:absolute; top:15px; height:11px; background:rgba(110,107,99,.14); border-left:1px dashed var(--sub); border-right:1px dashed var(--sub);}
.jrul-mark{position:absolute; top:8px; width:2.5px; height:26px; border-radius:3px; background:var(--rink); z-index:3;}
.jrul-mark::after{content:"나"; position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-size:9px; font-weight:800; color:var(--rink);}
.jrul-note{font-size:12px; color:var(--sub); line-height:1.5; margin-top:8px;}
.jrul-note.warn{color:var(--rwarn); font-weight:700;}
.jrul.miss .jrul-track{height:22px; border-radius:6px; background:repeating-linear-gradient(135deg,var(--soft),var(--soft) 6px,transparent 6px,transparent 12px); border:1px dashed var(--line2);}

@media (max-width:640px){
  .jwrap{padding:26px 18px 72px;}
  .jpanel{padding:20px 15px;}
  /* 매트릭스: 7사이즈가 가로 스크롤 없이 폭 안에 들어오게 압축 */
  .jmatrix{min-width:0; table-layout:fixed;}
  .jmatrix th, .jmatrix td{padding:9px 1px;}
  .jmatrix thead th{font-size:13px;}
  .jmatrix tbody th{font-size:12px; text-align:left; width:34px;}
  .jmatrix .fp{font-size:10px; padding:3px 4px; letter-spacing:-.03em;}
  /* 히어로: 큰 사이즈 타이포·게이지 살짝 축소 */
  .jhero{padding:22px 20px 20px;}
  .jhero .vsize{font-size:46px;}
  .jhero .vgauge{width:72px; height:72px;}
}