@charset "UTF-8";
/* ============================================================
   catchmark 공용 CSS. 모든 화면은 이 파일 하나만 링크하고, HTML에는 클래스만 쓴다(style 속성 지양).
   원본: 디자인 캔버스 "컴포넌트 템플릿" 보드 (https://claude.ai/artifact/XB3L5kJs3z1zD4xsogWB4d).
   모서리: 배지·칩 6px, 버튼·입력 8px, 카드 16px, 묶음 칸 20px. 주황은 "검출"에만.
   ============================================================ */

/* Pretendard(사내 표준, geoguard-demo와 같은 번들). SIL OFL 1.1 - /fonts/LICENSE.txt */
@font-face{font-family:"Pretendard";font-weight:45 920;font-style:normal;font-display:swap;src:url("/fonts/PretendardVariable.woff2") format("woff2-variations")}

:root{
--cm-ink:#1C2430;--cm-text:#1C2430;--cm-text-2:#3F4852;--cm-text-3:#5B6570;
--cm-bg:#FFFFFF;--cm-surface:#F7F7F5;--cm-surface-2:#F1F1EF;--cm-line:#EFEFEC;--cm-line-strong:#D9D9D5;
--cm-blue:#1A54B8;--cm-blue-hover:#14418F;--cm-blue-tint:#E8EEFB;
--cm-orange:#F04E23;--cm-orange-deep:#C2390F;--cm-orange-tint:#FDEEE9;
--cm-gray:#6B7785;
--cm-danger:#B42318;--cm-danger-tint:#FEECEB;--cm-warn:#8A5A00;--cm-warn-tint:#FFF4D6;--cm-warn-line:#E5A50A;--cm-ok:#1E7A46;--cm-ok-tint:#E6F4EC;
--cm-r-tag:6px;--cm-r-ctl:8px;--cm-r-sm:8px;--cm-r-md:12px;--cm-r-lg:16px;--cm-r-xl:20px;
--cm-shadow:0 1px 2px rgba(28,36,48,.06),0 8px 24px rgba(28,36,48,.06);
--cm-font:"Pretendard","Noto Sans KR",-apple-system,sans-serif;--cm-font-en:Archivo,var(--cm-font);
}
[hidden]{display:none !important}
body{margin:0;background:var(--cm-bg);color:var(--cm-text);font-family:var(--cm-font);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}  /* 짧은 화면도 푸터는 맨 아래 */
body > main{flex:1 0 auto}
a{color:var(--cm-blue)}a:hover{color:var(--cm-blue-hover)}
/* 서비스 이름(글자 워드마크 대신, 2026-10-29 사용자 결정. 로고 마크는 그대로) */
.cm-brandname{font-weight:800;letter-spacing:-0.03em;line-height:1.25;color:var(--cm-ink);word-break:keep-all}
.cm-num{font-family:var(--cm-font-en);font-variant-numeric:tabular-nums}

.cm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:var(--cm-r-ctl);font:700 15px/1 var(--cm-font);text-decoration:none;cursor:pointer;box-sizing:border-box;white-space:nowrap}
.cm-btn--ink{background:var(--cm-ink);color:#FFF}.cm-btn--ink:not(:disabled):not(.is-disabled):hover{background:#000;color:#FFF}
.cm-btn--soft{background:var(--cm-surface-2);color:var(--cm-text)}.cm-btn--soft:not(:disabled):not(.is-disabled):hover{background:#E6E6E3}
.cm-btn--blue{background:var(--cm-blue);color:#FFF}.cm-btn--blue:not(:disabled):not(.is-disabled):hover{background:var(--cm-blue-hover);color:#FFF}
.cm-btn--line{background:#FFF;color:var(--cm-text);box-shadow:inset 0 0 0 1px var(--cm-line-strong)}.cm-btn--line:not(:disabled):not(.is-disabled):hover{background:var(--cm-surface)}
.cm-btn--danger{background:var(--cm-danger-tint);color:var(--cm-danger)}
.cm-btn--sm{min-height:36px;padding:0 14px;font-size:13px}
.cm-btn--lg{min-height:52px;padding:0 26px;font-size:16px}
.cm-btn .cm-ico{flex-shrink:0;margin-left:-2px}
.cm-btn--sm .cm-ico{width:14px;height:14px}
.cm-btn:disabled,.cm-btn.is-disabled{opacity:.4;cursor:default}
.cm-btn .cm-dots{display:inline-flex;gap:3px}.cm-btn .cm-dots i{width:5px;height:5px;border-radius:1px;background:currentColor;opacity:.5}

.cm-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:var(--cm-r-tag);font:700 12px/1 var(--cm-font);white-space:nowrap}
/* 진행 글리프: 원이 차오름(빈 원 → 반 → 꽉 참) */
.cm-glyph{display:inline-flex;align-items:center;gap:7px;font:700 13px/1 var(--cm-font);color:var(--cm-text)}
.cm-badge--hit{background:var(--cm-orange-tint);color:var(--cm-orange-deep)}
.cm-badge--id{background:var(--cm-blue-tint);color:var(--cm-blue-hover)}
.cm-badge--none{background:var(--cm-surface-2);color:var(--cm-text-3)}
.cm-badge--skip{background:#FFF;color:var(--cm-text-3);box-shadow:inset 0 0 0 1px var(--cm-line-strong)}
.cm-badge--run{background:var(--cm-warn-tint);color:var(--cm-warn)}
.cm-badge--fail{background:var(--cm-danger-tint);color:var(--cm-danger)}
.cm-badge--done{background:var(--cm-ok-tint);color:var(--cm-ok)}

.cm-field{display:flex;flex-direction:column;gap:6px}
.cm-label{font-size:13px;font-weight:700;color:var(--cm-text)}
.cm-help{font-size:12px;color:var(--cm-text-3)}
.cm-input{height:44px;padding:0 14px;border:1px solid var(--cm-line-strong);border-radius:var(--cm-r-ctl);background:#FFF;font:500 15px var(--cm-font);color:var(--cm-text);box-sizing:border-box;width:100%}
.cm-input:focus{outline:2px solid var(--cm-blue);outline-offset:1px;border-color:var(--cm-blue)}
.cm-input.is-error{border-color:var(--cm-danger)}.cm-field .cm-err{font-size:12px;color:var(--cm-danger)}
.cm-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:44px;padding:6px 8px;border:1px solid var(--cm-line-strong);border-radius:var(--cm-r-ctl);background:#FFF;box-sizing:border-box}
.cm-tag{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 10px;border-radius:var(--cm-r-tag);background:var(--cm-surface-2);font-size:13px;font-weight:500}
.cm-tag button{width:20px;height:20px;border:0;border-radius:4px;background:transparent;color:var(--cm-text-3);cursor:pointer;font-size:14px;line-height:1;padding:0}
.cm-tags input{flex:1;min-width:120px;border:0;outline:0;font:500 14px var(--cm-font);padding:4px}

.cm-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:168px;padding:24px;border:1.5px dashed var(--cm-line-strong);border-radius:var(--cm-r-lg);background:var(--cm-surface);text-align:center;box-sizing:border-box;color:var(--cm-text-2);cursor:pointer}
.cm-drop.is-over{border-color:var(--cm-blue);background:var(--cm-blue-tint);color:var(--cm-blue-hover)}
.cm-drop.is-busy{cursor:progress;opacity:.7}
.cm-drop strong{font-size:15px;color:var(--cm-text)}.cm-drop span{font-size:13px;color:var(--cm-text-3)}

.cm-progress{height:8px;border-radius:2px;background:var(--cm-surface-2);overflow:hidden}
.cm-progress > i{display:block;height:100%;border-radius:inherit;background:var(--cm-blue)}
.cm-progress--hit > i{background:var(--cm-orange)}
.cm-steps{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--cm-text-3)}
.cm-steps .on{color:var(--cm-blue)}.cm-steps .now{color:var(--cm-text)}.cm-steps .sep{width:16px;height:1px;background:var(--cm-line-strong)}

.cm-card{background:#FFF;border-radius:var(--cm-r-lg);box-shadow:var(--cm-shadow);padding:20px}
.cm-tile{background:var(--cm-surface);border-radius:var(--cm-r-xl);padding:24px}
.cm-list{background:#FFF;border-radius:var(--cm-r-lg);box-shadow:var(--cm-shadow);overflow:hidden}
.cm-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-top:1px solid var(--cm-line)}
.cm-row:first-child{border-top:0}
.cm-row .main{flex:1;min-width:0}.cm-row .title{font-size:15px;font-weight:700;margin:0}.cm-row .sub{font-size:13px;color:var(--cm-text-3);margin:2px 0 0}

.cm-table-wrap{overflow-x:auto;background:#FFF;border-radius:var(--cm-r-lg);box-shadow:var(--cm-shadow)}
.cm-table{width:100%;min-width:720px;border-collapse:collapse;font-size:14px}
.cm-table th{padding:12px 16px;text-align:left;font-size:12px;font-weight:700;color:var(--cm-text-3);background:var(--cm-surface)}
.cm-table td{padding:14px 16px;border-top:1px solid var(--cm-line);vertical-align:middle}

.cm-thumb{width:56px;height:56px;border-radius:var(--cm-r-md);background:var(--cm-surface-2);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cm-thumb--sm{width:40px;height:40px;border-radius:var(--cm-r-sm)}.cm-thumb--lg{width:96px;height:96px;border-radius:var(--cm-r-lg)}
.cm-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cm-compare figure{margin:0}.cm-compare .img{aspect-ratio:1/1;border-radius:var(--cm-r-lg);background:var(--cm-surface-2);display:flex;align-items:center;justify-content:center}
.cm-compare figcaption{margin-top:8px;font-size:13px;color:var(--cm-text-3)}

.cm-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:48px 24px;text-align:center;background:var(--cm-surface);border-radius:var(--cm-r-xl)}
.cm-empty h3{margin:0;font-size:17px}.cm-empty p{margin:0;font-size:14px;color:var(--cm-text-3)}

.cm-alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--cm-r-md);font-size:14px;line-height:1.55}
.cm-alert strong{display:block;margin-bottom:2px}
.cm-alert ul{margin:6px 0 0;padding-left:18px}.cm-alert li + li{margin-top:2px}
/* 버튼 밑 안내 상자: 가운데 줄 안에서 글은 왼쪽 정렬 */
.cm-guide{width:100%;max-width:560px;box-sizing:border-box;text-align:left;word-break:keep-all}
.cm-alert--info{background:var(--cm-blue-tint);color:#123E8A}
.cm-alert--ok{background:var(--cm-ok-tint);color:#155C34}
.cm-alert--warn{background:var(--cm-warn-tint);color:#6B4600}
.cm-alert--error{background:var(--cm-danger-tint);color:#8F1C13}

.cm-modal{width:420px;max-width:100%;background:#FFF;border-radius:var(--cm-r-xl);box-shadow:0 24px 64px rgba(28,36,48,.18);padding:28px;box-sizing:border-box}
.cm-modal h3{margin:0 0 8px;font-size:19px}.cm-modal p{margin:0 0 22px;font-size:14px;line-height:1.65;color:var(--cm-text-2)}
.cm-modal .actions{display:flex;justify-content:flex-end;gap:8px}
/* <dialog class="cm-modal">로 띄울 때: 가운데 + 어두운 뒤판 */
dialog.cm-modal{border:0;color:var(--cm-text);max-width:calc(100% - 32px)}
dialog.cm-modal::backdrop{background:rgba(28,36,48,.4)}

/* 검사 몰 선택 창: 몰 줄(체크 · 이름 · 예상 시간) + 예상 시간 합계 */
.cm-mallpick .count{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px;font-size:13px;color:var(--cm-text-3)}
.cm-mallpick .count button{border:0;background:none;padding:4px 0;font:700 13px var(--cm-font);color:var(--cm-blue);cursor:pointer}
.cm-mallpick .mall{display:flex;align-items:center;gap:10px;padding:12px 2px;border-top:1px solid var(--cm-line);font-size:14px;cursor:pointer}
.cm-mallpick .mall:first-child{border-top:0}
.cm-mallpick .mall .nm{flex:1;font-weight:700}
.cm-mallpick .mall .t{font-size:13px;color:var(--cm-text-3)}
.cm-mallpick .mall:has(input:not(:checked)) .nm{font-weight:500;color:var(--cm-text-3)}
.cm-mallpick .total{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 20px;padding:12px 14px;background:var(--cm-surface);border-radius:var(--cm-r-md);font-size:14px}
.cm-mallpick .total b{font-size:18px}
.cm-mallpick .cm-err{margin:-8px 0 16px;font-size:13px;color:var(--cm-danger)}
/* 도움말 창(도용 추적): 제목 + 닫기 → 단계 막대 → 쪽(첫 쪽은 제품 이미지 도용 추적 검사란?: 설명 · 흐름 4칸,
   그다음 제목 · 번호 붙은 화면 캡처 · 번호 설명) → [이전][다음]. 번호 원은 캡처 속 번호와 같은 모양(파랑), 주황은 "도용 발견" 칸에만 */
.cm-help{width:880px;padding:24px 28px}
/* 쪽마다 창 높이가 바뀌지 않게 높이 고정: 제목·막대·버튼은 제자리, 쪽 내용만 스크롤 */
.cm-help[open]{display:flex;flex-direction:column;height:min(780px,calc(100dvh - 48px))}
.cm-help .head,.cm-help .dots,.cm-help .actions{flex:none}
.cm-help .step{flex:1;min-height:0;overflow:hidden auto;margin:0 -8px;padding:0 8px}
.cm-help .actions{padding-top:16px;border-top:1px solid var(--cm-line)}
.cm-help .head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cm-help .head h3{margin:0}
.cm-help .x{width:36px;height:36px;border:0;border-radius:var(--cm-r-ctl);background:transparent;font-size:22px;line-height:1;color:var(--cm-text-3);cursor:pointer}
.cm-help .x:hover{background:var(--cm-surface)}
.cm-help .dots{display:flex;gap:6px;margin:12px 0 20px;padding:0;list-style:none}
.cm-help .dots li{flex:1;height:4px;border-radius:2px;background:var(--cm-surface-2);font-size:0}
.cm-help .dots li.is-on{background:var(--cm-blue)}
.cm-help h4{margin:0 0 12px;font-size:16px}
.cm-help .step img{display:block;width:100%;height:auto;box-sizing:border-box;border:1px solid var(--cm-line);border-radius:var(--cm-r-md);background:var(--cm-surface)}
.cm-help .step img.narrow{max-width:400px;margin:0 auto}  /* 세로로 긴 창 캡처 */
.cm-help .marks{display:flex;flex-direction:column;gap:10px;margin:16px 0 16px;padding:0;list-style:none;font-size:14px;line-height:1.6;color:var(--cm-text-2)}
.cm-help .marks li{display:flex;gap:10px;align-items:flex-start}
.cm-help .marks b{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--cm-blue);color:#FFF;font:700 12px/1 var(--cm-font-en)}
.cm-help .marks em{font-style:normal;font-weight:700;color:var(--cm-text)}
.cm-help .desc{margin:0 0 20px;font-size:15px;line-height:1.75;color:var(--cm-text-2);word-break:keep-all}
.cm-help .flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 16px;padding:0;list-style:none}
.cm-help .flow li{display:flex;flex-direction:column;gap:6px;padding:18px 16px;background:var(--cm-surface);border-radius:var(--cm-r-lg)}
.cm-help .flow .ico{width:40px;height:40px;padding:9px;margin-bottom:4px;border-radius:50%;background:var(--cm-blue-tint);color:var(--cm-blue);box-sizing:border-box}
.cm-help .flow .hit .ico{background:var(--cm-orange-tint);color:var(--cm-orange-deep)}
.cm-help .flow b{font-size:15px}
.cm-help .flow span{font-size:13px;line-height:1.6;color:var(--cm-text-2);word-break:keep-all}
@media (max-width:640px){.cm-help{padding:20px 16px}.cm-help[open]{height:calc(100dvh - 32px)}.cm-help .marks{font-size:13px}.cm-help .flow{grid-template-columns:minmax(0,1fr)}
.cm-help .flow li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:2px 12px;padding:14px}.cm-help .flow .ico{grid-row:1 / 3;margin:0}.cm-help .desc{font-size:14px}}
/* 키워드 수정 창(도용 추적): 상품 이름 한 줄 → 등록된 키워드 칩(회색 칸, N / 5) → 한 줄 입력칸 + [추가] → 오류·한도 안내 → 다음 검사부터 안내 → [취소][저장] */
.cm-kwedit{width:480px}
.cm-kwedit .lead{margin:0 0 16px;font-weight:700;color:var(--cm-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-kwedit .label{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--cm-text-2)}
.cm-kwedit .label .cnt{margin-left:4px;font-weight:500;color:var(--cm-text-3)}
.cm-kwedit .chips{display:flex;flex-wrap:wrap;gap:6px;min-height:52px;margin:0 0 12px;padding:12px;border-radius:var(--cm-r-md);background:var(--cm-surface);box-sizing:border-box}
.cm-kwedit .chips .cm-tag{background:#FFF;box-shadow:inset 0 0 0 1px var(--cm-line)}
.cm-kwedit .chips .empty{align-self:center;font-size:13px;color:var(--cm-text-3)}
.cm-kwedit .kw-line{display:flex;gap:8px}
.cm-kwedit .kw-line .cm-input{flex:1;min-width:0}
.cm-kwedit .kw-line .cm-input.is-error{border-color:var(--cm-danger)}
.cm-kwedit .kw-line .cm-input:disabled{background:var(--cm-surface);color:var(--cm-text-3)}
.cm-kwedit .cm-err{margin:8px 0 0;font-size:13px;color:var(--cm-danger)}.cm-kwedit .cm-err.is-info{color:var(--cm-text-3)}
.cm-kwedit .note{margin:12px 0 22px;font-size:13px;color:var(--cm-text-3)}

/* 헤더: 랜딩 2와 같은 결(반투명 흰 바, 안쪽 폭은 본문 .cm-page와 맞춤, 글자 메뉴, 오른쪽 작은 버튼) */
.cm-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.6) blur(12px);backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--cm-line)}
.cm-header-in{max-width:1120px;height:64px;margin:0 auto;padding:0 24px;box-sizing:border-box;display:flex;align-items:center;gap:36px}
.cm-nav{display:flex;align-self:stretch;gap:24px}
.cm-nav a{position:relative;display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--cm-text-2);text-decoration:none}
.cm-nav a:hover{color:var(--cm-text)}
.cm-nav a.is-active{color:var(--cm-text);font-weight:700}
.cm-nav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--cm-ink)}
/* 메뉴 묶음(메뉴 + 이름·로그아웃): 넓은 화면에선 감싸기만, 메뉴 버튼은 좁은 화면에서만 */
.cm-menu{display:contents}
.cm-menu-btn{display:none}

/* ===== 페이지 틀 ===== */
.cm-page{width:100%;max-width:1120px;margin:0 auto;padding:40px 24px 96px;box-sizing:border-box}
/* 페이지 머리: 헤더 바로 아래 회색 띠(화면 끝까지). 띠 배경·아랫선은 border-image로 옆으로 늘려 가로 스크롤 없이 칠한다 */
.cm-page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin:-40px 0 32px;padding:36px 0 32px;
border-image:linear-gradient(to top,var(--cm-line) 1px,var(--cm-surface) 1px) fill 0 / 0 / 0 100vw}
.cm-page-head h1{margin:0 0 6px;font-size:30px;font-weight:800;letter-spacing:-0.04em}
.cm-page-head p{margin:0;font-size:14px;color:var(--cm-text-3);word-break:keep-all}
.cm-page-head-acts{display:flex;flex-wrap:wrap;gap:8px}
.cm-logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.cm-logo .cm-brandname{font-size:16px;white-space:nowrap}
/* 계정: 머리글자 칸 + 이름 → 누르면 메뉴(이름·아이디·로그아웃). 권리자 ID는 화면에 안 보임 */
.cm-user{margin-left:auto;display:flex;align-items:center;gap:12px}
.cm-user form{margin:0}
.cm-user-name{font-size:14px;font-weight:700;color:var(--cm-text);white-space:nowrap}
/* 푸터: 모든 화면 아래, 안쪽 폭은 헤더·본문과 같은 1120 */
/* 회색 띠 한 줄: 왼쪽 회사 로고(TechonMedia CI, techonmedia-homepage에서 가져옴) + 오른쪽 두 줄(서비스 이름 · 저작권), 가운데 정렬.
   두껍지 않게(2026-10-29 사용자 결정). 좁은 화면은 로고 위·글 아래로 쌓는다 */
.cm-footer{border-top:1px solid var(--cm-line);background:var(--cm-surface)}
.cm-footer-in{max-width:1120px;margin:0 auto;padding:20px 24px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:28px;font-size:13px;color:var(--cm-text-3);word-break:keep-all}
.cm-footer .company{display:block;flex:none;width:138px;height:auto}
.cm-footer .txt{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.cm-footer .name{font-size:14px;font-weight:500;color:var(--cm-text-2)}
@media (max-width:640px){
.cm-footer-in{flex-direction:column;gap:12px;padding:20px 16px}
.cm-footer .company{width:118px}
}
/* 899px 이하: 헤더는 로고 + 메뉴 버튼 한 줄, 누르면 헤더 아래로 패널(메뉴 세로 줄 · 이름 · 로그아웃)이 펼쳐진다(common.js).
   로고·서비스 이름 + 메뉴 + 이름·로그아웃이 한 줄에 약 800px 필요(2026-10-29 실측) */
@media (max-width:899px){
.cm-header-in{height:56px;gap:12px}
.cm-menu-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 -10px 0 auto;padding:0;border:0;border-radius:var(--cm-r-ctl);background:transparent;color:var(--cm-text);cursor:pointer}
.cm-menu-btn .close,.cm-header.is-open .cm-menu-btn .open{display:none}
.cm-header.is-open .cm-menu-btn .close{display:block}
.cm-menu{display:none;position:absolute;top:100%;left:0;right:0;padding:8px 16px 16px;background:#FFF;border-bottom:1px solid var(--cm-line);box-shadow:0 16px 32px rgba(28,36,48,.10)}
.cm-header.is-open .cm-menu{display:block}
.cm-nav{flex-direction:column;gap:2px}
.cm-nav a{height:48px;padding:0 12px;border-radius:var(--cm-r-ctl);font-size:15px}
.cm-nav a.is-active{background:var(--cm-surface)}
.cm-nav a.is-active::after{display:none}
.cm-menu .cm-user{justify-content:space-between;margin:8px 0 0;padding:14px 12px 0;border-top:1px solid var(--cm-line)}
.cm-menu a.cm-user{display:flex;justify-content:center;min-height:44px;margin:12px 0 0;padding:0 14px;border-top:0;font-size:15px}
}
@media (max-width:640px){
.cm-page{padding-top:28px}
.cm-logo .cm-brandname{font-size:14px}
.cm-page-head{margin-top:-28px;padding:28px 0 24px}
}
.cm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.cm-note{font-size:13px;color:var(--cm-text-3)}

/* ===== 로그인: PC·모바일 모두 가운데 한 칸 ===== */
.cm-auth-copy{margin:0;font-size:12px;color:var(--cm-text-3)}
.cm-auth{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:48px 20px;box-sizing:border-box;background:var(--cm-surface)}
.cm-auth-brand{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.cm-auth-brand .cm-brandname{font-size:20px}
.cm-auth-brand p{margin:0;font-size:14px;color:var(--cm-text-3)}
.cm-auth-form{width:100%;max-width:400px;display:flex;flex-direction:column;gap:18px;padding:32px;background:#FFF;border-radius:var(--cm-r-lg);box-shadow:var(--cm-shadow);box-sizing:border-box}
.cm-auth-form h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-0.03em}
.cm-auth-form .cm-btn{width:100%;min-height:48px;margin-top:4px}
.cm-auth-foot{margin:0;font-size:13px;color:var(--cm-text-3);text-align:center}
@media (max-width:480px){.cm-auth{justify-content:flex-start;padding-top:56px}.cm-auth-form{padding:24px 20px}}

/* ===== 화면 부품 (2026-10-23 화면 디자인) ===== */
.cm-check{width:18px;height:18px;margin:0;accent-color:var(--cm-ink);flex-shrink:0}
.cm-crumb{display:flex;gap:6px;align-items:center;margin:0 0 10px;font-size:13px;color:var(--cm-text-3)}
.cm-crumb a{color:var(--cm-text-3);text-decoration:none}.cm-crumb a:hover{color:var(--cm-text)}
.cm-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
.cm-stat{background:#FFF;border-radius:var(--cm-r-lg);box-shadow:var(--cm-shadow);padding:16px 18px}
.cm-stat .k{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--cm-text-3)}
.cm-stat .v{margin:0;font-family:var(--cm-font-en);font-size:28px;font-weight:700;letter-spacing:-0.02em}
.cm-stat--hit .v{color:var(--cm-orange-deep)}
.cm-section{margin-top:32px}
.cm-section > h2{margin:0 0 12px;font-size:18px;font-weight:800;letter-spacing:-0.03em}
.cm-kvlist{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0;margin:0;background:#FFF;border-radius:var(--cm-r-lg);box-shadow:var(--cm-shadow);overflow:hidden}
.cm-kvlist dt,.cm-kvlist dd{margin:0;padding:12px 16px;border-top:1px solid var(--cm-line);font-size:14px}
.cm-kvlist dt{color:var(--cm-text-3);font-weight:500}
.cm-kvlist dt:first-of-type,.cm-kvlist dt:first-of-type + dd{border-top:0}
.cm-mono{font:500 12px/1.5 ui-monospace,Menlo,monospace;color:var(--cm-text-2);word-break:break-all}
.cm-row .cm-tags{flex:1 1 280px;min-height:38px;padding:4px 6px}
.cm-row .cm-tags .cm-tag{height:26px}
.cm-row .meta{width:150px;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.cm-row .meta small{font-size:12px;color:var(--cm-text-3)}
.cm-row .acts{display:flex;gap:6px;flex-shrink:0}
.cm-row.is-rejected{background:#FFFBFA}
.cm-bar{position:sticky;bottom:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px;padding:14px 18px;background:#FFF;border-radius:var(--cm-r-lg);box-shadow:var(--cm-shadow)}
.cm-bar .cm-note{flex:1 1 260px}
.cm-split{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.cm-split > .a{flex:1 1 480px;min-width:0}.cm-split > .b{flex:1 1 360px;min-width:0}
.cm-files .cm-row .title{font-size:14px}
/* 등록 결과 줄: 칸 위치 고정(이미지 | 이름·키워드·사유 | 상태 | 버튼). 상태·버튼이 줄마다 같은 자리에 오게 */
.cm-row.cm-result{display:grid;grid-template-columns:56px minmax(0,1fr) 200px 168px;gap:16px}
.cm-result .main .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-result .reason{color:var(--cm-warn)}
.cm-result .reason.is-error{color:var(--cm-danger)}
.cm-result .acts{justify-content:flex-end}
/* 이미지 등록 줄: 썸네일 · 파일 · 키워드(또는 거부 안내) · 상태 · 버튼 */
.cm-thumb img{width:100%;height:100%;object-fit:cover}
.cm-row .meta b{display:block;max-width:100%;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-row .kw{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:4px}
.cm-row .kw .cm-tags{flex:1;min-width:0}
.cm-row .kw-line{display:flex;align-items:stretch;gap:8px}
.cm-row .kw-line .cm-btn{min-height:38px}
.cm-row .kw .cm-err{font-size:12px;color:var(--cm-danger)}.cm-row .kw .cm-err.is-info{color:var(--cm-text-3)}
.cm-row > .cm-alert{flex:1 1 280px;min-width:0}
.cm-tags.is-error{border-color:var(--cm-danger)}
.cm-tags.is-locked{background:var(--cm-surface)}
.cm-page > .cm-alert{margin-top:16px}
@media (max-width:860px){.cm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.cm-row{flex-wrap:wrap}.cm-row .meta{width:auto}}

/* ===== 이미지 등록: 세 단계(1 올리기 → 2 키워드 → 3 삽입·받기) ===== */
.cm-stepper{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 0;margin:0 0 36px;padding:0;list-style:none}
.cm-stepper li{display:flex;align-items:center}
.cm-stepper li + li::before{content:"";width:40px;height:1px;margin:0 12px;background:var(--cm-line-strong)}
.cm-stepper button{display:flex;align-items:center;gap:10px;min-height:36px;padding:0;border:0;background:none;font:700 14px/1 var(--cm-font);color:var(--cm-text-3);cursor:pointer}
.cm-stepper button:disabled{cursor:default}
.cm-stepper .n{width:28px;height:28px;border-radius:var(--cm-r-tag);display:flex;align-items:center;justify-content:center;background:var(--cm-surface-2);font-family:var(--cm-font-en);font-size:13px;font-weight:700}
.cm-stepper li.is-now button{color:var(--cm-text)}
.cm-stepper li.is-now .n{background:var(--cm-ink);color:#FFF}
.cm-stepper li.is-done button{color:var(--cm-blue)}
.cm-stepper li.is-done .n{background:var(--cm-blue-tint);color:var(--cm-blue)}
.cm-stepper li.is-done button:not(:disabled):hover{color:var(--cm-blue-hover)}
.cm-step-head{margin:0 0 24px;word-break:keep-all}
.cm-step-head h2{margin:0 0 6px;font-size:17px;font-weight:700;letter-spacing:-0.03em;line-height:1.4}
.cm-step-head p{margin:0;font-size:14px;line-height:1.7;color:var(--cm-text-2)}
/* 목록 바로 위 개수 한 줄(전체 상품 N개) */
.cm-listcount{margin:-8px 0 10px;font-size:14px;font-weight:600;color:var(--cm-text-2)}
.cm-listcount b{font-weight:800;color:var(--cm-text)}
.cm-drop--lg{min-height:240px;border-radius:var(--cm-r-xl)}
.cm-drop--lg.is-compact{min-height:128px}
/* 사진 묶음: 랜딩 2의 회색 타일 안에 흰 카드(흰 바탕에 흰 카드만 두면 안 보임) */
.cm-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:20px;padding:16px;background:var(--cm-surface);border-radius:var(--cm-r-xl)}
.cm-picks:empty{display:none}
.cm-pick{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px 10px 12px;background:#FFF;border-radius:var(--cm-r-lg);box-shadow:0 0 0 1px var(--cm-line-strong),var(--cm-shadow);min-width:0}
.cm-pick.is-small{background:var(--cm-warn-tint);box-shadow:0 0 0 2px var(--cm-warn-line),var(--cm-shadow)}
.cm-pick .img{display:block;aspect-ratio:1/1;margin-bottom:8px;border-radius:var(--cm-r-md);background:var(--cm-surface-2);overflow:hidden}
.cm-pick .img img{width:100%;height:100%;object-fit:cover;display:block}
.cm-pick .name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-pick .size{font-size:12px;color:var(--cm-text-3)}
.cm-pick .warn{font-size:12px;font-weight:700;color:var(--cm-warn)}
.cm-picks-warn{margin-top:16px}
.cm-pick .rm{position:absolute;top:16px;right:16px;width:28px;height:28px;border:0;border-radius:var(--cm-r-tag);background:rgba(255,255,255,.92);box-shadow:0 1px 3px rgba(28,36,48,.18);color:var(--cm-text);font-size:16px;line-height:1;cursor:pointer}
.cm-pick .rm:hover{background:#FFF;color:var(--cm-danger)}
.cm-run{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.cm-run .cm-num{font-size:14px;font-weight:700;white-space:nowrap}
/* 도용 추적 줄: 선택 | 썸네일 | 이름·키워드·등록일 | 마지막 검사(한 줄) | 버튼. 머리 줄은 전체 선택 */
.cm-trow{display:grid;grid-template-columns:20px 56px minmax(0,1fr) 260px auto;gap:16px;align-items:center;padding:14px 20px}
.cm-trow[data-id]{border-top:1px solid var(--cm-line)}  /* 줄 사이에 숨은 펼침 칸이 끼어 있어 + 선택자 대신 줄마다 윗선 */
.cm-trow--head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;background:var(--cm-surface);font-size:13px;font-weight:700;color:var(--cm-text-2)}
.cm-trow--head .sel{display:flex;align-items:center;gap:12px;cursor:pointer}
.cm-trow--head .sel .cnt{display:inline-block;margin-left:8px;white-space:nowrap;color:var(--cm-text-3)}
.cm-trow--head .sel .cnt b{color:var(--cm-text)}
@media (max-width:640px){.cm-trow--head .sel .wide{display:none}}
.cm-pagesize{height:34px;padding:0 34px 0 12px;border:1px solid var(--cm-line-strong);border-radius:var(--cm-r-ctl);-webkit-appearance:none;appearance:none;font:600 13px var(--cm-font);color:var(--cm-text);cursor:pointer;
  background:#FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6570' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/14px 14px}  /* 기본 화살표는 끝에 붙어서 직접 그림 */
.cm-check{width:18px;height:18px;margin:0;accent-color:var(--cm-ink);cursor:pointer}
.cm-check:disabled{cursor:default}
.cm-trow .main{min-width:0}
.cm-trow .name{margin:0;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-trow .sub{margin:2px 0 0;font-size:13px;color:var(--cm-text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-trow .lastcell{min-width:0}
.cm-trow .cm-verdict{margin:0;flex-wrap:nowrap;min-width:0;max-width:100%}
.cm-trow .cm-verdict .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-trow .lastcell .at{margin:4px 0 0 16px;font-size:13px;color:var(--cm-text-3);white-space:nowrap}  /* 점(8px)+간격(8px)만큼 들여 판정 글씨와 맞춤 */
.cm-trow .acts{display:flex;gap:6px;justify-content:flex-end}
.cm-btn--icon{width:36px;padding:0}
/* 페이지 번호 줄 */
.cm-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:20px 0 0}
.cm-pager a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border-radius:var(--cm-r-ctl);font-size:14px;font-weight:700;color:var(--cm-text-2);text-decoration:none;box-sizing:border-box}
.cm-pager a:hover{background:var(--cm-surface-2);color:var(--cm-text)}
.cm-pager a.is-now{background:var(--cm-ink);color:#FFF}
.cm-pager a.is-off{pointer-events:none;color:var(--cm-line-strong)}
/* 화면 안에서 넘기는 페이지 번호(검사 기록): 버튼, 조금 작게 */
.cm-pager button{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 9px;border:0;border-radius:var(--cm-r-ctl);background:none;font:700 13px var(--cm-font);color:var(--cm-text-2);cursor:pointer;box-sizing:border-box}
.cm-pager button:not(:disabled):hover{background:var(--cm-surface-2);color:var(--cm-text)}
.cm-pager button.is-now{background:var(--cm-ink);color:#FFF;cursor:default}
.cm-pager button:disabled:not(.is-now){color:var(--cm-line-strong);cursor:default}
.cm-pager--sm{gap:4px;margin:4px 0 0}
@media (max-width:640px){
.cm-trow{grid-template-columns:20px 56px minmax(0,1fr);row-gap:10px;padding:14px 16px}
.cm-trow .lastcell,.cm-trow .acts{grid-column:2 / -1}
.cm-trow .pick{grid-column:1;grid-row:1 / 4;align-self:center}  /* 체크는 세 줄(이름 · 마지막 검사 · 버튼) 전체의 세로 가운데 */
.cm-trow .acts{justify-content:flex-start}
}

/* 도용 추적 결과 펼침(아코디언): 줄 바로 아래, 이름 칸에 맞춰 들여 쓴 회색 칸 */
/* 마지막 검사 글씨가 펼침 단추: 끝난 검사만 눌리고 ⌄가 보임, 펼치면 ⌃ */
button.cm-verdict{padding:0;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
button.cm-verdict:disabled{cursor:default}
button.cm-verdict:not(:disabled):hover .text{text-decoration:underline;text-underline-offset:3px}
button.cm-verdict:focus-visible{outline:2px solid var(--cm-blue);outline-offset:4px;border-radius:4px}
.cm-verdict .chev{flex:none;transition:transform .15s}
button.cm-verdict:disabled .chev{display:none}
.cm-trow.is-open .cm-verdict .chev{transform:rotate(180deg)}
.cm-tdetail{padding:0 20px 20px 128px}
/* 펼친 결과는 회색 타일 하나로 묶는다(상품 줄은 흰색 그대로, 흰 바탕에 흰 카드만 두지 않게) */
.cm-tdetail-in{display:flex;flex-direction:column;gap:20px;align-items:flex-start;padding:16px;background:var(--cm-surface);border-radius:var(--cm-r-lg)}
/* 검사 결과: 흰 칸 하나(.cm-list) 안에 요약(검사 범위, 오른쪽 [스냅샷 전체 다운로드], 좁은 화면은 아래 꽉 차게)
   → 검출 줄 → [더 보기]. 요약과 검출 줄 사이는 선 하나 */
.cm-runcard{align-self:stretch}
.cm-runinfo{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;padding:16px 20px}
.cm-runcard .cm-hrow,.cm-runcard .empty{border-top:1px solid var(--cm-line)}
.cm-runcard .cm-runinfo[hidden] + .empty,.cm-runcard .cm-runinfo[hidden] ~ .hits .cm-hrow:first-child{border-top:0}  /* 요약이 없으면 맨 위 선도 없음 */
.cm-runcard > .more{display:flex;margin:4px auto 16px}
.cm-runinfo .txt{display:flex;flex-direction:column;gap:8px;min-width:0}
.cm-runinfo .evall{flex:none}
/* 검출 없음: 검출 줄 목록과 같은 흰 박스, 가운데 */
.cm-tdetail .empty{margin:0;padding:28px 16px;text-align:center;font-size:15px;font-weight:700;color:var(--cm-text-2)}
.cm-tdetail .empty .sub{display:block;margin-top:6px;font-size:13px;font-weight:500;color:var(--cm-text-3)}  /* 검사 중 오류의 둘째 줄 안내 */
.cm-tdetail .malls{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0}
.cm-tdetail .malls .label{margin-right:4px;font-size:13px;font-weight:700;color:var(--cm-text-2)}
.cm-tdetail .malls:empty{display:none}
.cm-tdetail .note{margin:0;font-size:13px;color:var(--cm-warn)}
.cm-tdetail .hits{align-self:stretch}
.cm-tdetail-view{display:flex;flex-direction:column;gap:8px;align-items:flex-start;align-self:stretch}
.cm-tdetail-in > .view{align-self:stretch}
/* 검사 기록: 끝난 검사 줄(날짜 · 결과 · 검사 범위), 누르면 아래 결과가 그 검사로. 보고 있는 줄은 파란 테두리 */
/* 제목(검사 기록 · 검사 결과) */
.cm-tdetail .label{margin:0;font-size:16px;font-weight:800;color:var(--cm-text)}
.cm-tdetail .label .count{margin-left:6px;font-size:14px;font-weight:600;color:var(--cm-text-3)}
.cm-tdetail .runs{display:flex;flex-direction:column;gap:8px;align-self:stretch}
.cm-tdetail .runs .list{display:flex;flex-direction:column;gap:4px}
.cm-runrow{display:grid;grid-template-columns:116px 72px minmax(0,1fr);gap:12px;align-items:center;min-height:40px;padding:0 12px;border:0;border-radius:var(--cm-r-ctl);background:#FFF;font:500 14px var(--cm-font);color:var(--cm-text);text-align:left;cursor:pointer}
.cm-runrow:hover{background:var(--cm-surface-2)}
.cm-runrow.is-now{box-shadow:inset 0 0 0 2px var(--cm-blue)}
.cm-runrow:focus-visible{outline:2px solid var(--cm-blue);outline-offset:2px}
.cm-runrow .at{color:var(--cm-text-3)}
.cm-runrow .res{font-weight:800}
.cm-runrow .res.is-mine{color:var(--cm-orange-deep)}
.cm-runrow .res.is-mute{color:var(--cm-text-3)}
.cm-runrow .res.is-fail{color:var(--cm-danger)}
/* 검사 범위 뱃지: 한 줄, 넓은 화면은 다 보이고 좁은 화면은 1개 + "+N" */
.cm-runrow .where{display:flex;gap:4px;min-width:0;overflow:hidden}
.cm-runrow .where .cm-badge{height:22px;font-size:11px}
.cm-runrow .where .more{display:none}
@media (max-width:640px){.cm-tdetail{padding:0 16px 16px}.cm-tdetail-in{padding:12px}
.cm-runinfo{flex-direction:column;align-items:stretch;padding:14px 16px}
.cm-runrow{grid-template-columns:auto auto minmax(0,1fr);gap:8px;padding:0 10px}
.cm-runrow .where .cm-badge:nth-child(n+2):not(.more){display:none}.cm-runrow .where .more{display:inline-flex}}

/* 검출 줄(결과 펼침 안) */
.cm-hrow{display:grid;grid-template-columns:56px minmax(0,1fr) 120px auto;gap:16px;align-items:center;padding:14px 20px}
.cm-hrow + .cm-hrow{border-top:1px solid var(--cm-line)}
.cm-hrow .main{min-width:0}
.cm-hrow .name{margin:0;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-hrow .sub{margin:2px 0 0;font-size:13px;color:var(--cm-text-3)}
.cm-hrow .price{font-size:14px;font-weight:700;text-align:right}
.cm-hrow .acts{display:flex;gap:6px;justify-content:flex-end}
@media (max-width:640px){
.cm-hrow{grid-template-columns:56px minmax(0,1fr);row-gap:8px;padding:14px 16px}
.cm-hrow .price{grid-column:2;text-align:left}
.cm-hrow .acts{display:grid;grid-template-columns:auto minmax(0,1fr);grid-column:1 / -1}
}

/* 의심 이미지 검사 결과 줄: 왼쪽 의심 이미지, 오른쪽 한 칸에 이름 → 판정(점 + 굵은 글씨) → 원본 상품. 배지 칸 없음 */
.cm-sres{display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:start;padding:20px 24px}
.cm-sres + .cm-sres{border-top:1px solid var(--cm-line)}
.cm-sres > .cm-thumb{width:72px;height:72px}
.cm-sres .body{min-width:0}
.cm-sres .head{display:flex;align-items:baseline;gap:8px;margin:2px 0 0;min-width:0}
.cm-sres .head .name{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-sres .head .size{flex:none;font-size:13px;color:var(--cm-text-3)}
.cm-verdict{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:8px 0 0;font-size:15px;word-break:keep-all}
.cm-verdict .mark{display:inline-flex;width:8px;height:8px;border-radius:50%;background:currentColor}
.cm-verdict.is-run .mark{width:16px;height:16px;background:none}
.cm-verdict .text{font-weight:800}
.cm-verdict .why{font-size:13px;color:var(--cm-text-3)}
.cm-verdict .why::before{content:"· ";}
.cm-verdict.is-mine{color:var(--cm-orange-deep)}
.cm-verdict.is-mute,.cm-verdict.is-run{color:var(--cm-text-3)}
.cm-verdict.is-run .text{color:var(--cm-text)}
.cm-verdict.is-fail,.cm-verdict.is-fail .why{color:var(--cm-danger)}
.cm-source{margin-top:14px}
.cm-source .lbl{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--cm-text-3)}
.cm-source .card{display:flex;align-items:center;gap:12px;max-width:520px;padding:10px 12px;background:var(--cm-surface);border-radius:var(--cm-r-md);box-sizing:border-box}
.cm-source .card > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.cm-source b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-source small{font-size:13px;color:var(--cm-text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.cm-sres{grid-template-columns:56px minmax(0,1fr);gap:14px;padding:16px}.cm-sres > .cm-thumb{width:56px;height:56px}
.cm-verdict .why{flex-basis:100%}.cm-verdict .why::before{content:none}}  /* 좁으면 사유는 다음 줄, 점 없이 */
.cm-meter{flex:1;height:8px;border:0;border-radius:2px;background:var(--cm-surface-2);overflow:hidden;-webkit-appearance:none;appearance:none}
.cm-meter::-webkit-progress-bar{background:var(--cm-surface-2)}
.cm-meter::-webkit-progress-value{background:var(--cm-blue);transition:width .3s}
.cm-meter::-moz-progress-bar{background:var(--cm-blue)}
.cm-picks-head{margin:28px 0 0;font-size:15px;font-weight:700}
.cm-picks-head + .cm-picks{margin-top:12px}
.cm-next{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:40px;text-align:center}
.cm-next .btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.cm-next .cm-btn--lg{min-width:200px}
/* 모바일: 반씩 나누면 "전체 다운로드 (zip · N장)"처럼 긴 이름이 넘친다 → 한 줄에 하나, 주 버튼(뒤쪽)이 위 */
@media (max-width:640px){.cm-next .btns{width:100%;flex-direction:column-reverse}.cm-next .cm-btn--lg{width:100%;min-width:0}}
@media (max-width:640px){
.cm-stepper{flex-wrap:nowrap}
.cm-stepper li + li::before{width:16px;margin:0 8px}
.cm-stepper li:not(.is-now) button{font-size:0;gap:0}  /* 지금 단계만 이름, 나머지는 번호만 */
.cm-picks{grid-template-columns:repeat(2,minmax(0,1fr))}
.cm-row .main{flex:1 1 calc(100% - 80px);min-width:0}  /* 썸네일·이름 한 줄, 상태·버튼은 다음 줄 */
.cm-row .main .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-row.cm-result{grid-template-columns:56px minmax(0,1fr);row-gap:10px}
.cm-result .state{grid-column:2}
.cm-result .acts{grid-column:1 / -1}
.cm-result .acts .cm-btn{width:100%}
.cm-result .acts:empty,.cm-result .acts:not(:has(.dl:not([hidden]))){display:none}
}

/* ============================================================
   홈(공개 랜딩, templates/home.html). 디자인 캔버스 "랜딩 2" 보드를 옮김. cm-home- 접두사
   ============================================================ */
.cm-home{width:100%;overflow-x:hidden;word-break:keep-all}
.cm-home-wrap{max-width:1120px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.cm-home-sec{padding:96px 0}
.cm-home-h2{margin:0 0 40px;font-size:clamp(30px,3.6vw,44px);font-weight:800;letter-spacing:-0.045em;line-height:1.14}
.cm-home-h2.sm{margin-bottom:36px;font-size:clamp(24px,2.6vw,30px);text-align:center}
.cm-home-tile{background:var(--cm-surface);border-radius:24px;box-sizing:border-box}
.cm-home-mini{background:#FFF;border-radius:var(--cm-r-lg);box-shadow:var(--cm-shadow)}
.cm-home-rule{border:0;border-top:1px solid var(--cm-line);margin:0}
.cm-home-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cm-home-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 56px}
.cm-home .sw{flex:none;width:34px;height:34px;border-radius:9px}
.cm-home .sw.blue{background:var(--cm-blue-tint)}.cm-home .sw.orange{background:var(--cm-orange-tint)}
.cm-home .sw.yellow{background:var(--cm-warn-tint)}.cm-home .sw.gray{background:var(--cm-surface-2)}.cm-home .sw.green{background:var(--cm-ok-tint)}

/* 히어로 */
.cm-home-hero{position:relative}
.cm-home-hero-in{position:relative;max-width:1280px;margin:0 auto;padding:120px 24px 128px;box-sizing:border-box}
.cm-home-hero-text{position:relative;max-width:560px;margin:0 auto;text-align:center}
.cm-home-hero-text h1{margin:0 0 18px;font-size:clamp(38px,5.4vw,64px);font-weight:800;letter-spacing:-0.05em;line-height:1.08}
.cm-home-hero-text p{margin:0 auto 30px;max-width:440px;font-size:16px;line-height:1.7;color:var(--cm-text-2)}
.cm-home-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.cm-home-sticker{position:absolute}
.cm-home-prod{display:flex;align-items:center;justify-content:center;border-radius:var(--cm-r-xl)}
.cm-home-sticker.s1{left:6%;top:70px;width:132px;height:132px;background:var(--cm-blue-tint);transform:rotate(-8deg)}
.cm-home-sticker.s2{left:15%;top:200px;transform:rotate(6deg)}
.cm-home-sticker.s3{left:3%;top:260px;width:104px;height:104px;background:var(--cm-orange-tint);transform:rotate(10deg)}
.cm-home-sticker.s4{left:13%;top:380px;transform:rotate(-4deg)}
.cm-home-sticker.s5{right:14%;top:80px;transform:rotate(5deg)}
.cm-home-sticker.s6{right:5%;top:110px;width:120px;height:120px;background:var(--cm-warn-tint);transform:rotate(7deg)}
.cm-home-sticker.s7{right:13%;top:250px;transform:rotate(-6deg)}
.cm-home-sticker.s8{right:4%;top:340px;width:96px;height:96px;background:var(--cm-ok-tint);transform:rotate(-9deg)}
.cm-home-sticker.s9{right:16%;top:430px;transform:rotate(4deg)}
.cm-home-sticker .cm-badge{height:26px;padding:0 9px;font-size:13px}
.cm-home-done{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:13px;font-weight:700}
.cm-home-hitcard{width:190px;padding:12px 14px;box-sizing:border-box}
.cm-home-hitcard .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:12px;color:var(--cm-text-3)}
.cm-home-hitcard .t{margin:0;font-size:13px;font-weight:700}
.cm-home-hitcard .s{margin:2px 0 0;font-size:12px;color:var(--cm-text-3)}

/* 이용 방법 카드 */
.cm-home-how{padding-top:24px}
.cm-home-tile.cm-home-files,.cm-home-tile.cm-home-center{height:230px}
.cm-home-files{padding:22px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.cm-home-files .cm-home-mini,.cm-home-malls .cm-home-mini{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:12px;color:var(--cm-text-3)}
.cm-home-files .cm-home-mini b,.cm-home-malls .cm-home-mini b{flex:1;min-width:0;font-size:13px;color:var(--cm-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-home-files .cm-home-mini.dim{opacity:.6}
.cm-home-center{display:flex;align-items:center;justify-content:center;gap:12px}
/* 등록: 이미지 + 키워드 칩 */
.cm-home-files .cm-home-reg{padding:12px;gap:14px}
.cm-home-reg img{flex:none;border-radius:var(--cm-r-ctl)}
.cm-home-reg > div{flex:1;min-width:0}
.cm-home-reg b{display:block}
.cm-home-reg .kws{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 0}
/* 삽입: 원본과 삽입본이 똑같아 보임 */
.cm-home-same{gap:16px}
.cm-home-same figure{margin:0;text-align:center}
.cm-home-same img{display:block;border-radius:var(--cm-r-lg);box-shadow:var(--cm-shadow)}
.cm-home-same figcaption{margin-top:10px;font-size:12px;font-weight:700;color:var(--cm-text-3)}
.cm-home-same figcaption.on{color:var(--cm-blue)}
.cm-home-same .eq{margin-bottom:24px;font-size:22px;font-weight:700;color:var(--cm-text-3)}
/* 검사: 몰별 결과 */
.cm-home-result{width:230px;padding:4px 16px;box-sizing:border-box}
.cm-home-result p{display:flex;align-items:center;justify-content:space-between;height:44px;margin:0;font-size:13px;color:var(--cm-text-3)}
.cm-home-result p + p{border-top:1px solid var(--cm-line)}
.cm-home-result b{color:var(--cm-text)}
.cm-home-cap{padding:16px 6px 0}
.cm-home-cap h3{margin:0 0 6px;font-size:16px;font-weight:700}
.cm-home-cap p{margin:0;font-size:14px;line-height:1.65;color:var(--cm-text-3)}

/* 화면 미리보기: 실제 화면 캡처 + 설명, 줄마다 좌우를 바꾼다 */
.cm-home-label{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--cm-blue)}
.cm-home-label.hit{color:var(--cm-orange-deep)}
.cm-home-shots{display:flex;flex-direction:column;gap:56px}
.cm-home-shotrow{display:flex;align-items:center;gap:48px}
.cm-home-shotrow:nth-child(even){flex-direction:row-reverse}
.cm-home-shot{flex:1 1 640px;min-width:0;padding:28px}
.cm-home-shot img{display:block;width:100%;height:auto;padding:20px;box-sizing:border-box;background:#FFF;border-radius:var(--cm-r-lg);box-shadow:var(--cm-shadow)}
.cm-home-shottext{flex:0 1 340px;min-width:0}
.cm-home-shottext h3{margin:0 0 10px;font-size:24px;font-weight:800;letter-spacing:-0.04em;line-height:1.3}
.cm-home-shottext p:last-child{margin:0;font-size:15px;line-height:1.75;color:var(--cm-text-2)}

/* 기능 */
.cm-home-features{padding:88px 0;background:var(--cm-surface)}
.cm-home-feat h4{margin:0 0 10px;font-size:20px;font-weight:800;letter-spacing:-0.03em;color:var(--cm-blue)}
.cm-home-feat p{margin:0;font-size:15px;line-height:1.75;color:var(--cm-text-2)}

/* 검색 범위 */
.cm-home-split{display:flex;align-items:center;gap:48px}
.cm-home-malls{flex:1 1 440px;min-width:0;height:340px;padding:28px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.cm-home-malls .cm-home-mini{padding:14px 16px;gap:12px;font-size:13px}
.cm-home-malls .sw{width:40px;height:40px;border-radius:10px}
.cm-home-malls .cm-home-mini b{font-size:14px}
.cm-home-mallstext{flex:1 1 400px;min-width:0}
.cm-home-mallstext .cm-home-h2{margin-bottom:16px}
.cm-home-mallstext .lead{margin:0 0 22px;font-size:15px;line-height:1.75;color:var(--cm-text-2)}
.cm-home-mallstext .kinds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;font-size:14px;font-weight:700;color:var(--cm-blue)}

/* 마무리 */
.cm-home-last{padding-top:0}
.cm-home-cta{padding:56px 32px;text-align:center}
.cm-home-cta .cm-home-h2{margin-bottom:12px}
.cm-home-cta p{margin:0 0 26px;font-size:15px;color:var(--cm-text-2)}

@media (max-width:900px){
.cm-home-sticker{display:none}
.cm-home-hero-in{padding:72px 24px 80px}
.cm-home-grid3,.cm-home-grid2{grid-template-columns:minmax(0,1fr)}
.cm-home-split{flex-direction:column;align-items:stretch}
.cm-home-sec{padding:64px 0}
.cm-home-malls{flex-basis:auto;height:auto}
.cm-home-shotrow,.cm-home-shotrow:nth-child(even){flex-direction:column;align-items:stretch;gap:20px}
.cm-home-shot{flex-basis:auto;padding:16px}
.cm-home-shot img{padding:10px}
.cm-home-shottext{flex-basis:auto}
.cm-home-shots{gap:44px}
}