/* ===========================================================
   결과지 v3 (2026-06-30 재구성: 진단→이해→문제인식→성분→제품)
   =========================================================== */
/* 핵심 진단 강조 카드 */
.result__main{ border: 2px solid var(--type-ink); box-shadow: 0 14px 40px -24px var(--type-ink); }
.result__mainTag{ display:inline-block; font-size:11.5px; font-weight:800; color:#fff;
  background:var(--type-ink); padding:4px 11px; border-radius:999px; margin-bottom:10px; }
.result__cardTitle--sub{ font-size:15.5px; color: var(--ink-soft); }

/* A. 3초 요약 */
.result__sum3{ background: linear-gradient(180deg, var(--brand-softer), #fff); }
.sum3__row{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-top:1px dashed var(--line); }
.sum3__row:first-of-type{ border-top:none; }
.sum3__k{ flex:0 0 86px; font-size:12px; font-weight:800; color:var(--brand); padding-top:2px; }
.sum3__v{ flex:1; font-size:14px; font-weight:700; color:var(--ink); word-break:keep-all; line-height:1.45; }
.sum3__v--do{ color:#1a8f6e; }
.sum3__v--no{ color:#c0392b; }

/* 점수 보조 문구 */
.score__age-sub{ display:block; font-size:12px; color:#a6a6b4; font-weight:600; margin-top:4px; }

/* 축별 점수(올리브영 스타일: 상태 뱃지 + 내 점수 / 권장 점수) */
.axsc{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.axsc__top{ font-size:11px; font-weight:800; color:var(--type-ink); flex:0 0 auto;
  background:color-mix(in srgb, var(--type-color) 11%, #fff); padding:3px 9px; border-radius:999px; letter-spacing:-.2px; }
.axsc__name{ font-size:15.5px; font-weight:900; color:var(--ink); letter-spacing:-.3px; }
.axsc__score{ font-size:12.5px; font-weight:800; color:var(--ink-soft); white-space:nowrap; margin-left:auto; }
.axsc__score b{ font-size:20px; color:#2b2b3a; letter-spacing:-.5px; }
.axsc__score em{ font-style:normal; font-size:11.5px; font-weight:700; color:var(--ink-soft); margin-left:2px; }
/* 항목별 구분(올리브영식 카드 느낌) */
.result__axes .axis-row{ padding:15px 0; }
.result__axes .axis-row:not(:last-child){ border-bottom:1px solid #f0f0f4; }

/* 피부 타입 인기(많은 사람) 순위 */
.tprank{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px 15px; }
.tprank__h{ display:flex; align-items:center; gap:6px; font-size:14px; font-weight:800; color:var(--ink); margin-bottom:12px; }
.tprank__h .ico{ color:var(--type-ink); }
.tprank__h b{ color:var(--type-ink); }
.tprank__row{ display:grid; grid-template-columns:24px 46px 1fr 64px 42px; align-items:center; gap:8px; padding:7px 0; }
.tprank__row:not(:last-of-type){ border-bottom:1px solid #f2f2f6; }
.tprank__no{ font-size:14px; font-weight:900; color:#b8b8c6; text-align:center; }
.tprank__row--me .tprank__no{ color:var(--type-ink); }
.tprank__code{ font-size:14px; font-weight:900; letter-spacing:.02em; color:var(--ink); }
.tprank__nick{ font-size:12px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tprank__nick em{ font-style:normal; font-weight:800; color:var(--type-ink); font-size:11px; }
.tprank__row--me{ background:color-mix(in srgb, var(--type-color) 8%, #fff); border-radius:9px; margin:0 -6px; padding-left:6px; padding-right:6px; }
.tprank__bar{ display:block; height:7px; border-radius:999px; background:#eee; overflow:hidden; }
.tprank__bar span{ display:block; height:100%; border-radius:999px; background:var(--type-color); }
.tprank__pct{ font-size:13px; font-weight:900; color:var(--ink); text-align:right; }
.tprank__pct small{ font-size:9px; color:var(--ink-soft); }
.tprank__note{ font-size:11px; color:var(--ink-soft); margin-top:10px; }
.tprank__note b{ color:var(--type-ink); }

/* 점수 섹션 — 시원한 간격(2026-07-08 사장님: 목차명↔점수 벌리고 전체 여유롭게) */
.result__score .numh{ margin-bottom:30px !important; }
.result__score .score__big{ margin:0 0 10px !important; }
.result__score .score__num{ font-size:74px !important; }
.result__score .score__grade{ margin-bottom:24px !important; font-size:16px !important; }

/* 4. 타입 비율 */
.result__social{ display:flex; flex-direction:column; gap:12px; margin-top:26px; }
.social__item{ padding:20px 16px !important; }
/* 두 번째: '전체 참여자 중 OOOO 피부타입은 N%' */
.social__lab--big{ font-size:14.5px !important; color:var(--ink) !important; font-weight:700; line-height:1.5; }
.social__lab--big b{ color:var(--type-ink); font-weight:900; }
.social__num--sm{ font-size:26px !important; margin-top:4px; color:var(--type-ink) !important; }
.social__item--lead{ grid-column:1 / -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--type-color) 12%, #fff), #fff);
  border-color: color-mix(in srgb, var(--type-color) 35%, var(--line)); }
.social__item--lead .social__num{ font-size:30px; color: var(--type-ink); }
.social__item--lead .social__lab b{ color: var(--type-ink); }
.social__line{ grid-column:1 / -1; text-align:center; font-size:13px; color:var(--ink-soft); margin-top:2px; }
.social__line b{ color: var(--type-ink); font-weight:800; }

/* 5. 4축 지도 — 축별 관리포인트 */
.result__axismap{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.axmap__h{ font-size:13px; font-weight:800; color:var(--ink); margin-bottom:2px; }
.axmap__row{ display:flex; gap:10px; align-items:flex-start; padding:11px 12px; background:#fff;
  border:1px solid var(--line); border-radius:12px; }
.axmap__letter{ flex:0 0 26px; height:26px; display:grid; place-items:center; font-size:13px;
  font-weight:900; color:#fff; background:var(--ac); border-radius:8px; }
.axmap__body{ flex:1; }
.axmap__pole{ font-size:13.5px; font-weight:800; color:var(--ink); }
.axmap__desc{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:2px 0 4px; word-break:keep-all; }
.axmap__point{ font-size:12px; color:var(--ink-soft); }
.axmap__point b{ color:var(--ac); font-weight:800; }

/* 7. 4축 신호 (보조 카드 — 4축 지도보다 약하게) */
.result__signal{ background: var(--brand-softer); }
.sig__list{ display:flex; flex-direction:column; gap:8px; }
.sig__row{ padding:10px 12px; background:#fff; border:1px solid var(--line); border-radius:12px; }
.sig__head{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.sig__lab{ font-size:13.5px; font-weight:800; color:var(--ink); }
.sig__stars{ font-size:13px; letter-spacing:1px; color:var(--sc); white-space:nowrap; }
.sig__off{ color:#dcdce6; }
.sig__interp{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin-top:5px; word-break:keep-all; }

/* 6. 왜 관리가 필요할까 */
.why__p{ font-size:14.5px; color:var(--ink); line-height:1.66; word-break:keep-all; margin-bottom:11px; }
.why__p:last-child{ margin-bottom:0; }
.why__p b{ font-weight:800; color: var(--type-ink); }

/* 8. 성분 조합 */
.combo__list{ display:flex; flex-direction:column; gap:10px; }
.combo__card{ border:1px solid var(--line); border-radius:14px; padding:13px 14px; background:#fff; }
.combo__head{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.combo__no{ flex:0 0 22px; height:22px; display:grid; place-items:center; font-size:12px;
  font-weight:900; color:#fff; background:var(--type-ink); border-radius:7px; }
.combo__tag{ font-size:14.5px; font-weight:800; color:var(--ink); }
.combo__chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:8px; }
.combo__why{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; word-break:keep-all; }
.combo__note{ margin-top:12px; padding:12px 14px; background:var(--brand-softer); border-radius:12px;
  font-size:13px; color:var(--ink-soft); line-height:1.55; word-break:keep-all; }
.combo__note b{ color:var(--ink); font-weight:800; }
.find__chip.is-sel{ background:var(--type-ink); color:#fff; border-color:var(--type-ink); }

/* 9. 성분 매칭률 */
.match__big{ display:flex; align-items:center; gap:16px; margin:6px 0 14px; }
.match__ring{ position:relative; flex:0 0 92px; width:92px; height:92px; border-radius:50%; display:grid; place-items:center; }
.match__ring::before{ content:""; position:absolute; width:68px; height:68px; background:#fff; border-radius:50%; }
.match__ring span{ position:relative; font-size:22px; font-weight:900; color:var(--type-ink); }
.match__ring span small{ font-size:12px; }
.match__sum b{ display:block; font-size:16px; font-weight:900; color:var(--ink); }
.match__sum span{ font-size:12.5px; color:var(--ink-soft); }
.match__bars{ display:flex; flex-direction:column; gap:8px; }
.match__bar{ display:flex; align-items:center; gap:9px; }
.match__lab{ flex:0 0 86px; font-size:12.5px; font-weight:700; color:var(--ink); }
.match__track{ flex:1; height:9px; background:var(--brand-soft); border-radius:999px; overflow:hidden; }
.match__fill{ height:100%; background:var(--type-ink); border-radius:999px; }
.match__cnt{ flex:0 0 34px; text-align:right; font-size:12px; font-weight:800; color:var(--ink-soft); }
.match__note{ margin-top:12px; font-size:12.5px; color:var(--ink-soft); line-height:1.55; word-break:keep-all; }
.match__note b{ color:var(--ink); font-weight:800; }
.match__prod{ display:flex; align-items:center; gap:12px; width:100%; margin-top:14px; padding:12px;
  border:1.5px solid var(--type-ink); border-radius:14px;
  background: color-mix(in srgb, var(--type-color) 6%, #fff); text-align:left; cursor:pointer; }
.match__prod-img{ flex:0 0 52px; width:52px; height:52px; object-fit:cover; border-radius:10px; }
.match__prod-body{ flex:1; }
.match__prod-body b{ display:block; font-size:14px; font-weight:800; color:var(--ink); }
.match__prod-body span{ font-size:12px; color:var(--ink-soft); }
.match__prod-go{ font-size:13px; font-weight:800; color:var(--type-ink); white-space:nowrap; }

/* 10. 기대 방향 */
.expect__list{ margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.expect__h{ font-size:13px; font-weight:800; color:var(--ink); margin-bottom:2px; }
.expect__row{ display:flex; gap:10px; align-items:flex-start; }
.expect__no{ flex:0 0 22px; height:22px; display:grid; place-items:center; font-size:12px;
  font-weight:900; color:#fff; background:var(--type-ink); border-radius:50%; }
.expect__txt b{ font-size:13.5px; font-weight:800; color:var(--ink); }
.expect__txt p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin-top:2px; word-break:keep-all; }

/* 12. 제품 CTA */
.cta__why{ font-size:13px; color:var(--ink-soft); line-height:1.6; text-align:center; word-break:keep-all; margin-bottom:4px; }
.cta__why b{ color:var(--ink); font-weight:800; }

/* 15. 더 자세히 보기 (접기) */
.result__extra{ border:1px solid var(--line); border-radius:var(--radius); background:var(--brand-softer); padding:0 16px; }
.result__extra[open]{ background:#fff; padding-bottom:16px; }
.result__extra-sum{ cursor:pointer; list-style:none; padding:16px 2px; font-size:14px; font-weight:800; color:var(--brand); }
.result__extra-sum::-webkit-details-marker{ display:none; }
.result__extra-sum span{ display:block; font-size:11.5px; font-weight:600; color:var(--ink-soft); margin-top:3px; }
.result__extra > *{ margin-top:14px; }
.result__extra[open] .result__extra-sum{ border-bottom:1px solid var(--line); margin-bottom:2px; }

/* 왜 관리 — 피부 단면도 헤더 */
.why__diagh{ font-size:13px; font-weight:800; color:var(--ink); margin:2px 0 10px; }

/* 9. 성분 매칭률 — 제품 1~5위 랭킹 */
.rankm__list{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.rankm__row{ display:flex; align-items:center; gap:11px; padding:11px 12px; background:#fff;
  border:1px solid var(--line); border-radius:13px; }
.rankm__row--ours{ border:1.5px solid var(--type-ink);
  background: color-mix(in srgb, var(--type-color) 7%, #fff); cursor:pointer; }
.rankm__no{ flex:0 0 24px; height:24px; display:grid; place-items:center; font-size:13px;
  font-weight:900; color:var(--ink-soft); background:var(--brand-soft); border-radius:50%; }
.rankm__row--ours .rankm__no{ color:#fff; background:var(--type-ink); }
.rankm__body{ flex:1; min-width:0; }
.rankm__name{ font-size:13.5px; font-weight:800; color:var(--ink); display:block; }
.rankm__tag{ font-size:10.5px; font-weight:800; color:#fff; background:var(--type-ink);
  padding:2px 7px; border-radius:999px; margin-left:4px; vertical-align:middle; }
.rankm__track{ height:7px; background:var(--brand-soft); border-radius:999px; overflow:hidden; margin:6px 0 4px; }
.rankm__fill{ height:100%; background:var(--type-ink); border-radius:999px; }
.rankm__row:not(.rankm__row--ours) .rankm__fill{ background:#c4c4d4; }
.rankm__tier{ font-size:11.5px; color:var(--ink-soft); }
.rankm__pct{ flex:0 0 auto; font-size:17px; font-weight:900; color:var(--type-ink); white-space:nowrap; }
.rankm__row:not(.rankm__row--ours) .rankm__pct{ color:var(--ink-soft); }
.rankm__pct small{ font-size:11px; }
.match__break{ padding:12px 13px; background:var(--brand-softer); border-radius:12px; margin-bottom:12px; }
.match__break-h{ font-size:12.5px; font-weight:800; color:var(--ink); margin-bottom:9px; }

/* 6. 과학 단면도 + 인과 설명 (신뢰 핵심) — 그림과 과학 설명을 짝지어 */
.sciex__list{ display:flex; flex-direction:column; gap:10px; margin:4px 0 16px; }
.sciex__item{ display:flex; gap:12px; align-items:center; padding:10px 12px; background:#fff;
  border:1px solid var(--line); border-radius:14px; }
.sciex__dia{ flex:0 0 116px; }
.sciex__dia svg{ width:100%; height:auto; display:block; }
.sciex__body{ flex:1; min-width:0; }
.sciex__pole{ font-size:14px; font-weight:800; }
.sciex__txt{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin-top:3px; word-break:keep-all; }
.why__persuade{ margin-top:4px; padding-top:14px; border-top:1px dashed var(--line); }
.why__ph{ font-size:16px; font-weight:900; color:var(--ink); margin-bottom:10px; letter-spacing:-.2px; }

/* 복합 축 현상 — 나도 몰랐던 내 피부 */
.cross{ margin-top:4px; padding-top:14px; border-top:1px dashed var(--line); }
.cross__h{ font-size:15.5px; font-weight:900; color:var(--ink); }
.cross__sub{ font-size:12.5px; color:var(--ink-soft); margin:3px 0 11px; }
.cross__sub b{ color:var(--ink); font-weight:800; }
.cross__row{ padding:12px 13px; background:var(--brand-softer); border-radius:12px; margin-bottom:8px; }
.cross__q{ font-size:13.5px; font-weight:800; color:var(--ink); word-break:keep-all; line-height:1.4; }
.cross__a{ font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin-top:6px; word-break:keep-all; }
.cross__a b{ color:var(--type-ink); font-weight:800; }

/* 개선 가능성 — 관리하면 달라질 수 있어요 */
.improve{ margin-top:14px; padding:14px; border-radius:14px;
  background: linear-gradient(180deg, color-mix(in srgb, #35c48f 12%, #fff), #fff);
  border:1px solid color-mix(in srgb, #35c48f 30%, var(--line)); }
.improve__h{ font-size:14px; font-weight:900; color:#178f63; word-break:keep-all; }
.improve__list{ list-style:none; margin:11px 0 0; display:flex; flex-direction:column; gap:8px; }
.improve__list li{ font-size:12.8px; color:var(--ink); line-height:1.5; padding-left:17px; position:relative; word-break:keep-all; }
.improve__list li::before{ content:"✓"; position:absolute; left:0; top:0; color:#2bb37e; font-weight:900; }
.improve__list li b{ color:#178f63; font-weight:800; }
.improve__bridge{ margin-top:12px; font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.improve__bridge b{ color:var(--type-ink); }

/* 6. 피부 특징 서술형 헤딩 + 단면도 + 큰 개선% */
.result__cardTitle--head{ font-size:19px; line-height:1.35; word-break:keep-all; }
.why__dia{ margin:2px 0 16px; }
.bigimp{ margin-top:18px; padding:22px 18px; border-radius:16px; text-align:center;
  background:linear-gradient(180deg, color-mix(in srgb, var(--type-color) 15%, #fff), #fff);
  border:1.5px solid color-mix(in srgb, var(--type-color) 32%, var(--line)); }
.bigimp__lead{ font-size:14.5px; font-weight:700; color:var(--ink); word-break:keep-all; }
.bigimp__lead b{ color:var(--type-ink); font-weight:800; }
.bigimp__num{ font-size:34px; font-weight:800; color:var(--type-ink); line-height:1.05; margin:6px 0 2px; letter-spacing:-1px; }
.bigimp__num b{ font-size:60px; font-weight:900; }
.bigimp__sub{ font-size:16px; font-weight:800; color:var(--ink); }
.bigimp__disc{ font-size:11.5px; color:#a6a6b4; margin-top:10px; }

/* 설득 흐름(결핍→성분배합→%) — 무거운 박스 X, 가벼운 모듈 분리 */
.persu{ margin-top:26px; padding-top:24px; border-top:1px solid #ececf2; }
/* 유의점을 독립 카드(resultPersu)로 분리 → 카드 안에선 상단 구분선/여백 제거 */
.result__persu .persu{ margin-top:0; padding-top:0; border-top:0; }
.persu__kicker{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:900;
  color:var(--type-ink); letter-spacing:-.2px; margin-bottom:8px; }
.persu__kicker .ico{ width:1.15em; height:1.15em; }
.persu__h{ font-size:19px; font-weight:900; line-height:1.4; color:var(--ink); letter-spacing:-.4px; word-break:keep-all; margin-bottom:12px; }
.persu__h b{ color:var(--type-ink); }
.persu__p{ font-size:14px; line-height:1.72; color:#41414f; word-break:keep-all; margin-bottom:11px; }
.persu__p b{ color:var(--ink); font-weight:800; }
/* % 페이오프 — 이 부분만 살짝 강조 */
.persu__pay{ margin-top:16px; padding:20px 16px; border-radius:16px; text-align:center;
  background:linear-gradient(180deg, color-mix(in srgb, var(--type-color) 13%, #fff), #fff); }
.persu__paylab{ display:block; font-size:13.5px; font-weight:700; color:var(--ink-soft); word-break:keep-all; }
.persu__num{ font-size:22px; font-weight:800; color:var(--type-ink); line-height:1.05; margin:6px 0 2px; letter-spacing:-1px; }
.persu__num b{ font-size:58px; font-weight:900; }
.persu__paysub{ display:block; font-size:16px; font-weight:800; color:var(--ink); word-break:keep-all; }
.persu__paysub b{ color:var(--type-ink); }
.persu--improve .persu__pay{ background:linear-gradient(180deg,#fdeef0,#fff); }
.persu--improve .persu__num, .persu--improve .persu__paysub b{ color:#7C5CE6; }
.persu--improve .persu__kicker{ color:#7C5CE6; }
.persu__disc{ font-size:11.5px; color:#a6a6b4; margin-top:10px; text-align:center; }

/* 퍼스널컬러 설문 화면 */
.screen--pcquiz{ display:none; }
.screen--pcquiz.is-active{ display:block; }
.pcq__inner{ max-width:var(--maxw); width:100%; margin:0 auto; padding:24px 0 40px; }
.pcq__title{ font-size:21px; font-weight:900; letter-spacing:-.4px; margin:6px 0 8px; word-break:keep-all; }
.pcq__title b{ color:#E85B8E; }
.pcq__sub{ font-size:13px; color:var(--ink-soft); word-break:keep-all; line-height:1.6; margin-bottom:14px; }
.pcq__sub b{ color:var(--ink); }
.pcq__q{ background:#fff; border:1px solid var(--line); border-radius:15px; padding:15px; margin-top:11px; }
.pcq__no{ font-size:11px; font-weight:800; color:#E85B8E; }
.pcq__ax{ font-size:10.5px; font-weight:800; color:#fff; border-radius:999px; padding:2px 8px; margin-left:6px; }
.pcq__ax--temp{ background:#f2955b; } .pcq__ax--value{ background:#7b86c9; } .pcq__ax--chroma{ background:#d16aa0; }
.pcq__qt{ font-size:14.5px; font-weight:800; margin:8px 0 10px; word-break:keep-all; line-height:1.45; }
.pcq__opt{ display:block; width:100%; text-align:left; border:1.5px solid var(--line); background:#fff;
  border-radius:11px; padding:11px 13px; font-family:inherit; font-size:13.5px; color:var(--ink); cursor:pointer; margin-top:7px; }
.pcq__opt.is-on{ border-color:#E85B8E; background:#fff2f2; font-weight:700; }
.pcq__go{ position:sticky; bottom:12px; margin-top:18px; display:flex; flex-direction:column; gap:8px; }

/* 상단: 기초 vs 색조 — 기초 먼저 설명 */
.result__whyfirst{ background:linear-gradient(180deg, var(--brand-softer), #fff); }
.wf__p{ font-size:13.5px; color:var(--ink); line-height:1.65; word-break:keep-all; margin-bottom:9px; }
.wf__p b{ font-weight:800; }
.wf__row{ display:flex; align-items:center; gap:9px; padding:10px 12px; background:#fff; border:1px solid var(--line);
  border-radius:11px; margin-top:8px; }
.wf__row b{ font-size:13.5px; font-weight:800; color:var(--ink); }
.wf__badge{ font-size:11px; font-weight:800; color:#fff; border-radius:999px; padding:3px 10px; }
.wf__badge--base{ background:var(--brand); }
.wf__badge--color{ background:#E85B8E; }
.wf__now{ margin-left:auto; font-size:11px; font-weight:800; color:var(--brand); background:var(--brand-soft); padding:3px 9px; border-radius:999px; }
.wf__later{ margin-left:auto; font-size:11px; font-weight:700; color:var(--ink-soft); }
/* 기초/색조 2카드 (눈에 띄게) */
.wf__cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.wf__card{ display:flex; flex-direction:column; gap:3px; padding:13px; border-radius:14px; }
.wf__card--base{ background:linear-gradient(180deg,#eef0fb,#fff); border:1.5px solid #d4d9f2; }
.wf__card--color{ background:linear-gradient(180deg,#fdECEF,#fff); border:1.5px solid #f3d0d8; }
.wf__badge{ display:inline-flex; align-items:center; font-size:12px; font-weight:900; color:#fff; border-radius:999px; padding:3px 11px 3px 8px; align-self:flex-start; }
.wf__badge--base{ background:var(--brand); }
.wf__badge--color{ background:#E85B8E; }
.wf__ct{ font-size:15px; font-weight:900; color:var(--ink); margin-top:6px; }
.wf__cd{ font-size:11.5px; color:var(--ink-soft); line-height:1.4; word-break:keep-all; }
.wf__card--base .wf__now{ margin:6px 0 0; align-self:flex-start; }
.wf__card--color .wf__later{ margin:6px 0 0; align-self:flex-start; font-weight:800; color:#E85B8E; }

/* 퍼스널컬러 결과 섹션(통합) */
/* PART1↔PART2 사이 간격 넓게(광고배너 다음 PART2) */
.result__banners--mid{ margin:14px 0 40px !important; }
.result__banners--mid + .result__card.result__pc{ margin-top:20px !important; }
/* ── 퍼스널컬러 구획: 피부 MBTI와 확실히 분리(다른 배경 + PART2 배너) ── */
.result__card.result__pc{ background:linear-gradient(180deg,#fff4ee,#fdf7fb) !important;
  border:1px solid #f3dcd0 !important; border-radius:22px !important; padding:8px 16px 24px !important;
  box-shadow:0 20px 50px -34px rgba(200,90,90,.4) !important; margin-top:10px; }
.result__card.result__pc + .result__card{ border-top:none !important; }
.pcpart{ margin:-8px -16px 20px; padding:30px 20px 26px; text-align:center; border-radius:22px 22px 0 0;
  background:linear-gradient(135deg,#ffb27a,#f0728e 55%,#c86fd0); color:#fff; }
.pcpart__no{ display:inline-block; font-size:12px; font-weight:900; letter-spacing:.18em; opacity:.9;
  border:1.5px solid rgba(255,255,255,.6); border-radius:999px; padding:4px 12px; margin-bottom:12px; }
.pcpart__t{ font-size:34px; font-weight:900; letter-spacing:-1px; line-height:1.1; }
.pcpart__s{ font-size:14px; font-weight:700; margin-top:10px; opacity:.96; }
.pcpart__s b{ font-weight:900; }
.pcpart__s .ico{ color:#fff; }
.pcpart__ic{ width:1.15em; height:1.15em; vertical-align:-.18em; margin-right:.28em; }
/* PART 1(피부 MBTI) 배너 — 쿨톤(PART2 웜과 구분) */
.pcpart--p1{ padding:32px 20px 28px; border-radius:24px;
  background:linear-gradient(135deg,#6d6ff2,#8f63d8 52%,#b56cc0);
  box-shadow:0 20px 46px -26px rgba(90,80,220,.6); }
/* PART1 배너 + 히어로 = 하나의 카드 */
.result__card.result__p1wrap{ padding:8px 16px 26px !important; border:1px solid #e5e2f4 !important;
  border-radius:24px !important; background:#faf9ff !important; box-shadow:0 18px 44px -30px rgba(90,80,200,.45) !important; margin-top:4px; }
.result__card.result__p1wrap + .result__card{ border-top:none !important; padding-top:0 !important; }
.pcpart--inset{ margin:-8px -16px 20px !important; border-radius:24px 24px 0 0 !important; box-shadow:none !important; }
/* 히어로: 카드 안이므로 자체 테두리·배경 제거 */
.result__p1wrap .result__hero{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; margin:0 !important; }
.result__pc{ background:linear-gradient(180deg,#fff7f2,#fff); border-color:#f0dccb; }
.pc__tag{ display:inline-block; font-size:11.5px; font-weight:800; color:#fff; background:#E85B8E; border-radius:999px; padding:4px 11px; margin-bottom:12px; }
.pc__hero{ display:flex; align-items:center; gap:14px; }
.pc__swatch{ width:56px; height:56px; border-radius:50%; flex:0 0 auto; box-shadow:0 8px 20px -8px rgba(0,0,0,.25); }
.pc__photo{ width:64px; height:80px; object-fit:cover; border-radius:12px; flex:0 0 auto; border:2px solid #fff; box-shadow:0 8px 20px -8px rgba(0,0,0,.3); }
.pc__detect{ display:flex; align-items:center; gap:9px; margin-top:11px; padding:9px 12px; background:#fff; border:1px solid var(--line); border-radius:11px; }
.pc__detect-sw{ width:26px; height:26px; border-radius:7px; flex:0 0 auto; border:1px solid rgba(0,0,0,.08); }
.pc__detect-txt{ font-size:12px; color:var(--ink-soft); line-height:1.4; word-break:keep-all; }
.pc__detect-txt b{ color:var(--ink); font-family:ui-monospace,monospace; }
.pc__name b{ font-size:18px; font-weight:900; display:block; }
.pc__name span{ font-size:12px; color:var(--ink-soft); letter-spacing:.03em; }
.pc__one{ font-size:13.5px; color:var(--ink); line-height:1.6; word-break:keep-all; margin:12px 0; }
/* 퍼스널컬러 결과 티저(공개) — 아래부터 블러 */
.pc__reveal{ display:flex; align-items:center; gap:6px; justify-content:center; text-align:center;
  font-size:15px; font-weight:800; color:var(--ink); margin:14px 0 6px; }
.pc__reveal b{ color:#E85B8E; }
.pc__reveal .ico{ color:#E85B8E; }
.pcr__lockzone, .match__lockzone, .find__lockzone{ display:block; }
/* 컬러칩 클릭 → 내 사진에 실제 메이크업 적용(캔버스) */
.pc__palhint{ font-size:12px; font-weight:700; color:#E85B8E; }
.pcmk{ position:relative; width:210px; margin:2px auto 14px; }
.pcmk__cv{ width:100%; display:block; border-radius:16px; border:1px solid var(--line); box-shadow:0 12px 30px -16px rgba(0,0,0,.4); }
.pcmk__toggle{ position:absolute; top:8px; left:50%; transform:translateX(-50%); display:flex; gap:0;
  background:rgba(255,255,255,.85); border-radius:999px; padding:3px; backdrop-filter:blur(3px); box-shadow:0 3px 10px -4px rgba(0,0,0,.3); }
.pcmk__tg{ border:none; background:none; font-family:inherit; font-size:11.5px; font-weight:800; color:var(--ink-soft);
  padding:5px 13px; border-radius:999px; cursor:pointer; }
.pcmk__tg.is-on{ background:#E85B8E; color:#fff; }
.pcmk__cap{ position:absolute; left:50%; transform:translateX(-50%); bottom:8px; font-size:11px; font-weight:800; color:#fff;
  background:rgba(0,0,0,.45); padding:3px 11px; border-radius:999px; white-space:nowrap; backdrop-filter:blur(2px); }
.pcmk__lh{ font-size:13px; font-weight:800; color:var(--ink); margin:2px 0 8px; }
.pcmk__lh span{ font-size:11.5px; font-weight:700; color:#E85B8E; }
.pcmk__lh .ico{ color:#E85B8E; }
.pcmk__lips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.pcmk__lip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:5px 11px 5px 6px; cursor:pointer; font-family:inherit; }
.pcmk__lip.is-on{ border-color:#E85B8E; background:#fff2f2; }
.pcmk__lipsw{ width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,.1); }
.pcdrape{ position:relative; width:190px; margin:2px auto 14px; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 12px 30px -16px rgba(0,0,0,.4); }
.pcdrape__img{ width:100%; display:block; }
.pcdrape__band{ position:absolute; left:0; right:0; bottom:0; height:34%;
  transition:background .25s ease; box-shadow:inset 0 8px 16px -6px rgba(0,0,0,.25); }
.pcdrape__cap{ position:absolute; left:8px; bottom:8px; font-size:11px; font-weight:800; color:#fff;
  background:rgba(0,0,0,.42); padding:3px 9px; border-radius:999px; backdrop-filter:blur(2px); }
.pc__c--btn{ border:none; background:none; padding:0; cursor:pointer; font-family:inherit; }
.pc__c--btn .pc__cs{ transition:transform .12s, box-shadow .12s; }
.pc__c--btn.is-on .pc__cs{ transform:scale(1.04); box-shadow:0 0 0 3px #fff, 0 0 0 5px #E85B8E; }
.pc__c--btn:hover .pc__cs{ transform:translateY(-2px); }

/* 베스트 컬러 팔레트 — 큰 스와치 + 색이름(이미지처럼 시각적) */
.pc__pal{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.pc__c{ display:flex; flex-direction:column; gap:6px; }
.pc__cs{ width:100%; height:56px; border-radius:12px; border:1px solid rgba(0,0,0,.06); box-shadow:0 6px 14px -8px rgba(0,0,0,.3); }
.pc__cn{ font-size:11.5px; font-weight:700; color:var(--ink-soft); text-align:center; letter-spacing:-.2px; }
.pc__pal--avoid{ grid-template-columns:repeat(6,1fr); gap:7px; margin-bottom:8px; }
.pc__c--sm .pc__cs{ height:30px; border-radius:8px; opacity:.9; }
.pc__palh--avoid{ color:#b23a41; margin-top:6px; }
.pc__palh--avoid .ico{ color:#b23a41; }
.pc__row{ font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin-top:5px; word-break:keep-all; }
.pc__row b{ color:#E85B8E; font-weight:800; }
.pc__bridge{ margin-top:12px; padding:12px 14px; background:#fff; border:1px solid var(--line); border-radius:12px;
  font-size:13px; color:var(--ink-soft); line-height:1.6; word-break:keep-all; }
.pc__bridge b{ color:var(--ink); }

/* 퍼스널컬러 — AI 분석 리포트 (큰 사진 + 측정 + 부위 마커) */
.pcr__photowrap{ position:relative; margin:4px auto 14px; max-width:280px; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 12px 30px -14px rgba(0,0,0,.35); }
.pcr__photo{ width:100%; display:block; }
.pcr__scan{ position:absolute; left:0; right:0; height:3px; top:0;
  background:linear-gradient(90deg,transparent,#E85B8E,transparent);
  animation:pcrScan 2.4s ease-in-out infinite; box-shadow:0 0 12px #E85B8E; }
@keyframes pcrScan{ 0%{top:4%;opacity:.2} 50%{top:94%;opacity:1} 100%{top:4%;opacity:.2} }
.pcr__done{ position:absolute; right:8px; bottom:8px; font-size:11px; font-weight:800; color:#fff;
  background:rgba(26,143,99,.92); padding:4px 10px; border-radius:999px; }
/* 부위 분석 마커(척) */
.pcr__mk{ position:absolute; width:11px; height:11px; border:2px solid #fff; border-radius:50%;
  box-shadow:0 0 0 2px rgba(232,98,106,.9); background:rgba(232,98,106,.35); }
.pcr__mk::after{ content:attr(data-l); position:absolute; left:50%; top:-24px; transform:translateX(-50%);
  font-size:9.5px; font-weight:800; color:#fff; background:rgba(0,0,0,.6); padding:2px 6px; border-radius:6px; white-space:nowrap; }
.pcr__mk--fh{ left:50%; top:16%; } .pcr__mk--cheekL{ left:30%; top:52%; }
.pcr__mk--cheekR{ left:70%; top:52%; } .pcr__mk--jaw{ left:50%; top:78%; }

.pcr__report{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:12px; }
.pcr__rh{ font-size:13px; font-weight:800; color:var(--ink); margin-bottom:11px; }
.pcr__detect{ display:flex; align-items:center; gap:10px; margin-bottom:13px; }
.pcr__sw{ width:38px; height:38px; border-radius:9px; border:1px solid rgba(0,0,0,.08); flex:0 0 auto; }
.pcr__dtxt{ font-size:12px; color:var(--ink-soft); line-height:1.45; }
.pcr__dtxt b{ font-family:ui-monospace,monospace; color:var(--ink); font-size:13px; }
.pcr__metric{ margin-top:11px; }
.pcr__mhead{ display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
.pcr__mhead b{ font-size:12px; font-weight:800; color:var(--ink); letter-spacing:.05em; }
.pcr__mhead span{ font-size:11px; color:var(--ink-soft); }
.pcr__track{ position:relative; height:8px; border-radius:999px;
  background:linear-gradient(90deg,#8db6f0,#eceaf4,#f2b98a); }
.pcr__knob{ position:absolute; top:50%; width:16px; height:16px; border-radius:50%; border:2px solid #fff;
  transform:translate(-50%,-50%); box-shadow:0 2px 6px rgba(0,0,0,.25); }
.pcr__verdict{ text-align:center; padding:14px; border-radius:14px; margin-bottom:10px;
  background:linear-gradient(180deg, color-mix(in srgb, #E85B8E 12%, #fff), #fff);
  border:1.5px solid color-mix(in srgb, #E85B8E 30%, var(--line)); }
.pcr__vem{ font-size:28px; }
.pcr__vsub{ display:block; font-size:12px; font-weight:800; color:var(--ink-soft); margin-bottom:2px; }
.pcr__vname{ display:block; font-size:26px; font-weight:900; letter-spacing:-.6px; margin-top:2px; color:var(--ink); }
.pcr__vko{ display:block; font-size:14px; font-weight:800; color:#E85B8E; margin-top:1px; }
.pcr__ven{ display:block; font-size:11.5px; color:var(--ink-soft); letter-spacing:.06em; margin-top:2px; }
.pc__palh{ font-size:14px; font-weight:800; color:var(--ink); margin:16px 0 9px; }
.pc__palh b{ color:#E85B8E; }
/* 베스트/피하면 좋은 색 팔레트를 하나의 테두리 카드로(#112) */
.pcbest{ margin:22px 0 6px; padding:13px 14px 9px; border-radius:16px; background:#fff;
  border:1.5px solid color-mix(in srgb, #E85B8E 32%, #fff); box-shadow:0 12px 26px -20px rgba(232,91,142,.5); }
.pcbest .pc__palh{ margin-top:4px; }
.pcbest .pc__pal{ margin-bottom:12px; }
.pcbest .pc__pal--avoid{ margin-bottom:2px; }

/* 퍼스널컬러 스타일링 상세 (메이크업·헤어·의상) */
.pc__style{ margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.pcs{ background:#fff; border:1px solid var(--line); border-radius:13px; padding:13px 14px; }
/* 메인 카피(메이크업/헤어/네일/스타일링) — 훨씬 크게, 구획 명확 (2026-07-08 사장님) */
.pcs__h{ font-size:21px; font-weight:900; color:var(--ink); letter-spacing:-.5px; margin:6px 0 14px;
  display:flex; align-items:center; gap:8px; padding-bottom:11px; border-bottom:2px solid #f0e2ea; }
/* 퍼스널컬러 세션 번호 배지 */
.pcs__no{ flex:0 0 auto; display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:#E85B8E; color:#fff; font-size:12px; font-weight:900; }
.pc__palh .pcs__no{ width:20px; height:20px; font-size:11px; margin-right:2px; vertical-align:middle; }
.pcs__h .ico{ width:1.15em; height:1.15em; color:#E85B8E; }
.pcs{ margin-top:22px; }
/* 제품 이미지 스와치 */
.pcrank__prod{ flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; }
.prodsw__svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.pcs__prod{ width:22px; height:22px; flex:0 0 auto; }
.pcs__prod .prodsw__svg{ filter:none; }
.pcs__grp{ display:flex; align-items:center; gap:8px 8px; margin-top:12px; flex-wrap:wrap; }
.pcs__lab{ flex:0 0 100%; font-size:11px; font-weight:800; color:var(--ink-soft); letter-spacing:-.2px; margin-bottom:2px; }
.pcs__chip{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink);
  background:var(--brand-softer); border-radius:999px; padding:3px 9px 3px 4px; }
.pcs__dot{ width:15px; height:15px; border-radius:50%; border:1px solid rgba(0,0,0,.1); flex:0 0 auto; }
.pcs__tip{ font-size:12px; color:var(--ink-soft); line-height:1.5; margin-top:9px; word-break:keep-all;
  padding-top:8px; border-top:1px dashed var(--line); }
.pcs__tip b{ color:#E85B8E; }
.pcs__metal{ font-size:12px; font-weight:800; color:#E85B8E; }
/* 퍼스널컬러 실제 색조 제품(12톤별 · 출처는 js/pc-products.js) */
.pcprod__lead{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; word-break:keep-all; margin-bottom:4px; }
.pcprod__row{ display:flex; align-items:flex-start; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); }
.pcprod__cat{ flex:0 0 46px; text-align:center; font-size:11px; font-weight:800; color:#E85B8E;
  background:color-mix(in srgb,#E85B8E 9%,#fff); border-radius:999px; padding:3px 0; margin-top:1px; }
.pcprod__body{ flex:1; min-width:0; }
.pcprod__nm{ display:block; font-size:13.5px; font-weight:800; color:var(--ink); line-height:1.4; word-break:keep-all; }
.pcprod__shade{ display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-top:1px; word-break:keep-all; }
.pcprod__desc{ font-size:12px; color:var(--ink-soft); line-height:1.5; margin-top:3px; word-break:keep-all; }
.pcprod__link{ display:inline-block; font-size:11.5px; color:var(--ink-soft); text-decoration:underline; margin-top:4px; word-break:keep-all; }
.pcprod__note{ font-size:10.5px; color:#a6a6b8; line-height:1.5; margin-top:8px; word-break:keep-all; }

/* 프로필 — 퍼스널컬러 사진 업로드(선택) */
.profile__pc{ margin-top:22px; padding-top:18px; border-top:1px dashed var(--line); }
.profile__opt{ font-style:normal; font-size:10.5px; font-weight:800; color:#fff; background:#c9a24a;
  border-radius:999px; padding:2px 8px; margin-left:4px; vertical-align:middle; }
.profile__opt--req{ background:#7C5CE6; }
.profile__pcsub{ font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin:6px 0 10px; word-break:keep-all; }
.profile__pcsub b{ color:var(--ink); font-weight:800; }
.pcup{ display:block; border:1.5px dashed color-mix(in srgb,#c9a24a 55%,var(--line)); border-radius:14px;
  cursor:pointer; overflow:hidden; background:#fffdf7; }
.pcup__empty{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:22px 14px; text-align:center; }
.faceguide{ width:88px; margin-bottom:4px; color:#c9a24a; }
.faceguide svg{ width:100%; height:auto; display:block; }
.faceguide--overlay{ position:absolute; inset:0; width:auto; height:100%; display:grid; place-items:center; pointer-events:none; }
.faceguide--overlay svg{ height:66%; width:auto; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.pcup__ico{ font-size:26px; }
.pcup__empty b{ font-size:14px; font-weight:800; color:var(--ink); }
.pcup__hint{ font-size:11.5px; color:var(--ink-soft); }
.pcup__preview{ position:relative; }
.pcup__preview img{ width:100%; max-height:280px; object-fit:cover; display:block; }
.pcup__remove{ position:absolute; top:8px; right:8px; width:28px; height:28px; border:none; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; font-size:14px; cursor:pointer; }
.pcup__done{ position:absolute; left:8px; bottom:8px; font-size:11.5px; font-weight:800; color:#fff;
  background:rgba(26,143,99,.9); padding:4px 9px; border-radius:999px; }
.pcup__disc{ font-size:11px; color:#a6a6b4; margin-top:7px; word-break:keep-all; }
.profile__pcwarn{ font-size:12px; color:#b8860b; background:#fff8e6; border:1px solid #f0e2b8; border-radius:10px;
  padding:9px 11px; margin:8px 0 10px; line-height:1.5; word-break:keep-all; }
.profile__pcwarn b{ color:#a06f00; }

/* 결핍 목록 (방치 시 변화) */
.deficit{ margin-top:16px; padding:14px 15px; border-radius:14px; background:#fdf3f3; border:1px solid #f6dede; }
.deficit__h{ font-size:14px; font-weight:900; color:#c0392b; margin-bottom:10px; word-break:keep-all; }
.deficit__list{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.deficit__list li{ font-size:13px; color:var(--ink); line-height:1.5; padding-left:20px; position:relative; word-break:keep-all; }
.deficit__list li::before{ content:"⚠"; position:absolute; left:0; top:1px; font-size:11px; }

/* 5년 예측 (성장클리닉식 결핍 강제) */
.fcast{ margin-top:16px; padding:15px; border-radius:14px; background:#fbf7f2; border:1px solid #f0e2d2; }
.fcast--improve{ background:#f2fbf6; border-color:#cfeeda; }
.fcast__h{ font-size:14px; font-weight:900; color:var(--ink); margin-bottom:4px; word-break:keep-all; }
.fcast__h b{ color:#c0392b; }
.fcast--improve .fcast__h b{ color:#178f63; }
.fcast__sub{ font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:11px; word-break:keep-all; }
.fcast__two{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fcast__col{ padding:11px 12px; border-radius:11px; }
.fcast__col--no{ background:#fdeceb; border:1px solid #f6d5d2; }
.fcast__col--yes{ background:#eafaf1; border:1px solid #cfeeda; }
.fcast__col p{ font-size:12px; line-height:1.5; color:var(--ink); word-break:keep-all; margin-top:5px; }
.fcast__ct{ font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px; }
.fcast__col--no .fcast__ct{ color:#fff; background:#e0564e; }
.fcast__col--yes .fcast__ct{ color:#fff; background:#2bb37e; }
.fcast__borrow{ margin-top:11px; padding:11px 12px; background:#fff; border:1px solid var(--line); border-radius:11px;
  font-size:12.5px; color:var(--ink); line-height:1.6; word-break:keep-all; }
.fcast__borrow b{ color:#c0392b; font-weight:800; }
.fcast__force{ margin-top:9px; font-size:13px; font-weight:700; color:var(--ink); text-align:center; word-break:keep-all; }
.fcast__force b{ color:#c0392b; }

/* 워너비 브릿지 (관리하면 이런 피부로) */
.wanna{ margin-top:14px; padding:16px; border-radius:14px; text-align:center;
  background:linear-gradient(180deg,#f4fbf7,#fff); border:1px solid #d6efe1; }
.wanna__lead{ font-size:13.5px; font-weight:700; color:var(--ink); word-break:keep-all; }
.wanna__lead b{ color:#178f63; font-weight:800; }
.wanna__grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
.wanna__pill{ display:flex; align-items:center; gap:6px; justify-content:center; padding:11px 8px;
  background:#fff; border:1px solid #d6efe1; border-radius:10px; font-size:12.5px; }
.wanna__pill b{ font-weight:800; color:var(--ink); }
.wanna__bridge{ font-size:13px; font-weight:700; color:var(--ink-soft); word-break:keep-all; }
.wanna__bridge b{ color:var(--type-ink); }

/* 8-b. 성분 버튼형 (누적 선택) + 개선 점수 */
.simscore{ display:flex; align-items:center; justify-content:center; gap:10px; margin:12px 0 4px;
  padding:11px; background:var(--brand-softer); border-radius:12px; transition:background .3s; }
.simscore span{ font-size:13px; font-weight:800; color:var(--ink-soft); }
.simscore b{ font-size:26px; font-weight:900; color:var(--ink-soft); letter-spacing:-.5px; transition:color .3s, transform .2s; }
.simscore.is-up{ background:#eafaf1; }
.simscore.is-up b{ color:#2bb37e; transform:scale(1.06); }
.simscore__max{ font-size:12px; font-weight:800; color:#9a9aa8; font-style:normal; }
.simscore__max b{ font-size:15px; color:#2bb37e; }
/* 진행바(어디까지 오를 수 있는지) */
.simbar{ height:8px; border-radius:999px; background:#e6e6ef; overflow:hidden; margin:2px 0 4px; }
.simbar__fill{ height:100%; border-radius:999px; width:0%;
  background:linear-gradient(90deg,#9fd8bf,#2bb37e); transition:width .7s ease; }
.ingbtn__wrap{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.ingbtn{ flex:1 1 auto; min-width:calc(50% - 4px); display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:9px 12px; border:1.5px solid var(--line); border-radius:11px; background:#fff; font-family:inherit;
  font-size:13px; font-weight:800; color:var(--ink); cursor:pointer; transition:border-color .15s, background .15s; }
.ingbtn small{ font-size:11px; font-weight:600; color:var(--ink-soft); }
.ingbtn.is-sel{ border-color:var(--type-ink); background:color-mix(in srgb, var(--type-color) 10%, #fff); }
.ingbtn.is-sel small{ color:var(--type-ink); }
.sim__cap{ margin-top:11px; text-align:center; word-break:keep-all; line-height:1.6; }

/* 8. 개별 성분 발라보기 리스트 */
.ingx__list{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.ingx__row{ display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; column-gap:10px;
  width:100%; padding:11px 13px; text-align:left; background:#fff; border:1px solid var(--line);
  border-radius:12px; cursor:pointer; transition:border-color .15s, background .15s; }
.ingx__row.is-sel{ border-color:var(--type-ink); background:color-mix(in srgb, var(--type-color) 8%, #fff); }
.ingx__name{ grid-column:1; grid-row:1; font-size:13.5px; font-weight:800; color:var(--ink); }
.ingx__benefit{ grid-column:1; grid-row:2; font-size:12px; color:var(--ink-soft); line-height:1.45; margin-top:2px; word-break:keep-all; }
.ingx__go{ grid-column:2; grid-row:1 / 3; align-self:center; font-size:11.5px; font-weight:800; color:var(--type-ink);
  white-space:nowrap; border:1px solid color-mix(in srgb, var(--type-color) 40%, var(--line)); border-radius:999px; padding:5px 11px; }
.ingx__row.is-sel .ingx__go{ background:var(--type-ink); color:#fff; border-color:var(--type-ink); }

/* 모공 집중 섹션 */
.result__pore{ background:linear-gradient(180deg,#fef6f0,#fff); border-color:#f2ddd0; }
.pore__intro{ font-size:13.5px; color:var(--ink); line-height:1.65; word-break:keep-all; }
.pore__types{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.pore__type{ padding:11px 13px; background:#fff; border:1px solid var(--line); border-radius:12px; }
.pore__type b{ font-size:13.5px; font-weight:800; color:var(--ink); }
.pore__type p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:3px 0 4px; word-break:keep-all; }
.pore__who{ font-size:11px; font-weight:700; color:#c07a3a; background:#fdf0e5; border-radius:999px; padding:2px 9px; }
.pore__age{ display:flex; gap:9px; align-items:flex-start; margin-top:12px; padding:12px 13px; background:#fff8ee; border:1px solid #f0e2b8; border-radius:12px; }
.pore__age b{ font-size:13px; color:#a06f00; display:block; margin-bottom:3px; }
.pore__age p{ font-size:12.5px; color:var(--ink); line-height:1.55; word-break:keep-all; }
.pore__h{ font-size:13px; font-weight:800; color:var(--ink); margin:14px 0 8px; display:flex; align-items:center; }
.pore__care ul{ list-style:none; display:flex; flex-direction:column; gap:7px; }
.pore__care li{ font-size:12.5px; color:var(--ink); line-height:1.5; padding-left:18px; position:relative; word-break:keep-all; }
.pore__care li::before{ content:"•"; position:absolute; left:4px; color:#c07a3a; font-weight:900; }
.pore__ings{ margin-top:4px; }
.pore__ing{ display:block; font-size:12.5px; color:var(--ink-soft); line-height:1.5; padding:6px 0; border-top:1px dashed var(--line); word-break:keep-all; }
.pore__ing b{ color:var(--ink); }

/* 비포/애프터 일러스트 비교 */
.ba{ margin:14px 0; padding:14px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.ba__h{ font-size:13.5px; font-weight:800; color:var(--ink); margin-bottom:10px; }
.ba__row{ display:flex; align-items:center; justify-content:center; gap:8px; }
.ba__col{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; }
.ba__face{ width:100%; max-width:118px; border-radius:14px; padding:8px; }
.ba__face--b{ background:#f1f1f5; }
.ba__face--a{ background:linear-gradient(180deg, color-mix(in srgb,var(--type-color,#7C5CE6) 14%,#fff), #fff); border:1.5px solid color-mix(in srgb,var(--type-color,#7C5CE6) 30%,var(--line)); }
.bface{ width:100%; height:auto; display:block; }
.ba__face--photo{ aspect-ratio:1; padding:0; overflow:hidden; }
.ba__face--photo .ba__img{ width:100%; height:100%; object-fit:cover; display:block; }
.ba__lab{ font-size:11.5px; font-weight:800; color:var(--ink-soft); }
.ba__lab--a{ color:var(--type-ink,#b23a41); }
.ba__arrow{ flex:0 0 auto; color:var(--type-ink,#b23a41); }
.ba__arrow .ico{ width:1.4em; height:1.4em; margin:0; }
.ba__desc{ font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin-top:12px; word-break:keep-all; }
.ba__desc b{ color:var(--ink); }

/* 스타일 항목별 베스트 순위 제품 */
.pcrank{ margin-top:12px; background:#fafafd; border:1px solid var(--line); border-radius:12px; padding:11px 12px; }
.pcrank + .pcrank{ margin-top:8px; }
.pcrank__h{ display:flex; align-items:center; font-size:12.5px; font-weight:800; color:var(--ink); margin-bottom:6px; }
.pcrank__h .ico{ width:1em; height:1em; color:#d4a017; }
.pcrank__row{ display:flex; align-items:center; gap:9px; padding:8px 6px; border-radius:9px; text-decoration:none; }
.pcrank__row:not(:last-of-type){ border-bottom:1px solid var(--line); }
.pcrank__row--1{ background:color-mix(in srgb,#E85B8E 8%,#fff); }
.pcrank__no{ flex:0 0 18px; text-align:center; font-size:13px; font-weight:900; color:#b8b8c6; }
.pcrank__row--1 .pcrank__no{ color:var(--type-ink,#b23a41); }
.pcrank__dot{ width:18px; height:18px; border-radius:50%; flex:0 0 auto; border:1px solid rgba(0,0,0,.08); }
.pcrank__nm{ flex:1; font-size:13px; font-weight:800; color:var(--ink); }
.pcrank__nm span{ font-size:11px; font-weight:600; color:var(--ink-soft); }
.pcrank__pct{ font-size:13px; font-weight:900; color:var(--ink); white-space:nowrap; }
.pcrank__pct small{ font-size:10px; font-weight:800; color:var(--ink-soft); }
.pcrank__row--1 .pcrank__pct{ color:#c0392b; }
.pcrank__go{ flex:0 0 auto; color:var(--ink-soft); }
.pcrank__go .ico{ width:.95em; height:.95em; }
.pcrank__note{ font-size:10.5px; color:#a6a6b8; margin-top:6px; }

/* 대표 캐리커처(섹션 상단 히어로) */
.celebhero{ margin:2px 0 15px; border-radius:16px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 12px 28px -20px rgba(0,0,0,.35); }
.celebhero img{ width:100%; display:block; }
/* AI 실사 메이크업(FLUX · 온디맨드) */
.aimk{ position:relative; overflow:hidden; margin:18px 0 4px; padding:16px; border-radius:16px; text-align:center;
  background:linear-gradient(180deg, color-mix(in srgb, var(--type-color) 8%, #fff), #fff);
  border:1.5px solid color-mix(in srgb, var(--type-color) 22%, var(--line)); }
.aimk--locked .aimk__stage, .aimk--locked .aimk__cap, .aimk--locked .aimk__btn, .aimk--locked .aimk__disc{ filter:blur(4px); opacity:.4; pointer-events:none; }
/* AI 메이크업 교차공유 락 오버레이 */
.aimk__lockov{ position:absolute; inset:0; z-index:4; display:grid; place-items:center; padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.92)); border-radius:inherit; }
.aimklk__in{ max-width:300px; text-align:center; }
.aimklk__lockic{ color:var(--type-ink); }
.aimklk__lockic .ico{ width:30px; height:30px; }
.aimklk__h{ font-size:15px; font-weight:900; color:var(--ink); line-height:1.5; margin:6px 0 8px; word-break:keep-all; }
.aimklk__h b{ color:var(--type-ink); }
.aimklk__prog{ font-size:12.5px; font-weight:800; color:var(--ink-soft); margin:0 0 12px; }
.aimklk__st{ color:#b0b0be; }
.aimklk__st.is-done{ color:#2bb37e; }
.aimklk__btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:13px;
  border:none; border-radius:12px; font-size:14.5px; font-weight:900; cursor:pointer; margin-bottom:8px; }
.aimklk__btn .ico{ width:1.05em; height:1.05em; }
.aimklk__btn--kakao{ background:#FEE500; color:#3a1d1d; }
.aimklk__btn--insta{ background:linear-gradient(45deg,#f09433,#dc2743,#bc1888); color:#fff; }
.aimklk__note{ display:block; font-size:11px; color:#a6a6b4; line-height:1.5; margin-top:4px; word-break:keep-all; }
.aimklk__note b{ color:var(--type-ink); }
/* 공유 선택 시트(카톡/인스타) */
.sharesheet{ position:fixed; inset:0; z-index:9999; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.45); animation:sheetFade .2s ease; }
@keyframes sheetFade{ from{ opacity:0; } to{ opacity:1; } }
.sharesheet__box{ width:100%; max-width:440px; background:#fff; border-radius:22px 22px 0 0; padding:20px 18px 26px;
  box-shadow:0 -10px 40px rgba(0,0,0,.2); }
.sharesheet__t{ text-align:center; font-size:15px; font-weight:900; color:var(--ink); margin:0 0 14px; }
.sharesheet__btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:16px;
  border:none; border-radius:14px; font-size:16px; font-weight:900; cursor:pointer; margin-bottom:10px; }
.sharesheet__btn .ico{ width:1.1em; height:1.1em; }
.sharesheet__btn--kakao{ background:#FEE500; color:#3a1d1d; }
.sharesheet__btn--insta{ background:linear-gradient(45deg,#f09433,#dc2743,#bc1888); color:#fff; }
.sharesheet__cancel{ width:100%; padding:14px; border:none; border-radius:14px; background:#f0f0f4; color:#6a6a7e; font-size:15px; font-weight:800; cursor:pointer; }
/* ⚠ display:flex 금지 — flex면 텍스트 조각마다 별개 아이템이 돼 제목이 길어질 때 조각조각 줄바꿈된다(2026-07-22 깨짐).
   일반 블록 + 가운데 정렬로 자연스럽게 흐르게 한다. */
.aimk__h{ font-size:15px; font-weight:900; color:var(--ink); margin:0 0 12px; text-align:center; line-height:1.55; word-break:keep-all; }
.aimk__h b{ color:var(--type-ink); }
.aimk__h .ico{ width:1.15em; height:1.15em; color:var(--type-ink); vertical-align:-0.2em; margin-right:4px; }
.aimk__beta{ display:inline-block; vertical-align:0.08em; margin-left:5px; font-size:10px; font-weight:900; color:#fff; background:var(--type-color); padding:2px 7px; border-radius:999px; letter-spacing:.04em; }
.aimk__stage{ position:relative; width:72%; max-width:280px; margin:0 auto 10px; border-radius:14px; overflow:hidden; background:#eee; }
.aimk__img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition:opacity .3s; }
.aimk.is-loading .aimk__img{ opacity:.5; }
/* 10년 뒤 = [원본|AI] 2:1 비교 이미지이므로 가로로 넓게 표시(크롭 방지) */
.aimk--fut.is-done .aimk__stage{ width:100%; max-width:420px; }
.aimk--fut.is-done .aimk__img{ aspect-ratio:auto; object-fit:contain; }
.aimk__load{ position:absolute; inset:0; display:grid; place-items:center; }
.aimk__load[hidden]{ display:none; }
/* 필수성분 배지(성분 버튼) + 제품카드 필수/기타 */
.ingbtn{ position:relative; }
.ingbtn--filsu{ padding-right:46px; }
.ingbtn__badge{ position:absolute; top:9px; right:9px; z-index:1; font-size:9.5px; font-weight:900; color:#fff;
  background:#2b2b33; padding:2px 7px; border-radius:999px; letter-spacing:-.2px; transition:background .15s; }
.ingbtn.is-sel .ingbtn__badge{ background:var(--type-color); }
.t10__cmini{ display:block; font-size:11px; font-weight:800; color:var(--type-ink); margin-top:3px; }
.t10__cmini b{ color:var(--type-ink); }
.aimk__spin{ width:38px; height:38px; border-radius:50%; border:4px solid #fff; border-top-color:var(--type-color); animation:aimkSpin .8s linear infinite; box-shadow:0 2px 10px rgba(0,0,0,.2); }
@keyframes aimkSpin{ to{ transform:rotate(360deg); } }
.aimk__cap{ font-size:13px; font-weight:700; color:var(--ink-soft); margin:0 0 12px; word-break:keep-all; }
.aimk__cap b{ color:var(--type-ink); }
.aimk__btn{ display:block; width:100%; padding:15px; border:none; border-radius:13px; cursor:pointer;
  background:var(--type-color); color:#fff; font-size:15px; font-weight:900; letter-spacing:-.3px;
  box-shadow:0 14px 30px -12px color-mix(in srgb, var(--type-color) 75%, #000); transition:transform .15s; }
.aimk__btn:hover{ transform:translateY(-1px); }
.aimk__btn:disabled{ opacity:.6; cursor:default; transform:none; }
.aimk__disc{ font-size:10.5px; color:#a6a6b4; margin:9px 0 0; line-height:1.5; word-break:keep-all; }
/* AI 메이크업 결과 저장/공유 버튼 */
.aimk__actions{ display:flex; gap:8px; margin-top:12px; }
.aimk__actions[hidden]{ display:none; }
.aimk__act{ flex:1; padding:11px 6px; border-radius:11px; font-family:inherit; font-size:12.5px; font-weight:800;
  cursor:pointer; border:1.5px solid var(--line); background:#fff; color:var(--ink); white-space:nowrap; }
.aimk__act--kakao{ background:#FEE500; border-color:#FEE500; color:#3a1d1d; }
.aimk__act--insta{ background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); border-color:transparent; color:#fff; }
/* 제품 비교 (1~3위 · 성분수+가격) */
.prodcmp{ display:flex; flex-direction:column; gap:12px; margin:10px 0 4px; }
.prodcmp__row{ padding:14px 15px; border-radius:16px; border:1px solid var(--line); background:#fff; }
.prodcmp__row--ours{ border:2px solid var(--type-color);
  background:linear-gradient(180deg, color-mix(in srgb,var(--type-color) 9%,#fff), #fff);
  box-shadow:0 16px 34px -18px color-mix(in srgb,var(--type-color) 60%,#000); }
.prodcmp__head{ display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.prodcmp__rk{ flex:0 0 auto; display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:#eef0f4; color:#8a8a9c; font-size:14px; font-weight:900; }
.prodcmp__row--ours .prodcmp__rk{ background:var(--type-color); color:#fff; width:30px; height:30px; }
.prodcmp__row--ours .prodcmp__rk .ico{ width:16px; height:16px; }
.prodcmp__nm{ flex:1; min-width:0; }
.prodcmp__nm b{ display:block; font-size:14px; font-weight:800; color:var(--ink); line-height:1.3; word-break:keep-all; }
.prodcmp__nm span{ font-size:11.5px; color:var(--ink-soft); }
.prodcmp__price{ flex:0 0 auto; font-size:14px; font-weight:900; color:var(--ink); white-space:nowrap; }
.prodcmp__row--ours .prodcmp__price{ color:var(--type-ink); }
.prodcmp__barwrap{ display:flex; align-items:center; gap:10px; }
.prodcmp__bar{ height:22px; border-radius:7px; background:#dfe1ea; min-width:10%; transition:width .6s ease; }
.prodcmp__row--ours .prodcmp__bar{ background:var(--type-color); }
.prodcmp__cnt{ font-size:13px; font-weight:800; color:var(--ink-soft); white-space:nowrap; }
.prodcmp__cnt b{ font-size:18px; color:var(--ink); }
.prodcmp__row--ours .prodcmp__cnt b{ color:var(--type-ink); }
.prodcmp__mine, .prodcmp__note{ font-size:12px; line-height:1.55; margin:10px 0 0; word-break:keep-all; }
.prodcmp__mine{ color:var(--type-ink); font-weight:700; }
.prodcmp__mine b{ font-weight:900; }
.prodcmp__note{ color:var(--ink-soft); }
.prodcmp__note b{ color:var(--ink); font-weight:800; }
.prodcmp__cta{ display:inline-block; margin-left:2px; font-weight:900; color:var(--type-ink); white-space:nowrap; }
.prodcmp__punch{ display:flex; gap:9px; align-items:flex-start; margin-top:14px; padding:15px 16px; border-radius:15px;
  background:color-mix(in srgb, var(--type-color) 10%, #fff);
  border:1px solid color-mix(in srgb,var(--type-color) 24%,var(--line));
  font-size:13.5px; line-height:1.6; color:var(--ink); word-break:keep-all; }
.prodcmp__punch b{ color:var(--type-ink); }
.prodcmp__punch .ico{ flex:0 0 auto; width:1.25em; height:1.25em; color:var(--type-ink); margin-top:1px; }
/* 셀럽 카드 — 이니셜 원형 + 카드 배경 + 이름 + 설명 (실사진 없이 시각화) */
.celebcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px 10px; margin:8px 0 12px; }
.celebcard{ text-align:center; padding:14px 8px 13px; border-radius:16px;
  background:color-mix(in srgb, var(--type-color) 6%, #fff);
  border:1px solid color-mix(in srgb, var(--type-color) 15%, #f0eaec); }
.celebcard__init{ display:grid; place-items:center; width:52px; height:52px; margin:0 auto 9px; border-radius:50%;
  font-size:23px; font-weight:900; color:var(--type-ink);
  background:color-mix(in srgb, var(--type-color) 15%, #fff); }
.celebcard__name{ display:block; font-size:14px; font-weight:800; color:var(--ink); }
.celebcard__note{ font-size:11px; color:var(--ink-soft); line-height:1.45; margin-top:4px; word-break:keep-all; }
/* 퍼스널컬러 셀럽: 톤 색(브론즈) */
/* PC 셀럽 = MBTI 셀럽과 동일: 하나의 테두리 + hero 배너 + 내부 카드 테두리 제거 */
.pcs.celeb--pc{ border-radius:22px !important; overflow:hidden; padding:8px 14px 16px !important;
  border:1px solid #ece0d4 !important; box-shadow:0 12px 30px -20px rgba(0,0,0,.14); }
.celeb--pc .celebhero{ margin:-8px -14px 14px !important; border:none !important;
  border-radius:22px 22px 0 0 !important; box-shadow:none !important; }
.celeb--pc .celebcard{ background:transparent !important; border:none !important; padding:2px 4px !important; }
.celeb--pc .celebcard__init{ background:color-mix(in srgb, #b98a5a 16%, #fff); color:#8a5a2a; }

/* 셀럽 이름 칩(이미지 없이 텍스트 매칭) */
.celebchips{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 10px; }
.celebchip{ font-size:14px; font-weight:800; color:var(--ink); background:color-mix(in srgb,var(--type-color,#7C5CE6) 9%,#fff);
  border:1.5px solid color-mix(in srgb,var(--type-color,#7C5CE6) 26%,var(--line)); border-radius:999px; padding:8px 14px; }

/* 이미지 셀럽 (16personalities 스타일 · 텍스트만) */
.celeb__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px; }
.celeb__item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px; }
.celeb__ava{ width:66px; height:66px; border-radius:16px; overflow:hidden; display:block; }
.celeb__ava .cava{ width:100%; height:auto; display:block; }
.celeb__ava .cava-img{ width:100%; height:100%; object-fit:cover; display:block; }
.celeb__name{ font-size:12.5px; font-weight:800; color:var(--ink); word-break:keep-all; line-height:1.2; }
.celeb__note{ font-size:10.5px; color:var(--ink-soft); line-height:1.35; word-break:keep-all; }
.celeb__grid--pc{ margin-top:4px; }

/* 촬영 예시 (가이드 맞춤법) */
.pcex{ display:flex; gap:14px; align-items:center; padding:12px; margin-bottom:12px;
  background:#fbfbfd; border:1px solid var(--line); border-radius:14px; }
.pcex__imgwrap{ position:relative; width:100px; height:100px; flex:0 0 auto; border-radius:12px; overflow:hidden; }
.pcex__img{ width:100%; height:100%; object-fit:cover; display:block; }
.pcex__guide{ position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
/* 촬영 가이드 도식(얼굴+마커 함께 그려 완벽 정렬) */
.pcex__diagram{ width:100%; height:100%; display:block; }
.pcex__txt b{ font-size:13.5px; font-weight:800; color:var(--ink); }
.pcex__list{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.pcex__list li{ font-size:12px; color:var(--ink-soft); line-height:1.4; display:flex; align-items:center; gap:6px; word-break:keep-all; }
.pcex__list li span{ width:7px; height:7px; border-radius:50%; background:#ffd66e; flex:0 0 auto; }
.pcex__list li b{ font-size:12px; color:var(--ink); }

/* 촬영/업로드 두 버튼 */
.pcup__opts{ display:flex; gap:8px; margin-bottom:10px; }
.pcup__opt{ flex:1; display:flex; align-items:center; justify-content:center; gap:5px; padding:12px;
  border-radius:12px; font-family:inherit; font-size:14px; font-weight:800; cursor:pointer; border:1.5px solid var(--line); }
.pcup__ico{ width:18px; height:18px; flex:0 0 auto; }
.pcup__opt--cam{ background:var(--brand,#45475f); color:#fff; border-color:transparent; }
.pcup__opt--file{ background:#fff; color:var(--ink); }

/* 인페이지 카메라 모달 */
.cammodal{ position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.92); display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:20px; }
.cammodal[hidden]{ display:none; }
.cammodal__inner{ width:100%; max-width:420px; display:flex; flex-direction:column; align-items:center; }
.cammodal__title{ color:#fff; font-size:15px; font-weight:700; margin-bottom:14px; text-align:center; }
.cammodal__title b{ color:#ffd66e; }
.cammodal__stage{ position:relative; width:100%; aspect-ratio:4/5; background:#000; border-radius:20px; overflow:hidden; }
.cammodal__stage video{ width:100%; height:100%; object-fit:cover; transform:scaleX(-1); background:#111; }
.camguide{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.camguide svg{ height:66%; width:auto; filter:drop-shadow(0 1px 4px rgba(0,0,0,.6)); }
.cammodal__err{ position:absolute; left:16px; right:16px; bottom:16px; color:#fff; font-size:13px; line-height:1.5;
  background:rgba(200,60,60,.85); padding:12px; border-radius:12px; text-align:center; word-break:keep-all; }
.cammodal__ctrls{ display:flex; gap:12px; margin-top:18px; width:100%; }
.cammodal__btn{ flex:1; padding:16px; border-radius:14px; font-family:inherit; font-size:15px; font-weight:800; cursor:pointer; border:none; }
.cammodal__btn--cancel{ background:rgba(255,255,255,.15); color:#fff; flex:0 0 34%; }
.cammodal__btn--shot{ background:#fff; color:#111; }

/* 최상단 인트로 (목차명 + 소개) */
.wf2__kicker{ display:inline-flex; align-items:center; font-size:12px; font-weight:900; letter-spacing:.3px;
  color:var(--brand,#45475f); background:var(--brand-soft,#eef0fb); padding:5px 12px; border-radius:999px; margin-bottom:10px; }
.wf2__kicker .ico{ width:1em; height:1em; }
/* 강한 후킹 경고형 kicker */
.wf2__kicker--warn{ color:#c0392b; background:#fdecea; gap:5px; font-size:12.5px; }
.wf2__kicker--warn .ico{ color:#e04b3a; width:1.15em; height:1.15em; }
/* 강조 = 크게: 경고 문구 크게 */
.wf2__warnbig{ display:flex; align-items:center; justify-content:center; gap:8px; text-align:center;
  font-size:27px; font-weight:900; letter-spacing:-.8px; line-height:1.28; color:#d63031; margin-bottom:12px; word-break:keep-all; }
.wf2__warnbig .ico{ width:1.1em; height:1.1em; color:#e04b3a; flex:0 0 auto; }
/* 절(쉼표) 단위 줄바꿈용 인라인블록 */
.cw{ display:inline-block; }
.wf2__h{ font-size:24px; font-weight:900; letter-spacing:-0.6px; color:var(--ink); margin-bottom:14px; word-break:keep-all; }
.wf2__h b{ color:#7C5CE6; }
/* 전문성 신뢰 문단 */
.wf2__cred{ font-size:13.5px; line-height:1.68; color:#41414f; word-break:keep-all; margin-bottom:18px;
  padding:14px 16px; background:linear-gradient(180deg,#f3f6ff,#fbfbff); border:1px solid #dfe6fb; border-radius:14px; }
.wf2__cred b{ color:var(--ink); font-weight:800; }
.wf2__h b{ color:var(--brand,#45475f); }
/* 스크롤 안내 — 위아래 간격 3배 + 프레임/배경 다르게 (눈에 띄게) */
.wf2__scroll{ text-align:center; font-size:14px; font-weight:800; color:#5a5a70; margin:48px 0 20px;
  padding:15px 16px; background:linear-gradient(180deg,#f0f2ff,#f7f4ff); border:1.5px dashed #c9cdf0; border-radius:14px; }
.wf2__scroll b{ color:var(--brand,#5a4ad0); }
/* 인트로 게이트 — 소개만 먼저, 버튼/스와이프로 결과 공개 */
.result__inner.is-gated > *:not(.result__whyfirst){ display:none !important; }
.wf2__gatebtn{ display:block; width:100%; margin:20px 0 2px; padding:17px; border:none; border-radius:14px;
  background:var(--type-color); color:#fff; font-size:16px; font-weight:900; letter-spacing:-.3px; cursor:pointer;
  box-shadow:0 16px 32px -12px color-mix(in srgb, var(--type-color) 75%, #000); transition:transform .15s; }
.wf2__gatebtn:hover{ transform:translateY(-1px); }
.wf2__gatebtn:active{ transform:translateY(1px); }
.wf2__gatearrow{ display:inline-block; margin-left:5px; animation:gateBob 1.3s ease-in-out infinite; }
@keyframes gateBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(3px); } }
/* 결과(히어로) — 중립 배너. 포인트색은 뱃지·라벨 '점'에만 살짝 */
.result__hero{ margin-top:4px; padding:26px 18px 28px !important;
  background:#f7f7fb; border:1px solid #ececf2; border-radius:24px; box-shadow:none; }
.result__herohead{ display:inline-block; font-size:13px; font-weight:900; color:var(--type-ink); background:#fff;
  border:1.5px solid color-mix(in srgb, var(--type-color) 30%, #e6e6ee);
  padding:6px 16px; border-radius:999px; margin-bottom:16px; letter-spacing:.02em; }
.result__badge{ font-size:40px !important; }
.result__title{ font-size:30px !important; }
/* 코드 읽는 법(4축 알파벳 근거) — 히어로 카드 하단 */
.result__codekey{ margin:18px auto 0; max-width:290px; padding-top:16px;
  border-top:1px dashed color-mix(in srgb, var(--type-color) 28%, #dcdce4); }
.codekey__head{ font-size:12px; font-weight:800; color:var(--ink-soft); text-align:center; margin-bottom:12px; }
.codekey__head b{ color:var(--type-ink); font-weight:900; letter-spacing:.04em; }
.codekey__head span{ font-weight:700; color:#b4b4c0; }
.codekey__rows{ display:flex; flex-direction:column; gap:8px; }
.codekey__row{ display:flex; align-items:center; gap:9px; }
.codekey__l{ flex:0 0 auto; width:27px; height:27px; display:grid; place-items:center; border-radius:8px;
  background:#eee9fb; color:#6750a4; font-size:14px; font-weight:900; }
.codekey__ko{ font-size:13.5px; font-weight:800; color:var(--ink); letter-spacing:-.2px; }
.codekey__en{ font-size:11px; font-weight:700; color:#a8a8b6; font-style:italic; }
.codekey__ax{ margin-left:auto; flex:0 0 auto; font-size:10.5px; font-weight:800; color:var(--ink-soft);
  background:#eeeef3; padding:2px 8px; border-radius:999px; }
/* 내 피부 특징 부제(긴 설명은 목차명 아닌 리드로) */
.why__lead{ font-size:16px; font-weight:800; color:var(--ink); line-height:1.45; letter-spacing:-.3px;
  margin:2px 0 14px; word-break:keep-all; }

/* 최상단 소개 — 연구원 캐릭터 + 상하 카드(테두리 안에 하단 설명) */
.wf2__researcher{ display:flex; justify-content:center; margin-bottom:10px; }
.wf2__researcher img{ width:150px; height:150px; object-fit:cover; border-radius:20px;
  box-shadow:0 14px 34px -18px rgba(80,70,140,.5); }
.wf2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* 상하 스택 배치(피부 MBTI 상단) */
.wf2--stack{ grid-template-columns:1fr; gap:12px; margin-top:4px; }
.wf2__card{ display:flex; flex-direction:column; align-items:center; gap:9px; padding:28px 14px 24px; border-radius:18px; text-align:center; }
.wf2--stack .wf2__card{ align-items:stretch; text-align:left; padding:18px 18px 18px; gap:12px; }
.wf2__card--base{ background:linear-gradient(180deg,#eee7fb,#fff); border:1.5px solid #b6a2df; }
.wf2__card--color{ background:linear-gradient(180deg,#f5f3f6,#fff); border:1.5px solid #dfdbe3; }
.wf2__cardtop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.wf2__name{ font-size:23px; font-weight:900; letter-spacing:-0.8px; color:var(--ink); line-height:1.1; }
.wf2__role{ font-size:13.5px; font-weight:800; color:var(--ink-soft); }
.wf2__card--base .wf2__role{ color:#6750a4; }
.wf2__card--color .wf2__role{ color:#77717e; }
.wf2__pick{ font-size:13px; font-weight:800; color:#fff; border-radius:999px; padding:7px 14px; white-space:nowrap; flex:0 0 auto; }
.wf2__pick--base{ background:#6750a4; }
.wf2__pick--color{ background:#ece8ef; color:#615a6a; }
/* 테두리 안 하단 설명 */
.wf2__cardbody{ font-size:13.5px; color:#4a4a58; line-height:1.65; word-break:keep-all;
  padding-top:12px; border-top:1px dashed rgba(0,0,0,.1); }
.wf2__cardbody b{ color:var(--ink); font-weight:800; }
.demoangle{ display:flex; align-items:flex-start; gap:10px; margin:12px 0 16px; padding:14px 15px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--type-color) 12%,#fff), #fff);
  border:1.5px solid color-mix(in srgb,var(--type-color) 30%,var(--line)); border-radius:14px; }
.demoangle .ico{ color:var(--type-ink); width:1.3em; height:1.3em; flex:0 0 auto; margin-top:1px; }
.demoangle b{ display:block; font-size:12px; font-weight:900; color:var(--type-ink); margin-bottom:3px; }
.demoangle p{ font-size:14.5px; font-weight:800; color:var(--ink); line-height:1.5; word-break:keep-all; margin:0; }
.deficit__focus{ font-size:13px; color:var(--ink); line-height:1.6; margin:2px 0 10px; word-break:keep-all; opacity:.9; }

/* 관리 후 예상 나이(후킹) */
.score__age--care{ background:#eafaf1 !important; border:1px solid #bfe9d2 !important; }
.score__age--care .score__age-val em{ font-style:normal; color:#2bb37e; font-size:1.15em; }

/* 네이버 연동 섹션(크게·판매 유도) */
.result__naverbox{ margin:0; }
.nvbig{ background:linear-gradient(180deg,#eafbf0,#fff); border:2px solid #03c75a; border-radius:20px; padding:24px 20px; text-align:center;
  box-shadow:0 14px 36px -20px rgba(3,199,90,.55); }
.nvbig__lead{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:13.5px; font-weight:800; color:#0a8a43; }
.nvbig__lead .ico{ color:#03c75a; }
.nvbig__title{ font-size:26px; font-weight:900; letter-spacing:-0.8px; color:var(--ink); margin:8px 0 6px; }
.nvbig__title b{ color:#03c75a; }
.nvbig__sub{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; word-break:keep-all; margin-bottom:16px; }
.nvbig__sub b{ color:var(--ink); }
.nvbig__btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:17px;
  border:none; border-radius:14px; background:#03c75a; color:#fff; font-family:inherit; font-size:16px; font-weight:800; cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(3,199,90,.7); }
.nvbig__btn--cafe{ margin-top:10px; background:#fff; color:#03c75a; border:1.5px solid #03c75a;
  box-shadow:0 8px 20px -12px rgba(3,199,90,.5); }
.nvbig__n{ display:inline-grid; place-items:center; width:20px; height:20px; border-radius:6px; background:#03c75a; color:#fff; font-weight:900; font-size:13px; }
/* 관리법 엿보기 — 4가지 관점 카드 */
.nvtopics{ display:grid; grid-template-columns:1fr 1fr; gap:10px; text-align:left; }
.nvtopic{ display:flex; flex-direction:column; gap:10px; padding:16px 14px; border:1.5px solid #cdeed9; border-radius:16px;
  background:#fff; font-family:inherit; cursor:pointer; transition:transform .12s, box-shadow .12s, border-color .12s; }
.nvtopic:hover{ transform:translateY(-2px); border-color:#03c75a; box-shadow:0 12px 24px -14px rgba(3,199,90,.5); }
.nvtopic__ico{ display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:#eafbf0; color:#03c75a; }
.nvtopic__ico .ico{ width:20px; height:20px; margin:0; }
.nvtopic__txt{ display:flex; flex-direction:column; gap:2px; }
.nvtopic__lab{ font-size:15px; font-weight:900; color:var(--ink); letter-spacing:-.3px; }
.nvtopic__desc{ font-size:12px; color:var(--ink-soft); }
.nvtopic__go{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; color:#0a8a43; margin-top:2px; }

/* 커스텀 픽토그램 (이모지 대체) */
.ico{ display:inline-flex; width:1.05em; height:1.05em; vertical-align:-0.16em; margin-right:.28em; flex:0 0 auto; }
.ico svg{ width:100%; height:100%; display:block; }
.ico--lg{ width:1.5em; height:1.5em; }

/* 추천 성분 함유 TOP10 기초화장품 */
/* 1위 — 압도적 히어로 */
.t10__hero{ position:relative; text-align:center; padding:20px 16px 18px; border-radius:18px; cursor:pointer;
  background:linear-gradient(180deg, color-mix(in srgb,var(--type-color) 16%,#fff), #fff);
  border:1.5px solid color-mix(in srgb,var(--type-color) 35%,var(--line)); box-shadow:0 8px 20px -14px rgba(0,0,0,.3); }
.t10__crown{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.t10__rank1{ display:inline-grid; place-items:center; width:66px; height:66px; border-radius:50%;
  background:var(--type-color); margin-bottom:5px;
  box-shadow:0 10px 22px -8px color-mix(in srgb, var(--type-color) 70%, #000); }
.t10__rank1 b{ font-size:25px; font-weight:900; letter-spacing:-1px; color:#fff; line-height:1; }
.t10__ranksub{ font-size:12.5px; font-weight:800; color:var(--type-ink); }
.t10__heroimg{ width:150px; height:150px; object-fit:cover; border-radius:16px; margin:12px auto 10px;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.35); border:1px solid rgba(0,0,0,.05); }
.t10__heroname{ font-size:19px; font-weight:900; color:var(--ink); display:block; letter-spacing:-.3px; word-break:keep-all; }
.t10__mine{ display:inline-block; font-size:11px; font-weight:800; color:#fff; background:var(--type-ink);
  padding:2px 9px; border-radius:999px; vertical-align:middle; margin-left:2px; }
.t10__herotier{ font-size:13px; color:var(--ink-soft); margin:6px 0 12px; word-break:keep-all; }
.t10__count{ margin:10px 0 4px; }
.t10__count b{ font-size:44px; font-weight:900; color:var(--type-ink); letter-spacing:-1px; }
.t10__count span{ font-size:18px; font-weight:800; color:var(--ink-soft); margin-left:2px; }
.t10__countlead{ font-size:14.5px; color:var(--ink); margin:0 0 12px; word-break:keep-all; }
.t10__countlead b{ color:var(--type-ink); }
.t10__herobreak{ text-align:left; max-width:280px; margin:0 auto 14px; display:flex; flex-direction:column; gap:6px; }
.t10__herocta{ display:inline-block; width:100%; padding:13px; border-radius:12px; background:var(--type-ink);
  color:#fff; font-size:14.5px; font-weight:800; }
.t10__gap{ text-align:center; font-size:12.5px; font-weight:800; color:var(--ink-soft); margin:18px 0 10px; }
/* 2·3위(돋보임) / 4·5위(평범) */
.t10__card{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:13px; margin-bottom:8px; background:#fff; }
.t10__card--hi{ border:1.5px solid color-mix(in srgb,var(--type-color) 35%,var(--line)); box-shadow:0 8px 20px -14px rgba(0,0,0,.3); }
.t10__card--mid{ border:1px solid var(--line); }
.t10__rk{ flex:0 0 22px; font-size:15px; font-weight:900; color:var(--ink-soft); text-align:center; }
.t10__card--hi .t10__rk{ color:var(--type-ink); }
.t10__cimg{ width:52px; height:52px; object-fit:cover; border-radius:10px; flex:0 0 auto; }
.t10__card--mid .t10__cimg{ width:42px; height:42px; }
.t10__noimg{ width:42px; height:42px; display:grid; place-items:center; background:var(--brand-softer); border-radius:10px; font-size:20px; flex:0 0 auto; }
.t10__cbody{ flex:1; min-width:0; }
.t10__cbody b{ font-size:14px; font-weight:800; color:var(--ink); display:block; }
.t10__card--mid .t10__cbody b{ font-size:13px; }
.t10__cbody span{ font-size:11.5px; color:var(--ink-soft); }
.t10__cpct{ font-size:15px; font-weight:900; color:var(--ink-soft); white-space:nowrap; }
.t10__card--hi .t10__cpct{ color:var(--type-ink); }
/* 1위(우리) = 같은 행 카드지만 살짝 강조(사장님) */
.t10__card--ours{ cursor:pointer; border:2px solid var(--type-color);
  background:linear-gradient(180deg, color-mix(in srgb,var(--type-color) 12%,#fff), #fff);
  box-shadow:0 12px 28px -16px color-mix(in srgb,var(--type-color) 70%,#000); margin-bottom:10px; }
.t10__card--ours .t10__rk{ flex:0 0 24px; width:24px; height:24px; display:grid; place-items:center;
  border-radius:50%; background:var(--type-color); color:#fff; font-size:13px; line-height:1; }
.t10__thumb{ width:46px; height:46px; object-fit:cover; border-radius:10px; flex:0 0 auto; }
.t10__thumb--comp{ border:1px solid var(--line); background:#f5f4f8; }
.t10__card--ours .t10__cbody b{ font-size:14.5px; }
.t10__card--ours .t10__cpct{ color:var(--type-ink); font-size:16px; }
.t10__buycta{ display:block; width:100%; margin:12px 0 0; padding:14px; border:0; border-radius:13px;
  background:var(--type-ink); color:#fff; font-size:15px; font-weight:900; letter-spacing:-.3px; cursor:pointer; }
/* 6~10위 간결 */
.t10__lowlist{ margin-top:6px; border-top:1px solid var(--line); }
.t10__low{ display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--line); }
.t10__lrk{ flex:0 0 20px; font-size:12.5px; font-weight:800; color:#a6a6b4; text-align:center; }
.t10__low b{ flex:1; font-size:12.5px; font-weight:600; color:var(--ink); }
.t10__lpct{ font-size:12px; font-weight:700; color:var(--ink-soft); }

/* 해결책 블러 잠금 (친구 공유 시 무료 언락) */
.is-locked{ position:relative; overflow:hidden; min-height:220px; }
.is-locked > *:not(.lockov){ filter:blur(7px); opacity:.5; pointer-events:none; user-select:none; }
/* 오버레이: 버튼을 '위쪽'에 배치(스크롤 안 해도 바로 보임) */
.lockov{ position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center; padding:20px 18px; z-index:3;
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.82)); border-radius:inherit; }
.lockov__in{ text-align:center; max-width:320px; margin-top:6px; }
/* 열린 뒤 분홍 배경·테두리·'열린 결과예요' 배지는 두지 않는다(2026-10-24 레이아웃 통합). 열린 영역은 기존 카드 테마 그대로 */
.lockov__ico{ font-size:30px; }
.lockov__t{ display:block; font-size:17px; font-weight:900; color:var(--ink); margin-top:6px; word-break:keep-all; }
.lockov__s{ font-size:13px; color:var(--ink-soft); line-height:1.5; margin:6px 0 14px; word-break:keep-all; }
.lockov__btn{ width:100%; }
.lockov__btn--kakao{ background:#FEE500; color:#3C1E1E; box-shadow:0 8px 20px -8px rgba(254,229,0,.7); font-weight:800; }
.lockov__btn--kakao:hover{ filter:brightness(.97); }
.lockov__btn--insta{ width:100%; margin-top:8px; color:#fff; font-weight:800;
  background:linear-gradient(95deg,#F58529,#DD2A7B 55%,#8134AF 90%); box-shadow:0 8px 20px -8px rgba(221,42,123,.6); }
.lockov__btn--insta:hover{ filter:brightness(1.04); }
.lockov__note{ display:block; font-size:11.5px; color:var(--ink-soft); margin-top:8px; }

/* ===========================================================
   타이포/위계 개편 (2026-07-08) — 큰 목차 헤더 + 시원시원한 여백
   16P식: 번호 뱃지 + 큰 제목 + 뚜렷한 폰트 위계
   =========================================================== */
/* ── 줄바꿈 전역 정리: 한글은 어절(단어) 단위로만 끊기게(중간 끊김 방지) ── */
.screen p, .screen h1, .screen h2, .screen h3, .screen h4, .screen h5,
.screen li, .screen b, .screen strong, .screen em, .screen small,
.screen span, .screen a, .screen button, .screen label{
  word-break: keep-all; overflow-wrap: break-word;
}

/* 목차는 객관적으로(설득은 내용에서) — '내 피부의 단점' */
.persu__label{ font-size:17px; font-weight:900; color:var(--ink); letter-spacing:-.4px;
  padding-bottom:10px; margin-bottom:14px; border-bottom:2px solid #f0e2e2; }
/* 약점(단점) 그리드 — 경각심(16P 약점 스타일, 경고 레드) */
.persu__kicker--warn{ color:#d63031 !important; }
.persu__kicker--warn .ico{ color:#e04b3a; }
.weakgrid{ margin:6px 0 18px; }
/* 관리 행: 테두리 없이 밑줄로만 구분 / 왼쪽 내용 · 오른쪽 2열 막대그래프 */
.weakrow{ display:flex; gap:14px; align-items:center; padding:15px 2px; }
.weakrow:not(:last-child){ border-bottom:1px solid #ececf1; }
.weakrow--ok{ opacity:.6; }
.weakrow__main{ flex:1 1 auto; min-width:0; }
.weakrow__main .weakitem__hd{ margin-bottom:5px; }
.weakrow__main .weakitem__hd b{ font-size:14px; font-weight:800; color:var(--ink); letter-spacing:-.3px; }
.weakrow__desc{ font-size:12px; color:var(--ink-soft); line-height:1.55; word-break:keep-all; }
.weakrow__chart{ flex:0 0 auto; }
.wkbar{ display:flex; align-items:flex-end; gap:9px; height:82px; }
.wkbar__col{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.wkbar__v{ font-size:13px; font-weight:900; line-height:1; margin-bottom:4px; }
.wkbar__bar{ width:20px; border-radius:5px 5px 0 0; min-height:4px; }
.wkbar__lab{ font-size:9.5px; font-weight:700; color:#9a9aa6; margin-top:5px; white-space:nowrap; }
.wkbar__col--now .wkbar__bar{ background:#d6d6de; }
.wkbar__col--now .wkbar__v{ color:#a8a8b3; }
.wkbar__col--up .wkbar__bar{ background:var(--type-color); }
.wkbar__col--up .wkbar__v{ color:var(--type-ink); }
.weakitem{ display:flex; gap:11px; align-items:flex-start; padding:12px 13px; border-radius:12px;
  background:#fafafb; border:1px solid #ececf1; }
.weakitem__ic{ flex:0 0 auto; display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:#f1eff3; color:#6b6570; }
.weakitem__ic .ico{ width:16px; height:16px; margin:0; }
/* 헤더(제목 + 알파벳 타입 + 강조 태그) */
.weakitem__hd{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.weakitem__type{ font-size:10px; font-weight:800; color:#8a8a97; background:#eeecf2;
  padding:2px 7px; border-radius:999px; letter-spacing:.04em; }
.weakitem__tag{ margin-left:auto; font-size:10.5px; font-weight:900; padding:2px 9px; border-radius:999px; white-space:nowrap; }
/* 결핍(저점수) 축 = 집중 강조 / 양호 축 = 톤다운 */
.weakitem--focus{ background:color-mix(in srgb, var(--type-color) 7%, #fff);
  border-color:color-mix(in srgb, var(--type-color) 34%, #ececf1); }
.weakitem--focus .weakitem__ic{ background:color-mix(in srgb, var(--type-color) 15%, #fff); color:var(--type-ink); }
.weakitem--focus .weakitem__tag{ color:#fff; background:var(--type-color); }
.weakitem--ok{ opacity:.72; }
.weakitem--ok .weakitem__tag{ color:#a0a0ac; background:#eeeef2; }
.weakitem__tx b{ display:block; font-size:14px; font-weight:800; letter-spacing:-.3px; line-height:1.3; color:var(--ink); }
.weakitem__tx p{ font-size:12px; color:var(--ink-soft); line-height:1.5; margin-top:3px; word-break:keep-all; }
/* 현재 점수 + 관리 시 개선분 — 한 줄 가로 게이지 (그래프에만 색) */
.wkg{ margin-top:11px; padding-top:10px; border-top:1px solid #f0eef2; }
.wkg__top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;
  font-size:11px; color:#9a949a; font-weight:600; }
.wkg__nowv{ color:#8a848a; font-weight:800; font-size:12.5px; }
.wkg__upt{ color:var(--type-ink); }
.wkg__upv{ font-weight:900; font-size:13.5px; }
.wkg__upt em{ font-style:normal; font-size:10.5px; font-weight:800; margin-left:4px; padding:1px 6px; border-radius:9px;
  background:color-mix(in srgb, var(--type-color) 14%, #fff); color:var(--type-ink); }
.wkg__track{ height:9px; border-radius:6px; background:#efecf0; overflow:hidden; }
.wkg__fill{ display:block; height:100%; border-radius:6px;
  background:linear-gradient(90deg, #d5cfd5 0 var(--stop,60%), var(--type-color) var(--stop,60%) 100%); }
.persu__p--sol{ font-size:13.5px; }
@media (max-width:420px){ .weakgrid{ grid-template-columns:1fr; gap:11px; } }

/* 내 피부 특징(②) — 포인트색·볼드 강조 제거(사장님: 깔끔하게 읽히게) */
.result__why .why__p b{ font-weight:400 !important; color:var(--ink) !important; }
.result__why .persu__p b{ font-weight:400 !important; color:var(--ink) !important; }
.result__why .persu__h b{ color:var(--ink) !important; }
.result__why .persu__h{ font-weight:800 !important; }
.result__why .persu__kicker{ color:var(--ink-soft) !important; }
/* % 페이오프 박스만은 눈에 띄게(대비 있는 초록 카드) — 사장님: 배경 차이 안 나서 안 띔 */
.result__why .persu__num{ color:#7C5CE6 !important; }
.result__why .persu__paysub b{ color:#7C5CE6 !important; }
.result__why .persu__pay{ background:linear-gradient(180deg,#fdeef0,#fff7f8) !important;
  border:1.5px solid #f5cdd2 !important; box-shadow:0 12px 26px -16px rgba(232,98,106,.4) !important; }
.result__why .demoangle b, .result__why .demoangle .ico{ color:var(--ink) !important; }
.result__why .why__lead b{ color:var(--ink) !important; }

/* ★ 관리포인트 핵심 설득 — 설문 전체에서 가장 중요한 카피(특별 강조·볼드 살림) */
.persu__head{ font-size:18px; font-weight:900; line-height:1.5; color:var(--ink);
  letter-spacing:-.4px; word-break:keep-all; margin:2px 0 13px; }
.result__why .persu__head b{ font-weight:900 !important; color:var(--type-ink) !important; }
.result__why .persu--improve .persu__head b{ color:#7C5CE6 !important; }
.persu__key{ margin:0 0 16px; padding:16px 17px 15px; border-radius:15px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--type-color) 6%, #fff), #fff);
  border:1.5px solid color-mix(in srgb, var(--type-color) 42%, #fff);
  box-shadow:0 14px 30px -20px color-mix(in srgb, var(--type-color) 55%, #000); }
.persu--improve .persu__key{ background:linear-gradient(180deg, color-mix(in srgb, var(--type-color) 6%, #fff), #fff);
  border-color:color-mix(in srgb, var(--type-color) 42%, #fff); }
.persu__keytag{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:900;
  color:#fff; background:var(--type-color); padding:5px 12px 6px; border-radius:999px;
  letter-spacing:-.2px; margin-bottom:11px; box-shadow:0 7px 16px -6px color-mix(in srgb, var(--type-color) 80%, #000); }
.persu--improve .persu__keytag{ color:#fff; }
.persu__keytag .ico{ width:1.15em; height:1.15em; }
.persu__keycopy{ font-size:14.5px; line-height:1.72; color:var(--ink); word-break:keep-all;
  font-weight:600; margin:0 0 11px; }
.persu__keycopy:last-child{ margin-bottom:0; }
.result__why .persu__key .persu__keycopy b{ font-weight:900 !important; color:var(--type-ink) !important; }
.result__why .persu--improve .persu__key .persu__keycopy b{ color:#7C5CE6 !important; }
/* 복합 vs 단일 효과 비교 스탯(실제 연구) */
.persu__stat{ display:flex; align-items:center; gap:13px; margin:14px 0 0; padding:13px 15px;
  border-radius:13px; background:color-mix(in srgb, var(--type-color) 7%, #fff);
  border:1px solid color-mix(in srgb, var(--type-color) 16%, #efe9eb); }
.persu__statn{ flex:0 0 auto; font-size:33px; font-weight:900; line-height:1;
  color:var(--type-ink); letter-spacing:-1px; }
.persu__statx{ font-size:12.5px; line-height:1.55; color:var(--ink); word-break:keep-all; font-weight:600; }
.result__why .persu__stat .persu__statx b{ font-weight:900 !important; color:var(--type-ink) !important; }
/* 논문 인용(연구 근거) + 출처 */
.persu__finding{ margin:10px 0 0; padding:11px 13px 12px; border-radius:11px;
  background:#fff; border:1px solid #ece7e9; font-size:13px; line-height:1.68; color:var(--ink); word-break:keep-all; font-weight:500; }
.result__why .persu__finding b{ font-weight:900 !important; color:var(--type-ink) !important; }
.persu__cite{ margin:5px 2px 0; font-size:8.5px; line-height:1.4; color:#b2adb2; word-break:keep-all; opacity:.9; }
.persu__cite i{ font-style:italic; }
/* 연구 그림자료 — 1배 vs 4배 막대 그래프(순수 CSS) */
.persu__fig{ margin:12px 0 0; padding:14px 14px 12px; border-radius:12px; background:#fff; border:1px solid #ece7e9; }
.persu__figbars{ display:flex; justify-content:center; align-items:flex-end; gap:40px; }
.pfb{ display:flex; flex-direction:column; align-items:center; width:88px; }
.pfb__barwrap{ display:flex; align-items:flex-end; justify-content:center; height:78px; width:100%; margin:5px 0 7px; }
.pfb__bar{ width:46px; border-radius:7px 7px 0 0; min-height:8px; }
.pfb__bar--base{ background:#d9d4d7; }
.pfb__bar--combo{ background:linear-gradient(180deg, color-mix(in srgb, var(--type-color) 72%, #fff), var(--type-color)); }
.pfb__val{ font-size:13px; font-weight:800; color:#9a939a; letter-spacing:-.5px; }
.pfb__val--hi{ font-size:17px; font-weight:900; color:var(--type-ink); }
.pfb__lab{ font-size:11px; font-weight:600; color:var(--ink); text-align:center; word-break:keep-all; line-height:1.3; }
.persu__figcap{ margin:9px 0 0; text-align:center; font-size:10.5px; color:#9a949a; word-break:keep-all; }
/* 좋게 나온 피부 → '당겨쓰기' 경고 카드 */
.persu__borrow{ margin:0 0 14px; padding:13px 15px 14px; border-radius:13px;
  background:linear-gradient(180deg,#fff7f3,#fff); border:1px solid #f2d6ca; }
.persu__borrowtag{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:900;
  color:#c65e2a; margin-bottom:6px; }
.persu__borrowtag .ico{ width:1.12em; height:1.12em; }
.persu__borrowbody{ margin:0 0 9px; font-size:14px; line-height:1.7; color:var(--ink); word-break:keep-all; font-weight:500; }
.persu__borrowbody:last-child{ margin-bottom:0; }
/* 당겨쓰기 카드 상단 — 시간에 따른 예상 변화 그래프 */
.persu__forecast{ margin:2px 0 13px; padding:11px 12px 9px; border-radius:11px; background:#fff; border:1px solid #f1e7e1; }
.pfc__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; flex-wrap:wrap; }
.pfc__cap{ font-size:11.5px; font-weight:800; color:#8a7f7a; }
.pfc__legend{ display:flex; align-items:center; gap:9px; font-size:10.5px; color:#8a848a; font-weight:600; }
.pfc__lg{ display:inline-flex; align-items:center; }
.pfc__key{ display:inline-block; width:10px; height:3px; border-radius:2px; margin-right:4px; }
.pfc__key--keep{ background:#2f9e7a; }
.pfc__key--neglect{ background:#7C5CE6; }
.pfc__svg{ display:block; width:100%; height:auto; }
.pfc__axis{ stroke:#eee; stroke-width:1; }
.pfc__line{ fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.pfc__line--keep{ stroke:#2f9e7a; }
.pfc__line--neglect{ stroke:#7C5CE6; }
.pfc__dot{ fill:#cfc8cf; }
.pfc__dot--keep{ fill:#2f9e7a; }
.pfc__dot--neglect{ fill:#7C5CE6; }
.pfc__x{ display:flex; justify-content:space-between; margin-top:1px; padding:0 4px; font-size:10px; color:#aaa4aa; font-weight:600; }
.result__why .persu__borrow .persu__borrowbody b{ font-weight:900 !important; color:#b64f22 !important; }
/* 큰 검정 카피 — 고함량 단일 vs 복합 */
.persu__bigcopy{ margin:18px 0 4px; text-align:center; font-size:24px; line-height:1.3;
  font-weight:800; color:#191922; letter-spacing:-1px; word-break:keep-all; }
.persu__bigcopy b{ font-size:29px; font-weight:900; color:#111117; }
/* pay 박스 안으로 옮긴 '복합 성분' 카피 — 박스 상단, 구분선 아래로 % */
.persu__bigcopy--pay{ margin:0 0 13px; padding-bottom:13px; font-size:19px; line-height:1.32;
  border-bottom:1px solid color-mix(in srgb, var(--type-color) 20%, #eee); }
.persu__bigcopy--pay b{ font-size:23px; }
.persu--improve .persu__bigcopy--pay{ border-bottom-color:#f4cdd2; }
/* 표 위 논문 메인카피(#105) */
.persu__bigcopy--proof{ margin:16px 0 10px; font-size:18px; line-height:1.32; }
.persu__bigcopy--proof b{ font-size:22px; }
/* 섹션 메인카피 — '관리 시 유의점' 라벨 바로 아래(2026-07-22).
   letter-spacing은 상속받은 -1px가 이 크기에선 너무 좁아 글자가 붙어 보여 완화. */
.persu__bigcopy--lead{ margin:14px 0 16px; font-size:21px; line-height:1.4; letter-spacing:-0.3px; }
.persu__bigcopy--lead b{ font-size:24px; letter-spacing:-0.4px; }
/* 표 아래로 내린 '사실 시중 제품~' 문장 여백 + pay 박스를 테두리 안에 통합(#107) */
.persu__keycopy--aftfig{ margin-top:13px; }
.persu__key .persu__pay{ margin-top:15px; }
/* 행동 지시 문장(성분예시 표 → AI 미리보기 사이): '추천 성분이 골고루 든 제품으로 케어하세요' */
.persu__keycopy--act{ margin-top:16px; padding:13px 15px; border-radius:12px;
  background:#f6f4ff; border:1px solid #e6e0ff; font-size:15px; line-height:1.66; }

/* ── 내 피부 데이터 분석: 꺾은선 3종 + 지표 스트립(과학적으로 보이는 요소) ── */
.scitrend{ margin:16px 0 4px; padding:15px 15px 13px; border-radius:15px;
  background:linear-gradient(180deg,#f7f7fb,#fff); border:1px solid #eceaf3; }
.scitrend__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.scitrend__t{ font-size:14.5px; font-weight:900; color:var(--ink); letter-spacing:-.3px; }
.scitrend__badge{ font-size:9.5px; font-weight:800; letter-spacing:.05em; color:var(--type-ink);
  background:color-mix(in srgb,var(--type-color) 12%,#fff); border:1px solid color-mix(in srgb,var(--type-color) 24%,#fff);
  padding:3px 8px; border-radius:999px; white-space:nowrap; }
.scistrip{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:5px; }
.scichip{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 3px;
  border-radius:11px; background:#fff; border:1px solid #ecebf2; }
.scichip__v{ font-size:19px; font-weight:900; color:var(--type-ink); letter-spacing:-1px; line-height:1; }
.scichip__k{ font-size:9.5px; font-weight:700; color:#9a9aa6; word-break:keep-all; text-align:center; line-height:1.2; }
/* 각 [그래프+서술]을 개별 테두리 박스로(사장님) */
.sct{ margin-top:12px; padding:14px 14px 13px; border:1px solid #e9e7f2; border-radius:14px; background:#fff; }
.scitrend__lead{ margin:0 0 4px; font-size:13px; font-weight:700; color:var(--ink); word-break:keep-all; }
.result__why .scitrend__lead b{ color:var(--type-ink); font-weight:900; }
.sct__body{ margin:9px 0 0; padding-top:9px; border-top:1px dashed #eceaf3;
  font-size:12.5px; line-height:1.72; color:var(--ink); word-break:keep-all; }
.sct__body + .sct__body{ margin-top:7px; padding-top:0; border-top:0; }
.sct__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:2px; }
.sct__titles{ display:flex; flex-direction:column; gap:0; min-width:0; }
.sct__en{ font-size:26px; font-weight:900; letter-spacing:-0.8px; line-height:1.02; }
.sct__en--long{ font-size:21px; letter-spacing:-0.6px; }
/* 성분 예시(단일 vs 맞춤 복합) */
.ingex{ display:flex; align-items:stretch; gap:8px; margin:12px 0 4px; }
.ingex__col{ flex:1; min-width:0; border:1px solid var(--line,#e6e6ee); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:6px; background:#fafafb; }
.ingex__col--combo{ border-color:#cfc3f5; background:#f6f3fe; }
.ingex__lab{ font-size:11.5px; font-weight:800; color:var(--ink-soft,#8a8a99); }
.ingex__col--combo .ingex__lab{ color:#7C5CE6; }
.ingex__chips{ display:flex; flex-wrap:wrap; gap:4px; }
.ingex__chip{ font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; background:#efeafd; color:#6a58c8; white-space:nowrap; }
.ingex__chip--mute{ background:#ececef; color:#9a9aa6; }
.ingex__desc{ font-size:11px; color:var(--ink-soft,#8a8a99); margin-top:auto; }
.ingex__vs{ align-self:center; font-size:11px; font-weight:900; color:#b9b9c4; flex:0 0 auto; }
/* 10년 뒤 AI를 유의점 카드 안에 넣을 때 상단 구분 여백 */
.aimk--inpersu{ margin-top:16px; }
.sct__title{ font-size:15px; font-weight:800; color:var(--ink); word-break:keep-all; }
.sct__metric{ flex:0 0 auto; font-size:10px; font-weight:800; color:var(--type-ink);
  background:color-mix(in srgb,var(--type-color) 10%,#fff); padding:2px 7px; border-radius:999px; white-space:nowrap; }
.sct__svg{ width:100%; height:auto; display:block; margin:2px 0 0; overflow:visible; }
.sct__grid{ stroke:#ebeaf1; stroke-width:1; }
.sct__yt{ fill:#b7b6c2; font-size:8px; text-anchor:end; font-weight:600; }
.sct__xt{ fill:#8f8e9c; font-size:9px; text-anchor:middle; font-weight:600; }
.sct__line{ fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.sct__dot{ stroke:#fff; stroke-width:1; }
.sct__mark{ fill:none; stroke:var(--type-color); stroke-width:2.4; }
.sct__marktx{ fill:var(--type-ink); font-size:8.5px; font-weight:800; text-anchor:middle; }
.sct__leg{ display:flex; gap:14px; margin:5px 0 0; padding-left:2px; }
.sct__lg{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; color:#77768a; }
.sct__lg i{ width:11px; height:3px; border-radius:2px; display:inline-block; }
.sct__note{ margin:6px 0 0; font-size:11px; line-height:1.55; color:#77768a; word-break:keep-all; }
.scitrend__disc{ margin:12px 0 0; font-size:10px; color:#adadba; text-align:center; word-break:keep-all; }

/* 결과지 저장 / 공유 버튼 */
.result__actions{ display:flex; gap:10px; margin-top:20px; }
.ract{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:15px;
  border-radius:14px; font-family:inherit; font-size:15px; font-weight:800; cursor:pointer; border:none; }
.ract svg{ width:19px; height:19px; }
.ract--save{ background:#fff; color:var(--ink); border:1.5px solid var(--line); }
.ract--save:hover{ background:#faf9ff; }
.ract--share{ background:var(--brand,#6c5ce7); color:#fff; box-shadow:0 10px 22px -10px rgba(108,92,231,.6); }
.ract--share:hover{ filter:brightness(1.04); }

/* 재방문(2회차+) 결과 전체 공유 게이트 */
.repeat-blur{ filter:blur(11px); pointer-events:none; user-select:none; opacity:.9; }
.repeatgate{ position:absolute; left:-4px; right:-4px; bottom:0; z-index:50;
  background:linear-gradient(180deg, rgba(250,249,255,0) 0%, rgba(250,249,255,.72) 10%, rgba(250,249,255,.97) 26%); }
.repeatgate__in{ position:sticky; top:90px; max-width:360px; margin:60px auto; padding:28px 22px; text-align:center;
  background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 24px 60px -28px rgba(60,40,140,.5); }
.repeatgate__in .ico{ color:var(--brand,#6c5ce7); }
.repeatgate__t{ display:block; font-size:20px; font-weight:900; color:var(--ink); margin:8px 0 8px; }
.repeatgate__s{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; word-break:keep-all; margin-bottom:16px; }
.repeatgate__s b{ color:var(--ink); }
.repeatgate__btn{ width:100%; margin-top:8px; font-weight:800; }
.repeatgate__btn--kakao{ color:#3a1d1d; background:#FEE500; }
.repeatgate__btn--insta{ color:#fff; background:linear-gradient(95deg,#F58529,#DD2A7B 55%,#8134AF 90%); }
.repeatgate__note{ display:block; font-size:11.5px; color:var(--ink-soft); margin-top:10px; }

/* ── UI 구조 개편(2026-07-08): 모든 섹션 테두리 X → 헤더·여백으로 구획, 특별한 부분만 강조 ── */
.result__inner{ gap:30px !important; }
/* 일반 카드: 테두리·박스 제거 → 오픈 섹션(헤더+여백으로 구분) */
.result__card{ padding:6px 4px !important; border:none !important; background:transparent !important;
  box-shadow:none !important; border-radius:0 !important; }
/* '특별한 부분'만 박스: 핵심 진단(레이더) — 중립 테두리(포인트색 X) */
.result__card.result__main{ padding:24px 18px !important; border:1px solid #e6e6ee !important;
  background:#fff !important; border-radius:20px !important; box-shadow:0 10px 30px -20px rgba(0,0,0,.14) !important; }
.result__mainTag{ background:#5b5b6e !important; }
/* 섹션 사이 구분선(테두리 아닌 헤어라인) + 목차 시작 간격 넓게 → 구획 분명 */
.result__card + .result__card:not(.result__main):not(.result__p1wrap):not(.result__celeb){ border-top:1px solid #ececf2 !important; padding-top:44px !important; }
/* 관리 시 유의점·10년뒤 = 성분(섹션3)과 같은 섹션으로(#119) — 사이 구분선/큰 간격 제거해 연속 흐름 */
.result__card.result__find + .result__card.result__persu:not(.result__main):not(.result__celeb),
.result__card.result__persu + .result__card.result__future:not(.result__main):not(.result__celeb){ border-top:none !important; padding-top:16px !important; }
/* 셀럽 = 하나의 테두리 카드(PART1 스타일): hero 상단 풀블리드 배너 + 내부 카드 테두리 제거 */
.result__card.result__celeb{ padding:8px 16px 20px !important; border:1px solid #efe0e4 !important;
  background:#fff !important; border-radius:22px !important; overflow:hidden !important;
  box-shadow:0 12px 30px -20px rgba(0,0,0,.16) !important; margin-top:8px; }
.result__celeb .celebhero{ margin:-8px -16px 16px !important; border:none !important;
  border-radius:22px 22px 0 0 !important; box-shadow:none !important; }
.result__celeb .celebcard{ background:transparent !important; border:none !important; padding:2px 4px !important; }
/* 목차 헤더(번호+제목) 위 여백 — 새 섹션 시작을 확실히 */
.numh{ margin-top:6px; }

/* 기본 카드 제목 위계 강화 */
.result__cardTitle{ font-size:23px !important; font-weight:900 !important; line-height:1.28 !important;
  letter-spacing:-0.6px !important; margin-bottom:16px !important; }
.result__cardTitle--head{ font-size:26px !important; }
.result__cardSub{ font-size:14px !important; line-height:1.6 !important; margin:-6px 0 18px !important; color:var(--ink-soft); }

/* 번호 뱃지 목차 헤더 */
.numh{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.numh__n{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-size:16px; font-weight:900; color:#fff; background:var(--type-ink,#b23a41);
  box-shadow:0 6px 16px -6px var(--type-ink,#b23a41); }
.numh__t{ font-size:25px; font-weight:900; letter-spacing:-0.8px; line-height:1.2; color:var(--ink); word-break:keep-all; }
.numh + .result__cardSub{ margin-top:2px !important; }

/* 카드 상단 카테고리 kicker(짧은 목차 라벨) */
.sec-kicker{ display:inline-block; font-size:12px; font-weight:900; letter-spacing:0.4px;
  color:var(--type-ink,#b23a41); background:color-mix(in srgb, var(--type-color,#7C5CE6) 12%, #fff);
  padding:5px 12px; border-radius:999px; margin-bottom:11px; }

/* 큰 숫자/결론 더 크게 (점수·개선율 등) */
.score__num{ font-size:64px !important; letter-spacing:-2px !important; }
.bigimp__num b{ font-size:56px !important; }
.simscore b#simScoreNum{ font-size:30px !important; }

/* 본문 프로즈 가독성 */
.why__p, .result__why p{ font-size:15px !important; line-height:1.75 !important; }

/* ── 1. 컨디션 점수: 4축 상태 요약(2×2) ── */
.result__score .score__grade{ margin-bottom:16px !important; }
.score__axes{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.score__ax{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 13px;
  border-radius:12px; background:#fafafc; border:1px solid var(--line); }
.score__ax span{ font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap; }
.score__ax b{ flex:0 0 auto; font-size:12px; font-weight:900; padding:3px 9px; border-radius:999px; }
.score__ax--good b{ color:#1a8f6e; background:#e6f7f0; }
.score__ax--mid b{ color:#a86a00; background:#fff3d9; }
.score__ax--bad b{ color:#c0392b; background:#fdeceb; }
.score__note{ margin-top:12px; font-size:12px; color:#a6a6b4; }

/* ── 2. 내 피부 특징: 관찰 카드(상황 → 관찰 → 축 해석) ── */
.obs{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px; }
.obs__card{ padding:14px 15px; border-radius:14px; background:#fff; border:1px solid var(--line); }
.obs__where{ display:inline-block; font-size:11.5px; font-weight:800; padding:3px 9px; border-radius:999px; margin-bottom:8px;
  color:var(--type-ink); background:color-mix(in srgb, var(--type-color) 11%, #fff); }
.obs__t{ font-size:15.5px !important; font-weight:800; line-height:1.55 !important; color:var(--ink); margin:0 0 8px; word-break:keep-all; }
.obs__why{ font-size:13px !important; line-height:1.6 !important; color:var(--ink-soft); margin:0; padding-top:8px;
  border-top:1px dashed var(--line); word-break:keep-all; }
.obs__why b{ display:inline-block; margin-right:7px; font-size:11.5px; font-weight:900; color:var(--ink); }

/* ── 3. 내 피부 종합 소견 (고민 칩 → 네 축이 이어지는 흐름 → 맺음) ── */
.result__synth p, .result__care p{ word-break:keep-all; }
.synth__k{ font-size:13px; font-weight:800; color:var(--ink-soft); margin:4px 0 8px; }
.synth__chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; }
.synth__chip{ font-size:13px; font-weight:800; padding:6px 11px; border-radius:999px; white-space:nowrap;
  color:var(--type-ink); background:color-mix(in srgb, var(--type-color) 11%, #fff); }
.synth__sub{ font-size:15px; font-weight:700; line-height:1.55; color:var(--ink); margin:0 0 12px; }
.synth__sub b{ color:var(--type-ink); }
.synth__chain{ list-style:none; margin:0 0 14px; padding:0; position:relative; }
.synth__step{ position:relative; padding:0 0 12px 22px; }
.synth__step::before{ content:""; position:absolute; left:5px; top:6px; width:10px; height:10px; border-radius:50%;
  background:var(--type-color); }
.synth__step:not(:last-child)::after{ content:""; position:absolute; left:9px; top:18px; bottom:2px; width:2px;
  background:color-mix(in srgb, var(--type-color) 30%, #fff); }
.synth__sax{ display:block; font-size:12px; font-weight:900; color:var(--type-ink); margin-bottom:2px; }
.synth__st{ font-size:14px !important; line-height:1.6 !important; color:var(--ink); margin:0; }
.synth__close{ font-size:14.5px; line-height:1.65; font-weight:700; color:var(--ink); margin:0;
  padding:12px 14px; border-radius:12px; background:color-mix(in srgb, var(--type-color) 7%, #fff); }

/* ── 3. 종합 소견 · Codex 원본 이식(SYNTH_CODEX 타입만, 현재 OSMA·DRMY) — #resultSynth 안에서만 적용 ── */
#resultSynth .syn__eyebrow{ font-size:13px; font-weight:700; color:#6b7280; margin:4px 0 8px; line-height:1.5; }
#resultSynth .syn__hook{ font-size:23px; font-weight:700; line-height:1.35; color:var(--ink); margin:0 0 18px;
  letter-spacing:-.4px; word-break:keep-all; overflow-wrap:break-word; }
#resultSynth .syn__signals{ background:#f8f9fc; border:1px solid #e7e9ef; border-radius:16px; padding:16px; margin:0 0 18px; }
#resultSynth .syn__signals > p{ font-size:12px; font-weight:800; color:#707684; margin:0 0 10px; }
#resultSynth .syn__chips{ display:flex; flex-wrap:wrap; gap:6px; }
#resultSynth .syn__chip{ font-size:13px; font-weight:700; padding:6px 11px; border-radius:999px; background:#fff;
  border:1px solid #e7e9ef; color:#353943; max-width:100%; }
#resultSynth .syn__reason p{ font-size:15px; line-height:1.72; color:#353943; margin:0 0 12px; }
#resultSynth .syn__reason p:last-child{ margin-bottom:0; }
#resultSynth .syn__reason strong{ font-weight:800; color:#17191f; }
/* 나머지 14타입: 기존 문구(lead·네 축·맺음)를 같은 syn__ 구조에 배치. 축 이름은 문단 위 작은 라벨, 맺음은 제목 없는 어두운 카드 */
#resultSynth .syn__hook--lead{ font-size:20px; line-height:1.45; }
#resultSynth .syn__hook--lead b{ font-weight:800; }
#resultSynth .syn__ax{ display:block; font-size:12px; font-weight:800; color:#707684; margin:0 0 3px; line-height:1.5; }
#resultSynth .syn__closeText{ font-size:14.5px; line-height:1.65; font-weight:700; color:#fff; margin:0; word-break:keep-all; }
@media (max-width:380px){
  #resultSynth .syn__hook{ font-size:21px; }
  #resultSynth .syn__hook--lead{ font-size:18.5px; }
  #resultSynth .syn__signals{ padding:14px; }
}

/* ── 4. 관리 순서와 대표 성분 (단계 한 줄 + 성분 칩) ── */
.care__lead{ font-size:15px; line-height:1.6; color:var(--ink); margin:4px 0 14px; }
.care__road{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:9px; }
.care__rs{ display:flex; gap:11px; align-items:flex-start; padding:13px 14px; border-radius:13px; background:#fff; border:1px solid var(--line); }
.care__rs > div{ flex:1; min-width:0; }
.care__rn{ flex:0 0 24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:900;
  color:var(--type-ink); border:1.5px solid var(--type-color); background:#fff; }
.care__rs b{ display:block; font-size:15px; font-weight:900; color:var(--ink); margin:1px 0 3px; }
.care__rs p{ font-size:13.5px !important; line-height:1.55 !important; color:var(--ink-soft); margin:0; }
.role__ings{ display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.role__ing{ font-size:12px; font-weight:800; padding:3px 9px; border-radius:999px; white-space:nowrap;
  color:var(--type-ink); background:color-mix(in srgb, var(--type-color) 11%, #fff); }
.role__ing--sup{ color:var(--ink-soft); background:#f2f2f6; }
.care__legend{ display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.care__legend .role__ing{ font-size:11px; }
.care__bridge{ margin:0 0 14px; padding:14px 15px; border-radius:13px; background:#f7f7fa; }
.care__bq{ font-size:16px; font-weight:900; color:var(--ink); line-height:1.4; margin:0 0 6px; word-break:keep-all; }
.care__bt{ font-size:13.5px !important; line-height:1.65 !important; color:var(--ink); margin:0; word-break:keep-all; }

/* 보라 '관리 시 유의점' 카드 제거 뒤 남은 논문 근거 블록 */
.persu__evidence{ margin:0 0 4px; }

/* ── 5. 제품 비교 (4축 밸런스 · 필수 역할 · 가격을 한 카드에서) ── */
.cmp__draft{ margin:0 0 12px; padding:9px 12px; border-radius:10px; font-size:12px; line-height:1.5; word-break:keep-all;
  color:#7a5200; background:#fff6dc; border:1px dashed #e6c46a; }
.cmp__draft b{ display:block; font-weight:900; }
.cmp__crit{ font-size:12.5px !important; line-height:1.55 !important; color:var(--ink-soft); margin:0 0 10px; word-break:keep-all; }
.cmp__crit b{ color:var(--ink); font-weight:800; }
.cmp__card{ padding:12px; border-radius:13px; margin-bottom:8px; background:#fff; border:1px solid var(--line); }
.cmp__card--ours{ cursor:pointer; border:2px solid var(--type-color); }
.cmp__top{ display:flex; align-items:center; gap:11px; }
.cmp__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.cmp__body b{ font-size:14px; font-weight:900; color:var(--ink); line-height:1.3; word-break:keep-all; }
.cmp__body span{ font-size:11.5px; color:var(--ink-soft); }
.cmp__price{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.cmp__price b{ font-size:15px; font-weight:900; color:var(--ink); white-space:nowrap; }
.cmp__price em{ font-style:normal; font-size:10.5px; font-weight:700; color:#a86a00; }
.cmp__metrics{ display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:10px; }
.cmp__m{ padding:9px 10px; border-radius:10px; background:#fafafc; }
.cmp__ml{ display:block; font-size:11px; font-weight:800; color:var(--ink-soft); margin-bottom:6px; }
.cmp__bal{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.cmp__ax{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cmp__ax i{ font-style:normal; font-size:10.5px; font-weight:700; color:var(--ink); white-space:nowrap; }
.cmp__seg{ display:flex; gap:2px; }
.cmp__seg b{ flex:1; height:6px; border-radius:3px; background:#e4e4ea; }
.cmp__seg b.is-on{ background:var(--type-color); }
.cmp__m--role{ min-width:86px; text-align:right; }
.cmp__mv{ display:block; font-size:13px; font-weight:700; color:var(--ink-soft); line-height:1.1; }
.cmp__mv b{ font-size:20px; font-weight:900; color:var(--ink); }
.cmp__card--ours .cmp__mv b{ color:var(--type-ink); }
.cmp__ms{ display:block; font-size:11px; color:var(--ink-soft); margin-top:3px; }
.cmp__chips{ display:flex; flex-wrap:wrap; gap:4px; margin-top:9px; }
.cmp__chip{ font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; background:#f1f1f4; color:#a0a0ab; }
.cmp__chip.is-ok{ background:color-mix(in srgb, var(--type-color) 12%, #fff); color:var(--type-ink); }

/* ── 잠금: 이어지는 잠긴 구역용 간결 오버레이(버튼 1개) ── */
.lockov__s b{ color:var(--ink); font-weight:800; }
.lockov--compact{ align-items:center; }
.lockov--compact .lockov__in{ margin-top:0; }
.lockov--compact .lockov__t{ font-size:15.5px; margin-bottom:12px; }
.lockov--compact .lockov__btn{ width:auto; padding-left:22px; padding-right:22px; }
.lockov__btn--open{ background:var(--type-ink); color:#fff; font-weight:800; }

@media (max-width:420px){
  .obs__t{ font-size:15px !important; }
  .score__ax{ padding:10px 11px; }
  .score__ax span{ font-size:12.5px; }
  .cmp__body b{ font-size:13px; }
  .cmp__m--role{ min-width:76px; }
}

/* ── 1. 컨디션 점수: 기준 대비 위치 + 예상 피부나이(점수 다음의 주요 지표 카드) ── */
.result__score .score__grade{ margin-bottom:8px !important; }
.score__pos{ font-size:13px; font-weight:700; color:var(--ink-soft); margin-bottom:18px; word-break:keep-all; }
.score__pos b{ color:var(--ink); font-weight:900; }
.agecard{ display:flex; flex-direction:column; align-items:center; gap:4px; margin:0 0 18px; padding:20px 16px 16px;
  border-radius:18px; background:color-mix(in srgb, var(--type-color,#7C5CE6) 9%, #fff);
  border:1.5px solid color-mix(in srgb, var(--type-color,#7C5CE6) 32%, #fff); }
.agecard__lab{ font-size:14px; font-weight:800; color:var(--type-ink); letter-spacing:-.2px; }
.agecard__val{ font-size:24px; font-weight:800; color:var(--ink); line-height:1.1; letter-spacing:-.5px; }
.agecard__val em{ font-style:normal; font-size:56px; font-weight:900; letter-spacing:-2px; margin:0 3px; }
.agecard__sub{ font-size:13.5px; font-weight:700; color:var(--ink); word-break:keep-all; }
.agecard__note{ font-size:11.5px; color:#8f8f9e; word-break:keep-all; margin-top:2px; }
.score__ax--none b{ color:#8f8f9e; background:#f1f1f4; }
.score__note{ line-height:1.6; word-break:keep-all; text-align:left; }

/* ── 정밀 분석: 축별 컨디션 지수 vs 비교 기준(평균) + 타입 성향 구분 ── */
.axsc__score{ font-size:12px; }
.axcmp{ margin:0 0 4px; }
.axcmp__track{ position:relative; height:8px; border-radius:999px; background:#eeeef3; }
.axcmp__fill{ position:absolute; left:0; top:0; bottom:0; border-radius:999px; opacity:.85; }
.axcmp__base{ position:absolute; top:-4px; bottom:-4px; width:2px; margin-left:-1px; background:#55556a; border-radius:2px; }
.axcmp__t{ margin-top:7px; font-size:12px; font-weight:700; color:var(--ink-soft); text-align:left; word-break:keep-all; }
.axcmp__t b{ color:var(--ink); font-weight:900; }
.axsc__tend{ font-size:12px; font-weight:800; color:var(--ink); text-align:left; margin-bottom:6px; }
.axsc__tend span{ font-weight:600; color:#8f8f9e; }
.radar__legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; margin-top:8px; font-size:12px; font-weight:700; color:var(--ink-soft); }
.radar__lg{ display:inline-flex; align-items:center; gap:6px; }
.radar__lg::before{ content:""; width:18px; height:0; border-top:2.5px solid var(--type-ink); }
.radar__lg--base::before{ border-top:2px dashed #8a8a9c; }
@media (max-width:420px){
  .agecard__val em{ font-size:50px; }
  .axsc__name{ font-size:14.5px; }
}

/* 종합 평가(3번): 기존 Codex 원본 모양으로 되돌림(2026-10-24 사용자 요청, UI만) — 머리 문장·설명 문단은 상자 없이 열린 문단.
   위의 원본 #resultSynth .syn__hook--lead · .syn__reason p 규칙이 그대로 적용된다. 문구·순서·데이터는 바꾸지 않는다. */
/* 관리 가이드: 설명 상자 다음의 별도 상자 하나(왼쪽 띠 없음). 잠금·해제 표시는 안쪽 .care__lockzone 그대로 */
#resultSynth .syn__guide{
  margin-top:16px; padding:20px 22px; border:1px solid #e6e3ed; border-radius:16px;
  background:#fff; box-shadow:0 2px 6px rgba(35,24,65,.025);
}
#resultSynth .syn__guideTitle{ font-size:17px; font-weight:900; color:var(--ink); line-height:1.4; margin:0 0 4px; word-break:keep-all; }
#resultSynth .result__disclaimer{ margin-top:16px; }
@media(max-width:480px){
  #resultSynth .syn__guide{ padding:16px; }
}

/* 네 컨디션 카드: 상태 옆 점수 + 내 4축 평균. 칸이 좁으면 상태·점수 묶음이 이름 아래 줄 오른쪽으로 내려간다(겹치지 않게) */
.score__ax{ flex-wrap:wrap; row-gap:6px; }
.score__ax .score__axVal{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; white-space:nowrap; }
.score__axPt{ font-style:normal; font-size:13px; font-weight:900; color:var(--ink); white-space:nowrap; }
.score__avg{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin:8px 0 0; padding:10px 13px;
  border-radius:12px; background:#f6f5fa; font-size:13px; }
.score__avgLab{ font-weight:700; color:var(--ink); }
.score__avgVal{ font-size:14px; font-weight:900; color:var(--ink); white-space:nowrap; }

/* ===== 2026-10-24 결과 R1~R3: 세부 항목 다각형 · 임시 비교 기준점 · 종합 평가 본문 상자 ===== */
.abil{ max-width:300px; margin:6px auto 0; }
.abil__svg{ display:block; width:100%; height:auto; overflow:visible; }
.abil__none{ margin:6px 0 0; font-size:12.5px; color:var(--ink-soft); word-break:keep-all; }
.radar__base{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.radar__baseKey{ display:inline-block; width:22px; border-top:2px dashed #8a8aa0; }
.radar__base b{ font-weight:800; color:var(--ink); }
.cbase__help{ display:inline-block; font-size:12.5px; color:var(--ink-soft); }
.cbase__help summary{ display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; border:1px solid #c9c8d8; font-size:12px; font-weight:800; color:#55556a; cursor:pointer; list-style:none; }
.cbase__help summary::-webkit-details-marker{ display:none; }
.cbase__help[open]{ display:block; width:100%; margin-top:4px; }
.cbase__help[open] summary{ margin-right:6px; }
.abil__key{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 12px; margin:2px 0 10px; font-size:12.5px; line-height:1.5; color:var(--ink-soft); word-break:keep-all; text-align:center; }
.abil__key span{ display:inline-flex; align-items:center; gap:5px; }
.abil__dash{ display:inline-block; width:18px; border-top:2px dashed #8a8aa0; }
#resultSynth .syn__body{ border:1.5px solid #e2e0ec; background:#fbfaff; border-radius:18px; padding:20px 18px; margin:0 0 14px; }
@media (max-width:420px){ #resultSynth .syn__body{ padding:17px 15px; } }

/* ===== 2026-10-25 R1 358px 카드 안 돌출 수리: 긴 극 이름이 행 폭을 밀지 않게(숫자·다각형·점수 그대로) ===== */
.result__axes .axis-row{ grid-template-columns:minmax(0,1fr); min-width:0; }
.result__axes .axis-row > *{ min-width:0; }
.result__axes .axis-row__head{ flex-wrap:wrap; row-gap:2px; }
.result__axes .axis-pole{ white-space:normal; min-width:0; word-break:keep-all; }
.result__axes .axis-pct{ white-space:nowrap; }
.result__axes .abil{ max-width:min(300px, 100%); }

/* ===== 2026-10-25 P3: 12톤 편집 매핑 립 발색 견본 ===== */
.pced{ margin:6px 0 14px; padding:12px; border:1px solid #f0e3ea; border-radius:14px; background:#fffafc; }
.pced__h{ font-size:13px; font-weight:800; color:var(--ink); margin-bottom:8px; word-break:keep-all; }
.pced__fig{ display:flex; gap:12px; align-items:center; margin:0 0 8px; }
.pced__img{ flex:0 0 120px; width:120px; height:120px; aspect-ratio:1/1; object-fit:cover; border-radius:12px; background:#f4eef1; }
.pced__cap{ min-width:0; display:flex; flex-direction:column; gap:2px; font-size:12.5px; line-height:1.45; color:var(--ink); word-break:keep-all; }
.pced__cap b{ font-weight:800; }
.pced__shade{ font-weight:700; }
.pced__fail{ display:none; color:var(--ink-soft); font-size:12px; }
.pced__fig.is-broken .pced__img{ display:none; }
.pced__fig.is-broken .pced__fail{ display:block; }
.pced__row{ display:flex; gap:8px; font-size:12.5px; line-height:1.5; color:var(--ink); margin:2px 0; word-break:keep-all; }
.pced__row span{ flex:0 0 34px; font-weight:800; color:#E85B8E; }
.pced__row em{ font-style:normal; min-width:0; }
.pced__row i{ display:block; font-style:normal; font-size:11.5px; color:var(--ink-soft); }
.pced__level{ display:block; margin-top:2px; font-size:11px; color:#a6a6b8; }
.pced__reason{ font-size:12px; line-height:1.5; color:var(--ink-soft); margin-top:6px; word-break:keep-all; }
.pced__note{ font-size:10.5px; line-height:1.5; color:#a6a6b8; margin-top:6px; word-break:keep-all; }
@media (min-width:900px){ .pced__img{ width:140px; height:140px; } }

/* ===== 2026-10-25 P3 읽힘: 12톤 편집 매핑 카드의 한계·상태·근거 수준·인증 아님 문구 — 12px 이상 · 진한 회색(문구·배치 그대로) ===== */
.pced .pced__row i, .pced .pced__level, .pced .pced__reason, .pced .pced__note, .pced .pced__fail, .pced .pced__note .pcprod__link{ font-size:12px; color:#56566a; }
/* 프로필 화면 '메인으로' — 기존 보조 버튼(quiz__prev) 모양 재사용, 시작 버튼과 간격만 */
.profile__inner .profile__back{ margin-top:12px; }

/* ===== 2026-10-25 응답 상태·성향 막대·관리 상자 ===== */
/* 일반 관리 가이드 · 앞으로의 관리: 같은 보라 계열의 별도 상자(블러·잠금 없음은 그대로) */
#resultSynth .syn__guide{ border-color:color-mix(in srgb, #7C5CE6 24%, #fff); background:color-mix(in srgb, #7C5CE6 4%, #fff); }
#resultSynth .syn__guide .syn__guideTitle{ color:#4b3a91; }
.ahead__lead{ font-size:15px; line-height:1.6; color:var(--ink); margin:4px 0 10px; word-break:keep-all; }
.ahead__list{ margin:0; padding-left:18px; display:grid; gap:6px; }
.ahead__list li{ font-size:14px; line-height:1.55; color:var(--ink); word-break:keep-all; }
/* 응답이 없을 때의 성향 막대: 가운데 선만(비율 모름) */
.axis-track--unknown{ background:repeating-linear-gradient(90deg, #eef0f4 0 6px, #f7f8fa 6px 12px); }
/* 불편이 0일 때도 장식 얼굴은 같은 자리에 — 상태 문장은 일반 상태 줄 그대로 */
.fg--empty .fg__status{ white-space:normal; word-break:keep-all; }
/* 상단 네 카드: 응답한 문항이 모두 ‘보통’인 축의 표시 라벨(점수·문턱 불변) — 양호(초록)와 구분되는 중립색 */
.score__ax--neutral b{ color:#5a5470; background:#efedf6; }

/* ===== 2026-10-25 phase2 · 퍼스널컬러 판정 근처 ‘추천 색조 제품 보기’ 입구(P4) =====
   결과 포인트 진한 보라(--type-ink = #411cba, 흰 글자 10:1) · 기존 제품 영역(#pcProducts)은 같은 잠금 구역·같은 자리 */
.pcr__goprod{ display:block; width:100%; margin:0 0 12px; padding:13px 16px; border:none; border-radius:12px; cursor:pointer;
  background:var(--type-ink,#411cba); color:#fff; font:inherit; font-size:15px; font-weight:800; letter-spacing:-.2px; }
.pcr__goprod:hover{ background:color-mix(in srgb, var(--type-ink,#411cba) 86%, #000); }
.pcr__goprod:focus-visible{ outline:3px solid #7C5CE6; outline-offset:3px; }
#pcProducts{ scroll-margin-top:16px; }
#pcProducts:focus{ outline:none; }
#pcProducts:focus-visible{ outline:3px solid #7C5CE6; outline-offset:4px; border-radius:12px; }

/* ===== 2026-10-26 phase4 · 종합 소견(3번) 기존 Codex 열린 문단 디자인 복원 — CSS 만(문구·순서·개인화·데이터 무변경) =====
   1) 뒤에 덧붙었던 본문 바깥 상자(.syn__body 테두리·배경·둥근 모서리·안쪽 여백, 모바일 포함)를 없애 hook → 신호 → 문단을 원래처럼 열린 흐름으로.
   2) 원본 어두운 맺음 표면(#17191f · 흰 글씨 · 반경 18 · 안쪽 20px 16px · 위 24px)을 이미 보이는 마지막 문단(관리 방향 맺음) 한 번에만 입힌다. 숨긴 관리 순서(roadmap)는 다시 그리지 않는다 */
#resultSynth .syn__body{ border:0; background:transparent; border-radius:0; padding:0; }
@media (max-width:420px){ #resultSynth .syn__body{ padding:0; } }
#resultSynth .syn__reason p:last-child{ background:#17191f; color:#fff; border-radius:18px; padding:20px 16px; margin-top:24px; }
#resultSynth .syn__reason p:last-child strong, #resultSynth .syn__reason p:last-child b, #resultSynth .syn__reason p:last-child a{ color:#fff; }

/* 2026-10-30 사용자 요청: 종합 평가 본문만 다시 한 상자로 묶는다. */
#resultSynth .syn__body{ border:1.5px solid #e2e0ec; background:#fbfaff; border-radius:18px; padding:20px 18px; margin:0 0 14px; }
@media (max-width:420px){ #resultSynth .syn__body{ padding:17px 15px; } }
.care__why{ font-size:12px; color:#675a80; margin:5px 0 7px; line-height:1.6; }
.care__priority{ display:block; color:#6750a4; font-size:11px; font-weight:800; margin-bottom:4px; }

.pcprod__part{margin:18px 0 0;padding:14px;border:1px solid #e2dced;border-radius:14px;background:#fff}
.pcprod__part>h4{margin:0 0 10px;font-size:15px;color:#554078}
.pcprod__areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pcprod__areas>div{padding:10px;background:#f7f5fb;border-radius:10px}
.pcprod__areas b,.pcprod__areas span{display:block}.pcprod__areas b{font-size:13px}.pcprod__areas span{font-size:11px;line-height:1.5;color:#817887;margin-top:4px}

/* ===== 2026-11-02 사용자 요청 · 내 피부 컨디션 분석: 네 축을 한 상자 안 칸 → 각각 독립 카드(CSS 만 · DOM/문구/차트/점수 그대로) =====
   부모 #resultAxes 의 흰 바탕·테두리·안쪽 여백(styles.css .result__axes)을 걷고, .axis-row 마다 기존 보라 계열 관리 상자 토큰(#resultSynth .syn__guide 와 같은 값)으로 카드를 입힌다.
   위쪽 20px = 레이더 아래 설명(.radar__caplist, 끝 문장 '컨디션 지수는 응답 기반 불편 지수예요')과 첫 카드 사이. 차트 → 설명 사이(.radar__cap margin-top 12px)에 차트 라벨 아래 여백을 더한 정도로 둔다 */
#resultAxes.result__axes{ background:transparent; border:0; border-radius:0; padding:0; gap:12px; margin-top:20px; }
#resultAxes .axis-row{ padding:16px 14px; border:1px solid color-mix(in srgb, #7C5CE6 24%, #fff); border-radius:16px;
  background:color-mix(in srgb, #7C5CE6 4%, #fff); }
@media (max-width:420px){ #resultAxes .axis-row{ padding:14px 12px; } }

/* ===== 2026-11-02 사용자 공개 범위: 4번 '{code} 타입 정밀 분석' 그룹(번호 1회 + 소제목 3개) · 5번 셀럽 =====
   번호·제목·소제목은 공개, 각 본문 lockzone 만 공유 1회(DETAIL) 전 블러(기존 .is-locked/.lockov 그대로). 관리 우선순위 상자는 3번 밖으로 옮겨도 기존 보라 관리 상자 값 유지 */
.detail__sub{ font-size:19px; font-weight:900; color:var(--ink); line-height:1.35; letter-spacing:-.4px; margin:0 0 12px; word-break:keep-all; }
#resultCare{ margin-top:14px; padding:20px 22px; border:1px solid color-mix(in srgb, #7C5CE6 24%, #fff); border-radius:16px;
  background:color-mix(in srgb, #7C5CE6 4%, #fff); box-shadow:0 2px 6px rgba(35,24,65,.025); }
#resultCare .detail__sub{ color:#4b3a91; }
#resultDetail > #resultConcernNet{ margin-top:28px; }
@media (max-width:480px){ #resultCare{ padding:16px; } }
.result__celeb .numh{ margin:0 0 12px; }
.result__celeb .numh__t .ico{ color:var(--type-ink); }

/* ===== 2026-11-03 컨디션 표시 등급 5단계(우수·양호·유의·주의·위험 — 40~100점 화면 구간, 의학적 판정 아님) =====
   네 카드 배지 + 종합 점수 아래 등급. 색은 기존 상태 배지 계열(초록·노랑·빨강)에 우수(진초록)·위험(진빨강)만 더한다 */
.score__ax--g-excellent b{ color:#0f6f53; background:#d9f3e8; }
.score__ax--g-fine b{ color:#1a8f6e; background:#e6f7f0; }
.score__ax--g-watch b{ color:#a86a00; background:#fff3d9; }
.score__ax--g-care b{ color:#c0392b; background:#fdeceb; }
.score__ax--g-risk b{ color:#fff; background:#b3261e; }
.score__ax--g-none b{ color:#8f8f9e; background:#f1f1f4; }
.score__axSub{ display:block; font-size:11px; font-weight:700; color:#8f8f9e; margin-top:1px; }
.result__score .score__grade--excellent{ color:#0f6f53 !important; }
.result__score .score__grade--fine{ color:#1a8f6e !important; }
.result__score .score__grade--watch{ color:#a86a00 !important; }
.result__score .score__grade--care{ color:#c0392b !important; }
.result__score .score__grade--risk{ color:#b3261e !important; }

/* ===== 2026-11-03 네 축 우세 유형 강조: 우세 극 이름·숫자를 축 색(--ac)의 읽히는 진한 글자 + 옅은 배경·테두리로. 비우세는 muted 그대로, 막대·다른 차트 색 무변경 ===== */
.result__axes .axis-pole.on{ color:color-mix(in srgb, var(--ac, var(--type-ink)) 72%, #1b1b2b); font-weight:900;
  background:color-mix(in srgb, var(--ac, var(--type-ink)) 12%, #fff); border:1.5px solid color-mix(in srgb, var(--ac, var(--type-ink)) 40%, #fff);
  border-radius:999px; padding:3px 10px; }
.result__axes .axis-pole.on .axis-pct{ font-weight:900; opacity:1; color:inherit; }

/* ===== 2026-11-03 퍼스널컬러: 7항목 각 설명 바로 아래 실제 제품 칸 — 기존 계절 근거 제품만, 사진 없는 제품은 '제품 사진 확인 중'으로 구분 ===== */
.pcprod__slot{ margin:8px 0 14px; padding:11px 12px; border:1px solid #f0e3ea; border-radius:12px; background:#fffafc; }
.pcprod__slotH{ font-size:12px; font-weight:800; color:#E85B8E; margin:0 0 6px; }
.pcprod__pending{ font-size:12.5px; color:#56566a; line-height:1.5; margin:6px 0 0; word-break:keep-all; }
.pcprod__slot .pced{ margin:10px 0 0; }
.pcprod__slot .pcprod__row:last-of-type{ border-bottom:0; }
.pcprod__noimg{ flex:0 0 64px; height:64px; display:grid; place-items:center; padding:4px; text-align:center; border-radius:10px;
  background:#f4eef1; border:1px dashed #e2cfd8; font-size:10.5px; font-weight:700; line-height:1.3; color:#8a7682; word-break:keep-all; }

/* ===== [AXIS-LAYOUT 2026-11-06] 내 피부 컨디션 분석 배치: 위 = 네 축 타입 성향 막대 한 상자 · 아래 = 네 축 컨디션 카드(이름·지수·세부 다각형) =====
   카드 모양은 기존 2026-11-02 축 카드 토큰(#7C5CE6 24% 테두리 · 4% 바탕 · 반경 16)을 그대로 쓴다. 개요 상자 안의 막대 줄(.axis-row)은
   카드 겹침을 막기 위해 테두리·바탕 없이 구분선만. 계산·문구·막대 채움·상태 표시 규칙(axis-track--*, axis-pole.on 등)은 그대로 */
#resultAxes .axgrp__h{ margin:0 0 8px; font-size:15px; font-weight:900; color:#4b3a91; letter-spacing:-.2px; }
#resultAxes .axis-overview{ padding:16px 14px 6px; border:1px solid color-mix(in srgb, #7C5CE6 24%, #fff); border-radius:16px;
  background:color-mix(in srgb, #7C5CE6 4%, #fff); min-width:0; }
#resultAxes .axis-overview .axis-row{ padding:12px 0; border:0; border-radius:0; background:transparent; min-width:0; }
#resultAxes .axis-overview .axis-row:not(:last-child){ border-bottom:1px solid color-mix(in srgb, #7C5CE6 14%, #fff); }
#resultAxes .axis-overview .axgrp__h + .axis-row{ padding-top:4px; }
#resultAxes .axis-conds{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; min-width:0; }
#resultAxes .axis-conds .axgrp__h{ margin:6px 0 -2px; }
#resultAxes .axis-cond{ padding:16px 14px; border:1px solid color-mix(in srgb, #7C5CE6 24%, #fff); border-radius:16px;
  background:color-mix(in srgb, #7C5CE6 4%, #fff); min-width:0; }
#resultAxes .axis-cond > *{ min-width:0; }
#resultAxes .axis-cond .abil{ max-width:min(300px, 100%); }
@media (max-width:420px){
  #resultAxes .axis-overview{ padding:14px 12px 4px; }
  #resultAxes .axis-cond{ padding:14px 12px; }
}

/* ===== [PRECISION-SHARE 2026-11-06] 3번 관리 우선순위 '더 자세히 보기' 버튼 · 정밀 분석 공유 안내 팝업(기존 .sharesheet 모양 재사용) =====
   버튼은 관리 우선순위 상자 안 한 줄(새 상자 없음) · 44px 터치 높이. 팝업 상태 줄은 내용이 없을 때 자리만 차지하지 않게 숨긴다 */
#resultSynth .syn__more{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; margin:12px 0 0; padding:0 18px;
  border:1.5px solid color-mix(in srgb, #7C5CE6 55%, #fff); border-radius:999px; background:#fff; color:#4b3a91;
  font:inherit; font-size:14px; font-weight:800; cursor:pointer; }
#resultSynth .syn__more:hover{ background:color-mix(in srgb, #7C5CE6 6%, #fff); }
#resultSynth .syn__more:focus-visible{ outline:3px solid #7C5CE6; outline-offset:2px; }
.precshare .precshare__status:empty{ display:none; }
/* [V30-COVERAGE 2026-11-07] '피부 컨디션' 카드(.axis-cond)의 일반 원리 한 문단: 이름·지수 아래, 다각형 위. 새 상자·테두리 없음, 본문 글자 크기로 줄바꿈 */
.axis-cond .axsc__intro{ margin:6px 0 8px; padding:0; border:0; background:transparent; font-size:13.5px; line-height:1.6; color:#454052;
  word-break:keep-all; overflow-wrap:anywhere; }
/* [V30 2026-11-07] 정밀 분석 공유 안내 팝업(.sharesheet.precshare)만 화면 가운데 모달로. 다른 공유 창(.sharesheet)은 그대로 아래쪽 시트.
   가로·세로 가운데 · 안쪽 여백 · 최대 폭/높이 · 좁거나 낮은 화면에서는 상자 안에서 스크롤 · 네 모서리 모두 둥글게 */
.sharesheet.precshare{ align-items:center !important; justify-content:center !important;
  padding:max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)) !important; box-sizing:border-box; }
.sharesheet.precshare > .sharesheet__box{ width:100%; max-width:420px; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px);
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; margin:0 auto !important; border-radius:20px !important; box-sizing:border-box; }
@media (max-height:480px){ .sharesheet.precshare > .sharesheet__box{ max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); } }

/* ===== [LOCK-INERT 2026-11-06 · 비공개 후보] 잠긴 내용(직계 자식, inert·aria-hidden 처리됨)의 포인터·선택만 확실히 막는다 =====
   기존 블러(filter) 값·대상 규칙은 바꾸지 않는다. 안내(.lockov)는 늘 눌리게 둔다 */
.is-locked > [data-lock-content]{ pointer-events:none; user-select:none; -webkit-user-select:none; }
.is-locked > .lockov{ pointer-events:auto; }

/* ===== [SYNTHESIS-SHARE 2026-11-06 · 비공개] 3번 종합 평가 요약 한 문단 — 상자 없는 본문 글자만 ===== */
#resultSynth .syn__assess{ margin:14px 0 4px; padding:0; border:0; background:transparent; font-size:14.5px; line-height:1.72; color:#353943; word-break:keep-all; }

/* ===== [CARE-LIST 2026-11-07 · 비공개 v28] 3번: 관리 우선순위(순위·제목만 번호 목록) → '피부 타입 종합소견' 목록(마지막 항목 굵고 크게) =====
   #resultSynth 안의 새 클래스만. 상자·테두리·배경을 새로 만들지 않는다(중첩 카드 없음). 본문 16px · 마지막 강조 18.5px/800 */
#resultSynth .syn__prio{ list-style:none; margin:14px 0 0; padding:0; border:0; background:transparent; display:flex; flex-direction:column; gap:8px; }
#resultSynth .syn__prio li{ display:flex; align-items:baseline; gap:10px; margin:0; padding:0; font-size:16px; line-height:1.5; color:#1b1b2b; }
#resultSynth .syn__prioN{ flex:0 0 auto; min-width:3.3em; font-weight:800; color:#5b45c4; }
#resultSynth .syn__prioT{ flex:1 1 auto; min-width:0; font-weight:700; word-break:keep-all; overflow-wrap:anywhere; }
#resultSynth .syn__opH{ margin:22px 0 8px; padding:0; font-size:17px; font-weight:800; line-height:1.4; color:#1b1b2b; }
#resultSynth .syn__opinion{ list-style:disc; margin:0; padding:0 0 0 1.15em; border:0; background:transparent; }
#resultSynth .syn__opinion li{ margin:0 0 6px; padding:0; font-size:16px; line-height:1.65; color:#353943; word-break:keep-all; overflow-wrap:anywhere; }
#resultSynth .syn__opinion li.syn__opHook{ font-weight:700; color:#1b1b2b; }
#resultSynth .syn__opinion li.syn__opFinal{ margin-top:12px; font-size:18.5px; line-height:1.55; color:#1b1b2b; }
#resultSynth .syn__opinion li.syn__opFinal strong{ font-weight:800; }
/* [V30] 3번 짧은 소견 목록 아래 굵은 안내 한 줄(상자 없음) */
#resultSynth .syn__invite{ margin:14px 0 0; padding:0; font-size:17px; line-height:1.5; color:#1b1b2b; word-break:keep-all; }
#resultSynth .syn__invite strong{ font-weight:800; }
/* 좁은 화면(≤360px, 예: 320): 글자 크기는 유지하고 순위 칸 간격만 줄인다 */
@media (max-width:360px){
  #resultSynth .syn__prio li{ gap:8px; }
  #resultSynth .syn__prioN{ min-width:3em; }
  #resultSynth .syn__opinion{ padding-left:1.05em; }
}

/* ===== [ASSESSMENT-CARDS 2026-11-08 · 비공개 V39] 3번 '내 피부 종합 평가': 장점 → 단점 → 관리 우선순위 → 종합소견 → 더 자세히 알아보기 =====
   #resultSynth 안 새 클래스(.mga*)만. 기존 보라 토큰(#7C5CE6 · #4b3a91 · #5b45c4)을 그대로 쓴다. 모바일은 한 칸(좁은 다단 없음),
   넓은 화면에서도 장점만 2칸·단점은 늘 한 칸. 단점 카드는 제목·여백·관리 상자로 장점보다 무게 있게(V41: 왼쪽 색 띠 없음) */
#resultSynth .mga{ margin:22px 0 0; min-width:0; }
#resultSynth .syn__body > .mga:first-child, #resultSynth .mga__note + .mga{ margin-top:12px; }
#resultSynth .mga__note{ margin:4px 0 0; padding:10px 12px; border-radius:12px; background:color-mix(in srgb, #7C5CE6 6%, #fff);
  font-size:13.5px; line-height:1.6; color:#4b3a91; word-break:keep-all; overflow-wrap:anywhere; }
#resultSynth .mga__h{ display:flex; align-items:center; gap:8px; margin:0 0 10px; padding:0; font-size:17px; font-weight:800; line-height:1.4; color:#1b1b2b; }
#resultSynth .mga__hi{ flex:0 0 auto; display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%;
  font-size:13px; font-weight:900; line-height:1; }
#resultSynth .mga__hi--str{ color:#fff; background:#7C5CE6; }
#resultSynth .mga__hi--weak{ color:#fff; background:#4b3a91; }
#resultSynth .mga__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
#resultSynth .mga__card{ margin:0; min-width:0; border-radius:14px; word-break:keep-all; overflow-wrap:anywhere; }
#resultSynth .mga__card--str{ padding:13px 14px; border:1px solid color-mix(in srgb, #7C5CE6 22%, #fff); background:color-mix(in srgb, #7C5CE6 4%, #fff); }
/* [V41 R2] 사용자 지시("왼쪽 표 옆에 색깔 넣지 마"): 단점 카드의 굵은 왼쪽 색 띠를 없애고 사방 같은 1px 중립 테두리로.
   무게감은 제목 크기·여백·바탕(관리 포인트 카드만 아주 옅은 바탕)으로만 유지한다. 왼쪽 강조 띠는 다시 넣지 않는다 */
#resultSynth .mga__card--weak{ padding:16px; border:1px solid #e3e1ea;
  background:#fff; box-shadow:0 8px 22px -18px rgba(75,58,145,.55); }
#resultSynth .mga__card--weak.is-felt{ background:color-mix(in srgb, #4b3a91 3%, #fff); }
#resultSynth .mga__top{ display:flex; flex-wrap:wrap; gap:6px; }
#resultSynth .mga__tag{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:800; line-height:1.5; }
#resultSynth .mga__tag--type{ color:#5b45c4; background:color-mix(in srgb, #7C5CE6 11%, #fff); }
#resultSynth .mga__tag--resp{ color:#fff; background:#7C5CE6; }
#resultSynth .mga__tag--felt{ color:#4b3a91; background:#fff; border:1px solid color-mix(in srgb, #4b3a91 40%, #fff); }
#resultSynth .mga__t{ display:block; margin:7px 0 4px; font-size:16px; font-weight:800; line-height:1.45; color:#1b1b2b; }
#resultSynth .mga__card--weak .mga__t{ font-size:17px; color:#2e2366; }
#resultSynth .mga__hi--weak{ font-size:11px; }
#resultSynth .mga__d{ margin:0; font-size:14.5px; line-height:1.65; color:#353943; }
#resultSynth .mga__r{ margin:8px 0 0; padding:0; border:0;
  font-size:14px; line-height:1.6; font-weight:700; color:#4b3a91; }
#resultSynth .mga__care{ margin:12px 0 0; padding:10px 12px; border-radius:10px; background:color-mix(in srgb, #7C5CE6 7%, #fff); }
#resultSynth .mga__careH{ display:block; font-size:12px; font-weight:800; color:#5b45c4; margin:0 0 2px; }
#resultSynth .mga__careT{ margin:0; font-size:14.5px; font-weight:700; line-height:1.55; color:#1b1b2b; }
#resultSynth .mga__pot{ margin:4px 0 0; font-size:12.5px; line-height:1.5; color:#6b6380; }
#resultSynth .mga--prio .syn__prio{ margin-top:0; }
/* [V44-R5] 사용자 지시("관리 우선순위도 네모칸 쳐줘"): 관리 우선순위 전체를 사방 같은 1px 중립 테두리 + 둥근 모서리 상자로 감싼다.
   왼쪽 색 띠·두꺼운 왼쪽 테두리·장식 그림자는 넣지 않는다(V41 R2 원칙 그대로). 좁은 화면에서는 안쪽 여백만 줄이고 줄바꿈은 기존 규칙 그대로 */
#resultSynth .mga.mga--prio{ box-sizing:border-box; min-width:0; max-width:100%; padding:14px 16px; border:1px solid #e3e1ea; border-radius:14px; background:#fff; box-shadow:none; }
#resultSynth .mga.mga--prio .mga__h{ margin-bottom:8px; }
@media (max-width:360px){
  #resultSynth .mga.mga--prio{ padding:12px; }
}
#resultSynth .mga--op .syn__opH{ margin-top:0; }
#resultSynth .mga__cta{ margin:22px 0 0; padding:16px 14px; border-radius:16px; text-align:center;
  border:1px solid color-mix(in srgb, #7C5CE6 24%, #fff); background:color-mix(in srgb, #7C5CE6 4%, #fff); }
#resultSynth .mga__cta .syn__invite{ margin:0; }
/* [V41 R8] 안내 문장 위 작은 예시 이미지(기존 기능 설명용). 사선 줄무늬·왼쪽 강조 없음. 화면 폭에 맞춰 줄어든다.
   움직임 줄이기 설정 또는 일시정지면 GIF 를 숨기고 정지 이미지를 보인다 */
#resultSynth .mga__demo{ margin:0 auto 14px; padding:0; max-width:400px; } /* [V44-R5] 세로 480×760 예시 — 넓은 화면에서 지나치게 커지지 않게(휴대폰은 칸 폭에 맞춰 줄어듦) */
#resultSynth .mga__demoL{ margin:0 0 6px; font-size:12.5px; font-weight:700; color:#6b6380; text-align:center; }
#resultSynth .mga__demoBox{ border-radius:12px; overflow:hidden; border:1px solid #e3e1ea; background:#fff; line-height:0; }
#resultSynth .mga__demoBox img{ display:block; width:100%; height:auto; }
#resultSynth .mga__demoStatic{ display:none !important; }
#resultSynth .mga__demo.is-paused .mga__demoGif{ display:none !important; }
#resultSynth .mga__demo.is-paused .mga__demoStatic{ display:block !important; }
#resultSynth .mga__demoBtn{ margin:6px 0 0; min-height:32px; padding:0 12px; border:1px solid #d9d5e6; border-radius:999px; background:#fff;
  font:inherit; font-size:12.5px; font-weight:700; color:#4b3a91; cursor:pointer; }
#resultSynth .mga__demoBtn:focus-visible{ outline:3px solid #7C5CE6; outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  #resultSynth .mga__demoGif{ display:none !important; }
  #resultSynth .mga__demoStatic{ display:block !important; }
  #resultSynth .mga__demoBtn{ display:none; }
}
@media (min-width:640px){
  #resultSynth .mga__list--str{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:360px){
  #resultSynth .mga__card--str{ padding:12px; }
  #resultSynth .mga__card--weak{ padding:14px 12px; }
}

/* ===== [V41 R3 2026-11-08] 퍼스널컬러 제품 카드(.pcprod--cards 안에서만) — 스킨케어 기본 카드처럼: 위 = 사진 + 브랜드/전체 제품명/호수/가격, 아래 = 한 줄 전체 '제품 특징 자세히 보기'.
   좁은 화면(320/360/390)에서도 세 칸으로 쪼개지 않는다. 제품명은 자르지 않고 줄바꿈. 펼친 안쪽 맨 아래 '구매하기'. 왼쪽 색 띠·사선 무늬 없음. 기존 칸 바탕·테두리(.pcprod__slot)는 그대로 */
.pcprod--cards .pcprod__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.pcprod--cards .pcprod__item{ margin:0; min-width:0; border:1px solid #ece6ef; border-radius:12px; background:#fff; }
.pcprod--cards .pcprod__item.is-pending{ background:#fcfbfd; }
.pcprod--cards .pcprod__det{ margin:0; }
.pcprod--cards .pcprod__sum{ display:block; list-style:none; cursor:pointer; padding:10px 12px; }
.pcprod--cards .pcprod__sum::-webkit-details-marker{ display:none; }
.pcprod--cards .pcprod__sum:focus-visible{ outline:3px solid #7C5CE6; outline-offset:2px; border-radius:12px; }
.pcprod--cards .pcprod__top{ display:flex; align-items:flex-start; gap:12px; min-width:0; }
.pcprod--cards .pcprod__thumb{ flex:0 0 64px; width:64px; height:64px; border-radius:10px; object-fit:cover; background:#f4f2f7; }
.pcprod--cards .pcprod__thumb--none{ display:grid; place-items:center; text-align:center; font-size:10.5px; font-weight:700; line-height:1.3; color:#8a8399; }
.pcprod--cards .pcprod__id{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pcprod--cards .pcprod__brand{ font-size:12px; font-weight:700; color:#6b6380; }
.pcprod--cards .pcprod__name{ font-size:15px; font-weight:800; line-height:1.4; color:#1b1b2b; word-break:keep-all; overflow-wrap:anywhere; white-space:normal; }
.pcprod--cards .pcprod__shade{ font-size:12.5px; color:#56566a; word-break:keep-all; overflow-wrap:anywhere; }
.pcprod--cards .pcprod__price{ font-size:14px; font-weight:800; color:#1b1b2b; }
.pcprod--cards .pcprod__price--none{ font-size:12.5px; font-weight:700; color:#8a8399; }
.pcprod--cards .pcprod__more{ display:flex; align-items:center; justify-content:center; min-height:40px; margin:10px 0 0; border:1px solid #e3dfeb; border-radius:999px;
  font-size:13px; font-weight:800; color:#4b3a91; background:#fff; }
.pcprod--cards .pcprod__det[open] .pcprod__more{ background:#f6f4fb; }
.pcprod--cards .pcprod__detail{ padding:0 12px 12px; display:flex; flex-direction:column; gap:6px; }
.pcprod--cards .pcprod__ev, .pcprod--cards .pcprod__obs, .pcprod--cards .pcprod__ref{ margin:0; font-size:13px; line-height:1.55; color:#454052; word-break:keep-all; overflow-wrap:anywhere; }
.pcprod--cards .pcprod__ev b{ display:block; font-size:12px; color:#6b6380; margin:0 0 2px; }
.pcprod--cards .pcprod__buy{ display:flex; align-items:center; justify-content:center; min-height:44px; margin:4px 0 0; border-radius:12px;
  background:#4b3a91; color:#fff; font-size:14px; font-weight:800; text-decoration:none; }
.pcprod--cards .pcprod__buy:focus-visible{ outline:3px solid #7C5CE6; outline-offset:2px; }
@media (max-width:360px){
  .pcprod--cards .pcprod__top{ gap:10px; }
  .pcprod--cards .pcprod__thumb{ flex-basis:56px; width:56px; height:56px; }
  .pcprod--cards .pcprod__name{ font-size:14.5px; }
}

/* V31: answered, cancelling tendencies only; decorative, not an input. */
.result__axes .axis-track .axis-neutral-dot{position:absolute;left:50%;top:50%;width:10px;height:10px;transform:translate(-50%,-50%);border-radius:50%;background:#6b6380;pointer-events:none;}