/* 금전출납부 — 차분한 편집물 톤.
   얇은 선 · 부드러운 그림자 · 정갈한 라벨. 라임과 하늘색은 포인트로만 쓴다.
   테마는 :root[data-theme], 글꼴은 --ff 하나로 갈아끼운다. */

/* ── 기본 글꼴 3종 (앱이 처음부터 들고 있는 것) ────────────────
   근거 : MD/폰트-저작권-판정-20260728.md 1항 ✅ 임베딩 허용 · 4-1항 서브셋 허용(OFL) */
@font-face { font-family:'lb-free'; src:url('/assets/fonts/free-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'lb-free'; src:url('/assets/fonts/free-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'lb-free'; src:url('/assets/fonts/free-800.woff2') format('woff2'); font-weight:800; font-display:swap; }
/* ── 로고 글꼴 (사장님이 고르심 2026-08-18 : 원주체 Bold) ────────────────
   ⛔ **이름을 찍는 데만 쓴다.** 본문에 쓰지 말 것 — 로고는 늘 같은 모양이어야 알아본다.
   ⛔ 원주시 · SIL OFL 1.1 이라 임베딩·BI/CI 까지 허용된다
      (근거 : 폰트-저작권-판정-20260728.md).
   ⛔ 손님이 고르는 글꼴 목록(fonts.json)에는 안 넣는다. 넣으면 본문이 로고와 같아져
      이름이 이름으로 안 보인다. */
@font-face { font-family:'lb-logo'; src:url('/assets/fonts/wonju-b.woff2') format('woff2'); font-display:swap; }

/* 굴토끼는 굵기가 하나뿐이다 — 무게를 적지 않아야 브라우저가 굵은 글씨를 흉내 내 준다 */
@font-face { font-family:'lb-gool'; src:url('/assets/fonts/gooltokki.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'lb-kedu'; src:url('/assets/fonts/kedu-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'lb-kedu'; src:url('/assets/fonts/kedu-700.woff2') format('woff2'); font-weight:700 800; font-display:swap; }

/* 설명하는 글씨 전용 — 프리텐다드 (SIL OFL 1.1 · 길형진)
   메인 글씨(제목·금액)만 고객이 고른 글꼴이 들어가고, 나머지는 전부 이걸로 읽는다. */
@font-face { font-family:'lb-pre'; src:url('/assets/fonts/pre-400.woff2') format('woff2'); font-weight:400 500; font-display:swap; }
@font-face { font-family:'lb-pre'; src:url('/assets/fonts/pre-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'lb-pre'; src:url('/assets/fonts/pre-700.woff2') format('woff2'); font-weight:700 900; font-display:swap; }

:root{
  --ff:'lb-free';         /* 메인 글씨 — 고객이 설정에서 고른 글꼴이 여기 들어온다 */
  --ffui:'lb-pre';        /* 설명 글씨 — 늘 프리텐다드 */
  --sys:-apple-system,'Segoe UI',sans-serif;

  /* 라임 (기본) — 레퍼런스 사진에서 그대로 뽑은 색
     바탕 #E0FD7B · 글씨박스 라임 #C2F56D · 핑크 #FE86CD · 별 #F5CDE3 #9BB9E9 #E2FDF6 */
  --bg:#E0FD7B; --paper:#FFFFFF; --ink:#12140C; --sub:#5E6B3B; --faint:#8B9760;
  --line:#EBEBE3; --line2:#DCDCD2;
  --acc:#C2F56D;          /* 글씨박스 라임 */
  --acc2:#FE86CD;         /* 핑크 */
  --pop:#E8328A;          /* 진한 핑크 */
  --in:#17795A; --out:#DD3A6E;
  --star:1;               /* 별배경 진하기 */
  --mark:#FFFFFF;         /* 형광펜 색 — 바탕이 라임이라 흰색이 더 또렷하다 */
  /* ── 바탕 무늬 ────────────────────────────────────────────
     두 겹으로 깐다. --pat 이 뒤(무늬), --pat2 가 앞(흩뿌림).
     테마마다 아래 조리법을 골라 --pat / --pat2 에 담는다. 그림 파일은 하나도 안 쓴다.
     색은 --patc(뒤) · --patc2(앞) 로 테마가 정한다. */
  --pat:none; --pat-size:auto; --pat-pos:0 0; --pat-a:1;
  --pat2:none; --pat2-size:240px 240px; --pat2-pos:0 0; --pat2-a:1;
  --patc:transparent; --patc2:transparent;

  /* 깅엄 체크 — 줄무늬 두 겹을 겹치면 겹친 칸이 진해져 체크가 된다 */
  --gingham:
    repeating-linear-gradient(0deg, var(--patc) 0 13px, transparent 13px 26px),
    repeating-linear-gradient(90deg, var(--patc) 0 13px, transparent 13px 26px);
  /* 모눈종이 */
  --grid:
    repeating-linear-gradient(0deg, var(--patc) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, var(--patc) 0 1px, transparent 1px 34px);
  /* 흩뿌리는 것들 — 앞 겹(--pat2) 용 */
  --stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 320 320'%3E%3Cpath d='M28 18l4.2 8.6 9.4 1.4-6.8 6.6 1.6 9.4-8.4-4.4-8.4 4.4 1.6-9.4-6.8-6.6 9.4-1.4z' fill='%23F5CDE3'/%3E%3Cpath d='M126 46l3.2 6.6 7.2 1-5.2 5.1 1.2 7.2-6.4-3.4-6.4 3.4 1.2-7.2-5.2-5.1 7.2-1z' fill='%239BB9E9'/%3E%3Cpath d='M248 26l4.8 9.8 10.8 1.6-7.8 7.6 1.8 10.8-9.6-5-9.6 5 1.8-10.8-7.8-7.6 10.8-1.6z' fill='%23E2FDF6'/%3E%3Cpath d='M64 118l3.6 7.4 8.2 1.2-5.9 5.8 1.4 8.2-7.3-3.8-7.3 3.8 1.4-8.2-5.9-5.8 8.2-1.2z' fill='%239BB9E9'/%3E%3Cpath d='M196 108l4.4 9 10 1.4-7.2 7 1.7 10-8.9-4.7-8.9 4.7 1.7-10-7.2-7 10-1.4z' fill='%23F5CDE3'/%3E%3Cpath d='M292 132l3 6.2 6.8 1-4.9 4.8 1.2 6.8-6.1-3.2-6.1 3.2 1.2-6.8-4.9-4.8 6.8-1z' fill='%23FFFFFF'/%3E%3Cpath d='M22 214l4.4 9 10 1.4-7.2 7 1.7 10-8.9-4.7-8.9 4.7 1.7-10-7.2-7 10-1.4z' fill='%23E2FDF6'/%3E%3Cpath d='M120 240l3.4 7 7.8 1.2-5.6 5.5 1.3 7.8-6.9-3.6-6.9 3.6 1.3-7.8-5.6-5.5 7.8-1.2z' fill='%23FFFFFF'/%3E%3Cpath d='M232 216l5 10.2 11.2 1.6-8.1 7.9 1.9 11.2-10-5.2-10 5.2 1.9-11.2-8.1-7.9 11.2-1.6z' fill='%239BB9E9'/%3E%3Cpath d='M74 292l3.2 6.6 7.2 1-5.2 5.1 1.2 7.2-6.4-3.4-6.4 3.4 1.2-7.2-5.2-5.1 7.2-1z' fill='%23F5CDE3'/%3E%3Cpath d='M172 300l3.8 7.8 8.6 1.2-6.2 6.1 1.5 8.6-7.7-4-7.7 4 1.5-8.6-6.2-6.1 8.6-1.2z' fill='%23E2FDF6'/%3E%3Cpath d='M284 272l4 8.2 9 1.3-6.5 6.4 1.5 9-8-4.2-8 4.2 1.5-9-6.5-6.4 9-1.3z' fill='%23F5CDE3'/%3E%3C/svg%3E");
  --flowers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cdefs%3E%3Cg id='f'%3E%3Ccircle r='3.1' cy='-6.6' fill='%23E7A6BC'/%3E%3Ccircle r='3.1' cx='6.3' cy='-2.1' fill='%23E7A6BC'/%3E%3Ccircle r='3.1' cx='3.9' cy='5.4' fill='%23E7A6BC'/%3E%3Ccircle r='3.1' cx='-3.9' cy='5.4' fill='%23E7A6BC'/%3E%3Ccircle r='3.1' cx='-6.3' cy='-2.1' fill='%23E7A6BC'/%3E%3Ccircle r='2.5' fill='%23EFD79B'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23f' x='24' y='26'/%3E%3Cuse href='%23f' x='88' y='16'/%3E%3Cuse href='%23f' x='58' y='62'/%3E%3Cuse href='%23f' x='14' y='92'/%3E%3Cuse href='%23f' x='102' y='94'/%3E%3C/svg%3E");
  --sh:0 1px 2px rgba(20,24,10,.05), 0 6px 18px rgba(20,24,10,.07);
  --sh2:0 2px 6px rgba(20,24,10,.08), 0 14px 34px rgba(20,24,10,.14);

  --r-card:18px; --r-box:14px; --r-chip:999px;
}

/* ── 테마 ────────────────────────────────────────────────────
   여덟 개는 사진에서 뽑았다 (C:\Users\user\Downloads\drive-download-20260728T155412Z-1-001).
   바탕 무늬는 전부 CSS·SVG 로 그린다 — 그림 파일이 하나도 없어 어떤 화면에서도 안 깨진다.
   ⛔ 테마마다 --pat / --pat2 관련 변수를 전부 적을 것.
      안 적으면 설정 화면 미리보기(중첩 data-theme)에서 바깥 테마 무늬가 새어 들어온다. */

/* 라임 — 맑은 라임 바탕에 별만 흩뿌린 기본 화면 (모눈은 뺐다 · 사장님 요청 2026-07-29) */
[data-theme="lime"]{ --bg:#E0FD7B; --paper:#FFFFFF; --ink:#12140C; --sub:#5E6B3B; --faint:#8B9760;
  --line:#EBEBE3; --line2:#DCDCD2; --acc:#C2F56D; --acc2:#FE86CD; --pop:#E8328A; --in:#17795A; --out:#DD3A6E;
  --mark:#FFFFFF;
  --patc:transparent; --pat:none; --pat-size:auto; --pat-pos:0 0; --pat-a:1;
  --pat2:var(--stars); --pat2-size:240px 240px; --pat2-pos:0 0; --pat2-a:1; }

/* 블루체크 — 파란 깅엄 + 별 흩뿌림 */
/* ⛔ --pat 에 var(--gingham) 을 쓰면 안 된다.
   --gingham 은 :root 에서 만들어지면서 **그 자리의 --patc 가 이미 박혀** 내려온다.
   그래서 본 화면은 멀쩡한데 설정 화면 미리보기(중첩 data-theme)에서는
   바깥 테마의 색으로 나온다 — 블루체크와 핑크체크가 똑같이 파랗게 보이던 이유다
   (2026-07-31 사장님 지적). 무늬는 여기서 직접 적어 --patc 가 이 자리에서 풀리게 한다. */
[data-theme="bluecheck"]{ --bg:#EDE7DA; --paper:#FFFFFF; --ink:#1B2635; --sub:#5A6B80; --faint:#8D9BAC;
  --line:#E7E4DC; --line2:#D8D4C9; --acc:#F2D24E; --acc2:#7392BB;
  /* 파란 깅엄에 새빨강은 튄다. **찐핑크**로 간다 (사장님 지시 2026-08-01).
     파랑과 분홍은 서로를 살리고, 빨강보다 덜 사납다. */
  --pop:#E0357F; --in:#2A7A63; --out:#E0357F;
  --mark:#F2D24E;
  --patc:rgba(96,133,187,.36);
  --pat:repeating-linear-gradient(0deg, var(--patc) 0 13px, transparent 13px 26px),
        repeating-linear-gradient(90deg, var(--patc) 0 13px, transparent 13px 26px);
  --pat-size:auto; --pat-pos:0 0; --pat-a:1;
  --pat2:var(--stars); --pat2-size:240px 240px; --pat2-pos:0 0; --pat2-a:.75; }


/* 핑크체크 — 분홍 깅엄 위에 잔꽃 */
[data-theme="pinkcheck"]{ --bg:#F8F1E6; --paper:#FFFFFF; --ink:#33222A; --sub:#8B6E78; --faint:#B79EA8;
  --line:#F0E9DE; --line2:#E1D8CB; --acc:#F2B8CA; --acc2:#E8D9A8; --pop:#D9648A; --in:#3F7A63; --out:#D9648A;
  --mark:#F2B8CA;
  --patc:rgba(238,166,192,.34);
  /* ⛔ 위 블루체크 주석과 같은 이유 — var(--gingham) 을 쓰면 미리보기에서 색이 안 먹는다 */
  --pat:repeating-linear-gradient(0deg, var(--patc) 0 13px, transparent 13px 26px),
        repeating-linear-gradient(90deg, var(--patc) 0 13px, transparent 13px 26px);
  --pat-size:auto; --pat-pos:0 0; --pat-a:1;
  --pat2:var(--flowers); --pat2-size:120px 120px; --pat2-pos:0 0; --pat2-a:.9; }







*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
/* ⛔ html 에도 바탕색을 준다. 안 주면 폰에서 화면을 위로 당길 때(오버스크롤)와
   시계·배터리가 있는 맨 윗줄이 흰색으로 남는다 (2026-07-31 사장님 지적). */
html{font-size:18px;background:var(--bg);}
/* ⛔ 자간을 좁히지 말 것. 손글씨 서체가 24종이라 음수 자간을 주면 글자가 서로 붙는다.
   (2026-07-29 사장님 지적) 좁혀야 할 곳이 있으면 그 자리에만 아주 살짝. */
body{
  /* ⛔ body 에 바탕색을 주면 안 된다. 무늬(::before·::after)는 z-index 가 음수라
     **body 자기 배경 뒤**에 그려진다. html 에 색이 생기는 순간 body 배경이 캔버스로
     넘어가지 않고 제자리에서 칠해져 무늬를 통째로 덮는다.
     (2026-08-01 실제로 겪음 — 모든 테마가 민자 색만 나왔다. 색은 html 이 맡는다) */
  margin:0; background:transparent; color:var(--ink);
  font-family:var(--ffui),var(--sys); font-size:18px; line-height:1.5;
  letter-spacing:0; -webkit-font-smoothing:antialiased;
  /* 폰에 설치했을 때 화면이 시계·배터리 아래까지 올라간다(status-bar-style=black-translucent).
     무늬는 그 위까지 깔리고(::before/::after 가 fixed inset:0), 글자만 겹치지 않게 밀어 둔다. */
  padding-top:env(safe-area-inset-top);
  /* ⛔ 아래 여백은 **탭막대(96px) + 계산기 동그라미(70px)** 다 (사장님 지적 2026-08-26 :
     「적어두실것 옆에 플러스 버튼이 계산기하고 겹쳐서 잘 안눌려요」 · 분석 탭에서는
      계산기가 「들어온 돈」 금액을 덮고 있었다).
     계산기는 fixed 로 오른쪽 아래 104~158px 자리에 늘 떠 있다. 96px 만 비워 두면
     끝까지 내렸을 때 **맨 아래 카드가 그 동그라미 밑에 깔린다** — 홈의 ＋ 도, 분석의
     금액도 다 가려진다.
     ⛔ 계산기를 옮겨서 풀지 않는다. 탭막대와의 8px 간격이 이미 손가락 경계다(.calcfab).
     ⛔ 이 값을 96px 로 되돌리지 말 것. 그러면 겹침이 그대로 돌아온다.
     ⛔ **마우스 쓰는 큰 화면에서는 도로 96px** 이다 (아래 media). 거기서는 떠 있는
        동그라미(.phone-only)가 아예 없어서 70px 이 그냥 빈 자리로만 남는다.
        조건을 .phone-only 를 감추는 줄(900px + pointer:fine)과 **똑같이** 맞춰 둘 것 —
        손가락으로 쓰는 큰 태블릿에는 동그라미가 그대로 있다. */
  padding-bottom:calc(96px + 70px + env(safe-area-inset-bottom));
}
@media (min-width:900px) and (pointer:fine){
  body{padding-bottom:calc(96px + env(safe-area-inset-bottom));}
}
/* 앞 무늬 — 흩뿌리는 것들(별·꽃·하트…). 스크롤해도 따라오지 않게 fixed. */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--pat2); background-size:var(--pat2-size);
  background-position:var(--pat2-pos); opacity:var(--pat2-a);
}
/* 뒤 무늬 — 체크·줄무늬·물방울 같은 바탕결 */
body::after{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:var(--pat); background-size:var(--pat-size);
  background-position:var(--pat-pos); opacity:var(--pat-a);
}

h1,h2,h3{margin:0;font-weight:800;letter-spacing:0;line-height:1.2;}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;border:none;background:none;padding:0;}
input,select,textarea{font-family:inherit;font-size:18px;color:var(--ink);}
svg{display:block;}

/* ── 메인 글씨 ────────────────────────────────────────────
   고객이 고른 글꼴은 여기 적힌 것들에만 들어간다.
   나머지(설명·부제·라벨·버튼·숫자 목록)는 프리텐다드로 읽는다. */
/* ⛔ **숫자도 고른 글꼴을 따라간다** (사장님 결정 2026-08-06).
   예전엔 큰 숫자(.hero .big·.nsStat b)만 따라가고 목록·표의 금액은 늘 프리텐다드였다.
   그래서 버티기 카드에서 **같은 10,316이 위아래로 다른 모양**으로 나왔다 —
   요약칸은 몽토리, 바로 밑 「하루 한도」는 프리텐다드. 한 화면에 두 글씨체가 섞였다.
   이제 .num 이 붙은 곳은 전부 같이 바뀐다. 고른 글꼴이 화면 전체에서 하나로 간다.
   ⛔ .day b(며칠)·.bd2(일)처럼 **날짜 숫자**도 같이 넣는다. 금액만 바뀌면 또 섞인다. */
.hrow .t, .mnav .m, .hero .big, .hero .cap, .sechead .t, .sheet h2, #gate h1,
.sticker, .bubble, .tx .bd .t1, .fixrow .nm, .empty b, .fnt .nm,
.nsHero .n b, .nsHero .msg b, .nsStat b,
.num, .fixrow .day b, .bi .bd2, .daygroup .dh b
  { font-family:var(--ff),var(--ffui),var(--sys); }
.hidden{display:none !important;}
/* ⛔ 손글씨 글꼴에는 폭이 같은 숫자(tabular)가 없는 것이 많다. 없으면 브라우저가
   그냥 무시하고 원래 폭으로 그린다 — 표가 조금 흔들려도 글꼴이 우선이다. */
.num{font-variant-numeric:tabular-nums;letter-spacing:0;}

/* ── 공통 조각 ───────────────────────────────────────────── */
.wrap{max-width:520px;margin:0 auto;padding:0 18px;}

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--sh); padding:20px; margin-bottom:14px;
}
.card.flat{box-shadow:none;background:transparent;border-style:dashed;}

/* 형광펜 — 글자 뒤에 얇게 깐다 */
.mark{background:linear-gradient(transparent 58%,var(--acc) 58%);padding:0 2px;}

/* 글씨박스 — 레퍼런스(8160) 그대로. 각진 색면에 굵은 글씨를 꽉 채운다.
   라임 바탕에 검은 글씨 / 검은 바탕에 라임 글씨, 두 벌을 짝으로 쓴다. */
.sticker{
  display:inline-block; background:var(--acc); color:#101208; border:none; border-radius:0;
  padding:4px 11px; font-weight:800; font-size:17px; line-height:1.35; letter-spacing:0;
}
.sticker.dark{background:#101208;color:var(--acc);}
.sticker.pink{background:var(--acc2);color:#101208;}
.sticker.quiet{background:var(--paper);color:var(--sub);border:1px solid var(--line2);font-weight:700;}

.chip{
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--line2); border-radius:var(--r-chip);
  padding:8px 15px; font-size:16px; font-weight:600; background:var(--paper); color:var(--sub);
  transition:background .12s,color .12s,border-color .12s;
}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.chip.sm{padding:5px 12px;font-size:17px;}
/* ⛔ 폰에서 눌린 게 안 보였다 (사장님 지적 2026-08-06).
   손가락이 닿는 순간 색이 뒤집혀야 「눌렸다」를 안다. 서버 답을 기다릴 일이 아니다.
   touch-action:manipulation 은 폰 브라우저가 「두 번 두드려 확대」를 기다리느라
   넣던 300ms 를 없앤다 — 이것만으로도 체감이 확 달라진다. */
.chip{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.chip:active{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:scale(.94);}
.chip.on:active{background:var(--paper);color:var(--sub);border-color:var(--line2);}
/* 서버에 다녀오는 중 — 이미 화면은 바뀌었고, 다시 못 누르게만 잡아 둔다 */
.chip.busy{opacity:.5;}
/* 끄기/켜기는 손가락으로 눌러야 하니 닿는 자리를 넓힌다 (글자 크기는 그대로) */
.fixrow .chip.sm{padding:9px 14px;position:relative;}
.fixrow .chip.sm::after{content:"";position:absolute;inset:-8px -6px;}
/* ⛔ 색으로 갈라 준다 (사장님 지시 2026-08-08 : 「끄기 켜기 버튼이 잘 구분이 안되어서」).
   둘 다 흐린 회색 테두리라 목록을 훑을 때 어느 줄이 꺼진 것인지 안 보였다.
     끄기 = 지금 살아 있다 · 누르면 끈다  → 나가는 돈 색(테두리·글자만, 잔잔하게)
     켜기 = 지금 꺼져 있다 · 누르면 살린다 → 들어오는 돈 색으로 **채운다**
   ⛔ 꺼진 줄을 opacity 로 통째로 흐리면 **단추도 같이 흐려지고 되돌릴 수 없다** —
      opacity 는 쌓임 맥락을 만들어서 자식의 opacity:1 이 안 먹는다.
      그래서 흐리게 하는 것을 줄이 아니라 **줄의 내용**으로 옮겼다 (아래 .fixrow.off). */
.fixrow [data-toggle]{border-color:var(--out);color:var(--out);font-weight:700;}
.fixrow.off [data-toggle]{background:var(--in);border-color:var(--in);color:#fff;}
.fixrow.off [data-toggle]:active{filter:brightness(.92);background:var(--in);color:#fff;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line2); border-radius:13px; background:var(--paper);
  padding:16px 20px; font-weight:700; font-size:18px; transition:opacity .12s,transform .08s;
}
.btn:active{transform:scale(.985);}
.btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink);}
/* ⛔ 단추 글자는 세로로 서지 않는다 (사장님 지시 2026-08-07).
   좁은 자리에 밀리면 「넣기」가 「넣 / 기」로 끊겨 단추가 아니라 얼룩으로 보였다.
   한글은 낱말 안에 끊을 자리가 따로 없어서 브라우저가 글자마다 끊는다 —
   keep-all 이 낱말 속을 못 끊게 막는다. 끊을 자리는 띄어쓰기이거나,
   우리가 <br> 로 정한 곳(「한 번만 / 예정」)뿐이다.
   nowrap 이 아니라 keep-all 인 이유: 「팔 것에 넣기」처럼 띄어쓰기가 있는 긴 이름은
   좁은 폰에서 띄어쓰기 자리에 접혀야지, 안 접히고 단추 밖으로 넘쳐 잘리면 더 나쁘다. */
.btn,.chip{word-break:keep-all;}
/* 두 줄짜리 단추 — 끊는 자리를 우리가 정한 것(「한 번만 / 예정」). 줄 간격을 좁혀 둔다 */
.btn.two{line-height:1.25;padding-top:12px;padding-bottom:12px;}
/* 아이콘을 글자 왼쪽에 붙이는 단추 (사장님 지시 2026-07-31 — 저장 아이콘은 왼쪽) */
.btn.ico{display:inline-flex;align-items:center;justify-content:center;gap:9px;}
.btn.ico svg{width:20px;height:20px;flex:none;}
.btn.ghost{background:transparent;border-color:transparent;color:var(--sub);}
.btn.wide{width:100%;}
/* 카카오페이 — ⛔ 노랑(#FEE500)과 검정 글씨는 **카카오가 정한 것**이다. 우리 테마 색으로 바꾸지 말 것.
   손님은 색으로 알아본다. 라임색 카카오페이 단추는 카카오페이로 안 보인다. */
.btn.kakaopay{background:#FEE500;color:#191600;border-color:#FEE500;font-weight:800;}
.btn.kakaopay:hover{filter:brightness(.96);}
.btn.danger{background:transparent;color:var(--pop);border-color:var(--pop);}

/* 말풍선 — 레퍼런스 그대로. 흰 바탕 + 얇은 먹선 + 아래로 뻗는 꼬리 */
.bubble{
  position:relative;background:var(--paper);border:1.5px solid var(--ink);
  border-radius:22px;padding:15px 20px;font-size:16.5px;color:var(--ink);line-height:1.6;
  font-weight:700;text-align:center;margin:0 0 26px;
}
/* 강조는 글자 아래만 긋지 않고 통째로 박스로 감싼다 (레퍼런스 8160)
   inline-block 이라야 박스가 줄 중간에서 잘리지 않는다 */
.bubble b{display:inline-block;font-weight:800;background:var(--acc);color:#101208;padding:2px 8px;margin:2px 1px;}
.bubble::before,.bubble::after{content:'';position:absolute;bottom:-13px;left:32px;
  border-left:11px solid transparent;border-right:11px solid transparent;border-top:13px solid var(--ink);}
.bubble::after{bottom:-10px;border-top-color:var(--paper);}

/* ── 잠금 화면 ─────────────────────────────────────────────
   바탕은 고객이 지난번 고른 테마(코드가 localStorage 에서 먼저 입힌다).
   처음 오는 사람에게는 기본 테마인 라임이 나온다. */
/* ⛔ **가운데 정렬로 세우지 않는다** (사장님 지적 2026-08-18 : 「잘려 보여」).
   flex 의 justify-content:center 는 내용이 화면보다 길면 **위를 잘라 먹고**,
   잘린 쪽은 밀어도 안 나온다. 카드 위로 도장 세 개가 26px 삐져나와 있어서 특히 잘 잘린다.
   ⛔ 그래서 위에서부터 쌓고 **auto 여백**으로 가운데에 놓는다. 자리가 모자라면 여백이
      저절로 0 이 되고, 그때는 밀어서 위까지 볼 수 있다.
   ⛔ 위쪽 여백을 44px 로 둔다 — 도장이 삐져나온 26px 보다 넉넉해야 안 닿는다. */
/* ── 파는 페이지의 폰 테두리 안에서 돌 때 (?demo=1 · 2026-08-19) ─────────────
   ⛔ 이 앱을 손대는 것이 아니다. **폰 껍데기 때문에 생기는 두 가지**만 메운다 :
     · 폰 위쪽의 검은 섬이 머리줄을 덮는다  → 그만큼 아래로 민다
     · 폰 안에 회색 스크롤막대가 그어진다   → 감춘다 (진짜 폰에는 없는 것이다)
   ⛔ 여백 값은 landing.css 의 --pz(줄이는 비율)와 짝이다. 섬은 유리칸 위 26px 까지
      내려오니, 안쪽에서는 26÷0.6 ≒ 44px 아래부터 글이 시작돼야 한다. */
html.inframe{scrollbar-width:none;}
html.inframe::-webkit-scrollbar{width:0;height:0;}
html.inframe body{padding-top:46px;}
#gate{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:18px;padding:44px 26px 26px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--bg);}
#gate .gcard{margin-top:auto;}
#gate .glinks{margin-bottom:auto;}
/* 잠금 화면에도 테마 무늬가 깔린다 (body 무늬는 z-index 가 뒤라 가려진다) */
#gate::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--pat);background-size:var(--pat-size);background-position:var(--pat-pos);opacity:var(--pat-a);}
#gate::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--pat2);background-size:var(--pat2-size);background-position:var(--pat2-pos);opacity:var(--pat2-a);}

.gcard{position:relative;z-index:1;width:min(360px,92vw);background:var(--paper);
  border:1px solid var(--line2);border-radius:26px;box-shadow:var(--sh2);
  /* ⛔ 위 여백은 도장 셋이 카드 밖으로 26px 올라타 있어서 더 필요하다.
     사장님 지시 2026-08-19 : 위만 5% 더. %는 카드가 놓인 폭을 기준으로 잡히니
     좁은 폰에서는 알아서 덜 벌어진다. */
  padding:calc(34px + 5%) 26px 26px;display:flex;flex-direction:column;align-items:center;gap:6px;}
/* 도장 세 개를 카드 위쪽에 삐뚤빼뚤 얹는다 — 무엇을 하는 앱인지 한눈에 */
.gstamps{position:absolute;top:-26px;left:0;right:0;display:flex;justify-content:center;gap:14px;}
.gstamps span{display:block;width:52px;height:52px;color:var(--pop);}
.gstamps span:nth-child(1){transform:rotate(-11deg);opacity:.9;}
.gstamps span:nth-child(2){transform:rotate(4deg) translateY(-5px);}
.gstamps span:nth-child(3){transform:rotate(13deg);opacity:.85;}
.gstamps svg{width:100%;height:100%;}

/* 이름 위 한 줄 = 부제 (2026-08-19 사장님 지시로 「오늘도 한 줄」 자리에 올라왔다).
   ⛔ 자간을 .2em 로 되돌리지 말 것 — 짧은 말일 때 쓰던 값이라, 열세 글자짜리 부제가
      좁은 폰(360 미만)에서 두 줄로 넘어간다. */
#gate .kicker{margin-top:10px;font-size:14.5px;font-weight:700;letter-spacing:.02em;color:var(--sub);
  white-space:nowrap;}
/* ⛔ 잠금 화면의 이름도 **로고**다 (2026-08-18). 여기 있던 var(--ff) 는 손님이 고른
   글꼴이라, 몽토리를 쓰시는 분과 조선100년체를 쓰시는 분이 **서로 다른 로고**를 보게 된다.
   ⛔ 로고 글꼴이 늦게 오면 이름이 한 번 바뀌어 보인다 — index.html 에서 미리 받아 둔다. */
#gate h1{font-family:'lb-logo',var(--ffui),var(--sys);font-size:38px;line-height:1.15;}
/* 부제 — 이름 바로 밑 한 줄. ⛔ 아래 설명 세 줄과 **같은 말을 하지 않는다.**
   저 셋은 「무엇을 해 주나」고 이 한 줄은 「무슨 앱인가」다. */
#gate .gsub{margin:7px 0 0;font-size:16px;font-weight:700;color:var(--sub);letter-spacing:.01em;}
/* ⛔ word-break:keep-all 을 빼지 말 것 — 없으면 좁은 폰에서 「들어옵니다.」가
   「들 / 어옵니다.」처럼 낱말 가운데서 잘려 글이 너덜너덜해 보인다(2026-08-14 사장님 지적).
   balance 는 줄 길이를 고르게 나눠 한 낱말만 덜렁 남는 줄을 없앤다. */
#gate p{color:var(--sub);margin:6px 0 0;font-size:17.5px;text-align:center;line-height:1.65;font-weight:600;
  word-break:keep-all;overflow-wrap:break-word;text-wrap:balance;}
#gate p b{color:var(--ink);font-weight:800;}
/* 설명 세 줄 — **번호를 달고 왼쪽에** 세운다 (사장님 지시 2026-08-18).
   ⛔ 가운데 정렬을 되살리지 말 것. 줄마다 시작 자리가 달라지면 몇 가지인지 안 보인다.
   ⛔ 위의 이름·부제와 선 하나로 갈라 둔다 — 부제가 설명 첫 줄처럼 읽히지 않게. */
#gate .glist{list-style:none;width:100%;margin:20px 0 0;padding:18px 2px 0;
  border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px;text-align:left;}
#gate .glist li{display:flex;align-items:flex-start;gap:10px;}
#gate .glist i{flex:none;width:23px;height:23px;margin-top:2px;border-radius:50%;
  background:var(--ink);color:var(--bg);font-style:normal;font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;}
/* ⛔ **줄을 안 바꾼다** (사장님 지시 2026-08-18 : 「꼭 한 줄씩」).
   nowrap 이라 글이 길면 넘쳐 잘린다 — 그래서 app.js 의 한줄맞춤()이 크기를 줄여 맞춘다.
   ⛔ flex:1 과 min-width:0 을 빼지 말 것. 없으면 칸이 글자 폭만큼 벌어져서
      「넘쳤다」를 잴 수가 없다(scrollWidth 와 clientWidth 가 같아진다). */
#gate .glist span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;
  font-size:16.5px;font-weight:600;color:var(--sub);line-height:1.55;}
#gate .glist b{color:var(--ink);font-weight:800;}
#gate form{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:20px;}
#gate input{background:var(--bg);border:1px solid var(--line2);border-radius:14px;
  padding:16px;text-align:center;font-size:22px;font-weight:700;letter-spacing:.3em;outline:none;width:100%;}
#gate input:focus{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}
#gate .e{color:var(--pop);font-weight:700;min-height:22px;text-align:center;font-size:17px;}
/* 카카오 버튼 — 색과 글자는 카카오가 정한 그대로 써야 한다(로그인 버튼 규정) */
.kbtn,.gbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:22px;
  border-radius:14px;padding:16px;font-size:17px;font-weight:800;text-decoration:none;}
.kbtn{background:#FEE500;color:#191600;}
/* 구글은 「흰 바탕 + 회색 테」가 브랜드 규정이다. 노란 버튼과 나란히 서도 위계가 안 흔들린다. */
.gbtn{background:#FFFFFF;color:#1F1F1F;border:1px solid #DADCE0;margin-top:10px;}
.kbtn svg,.gbtn svg{width:22px;height:22px;flex:none;}
.kbtn:active,.gbtn:active{filter:brightness(.95);}
.gmore{margin-top:12px;font-size:16px;font-weight:700;color:var(--faint);
  text-decoration:underline;text-underline-offset:3px;}

.gfoot{position:relative;z-index:1;font-family:var(--ff),var(--ffui),var(--sys);
  font-size:17.5px;font-weight:700;color:var(--ink);opacity:.5;letter-spacing:.06em;}

/* 들어올 길이 하나도 없을 때 나오는 한 줄. 손님 잘못이 아니라는 걸 알려 준다. */
/* 문이 닫혔을 때 — **소개 페이지로 가는 길을 크게** 낸다 (2026-08-18).
   ⛔ 한 줄짜리 안내로 두지 말 것. 못 들어온 손님이 볼 것이 없으면 그대로 나간다. */
.gshut{margin-top:18px;width:100%;text-align:center;word-break:keep-all;}
.gshut b{display:block;font-size:18px;font-weight:800;color:var(--ink);line-height:1.5;}
.gshut em{display:block;margin-top:5px;font-style:normal;font-size:15.5px;font-weight:600;
  color:var(--sub);line-height:1.6;}
.gshut .btn{margin-top:14px;}

/* 잠금 화면 아래 작은 길 — 소개·약관·방침.
   ⛔ 크게 두지 않는다. 여기서 눈에 걸려야 하는 것은 로그인 단추다.
      다만 **로그인 전에 읽을 수 있어야** 동의를 받았다고 할 수 있어서 없앨 수는 없다. */
.glinks{position:relative;z-index:1;margin-top:14px;display:flex;gap:14px;
  flex-wrap:wrap;justify-content:center;}
.glinks a{font-size:15px;font-weight:700;color:var(--ink);opacity:.45;
  text-decoration:underline;text-underline-offset:3px;}
.glinks a:hover{opacity:.8;}

/* ── 머리 ──────────────────────────────────────────────────
   ⛔ 앱 이름과 달 이름은 카드 위가 아니라 **테마 그림 위**에 바로 앉는다.
      그래서 흰 종이용 글씨색(--ink)을 쓰면 어두운 테마에서 안 보인다.
      --onbg 는 「그림 위에 올릴 글씨색」이다. CSS 테마엔 없으니 --ink 로 되돌아간다. */
/* ⛔ 머리는 **글이 아니라 손잡이 자리**다 — 꾹 눌러도 글자가 잡히면 안 된다
   (사장님 지적 2026-08-17 : 「음량버튼을 꾹 눌렀더니 아이필그레잇이 복사되어버리네」).
   음량 판을 꾹 눌러 여는데, 아이폰이 그 손짓을 **글자 고르기**로 받아 「복사」 딱지를 띄웠다.
   ⛔ 장부 내용에는 걸지 말 것. 손님이 금액·메모를 골라 복사할 수 있어야 한다. */
header{padding:20px 0 4px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.hrow{display:flex;align-items:center;gap:10px;}
/* ⛔ 머리줄의 이름은 **로고**다. 손님이 글꼴을 바꾸셔도 이 자리는 안 바뀐다 —
      var(--ff) 를 쓰면 테마마다 로고가 달라져서 알아볼 수가 없다. */
.hrow .t{font-family:'lb-logo',var(--ffui),var(--sys);
  font-size:22px;font-weight:800;letter-spacing:0;
  color:var(--onbg,var(--ink));text-shadow:var(--onbgsh,none);}
/* 부제 — 파는 페이지 첫 화면에만 (앱 머리줄은 자리가 좁다) */
.hsub{margin:3px 0 0;font-size:15px;font-weight:700;letter-spacing:.01em;
  color:var(--onbg2,var(--sub));text-shadow:var(--onbgsh,none);}
.hrow .sp{margin-left:auto;}
/* ⛔ 꾹 눌러 여는 단추다 — **고르기·확대·길게눌러 메뉴를 전부 막는다** (2026-08-17).
      안 막으면 아이폰이 꾹 누름을 글자 고르기로 받아 「복사」 딱지가 뜬다. */
.iconbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--paper);
  display:flex;align-items:center;justify-content:center;color:var(--sub);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.iconbtn svg{pointer-events:none;}
.iconbtn:active{background:var(--bg);}
.iconbtn svg{width:20px;height:20px;}
/* 배경음악이 켜져 있을 때 (2026-08-17) — 소리가 나고 있다는 것은 화면에도 보여야 한다.
   ⛔ 소리로만 알리면, 이어폰을 안 끼신 분은 왜 이 단추가 켜져 있는지 모른다. */
.iconbtn.on{border-color:var(--ink);color:var(--ink);background:var(--acc);}
/* 켜 두었지만 음량을 0 으로 내린 때 — 켠 티는 내되 소리는 안 난다는 것을 연하게 알린다 */
.iconbtn.on.mute{background:var(--line);color:var(--faint);border-color:var(--line2);}

/* 음량 판 — 배경음악 단추를 **꾹 누르면** 열린다 (사장님 지시 2026-08-17 :
   「고객이 직접 음량을 조절해서 키울수 있도록」).
   ⛔ body 에 붙는다(bgm.js). 머리 안에 넣으면 잘린다. 자리는 코드가 잡는다.
   ⛔ 앱과 랜딩이 같은 판을 쓴다 — 두 페이지 다 app.css 를 불러온다. */
.bgmpop{position:fixed;z-index:60;display:flex;align-items:center;gap:10px;
  background:var(--paper);border:1px solid var(--line2);border-radius:999px;
  padding:9px 15px;box-shadow:0 6px 20px rgba(20,24,10,.16);animation:fade .16s ease;}
.bgmpop s{text-decoration:none;font-size:15px;font-weight:700;color:var(--faint);flex:none;}
/* ⛔ 손가락으로 끌 수 있어야 한다 — 막대는 얇아도 손잡이는 크게 */
.bgmpop input[type=range]{width:132px;-webkit-appearance:none;appearance:none;height:6px;
  background:var(--line);border-radius:99px;outline:none;}
.bgmpop input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;
  border-radius:50%;background:var(--ink);border:3px solid var(--paper);box-shadow:0 1px 4px rgba(0,0,0,.25);}
.bgmpop input[type=range]::-moz-range-thumb{width:24px;height:24px;border:3px solid var(--paper);
  border-radius:50%;background:var(--ink);}
.bgmpop i{font-style:normal;font-size:15px;font-weight:800;color:var(--ink);
  min-width:44px;text-align:right;flex:none;}

/* 달 넘기기 */
.mnav{display:flex;align-items:center;justify-content:space-between;margin:18px 0 16px;}
.mnav .m{width:auto;height:auto;font-size:23px;font-weight:800;letter-spacing:0;padding:0;background:none;border:none;
  color:var(--onbg,var(--ink));text-shadow:var(--onbgsh,none);}
.mnav .m b{font-weight:800;}
.mnav .m small{font-size:17px;font-weight:600;color:var(--onbg2,var(--faint));margin-left:8px;letter-spacing:0;
  text-shadow:var(--onbgsh,none);}
.mnav .arr{display:flex;gap:6px;}
.mnav .arr button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper);color:var(--sub);display:flex;align-items:center;justify-content:center;}
.mnav .arr button svg{width:16px;height:16px;}
.mnav .arr button:disabled{opacity:.3;}

/* ── 홈 히어로 ───────────────────────────────────────────── */
.hero{padding:20px;}
.hero .cap{display:inline-block;background:#101208;color:var(--acc);border:none;
  border-radius:0;padding:4px 11px;font-size:17px;font-weight:800;letter-spacing:0;margin-bottom:11px;}
.hero .big{font-size:42px;font-weight:800;letter-spacing:0;line-height:1.05;margin:2px 0 4px;}
/* 잔액 숫자를 눌러 고친다 (사장님 지시 2026-08-14). button 이라 브라우저 기본 모양을 되돌린다.
   ⛔ 색이나 밑줄로 꾸미지 않는다 — 화면에서 제일 큰 글자라 꾸미면 시끄럽다.
      눌리는 것은 손가락을 대 보면 안다(누를 때만 살짝 눌린다). */
.hero .bigedit{display:block;width:100%;text-align:left;background:none;border:none;padding:0;
  font-family:inherit;color:inherit;cursor:pointer;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;}
.hero .bigedit:active{opacity:.6;}
.hero .big small{font-size:19px;font-weight:700;color:var(--sub);margin-left:4px;letter-spacing:0;}
.hero .big.minus{color:var(--out);}
.hero .sub{font-size:17px;color:var(--faint);font-weight:600;}
/* 「카드·고정지출 내고 남는 돈」 — 잔액 바로 밑 (사장님 지시 2026-08-17).
   ⛔ 큰 숫자와 **선 하나로 갈라** 둔다. 안 그으면 42px 숫자에 딸린 꼬리처럼 붙어
      두 수가 한 덩어리로 읽힌다.
   ⛔ 이름과 금액을 한 줄 좌우 끝에 세운다 — 잔액에서 뺀 값이라는 게 위아래로 보여야 한다. */
.hero .herofree{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:13px;padding-top:12px;border-top:1px solid var(--line);}
.hero .herofree s{text-decoration:none;font-size:15.5px;font-weight:700;color:var(--faint);}
.hero .herofree b{font-size:19px;font-weight:800;white-space:nowrap;}
.hero .herofree.minus b{color:var(--out);}
/* 이 줄을 누르면 셈이 그대로 펼쳐진다 (사장님 2026-09-01).
   ⛔ 새 모양을 짓지 않았다. 위 .herofree 를 그대로 쓰고, 눌리는 줄이라는 표시(▾)만 붙인다. */
.hero button.herofree{width:100%;background:none;border:none;font:inherit;color:inherit;
  text-align:left;cursor:pointer;padding:12px 0 0;}
.hero button.herofree:active{opacity:.6;}
.hero button.herofree s::after{content:' ▾';font-size:12px;color:var(--faint);}
.hero button.herofree.on s::after{content:' ▴';}

/* ── 「남는 돈」이 어떻게 나온 수인가 · 눌러서 펼치는 셈 ────────────────
   사장님께 채팅으로 네 번 설명드렸는데 끝내 안 닿았다. 앱 안에 셈을 그대로 펼친다.
   ⛔ 늘 펴 두지 않는다 · 2026-08-14 에 「복잡하다」고 한 번 걷어낸 자리다.
   ⛔ **두 칸을 나란히** 세운다 (사장님이 후보 넷 중에 고르심 2026-09-02 : 「ㄹ이 좋네」).
      나갈 곳이 카드와 고정지출 둘뿐이라, 위아래로 쌓지 않고 좌우로 놓는다.
      손가락 한 번에 둘이 다 보이고, 어느 쪽이 큰지가 숫자를 안 읽어도 보인다.
      ⛔ 세로로 쌓는 옛 모양(.fwbox)으로 되돌리지 말 것 · 후보 넷을 보시고 고르신 것이다.
         후보 화면 : tools/셈펼침-후보-20260902.html
   ⛔ 여기에 「가지고 있는 돈」 칸을 다시 만들지 말 것 (사장님 지시 2026-09-02 :
      「잔액에 써있으니까 그 자리에선 빼고」). 바로 위 큰 글씨가 그 수다.
   ⛔ 고정지출 목록도 여기 없다 (사장님 : 「카드·은행이 가져갈 거예요 펼쳐보기에
      들어있는 내용이잖아」). 같은 목록을 두 자리에 두지 않는다. */
.freewhy{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
/* ⛔ 「확보해 둘 돈」은 **한 줄을 통째로** 쓴다 (사장님 지시 2026-09-02). 반 칸에 넣으면
   백만 단위 숫자가 두 줄로 접히고, 「지금 쓰면 안 되는 돈」이라는 말이 안 들어간다.
   ⛔ 칸이 하나뿐일 때도 통째로 쓴다 — 반쪽짜리 상자가 덩그러니 남으면 고장으로 보인다. */
.freewhy .fwhalf.wide, .freewhy .fwhalf:only-child{grid-column:1 / -1;}
.freewhy .fwhalf.keep{background:rgba(0,0,0,.03);border-style:dashed;}
.freewhy .fwhalf.keep .ico{background:var(--line2);}
.freewhy .fwhalf{flex:1;min-width:0;background:var(--paper);border:1px solid var(--line2);
  border-radius:14px;padding:13px 12px 14px;}
.freewhy .fwhalf .ico{width:30px;height:30px;border-radius:9px;display:flex;
  align-items:center;justify-content:center;font-size:16px;background:var(--acc);}
.freewhy .fwhalf.f .ico{background:var(--acc2);}
.freewhy .fwhalf > s{display:block;text-decoration:none;font-size:14px;font-weight:700;
  color:var(--sub);margin-top:9px;}
.freewhy .fwhalf > em{display:block;font-style:normal;font-size:12px;font-weight:600;
  color:var(--faint);margin-top:2px;line-height:1.4;}
/* ⛔ 숫자는 줄바꿈을 막지 않는다. 백만 단위가 되면 반 칸에 한 줄로 안 들어간다 —
   nowrap 을 걸면 칸을 뚫고 나가 옆 칸을 밀어낸다. */
.freewhy .fwhalf > b{display:block;font-size:19px;font-weight:800;color:var(--out);
  margin-top:7px;letter-spacing:-.5px;}
/* 딸린 줄 — 그 칸 안에서 무엇이 그 금액을 만들었나 (카드 청구서 한 장이 한 줄) */
.freewhy .fwsub{margin-top:9px;padding-top:8px;border-top:1px solid var(--line);}
.freewhy .fwsub p{margin:0;display:flex;justify-content:space-between;gap:6px;
  font-size:12px;font-weight:700;color:var(--faint);padding:2px 0;}
.hero .two{display:flex;margin-top:20px;border-top:1px solid var(--line);padding-top:16px;}
.hero .two .h{flex:1;}
.hero .two .h + .h{border-left:1px solid var(--line);padding-left:16px;}
.hero .two .h .c{font-size:17px;font-weight:600;color:var(--sub);}
.hero .two .h .n{font-size:23px;font-weight:800;margin-top:4px;}
.hero .two .h.in .n{color:var(--in);} .hero .two .h.out .n{color:var(--out);}

/* ── 섹션 머리 ───────────────────────────────────────────── */
/* ⛔ 제목줄은 **한 줄이다** (사장님 지적 2026-08-25 : 「2줄로 적히지 않게 해줘」).
   왼쪽 제목이 길면 제목이 줄고(말줄임표), 오른쪽 숫자는 절대 안 접힌다 — 돈이 먼저다.
   ⛔ flex-wrap 을 켜지 말 것. 켜는 순간 좁은 폰에서 오른쪽 숫자가 아래로 내려간다. */
.sechead{display:flex;align-items:center;gap:9px;margin:0 2px 12px;flex-wrap:nowrap;}
.sechead .t{font-size:17px;font-weight:800;letter-spacing:0;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sechead .r{margin-left:auto;font-size:17px;color:var(--sub);font-weight:600;
  flex:none;white-space:nowrap;}
/* 좁은 폰에서는 오른쪽 숫자를 한 치수 줄여 제목이 잘리는 것을 먼저 막는다 */
@media (max-width:400px){ .sechead .r{font-size:15.5px;} }
/* 카드 밖에 있는 제목줄 — 흰 종이가 아니라 **테마 그림 위**에 바로 앉는다.
   ⛔ --ink 로 두면 어두운 테마에서 통째로 사라진다 (발렌타인 카드에서 실제로 그랬다). */
/* ⛔ 되돌림 값은 「원래 그 자리에 있던 색」 그대로 둘 것.
      한 줄로 묶어 쓰다가 라임에서 .dh b 가 --sub → --faint 로 옅어질 뻔했다. */
.onbg .sechead .t{color:var(--onbg,var(--ink));text-shadow:var(--onbgsh,none);}
.onbg .sechead .r{color:var(--onbg2,var(--sub));text-shadow:var(--onbgsh,none);}
.daygroup .dh b{color:var(--onbg,var(--sub));text-shadow:var(--onbgsh,none);}
.daygroup .dh span{color:var(--onbg2,var(--faint));text-shadow:var(--onbgsh,none);}

/* ── 고정지출 ───────────────────────────────────────────── */
/* 막대는 둥근 막대 — ⛔ !important 가 있어야 「라운드박스 안 라운드 금지」 규칙을 이긴다 */
.bar{height:9px;background:var(--line);overflow:hidden;border:1px solid var(--line2);
  border-radius:99px !important;}
.bar i{display:block;height:100%;background:var(--acc);border-radius:99px !important;
  transition:width .45s cubic-bezier(.3,.9,.3,1);}
.bar i.over{background:var(--pop);}
.barlegend{display:flex;justify-content:space-between;margin-top:11px;font-size:17px;font-weight:600;color:var(--sub);}
.barlegend b{font-weight:800;color:var(--ink);margin-left:5px;}
.daynote{margin-top:12px;font-size:17px;color:var(--sub);font-weight:600;line-height:1.55;}
.daynote b{color:var(--ink);font-weight:800;}

/* 찾기 */
.searchbox{display:flex;align-items:center;gap:10px;background:var(--paper);
  border:1px solid var(--line2);border-radius:var(--r-box);padding:0 14px;margin-bottom:14px;}
.searchbox svg{width:19px;height:19px;flex:none;stroke:var(--faint);}
.searchbox input{flex:1;border:none;outline:none;background:transparent;padding:14px 0;font-size:17px;font-weight:600;}
.searchbox input::placeholder{color:var(--faint);font-weight:600;}
.searchbox button{flex:none;color:var(--faint);font-size:17px;padding:6px;}
.searchbox:focus-within{border-color:var(--ink);}

.fixlist{margin-top:16px;display:flex;flex-direction:column;}
.fixrow{display:flex;align-items:center;gap:13px;padding:12px 0;}
.fixrow + .fixrow{border-top:1px solid var(--line);}
.fixrow .day{flex:none;width:40px;text-align:center;}
.fixrow .day b{display:block;font-size:18px;font-weight:800;letter-spacing:0;line-height:1.1;}
.fixrow .day s{display:block;font-size:15px;text-decoration:none;color:var(--faint);font-weight:600;}
.fixrow .nm{flex:1;min-width:0;font-weight:700;font-size:17.5px;text-align:left;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;}
.fixrow .nm em{display:block;font-style:normal;font-size:16px;color:var(--faint);font-weight:600;margin-top:3px;}
.fixrow .amt{flex:none;font-weight:800;font-size:17.5px;}
/* ⛔ 줄 전체가 아니라 **내용만** 흐린다 (2026-08-08). 줄에 걸면 「켜기」 단추까지
   흐려지는데, opacity 는 쌓임 맥락을 만들어 자식이 제 색을 되찾을 길이 없다. */
.fixrow.off .day,.fixrow.off .nm,.fixrow.off .amt{opacity:.4;}
/* 아직 시작 안 한 것 — 이 달 합계에 안 들어간다는 걸 눈으로도 알린다
   ⛔ 여기도 **내용만** 흐린다 (2026-08-17 · 사장님이 「9월부터 시작」 세 줄을 짚으심).
      바로 위 .off 는 2026-08-08 에 이미 이렇게 고쳤는데 .soon 만 줄 전체에 걸려 있어서
      「끄기」 단추까지 연해졌다. 단추는 **눌러야 하는 것**이라 흐리면 안 된다.
   ⛔ 짝인 .bi.soon(회사 상자)은 그대로 뒀다 — 그 줄에는 단추가 없다. */
.fixrow.soon .day,.fixrow.soon .nm,.fixrow.soon .amt{opacity:.55;}
.fixrow.wait .day b{color:var(--faint);}

/* ── 내역 목록 ───────────────────────────────────────────── */
.daygroup{margin-bottom:20px;}
.daygroup .dh{display:flex;align-items:baseline;gap:8px;margin:0 2px 9px;}
.daygroup .dh b{font-size:17px;font-weight:800;color:var(--sub);letter-spacing:0;}
.daygroup .dh span{font-size:16px;color:var(--faint);font-weight:600;margin-left:auto;}
/* 고른 것의 합계 — 목록 바로 위 (2026-08-01) */
.listsum{display:flex;align-items:baseline;gap:10px;margin:0 2px 12px;}
.listsum span{font-size:16.5px;font-weight:700;color:var(--sub);}
.listsum b{font-size:22px;font-weight:800;}
.listsum b.plus{color:var(--in);}
.listsum b.minus{color:var(--out);}
.listsum em{margin-left:auto;font-style:normal;font-size:15.5px;font-weight:600;color:var(--faint);}

.txlist{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--sh);overflow:hidden;}
.tx{display:flex;align-items:center;gap:12px;padding:15px 16px;width:100%;text-align:left;}
.tx + .tx{border-top:1px solid var(--line);}
.tx .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--out);}
.tx.in .dot{background:var(--in);}
.tx .st{flex:none;width:22px;text-align:center;font-size:19px;line-height:1;}

/* 스티커 고르개 */
.stgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;}
.stgrid button{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  font-size:21px;background:var(--paper);border:1px solid var(--line);}
.stgrid button.on{background:var(--acc);border-color:var(--ink);}
.stgrid button.none{font-size:15.5px;font-weight:700;color:var(--faint);}
/* 직접 넣기 (2026-08-12) — 그림이 아니라 「길」이라 점선으로 갈라 놓는다 */
.stgrid button.stplus{font-size:20px;font-weight:800;color:var(--sub);border-style:dashed;}
.stadd{display:flex;gap:8px;margin-top:8px;}
.stadd.hidden{display:none;}
.stadd input{flex:1;min-width:0;background:var(--paper);border:1px solid var(--line2);padding:11px 12px;}
.stadd .btn{flex:none;padding:11px 16px;}

/* 이번 달 한 마디 */
.saybox{margin-bottom:16px;}
.saybox .bubble{margin-bottom:0;width:100%;text-align:left;}
.saybox .bubble.empty-note{color:var(--faint);font-weight:600;border-style:dashed;}
.tx .bd{flex:1;min-width:0;}
.tx .bd .t1{font-weight:700;font-size:17.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tx .bd .t2{font-size:16px;color:var(--faint);font-weight:600;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tx .am{flex:none;font-weight:800;font-size:17.5px;}
.tx.out .am{color:var(--out);} .tx.in .am{color:var(--in);}
.tx .fxtag{display:inline-block;font-size:14.5px;font-weight:700;color:var(--sub);
  border:1px solid var(--line2);border-radius:4px;padding:1px 6px;margin-left:7px;vertical-align:1px;}

.empty{text-align:center;padding:34px 18px;color:var(--sub);font-size:17.5px;line-height:1.7;}
.empty b{display:block;font-size:17.5px;color:var(--ink);margin-bottom:6px;font-weight:700;}

/* ── 분류별 ──────────────────────────────────────────────── */
.catrow{display:flex;align-items:center;gap:12px;padding:12px 0;}
.catrow + .catrow{border-top:1px solid var(--line);}
.catrow .nm{font-weight:700;font-size:16.5px;flex:none;min-width:70px;}
/* 막대그래프는 둥근 막대 (사장님 결정 2026-07-29)
   ⛔ !important 가 필요하다 — 아래 「라운드박스 안 요소엔 라운드 금지」 규칙이 눌러버린다 */
.catrow .track{flex:1;height:10px;background:var(--line);overflow:hidden;
  border:1px solid var(--line2);border-radius:99px !important;}
.catrow .track i{display:block;height:100%;background:var(--acc2);border-radius:99px !important;}
.catrow .v{flex:none;font-weight:800;font-size:16.5px;min-width:84px;text-align:right;}
.catrow.plain .nm{flex:1;min-width:0;font-weight:600;color:var(--sub);}
.catrow.total .nm{color:var(--ink);font-weight:800;}

/* ── 아래 탭 ─────────────────────────────────────────────── */
/* ⛔ 폰에서는 **유리 흐림(backdrop-filter)을 쓰지 않는다**
   (사장님 지적 2026-08-12 : 「홈에 추가해서 아이콘으로 열고, 다른 탭에서 아래로 내리면
    네비게이션바가 고정이 안 되어 있고 따라 움직여」).

   웹킷(사파리)에는 오래된 고장이 하나 있다 — **position:fixed 인 것에 backdrop-filter 를
   같이 걸면, 손가락으로 미는 동안 그것이 화면에 붙어 있지 못하고 글과 같이 끌려간다.**
   손을 떼면 제자리로 돌아와서 「가끔 그런다」로 보이고, 홈 화면 앱(standalone)에서
   특히 도드라진다. 글이 짧아 안 밀리는 홈 탭에서는 안 보이고, 내역·고정·분석처럼
   **밀 것이 있는 탭에서만** 나타난다 — 사장님이 겪으신 그대로다.
   ⛔ 붙박이(position:fixed)를 푼 적이 없다. 코드에는 스크롤할 때 탭막대를 건드리는
      곳이 한 군데도 없다. 브라우저가 제 손으로 떼어 놓는 것이다.

   ⛔ 흐림을 빼는 대신 바탕을 **꽉 채운다.** 원래도 88% 라 눈으로는 거의 같다.
      안 채우면 흐림이 없어진 자리로 **글이 탭 사이에 비쳐** 읽힌다.
      대신 바탕 무늬가 이 띠에서는 안 비친다 — 96px 짜리 띠이고 그나마 단추가 덮는 자리다.
   ⛔ 되살리시려면 흐림을 **탭막대 자신이 아니라 그 안의 자식(.in 뒤에 깐 층)** 에 걸 것.
      fixed 인 그 요소에 직접 걸면 같은 고장이 그대로 돌아온다. */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:6px 12px calc(6px + env(safe-area-inset-bottom));
  background:var(--bg);
  border-top:1px solid var(--line);
}
/* PC 는 이 고장이 없다(마우스로 미는 관성 스크롤이 아니다) — 넓은 화면에서만 되살린다 */
@media (min-width:900px){
  .tabbar{
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:saturate(1.4) blur(14px);
  }
}
.tabbar .in{max-width:520px;margin:0 auto;display:flex;align-items:center;}

/* ── 첫 화면 인트로 띠 ────────────────────────────────────
   예시로 채운 화면을 보는 동안 탭 막대 바로 위에 붙는다.
   ⛔ 「예시」라고 분명히 보여야 한다. 손님 돈이 아닌 숫자를 말없이 띄우면 안 된다. */
#introBar{
  position:fixed;left:0;right:0;z-index:41;
  bottom:calc(72px + env(safe-area-inset-bottom));
  padding:0 12px;pointer-events:none;
}
#introBar .in{
  max-width:520px;margin:0 auto;pointer-events:auto;
  display:flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--paper);
  border-radius:20px;padding:11px 11px 11px 16px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
#introBar .tx{flex:1;min-width:0;line-height:1.3;}
#introBar .tx b{display:block;font-size:16.5px;font-weight:800;white-space:nowrap;}
#introBar .tx span{display:block;font-size:14px;opacity:.7;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
#introBar button{
  flex:none;border:0;border-radius:14px;padding:12px 14px;
  background:var(--paper);color:var(--ink);
  font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;white-space:nowrap;
}
/* 좁은 폰에서는 설명 줄을 빼고 단추를 살린다 */
@media (max-width:380px){ #introBar .tx span{display:none;} }
/* 띠에 가려 마지막 칸이 안 보이지 않게 아래를 더 비운다 */
body.demoing{padding-bottom:calc(186px + env(safe-area-inset-bottom));}

/* ── 운영자와 연락이 닿지 않을 때 뜨는 띠 ──────────────────────
   ⛔ 이건 안내가 아니라 **손님이 자기 기록을 잃지 않게 하는 마지막 장치**다 (2026-08-03).
      이용약관 제7조의 「3개월 전 고지」를 사람 없이도 지키려고 둔 것이다.
   ⛔ 예시 띠(#introBar)와 같은 자리를 쓰되 **더 위에** 온다(z-index 42).
      둘이 같이 뜨는 일은 없다 — 예시 화면에서는 아예 안 띄운다.
   ⛔ 60일짜리는 겁주지 않는 색(먹색), 90일짜리는 눈에 걸리는 색(--pop). */
#ownerBar{
  position:fixed;left:0;right:0;z-index:42;
  bottom:calc(72px + env(safe-area-inset-bottom));
  padding:0 12px;pointer-events:none;
}
#ownerBar .in{
  max-width:520px;margin:0 auto;pointer-events:auto;
  display:flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--paper);
  border-radius:20px;padding:11px 11px 11px 16px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
#ownerBar.hard .in{background:var(--pop);}
#ownerBar .tx{flex:1;min-width:0;line-height:1.35;}
#ownerBar .tx b{display:block;font-size:16.5px;font-weight:800;}
#ownerBar .tx span{display:block;font-size:14px;opacity:.78;margin-top:2px;word-break:keep-all;}
#ownerBar .tx span b{display:inline;font-size:inherit;opacity:1;}
#ownerBar button{
  flex:none;border:0;border-radius:14px;padding:12px 14px;
  background:var(--paper);color:var(--ink);
  font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;white-space:nowrap;
}
#ownerBar button.x{padding:12px;background:transparent;color:var(--paper);opacity:.65;font-size:15px;}
body:has(#ownerBar){padding-bottom:calc(196px + env(safe-area-inset-bottom));}
/* 계산기 동그라미 — 탭막대 위에 띄운다.
   ⛔ 탭막대와 간격을 충분히(18px) 둘 것. 붙이면 손가락이 겹쳐 눌린다. */
/* ⛔ 흰 카드 위에 흰 동그라미를 두면 카드의 일부처럼 보여 안 보인다고 하신다
   (2026-08-01). 진한 색으로 채워 확실히 떠 있게 한다. */
/* 탭막대(96px) 바로 위에 붙되 손가락이 겹치지 않을 만큼만 띄운다.
   ⛔ 너무 올리면 화면 가운데를 가리고, 너무 내리면 탭이 같이 눌린다. 8px 이 그 경계다. */
.calcfab{position:fixed;right:16px;z-index:41;
  bottom:calc(96px + 8px + env(safe-area-inset-bottom));
  width:54px;height:54px;border-radius:50%;
  background:var(--ink);border:none;box-shadow:0 6px 18px rgba(0,0,0,.28);
  display:flex;align-items:center;justify-content:center;color:var(--bg);}
.calcfab svg{width:24px;height:24px;}
.calcfab:active{transform:scale(.94);}
/* 켠 동안은 **색을 뒤집는다** (사장님 지시 2026-08-26 : 「눌렀을때 계산기 색상이
   반전이 되어야 안 겹칠듯」). 앞서는 켠 것과 끈 것이 **똑같은 색**이라(먹색 바탕),
   눌러도 아무 표시가 없었다 — 계산기가 열렸는지 화면으로는 알 길이 없었다.
   ⛔ 뒤집은 바탕은 --paper(흰색)다. --bg(라임)로 뒤집으면 라임 화면에 묻힌다.
   ⛔ 테두리를 먹색으로 둘러야 흰 카드 위에서도 동그라미가 살아 있다(위 2026-08-01 주석). */
.calcfab.on{background:var(--paper);color:var(--ink);
  box-shadow:0 0 0 2.5px var(--ink), 0 6px 18px rgba(0,0,0,.22);}

.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 2px;
  font-size:15px;font-weight:700;color:var(--faint);letter-spacing:0;}
.tab svg{width:22px;height:22px;}
.tab.on{color:var(--ink);}
.fab{
  flex:none;width:54px;height:54px;border-radius:16px;background:var(--ink);color:var(--bg);
  margin:0 6px;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh2);
}
.fab svg{width:21px;height:21px;}
.fab:active{transform:scale(.94);}

/* ── 바닥 시트 ───────────────────────────────────────────── */
.sheetbg{position:fixed;inset:0;z-index:60;background:rgba(24,22,18,.34);backdrop-filter:blur(3px);}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:61;max-height:92vh;overflow-y:auto;
  background:var(--bg);border-top:1px solid var(--line2);
  border-radius:24px 24px 0 0; padding:8px 18px calc(22px + env(safe-area-inset-bottom));
  animation:up .3s cubic-bezier(.2,.9,.3,1);
}
@media (min-width:560px){ .sheet{max-width:520px;margin:0 auto;border-radius:24px;bottom:14px;left:14px;right:14px;border:1px solid var(--line2);} }
@keyframes up{from{transform:translateY(100%);}to{transform:none;}}
.grab{width:38px;height:4px;border-radius:99px;background:var(--line2);margin:6px auto 16px;}
.sheet h2{font-size:21px;margin-bottom:18px;}
.sheet .fld{margin-bottom:18px;}
.sheet .fld > label{display:block;font-size:16.5px;font-weight:700;color:var(--sub);margin:0 2px 9px;letter-spacing:.01em;}
.sheet .fld > label span{font-weight:600;color:var(--faint);}
.sheet input[type=text],.sheet input[type=date],.sheet input[type=number],.sheet input[type=month],.sheet select{
  width:100%;background:var(--paper);border:1px solid var(--line2);border-radius:12px;padding:14px;outline:none;
}
.sheet input:focus,.sheet select:focus{border-color:var(--ink);}
.chips{display:flex;flex-wrap:wrap;gap:7px;}
/* 「며칠」·「몇 달마다」의 직접 넣는 칸 — 옆 칩과 **같은 높이**라야 줄이 안 어긋난다
   (사장님 지적 2026-08-08 : 「25일~10 써진건 왜 박스 높이가 더 커?」).
   윗줄 `.sheet input[type=number]` 의 padding:14px·font-size:18px 이 칩(8px 15px·16px)보다
   커서, `.chips` 가 늘려 맞추느라 **그 칸이 낀 줄만 통째로 두꺼워져** 있었다. */
.sheet .chips input[type=number]{
  padding:8px 15px;font-size:16px;font-weight:600;line-height:normal;
  border-radius:var(--r-chip);
}

/* ── 달력 (브라우저 기본 달력 대신 직접 그린다) ─────────── */
.datebtn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--paper);border:1px solid var(--line2);padding:14px;
  font-size:18px;font-weight:700;text-align:left;
}
.datebtn.open{border-color:var(--ink);}
.datebtn small{font-size:16.5px;font-weight:600;color:var(--faint);}
.cal{background:var(--paper);border:1px solid var(--line2);border-top:none;padding:14px 12px 12px;}
.cal .chead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding:0 2px;}
.cal .chead b{font-size:17px;font-weight:800;letter-spacing:0;}
.cal .chead .cnav{display:flex;gap:6px;}
.cal .chead button{width:32px;height:32px;border:1px solid var(--line);background:var(--paper);
  color:var(--sub);display:flex;align-items:center;justify-content:center;}
.cal .chead button svg{width:13px;height:13px;}
.cal .wk{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px;}
.cal .wk span{text-align:center;font-size:15px;font-weight:700;color:var(--faint);padding:4px 0;}
.cal .wk span:first-child{color:var(--out);}
.cal .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal .d{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);}
.cal .d.pad{visibility:hidden;}
.cal .d.sun{color:var(--out);}
.cal .d.today{box-shadow:inset 0 0 0 1.5px var(--line2);}
.cal .d.on{background:var(--ink);color:var(--bg);box-shadow:none;}
.cal .foot{display:flex;gap:7px;margin-top:12px;}
.cal .foot button{flex:1;border:1px solid var(--line);background:var(--paper);
  padding:10px;font-size:17px;font-weight:700;color:var(--sub);}
/* 달 고르개 — 년 이동 + 12칸 */
.cal .mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.cal .mgrid button{padding:14px 0;font-size:16px;font-weight:700;border:1px solid var(--line);background:var(--paper);}
.cal .mgrid button.on{background:var(--ink);color:var(--bg);border-color:var(--ink);}

/* 지출/수입 고르개 */
.seg{display:flex;background:var(--paper);border:1px solid var(--line2);border-radius:13px;padding:3px;gap:3px;}
.seg button{flex:1;border-radius:10px;padding:12px;font-weight:700;font-size:17.5px;color:var(--sub);}
.seg button.on{background:var(--ink);color:var(--bg);}
.seg button.on[data-k=in]{background:var(--in);}

/* 금액 */
.amtbox{display:flex;align-items:baseline;gap:7px;background:var(--paper);
  border:1px solid var(--line2);border-radius:13px;padding:14px 16px;}
.amtbox:focus-within{border-color:var(--ink);}
.sheet .amtbox input,.amtbox input{flex:1;border:none;outline:none;background:transparent;box-shadow:none;
  font-size:33px;font-weight:800;text-align:right;letter-spacing:0;width:100%;padding:0;border-radius:0;
  font-variant-numeric:tabular-nums;}
.amtbox .w{font-size:17.5px;font-weight:700;color:var(--sub);}
.quick{display:flex;gap:6px;margin-top:8px;}
.quick button{flex:1;border:1px solid var(--line);border-radius:10px;background:var(--paper);
  padding:10px 2px;font-size:17px;font-weight:700;color:var(--sub);}

/* ── 폰에 설치하기 ──────────────────────────────────────── */
.install{display:flex;gap:16px;align-items:center;background:var(--paper);
  border:1px solid var(--line2);padding:16px;margin-bottom:12px;}
.qrbox{flex:none;width:150px;height:150px;display:flex;align-items:center;justify-content:center;}
.qrbox img{width:100%;height:100%;}
.steps{flex:1;min-width:0;}
.step{display:flex;align-items:flex-start;gap:9px;font-size:17.5px;font-weight:600;color:var(--sub);line-height:1.45;}
.step + .step{margin-top:12px;}
.step .sticker{flex:none;}
.step-note{margin-top:14px;font-size:15.5px;color:var(--faint);font-weight:600;line-height:1.5;}
.linkbox{display:flex;align-items:center;gap:10px;background:var(--paper);
  border:1px solid var(--line2);padding:12px 14px;}
.linkbox span{flex:1;min-width:0;font-size:17px;font-weight:600;color:var(--sub);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:380px){
  .install{flex-direction:column;align-items:stretch;}
  .qrbox{width:100%;height:160px;}
}

/* ── 테마·글꼴 고르기 ───────────────────────────────────── */
.themegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.thm{border:1px solid var(--line2);border-radius:13px;padding:11px 8px 10px;background:var(--paper);text-align:center;}
.thm.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}
/* 테마 미리보기 — 그 테마의 바탕과 무늬를 그대로 축소해 보여준다.
   .prev 에 data-theme 을 걸면 그 테마의 변수만 그 안에서 살아난다. */
.thm .prev{display:block;position:relative;height:54px;margin-bottom:8px;overflow:hidden;
  background-color:var(--bg);border:1px solid rgba(0,0,0,.10);}
.thm .prev::after{content:'';position:absolute;inset:0;
  background-image:var(--pat);background-size:var(--pat-size);background-position:var(--pat-pos);opacity:var(--pat-a);}
.thm .prev::before{content:'';position:absolute;inset:0;z-index:1;
  background-image:var(--pat2);background-size:var(--pat2-size);background-position:var(--pat2-pos);opacity:var(--pat2-a);}
.thm .prev i{position:absolute;z-index:2;bottom:6px;right:7px;width:13px;height:13px;
  background:var(--acc);border:1px solid rgba(0,0,0,.15);}
.thm .prev i.b{right:23px;background:var(--acc2);}
.thm .nm{display:block;font-size:16px;font-weight:700;color:var(--sub);}
.thm.on .nm{color:var(--ink);}

/* 마우스 효과 고르개 */
.fxgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.fxb{border:1px solid var(--line2);background:var(--paper);padding:11px 12px;text-align:left;}
.fxb.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}
.fxb b{display:block;font-size:16px;font-weight:700;}
.fxb em{display:block;font-style:normal;font-size:15px;color:var(--faint);font-weight:600;margin-top:2px;}

/* 글꼴 고르개 — **두 줄 격자에 이름만** (사장님 지시 2026-08-17).
   ⛔ 한 줄에 하나씩 세로로 쌓던 목록이었다. 스무 종이 넘어 화면 두 장을 잡아먹었고,
      이름 옆의 용량·설명이 정작 봐야 할 **글씨 모양**을 가렸다.
   ⛔ 칸마다 테두리를 준다 — 격자에서는 줄 사이 선(border-top)이 뜻을 잃는다. */
.fontlist{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.fnt{display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--paper);border:1px solid var(--line2);border-radius:var(--r-card);
  padding:15px 10px;text-align:center;min-height:56px;}
.fnt.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--bg);}
/* ⛔ 이름이 길어도 칸을 안 벌린다. 격자라 한 칸이 벌어지면 옆 칸까지 같이 커진다. */
.fnt .nm{font-size:17.5px;font-weight:700;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
/* ⛔ 「쓰는 중」 꼬리는 뺐다 — 좁은 칸에서 이름을 밀어낸다. 고른 것은 테두리로 안다. */
.fnt .kb{flex:none;font-size:14px;font-weight:700;color:var(--pop);}
.fnt .kb:empty{display:none;}

.credits{font-size:15.5px;color:var(--faint);line-height:1.65;margin-top:11px;padding:0 2px;}
/* 서체 출처는 접어 둔다 (사장님 지시 2026-08-17). 표기 요청이 있는 서체가 있어서
   지울 수는 없고, 평소에 자리만 차지하던 글이라 눌러야 펴지게 한다. */
.credits summary{cursor:pointer;font-weight:700;color:var(--sub);list-style:none;
  padding:7px 0;-webkit-tap-highlight-color:transparent;}
.credits summary::-webkit-details-marker{display:none;}
/* 삼각형을 직접 그린다 — 브라우저 기본 표시는 기기마다 모양이 다르다 */
.credits summary::before{content:'▸';display:inline-block;margin-right:6px;
  transition:transform .15s ease;}
.credits details[open] summary::before{transform:rotate(90deg);}
.credits .cbody{padding-bottom:4px;}

/* 접어 두는 고르개 — 「빼고 볼 분류」 마흔아홉 칸 (사장님 지시 2026-08-17 : 「정리필요」).
   ⛔ 상자 자체는 안 쪼갠다 — 꾹 눌러 차례 바꾸는 손잡이가 그 상자에 걸린다. 겉만 접는다.
   ⛔ 접힌 채로도 **고른 이름은 보인다**. 안 보이면 열어 봐야 알 수 있어 더 나쁘다. */
.pickfold{margin-top:11px;border:1px solid var(--line2);border-radius:var(--r-card);
  background:var(--paper);}
.pickfold summary{cursor:pointer;list-style:none;padding:13px 15px;font-size:16px;
  font-weight:700;color:var(--faint);-webkit-tap-highlight-color:transparent;
  display:flex;align-items:center;gap:8px;}
.pickfold summary::-webkit-details-marker{display:none;}
.pickfold summary::before{content:'▸';flex:none;transition:transform .15s ease;}
.pickfold[open] summary::before{transform:rotate(90deg);}
/* 고른 이름 — 길면 말줄임. 칸을 벌리면 설정이 다시 길어진다 */
.pickfold summary b{flex:1;min-width:0;color:var(--ink);font-weight:800;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pickfold .pickrow{padding:0 12px 13px;}

/* ── 계산기 ──────────────────────────────────────────────
   PC 는 왼쪽에 늘 펼쳐 두고, 폰은 탭 하나. 폰에서만 탭이 보이게 막는다. */
/* PC 는 오른쪽 아래 동그라미 하나로 두고, 누를 때만 펼친다.
   폰은 동그라미 대신 아래 탭으로 들어간다(폰에서는 떠 있는 단추가 화면을 가린다). */
.phone-only{display:flex;}
#calcFab{display:none;}
@media (min-width:900px) and (pointer:fine){
  .phone-only{display:none;}
  #calcFab{display:flex;}
}
/* 아래 탭 줄과 세로 가운데를 맞춘다.
   탭 줄 = 위아래 여백 6px + 탭 한 줄 61px → 73px. (73 − 56) / 2 ≈ 9px */
#calcFab{position:fixed;right:26px;bottom:9px;z-index:41;width:56px;height:56px;
  align-items:center;justify-content:center;border-radius:50% !important;
  background:var(--ink);color:var(--bg);box-shadow:var(--sh2);
  transition:transform .16s cubic-bezier(.2,.9,.3,1);}
#calcFab:hover{transform:translateY(-2px);}
#calcFab svg{width:26px;height:26px;}
#calcFab.on{background:var(--acc);color:var(--ink);}

#calcPane{display:none;}
/* ⛔ 화면 높이에 매달린 값은 --z 로 나눠야 한다. zoom 은 vh 를 보정하지 않아서
      그냥 100vh 라고 쓰면 계산기가 화면보다 길어져 윗부분이 잘린다. */
/* 탭 줄(73px) 바로 위에서 펼쳐진다 */
#calcPane.show{display:block;position:fixed;right:26px;bottom:81px;z-index:41;width:262px;
  max-height:calc(100vh / var(--z, 1) - 97px);overflow-y:auto;
  animation:calcup .2s cubic-bezier(.2,.9,.3,1);}
@keyframes calcup{from{opacity:0;transform:translateY(10px) scale(.97);}to{opacity:1;transform:none;}}
/* 창이 낮으면 계산기를 통째로 줄여 한 화면에 다 들어오게 한다 (잘려 보이지 않게) */
@media (max-height:820px){
  #calcPane .cdisp{min-height:54px;padding:8px 12px;margin-bottom:8px;}
  #calcPane .cdisp .cr{font-size:24px;}
  #calcPane .ckeys{gap:6px;}
  #calcPane .ck{height:40px;font-size:17px;}
  #calcPane .calc{padding:10px;}
  #calcPane .calc .btn{margin-top:8px;padding:11px;font-size:17.5px;}
}
.calc{background:var(--paper);border:1px solid var(--line2);border-radius:var(--r-card);
  box-shadow:var(--sh);padding:14px;}
/* ⛔ 계산된 값이 나오는 자리는 **흰 종이**로 둔다 (사장님 지시 2026-07-31).
   var(--bg) 로 두면 테마마다 바탕색이 달라져 숫자가 묻히는 테마가 생긴다. */
.cdisp{background:#FFFFFF;border:1px solid var(--line2);padding:12px 14px;margin-bottom:10px;
  border-radius:12px;min-height:76px;display:flex;flex-direction:column;justify-content:center;gap:4px;
  color:#1A1A17;}
.cdisp .ce{color:#6E6C64;}
.cdisp .ce{font-size:16px;font-weight:600;color:var(--faint);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;}
.cdisp .cr{font-family:var(--ff),var(--ffui),var(--sys);font-size:30px;font-weight:800;
  text-align:right;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ckeys{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.ck{height:52px;border:1px solid var(--line2);background:var(--paper);
  font-size:19px;font-weight:800;border-radius:12px !important;}
.ck:active{background:var(--bg);}
.ck.op{background:var(--acc);border-color:transparent;}
.ck.fn{color:var(--sub);font-size:16px;}
.ck.eq{background:var(--ink);color:var(--bg);border-color:transparent;grid-column:span 2;}
.ck.wide{grid-column:span 2;}
.calc .btn{margin-top:10px;}
/* 계산기 맨 위 잔액 — ⛔ 자판보다 눈에 띄면 안 된다. 여기 주인공은 두드리는 숫자다. */
.cbal{display:flex;align-items:baseline;gap:8px;margin:0 2px 8px;}
.cbal s{text-decoration:none;font-size:14px;font-weight:700;color:var(--faint);}
.cbal b{margin-left:auto;font-size:17px;font-weight:800;color:var(--sub);white-space:nowrap;}
.cbal.minus b{color:var(--pop);}
/* 십일조 되돌리기 — 글줄 안에 앉는 작은 단추 */
.titheundo{margin-left:8px;vertical-align:baseline;}

/* ── 체크할 것 (2026-08-25) ────────────────────────────────
   목록형 짜임새에 줄만 알약형처럼 **큰 칸**으로 (사장님 지시).
   ⛔ 모서리는 각지게 둔다 — 위 .card * 규칙이 이 앱의 결이다. 여기만 둥글리지 말 것.
   ⛔ 안 한 것은 라임 바탕 + 먹선으로 **앞으로 나오고**, 다 한 것은 회색으로 가라앉는다.
      색을 뒤집지 말 것. 해야 할 일이 눈에 먼저 들어와야 한다. */
.ckbox .ckrow{display:flex;align-items:center;gap:11px;padding:13px 14px;margin-bottom:9px;
  background:var(--bg);border:1.6px solid var(--ink);}
.ckbox .ckrow.done{background:var(--line);border-color:var(--line);}
.ckbox .ckbx{flex:none;width:22px;height:22px;border:1.8px solid var(--ink);background:none;
  padding:0;display:flex;align-items:center;justify-content:center;}
.ckbox .ckbx svg{width:14px;height:14px;opacity:0;}
.ckbox .ckrow.done .ckbx{background:var(--ink);border-color:var(--ink);color:var(--bg);}
.ckbox .ckrow.done .ckbx svg{opacity:1;}
/* ⛔ **긴 글은 접어서 여러 줄로 내려간다** (사장님 지적 2026-08-30 : 「체크할일이
   길어지면 넘친다」). word-break:keep-all 하나만 두면 띄어쓰기 없는 긴 글이 한 낱말로 잡혀
   줄바꿈이 아예 일어나지 않아 칸 밖으로(✕ 위로) 삐져나간다.
   overflow-wrap:anywhere 는 **낱말이 칸보다 길 때만** 끊는다 — 우리말 낱말은 그대로 붙어 있다.
   ⛔ 이 둘은 한 짝이다. keep-all 만 남기지 말 것. */
.ckbox .cktx{flex:1;min-width:0;font-size:16.5px;font-weight:800;line-height:1.35;
  word-break:keep-all;overflow-wrap:anywhere;white-space:normal;
  background:none;border:0;text-align:left;color:var(--ink);padding:0;}
.ckbox .ckrow.done .cktx{color:var(--faint);text-decoration:line-through;}
/* 지우기 ✕ — ⛔ **누를 수 있는 자리가 손가락만 해야 한다** (사장님 지적 2026-08-26 :
   「지울까요 버튼 잘 안먹힘」). 앞서는 padding:0 0 0 4px 이라 누를 곳이 글자 한 자(16px)뿐이었다.
   두 번 눌러야 지워지는 단추인데 두 번째가 빗나가면 5초 뒤 ✕ 로 되돌아가 「안 먹힌다」가 된다.
   ⛔ **보이는 크기는 안 키운다.** ::after 로 손가락 자리만 넓힌다 — 단추를 진짜로 키우면
      줄 높이가 같이 늘어 목록이 통째로 길어진다.
   ⛔ 뻗는 값은 **줄 끝까지**로 잡았다 (위아래 -17px = 줄 높이 50px, 오른쪽 -14px = 줄 여백).
      줄의 오른쪽 끝이 곧 누를 수 있는 자리라는 뜻이다. 재 보면 44×50 이 나온다.
      줄여야 할 일이 생기면 44 아래로는 내리지 말 것. */
.ckbox .ckdel{flex:none;position:relative;background:none;border:0;color:var(--faint);font-size:16px;
  padding:0 0 0 4px;line-height:1;white-space:nowrap;}
.ckbox .ckdel::after{content:'';position:absolute;top:-17px;bottom:-17px;left:-13px;right:-14px;}
/* 「지울까요」로 바뀐 뒤 — ⛔ 라임 바탕(--acc)을 깔지 말 것. 줄 바탕(--bg)이 이미 라임이라
   같은 색 위에 같은 색이 되어 알약이 안 보인다. 먹색으로 채워 확실히 떠 있게 한다
   (계산기 동그라미 때와 같은 까닭 · .calcfab 주석).
   ⛔ 위아래 여백은 4px 까지만. 그보다 두꺼우면 알약이 줄 속살(24px)보다 커져서
      **누르는 순간 줄 키가 훌쩍 뛴다.** 손이 따라가야 할 자리가 움직이면 안 된다. */
.ckbox .ckdel[data-sure="1"]{background:var(--ink);color:var(--bg);
  font-weight:800;font-size:15px;padding:4px 11px;}
.ckbox .ckempty{padding:16px 2px;color:var(--faint);font-size:15px;font-weight:700;}
.ckbox .ckadd{display:flex;gap:8px;margin-top:12px;}
.ckbox .ckadd input{flex:1;min-width:0;}
.ckbox .ckadd .btn{flex:none;padding-left:18px;padding-right:18px;}
/* ⛔ 맨 아래 ＋ 와 계산기 동그라미가 겹치던 것은 **body 아래 여백**으로 풀었다
   (위 body 의 padding-bottom 주석). 여기에 margin 을 또 주면 여백이 두 번 붙는다. */
/* 폰에서는 화면 폭에 맞춰 키를 키운다 */
@media (max-width:899px){
  .calc{padding:0;background:none;border:none;box-shadow:none;}
  .cdisp{min-height:96px;}
  .cdisp .cr{font-size:38px;}
  .ck{height:62px;font-size:22px;}
}

/* 자료를 기다리는 동안 — 빈 화면보다 한 줄이 낫다 */
.loading{padding:60px 0;text-align:center;font-size:17.5px;font-weight:700;color:var(--faint);
  animation:blink 1.4s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .loading{animation:none} }

/* ── 달러로 적기 ─────────────────────────────────────────── */
.usdbtn{margin-left:8px;border:1px solid var(--line2);background:var(--paper);
  padding:3px 9px;font-size:14.5px;font-weight:700;color:var(--sub);}
.usdbtn.on{background:var(--ink);color:var(--bg);border-color:transparent;}
.usdnote{margin-top:8px;font-size:16px;font-weight:600;color:var(--sub);line-height:1.55;}
.usdnote b{color:var(--ink);font-weight:800;}
.usdnote em{font-style:normal;color:var(--out);font-weight:700;}
/* 환율 기준일 — 경고가 아니라 그냥 사실이라 눈에 안 걸리는 색으로 (2026-08-12) */
.usdnote em.fxat{color:var(--faint);font-weight:600;}

/* ── 버티기 ───────────────────────────────────────────────
   일을 쉬는 동안 쓰는 칸. 남은 기간이 주인공이라 숫자를 크게 둔다. */
/* ⛔ 카드 왼쪽에 세로줄을 긋지 말 것 (2026-07-31 사장님 지적).
   급한 정도는 숫자 색으로만 알린다. */
.holdbig{display:flex;align-items:baseline;gap:3px;margin:14px 0 2px;
  font-family:var(--ff),var(--ffui),var(--sys);}
.holdbig b{font-size:52px;font-weight:800;line-height:1;letter-spacing:0;}
.holdbig s{text-decoration:none;font-size:20px;font-weight:700;color:var(--sub);margin-right:9px;}
.hold.tight .holdbig b{color:var(--pop);}
.holdsub{font-size:17px;font-weight:600;color:var(--sub);}
.holdgoal{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
.holdgoal .hg{font-size:16.5px;font-weight:800;margin-bottom:9px;}
/* ⛔ **옆으로 미는 줄**로 바꿨다 (사장님 지시 2026-08-17 : 「3개월에서 우측으로
   스크롤하면 개월을 직접입력할수있게」). 칸을 넷으로 나누면 폰에서 「한 끼에 12,345원」이
   접혀 셋 다 못 읽는다 — 셋은 그대로 보이고, 「직접 넣기」는 밀어야 닿게 한다.
   ⛔ 화면 밖으로 나가는 것이 있다는 걸 알려야 한다 : 마지막 칸이 **살짝 걸치게** 폭을 잡는다.
   ⛔ 상자 안에서만 밀린다 — 몸통이 넓어지면 홈 전체가 옆으로 흔들린다. */
.hgrow{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;padding-bottom:2px;}
.hgrow::-webkit-scrollbar{display:none;}
/* 눌러서 고르는 칸 — 고른 것이 확실히 드러나야 한다 (사장님 지시 2026-08-01) */
.hgi{background:var(--bg);border:1px solid var(--line2);padding:11px 8px;text-align:center;
  display:block;flex:0 0 30%;min-width:96px;scroll-snap-align:start;}
/* 직접 넣는 칸 — 눌러서 고르는 칸이 아니라 **적는 칸**이라 바탕을 종이색으로 가른다 */
.hgi.hgme{background:var(--paper);border-style:dashed;}
.hgi.hgme b{display:flex;align-items:baseline;justify-content:center;gap:3px;}
.hgi.hgme input{width:2.6em;min-width:0;border:none;background:none;padding:0;
  font:inherit;font-size:17px;font-weight:800;text-align:right;color:inherit;outline:none;
  -moz-appearance:textfield;}
.hgi.hgme input::-webkit-outer-spin-button,
.hgi.hgme input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.hgi.hgme b s{text-decoration:none;font-size:15px;font-weight:700;color:var(--faint);}
.hgi.on{border-color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);}
.hgi:active{filter:brightness(.96);}
.hgi b{display:block;font-size:17px;font-weight:800;}
.hgi.on b::after{content:' ✓';font-size:14px;}
/* ⛔ 「하루 / 7,800원」은 두 줄, 「빠듯해요」는 한 줄이라 칸 높이가 서로 달라진다.
   두 줄 높이(2.8em)를 고정해 놓고 가운데로 세워, 나란히 놓았을 때 줄이 맞게 한다
   (사장님 지시 2026-08-01). */
.hgi em{display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-style:normal;font-size:13.5px;font-weight:600;color:var(--sub);
  margin-top:4px;line-height:1.4;min-height:2.8em;}
.hgi.no em{color:var(--out);}

/* ── 엑셀에서 가져오기 ─────────────────────────────────── */
.mapgrid{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;align-items:center;}
.mapgrid label{font-size:16.5px;font-weight:700;color:var(--sub);}
.mapgrid select{border:1px solid var(--line2);background:var(--paper);padding:9px 10px;
  font-size:17.5px;font-weight:600;width:100%;}
.imprev{background:var(--paper);border:1px solid var(--line2);padding:10px 12px;max-height:220px;overflow-y:auto;}
.ipn{font-size:15.5px;font-weight:700;color:var(--faint);padding:4px 0;}
.ipr{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:16.5px;}
.ipr + .ipr{border-top:1px solid var(--line);}
.ipr span{flex:none;color:var(--faint);font-weight:600;font-size:15px;}
.ipr b{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ipr i{flex:none;font-style:normal;font-weight:800;color:var(--out);}
.ipr i.in{color:var(--in);}

/* ⛔ 「걱정해 주는 칸」(.worry) 은 없앴다 (사장님 지시 2026-08-05).
   마이너스 통장을 쓰시는지 앱은 모르는데 쓰는 것처럼 단정했다. app.js 의 viewHome 주석 참고. */
/* 버티기 한도 — 줄글이 아니라 **명사로, 종목마다 한 줄** (사장님 지시 2026-08-01).
   들어오는 돈이 없는 사람이 보는 자리라 「써도 된다」가 아니라 「여기까지」로 읽혀야 한다. */
.holdplan{margin-top:14px;border-top:1px solid var(--line);}
.holdplan .hp{display:flex;align-items:baseline;gap:12px;padding:11px 2px;}
.holdplan .hp + .hp{border-top:1px solid var(--line);}
.holdplan .hp s{flex:none;min-width:96px;text-decoration:none;
  font-size:15.5px;font-weight:600;color:var(--faint);}
/* 「46,671원」이 좁은 폰에서 「원」만 아랫줄로 떨어졌다 (2026-08-08). 금액은 안 끊는다. */
.holdplan .hp b{font-size:19px;font-weight:800;white-space:nowrap;}
.holdplan .hp b.over{color:var(--out);}
.holdplan .hp em{font-style:normal;font-size:14.5px;font-weight:600;color:var(--faint);}
/* 「~9/16까지」는 **줄 오른쪽 끝**으로 (사장님 지시 2026-08-17).
   ⛔ margin-left:auto 하나로 민다. 금액(b)에 flex:1 을 주면 금액이 늘어나 밑줄·색이 번진다. */
.holdplan .hp em.till{margin-left:auto;font-size:15.5px;font-weight:700;
  color:var(--sub);white-space:nowrap;}
/* 종목은 한 줄에 하나씩 */
.holdplan .hpc{display:flex;flex-direction:column;gap:4px;}
.holdplan .hpc u{text-decoration:none;font-size:17px;font-weight:700;color:var(--ink);}

/* 「가지고 있는 돈」 — 무슨 돈인지 이름을 달고, 눌러서 고치는 값임이 보이게 (2026-08-01) */
/* .havebtn 은 버티기 머리의 「가지고 있는 돈」 단추였다. 2026-08-08 에 셈 첫 줄
   (.holdmath button.hm)로 합치면서 쓰는 데가 없어져 지웠다. */


/* ── 잘 쓰고 계세요 ─────────────────────────────────────── */
.useitem{padding:14px 0 16px;}
.useitem .un{font-size:19px;font-weight:800;font-family:var(--ff),var(--ffui),var(--sys);}
.useitem .ud{font-size:16.5px;font-weight:600;color:var(--sub);margin-top:4px;}
.useitem .ud b{color:var(--ink);font-weight:800;}
.usebtns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
/* 세 단추에 뜻대로 색을 준다 (사장님 지시 2026-08-01).
   ⛔ 테마 변수(--in·--out)를 쓰면 테마마다 색이 달라져 「잘 씀/안 씀」이 뒤집혀 보이는 테마가 생긴다.
      이건 신호등이라 **테마와 무관하게 늘 같은 색**이라야 한다.
      바탕은 연하게, 글씨는 진하게 — 흰 종이 위에서 명암비를 재서 골랐다. */
.ub{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 4px 12px;
  border:1px solid transparent;background:var(--paper);}
.ub svg{width:24px;height:24px;}
.ub span{font-size:15px;font-weight:700;}
.ub.good{background:#E6F4EC;border-color:#BFE0CE;}
.ub.good svg,.ub.good span{color:#1F6B4A;}
.ub.meh{background:#FDF3DF;border-color:#EEDFB4;}
.ub.meh svg,.ub.meh span{color:#8A6410;}
.ub.no{background:#FCEBEE;border-color:#F2CBD2;}
.ub.no svg,.ub.no span{color:#9E2740;}
.ub:active{filter:brightness(.96);}
.selllist{display:flex;flex-direction:column;}
.sellrow{display:flex;align-items:center;gap:10px;padding:12px 0;}
.sellrow + .sellrow{border-top:1px solid var(--line);}
.sellrow .sn{flex:1;min-width:0;font-size:16px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sellrow .sa{flex:none;font-size:16px;font-weight:800;}

/* 십일조 떼어두기 — 금액이 주인공이라 크게 */
.tithebig{font-family:var(--ff),var(--ffui),var(--sys);font-size:44px;font-weight:800;
  text-align:center;padding:18px 0 4px;line-height:1.1;}
.tithebig small{font-size:19px;font-weight:700;color:var(--sub);margin-left:4px;}

/* ── 위험한 번호 막기 ─────────────────────────────────────
   카드번호·CVC·계좌번호·비밀번호가 들어오면 빨갛게 알리고 저장을 잠근다. */
.nogo{background:#FFF1F3;border:1.5px solid #E8324F;color:#8E1226;
  padding:13px 15px;margin-bottom:12px;font-size:17px;font-weight:600;line-height:1.6;}
.nogo b{color:#C4102F;font-weight:800;}
.sheet input.bad{border-color:#E8324F !important;box-shadow:inset 0 0 0 1px #E8324F;background:#FFF6F7;}
.btn.off{opacity:.4;pointer-events:none;}

/* ── 아직 안 빠진 카드값 ─────────────────────────────────── */
.billrow{padding:12px 0;}
.billrow + .billrow{border-top:1px solid var(--line);}
.billrow .bn{display:flex;align-items:center;gap:9px;font-size:17.5px;font-weight:800;margin-bottom:8px;}
.billrow .bn .chip{margin-left:auto;}
/* 청구서와 대 본 결과 — 맞으면 조용히, 다르면 눈에 띄게 */
.billok{margin-top:10px;font-size:16px;font-weight:600;color:var(--sub);}
.billok b{color:var(--in);font-weight:800;}
.billgap{margin-top:10px;background:#FFF1F3;border:1.5px solid #E8324F;color:#8E1226;
  padding:11px 13px;font-size:16px;font-weight:600;line-height:1.6;}
.billgap b{color:#C4102F;font-weight:800;}
.billrow .bl{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.billrow .bl > div{background:var(--bg);border:1px solid var(--line2);padding:11px 12px;}
/* 날짜가 위, 돈이 아래 (사장님 지시 2026-07-31) — 언제 빠지는지가 먼저 보여야 한다.
   ⛔ 마크업 순서를 바꿨으니 여백도 뒤집어야 한다. em 밑에 margin 을 두면 글자가 붙는다. */
.billrow .bl b{display:block;font-size:20px;font-weight:800;margin-top:3px;}
.billrow .bl em{display:block;font-style:normal;font-size:13.5px;font-weight:600;
  color:var(--faint);margin-top:0;line-height:1.4;}
.billrow .soon b{color:var(--faint);}

/* 카드 편집 — 이름표는 **왼쪽**, 적는 칸은 **오른쪽** (사장님 지시 2026-07-31).
   ⛔ 한 줄에 나란히 늘어놓으면 폰에서 칸이 제멋대로 접혀 어느 칸이 무엇인지 사라진다. */
.cardlist{display:flex;flex-direction:column;gap:10px;}
.cardrow{display:flex;flex-direction:column;gap:8px;background:var(--paper);
  border:1px solid var(--line2);padding:12px;}
.cardrow .cf{display:flex;align-items:center;gap:10px;}
.cardrow label{flex:0 0 74px;font-size:14.5px;font-weight:700;color:var(--faint);}
.cardrow input{flex:1;min-width:0;border:1px solid var(--line2);padding:8px 10px;
  font-size:17.5px;font-weight:700;}
.cardrow .cnum{flex:1;display:flex;align-items:center;gap:7px;}
.cardrow .cnum input{flex:0 0 72px;width:72px;text-align:center;}
.cardrow .cnum i{font-style:normal;font-size:15.5px;font-weight:700;color:var(--sub);}
.cardrow .cdel{display:flex;justify-content:flex-end;}

/* ── 안 쓴 날 도장판 ─────────────────────────────────────
   찍힌 도장이 곧 자랑거리다. 금액이 하나도 안 드러나서 그대로 올려도 된다. */
.nsHero{display:flex;align-items:flex-end;gap:14px;margin:10px 0 2px;}
.nsHero .n{display:flex;align-items:baseline;gap:3px;}
.nsHero .n b{font-size:52px;font-weight:800;line-height:1;letter-spacing:0;}
.nsHero .n s{text-decoration:none;font-size:19px;font-weight:700;color:var(--sub);}
.nsHero .msg{padding-bottom:5px;}
.nsHero .msg b{display:block;font-size:17px;font-weight:800;line-height:1.2;}
.nsHero .msg em{font-style:normal;font-size:15px;font-weight:600;color:var(--faint);}

.wkhead{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:16px;}
.wkhead span{text-align:center;font-size:13px;font-weight:700;color:var(--faint);letter-spacing:.02em;}
.wkhead span:first-child{color:var(--out);}
.stamps{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:5px;}
.stamps i{position:relative;font-style:normal;display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;font-size:15px;font-weight:700;color:var(--faint);}
.stamps i.off,.stamps i.fut{border:1px solid var(--line2);border-radius:50% !important;opacity:.5;}
.stamps i.fut{border-style:dashed;opacity:.28;}
/* ⛔ 잉크 진하기 변수를 --ink 로 쓰면 안 된다 — 테마의 글씨색 변수와 이름이 겹쳐 그 칸의 글씨색이 망가진다 */
.stamps i.on svg{width:88%;height:88%;color:var(--pop);opacity:var(--nsink,1);transform:rotate(var(--rot,0deg));}
/* 도장 아래 「몇 일차」 — 도장 그림을 가리지 않게 작게, 아래쪽에 (2026-08-01) */
.stamps i.on u{position:absolute;left:0;right:0;bottom:-1px;text-decoration:none;
  font-size:10.5px;font-weight:800;line-height:1;color:var(--ink);opacity:.62;
  text-align:center;letter-spacing:-.02em;}
.stamps i.now::after{content:'';position:absolute;inset:-2px;border:2px solid var(--ink);
  border-radius:50% !important;}

.nsStat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px;}
/* 버티기는 두 칸만 쓴다 (「이대로면 한 달에」를 뺐다 · 2026-07-31) */
.nsStat2{grid-template-columns:repeat(2,1fr);}
/* 「…은 빼고 셉니다」 뒤에 가운뎃점을 붙이지 않는다 (사장님 지시 2026-08-01).
   편집 단추는 줄을 바꿔 따로 세운다 — 문장에 붙이면 문장인지 단추인지 헷갈린다. */
.skipedit{display:flex;gap:14px;margin-top:6px;}
/* 답한 것 목록 — 무엇이라 답했는지 한눈에 */
/* 답한 것 — 구분표가 맨 앞, 그 다음 이름, 오른쪽에 「다시 묻기」.
   ⛔ 생김새는 **가계부 내역(.txlist/.tx)과 똑같이** 간다 (사장님 지시 2026-08-01).
      혼자만 다른 상자로 두면 같은 앱 안에서 남의 화면처럼 보인다.
      → 흰 종이 한 장에 줄만 그어 나눈다. 바탕색(var(--bg))을 칸마다 깔지 않는다. */
.anslist{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--sh);overflow:hidden;}
.ansrow{display:flex;align-items:center;gap:11px;padding:14px 16px;}
.ansrow + .ansrow{border-top:1px solid var(--line);}
.ansrow .sn{flex:1;min-width:0;font-size:17.5px;font-weight:700;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ansrow .sn s{display:block;text-decoration:none;font-size:16px;font-weight:600;color:var(--faint);margin-top:3px;}
/* 답한 목록의 구분표 — 위 세 단추와 **같은 색**이라야 무엇을 누른 건지 이어진다 */
.ansv{flex:none;font-style:normal;font-size:14px;font-weight:800;
  padding:5px 10px;border-radius:999px;text-align:center;min-width:74px;border:1px solid transparent;}
.ansv.good{background:#E6F4EC;border-color:#BFE0CE;color:#1F6B4A;}
.ansv.meh{background:#FDF3DF;border-color:#EEDFB4;color:#8A6410;}
.ansv.no{background:#FCEBEE;border-color:#F2CBD2;color:#9E2740;}
/* ⛔ 칸 이름이 길면 저절로 줄이 바뀌게 둔다. 억지로 한 줄에 넣으면 글자가 잘린다. */
.nsStat em{white-space:normal;word-break:keep-all;}
.nsStat div,.nsStat .statgo{background:var(--bg);border:1px solid var(--line2);padding:11px 8px;text-align:center;}
/* 눌러서 넘어가는 칸 — 누를 수 있다는 걸 밑줄로 알린다 */
.nsStat .statgo{display:block;width:100%;}
.nsStat .statgo em{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2);}
.nsStat .statgo:active{filter:brightness(.96);}
.nsStat b{display:block;font-size:19px;font-weight:800;}
.nsStat em{display:block;font-style:normal;font-size:13px;font-weight:600;color:var(--faint);margin-top:3px;}

.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.bg{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;font-size:14.5px;font-weight:700;
  border:1px solid var(--line2);color:var(--faint);opacity:.55;}
.bg i{font-style:normal;font-size:15.5px;filter:grayscale(1);}
.bg.on{color:var(--ink);opacity:1;background:var(--acc);border-color:transparent;}
.bg.on i{filter:none;}

/* PC 글씨 크기 슬라이더 — 폰에서는 통째로 감춘다(폰은 원래 크기가 맞다) */
.pconly{display:none;}
@media (min-width:900px){ .pconly{display:block;} }
.zrow{display:flex;align-items:center;gap:12px;}
.zrow input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:6px;
  background:var(--line);border-radius:99px !important;outline:none;}
.zrow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;
  border-radius:50% !important;background:var(--paper);border:2px solid var(--ink);
  box-shadow:var(--sh);cursor:pointer;}
.zrow input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;
  background:var(--paper);border:2px solid var(--ink);cursor:pointer;}
.zrow .zval{flex:none;min-width:64px;text-align:right;font-size:16px;font-weight:800;}
.zends{display:flex;justify-content:space-between;margin-top:6px;font-size:14.5px;
  font-weight:700;color:var(--faint);}

.stampgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.stp{border:1px solid var(--line2);background:var(--paper);padding:10px 4px 8px;text-align:center;}
.stp.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}
.stp .art{display:block;height:38px;color:var(--pop);}
.stp .art svg{width:38px;height:38px;margin:0 auto;}
.stp .nm{display:block;font-size:13px;font-weight:700;color:var(--sub);margin-top:5px;line-height:1.2;}

.linkish{font-weight:700;color:var(--pop);text-decoration:underline;text-underline-offset:3px;}

/* ── 되돌릴 수 없는 자리 ─────────────────────────────────
   설정 맨 아래. 여기만 색이 다르다 — 「여기부터는 다른 이야기」라고 눈이 먼저 알아채야 한다.
   ⛔ 테마마다 색을 따로 잡지 않는다. --out(나간 돈 빨강)은 열 테마 모두에 이미 있다. */
.fld.danger{border-top:1px solid var(--line2);padding-top:20px;margin-top:26px;}
.fld.danger > label{color:var(--out);}
.dangerrow{display:flex;align-items:center;gap:12px;margin-top:10px;}
.dangerrow em{flex:1;font-style:normal;font-size:13.5px;line-height:1.5;color:var(--faint);font-weight:600;}
.dangerrow em b{color:var(--sub);font-weight:800;}
.dangerrow .chip{flex:none;}
/* 통째로 지우는 쪽만 빨갛게. 둘 다 빨가면 어느 쪽이 더 센지 안 보인다. */
.chip.hot,.btn.hot{background:var(--out);color:#fff;border-color:var(--out);}
.chip.hot:active,.btn.hot:active{filter:brightness(.92);}
.btn.hot:disabled{opacity:.4;}

/* ── 한 달 카드 미리보기 ─────────────────────────────────
   카드는 1080px 로 그려두고 화면에서만 줄여 보여준다(저장하면 원래 크기로 나온다). */
.cardprev{display:flex;justify-content:center;align-items:center;
  background:var(--paper);border:1px solid var(--line2);padding:14px;margin-bottom:20px;}
.cardprev canvas{display:block;max-width:100%;max-height:44vh;width:auto;height:auto;
  box-shadow:var(--sh2);}

/* 마우스 효과 판 — PC 에서만 쓴다. 클릭을 가로채면 안 되니 pointer-events 는 끈다. */
#fx{position:fixed;inset:0;z-index:35;pointer-events:none;display:none;}
@media (min-width:900px) and (pointer:fine){ #fx{display:block;} }
@media (prefers-reduced-motion:reduce){ #fx{display:none;} }

/* ── 알림 ────────────────────────────────────────────────── */
#toast{position:fixed;left:50%;bottom:calc(104px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:70;background:var(--ink);color:var(--bg);border-radius:11px;
  padding:12px 20px;font-weight:700;font-size:17.5px;box-shadow:var(--sh2);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap;max-width:90vw;
  overflow:hidden;text-overflow:ellipsis;}
#toast.on{opacity:1;transform:translateX(-50%) translateY(-6px);}
/* ⛔ PC 에서는 조금 더 내린다 (사장님 지시 2026-08-18 : 「네비게이션바 안 닿게 아래로 조금」).
   폰과 달리 PC 는 화면이 넓고 낮아서, 104px 이 화면 한가운데쯤에 뜬 것처럼 보였다.
   ⛔ 탭막대 높이(약 75px)보다는 **반드시 커야** 한다. 작게 잡으면 알림이 탭막대에 깔린다.
      13px 을 띄워 둔다 — 켜질 때 6px 더 올라가니 실제로는 19px 이 뜬다. */
@media (min-width:900px){ #toast{bottom:calc(88px + env(safe-area-inset-bottom));} }

.screen{animation:fade .22s ease;}
@keyframes fade{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}

@media (max-width:350px){ html{font-size:17px;} .hero .big{font-size:36px;} }

/* PC 에서는 화면이 넓어 폰용 글씨가 너무 작다 — 통째로 30% 키운다.
   크기가 px 로 박혀 있어 zoom 이 가장 확실하다. 폰(좁은 화면)은 건드리지 않는다.

   ⛔ zoom 은 vh·vw 를 보정하지 않는다. 92vh 가 그대로 1.45배로 커져 시트가 화면보다 길어지고
      윗부분(제목)이 잘린다. 그래서 화면 기준 값은 여기서 직접 --z 로 나눠준다.
      화면 크기에 매달린 값을 새로 쓸 때는 반드시 이 칸에도 나눠 적을 것. */
@media (min-width:900px){
  /* --z 는 고객이 설정에서 슬라이더로 정한다(코드가 html 에 직접 적어 넣는다).
     여기 값은 아직 안 정했을 때 쓰는 기본값이다. */
  html{ --z:1.45; zoom:var(--z); }
  .sheet{ max-height:calc(92vh / var(--z)); }
  .sheetbg{ width:calc(100vw / var(--z)); height:calc(100vh / var(--z)); }
  #gate{ width:calc(100vw / var(--z)); height:calc(100vh / var(--z)); }
  .cardprev canvas{ max-height:calc(44vh / var(--z)); }
}

/* ── 라운드는 겹치지 않는다 ────────────────────────────────
   둥근 상자(카드·목록·시트) 안에 든 요소는 각지게 간다. 바깥 상자만 둥글어야 형태가 또렷하다.
   위쪽 규칙들을 덮어야 해서 !important 를 쓴다.
   ⚠️ 새 요소에 border-radius 를 넣어도 이 상자들 안이면 먹지 않는다 — 의도한 것.
   예외는 말풍선뿐이다 — 레퍼런스에서 말풍선은 둥근 게 곧 정체성이라 각지면 말풍선으로 안 보인다.
   글씨박스(.sticker)는 반대로 각진 게 레퍼런스(8160) 모양이라 그대로 각지게 둔다. */
.card *, .txlist *, .fontlist *, .sheet *, .bubble * { border-radius:0 !important; }
.card .bubble, .sheet .bubble { border-radius:22px !important; }
.tx .dot, .thm .prev i { border-radius:50% !important; }

/* ══ 2026-08-04 손보기 ═══════════════════════════════════════ */

/* ── 칩 고르기 : 접어두기 · 직접 넣기 ─────────────────────
   분류가 마흔 개라 다 펼치면 「얼마」와 「언제」가 칩밭에 묻힌다.
   자주 쓰는 여덟 개만 내놓고, 「＋N개 더」로 나머지를 편다. */
/* ── 칩을 꾹 눌러 끌어서 차례 바꾸기 (사장님 지시 2026-08-10) ────────────
   차례는 설정이 아니라 **분류를 고르는 이 자리**에서 바꾼다.
   ⛔ .reordering 은 꾹 누른 뒤에 붙는다. touch-action:none 이 그때 걸려야
      브라우저가 세로 끌기를 「화면 넘기기」로 채 가지 않는다. 처음부터 걸어 두면
      정작 칩 줄 위에서 손가락으로 화면을 못 넘긴다. */
.pickrow.reordering{touch-action:none;}
.pickrow.reordering .chip{transition:transform .12s;}
.pickrow .chip.dragging{background:var(--pop);border-color:transparent;color:#fff;
  transform:scale(1.08);box-shadow:0 5px 14px rgba(0,0,0,.2);position:relative;z-index:2;}
.pickrow .chip.more{background:var(--bg);border-style:dashed;color:var(--sub);}
.pickrow .chip.add{background:var(--acc);border-color:transparent;color:#101208;font-weight:800;}
.pickrow .pickmore{display:contents;}
.pickrow .pickmore.hidden{display:none !important;}
/* 칩 줄에 끼어드는 「새 이름 + 넣기」 — 칩 줄이 좁아지면 이 덩어리가 통째로 눌린다.
   그때 줄어들 것은 「넣기」가 아니라 이름 적는 칸이다. 단추는 글자 폭 밑으로 안 줄인다. */
.pickinput{display:inline-flex;align-items:center;gap:6px;max-width:100%;}
.pickinput input{flex:1 1 118px;min-width:0;width:118px;
  border:1px solid var(--ink) !important;padding:6px 10px !important;
  font-size:17px !important;font-weight:700;}
.pickinput button{flex:none;white-space:nowrap;
  border:1px solid var(--ink);background:var(--ink);color:var(--bg);
  padding:7px 12px;font-size:16px;font-weight:800;}

/* 아직 서버에 안 들어간 줄 — 「적는 중」이라고 적고 살짝 흐리게 */
.tx.tmp{opacity:.55;}
.tx.tmp .fxtag{background:var(--acc);color:#101208;border-color:transparent;}

/* ── 통장 / 카드 가르기 ───────────────────────────────────
   카드로 산 것은 그날 통장이 안 줄고, 결제일에 카드값으로 한 번에 빠진다.
   둘을 더한 수만 보여주면 「이번 달 통장에서 얼마 나가나」를 알 수 없다. */
.splitrow{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:4px;}
.splitrow > button{display:block;width:100%;text-align:left;background:var(--bg);border:1px solid var(--line2);padding:11px 12px;}
.splitrow > button:active{filter:brightness(.96);}
.splitrow > button.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}
.splitrow button i{display:block;font-style:normal;font-size:12.5px;font-weight:700;color:var(--sub);margin-top:5px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2);}
.splitrow button.on i{color:var(--ink);}
.splitrow em{display:block;font-style:normal;font-size:14.5px;font-weight:600;color:var(--faint);}
.splitrow b{display:block;font-size:19px;font-weight:800;margin-top:3px;}

/* ── 버티기 셈의 속 ───────────────────────────────────────
   결과만 크게 띄우면 그 숫자를 믿을 근거가 없다. 무엇을 뺐는지가 보여야 한다. */
.holdmath{margin-top:14px;border-top:1px solid var(--line);}
.holdmath .hm{display:flex;align-items:baseline;gap:12px;padding:9px 2px;}
/* 셈 첫 줄이 곧 「가지고 있는 돈 고치기」다 (2026-08-08). 줄 모양은 그대로 두고
   눌리는 것만 티 나게 — 금액에 밑줄을 그어 고칠 수 있는 값임을 알린다. */
.holdmath button.hm{width:100%;background:none;border:none;font:inherit;color:inherit;}
.holdmath button.hm s{text-align:left;}
.holdmath button.hm b{text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--line2);}
.holdmath button.hm:active{opacity:.6;}
.holdmath .hm + .hm{border-top:1px solid var(--line);}
.holdmath .hm s{flex:1;text-decoration:none;font-size:15.5px;font-weight:600;color:var(--faint);}
.holdmath .hm b{font-size:17px;font-weight:800;}
.holdmath .hm.minus b{color:var(--out);}
.holdmath .hm.total s{color:var(--ink);font-weight:800;}
.holdmath .hm.total b{font-size:20px;}
.holdmath .hm.total b.over{color:var(--out);}
/* 「카드·고정지출 내고 남는 돈」 — 이름은 위, 금액과 날짜는 아랫줄에 나란히
   (사장님 지시 2026-08-17). 다른 .hm 줄들과 달리 이 줄만 두 층이다.
   ⛔ 날짜(em)를 금액과 **같은 밑선**에 둔다. 가운데로 맞추면 큰 숫자 옆에서 떠 보인다. */
.holdmath .hm.total.free{display:block;padding:11px 2px 12px;}
.holdmath .hm.total.free s{display:block;}
.holdmath .hm.total.free .v{display:flex;align-items:baseline;gap:10px;margin-top:5px;}
/* 금액은 안 끊는다 — 좁은 폰에서 「원」만 아랫줄로 떨어진 적이 있다(.holdplan 과 같은 까닭) */
.holdmath .hm.total.free .v b{white-space:nowrap;}
.holdmath .hm.total.free .v em{font-style:normal;font-size:16px;font-weight:700;
  color:var(--sub);white-space:nowrap;}
.holdsub.no{color:var(--out);font-weight:700;}

/* ── 버티기 「자세히 보기」 (사장님 지시 2026-08-08) ──────────────────
   폰에서 이 카드 하나가 화면 세 장을 잡아먹었다. 사장님이 남기라 하신 것은
   **어떻게 나온 숫자인지**(셈 넉 줄 + 달마다 나가는 표) 하나. 나머지는 이 안으로 접었다.
   ⛔ 접힌 것을 display:none 이 아닌 다른 방법으로 숨기지 말 것 — 안에 입력칸(#hMoreIn)이
      있어서, 보이지 않는 채 탭 순서에 남으면 폰에서 허공에 글쇠판이 뜬다. */
.holdtog{margin-top:14px;background:transparent;border-color:var(--line2);
  color:var(--sub);font-weight:700;}
.holdtog::after{content:' ▾';font-size:13px;}
.holdtog.on::after{content:' ▴';}
.holdmore > .holdbig{margin-top:4px;}
/* 고정 탭 머리에도 같은 접는 단추를 쓴다 (사장님 지적 2026-08-14 : 「이부분이 너무
   복잡하게 느껴져」). 두 자리가 같은 몸짓이라 모양도 같아야 한다 — 새로 짓지 않는다.
   ⛔ 접힌 안에 「펼쳐보기」(.onlynote)가 또 있어서, 열었을 때 위와 붙지 않게 띄운다. */
.fixtog{margin:4px 0 0;}
.fixmore > *:first-child{margin-top:12px;}

/* ── 몇 월에 얼마가 나가나 — 2026-08-11 사장님 지시로 뺐다 ──────
   .schedbox/.srow 묶음이 여기 있었다. 되살리실 때는 app.js 의 schedBox() 와
   landing.html 의 이야기 칸·표를 함께 살릴 것. 서버가 주는 h.sched 는 그대로 있다. */

/* ── 돈을 더 넣으면 (2026-08-06) ─────────────────────────
   누르는 즉시 답이 나와야 한다. 서버에 다시 묻지 않는다. */
.morebox{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.morebox .hg{font-size:16.5px;font-weight:800;margin-bottom:9px;}
.morebox .cnum{display:inline-flex;align-items:center;gap:6px;
  background:var(--paper);border:1px solid var(--line2);padding:0 10px;border-radius:var(--r-chip);}
.morebox .cnum input{width:84px;border:none;outline:none;background:transparent;
  font-size:16px;font-weight:700;padding:6px 0;text-align:right;}
.morebox .cnum i{font-style:normal;font-size:15px;font-weight:600;color:var(--faint);}
.moreout{display:none;}
.moreout.on{display:block;margin-top:12px;}
.moreout .mo s{text-decoration:none;font-size:16px;font-weight:600;color:var(--sub);}
.moreout .mo2{margin:9px 0 4px;}
.moreout .mo2 > div{display:flex;align-items:baseline;gap:9px;padding:9px 2px;flex-wrap:wrap;}
.moreout .mo2 > div + div{border-top:1px solid var(--line);}
.moreout .mo2 em{flex:1;min-width:104px;font-style:normal;font-size:15px;font-weight:600;color:var(--faint);}
.moreout .mo2 b{font-size:17px;font-weight:800;color:var(--sub);}
.moreout .mo2 b.up{color:var(--ink);font-size:19px;}
.moreout .mo2 i{font-style:normal;font-size:15px;color:var(--faint);}

/* ── 회사 운영에 드는 돈 (2026-08-06) ────────────────────
   종류 칩과 다른 축이라 색도 달라야 한다 — 「하나 고르기」로 안 읽히게. */
.chip.biz{border-color:var(--ink);color:var(--ink);font-weight:800;}
.chip.biz.on{background:var(--ink);color:var(--bg);}
.bizbox{margin-top:4px;}
.bizbox .billitems{margin-top:12px;}
/* 아직 시작 안 한 것 — 이번 달 합계에 안 들어갔다는 걸 눈으로도 알린다 (고정 목록의 .soon 과 같다) */
.bi.soon{opacity:.55;}

/* ── 청구서 속 보기 ───────────────────────────────────────
   금액만 보여주면 「이게 왜 이만큼이지」에 답할 길이 없다. */
.billopen{display:flex;gap:7px;margin-top:10px;}
.billopen .chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.billbox{margin-top:10px;}
.billitems{background:var(--bg);border:1px solid var(--line2);padding:4px 12px 8px;}
.bihead{font-size:14.5px;font-weight:700;color:var(--faint);padding:9px 0 7px;
  border-bottom:1px solid var(--line);word-break:keep-all;line-height:1.35;}
.bihead b{color:var(--ink);font-weight:800;}
/* ⛔ 「N건 · 합계 ○○○원」은 **늘 새 줄**에서 시작한다 (사장님 지시 2026-08-26).
   한 줄에 두면 폰 너비에 따라 접히는 자리가 그때그때 달라져, 어떤 날은 「합계 688,854원」만
   둘째 줄로 떨어졌다. 윗줄은 무엇인지, 아랫줄은 얼마인지로 가른다. */
.bihead .bicount{display:block;margin-top:2px;}
.bi{display:flex;align-items:center;gap:8px;padding:9px 0;}
.bi + .bi{border-top:1px solid var(--line);}
.bi .bd2{flex:none;font-size:14px;font-weight:700;color:var(--faint);min-width:38px;}
.bi b{flex:1;min-width:0;font-size:16.5px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bi .tag{flex:none;font-style:normal;font-size:13px;font-weight:800;
  background:var(--acc);color:#101208;padding:3px 7px;}
.bi em{flex:none;font-style:normal;font-size:16.5px;font-weight:800;margin-left:auto;}
/* ⛔ 긴 꼬리표가 **금액을 칸 밖으로 밀어내던 것** (사장님 지적 2026-08-25 :
   「1년에 한 번 · 8월 · 2027년 8월부터」 줄에서 18,710 이 잘렸다).
   꼬리표만 줄어들고 두 줄로 접힌다. 낱말 가운데서 안 끊기게 keep-all 을 같이 건다.
   ⛔ 금액(em)은 flex:none 그대로 둘 것 — 돈이 줄어들면 안 된다. */
.bi .tag{flex:0 1 auto;min-width:0;white-space:normal;word-break:keep-all;line-height:1.3;}
/* 펼친 자리 — 화면을 옮겨 올 때 머리가 딱 붙지 않게 숨통을 둔다 */
.fpayopen{scroll-margin-top:12px;}
/* 끊기면 안 되는 토막 (「합계 700,878원」처럼 숫자가 홀로 다음 줄로 떨어지는 것을 막는다) */
.nw{white-space:nowrap;}
/* 눌러서 그 항목을 여는 줄 (2026-08-12) — button 이라 폭·정렬을 되돌려 준다.
   ⛔ 색이나 밑줄로 꾸미지 않는다. 목록 스무 줄이 전부 눌리는 줄이라 다 꾸미면 목록이 아니게 된다.
      눌리는 것은 손가락을 대 보면 안다(누를 때만 살짝 눌린다). */
.bi.bilink{width:100%;text-align:left;font-family:inherit;}
.bi.bilink:active{background:var(--line);}
/* ⛔ 아직 안 나간 것을 흐리게 두지 않는다 — 어차피 그날 한 덩어리로 빠진다 (2026-08-05) */

/* ── 돈이 나갔는데 도장이 찍힌 날 ─────────────────────────
   까닭을 안 적으면 손님은 앱이 틀렸다고 본다. 앱이 맞아도 믿음은 깨진다. */
.stampwhy{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);}
.stampwhy > b{display:block;font-size:16px;font-weight:800;margin-bottom:8px;}
/* 한 줄이 눌리는 단추가 됐다 (사장님 지시 2026-08-07 — 누르면 그날 내역이 모달로 뜬다).
   ⛔ 눌리는 자리라는 걸 몸짓으로 알려야 한다. 오른쪽에 「＞」를 두고 누르면 색이 뒤집힌다. */
.stampwhy .sw{display:flex;align-items:baseline;gap:10px;padding:8px 0;
  width:100%;text-align:left;background:none;border:none;font-family:inherit;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.stampwhy .sw::after{content:'›';flex:none;font-size:19px;font-weight:800;color:var(--faint);
  align-self:center;margin-left:2px;}
.stampwhy .sw:active{background:var(--paper);}
.stampwhy .sw + .sw{border-top:1px solid var(--line);}
.stampwhy .sw s{flex:none;text-decoration:none;font-size:15.5px;font-weight:700;color:var(--sub);min-width:62px;}
.stampwhy .sw em{flex:1;font-style:normal;font-size:15px;font-weight:600;color:var(--faint);}
.stampwhy .sw i{flex:none;font-style:normal;font-size:16px;font-weight:800;color:var(--out);}

/* ── 계산기 : 되돌리기 · 계산 누적내역 ─────────────────── */
.ck:disabled{opacity:.3;pointer-events:none;}
/* .clog 자리/모양은 아래 「계산한 것」 칸에서 정한다 (2026-08-05) */
.clhead{display:flex;align-items:baseline;font-size:14.5px;font-weight:700;color:var(--faint);
  padding:0 2px 7px;}
.clhead .linkish{margin-left:auto;}
.clrow{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;
  background:var(--paper);border:1px solid var(--line);padding:9px 12px;}
.clrow + .clrow{border-top:none;}
.clrow s{flex:1;min-width:0;text-decoration:none;font-size:15px;font-weight:600;color:var(--sub);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.clrow b{flex:none;font-size:16.5px;font-weight:800;}
.clrow:active{background:var(--bg);}

/* 설치할 수 있는 기기에서는 머리 위 단추가 스스로 알린다 */
#btnInstall.can{background:var(--acc);border-color:transparent;}
#btnInstall.can::after{content:'';position:absolute;top:4px;right:4px;width:8px;height:8px;
  border-radius:50%;background:var(--pop);}
#btnInstall{position:relative;}

/* ── 체험 띠 · 결제 ─────────────────────────────────────────
   ⛔ 겁주지 않는다. 체험 중에는 못 쓰는 게 하나도 없다.
      그래서 색을 세게 쓰지 않고, 마지막 이레에만 뜬다. */
/* ⛔ 탭막대(75px)보다 위에 앉아야 한다. 72px 이면 틈이 5px 뿐이라 붙어 보인다.
   ⛔ #ownerBar 와는 자리가 겹치는데, 그건 app.js 에서 **띄우지 않는 쪽**으로 푼다
      (안전 안내가 파는 말보다 위다). CSS 로 비켜 세우면 둘 다 반쪽으로 보인다. */
#trialBar{position:fixed;left:0;right:0;bottom:calc(88px + env(safe-area-inset-bottom));
  z-index:42;padding:0 12px;pointer-events:none;}
/* 예시 띠가 떠 있으면 그 위로 비켜 준다 */
body.demoing #trialBar{display:none;}
#trialBar .in{max-width:520px;margin:0 auto;display:flex;align-items:center;gap:11px;
  background:var(--paper);border:1px solid var(--ink);border-radius:var(--r-card);
  padding:11px 13px;box-shadow:var(--sh);pointer-events:auto;}
#trialBar .tx{flex:1;min-width:0;line-height:1.35;}
#trialBar .tx b{display:block;font-size:16.5px;font-weight:800;}
#trialBar .tx span{display:block;font-size:14px;color:var(--sub);margin-top:2px;word-break:keep-all;}
#trialBar .tx span b{display:inline;font-size:inherit;font-weight:800;color:var(--ink);}
#trialBar button{flex:none;background:var(--ink);color:var(--bg);border:none;
  padding:11px 14px;font-size:15.5px;font-weight:800;white-space:nowrap;}
#trialBar button:active{opacity:.85;}

/* 결제 시트 · 되는 것과 멈추는 것을 나란히 놓는다.
   ⛔ 뭉뚱그리면 손님은 **자기 기록을 못 보게 된 줄** 알고 겁을 낸다. */
.paysplit{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px;}
.paysplit > div{border:1px solid var(--line2);padding:12px;background:var(--paper);}
.paysplit b{display:block;font-size:15px;font-weight:800;margin-bottom:7px;}
.paysplit em{display:block;font-style:normal;font-size:14.5px;font-weight:600;
  color:var(--sub);line-height:1.5;margin-top:3px;word-break:keep-all;}
.paysplit em u{text-decoration:underline;text-underline-offset:2px;font-weight:700;color:var(--ink);}
.paysplit .ok{background:#E6F4EC;border-color:#BFE0CE;}
.paysplit .ok b{color:#1F6B4A;}
.paysplit .ok em{color:#2C6B4F;}
.paysplit .no b{color:var(--sub);}
@media (max-width:380px){ .paysplit{grid-template-columns:1fr;} }

/* 폰에 놓아두시라고 딱 한 번 권하는 띠.
   ⛔ 광고가 아니라 **연락할 길**이다. 연락처를 안 받기로 했으니 홈 화면 아이콘이
      손님을 다시 부를 유일한 수단이다. 그래서 눈에는 띄되 재촉조가 아니어야 한다.

   ⛔ 띠 바탕에 --acc 를 쓰지 않는다 (사장님 지적 2026-08-06 · PC에서 잘 안 보인다).
      라임 테마의 바탕이 곧 라임이라 **라임 띠가 라임 배경에 녹아** 없는 것처럼 보였다.
      먹색으로 간다 — 예시 띠(#introBar)·운영자 띠(#ownerBar)와 같은 방식이고,
      바탕색이 테마마다 바뀌어도 먹색은 늘 읽힌다. 라임은 「설치」 단추에만 남긴다. */
/* ⛔ 흐르는 띠(마퀴)로 바꿨다 (사장님 지시 2026-08-11 : 「마퀴를 띄우자」).
      까닭은 **설치로 가는 길이 이미 화면 맨 위에 있다**는 것이다 — 머리줄의 폰 단추.
      그 길이 있는데 큰 상자를 하나 더 세우면 같은 말을 두 번 하면서 본문만 가린다.
      그래서 알리는 일만 남기고 **가장 얇은 모양**으로 줄였다. 맨 위에 붙이는 것도
      같은 까닭이다 — 흐르는 글이 바로 아래 폰 단추를 가리킨다.
   ⛔ 오른쪽 여백 카드는 걷어냈다 (같은 날 · 만들었다가 무른 것).
   ⛔ 높이를 px 로 박아 두고 body 여백을 따로 적지 않는다. 두 숫자가 어긋나면
      머리줄이 잘린다. 한 곳(--insh)에서 둘 다 가져다 쓴다. */
/* ⛔ **있는 듯 없는 듯** (사장님 지적 2026-08-11 : 「너무 튀어」 · 「굵기도 너무 굵고」).
      먹색 바탕 · 라임 단추 · 두꺼운 글씨로 만들었더니 화면 맨 위에서 혼자 소리를 질렀다.
      이건 알림이지 광고가 아니다. 눈에 걸리면 그때 읽히면 되고, 아니면 안 읽혀도 된다.
      ⛔ 낮추는 길은 넷이고 **넷을 다 써야** 한다. 하나만 빼면 도로 튄다 —
         ① 띠를 얇게(26px) ② 글씨를 가늘게(500) ③ 색을 흐리게(--faint)
         ④ 라임을 한 군데도 안 쓴다(단추까지 글자 단추로).
      ⛔ 그래도 --acc 바탕은 안 쓴다 (2026-08-06 · 라임 테마에서 통째로 녹는다).
         종이색은 카드가 쓰는 색이라 어느 테마에서도 바탕과 조용히 갈라진다.
      ⛔ 굵게(b) 를 아주 없애지는 않는다. 흐르는 글에서 눈이 걸릴 데가 하나도 없으면
         그냥 흘러가는 무늬가 된다. 한 단만 올린다(600 · --sub). */
/* ⛔ **먹색 띠 · 글씨만 흰색**으로 갔다 (사장님이 고르심 2026-08-11).
      바탕을 한 겹 어둡게(검정 10%) 하는 길도 있었는데, 그건 테마마다 다른 색이
      되어 라임에서는 흐린 올리브로 앉는다. 먹색은 여덟 테마 어디서나 같은 얼굴이고
      바탕과 확실히 갈라진다 (예시 띠·운영자 띠와도 같은 방식이다).
   ⛔ 먹색으로 처음 만들었을 때 「너무 튀어」였던 것은 **색 때문이 아니었다** —
      38px 두께 · 15px 두꺼운 글씨 · 라임 단추 · 내려도 안 없어지는 붙박이가 문제였다.
      그것들을 다 걷어낸 지금(26px · 13px/500 · 글자 단추 · 맨 위에서만)은
      **같은 먹색이라도 조용하다.** 이 넷 중 하나라도 되돌리면 도로 튄다.
   ⛔ 흰 글씨를 100% 로 켜지 않는다. 먹색 위 순백은 글자마다 빛이 번져 보인다.
      본문은 82% 로 눕히고 굵게(b) 만 100% 로 세운다 — 눈이 걸릴 데는 거기 하나면 된다. */
#installBar{--insh:26px;
  position:fixed;top:0;left:0;right:0;z-index:43;
  background:var(--ink);color:var(--paper);
  padding-top:env(safe-area-inset-top);
  transition:transform .18s ease,opacity .18s ease;}
/* 맨 위에서만 보인다 (사장님 지시 2026-08-11) — 내려가면 위로 걷힌다.
   ⛔ display:none 으로 지우지 않는다. 스르르 걷혀야 「사라졌다」가 아니라
      「올라가면 다시 있다」로 읽힌다. 툭 없어지면 고장으로 본다. */
#installBar.gone{transform:translateY(-100%);opacity:0;pointer-events:none;}
@media (prefers-reduced-motion:reduce){ #installBar{transition:none;} }
#installBar .in{display:flex;align-items:center;gap:0;height:var(--insh);
  padding:0 2px 0 10px;max-width:none;margin:0;}
#installBar .ic{flex:none;}
/* 흐르는 칸. 양 끝을 흐리게 지워 글이 **잘리는 게 아니라 사라지게** 보이도록 한다 */
#installBar .mq{flex:1;min-width:0;overflow:hidden;margin:0 8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);}
/* ⛔ 같은 글을 **두 벌** 깔고 딱 반만 밀어야 이음매 없이 돈다.
      한 벌만 두고 -100% 로 밀면 글이 다 지나간 뒤 빈 띠가 한 바퀴 돈다.
   ⛔ 38초까지 늦췄다가 「속도 더 빠르게」로 도로 올렸다 (2026-08-11).
      너무 느리면 글이 붙박이처럼 보여 오히려 읽히지 않는다. 20초가 지금 자리다. */
#installBar .track{display:flex;width:max-content;animation:insroll 20s linear infinite;}
#installBar .msg{white-space:nowrap;padding-right:80px;font-size:13px;font-weight:500;
  letter-spacing:.01em;line-height:var(--insh);opacity:.82;}
#installBar .msg b{font-weight:600;color:inherit;opacity:1;}
@keyframes insroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* PC 에서 읽으려고 멈추실 수 있게. 폰에서는 hover 가 없어 아무 일도 안 일어난다 */
#installBar:hover .track{animation-play-state:paused;}
/* ⛔ 흐르는 글은 어지럼을 만든다. 「움직임 줄이기」를 켠 분께는 멈춰 세워 둔다 */
@media (prefers-reduced-motion:reduce){ #installBar .track{animation:none;} }
/* 단추도 단추처럼 안 생기게 — 글자 하나로 둔다. 상자와 라임을 빼면 그것만으로 조용해진다 */
#installBar button{flex:none;background:transparent;color:var(--paper);border:none;
  padding:6px 8px;font-size:12.5px;font-weight:600;white-space:nowrap;
  text-decoration:underline;text-underline-offset:3px;}
#installBar button.x{color:var(--paper);opacity:.55;padding:6px 9px;font-size:13px;text-decoration:none;}
#installBar button:active{opacity:.8;}
/* 띠에 머리줄이 가리지 않게 위를 비운다 (머리줄은 sticky 가 아니라 그냥 밀린다) */
body:has(#installBar){padding-top:calc(26px + env(safe-area-inset-top));}
body.demoing #installBar{display:none;}

/* 얼리버드 — 먼저 오신 분께 드리는 값.
   ⛔ 거짓 급함을 만들지 않는다. 남은 자리를 그대로 적고, 다 차면 조용히 정가로 돌아간다. */
.earlytag{display:inline-block;background:var(--acc2);color:#101208;
  padding:7px 12px;font-size:15px;font-weight:700;margin-bottom:12px;}
.earlytag b{font-weight:800;}
.tithebig .was{text-decoration:line-through;font-size:24px;font-weight:700;
  color:var(--faint);margin-right:10px;letter-spacing:0;}

/* ── 청구서 상자를 눌러 펼치기·접기 (사장님 지시 2026-08-05) ──────
   ⛔ 예전엔 아래에 「속 보기」 단추가 따로 있었는데, 무엇의 속인지가 안 붙어 보였다.
      이제 **상자 자체가 단추**다. 누르면 펼쳐지고 다시 누르면 접힌다. */
.billrow .bl > .blbox{display:block;width:100%;text-align:left;
  background:var(--bg);border:1px solid var(--line2);padding:11px 12px;position:relative;}
.billrow .bl > .blbox:not(:disabled){cursor:pointer;}
.billrow .bl > .blbox:not(:disabled):active{filter:brightness(.96);}
.billrow .bl > .blbox.open{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}
/* ⛔ 화살표를 붙이지 않는다 (사장님 지시 2026-08-05). 말로 이미 다 했다.
   ⛔ 글자는 CSS content 로 바꾼다. 자바스크립트로 갈아 끼우면 다시 그릴 때마다 어긋난다. */
.billrow .blbox .caret{display:block;font-style:normal;font-size:13.5px;font-weight:700;
  color:var(--sub);margin-top:6px;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line2);}
.billrow .blbox .caret::after{content:'펼쳐보기';}
.billrow .blbox.open .caret{color:var(--ink);}
.billrow .blbox.open .caret::after{content:'접어두기';}
/* 청구서 금액 넣기는 상자 밖 한 줄로 뺀다 — 상자 안에 두면 눌러서 같이 펼쳐진다 */
.billfix{margin-top:9px;text-align:right;}

/* 십일조 단추 — 윗글과 맞닿아 한 덩어리로 보이던 것 (사장님 지적 2026-08-05) */
.tithebtn{margin-top:14px;}
/* 그 주일 자로 미리 적어 두신 것 (2026-08-08) — 「낼 것」과 헷갈리면 안 되니
   한 칸 띄우고 체크 표시를 앞에 단다. 「다 냈어요」가 아니라 「적어 두셨어요」다. */
.tithedone{margin-top:8px;padding-top:9px;border-top:1px solid var(--line);}
.tithedone::before{content:'✓ ';font-weight:800;color:var(--in);}

/* 설치 띠의 폰 그림 — 왼쪽 빈 자리를 채운다 (사장님 지시 2026-08-05).
   ⛔ 그림이 글보다 빨리 「설치 이야기」를 말한다. 글만 있으면 띠가 왼쪽으로 허전하다. */
/* ⛔ 폰 그림이 **까만 동그라미**로만 보이고 있었다 (2026-08-06).
      아이콘 원본(index.html 의 #i-phone)이 `stroke="currentColor"` 를 **속성**으로 달고 있어
      부모 svg 에 CSS 로 적은 stroke 를 이긴다. 그래서 색을 정하는 건 stroke 가 아니라
      **color** 다. 여기서 color 를 안 주면 띠의 글자색을 그대로 물어 온다.
      ⛔ 새 아이콘을 넣을 때도 stroke 말고 color 로 색을 준다. */
#installBar .ic{flex:none;width:36px;height:36px;display:flex;align-items:center;
  justify-content:center;background:var(--acc);color:#101208;border-radius:50%;}
#installBar .ic svg{width:19px;height:19px;fill:none;}

/* ⛔ 마퀴에서는 폰 그림이 **라임 동그라미를 벗는다.** 띠 높이가 26px 뿐인데
      거기 라임 원이 박히면 그 점 하나가 띠 전체보다 크게 보인다 (2026-08-11).
      바탕을 지우고 글씨색을 물려 받아 글줄의 한 글자처럼 앉힌다. */
#installBar .ic{width:15px;height:15px;background:none;color:inherit;border-radius:0;}
#installBar .ic svg{width:15px;height:15px;}

/* 고정지출 넣는 단추 — 안내 말풍선 **안**에 둔다 (사장님 지시 2026-08-05).
   ⛔ 맨 아래에 두면 안내를 읽고 「그래서 어디서 넣지」 하고 한참 내려가야 한다. */
/* ⛔ 위쪽 여백은 **여기서 준다** (사장님 지적 2026-08-15 : 「지금 카드로 나가요 박스랑
   붙어버림」). 2026-08-15 에 그 사이에 있던 「자세히 보기」 단추를 걷어내면서
   그 단추가 들고 있던 margin-top 까지 같이 사라져, 말풍선이 위 상자에 딱 붙었다.
   ⛔ .bubble 의 margin:0 0 26px 이 위쪽을 0 으로 눕히므로 이 줄이 반드시 있어야 한다. */
.bubble.addbox{padding-bottom:14px;margin-top:18px;}
.addbox .addrow{display:flex;gap:9px;margin-top:14px;}
.addbox .addrow .btn{flex:1;}

/* 계산기 키보드 안내 — 넓은 화면에서만. 폰에는 키보드가 없다. */
.ckeyhint{display:none;margin-top:10px;font-size:13px;color:var(--faint);
  font-weight:600;line-height:1.5;text-align:center;}
.ckeyhint b{color:var(--sub);font-weight:800;}
@media (min-width:900px){ .ckeyhint{display:block;} }

/* 할부 개월수 — 「몇 달마다」 칸과 같은 모양(칩 + 직접 적는 칸)으로 간다 (2026-08-05).
   ⛔ 같은 앱에서 같은 일은 같게 생겨야 한다. */
#xinstmon .cnum,#tinstmon .cnum{display:inline-flex;align-items:center;gap:6px;
  background:var(--paper);border:1px solid var(--line2);padding:0 10px;}
#xinstmon .cnum input,#tinstmon .cnum input{width:56px;border:none !important;outline:none;background:transparent;
  text-align:center;font-size:16px;font-weight:700;padding:7px 0 !important;}
#xinstmon .cnum i,#tinstmon .cnum i{font-style:normal;font-size:14.5px;font-weight:700;color:var(--sub);}

/* 할부 수수료 — 「% · 연」을 **칸 안에** 넣고, 그 옆에 「○년 ○월에 끝나요」를 세운다
   (사장님 지시 2026-08-15). 이 칸에는 여태 CSS 가 없어서, 바로 위 개월수 칸만
   네모 상자이고 여기는 민낯 입력칸이었다. 개월수 칸과 **같은 생김새**로 맞춘다.
   ⛔ 좁은 폰에서 「끝나요」가 길어지면 아랫줄로 내려간다(flex-wrap). 겹쳐서 잘리게 두지 않는다. */
#xinstrate,#tinstrate{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
#xinstrate .cnum,#tinstrate .cnum{display:inline-flex;align-items:center;gap:6px;
  background:var(--paper);border:1px solid var(--line2);padding:0 10px;}
#xinstrate .cnum input,#tinstrate .cnum input{width:64px;border:none !important;outline:none;background:transparent;
  text-align:center;font-size:16px;font-weight:700;padding:7px 0 !important;}
#xinstrate .cnum i,#tinstrate .cnum i{font-style:normal;font-size:14.5px;font-weight:700;color:var(--sub);}
#xinstrate #xInstHint{margin:0;flex:1;min-width:120px;}
/* 적기 화면(#tinstrate)도 같은 칸이다 — 위 네 줄을 같이 쓴다 (2026-08-27) */

/* 계산한 것 — 셈판 왼쪽 위 구석의 시계 그림. 누를 때만 **아래에서 위로** 펼쳐진다
   (사장님 지시 2026-08-05). 늘 펼쳐 두면 줄이 쌓일수록 자판을 밀어낸다.
   ⛔ 단추처럼 칠하지 않는다. 여기 주인공은 숫자다. 회색 선 그림 하나면 된다. */
.calc{position:relative;}
.cdisp{position:relative;}
.clbtn{position:absolute;left:8px;top:8px;z-index:2;
  width:26px;height:26px;padding:0;border:none;background:transparent;
  display:flex;align-items:center;justify-content:center;opacity:.42;}
.clbtn svg{width:19px;height:19px;stroke:#6E6C64;fill:none;}
.clbtn:active{opacity:.75;}
.clbtn.on{opacity:.95;}
.clbtn.hidden{display:none !important;}

/* 아래에서 위로 펼쳐진다 — 자판 위로 겹쳐 떠서 화면이 안 밀린다 */
.clog{position:absolute;left:0;right:0;bottom:64px;z-index:5;
  background:var(--paper);border:1px solid var(--ink);box-shadow:0 12px 34px rgba(0,0,0,.22);
  padding:10px 12px 12px;max-height:280px;overflow-y:auto;
  transform-origin:bottom center;animation:clogUp .18s cubic-bezier(.2,.9,.3,1);}
@keyframes clogUp{ from{opacity:0;transform:translateY(14px) scaleY(.96);} to{opacity:1;transform:none;} }
@media (prefers-reduced-motion:reduce){ .clog{animation:none;} }
.clog.hidden{display:none !important;}

/* 통장/카드 펼친 목록 — 청구서 「펼쳐보기」와 같은 생김새 (사장님 지시 2026-08-05) */
.paybox{margin-top:10px;}

/* ⛔ 「할부로 사셨어요?」 묻는 단추(.instask)는 없앴다 (2026-08-05) — 칸을 그냥 펼쳐 뒀다. */

/* 「이 달에만 나가는 ○○○원」 — 눌러서 그게 무엇인지 편다 (사장님 물음 2026-08-05).
   ⛔ 숫자만 적어 두면 그게 뭔지 알 길이 없다. 통장/카드 상자와 같은 몸짓으로 둔다. */
.onlynote{display:block;width:100%;text-align:left;margin:0 0 8px;
  background:transparent;border:none;padding:0;
  font-size:17px;color:var(--sub);font-weight:600;line-height:1.55;}
.onlynote b{color:var(--ink);font-weight:800;}
.onlynote i{display:block;font-style:normal;font-size:13px;font-weight:700;color:var(--sub);
  margin-top:4px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2);}
.onlynote.on i{color:var(--ink);}
.onlynote:active{opacity:.7;}

/* ── 모은 돈 (분석 탭 · 2026-08-18) ──────────────────────────
   사장님이 고르신 두 가지 : ④ 저축과 투자를 갈라 보기 · ⑤ 달마다 세로 막대 열둘.
   ⛔ 지금 분석 탭은 가로 막대뿐이라 여기는 **세로 막대**로 간다. 같은 모양을 하나 더
      붙이면 화면만 길어지고 새로 보이는 것이 없다.
   ⛔ 한 줄 스택(.svsplit)은 flex 로 나눈다 — 퍼센트를 손으로 셀 필요가 없다. */
.svsplit{display:flex;height:34px;margin:4px 0 10px;overflow:hidden;}
.svsplit span{display:flex;align-items:center;justify-content:center;min-width:0;
  font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;}
.svsplit .a{background:var(--ink);color:var(--bg);}
.svsplit .b{background:var(--acc);color:var(--ink);}
.svlegend{display:flex;gap:16px;font-size:14.5px;font-weight:700;color:var(--sub);}
.svlegend i{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px;}
.svlegend i.a{background:var(--ink);}
.svlegend i.b{background:var(--acc);}
.svlegend b{color:var(--ink);font-weight:800;margin-left:3px;}
.svhead{margin:18px 0 8px;padding-top:14px;border-top:1px solid var(--line);
  font-size:16px;font-weight:800;}
/* ⛔ 막대는 **열두 칸이 늘 같은 폭**이다. 자료가 없는 달을 빼면 칸이 벌어져
      「그 달엔 아예 안 모았다」가 「그 달이 없다」로 읽힌다. */
/* ⛔ 열두 달이 넘으면 **가로로 민다** (사장님 지시 2026-08-20 : 「좌우 슬라이드가능한지」).
   칸을 줄여 다 우겨넣으면 스무 칸째에는 막대가 실오라기가 되어 못 읽는다.
   ⛔ 세로는 안 자른다 — 달 이름표가 막대 밑 padding 안에 들어 있어서 잘리면 안 된다.
   ⛔ overflow-x 를 auto 로 두면 세로도 자동이 된다. 그래서 아래 padding 으로 자리를 낸다. */
.svwrap{overflow-x:auto;overflow-y:hidden;padding-bottom:2px;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
.svwrap::-webkit-scrollbar{height:4px;}
.svwrap::-webkit-scrollbar-thumb{background:var(--line2);border-radius:2px;}
.svbars{display:flex;align-items:flex-end;gap:5px;height:120px;padding-bottom:20px;position:relative;}
.svbars::after{content:'';position:absolute;left:0;right:0;bottom:20px;height:1px;background:var(--line);}
/* ⛔ 막대 하나가 **저축·투자 두 토막**이다 (2026-08-26). 아래가 저축(a·먹색),
   위가 투자(b·라임) — 위 띠(.svsplit)·범례(.svlegend)와 **같은 색**이다.
   ⛔ 막대 자체에는 색을 칠하지 않는다. 칠하면 토막 색을 덮어 투자가 다시 안 보인다. */
/* ⛔ overflow:hidden 을 걸지 말 것. 달 숫자(<s>)가 막대 **아래 바깥**에 붙어 있어서
   잘라 내면 가로축 글씨가 통째로 사라진다. 대신 맨 위 토막만 모서리를 둥글린다. */
/* ⛔ 막대에 **테두리를 두르지 않는다** (사장님 지시 2026-08-26 : 「투자 토막에 테두리는 넣지마」).
   테두리는 막대 바깥을 도는데, 투자(라임)가 맨 위에 있어서 그 선이 라임 토막을 빙 두른
   것처럼 보였다. 특히 제일 많이 모은 달은 2px 먹색이라 라임이 액자에 갇혔다.
   ⛔ 되살리지 말 것. 색 두 가지로 이미 갈라져 보인다 — 선이 하나 더 있으면 그게 무슨 뜻인지
      묻게 된다. */
.svbars i{flex:1;min-width:0;position:relative;background:none;
  display:flex;flex-direction:column-reverse;
  border:0;border-top-left-radius:3px;border-top-right-radius:3px;}
.svbars i u{display:block;width:100%;min-height:0;}
.svbars i u:last-child{border-top-left-radius:2px;border-top-right-radius:2px;}
.svbars i u.a{background:var(--ink);}
.svbars i u.b{background:var(--acc);}
.svbars i u.n{background:var(--line2);}   /* 갈래를 모르는 옛 자료 */
/* 제일 많이 모은 달 — ⛔ 먹색으로 **채우지** 않는다. 이제 채움은 갈래가 쓰는 자리라
   채워 버리면 그 달만 저축 100%처럼 보인다. 테두리와 아래 글씨로 표시한다. */
.svbars i.top{border-color:var(--ink);border-width:2px;}
.svbars i.top s{color:var(--ink);font-weight:800;}
.svbars i s{position:absolute;left:0;right:0;bottom:-19px;text-align:center;text-decoration:none;
  font-size:11px;font-weight:700;color:var(--faint);}

/* 릴스 고마움 — 릴스를 올려 주신 분께 셀프제작 쿠폰을 드리는 화면 (2026-08-27).
   ⛔ 새 색을 만들지 않는다. 이미 있는 --line2 · --sub · --ink 만 쓴다 —
      화면 하나 때문에 색이 늘면 테마를 갈 때마다 여기만 어긋난다. */
/* ⛔ 번호는 **채운 동그라미**다 (사장님 지시 2026-08-28 : 「동그라미 채워진 1 이렇게 표기해」).
   ⛔ ❶ 같은 글자를 쓰지 않는다. 글씨체를 바꾸면 그 글자가 없는 서체가 있어 네모로 깨진다.
      동그라미는 CSS 로 그리고 숫자만 얹는다 — 어느 글씨체에서도 같게 나온다.
   ⛔ 「약속」과 「쓰는 법」이 같은 옷을 입는다. 같은 자리에 같은 모양이라야 한다. */
.reelrule{margin:0;padding:0;list-style:none;counter-reset:vow;}
.reelrule li{position:relative;margin:10px 0;padding-left:31px;line-height:1.55;counter-increment:vow;}
.reelrule li::before{content:counter(vow);position:absolute;left:0;top:.12em;
  width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--bg);
  font-size:13px;font-weight:800;line-height:22px;text-align:center;}
.reelrow{border:1px solid var(--line2);border-radius:13px;padding:13px 14px;margin-bottom:10px;}
.reelrow .rtop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;}
.reelrow .rtop em{font-style:normal;font-weight:700;color:var(--sub);}
.reelrow .rurl{display:block;word-break:break-all;color:var(--sub);margin-bottom:10px;line-height:1.45;}
/* 쿠폰 번호 — 이 화면의 주인공. 손으로 옮겨 적는 숫자라 크고 사이가 벌어져야 한다 */
.couponbox{border:1px solid var(--ink);border-radius:13px;padding:20px 16px;text-align:center;margin-bottom:16px;}
.couponbox > b{display:block;font-size:30px;font-weight:800;letter-spacing:.10em;line-height:1.2;}
/* 아래 줄 안의 굵은 글씨(5번)까지 큰 덩어리가 되면 안 된다 — 자식만 고른다 */
.couponbox span b{font-weight:800;}
.couponbox span{display:block;margin-top:7px;color:var(--sub);font-weight:700;}
a.btn{text-decoration:none;color:inherit;}
a.btn.primary{color:var(--bg);}

/* 기간이 지난 쿠폰 — 지웠다고 오해하시지 않게 남기되, 흐리게 */
.couponbox.over{border-color:var(--line2);opacity:.55;}

/* 굿펄슨 표 — 사장님 목록에서 한눈에 가려지게 (2026-08-27) */
.goodtag{display:inline-block;background:var(--ink);color:var(--bg);border-radius:8px;padding:2px 8px;margin-left:6px;font-size:13px;font-weight:800;vertical-align:middle;}

/* 거둬들인 줄 · 영상 주소 아래 한 줄 (2026-08-27) */
.reelrow.off{opacity:.5;}
.reelrow .rsub{color:var(--sub);margin-bottom:7px;line-height:1.45;}
.reelrow .rurl{margin-bottom:5px;}

/* 쿠폰으로 만들 수 있는 것 — 이름 · 단위 · 값을 한 줄에 (2026-08-27)
   ⛔ 값이 오른쪽 끝에 붙어야 눈이 값끼리 견준다. 가운데로 흩어 놓으면 못 견준다. */
.prodbox{border:1px solid var(--line2);border-radius:13px;overflow:hidden;}
.prodrow{display:flex;align-items:baseline;gap:8px;padding:12px 14px;border-top:1px solid var(--line2);}
.prodrow:first-child{border-top:none;}
.prodrow b{font-weight:800;}
.prodrow span{color:var(--sub);}
.prodrow em{margin-left:auto;font-style:normal;color:var(--sub);white-space:nowrap;}

/* 꾸러미 합계 줄 · 다 쓴 줄 (2026-08-27) */
.prodrow.sum{background:var(--paper);font-weight:800;}
.prodrow.sum em{color:var(--ink);font-weight:800;}
.prodrow.gone{opacity:.45;}

/* 릴스 띠 — 체험 띠와 **같은 자리·같은 모양**이다 (2026-08-27).
   ⛔ 새 모양을 만들지 않는다. 같은 자리에 앉는 두 띠가 서로 다르게 생기면
      손님은 둘을 다른 것으로 배운다. 뒤에 붙는 ✕ 만 다르다. */
#reelsBar{position:fixed;left:0;right:0;bottom:calc(88px + env(safe-area-inset-bottom));
  z-index:41;padding:0 12px;pointer-events:none;}
body.demoing #reelsBar{display:none;}
#reelsBar .in{max-width:520px;margin:0 auto;display:flex;align-items:center;gap:11px;
  background:var(--paper);border:1px solid var(--ink);border-radius:var(--r-card);
  padding:11px 13px;box-shadow:var(--sh);pointer-events:auto;}
#reelsBar .tx{flex:1;min-width:0;line-height:1.35;}
#reelsBar .tx b{display:block;font-size:16.5px;font-weight:800;}
#reelsBar .tx span{display:block;font-size:14px;color:var(--sub);margin-top:2px;word-break:keep-all;}
#reelsBar button{flex:none;background:var(--ink);color:var(--bg);border:none;
  padding:11px 14px;font-size:15.5px;font-weight:800;white-space:nowrap;}
#reelsBar button.x{background:transparent;color:var(--faint);padding:11px 4px;font-size:17px;}
#reelsBar button:active{opacity:.85;}

/* 릴스 띠 · 자리 셋 (2026-08-27 · 견주어 고르시려고)
   ⛔ 안쪽 모양(.in)은 셋이 같다. 자리만 다르다 — 같은 것이 자리에 따라 다르게 생기면 안 된다. */
#reelsBar.at-top{bottom:auto;top:calc(8px + env(safe-area-inset-top));z-index:43;}
html.inframe #reelsBar.at-top{top:54px;}
#reelsBar.at-card{position:static;padding:0;margin-top:14px;z-index:auto;}
#reelsBar.at-card .in{max-width:none;box-shadow:none;}

/* 폰 아이콘 창 안 릴스 칸 (2026-08-27) — 창 맨 위에 한 덩어리로 앉는다
   ⛔ 띠가 아니라 **칸**이다. 떠 있지 않으니 그림자도 없다. */
.insreels{display:flex;align-items:center;gap:11px;margin-bottom:16px;
  border:1px solid var(--ink);border-radius:var(--r-card);padding:12px 13px;background:var(--paper);}
.insreels .tx{flex:1;min-width:0;line-height:1.35;}
.insreels .tx b{display:block;font-size:16.5px;font-weight:800;}
.insreels .tx span{display:block;font-size:14px;color:var(--sub);margin-top:2px;word-break:keep-all;}
.insreels .btn{flex:none;padding:11px 15px;font-size:15.5px;background:var(--ink);color:var(--bg);border-color:var(--ink);}

/* 사장님이 손님 글을 고치는 칸 (2026-08-28) — 앱의 입력칸과 같은 얼굴로 */
.textin{width:100%;border:1px solid var(--line2);border-radius:13px;background:var(--paper);
  padding:12px 13px;font:inherit;font-size:16px;line-height:1.6;color:var(--ink);
  resize:vertical;outline:none;}
.textin:focus{border-color:var(--ink);}

/* 대가 표시를 넣었다는 확인 칸 (2026-08-28)
   ⛔ 네모를 크게 그린다. 폰에서 작은 네모는 안 눌린다 — 「지울까요」에서 겪은 그 일이다. */
.vowbox{display:flex;align-items:flex-start;gap:11px;margin:2px 0 16px;
  border:1px solid var(--line2);border-radius:13px;padding:13px 14px;background:var(--paper);cursor:pointer;}
.vowbox input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--ink);}
.vowbox span{line-height:1.5;}
.vowbox em{display:block;font-style:normal;font-size:14px;color:var(--sub);margin-top:3px;}
.vowok{font-style:normal;font-size:13px;font-weight:800;background:var(--ink);color:var(--bg);
  border-radius:7px;padding:1px 7px;vertical-align:1px;}

/* ── 쿠폰 (2026-08-28) ────────────────────────────────────────
   종이 쿠폰처럼 : 먹색 바탕 · 뜯는 점선 · 양옆에 뚫린 반달.
   ⛔ 색을 새로 만들지 않는다. --ink 와 --bg 둘뿐이라 테마 열 벌에서 다 산다.
   ⛔ 반달은 **시트 바탕색(--paper)** 이라야 뚫린 것처럼 보인다. */
.ticket{position:relative;background:var(--ink);color:var(--bg);
  border-radius:16px;padding:18px 16px 16px;margin-bottom:18px;text-align:center;overflow:hidden;}
.ticket.over{opacity:.5;}
.tk-head{display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:14.5px;font-weight:700;opacity:.75;}
.tk-tag{font-style:normal;font-size:12.5px;font-weight:800;background:var(--bg);color:var(--ink);
  border-radius:7px;padding:1px 7px;opacity:1;}
.tk-code{display:block;font-size:34px;font-weight:800;letter-spacing:.12em;
  line-height:1.15;margin:10px 0 12px;}
.tk-copy{background:transparent;color:var(--bg);border:1px solid currentColor;border-radius:9px;
  padding:7px 14px;font-size:14px;font-weight:700;opacity:.85;}
.tk-copy:active{opacity:.6;}
/* 뜯는 자리 */
.tk-cut{position:relative;height:1px;margin:16px -16px 0;
  background:repeating-linear-gradient(90deg,currentColor 0 6px,transparent 6px 12px);opacity:.45;}
.tk-cut i{position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--paper);}
.tk-cut i.l{left:-9px;}
.tk-cut i.r{right:-9px;}
.tk-body{padding-top:14px;}
.tk-items{font-size:16px;font-weight:700;line-height:1.5;}
.tk-when{font-size:14px;margin-top:5px;opacity:.75;}

/* 표시를 고쳐 달라 한 줄 — 사장님 목록에서 눈에 띄어야 한다 (2026-08-28) */
.reelrow .rwarn{border:1px dashed var(--ink);border-radius:10px;padding:7px 10px;
  margin:2px 0 4px;font-size:14.5px;font-weight:700;}

/* 쓰는 법 밑 「보내실 번호」 (2026-08-28) — 걸음을 읽다 바로 복사할 수 있게 */
.mynum{display:flex;align-items:center;gap:10px;margin:12px 0 4px;
  border:1px dashed var(--ink);border-radius:13px;padding:11px 13px;}
.mynum span{font-size:14.5px;color:var(--sub);font-weight:700;flex:none;}
.mynum b{flex:1;font-size:20px;font-weight:800;letter-spacing:.08em;}