/* 고민 방사형 지도 · 고민 기준 제품 비교 · 셀럽 발언(검토용). 왼쪽 세로띠 없음.
   지도: 고른 불편이 가운데, 성분/피부 상태/제품 확인 가지가 퍼진다. SVG 선(viewBox 0~100, 버튼과 같은 % 좌표) 위에 실제 버튼 점.
   퍼지는 연출: 새 선은 순서대로(--d 지연) 그려지고, 점이 나타난 뒤 확인 표시(✓ / …)가 붙는다.
   움직임 줄이기(prefers-reduced-motion 또는 data-motion="reduce")에서는 효과만 끄고 내용·조작·확인 표시는 같다. */
.cn__lead, .cn__empty, .cp__hint, .cp__empty, .cb__empty{ font-size:14.5px; line-height:1.65; color:var(--ink-soft); margin:4px 0 14px; word-break:keep-all; }
.cm__picks{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.cm__pick{ font:inherit; font-size:14px; font-weight:800; min-height:44px; padding:8px 14px; border-radius:999px; border:1.5px solid var(--line);
  background:#fff; color:var(--ink); cursor:pointer; word-break:keep-all; }
.cm__pick[aria-pressed="true"]{ border-color:#8f84bf; background:#f5f2ff; }
.cm__pick[aria-current="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.cm__pick:focus-visible{ outline:3px solid #8f84bf; outline-offset:2px; }
/* 좁은 카드 안(280~320px)에서도 점·이름표가 겹치지 않도록 최소 높이를 둔다(측정: qa/geometry-check.cjs). 넓은 화면은 10:12 비율 그대로 */
.cm{ position:relative; width:100%; max-width:420px; aspect-ratio:10 / 12; min-height:500px; margin:0 auto 12px;
  border:1px solid #ece9f3; border-radius:20px; background:radial-gradient(circle at 50% 46%, #f6f2ff 0, #fff 62%); overflow:hidden; }
.cm__svg{ position:absolute; inset:0; width:100%; height:100%; }
.cm__edge{ stroke:#b9b1d6; stroke-width:1.6; vector-effect:non-scaling-stroke; stroke-linecap:round; }
.cm__edge.is-new{ stroke-dasharray:1; stroke-dashoffset:1; animation:cm-draw .45s ease-out var(--d, 0ms) both; }
.cm__nodes{ position:absolute; inset:0; }
.cm__empty{ position:absolute; left:50%; top:46%; transform:translate(-50%, -50%); margin:0; font-size:13.5px; color:#8a8a9c; text-align:center; width:80%; word-break:keep-all; }
.cm__empty:empty{ display:none; }
/* 점 중심이 좌표(선이 점에 닿는다): 위쪽 여백 4px + 점 반지름만큼 올린다 */
.cm__node{ --ty:-11px; position:absolute; transform:translate(-50%, var(--ty)); display:inline-flex; flex-direction:column; align-items:center; gap:3px;
  min-width:44px; min-height:44px; padding:4px 2px; margin:0; border:0; background:transparent; font:inherit; color:var(--ink); cursor:pointer; }
.cm__dot{ width:14px; height:14px; border-radius:50%; background:#fff; border:2.5px solid #8f84bf; box-sizing:border-box; }
.cm__node--center{ --ty:-15px; }
.cm__node--branch{ --ty:-13px; }
.cm__node--center .cm__dot{ width:22px; height:22px; background:var(--ink); border-color:var(--ink); box-shadow:0 0 0 6px rgba(143,132,191,.18); }
.cm__node--center .cm__lab{ font-size:14px; padding:5px 12px; }
.cm__node--branch .cm__dot{ width:18px; height:18px; }
.cm__node--ing .cm__dot{ border-color:#3f9a72; }
.cm__node--skin .cm__dot{ border-color:#8f84bf; }
.cm__node--prod .cm__dot{ border-color:#c78a3a; }
.cm__node[data-check="wait"] .cm__dot{ border-style:dashed; border-color:#a9a3bd; }
.cm__node--branch[aria-expanded="true"] .cm__dot{ background:currentColor; }
.cm__node[aria-current="true"] .cm__lab{ background:var(--ink); color:#fff; border-color:var(--ink); }
.cm__lab{ display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:800; line-height:1.25; padding:3px 8px; border-radius:999px;
  background:#fff; border:1px solid #e6e3ed; white-space:nowrap; }
.cm__node[data-check="wait"] .cm__lab{ color:#8a8a9c; font-weight:700; }
.cm__chk{ display:inline-grid; place-items:center; min-width:15px; height:15px; border-radius:50%; font-size:10px; font-weight:900; line-height:1; }
.cm__chk--ok{ background:#3f9a72; color:#fff; }
.cm__chkI{ width:10px; height:10px; display:block; }
.cm__chk--wait{ background:#ecebf2; color:#707684; }
.cm__node[aria-current="true"] .cm__chk--wait{ background:#fff; }
.cm__node:focus-visible{ outline:none; }
.cm__node:focus-visible .cm__lab{ outline:3px solid #8f84bf; outline-offset:2px; }
.cm__node.is-new{ animation:cm-pop .32s ease-out var(--d, 0ms) both; }
.cm__node.is-new .cm__chk{ animation:cm-check .25s ease-out calc(var(--d, 0ms) + 380ms) both; }
@keyframes cm-draw{ to{ stroke-dashoffset:0; } }
@keyframes cm-pop{ from{ opacity:0; transform:translate(-50%, var(--ty)) scale(.5); } to{ opacity:1; transform:translate(-50%, var(--ty)) scale(1); } }
@keyframes cm-check{ from{ opacity:0; transform:scale(.3); } to{ opacity:1; transform:scale(1); } }
.cm[data-motion="reduce"] .cm__edge.is-new{ animation:none; stroke-dasharray:none; stroke-dashoffset:0; }
.cm[data-motion="reduce"] .cm__node.is-new{ animation:none; }
.cm[data-motion="reduce"] .cm__node.is-new .cm__chk{ animation:none; }
@media (prefers-reduced-motion: reduce){
  .cm__edge.is-new{ animation:none; stroke-dasharray:none; stroke-dashoffset:0; }
  .cm__node.is-new{ animation:none; }
  .cm__node.is-new .cm__chk{ animation:none; }
}
/* ── 떠 있는 점 지도(cm--float) ──
   처음부터 모든 점이 떠 있다(선 없음). 불편 점을 누르면 이미 떠 있는 점들로 선이 차례로 그려진다(--d 지연).
   부유는 js 의 requestAnimationFrame 하나가 점 translate 속성(px)과 선 끝 좌표를 같은 시간값으로 함께 옮긴다(CSS 애니메이션으로 따로 움직이지 않는다 → 선이 점에서 떨어지지 않는다).
   점 중심이 좌표: --ty = -(위 여백 4 + 점 반지름). 불편 18 → -13 · 묶음 20 → -14 · 개별 성분 14 → -11 */
.cm--float{ aspect-ratio:auto; background:radial-gradient(circle at 50% 40%, #f6f2ff 0, #fff 70%); }
.cm--float .cm__node{ transition:opacity .3s ease; }
.cm__node--def{ --ty:-13px; }
.cm__node--def .cm__dot{ width:18px; height:18px; border-color:#5b4fb0; }
.cm__node--def[aria-pressed="true"] .cm__dot{ background:#5b4fb0; box-shadow:0 0 0 5px rgba(91,79,176,.16); }
.cm__node--hub{ --ty:-14px; }
.cm__node--hub .cm__dot{ width:20px; height:20px; }
.cm__node--hub .cm__lab{ font-size:13.5px; }
.cm__node--ingr{ --ty:-11px; }
.cm__node--ingr .cm__dot{ border-color:#3f9a72; }
.cm__node--ingr[data-node="i:pending"] .cm__dot{ border-style:dashed; border-color:#a9a3bd; }
.cm__node[data-state="off"] .cm__lab{ color:#b3b1c2; border-color:#efedf4; } /* 이어지지 않은 점: 이름표 배경은 불투명하게 두어 지나가는 선이 글자 위로 비치지 않게 한다 */
.cm__node[data-state="off"] .cm__dot{ border-color:#d9d5e8; }
.cm__node[data-state="near"] .cm__dot{ background:#efeaff; }
.cm__node[data-state="on"] .cm__dot{ background:currentColor; }
.cm__node--hub.cm__node--ing[data-state="on"] .cm__dot, .cm__node--ingr[data-state="on"] .cm__dot{ background:#3f9a72; }
.cm__node--prod[data-state="on"] .cm__dot{ background:#c78a3a; }
.cm__node--ingr[data-node="i:pending"][data-state="on"] .cm__dot{ background:#ecebf2; }
.cm__edge--near{ stroke:#d6d0ea; stroke-width:1.3; }
.cm__edge--on{ stroke:#8f84bf; stroke-width:2; }
/* 선이 도착하면 점이 켜진다(--d = 그 선의 지연 + 0.3s). 움직임 줄이기에서는 바로 켜진 상태 */
.cm__node.is-lit .cm__dot{ animation:cm-lit .3s ease-out var(--d, 0ms) both; }
.cm__node.is-lit .cm__chk{ animation:cm-check .25s ease-out var(--d, 0ms) both; }
@keyframes cm-lit{ from{ background:#fff; transform:scale(.7); } }
.cm[data-motion="reduce"] .cm__node.is-lit .cm__dot, .cm[data-motion="reduce"] .cm__node.is-lit .cm__chk{ animation:none; }
@media (prefers-reduced-motion: reduce){ .cm__node.is-lit .cm__dot, .cm__node.is-lit .cm__chk{ animation:none; } }
/* 고민 기준으로 제품 보기: 고른 불편 → 비교 기준 → 제품 순서로 이어지는 흐름. 고른 불편이 바뀔 때만 차례로 나타난다 */
.cp__flow{ display:grid; justify-items:stretch; }
.cp__step{ border:1px solid #e6e3ed; border-radius:16px; background:#fff; padding:10px 14px; }
.cp__step .cp__sel, .cp__step .cp__crit{ margin:2px 0; }
.cp__step--prod .cp__empty{ margin:4px 0 2px; }
.cp__none{ font-size:13px; color:#8a8a9c; }
.cp__pipe{ justify-self:center; width:2px; height:22px; background:#b9b1d6; border-radius:2px; transform-origin:top; }
.cp__step.is-new{ animation:cp-in .36s ease-out var(--d, 0ms) both; }
.cp__pipe.is-new{ animation:cp-grow .3s ease-out var(--d, 0ms) both; }
@keyframes cp-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@keyframes cp-grow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.cp__body[data-motion="reduce"] .cp__step.is-new, .cp__body[data-motion="reduce"] .cp__pipe.is-new{ animation:none; }
@media (prefers-reduced-motion: reduce){
  .cm--float .cm__node{ transition:none; }
  .cp__step.is-new, .cp__pipe.is-new{ animation:none; }
}
.cm__jump{ display:inline-block; margin-top:10px; font-size:13.5px; font-weight:800; color:#5b4fb0; text-decoration:underline; text-underline-offset:2px; }
.cm__detail{ border:1px solid #e6e3ed; border-radius:16px; background:#fff; padding:14px 16px; min-height:64px; }
.cm__hint{ font-size:13.5px; color:#8a8a9c; margin:0; }
.cm__dk{ font-size:12px; font-weight:800; color:#707684; margin:0 0 2px; }
.cm__dt{ font-size:15.5px; font-weight:800; color:var(--ink); margin:0 0 8px; }
.cm__dx{ font-size:14.5px; line-height:1.7; color:var(--ink); margin:0; word-break:keep-all; }
.cm__ings{ list-style:none; margin:0 0 8px; padding:0; display:grid; gap:6px; }
.cm__ings li{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cm__src{ font-size:12.5px; color:#5b4fb0; text-decoration:underline; text-underline-offset:2px; word-break:break-all; }
.cn__ex{ font-size:12.5px; font-weight:700; color:#8a8a9c; white-space:nowrap; }
.cn__seen{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 8px; }
.cp__selLab{ font-size:12px; font-weight:800; color:#707684; margin-right:2px; }
.cn__tag{ display:inline-block; font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:999px; background:#f5f2ff; color:var(--ink); }
.cn__tag--role{ background:#eef6f2; }
.cn__ing{ display:inline-block; font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:#fff; }
.cn__note, .cp__src{ font-size:12px; line-height:1.55; color:#8a8a9c; margin:8px 0 0; word-break:keep-all; }
.cn__pending{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin:6px 0 0; word-break:keep-all; }
.cp__sel, .cp__crit{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0 10px; }
.cp__list{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:10px; }
.cp__item{ border:1px solid #e6e3ed; border-radius:16px; background:#fff; padding:14px 16px; }
.cp__name{ display:block; font-size:15px; font-weight:800; color:var(--ink); word-break:keep-all; }
.cp__size{ font-size:12.5px; color:#8a8a9c; }
.cp__row{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; margin:6px 0 0; }
.cp__price{ font-size:12.5px; color:var(--ink-soft); margin:8px 0 0; word-break:keep-all; }
.cb__me{ margin:0 0 14px; text-align:center; }
.cb__photo{ width:120px; height:120px; object-fit:cover; border-radius:50%; border:1px solid var(--line); }
.cb__me figcaption{ font-size:12px; color:#8a8a9c; margin-top:6px; word-break:keep-all; }
.cb__list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.cb__item{ border:1px solid #e6e3ed; border-radius:16px; background:#fff; padding:14px 16px; }
.cb__name{ display:block; font-size:16px; font-weight:800; color:var(--ink); }
.cb__said{ font-size:14px; line-height:1.65; color:var(--ink); margin:6px 0 4px; word-break:keep-all; }
.cb__src{ font-size:12px; color:#8a8a9c; margin:0; }
/* ── v8 얼굴 점구름 지도(fg) · 제품추천 조건 흐름 — 2026-10-24 통합 ──
   지도 영역은 결과지 라벤더·흰 카드 테마(어두운 바탕 없음), 점·선·라벨은 밝은 바탕에서 읽히는 진한 색(concern-network.js 팔레트와 짝). 캔버스는 세로 스와이프를 페이지 스크롤에 양보(touch-action:pan-y) */
.fg{ margin:0 0 4px; }
.fg__area{ position:relative; width:100%; height:440px; border-radius:20px; overflow:hidden;
  border:1px solid #ece9f3; background:radial-gradient(ellipse at 50% 46%, #f6f2ff 0%, #fbfaff 52%, #ffffff 82%); }
.fg__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y; cursor:grab; }
.fg__tip{ position:absolute; z-index:3; max-width:170px; padding:7px 10px; border-radius:10px; background:rgba(255,255,255,.97); border:1px solid #ded8f2; box-shadow:0 6px 18px -10px rgba(91,79,176,.45);
  color:var(--ink); font-size:13px; font-weight:700; line-height:1.35; pointer-events:none; word-break:keep-all; }
.fg__tip small{ display:block; margin-top:2px; font-size:11.5px; font-weight:500; color:#707684; }
.fg__tools button{ font:inherit; border:0; cursor:pointer; color:#5b4fb0; background:transparent; }
.fg__tools{ position:absolute; top:10px; right:10px; z-index:2; display:flex; gap:4px; }
.fg__tools button{ width:36px; height:36px; border-radius:50%; background:#fff; border:1px solid #e6e3ed; font-size:16px; line-height:1; }
.fg__tools button:focus-visible{ outline:3px solid #8f84bf; outline-offset:2px; }
.fg__hint{ position:absolute; left:12px; bottom:10px; margin:0; font-size:11.5px; color:#8a8a9c; pointer-events:none; }
.fg__status{ margin:10px 2px 8px; font-size:13.5px; font-weight:700; color:var(--ink-soft); }
.fg__choices{ display:flex; flex-wrap:wrap; gap:8px; }
.fg__choice, .fg__reset{ font:inherit; min-height:44px; padding:8px 14px; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--ink);
  font-size:14px; font-weight:800; cursor:pointer; word-break:keep-all; }
.fg__choice[aria-pressed="true"]{ background:#7C5CE6; border-color:#7C5CE6; color:#fff; }
.fg__reset{ color:#707684; font-weight:700; }
.fg__choice:focus-visible, .fg__reset:focus-visible{ outline:3px solid #8f84bf; outline-offset:2px; }
.cp__lead{ font-size:16px; font-weight:800; line-height:1.5; color:var(--ink); margin:2px 0 14px; word-break:keep-all; }
.cn__tag--type{ background:#ece9f7; letter-spacing:.04em; }
.cn__tag--ing{ text-decoration:none; background:#eef6f2; border:1px solid transparent; }
.cn__tag--ing.is-shared{ background:#e9f4d2; border-color:#b9d48a; }
.cn__own{ display:inline-block; margin-left:6px; font-size:11.5px; font-weight:700; color:#5d7a3a; }
.cp__common{ font-size:12.5px; color:#5d7a3a; font-weight:700; margin:2px 0 0; }
@media (max-width:420px){ .fg__area{ height:420px; } }
@media (min-width:600px){ .fg__area{ height:520px; } }
@media (prefers-reduced-motion: reduce){ .fg__canvas{ cursor:grab; } }
@media (max-width:420px){
  .cm__lab{ font-size:12px; padding:3px 7px; }
  .cm__detail, .cp__item, .cb__item{ padding:12px 14px; }
  .cp__row{ flex-direction:column; gap:2px; }
}

/* ===== 2026-10-24 R5: 이어진 성분 버튼 · 성분 설명 ===== */
.fg__ings{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.fg__ings:empty{ display:none; }
.fg__ing{ font:inherit; font-size:13.5px; font-weight:700; line-height:1.3; padding:8px 13px; border-radius:999px; border:1.5px solid #bfe0cf; background:#fff; color:#2f6e51; cursor:pointer; }
.fg__ing b{ font-weight:900; }
.fg__ing[aria-pressed="true"]{ background:#3f9a72; border-color:#3f9a72; color:#fff; }
.fg__ing--pending{ border-color:#d4d4dc; color:#6f6f80; }
.fg__ing--pending[aria-pressed="true"]{ background:#6f6f80; border-color:#6f6f80; color:#fff; }
.fg__ing:focus-visible, .fg__dClose:focus-visible, .fg__detail:focus-visible{ outline:3px solid #8f84bf; outline-offset:2px; }
.fg__detail{ margin-top:12px; border:1px solid #e3e1ec; border-radius:16px; background:#fff; padding:14px 16px; text-align:left; }
.fg__dName{ display:block; font-size:16px; font-weight:900; color:#1b1b2b; margin-bottom:6px; }
.fg__dRow{ font-size:14px; line-height:1.6; color:#353943; margin:2px 0; word-break:keep-all; }
.fg__dRow span{ display:inline-block; min-width:78px; margin-right:6px; color:#707684; font-weight:700; }
.fg__dNote{ margin-top:8px; font-size:12.5px; line-height:1.55; color:#707684; word-break:keep-all; }
.fg__dClose{ margin-top:10px; font:inherit; font-size:13px; font-weight:700; color:#45475f; background:#fff; border:1px solid #d9d7e6; border-radius:999px; padding:6px 14px; cursor:pointer; }
.cp__fitNote{ font-size:12.5px; line-height:1.6; color:#707684; margin:10px 0 0; word-break:keep-all; }

/* ===== 2026-10-25 R6: 타입·불편 기준 · 제품별 충족 표시 ===== */
.cp__basis{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0 10px; }
.cp__basisTag{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px; line-height:1.35; }
.cp__from{ font-size:11.5px; font-weight:700; color:#707684; }
.cp__cover{ margin:4px 0 2px; font-size:12.5px; font-weight:800; color:#8a5a12; }
.cp__row.is-unmet span:last-child{ color:#8a8a9c; }
.cp__row.is-met span:last-child{ color:#2f6e51; font-weight:700; }

/* ===== 2026-10-25 R5·R6 근거 공백 표시 ===== */
.cp__gap{ margin:2px 0 10px; font-size:12.5px; line-height:1.55; color:#707684; word-break:keep-all; }

/* ===== 2026-10-25 phase2 · 제품 카드 ‘사러 가기’(P2) — 같은 제품의 기존 판매 주소. 출처·확인일 바닥글은 화면에서 뺐다(자료에는 그대로) ===== */
.cp__buy{ display:inline-block; margin:12px 0 0; padding:10px 18px; border-radius:999px; background:var(--type-ink,#411cba); color:#fff;
  font-size:14px; font-weight:800; text-decoration:none; letter-spacing:-.2px; }
.cp__buy:hover{ background:color-mix(in srgb, var(--type-ink,#411cba) 86%, #000); }
.cp__buy:focus-visible{ outline:3px solid #7C5CE6; outline-offset:3px; }

/* ===== 2026-10-26 phase3 · AI 맞춤형 제품 추천 카드: 순위 · 공식 사진 · 가격 · 기준 성분 막대(효과 점수 아님) ===== */
.cp__head{ display:flex; align-items:center; gap:12px; }
.cp__rank{ flex:0 0 auto; min-width:40px; padding:4px 8px; border-radius:999px; background:var(--type-ink,#411cba); color:#fff; font-size:13px; font-weight:900; text-align:center; }
.cp__thumb{ flex:0 0 auto; width:64px; height:64px; object-fit:contain; border-radius:12px; background:#fff; border:1px solid #ececf2; }
.cp__id{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.cp__amount{ font-size:14.5px; font-weight:900; color:var(--ink); }
.cp__item--own{ border-color:color-mix(in srgb, #7C5CE6 40%, #fff); }
.cp__barsLab{ margin:10px 0 0; font-size:12px; font-weight:800; color:#56566a; }
.cp__item .cp__row{ flex-wrap:wrap; align-items:center; }
.cp__row .cp__bar{ order:3; flex:1 1 120px; height:6px; border-radius:999px; background:#ececf2; overflow:hidden; }
.cp__row .cp__bar i{ display:block; height:100%; background:var(--type-ink,#411cba); }
.cp__row .cp__barN{ order:4; flex:0 0 auto; font-size:12px; font-weight:700; color:#56566a; }

/* ===== 2026-10-26 phase5 · 제품 카드 기준 줄 안정 격자(358px 막대 120px 세로 늘어남 수정) =====
   원인: ≤420px 의 .cp__row{flex-direction:column} 안에서 phase3 막대의 flex-basis 120px 가 세로 높이가 됐다. 데스크톱은 줄바꿈 따라 막대 위치가 달랐다.
   기준 이름 · 들어 있는 성분 이름은 각각 한 줄 전체, 마지막 줄에 6px 막대(전체 폭) + 개수. 상속된 flex 방향·basis·order·높이를 되돌린다. 글자·개수·자료 무변경 */
.cp__item .cp__row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:center; flex-direction:row; flex-wrap:nowrap; }
.cp__item .cp__row > span:not(.cp__bar):not(.cp__barN){ grid-column:1 / -1; min-width:0; overflow-wrap:anywhere; word-break:keep-all; }
.cp__item .cp__row > .cp__bar{ grid-column:1; order:0; flex:none; display:block; width:100%; height:6px; min-width:0; align-self:center; }
.cp__item .cp__row > span.cp__barN{ grid-column:2; order:0; flex:none; color:#56566a; font-weight:700; }
/* 원래 충족/미충족 색은 성분 이름 글자(두 번째 칸)에 — phase3 에서 개수 칸으로 옮겨 갔던 것을 되돌린다 */
.cp__item .cp__row.is-met > span:nth-child(2){ color:#2f6e51; font-weight:700; }
.cp__item .cp__row.is-unmet > span:nth-child(2){ color:#8a8a9c; font-weight:400; }

/* ===== 2026-10-28 · 바우만 예시 섬네일(최종 이미지 전 임시): 실제 제품 사진 아님을 '예시' 배지로 표시. 기존 카드 배치·크기 무변경 ===== */
.cp__thumbWrap{ position:relative; flex:0 0 auto; display:inline-block; line-height:0; }
.cp__exampleBadge{ position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); padding:2px 7px; border-radius:999px; background:#411cba; color:#fff; font-size:11px; font-weight:900; line-height:1.4; letter-spacing:.02em; white-space:nowrap; box-shadow:0 1px 3px rgba(0,0,0,.18); }

/* 2026-10-30: 직접 선택 상황과 관찰 출처, 성분 역할 표 */
.fg__intro{font-size:14px;line-height:1.65;margin:0 0 14px;word-break:keep-all;color:#454052}
.fg__observed{display:block;font-size:10px;font-weight:600;color:#6c5c94;margin-top:3px}
.cp__ability{margin-top:16px;overflow-x:auto}
.cp__ability table{border-collapse:collapse;width:100%;font-size:12px;line-height:1.5;table-layout:fixed}
.cp__ability caption{text-align:left;font-size:13px;font-weight:800;padding-bottom:8px;color:#493a76}
.cp__ability th,.cp__ability td{padding:8px 7px;border:1px solid #e8e3f0;vertical-align:top;word-break:keep-all;overflow-wrap:anywhere}
.cp__ability thead th{background:#f4f0fc}.cp__ability tbody th{font-weight:700;text-align:left;width:28%}
.cp__ability>p{font-size:11px;line-height:1.6;color:#76707e;margin:8px 0 0}

/* ===== 2026-11-03 사용자 요청 · 제품 카드 배치: 섬네일 약 3배(64→최대 192px, 실제 그림을 늘려 보이는 contain) · 그 아래 제품명·용량·가격 · 오른쪽 능력표 =====
   데스크톱: [192px | minmax(0,1fr)] 두 칸. 좁은 화면(≤560px): 표를 좁은 오른쪽 칸에 가두지 않고 같은 카드 아래 전체 폭으로. 순위 배지는 그 위에 따로.
   표 내용·추천 순서·제품 ID·가격 출처·계산 무변경, 섬네일·표 중복 출력 없음 */
.cp__item .cp__rank{ display:inline-block; margin:0 0 10px; }
.cp__item .cp__grid{ display:grid; grid-template-columns:192px minmax(0,1fr); gap:16px; align-items:start; }
.cp__item .cp__grid .cp__media{ display:flex; flex-direction:column; align-items:stretch; gap:10px; min-width:0; }
.cp__item .cp__grid .cp__thumb{ width:100%; max-width:192px; height:auto; aspect-ratio:1/1; object-fit:contain; border-radius:14px; }
.cp__item .cp__grid .cp__thumbWrap{ display:block; width:100%; max-width:192px; }
.cp__item .cp__grid .cp__id{ gap:3px; }
.cp__item .cp__grid .cp__name{ font-size:14.5px; line-height:1.4; word-break:keep-all; overflow-wrap:anywhere; }
.cp__item .cp__grid .cp__ability{ margin-top:0; min-width:0; }
.cp__order{ margin:2px 0 10px; font-size:12.5px; line-height:1.55; color:#56566a; word-break:keep-all; }
.cp__order b{ color:var(--ink,#1b1b2b); margin-right:6px; }
.cp__order--short{ margin-top:-6px; color:#707684; }
/* ===== 2026-11-04 · v6 피부 단면 일러스트(내 피부 특징 4칸): 정사각 원본을 칸 폭에 맞춰 잘림 없이(contain) ===== */
.sci-cell .sci-axisimg{ display:block; width:100%; max-width:220px; height:auto; aspect-ratio:1 / 1; object-fit:contain; margin:0 auto; border-radius:12px; }
/* v6 제품 원본(정사각)도 섬네일 칸 안에서 잘림 없이 */
.cp__item .cp__grid .cp__thumb--render{ object-fit:contain; background:#fff; }

/* ===== 2026-11-04 · 제품 카드: 왼쪽 위 섬네일 · 오른쪽 위 능력치 참고 틀(점수 없음, 빈 격자) · 아래 이유+능력표(카드 전체 폭) =====
   능력치 틀에는 채운 도형·점·수치를 그리지 않는다(완제품 평가 자료 없음). 표·자료·순서 무변경 */
.cp__item .cp__grid{ grid-template-columns:minmax(120px,192px) minmax(0,1fr); }
.cp__radar{ min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; }
.cp__radarH{ margin:0 0 2px; font-size:13px; font-weight:800; color:#493a76; }
.cp__radarH span{ margin-left:4px; padding:1px 7px; border-radius:999px; background:#f1eff6; color:#707684; font-size:11px; font-weight:700; }
.cp__radarSvg{ width:100%; max-width:200px; height:auto; display:block; overflow:hidden; }
/* 축 번호는 viewBox 안(반지름 84, 여백 16)에만, 긴 역할 이름은 아래 일반 목록에서 줄바꿈 */
.cp__rnum{ font-size:12px; font-weight:800; fill:#56566a; }
.cp__rnum.is-none{ fill:#a3a1b2; }
.cp__raxesH{ margin:4px 0 2px; font-size:11.5px; font-weight:700; color:#707684; }
.cp__raxes{ margin:0; padding-left:1.5em; text-align:left; font-size:12px; line-height:1.55; color:#454052; width:100%; max-width:260px; word-break:keep-all; overflow-wrap:anywhere; }
.cp__raxes li.is-none{ color:#a3a1b2; }
.cp__rgrid{ fill:none; stroke:#ddd8ea; stroke-width:1; stroke-dasharray:3 3; vector-effect:non-scaling-stroke; }
.cp__rlab{ font-size:10.5px; font-weight:700; fill:#56566a; }
.cp__rlab.is-none{ fill:#a3a1b2; font-weight:600; }
.cp__radarScore{ margin:2px 0 0; font-size:12.5px; line-height:1.5; color:#56566a; word-break:keep-all; }
.cp__radarScore b{ margin-right:6px; color:var(--ink,#1b1b2b); }
.cp__radarNote{ margin:2px 0 0; font-size:11px; line-height:1.5; color:#8a8a9c; word-break:keep-all; }
.cp__combo{ margin:2px 0 10px; font-size:13px; line-height:1.6; font-weight:700; color:#493a76; word-break:keep-all; }
.cp__why{ margin:0 0 10px; font-size:12.5px; line-height:1.65; color:#454052; word-break:keep-all; overflow-wrap:anywhere; }
.cp__why b{ margin-right:6px; color:var(--ink,#1b1b2b); }
/* 선택 직후 확인 상태(로컬 비교 · AI 분석 아님). 움직임 줄이기에서는 점 깜빡임 없음 */
.cp__loading{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:72px; padding:14px; border:1px dashed #d9d5e8; border-radius:16px;
  background:#fbfaff; font-size:14px; font-weight:700; color:#56566a; word-break:keep-all; }
.cp__loading::before{ content:""; width:10px; height:10px; border-radius:50%; background:#8f84bf; animation:cp-pulse 1s ease-in-out infinite; }
@keyframes cp-pulse{ 0%, 100%{ opacity:.25; } 50%{ opacity:1; } }
.cp__body[data-motion="reduce"] .cp__loading::before{ animation:none; opacity:.7; }
@media (prefers-reduced-motion: reduce){ .cp__loading::before{ animation:none; opacity:.7; } }
@media (max-width:560px){
  .cp__item .cp__grid{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .cp__radarSvg{ max-width:200px; }
  .cp__item .cp__grid .cp__media{ align-items:center; text-align:center; }
  .cp__item .cp__grid .cp__thumb, .cp__item .cp__grid .cp__thumbWrap{ width:min(192px, 100%); }
  .cp__item .cp__grid .cp__id{ align-items:center; }
}

/* ===== 2026-11-04 재기획 · 결과지 3·4·5번 + 제품 '성분별 효과' + 퍼스널컬러 제품 칸 ===== */
/* 3번 종합평가 흐름(타입 종합 → 관리가 필요한 이유 → 타입별 순서 차이 → 정밀 분석 연결) */
.syn__journey{ display:grid; gap:10px; }
.syn__jp{ margin:0; padding:12px 14px; border-radius:14px; background:#fbfaff; border:1px solid #ece9f3; font-size:14.5px; line-height:1.7; color:#353943; word-break:keep-all; }
.syn__jk{ display:block; margin-bottom:4px; font-size:12.5px; font-weight:800; color:#5b4fb0; }
.syn__jp--next{ background:#f5f2ff; border-color:#ddd5f7; }
/* 4번 관리 우선순위: 큰 카드 흐름도 */
.care__flow{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:0; }
.care__fs{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1.5px solid #e1dcf3; border-radius:16px; background:#fff; }
.care__fn{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--type-ink,#411cba); color:#fff; font-size:15px; font-weight:900; }
.care__fb{ min-width:0; }
.care__fp{ display:block; font-size:12px; font-weight:800; color:#707684; }
.care__ft{ display:block; margin:2px 0 4px; font-size:16.5px; font-weight:900; color:var(--ink,#1b1b2b); word-break:keep-all; }
.care__fw{ margin:0; font-size:13.5px; line-height:1.65; color:#454052; word-break:keep-all; }
.care__farrow{ text-align:center; font-size:18px; line-height:1; color:#8f84bf; padding:6px 0; }
/* 5번 정밀 분석 독립 상자 */
.result__analysis{ border:1.5px solid #e1dcf3; }
/* 제품 카드 오른쪽 위: 성분별 효과(제품별, 점수 없음) */
.cp__effect{ min-width:0; padding:12px 14px; border:1px solid #ece9f3; border-radius:14px; background:#fbfaff; }
.cp__effectH{ margin:0 0 8px; font-size:13.5px; font-weight:900; color:#493a76; }
.cp__effList{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.cp__eff{ display:grid; gap:2px; padding:8px 10px; border-radius:10px; background:#fff; border:1px solid #eeeaf6; }
.cp__effK{ font-size:14px; font-weight:800; color:var(--ink,#1b1b2b); }
.cp__effS{ font-size:12px; font-weight:700; color:#5b4fb0; word-break:keep-all; }
.cp__effI{ font-size:12px; color:#56566a; word-break:keep-all; overflow-wrap:anywhere; }
.cp__effNone{ margin:0; font-size:12.5px; line-height:1.6; color:#707684; word-break:keep-all; }
/* 퍼스널컬러 제품 칸: 스킨케어와 비슷한 짧은 카드 · 확인 중 상태 구분 */
.pcs__ex{ margin-left:4px; padding:1px 7px; border-radius:999px; background:#f1eff6; color:#707684; font-size:10.5px; font-weight:700; font-style:normal; }
.pcprod__cards{ display:grid; gap:8px; }
.pcprod__card{ display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border:1px solid #e6e3ed; border-radius:14px; background:#fff; }
.pcprod__card.is-pending{ background:#fbfaff; }
.pcprod__thumb{ flex:0 0 auto; width:64px; height:64px; border-radius:10px; object-fit:contain; background:#fff; border:1px solid #ececf2; }
.pcprod__thumb--none{ display:grid; place-items:center; text-align:center; font-size:10.5px; line-height:1.3; color:#8a8a9c; background:#f4f3f8; }
.pcprod__card .pcprod__body{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.pcprod__price{ font-size:13.5px; font-weight:800; color:var(--ink,#1b1b2b); }
.pcprod__status{ font-size:12px; font-weight:700; color:#8a5a12; }
.pcprod__tone{ font-size:11.5px; color:#707684; }
.pcprod__tone--pending{ color:#8a5a12; }
/* [RANK-A] 공개 3번 안 기본 관리법 · 관리 우선순위(roadmap 순서 그대로) */
.syn__jp--care{ margin:0; }
.syn__jt{ margin:4px 0 8px; }
.syn__care{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.syn__care li{ display:grid; grid-template-columns:auto 1fr; column-gap:10px; row-gap:2px; padding:10px 12px; border:1px solid #e6e3ed; border-radius:12px; background:#fff; }
.syn__careN{ grid-row:span 2; align-self:start; padding:2px 8px; border-radius:999px; background:#f1eff6; color:#5b45c9; font-size:11.5px; font-weight:800; white-space:nowrap; }
.syn__care li b{ font-size:14px; color:var(--ink,#1b1b2b); word-break:keep-all; }
.syn__careD{ font-size:12.5px; line-height:1.6; color:#56566a; word-break:keep-all; }
/* [RANK-D] 서비스 내부 추천점수(효능 점수 아님) */
.cp__score{ display:block; margin-top:4px; font-size:12.5px; color:#5b45c9; font-weight:700; }
.cp__score b{ font-size:15px; }
.cp__scoreParts{ display:block; font-size:11.5px; line-height:1.5; color:#707684; word-break:keep-all; }
.cp__order--prov{ color:#8a5a12; }
/* [UNLOCK] 공유 후 열림 안내(기존 sharesheet 모양 재사용) */
.unlocknote__s{ margin:6px 0 4px; font-size:14px; line-height:1.6; color:#353943; word-break:keep-all; }
.unlocknote__n{ margin:0 0 10px; font-size:12px; line-height:1.5; color:#707684; word-break:keep-all; }
/* [V70-R1] 공유 성공 안내만 화면 가운데 팝업으로. 다른 .sharesheet(아래에서 올라오는 시트)는 그대로 */
.sharesheet.unlocknote{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  padding:16px; box-sizing:border-box; }
.sharesheet.unlocknote .sharesheet__box{ position:relative; inset:auto; margin:0 auto; transform:none; animation:none;
  width:100%; max-width:360px; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow-y:auto;
  -webkit-overflow-scrolling:touch; box-sizing:border-box; padding:20px 18px 18px; border-radius:20px; text-align:center; }
.sharesheet.unlocknote .unlocknote__art{ display:block; width:112px; height:auto; max-height:68px; margin:0 auto 10px; }
.sharesheet.unlocknote .sharesheet__t{ margin:0; font-size:20px; line-height:1.4; font-weight:800; color:#1e2230; word-break:keep-all; }
.sharesheet.unlocknote .unlocknote__s{ margin:8px 0 16px; font-size:14.5px; }
.sharesheet.unlocknote .sharesheet__cancel{ width:100%; }
@media (max-width:360px){ .sharesheet.unlocknote .sharesheet__box{ padding:18px 16px 16px; }
  .sharesheet.unlocknote .sharesheet__t{ font-size:19px; } }
@media (max-height:420px){ .sharesheet.unlocknote .unlocknote__art{ width:84px; max-height:50px; margin-bottom:6px; } }
@media (prefers-reduced-motion:reduce){ .sharesheet.unlocknote, .sharesheet.unlocknote .sharesheet__box{ animation:none; transition:none; } }

/* ===== [LAYOUT 2026-11-05] 정밀 피부 분석: 위 = 증상 선택 · 아래 = 왼쪽 연결 그래프 + 오른쪽 추천 5(PC) / 모바일 = 작은 그래프 → 바로 아래 순위 ===== */
.cn__choices{ margin:0 0 14px; }
.cn__duo{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-items:start; }
.cn__duoGraph, .cn__duoRec{ min-width:0; }
/* 옮겨 붙인 추천 컨테이너: 카드 안의 카드처럼 보이지 않게 바깥 테두리·여백만 덜어 낸다(내용·잠금 구조 그대로) */
.cn__duoRec > .result__cncmp{ margin:0; padding:0; border:0; box-shadow:none; background:transparent; }
.cn__duoRec .detail__sub{ margin-top:0; }
@media (min-width:601px){
  .cn__duo{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:18px; }
  .cn__duoGraph .fg__area{ height:440px; }
}
@media (max-width:600px){
  .cn__duoGraph .fg__area{ height:300px; }   /* 모바일: 그래프는 작게, 바로 밑에 순위 */
}
/* 추천 한 줄 요약(native details/summary) · 펼치면 상세 */
.cp__item{ padding:0; }
.cp__det > summary{ list-style:none; }
.cp__det > summary::-webkit-details-marker{ display:none; }
.cp__sum{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; border-radius:16px; }
.cp__sum:focus-visible{ outline:3px solid #8f84bf; outline-offset:2px; }
.cp__item .cp__sum .cp__rank{ margin:0; }
.cp__sum .cp__head{ display:flex; align-items:center; gap:10px; min-width:0; }
.cp__sum .cp__thumb, .cp__sum .cp__thumbWrap{ width:52px; height:52px; flex:0 0 52px; }
.cp__sum .cp__thumbWrap .cp__thumb{ width:52px; height:52px; }
.cp__sum .cp__thumb--none{ display:grid; place-items:center; text-align:center; font-size:10px; line-height:1.25; color:#8a8a9c; background:#f4f3f8; }
.cp__sum .cp__exampleBadge{ font-size:9.5px; padding:1px 5px; bottom:-4px; }
.cp__sum .cp__name{ font-size:14px; line-height:1.35; overflow-wrap:anywhere; }
.cp__sum .cp__amount{ font-size:13.5px; }
.cp__amount--none{ font-size:12px; font-weight:700; color:#8a8a9c; }
.cp__sum .cp__score{ margin-top:2px; font-size:12px; }
.cp__sum .cp__score b{ font-size:14px; }
.cp__more{ font-size:12px; font-weight:800; color:#5b4fb0; white-space:nowrap; }
.cp__more::after{ content:" ▾"; }
.cp__det[open] .cp__more::after{ content:" ▴"; }
.cp__detail{ padding:4px 14px 14px; border-top:1px solid #eeeaf6; }
.cp__detail .cp__effect{ margin-top:10px; }
.cp__detail .cp__ability{ margin-top:12px; }
.cp__detail .cp__scoreParts{ margin:0 0 10px; }
@media (max-width:420px){
  .cp__sum{ grid-template-columns:auto minmax(0,1fr); }
  .cp__more{ grid-column:1 / -1; justify-self:end; }
}

/* ===== [RESTORE 2026-11-05] 내 피부 특징 카드의 기존 예시 그래프(SVG) 복원 — 칸 폭 100% 안(넘침 없음) · 눈금 숫자 없음 ===== */
.sct__fig{ position:relative; margin:8px 0 10px; padding:6px 6px 4px; border:1px solid #eeeaf6; border-radius:14px; background:#fff; max-width:100%; overflow:hidden; }
.sct__ex{ display:inline-block; margin:0 0 2px 4px; padding:1px 8px; border-radius:999px; background:#f1eff6; color:#707684; font-size:10.5px; font-weight:700; }
.sct__svg{ display:block; width:100%; max-width:100%; height:auto; }
.sct__svg .sct__grid{ stroke:#ece9f3; stroke-width:1; }
.sct__svg .sct__line{ fill:none; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.sct__svg .sct__xt{ font-size:10.5px; fill:#707684; text-anchor:middle; }
.sct__svg .sct__mark{ fill:#fff; stroke:#5b4fb0; stroke-width:2; }
.sct__svg .sct__marktx{ font-size:10px; font-weight:800; fill:#5b4fb0; text-anchor:middle; }
.sct__fig .sct__leg{ display:flex; flex-wrap:wrap; gap:4px 12px; margin:2px 4px 0; font-size:11.5px; color:#56566a; }
/* [V30] 2번 카드 첫 줄 = 일반 원리(굵게만 살짝 · 새 상자 없음) */
.sct .sct__intro{ font-weight:700; color:#353943; }
.sct__fig .sct__lg i{ display:inline-block; width:10px; height:3px; margin-right:5px; border-radius:2px; vertical-align:middle; }

/* ===== [RESTORE-B] 증상 선택: 4축 묶음(native details) · 묶음 안 2열 칩 · 선택 개수 · 전체 초기화 항상 표시 ===== */
.cn__choices{ display:grid; gap:8px; }
.cn__axis{ border:1px solid #e6e3ed; border-radius:14px; background:#fff; }
.cn__axisH{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:40px; padding:6px 12px; cursor:pointer; border-radius:14px; }
.cn__axisH::-webkit-details-marker{ display:none; }
.cn__axisH::after{ content:"▾"; margin-left:auto; color:#8f84bf; font-size:12px; }
.cn__axis[open] > .cn__axisH::after{ content:"▴"; }
.cn__axisH:focus-visible{ outline:3px solid #8f84bf; outline-offset:2px; }
.cn__axisT{ font-size:13.5px; font-weight:800; color:var(--ink,#1b1b2b); }
.cn__axisN{ font-size:11.5px; font-weight:800; color:#5b45c9; }
.cn__axisN:empty{ display:none; }
.cn__axisChips{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; padding:0 10px 10px; }
.cn__axisChips .fg__choice{ min-height:36px; padding:6px 10px; font-size:13px; line-height:1.3; border-radius:12px; text-align:left; overflow-wrap:anywhere; }
.cn__choiceBar{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cn__pickN{ font-size:12.5px; font-weight:700; color:#707684; }
.cn__choiceBar .fg__reset{ min-height:36px; padding:6px 14px; font-size:13px; }
@media (min-width:601px){ .cn__axisChips{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* ===== [VERTICAL 2026-11-05 · 검수본 이식] 사용자 원문 "데스크탑 ui 나란히 하니까 별로…위에 옵시디언식…그 아래에 제품 추천":
   PC 도 그래프 → 아래 추천 목록(세로 흐름). 이전 좌우 2열 override 를 1열로 되돌리고 넓어진 폭의 긴 이름·표 줄바꿈 보호 ===== */
@media (min-width:601px){ .cn__duo{ grid-template-columns:minmax(0,1fr); gap:16px; } }
.cn__duoRec, .cp__detail, .cp__id, .cp__ability{ min-width:0; overflow-wrap:anywhere; }

/* ===== [ABILITY · 검수본 이식] 제품별 성분 기준 연결도(계산상 비율 · 효과 세기 아님) ===== */
.cp__ab{ margin-top:10px; padding:10px 12px; border:1px solid #ece9f3; border-radius:14px; background:#fbfaff; }
.cp__abH{ margin:0 0 4px; font-size:13.5px; font-weight:900; color:#493a76; }
.cp__abH span{ display:block; margin-top:1px; font-size:11.5px; font-weight:600; color:#66667a; } /* [QA-CONTRAST 2026-11-06] #707684→#66667a: #fbfaff 위 4.38→5.40:1 */
.cp__abSvg{ display:block; width:100%; max-width:300px; height:auto; margin:0 auto; overflow:visible; }
.cp__abG{ fill:none; stroke:#ddd8ea; stroke-width:1; }
.cp__abV{ fill:rgba(124,92,230,.22); stroke:#7C5CE6; stroke-width:2; stroke-linejoin:round; }
.cp__abL{ font-size:11px; font-weight:800; fill:#56566a; }
.cp__abBars{ display:grid; gap:6px; margin:4px 0; }
.cp__abBar{ display:grid; grid-template-columns:72px minmax(0,1fr); align-items:center; gap:8px; font-size:12px; color:#56566a; }
.cp__abBar i{ display:block; height:8px; border-radius:999px; background:#ece9f3; overflow:hidden; }
.cp__abBar b{ display:block; height:100%; background:#7C5CE6; }
.cp__abList{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:2px; font-size:12px; color:#454052; }
.cp__abList em{ font-style:normal; color:#66667a; } /* [QA-CONTRAST 2026-11-06] 같은 #707684/#fbfaff 작은 글자 쌍 */
.cp__abNote{ margin:6px 0 0; font-size:11.5px; line-height:1.5; color:#66667a; word-break:keep-all; } /* [QA-CONTRAST 2026-11-06] Chrome 실측 4.38:1 → #66667a 5.40:1 */
/* ===== [CARE-PENTAGON v6 2026-11-06] 관리 요소 5축: viewBox 360×268(라벨 여백 포함) · 라벨 tspan 줄바꿈 · 꼭짓점 아래 1점 단위 점수 ===== */
.cp__ab .cp__abSvg{ max-width:340px; }
.cp__abL .cp__abP{ font-weight:900; fill:#493a76; }

/* ===== [PC-V8 2026-11-06] 보존 원본(personal-color-active-detail-contrast-v2-20261105/candidate/css/concern-network.css)에서 퍼스널컬러 범위(#resultPC) 규칙만 옮김 =====
   옮긴 묶음: [PC-UI] 평평한 패널·카드 한 겹 · [PC-LAYOUT-FIX] 세로 줄·요약 grid·이름 min-width:0·판매처 44px · [ACTIVE-CONTRAST] PC 줄 상태 글자 ·
   [ACTIVE-CONTRAST-2] 중 #resultPC 범위 두 선택자만. 전역 .cp__item 대비 토큰·LUX·CMP·옛 능력치·상세 대비 묶음은 옮기지 않음(v7 MBTI·5축 규칙 그대로) */

/* ===== [PC-UI 2026-11-05] 퍼스널컬러 추천 제품 줄 = 피부 MBTI 추천 줄과 같은 cp__ 모양(펼침 없음). 퍼스널컬러 영역(#resultPC) 안에서만 적용 =====
   상자 겹침 줄이기: 바깥 .pcs · .pcprod__slot · 목록은 테두리·배경 없이 제목과 간격만, 제품 한 줄(cp__item)만 테두리 한 겹 */
#resultPC .pc__style .pcs{ border:0; box-shadow:none; background:transparent; }
#resultPC .pcprod--flat{ margin:8px 0 14px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
#resultPC .pcprod--flat .pcprod__slotH{ margin:0 0 6px; font-size:12.5px; font-weight:800; color:#493a76; }
#resultPC .pcprod__list{ margin:0; gap:8px; }
#resultPC .pcprod__row{ padding:0; }
#resultPC .pcprod__row.is-pending{ background:#fbfaff; }
#resultPC .pcprod__sum{ cursor:default; }
#resultPC .pcprod__no{ white-space:nowrap; font-size:11.5px; }
#resultPC .pcprod__buy::after{ content:none; }
#resultPC a.pcprod__buy{ text-decoration:underline; text-underline-offset:2px; }
#resultPC a.pcprod__buy:focus-visible{ outline:3px solid #8f84bf; outline-offset:2px; }
#resultPC .pcprod__buy.is-none{ color:#8a8a9c; font-weight:600; }
#resultPC .pcprod__match{ margin:0; padding:0 12px 10px; font-size:12px; line-height:1.6; color:#56566a; word-break:keep-all; overflow-wrap:anywhere; }
#resultPC .pcprod__match b{ margin-right:4px; color:#493a76; }
#resultPC .pcprod--flat .pcprod__note, #resultPC .pcprod--flat .pcprod__pending{ margin:6px 2px 0; }
/* 편집 견본(색상 견본 예시)·다른 메이크업 영역 안내: 바깥 한 겹만 남기고 안쪽 칸 테두리는 뺀다(라벨·예시 구분 문구는 그대로) */
#resultPC .pcprod--flat .pced{ margin-top:10px; }
#resultPC .pcprod__part--pending{ border:1px solid #ece9f3; border-radius:14px; background:#fff; box-shadow:none; }
#resultPC .pcprod__part--pending .pcprod__areas > div{ border:0; background:transparent; box-shadow:none; }

/* ===== [PC-LAYOUT-FIX 2026-11-05] 실제 Chrome 컴포넌트 QA 실패(1440/390/360) 대응 — 퍼스널컬러 제품 줄 범위에서만 =====
   줄 = 세로 block(요약 → 색상 설명), 요약 = 전체 폭 grid(번호 | 썸네일+이름·호수·가격 | 판매처), 이름 칸 = 유연한 남은 폭(min-width:0),
   썸네일 = 줄어들지 않음, 판매처 링크 = 최소 44px 높이 + 좌우 여백. 피부 MBTI 줄(#resultPC 밖)은 영향 없음 */
#resultPC .pcprod__list > li.cp__item.pcprod__row{ display:block; width:100%; min-width:0; box-sizing:border-box; }
#resultPC .pcprod__list > li.cp__item.pcprod__row > .pcprod__sum{
  display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:10px;
  width:100%; min-width:0; box-sizing:border-box; padding:10px 12px; }
#resultPC .pcprod__row > .pcprod__sum > .cp__head{ display:flex; align-items:center; gap:10px; min-width:0; width:100%; }
#resultPC .pcprod__row > .pcprod__sum > .cp__head > .cp__thumb{ flex:0 0 52px; width:52px; height:52px; }
#resultPC .pcprod__row > .pcprod__sum > .cp__head > .cp__id{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; width:auto; }
#resultPC .pcprod__row .cp__id .cp__name, #resultPC .pcprod__row .cp__id .cp__size, #resultPC .pcprod__row .cp__id .cp__amount{
  display:block; min-width:0; max-width:100%; white-space:normal; word-break:keep-all; overflow-wrap:break-word; }
#resultPC .pcprod__row > .pcprod__match{ display:block; width:100%; min-width:0; box-sizing:border-box; }
#resultPC .pcprod__row .pcprod__buy{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 14px;
  box-sizing:border-box; border-radius:999px; white-space:nowrap; }
@media (max-width:600px){
  #resultPC .pcprod__list > li.cp__item.pcprod__row > .pcprod__sum{ grid-template-columns:auto minmax(0, 1fr); }
  #resultPC .pcprod__row > .pcprod__sum > .pcprod__buy{ grid-column:1 / -1; justify-self:stretch; width:100%; }
}

/* ===== [ACTIVE-CONTRAST 2026-11-05] 퍼스널컬러 제품 줄 범위의 작은 상태 글자만: #8a8a9c(대기 바탕 #fbfaff 3.26:1) → #66667a(약 5.4:1) ===== */
#resultPC .pcprod__row .cp__id .cp__amount--none,
#resultPC .pcprod__row .cp__id .cp__size,
#resultPC .pcprod__row .pcprod__buy.is-none,
#resultPC .pcprod__row .cp__thumb--none{ color:#66667a; }

/* ===== [ACTIVE-CONTRAST-2 2026-11-05] 중 퍼스널컬러 범위 두 선택자만(안내 문구 · 다른 메이크업 영역 상태 글자) → #66667a ===== */
#resultPC .pcprod__note,
#resultPC .pcprod__part--pending .pcprod__areas span{ color:#66667a; }

/* ===== [PICK-COPY 2026-11-06] 증상 선택 안내: 굵은 제목 + 짧은 도움말(상자·테두리 없음, 이 두 줄에만 적용) ===== */
.fg__intro--pick{ margin:0 0 12px; }
.fg__intro--pick .fg__introT{ margin:0; font-size:18px; font-weight:900; line-height:1.35; color:#1b1b2b; letter-spacing:-.3px; word-break:keep-all; }
.fg__intro--pick .fg__introS{ margin:4px 0 0; font-size:14px; font-weight:600; line-height:1.5; color:#56566a; word-break:keep-all; }
@media (max-width:420px){ .fg__intro--pick .fg__introT{ font-size:17px; } }

/* ===== [PRODUCT-DISPLAY 2026-11-06] 능력치 오각형 아래 5줄 목록: 화면에서는 숨기고 화면 읽기 프로그램에는 남긴다(표준 시각적 숨김 · display:none 아님) ===== */
.cp__ab .cp__abList--sr{ position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; padding:0 !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; white-space:nowrap !important; border:0 !important; }
.cp__ab{ position:relative; }

/* ===== [CONCERN-TABS 2026-11-06] 그래프 → 증상 선택(탭) → 추천 세로 순서. 4개 탭(유수분·민감·색소·탄력) + 한 번에 패널 하나 ===== */
.cn__picker{ display:grid; gap:8px; min-width:0; }
.cn__picker .fg__intro--pick{ margin:2px 0 0; }
.cn__choices--tabs{ margin:0; gap:8px; min-width:0; }
.cn__tabs{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:4px; border-bottom:2px solid #ece9f3; min-width:0; }
.cn__tab{ font:inherit; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2px 6px; min-width:0; min-height:44px;
  margin:0 0 -2px; padding:6px 4px; border:0; border-bottom:3px solid transparent; background:transparent; cursor:pointer;
  color:#56566a; font-size:14px; font-weight:800; word-break:keep-all; text-align:center; }
.cn__tab .cn__axisT{ font-size:inherit; color:inherit; }
.cn__tab[aria-selected="true"]{ color:#4b3a91; border-bottom-color:#7C5CE6; }
.cn__tab:focus-visible{ outline:3px solid #8f84bf; outline-offset:-3px; border-radius:8px; }
.cn__tabpanel{ padding:4px 0 0; min-width:0; }
.cn__tabpanel:focus-visible{ outline:3px solid #8f84bf; outline-offset:2px; border-radius:10px; }
/* 기존 .cn__axisChips{display:grid} 보다 우선해 숨긴 패널이 확실히 사라지게 */
.cn__tabpanel[hidden]{ display:none !important; }
@media (max-width:420px){
  .cn__tab{ font-size:13px; padding:6px 2px; }
  .cn__tab .cn__axisN{ font-size:11px; }
}

/* ===== [CARE-AVERAGE 2026-11-06] 추천 요약 줄의 맞춤추천점수(다섯 관리 항목 정수 점수 평균) — 이름·가격 아래 한 줄, 좁은 폭에서 줄바꿈 ===== */
.cp__id .cp__avg{ display:inline-block; align-self:flex-start; max-width:100%; margin-top:2px; padding:1px 8px; border-radius:999px;
  background:#f1eff6; color:#4b3a91; font-size:12px; font-weight:700; line-height:1.5; white-space:normal; word-break:keep-all; overflow-wrap:anywhere; }
.cp__id .cp__avg b{ font-size:13.5px; font-weight:900; }
.cp__id .cp__avg--none{ color:#56566a; font-weight:600; }

/* ===== [THUMB 2026-11-06] 등록부 섬네일(기존 52px 칸 그대로) · 불러오기 실패 시 같은 크기의 '사진 없음' 칸 ===== */
.cp__sum .cp__thumb--reg{ object-fit:contain; background:#fff; }
.cp__sum .cp__thumb--failed{ white-space:normal; word-break:keep-all; text-align:center; font-size:10px; line-height:1.25; color:#66667a; }

/* ===== [GROUPS 2026-11-07 · 비공개 시험] 제품군 버튼(종합 추천·토너·에멀전·로션·크림·앰플·세럼) · 군 안 순서/종합 순위 표시 ===== */
.cp__groups{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; min-width:0; }
.cp__group{ font:inherit; min-height:44px; padding:6px 14px; border:1.5px solid #e2dcf3; border-radius:999px; background:#fff; color:#56566a;
  font-size:13.5px; font-weight:800; cursor:pointer; word-break:keep-all; }
.cp__group[aria-pressed="true"]{ background:#7C5CE6; border-color:#7C5CE6; color:#fff; }
.cp__group:focus-visible{ outline:3px solid #8f84bf; outline-offset:2px; }
.cp__id .cp__orank{ font-size:12px; font-weight:700; color:#56566a; }
@media (max-width:420px){ .cp__group{ padding:6px 11px; font-size:13px; } }

/* ===== [V29 2026-11-07 · 비공개] 추천 위 맞춤 안내 한 줄(상자 없음) · 외화 가격 관측 종류 · 맞춤추천점수 숫자 가독성(기존 알약 모양·색 그대로, 등급·임상 표시 없음) ===== */
/* [V30] 추천 위 '지금 피부에 맞는 관리 방향' 제목 + 한 문단(상자·테두리 없음) */
.cp__guide{ margin:2px 0 10px; }
.cp__guideH{ margin:0 0 4px; font-size:15px; font-weight:900; line-height:1.4; color:#1b1b2b; word-break:keep-all; }
.cp__guide .cp__intro{ margin:0; }
.cp__intro{ margin:2px 0 10px; font-size:13.5px; line-height:1.65; font-weight:600; color:#353943; word-break:keep-all; overflow-wrap:anywhere; }
.cp__amount .cp__pnote{ display:inline-block; margin-left:4px; font-size:11px; font-weight:700; color:#66667a; white-space:nowrap; }
.cp__id .cp__avg{ font-size:12.5px; padding:2px 10px; }
.cp__id .cp__avg b{ font-size:16px; font-weight:900; letter-spacing:-.2px; }
@media (max-width:420px){ .cp__id .cp__avg b{ font-size:15px; } }

/* V31: separate structured brand/name; center both score lines in the badge. */
.cp__sum .cp__brand{display:block;font-size:12px;line-height:1.4;font-weight:700;color:var(--ink-soft);overflow-wrap:anywhere;}
.cp__id .cp__avg{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:flex-start;box-sizing:border-box;width:82px;min-height:82px;max-width:100%;padding:8px 4px;border-radius:50%;text-align:center;line-height:1.35;gap:2px;}
.cp__id .cp__avgLabel,.cp__id .cp__avgValue{display:block;width:100%;text-align:center;}
.cp__id .cp__avgLabel{font-size:11px;white-space:nowrap;}
.cp__id .cp__avgValue b{font-size:20px;}
.cp__id .cp__avg--none{font-size:11px;overflow-wrap:anywhere;}
.cp__det:not([open])>.cp__detail{display:none;}

/* V34 private (V41 · V37 검토본 그대로 이식): mobile card content uses the full width; expansion no longer consumes a side column.
   긴 브랜드·제품명(예: COSME DECORTE)은 한 줄 전체 폭에서 줄바꿈 — 줄 수 제한·숨김·글자 축소 없음. 추천점수 원은 오른쪽 위, '제품 특징 자세히 보기'는 맨 아래 한 줄 */
@media (max-width:600px){
  .cp__det > .cp__sum{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"rank score" "photo score" "brand brand" "name name" "size price" "orank orank" "action action";
    align-items:start;column-gap:12px;row-gap:6px;padding:12px;
  }
  .cp__det > .cp__sum > .cp__head,
  .cp__det > .cp__sum .cp__head > .cp__id{display:contents;}
  .cp__det > .cp__sum > .cp__rank{grid-area:rank;justify-self:start;align-self:start;}
  .cp__det > .cp__sum .cp__thumb,
  .cp__det > .cp__sum .cp__thumbWrap{grid-area:photo;justify-self:start;width:52px;height:52px;}
  .cp__det > .cp__sum .cp__thumbWrap .cp__thumb{width:52px;height:52px;}
  .cp__det > .cp__sum .cp__brand{grid-area:brand;min-width:0;max-width:100%;white-space:normal;word-break:normal;overflow-wrap:break-word;}
  .cp__det > .cp__sum .cp__name{grid-area:name;min-width:0;max-width:100%;font-size:14px;line-height:1.45;white-space:normal;word-break:normal;overflow-wrap:break-word;}
  .cp__det > .cp__sum .cp__size{grid-area:size;min-width:0;white-space:normal;overflow-wrap:break-word;}
  .cp__det > .cp__sum .cp__amount{grid-area:price;min-width:0;max-width:100%;justify-self:end;text-align:right;white-space:normal;overflow-wrap:break-word;}
  .cp__det > .cp__sum .cp__orank{grid-area:orank;min-width:0;}
  .cp__det > .cp__sum .cp__avg{grid-area:score;align-self:start;justify-self:end;width:76px;min-height:76px;margin:0;padding:8px 4px;}
  .cp__det > .cp__sum > .cp__more{grid-area:action;justify-self:stretch;display:flex;align-items:center;justify-content:center;min-height:44px;width:100%;box-sizing:border-box;white-space:normal;text-align:center;padding:8px 12px;border-top:1px solid #eeeaf6;}
}

/* V34: purchase remains inside expanded card, after all detail content. (펼치지 않으면 .cp__detail 과 함께 숨김) */
.cp__det > .cp__detail > .cp__buy{display:flex;align-items:center;justify-content:center;min-height:44px;width:100%;box-sizing:border-box;margin-top:18px;text-align:center;}