.diagnosis-page { --page-rpx: min(.133333333vw, 1px); min-height: 100vh; padding: calc(30 * var(--page-rpx)) calc(28 * var(--page-rpx)) calc(88 * var(--page-rpx)); color: #18273a; }
.diagnosis-page button { font: inherit; }
.diagnosis-section { margin-top: calc(28 * var(--page-rpx)); }
.diagnosis-learning-entry { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 22px 23px; border: 1px solid rgba(48,106,174,.1); border-radius: 24px; background: linear-gradient(145deg,#f8fbfe,#edf5fb); box-shadow: 0 10px 28px rgba(44,88,140,.07); color: #1c344e; }
.diagnosis-learning-entry > b { display: flex; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center; border-radius: 15px; background: linear-gradient(135deg,#55aaf0,#327fcf); color: #fff; }
.diagnosis-learning-entry > div { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.diagnosis-learning-entry span { color: #4f8fd8; font-size: 12px; font-weight: 700; }
.diagnosis-learning-entry strong { margin-top: 3px; font-size: 18px; }
.diagnosis-learning-entry p { margin: 5px 0 0; color: #71849a; font-size: 13px; }
.diagnosis-learning-entry em { color: #428bd4; font-size: 30px; font-style: normal; }
.diagnosis-card { margin-bottom: 17px; padding: 23px 22px; border: 1px solid #e0e6ef; border-radius: 25px; background: #fff; box-shadow: 0 10px 27px rgba(45,64,101,.07); }
.diagnosis-card > header { display: flex; align-items: center; gap: 13px; }
.diagnosis-card > header > span { display: flex; width: 36px; height: 36px; flex: none; align-items: center; justify-content: center; border-radius: 13px; background: #eceeff; color: #5a69bd; font-weight: 820; }
.diagnosis-card h2 { margin: 0; color: #293f6d; font-size: 19px; }
.diagnosis-summary { color: #5d7082; line-height: 1.72; }
.diagnosis-details { margin: 18px -22px -23px; padding: 20px 22px 23px; border-top: 1px solid #e7eaf4; border-radius: 0 0 25px 25px; background: #fcfcff; }
.diagnosis-intro { padding: 16px 18px; border-radius: 17px; background: #f0f2ff; color: #52618c; line-height: 1.7; }
.diagnosis-group { margin-top: 22px; }
.diagnosis-group + .diagnosis-group { padding-top: 21px; border-top: 1px dashed #dde2ee; }
.diagnosis-group > h3 { margin: 0; color: #44549b; font-size: 16px; }
.diagnosis-item-list { margin-top: 13px; }
.diagnosis-item { display: grid; grid-template-columns: 98px minmax(0,1fr); gap: 14px; padding: 14px 15px; border-radius: 16px; background: #fff; }
.diagnosis-item + .diagnosis-item { margin-top: 9px; }
.diagnosis-item strong { color: #5568b7; font-size: 14px; line-height: 1.65; }
.diagnosis-item p { margin: 0; color: #4c6375; font-size: 14px; line-height: 1.68; }
.diagnosis-compare-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.diagnosis-compare-card { min-width: 0; padding: 17px 15px 15px; border: 1px solid #dce7e9; border-radius: 19px; background: #f3fbfa; }
.diagnosis-compare-card.attention { border-color: #e2dff0; background: #f8f6fc; }
.diagnosis-compare-card > img { display: block; width: 100%; height: 126px; margin: -5px auto 12px; object-fit: contain; }
.diagnosis-compare-card header { display: flex; align-items: center; gap: 10px; }
.diagnosis-compare-card header > b { display: flex; width: 32px; height: 32px; flex: none; align-items: center; justify-content: center; border-radius: 11px; background: #3ba7a1; color: #fff; }
.diagnosis-compare-card.attention header > b { background: #8175ae; }
.diagnosis-compare-card header div { display: flex; min-width: 0; flex-direction: column; }
.diagnosis-compare-card header strong { color: #277d7b; font-size: 15px; }
.diagnosis-compare-card header span { color: #77908f; font-size: 11px; }
.diagnosis-compare-card p { display: flex; gap: 8px; margin: 8px 0 0; color: #49686e; font-size: 13px; line-height: 1.45; }
.diagnosis-compare-card p i { width: 7px; height: 7px; flex: none; margin-top: 6px; border-radius: 50%; background: #59b8b0; }
.diagnosis-compare-card footer { margin-top: 12px; padding-top: 11px; border-top: 1px dashed #cfe1df; color: #587679; font-size: 12px; line-height: 1.55; }
.diagnosis-group .table-wrap { margin-top: 14px; border-radius: 18px; background: #fff; }
.diagnosis-group .data-table { min-width: 620px; }
.diagnosis-group .data-table th { background: #eaedff; color: #4c5ca7; }
.diagnosis-group .table-scroll-hint { display: block; margin-top: 7px; color: #8291a1; font-size: 12px; text-align: right; }
.diagnosis-group > aside,.diagnosis-visual-guide > aside { display: block; margin-top: 14px; padding: 14px 16px; border-radius: 15px; background: #fff5e6; color: #86612f; font-size: 13px; line-height: 1.62; }
.diagnosis-figure-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 18px; align-items: start; }
.diagnosis-figure { min-width: 0; overflow: hidden; padding: 12px; border: 1px solid #deebf5; border-radius: 18px; background: #fff; text-align: left; }
.diagnosis-figure.wide { grid-column: 1/-1; }
.diagnosis-figure img { display: block; width: 100%; border-radius: 10px; }
.diagnosis-figure strong,.diagnosis-figure span,.diagnosis-figure small { display: block; }
.diagnosis-figure strong { margin-top: 12px; color: #234b73; font-size: 15px; }
.diagnosis-figure span { margin-top: 6px; color: #60768b; font-size: 13px; line-height: 1.6; }
.diagnosis-figure small { margin-top: 8px; color: #4384bd; }
.diagnosis-face-map { position: relative; display: block; width: 100%; margin-top: 14px; overflow: hidden; padding: 0; border: 1px solid rgba(48,106,174,.1); border-radius: 22px; background: #f5faff; }
.diagnosis-face-map > img { display: block; width: 100%; }
.diagnosis-face-label { position: absolute; display: flex; padding: 4px 7px; transform: translate(-50%,-50%); align-items: center; gap: 4px; border: 1px solid rgba(255,255,255,.9); border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 4px 13px rgba(44,88,140,.14); }
.diagnosis-face-label.forehead { left: 50%; top: 37%; }.diagnosis-face-label.left-cheek { left: 65.5%; top: 63%; }.diagnosis-face-label.right-cheek { left: 34.5%; top: 63%; }.diagnosis-face-label.nose { left: 50%; top: 60%; }.diagnosis-face-label.chin { left: 50%; top: 77%; }
.diagnosis-face-label small { color: #52687d; }.diagnosis-face-label b { color: #3478c5; }
.diagnosis-face-map em { position: absolute; right: 10px; bottom: 8px; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.9); color: #71859b; font-size: 11px; font-style: normal; }
.diagnosis-visual-guide { margin-top: 18px; padding: 20px; border: 1px solid #d7e7e8; border-radius: 21px; background: linear-gradient(155deg,#fff,#f4fbfa); }
.diagnosis-visual-guide > header { display: flex; align-items: center; gap: 12px; }
.diagnosis-visual-guide > header > b { display: flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 13px; background: linear-gradient(135deg,#46b8b2,#238f92); color: #fff; }
.diagnosis-visual-guide > header div { display: flex; flex: 1; flex-direction: column; }.diagnosis-visual-guide > header span { color: #2d9294; font-size: 12px; }.diagnosis-visual-guide > header strong { color: #294b63; }.diagnosis-visual-guide > header em { padding: 5px 9px; border-radius: 999px; background: #e6f6f3; color: #278b85; font-size: 11px; font-style: normal; }
.diagnosis-guide-image { display: block; width: 100%; margin-top: 15px; padding: 14px; border: 1px solid #e0e8e8; border-radius: 18px; background: #fff; }.diagnosis-guide-image img { display: block; width: min(100%,430px); margin: auto; }.diagnosis-guide-image small { display: block; margin-top: 8px; color: #8a999f; }
.diagnosis-guide-gates,.diagnosis-guide-rules { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 14px; }.diagnosis-guide-rules { grid-template-columns: repeat(2,1fr); }.diagnosis-guide-gates div,.diagnosis-guide-rules div { display: flex; flex-direction: column; padding: 12px; border-radius: 15px; background: #eef8f7; text-align: center; }.diagnosis-guide-gates strong,.diagnosis-guide-rules strong { color: #278b87; }.diagnosis-guide-gates span,.diagnosis-guide-rules span { margin-top: 4px; color: #698084; font-size: 12px; }
.diagnosis-guide-method { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 14px; margin-top: 15px; padding: 16px; border-radius: 17px; background: #edf2ff; color: #536579; line-height: 1.65; }.diagnosis-guide-method strong { color: #5365b2; }
.diagnosis-source-card { margin-top: 24px; padding: 25px 27px; border: 1px solid #dbe2ec; border-radius: 25px; background: #fff; }.diagnosis-source-card > span { color: #7b8999; font-size: 12px; font-weight: 720; letter-spacing: 2px; }.diagnosis-source-card > strong,.diagnosis-source-card div > strong { display: block; margin-top: 8px; color: #2b416a; font-size: 17px; }.diagnosis-source-card p { margin: 8px 0 0; color: #68798c; font-size: 13px; line-height: 1.6; }.diagnosis-source-card div { margin-top: 18px; padding-top: 12px; border-top: 1px solid #deebf5; }
.diagnosis-preview { position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column; padding: 24px 20px max(36px,env(safe-area-inset-bottom)); background: #13283d; color: #fff; }.diagnosis-preview > header { display: flex; align-items: center; justify-content: space-between; }.diagnosis-preview > header button { padding: 10px 15px; border: 0; border-radius: 20px; background: rgba(255,255,255,.14); color: #fff; }.diagnosis-preview-main { position: relative; display: flex; min-height: 0; flex: 1; align-items: center; justify-content: center; }.diagnosis-preview-main img { max-width: 100%; max-height: 100%; object-fit: contain; }.preview-arrow { position: absolute; z-index: 2; top: 50%; width: 42px; height: 52px; border: 0; border-radius: 16px; background: rgba(255,255,255,.14); color: #fff; font-size: 34px; transform: translateY(-50%); }.preview-arrow.previous { left: 0; }.preview-arrow.next { right: 0; }.diagnosis-preview > strong,.diagnosis-preview > p { margin: 12px 0 0; text-align: center; }.diagnosis-preview > p { color: #c9d9e8; }
.tab-listening .diagnosis-card > header > span { background: #e7f5f1; color: #388c7b; }.tab-inquiry .diagnosis-card > header > span { background: #fff0e6; color: #c06e36; }.tab-pulse .diagnosis-card > header > span,.tab-touch .diagnosis-card > header > span { background: #eaf2fb; color: #407caf; }.tab-differentiation .diagnosis-card > header > span { background: #f2ebfb; color: #7854a7; }
@media (max-width: 430px) { .diagnosis-compare-grid { grid-template-columns: 1fr 1fr; }.diagnosis-item { grid-template-columns: 88px minmax(0,1fr); }.diagnosis-learning-entry { padding: 17px; }.diagnosis-card { padding: 19px 17px; }.diagnosis-details { margin-right: -17px; margin-left: -17px; padding-right: 17px; padding-left: 17px; } }