/* ============================================================ KPW 웰스원 CRM — Design System (Deep Navy + Gold) 빌드 없음 · 오프라인 · 단일 파일. 모든 색/간격/반경/그림자는 토큰만 참조. ============================================================ */ /* ---------- 0) Self-hosted Font — 기기 무관 동일 렌더링(오프라인) ---------- */ @font-face{ font-family:"Noto Sans KR"; src:url("/static/fonts/NotoSansKR.woff2") format("woff2-variations"); font-weight:100 900;font-style:normal;font-display:swap; } /* ---------- 1) Design Tokens ---------- */ :root{ /* D4(2026-08-10): 템플릿 곳곳의 하드코딩 차트색을 토큰으로 흡수 — 같은 파랑이 두 파일에 따로 있어 한쪽만 바뀌는 사고 방지 */ /* 🔴 2026-08-13: 차트 색이 두 벌이었다 — 서버 SVG(charts.PALETTE: 네이비·골드·하늘·와인)와 이 토큰(파랑·주황·초록)이 서로 달라, 같은 화면에서 도넛과 미터바 색이 갈렸다. charts.PALETTE / assets_calc.CH_* 와 **같은 값**으로 통일한다(원본은 charts.PALETTE). */ --chart-1:#1b2a4a; --chart-2:#c8a24a; --chart-3:#5e77a8; --chart-4:#7c3a4b; --chart-5:#9db1d4; /* A11(2026-08-11): 어두운 네이비 사이드바 위 텍스트 계조 — base.html 인라인 style과 style.css에 같은 값(#7d8cab)이 따로 있어 한쪽만 바꾸면 어긋났다. 한 곳(토큰)으로 모은다. 테마 무관 고정. */ --side-label:#93a1bd; /* 2026-08-18: 구값 #7d8cab은 사이드바 **상단**(#1e3055) 위에서 3.8:1로 AA 미달이었다(하단에서만 4.6:1). 라벨이 상단에 몰려 있어 실사용 위치에서 미달 → 5.0:1로 올린다. 새 토큰이 아니라 값 보정. */ --side-label-2:#8a97b4; --side-hover:#9fadcb; --side-hover-2:#b9c5dd; --side-item:#c5cee0; --side-item-2:#c9d3e6; --side-active:#ffd97a; /* Brand — Deep Navy */ --brand:#1b2a4a; --brand-strong:#12203c; --brand-ink:#1b2a4a; --brand-2:#283d64; --navy-soft:#eaeef6; /* PC다크(2026-09-01): --brand **면 위** 글자. 라이트 #fff 그대로 · [P2] 다크에서 #12203c — brand 면이 밝은 스틸블루(#9db1d4)가 되므로 흰 글자는 2.3:1로 안 보인다. 리터럴 #fff 12곳을 승격. */ --on-brand:#fff; /* Accent — Gold */ --gold:#c8a24a; --gold-strong:#b0862f; --gold-soft:#f6efda; --gold-line:#e8d6a4; --gold-ink:#8a6a1f; /* 흰 바탕 위 골드 **글자**(5.05:1) — --gold/--gold-strong은 흰 바탕 소형 글자 AA 미달(2026-08-25 디자인팀) */ /* Neutrals */ --ink:#1a2233; --ink-soft:#3d4657; --muted:#6b7482; --line:#e5e8f0; --line-soft:#eef1f6; --surface:#ffffff; --surface-2:#f8fafc; /* 2026-08-13: .gauge-tile·.risk-card·.rs-item에 var(--surface-3)가 하드코딩돼 '제5의 표면색'이 돼 있었다 */ --surface-3:#fbfcfe; --bg:#f3f5f9; /* Semantic */ --ok:#0f7b3f; --ok-bg:#e7f6ec; --ok-line:#bfe6cd; --warn:#b45309; --warn-bg:#fdf1e1; --warn-line:#f3d9b3; /* 팀(달력 원천) — 2026-08-19(2): 처음엔 남색 계열이라 회사 일정과 배경 차이가 3/255뿐이었다. 6종을 색으로 갈라야 하므로 보라 계열로 옮겼다(#5b3fa0 on #ede9f7 = 6.61:1). */ --team:#5b3fa0; --team-bg:#ede9f7; --team-line:#ddd4f0; /* red-is-wine(대표 지시) 전면 집행 2026-09-02 — 빨강 → 와인(웰스페이 --wine과 동일 계열). 다크 [P2]는 자체 값(#FF8A80)이라 무변경. 22개 사용 규칙이 이 3값으로 일괄 정렬된다. */ --danger:#8c2438; --danger-bg:#f6e9ec; --danger-line:#e3c6cd; /* Radius */ --r-xs:6px; --r-sm:9px; --r:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px; /* Elevation */ --sh-1:0 1px 2px rgba(20,32,60,.06); --sh-2:0 3px 12px rgba(20,32,60,.08), 0 1px 3px rgba(20,32,60,.05); --sh-3:0 14px 34px rgba(20,32,60,.16); --ring:0 0 0 3px rgba(200,162,74,.45); /* Type — Modern sans, larger scale */ --font:"Noto Sans KR","Noto Sans",-apple-system,BlinkMacSystemFont, "맑은 고딕","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif; --serif:"Palatino Linotype",Palatino,"Nanum Myeongjo","Noto Serif KR",Georgia, "Batang","바탕","Times New Roman",serif; /* 🔴 2026-08-13 개편 1단계 — 스케일이 5단뿐이라 템플릿이 각자 px를 지어냈다(인라인 font-size 643건·고유 13종). 실사용 분포(12px 208 · 13px 94 · 11px 76 · 11.5px 72 · 12.5px 61 · 20px 35 …)를 그대로 흡수해 **빠진 단만 추가**한다. ⚠ 기존 5단의 값은 바꾸지 않는다 — 바꾸면 지금 화면이 전부 움직인다. */ --fs-2xs:10.5px; --fs-xs:11px; --fs-note:12px; --fs-cap:12.5px; --fs-body-sm:13px; --fs-sm:14px; --fs:15px; --fs-md:16px; --fs-lg:19px; --fs-xl:20px; --fs-2xl:22px; --fs-3xl:24px; /* Space */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:28px; /* Motion(2026-08-27) — Notion 가이드(등장 0.5s·spring)·60fps 카테고리를 CRM 토큰으로. 모바일 블록만 참조한다. 기존 모션 곡선(.msheet·.mtabbar의 cubic-bezier(.2,.8,.25,1))에 spring 하나만 더한다 — 곡선이 셋을 넘으면 '정신없음'. */ --mo-fast:150ms; --mo-base:220ms; --mo-slow:500ms; --mo-breathe:9s; --ease-out:cubic-bezier(.2,.8,.25,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-inout:cubic-bezier(.45,0,.55,1); --stagger:55ms; /* Wash(2026-08-27) — 모바일 카드 바탕용 파스텔 6종. 각각 기존 의미색의 '가장 옅은 단'이다(새 색상군이 아니다). ⚠ 모바일 판정 블록 안에서만 쓴다. 인쇄·PC 카드는 --surface 그대로. 워시 위 보조 글자는 --ink-soft(--muted는 AA 미달). */ --wash-cream:#f9f3e3; /* gold 계열 · 오늘·고정 */ --wash-sky:#e9f0fb; /* navy 계열 · 기본 카드 */ --wash-mint:#e6f5ee; /* ok 계열 */ --wash-lilac:#efeafa; /* team 계열 */ --wash-peach:#fdeee6; /* warn 계열 · 주의 카드 */ --wash-sand:#f1eee9; /* 중성 웜그레이 · 카드 사이 쉼표 */ } /* ---------- 2) Base ---------- */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;font-family:var(--font);font-size:var(--fs);line-height:1.65; color:var(--ink);background:var(--bg); word-break:keep-all;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; font-feature-settings:"tnum" 0; } a{color:var(--brand);text-decoration:none;transition:color .15s} a:hover{color:var(--brand-strong);text-decoration:underline} /* A4(2026-08-11): box-shadow 포커스 링은 .table-scroll(overflow:auto) 안에서 잘려, 표 안의 버튼·입력칸에서 키보드 포커스 위치가 안 보였다. outline은 클리핑 대상이 아니라 항상 보인다. */ :focus-visible{outline:2px solid var(--gold-strong);outline-offset:2px;box-shadow:none;border-radius:var(--r-xs)} /* 본문 바로가기(D5) — 시각적으로는 숨겨 두고 **포커스가 오면** 좌상단에 나타난다. ⚠ display:none·visibility:hidden으로 숨기면 포커스 자체를 못 받아 아무 소용이 없다. ⚠ 인쇄에는 나오지 않는다(아래 @media print에서 .noprint와 같은 취급). */ .skip-link{position:absolute;left:-9999px;top:0;z-index:200; background:var(--brand);color:var(--on-brand);padding:10px 16px;border-radius:0 0 var(--r-sm) 0; font-size:13px;font-weight:700} .skip-link:focus{left:0;color:var(--on-brand);text-decoration:none} #main:focus{outline:none} ::selection{background:var(--gold-soft)} h1,h2,h3,p{margin:0} h1{font-size:clamp(23px,2.6vw,30px);font-weight:800;letter-spacing:-.02em; color:var(--brand-ink);margin:2px 0 var(--sp-5);line-height:1.25} h2{font-size:var(--fs-lg);font-weight:800;color:var(--brand-ink); margin:0 0 var(--sp-4);letter-spacing:-.01em} h3{font-size:var(--fs-sm);font-weight:700;color:var(--muted);margin:var(--sp-4) 0 var(--sp-2);letter-spacing:.01em} small,.hint{font-size:var(--fs-cap);color:var(--muted);line-height:1.55} .muted{color:var(--muted)} /* ---------- 3-0) App Shell / Sidebar (참고 레이아웃: 좌측 네비 + 상단 바) ---------- */ .shell{display:flex;min-height:100vh;align-items:stretch} /* 🔴 2026-08-25 사용자 지시 — "메뉴가 왼쪽에 몰려 보기 불편, 폭을 줄이든 가운데 정렬하든 디자인팀과 결정". 디자인·UX 두 팀 모두 **폭 축소(224→208px) + 머리(로고·이름)만 가운데**를 골랐다. 원인은 정렬이 아니라 **빈 오른쪽 면적**(라벨 4~7자, 행마다 오른쪽 71~113px이 빔)이었다. ⚠ 메뉴 전체 가운데 정렬은 기각 — 고객 화면의 4단 들여쓰기(묶음→단계→화면→앵커)와 아이콘 열·배지 열이 무너진다. ⚠ 200px까지 내리면 '④ 포트폴리오 수립 및 제안'이 두 줄로 접힌다 → 208px + 단계 자간 .06em이 하한. */ .sidebar{ flex:0 0 208px;position:sticky;top:0;height:100vh;overflow-y:auto; background:linear-gradient(180deg,#1e3055 0%,#15233f 55%,#101b31 100%); color:#d7deec;padding:16px 12px 12px;display:flex;flex-direction:column;gap:2px; border-right:1px solid rgba(200,162,74,.25); box-shadow:4px 0 18px rgba(16,26,48,.18); } .side-brand{padding:2px 0 14px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:10px} /* 🔴 2026-08-25 4차 사용자 지시 — "로고·이름과 아래 탭들이 안 맞는다, 통일". 머리를 가운데로 뒀던 것을 메뉴와 **같은 왼쪽 기준선(14px)**에 맞춘다(메뉴를 가운데로 옮기면 들여쓰기 계층이 무너지므로 머리가 따라간다). */ .side-brand a{display:flex;justify-content:flex-start;align-items:center;gap:10px;padding-left:14px;color:#fff;font-weight:800;font-size:16.5px;letter-spacing:-.01em} .side-brand a:hover{text-decoration:none;opacity:.95} /* 실제 KPW 로고 (2026-08-24) — 원본 313x120(2.6:1). width만 주고 height:auto로 비율을 지킨다. ⚠ width/height 속성을 마크업에 함께 적어 **로고가 늦게 떠도 자리가 밀리지 않게** 한다(레이아웃 이동 방지). ⚠ 사이드바 안쪽 폭은 224 - 28 = 196px다 — 150px면 여백이 남아 답답하지 않다. */ /* 🔴 2026-08-25 사용자 지시 — "로고가 너무 커짐, 기존 그대로". 150px(세로 57px)는 그 아래 이름칸보다 커서 사이드바 머리가 로고에 잡아먹혔다. 80px = 세로 약 31px — 로고를 넣기 전 아이콘+글자 높이와 사실상 같다. */ .side-logo{width:80px;height:auto;display:block} .side-brand .mark{ display:inline-grid;place-items:center;width:36px;height:36px;border-radius:11px;flex:none; background:linear-gradient(135deg,#dcbb66,#c8a24a);font-size:18px; box-shadow:0 2px 6px rgba(200,162,74,.4),inset 0 0 0 1px rgba(255,255,255,.35); } .side-brand .mark svg{width:19px;height:19px;color:#13203a} .side-logout svg{vertical-align:-2px} /* 묶음 라벨 — 10.5px·자간 .14em은 한글이 낱글자로 흩어져 '조각 글자'처럼 보였다(UX팀 2026-08-25) → 11.5px·.06em */ .side-sec{font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--side-label); padding:14px 12px 6px;text-transform:uppercase} .side-nav{display:flex;flex-direction:column;gap:2px} .side-nav a{ display:flex;align-items:center;gap:10px;color:#c3cde2;font-size:14px;font-weight:600; padding:9px 12px 9px 14px;border-radius:10px;line-height:1.2;transition:background .15s,color .15s; } /* 아이콘 칸 고정폭(20px) — 아이콘이 없거나 크기가 달라도 글자 열이 한 선에 맞는다. ⚠ 디자인 QA(2026-08-25 2차): 같은 선택자를 18px로 한 번 더 선언해 문서와 실제값이 어긋났었다 → 하나만 남긴다. */ .side-nav a .ico{width:20px;flex:none;display:inline-grid;place-items:center} .side-nav a .ico svg{width:16.5px;height:16.5px;display:block} .side-nav a:hover{color:#fff;background:rgba(255,255,255,.09);text-decoration:none} .side-nav a.active{ color:#ecd9a4;background:rgba(200,162,74,.14);font-weight:800; box-shadow:inset 3px 0 0 var(--gold),inset 0 0 0 1px rgba(200,162,74,.22); } .side-foot{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)} .side-logout{display:block;text-align:center;color:#f4cfc9;font-size:13px;font-weight:700; padding:9px 10px;border-radius:10px;border:1px solid rgba(244,207,201,.3)} .side-logout:hover{background:rgba(220,110,100,.25);color:#fff;text-decoration:none} .main{flex:1;min-width:0;display:flex;flex-direction:column} .mainbar{ position:sticky;top:0;z-index:40; display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap; background:rgba(255,255,255,.92);backdrop-filter:blur(8px); padding:12px clamp(16px,3vw,28px);border-bottom:1px solid var(--line); } .mb-title{font-weight:700;color:var(--brand-ink);font-size:15.5px;letter-spacing:.06em} .mb-sub{font-size:11.5px;color:var(--muted)} /* 헤더 검색(.mb-search)은 7차 지시로 빠졌다 — 그 자리에 핵심가치 띠(.mb-values). 남는 폭을 다 쓰되 헤더 한 줄(64px)을 넘지 않는다. */ .mb-values{flex:1 1 320px;min-width:0;display:flex;align-items:center;gap:clamp(10px,1.4vw,22px); padding:5px 14px;border-radius:var(--r-lg);background:var(--surface);border-left:3px solid var(--gold); box-shadow:0 1px 3px rgba(20,32,60,.05);order:1} .mv-cap{flex:none;display:flex;flex-direction:column;line-height:1.1;padding-right:clamp(8px,1.2vw,16px);border-right:1px solid var(--line)} .mv-cap b{color:var(--brand-ink);font-size:var(--fs-note);font-weight:800;white-space:nowrap} .mv-cap small{color:var(--gold-ink);font-size:9px;font-weight:800;letter-spacing:.14em;white-space:nowrap} .mv-list{flex:1 1 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;list-style:none;margin:0;padding:0;min-width:0} .mv-v{display:flex;flex-direction:column;min-width:0;padding:0 clamp(6px,.9vw,12px);line-height:1.15} .mv-v+.mv-v{border-left:1px solid var(--line-soft)} .mv-ko{color:var(--brand-ink);font-size:var(--fs-cap);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 🔴 2026-09-07: 넘침 처리가 없어 좁아지면 글자가 **겹쳐** 보였다(헤더에 [상담 시작]이 늘면서 드러남) */ .mv-en{color:var(--gold-ink);font-size:9.5px;font-weight:600;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 영문명은 1500px 아래에서 "Indep…"처럼 잘렸다(1366px 실측) → 접는다. 한글명·캡션만 남긴다 */ @media screen and (max-width:1500px){ .mv-en{display:none} } @media screen and (max-width:1300px){ .mv-cap small{display:none} } @media screen and (max-width:1250px){ .mb-values{display:none} } /* 헤더에 [상담 시작]이 늘어 1100px에서는 다섯 값이 겹친다 → 접는 기준을 올린다(2026-09-07) */ @media print{ .mb-values{display:none} } /* 본문 영역 — 폭 상한 없이 화면을 꽉 채운다. ⚠ 부모(.main)가 flex 컬럼이라 **좌우 마진을 auto로 두면 stretch가 무효화**되어 내용 너비만큼만 잡히고 가운데로 몰린다(대시보드처럼 내용이 넓은 화면만 우연히 꽉 차 보였음). → 좌우 마진 0 + width:100% 로 고정한다. box-sizing:border-box라 padding은 안쪽으로 들어간다. */ .container{max-width:none;width:100%;margin:clamp(20px,3vw,32px) 0; padding:0 clamp(15px,3vw,22px)} /* 읽기·폼 화면 폭 캡(2026-09-02 대표 승인 · 시안 6cd10afa) — 큰 모니터에서 텍스트 행이 화면 끝까지 흐르지 않게 1320px 상한. 워크벤치(표) 화면은 전폭 유지 — 템플릿이 container_cls 블록으로 ' cap'을 스스로 선언한 화면에만 적용된다. ⚠ width:100%는 유지(flex-auto-margin-shrink 함정 — width 없이 auto 마진만 주면 내용 폭으로 축소). */ /* ⏸ 적용 보류(2026-09-02 대표: "바로 적용하지 말고 시안 먼저") — 승인 시 아래 주석만 해제. .container.cap{max-width:1320px;margin-left:auto;margin-right:auto} */ /* 헤더 전역 고객 검색 + 최근 연 고객(2026-09-02 · 3파트 감사 — impl-work 규격, 통합자 편입). ⚠ 헤더 검색은 7차 지시로 제거된 이력 있음 — 09-02 3파트 감사로 대표 재승인(최근 고객 포함). 모바일(≤1100px)에서는 숨김 — 하단 탭 '고객'이 담당(핵심가치 접힘과 같은 규칙). */ .mb-search{display:flex;align-items:center;gap:6px;position:relative} .mb-search .mbs-form{display:flex;gap:4px;margin:0} .mb-search input[name=q]{width:150px;padding:5px 8px;font-size:12.5px} .mbs-recent{position:relative} .mbs-recent>summary{list-style:none;cursor:pointer;font-size:12.5px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;color:var(--ink-soft)} .mbs-recent>summary::-webkit-details-marker{display:none} .mbs-recent[open]>summary{background:var(--surface-2)} .mbs-drop{position:absolute;right:0;top:calc(100% + 4px);min-width:150px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-2);padding:6px;z-index:60;display:flex;flex-direction:column} .mbs-drop a{padding:6px 10px;border-radius:6px;font-size:13px;text-decoration:none;color:var(--ink)} .mbs-drop a:hover{background:var(--surface-2)} @media screen and (max-width:1100px){.mb-search{display:none}} .foot{text-align:center;color:var(--muted);font-size:var(--fs-cap);padding:28px 0 36px} .foot::before{content:"🔒 ";opacity:.7} /* ---------- 4) Card & Sections ---------- */ .card{ background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg); padding:var(--sp-5) clamp(18px,2.4vw,24px);margin-bottom:var(--sp-5);box-shadow:var(--sh-1); } .card>h2:first-child,.card>.flex-between:first-child{margin-top:0} .card.accent{border-left:4px solid var(--brand)} .card.warnline{border-left:4px solid var(--gold)} /* 저장 결과 안내 줄 — 🔴 2026-08-21 감수: `.okline`·`.ok-line`은 **CSS에 없는 이름**이었다. 하이웍스 설정·공지·인사정보·교육 네 화면이 이 이름을 쓰는데 규칙이 없어 색 없는 맨 텍스트로 떴다 (인라인 padding만 걸려 있어 '스타일이 있는 것처럼' 보였고, 그래서 아무도 눈치채지 못했다). ⚠ 카드에 얹은 것(`.card.ok-line`)과 홀로 쓰는 것을 나눈다 — 카드에 배경까지 칠하면 기존 화면들의 카드 색이 통째로 바뀐다(이번 변경의 범위를 넘는다). */ .okline:not(.card),.ok-line:not(.card){ background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok); border-radius:var(--r-md,10px);padding:10px 14px;font-size:13.5px} .warnline:not(.card){ background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn); border-radius:var(--r-md,10px);padding:10px 14px;font-size:13.5px} .card.ok-line,.card.okline{border-left:4px solid var(--ok)} /* 힌트·문단용 좌 바(2026-09-02 · 3파트감사 P1-3 인라인 골드 바 일괄 치환) — 모바일·인쇄는 기존 모습 유지, [P1]에서 중립(--line) */ .tipline{border-left:3px solid var(--gold);padding-left:10px} .flex-between{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);flex-wrap:wrap} .flex-between h1,.flex-between h2{margin-bottom:0} /* 카드 2단 나란히(최근 상담·알림 등) — 좁은 화면에선 세로 스택 */ .card-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--sp-4);align-items:start} @media screen and (max-width:820px){.card-duo{grid-template-columns:minmax(0,1fr)}} /* ---------- 5) Grid & KPI ---------- */ .grid{display:grid;gap:var(--sp-4)} .grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} /* 5칸 — 은퇴 '예상 월 연금액'처럼 1·2·3층 + 임대 + 합계를 한 줄에 놓을 때 */ .grid.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))} /* 폭에 따라 4→2→1칸 자동(대시보드 스탯 등) — 미디어쿼리 불필요 */ .grid.fit{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} /* ---------- 5-1) 공용 유틸 (인라인 style 대체) ---------- */ th.num,td.num{text-align:right} /* 🔴 2026-09-09: position:relative 가 없으면 **표 안의 .sr-only 가 스크롤 상자를 빠져나간다**. .sr-only 는 position:absolute 인데 위치 기준이 될 조상이 없으면 한참 위(또는 초기 기준틀)에 붙어, 가로로 넓은 표에서 셀이 놓인 x좌표만큼 **문서 전체가 옆으로 늘어난다**. 제안서 작성 화면이 320px 검사에서 문서폭 818px(창 485px)로 잡힌 원인이 이것이었다 — 표는 상자 안에서 잘 스크롤되는데 화면만 옆으로 밀렸다(눈으로는 원인을 못 찾는다). 여기를 위치 기준으로 만들면 절대배치 자식이 상자 밖으로 못 나간다. */ .table-scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch} /* 🔵 2026-09-21 — **인쇄용 리포트 안의 넓은 표**에 함께 다는 표식. A4(794px)에서는 맞는데 화면을 좁히면 넘친다(부동산 '물건별 상세' 8열 · 884px 화면에서 +148px 실측). 화면에서는 `.table-scroll`을 그대로 써서 **가로 스크롤 + "옆으로 밀어" 안내**를 같이 얻고, 인쇄에서는 overflow를 풀어 **상자가 종이 위에서 아무 일도 하지 않게** 한다. */ @media print{.rp-scroll{overflow:visible}} /* 화면에는 안 보이지만 스크린리더는 읽는 텍스트(표의 '동작' 열 머리글 등) — 디자인 QA 2026-08-12 */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* 출처 URL처럼 띄어쓰기 없는 긴 문자열이 좁은 화면에서 칸 밖으로 삐져나가지 않게 */ .hint a,.muted a,td a{overflow-wrap:anywhere;word-break:break-word} h2.sm{font-size:15.5px;margin:0} /* 인라인 아이콘(이모지 대체 단색 SVG) — 글자색을 따라감 */ .icn{width:1.05em;height:1.05em;vertical-align:-.16em;display:inline-block;flex:none} /* 화면에서도 차트가 칸 밖으로 넘치지 않게(인쇄와 동일 규칙) */ .card svg{max-width:100%;height:auto} .mkt-card svg{height:44px} /* 게이지(권장 대비 현재) */ .meter{position:relative;height:14px;border-radius:var(--r-pill);background:var(--line-soft);overflow:hidden} .meter>span{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-pill);min-width:2px} .meter-row{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm)} .meter-row .meter{flex:1} .kpi{ position:relative;overflow:hidden; background:linear-gradient(160deg,#ffffff 0%,#f7f9fd 100%); border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh-1); transition:transform .16s,box-shadow .16s; } .kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px; background:linear-gradient(180deg,#dcbb66,var(--gold))} .kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-2)} .kpi .n{font-size:30px;font-weight:800;color:var(--brand-ink);line-height:1.12; letter-spacing:-.025em;font-variant-numeric:tabular-nums} .kpi .l{font-size:var(--fs-sm);color:var(--ink-soft);margin-top:4px;font-weight:600} .kpi .hint{display:block;margin-top:6px} /* 클릭형 세부내역 카드: kpi를 details로 감싼 형태 */ details.kpi-details summary{outline:none;padding:0;background:transparent} details.kpi-details summary:hover{background:transparent} details.kpi-details summary::-webkit-details-marker{display:none} details.kpi-details summary::marker{content:""} details.kpi-details summary::before{content:""} details.kpi-details[open] summary::before{content:""} details.kpi-details[open]{box-shadow:var(--sh-2);border-color:var(--gold)} .drill-hint{text-decoration:underline dotted var(--muted);text-underline-offset:3px;cursor:pointer} /* 재무상태표·현금흐름표 (상담 양식 2단 대차 형식) */ .bs-table{min-width:300px} .bs-table .bs-head th{background:var(--brand);color:var(--on-brand);text-align:center;font-size:13.5px;letter-spacing:.3em;padding:9px} .bs-table .bs-sec td{background:var(--surface-2);font-weight:700;color:var(--brand-ink);border-top:1px solid var(--line)} .bs-table .bs-total td{background:var(--brand);color:var(--on-brand);font-weight:800;font-variant-numeric:tabular-nums} .bs-table .bs-net td{background:var(--brand);color:#ffd97a;font-weight:800;font-variant-numeric:tabular-nums} /* ---------- 6) Tables ---------- */ table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm)} th,td{padding:11px 13px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)} th{background:var(--surface-2);color:var(--brand-ink);font-weight:700;font-size:var(--fs-cap); letter-spacing:.01em;white-space:nowrap;border-bottom:1px solid var(--line)} th:first-child{border-top-left-radius:var(--r-sm)} th:last-child{border-top-right-radius:var(--r-sm)} /* 진짜 매트릭스 표의 **행 헤더**(D3 · 2026-08-07) — 스크린리더에는 헤더로 알리되 모양은 본문 셀 그대로 둔다. 그냥 로 두면 전역 th 스타일(회색 배경·작은 글씨·nowrap· 모서리 라운드)이 붙어 표 왼쪽 열만 헤더처럼 보인다. */ th.rowhead{background:transparent;color:inherit;font-weight:400;font-size:var(--fs-sm); white-space:normal;letter-spacing:normal;border-bottom:1px solid var(--line-soft); border-top-left-radius:0} tbody tr:last-child td{border-bottom:0} tbody tr{transition:background .12s} tbody tr:hover td{background:var(--surface-2)} td b{font-weight:700;color:var(--ink)} /* 표에서 '칸 전체'를 클릭 영역으로 — 글자만 눌러야 하던 불편 해소(고객 목록 등). td의 padding(11px 13px)만큼 음수 마진으로 되밀어 링크가 셀을 가득 채우게 한다. ⚠ 폼(select·버튼)이 있는 칸에는 쓰지 말 것 — 링크가 덮어 폼을 못 쓰게 된다. */ td > a.cell-link{display:block;margin:-11px -13px;padding:11px 13px; color:inherit;text-decoration:none;cursor:pointer} td > a.cell-link:hover{text-decoration:none} /* 🔴 2026-08-12(사용자 지적: "고객으로 들어갈 때 어디를 눌러야 할지 헷갈린다") 칸 전체가 이미 링크였는데 **눌리는 곳처럼 보이지 않았다.** 행에 마우스를 올리면 줄 전체가 밝아지고 이름에 밑줄이 들어와 '여기를 누르면 들어간다'가 보이게 한다. ⚠ 행 클릭을 JS로 흉내내지 않는다 — 셀마다 진짜 라서 키보드·새 탭 열기가 그대로 된다. */ tr.rowlink:hover > td{background:var(--navy-soft)} tr.rowlink:hover > td > a.cell-link b{text-decoration:underline} tr.rowlink > td > a.cell-link:focus-visible{outline:2px solid var(--brand);outline-offset:-2px} td:not(:first-child){font-variant-numeric:tabular-nums} tr.sumrow td{background:var(--gold-soft);border-top:2px solid var(--gold);font-weight:800;color:var(--brand-ink)} /* 합계 줄 가로 정렬용 빈 행 — 항목 수가 다른 표들의 높이를 맞춘다(내용 없이 높이만 차지) */ tr.rowfill td{border-bottom-color:transparent;color:transparent} /* 증시현황 주요 일정 — 이번 달 / 다음 달 이후 2단 */ .ev-head{font-size:12.5px;font-weight:800;color:var(--brand-ink);letter-spacing:.03em; padding:2px 2px 6px} .ev-table th,.ev-table td{padding:8px 10px;font-size:12.8px} .ev-table .c-act{width:44px} /* 금융자산 심화분석 — 표는 폭을 채우고, 수익률은 표 안에서 바로 입력 */ .fd-table{width:100%} .fd-in{width:78px;padding:5px 8px;font-size:12.5px;text-align:right} .fd-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px 14px;align-items:end;margin-top:10px} .fd-opts label{font-size:11.5px;color:var(--muted);display:block;margin-bottom:3px} .fd-opts input{width:100%;padding:7px 10px;font-size:13px} .fd-save{align-self:end} .pos{color:var(--ok);font-weight:700} .neg{color:var(--danger);font-weight:700} /* ---------- 7) Buttons ---------- */ .btn{ --b:var(--brand);--bh:var(--brand-strong); display:inline-flex;align-items:center;justify-content:center;gap:6px; background:var(--b);color:var(--on-brand);border:1px solid transparent;border-radius:var(--r-sm); padding:10px 18px;font-size:var(--fs);font-weight:700;font-family:inherit; cursor:pointer;line-height:1.2;transition:background .15s,box-shadow .15s,transform .05s; box-shadow:var(--sh-1); } .btn:hover{background:var(--bh);text-decoration:none;color:var(--on-brand)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.5;cursor:not-allowed} .btn.sm{padding:6px 12px;font-size:var(--fs-cap);border-radius:var(--r-xs)} /* Gold — 핵심 CTA */ .btn.gold{background:linear-gradient(180deg,#d3ae56,#c8a24a);color:#1b2a4a;box-shadow:0 2px 8px rgba(200,162,74,.35)} .btn.gold:hover{background:linear-gradient(180deg,#c8a24a,#b0862f);color:#1b2a4a} .btn.ghost{background:var(--navy-soft);color:var(--brand-ink);box-shadow:none} .btn.ghost:hover{background:#dde4f1;color:var(--brand-ink)} .btn.danger{background:var(--danger-bg);color:var(--danger);box-shadow:none;border-color:var(--danger-line)} .btn.danger:hover{background:#f9dcd7;color:var(--danger)} /* ---------- 8) Forms ---------- */ label{display:block;font-size:var(--fs-cap);color:var(--ink-soft);font-weight:600;margin:11px 0 5px} input,select,textarea{ width:100%;padding:10px 12px;border:1px solid #cbd4e2;border-radius:var(--r-sm); font-size:var(--fs);font-family:inherit;color:var(--ink);background:#fff; transition:border-color .15s,box-shadow .15s; } /* 🔴 라디오·체크박스는 **글자 입력칸이 아니다** — 위 `input{width:100%}`가 그대로 먹으면 동그라미가 칸 전체를 차지해 브라우저가 그것을 가운데 그리고, 옆의 선택지 글자는 남은 좁은 폭으로 밀려 우측에서 줄바꿈된다(위험성향 진단 화면에서 실제로 그렇게 보였다). 지금까지는 `label.chk input{width:auto}`처럼 쓰는 곳마다 예외를 달아 왔는데, 그건 전역 규칙이 틀렸다는 신호였다 — 여기서 한 번에 바로잡는다. (2026-08-02) */ input[type=radio],input[type=checkbox]{ width:auto;padding:0;margin:0;accent-color:var(--brand);flex:none; transition:none} input:hover,select:hover,textarea:hover{border-color:#a9b6cd} input[type=radio]:hover,input[type=checkbox]:hover{border-color:transparent} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:var(--ring)} input::placeholder,textarea::placeholder{color:#9aa4b2} textarea{min-height:74px;resize:vertical;line-height:1.6} select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px} .row{display:flex;gap:var(--sp-3);flex-wrap:wrap} .row>div{flex:1;min-width:175px} /* 자동잠금 임박 배너 — 예전엔 JS가 style.cssText로 직접 칠했다. B1-16으로 스크립트를 외부 파일로 옮기면서 모양은 여기로 가져왔다. */ .ka-banner{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:9999; background:#1b2a4a;color:#fff;padding:12px 18px;border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.3);font-size:14px;display:flex;gap:14px;align-items:center} .ka-banner .ka-go{background:#c8a24a;color:#13203a;border:0;border-radius:8px; padding:7px 14px;font-weight:700;cursor:pointer;white-space:nowrap} /* ⏱️ 헤더의 화면 유지 시간(2026-08-12 사용자 지시) — 평소에도 남은 시간이 보이게. 누르면 연장되므로 커서를 손가락으로 둔다. 인쇄에는 나오지 않는다. */ /* 🔴 헤더 배치 (2026-08-24 사용자 지시) — 왼쪽부터: 제목 · 검색 … 유지시간(가운데) … 상담화면 · 공지알림증시(맨 오른쪽) ⚠ 순서를 **order로 못 박는다**. order를 안 준 항목은 0이라, 하나만 order를 주면 그 항목만 뒤로 밀려 "상담화면이 유지시간보다 앞에 오는" 어긋남이 생긴다(실제로 한 번 그렇게 났다). ⚠ `justify-content:space-between`은 auto 마진과 싸운다 → flex-start로 두고 **auto 마진으로만** 민다. ⚠ 유지시간은 평소 hidden이다 — 숨어도 오른쪽 묶음이 제자리를 지키도록 .mb-quick에도 auto를 준다. */ .mainbar{justify-content:flex-start} .mb-left{order:0} .mb-search{order:1} /* 유지시간은 **검색과 오른쪽 묶음 사이 가운데**에 둔다. 🔴 처음에는 `position:absolute; left:50%`로 헤더 정중앙에 뒀는데, 그 자리가 **검색창 위**여서 '52:13'이 입력칸 안에 겹쳐 보였다(실측: 검색 573~873, 헤더중앙 804 — 캡처로 확인). 화면 한가운데가 늘 빈 자리인 것은 아니다 → 흐름 안에서 좌우 auto로 민다. ⚠ 평소 hidden이라 auto가 사라진다 → 오른쪽 묶음(.mb-quick)에도 auto를 둬 제자리를 지킨다. */ /* 🔴 auto 마진을 **컴포넌트 블록 안에서** 준다. 앞에서 `margin-left:auto`를 줘도 뒤에 오는 `.lock-left{margin-left:8px}`가 같은 특이도로 덮어 "가운데"가 실제로는 구현되지 않았다(실측 895 = 검색끝 873 + gap 14 + margin 8 — 검색창에 붙어 있었다). 1400px에선 여유가 46px뿐이라 티가 안 났지만 넓은 화면일수록 왼쪽으로 치우친다. */ /* 🔴 2026-08-24(2차 지시) — 유지 시간과 상담화면 버튼을 **한 묶음**으로 붙였다. auto 마진은 이제 **묶음에만** 있다. 예전에는 둘이 각자 auto를 갖고 다퉈, 유지 시간이 hidden이 되는 순간 상담화면 버튼이 좌우로 점프했다. ⚠ 두 자식의 높이를 align-items:center로 맞춘다 — 칩(6px 패딩)과 버튼(sm)이 높이가 달라 붙여 놓으면 밑선이 어긋나 보인다(붙이라는 지시의 핵심은 '가지런히'다). */ /* 🔴 2026-08-25 — 오른쪽에 오는 것 전부를 **한 묶음**으로 싼다(.mb-right). 예전에는 .mb-tools와 .mb-quick이 형제라, 헤더 폭이 모자라면 wrap이 **둘 사이를 갈랐다**. 한 줄 오른쪽 끝에 유지시간, 다음 줄 왼쪽에 공지·알림 — 사용자가 말한 "정렬 안 맞음"이다. ⚠ auto 마진은 이 묶음에만 준다. 안쪽에 auto가 남아 있으면 묶음 안에서 서로를 밀어낸다. ⚠ 묶음 안은 nowrap이 아니다 — 아주 좁은 화면에서 통째로 못 접히면 헤더가 가로로 넘친다. */ .mb-right{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:flex-end; gap:10px;order:3;margin-left:auto} /* ⚠ 유지시간 칩(패딩 6px)과 상담화면 버튼(sm)은 높이가 다르다 — 붙이라는 지시의 핵심은 '가지런히'이므로 둘의 높이를 32px로 못 박아 밑선을 맞춘다. */ .mb-tools{display:inline-flex;align-items:center;gap:6px} .mb-tools > .lock-left,.mb-tools .mb-present > .btn{min-height:32px} .mb-present{display:inline-flex} .lock-left{display:none;align-items:center;gap:4px;cursor:pointer;user-select:none; /* 2026-08-29 사용자 지시: PC(웹)에서는 유지시간 표시를 없앤다 — 모바일 판정 블록에서만 켠다 */ padding:6px 10px;border-radius:var(--r-sm);border:1px solid var(--line); background:var(--surface-2);color:var(--muted);font-size:12.5px;white-space:nowrap} /* 🔴 `display:inline-flex`가 브라우저 기본 `[hidden]{display:none}`을 이겨, hidden이어도 칩이 계속 보였다(값 없는 '⏱️ –'). JS가 즉시 켜 주는 화면에서는 안 드러나지만 JS가 막히면 남는다. ⚠ 특이도(클래스+속성)로 이기므로 !important 없이 충분하다. */ .lock-left[hidden]{display:none} .lock-left:hover{border-color:var(--brand);color:var(--brand-ink)} .lock-left b{font-variant-numeric:tabular-nums;color:var(--ink)} .lock-left.warm{border-color:var(--warn);color:var(--warn)} .lock-left.warm b{color:var(--warn)} .lock-left.hot{border-color:var(--danger);color:var(--danger)} .lock-left.hot b{color:var(--danger)} @media print{.lock-left{display:none}} /* 3단계 경고(2026-08-12) — 10분 전은 기본, 5분 전 주황, 1분 전 빨강. ⚠ 색만으로 급한 정도를 알리지 않는다 — 남은 시간(분·초)을 항상 글자로 함께 적는다(접근성). */ .ka-banner .ka-why{opacity:.75;font-size:12px;display:block;margin-top:2px} /* (.ka-warm/.ka-hot 5분·1분 단계 색은 2026-08-29 경고 1회 전환으로 삭제) */ /* ⚠ width 분기에는 반드시 `screen and`를 붙인다 — 없으면 인쇄(A4)에도 적용된다(A8 규칙) */ @media screen and (max-width:520px){ .ka-banner{left:12px;right:12px;transform:none;font-size:13px;padding:10px 12px} } /* ── 2026 세제개편안 인포그래픽(세금 탭) ── 2026-08-04 ⚠ 인쇄에서도 읽혀야 한다(리포트에 끼워 내보낼 수 있음) — 배경색은 옅게, 글자는 본문 대비 유지. */ .rf-time{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .rf-step{flex:1 1 150px;min-width:140px;border:1px solid var(--line);border-radius:10px; padding:8px 10px;background:var(--navy-soft)} .rf-step .rf-when{font-size:11.5px;font-weight:800;color:var(--brand-ink);letter-spacing:.02em} .rf-step .rf-what{font-size:12.5px;color:var(--ink);margin-top:2px;line-height:1.45} .rf-card{border:1px solid var(--line);border-left:3px solid var(--brand-ink);border-radius:10px; padding:10px 12px;background:#fff} .rf-card.rf-cut{border-left-color:var(--danger);background:var(--danger-bg)} .rf-card .rf-head{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px} .rf-card .rf-head b{font-size:13.5px;line-height:1.4} table.rf-t{margin:0;font-size:12.5px} table.rf-t th{width:52px;text-align:left;vertical-align:top;color:var(--muted); font-weight:700;padding:3px 6px 3px 0;background:transparent;border:0} table.rf-t td{padding:3px 0;border:0;line-height:1.5} table.rf-t td.rf-new{color:var(--brand-ink);font-weight:600} .rf-card p.rf-what{font-size:12.5px;margin:6px 0 0;line-height:1.55} .rf-card .rf-src{font-size:11px;opacity:.75} /* ---------- 9) Badges / Pills ---------- */ .badge{ display:inline-flex;align-items:center;gap:4px; padding:3px 11px;border-radius:var(--r-pill);font-size:11.5px;font-weight:700; border:1px solid transparent;line-height:1.45;white-space:nowrap; } .badge.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)} .badge.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)} /* A5(2026-08-11): muted(#6b7482) on line-soft는 대비 4.16:1로 AA(4.5) 미달이었다(배지 중 최다 사용). 글자색을 ink-soft(#3d4657)로 내려 대비를 확보한다(11.5px bold라 large-text 완화 적용 불가). */ .badge.gray{background:var(--line-soft);color:var(--ink-soft);border-color:var(--line)} .badge.danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)} .badge.navy{background:var(--navy-soft);color:var(--brand-ink);border-color:#d3ddf0} .badge.gold{background:var(--gold-soft);color:#8a6516;border-color:var(--gold-line)} .badge.team{background:var(--team-bg);color:var(--team);border-color:var(--team-line)} /* 자료실 파일명·설명 — 좁은 화면에서 표 전체가 nowrap이 되므로 긴 값(파일명 80자·설명 200자)이 한 줄로 늘어나 표를 과도하게 넓혔다. 달력 칩(.cal-item)과 같은 말줄임 규칙을 쓴다(전문은 title). */ .lib-name,.lib-note{display:block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 광고물 심의 기록(로드맵 6순위 · 2026-08-26) — 행 안 한 줄 폼.
로 접어 두어 표가 안 넓어진다 */ .lib-review{display:inline-block;vertical-align:middle} .lib-review>summary{list-style:none;cursor:pointer;display:inline-block} .lib-review>summary::-webkit-details-marker{display:none} .lib-review-form{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:flex-end;margin-top:8px;padding:8px 10px; border:1px solid var(--line);border-radius:8px;background:#fafbfd;white-space:normal} .lib-review-form label{display:flex;flex-direction:column;gap:3px;font-size:12px;margin:0} .lib-review-form input,.lib-review-form select{width:auto;min-width:120px;font-size:13px} .lib-adrow label.chk{margin-top:22px} /* 교육자료 하위 폴더(2026-09-04) — 분류 카드 안에 접이식으로 쌓인다. 구분 칩(.chip)과는 다른 요소라 헷갈리지 않게 얇은 위 경계선으로만 구분한다(색 추가 없음 — 토큰만). */ .lib-sub{border-top:1px solid var(--line-soft);padding-top:10px;margin-top:10px} .lib-sub:first-of-type{border-top:none;margin-top:0;padding-top:0} .lib-sub>summary{cursor:pointer;padding:4px 0} /* ---------- 10) Tabs (anchor nav) ---------- */ .tabs{ display:flex;gap:4px;flex-wrap:wrap;margin:2px 0 var(--sp-5); padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill); box-shadow:var(--sh-1); position:sticky;top:64px;z-index:30; } /* 🔴 2026-08-26 사용자 지시 — "긴 화면에서 다시 올라오기 힘들다, 목차 띠가 스크롤을 따라오게". 08-25에는 '자산현황만 따라와 다른 화면과 다르다'를 **빼는 쪽**으로 통일했는데 사용자 의도는 반대였다 — 전 화면이 따라오게 통일한다(.tabs + 화면 목차 띠 .tabnav-stick). top:64px = .mainbar 한 줄 높이. ⚠ 900px 아래에서는 sticky를 끈다(아래 media) — 헤더가 접혀 64px가 안 맞고, 띠가 줄바꿈되면 시야만 가린다. */ .tabs a{ padding:9px 16px;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:700;color:var(--ink-soft); transition:background .15s,color .15s; } .tabs a:hover{background:var(--navy-soft);color:var(--brand-ink);text-decoration:none} .tabs a:target,.tabs a.active{background:var(--brand);color:var(--on-brand)} /* 재무지표 — 화면에서도 리포트처럼 '한 줄 1지표'(.gauge-line 재사용). 줄 안의 산출근거·제안만 클릭해 펼친다. */ @media screen{ /* 화면 폭 상한을 없앤 뒤로 게이지 SVG(width:100%)가 같이 늘어나 지표 한 줄이 과하게 커졌다. 화면에서는 게이지 폭을 묶고 여백·글자를 줄여 9개 지표가 한눈에 들어오게 한다. */ .gauge-line{padding:9px 12px;margin-top:7px;border-radius:8px} .gauge-line .gl-head{gap:7px} .gauge-line .gl-head .l{font-size:13px} .gauge-line .gl-cur{font-size:11.5px} .gauge-line .gl-gauge{margin-top:2px;max-width:520px} .gauge-line .gl-desc{margin-top:5px;padding-top:5px} .gauge-line .ind-desc{margin-top:0;font-size:11px} .gauge-line .ind-form{font-size:10.5px} } /* 줄 안의 펼침 버튼은 박스 없이 작은 링크처럼 — 지표 한 줄의 높이를 아끼기 위함 */ .gl-more{margin-top:3px} .gl-more>summary{ display:inline-block;padding:0;background:none;border:none;border-radius:0; font-size:11.5px;color:var(--muted);font-weight:600; } .gl-more>summary:hover{background:none;color:var(--brand-ink)} .gl-more[open]>summary{margin-bottom:2px} .gl-more table{margin-top:4px;font-size:12px} .gl-more td{padding:5px 9px} /* 지표 기준 직접 수정 칸 */ .th-edit{display:flex;gap:8px;flex-wrap:wrap} .th-edit label{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:5px;white-space:nowrap} .th-edit input{width:78px;padding:5px 7px;font-size:12.5px;text-align:right} /* 자산현황 2단 선택: 대분류 카드 안의 세부분류 칩 */ .subchips{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 4px} .subchips .chip{ padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface); font-size:12.5px;font-weight:700;color:var(--ink-soft);cursor:pointer;line-height:1.3; } .subchips .chip:hover{background:var(--navy-soft);color:var(--brand-ink)} .subchips .chip.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)} .subchips .chip.on .badge{background:rgba(255,255,255,.22);color:var(--on-brand)} /* 대시보드 화면 순서 바꾸기 목록 */ .ord-list{display:flex;flex-direction:column;gap:6px;margin-top:8px} .ord-row{ display:flex;align-items:center;gap:10px;padding:8px 12px; border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:13px; } .ord-no{ flex:none;width:22px;height:22px;border-radius:50%;background:var(--navy-soft); color:var(--brand-ink);font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center; } .ord-name{flex:1;min-width:0;font-weight:700;color:var(--ink-soft); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ord-row .btn[disabled]{opacity:.35;pointer-events:none} /* 자산현황 표 — 세부분류 표끼리 세로줄이 맞도록 열 너비 고정 */ /* 고정폭 열 합계(986px)보다 표가 좁으면 폭 미지정 열(상품명)이 0으로 붕괴한다(2026-09-02 대표 지적 '자산내역 상품명 실종' — 1440px 노트북에서 실제 발생). min-width로 바닥을 깔고 부족분은 .table-scroll 가로 스크롤에 맡긴다(986 + 상품명 170 = 1156 → 1160). */ .tx-table{table-layout:fixed;min-width:1160px} .tx-table td,.tx-table th{overflow:hidden;text-overflow:ellipsis} /* 상품명은 남는 폭을 다 쓰되 최소 폭을 보장한다 — 예전엔 다른 칸이 폭을 다 가져가 '미…CMA'처럼 줄바꿈+잘림이 동시에 났다. */ .tx-table .c-title{min-width:170px} .tx-table .c-title b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tx-table .c-phase{width:72px} .tx-table .c-inst{width:104px} .tx-table .c-owner{width:70px} .tx-table .c-m{width:100px} .tx-table .c-t{width:120px} .tx-table .c-date{width:90px} .tx-table .c-term{width:82px} .tx-table .c-type{width:126px} .tx-table .c-act{width:132px} /* 가입일·만기일 — 날짜가 두 줄로 감기거나 말줄임(2026-11…)되지 않게 폭·글씨 조정 */ .tx-table td.dt{font-size:11.5px;white-space:nowrap;padding-left:6px;padding-right:6px; font-variant-numeric:tabular-nums} /* 인라인 빠른선택 드롭다운(기간·유형) */ .tx-table select.qs{width:100%;padding:4px 6px;font-size:12px} .tx-table td:last-child{overflow:visible;white-space:nowrap} .tx-table td.num{font-variant-numeric:tabular-nums} /* 🔴 2026-09-07 대표 "자산현황에서 폭 아직도 일정하지않아". 부동산 표만 자동 폭(내용에 맞춤)이라, 바로 위 투자형·연금형 표와 세로줄이 하나도 안 맞았다. ⚠ 자동 폭은 '표 하나'만 보면 예뻐 보이지만, 표를 세로로 쌓는 이 화면에서는 어긋남이 눈에 띈다. 고정 폭으로 바꾸고 **고정 열 합계를 금융 표와 똑같이(986px)** 맞춘다 — 그러면 남는 폭을 먹는 이름 열(c-title)의 폭까지 같아져, 두 표의 모든 세로줄이 포개진다. 소재지 256 = 986 - (72+70+120+120+90+126+132). 숫자를 바꾸면 여기도 함께 고쳐야 한다. */ .re-table .c-loc{width:256px} .re-table .c-act{width:132px} /* 부채 표 전용 열(이자율·상환방법·기간) — 다른 표에 없는 성격이라 여기서만 폭을 준다. 부채는 열이 12개라 합계가 커서 넓은 화면에서도 가로 스크롤이 날 수 있다(정상). */ .tx-table .c-rate{width:74px} .tx-table .c-repay{width:96px} .tx-table .c-span{width:110px} .debt-table{min-width:1276px} @media screen and (max-width:900px){ /* 좁은 화면에서는 고정폭을 풀고 가로 스크롤(.table-scroll)에 맡긴다 */ .tx-table{table-layout:auto;min-width:900px} } /* 자산 입력폼 '세부 항목' 접기 — 목록에 안 나오는 칸은 접어 두고 요약만 보여준다(7.27) */ .asset-more{margin-top:6px} .asset-more>summary{font-weight:700} .asset-more>summary .muted{font-weight:400;font-size:12px} .asset-more>summary .badge{margin-left:6px;vertical-align:1px} .tx-sub{margin-top:10px} .tx-sub-h{ display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap; padding:7px 12px;background:var(--surface-2,#f6f8fb);border-radius:8px;font-weight:700;font-size:13px; } /* ---------- 11) Auth (login/setup) ---------- */ .auth-wrap{max-width:410px;margin:min(12vh,96px) auto 0;text-align:center} .auth-wrap h1{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:var(--sp-4)} .auth-wrap .card{padding:34px 30px;box-shadow:var(--sh-3);border-radius:var(--r-xl);text-align:left; border-top:3px solid var(--gold)} .auth-wrap .card p{text-align:center} .auth-wrap label{text-align:left} /* ---------- 12) Feedback / misc ---------- */ .err{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-line); padding:11px 14px;border-radius:var(--r-sm);font-size:var(--fs-sm);margin:10px 0;font-weight:600} details{border-radius:var(--r-sm)} details summary{cursor:pointer;font-weight:700;color:var(--brand-ink);font-size:var(--fs-sm); padding:9px 13px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm); list-style:none;transition:background .15s;user-select:none} details summary:hover{background:var(--navy-soft)} details summary::-webkit-details-marker{display:none} details summary::before{content:"＋ ";color:var(--gold-strong);font-weight:800} details[open] summary::before{content:"－ "} details[open] summary{border-bottom-left-radius:0;border-bottom-right-radius:0} .empty{padding:24px;text-align:center;color:var(--muted);font-size:var(--fs-sm)} /* 체크박스 라벨 (상담 신청내역 등) */ label.chk{display:inline-flex;align-items:center;gap:7px;margin:0;padding:9px 13px; background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm); font-size:var(--fs-sm);color:var(--ink);font-weight:600;cursor:pointer;transition:background .15s,border-color .15s} label.chk:hover{background:var(--navy-soft);border-color:#cdd6e6} label.chk input{width:auto;margin:0;accent-color:var(--brand)} label.chk:has(input:checked){background:var(--gold-soft);border-color:var(--gold-line);color:var(--brand-ink)} .kpi .n .won{font-size:14px;color:var(--muted);font-weight:600} textarea#s,textarea#d{font-family:var(--font);font-size:var(--fs-sm);line-height:1.6} /* ---------- 14) Stat 카드 (대시보드 상단 — 참고 양식의 컬러 스탯카드) ---------- */ .stat{ position:relative;overflow:hidden;border-radius:var(--r-lg);padding:18px 20px; border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh-1); transition:transform .16s,box-shadow .16s; } .stat:hover{transform:translateY(-2px);box-shadow:var(--sh-2)} .stat .s-label{font-size:12.5px;font-weight:700;opacity:.85;display:flex;align-items:center;gap:7px} .stat .s-value{font-size:29px;font-weight:800;letter-spacing:-.025em;line-height:1.15; margin-top:6px;font-variant-numeric:tabular-nums} .stat .s-value .u{font-size:14px;font-weight:600;opacity:.8} h1 .icn,h2 .icn{color:var(--gold-strong)} .stat .s-hint{font-size:11.5px;margin-top:6px;opacity:.75} .stat.navy{background:linear-gradient(135deg,#24385f,#16233f);color:#fff;border-color:#16233f} .stat.navy .s-hint a{color:#e4c87e} .stat.gold{background:linear-gradient(135deg,#e4c87e,#c8a24a);color:#1b2a4a;border-color:#c8a24a} .stat.line{border-left:4px solid var(--gold)} .stat .s-spark{position:absolute;right:12px;bottom:8px;opacity:.9} /* ---------- 14-0) 사이드바 사용자 표시 ---------- */ /* 🔴 2026-08-25 사용자 지시 — "000 재무설계사에는 네모칸 없애". 금색 상자가 로고 바로 밑에 있어 사이드바 머리에 상자가 둘(로고칸+이름칸)이었다. ⚠ 지우는 것은 **상자**뿐이다 — 이름·직함 글자와 자리는 그대로 둔다(누구로 들어와 있는지는 늘 보여야 한다). */ .side-user{margin:0 0 6px;padding:0 0 10px 14px;text-align:left; border-bottom:1px solid rgba(255,255,255,.08)} .side-user .su-name{font-weight:800;color:#fff;font-size:14px} .side-user .su-role{font-size:11px;color:#c8a24a;font-weight:700;margin-top:1px} /* ---------- 14-0-1) 대시보드 히어로 (시작화면 양식) ---------- */ .hero{ background:linear-gradient(140deg,#1e3055 0%,#15233f 55%,#101b31 100%); border-radius:var(--r-xl);padding:34px clamp(20px,4vw,44px);margin-bottom:var(--sp-5); color:#fff;text-align:center;box-shadow:var(--sh-2); border:1px solid rgba(200,162,74,.3);position:relative;overflow:hidden; } .hero::after{content:"";position:absolute;right:-70px;top:-70px;width:230px;height:230px; border-radius:50%;background:radial-gradient(circle,rgba(200,162,74,.2),transparent 70%)} .hero .h-title{font-size:clamp(20px,2.6vw,27px);font-weight:700;letter-spacing:.02em;margin:0;color:#dcbb66} .hero .h-sub{color:#93a0bb;font-size:13.5px;margin-top:6px} .hero .h-search{max-width:560px;margin:18px auto 0} .hero .h-search input{ padding:14px 22px;border-radius:16px;border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08);color:#fff;font-size:15px;backdrop-filter:blur(4px); } .hero .h-search input::placeholder{color:#8d99b5} .hero .h-search input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,162,74,.3)} .hero .h-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px;position:relative} .hero .h-chip{ padding:8px 16px;border-radius:var(--r-pill);font-size:13px;font-weight:700; background:rgba(255,255,255,.09);color:#d7deec;border:1px solid rgba(255,255,255,.14); transition:background .15s,color .15s; } .hero .h-chip:hover{background:rgba(200,162,74,.28);color:#fff;text-decoration:none;border-color:rgba(200,162,74,.5)} /* ---------- 14-0-2) 로그인/설정 풀스크린 히어로 ---------- */ .hero-screen{ min-height:100vh;display:grid;place-items:center;padding:30px 16px; background:linear-gradient(150deg,#1e3055 0%,#15233f 45%,#0d1729 100%); margin:calc(-1 * clamp(20px,3vw,32px)) calc(-1 * clamp(15px,3vw,22px)); } .hero-inner{text-align:center;max-width:560px;width:100%} .hero-mark{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:18px; background:linear-gradient(135deg,#dcbb66,#c8a24a);font-size:32px;margin-bottom:18px; box-shadow:0 6px 24px rgba(200,162,74,.4)} .hero-mark svg{width:30px;height:30px;color:#13203a} .hero-title{color:#fff;font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:.01em;line-height:1.45;margin:0} .hero-sub{color:#93a0bb;font-size:14px;margin-top:10px} .hero-warn{color:#e8b4ac} /* 네이비 히어로 위 경고 글자(setup) — 인라인 hex를 여기로(2026-08-29 (b)) · 테마 제외 화면 */ .hero-box{ max-width:420px;margin:22px auto 0;padding:22px;border-radius:18px; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px); } .hero-box input{ margin-bottom:8px;padding:12px 16px;border-radius:12px;font-size:15px; background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#fff; } .hero-box input::placeholder{color:#8d99b5} .hero-box input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,162,74,.3)} /* 로그인 — 상단 로고 바 + 하단 2단(구분선 없음) */ .login-split{ display:grid;grid-template-rows:auto 1fr;place-items:stretch; padding:34px clamp(24px,6vw,88px) 44px; } .ls-top{display:flex;align-items:center} .ls-body{ display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center; gap:clamp(28px,6vw,80px); } .login-split .ls-left{display:flex;flex-direction:column;justify-content:center;gap:18px; align-items:flex-start;max-width:620px} .ls-logo{width:clamp(190px,17vw,250px);height:auto;display:block} .ls-title{color:#fff;font-size:clamp(21px,2.4vw,30px);font-weight:700;line-height:1.5; letter-spacing:-.01em;margin:0;text-wrap:balance} .ls-sub{color:#9aa6c1;font-size:clamp(13.5px,1.1vw,15px);line-height:1.75;margin:0} .ls-kw{color:var(--gold);font-size:12px;font-weight:600;letter-spacing:.14em;margin:2px 0 0} .login-split .ls-right{display:flex;flex-direction:column;justify-content:center;align-items:center} .ls-panel{width:100%;max-width:340px} .ls-eyebrow{color:#8593b1;font-size:11.5px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;margin:0 0 18px} .ls-form{display:flex;flex-direction:column;gap:9px} /* :not([type=checkbox]) — '아이디 저장' 체크박스가 아이디 칸처럼 커다란 검은 상자가 되지 않게(2026-09-07) */ .ls-form input:not([type=checkbox]){ padding:12px 15px;border-radius:11px;font-size:14.5px; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:#fff; } .ls-form input::placeholder{color:#8d99b5} .ls-form input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,162,74,.28)} /* 🔴 2026-09-07 대표 "아이디 저장 체크 만들어주고 아이디 매번 칠 필요 없게". ⚠ 저장하는 것은 **아이디뿐**이다 — 비밀번호는 저장하지 않는다(문구로도 밝힌다). */ .ls-save{display:flex;align-items:center;gap:8px;margin:2px 0 0;font-size:12.5px;color:#8593b1;cursor:pointer;user-select:none} .ls-save input{width:15px;height:15px;accent-color:var(--gold);cursor:pointer;flex:none} .ls-submit{width:100%;margin-top:5px;padding:12px} .ls-msg{margin:0 0 12px;border-radius:10px;padding:10px 14px;font-size:13px} .ls-ok{background:#153a2a;border:1px solid #2e7d5b;color:#a7e3c5} .ls-join{margin:16px 0 0;font-size:12.5px;color:#8593b1;line-height:1.7} .ls-join a{color:var(--gold);font-weight:700} .ls-join span{display:block;opacity:.75;font-size:12px;margin-top:2px} .ls-foot{margin:26px 0 0;font-size:11.5px;color:#66718d;letter-spacing:.02em} @media screen and (max-width:900px){ .login-split{padding:30px 24px 40px;align-content:center} .ls-body{grid-template-columns:minmax(0,1fr);gap:28px} .login-split .ls-left{max-width:none} .login-split .ls-right{align-items:stretch} .ls-title{font-size:21px} .ls-logo{width:180px} .ls-panel{max-width:none} } /* ---------- 14-0-3) 대시보드 — 선 없이 여백으로 구분 + 좌본문/우요약 2단 ---------- */ /* 7차(2026-08-25) — 첫 화면이 **스크롤 없이** 들어오게 세로 밀도를 줄인다: 간격 18→12 · 인사말·지표·카드 패딩 축소 */ .dash{display:flex;flex-direction:column;gap:12px} /* 4차 지시(2026-08-25): 인사말을 가운데로 */ .dash-head{display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center} .dh-title{font-size:clamp(18px,1.6vw,22px);font-weight:800;letter-spacing:-.015em;margin:0;color:var(--brand-ink)} .dh-sub{margin:0;color:var(--muted);font-size:13.5px} .dh-search{width:min(600px,100%);max-width:600px;margin-top:4px} /* 7차 지시: 인사말보다 조금 길게(420→600) */ .dh-search input{padding:11px 16px;border-radius:var(--r-pill);background:var(--surface); border:1px solid var(--line);font-size:14px} /* 4차(2026-08-25) 사용자 지시 — "고객이 1명이면 고객 인적사항 칸이 할 일 칸과 안 맞는다 · 공란으로 비워 정렬". 두 열을 stretch하고 각 열의 **마지막 카드**가 남는 높이를 먹는다 → 왼쪽·오른쪽 열의 밑선이 늘 맞는다 (고객이 몇 명이든 · 카드 안은 빈 공간으로 남는다). */ .dash-cols{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,.94fr);gap:12px;align-items:stretch} .dash-main>.card:last-child,.dash-side>.card:last-child{flex:1 1 auto} /* 사이드바 고객 이름 = 링크(2026-08-25) — 묶음 제목 모양은 그대로, 현재 화면이면 강조 */ .side-cname{display:inline-flex;align-items:center;gap:8px;color:inherit} .side-cname:hover{color:#fff;text-decoration:none} .side-cname.active{color:var(--gold)} /* 5차 지시(2026-08-25): 열 안 카드 간격(위아래)을 열 사이 간격(좌우 18px)과 **같게** — "간격 맞춰줘" */ .dash-main,.dash-side{display:flex;flex-direction:column;gap:12px;min-width:0} @media screen and (max-width:1100px){.dash-cols{grid-template-columns:minmax(0,1fr)}} /* 선 제거: 대시보드 카드는 테두리 없이 흰 면 + 옅은 그림자만 */ /* 일정 알림 띠 — 지정한 알림 시점부터 당일까지, 항목별로 끌 수 있음 */ .notice-bar{background:var(--surface);border-left:3px solid var(--gold);border-radius:var(--r-lg); padding:14px 18px;box-shadow:0 1px 3px rgba(20,32,60,.05);display:flex;flex-direction:column;gap:2px} .nb-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap; padding-bottom:8px} .nb-title{font-weight:800;color:var(--brand-ink);font-size:14.5px;display:flex;align-items:center;gap:7px} .nb-title svg{width:17px;height:17px;color:var(--gold-strong)} .nb-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:7px 0;font-size:13.5px} .nb-row + .nb-row{border-top:1px solid var(--line-soft)} .nb-when{font-weight:800;font-size:12px;color:var(--muted);min-width:34px} .nb-when.today{color:var(--danger)} .nb-date{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums} .nb-text{flex:1;min-width:150px;color:var(--ink)} .nb-off{margin-left:auto} .nb-off label{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted); cursor:pointer;margin:0;font-weight:600} .nb-off input{width:auto;margin:0} @media screen and (max-width:640px){.nb-off{margin-left:0}} .dash .grid.fit{grid-template-columns:repeat(4,minmax(0,1fr))} @media screen and (max-width:1500px){.dash .grid.fit{grid-template-columns:repeat(2,minmax(0,1fr))}} @media screen and (max-width:560px){.dash .grid.fit{grid-template-columns:minmax(0,1fr)}} .dash .card{border:0;box-shadow:0 1px 3px rgba(20,32,60,.05);margin-bottom:0;padding:14px 18px} .dash .card.warnline{border-left:3px solid var(--gold)} .dash .stat{border:0} .dash .side-row{font-size:12.5px;padding:5px 0;color:var(--ink-soft);line-height:1.5} .dash .side-row + .side-row{border-top:1px solid var(--line-soft)} .dash .side-row b{color:var(--brand-ink)} .dash .side-row svg{vertical-align:-2px;width:14px;height:14px;color:var(--muted)} .dash .dash-side .card{padding:16px 18px} .dash .dash-side label{font-size:12px;margin-top:8px} .dash .dash-side input,.dash .dash-side select{padding:8px 11px;font-size:13px} .dash summary{font-size:12.5px;color:var(--muted);cursor:pointer;font-weight:600} .dash .mkt-grid.mini{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px} .dash .mkt-card{padding:10px 12px} .hero-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:20px} .hero-chip{padding:7px 14px;border-radius:var(--r-pill);font-size:12px;font-weight:600; background:rgba(255,255,255,.07);color:#a9b4cc;border:1px solid rgba(255,255,255,.12)} /* ---------- 14-0-3) 월간 캘린더 (회사 스케줄표 양식) ---------- */ table.cal{table-layout:fixed;min-width:760px} table.cal th{text-align:center;background:var(--brand);color:var(--on-brand);font-size:12.5px;padding:8px} table.cal th.sun{color:#ffb3ab} table.cal th.sat{color:#a8c4ff} table.cal td{vertical-align:top;height:86px;padding:6px 7px;border:1px solid var(--line-soft);font-size:12px} table.cal td.out{background:var(--surface-2);opacity:.45} table.cal td.today{background:var(--gold-soft);box-shadow:inset 0 0 0 2px var(--gold)} .cal-day{font-weight:800;color:var(--brand-ink);font-size:12.5px;margin-bottom:4px} .cal-day.sun{color:#c0392b} /* B7-10: 4.38:1(AA 미달) → 5.44:1 */ .cal-day.sat{color:#3b6fd4} .cal-item{margin-top:3px;padding:3px 7px;border-radius:7px;font-size:11.5px;font-weight:600;line-height:1.4; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cal-item.meet{background:var(--gold-soft);color:#8a6516;border:1px solid var(--gold-line)} .cal-item.meet a{color:#8a6516} .cal-item.co{background:var(--navy-soft);color:var(--brand-ink);border:1px solid #d3ddf0} .cal-item.priv{background:var(--ok-bg);color:#0b5c30;border:1px solid var(--ok-line)} .cal-x{border:none;background:none;color:var(--danger);cursor:pointer;font-weight:800;padding:0 2px;font-size:12px} /* 2개월 나란히(작은 캘린더) — 좁은 화면에선 세로 스택 */ .cal-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:10px} .cal-duo table.cal{min-width:0;width:100%} .cal-duo table.cal th{font-size:11px;padding:5px} .cal-duo table.cal td{height:56px;padding:3px 4px;font-size:10.5px} .cal-duo .cal-day{font-size:11px;margin-bottom:2px} .cal-duo .cal-item{font-size:10px;padding:2px 5px;margin-top:2px} .cal-duo .cal-title{font-weight:800;color:var(--brand-ink);font-size:13.5px;margin:2px 0 6px;text-align:center} @media screen and (max-width: 860px){.cal-duo{grid-template-columns:minmax(0,1fr)}} /* ---------- 14-0-3b) 고객 상세 탭 내비게이션 ---------- */ .tabnav{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 14px; padding:8px 10px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:12px} .tabnav-sep{width:1px;height:20px;background:var(--line-soft);margin:0 4px} @media screen and (max-width: 700px){.tabnav-sep{display:none}} /* 탭 그룹 — 상담 단계별로 묶어 라벨을 붙인다(자산현황·파악 / 진단·설계 / 산출물·기록) */ /* 2026-08-18 메뉴 다이어트 — 하위 앵커를 뺀 '화면 링크 한 줄'. 기존 .side-sub summary와 **같은 모양**을 쓴다(새 모양을 만들면 두 종류가 섞여 보인다). */ /* 2026-08-18 사이드바 정렬 — 모든 행을 [아이콘 18px][글자][배지(우측)] 한 그리드로. 🔴 예전에는 이모지가 글자에 섞여 있어 **글리프 폭이 제각각**이라 항목마다 텍스트 시작선이 달랐고(캡처로 확인), 같은 레벨인데 좌 패딩이 11/16/22px 세 종류로 갈렸다. 아이콘 슬롯을 고정폭으로 두면 텍스트 시작선이 전 항목 동일해진다. */ .side-sub-flat{display:flex;align-items:center;gap:8px; padding:6px 10px 6px 22px;border-radius:var(--r-xs); color:var(--side-item);font-size:13px;line-height:1.35;text-decoration:none} .side-sub-flat .ico{width:18px;flex:none;display:inline-grid;place-items:center} .side-sub-flat .ico svg{width:15px;height:15px;display:block;opacity:.85} .side-sub-flat .sl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .side-sub-flat:hover{background:rgba(255,255,255,.06);color:var(--side-hover)} /* 활성은 **색만으로 알리지 않는다**(색약 사용자) — 좌측 금색 막대 + 배경 + 굵기 세 단서 */ .side-sub-flat.active{color:var(--side-active);font-weight:700; background:rgba(200,162,74,.14);box-shadow:inset 3px 0 0 var(--gold)} /* '미입력' 배지는 오른쪽 끝으로 — 배지 열이 세로로 맞아 한눈에 스캔된다 */ .side-sub-flat .side-empty{margin-left:auto} /* 리포트 항목(펼침형)도 같은 시작선으로 — 16px였다 */ .side-sub>summary{padding-left:22px} .side-sub>summary .ico{width:18px;display:inline-grid;place-items:center;vertical-align:-3px} .side-sub>summary .ico svg{width:15px;height:15px;opacity:.85} /* 위계: 단계 제목을 묶음 라벨보다 한 단계 밝게(둘이 똑같아 병렬로 보였다) */ .side-stage>summary{color:var(--side-hover-2)} .tabnav-group{margin-bottom:2px} .tabnav-group .tabnav{margin:2px 0 8px} .tabnav-label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em; color:var(--muted);padding-left:2px} /* 화면 목차 띠(base.html 자동 목차)가 스크롤을 따라온다 — 2026-08-26 사용자 지시(.tabs와 같은 규칙). sticky는 **그룹**에 건다 — 띠(.tabnav)에 걸면 담는 상자(그룹)가 낮아 몇 px 만에 멈춘다. 그룹에 페이지 배경을 깔아, 지나가는 내용이 라벨·둥근 모서리 뒤로 비치지 않게 한다. ⚠ 자산현황·상세에는 목차 띠 자체를 그리지 않는다(base.html) — 그 화면은 .tabs가 담당한다. */ .tabnav-stick{position:sticky;top:64px;z-index:30;background:var(--bg); padding-top:4px;margin-top:-4px;box-shadow:0 6px 8px -6px rgba(20,32,60,.10)} /* 항목 많은 화면(기초자료 9개·제안서 11개)에서 띠가 2~3줄로 접히면 스크롤 내내 화면을 가린다(UX 감수) → 따라오는 띠는 **한 줄 + 가로 스크롤**로 고정한다. */ .tabnav-stick .tabnav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch} .tabnav-stick .tabnav a{white-space:nowrap;flex:none} /* ⚠ 해제 분기점은 **'모바일 판정'과 같아야 한다** — .mainbar가 static이 되는 분기와 하나로 묶는다. 🔴 2026-08-27: 예전엔 960px이었는데, 모바일 판정만 820px로 좁히자 **821~960px(확대해 쓰는 PC)** 에서 헤더는 sticky인데 띠만 static이 되는 어긋난 구간이 생겼다(디자인QA 적발). 폭 하나로 갈랐던 규칙은 **전부** 같은 조건으로 옮긴다 — 그것이 이번 사고의 교훈이다. */ @media screen and (max-width:820px), screen and (pointer:coarse) and (max-width:1100px){ .tabs,.tabnav-stick{position:static;box-shadow:none} .tabnav-stick .tabnav{flex-wrap:wrap;overflow-x:visible} } /* 모바일 '맨 위로' — 모바일에서는 띠 sticky를 끄므로 원래 불편("다시 올라오기 힘들다")이 그대로 남는다 → 우하단 고정 버튼으로 답한다(UX 감수 1-6). CSS-only(#main 앵커)·넓은 화면에선 숨김. */ .totop{display:none} @media screen and (max-width:820px), screen and (pointer:coarse) and (max-width:1100px){ .totop{display:inline-flex;align-items:center;gap:4px;position:fixed;right:14px;bottom:14px;z-index:35; padding:9px 14px;border-radius:var(--r-pill);background:var(--m-acc);color:var(--m-acc-ink); font-size:var(--fs-cap);font-weight:700;box-shadow:var(--sh-2);text-decoration:none} .totop:hover{color:var(--m-acc-ink);text-decoration:none;opacity:.92} } @media print{.totop{display:none}} /* 📱 푸시 알림 상태 줄(계정 화면) — 성공/사유를 색으로도 가른다(글로만 두면 스캔이 안 된다) */ .push-ok{color:var(--ok)} .push-warn{color:var(--warn-ink,#8a5a00)} /* ═══ 📱 모바일 개선(2026-08-26 · 60fps 패턴 B·C·D 채택) ═══════════════════════ 전부 **960px 이하에서만** 동작한다 — PC 화면·인쇄물은 하나도 바뀌지 않는다. ① 하단 탭바(Tab) ② 누름 반응(Shrink) ③ 목록 순차 등장(Sequence) ④ 더보기 시트(Bottom Sheet · CSS만) ⑤ 접히는 머리는 base.js가 클래스만 토글한다. ⚠ 움직임은 prefers-reduced-motion에서 전부 꺼진다(맨 아래 규칙). */ .mtabbar{display:none} .msheet-host{display:none} @media screen and (max-width:960px){ /* ⚠ 여기서는 **모양만** 정한다 — 보일지 말지는 아래 '모바일 판정' 블록 하나가 결정한다 (폭 하나로 숨겼다가 데스크톱 확대 사용자가 메뉴를 잃은 사고가 있었다 · 2026-08-26 저녁). ⚠ grid(repeat(5,1fr))로는