/* ===========================================================
G Reward 디자인 시스템
레퍼런스: 한국 금융앱 (흰 배경 · 큰 숫자 · 테두리 대신 여백)
⚠️ 이 파일 밖에서 px 값을 직접 쓰지 마라.
크기·간격·라운드는 아래 스케일 토큰에서만 가져온다.
규칙은 docs/DESIGN.md 에 정리되어 있다.
=========================================================== */
:root{
/* ---- 색: 먹 ---- */
--ink:#14181f; /* 본문·숫자 */
--ink-2:#5a6472; /* 보조 텍스트 */
--ink-3:#98a1ae; /* 라벨·캡션 */
/* ---- 색: 바탕 ---- */
--bg:#fff; /* 기본 */
--bg-2:#f3f5f8; /* 블록 바탕 */
--bg-3:#e8ecf2; /* 눌린 면·트랙 */
--line:#eaeef3; /* 구분선 */
/* ---- 색: 액센트 ---- */
--brand:#1d4ed8;
--brand-ink:#1741b6;
--brand-bg:#edf2ff;
/* ---- 색: 의미 ---- */
--up:#e0342a; /* 상승·플러스 (한국식) */
--warn:#b45309; --warn-bg:#fdf4e7;
--bad:#c0392f; --bad-bg:#fdefed;
--ok:#0f7a4f; --ok-bg:#e9f6ef;
/* ---- 색: 어두운 면 ---- */
--dark:#141a24;
--on-dark:#c9d2df;
--on-dark-2:#8793a4;
/* ==== 타입 스케일 — 반쪽 사이즈(13.5 같은 것) 금지 ==== */
--fs-2xs:11px; /* 태그·다리표시 */
--fs-xs:12px; /* 라벨·캡션 */
--fs-sm:13px; /* 보조 설명·표 본문 */
--fs-md:14px; /* 버튼·폼 라벨 */
--fs-base:15px; /* 본문 */
--fs-lg:17px; /* 섹션 제목 */
--fs-xl:20px; /* 강조 숫자 */
--fs-2xl:24px; /* 페이지 제목 */
--fs-3xl:30px; /* 로그인 제목 */
--fs-display:clamp(36px,9vw,46px); /* 히어로 금액 */
/* 글자 굵기 — 400/500/600/700/800 만 */
--fw-normal:400; --fw-medium:500; --fw-semi:600; --fw-bold:700; --fw-black:800;
/* 자간 — 클수록 타이트하게 */
--ls-display:-.045em;
--ls-title:-.035em;
--ls-num:-.03em;
--ls-base:-.01em;
/* 행간 */
--lh-tight:1.2; /* 큰 숫자·제목 */
--lh-snug:1.45; /* 중간 */
--lh-base:1.6; /* 본문 */
/* ==== 간격 — 4px 그리드 ==== */
--s0:2px; /* hairline gap 예외 */
--s1:4px;
--s2:8px;
--s3:12px;
--s4:16px;
--s5:20px;
--s6:24px;
--s8:32px;
--s10:40px;
--s12:48px;
/* ==== 라운드 ==== */
--r-sm:8px; /* 버튼·입력·작은 블록 */
--r-md:12px; /* 트리 노드·중간 블록 */
--r-lg:18px; /* 큰 블록·카드 */
--r-full:999px; /* 칩·바 */
/* ==== 그림자 — 2단계만 ==== */
--sh-1:0 1px 2px rgba(20,24,31,.07);
--sh-2:0 -1px 0 var(--line),0 -6px 20px rgba(20,24,31,.05);
/* ==== 모션 — 지속시간 4개 · 이징 3개 ====
⚠️ 여기 없는 값을 화면 코드에서 만들지 마라. 화면마다 속도가 달라지면
같은 시스템으로 안 보인다. 색 토큰과 같은 취급이다. */
--t-fast:140ms; /* 눌림·호버·색 변화 */
--t-base:260ms; /* 표시자 이동·펼침·접힘 */
--t-slow:520ms; /* 형태 변형(morph)·카드 전환 */
--t-story:1600ms; /* 진행률처럼 '기다림을 보여주는' 구간 */
--e-out:cubic-bezier(.22,1,.36,1); /* 기본 — 빠르게 나가 천천히 멈춘다 */
--e-spring:cubic-bezier(.34,1.56,.64,1); /* 등장 — 살짝 넘어갔다 돌아온다 */
--e-inout:cubic-bezier(.65,0,.35,1); /* 왕복 */
/* ==== 레이아웃 상수 ==== */
--side-w:216px;
--main-max:1080px;
/* ⚠️ 실제 하단바 높이와 같아야 한다. 이 값으로 본문 아래 여백과 상담
단추 높이를 잡기 때문에, 2px 만 어긋나도 단추가 하단바에 걸린다.
구성: 위아래 padding(--s2 ×2 = 16) + 단추(--s3 ×2 + 아이콘 24 = 48). */
--tabbar-h:64px;
/* 카카오 상담 단추 높이 — 위아래 안쪽 여백(--s3) + 아이콘 20px.
본문이 이 단추에 깔리지 않도록 main 아래 여백을 잴 때 쓴다. */
--support-h:44px;
--font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
--mono:ui-monospace,SFMono-Regular,Menlo,monospace;
/* ==== 면 위에 얹히는 것들 (다크에서 방향이 뒤집힌다) ==== */
--field:var(--bg); /* --bg-2 면 위의 입력란 */
--seg-on:var(--bg); /* 세그먼트 활성 */
--node:var(--bg); /* 조직도 노드 */
/* 조직도 연결선. ⚠️ `--bg-3` 을 쓰지 마라 — 조직도 바탕이 `--bg-2` 라
둘의 대비가 거의 없어서 선이 있어도 안 보인다. 실제로 그랬다. */
--tree-line:#9aa6b4;
}
/* ===========================================================
테마 — 라이트가 기본. html[data-theme] 로 강제하고,
'system' 일 때만 OS 설정을 따른다. (app.js 의 테마 토글이 세팅)
=========================================================== */
:root[data-theme="dark"] {
--ink:#e8ecf2; --ink-2:#a2acba; --ink-3:#6f7987;
--bg:#12151a; --bg-2:#1a1f27; --bg-3:#242b35; --line:#222932;
--brand:#6690ff; --brand-ink:#88a8ff; --brand-bg:#1a2340;
--up:#ff6b5e;
--warn:#e0a45c; --warn-bg:#2c2214;
--bad:#ef8278; --bad-bg:#2e1a18;
--ok:#4bbd88; --ok-bg:#132a1f;
--dark:#0d1015; --on-dark:#c9d2df; --on-dark-2:#7d8797;
--sh-1:none;
--sh-2:0 -1px 0 var(--line);
/* 면 위에 얹히는 것들 — 라이트에서는 더 밝게, 다크에서는 더 밝게 (방향이 반대다) */
--field:var(--bg-3); --seg-on:var(--bg-3); --node:var(--bg-3);
--tree-line:#46515f;
}
@media (prefers-color-scheme:dark) {
:root[data-theme="system"] {
--ink:#e8ecf2; --ink-2:#a2acba; --ink-3:#6f7987;
--bg:#12151a; --bg-2:#1a1f27; --bg-3:#242b35; --line:#222932;
--brand:#6690ff; --brand-ink:#88a8ff; --brand-bg:#1a2340;
--up:#ff6b5e;
--warn:#e0a45c; --warn-bg:#2c2214;
--bad:#ef8278; --bad-bg:#2e1a18;
--ok:#4bbd88; --ok-bg:#132a1f;
--dark:#0d1015; --on-dark:#c9d2df; --on-dark-2:#7d8797;
--sh-1:none;
--sh-2:0 -1px 0 var(--line);
/* 면 위에 얹히는 것들 — 라이트에서는 더 밝게, 다크에서는 더 밝게 (방향이 반대다) */
--field:var(--bg-3); --seg-on:var(--bg-3); --node:var(--bg-3);
--tree-line:#46515f;
}
}
/* ===========================================================
기본
=========================================================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
font-size:var(--fs-base);line-height:var(--lh-base);letter-spacing:var(--ls-base);
-webkit-font-smoothing:antialiased;
}
/* 숫자는 전부 폭 고정 */
.n,.big,.v,td.n,th.n{font-variant-numeric:tabular-nums}
.shell{display:flex;min-height:100%}
.hide{display:none !important}
/* ===========================================================
타이포 — 이 5개가 전부다
h1 페이지 제목 / h2 섹션 제목 / lede 페이지 설명 / note 보조 / 본문
=========================================================== */
h1{font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-title);
line-height:var(--lh-tight);margin:0 0 var(--s1)}
h2{font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:var(--ls-num);
line-height:var(--lh-snug);margin:0 0 var(--s3)}
h3{font-size:var(--fs-md);font-weight:var(--fw-semi);letter-spacing:var(--ls-base);
margin:0 0 var(--s2)}
p.lede{font-size:var(--fs-md);color:var(--ink-2);margin:0 0 var(--s6);max-width:66ch}
p.note{font-size:var(--fs-sm);color:var(--ink-3);margin:0 0 var(--s3);max-width:70ch;
line-height:var(--lh-snug)}
p.note:last-child{margin-bottom:0}
/* 섹션 = 제목 + 내용 한 덩어리. 섹션 사이는 항상 --s8 */
.sec{margin-bottom:var(--s8)}
.sechd{display:flex;justify-content:space-between;align-items:baseline;
margin-bottom:var(--s3);gap:var(--s3)}
.sechd h2{margin:0}
/* 카드 머리 = 제목 + 오른쪽에 그 카드의 행동 하나. 제목과 단추를 같은 줄에 둔다 */
.cardhd{display:flex;justify-content:space-between;align-items:center;
gap:var(--s3);flex-wrap:wrap}
.cardhd h3{margin:0}
.sechd span{font-size:var(--fs-xs);color:var(--ink-3)}
main > section > h2{margin-top:var(--s8)}
main > section > h2:first-child{margin-top:0}
.row{display:flex;gap:var(--s2);align-items:center;margin:var(--s3) 0;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--s2)}
/* ===========================================================
사이드 (PC)
=========================================================== */
.side{width:var(--side-w);flex:none;background:var(--dark);color:var(--on-dark);
display:flex;flex-direction:column;padding:var(--s6) 0 var(--s5)}
.brand{display:flex;gap:var(--s2);align-items:center;padding:0 var(--s5) var(--s6)}
/*
* 브랜드 심볼 — `web/shared/brand-symbol.svg` 와 **같은 그림**이다.
* ⚠️ 글자 "G" 로 되돌리지 마라. 글꼴이 없는 기기에서 모양이 달라지고,
* 심볼과 파비콘과 로고가 각각 다른 G 가 된다.
* ⚠️ 색은 그라데이션이 제 안에 들고 있다. `fill` 을 밖에서 덮어쓰지 마라 —
* 덮어쓰면 평평한 한 색이 되어 입체감이 사라진다.
*/
.brand .mark{width:28px;height:28px;flex:none;display:block}
/*
* 로그인 화면의 전체 로고 — 심볼 + 가운뎃점 + 워드마크 + imgp®.
* ⚠️ 글자는 `currentColor` 다. 색을 박지 마라 — 라이트·다크에서 각각
* 읽히려면 글자색을 따라가야 한다. 심볼의 그라데이션과 imgp 의 앰버는
* 제 안에 들고 있다.
*/
/* ⚠️ `color` 를 박지 마라. 로그인 카드는 밝고 사이드바는 어둡다 —
글자를 흰색으로 고정하면 카드 위에서 통째로 사라진다(실제로 그랬다). */
.loginlogo{display:block;height:38px;width:auto;margin:0 auto var(--s5)}
.brand strong{display:block;font-size:var(--fs-lg);font-weight:var(--fw-bold);color:#fff;
letter-spacing:var(--ls-num);line-height:var(--lh-tight)}
.brand em{font-style:normal;font-size:var(--fs-2xs);color:var(--on-dark-2)}
.top{display:flex;align-items:center;gap:var(--s2);padding:0 var(--s5) var(--s5)}
.who{font-size:var(--fs-xs);color:var(--on-dark-2);line-height:var(--lh-snug);
min-width:0;flex:1;overflow:hidden}
.who b,.who span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who b{color:#fff;font-size:var(--fs-md);font-weight:var(--fw-semi)}
.logout{background:none;border:1px solid rgba(255,255,255,.16);color:var(--on-dark-2);
font-size:var(--fs-2xs);padding:var(--s1) var(--s2);border-radius:var(--r-sm);
cursor:pointer;font-family:var(--font);white-space:nowrap;flex:none}
.logout:hover{color:#fff;border-color:rgba(255,255,255,.35)}
.side nav{display:flex;flex-direction:column;gap:var(--s0);padding:0 var(--s3)}
.side nav button{background:none;border:0;color:var(--on-dark-2);font-family:var(--font);
font-size:var(--fs-md);font-weight:var(--fw-medium);text-align:left;
padding:var(--s2) var(--s3);border-radius:var(--r-sm);cursor:pointer;
letter-spacing:var(--ls-base)}
.side nav button:hover{color:#fff;background:rgba(255,255,255,.05)}
.side nav button.on{color:#fff;background:var(--brand);font-weight:var(--fw-semi)}
/* 활성 배경이 점프하지 않고 미끄러진다. 배경색이 아니라 뒤에 깔린 알약이 움직인다.
위치는 transform 으로만 옮긴다 — top 을 애니메이션하면 매 프레임 레이아웃이 다시 계산된다. */
.side nav{position:relative}
.side nav .navind{position:absolute;left:0;right:0;top:0;height:0;z-index:0;
background:var(--brand);border-radius:var(--r-sm);opacity:0;
transition:transform var(--t-base) var(--e-out),height var(--t-base) var(--e-out),
opacity var(--t-base) var(--e-out)}
.side nav button{position:relative;z-index:1;
transition:color var(--t-base) var(--e-out)}
/* 알약이 생기면 버튼 자신의 배경은 지운다 — 두 겹으로 보이면 안 된다 */
.side nav.hasind button.on{background:transparent}
.sidefoot{margin-top:auto;padding:var(--s5) var(--s5) 0;font-size:var(--fs-2xs);
color:var(--on-dark-2);line-height:1.7;border-top:1px solid rgba(255,255,255,.07)}
/*
* 표와 조직도가 주인인 화면은 폭 상한을 푼다(`data-wide`).
*
* `--main-max` 는 **긴 글이 한 줄에 너무 길어지지 않게** 두는 값인데,
* 조직도·회원목록·출금목록처럼 넓을수록 잘 읽히는 화면에서는 오른쪽이
* 통째로 흰 여백으로 남는다. 조직도는 가로로 잘려 끌어야 하는데 옆에
* 빈 자리가 남아 있었다.
*
* ⚠️ 글까지 같이 늘어나지는 않는다 — `p.lede`(66ch)·`p.note`(70ch)가 제
* 폭을 들고 있다. 새 설명 문단을 만들 때 그 둘을 쓰지 않으면 와이드
* 화면에서 한 줄이 150자가 된다.
* ⚠️ `:has()` 를 모르는 옛 브라우저는 그냥 지금처럼 1080px 로 남는다.
* 기능이 아니라 여백 이야기라 그래도 된다.
*/
main:has(> section.on[data-wide]){max-width:none}
main{flex:1;min-width:0;max-width:var(--main-max);
/* 아래 여백은 눈금이 아니라 부품 높이에서 나온다 — 오른쪽 아래에 떠 있는
카카오 상담 단추(--s5 만큼 띄움 + --support-h)를 본문이 피해야 한다. */
padding:var(--s8) var(--s8) calc(var(--s5) + var(--support-h) + var(--s3))}
section{display:none}
section.on{display:block}
/* ===========================================================
폼
=========================================================== */
input,select{
font-family:var(--font);font-size:var(--fs-base);color:var(--ink);background:var(--bg-2);
border:0;border-radius:var(--r-sm);padding:var(--s3);width:100%;margin-top:var(--s1);
}
input::placeholder{color:var(--ink-3)}
.card input,.card select,.step input,.step select{background:var(--field)}
input:focus,select:focus{outline:2px solid var(--brand);outline-offset:0}
label{display:block;font-size:var(--fs-sm);color:var(--ink-2);margin-bottom:var(--s3);
font-weight:var(--fw-medium)}
.row label{margin:0;display:flex;gap:var(--s2);align-items:center}
/* ⚠️ 안에 늘어나는 입력칸(찾아 고르는 칸)이 들어가는 라벨에만 준다.
min-width:0 이 없으면 min-content 가 20글자쯤이라 좁은 화면에서 페이지가
통째로 옆으로 스크롤된다. 모든 라벨에 주면 짧은 라벨이 찌그러진다. */
.row label.grow{min-width:0;flex:1 1 220px}
/* 입력이 flex 로 늘어나면 라벨 글자가 한 자씩 세로로 접힌다 */
.row label > span{white-space:nowrap;flex:none}
.row input,.row select{width:auto;margin:0;padding:var(--s2) var(--s3);font-size:var(--fs-md)}
.btn{font-family:var(--font);font-size:var(--fs-md);font-weight:var(--fw-semi);
color:var(--ink);background:var(--bg-2);border:0;border-radius:var(--r-sm);
padding:var(--s3) var(--s4);cursor:pointer;white-space:nowrap;letter-spacing:var(--ls-base)}
.btn:hover{background:var(--bg-3)}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-ink)}
.btn.danger{color:var(--bad);background:var(--bad-bg)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.sm{padding:var(--s1) var(--s3);font-size:var(--fs-xs);font-weight:var(--fw-medium)}
.btn.block{width:100%;padding:var(--s4);font-size:var(--fs-lg)}
/* ===========================================================
제출 버튼 상태기계 — lib.js 의 submit() 이 data-state 를 움직인다.
버튼을 숨기고 스피너를 띄우지 않는다. **버튼 자신이** 채워진다.
누른 자리에서 결과가 나오므로 눈이 화면을 헤매지 않는다.
=========================================================== */
.btn[data-state]{position:relative;overflow:hidden;isolation:isolate;
transition:background var(--t-slow) var(--e-out),color var(--t-slow) var(--e-out)}
/* 채워지는 면. 요청이 언제 끝날지 모르므로 90% 까지만 가고 멈춘다 —
100% 를 찍어 놓고 기다리게 하면 그게 거짓말이다. */
.btn[data-state]::after{content:"";position:absolute;inset:0;z-index:-1;
background:rgba(255,255,255,.22);transform:scaleX(0);transform-origin:left}
.btn:not(.primary)[data-state]::after{background:rgba(29,78,216,.14)}
.btn[data-state="run"]::after{transform:scaleX(.9);
transition:transform var(--t-story) var(--e-out)}
.btn[data-state="done"]::after{transform:scaleX(1);
transition:transform var(--t-fast) linear}
/* 진행 중에는 잠기지만 흐려지지 않는다 — 흐려지면 '안 눌렸나' 로 읽힌다.
실제 잠금은 submit() 의 가드다. 이건 마우스까지 막아 두는 것. */
.btn[data-state="run"],.btn[data-state="done"]{pointer-events:none}
.btn[data-state="run"]{cursor:progress}
.btn[data-state="run"]:disabled,.btn[data-state="done"]:disabled{opacity:1}
.btn[data-state="done"]{background:var(--ok);color:#fff}
.btn[data-state="done"]:hover{background:var(--ok)}
/* 완료 면에는 막을 씌우지 않는다 — primary 와 일반 버튼의 초록이 달라 보인다 */
.btn[data-state="done"]::after{background:transparent}
/* ⚠️ 마진을 정하지 않으면 `
` 는 브라우저 기본 `1em` 을 쓴다. 글씨가
13px 이라 마진도 13px — 눈금에 없는 값이 화면 여기저기에 생긴다. */
.msg{font-size:var(--fs-sm);color:var(--ink-3);margin:var(--s3) 0 0}
.msg.ok{color:var(--ok)} .msg.no{color:var(--bad)}
/*
* ⚠️ **접히게 둔다.** 고르는 값이 늘면(출금 상태가 넷 → 여섯) 좁은 화면에서
* 페이지가 통째로 가로로 넘친다 — 360px 에서 123px 이 밀려 나갔다.
* 탭 하나를 감추거나 잘라내면 그 상태를 고를 길이 사라지므로 줄을 바꾼다.
*/
.seg{display:inline-flex;flex-wrap:wrap;gap:var(--s0);max-width:100%;
background:var(--bg-2);border-radius:var(--r-sm);padding:var(--s0)}
.seg button{background:none;border:0;font-family:var(--font);font-size:var(--fs-sm);
font-weight:var(--fw-medium);color:var(--ink-2);padding:var(--s2) var(--s4);
cursor:pointer;border-radius:6px;letter-spacing:var(--ls-base)}
.seg button.on{background:var(--seg-on);color:var(--ink);font-weight:var(--fw-semi);box-shadow:var(--sh-1)}
/* ===========================================================
로그인
=========================================================== */
/* ⚠️ 인증 화면은 라이트/다크와 무관하게 **항상 어둡다.**
토큰을 쓰지 않고 색을 직접 박는 유일한 자리다 — 두 테마에서 같은 얼굴이어야 하고,
데이터가 없는 화면이라 대비를 깎아도 잃을 게 없다.
유리(backdrop-filter)를 여기 말고 다른 데 쓰지 마라: 정산 표에 씌우면
숫자 대비가 무너지고 수백 행 스크롤이 무거워진다. (docs/DESIGN.md §5-1) */
.login{min-height:100dvh;display:flex;align-items:center;justify-content:center;
padding-block:var(--s8);padding-inline:var(--s5);position:relative;isolation:isolate;
background:var(--ground);color:var(--card-ink)}
.login .box{width:100%;max-width:380px;
padding:var(--s8) var(--s6);border-radius:var(--r-lg);
background:var(--surface);border:1px solid var(--hair);box-shadow:var(--glow);
animation:boxIn var(--t-slow) var(--e-out) backwards}
@keyframes boxIn{from{opacity:0;transform:translateY(14px) scale(.985)}}
.login h1{font-size:var(--fs-3xl);letter-spacing:var(--ls-display);margin-bottom:var(--s1);
color:#fff}
.login .sub{font-size:var(--fs-md);color:#9aa4b8;margin:0 0 var(--s8)}
.login label{margin-bottom:var(--s4);color:#9aa4b8}
/* 입력란은 반투명으로 두지 않는다 — 비밀번호를 치는 자리라 대비가 최우선이다 */
.login input{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
color:#fff;transition:border-color var(--t-base),box-shadow var(--t-base)}
.login input::placeholder{color:#6d7788}
.login input:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(232,163,61,.24);outline:none}
.login .btn{width:100%;padding:var(--s4);font-size:var(--fs-lg);margin-top:var(--s2)}
.login .btn.primary{box-shadow:0 10px 28px rgba(232,163,61,.34)}
.login .msg{margin-top:var(--s3)}
.login .hint{margin-top:var(--s6);padding:var(--s4);background:rgba(255,255,255,.045);
border-radius:var(--r-sm);font-size:var(--fs-xs);color:#8b95a7;line-height:1.75}
.login .hint b{color:#c4ccda;font-weight:var(--fw-semi)}
/* ===========================================================
마이오피스 홈
=========================================================== */
.greet{margin-bottom:var(--s6)}
.greet h1{margin-bottom:var(--s2)}
.greet .tags{display:flex;flex-wrap:wrap;gap:var(--s1)}
.tagpill{font-size:var(--fs-xs);font-weight:var(--fw-semi);padding:var(--s1) var(--s3);
border-radius:var(--r-full);background:var(--bg-2);color:var(--ink-2)}
.tagpill.b{background:var(--brand-bg);color:var(--brand)}
.tagpill.g{background:var(--warn-bg);color:var(--warn)}
.amount{padding:0 0 var(--s6)}
.amount .lab{font-size:var(--fs-md);color:var(--ink-2);font-weight:var(--fw-medium)}
.amount .big{font-size:var(--fs-display);font-weight:var(--fw-black);
letter-spacing:var(--ls-display);line-height:var(--lh-tight);margin:var(--s1) 0 0}
.amount .big small{font-size:.42em;font-weight:var(--fw-bold);margin-left:var(--s0);
letter-spacing:var(--ls-num)}
.amount .delta{font-size:var(--fs-md);color:var(--ink-3);margin-top:var(--s2)}
.amount .delta b{color:var(--up);font-weight:var(--fw-semi)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);background:var(--bg-2);
border-radius:var(--r-lg);padding:var(--s4) var(--s1);margin-bottom:var(--s2)}
.trio > div{text-align:center;padding:0 var(--s2);position:relative}
.trio > div + div::before{content:'';position:absolute;left:0;top:12%;height:76%;
width:1px;background:var(--bg-3)}
.trio .k{font-size:var(--fs-xs);color:var(--ink-3);display:block;margin-bottom:var(--s1)}
.trio .v{font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:var(--ls-num);
font-variant-numeric:tabular-nums}
.prog{background:var(--bg-2);border-radius:var(--r-lg);padding:var(--s4);margin-bottom:var(--s8)}
.prog .hd{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
font-size:var(--fs-sm);color:var(--ink-2);margin-bottom:var(--s3)}
.prog .hd b{font-weight:var(--fw-bold);color:var(--ink);letter-spacing:var(--ls-num);
font-variant-numeric:tabular-nums}
.prog .track{height:var(--s2);background:var(--bg-3);border-radius:var(--r-full);overflow:hidden}
.prog .track i{display:block;height:100%;background:var(--brand);border-radius:var(--r-full);
transition:width .45s cubic-bezier(.4,0,.2,1)}
.prog.warn .track i{background:var(--warn)}
.prog.full .track i{background:var(--bad)}
.advice{background:var(--brand-bg);border-radius:var(--r-lg);padding:var(--s4);
margin-bottom:var(--s4)}
.advice .t{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--brand);
letter-spacing:var(--ls-num);margin-bottom:var(--s1)}
.advice .d{font-size:var(--fs-sm);color:var(--ink-2);line-height:var(--lh-snug)}
.advice.flat{background:var(--bg-2)}
.advice.flat .t{color:var(--ink)}
.legs{display:flex;justify-content:space-between;align-items:flex-end;
margin-bottom:var(--s3);gap:var(--s3)}
.legs .one{min-width:0}
.legs .one.r{text-align:right}
.legs .k{font-size:var(--fs-xs);color:var(--ink-3)}
.legs .v{font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-num);
line-height:var(--lh-tight);font-variant-numeric:tabular-nums}
.legs .s{font-size:var(--fs-xs);color:var(--ink-3);margin-top:var(--s0)}
.legs .one.weak .v{color:var(--warn)}
/*
* 다리 숫자 밑 설명 — 큰 숫자가 「남은 실적」 이라는 걸 말해 주는 줄이다.
* ⚠️ 빼지 마라. 짝이 지어지면 양쪽에서 같이 빠져서 다 쓴 다리가 0 으로
* 보이는데, 회원은 그걸 "내 실적이 안 잡혔다" 로 읽는다 — 문의가 왔다.
*/
.legs + p.note{font-size:var(--fs-2xs);line-height:var(--lh-base);
color:var(--ink-3);margin:calc(-1 * var(--s1)) 0 var(--s3);max-width:none}
.seesaw{display:grid;grid-template-columns:1fr 1fr;gap:var(--s0);height:var(--s2)}
.seesaw i{background:var(--bg-3);border-radius:var(--r-full);position:relative;overflow:hidden}
.seesaw i span{position:absolute;top:0;bottom:0;background:var(--brand);
border-radius:var(--r-full);transition:width .45s cubic-bezier(.4,0,.2,1)}
.seesaw i.l span{right:0}
.seesaw i.r span{left:0}
.seesaw i.weak span{background:var(--warn)}
/* 리스트 — 카드가 아니다 */
.list{background:var(--bg-2);border-radius:var(--r-lg);overflow:hidden}
.list .li{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
padding:var(--s3) var(--s4);font-size:var(--fs-md);min-height:48px}
.list .li + .li{box-shadow:inset 0 1px 0 var(--bg-3)}
.list .li .k{color:var(--ink-2)}
.list .li .v{font-weight:var(--fw-bold);letter-spacing:var(--ls-num);
font-variant-numeric:tabular-nums}
.list .li .v small{font-weight:var(--fw-medium);color:var(--ink-3);
font-size:var(--fs-sm);margin-left:var(--s0)}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.quick button{display:flex;flex-direction:column;align-items:center;gap:var(--s2);
background:var(--bg-2);border:0;border-radius:var(--r-lg);
padding:var(--s4) var(--s2);cursor:pointer;font-family:var(--font);
font-size:var(--fs-xs);font-weight:var(--fw-semi);color:var(--ink);
letter-spacing:var(--ls-base)}
.quick button:hover{background:var(--bg-3)}
.quick svg{width:22px;height:22px;stroke:var(--brand);fill:none;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
/* ===========================================================
데이터 블록 (관리자 포함)
=========================================================== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;
background:transparent;border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--bg);padding:var(--s4);box-shadow:0 0 0 1px var(--line)}
.stat .k{font-size:var(--fs-xs);color:var(--ink-3);display:block;margin-bottom:var(--s0)}
/* ⚠️ `nowrap` 은 값이 숫자일 때 얘기다. "실서비스 모드" 같은 글자 값이
들어오면 칸을 뚫고 나간다 — 768px 에서 실제로 그랬다. 넘칠 때만 접는다. */
.stat .v{font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-num);
font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.stat .k{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .u{font-size:var(--fs-sm);color:var(--ink-3);margin-left:var(--s0);font-weight:var(--fw-medium)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
background:transparent;border-radius:var(--r-lg);overflow:hidden}
.kv div{background:var(--bg);padding:var(--s3) var(--s4);box-shadow:0 0 0 1px var(--line)}
.kv .k{font-size:var(--fs-xs);color:var(--ink-3);display:block}
.kv .v{font-size:var(--fs-md);font-weight:var(--fw-semi);letter-spacing:var(--ls-base)}
.card{background:var(--bg-2);border-radius:var(--r-lg);padding:var(--s4)}
/* ── 장(章)의 세로 리듬 ──────────────────────────────────────
*
* ⚠️ **간격의 주인은 장이지 부품이 아니다.** 이 규칙을 지우고 부품마다
* `margin-bottom` 을 들려 보내지 마라 — 그게 원래 방식이었고, 그래서
* 같은 화면 안에서 12px(`.tw`)·20px(`.card`)·8px(`.bar`)이 규칙 없이
* 섞였다. 무엇이 오느냐에 따라 간격이 달라지니 사람 눈에는 "제각각" 이다.
* 부품은 자기가 어디에 놓일지 모른다. 아는 것은 장뿐이다.
*
* 리듬은 셋이고, 셋에는 각각 이유가 있다:
* 32px 새 제목 앞 — 새 이야기가 시작된다
* 12px 제목 바로 뒤 — 제목과 그 내용은 한 덩어리다
* 20px 그 밖의 사이 — 덩어리와 덩어리
*
* ⚠️ 바로 밑 자식의 `margin-bottom` 을 0 으로 내리는 줄을 빼지 마라.
* 안 내리면 부품이 들고 온 아래 여백에 이 규칙의 위 여백이 **더해져서**
* 같은 종류인데도 자리마다 다른 값이 된다.
* ⚠️ 장 **바로 밑**에만 건다. 카드 안쪽은 부품이 제 간격을 그대로 쓴다.
* ⚠️ 격자(`.stats`·`.trio`)는 `gap` 이 맡으므로 건드리지 않는다.
*/
.subpane.on > *,
section[data-pane] > *,
.stack.stack > *,
.sec.sec > *{margin-bottom:0}
.subpane.on > * + *,
section[data-pane] > * + *,
.stack.stack > * + *,
.sec.sec > * + *{margin-top:var(--s5)}
.subpane.on > * + :is(h2,h3),
section[data-pane] > * + :is(h2,h3),
.stack.stack > * + :is(h2,h3),
.sec.sec > * + :is(h2,h3){margin-top:var(--s8)}
.subpane.on > :is(h2,h3) + *,
section[data-pane] > :is(h2,h3) + *,
.stack.stack > :is(h2,h3) + *,
.sec.sec > :is(h2,h3) + *{margin-top:var(--s3)}
.subpane.on > h2 + h3,
section[data-pane] > h2 + h3,
.stack.stack > h2 + h3,
.sec.sec > h2 + h3{margin-top:var(--s5)}
/* 한 줄짜리 안내가 여럿 이어질 때는 서로 붙여 한 덩어리로 읽히게 한다 */
.subpane.on > .note + .note,
section[data-pane] > .note + .note,
.stack.stack > .note + .note,
.sec.sec > .note + .note{margin-top:var(--s2)}
/*
* `.stack` — 속이 비친 포장지에 리듬을 물려준다.
*
* ⚠️ 카드를 여러 장 담는 `
` 를 만들면 **반드시 `.stack` 을 붙여라.**
* 장의 리듬은 장 **바로 밑**까지만 닿는다. 포장지 하나만 끼워도 그
* 안쪽은 간격이 0 이 되어 카드가 벽처럼 맞닿는다 — 회원 상세
* (`#mdBody`)가 실제로 0px 이었고, 그 화면만 보면 어디가 한 카드인지
* 알 수 없었다.
* ⚠️ 배경·테두리가 있는 상자(`.card`)에는 붙이지 마라. 그건 포장지가
* 아니라 덩어리 자체이고, 안쪽 간격은 그 부품들이 정한다.
*
* ⚠️ `.stack.stack` / `.sec.sec` 처럼 클래스를 두 번 적은 것은 오타가 아니다.
* **컨테이너가 부품이 제 몸에 지닌 여백을 반드시 이겨야 한다.** 한 번만
* 적으면 우선순위가 같아서 파일 뒤쪽에 있는 부품 규칙(`.more`,
* `.guard` …)이 이기고, 리듬은 그 부품이 있는 자리에서만 조용히 깨진다.
* 파일 순서에 기대는 방법(이 블록을 맨 뒤로 옮기기)은 다음 사람이
* 그 뒤에 한 줄을 더하는 순간 무너진다.
*/
.card.accent{background:var(--brand-bg)}
.bar{display:flex;height:var(--s10);border-radius:var(--r-sm);overflow:hidden;
margin-bottom:var(--s2)}
.bar div{display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);
font-weight:var(--fw-semi);color:#fff;min-width:0;overflow:hidden;white-space:nowrap}
.barkey{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5);font-size:var(--fs-xs);
color:var(--ink-3)}
/* 좁은 화면에서 막대 안 라벨이 안 보일 때만 쓰는 범례 */
.barlegend{display:none;flex-wrap:wrap;gap:var(--s1) var(--s4);font-size:var(--fs-xs);
color:var(--ink-2);margin-bottom:var(--s2)}
.barlegend > span{display:inline-flex;align-items:center;gap:var(--s1)}
.barlegend i{width:10px;height:10px;border-radius:3px;flex:none}
/* 표 */
.tw{overflow-x:auto;border-radius:var(--r-lg);background:var(--bg-2);margin-bottom:var(--s3)}
table{border-collapse:collapse;width:100%;min-width:420px;font-size:var(--fs-sm)}
th,td{padding:var(--s3) var(--s4);text-align:left}
thead th{font-weight:var(--fw-medium);font-size:var(--fs-xs);color:var(--ink-3);
white-space:nowrap;padding:var(--s4) var(--s4) var(--s1)}
tbody td{box-shadow:inset 0 1px 0 var(--bg-3)}
td.n,th.n{text-align:right;white-space:nowrap}
/*
* 남는 가로 공간은 **`.fill` 을 단 칸**이 먹는다.
*
* 표가 창 끝까지 넓어지면서 남는 폭이 가운데 아무 칸에나 몰렸다 — 출금
* 목록에서 `검토자` 와 `신청일` 사이가 벌어졌다. 한 칸을 고무줄로 정해
* 두면 빈 자리는 늘 그 칸에 모인다.
*
* ⚠️ **맨 끝 칸(`:last-child`)에 일괄로 걸지 마라.** 그러면 나머지 칸이
* 전부 min-content 까지 쫄아들고, 한글은 min-content 가 **한 글자**라
* `판매원패키지` 가 세로로 한 줄씩 쌓인다. 거래 내역에서 실제로 그랬다.
* ⚠️ 한 표에 하나만 달아라. 둘이면 둘이 나눠 가져 다시 가운데가 벌어진다.
* ⚠️ `table-layout:fixed` 로 바꾸지 마라. `#`·금액 칸까지 똑같이 나뉘어
* 번호 한 자리에 100px 이 가고 이름이 잘린다.
*/
tbody tr:hover td{background:var(--bg-3)}
code{font-family:var(--mono);font-size:.88em;background:var(--bg-3);
padding:1px var(--s1);border-radius:5px;letter-spacing:0}
/* 목록 도구줄 안의 체크박스 한 줄 */
.chkline{display:inline-flex;align-items:center;gap:var(--s2);margin:0;
font-size:var(--fs-xs);color:var(--ink-2);white-space:nowrap}
.chkline input{margin:0}
.tag{display:inline-block;font-size:var(--fs-2xs);font-weight:var(--fw-semi);
padding:var(--s0) var(--s2);border-radius:var(--r-full)}
.tag.ok{background:var(--ok-bg);color:var(--ok)}
.tag.no{background:var(--bad-bg);color:var(--bad)}
.tag.mut{background:var(--bg-3);color:var(--ink-3)}
.tag.acc{background:var(--brand-bg);color:var(--brand)}
/* 인정코드(044) — 매출 없이 수당이 나가는 계정. 정상도 오류도 아니라
**눈에 걸려야 하는** 상태다. 탈퇴(no)·휴면(mut)과 색이 갈려야 한다. */
.tag.warn{background:var(--warn-bg);color:var(--warn)}
/* 점검 결과는 수십 줄짜리 촘촘한 목록이다 — 장의 리듬(20px)으로 띄우면
한 화면에 몇 줄 안 들어온다. **그래서 일부러 좁힌다**: 간격을 목록이
`gap` 으로 직접 들고 있으면 검사도 "의도한 것" 으로 읽는다.
⚠️ `--s1`(4px)로 되돌리지 마라. 이 앱의 어느 리듬에도 없는 값이라
촘촘한 목록이 아니라 "붙어서 잘못 그려진 것" 으로 읽힌다. */
#guards{display:flex;flex-direction:column;gap:var(--s2)}
.guard{display:flex;gap:var(--s3);align-items:flex-start;background:var(--bg-2);
border-radius:var(--r-sm);padding:var(--s3) var(--s4)}
.guard.fail{background:var(--bad-bg)}
/* 제목 첫 줄에 눈높이를 맞춘다. app.js 안에 style="margin-top:3px" 으로
박혀 있던 걸 눈금 값으로 옮겼다 — 날 px 은 이 파일 밖에 두지 않는다. */
.guard > .tag{margin-top:var(--s0);flex:none}
.guard .body{min-width:0}
.guard .title{font-weight:var(--fw-semi);font-size:var(--fs-md)}
.guard .desc{font-size:var(--fs-xs);color:var(--ink-3)}
.guard .m{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-3);
margin-top:var(--s1);word-break:break-all;letter-spacing:0}
/* ===========================================================
내역 행 (.rows) — 표 대신 쓰는 금융앱 거래내역 문법
좁은 화면에서 7컬럼 표는 읽을 수 없다. 2줄 구조로 둔다.
=========================================================== */
.rows{background:var(--bg-2);border-radius:var(--r-lg);overflow:hidden}
.rows .r{display:flex;justify-content:space-between;align-items:flex-start;
gap:var(--s3);padding:var(--s3) var(--s4)}
.rows .r + .r{box-shadow:inset 0 1px 0 var(--bg-3)}
.rows .r > div{min-width:0}
.rows .r > div:last-child{text-align:right;flex:none}
.rows .t{font-size:var(--fs-md);font-weight:var(--fw-semi);letter-spacing:var(--ls-base);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rows .t.num{font-weight:var(--fw-bold);letter-spacing:var(--ls-num);
font-variant-numeric:tabular-nums}
.rows .t.minus{color:var(--bad)}
.amount .big.minus{color:var(--bad)}
.rows .s{font-size:var(--fs-xs);color:var(--ink-3);margin-top:var(--s0);
display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.rows .r > div:last-child .s{justify-content:flex-end}
/* 알림 한 줄 — 안 읽은 것은 왼쪽에 표시가 붙는다 */
.noti{background:var(--bg-2);border-radius:var(--r-lg);overflow:hidden}
.noti .n{display:flex;gap:var(--s3);padding:var(--s3) var(--s4);align-items:flex-start;
box-shadow:inset 0 1px 0 var(--bg-3)}
.noti .n:first-child{box-shadow:none}
.noti .n.new{background:var(--brand-bg)}
.noti .ic{width:30px;height:30px;border-radius:var(--r-full);flex:none;display:grid;
place-items:center;background:var(--bg-3);color:var(--ink-3);
font-size:var(--fs-2xs);font-weight:var(--fw-bold)}
.noti .n.new .ic{background:var(--brand);color:#fff}
.noti .b{min-width:0;flex:1}
.noti .t{font-size:var(--fs-md);font-weight:var(--fw-medium);line-height:var(--lh-snug)}
.noti .d{font-size:var(--fs-xs);color:var(--ink-3);margin-top:var(--s0)}
/* 빈 상태 */
.empty{background:var(--bg-2);border-radius:var(--r-lg);padding:var(--s8) var(--s5);
text-align:center}
.empty .t{font-size:var(--fs-md);font-weight:var(--fw-semi);margin-bottom:var(--s1)}
.empty .d{font-size:var(--fs-sm);color:var(--ink-3);line-height:var(--lh-snug);
max-width:44ch;margin:0 auto}
/* 단계 표시 (회원 추천) */
.steps{display:flex;flex-direction:column;gap:var(--s3)}
.step{background:var(--bg-2);border-radius:var(--r-lg);padding:var(--s4)}
.step .hd{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.step .no{width:22px;height:22px;border-radius:var(--r-full);background:var(--bg-3);
color:var(--ink-3);font-size:var(--fs-xs);font-weight:var(--fw-bold);
display:grid;place-items:center;flex:none}
.step.done .no,.step.now .no{background:var(--brand);color:#fff}
.step .hd h3{margin:0;font-size:var(--fs-md)}
.step label{margin-bottom:var(--s2)}
.step label:last-of-type{margin-bottom:0}
/* 자리 추천 배지 */
.slot.rec{box-shadow:inset 0 0 0 1px var(--brand);color:var(--brand)}
.slot b{font-weight:var(--fw-bold)}
.slot .sub{opacity:.55;font-weight:var(--fw-medium)}
.slot .why{font-weight:var(--fw-bold);margin-left:var(--s1)}
.slotgrp{margin-bottom:var(--s3)}
.slotgrp:last-child{margin-bottom:0}
.slotgrp .lb{font-size:var(--fs-xs);color:var(--ink-3);margin-bottom:var(--s2);
display:flex;gap:var(--s2);align-items:center}
.slotgrp .lb b{color:var(--brand);font-weight:var(--fw-semi)}
/* 조직도 요약 바 */
.orgsum{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);
margin-bottom:var(--s3)}
.orgsum > div{background:var(--bg-2);border-radius:var(--r-sm);
padding:var(--s3) var(--s4);min-width:0}
.orgsum .k{font-size:var(--fs-xs);color:var(--ink-3);display:block}
.orgsum .v{font-size:var(--fs-md);font-weight:var(--fw-bold);letter-spacing:var(--ls-num);
font-variant-numeric:tabular-nums;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;display:block}
@media (max-width:380px){.orgsum .v{font-size:var(--fs-sm)}}
.orgsum .v.weak{color:var(--warn)}
#orgLegs{background:var(--bg-2);border-radius:var(--r-lg);padding:var(--s4);
margin-bottom:var(--s4)}
#orgLegs .legs{margin-bottom:var(--s3)}
/* ===========================================================
조직도
=========================================================== */
.treebox{overflow:auto;background:var(--bg-2);border-radius:var(--r-lg);
padding:var(--s6) var(--s5);max-height:640px}
.treebox > div{width:max-content;min-width:100%;display:flex;justify-content:center}
.tnode{display:flex;flex-direction:column;align-items:center;position:relative}
/* ── 연결선 ──────────────────────────────────────────────────
*
* 부모 밑에서 **수직으로 내려와 → 가로로 뻗어 → 다시 수직으로 내려가** 자식에
* 닿는 ㄱ자다. 대각선으로 잇지 않는다 — 좌우 하부의 크기가 다르면 선이 길게
* 기울어 서로 교차하고, 깊어질수록 어느 선이 어디로 가는지 못 읽는다.
*
* 세 토막이 이어져야 한 줄로 보인다:
* `.tkids::before` 부모 상자 밑 → 가로선 (세로 var(--s5))
* `.tkid::after` 형제들을 잇는 가로선 (첫째 가운데 ~ 막내 가운데)
* `.tkid::before` 가로선 → 자식 상자 위 (세로 var(--s3))
*
* ⚠️ 토막 길이는 `.tkids` 의 `margin-top`·`.tkid` 의 `padding-top` 과 **같은
* 값이어야 한다.** 하나만 바꾸면 선이 중간에서 끊기거나 상자를 뚫는다.
* ⚠️ 가로선은 `.tkid` 마다 한 도막씩 그려 이어 붙인다. 형제 사이의 틈
* (`gap`)만큼 양옆으로 더 늘려야 도막이 붙는다 — 안 늘리면 자식 수만큼
* 점선이 된다.
* ⚠️ 첫째는 제 가운데서 오른쪽만, 막내는 왼쪽만 그린다. 안 그러면 가로선이
* 맨 바깥 자식 바깥으로 튀어나와 허공에서 끝난다.
* ⚠️ 외동(`:only-child`)이면 좌우가 모두 50% 라 가로선은 저절로 사라지고
* 세로 두 토막만 남아 곧은 직선이 된다 — 따로 숨기지 마라.
*/
/*
* ⚠️ 치수는 **여기 세 줄에서만** 정한다. 여백과 선 길이를 따로 적으면
* 반드시 한쪽만 고치는 날이 오고, 그날 선은 중간에서 뜨거나 상자를
* 뚫는다 — 좁은 화면 규칙이 `margin-top` 만 16px 로 줄이고 선은 20px
* 로 남겨 둬서 실제로 4px 씩 삐져나와 있었다.
* 좁은 화면에서 좁히고 싶으면 **이 변수만** 덮어써라(아래 media 참고).
*/
/*
* ⚠️ 형제 사이 틈은 `gap` 이 아니라 **`.tkid` 의 좌우 여백**으로 만든다.
* `gap` 으로 두면 가로선 도막이 그 틈을 건너려고 상자 밖으로 삐져나가야
* 하고, 그러면 넘침 검사에 걸릴뿐더러 배율을 주는 자리에서 어긋난다.
* 여백으로 두면 도막이 제 상자 안에서 끝나면서도 옆 도막과 딱 맞닿는다.
*/
.tkids{--drop:var(--s5); /* 부모 상자 밑 ~ 가로선 */
--rise:var(--s3); /* 가로선 ~ 자식 상자 위 */
/* ⚠️ 형제 틈은 **짝수 눈금**으로 둔다. 좌우로 반씩 나눠 여백을 주므로
눈금의 절반이 다시 눈금 위에 떨어져야 한다 — `--s3`(12px)를 쓰면
6px 이 되어 이 앱 어디에도 없는 값이 된다. */
--sib:var(--s4); /* 형제 사이 틈 */
display:flex;margin-top:var(--drop);position:relative}
.tkids::before{content:'';position:absolute;top:calc(-1 * var(--drop));left:50%;
margin-left:-.5px;width:1px;height:var(--drop);background:var(--tree-line)}
.tkid{display:flex;flex-direction:column;align-items:center;position:relative;
padding-top:var(--rise);
padding-left:calc(var(--sib) / 2);padding-right:calc(var(--sib) / 2)}
.tkid::before{content:'';position:absolute;top:0;left:50%;margin-left:-.5px;
width:1px;height:var(--rise);background:var(--tree-line)}
.tkid::after{content:'';position:absolute;top:0;height:1px;background:var(--tree-line);
left:0;right:0}
.tkid:first-child::after{left:50%}
.tkid:last-child::after{right:50%}
.tbox{background:var(--node);border-radius:var(--r-md);padding:var(--s2) var(--s3);
min-width:132px;text-align:center;font-size:var(--fs-sm);line-height:var(--lh-snug);
box-shadow:var(--sh-1)}
.tbox.root{background:var(--brand);color:#fff;box-shadow:none}
.tbox.root .c{color:rgba(255,255,255,.7)}
.tbox.root .lr{color:rgba(255,255,255,.8)}
.tbox.root .lr b{color:#fff}
.tbox.empty{background:none;box-shadow:inset 0 0 0 1px var(--bg-3);color:var(--ink-3);
min-width:62px;padding:var(--s2);font-size:var(--fs-2xs)}
/* 한 번에 그리는 인원을 넘어 잘린 자리.
⚠️ 빈자리와 **눈으로 갈라져야 한다.** 빈자리는 새 회원이 들어갈 수 있는
자리고, 이쪽은 이미 사람이 있는데 안 그려진 자리다. 같은 회색으로
그리면 운영자가 찍었다가 SLOT_TAKEN 을 맞는다. */
.tbox.more{background:none;box-shadow:inset 0 0 0 1px var(--brand);color:var(--brand);
min-width:62px;padding:var(--s2);font-size:var(--fs-2xs);
font-weight:var(--fw-semi);cursor:pointer}
.tbox.more:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.tbox .n{font-weight:var(--fw-bold);letter-spacing:var(--ls-base)}
/* 조직도 상자 안의 상태 딱지 — 탈퇴·휴면.
⚠️ 줄을 새로 만들지 마라. 상자가 한 줄 높아지면 조직이 깊을 때 화면 밖으로
밀려난다. 이름 줄 끝에 붙인다. */
.tbox .st{font-size:var(--fs-2xs);font-weight:var(--fw-semi);letter-spacing:0;
border-radius:var(--r-sm);padding:0 var(--s1);vertical-align:middle;
background:var(--bg-2);color:var(--ink-3)}
.tbox .st.no{background:var(--bad-bg);color:var(--bad)}
/* 인정코드 — 관리자 조직도에서만 뜬다. 회원용은 키 자체가 안 내려온다(036) */
.tbox .st.rec{background:var(--warn-bg);color:var(--warn)}
.tbox.root .st.rec{background:rgba(255,255,255,.22);color:#fff}
/* ── 등급 색 (045) ─────────────────────────────────────────
어떤 다리에 큰 패키지가 붙었는지 **글자를 읽기 전에** 보이게 한다.
색은 고른 게 아니라 남은 색을 전부 조합해 색약 시뮬레이션으로 걸러
남은 것이다. 앰버 계열은 루트 상자·인정 뱃지가 이미 쓰고, 빨강은
탈퇴·위험이라 쓸 수 없다. 남은 다섯(파랑·청록·자홍·초록·보라)의
조합 10가지 중 라이트·다크 양쪽을 통과한 건 둘뿐이었다.
그중 색 간 거리가 가장 넓은 쪽(적·녹색맹 ΔE 13, 정상 시야 27.5).
⚠️ 색을 **혼자 두지 마라.** 등급 이름이 상자에 그대로 적혀 있어야 한다 —
라이트에서 자홍(#e87ba4)은 면 대비 2.49:1 로 3:1 을 못 넘는다.
그 글자가 유일한 받침이다.
⚠️ 보라를 도로 넣지 마라. 다크에서 파랑과 적색맹 기준 ΔE 1.9 —
사실상 같은 색이다.
⚠️ 바탕을 진하게 칠하지 마라. 상자 안에 아이디·실적 숫자가 들어 있다.
신호는 **왼쪽 띠**가 지고, 바탕은 거들기만 한다.
⚠️ 여기 한 곳에서만 정한다. 마이오피스와 어드민이 같은 `renderTree` 를
쓰므로, 화면에서 또 칠하면 같은 회원이 두 색으로 보인다. */
:root{
--gc-seller:#2a78d6; --gc-seller-bg:#eaf2fd;
--gc-agency:#008300; --gc-agency-bg:#e6f4e8;
--gc-distributor:#e87ba4; --gc-distributor-bg:#fdeef3;
}
:root[data-theme="dark"],:root[data-theme="system"]{
--gc-seller:#3987e5; --gc-seller-bg:#151d2b;
--gc-agency:#008300; --gc-agency-bg:#121d15;
--gc-distributor:#d55181; --gc-distributor-bg:#1f1620;
}
@media (prefers-color-scheme:light){
:root[data-theme="system"]{
--gc-seller:#2a78d6; --gc-seller-bg:#eaf2fd;
--gc-agency:#008300; --gc-agency-bg:#e6f4e8;
--gc-distributor:#e87ba4; --gc-distributor-bg:#fdeef3;
}
}
.tbox.g-SELLER {--gc:var(--gc-seller); --gc-bg:var(--gc-seller-bg)}
.tbox.g-AGENCY {--gc:var(--gc-agency); --gc-bg:var(--gc-agency-bg)}
.tbox.g-DISTRIBUTOR {--gc:var(--gc-distributor); --gc-bg:var(--gc-distributor-bg)}
/*
* ⚠️ 루트는 `:not(.root)` 로 **아예 빼 둔다.** 이기려 들지 마라 —
* 루트의 금색 면은 그라데이션(`--fill`)이라, 더 센 선택자로 덮으면
* 단색이 얹혀 그라데이션이 죽는다. 실제로 마이오피스에서 본인이
* 총판점이면 루트가 갈색 단색으로 보였다. 루트는 한 곳에서만 칠한다.
*/
.tbox:not(.root).g-SELLER,
.tbox:not(.root).g-AGENCY,
.tbox:not(.root).g-DISTRIBUTOR{
background:var(--gc-bg);
border-left:3px solid var(--gc)}
.tbox .c .gr{font-weight:var(--fw-semi);color:inherit}
.tbox:not(.root).g-SELLER .c .gr,
.tbox:not(.root).g-AGENCY .c .gr,
.tbox:not(.root).g-DISTRIBUTOR .c .gr{color:var(--gc)}
/* 탈퇴한 자리 — 남아 있지만 죽은 자리다. 눌러 보기 전에 눈으로 갈라져야 한다 */
.tbox.dead{opacity:.62}
.tbox.dead .n{text-decoration:line-through;text-decoration-thickness:1px}
.tbox .c{font-size:var(--fs-2xs);color:var(--ink-3)}
.tbox .lr{font-size:var(--fs-2xs);color:var(--ink-2);margin-top:var(--s1);display:flex;
gap:var(--s2);justify-content:center;font-variant-numeric:tabular-nums}
.tbox .lr b{font-weight:var(--fw-bold);color:var(--brand)}
/* 가입일 — 계보도 상자 맨 아래 한 줄(45단계). 숫자만이라 작게, 흐리게 */
.tbox .jd{font-size:var(--fs-2xs);color:var(--ink-3);margin-top:var(--s1);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.tbox.root .jd{color:var(--on-accent-3)}
/* 내 현황 — 누적 실적·소실적 누적 (A·B 균형 카드 아래) */
.lifeline{margin-top:var(--s4);padding-top:var(--s3);border-top:1px dashed var(--line);
display:flex;flex-direction:column;gap:var(--s2);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.lifeline .row2{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;min-width:0}
.lifeline .k{color:var(--ink-3)}
.lifeline .v{color:var(--ink-2);text-align:right}
.lifeline .v b{color:var(--ink);font-weight:var(--fw-bold)}
.lifeline .mut{color:var(--ink-3)}
.lifeline .track{margin-top:var(--s1);height:var(--s2);background:var(--bg-3);border-radius:var(--r-full);overflow:hidden}
.lifeline .track i{display:block;height:100%;background:var(--brand);border-radius:var(--r-full);transition:width var(--t-slow) var(--e-out)}
.legtag{position:absolute;top:calc(-1 * var(--s2));left:50%;transform:translateX(-50%);
font-size:var(--fs-2xs);font-weight:var(--fw-bold);padding:0 var(--s1);
border-radius:var(--r-full);background:var(--bg-3);color:var(--ink-3)}
/* 후원인 찾기 칸.
⚠️ `size` 만 믿지 마라 — 360px 화면에서 칸 하나가 줄을 밀어내 화면이
통째로 가로로 넘쳤다(간격 검사가 잡았다). 줄어들 수 있게 열어 둔다. */
.slotbar{gap:var(--s2)}
.slotbar > label{flex:1 1 150px;min-width:0}
.slotbar input{width:100%;min-width:0}
.slots{display:flex;flex-wrap:wrap;gap:var(--s1);max-height:270px;overflow-y:auto}
.slot{font-size:var(--fs-xs);font-weight:var(--fw-medium);background:var(--bg);
color:var(--ink-2);border:0;border-radius:var(--r-full);padding:var(--s1) var(--s3);
cursor:pointer;font-family:var(--font);box-shadow:inset 0 0 0 1px var(--bg-3)}
.slot:hover{color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.slot.on{background:var(--brand);color:#fff;box-shadow:none}
/* 못 고르는 자리. **감추지 말고 이유와 함께 보여 준다** — 없어 보이면
운영자는 "저 사람이 안 나온다" 로 읽고, 그건 고장으로 읽힌다. */
.slot.off{opacity:.5;cursor:not-allowed}
.slot.off:hover{color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--bg-3)}
/* 자리 한 칸이 두 줄(이름 / 이유)이 되는 자리 — 자리 검색 결과 */
.slot > span{display:block;font-size:var(--fs-2xs);opacity:.7;font-weight:var(--fw-medium)}
/* ===========================================================
표 — 가로로 넘칠 때 잘렸다는 걸 보이게 한다
=========================================================== */
.tw{position:relative}
/* 오른쪽 끝을 흐리게 해서 더 있다는 걸 알린다 */
.tw.over::after{content:'';position:absolute;top:0;bottom:0;right:0;width:var(--s10);
pointer-events:none;border-radius:0 var(--r-lg) var(--r-lg) 0;
background:linear-gradient(90deg,transparent,var(--bg-2) 72%);
box-shadow:inset -1px 0 0 var(--bg-3)}
td .sub{display:block;font-size:var(--fs-2xs);color:var(--ink-3);
font-weight:var(--fw-medium);margin-top:1px}
/*
* 사람이 적은 글(메모·사유)은 **줄을 바꾼다.**
*
* 칸이 `nowrap` 인데 그 안에 한 줄짜리 메모가 들어가면 그 한 줄이 열 폭을
* 정해 버린다 — 출금 목록에서 반려 사유 한 건이 `검토자` 열을 400px 로
* 벌려 놓았고, 같은 열의 다른 줄은 `admin1` 넉 자뿐이라 그 사이가 통째로
* 빈 칸으로 보였다. 폭을 글자 수로 묶고 넘치면 접는다.
* ⚠️ px 로 묶지 마라 — 글씨 크기가 바뀌면 같이 움직여야 한다.
*/
td .sub.memo{white-space:normal;min-width:18ch;max-width:24ch}
/*
* 일괄 처리 단추는 **표 머리글 안**, 전체선택 네모 바로 왼쪽에 산다.
*
* 목록 위에 따로 줄을 두고 고를 때만 띄웠더니, 단추가 생겼다 사라지면서
* 표가 아래로 밀렸다. 자리가 고정이면 운영자는 그 자리를 외운다.
* ⚠️ 고른 게 없어도 **그대로 둔다.** 눌렀을 때 "고른 건이 없습니다" 라고
* 말해 주는 편이, 단추가 사라져서 어디 갔나 찾는 것보다 낫다.
*/
.bulkhead{display:flex;align-items:center;justify-content:flex-end;
flex-wrap:wrap;gap:var(--s2)}
.bulkhead .n{font-size:var(--fs-xs);color:var(--ink-2);font-weight:var(--fw-medium)}
/* 고르는 칸은 넓힐 이유가 없다 — 남는 폭은 `.fill` 을 단 칸이 먹는다 */
td.pick,th.pick{width:1%;white-space:nowrap;text-align:center}
td.fill,th.fill{width:100%}
td.nw,th.nw{white-space:nowrap}
/* 목록 위 도구줄 — 검색 + 건수 */
.toolbar{display:flex;gap:var(--s2);align-items:center;margin-bottom:var(--s3);flex-wrap:wrap}
.toolbar input[type=search]{width:auto;flex:1;min-width:160px;max-width:280px;margin:0;
padding:var(--s2) var(--s3);font-size:var(--fs-md)}
.toolbar .count{font-size:var(--fs-xs);color:var(--ink-3);margin-left:auto;
font-variant-numeric:tabular-nums}
.more{display:block;width:100%;margin:var(--s2) 0 var(--s3)}
/* ── 목록 도구줄 — 검색 · 상태 · 기간 · 쪽당 개수 · 내려받기 ──────────
한 줄에 다 들어가지 않으면 접힌다. 좁은 화면에서 옆으로 스크롤되게
두지 마라 — 검색 단추가 화면 밖으로 나간다. */
.listbar{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;
margin-bottom:var(--s3)}
.listbar input[type=search]{width:auto;flex:1 1 180px;min-width:0;max-width:280px;
margin:0;padding:var(--s2) var(--s3);font-size:var(--fs-md)}
.listbar select{width:auto;margin:0;padding:var(--s2) var(--s3);font-size:var(--fs-sm)}
.listbar input[type=date]{width:auto;margin:0;padding:var(--s2) var(--s3);
font-size:var(--fs-sm);min-width:0}
.listbar .dates{display:flex;gap:var(--s1);align-items:center;min-width:0}
.listbar .dates .tilde{color:var(--ink-3);font-size:var(--fs-sm)}
/* 내려받기는 늘 오른쪽 끝 — 눈이 찾는 자리를 고정한다 */
.listbar [data-export]{margin-left:auto}
/* 쪽 이동 줄 */
.pager{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;
margin:var(--s3) 0}
.pager:empty{display:none}
.pager .count{font-size:var(--fs-xs);color:var(--ink-3);
font-variant-numeric:tabular-nums}
.pager .pg{display:flex;gap:var(--s1);align-items:center;margin-left:auto}
.pager .pg b{font-size:var(--fs-xs);color:var(--ink-2);padding:0 var(--s2);
font-variant-numeric:tabular-nums}
.pager .pg .btn{min-width:var(--s6)}
/* 목록 합계 — 서버가 센 값이다 */
.sums{display:flex;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s3)}
.sums .one{display:flex;gap:var(--s2);align-items:baseline;background:var(--bg-2);
border-radius:var(--r-sm);padding:var(--s2) var(--s3)}
.sums .k{font-size:var(--fs-xs);color:var(--ink-3)}
.sums b{font-size:var(--fs-md);letter-spacing:var(--ls-num);
font-variant-numeric:tabular-nums}
/* ── 찾아서 고르는 칸 (회원 고르기) ──────────────────────────────
⚠️ 목록을 `position:absolute` 로 띄운다. 흐름에 두면 열릴 때마다
아래 내용이 밀려 내려가 누르려던 자리가 달아난다. */
/* ⚠️ flex 자식은 min-content 폭 아래로 줄지 않는다. `input` 은 기본 `size`
때문에 min-content 가 20글자쯤이라, min-width:0 을 빠뜨리면 360px 에서
화면 전체가 옆으로 스크롤된다 (CLAUDE.md). */
.picker{position:relative;display:block;min-width:0;flex:1 1 160px}
/* ⚠️ 라벨 안의 span 은 위에서 `flex:none` 으로 굳혀 두었다(글자가 세로로
접히지 말라고). 찾아 고르는 칸은 그 예외다 — 안 풀면 입력칸 넓이 그대로
버텨서 카드를 뚫는다. */
.row label > span.picker{flex:1 1 160px;white-space:normal;min-width:0}
/* ⚠️ 좁은 화면 규칙(`.card .row.wrap input{width:auto}`)이 더 구체적이라
그냥 두면 입력칸이 제 글자수(size)만큼 벌어져 카드를 뚫는다. 여기서
이겨야 한다 — 선택자를 짧게 줄이지 마라. */
.picker > input,.card .row.wrap .picker > input{margin:0;width:100%;min-width:0}
.pickmenu{position:absolute;z-index:40;left:0;right:0;top:calc(100% + var(--s1));
max-height:260px;overflow:auto;background:var(--surface);
border:1px solid var(--hair);border-radius:var(--r-md);
box-shadow:var(--glow);padding:var(--s1)}
.pickmenu.hide{display:none}
.pickmenu button{display:flex;width:100%;gap:var(--s2);align-items:baseline;
justify-content:space-between;text-align:left;cursor:pointer;
background:none;border:0;border-radius:var(--r-sm);
padding:var(--s2) var(--s3);font-family:var(--font);
font-size:var(--fs-sm);color:var(--ink)}
.pickmenu button:hover,.pickmenu button.on{background:var(--bg-2)}
.pickmenu button code{font-size:var(--fs-xs);color:var(--ink-3);
background:none;padding:0}
.pickmenu .none{padding:var(--s3);font-size:var(--fs-sm);color:var(--ink-3)}
/*
* 위로 뒤집힌 목록 — `placeMenu()`(lib.js)가 자리를 재서 붙여 준다.
*
* ⚠️ 세 종류 메뉴가 모양이 달라도 뒤집는 규칙은 하나다. 한 군데서만
* 처리하면 나머지 둘은 계속 화면 밖으로 나간다 — 실제로 회원 홈의
* 센터 고르는 칸이 하단 탭바에 깔려 있었다.
* ⚠️ `bottom` 으로 뒤집고 `top` 은 반드시 `auto` 로 되돌린다. CSS 가
* 위에서 `top:calc(100% + …)` 을 이미 걸어 뒀으므로, 안 풀면 위아래가
* 동시에 걸려 목록이 늘어난다.
*/
.selmenu.up,.pickmenu.up,.datemenu.up{
top:auto;bottom:calc(100% + var(--s1))}
/* ── 직접 그린 고르는 칸 (`mountSelect`) ──────────────────────
왜 `