/* ===================================================================== 쇼핑몰 속도 진단 (오른쪽 위 단추 · 오른쪽 아래 카드 · 진단 창) — 개발놀이터 화이트 디자인 화면: views/playdev/layout.php 의 #diag, 동작: site.js 의 diagnose ===================================================================== */ :root { --dg-line: #444; --dg-soft: #f2f3f3; --dg-tint: #f5f2ff; --dg-sub: #666; --dg-dim: #999; --dg-good: #12b76a; --dg-mid: #f79009; --dg-bad: #f04438; } /* style.css 가 span·p·div 등에 19px·검정을 박아 두어서, 이 안에서는 부모 값을 그대로 물려받게 */ #diag *, #diagCard *, .diag-top * { color: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; font-weight: inherit; } .m-only { display: none; } body.diag-open { overflow: hidden; } /* 노란 번개 (사이트 다른 단추와 같은 그림) */ .diag-top i, #diag .dg-input button em, #mDrawer .panelContact .diag i { display: block; width: 28px; height: 28px; flex: none; background: url('./img/playdev_icon_package.svg') no-repeat 0 -2px; } /* ---------- 오른쪽 위 단추: 검색창과 같은 테두리 ---------- */ .diag-top { position: fixed; right: 30px; top: 39px; z-index: 12; display: inline-flex; align-items: center; gap: 4px; height: 52px; padding: 0 22px 0 14px; border: 0; border-radius: 40px; background: #2e2e33; color: #fff; font-size: 17px; font-weight: 600; letter-spacing: -0.5px; cursor: pointer; box-shadow: 10px 10px 0 0 rgba(0, 0, 0, .04); transition: filter .15s, transform .15s; } .diag-top:hover { filter: brightness(1.07); transform: translateY(-1px); } .diag-top i { transform: scale(.8); margin: 0 -2px 0 -4px; } /* ---------- 오른쪽 아래 카드 ---------- */ #diagCard { position: fixed; right: 30px; bottom: 112px; z-index: 108; } #diagCard .dc-body { display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; border: 2px solid var(--dg-line); border-radius: 20px; background: #fff; color: #000; cursor: pointer; transition: transform .15s; } /* 그림자 없음 */ #diagCard .dc-body:hover { transform: translateY(-2px); } #diagCard .dc-gauge { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; flex: none; border-radius: 16px; background: var(--dg-tint); } #diagCard .dc-gauge svg { width: 38px; } #diagCard .dc-text { display: block; } #diagCard .dc-text strong { display: block; font-size: 17px; font-weight: 700; } #diagCard .dc-text small { display: block; margin-top: 2px; color: var(--dg-sub); font-size: 14px; } #diagCard .dc-go { width: 40px; height: 40px; flex: none; margin-left: 6px; border-radius: 50%; background: var(--color, #8f68ff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / 18px; } #diagCard .dc-close { position: absolute; right: -8px; top: -10px; z-index: 2; width: 26px; height: 26px; padding: 0; border: 2px solid var(--dg-line); border-radius: 50%; background: #fff; cursor: pointer; } #diagCard .dc-close:before, #diagCard .dc-close:after, #diag .dg-close:before, #diag .dg-close:after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; background: #222; transform: rotate(45deg); } #diagCard .dc-close:after, #diag .dg-close:after { transform: rotate(-45deg); } #diagCard .needle, #diag .dg-gauge .needle { transform-origin: 32px 36px; animation: dgNeedle 2.8s ease-in-out infinite; } @keyframes dgNeedle { 0%, 100% { transform: rotate(-70deg); } 55% { transform: rotate(8deg); } } /* ---------- 진단 창 ---------- */ #diag { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; } #diag .dg-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); } #diag .dg-box { position: relative; display: flex; flex-direction: column; width: 680px; max-width: 100%; max-height: calc(100vh - 40px); overflow: hidden; border-radius: 40px; background: #fff; color: #000; font-size: 16px; line-height: 1.6; letter-spacing: -0.5px; } /* 흰 창 안에서만 스크롤: 스크롤 막대가 창 안쪽 오른쪽에 얇게 */ #diag .dg-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 50px 40px 0 50px; scrollbar-width: thin; scrollbar-color: #d5d7da transparent; } #diag .dg-scroll > section { padding-bottom: 40px; } #diag .dg-scroll::-webkit-scrollbar { width: 10px; background: transparent; } #diag .dg-scroll::-webkit-scrollbar-track { background: transparent; margin: 36px 0; box-shadow: none; } #diag .dg-scroll::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 10px; background: #d5d7da padding-box; box-shadow: none; } #diag .dg-scroll::-webkit-scrollbar-thumb:hover { background-color: #b9bcc1; } #diag .dg-scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; } #diag .dg-close { position: absolute; right: 24px; top: 24px; z-index: 2; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--dg-soft); cursor: pointer; } #diag .dg-close:before, #diag .dg-close:after { width: 16px; margin-left: -8px; } #diag .dg-badge { display: inline-block; padding: 3px 12px; border-radius: 12px; background: var(--dg-tint); color: var(--color, #8f68ff); font-size: 14px; font-weight: 600; } #diag h2 { margin-top: 14px; font-size: 32px; font-weight: 700; line-height: 1.35; letter-spacing: -1px; } #diag h3 { margin: 36px 0 12px; font-size: 20px; font-weight: 700; } #diag .dg-foot { margin-top: 14px; color: var(--dg-dim); font-size: 14px; } /* 1) 주소 입력: 가운데 정렬, 검색창 모양 입력칸 */ #diag .dg-form { text-align: center; } #diag .dg-gauge { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 28px; background: var(--dg-tint); } #diag .dg-gauge svg { width: 60px; } #diag .dg-form h2 { margin-top: 20px; } #diag .dg-desc { margin-top: 12px; color: var(--dg-sub); font-size: 17px; } #diag .dg-input { display: flex; align-items: center; margin-top: 30px; padding: 6px 6px 6px 22px; border: 2px solid var(--dg-line); border-radius: 20px; background: #fff; } #diag .dg-input:focus-within { border-color: var(--color, #8f68ff); } #diag .dg-input input { flex: 1; min-width: 0; height: 54px; padding: 0; border: 0; background: none; color: #000; font-size: 19px; font-weight: 600; outline: 0; } #diag .dg-input input::placeholder { color: #bbb; } #diag .dg-input button { display: inline-flex; align-items: center; gap: 2px; flex: none; height: 54px; padding: 0 22px 0 14px; border: 0; border-radius: 15px; background: var(--color, #8f68ff); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; } #diag .dg-input button em { transform: scale(.85); } #diag .dg-input button:hover { filter: brightness(1.06); } #diag .dg-chips { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; margin-top: 22px; } #diag .dg-chips li { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px 6px 7px; border-radius: 20px; background: var(--dg-soft); color: #333; font-size: 14px; font-weight: 500; white-space: nowrap; } #diag .dg-chips li:before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--color, #8f68ff) url('./img/playdev_icon_check_w.svg') no-repeat center / 12px; } #diag .dg-note { margin-top: 18px; color: var(--dg-sub); font-size: 15px; } #diag .dg-note b { color: var(--color, #8f68ff); font-weight: 700; } /* 고도몰 · 카페24 강조 */ /* 2) 진행 상황 */ #diag .dg-run h2 { font-size: 28px; } #diag .dg-bar { height: 10px; margin-top: 26px; border-radius: 10px; background: var(--dg-soft); overflow: hidden; } #diag .dg-bar i { display: block; height: 100%; border-radius: 10px; background: var(--color, #8f68ff); transition: width .3s ease; } #diag .dg-now { display: flex; align-items: center; gap: 10px; margin-top: 16px; min-height: 26px; font-size: 16px; font-weight: 600; } #diag .dg-now b { margin-left: auto; color: var(--dg-dim); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; } #diag .dg-spin { width: 18px; height: 18px; flex: none; border: 2.5px solid var(--dg-tint); border-top-color: var(--color, #8f68ff); border-radius: 50%; animation: dgSpin .8s linear infinite; } @keyframes dgSpin { to { transform: rotate(360deg); } } #diag .dg-steps { margin-top: 22px; padding: 6px 22px; border-radius: 20px; background: var(--dg-soft); } #diag .dg-steps li { display: flex; gap: 14px; padding: 14px 0; color: #aaa; } #diag .dg-steps li + li { border-top: 1px solid #e4e5e7; } #diag .dg-steps li em { position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border: 2px solid #d5d7da; border-radius: 50%; background: #fff; font-size: 13px; font-style: normal; font-weight: 700; } #diag .dg-steps li strong { display: block; font-size: 16px; font-weight: 600; } #diag .dg-steps li span { display: block; margin-top: 2px; color: var(--dg-sub); font-size: 13px; } #diag .dg-steps li span:empty { display: none; } #diag .dg-steps li div { padding-top: 2px; } #diag .dg-steps li.is-run { color: #000; } #diag .dg-steps li.is-run em { border-color: var(--color, #8f68ff); border-right-color: transparent; color: transparent; animation: dgSpin .9s linear infinite; } #diag .dg-steps li.is-done { color: #000; } #diag .dg-steps li.is-done em { border-color: var(--color, #8f68ff); background: var(--color, #8f68ff) url('./img/playdev_icon_check_w.svg') no-repeat center / 14px; color: transparent; } #diag .dg-steps li.is-fail { color: var(--dg-bad); } #diag .dg-steps li.is-fail em { border-color: var(--dg-bad); } /* 3) 결과 */ #diag .dg-head { display: flex; align-items: center; gap: 22px; padding-right: 44px; } #diag .dg-head h2 { margin-top: 6px; font-size: 28px; word-break: break-all; } #diag .dg-src { margin-top: 2px; color: var(--dg-dim); font-size: 13px; } #diag .dg-grade { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100px; height: 100px; flex: none; border-radius: 32px; background: #fff4e5; color: var(--dg-mid); } #diag .dg-grade b { font-size: 44px; font-weight: 800; line-height: 1; } #diag .dg-grade span { margin-top: 6px; font-size: 14px; font-weight: 700; } #diag .dg-grade.g-A, #diag .dg-grade.g-B { background: #e8f8f0; color: var(--dg-good); } #diag .dg-grade.g-D, #diag .dg-grade.g-F { background: #fdecea; color: var(--dg-bad); } #diag .dg-scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; } #diag .dg-scores li { padding: 16px 18px 18px; border-radius: 20px; background: var(--dg-soft); } #diag .dg-scores li span { display: block; color: var(--dg-sub); font-size: 14px; font-weight: 500; } #diag .dg-scores li b { display: block; margin-top: 2px; font-size: 28px; font-weight: 800; } #diag .dg-scores li > i { display: block; height: 6px; margin-top: 8px; border-radius: 6px; background: #e1e3e6; overflow: hidden; } #diag .dg-scores li > i i { display: block; height: 100%; background: #bbb; } #diag .t-good b { color: var(--dg-good) !important; } #diag .t-good > i i { background: var(--dg-good) !important; } #diag .t-mid b { color: var(--dg-mid) !important; } #diag .t-mid > i i { background: var(--dg-mid) !important; } #diag .t-bad b { color: var(--dg-bad) !important; } #diag .t-bad > i i { background: var(--dg-bad) !important; } #diag .t-info b { color: var(--color, #8f68ff) !important; } #diag .t-info > i i { background: var(--color, #8f68ff) !important; } #diag .dg-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; } #diag .dg-metrics li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 12px 0; border-bottom: 1px solid #f4f4f4; } #diag .dg-metrics li span { font-size: 15px; font-weight: 500; } #diag .dg-metrics li b { margin-left: auto; font-size: 16px; font-weight: 700; } #diag .dg-metrics li small { width: 100%; color: var(--dg-dim); font-size: 12px; } #diag .dg-metrics li small:empty { display: none; } #diag .dg-opps li, #diag .dg-custom li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid #f4f4f4; font-size: 15px; } #diag .dg-opps li b { margin-left: auto; flex: none; color: var(--dg-mid); font-weight: 700; } #diag .dg-custom p { margin-bottom: 6px; color: var(--color, #8f68ff); font-size: 16px; } #diag .dg-custom p b { font-weight: 700; } #diag .dg-custom li span { flex: none; width: 120px; color: var(--dg-sub); } #diag .dg-custom li b { font-weight: 600; word-break: break-all; } #diag .dg-rec { margin-top: 40px; } #diag .dg-good { padding: 24px; border-radius: 24px; } #diag .dg-rec h3 { margin: 0; } #diag .dg-rec p { margin-top: 6px; color: #555; font-size: 15px; } #diag .dg-rec p a { color: var(--color, #8f68ff); font-weight: 600; text-decoration: underline; } #diag .dg-swiper { position: relative; margin-top: 18px; } #diag .dg-pf { display: block; } #diag .dg-pf-img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 20px; background: #f1f2f4; overflow: hidden; } #diag .dg-pf-img img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: all 200ms; } #diag .dg-pf:hover .dg-pf-img img { opacity: 1; transform: scale(1.03); } #diag .dg-pf-stats { position: absolute; left: 0; right: 0; top: 12px; display: flex; justify-content: center; gap: 6px; } #diag .dg-pf-stats i { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 9px; background: #fff; color: #bbb; font-size: 13px; font-style: normal; } #diag .dg-pf-stats i:before { content: ''; width: 15px; height: 15px; background: no-repeat center / contain; } #diag .dg-pf-stats .v:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ccc' d='M12 5C6 5 1.7 10.3 1.2 11.4a1.4 1.4 0 0 0 0 1.2C1.7 13.7 6 19 12 19s10.3-5.3 10.8-6.4a1.4 1.4 0 0 0 0-1.2C22.3 10.3 18 5 12 5zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'/%3E%3C/svg%3E"); } #diag .dg-pf-stats .c:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ccc' d='M12 2C6.48 2 2 5.94 2 10.8c0 2.66 1.36 5.04 3.5 6.64V22l4.2-2.3c.75.13 1.53.2 2.3.2 5.52 0 10-3.94 10-8.8S17.52 2 12 2z'/%3E%3C/svg%3E"); } #diag .dg-pf-stats .l:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ccc' d='M12 21.2c-.3 0-.6-.1-.8-.3C7.6 18.2 2 13.9 2 8.9 2 5.9 4.4 3.5 7.3 3.5c1.9 0 3.6 1 4.7 2.5 1.1-1.5 2.8-2.5 4.7-2.5 2.9 0 5.3 2.4 5.3 5.4 0 5-5.6 9.3-9.2 12-.2.2-.5.3-.8.3z'/%3E%3C/svg%3E"); } #diag .dg-pf strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 14px 6px 0; color: #444; font-size: 17px; font-weight: 500; line-height: 1.5; word-break: keep-all; } #diag .dg-pf:hover strong { color: #000; } #diag .dg-swiper-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } #diag .dg-swiper-nav button { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--dg-soft) url('./img/playdev_icon_arrow_right_b.svg') no-repeat center / 22px; cursor: pointer; } #diag .dg-swiper-nav .prev { background-image: url('./img/playdev_icon_arrow_left_b.svg'); } #diag .dg-swiper-nav button.swiper-button-disabled { opacity: .35; cursor: default; } #diag .dg-swiper-nav button.swiper-button-lock { display: none; } #diag .dg-good { background: #eefaf4; } /* 간편 상담: 창 아래에 붙어서 스크롤해도 늘 보임 (위쪽은 흰색으로 흐리게) */ #diag .dg-ask { position: sticky; bottom: 16px; z-index: 3; display: flex; align-items: center; gap: 16px; margin-top: 24px; padding: 16px 16px 16px 22px; border: 2px solid var(--dg-line); border-radius: 22px; background: #fff; box-shadow: 0 -20px 18px 0 #fff; } #diag .dg-ask-text { flex: 1; min-width: 0; } #diag .dg-ask h3 { margin: 0; font-size: 17px; } #diag .dg-ask p { margin-top: 2px; color: var(--dg-sub); font-size: 13px; } #diag .dg-ask .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } #diag .dg-ask-row { display: flex; gap: 8px; flex: 0 0 300px; } #diag .dg-ask input[name=phone] { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 0; border-radius: 15px; background: var(--dg-soft); color: #000; font-size: 17px; outline: 0; } #diag .dg-ask input[name=phone]:focus, #diag .dg-ask textarea:focus { box-shadow: inset 0 0 0 2px var(--color, #8f68ff); } #diag .dg-ask button { flex: none; height: 48px; padding: 0 18px; border: 0; border-radius: 15px; background: var(--color, #8f68ff); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; } #diag .dg-ask button:disabled { opacity: .6; cursor: default; } #diag .dg-ask textarea { display: block; width: 100%; margin-top: 8px; padding: 14px 18px; border: 0; border-radius: 15px; background: var(--dg-soft); color: #000; font-size: 16px; resize: vertical; outline: 0; } #diag .dg-again { margin-top: 20px; text-align: center; } #diag .dg-again button { padding: 12px 22px; border: 0; border-radius: 30px; background: var(--dg-soft); color: #333; font-size: 15px; font-weight: 600; cursor: pointer; } #diag .dg-again button:hover { background: #e7e8ea; } /* ---------- 휴대폰 ---------- */ @media (max-width: 768px) { .m-only { display: inline; } .diag-top { position: static; height: 34px; margin: 0 4px 0 auto; padding: 0 12px 0 6px; gap: 0; border-radius: 17px; font-size: 14px; box-shadow: none; } .diag-top i { transform: scale(.65); margin: 0 -4px 0 -4px; } #diagCard { right: auto; left: var(--m-side, 16px); bottom: 145px; transition: bottom 250ms ease; } #quickFrm.on ~ #diagCard { bottom: 75px; } #diagCard .dc-body { gap: 8px; height: 52px; padding: 0 14px 0 6px; border-width: 1.5px; border-radius: 16px; box-shadow: none; } #diagCard .dc-gauge { width: 38px; height: 38px; border-radius: 12px; } #diagCard .dc-gauge svg { width: 28px; } #diagCard .dc-text strong { font-size: 15px; } #diagCard .dc-text small, #diagCard .dc-go { display: none; } #diagCard .dc-close { right: -8px; top: -8px; width: 22px; height: 22px; border-width: 1.5px; } #diagCard .dc-close:before, #diagCard .dc-close:after { width: 9px; margin-left: -4.5px; } #diag { padding: 0; } #diag .dg-box { width: 100%; height: 100%; max-height: none; border-radius: 0; } #diag .dg-scroll { padding: 64px var(--m-side, 16px) 0; } #diag .dg-close { right: 12px; top: 12px; } #diag h2 { font-size: 26px; } #diag .dg-desc { font-size: 15px; } #diag .dg-gauge { width: 72px; height: 72px; border-radius: 22px; } #diag .dg-gauge svg { width: 48px; } #diag .dg-input { flex-direction: column; align-items: stretch; gap: 6px; padding: 6px; } #diag .dg-input input { flex: none; height: 50px; padding: 0 12px; font-size: 16px; } #diag .dg-input button { justify-content: center; height: 52px; } #diag .dg-chips li { font-size: 13px; } #diag .dg-steps { padding: 4px 16px; } #diag .dg-scores { grid-template-columns: 1fr 1fr; gap: 8px; } #diag .dg-head { gap: 16px; padding-right: 0; } #diag .dg-head h2 { font-size: 20px; } #diag .dg-grade { width: 80px; height: 80px; border-radius: 26px; } #diag .dg-grade b { font-size: 34px; } #diag .dg-scores li b { font-size: 24px; } #diag .dg-metrics { grid-template-columns: 1fr; } #diag .dg-good { padding: 20px 16px; border-radius: 20px; } #diag .dg-pf-img { border-radius: 16px; } #diag .dg-pf strong { font-size: 15px; margin-top: 10px; } #diag .dg-pf-stats i { height: 24px; padding: 0 8px; font-size: 12px; } #diag .dg-chips { flex-wrap: wrap; } #diag .dg-ask { flex-direction: column; align-items: stretch; gap: 10px; bottom: 10px; padding: 14px; border-width: 1.5px; border-radius: 18px; } #diag .dg-ask-row { flex: none; } #diag .dg-ask input[name=phone] { flex: 1; } #mDrawer .panelContact .diag { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 12px; border: 1.5px solid var(--dg-line); border-radius: 12px; background: #fff; color: #000; font-size: 16px; font-weight: 600; cursor: pointer; } #mDrawer .panelContact .diag i { transform: scale(.75); margin: -4px 0; } } /* ---------- 태블릿 (769~1100px) ---------- */ @media (min-width: 769px) and (max-width: 1100px) { #top .fixed { right: 230px; } /* 검색창이 단추를 덮지 않게 */ /* 가운데 간편문의 상자와 겹치지 않게 카드는 짧게 */ #diagCard .dc-text small, #diagCard .dc-go { display: none; } #diagCard { right: 24px; } #diagCard .dc-body { gap: 8px; padding: 6px 14px 6px 6px; } #diagCard .dc-gauge { width: 44px; height: 44px; border-radius: 14px; } #diagCard .dc-gauge svg { width: 30px; } #diagCard .dc-text strong { font-size: 15px; } } /* ---------- 보라색 줄이기 (2026-10-17): 오른쪽 위 단추·무료 진단·간편 문의만 보라, 나머지는 회색·검정 ---------- */ #diagCard .dc-gauge, #diag .dg-gauge { background: var(--dg-soft); } #diagCard .dc-go { background-color: #222; } #diag .dg-chips li:before { width: 14px; height: 14px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") no-repeat center / contain; } /* 동그라미 없이 검정 체크만 */ #diag .dg-badge { background: var(--dg-soft); color: #555; } #diag .dg-custom p { color: #000; } /* ---------- 결과 색 통일 (2026-10-17): 괜찮음 = 검정, 손볼 것(보통·나쁨) = 빨강 한 가지 ---------- */ #diag .t-good b, #diag .t-info b { color: #222 !important; } #diag .t-good > i i, #diag .t-info > i i { background: #222 !important; } #diag .t-mid b, #diag .t-bad b { color: var(--dg-bad) !important; } #diag .t-mid > i i, #diag .t-bad > i i { background: var(--dg-bad) !important; } #diag .dg-grade, #diag .dg-grade.g-C, #diag .dg-grade.g-D, #diag .dg-grade.g-F { background: #fdecea; color: var(--dg-bad); } #diag .dg-grade.g-A, #diag .dg-grade.g-B { background: var(--dg-soft); color: #222; } #diag .dg-opps li b { color: var(--dg-bad); } /* 추천 사례: 관련 글처럼 아래 얇은 막대를 끌거나 카드를 밀어서 보기 */ #diag .dg-swiper { padding-bottom: 22px; } #diag .dg-swiper > .swiper-scrollbar { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 2px; border-radius: 0; background: #ececec; } #diag .dg-swiper .swiper-scrollbar-drag { height: 100%; border-radius: 0; background: #aaa; cursor: grab; } @media (max-width: 768px) { #diag .dg-swiper > .swiper-scrollbar { height: 1px; background: #e5e8eb; } #diag .dg-swiper .swiper-scrollbar-drag { background: #222; } } /* ---------- 2026-10-17 결과 화면 정리 ---------- */ /* 손볼 것 = 빨강 대신 사이트 보라 (부드럽게), 괜찮음 = 검정 */ #diag .t-mid b, #diag .t-bad b { color: var(--color, #8f68ff) !important; } #diag .t-mid > i i, #diag .t-bad > i i { background: var(--color, #8f68ff) !important; } #diag .dg-grade, #diag .dg-grade.g-C, #diag .dg-grade.g-D, #diag .dg-grade.g-F { background: var(--dg-tint); color: var(--color, #8f68ff); } #diag .dg-opps li b { color: var(--color, #8f68ff); } /* 스크롤 막대를 흰 창 모서리 안쪽으로 더 들여서 */ #diag .dg-scroll { margin: 16px 12px 16px 0; padding: 34px 28px 0 50px; } #diag .dg-scroll::-webkit-scrollbar-track { margin: 22px 0; } #diag .dg-close { z-index: 4; } /* 간편 상담 (한 줄) */ #diag .dg-ask h3 { font-size: 18px; } /* 스킨 커스텀 분석: 휴대폰으로 연 첫 화면 캡처 + 설명 */ #diag .dg-custom-in { display: flex; gap: 20px; align-items: flex-start; } #diag .dg-custom-in > div { flex: 1; min-width: 0; } #diag .dg-shot { flex: none; width: 128px; border: 1px solid #e5e7ea; border-radius: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .06); } /* 추천 포트폴리오: 작은 그림 + 제목 목록 */ #diag .dg-pf-list { margin-top: 14px; border-top: 1px solid #f4f4f4; } #diag .dg-pf-list li a { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #f4f4f4; } #diag .dg-pf-thumb { flex: none; width: 92px; aspect-ratio: 4 / 3; border-radius: 12px; background: #f1f2f4; overflow: hidden; } #diag .dg-pf-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; } #diag .dg-pf-list a:hover .dg-pf-thumb img { transform: scale(1.05); } #diag .dg-pf-txt { min-width: 0; } #diag .dg-pf-txt strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #222; font-size: 16px; font-weight: 600; line-height: 1.45; word-break: keep-all; } #diag .dg-pf-list a:hover strong { color: #000; text-decoration: underline; } #diag .dg-pf-txt small { display: block; margin-top: 3px; color: var(--dg-dim); font-size: 12.5px; } /* 보고서 PDF · 다른 쇼핑몰 진단 */ #diag .dg-again { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; } #diag .dg-pdf { display: inline-flex; align-items: center; gap: 6px; padding: 12px 20px; border-radius: 30px; background: #2e2e33; color: #fff; font-size: 15px; font-weight: 600; } #diag .dg-pdf:hover { background: #000; } #diag .dg-pdf i { width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-5-5m5 5 5-5M4 19h16'/%3E%3C/svg%3E") no-repeat center / contain; } @media (max-width: 768px) { #diag .dg-scroll { margin: 0 4px 0 0; padding: 64px 12px 0 var(--m-side, 16px); } #diag .dg-shot { width: 96px; border-radius: 10px; } #diag .dg-custom-in { gap: 14px; } #diag .dg-custom li span { width: 96px; } #diag .dg-pf-thumb { width: 80px; } #diag .dg-pf-txt strong { font-size: 15px; } } /* 고도몰·카페24 인지 확인하는 동안 (입력 화면 그대로, 단추만) */ #diag .dg-input button:disabled { cursor: progress; filter: none; opacity: .85; } #diag .dg-input button.is-checking em { animation: dgBlink .8s ease-in-out infinite; } @keyframes dgBlink { 50% { opacity: .3; } } /* 스킨 패치 줄 */ #diag .dg-custom li.dg-patch div { min-width: 0; } #diag .dg-custom li.dg-patch b.is-warn { color: var(--color, #8f68ff); } #diag .dg-custom li.dg-patch small { display: block; margin-top: 2px; color: var(--dg-sub); font-size: 13px; line-height: 1.5; } /* ---------- 점수 색: 한 가지 보라, 점수가 높을수록 진하게 (site.js shade) ---------- */ #diag .dg-scores li b { color: var(--sh, #222) !important; } #diag .dg-scores li > i i { background: var(--sh, #222) !important; } #diag .dg-grade { background: none !important; border: 2px solid var(--sh, #222); color: var(--sh, #222) !important; } /* 쉬운 말 측정 요약 */ #diag .dg-facts { border-top: 1px solid #f4f4f4; } #diag .dg-facts li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; padding: 11px 0; border-bottom: 1px solid #f4f4f4; } #diag .dg-facts li span { font-size: 15px; font-weight: 500; } #diag .dg-facts li b { margin-left: auto; font-size: 16px; font-weight: 700; } #diag .dg-facts li small { width: 100%; color: var(--dg-dim); font-size: 12.5px; } #diag .dg-facts li small:empty { display: none; } /* 첫 화면 캡처는 정사각형 */ #diag .dg-shot { aspect-ratio: 1 / 1; object-fit: cover; object-position: top; } /* 상담 칸 연락처 입력 조금 더 길게 */ #diag .dg-ask-row { flex-basis: 370px; } @media (max-width: 768px) { #diag .dg-ask-row { flex-basis: auto; } } /* 빠진 스킨 패치 목록 (날짜 + 고쳐진 화면) */ #diag .dg-custom .dg-patch-list { margin-top: 6px; } #diag .dg-custom .dg-patch-list li { display: flex; gap: 10px; padding: 3px 0; border: 0; font-size: 13.5px; } #diag .dg-custom .dg-patch-list em { flex: none; width: 92px; color: var(--dg-sub); font-style: normal; font-variant-numeric: tabular-nums; } #diag .dg-custom .dg-patch-list span { flex: 1; min-width: 0; width: auto; color: #333; } #diag .dg-custom li.dg-patch > div { flex: 1; } #diag .dg-scroll { overflow-x: hidden; } /* 점수 숫자는 검정, 막대만 보라 (점수가 높을수록 진하게) */ #diag .dg-scores li b { color: #111 !important; } #diag .dg-grade { color: #111 !important; } @media (max-width: 768px) { #diag .dg-custom-in { flex-direction: column; } #diag .dg-custom li.dg-patch { flex-direction: column; gap: 4px; } #diag .dg-custom .dg-patch-list em { width: 80px; } } /* 빠진 패치: 누르면 펼치는 단추 */ #diag .dg-patch-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; } #diag .dg-patch-toggle i { width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f68ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform .2s; } #diag .dg-patch-toggle.is-open i { transform: rotate(180deg); } #diag .dg-patch-toggle:hover b { text-decoration: underline; } /* 등급 상자는 진한 보라 그대로 (연하게 바꾸지 않음), 점수 막대 높이 3px */ #diag .dg-grade { border-color: var(--color, #8f68ff) !important; color: var(--color, #8f68ff) !important; } #diag .dg-scores li > i { height: 3px; } /* 간편 상담 칸 그림자 없음 */ #diag .dg-ask { box-shadow: none; } /* 오른쪽 위 단추 아이콘: 번개 대신 속도계 (움직이지 않는 그림) */ .diag-top i, #mDrawer .panelContact .diag i { width: 22px; height: 22px; margin: 0 4px 0 0; transform: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-linecap='round'%3E%3Cpath d='M3.5 17.5a9 9 0 1 1 17 0' stroke='%23ffd84d' stroke-width='2.4'/%3E%3Cpath d='M12 14.5 16.5 8.5' stroke='%23fff' stroke-width='2.4'/%3E%3Ccircle cx='12' cy='14.5' r='2' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain; } #mDrawer .panelContact .diag i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-linecap='round'%3E%3Cpath d='M3.5 17.5a9 9 0 1 1 17 0' stroke='%23f5b800' stroke-width='2.4'/%3E%3Cpath d='M12 14.5 16.5 8.5' stroke='%23222' stroke-width='2.4'/%3E%3Ccircle cx='12' cy='14.5' r='2' fill='%23222'/%3E%3C/svg%3E"); } @media (max-width: 768px) { .diag-top i { width: 17px; height: 17px; margin-right: 3px; } } /* 카페24 → 고도몰로 옮기면 좋은 점 */ #diag .dg-move table { width: 100%; border-collapse: collapse; font-size: 15px; } #diag .dg-move th, #diag .dg-move td { padding: 11px 10px; border-bottom: 1px solid #f4f4f4; text-align: left; vertical-align: top; } #diag .dg-move thead th { padding-top: 0; color: var(--dg-sub); font-size: 13px; font-weight: 600; } #diag .dg-move thead th:last-child { color: var(--color, #8f68ff); } #diag .dg-move tbody th { width: 30%; font-weight: 600; } #diag .dg-move tbody td { color: var(--dg-sub); } #diag .dg-move tbody td b { color: var(--color, #8f68ff); font-weight: 700; } #diag .dg-move p { margin-top: 12px; color: var(--dg-sub); font-size: 14px; } #diag .dg-move p b { color: #000; font-weight: 700; } @media (max-width: 768px) { #diag .dg-move table { font-size: 13.5px; } #diag .dg-move th, #diag .dg-move td { padding: 9px 6px; } } /* 결과 영역 사이 간격 넓힘 (2026-10-17) */ #diag .dg-result h3 { margin-top: 64px; } #diag .dg-result .dg-rec { margin-top: 64px; } #diag .dg-result .dg-rec h3 { margin-top: 0; } #diag .dg-result .dg-rec + .dg-rec { margin-top: 48px; } #diag .dg-result .dg-facts { margin-top: 0; } #diag .dg-result .dg-again { margin-top: 48px; } #diag .dg-result .dg-ask h3 { margin-top: 0; } @media (max-width: 768px) { #diag .dg-result h3, #diag .dg-result .dg-rec { margin-top: 48px; } #diag .dg-result .dg-rec h3, #diag .dg-result .dg-ask h3 { margin-top: 0; } #diag .dg-result .dg-rec + .dg-rec { margin-top: 36px; } } /* 고도몰 칸: 기본 검정, 중요한 말만 보라 */ #diag .dg-move tbody td b { color: #000; font-weight: 600; } #diag .dg-move tbody td b em { font-style: normal; color: var(--color, #8f68ff); font-weight: 700; }