/* [공통 부품 · 모든 화면] 버튼·칩·탭·카드·표·입력칸·알림 띠·빈 화면·토스트·배지·타임라인·묶음 메뉴 모양. 고치면 → 그 부품을 쓰는 모든 화면. 새 부품은 맨 아래에 추가, 값은 tokens.css 의 var(--…)만. */ /* ===================================================================== 설계사 도구 v1 — components.css (디자인 시스템 v4 복사 + 마디아 규격서 1031 고침 #3~#15, c·d 추가) 값은 전부 var(--…). 새 화면은 이 부품만 조립(모듈 안에서 새 스타일 만들기 금지). 부품 목록과 규칙 요약 — 자세한 설명·살아있는 예시는 index.html 0 바탕·글자 .v4 · .num · .unit · .cap · .h1~h3 1 아이콘 .ic (.ic-l 24) 2 버튼 .btn + 종류(.btn-primary/-secondary/-weak/-danger/-icon/-kakao) × 크기(.btn-44/-48/-56) × 상태(:active · [disabled]+.btn-why · .is-loading · .is-done) + .chip(고르기) · .tabs(밑줄형) · .switch(토글) · .bundle-n(딸깍 묶음 수) 3 카드 .card (.card-dense/.card-roomy) · .stat(숫자 칸) 4 표 .tbl 숫자 오른쪽(.r)·tabular-nums·큰 숫자 작은 단위 · 용성 표 문법(.row-empty·.renew·.namecell) 5 입력칸 .field · .input · .field.is-error · .field.is-empty · .group(자동 접힘 요약 줄) 6 하단 탭 .tabbar (4개, 최대 5) 7 알림 띠 .notice (.is-info/-warn/-bad/-ok) 8 빈 화면 .empty 9 로딩 뼈대 .skel 10 바텀시트·토스트 .sheet · .toast 11 저장 표시 .saved ("저장됨 · 3초 전") · .secure(잠금·백업) 12 길 그림 .path (상담 단계, 지금 칸만 진하게) 13 배지 .badge ===================================================================== */ /* 0. 바탕·글자 ---------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} .v4{margin:0;font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--t2);background:var(--bg); -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;word-break:keep-all;overflow-wrap:anywhere} :where(.v4) :where(button,input,select,textarea){font:inherit;color:inherit} /* :where = 낮은 우선순위, 부품 색을 덮지 않음 */ .h1{font-size:var(--fs-t2);line-height:var(--lh-t2);font-weight:var(--fw-b);color:var(--t1);letter-spacing:var(--ls-title);margin:0} .is-customer .h1{font-size:var(--fs-t1);line-height:var(--lh-t1)} .h2{font-size:var(--fs-t3);line-height:var(--lh-t3);font-weight:var(--fw-m);color:var(--t1);letter-spacing:var(--ls-title);margin:0} .h3{font-size:var(--fs-body);font-weight:var(--fw-m);color:var(--t1);margin:0} .cap{font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--t3)} .num{font-variant-numeric:tabular-nums;font-size:var(--fs-num);line-height:var(--lh-num);font-weight:var(--fw-b);color:var(--t1);letter-spacing:var(--ls-title)} .num-2{font-variant-numeric:tabular-nums;font-size:var(--fs-t2);line-height:var(--lh-t2);font-weight:var(--fw-b);color:var(--t1)} .unit{font-size:var(--fs-cap);font-weight:var(--fw-m);color:var(--t3);margin-left:var(--s-1)} /* 단위는 작게, 단 14 아래로는 안 내려감 */ .num .unit{font-size:var(--fs-t3)} .num-2 .unit{font-size:var(--fs-body-l)} .tnum{font-variant-numeric:tabular-nums} .t-red{color:var(--red)} .t-warn{color:var(--warn)} .t-ok{color:var(--ok)} .t-blue{color:var(--blue)} .t3{color:var(--t3)} .t1{color:var(--t1)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* 1. 아이콘 -------------------------------------------------------- */ .ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--t3)} .ic-l{width:24px;height:24px} .is-sel .ic,.ic.on{color:var(--blue)} /* 2. 버튼 ---------------------------------------------------------- */ /* 종류 5 + 카톡 예외 · 크기 44(설계사 PC)/48(폰·고객)/56(폰 아래 고정) · 상태: 기본·올림·누름·초점·비활성(+이유)·처리 중·완료 */ .btn{--h:var(--hit-pc);display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--h); padding:var(--s-2) var(--s-4);border-radius:var(--r-md);border:var(--bw) solid transparent;background:transparent; font-size:var(--fs-body);font-weight:var(--fw-m);line-height:1.35;text-align:center;cursor:pointer;position:relative; transition:background-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);user-select:none;text-decoration:none} .btn-44{--h:var(--hit-pc);font-size:var(--fs-body);padding-inline:var(--s-4)} .btn-48{--h:var(--hit-m);font-size:var(--fs-body-l);padding-inline:var(--s-5)} .btn-56{--h:var(--hit-l);font-size:var(--fs-body-l);padding-inline:var(--s-5)} .btn-block{display:flex;width:100%} .btn .ic{color:currentColor} .btn:focus-visible{outline:var(--bw-focus) solid var(--blue);outline-offset:2px} .btn:active:not([disabled]){transform:scale(.98)} @media (hover:hover){.btn:hover:not([disabled]){box-shadow:inset 0 0 0 100px var(--hover)}} .btn-primary{background:var(--blue);color:var(--on-blue)} .btn-primary:active:not([disabled]){background:var(--blue-press)} .btn-secondary{background:var(--card);border-color:var(--line-strong);color:var(--t2)} .btn-secondary:active:not([disabled]){background:var(--fill)} .btn-weak{color:var(--blue);padding-inline:var(--s-2)} .btn-danger{background:var(--card);border-color:var(--red);color:var(--red)} .btn-icon{--h:var(--hit-pc);width:var(--h);padding:0} .btn-icon.btn-48{width:var(--hit-m)} .btn-kakao{background:var(--kakao);color:var(--on-kakao)} /* 결정 ⑥: 고객 사이트 카톡 버튼 한 곳만 */ .btn[disabled]{background:var(--fill);color:var(--t4);border-color:transparent;cursor:not-allowed} .btn-why{display:block;margin-top:var(--s-1);font-size:var(--fs-cap);color:var(--t3)} /* 비활성 이유 한 줄(필수) */ .btn.is-loading{pointer-events:none} .btn.is-loading::before{content:"";width:16px;height:16px;border-radius:var(--r-full);border:2px solid currentColor;border-right-color:transparent;animation:v4spin .8s linear infinite} .btn.is-done{background:var(--ok-fill);color:var(--ok);border-color:transparent} @keyframes v4spin{to{transform:rotate(360deg)}} .btn-stack{display:flex;flex-direction:column;gap:var(--s-2)} /* 폰: 주 버튼 위, 보조 아래 */ .btn-row{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center} /* '딸깍' 묶음 버튼: 주 버튼 아래에 대신하는 일 수 */ .bundle{display:flex;flex-direction:column;gap:var(--s-2)} .bundle-n{display:flex;align-items:center;gap:var(--s-1);font-size:var(--fs-cap);color:var(--t3)} .bundle-n b{font-weight:var(--fw-m);color:var(--t1);font-variant-numeric:tabular-nums} .bundle-list{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);font-size:var(--fs-cap);color:var(--t3)} .bundle-list li::before{content:"✓ ";color:var(--ok)} /* 칩(고르기): 보이는 32 · 누르는 칸 44 */ .chip{position:relative;display:inline-flex;align-items:center;gap:var(--s-1);height:var(--chip-h);margin-block:calc((var(--hit-pc) - var(--chip-h)) / 2);padding:0 var(--s-3);border-radius:var(--r-sm); background:var(--fill);color:var(--t2);border:var(--bw) solid transparent;font-size:var(--fs-cap);font-weight:var(--fw-m);cursor:pointer;white-space:nowrap} .chip::after{content:"";position:absolute;inset:calc((var(--chip-h) - var(--hit-pc)) / 2 - var(--bw)) calc(var(--bw) * -1)} /* #6 누르는 칸 = 설계사 44 · 고객 48 */ .chip.is-sel{background:var(--blue-fill);color:var(--blue)} .chip.is-sel::before{content:"✓"} .chip:focus-visible{outline:var(--bw-focus) solid var(--blue);outline-offset:2px} .chips{display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none} .chips::-webkit-scrollbar{display:none} /* 탭: 밑줄형만, 5개까지, 넘치면 가로 스크롤(말줄임 금지) */ .tabs{display:flex;gap:var(--s-5);border-bottom:var(--bw) solid var(--line);overflow-x:auto;scrollbar-width:none} .tab{min-height:var(--hit-m);min-width:var(--hit-pc);padding:0 var(--s-1);background:none;border:0;border-bottom:var(--bw-focus) solid transparent;margin-bottom:-1px; font-size:var(--fs-tab);font-weight:var(--fw-r);color:var(--t3);cursor:pointer;white-space:nowrap} .tab.is-sel,.tab[aria-selected="true"]{font-weight:var(--fw-m);color:var(--t1);border-bottom-color:var(--blue)} .tab:focus-visible{outline:var(--bw-focus) solid var(--blue)} /* 토글: 스위치 28, 줄 전체가 누르는 칸 44 — 바로 적용 */ .switch-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:var(--hit-pc);cursor:pointer} .switch{appearance:none;width:var(--switch-w);height:var(--switch-h);border-radius:var(--r-full);background:var(--line-input);position:relative;cursor:pointer;flex:none;margin:0; transition:background-color var(--t-mid) var(--ease)} .switch::after{content:"";position:absolute;top:calc((var(--switch-h) - var(--switch-knob)) / 2);left:calc((var(--switch-h) - var(--switch-knob)) / 2);width:var(--switch-knob);height:var(--switch-knob);border-radius:var(--r-full);background:var(--card);transition:transform var(--t-mid) var(--ease)} .switch:checked{background:var(--blue)} .switch:checked::after{transform:translateX(calc(var(--switch-w) - var(--switch-h)))} .switch:focus-visible{outline:var(--bw-focus) solid var(--blue);outline-offset:2px} /* 3. 카드 ---------------------------------------------------------- */ .card{background:var(--card);border:var(--bw) solid var(--line);border-radius:var(--r-lg);padding:var(--s-4)} .card-dense{padding:var(--s-3)} .card-roomy{padding:var(--s-6)} .is-customer .card{padding:var(--s-5) var(--s-6) var(--s-6)} /* #7 고객 카드: 위 20 · 좌우 24 · 아래 24 */ .card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-bottom:var(--s-3)} .divider{height:1px;background:var(--line);margin:var(--s-3) 0;border:0} .stat{background:var(--fill);border-radius:var(--r-md);padding:var(--s-3) var(--s-4)} /* 면 카드는 숫자 칸 1종만, 카드 속 카드 금지 */ .stat .cap{display:block} /* 4. 표 ------------------------------------------------------------ */ .tbl{width:100%;border-collapse:collapse;font-size:var(--fs-body);font-variant-numeric:tabular-nums} .tbl th{background:var(--fill);color:var(--t3);font-size:var(--fs-cap);font-weight:var(--fw-m);text-align:left;padding:0 var(--s-3);height:var(--th-h);white-space:nowrap} .tbl td{padding:0 var(--s-3);height:var(--hit-pc);border-bottom:var(--bw) solid var(--line);color:var(--t2)} .tbl .r{text-align:right} .tbl tfoot td{font-weight:var(--fw-m);color:var(--t1);border-bottom:0} .tbl .namecell{background:var(--fill);color:var(--t1)} /* 용성 표: 이름칸 회색 면 */ .tbl .row-empty td{background:var(--red-fill);color:var(--red)} /* 용성 표: 비어 있는 보장 = 줄 전체 분홍 */ .tbl .renew{color:var(--red)} /* 용성 표: 갱신형 금액 = 빨간 글자 */ .amt{font-variant-numeric:tabular-nums} .amt small{font-size:var(--fs-cap);color:var(--t3);margin-left:1px} .tbl-wrap{overflow-x:auto;border:var(--bw) solid var(--line);border-radius:var(--r-lg)} /* 폰 표 → 한 줄 = 한 항목 목록 */ .rows{list-style:none;margin:0;padding:0} .rows>li{display:flex;align-items:center;gap:var(--s-3);min-height:var(--hit-l);padding:var(--s-2) 0;border-bottom:var(--bw) solid var(--line)} .rows>li:last-child{border-bottom:0} .rows .grow{flex:1;min-width:0} .rows a,.rows button.rowbtn{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:var(--hit-l);background:none;border:0;padding:0;text-align:left;color:inherit;text-decoration:none;cursor:pointer} /* 5. 입력칸 + 자동 접힘 요약 줄 ----------------------------------- */ .field{display:flex;flex-direction:column;gap:var(--s-1)} .field label{font-size:var(--fs-cap);font-weight:var(--fw-m);color:var(--t2)} .input{min-height:var(--hit-pc);padding:0 var(--s-3);border:var(--bw) solid var(--line-input);border-radius:var(--r-md);background:var(--card);font-size:var(--fs-tab);color:var(--t1);width:100%} .input::placeholder{color:var(--t3)} .input:focus{outline:none;border:var(--bw-focus) solid var(--blue);padding-inline:calc(var(--s-3) - 1px)} .field.is-error .input{border-color:var(--red)} .field .msg{font-size:var(--fs-cap);color:var(--t3)} .field.is-error .msg{color:var(--red)} .field.is-empty .input{background:var(--warn-fill);border-color:var(--warn)} .field.is-empty .msg{color:var(--warn)} textarea.input{min-height:var(--area-h);padding:var(--s-3);line-height:var(--lh-body);resize:vertical} .group{border:var(--bw) solid var(--line);border-radius:var(--r-lg);background:var(--card)} .group>summary{list-style:none;display:flex;align-items:center;gap:var(--s-3);min-height:var(--hit-l);padding:0 var(--s-4);cursor:pointer} .group>summary::-webkit-details-marker{display:none} .group>summary .grow{flex:1} .group[open]>summary .ic-chev{transform:rotate(180deg)} .group .group-body{padding:0 var(--s-4) var(--s-4);display:grid;gap:var(--s-3)} .group.is-done>summary .sum{color:var(--t1)} .step-no{display:inline-grid;place-items:center;width:var(--step);height:var(--step);border-radius:var(--r-full);background:var(--fill);color:var(--t2);font-size:var(--fs-cap);font-weight:var(--fw-m);flex:none} .is-done .step-no{background:var(--ok-fill);color:var(--ok)} /* 6. 하단 탭(폰) 4개 · 56 + 안전 영역 ------------------------------ */ .tabbar{position:fixed;left:0;right:0;bottom:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:var(--card);border-top:var(--bw) solid var(--line); padding-bottom:env(safe-area-inset-bottom);z-index:20} .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-1);min-height:var(--hit-l);font-size:var(--fs-cap);color:var(--t3);text-decoration:none} .tabbar a .ic{width:24px;height:24px} .tabbar a[aria-current="page"]{color:var(--blue);font-weight:var(--fw-m)} .tabbar a[aria-current="page"] .ic{color:var(--blue)} /* 7. 알림 띠 ------------------------------------------------------- */ .notice{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);font-size:var(--fs-body);color:var(--t1)} .notice .ic{color:currentColor} /* #14 2px 대신 가운데 맞춤 */ .notice .grow{flex:1} .notice.is-info{background:var(--blue-fill)} .notice.is-info .ic{color:var(--blue)} .notice.is-warn{background:var(--warn-fill)} .notice.is-warn .ic{color:var(--warn)} .notice.is-bad{background:var(--red-fill)} .notice.is-bad .ic{color:var(--red)} .notice.is-ok{background:var(--ok-fill)} .notice.is-ok .ic{color:var(--ok)} /* 8. 빈 화면 ------------------------------------------------------- */ .empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-3);padding:var(--s-8) var(--s-5)} .empty svg.art{width:var(--art);height:var(--art);fill:none;stroke:var(--t3);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .empty p{margin:0;font-size:var(--fs-body-l);color:var(--t1)} /* 9. 로딩 뼈대 (깜빡임 없는 옅은 흐름) ----------------------------- */ .skel{display:block;height:16px;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--fill) 0,var(--line) 50%,var(--fill) 100%) 0 0/200% 100%;animation:v4skel 1.6s linear infinite} .skel.lg{height:28px;width:50%} .skel.sm{width:60%} @keyframes v4skel{to{background-position:-200% 0}} @media (prefers-reduced-motion:reduce){.skel{animation:none}} /* 10. 바텀시트·토스트 --------------------------------------------- */ .scrim{position:fixed;inset:0;background:var(--scrim);z-index:40} .sheet{position:fixed;left:0;right:0;bottom:0;max-height:85dvh;overflow:auto;background:var(--card);border-radius:var(--r-lg) var(--r-lg) 0 0; box-shadow:var(--shadow-float);z-index:41;padding:var(--s-2) var(--gutter) 0} .sheet .grab{width:40px;height:4px;border-radius:var(--r-full);background:var(--line-strong);margin:0 auto var(--s-3)} .sheet .sheet-foot{position:sticky;bottom:0;background:var(--card);padding:var(--s-3) 0 calc(var(--s-4) + env(safe-area-inset-bottom))} .sheet.is-demo,.scrim.is-demo{position:absolute} .toast{display:inline-flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--t1);color:var(--bg);box-shadow:var(--shadow-float);font-size:var(--fs-body)} .toast button{background:none;border:0;color:inherit;font-weight:var(--fw-m);min-height:var(--hit-pc);text-decoration:underline;cursor:pointer} /* 11. 저장 표시 · 보안 표시 (작고 믿음 가게) ---------------------- */ .saved,.secure{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--fs-cap);color:var(--t3);white-space:nowrap} .saved::before{content:"";width:8px;height:8px;border-radius:var(--r-full);background:var(--dot-green)} .saved.is-saving::before{background:var(--dot-amber)} .secure .ic{color:var(--ok)} /* #11 16 → 20 */ /* 12. 길 그림 (상담 단계 — 지하철 노선처럼, 지금 칸만 진하게) ---- */ .path{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none} .path li{display:flex;align-items:center;flex:1;min-width:24px} .path li::after{content:"";flex:1;height:2px;background:var(--line);margin:0 var(--s-1)} .path li:last-child{flex:none} .path li:last-child::after{display:none} .path .dot{width:12px;height:12px;border-radius:var(--r-full);background:var(--card);border:2px solid var(--line-input);flex:none} .path .done .dot{background:var(--blue-mark);border-color:var(--blue-mark)} .path .done::after{background:var(--blue-mark)} .path .now .dot{width:16px;height:16px;background:var(--card);border:4px solid var(--blue)} .path-label{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2);margin-top:var(--s-2)} /* 13. 배지 (상태 표시, 옅은 바탕 + 진한 글자) --------------------- */ .badge{display:inline-flex;align-items:center;height:24px;padding:0 var(--s-2);border-radius:var(--r-sm);font-size:var(--fs-cap);font-weight:var(--fw-m);white-space:nowrap;background:var(--fill);color:var(--t2)} .badge.is-bad{background:var(--red-fill);color:var(--red)} .badge.is-warn{background:var(--warn-fill);color:var(--warn)} .badge.is-ok{background:var(--ok-fill);color:var(--ok)} .badge.is-info{background:var(--blue-fill);color:var(--blue)} /* 막대 (가로 막대 + 끝에 값) */ .meter{height:8px;border-radius:var(--r-full);background:var(--fill);overflow:hidden} .meter>i{display:block;height:100%;background:var(--blue-mark);border-radius:var(--r-full)} .meter.is-bad>i{background:var(--dot-red)} .meter.is-warn>i{background:var(--dot-amber)} /* 타임라인 (고객 한 명의 모든 기록) */ .timeline{list-style:none;margin:0;padding:0;position:relative} .timeline li{position:relative;padding:0 0 var(--s-4) var(--s-6)} .timeline li::before{content:"";position:absolute;left:5px;top:8px;bottom:0;width:2px;background:var(--line)} .timeline li:last-child::before{display:none} .timeline li::after{content:"";position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:var(--r-full);background:var(--card);border:2px solid var(--line-strong)} .timeline li.is-next::after{border-color:var(--blue)} .timeline .when{font-size:var(--fs-cap);color:var(--t3)} /* 14. 묶음 메뉴 (비슷한 장르 기능을 한 칸으로 묶고 펼치기) -------- 한 칸 = 장르 이름 + 대표 기능 2~3개 이름(한 줄) + 개수. 누르면 그 안 기능 목록이 펼쳐짐(한 번에 한 칸만). 예) 설계사: 고객 · 상담 · 보장·설계 · 청구·사후관리 · 자료 / 고객 사이트: 건강 · 차 · 돈·살림 · 가게 */ .mgroup{border-bottom:var(--bw) solid var(--line)} .mgroup:last-child{border-bottom:0} .mgroup>summary{list-style:none;display:flex;align-items:center;gap:var(--s-3);min-height:var(--mgroup-h);cursor:pointer;padding:var(--s-2) 0} .mgroup>summary::-webkit-details-marker{display:none} .mgroup>summary .grow{flex:1;min-width:0} .mgroup>summary .ic-l{color:var(--t2)} .mgroup>summary .hint{display:block;font-size:var(--fs-cap);color:var(--t3)} .mgroup>summary .cnt{font-size:var(--fs-cap);color:var(--t3);font-variant-numeric:tabular-nums} .mgroup[open]>summary .ic-chev{transform:rotate(180deg)} .mgroup .ic-chev{transition:transform var(--t-mid) var(--ease)} .mgroup ul{list-style:none;margin:0 0 var(--s-3);padding:0 0 0 36px;display:grid;gap:0} .mgroup ul a{display:flex;align-items:center;min-height:var(--hit-pc);color:var(--t2);text-decoration:none;font-size:var(--fs-body)} .mgroup ul a::after{content:"";margin-left:auto} /* 15. 묶음 카드 겉면 (안에 뭐가 있는지 밖에서 티 나게, 3줄 이내) -- ① 장르 이름 + 규모 숫자 하나(예: 병원 7.9만 곳) ② 안에 든 기능 2~4개(작은 아이콘 + 짧은 말) ③ 기대가 생기는 한 줄 카드 전체가 누르는 칸 하나(안에 버튼 따로 없음). 숫자는 실제 데이터 수만(지어낸 숫자 금지). */ .mcards{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(min(var(--mcard-min),100%),1fr))} .mcard{display:grid;gap:var(--s-2);padding:var(--s-4);border:var(--bw) solid var(--line);border-radius:var(--r-lg);background:var(--card); color:inherit;text-decoration:none;cursor:pointer;transition:transform var(--t-fast) var(--ease)} .mcard:active{transform:scale(.98)} @media (hover:hover){.mcard:hover{border-color:var(--line-strong)}} .mcard:focus-visible{outline:var(--bw-focus) solid var(--blue);outline-offset:2px} .mcard .m1{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap} .mcard .m1 .h2{flex:none} .mcard .scale{font-size:var(--fs-body);font-weight:var(--fw-m);color:var(--t1);font-variant-numeric:tabular-nums} .mcard .m1 .ic-chev{margin-left:auto;align-self:center} .mcard .m2{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);margin:0;padding:0;list-style:none} .mcard .m2 li{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--fs-body);color:var(--t2)} .mcard .m2 .ic{width:20px;height:20px} /* #10 16 → 20 */ .mcard .m3{font-size:var(--fs-cap);color:var(--t3);margin:0} /* 16. 검토 회의 2차 반영 (10/30) ----------------------------------- · 묶음 버튼 할 일 목록은 3개만 보이고 나머지는 '외 N가지 보기'로 펼침(투명하되 소음은 줄임) · 뒤로는 화살표 + "뒤로" 글자(50·60대·무료 AI 2곳 모두 지적) · 스위치 옆 켜짐/꺼짐 글자 */ .bundle-more>summary{list-style:none;display:inline-flex;align-items:center;gap:var(--s-1);min-height:var(--hit-pc);font-size:var(--fs-cap);font-weight:var(--fw-m);color:var(--blue);cursor:pointer} .bundle-more>summary::-webkit-details-marker{display:none} .bundle-more[open]>summary .ic{transform:rotate(180deg)} .bundle-more .bundle-list{margin-top:var(--s-1)} .btn-back{color:var(--t2);padding-inline:var(--s-2) var(--s-3);gap:var(--s-1)} .btn-back .ic{color:var(--t2)} .state{font-size:var(--fs-cap);color:var(--t3);margin-left:auto;margin-right:var(--s-2);min-width:2.5em;text-align:right} .switch-row .state+.switch{margin-left:0} /* 17. 규격서 1031 '없는 것' 추가 (c·d·a) -------------------------------- c .appbar 머리 줄: 높이 56·한 줄·모든 화면 같은 틀 · d .input-clear 입력칸 지우기(누르는 칸 44) · a .prose 한 줄 길이 */ .appbar{display:flex;align-items:center;gap:var(--s-2);min-height:var(--header-h)} .prose{max-width:var(--measure)} .input-wrap{position:relative;display:flex} .input-wrap .input{padding-right:var(--hit-pc)} .input-clear{position:absolute;right:0;top:0;bottom:0;width:var(--hit-pc);display:grid;place-items:center;background:none;border:0;color:var(--t3);cursor:pointer;border-radius:var(--r-md)} .input-clear[hidden]{display:none} .input-clear:focus-visible{outline:var(--bw-focus) solid var(--blue)} /* 고르는 칸(select)도 입력칸과 같은 높이·테두리 (규격 5-4) */ select.input{appearance:auto;padding-right:var(--s-2)} /* ── 11/1 E0 · 묶음 실행 결과(App.svc.run): ✓/✗ 한 줄씩 ── */ .run-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-1)} .run-list li{display:flex;align-items:center;gap:var(--s-2);min-height:32px;font-size:var(--fs-body);color:var(--t1)} .run-list li.is-ok .ic{color:var(--ok)} .run-list li.is-bad .ic{color:var(--red)} .run-list .cap{color:var(--t3)} .run-list li.is-skip{color:var(--t2)} .run-list li.is-skip .ic{color:var(--t3)} /* ── 11/1 E1 · 첫 화면 찾기 칸(네이버) + 바로가기 8칸(크롬) ── */ .find-wrap{position:relative} .find-wrap>.ic{position:absolute;left:var(--s-3);top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none} .find-wrap .input{padding-left:calc(var(--s-3) + 28px);min-height:56px;font-size:var(--fs-body-l)} .find-res{display:grid;gap:var(--s-3);padding:var(--s-3) var(--s-4);background:var(--card);border:var(--bw) solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-float)} .find-res[hidden]{display:none} .find-g{display:grid;gap:var(--s-1)} .find-g .rows .ic{color:var(--t3);flex:none} .sc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2)} .sc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-1);min-height:76px;padding:var(--s-2);border-radius:var(--r-md);background:var(--card);border:var(--bw) solid var(--line);color:var(--t1);text-decoration:none;font-size:var(--fs-cap);font-weight:var(--fw-m);text-align:center;line-height:var(--lh-cap);-webkit-touch-callout:none;user-select:none} .sc .ic-l{color:var(--blue)} .sc:hover{background:var(--hover)} .sc:active{background:var(--fill)} @media (min-width:1024px){.sc-grid{grid-template-columns:repeat(8,minmax(0,1fr))}} /* ── 11/1 E1 · 보장분석 허점 리포트(한 줄 + 펼치면 자세히) · 실손 세대 띠 ── */ .gap-list{list-style:none;margin:0;padding:0;border-top:var(--bw) solid var(--line)} .gap-list>li{border-bottom:var(--bw) solid var(--line)} .gap-row,.gap-more>summary{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-1) var(--s-2);min-height:var(--hit-l);padding:var(--s-2) 0} .gap-more>summary{list-style:none;cursor:pointer} .gap-more>summary::-webkit-details-marker{display:none} .gap-more>summary>.ic{margin-left:auto;color:var(--t3)} .gap-more[open]>summary>.ic{transform:rotate(180deg)} .gap-more>p{margin:0 0 var(--s-3)} .gap-one{flex:1 1 220px;min-width:0;color:var(--t2)} .sil-band{flex-wrap:wrap} .sil-band .input-month{width:auto;min-width:160px;min-height:var(--hit-pc)} /* ── 11/1 E · D 요청: 13 내보내기 미리보기 그림이 폭에 맞게 ── */ .preview .pv img{width:100%;height:auto;display:block;border-radius:var(--r-md)} /* ── 11/1 E2 · A 요청: 칩 줄 감기 · 서명판 · 단계 이름 ── */ .chip{flex:none} .chips.is-wrap{flex-wrap:wrap;overflow:visible} .sigpad canvas{display:block;touch-action:none;cursor:crosshair} .path-label .is-now{color:var(--t1);font-weight:var(--fw-m)} /* ── 11/1 E · 보장분석 기록 탭 '사후관리 날짜' 접기 ── */ .group-dates>summary{display:flex;align-items:center;gap:var(--s-2);min-height:var(--hit-l);cursor:pointer} /* ── 11/1 E · 도움말 화면(#/help) · 머리 줄 도움말 버튼 ── */ .help-sec>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);min-height:var(--hit-l);cursor:pointer;list-style:none} .help-sec>summary::-webkit-details-marker{display:none} .help-sec[open]>summary .ic{transform:rotate(180deg)} .help-steps,.help-flow{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)} .help-steps li{display:flex;align-items:center;gap:var(--s-3)} .help-flow li{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2) var(--s-3);padding-bottom:var(--s-2);border-bottom:var(--bw) solid var(--line)} .help-flow li:last-child{border-bottom:0} .help-flow .row-main{min-width:96px} .help-q{border-bottom:var(--bw) solid var(--line)} .help-q>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);min-height:var(--hit-l);cursor:pointer;list-style:none} .help-q>summary::-webkit-details-marker{display:none} .help-q[open]>summary .ic{transform:rotate(180deg)} .help-q>p{padding:0 0 var(--s-3);font-size:var(--fs-body-l)} .rows>li.is-here{background:var(--blue-fill);border-radius:var(--r-md)} .btn-help{flex:none} @media (max-width:480px){.btn-help .help-txt{display:none}} /* 폰: 아이콘만(이름은 aria-label) */ @media (max-width:480px){.btn-help{min-width:var(--hit-m);justify-content:center}} .help-steps .btn{flex:none;min-width:var(--hit-m)} .btn-out{flex:none} @media (max-width:480px){.btn-out .help-txt{display:none}.btn-out{min-width:var(--hit-m);justify-content:center}}