xsl/juzi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(h5): apply October 12 customer report feedback

Browse Source
This commit is contained in:
xsl
2026-10-12 13:15:09 +08:00
parent 3193a4b683
commit d7ae748e08
22 changed files with 2282 additions and 1027 deletions
Download Patch File Download Diff File Expand all files Collapse all files
h5/css/style.css
+50 -50
View File
@@ -1,6 +1,6 @@
/* ═══════════════════════════════════════════
巨子测肤 · 1'me 在线肌肤测试 — H5 样式
设计稿 1080px 基准 → 375px(÷2.88);尺寸写成 N × --u,不同宽度手机等比缩放、视觉一致
设计稿 1080px 基准 → 375px(÷2.88);布局尺寸随 --u 缩放，字号使用固定 CSS px
主色 #F5F078 · 文字 #282828 · 底 #EFEFEF
═══════════════════════════════════════════ */
:root {
@@ -56,7 +56,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
background: var(--yellow);
border-radius: calc(5 * var(--u));
color: var(--ink);
font-size: calc(14.5 * var(--u)); font-weight: 500; letter-spacing: calc(.5 * var(--u));
font-size: 14.5px; font-weight: 500; letter-spacing: calc(.5 * var(--u));
text-align: center;
transition: transform .12s ease;
}
@@ -88,7 +88,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
.splash-slogan {
position: absolute; left: 0; right: 0; top: 10.7%;
text-align: center;
color: #fff; font-size: calc(23 * var(--u)); font-weight: 500;
color: #fff; font-size: 23px; font-weight: 500;
line-height: 1.38; letter-spacing: calc(.6 * var(--u));
text-shadow: 0 1px 8px rgba(0,0,0,.15);
}
@@ -99,7 +99,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
}
.brand-row { display: flex; align-items: center; gap: calc(7 * var(--u)); }
.brand-logo { width: calc(46 * var(--u)); height: auto; filter: brightness(0) invert(1); }
.brand-text { color: #fff; font-size: calc(21.5 * var(--u)); font-weight: 500; letter-spacing: calc(1 * var(--u)); }
.brand-text { color: #fff; font-size: 21.5px; font-weight: 500; letter-spacing: calc(1 * var(--u)); }
/* ═══════════ 03 档案填写 ═══════════ */
#s-profile { background: #0e0f18; }
@@ -116,14 +116,14 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
padding: calc(34 * var(--u)) calc(64 * var(--u)) calc(40 * var(--u));
}
.page-title {
color: #fff; font-size: calc(21.5 * var(--u)); font-weight: 700;
color: #fff; font-size: 21.5px; font-weight: 700;
letter-spacing: calc(1 * var(--u)); text-align: center;
margin-bottom: calc(22 * var(--u));
}
.field { margin-bottom: calc(19 * var(--u)); }
.field-label {
display: block; text-align: center;
color: #fff; font-size: calc(14.5 * var(--u)); font-weight: 400;
color: #fff; font-size: 14.5px; font-weight: 400;
margin-bottom: calc(9 * var(--u)); letter-spacing: calc(.5 * var(--u));
}
.form-row.two { display: flex; gap: calc(23 * var(--u)); }
@@ -135,7 +135,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
width: 100%; height: calc(37 * var(--u));
padding: 0 calc(13 * var(--u)) 0 calc(12 * var(--u));
background: #fff; border-radius: calc(5 * var(--u));
font-size: calc(13.5 * var(--u)); color: var(--ink); text-align: left;
font-size: 13.5px; color: var(--ink); text-align: left;
}
.pick-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick .chev { flex: none; width: calc(8 * var(--u)); height: calc(8 * var(--u)); margin-top: calc(-4 * var(--u)); border-width: 0 1.5px 1.5px 0; }
@@ -152,7 +152,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
}
.axis-item {
display: inline-flex; align-items: center; gap: calc(5 * var(--u));
font-size: calc(9 * var(--u)); color: var(--ink);
font-size: 9px; color: var(--ink);
}
.chip { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; display: inline-block; }
.skin-stage { position: relative; padding: 0 calc(28 * var(--u)); }
@@ -172,9 +172,9 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
display: flex; flex-direction: column; align-items: center;
}
.skin-item img { width: calc(109 * var(--u)); height: calc(109 * var(--u)); }
.skin-name { font-size: calc(12.5 * var(--u)); font-weight: 700; color: #000; margin-top: calc(16 * var(--u)); }
.skin-name { font-size: 12.5px; font-weight: 700; color: #000; margin-top: calc(16 * var(--u)); }
.skin-desc {
font-size: calc(10.3 * var(--u)); color: var(--ink);
font-size: 10.3px; color: var(--ink);
line-height: 1.55; text-align: center;
margin-top: calc(5 * var(--u)); max-width: calc(136 * var(--u));
}
@@ -222,7 +222,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
.cam-step {
position: absolute; left: 0; right: 0; top: 7.1%;
text-align: center;
color: #fff; font-size: calc(21.5 * var(--u)); font-weight: 500;
color: #fff; font-size: 21.5px; font-weight: 500;
line-height: 1.5; letter-spacing: calc(1 * var(--u));
text-shadow: 0 1px 10px rgba(0,0,0,.4);
z-index: 2;
@@ -232,7 +232,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
display: flex; justify-content: center; align-items: center; gap: calc(26 * var(--u));
z-index: 2;
}
.cam-guide span { color: #fff; font-size: calc(14.5 * var(--u)); font-weight: 400; }
.cam-guide span { color: #fff; font-size: 14.5px; font-weight: 400; }
.cam-guide i { width: 0; height: calc(15 * var(--u)); border-left: 1px solid rgba(255,255,255,.7); }
.cam-controls {
position: absolute; left: 0; right: 0; bottom: 5.2%;
@@ -281,7 +281,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
.cam-status {
position: absolute; top: 17px; left: 50%;
transform: translateX(-50%);
font-size: calc(11 * var(--u)); color: rgba(255,255,255,.85);
font-size: 11px; color: rgba(255,255,255,.85);
background: rgba(0,0,0,.35);
padding: 4px 12px; border-radius: 11px;
z-index: 2; opacity: 0; transition: opacity .25s; white-space: nowrap;
@@ -292,7 +292,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
.cam-hint {
position: absolute; left: 50%; bottom: 27%;
transform: translateX(-50%) translateY(6px);
font-size: calc(17 * var(--u)); font-weight: 500; color: #fff;
font-size: 17px; font-weight: 500; color: #fff;
text-shadow: 0 1px 8px rgba(0,0,0,.65);
z-index: 2; opacity: 0; pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
@@ -305,7 +305,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
.cam-nudge {
position: absolute; left: 50%; bottom: 16.5%;
transform: translateX(-50%) translateY(6px);
font-size: calc(11.5 * var(--u)); color: #fff;
font-size: 11.5px; color: #fff;
background: rgba(0,0,0,.55);
padding: 6px 14px; border-radius: 14px;
z-index: 2; opacity: 0; pointer-events: none;
@@ -336,14 +336,14 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
border: solid #fff; border-width: 0 0 calc(3 * var(--u)) calc(3 * var(--u));
transform: translate(-50%, -50%) rotate(-45deg);
}
.cam-next b { font-size: calc(17 * var(--u)); font-weight: 500; }
.cam-next span { margin-top: calc(8 * var(--u)); font-size: calc(14 * var(--u)); color: rgba(255,255,255,.85); line-height: 1.5; }
.cam-next b { font-size: 17px; font-weight: 500; }
.cam-next span { margin-top: calc(8 * var(--u)); font-size: 14px; color: rgba(255,255,255,.85); line-height: 1.5; }
/* ═══════════ 08 报告页 ═══════════ */
#s-report { background: var(--bg); }
.report-body { padding: 0 calc(18 * var(--u)) calc(28 * var(--u)); }
.report-title {
font-size: calc(23 * var(--u)); font-weight: 700; color: var(--ink);
font-size: 23px; font-weight: 700; color: var(--ink);
text-align: center; letter-spacing: calc(.5 * var(--u));
padding: calc(32 * var(--u)) 0 calc(20 * var(--u));
}
@@ -351,7 +351,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
background: #fff; border-radius: calc(8 * var(--u));
margin-bottom: calc(12 * var(--u));
}
.stat-label { font-size: calc(12 * var(--u)); color: var(--ink); }
.stat-label { font-size: 12px; color: var(--ink); }
.stat-value { color: var(--ink); line-height: 1; white-space: nowrap; }
.stat-value b { font-weight: 500; letter-spacing: calc(.5 * var(--u)); }
.stat-value i { font-style: normal; font-weight: 500; }
@@ -371,20 +371,20 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ring-center .stat-value b { font-size: calc(40 * var(--u)); }
.ring-center .stat-value i { font-size: calc(14 * var(--u)); }
.ring-center .stat-label { margin-top: calc(3 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--para); }
.ring-center .stat-value b { font-size: 40px; }
.ring-center .stat-value i { font-size: 14px; }
.ring-center .stat-label { margin-top: calc(3 * var(--u)); font-size: 11.5px; color: var(--para); }
.sum-age {
flex: 1; min-width: 0;
display: flex; flex-direction: column; align-items: flex-start;
padding-left: calc(26 * var(--u));
}
.stat-age { margin-top: calc(6 * var(--u)); }
.stat-age b { font-size: calc(58 * var(--u)); }
.stat-age i { font-size: calc(19 * var(--u)); margin-left: 2px; }
.stat-age b { font-size: 58px; }
.stat-age i { font-size: 19px; margin-left: 2px; }
.age-pill {
margin-top: calc(7 * var(--u));
font-size: calc(9.5 * var(--u)); color: var(--grey-2);
font-size: 9.5px; color: var(--grey-2);
background: #F2F2F2; border-radius: calc(9 * var(--u));
padding: calc(2 * var(--u)) calc(10 * var(--u));
white-space: nowrap;
@@ -400,9 +400,9 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
padding: 0 0 calc(4 * var(--u)) calc(14 * var(--u));
}
.dim + .dim { border-left: 1px solid #EFEFEF; }
.dim-name { font-size: calc(12 * var(--u)); color: var(--ink); }
.dim-score { margin-top: calc(4 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 500; color: var(--ink); line-height: 1.1; }
.dim-score b { font-size: calc(42 * var(--u)); font-weight: 500; }
.dim-name { font-size: 12px; color: var(--ink); }
.dim-score { margin-top: calc(4 * var(--u)); font-size: 30px; font-weight: 500; color: var(--ink); line-height: 1.1; }
.dim-score b { font-size: 42px; font-weight: 500; }
.dim-score.dim-bad { color: var(--bad); }
.dim-bar {
display: block; margin-top: calc(6 * var(--u));
@@ -415,7 +415,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
.dim-flag {
visibility: hidden;
margin-top: calc(6 * var(--u));
font-style: normal; font-size: calc(9 * var(--u)); color: var(--ink);
font-style: normal; font-size: 9px; color: var(--ink);
background: #F8F4A6; border-radius: calc(8 * var(--u));
padding: calc(1 * var(--u)) calc(8 * var(--u));
}
@@ -429,15 +429,15 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
content: ""; position: absolute; left: calc(14 * var(--u)); top: calc(12 * var(--u)); bottom: calc(12 * var(--u));
width: calc(3 * var(--u)); border-radius: 2px; background: var(--yellow);
}
.dims-note-l1 { font-size: calc(13 * var(--u)); color: var(--para); }
.dims-note-l1 { font-size: 13px; color: var(--para); }
.dims-note-l1 b { font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.dims-note-l2 { margin-top: calc(4 * var(--u)); font-size: calc(12 * var(--u)); color: var(--grey); }
.dims-note-l2 { margin-top: calc(4 * var(--u)); font-size: 12px; color: var(--grey); }
/* 维度详情卡(原布局):紧塑力/活力感/稳定力三个 Tab,每个 Tab 两条「竖排标题 + 左图右文」;检测图点击放大 */
.card-detail { padding: 0 calc(19 * var(--u)) calc(19 * var(--u)); }
.detail-tabs { display: flex; border-bottom: 1px solid #F0F0F0; }
.dtab { flex: 1; padding: calc(13 * var(--u)) 0 0; font-weight: 500; color: var(--ink); }
.dtab-tx { position: relative; display: inline-block; font-size: calc(10.1 * var(--u)); padding: 0 calc(5 * var(--u)) calc(7 * var(--u)); }
.dtab-tx { position: relative; display: inline-block; font-size: 10.1px; padding: 0 calc(5 * var(--u)) calc(7 * var(--u)); }
.dtab.active { font-weight: 700; }
.dtab.active .dtab-tx::after {
content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -1px;
@@ -458,28 +458,28 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
.ditem-title {
writing-mode: vertical-rl;
letter-spacing: calc(4 * var(--u));
font-size: calc(11.5 * var(--u)); font-weight: 500; color: var(--ink);
font-size: 11.5px; font-weight: 500; color: var(--ink);
margin-right: calc(3.5 * var(--u)); flex-shrink: 0;
}
.ditem-para { font-size: calc(10.1 * var(--u)); font-weight: 400; color: var(--para); line-height: 1.41; overflow-wrap: anywhere; }
.ditem-para { font-size: 10.1px; font-weight: 400; color: var(--para); line-height: 1.41; overflow-wrap: anywhere; }
.vm-notes { font-size: calc(10 * var(--u)); color: var(--grey-3); line-height: 1.7; margin: calc(14 * var(--u)) calc(6 * var(--u)) 0; }
.vm-notes { font-size: 10px; color: var(--grey-3); line-height: 1.7; margin: calc(14 * var(--u)) calc(6 * var(--u)) 0; }
.report-disclaimer {
font-size: calc(10 * var(--u)); color: var(--para);
font-size: 10px; color: var(--para);
line-height: 1.7; margin: calc(18 * var(--u)) calc(6 * var(--u)) calc(14 * var(--u));
}
/* 护理建议 / 精华推荐 */
.card-care, .card-essence { padding: calc(20 * var(--u)) calc(22 * var(--u)) calc(18 * var(--u)); }
.card-heading { font-size: calc(17 * var(--u)); font-weight: 700; color: #000; margin-bottom: calc(10 * var(--u)); }
.care-item { font-size: calc(13.5 * var(--u)); color: var(--para); line-height: 1.7; margin-bottom: calc(10 * var(--u)); overflow-wrap: anywhere; }
.care-summary { font-size: calc(13.5 * var(--u)); font-weight: 500; color: #000; margin-top: calc(4 * var(--u)); }
.essence-name { font-size: calc(16 * var(--u)); font-weight: 700; color: var(--ink); }
.essence-triggers { font-size: calc(11 * var(--u)); color: var(--grey-3); margin-top: calc(6 * var(--u)); line-height: 1.5; }
.card-heading { font-size: 17px; font-weight: 700; color: #000; margin-bottom: calc(10 * var(--u)); }
.care-item { font-size: 13.5px; color: var(--para); line-height: 1.7; margin-bottom: calc(10 * var(--u)); overflow-wrap: anywhere; }
.care-summary { font-size: 13.5px; font-weight: 500; color: #000; margin-top: calc(4 * var(--u)); }
.essence-name { font-size: 16px; font-weight: 700; color: var(--ink); }
.essence-triggers { font-size: 11px; color: var(--grey-3); margin-top: calc(6 * var(--u)); line-height: 1.5; }
/* 产品推荐:大标题落在灰底;白卡左文案右图(各占一半) */
.prod-title {
font-size: calc(23 * var(--u)); font-weight: 700; color: var(--ink);
font-size: 23px; font-weight: 700; color: var(--ink);
line-height: 1.45; text-align: center; letter-spacing: calc(1 * var(--u));
margin: calc(30 * var(--u)) 0 calc(18 * var(--u));
}
@@ -491,8 +491,8 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
display: flex; flex-direction: column; align-items: flex-start;
}
.prod-badge { width: calc(44 * var(--u)); height: auto; }
.prod-name { font-size: calc(14.5 * var(--u)); font-weight: 700; color: var(--ink); line-height: 1.45; margin-top: calc(10 * var(--u)); }
.prod-sub { font-size: calc(9.5 * var(--u)); color: var(--grey-3); margin-top: auto; padding-top: calc(10 * var(--u)); }
.prod-name { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.45; margin-top: calc(10 * var(--u)); }
.prod-sub { font-size: 9.5px; color: var(--grey-3); margin-top: auto; padding-top: calc(10 * var(--u)); }
.prod-scroll { flex: 0 0 51%; display: flex; overflow: hidden; }
.prod-scroll img { width: 100%; height: 100%; object-fit: cover; }
.btn-more { margin: calc(26 * var(--u)) auto 0; }
@@ -528,11 +528,11 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
}
.popup-close img { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
.popup-title {
font-size: calc(23 * var(--u)); font-weight: 500; color: var(--ink);
font-size: 23px; font-weight: 500; color: var(--ink);
line-height: 1.38; letter-spacing: calc(.5 * var(--u));
margin-bottom: calc(14 * var(--u));
}
.popup-body { font-size: calc(11.6 * var(--u)); color: var(--ink); line-height: 1.6; margin-bottom: calc(26 * var(--u)); }
.popup-body { font-size: 11.6px; color: var(--ink); line-height: 1.6; margin-bottom: calc(26 * var(--u)); }
.privacy-row { display: flex; align-items: center; gap: calc(9 * var(--u)); cursor: pointer; }
.checkbox {
width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%;
@@ -544,7 +544,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
inset: 2px; border-radius: 50%;
background: var(--ink-2);
}
.privacy-text { font-size: calc(10.3 * var(--u)); color: var(--grey-2); }
.privacy-text { font-size: 10.3px; color: var(--grey-2); }
.privacy-link { color: var(--ink); font-weight: 500; text-decoration: underline; cursor: pointer; }
.privacy-link:active { opacity: .7; }
.popup-btn { margin: auto auto 0; }
@@ -566,10 +566,10 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
.overlay-dark { background: rgba(16,16,16,.82); }
.analyzing {
color: #fff; text-align: center;
font-size: calc(14 * var(--u)); letter-spacing: 1px;
font-size: 14px; letter-spacing: 1px;
display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.analyzing-tip { font-size: calc(11 * var(--u)); color: rgba(255,255,255,.45); letter-spacing: 0; }
.analyzing-tip { font-size: 11px; color: rgba(255,255,255,.45); letter-spacing: 0; }
.spinner {
width: 34px; height: 34px;
border: 3px solid rgba(255,255,255,.25);
@@ -585,7 +585,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; col
transform: translateX(-50%) translateY(8px);
max-width: 86%;
background: rgba(20,20,20,.85); color: #fff;
font-size: calc(13 * var(--u)); line-height: 1.5; text-align: center;
font-size: 13px; line-height: 1.5; text-align: center;
padding: 9px 18px; border-radius: 18px;
opacity: 0; pointer-events: none;
transition: all .25s ease;
h5/css/ui-20261009.css
+33 -29
View File
@@ -9,78 +9,82 @@
#s-login { background: #142632 url(../assets/img/ui-20261009/bg-login-h5.webp) center/cover no-repeat; }
.login-brand { position: absolute; width: calc(145 * var(--u)); left: 50%; top: 14%; transform: translateX(-50%); }
.login-bottom { position: absolute; left: 0; right: 0; bottom: max(5%, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u)); }
.login-button { width: calc(270 * var(--u)); height: calc(40 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u)); border-radius: calc(5 * var(--u)); font-size: calc(14 * var(--u)); }
.login-button { width: calc(270 * var(--u)); height: calc(40 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u)); border-radius: calc(5 * var(--u)); font-size: 14px; }
.login-button img { width: calc(23 * var(--u)); height: calc(20 * var(--u)); object-fit: contain; }
.login-wechat { background: var(--yellow); color: #000; }
.login-browser { color: #fff; border: 1px solid #ffffff80; }
.login-consent { display: flex; align-items: center; gap: calc(8 * var(--u)); max-width: 90%; color: #eee; font-size: calc(10 * var(--u)); margin-top: calc(9 * var(--u)); }
.login-consent { display: flex; align-items: center; gap: calc(8 * var(--u)); max-width: 90%; color: #eee; font-size: 10px; margin-top: calc(9 * var(--u)); }
.login-consent input { accent-color: var(--yellow); width: 13px; height: 13px; }
.login-consent button { color: var(--yellow); text-decoration: underline; font-size: inherit; }
.login-message { min-height: calc(28 * var(--u)); max-width: 84%; color: #eee; text-align: center; font-size: calc(10 * var(--u)); line-height: 1.5; }
.login-message { min-height: calc(28 * var(--u)); max-width: 84%; color: #eee; text-align: center; font-size: 10px; line-height: 1.5; }
.splash-bg, .guide-bg { background-image: url(../assets/img/ui-20261009/bg-splash-h5.webp); }
.splash-slogan { top: 7.2%; font-size: calc(23 * var(--u)); line-height: 1.16; letter-spacing: 0; font-weight: 400; }
.splash-slogan { top: 7.2%; font-size: 23px; line-height: 1.16; letter-spacing: 0; font-weight: 400; }
.splash-bottom { bottom: 6.5%; gap: calc(9 * var(--u)); }
.brand-row { margin-bottom: calc(7 * var(--u)); gap: calc(5 * var(--u)); }
.brand-logo { width: calc(48 * var(--u)); }
.brand-text { font-size: calc(19 * var(--u)); letter-spacing: 0; }
.brand-text { font-size: 19px; letter-spacing: 0; }
.btn-history { background: #fff; }
.profile-bg { background: url(../assets/img/ui-20261009/bg-profile-h5.webp) center/cover no-repeat; }
.skin-desc { max-width: calc(150 * var(--u)); font-size: calc(11.5 * var(--u)); }
.skin-desc { max-width: calc(150 * var(--u)); font-size: 11.5px; }
#s-history { background: #efefef url(../assets/img/ui-20261009/bg-history-h5.webp) center/cover fixed; }
.history-content { padding: calc(28 * var(--u)) calc(17 * var(--u)) calc(36 * var(--u)); }
.history-count { text-align: center; padding: calc(16 * var(--u)) calc(12 * var(--u)) calc(21 * var(--u)); }
.history-count > span { color: #888; font-size: calc(12 * var(--u)); }
.history-count > span { color: #888; font-size: 12px; }
.history-count > span::after { content: ''; display: block; width: calc(45 * var(--u)); margin: calc(12 * var(--u)) auto; border-bottom: 1px solid #eee; }
.history-count p { font-size: calc(12 * var(--u)); }
.identity-note { color: #888; font-size: calc(10 * var(--u)); line-height: 1.6; margin: calc(12 * var(--u)) calc(4 * var(--u)) calc(20 * var(--u)); }
.history-count p { font-size: 12px; }
.identity-note { color: #888; font-size: 10px; line-height: 1.6; margin: calc(12 * var(--u)) calc(4 * var(--u)) calc(20 * var(--u)); }
.history-item { padding: calc(13 * var(--u)) calc(19 * var(--u)) calc(10 * var(--u)); overflow: hidden; margin-top: calc(6 * var(--u)); }
.history-item p { font-size: calc(12 * var(--u)); padding-bottom: calc(7 * var(--u)); border-bottom: 1px solid #eee; }
.history-item p { font-size: 12px; padding-bottom: calc(7 * var(--u)); border-bottom: 1px solid #eee; }
.history-item p span { color: #888; margin-right: calc(8 * var(--u)); }
.history-detail { display: block; margin: calc(7 * var(--u)) 0 0 auto; background: var(--yellow); border-radius: calc(5 * var(--u)); width: calc(80 * var(--u)); font-size: calc(12 * var(--u)); min-height: calc(23 * var(--u)); }
.history-detail { display: block; margin: calc(7 * var(--u)) 0 0 auto; background: var(--yellow); border-radius: calc(5 * var(--u)); width: calc(80 * var(--u)); font-size: 12px; min-height: calc(23 * var(--u)); }
.history-retry { display: block; margin: 20px auto; color: #707070; text-decoration: underline; font-size: 12px; }
#s-report { background: #efefef url(../assets/img/ui-20261009/bg-report-h5.webp) center top/100% auto; }
.report-body { padding: calc(28 * var(--u)) calc(17 * var(--u)) calc(42 * var(--u)); }
.report-title { font-size: calc(23 * var(--u)); padding: 0; margin-bottom: calc(23 * var(--u)); }
.report-title { font-size: 23px; padding: 0; margin-bottom: calc(23 * var(--u)); }
.card { border-radius: calc(7 * var(--u)); }
.card-summary { display: grid; grid-template-columns: 1fr 1fr; gap: calc(15 * var(--u)) 0; padding: calc(16 * var(--u)) calc(14 * var(--u)); }
.sum-score { width: auto; flex: none; }
.sum-age { min-width: 0; padding-left: calc(16 * var(--u)); align-items: center; }
.sum-age .stat-label { font-size: calc(12 * var(--u)); }
.stat-age b { font-size: calc(54 * var(--u)); }
.sum-age .stat-label { font-size: 12px; }
.stat-age b { font-size: 54px; }
.card-dims { grid-column: 1 / -1; padding: 0; }
.dims-row { margin: 0; }
.dim-name { font-size: calc(11 * var(--u)); }
.dim-score { font-size: calc(27 * var(--u)); }
.dim-score b { font-size: calc(36 * var(--u)); }
.dim-flag { font-size: calc(8 * var(--u)); }
.dim-name { font-size: 11px; }
.dim-score { font-size: 27px; }
.dim-score b { font-size: 36px; }
.dim-flag { font-size: 8px; }
.age-pill, .dims-note { display: none !important; }
.dimension-title { font-size: calc(23 * var(--u)); text-align: center; margin: calc(24 * var(--u)) 0 calc(12 * var(--u)); }
.dimension-title { font-size: 23px; text-align: center; margin: calc(24 * var(--u)) 0 calc(12 * var(--u)); }
.card-detail { margin-top: 0; padding: calc(4 * var(--u)) calc(39 * var(--u)) calc(19 * var(--u)); }
.detail-tabs { border: none; }
.dtab-tx { font-size: calc(12 * var(--u)); padding-bottom: calc(10 * var(--u)); }
.dtab-tx { font-size: 12px; padding-bottom: calc(10 * var(--u)); }
.dtab.active .dtab-tx::after { width: calc(76 * var(--u)); height: calc(7 * var(--u)); }
.dpanel.active { padding-top: calc(10 * var(--u)); }
.ditem { display: block; }
.viz-frame { position: relative; width: calc(215 * var(--u)); height: calc(278 * var(--u)); margin: 0 auto calc(12 * var(--u)); background: #f6f6f6; border-radius: calc(5 * var(--u)); overflow: hidden; }
.ditem-img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; position: relative; z-index: 1; }
.viz-missing { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #888; font-size: calc(12 * var(--u)); }
.ditem-img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; position: relative; z-index: 1; }
.viz-missing { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #888; font-size: 12px; }
.ditem-img:not([hidden]) + .viz-missing { display: none; }
.ditem-text { border-top: 1px solid #eee; padding-top: calc(10 * var(--u)); }
.ditem-para { font-size: calc(12 * var(--u)); line-height: 1.55; }
.ditem-para { font-size: 12px; line-height: 1.55; white-space: pre-line; }
.card-detail { touch-action: pan-y; }
.viz-caption { color: #707070; font-size: 11px; line-height: 1.6; margin-top: 10px; }
.card-care { padding: calc(20 * var(--u)) calc(25 * var(--u)); }
.card-heading { font-size: calc(23 * var(--u)); text-align: center; margin-bottom: calc(18 * var(--u)); }
.care-item, .care-summary { font-size: calc(12 * var(--u)); }
.card-heading { font-size: 23px; text-align: center; margin-bottom: calc(18 * var(--u)); }
.care-item, .care-summary { font-size: 12px; }
.prod-card { min-height: calc(175 * var(--u)); }
.prod-info { padding: calc(32 * var(--u)) calc(15 * var(--u)) calc(20 * var(--u)); }
#product-title { font-size: calc(14 * var(--u)); font-weight: 600; white-space: nowrap; }
.prod-name { font-size: calc(12 * var(--u)); font-weight: 400; margin-top: calc(6 * var(--u)); }
#product-title { font-size: 14px; font-weight: 600; white-space: nowrap; }
.prod-info { min-width: 0; padding-left: clamp(8px, 2.5vw, 15px); padding-right: clamp(8px, 2.5vw, 15px); }
.product-line { display: block; white-space: nowrap; }
.prod-name { font-size: 12px; font-weight: 400; margin-top: calc(6 * var(--u)); }
.prod-badge { width: calc(36 * var(--u)); margin-top: calc(20 * var(--u)); }
.prod-scroll { flex-basis: 50%; }
.prod-scroll img { object-fit: cover; aspect-ratio: 1 / 1; }
#p-privacy { background: linear-gradient(#0008,#0008),url(../assets/img/ui-20261009/bg-splash-h5.webp) center/cover; }
#p-photoguide .popup { padding: calc(62 * var(--u)) calc(30 * var(--u)) calc(40 * var(--u)); }
.popup-title-center { text-align: left; margin: 0 0 calc(18 * var(--u)); }
.guide-description { font-size: calc(12 * var(--u)); line-height: 1.6; margin-bottom: calc(35 * var(--u)); }
.guide-description { font-size: 12px; line-height: 1.6; margin-bottom: calc(35 * var(--u)); }
.cam-feature-lines { fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 5 5; filter: drop-shadow(0 1px 1px #000); }
#s-cam:not(.cam-live) .cam-feature-lines { stroke: #111; filter: none; }
.font-credit { display: block; text-align: center; color: #888; font-size: 10px; margin: 24px auto 0; }
@@ -95,4 +99,4 @@
.login-success-icon { width: 48px; height: 48px; border-radius: 50%; background: #e9f8ef; color: #17994f; font-size: 30px; line-height: 48px; }
.login-success-popup h2 { font-size: 20px; font-weight: 600; }
.login-success-popup p { font-size: 14px; line-height: 1.7; color: #666; white-space: pre-line; }
@media (max-height: 560px) { .login-brand { top: 8%; } .login-bottom { bottom: 2%; } .splash-slogan { font-size: calc(18 * var(--u)); } }
@media (max-height: 560px) { .login-brand { top: 8%; } .login-bottom { bottom: 2%; } }