/* ══════ V1 · 대화형 — 질문은 상담사 말풍선, 답은 내 말풍선으로 쌓인다 ══════ */

/* ── §1 공통 그리드 ───────────────────────────────────────────────────
   .estw 를 .gnb-in 과 완전히 같은 컨테이너로 만든다(max 1520 · 중앙정렬).
   좌 패딩 --ux-padL(32) = 로고 시작점 / 우 패딩 --ux-padR(45) = 햄버거 3선 우측 끝.
   ★vw 로 계산하지 않는다 — 스크롤바 폭 때문에 .gnb 와 몇 px 어긋난다.
     패딩만으로 잡으면 헤더와 같은 기준(문서 폭)이라 오차가 0이다.
   ★좌 패널의 네이비는 화면 왼쪽 끝까지 흘러야 한다(잘린 카드처럼 보이면 안 됨)
     → .ev-bleed(고정 배경판)가 컨테이너 왼쪽 바깥을 메운다. 겹침은 같은 색이라 무해. */
/* ★2026-08-01 요청서 §5-2 · §8 — 이 페이지에서만 좌·우 시작점을 다시 잡는다.
     좌 패널 = 더 왼쪽으로 / 우 대화 = 조금 더 오른쪽으로. 둘은 대칭일 필요가 없다(사장님 명시).
   ⛔ --ux-padL/--ux-padR 자체는 절대 덮지 않는다(5개 페이지 공용) — 페이지 전용 변수로만 움직인다.
     --ev-padl  : 좌 패널 텍스트 시작점 (32 → 16, 16px 왼쪽으로)
     --ev-chatl : 대화 영역 안쪽 좌 패딩 (56 → 88 / 좁은 화면 44 → 76)
       ※ 컨테이너가 16px 왼쪽으로 갔으므로 +32 해야 실제로 +16 오른쪽이 된다. */
/* ★2차 요청서 §2 — 좌 패널 값이 이 페이지에만 있으면 네 화면이 어긋난다.
   폭·시작점·여백을 ux-common.css 의 공통 토큰으로 올렸다(값은 그대로).
   이 페이지가 §2의 기준이므로, 여기 값을 바꾸면 상담문의·셀프진단도 같이 움직인다. */
/* ★★2026-08-04 — --ev-chatl 도 공통 토큰(--panel-gap)으로 올렸다.
   88px/76px 이 폭에 따라 갈리던 탓에 1560px 이상에서만 이 페이지가
   나머지 세 화면(76)과 12px 어긋났다. 이제 네 화면이 한 값을 본다. */
.estw{ --ev-padl:var(--panel-pad-l); --ev-chatl:var(--panel-gap);
  display:grid; grid-template-columns:var(--panel-w) 1fr; align-items:start;
  width:100%; max-width:var(--page-max-width); margin-inline:auto;
  padding-left:var(--ev-padl); padding-right:var(--ux-padR); }
.estw.hide{ display:none; }

.ev-bleed{ position:fixed; top:0; bottom:0; left:0; z-index:0; pointer-events:none; background:var(--navy);
  width:max(var(--ux-padL), calc((100vw - var(--ux-max)) / 2 + var(--ux-padL) + 24px)); }
/* 결과 화면에는 네이비 패널이 없다 → 배경판도 같이 걷는다(왼쪽에 검은 띠가 남는 사고) */
body.ev-res .ev-bleed{ display:none; }

/* ★§5-1 헤더(76px 바)가 사라졌으므로 상단 여백을 120 → 72 로 줄여 패널을 위로 올린다 */
.spec{ position:sticky; top:0; height:var(--panel-min-h); overflow-y:auto; display:flex; flex-direction:column;
  padding:var(--panel-pad-t) var(--panel-pad-r) var(--panel-pad-b) 0;
  background:var(--panel-bg);
  word-break:keep-all; overflow-wrap:break-word; }
.spec::-webkit-scrollbar{ width:0; }
.spec .kick{ font-size:12.5px; font-weight:700; letter-spacing:.2em; color:var(--blue-l); }
.spec h1{ margin-top:18px; font-size:clamp(34px,3.1vw,46px); font-weight:700; letter-spacing:-.042em; line-height:1.2; color:#fff; }
.spec .lead{ margin-top:20px; font-size:14.5px; line-height:1.82; color:#9DB3D2; }
.spec .lead b{ color:#D3E0F2; font-weight:600; }
.spec .lead .ev-ln{ display:block; }

/* ★대표 지표 카드(.mtr)와 좌 패널 진행률·결과 버튼(.spf)은 걷어냈다.
   진행률 = 화면 최상단 로딩바(.ev-prog) / 결과 보기 = 대화 흐름 안(.ev-go) */
.ev-gap{ flex:1 1 auto; min-height:30px; max-height:118px; }

/* ── 아래쪽 = 신뢰·전환 블록. 답하다 막힌 분을 바로 상담으로 데려간다 ── */
.conv{ margin-top:auto; padding-top:26px; }
.trust{ padding:18px 0 20px; border-top:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); }
/* §3.2 문장 전체를 키우고, '30곳'만 더 크고 굵게 — 크기로 위계를 만든다
   (Paperlogy 는 700 초과 굵기를 쓰지 않는다는 상시 방침) */
.trust .n{ display:flex; align-items:flex-start; gap:12px; font-size:17.5px; font-weight:600; letter-spacing:-.024em; line-height:1.48; color:#fff; }
.trust .n b{ color:var(--blue-l); font-weight:700; font-size:1.34em; letter-spacing:-.03em; }
.ev-iso{ flex:0 0 auto; width:36px; height:36px; margin-top:-2px; }
.trust .d{ margin-top:9px; padding-left:48px; font-size:12.5px; line-height:1.6; color:#7E93B5; }
.cvt{ margin-top:20px; }
.cvt .t{ font-size:14.5px; font-weight:600; letter-spacing:-.02em; color:#fff; }
.cvt .d{ margin-top:6px; font-size:12.5px; line-height:1.62; color:#7E93B5; }
.cvt .row{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.cvt a{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:14.5px; font-weight:600; border-radius:11px; padding:14px 16px; transition:.18s var(--ease); }
.cvt a .ev-lb{ display:inline-flex; align-items:center; gap:10px; min-width:0; }
.cvt a .ev-ci{ flex:0 0 auto; width:20px; height:20px; }
.cvt a.p{ color:#fff; background:rgba(46,111,242,.9); }
.cvt a.p:hover{ background:var(--blue); }
.cvt a.k{ color:#3B1E1E; background:#FAE100; }
.cvt a.g{ color:#CFDCEF; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); }
.cvt a.g:hover{ border-color:rgba(255,255,255,.34); }

/* §3.3 · §7 CTA hover — 로컬 glint(빠른 .78s·화살표 infinite)를 걷어내고
   공통 클래스로 갈아끼웠다. 샤인 1.9s(느리게) · 화살표는 1~2회만.
   ⛔ 여기서 @keyframes 를 새로 만들지 않는다 — ux-common.css 가 정본. */
.cvt a .ar, .ev-go .ar, .qk .more .ar{ flex:0 0 auto; opacity:.72; }
.cvt a:hover .ar, .ev-go:hover .ar{ opacity:1; }
.ux-ar svg{ display:block; width:17px; height:17px; stroke-width:2; }

/* ── 화면 최상단 진행 로딩바 (★.gnb가 z-index:90이라 그보다 위여야 안 덮인다) ── */
.ev-prog{ position:fixed; top:0; left:0; right:0; height:3px; z-index:100; background:rgba(10,25,48,.09); }
.ev-prog i{ display:block; height:100%; background:var(--blue); transform:scaleX(0); transform-origin:left center;
  transition:transform .25s var(--ease); }
.ev-prog.nofx i{ transition:none; }

/* ★모바일 기준선(32/45)은 ux-common.css 가 직접 잡는다 —
   "페이지별로 --ux-padL/R 을 덮지 말 것"이 공용 파일의 명시 지시다.
   좁은 화면 예외가 필요하면 개별 요소만 손본다. */

/* ★좌 패널은 좁은 화면에서 상단 인트로로 눕는다(지표 바가 사라져 하단 고정 바가 필요 없어졌다)
   ★이때는 컨테이너 패딩을 풀고 각 패널이 직접 좌우 기준선을 잡는다 —
     그래야 네이비 패널이 화면 폭을 꽉 채우면서도 글자는 로고 기준선에서 시작한다 */
@media(max-width:1240px){
  .estw{ grid-template-columns:1fr; padding-left:0; padding-right:0; }
  .ev-bleed{ display:none; }
  /* 헤더 제거(§5-1) → 상단 104 → 72. 햄버거 바닥이 64px 이라 8px 여유가 남는다.
     ★2차 §2 — 눕는 규칙도 네 화면이 같은 토큰·같은 분기점(1240px)을 쓴다 */
  .spec{ position:static; height:auto; overflow:visible;
    padding:var(--panel-pad-t) var(--ux-padR) var(--section-space-md) var(--panel-pad-l); }
  .ev-gap{ display:none; }
  .conv{ margin-top:34px; }
  /* ★.chat 의 좁은 화면 패딩은 스타일시트 맨 끝에서 잡는다 — 아래를 볼 것 */
}
@media(max-width:640px){
  /* ★h1의 강제 개행은 모바일에서도 살린다 — 풀면 '보여요'만 다음 줄로 떨어져 서술어가 홀로 남는다.
     (부제의 줄 구분은 아래처럼 ' · '로 이어 붙여 푼다) */
  .spec .lead .ev-ln{ display:inline; }
  .spec .lead .ev-ln + .ev-ln::before{ content:' · '; }
}

/* ── 대화 영역 ──
   ★우측 패딩 0 = 대화창 우측 끝점이 곧 컨테이너 우측 끝점(= 햄버거 3선 우측 끝)이다.
     .estw 가 이미 --ux-padR 만큼 물러나 있으므로 여기서 또 밀면 기준선이 어긋난다. */
/* 상단은 탭 모듈이 앉는 자리만큼 더 내린다(--ev-tabspace). 눕는 구간에서는 0 */
.chat{ padding:calc(var(--panel-pad-t) + var(--ev-tabspace,0px)) 0 120px var(--ev-chatl); min-height:100vh; }
/* ⛔@media(max-width:1560px){--ev-chatl:76px} 삭제 — 공통 토큰이 한 값으로 결정한다 */

/* 스텝 = 대화 중간에 끼어드는 챕터 구분선 */
.chapter{ display:flex; align-items:center; gap:14px; margin:40px 0 26px; }
.chapter:first-child{ margin-top:0; }
.chapter .dot{ width:30px; height:30px; border-radius:50%; background:var(--tint); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.chapter .t{ font-size:16px; font-weight:600; color:var(--ink); }
.chapter .d{ font-size:13.5px; color:var(--g500); }
.chapter::after{ content:''; flex:1; height:1px; background:var(--line); }
.chapter.done .dot{ background:var(--blue); color:#fff; }

/* 말풍선 */
/* ★2026-08-07 — 상한을 토큰으로. 넓은 화면에서 말풍선 우측 끝이 햄버거 3선보다
   35px 안쪽에서 끝나 우측이 비어 보이던 것을 해소한다(ux-common.css --bub-max). */
.bub{ display:flex; gap:12px; margin-top:22px; max-width:var(--bub-max,880px); }
.bub .av{ flex:0 0 38px; height:38px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; }
.bub .body{ flex:1; min-width:0; }
.bub .name{ font-size:12.5px; font-weight:600; color:var(--g500); }
.ask{ margin-top:6px; display:inline-block; background:#fff; border:1px solid var(--line); border-radius:4px 16px 16px 16px; padding:16px 20px; }
.ask .q{ font-size:18px; font-weight:600; letter-spacing:-.02em; line-height:1.5; color:var(--ink); }
.ask .h{ margin-top:6px; font-size:14px; line-height:1.6; color:var(--g500); }
.ask .h b{ color:var(--g700); font-weight:600; }

/* 내 답 */
.mine{ display:flex; justify-content:flex-end; margin-top:14px; max-width:var(--bub-max,880px); }
.mine .b{ max-width:640px; background:var(--blue); color:#fff; font-size:15px; line-height:1.55; border-radius:16px 4px 16px 16px; padding:13px 18px; }
.mine .re{ display:inline-block; margin-left:10px; font-size:12.5px; color:rgba(255,255,255,.72); border-bottom:1px solid rgba(255,255,255,.4); cursor:pointer; }

/* 방금 답이 바꾼 것 — 좌 패널에서 대화 안으로 내렸다. 답한 바로 그 자리에서 읽는 게 자연스럽다 */
.dnote{ margin-top:9px; max-width:var(--bub-max,880px); display:flex; justify-content:flex-end; }
/* 질문 말풍선은 inline-block 이라 내용만큼만 늘어난다 → 상한을 올릴 땐 같이 풀어준다 */
.ux-wide .ask{ display:block; }
.dnote span{ max-width:560px; font-size:12.5px; line-height:1.6; color:var(--g500); text-align:right;
  animation:dnIn .38s var(--ease); }
.dnote b{ color:var(--g700); font-weight:600; }
@keyframes dnIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* 선택지 — ★말풍선 시작선(아바타 38px + gap 12px = 50px)에 맞춰 들여쓴다 */
.picks{ margin-top:16px; margin-left:50px; display:flex; flex-wrap:wrap; gap:9px; }
.pick{ position:relative; font-family:inherit; font-size:15px; color:var(--g700); background:#fff; border:1px solid var(--line); border-radius:99px; padding:12px 20px; cursor:pointer; transition:.16s var(--ease); display:inline-flex; align-items:center; gap:8px; }
.pick:hover{ border-color:var(--blue); color:var(--blue); }
.pick.on{ background:var(--blue); border-color:var(--blue); color:#fff; }
.pick .mk{ display:none; }
.pick.many .mk{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:5px; border:1.5px solid #C3CCDC; transition:background .2s var(--ease), border-color .2s var(--ease); }
.pick.many.on .mk{ background:#fff; border-color:#fff; }

/* 선택 모션 — 눌렸다 튀어오르는 스케일 + 퍼지는 링 + 그려지는 체크 */
/* ★2026-08-07 2차 — 공통 .ux-pop 과 같은 강도로 낮췄다(사장님 "너무 과하다") */
@keyframes evPress{ 0%{ transform:scale(1); } 34%{ transform:scale(.982); } 70%{ transform:scale(1.012); } 100%{ transform:scale(1); } }
@keyframes evRing{ 0%{ transform:scale(1); opacity:.42; } 100%{ transform:scale(1.13); opacity:0; } }
.ev-press{ animation:evPress .36s cubic-bezier(.33,.9,.4,1); }
.ev-rg{ position:absolute; inset:-1px; border-radius:99px; border:1.5px solid var(--blue); opacity:0; pointer-events:none; }
.ev-press .ev-rg{ animation:evRing .58s cubic-bezier(.25,.9,.35,1); }
.ev-ck{ width:11px; height:11px; overflow:visible; }
.ev-ck path{ fill:none; stroke:var(--blue); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:17; stroke-dashoffset:17; }
.pick.many.on .ev-ck path{ stroke-dashoffset:0; transition:stroke-dashoffset .34s var(--ease) .06s; }

/* 결과 보기 — 좌 패널에서 대화 흐름 안으로 내렸다. 다 답했을 때만 나온다 */
.ev-done{ margin-top:20px; margin-left:50px; }
.ev-go{ font-family:inherit; font-size:15.5px; font-weight:600; color:#fff;
  background:var(--blue); border:0; border-radius:12px; padding:16px 28px; cursor:pointer;
  display:inline-flex; align-items:center; gap:10px; transition:.18s var(--ease); }
.ev-go:hover{ background:var(--blue-d); }

/* 질문에 곁들이는 이모지 — ★핵심 문항·단계 전환에만. 모든 질문에 붙이지 않는다(§3.5) */
.ev-em{ margin-right:8px; font-size:.92em; line-height:1; }

@media(prefers-reduced-motion:reduce){
  .ev-press, .ev-press .ev-rg{ animation:none; }
  .pick.many.on .ev-ck path{ transition:none; }
  .ev-prog i{ transition:none; }
  .tpick button:hover{ transform:none; }
}
.numrow{ margin-top:16px; margin-left:50px; display:flex; align-items:center; gap:10px; }
.numrow button{ font-family:inherit; width:44px; height:44px; font-size:19px; color:var(--g700); background:#fff; border:1px solid var(--line); border-radius:12px; cursor:pointer; }
.numrow input{ font-family:inherit; width:96px; height:44px; text-align:center; font-size:17px; font-weight:600; color:var(--ink); border:1px solid var(--line); border-radius:12px; }
.numrow .u{ font-size:15px; color:var(--g500); }
.numrow .ok{ width:auto; padding:0 22px; font-size:15px; font-weight:600; color:#fff; background:var(--ink); border-color:var(--ink); }

/* ── §3.4 트랙 선택 — 탭 대신 대화 첫 마디로 고른다 ──
   ★사장님 지시: '업무 이야기 = 비개발자용 / 기술 이야기 = 개발자용'이
     글만으로는 안 읽힌다 → 라벨 배지 + 아이소메트릭 일러스트 + 보조 설명 + 대상 문구. */
.tpick{ margin-top:18px; margin-left:50px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:760px){ .tpick{ grid-template-columns:1fr; } }
.tpick button{ position:relative; font-family:inherit; text-align:left; background:#fff; border:1px solid var(--line);
  border-radius:18px; padding:24px 26px 22px; cursor:pointer; transition:border-color .2s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.tpick button:hover{ border-color:var(--blue); transform:translateY(-2px); box-shadow:0 10px 26px rgba(20,40,80,.08); }
.tpick .ev-hd{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.tpick .ev-bd{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; letter-spacing:-.01em;
  color:var(--blue); background:var(--tint); border-radius:99px; padding:6px 12px; }
.tpick button[data-t="dev"] .ev-bd{ color:#1E7A64; background:#E6F6F0; }
.tpick .ev-il{ flex:0 0 auto; width:88px; height:64px; margin-top:-6px; }
.tpick .t{ margin-top:16px; font-size:18.5px; font-weight:600; letter-spacing:-.024em; color:var(--ink); }
.tpick .d{ margin-top:8px; font-size:13.5px; line-height:1.66; color:var(--g500); }
.tpick .ev-tl{ display:block; margin-top:14px; padding-top:13px; border-top:1px dashed var(--line); }
.tpick .ev-tl i{ display:flex; align-items:flex-start; gap:7px; font-style:normal; font-size:12.5px; line-height:1.6; color:var(--g700); }
.tpick .ev-tl i + i{ margin-top:5px; }
.tpick .ev-tl i::before{ content:''; flex:0 0 auto; width:5px; height:5px; margin-top:7px; border-radius:50%; background:var(--tint-b); }
.tpick button[data-t="dev"] .ev-tl i::before{ background:#B4E0D2; }
.tpick .ev-go2{ display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-size:13.5px; font-weight:600; color:var(--blue); }
.tpick button[data-t="dev"] .ev-go2{ color:#1E7A64; }

/* ── §3.5 간이 진단 중간 결과 — 대화 흐름 안에 끼어든다 ──
   ★주황(경고색) → 연한 파스텔 하늘색으로 교체(사장님 지시). 숫자는 가독성을 위해 진한 청색. */
.qk{ margin-top:26px; margin-left:50px; border:1px solid #CFE4FA; border-radius:20px; padding:30px 32px;
  background:linear-gradient(140deg,#EFF7FE,#F8FCFF);
  transition:border-color .24s var(--ease), box-shadow .24s var(--ease); }
.qk .lb{ font-size:12px; font-weight:700; letter-spacing:.14em; color:#2A72B8; }
.qk .n{ margin-top:10px; font-size:clamp(28px,3.4vw,40px); font-weight:700; letter-spacing:-.04em; color:#155C9E; }
.qk .s{ margin-top:12px; font-size:14.5px; line-height:1.72; color:var(--g700); }
.qk .fm{ margin-top:10px; font-size:12.5px; color:var(--g500); }
.qk .more{ display:inline-flex; align-items:center; gap:9px; margin-top:22px; font-family:inherit; font-size:15.5px; font-weight:600;
  color:#fff; background:var(--ink); border:1.5px solid transparent; border-radius:12px; padding:14px 24px; cursor:pointer;
  transition:background .2s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease); }
/* 호버 = 화살표 좌우 이동(.ux-ar) + 윤곽선이 또렷해진다 (§3.5) */
.qk .more:hover{ background:#132A52; border-color:var(--blue-l); box-shadow:0 0 0 3px rgba(46,111,242,.14); }
.qk:has(.more:hover){ border-color:#8FC4EE; box-shadow:0 10px 28px rgba(21,92,158,.10); }

/* ── 결과 ──
   ★결과 화면도 같은 기준선을 쓴다 — 좌측은 로고 시작점, 우측은 햄버거 끝점 안쪽.
     읽기 폭(1080)은 유지하되 가운데 정렬이 아니라 왼쪽 기준선에 붙인다. */
.res{ display:none; width:100%; max-width:var(--ux-max); margin-inline:auto;
  padding:86px var(--ux-padR) 120px var(--ux-padL); }   /* ★§5-1 헤더 제거 → 상단 130 → 86 */
.res.on{ display:block; }
.rwrap{ width:100%; max-width:1080px; margin:0; }
.rpill{ display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.14em; color:var(--blue); background:var(--tint); border-radius:99px; padding:8px 16px; }
.res h2{ margin-top:18px; font-size:clamp(28px,3.6vw,42px); font-weight:700; letter-spacing:-.035em; line-height:1.32; color:var(--ink); }
.res h2 .em{ color:#D9541F; }
.rtop{ margin-top:32px; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:860px){ .rtop{ grid-template-columns:1fr; } }
.rbx{ border:1px solid var(--line); border-radius:20px; padding:30px 32px; }
.rbx.warm{ background:linear-gradient(140deg,#FFF4EE,#FFFAF7); border-color:#FFE0CF; }
.rbx.nv{ background:var(--navy); border-color:transparent; }
.rbx .lb{ font-size:12.5px; font-weight:700; letter-spacing:.14em; color:var(--g500); }
.rbx.warm .lb{ color:#C0561F; } .rbx.nv .lb{ color:var(--blue-l); }
.rbx .n{ margin-top:12px; font-size:clamp(30px,3.6vw,46px); font-weight:700; letter-spacing:-.04em; }
.rbx.warm .n{ color:#D9541F; } .rbx.nv .n{ color:#fff; font-size:clamp(26px,3vw,38px); }
.rbx .s{ margin-top:12px; font-size:15px; line-height:1.7; color:var(--g700); }
.rbx.nv .s{ color:#B8C5D9; }
.rsc{ margin-top:20px; display:flex; gap:4px; }
.rsc i{ flex:1; height:9px; border-radius:99px; background:rgba(255,255,255,.15); }
.rsc i.on{ background:rgba(77,162,255,.6); } .rsc i.cur{ background:#fff; box-shadow:0 0 0 3px rgba(77,162,255,.32); }

/* 결과 · 절감 요약 */
.rsav{ margin-top:18px; border:1px solid #CDEEDF; border-radius:20px; padding:28px 32px; background:#F3FBF7; }
.rsav .lb{ font-size:12.5px; font-weight:700; letter-spacing:.14em; color:#1E8A63; }
.rsav .n{ margin-top:10px; font-size:clamp(24px,2.8vw,34px); font-weight:700; letter-spacing:-.035em; color:#177552; }
.rsav .rows{ margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:14px 26px; }
@media(max-width:720px){ .rsav .rows{ grid-template-columns:1fr; } }
.rsav .h{ display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; color:var(--g700); }
.rsav .h em{ font-style:normal; font-weight:700; color:#177552; }
.rsav .bar{ margin-top:6px; height:7px; border-radius:99px; background:#DCEFE7; overflow:hidden; }
.rsav .bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#3FB98A,#5BD6A0); }
.rsav .note{ margin-top:16px; font-size:12.5px; line-height:1.7; color:var(--g500); }

/* 결과 · 답변 명세표 */
.rspec{ margin-top:44px; }
.rh3{ font-size:21px; font-weight:700; letter-spacing:-.028em; color:var(--ink); }
.rh3 + .rsub{ margin-top:8px; font-size:14.5px; line-height:1.7; color:var(--g500); }
.rtable{ margin-top:18px; border-top:1px solid var(--ink); }
.rtr{ display:grid; grid-template-columns:190px 1fr; gap:20px; padding:15px 4px; border-bottom:1px solid var(--line); font-size:14.5px; }
@media(max-width:640px){ .rtr{ grid-template-columns:1fr; gap:5px; } }
.rtr .k{ font-weight:600; color:var(--g500); }
.rtr .v{ color:var(--ink); line-height:1.6; }

/* 결과 · 비슷한 사례 3건 */
.rcase{ margin-top:48px; }
.rcgrid{ margin-top:20px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:900px){ .rcgrid{ grid-template-columns:1fr; } }
.rcitem{ display:block; border:1px solid var(--line); border-radius:18px; padding:24px 24px 26px; text-decoration:none; transition:.18s var(--ease); }
.rcitem:hover{ border-color:var(--blue); transform:translateY(-3px); box-shadow:0 12px 30px rgba(20,40,80,.08); }
.rctg{ display:flex; flex-wrap:wrap; gap:6px; }
.rctg span{ font-size:11.5px; font-weight:600; color:var(--g700); background:var(--g100,#F2F5F9); border-radius:99px; padding:5px 11px; }
.rctg span.hit{ color:var(--blue); background:var(--tint); }
.rcitem .t{ margin-top:14px; font-size:15.5px; font-weight:600; letter-spacing:-.02em; line-height:1.55; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.rcitem .s{ margin-top:10px; font-size:13.5px; line-height:1.66; color:var(--g500);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* 결과 · 리포트 폼 */
.rform{ margin-top:48px; border:1px solid var(--line); border-radius:22px; padding:36px 38px; background:var(--g50,#FAFBFD); }
@media(max-width:640px){ .rform{ padding:28px 22px; } }
.rfgrid{ margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:720px){ .rfgrid{ grid-template-columns:1fr; } }
.rfg{ display:flex; flex-direction:column; gap:7px; }
.rfg.full{ grid-column:1 / -1; }
.rfg label{ font-size:13px; font-weight:600; color:var(--g700); }
.rfg input{ font-family:inherit; font-size:15px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.rfg input:focus{ outline:none; border-color:var(--blue); }
.rfsub{ margin-top:20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.rfsub button{ font-family:inherit; font-size:15.5px; font-weight:600; color:#fff; background:var(--blue); border:0; border-radius:12px; padding:16px 32px; cursor:pointer; }
.rfsub .agree{ font-size:12.5px; line-height:1.6; color:var(--g500); }
.rfdone{ margin-top:18px; font-size:14.5px; line-height:1.7; color:#177552; display:none; }
.rfdone.on{ display:block; }

/* 결과 · CTA 3종 */
.cta3{ margin-top:48px; border-radius:24px; padding:44px 40px; background:var(--navy);
  background-image:radial-gradient(620px 380px at 108% -20%, rgba(46,111,242,.3), transparent 62%); }
.cta3 .t{ font-size:clamp(22px,2.6vw,29px); font-weight:700; letter-spacing:-.032em; line-height:1.4; color:#fff; }
.cta3 .s{ margin-top:12px; font-size:15px; line-height:1.72; color:#A9BCD8; }
.cta3 .row{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; }
/* §7 동일 기능엔 동일 인터랙션 — 좌 패널 CTA 3종과 같은 샤인·화살표 규칙을 쓴다 */
.cta3 a{ display:inline-flex; align-items:center; gap:9px; font-size:15.5px; font-weight:600; text-decoration:none;
  border-radius:12px; padding:15px 24px; transition:.16s var(--ease); }
.cta3 a .ar{ opacity:.72; }
.cta3 a:hover .ar{ opacity:1; }
.cta3 a.p{ color:#fff; background:var(--blue); }
.cta3 a.k{ color:#3B1E1E; background:#FAE100; }
.cta3 a.g{ color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); }
.cta3 a:hover{ transform:translateY(-2px); }

.back{ margin-top:34px; font-family:inherit; font-size:14.5px; font-weight:600; color:var(--g500); background:none; border:0; cursor:pointer; border-bottom:1px solid var(--line); padding-bottom:2px; }

/* ══════ §5-1 · §7 헤더 제거 — 상단엔 햄버거 버튼만 ══════
   ★2026-08-01 사장님 확정: 로고까지 없앤다. 정본은 ux-common.css 의 `body.ux-hd0`
     (로고·GNB·CTA·ghost·돌아가기 전부 숨김 / 바는 투명 + pointer-events:none / 햄버거만 살림
      / .gnb-in 은 justify-content:flex-end + padding-top:18px).
   → 지난 세션의 헤더 3안(HD1·HD2·HD3) 전환 칩과 그 보정 규칙은 전부 걷어냈다.
     헤더가 되살아날 경로 자체를 없앤 것이다(칩·localStorage 부팅 스크립트 포함).

   ★진행바(.ev-prog · z-index 100)와 햄버거의 층위 — 실측으로 확인했다:
     진행바 = 화면 최상단 0~3px 에 얇게 깔린다. 햄버거는 top 12px / bottom 64px 이라
     세로로 아예 겹치지 않는다(바가 투명해져도 진행바가 햄버거를 가로지르지 않는다).
     z-index 는 그대로 둔다 — 진행바가 위에 있어야 투명해진 .gnb(90) 에 덮이지 않는다. */

/* ★햄버거 3선이 배경에 묻히지 않게.
   ux-common.css 가 HD0 햄버거에 반투명 흰 알약을 깔아 뒀고(본문 위를 지나가도 읽힌다),
   다크 배경 위에서는 페이지가 `ux-hd0-dark` 를 붙여 알약을 어둡게 뒤집도록 열어 뒀다.
   이 페이지에서 햄버거가 다크 위에 얹히는 경우는 딱 하나 —
   좁은 화면(≤1240)에서 좌 패널이 화면 폭을 다 쓰고 아직 위에 깔려 있을 때다.
   ★HD0 에는 .ux-scrolled 가 붙지 않는다(ux-common.js 는 ux-hd1 일 때만 토글).
     그래서 '네이비가 햄버거 밑에 있는 동안'을 이 페이지 JS 가 직접 판정해 클래스를 건다.
   알약이 어두워지면 잉크 3선이 묻히므로 줄 색도 같이 뒤집는다(홈 다크 히어로와 같은 방식). */
body.ux-hd0.ux-hd0-dark .burger .ln{ background-image:linear-gradient(90deg,var(--blue-l) 0 50%, #fff 50% 100%); }
body.ux-hd0.ux-hd0-dark .bg-ink .ring{ background:rgba(255,255,255,.18); }

/* ══════ 반응형 마무리 ══════
   ★★선언 순서 함정: 위쪽에 써 둔 미디어쿼리는 아래에 나오는 기본 규칙(.chat / .qk)에
     같은 특이도로 덮인다. 실제로 모바일 우측 패딩이 0으로 죽어 있었다.
     → 좁은 화면 보정은 반드시 스타일시트 맨 끝에 모아 둘 것. */
@media(max-width:1240px){
  /* ★★2026-08-04 §2 — 세로로 눕는 구간의 규칙도 네 화면을 하나로.
     구값 34px / 좌 28px → 좌 패널(16)과 12px 어긋나 세로 스택에서 계단처럼 보였다.
     신값 = ux-common 의 눕는 규칙과 동일(상 --section-space-md · 좌 --panel-pad-l). */
  .chat{ padding:var(--section-space-md) var(--ux-padR) var(--page-tail) var(--panel-pad-l); min-height:0; }
}
@media(max-width:640px){
  /* 들여쓰기(말풍선 시작선 50px)가 좁은 화면에서는 선택지를 짓누른다 */
  .picks, .numrow, .tpick, .qk, .ev-done{ margin-left:0; }
  .qk{ padding:24px 20px; }
  .qk .more{ width:100%; justify-content:center; padding:14px 16px; }
  .tpick button{ padding:20px 20px 18px; }
  .tpick .ev-il{ width:72px; height:52px; }
  .ask{ padding:14px 16px; }
  .trust .n{ font-size:16.5px; }
}


/* ── 셀프진단(S5) — sv-diag.html 에서 이식 ── */
/* ===========================================================
   S5 · gongysd 클론 — 설득형 롱폼 서비스 허브
   모든 커스텀 클래스는 .s5- 프리픽스. .card 재정의 금지.
   =========================================================== */

.s5-badge{
  position:fixed; left:14px; bottom:14px; z-index:90;
  font:600 12px/1 Paperlogy,sans-serif; color:#fff;
  background:#0A1C3E; border-radius:999px; padding:9px 14px;
}
/* ★2026-08-07 — 탭 모듈이 차지하는 세로 자리(탭 높이 46 + 아래 여백 28).
   좌 패널 텍스트와 같은 선(--panel-pad-t)에서 탭이 시작하므로 우 콘텐츠만 이만큼 내린다.
   눕는 구간(≤1240)에서는 탭이 화면 맨 위로 돌아가므로 0. */
:root{ --ev-tabspace:74px; }
@media(max-width:1240px){ :root{ --ev-tabspace:0px; } }

/* 판정 색(진단 위젯 전용 — 토큰 외 색은 여기서만) */
:root{
  --s5-ok:#1B8F63;      --s5-ok-bg:#E8F6F0;   --s5-ok-bd:#B6E2D0;
  --s5-warn:#B5811A;    --s5-warn-bg:#FDF4E3; --s5-warn-bd:#EFDCAE;
  --s5-risk:#C8621F;    --s5-risk-bg:#FDF0E6; --s5-risk-bd:#F2CFB1;
  --s5-red:#C6342F;     --s5-red-bg:#FCECEB;  --s5-red-bd:#F1C2BF;
}
/* ── 공통 유틸 ─────────────────────────────────────────── */
.s5-narrow{ max-width:1080px; margin:0 auto; padding:0 24px; }
.s5-note{ margin-top:18px; font-size:13.5px; line-height:1.7; color:var(--g500); text-align:center; }
.sec-dark .s5-note{ color:var(--navy-tx); }
.s5-hr{ height:1px; background:var(--line); border:0; margin:0; }
.s5-em{ color:var(--blue); }
.sec-dark .s5-em{ color:var(--blue-l); }
/* ── 서브 히어로 보조 ───────────────────────────────────── */
.s5-hero-facts{
  margin:38px auto 0; max-width:760px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden;
}
.s5-hero-facts div{ padding:20px 16px; text-align:center; border-left:1px solid var(--line); }
.s5-hero-facts div:first-child{ border-left:0; }
.s5-hero-facts .n{ font-size:23px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.s5-hero-facts .n span{ font-size:14.5px; font-weight:600; color:var(--g500); margin-left:3px; }
.s5-hero-facts .t{ margin-top:6px; font-size:13.5px; color:var(--g500); }
/* ── 2. 대표 시간가치 ───────────────────────────────────── */
.s5-time{ position:relative; overflow:hidden; }
.s5-time::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(900px 420px at 50% -12%, rgba(77,162,255,.16), transparent 68%);
  pointer-events:none;
}
.s5-time .wrapc{ position:relative; }
.s5-chips{
  margin:0 auto; max-width:1000px;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.s5-chip{
  font-size:15px; font-weight:500; line-height:1;
  color:#C7D6EC; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14); border-radius:999px;
  padding:13px 19px; transition:color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.s5-chip:nth-child(3n){ color:#E4EDF9; }
.s5-chip:hover{ color:#fff; border-color:rgba(120,175,255,.6); background:rgba(46,111,242,.18); }
.s5-chips-cap{
  margin-top:30px; text-align:center;
  font-size:clamp(19px,2.1vw,26px); font-weight:600; letter-spacing:-.02em; color:#fff; line-height:1.55;
}
.s5-chips-cap span{ color:var(--blue-l); }
/* 계산 패널 */
.s5-calc{
  margin-top:66px; border:1px solid rgba(255,255,255,.13); border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  overflow:hidden;
}
.s5-calc-head{
  padding:26px 32px; border-bottom:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.s5-calc-head .k{
  font-size:12.5px; font-weight:600; letter-spacing:.16em; color:var(--blue-l);
  border:1px solid rgba(120,175,255,.4); border-radius:999px; padding:7px 14px;
}
.s5-calc-head .t{ font-size:17px; font-weight:600; color:#fff; letter-spacing:-.01em; }
.s5-steps{ display:grid; grid-template-columns:repeat(3,1fr); }
.s5-step{ padding:34px 32px; border-left:1px solid rgba(255,255,255,.1); }
.s5-step:first-child{ border-left:0; }
.s5-step .no{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:8px;
  font-size:12.5px; font-weight:600; color:var(--navy);
  background:var(--blue-l);
}
.s5-step h4{ margin-top:14px; font-size:17.5px; font-weight:600; color:#fff; letter-spacing:-.02em; line-height:1.45; }
.s5-step p{ margin-top:10px; font-size:14.5px; line-height:1.75; color:var(--navy-tx); }
.s5-step .eq{
  margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1);
  font-size:15px; font-weight:600; color:#DCE7F7; letter-spacing:-.01em;
}
.s5-step .eq b{ color:var(--blue-l); font-weight:700; }
.s5-money{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.1);
}
.s5-money-cell{ padding:38px 32px 42px; border-left:1px solid rgba(255,255,255,.1); text-align:center; }
.s5-money-cell:first-child{ border-left:0; }
.s5-money-cell .lb{ font-size:14px; font-weight:600; color:var(--navy-tx); letter-spacing:.02em; }
.s5-money-cell .vl{
  margin-top:12px; font-size:clamp(30px,3.4vw,46px); font-weight:700;
  letter-spacing:-.035em; line-height:1.1; color:#fff;
}
.s5-money-cell .vl u{ text-decoration:none; font-size:.5em; font-weight:600; margin-left:4px; color:var(--navy-tx); }
.s5-money-cell.hot{ background:rgba(198,52,47,.13); }
.s5-money-cell.hot .vl{ color:#FF9A8E; }
.s5-money-cell.hot .lb{ color:#F2B7AF; }
.s5-after{
  margin-top:26px; display:grid; grid-template-columns:1.1fr 1fr; gap:18px;
}
.s5-after-box{
  border:1px solid rgba(255,255,255,.13); border-radius:16px; padding:28px 30px;
  background:rgba(255,255,255,.035);
}
.s5-after-box .h{ font-size:13px; font-weight:600; letter-spacing:.14em; color:var(--blue-l); }
.s5-after-box .b{ margin-top:14px; font-size:16.5px; line-height:1.75; color:#D8E3F3; }
.s5-after-box .b b{ color:#fff; font-weight:700; }
.s5-after-box .s{ margin-top:14px; font-size:13.5px; line-height:1.7; color:var(--navy-tx); }
.s5-after-bar{ margin-top:20px; }
.s5-after-row{ display:flex; align-items:center; gap:14px; margin-top:12px; }
.s5-after-row .lb{ width:76px; flex:none; font-size:13.5px; font-weight:600; color:var(--navy-tx); }
.s5-after-row .tr{ flex:1; height:12px; border-radius:999px; background:rgba(255,255,255,.09); overflow:hidden; }
.s5-after-row .fl{ height:100%; border-radius:999px; width:0; transition:width 1.2s var(--ease); }
.s5-after-row.a .fl{ background:linear-gradient(90deg,#FF7A68,#C6342F); }
.s5-after-row.b .fl{ background:linear-gradient(90deg,var(--blue-l),var(--blue)); }
.s5-after-row .vv{ width:96px; flex:none; text-align:right; font-size:14.5px; font-weight:700; color:#fff; letter-spacing:-.02em; }
.rv.in .s5-after-row.a .fl{ width:100%; }
.rv.in .s5-after-row.b .fl{ width:26%; }

@media(max-width:1000px){.s5-steps{ grid-template-columns:1fr; }
.s5-step{ border-left:0; border-top:1px solid rgba(255,255,255,.1); }
.s5-step:first-child{ border-top:0; }
.s5-after{ grid-template-columns:1fr; }
}
@media(max-width:820px){.s5-hero-facts{ grid-template-columns:1fr; }
.s5-hero-facts div{ border-left:0; border-top:1px solid var(--line); }
.s5-hero-facts div:first-child{ border-top:0; }
.s5-money{ grid-template-columns:1fr; }
.s5-money-cell{ border-left:0; border-top:1px solid rgba(255,255,255,.1); }
.s5-money-cell:first-child{ border-top:0; }
.s5-chip{ font-size:13.5px; padding:11px 15px; }
}
/* ── 3. 15문항 셀프진단 ─────────────────────────────────── */
.s5-diag{ background:var(--bg2); }
.s5-diag-wrap{
  max-width:1240px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1fr 400px; gap:28px; align-items:start;
}
.s5-sheet{ background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.s5-sheet-head{
  padding:24px 28px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.s5-sheet-head .tt{ font-size:17.5px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.s5-sheet-head .ds{ margin-top:5px; font-size:13.5px; color:var(--g500); }
.s5-reset{
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--g700);
  background:#fff; border:1px solid var(--line); border-radius:9px;
  padding:9px 15px; cursor:pointer; transition:border-color .3s, color .3s;
}
.s5-reset:hover{ border-color:var(--g500); color:var(--ink); }
.s5-grp{ border-top:1px solid var(--line); }
.s5-grp:first-of-type{ border-top:0; }
.s5-grp-head{
  display:flex; align-items:center; gap:12px;
  padding:20px 28px 12px;
}
.s5-grp-head .ix{
  width:24px; height:24px; flex:none; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:600; color:var(--blue-d);
  background:var(--tint); border:1px solid var(--tint-b);
}
.s5-grp-head .nm{ font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.s5-grp-head .ct{
  margin-left:auto; font-size:12.5px; font-weight:600; color:var(--g500);
  background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:5px 11px;
  transition:color .3s, border-color .3s, background .3s;
}
.s5-grp-head .ct.hit{ color:var(--blue-d); background:var(--tint); border-color:var(--tint-b); }
.s5-q{ display:block; padding:0 28px; }
.s5-q label{
  display:flex; align-items:flex-start; gap:13px;
  padding:13px 16px; margin-bottom:8px;
  border:1px solid var(--line); border-radius:12px; background:#fff;
  cursor:pointer; transition:border-color .28s var(--ease), background .28s var(--ease);
}
.s5-q label:hover{ border-color:var(--tint-b); background:var(--bg2); }
.s5-q input{ position:absolute; opacity:0; width:0; height:0; }
.s5-q .bx{
  width:21px; height:21px; flex:none; margin-top:1px;
  border:1.5px solid var(--line); border-radius:6px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .22s var(--ease), border-color .22s var(--ease);
}
.s5-q .bx svg{ opacity:0; transform:scale(.6); transition:opacity .22s var(--ease), transform .22s var(--ease); }
.s5-q .tx{ font-size:15.5px; line-height:1.6; color:var(--g700); letter-spacing:-.01em; }
.s5-q input:checked ~ .bx{ background:var(--blue); border-color:var(--blue); }
.s5-q input:checked ~ .bx svg{ opacity:1; transform:none; }
.s5-q input:checked ~ .tx{ color:var(--ink); font-weight:500; }
.s5-q input:focus-visible ~ .bx{ box-shadow:0 0 0 3px var(--tint); }
.s5-q label:has(input:checked){ border-color:var(--tint-b); background:var(--tint); }
.s5-grp:last-of-type .s5-q:last-child label{ margin-bottom:22px; }
/* 결과 패널(스티키) */
.s5-res{ position:sticky; top:96px; }
.s5-res-in{
  background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden;
  transition:border-color .4s var(--ease);
}
.s5-res-top{ padding:26px 26px 22px; transition:background .4s var(--ease); }
.s5-res-k{ font-size:12.5px; font-weight:600; letter-spacing:.16em; color:var(--g500); }
.s5-res-score{ margin-top:12px; display:flex; align-items:baseline; gap:6px; }
.s5-res-score .n{
  font-size:52px; font-weight:700; line-height:1; letter-spacing:-.04em; color:var(--ink);
  font-variant-numeric:tabular-nums; transition:color .4s var(--ease);
}
.s5-res-score .d{ font-size:19px; font-weight:600; color:var(--g500); }
.s5-res-score .u{ margin-left:4px; font-size:14px; color:var(--g500); }
.s5-bar{ margin-top:18px; height:10px; border-radius:999px; background:var(--line); overflow:hidden; }
.s5-bar i{
  display:block; height:100%; width:0; border-radius:999px;
  background:var(--blue); transition:width .5s var(--ease), background .4s var(--ease);
}
.s5-ticks{ margin-top:9px; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.s5-ticks span{
  font-size:11px; font-weight:600; text-align:center; color:var(--g500);
  padding:5px 0; border-radius:6px; background:var(--bg2);
  transition:color .3s, background .3s;
}
.s5-ticks span.on{ color:#fff; }
.s5-verdict{
  margin-top:20px; display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; border-radius:999px; padding:8px 15px;
  border:1px solid var(--line); color:var(--g700); background:var(--bg2);
  transition:color .4s, background .4s, border-color .4s;
}
.s5-verdict .dt{ width:8px; height:8px; border-radius:50%; background:currentColor; }
.s5-res-hl{ margin-top:16px; font-size:20px; font-weight:600; letter-spacing:-.02em; line-height:1.5; color:var(--ink); }
.s5-res-tx{ margin-top:10px; font-size:14.5px; line-height:1.75; color:var(--g700); }
.s5-res-body{ padding:22px 26px 26px; border-top:1px solid var(--line); background:#fff; }
.s5-res-lb{ font-size:12.5px; font-weight:600; letter-spacing:.12em; color:var(--g500); }
.s5-weak{ margin-top:11px; font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.s5-weak span{ color:var(--blue); }
.s5-recs{ margin-top:20px; display:flex; flex-wrap:wrap; gap:8px; }
.s5-recs a{
  font-size:13.5px; font-weight:600; color:var(--blue-d);
  background:var(--tint); border:1px solid var(--tint-b); border-radius:9px;
  padding:9px 13px; transition:background .3s, border-color .3s;
}
.s5-recs a:hover{ background:#fff; border-color:var(--blue); }
.s5-res-cta{ margin-top:22px; display:grid; gap:9px; }
.s5-res-cta .btn{ justify-content:center; width:100%; font-size:15.5px; padding:14px 20px; }
.s5-res-foot{ margin-top:14px; font-size:12.5px; line-height:1.65; color:var(--g500); text-align:center; }
/* 판정 테마 */
.s5-res-in[data-t="ok"]{ border-color:var(--s5-ok-bd); }
.s5-res-in[data-t="ok"] .s5-res-top{ background:var(--s5-ok-bg); }
.s5-res-in[data-t="ok"] .s5-res-score .n{ color:var(--s5-ok); }
.s5-res-in[data-t="ok"] .s5-bar i{ background:var(--s5-ok); }
.s5-res-in[data-t="ok"] .s5-verdict{ color:var(--s5-ok); background:#fff; border-color:var(--s5-ok-bd); }
.s5-res-in[data-t="ok"] .s5-ticks span.on{ background:var(--s5-ok); }
.s5-res-in[data-t="warn"]{ border-color:var(--s5-warn-bd); }
.s5-res-in[data-t="warn"] .s5-res-top{ background:var(--s5-warn-bg); }
.s5-res-in[data-t="warn"] .s5-res-score .n{ color:var(--s5-warn); }
.s5-res-in[data-t="warn"] .s5-bar i{ background:var(--s5-warn); }
.s5-res-in[data-t="warn"] .s5-verdict{ color:var(--s5-warn); background:#fff; border-color:var(--s5-warn-bd); }
.s5-res-in[data-t="warn"] .s5-ticks span.on{ background:var(--s5-warn); }
.s5-res-in[data-t="risk"]{ border-color:var(--s5-risk-bd); }
.s5-res-in[data-t="risk"] .s5-res-top{ background:var(--s5-risk-bg); }
.s5-res-in[data-t="risk"] .s5-res-score .n{ color:var(--s5-risk); }
.s5-res-in[data-t="risk"] .s5-bar i{ background:var(--s5-risk); }
.s5-res-in[data-t="risk"] .s5-verdict{ color:var(--s5-risk); background:#fff; border-color:var(--s5-risk-bd); }
.s5-res-in[data-t="risk"] .s5-ticks span.on{ background:var(--s5-risk); }
.s5-res-in[data-t="red"]{ border-color:var(--s5-red-bd); }
.s5-res-in[data-t="red"] .s5-res-top{ background:var(--s5-red-bg); }
.s5-res-in[data-t="red"] .s5-res-score .n{ color:var(--s5-red); }
.s5-res-in[data-t="red"] .s5-bar i{ background:var(--s5-red); }
.s5-res-in[data-t="red"] .s5-verdict{ color:var(--s5-red); background:#fff; border-color:var(--s5-red-bd); }
.s5-res-in[data-t="red"] .s5-ticks span.on{ background:var(--s5-red); }
.s5-res-in[data-t="red"] .s5-res-cta .btn-fill{ background:var(--s5-red); }
.s5-res-in[data-t="red"] .s5-res-cta .btn-fill:hover{ background:#A82A26; }

@media(max-width:1000px){.s5-diag-wrap{ grid-template-columns:1fr; }
.s5-res{ position:static; }
}
@media(max-width:640px){.s5-sheet-head{ padding:20px; }
.s5-grp-head{ padding:18px 20px 10px; }
.s5-q{ padding:0 20px; }
.s5-q .tx{ font-size:14.5px; }
.s5-res-top, .s5-res-body{ padding-left:20px; padding-right:20px; }
}
/* ── 4. 대표 인용 3 ─────────────────────────────────────── */
.s5-quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.s5-quote{
  border:1px solid var(--line); border-radius:18px; background:#fff;
  padding:34px 32px 30px; display:flex; flex-direction:column;
  transition:transform .55s var(--ease), border-color .35s;
}
.s5-quote:hover{ transform:translateY(-6px); border-color:var(--tint-b); }
.s5-quote .mk{
  font-size:38px; line-height:1; font-weight:700; color:var(--tint-b); letter-spacing:-.05em;
}
.s5-quote .tags{ margin-top:18px; display:flex; flex-wrap:wrap; gap:6px; }
.s5-quote .tags span{
  font-size:12px; font-weight:600; color:var(--g700);
  background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:6px 11px;
}
.s5-quote .bd{
  margin-top:18px; font-size:16px; line-height:1.82; color:var(--g700); letter-spacing:-.01em; flex:1;
}
.s5-quote .bd b{ color:var(--ink); font-weight:600; background:linear-gradient(transparent 62%, var(--tint) 62%); }
.s5-quote .who{
  margin-top:24px; padding-top:18px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:12px;
}
.s5-quote .av{
  width:38px; height:38px; flex:none; border-radius:11px;
  background:linear-gradient(140deg,#1C3A6B,#0A1930);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600;
}
.s5-quote .nm{ font-size:14.5px; font-weight:600; color:var(--ink); }
.s5-quote .mt{ margin-top:3px; font-size:12.5px; color:var(--g500); }
/* ── 5. 방치의 결말 ─────────────────────────────────────── */
.s5-decay{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:8px; }
.s5-decay-i{
  position:relative; padding:34px 24px 30px;
  border-left:1px solid rgba(255,255,255,.1);
}
.s5-decay-i:first-child{ border-left:0; }
.s5-decay-i .st{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:11px;
  font-size:13px; font-weight:600; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  transition:background .4s var(--ease), border-color .4s var(--ease), color .4s;
}
.s5-decay-i:nth-child(4) .st{ background:rgba(198,52,47,.28); border-color:rgba(255,140,128,.5); }
.s5-decay-i:nth-child(5) .st{ background:#C6342F; border-color:#C6342F; }
.s5-decay-i h4{ margin-top:18px; font-size:16.5px; font-weight:600; color:#fff; line-height:1.5; letter-spacing:-.02em; }
.s5-decay-i p{ margin-top:10px; font-size:14px; line-height:1.75; color:var(--navy-tx); }
.s5-decay-i .tm{
  margin-top:16px; font-size:12px; font-weight:600; letter-spacing:.1em; color:#7E93B5;
}
.s5-decay-line{
  height:2px; margin:0 0 4px;
  background:linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.2) 55%, rgba(198,52,47,.85));
  border-radius:2px;
}
.s5-decay-cap{
  margin-top:44px; text-align:center; font-size:clamp(18px,2vw,24px);
  font-weight:600; letter-spacing:-.02em; line-height:1.6; color:#fff;
}
.s5-decay-cap span{ color:#FF9A8E; }
/* ── 6. 성과 수치 3 ─────────────────────────────────────── */
.s5-mx{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.s5-mx-i{
  border:1px solid var(--line); border-radius:18px; background:#fff;
  padding:44px 34px 38px; text-align:center;
  transition:transform .55s var(--ease), border-color .35s, box-shadow .55s var(--ease);
}
.s5-mx-i:hover{ transform:translateY(-6px); border-color:var(--tint-b); box-shadow:0 18px 40px -28px rgba(10,28,62,.5); }
.s5-mx-i .v{
  font-size:clamp(48px,5.4vw,72px); font-weight:700; line-height:1;
  letter-spacing:-.05em; color:var(--blue);
}
.s5-mx-i .v em{ font-style:normal; font-size:.44em; font-weight:600; margin-left:2px; color:var(--blue); }
.s5-mx-i .t{ margin-top:18px; font-size:18.5px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.s5-mx-i .d{ margin-top:11px; font-size:14.5px; line-height:1.75; color:var(--g700); }
.s5-mx-i .src{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--g500);
}

@media(max-width:1000px){.s5-quotes{ grid-template-columns:1fr; }
.s5-decay{ grid-template-columns:repeat(2,1fr); }
.s5-decay-i{ border-left:0; border-top:1px solid rgba(255,255,255,.1); }
.s5-decay-i:nth-child(-n+2){ border-top:0; }
.s5-decay-i:nth-child(2n){ border-left:1px solid rgba(255,255,255,.1); }
.s5-mx{ grid-template-columns:1fr; }
}
@media(max-width:640px){.s5-decay{ grid-template-columns:1fr; }
.s5-decay-i{ border-left:0; border-top:1px solid rgba(255,255,255,.1); padding:26px 4px; }
.s5-decay-i:first-child{ border-top:0; }
.s5-quote{ padding:28px 24px; }
}
/* ── 7. 3PL 사례 ────────────────────────────────────────── */
.s5-case{ background:var(--bg2); }
.s5-case-top{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:stretch; }
.s5-case-box{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:32px 34px; }
.s5-case-box .h{ font-size:12.5px; font-weight:600; letter-spacing:.14em; color:var(--blue); }
.s5-case-box h3{ margin-top:14px; font-size:22px; font-weight:600; letter-spacing:-.02em; line-height:1.5; color:var(--ink); }
.s5-case-box p{ margin-top:12px; font-size:15.5px; line-height:1.8; color:var(--g700); }
.s5-case-svg{ margin-top:22px; width:100%; height:auto; display:block; }
.s5-kpi{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border-radius:16px; overflow:hidden; border:1px solid var(--line); }
.s5-kpi div{ background:#fff; padding:22px 20px; }
.s5-kpi .k{ font-size:12.5px; color:var(--g500); }
.s5-kpi .v{ margin-top:8px; font-size:21px; font-weight:700; letter-spacing:-.03em; color:var(--ink); }
.s5-kpi .v b{ color:var(--blue); font-weight:700; }
.s5-kpi .v s{ text-decoration:line-through; color:var(--g500); font-weight:600; }
.s5-kpi .v i{ font-style:normal; color:var(--g500); font-weight:600; margin:0 5px; }
/* ── 8. 서비스 9종 ──────────────────────────────────────── */
.s5-svc{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.s5-svc-g{
  border:1px solid var(--line); border-radius:20px; background:#fff; overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .35s, transform .55s var(--ease);
}
.s5-svc-g:hover{ border-color:var(--tint-b); transform:translateY(-5px); }
.s5-svc-hd{ padding:30px 30px 26px; border-bottom:1px solid var(--line); background:var(--bg2); }
.s5-svc-hd .ic{
  width:44px; height:44px; border-radius:13px; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.s5-svc-hd h3{ margin-top:16px; font-size:20px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.s5-svc-hd p{ margin-top:9px; font-size:14px; line-height:1.7; color:var(--g500); }
.s5-svc-list{ list-style:none; padding:10px 30px 26px; margin:0; flex:1; }
.s5-svc-list li{ border-top:1px solid var(--line); }
.s5-svc-list li:first-child{ border-top:0; }
.s5-svc-list a{ display:block; padding:17px 0; }
.s5-svc-list .nm{ font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--ink); display:flex; align-items:center; gap:8px; }
.s5-svc-list .nm .ar{ color:var(--g500); font-size:13px; transition:transform .3s var(--ease), color .3s; }
.s5-svc-list a:hover .nm{ color:var(--blue); }
.s5-svc-list a:hover .nm .ar{ transform:translateX(4px); color:var(--blue); }
.s5-svc-list .ds{ margin-top:6px; font-size:13.5px; line-height:1.65; color:var(--g500); }
/* ── 9. YES 리스트 20 ───────────────────────────────────── */
.s5-yes{ background:var(--bg2); }
.s5-yes-grid{
  max-width:1160px; margin:0 auto;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden;
}
.s5-yes-i{
  background:#fff; padding:18px 22px;
  display:flex; align-items:center; gap:13px;
  transition:background .3s var(--ease);
}
.s5-yes-i:hover{ background:var(--tint); }
.s5-yes-i .no{
  width:26px; flex:none; font-size:12px; font-weight:600; color:var(--g500);
  font-variant-numeric:tabular-nums;
}
.s5-yes-i .ck{
  width:20px; height:20px; flex:none; border-radius:6px; background:var(--tint);
  display:flex; align-items:center; justify-content:center;
}
.s5-yes-i .tx{ font-size:15.5px; line-height:1.55; color:var(--g700); letter-spacing:-.01em; }
.s5-yes-i:hover .tx{ color:var(--ink); }
.s5-yes-cap{
  margin:38px auto 0; max-width:760px; text-align:center;
  font-size:clamp(19px,2.1vw,25px); font-weight:600; letter-spacing:-.02em; line-height:1.6; color:var(--ink);
}
.s5-yes-cap span{ color:var(--blue); }
.s5-yes-btns{ margin-top:26px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
/* ── 10. 최종 CTA ───────────────────────────────────────── */
.s5-fin{ position:relative; overflow:hidden; }
.s5-fin::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(760px 380px at 50% 110%, rgba(46,111,242,.28), transparent 70%);
  pointer-events:none;
}
.s5-fin .wrapc{ position:relative; }
.s5-fin-form{
  max-width:880px; margin:0 auto;
  border:1px solid rgba(255,255,255,.14); border-radius:20px;
  background:rgba(255,255,255,.04); padding:32px 34px 34px;
}
.s5-fin-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.s5-fld label{ display:block; font-size:13px; font-weight:600; color:var(--navy-tx); letter-spacing:.02em; }
.s5-fld select{
  margin-top:9px; width:100%; font-family:inherit; font-size:15px; font-weight:500; color:#fff;
  background-color:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2); border-radius:11px;
  padding:14px 42px 14px 15px; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238FA6C8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  transition:border-color .3s;
}
.s5-fld select:hover{ border-color:rgba(120,175,255,.6); }
.s5-fld select:focus{ outline:none; border-color:var(--blue-l); }
.s5-fld select option{ color:#0A1C3E; background:#fff; }
.s5-fin-echo{
  margin-top:22px; padding:16px 18px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  font-size:14.5px; line-height:1.7; color:#D8E3F3; text-align:center;
}
.s5-fin-echo b{ color:var(--blue-l); font-weight:600; }
.s5-fin-btns{ margin-top:22px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.s5-fin-meta{
  margin-top:26px; text-align:center; font-size:13.5px; line-height:1.8; color:var(--navy-tx);
}
.s5-fin-meta a{ color:#D8E3F3; border-bottom:1px solid rgba(255,255,255,.28); }
.s5-fin-meta a:hover{ color:#fff; }

@media(max-width:1000px){.s5-case-top{ grid-template-columns:1fr; }
.s5-svc{ grid-template-columns:1fr; }
.s5-fin-row{ grid-template-columns:1fr; }
}
@media(max-width:820px){.s5-yes-grid{ grid-template-columns:1fr; }
}
@media(max-width:640px){.s5-kpi{ grid-template-columns:1fr; }
.s5-case-box{ padding:26px 22px; }
.s5-fin-form{ padding:24px 20px 26px; }
.s5-yes-i{ padding:16px 16px; }
.s5-yes-i .tx{ font-size:14.5px; }
}


/* ── 최종본 전용: 셀프진단 — 영역(A/B/C…) 단위 공개 ── */
.s5-seq .s5-grp{
  opacity:0; transform:translateY(-10px);
  max-height:0; overflow:hidden;
  transition:opacity .5s cubic-bezier(.2,.7,.3,1), transform .5s cubic-bezier(.2,.7,.3,1), max-height .55s cubic-bezier(.2,.7,.3,1);
}
.s5-seq .s5-grp.fx-on{ opacity:1; transform:none; max-height:820px; }

.s5-next{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:2px 24px 22px;
  padding:16px 20px;
  background:var(--tint); border:1px solid var(--tint-b); border-radius:12px;
}
.s5-next .tx{ font-size:13.5px; color:var(--blue-d); font-weight:500; }
.s5-next button{
  flex:none;
  font-family:inherit; font-size:13.5px; font-weight:600;
  color:#fff; background:var(--blue); border:0; border-radius:9px;
  padding:10px 16px; cursor:pointer;
  transition:background .25s, transform .35s cubic-bezier(.2,.7,.3,1);
}
.s5-next button:hover{ background:var(--blue-d); transform:translateX(3px); }
.s5-next[hidden]{ display:none; }

.s5-seq-done{
  margin:2px 24px 22px; padding:15px 18px;
  font-size:13.5px; color:var(--g500); text-align:center;
  border:1px dashed var(--line); border-radius:12px;
  opacity:0; transition:opacity .45s ease;
}
.s5-seq-done.fx-on{ opacity:1; }
@media(max-width:560px){
  .s5-next{ margin:2px 14px 18px; flex-direction:column; align-items:stretch; }
  .s5-next button{ width:100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   진단·견적 탭 (2026-08-03)
   셀프진단 전용 페이지 sv-diag.html 을 이 페이지 안으로 들여와 두 탭으로 나눴다.
   · 기본 탭 = 가견적 계산(기존 동작 보존) · ?tab=diag 로 셀프진단 직행
   · 원본 sv-diag.html 은 그대로 남겨 둔다(서비스 페이지에서 오는 직링크용)
   ⛔.ev-prog 가 z-index 100 이라 탭은 그 아래(96)에 둔다 — 진행바를 덮지 않게
   ★모바일에서 가운데 정렬하면 우측 햄버거(52px @ 우 32px)와 겹친다 → 좌측 정렬
   ══════════════════════════════════════════════════════════════════════ */
/* ★2026-08-07 사장님 지시 — 탭 모듈의 '세로 시작점'을 좌 패널 텍스트와 같은 선에 둔다.
   좌 패널 글자가 시작하는 --panel-pad-t(72px)에 맞추고, 가로도 우 콘텐츠 시작선에 왼쪽 정렬.
   겹치지 않도록 우 콘텐츠만 탭 높이(46)+여백(28)=--ev-tabspace 만큼 내린다.
   ⛔이 선언은 아래 @media(max-width:720px) 보다 앞에 있어야 한다 — 뒤에 두면 모바일 규칙을 덮는다. */
.ev-tabs{
  position:fixed; z-index:96;
  top: var(--panel-pad-t);
  left: calc(var(--panel-pad-l) + var(--panel-w) + var(--panel-gap));
  transform:none;
  display:flex; gap:4px; padding:4px; border-radius:999px;
  background:rgba(255,255,255,.93); backdrop-filter:blur(10px);
  border:1px solid var(--line); box-shadow:0 12px 32px -20px rgba(10,28,62,.5);
}
.ev-tabs button{
  border:0; background:none; cursor:pointer; font-family:inherit;
  font-size:14px; font-weight:600; letter-spacing:-.012em; color:var(--g500);
  padding:9px 18px; border-radius:999px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px;
  transition:color .25s, background-color .25s;
}
.ev-tabs button:hover{ color:var(--ink); }
.ev-tabs button[aria-selected="true"]{ background:var(--ink); color:#fff; }
.ev-tabs .n{
  font-size:11.5px; font-weight:600; padding:2px 7px; border-radius:999px;
  background:var(--tint); color:var(--blue-d);
}
.ev-tabs button[aria-selected="true"] .n{ background:rgba(255,255,255,.18); color:#fff; }
@media(max-width:720px){
  .ev-tabs{ left:var(--ux-padL,32px); transform:none; top:11px; }
  .ev-tabs button{ padding:8px 13px; font-size:13px; }
  .ev-tabs .n{ display:none; }
}

/* 탭 전환 — 견적 화면 구성요소(진행바·좌측 네이비 띠 포함)를 통째로 감춘다 */
#paneDiag{ display:none; background:#fff; }
body.ev-diag #paneDiag{ display:block; }
body.ev-diag .estw,
body.ev-diag #res,
body.ev-diag .ev-prog,
body.ev-diag .ev-bleed{ display:none !important; }

/* ── 셀프진단 pane — 2차 요청서 §2 ────────────────────────
   구 구조: 섹션 헤드 + 전폭 콘텐츠 = "탭만 눌렀더니 내용만 바뀐 화면"
   신 구조: 좌 안내 패널(.ux-panel) + 우 콘텐츠(.ux-content)
            = 상담문의·견적계산기·셀프진단 전용 페이지와 같은 위계.
   패널 값(너비·상단 시작점·상하좌우 여백·배경)은 전부 ux-common.css 토큰.
   ⛔여기서 px 를 새로 쓰지 말 것 — 네 화면이 같이 어긋난다. */
#paneDiag .ux-content{ background:#fff; }
/* 제목·설명은 좌 패널이 맡는다 → 본문 헤드는 접는다(문구는 좌 패널로 옮겼다) */
#paneDiag #diag15 > .sec-head{ display:none; }
#paneDiag #diag15{ padding-top:0; background:transparent; }
/* 우 콘텐츠 안에서는 자체 컨테이너를 풀고 셸의 기준선을 그대로 쓴다 */
#paneDiag .s5-diag-wrap{
  max-width:none !important; margin:0 !important;
  padding-left:0 !important; padding-right:0 !important;
  /* ★★2026-08-07 사장님 지시 — 「실시간 판정」 카드를 좌 패널로 옮겼다.
     우 콘텐츠에는 체크리스트 한 장만 남으므로 전폭을 쓴다(플레이스홀더 폭 확대 요구). */
  grid-template-columns:1fr;
}

/* ── 판정 카드가 좌 패널 안에 놓일 때 ──────────────────────
   원래는 우 컬럼에서 sticky 였다. 좌 패널 자체가 sticky 라 여기서는 흐름에 맡긴다. */
.ux-panel .s5-res{ position:static; top:auto; margin-top:18px; }
/* 카드가 세로를 많이 쓰므로 패널 하단을 밀어내던 스페이서는 접는다 */
#paneDiag .ux-panel-gap{ display:none; }
#paneDiag .dgp-note{ margin-top:16px; }

/* ══ 판정 카드 다크 톤 (2026-08-07 사장님 지시) ═══════════════════════
   흰 카드가 네이비 패널 위에 그대로 얹혀 "고지서를 붙여 놓은" 느낌이었다.
   → 배경을 걷어내고 패널과 같은 결(반투명 유리 + 얇은 흰 테두리)로 바꾼다.
   ★판정 색은 다크에서 어두운 원색이 안 읽히므로 밝은 계열(--s5d-*)로 따로 둔다.
   ⛔특이도 주의 — 원본이 `.s5-res-in[data-t="ok"] .s5-res-top`(0,3,0) 처럼 잡아 두었다.
     여기서는 `.ux-panel .s5-res-in[data-t] …` 로 한 단계 더 얹어야 덮인다. */
/* ★2026-08-07 2차 — "더 비비드하고 쨍하게" 지시로 채도를 올렸다.
   구값(파스텔) #5FD4A6 / #F0C46A / #F5A06A / #F58B86 → 다크 배경에서 힘이 없었다. */
:root{
  --s5d-ok:#22E6A0; --s5d-warn:#FFC529; --s5d-risk:#FF8A2B; --s5d-red:#FF4D4D;
}
.ux-panel .s5-res-in{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.16);
  border-radius:16px;
  box-shadow:0 18px 44px -30px rgba(2,8,20,.9);
}
.ux-panel .s5-res-in[data-t] .s5-res-top{ background:transparent; padding:20px 20px 17px; }
.ux-panel .s5-res-k{ color:#8FA6C4; letter-spacing:.14em; }
.ux-panel .s5-res-score{ margin-top:9px; }
.ux-panel .s5-res-score .n{ font-size:42px; }
.ux-panel .s5-res-score .d{ font-size:17px; color:#8FA6C4; }
.ux-panel .s5-res-score .u{ font-size:13px; color:#8FA6C4; }
.ux-panel .s5-bar{ margin-top:14px; height:8px; background:rgba(255,255,255,.13); }
.ux-panel .s5-ticks{ margin-top:8px; }
.ux-panel .s5-ticks span{ background:rgba(255,255,255,.07); color:#8FA6C4; padding:4px 0; }
.ux-panel .s5-verdict{
  margin-top:14px; padding:7px 13px; font-size:13.5px;
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); color:#D3E0F2;
}
.ux-panel .s5-res-hl{ margin-top:12px; font-size:17.5px; color:#fff; }
.ux-panel .s5-res-tx{ margin-top:8px; font-size:13.5px; line-height:1.7; color:#9DB3D2; }
.ux-panel .s5-res-body{
  background:transparent; border-top-color:rgba(255,255,255,.12); padding:16px 20px 19px;
}
.ux-panel .s5-res-lb{ color:#8FA6C4; }
.ux-panel .s5-weak{ margin-top:9px; font-size:14.5px; color:#fff; }
.ux-panel .s5-weak span{ color:var(--blue-l); }
.ux-panel .s5-recs{ margin-top:14px; gap:7px; }
.ux-panel .s5-recs a{
  font-size:12.5px; padding:8px 11px;
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#D3E0F2;
}
.ux-panel .s5-recs a:hover{ background:rgba(255,255,255,.17); border-color:rgba(255,255,255,.34); }
.ux-panel .s5-res-cta{ margin-top:16px; gap:8px; }
.ux-panel .s5-res-cta .btn{ font-size:14.5px; padding:12px 18px; }
.ux-panel .s5-res-cta .btn-line{
  background:transparent; border-color:rgba(255,255,255,.28); color:#fff;
}
.ux-panel .s5-res-cta .btn-line:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.45); }
.ux-panel .s5-res-foot{ margin-top:11px; font-size:11.5px; line-height:1.6; color:#7E95B4; }

/* 판정 색 4단계 — 다크용 밝은 계열 */
.ux-panel .s5-res-in[data-t="ok"]{ border-color:rgba(34,230,160,.52); }
.ux-panel .s5-res-in[data-t="ok"] .s5-res-score .n{ color:var(--s5d-ok); }
.ux-panel .s5-res-in[data-t="ok"] .s5-bar i{ background:var(--s5d-ok); }
.ux-panel .s5-res-in[data-t="ok"] .s5-verdict{
  color:var(--s5d-ok); background:rgba(34,230,160,.16); border-color:rgba(34,230,160,.58); }
.ux-panel .s5-res-in[data-t="ok"] .s5-ticks span.on{ background:var(--s5d-ok); color:#032018; }

.ux-panel .s5-res-in[data-t="warn"]{ border-color:rgba(255,197,41,.52); }
.ux-panel .s5-res-in[data-t="warn"] .s5-res-score .n{ color:var(--s5d-warn); }
.ux-panel .s5-res-in[data-t="warn"] .s5-bar i{ background:var(--s5d-warn); }
.ux-panel .s5-res-in[data-t="warn"] .s5-verdict{
  color:var(--s5d-warn); background:rgba(255,197,41,.16); border-color:rgba(255,197,41,.58); }
.ux-panel .s5-res-in[data-t="warn"] .s5-ticks span.on{ background:var(--s5d-warn); color:#2A1D02; }

.ux-panel .s5-res-in[data-t="risk"]{ border-color:rgba(255,138,43,.52); }
.ux-panel .s5-res-in[data-t="risk"] .s5-res-score .n{ color:var(--s5d-risk); }
.ux-panel .s5-res-in[data-t="risk"] .s5-bar i{ background:var(--s5d-risk); }
.ux-panel .s5-res-in[data-t="risk"] .s5-verdict{
  color:var(--s5d-risk); background:rgba(255,138,43,.16); border-color:rgba(255,138,43,.58); }
.ux-panel .s5-res-in[data-t="risk"] .s5-ticks span.on{ background:var(--s5d-risk); color:#2A1203; }

.ux-panel .s5-res-in[data-t="red"]{ border-color:rgba(255,77,77,.52); }
.ux-panel .s5-res-in[data-t="red"] .s5-res-score .n{ color:var(--s5d-red); }
.ux-panel .s5-res-in[data-t="red"] .s5-bar i{ background:var(--s5d-red); }
.ux-panel .s5-res-in[data-t="red"] .s5-verdict{
  color:var(--s5d-red); background:rgba(255,77,77,.16); border-color:rgba(255,77,77,.58); }
.ux-panel .s5-res-in[data-t="red"] .s5-ticks span.on{ background:var(--s5d-red); color:#2A0605; }

/* ★★좌 패널이 스크롤되지 않도록 — 세로 예산이 곧 지면이다(사장님 지시).
   패널은 100vh 고정이라 내용이 넘치면 내부 스크롤이 생긴다.
   화면이 낮아질수록 '결론에서 먼 것'부터 단계적으로 접는다.
   순서 = 보조 설명 → 각주 → 칩·안내문 → 타이포 축소. 판정 점수·등급·CTA 는 끝까지 남긴다.
   실측(1946×1000): 손대기 전 1204 → 다크 톤 1082 → 아래 규칙 적용 후 977. */
/* ①연속 축소 — 카드 여백·타이포를 화면 높이(vh)에 물린다.
   ★임계값 몇 개로 맞추면 그 사이 폭(예: 900px)에서 다시 넘친다. 실제로 겪었다. */
#paneDiag .ux-panel-title{ font-size:clamp(28px, min(3.1vw, 4.7vh), 46px); }
#paneDiag .ux-panel-sub{ font-size:clamp(12.5px, 1.5vh, 14.5px); line-height:1.7; }
.ux-panel .s5-res{ margin-top:clamp(10px, 1.8vh, 18px); }
.ux-panel .s5-res-in[data-t] .s5-res-top{
  padding:clamp(13px, 2vh, 20px) 20px clamp(11px, 1.7vh, 17px);
}
.ux-panel .s5-res-score{ margin-top:clamp(6px, 1vh, 9px); }
.ux-panel .s5-res-score .n{ font-size:clamp(30px, 4.2vh, 42px); }
.ux-panel .s5-bar{ margin-top:clamp(9px, 1.5vh, 14px); }
.ux-panel .s5-verdict{ margin-top:clamp(9px, 1.5vh, 14px); }
.ux-panel .s5-res-hl{ margin-top:clamp(8px, 1.3vh, 12px); font-size:clamp(15px, 1.85vh, 17.5px); }
.ux-panel .s5-res-body{ padding:clamp(11px, 1.7vh, 16px) 20px clamp(13px, 2vh, 19px); }
.ux-panel .s5-weak{ margin-top:clamp(6px, 1vh, 9px); }
.ux-panel .s5-recs{ margin-top:clamp(9px, 1.5vh, 14px); }
.ux-panel .s5-res-cta{ margin-top:clamp(10px, 1.7vh, 16px); }
.ux-panel .s5-res-cta .btn{ padding:clamp(9px, 1.4vh, 12px) 18px; }

/* ②그래도 모자라면 '결론에서 먼 것'부터 접는다.
   순서 = 보조 설명 → 각주 → 칩 → 안내문 → 구간 눈금.
   판정 점수·등급 배지·헤드라인·CTA 는 어떤 높이에서도 남긴다. */
@media (max-height: 1040px){
  .ux-panel .s5-res-tx{ display:none; }          /* 판정 설명 3줄 — 헤드라인이 결론을 담는다 */
  .ux-panel .s5-res-foot{ display:none; }        /* CTA 아래 각주 */
  #paneDiag .dgp-note{ margin-top:12px; font-size:12px; line-height:1.55; }
}
@media (max-height: 980px){
  #paneDiag .dgp-meta{ display:none; }           /* 15문항·약 2분 칩 — 우측 제목이 같은 말을 한다 */
}
@media (max-height: 860px){
  #paneDiag .dgp-note{ display:none; }
}
@media (max-height: 760px){
  .ux-panel .s5-ticks{ display:none; }           /* 구간 눈금 — 등급 배지가 같은 정보를 준다 */
  #paneDiag .ux-panel-sub{ display:none; }
}

@media(min-width:1241px){
  /* 탭 모듈이 앉는 자리만큼 우 콘텐츠를 내린다 — 좌 패널은 --panel-pad-t 그대로 */
  #paneDiag .ux-content{ padding-top:calc(var(--panel-pad-t) + var(--ev-tabspace,0px)); }
}
@media(max-width:1240px){
  /* 좌 패널이 위로 누우면 판정 카드도 본문 흐름 안에서 전폭이 된다 */
  .ux-panel .s5-res{ margin-top:22px; }
}

/* 좌 패널 하단 — 진단 화면 전용 메타(견적계산기의 .trust 자리에 대응) */
.ux-panel .dgp-meta{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.ux-panel .dgp-meta span{
  font-size:12.5px; font-weight:500; color:#C9D8EE;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:999px; padding:6px 13px;
}
.ux-panel .dgp-note{
  margin-top:auto; padding-top:26px;
  font-size:12.5px; line-height:1.7; color:#7E93B5;
  border-top:1px solid rgba(255,255,255,.13);
}