:root { color-scheme: light; --surface-1: #fcfcfb; --plane: #f2f1ed; --text-primary: #0b0b0b; --text-secondary: #52514e; --muted: #898781; --grid: #e1e0d9; --baseline: #c3c2b7; --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; /* 세 번째 갈래 — 월급 나눔의 '예금 대기' (자료 시각화 판 slot 3) */ /* ★★ **`--accent` 는 여태 정의된 적이 없었다.** 그런데 여섯 군데가 `var(--accent)` 를 쓰고 있었고, 없는 변수는 조용히 '없는 값' 이 된다 — 오류도 안 나고 경고도 없다. 그래서 **사진 보내기 진행 막대가 계속 투명**이었다(보내는 내내 막대가 안 차 보였다). ★ 어두운 판에서도 알아서 따라오게 `--series-1` 을 가리킨다 — 그쪽 값이 :root 에서 갈리므로 여기 한 줄이면 둘 다 맞는다. */ --accent: var(--series-1); --critical: #d03b3b; --good: #006300; --radius: 18px; --radius-sm: 11px; --fill: rgba(11, 11, 11, 0.045); --fill-hover: rgba(11, 11, 11, 0.075); --shadow: 0 1px 2px rgba(11, 11, 11, .05), 0 10px 28px -16px rgba(11, 11, 11, .18); /* 라벨 색. 색깔마다 규칙을 따로 두지 않고 색상값(hue)만 저장해서 여기 네 값으로 밝게/어둡게를 한꺼번에 맞춘다. 색은 얼마든지 늘릴 수 있다. */ --lb-s: 70%; --lb-l: 90%; --lb-ts: 62%; --lb-tl: 30%; } /* ---------- 어두운 화면 ---------- 자동(설정 안 함)이면 시스템을 따르고, 설정 탭에서 직접 고르면 그게 이긴다. - 자동 : data-theme 없음 → 아래 미디어 규칙이 정한다 - 밝게 : data-theme="light" → :not() 이 걸러내 위 :root 값이 남는다 - 어둡게 : data-theme="dark" → 두 번째 규칙이 켠다 ★ 두 블록이 같은 값을 쓴다. 한쪽만 고치면 시스템 설정에 따라 색이 달라진다. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --surface-1: #1a1a19; --plane: #0d0d0d; --text-primary: #ffffff; --text-secondary: #c3c2b7; --muted: #898781; --grid: #2c2c2a; --baseline: #383835; --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --critical: #e05555; --good: #0ca30c; --fill: rgba(255, 255, 255, 0.06); --fill-hover: rgba(255, 255, 255, 0.10); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -16px rgba(0, 0, 0, .7); --lb-s: 42%; --lb-l: 22%; --lb-ts: 78%; --lb-tl: 72%; } } :root[data-theme="dark"] { color-scheme: dark; --surface-1: #1a1a19; --plane: #0d0d0d; --text-primary: #ffffff; --text-secondary: #c3c2b7; --muted: #898781; --grid: #2c2c2a; --baseline: #383835; --series-1: #3987e5; --series-2: #d95926; --critical: #e05555; --good: #0ca30c; --fill: rgba(255, 255, 255, 0.06); --fill-hover: rgba(255, 255, 255, 0.10); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -16px rgba(0, 0, 0, .7); --lb-s: 42%; --lb-l: 22%; --lb-ts: 78%; --lb-tl: 72%; } * { box-sizing: border-box; } /* hidden 속성은 브라우저 기본 display:none 으로 동작하는데, ID 선택자로 준 display 값이 그걸 이긴다. 실제로 #boot 가 안 사라져 화면이 계속 덮였다. hidden 을 쓰는 곳이 여럿이라 전역으로 못박아 둔다. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--plane); color: var(--text-primary); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* ★★ **한글은 낱말째로 넘긴다.** 브라우저 기본값은 한글을 글자 아무 데서나 자른다 — "보낼 사진이 없습니" / "다" 처럼. 영어는 빈칸에서만 끊기니 이런 일이 없어서, 한글 화면에서만 티가 난다. keep-all 이면 빈칸을 만나야 넘어간다. ★ 낱말 하나가 통째로 너무 길면(주소·아이디) 갈 데가 없어 칸을 밀고 나간다. 그래서 anywhere 를 같이 준다 — 평소엔 낱말째, 정 안 되면 아무 데서나. */ word-break: keep-all; overflow-wrap: anywhere; } /* 아래 여백은 하단 탭(약 54px)이 내용을 가리지 않을 만큼. iPhone 아래 홈 막대 영역(safe-area)도 같이 비켜 준다. */ .wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px calc(96px + env(safe-area-inset-bottom, 0px)); } /* ---------- 하단 탭 ---------- 자주 쓰는 다섯 개는 엄지가 닿는 곳에. 나머지는 서랍(햄버거)에 남는다. */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; background: var(--surface-1); border-top: 1px solid var(--grid); padding-bottom: env(safe-area-inset-bottom, 0px); } .tabbar .mi { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0 8px; border: 0; background: none; font-size: 10.5px; font-family: inherit; color: var(--muted); cursor: pointer; } .tabbar .mi .ic { font-size: 19px; line-height: 1; } /* 지금 있는 화면은 진하게 — 이모지는 회색으로 못 칠하니 글씨 무게로 가른다 */ .tabbar .mi[aria-pressed="true"] { color: var(--text-primary); font-weight: 700; } /* 넓은 화면에서 서랍을 꽂아 두면 그 폭만큼 비켜 선다 (topbar 와 같은 규칙) */ body.pinned .tabbar { left: 216px; } .narrow { max-width: 640px; } .sub { color: var(--muted); font-size: 13px; font-weight: 400; } /* ---------- 로그인 ---------- */ #login { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: var(--plane); padding: 20px; } .login-card { background: var(--surface-1); border-radius: var(--radius); box-shadow: var(--shadow); padding: 36px 32px; width: 100%; max-width: 360px; } .login-card .mori { display: block; border-radius: 22%; margin: 0 auto 12px; box-shadow: 0 8px 20px -8px rgba(0,0,0,.35); } .login-card h1 { font-size: 26px; font-weight: 680; margin: 0 0 6px; letter-spacing: -0.03em; text-align: center; } .login-card .lead { text-align: center; color: var(--muted); font-size: 13.5px; margin: 0 0 26px; } .login-card .field { margin-bottom: 13px; } .login-card label { display: block; font-size: 11.5px; color: var(--muted); font-weight: 550; margin-bottom: 6px; } .login-card input { width: 100%; } .login-card button { width: 100%; margin-top: 18px; } #login-msg { font-size: 13px; margin-top: 12px; min-height: 18px; } #boot { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--plane); z-index: 200; color: var(--muted); font-size: 14px; padding: 24px; /* 아이콘과 같은 인디고. 홈 화면에서 누른 그 색이 그대로 열린다. */ background: linear-gradient(155deg, #5B4AE0 0%, #6C45DC 45%, #8340C8 100%); transition: opacity .24s ease; } /* 잘못됐을 때는 진단 화면이 된다 — 인디고를 걷어야 글씨가 보인다 */ #boot.bad { background: var(--plane); color: var(--muted); } #boot.gone { opacity: 0; pointer-events: none; } #boot .inner { max-width: 380px; width: 100%; text-align: center; } /* ---------- 켜는 화면의 모리 ---------- ★ 뒤엣것부터 차례로 떠오른다. 다 그려지기 전에 사라지면 지저분해 보여서 core.js 가 최소 시간은 붙잡아 둔다(BOOT_MIN). */ .splash { display: grid; justify-items: center; color: #fff; } /* ★★ **안드로이드가 먼저 띄우는 화면을 없앨 수는 없다.** 앱을 누르면 OS 가 매니페스트의 아이콘을 큼직하게 얹은 화면을 제 손으로 그린다 — PWA 로는 끄는 길이 없다(진짜 APK 로 감싸야 그때부터 우리 것이 된다). ★ 그래서 **없애는 대신 이어지게** 한다. 그 화면과 이 화면은 이미 같은 인디고에 같은 그림(icon-192)을 쓰고 있고, 다른 것은 **크기**뿐이다. OS 가 그리던 큰 크기에서 시작해 제자리로 줄어들면, 앞 화면이 이 화면의 첫 프레임처럼 읽힌다. ★ 떠오르는 것(sp-rise)과 겹치지 않게 줄어드는 것만 따로 둔다. */ .sp-face { width: 112px; height: 112px; border-radius: 26%; box-shadow: 0 18px 40px -12px rgba(23,10,60,.65); animation: sp-zoom .42s cubic-bezier(.2,.8,.3,1) both; } @keyframes sp-zoom { from { transform: scale(1.42); opacity: .85; } to { transform: scale(1); opacity: 1; } } .sp-en { margin-top: 20px; font-size: 13px; font-weight: 600; letter-spacing: .34em; text-indent: .34em; /* 자간이 오른쪽에만 붙어 가운데가 밀린다 */ color: rgba(255,255,255,.72); animation: sp-rise .5s cubic-bezier(.2,.8,.3,1) .08s both; } .sp-en i { font-style: normal; color: #FFC96B; } /* 이름이 태어나는 자리 — 모(으다) + (우)리 */ .sp-mean { margin: 12px 0 0; font-size: 16px; line-height: 1.75; font-weight: 500; color: rgba(255,255,255,.9); animation: sp-rise .5s cubic-bezier(.2,.8,.3,1) .16s both; } .sp-mean b { font-weight: 800; color: #FFC96B; text-shadow: 0 0 18px rgba(255,201,107,.55); } .sp-rule { width: 30px; height: 2px; border-radius: 2px; margin: 18px 0 14px; background: rgba(255,255,255,.3); animation: sp-rise .5s cubic-bezier(.2,.8,.3,1) .24s both; } .sp-name { display: grid; justify-items: center; gap: 5px; font-size: 30px; font-weight: 750; letter-spacing: -0.02em; animation: sp-rise .5s cubic-bezier(.2,.8,.3,1) .3s both; } .sp-name span { font-size: 10.5px; font-weight: 600; letter-spacing: .42em; text-indent: .42em; color: rgba(255,255,255,.55); } @keyframes sp-rise { from { opacity: 0; transform: translateY(9px); } } /* 움직임을 꺼 둔 사람에게는 뜨기만 한다 */ @media (prefers-reduced-motion: reduce) { .sp-face, .sp-en, .sp-mean, .sp-rule, .sp-name { animation: none; } } #boot .title { font-size: 16px; font-weight: 620; color: var(--text-primary); margin-bottom: 8px; } #boot .detail { font-size: 12.5px; line-height: 1.7; color: var(--muted); background: var(--fill); border-radius: 10px; padding: 12px 14px; /* 터진 까닭이 뜨는 자리다. 긴 주소·긴 이름은 잘라서라도 보여야 하지만, 한글 설명까지 아무 데서나 자르진 않는다 */ margin: 16px 0; text-align: left; overflow-wrap: anywhere; } #boot button { margin-top: 4px; } /* ---------- 헤더 ---------- */ .topbar { background: var(--surface-1); box-shadow: var(--shadow); padding: 13px 20px; display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 20; padding-top: max(13px, env(safe-area-inset-top)); } /* 지금 어느 화면인지 — 메뉴 버튼 옆에 같은 정도 크기로 */ /* 누르면 홈으로 간다. 눌러도 되는 자리임이 보여야 해서 집 표시를 붙인다. */ .view-title { font-size: 16px; font-weight: 660; letter-spacing: -0.02em; white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 8px; font-family: inherit; } .view-title::before { content: "⌂"; font-size: 15px; color: var(--muted); } .view-title:hover { background: var(--grid); } /* 검색·설정·금리처럼 덧붙는 화면에서는 메뉴 단추 자리를 뒤로 가기로 쓴다. 제목 옆에 버튼을 하나 더 넣으면 좁은 모바일 상단이 답답해지므로 같은 폭을 그대로 유지한다. */ .view-back { width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; flex: none; border: 0; border-radius: 9px; background: transparent; color: var(--text-primary); cursor: pointer; } .view-back:hover, .view-back:active { background: var(--grid); } .nested-view .view-title::before { display: none; } .topbar .spacer { flex: 1; } /* ═══════════ 오른쪽 위 톱니바퀴 ═══════════ ★★ "늘 고정" 은 **자리**만이 아니라 **안 움직인다**는 뜻이다. 예전에는 #sync 앞에 뒀는데, `flash("하단 탭을 바꿨습니다")` 한 줄이 뜨는 순간 톱니바퀴가 왼쪽으로 99px 튀었다(재 봤다: x 300 → 201). 맨 마지막 칸으로 옮기고 `margin-left:auto` 로 오른쪽에 못 박는다 — 앞에 뭐가 얼마나 들어오든 자리가 안 바뀐다. */ /* ★ 돋보기는 톱니 **바로 왼쪽**에 붙어 선다. 오른쪽으로 미는 것은 margin-left:auto 를 가진 돋보기 쪽이고, 톱니는 그 뒤를 따라간다 — 둘 사이는 상단바 gap 하나(9px)뿐이라 손이 한 자리로 간다. */ .topbar #top-search { margin-left: auto; flex: none; position: relative; } .topbar #top-search::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .topbar #top-settings { flex: none; position: relative; } /* ★★ 손가락 자리는 44 인데 **상자는 38 로 둔다.** 44 로 키웠더니 상단바가 6px 높아지면서 **캘린더가 하단 탭에 가렸다** — 달력 카드 높이는 `100dvh - 114px` 로 상단바 높이를 셈해 둔 값이라, 여기서 1px만 커져도 아래가 그만큼 잘린다. 옆의 돋보기(38)와 크기가 달라 보이는 것도 덤으로 이상했다. 그래서 보이는 크기는 그대로 두고 **눌리는 자리만** 넓힌다 — 자리(layout)를 안 먹는 ::after 로 덮는다. */ .topbar #top-settings::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } /* ★★ 지나가는 말(#sync)이 자리를 안 내주면 **화면이 통째로 옆으로 밀린다.** 360px 가계부 화면에서 `flash("하단 탭을 바꿨습니다")` 에 109px 넘쳤다. (톱니바퀴 없이도 62px 넘쳤으니 원래 있던 병이다 — 톱니가 키웠을 뿐) 양보 차례를 정한다: **말이 먼저 줄고, 그다음 제목, 톱니바퀴는 안 준다.** */ #sync { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .view-title { flex: 0 1 auto; min-width: 0; overflow: hidden; } .who { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; } #sync { font-size: 12px; color: var(--muted); white-space: nowrap; } #sync.on { color: var(--good); } /* ---------- 폼 요소 ---------- */ input, select, button { font: inherit; letter-spacing: inherit; color: var(--text-primary); background: var(--fill); border: 1px solid transparent; border-radius: var(--radius-sm); padding: 9px 12px; transition: background .15s, box-shadow .15s, color .15s; } /* ★ 글자 입력칸은 16px 아래로 내리지 않는다 — 아이폰이 16px 미만 칸에 초점이 가면 화면을 통째로 확대해 버린다 ("입력할 때 확대되게 하지마", 2026-09-01). body 가 15px 라 그냥 물려받으면 걸린다. */ input:not([type="checkbox"]):not([type="file"]), select, textarea { font-size: 16px; } input::placeholder { color: var(--muted); } input:focus-visible, select:focus-visible, button:focus-visible { outline: none; box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--series-1) 45%, transparent); } input[type="file"] { padding: 7px 10px; width: 100%; } .primary { background: var(--series-1); color: #fff; cursor: pointer; font-weight: 600; padding: 9px 20px; } .primary:hover { filter: brightness(1.08); } .primary:disabled { opacity: .45; cursor: not-allowed; filter: none; } .ghost { cursor: pointer; color: var(--text-secondary); } .ghost:hover { background: var(--fill-hover); color: var(--text-primary); } .danger { background: transparent; color: var(--critical); cursor: pointer; font-weight: 600; padding: 9px 20px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--critical) 50%, transparent); } .danger:hover { background: var(--critical); color: #fff; box-shadow: none; } .big { padding: 13px 28px; font-size: 16px; } .seg { display: inline-flex; gap: 3px; background: var(--fill); border-radius: 999px; padding: 3px; } .seg button { border: 0; border-radius: 999px; padding: 7px 16px; cursor: pointer; background: transparent; color: var(--text-secondary); font-weight: 550; } .seg button:hover { color: var(--text-primary); } .seg button[aria-pressed="true"] { background: var(--surface-1); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,.12); font-weight: 620; } .field { display: flex; flex-direction: column; gap: 6px; } .field > label { font-size: 11px; font-weight: 550; color: var(--muted); letter-spacing: .02em; } .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } /* ---------- 카드 ---------- */ .card { background: var(--surface-1); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; margin-bottom: 18px; } .card h2 { font-size: 15px; font-weight: 640; margin: 0 0 18px; letter-spacing: -0.015em; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .note { color: var(--text-secondary); font-size: 13px; margin: -8px 0 16px; max-width: 62ch; } /* 지름길을 알려주는 자리 — 안 보면 아무 소용이 없어서 눈에 띄게 둔다 */ .note.tip { background: var(--fill); border-radius: 10px; padding: 11px 13px; border-left: 3px solid var(--accent); color: var(--text-primary); margin: 0 0 16px; line-height: 1.6; } .step { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--series-1); color: #fff; font-size: 12px; font-weight: 650; flex: none; } /* 불러온 데이터가 어느 기간인지만 조용히 알려준다 */ .data-range { font-size: 12.5px; color: var(--muted); margin: 0 2px 14px; line-height: 1.6; overflow-wrap: anywhere; } /* 기간 글자는 왼쪽, 관리 버튼은 오른쪽 끝. 좁아지면 버튼이 아래로 내려간다. */ #meta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } #meta-row > span { min-width: 0; flex: 1; } /* 날짜와 건수를 위아래로. 한 줄이면 옆 상자에 밀려 잘린다. */ #meta-line .d, #meta-line .c { display: block; } #meta-line .c { font-size: 12px; opacity: .85; } /* 메뉴에서 뺐더니 여기 있는 줄을 모르고 지나쳤다. 색을 입혀 눈에 걸리게 한다. */ #meta-row #go-make { flex: none; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 11px; background: color-mix(in srgb, var(--good) 13%, transparent); color: var(--good); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 38%, transparent); } #meta-row #go-make:hover { background: color-mix(in srgb, var(--good) 20%, transparent); } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; } .tile { background: var(--surface-1); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; } .tile .k { font-size: 12px; color: var(--muted); margin-bottom: 8px; font-weight: 550; } /* 폰(375px)에서 두 칸짜리 타일의 "1,217,185원" 이 두 줄로 꺾였다 — 너비를 따라 줄어든다 (2026-09-07) */ .tile .v { font-size: clamp(18px, 5.6vw, 26px); font-weight: 660; letter-spacing: -0.03em; line-height: 1.15; white-space: nowrap; } .tile .n { font-size: 12px; color: var(--muted); margin-top: 6px; } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; } /* ---------- 이번 주기 살펴보기 ---------- ★ 제일 위 한 줄이 **결론**이다. 숫자를 훑어 스스로 판단하게 하지 않고, "지난 주기 이맘때보다 12만원 더 썼어요" 를 먼저 말한다. ★ 더 쓴 것은 붉게, 덜 쓴 것은 푸르게. 다만 **비슷하면 색을 안 쓴다** — 1만원 차이에 빨간불이 켜지면 그 빨간불을 곧 무시하게 된다. */ .look .look-head { font-size: 16px; font-weight: 660; letter-spacing: -.02em; margin: 4px 0 14px; line-height: 1.45; } .look .look-head.more { color: var(--critical); } .look .look-head.less { color: var(--good); } .look .look-nums { display: flex; gap: 10px; flex-wrap: wrap; } .look .look-nums > div { flex: 1 1 140px; background: var(--plane); border-radius: var(--radius-sm); padding: 11px 13px; } .look .look-nums .k { display: block; font-size: 11.5px; color: var(--muted); font-weight: 550; margin-bottom: 5px; } .look .look-nums .v { display: block; font-size: 19px; font-weight: 660; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .look .look-nums .n { display: block; font-size: 11.5px; color: var(--muted); margin-top: 4px; } .look .look-t { font-size: 11.5px; color: var(--muted); font-weight: 550; margin: 16px 0 6px; } .look .look-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--grid); } .look .look-row:last-child { border-bottom: 0; } .look .look-row .c { font-weight: 600; } .look .look-row .n { font-variant-numeric: tabular-nums; font-weight: 660; } .look .look-row .n.up { color: var(--critical); } .look .look-row .n.down { color: var(--good); } .look .look-row .was { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; } .look .look-big { margin-top: 14px; padding: 10px 12px; background: var(--plane); border-radius: var(--radius-sm); font-size: 13px; line-height: 1.6; } .look .look-big .n { color: var(--muted); font-size: 11.5px; } .look .look-why { margin-top: 12px; font-size: 11.5px; color: var(--muted); line-height: 1.6; } /* ---------- 차트 ---------- */ svg { display: block; width: 100%; overflow: visible; } .grid-line { stroke: var(--grid); stroke-width: 1; } .axis-line { stroke: var(--baseline); stroke-width: 1; } .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; } .bar { fill: var(--series-1); } .bar-hit { fill: transparent; cursor: pointer; } .val-label { fill: var(--text-secondary); font-size: 11px; font-variant-numeric: tabular-nums; } .cat-name { fill: var(--text-primary); font-size: 12.5px; } #tip { position: fixed; pointer-events: none; opacity: 0; transition: opacity .12s; background: var(--surface-1); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 12.5px; z-index: 50; box-shadow: 0 2px 6px rgba(0,0,0,.10), 0 12px 32px -10px rgba(0,0,0,.30); } #tip b { font-variant-numeric: tabular-nums; } /* ---------- 표 ---------- */ .scroll { overflow-x: auto; } table { border-collapse: collapse; width: 100%; font-size: 13.5px; } th, td { text-align: left; padding: 11px 12px; white-space: nowrap; } tbody tr { border-top: 1px solid var(--grid); } tbody tr:hover { background: var(--fill); } th { color: var(--muted); font-weight: 550; font-size: 11px; letter-spacing: .03em; position: sticky; top: 0; background: var(--surface-1); z-index: 1; padding-top: 0; padding-bottom: 10px; } td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 560; } td.dim { color: var(--text-secondary); } .chip { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--fill); font-size: 11.5px; color: var(--text-secondary); font-weight: 550; } .empty { color: var(--muted); text-align: center; padding: 32px 0; font-size: 13.5px; } .tx-list { display: none; flex-direction: column; } .tx-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 2px; border-top: 1px solid var(--grid); } .tx-row:first-child { border-top: 0; } .tx-row .ttl { font-weight: 550; overflow-wrap: anywhere; } .tx-row .amt { font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap; } .tx-row .meta { grid-column: 1 / -1; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; } /* ---------- 달력 ---------- */ /* ---------- 기간 막대 (목록·달력 공용) ---------- */ .period-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 18px; } .period-bar .round { width: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 20px; line-height: 1; flex: none; } .pb-range { text-align: center; min-width: 0; } .pb-range .r { font-size: 15px; font-weight: 660; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap; } .pb-sums { margin-left: auto; display: grid; gap: 3px; } .pb-sums > div { display: flex; align-items: baseline; gap: 10px; justify-content: flex-end; } .pb-sums .lb { font-size: 12px; color: var(--muted); } .pb-sums .v-out, .pb-sums .v-in { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; min-width: 96px; text-align: right; } .pb-sums .v-out { font-size: 19px; font-weight: 670; } .pb-sums .v-in { font-size: 14px; font-weight: 600; color: var(--good); } /* 제외한 것까지 다 더한 값 — 큰 숫자 바로 밑에 작게. 줄을 통째로 차지한다. */ .pb-sums .v-gross { flex-basis: 100%; text-align: right; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: -2px; } .pb-sums .v-gross:empty { display: none; } .pb-sums > div { flex-wrap: wrap; } .cal-grid-head, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; } .cal-grid-head { margin-bottom: 9px; } .cal-grid-head span { text-align: center; font-size: 11.5px; color: var(--muted); font-weight: 550; } .cal-grid-head span:first-child { color: var(--critical); } .cal-cell { aspect-ratio: 1 / 0.9; border: 0; border-radius: 12px; background: var(--fill); padding: 8px 5px; cursor: pointer; text-align: left; color: var(--text-primary); display: flex; flex-direction: column; justify-content: space-between; gap: 4px; transition: transform .12s, box-shadow .12s; overflow: hidden; min-width: 0; } .cal-cell.blank { background: transparent; pointer-events: none; } .cal-cell .d, .cal-cell .a { min-width: 0; overflow: hidden; white-space: nowrap; } .cal-cell .d { font-size: clamp(10.5px, 3vw, 12px); color: var(--text-secondary); font-variant-numeric: tabular-nums; } .cal-cell.sun .d { color: var(--critical); } .cal-cell .a { font-size: clamp(10.5px, 3vw, 12px); font-weight: 620; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .cal-cell:hover { transform: translateY(-1px); box-shadow: 0 5px 14px -6px rgba(0,0,0,.35); } .cal-cell[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--series-1); } /* ---------- 기간 고르기 ---------- ★ 고른 기간을 **띠로** 칠한다. 시작과 끝만 동그라미 치면 그 사이가 들어가는지 아닌지 눈으로 확인이 안 된다. */ .date-pick { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; border: 1px solid var(--grid); border-radius: 12px; background: var(--fill); color: var(--text-primary); font: inherit; font-weight: 560; cursor: pointer; text-align: left; } .date-pick.on { border-color: var(--series-1); } .date-pick .chev { color: var(--muted); font-size: 12px; } .dr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .dr-mon { flex: 1; text-align: center; font-weight: 650; font-size: 15px; } .dr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; } /* ★★ **두 번 톡톡 두드리면 브라우저가 화면을 확대한다.** 기간 고르기는 시작과 끝을 잇달아 눌러야 하는 곳이라, 그 두 번이 그대로 '더블 탭' 이 된다 — 날짜를 고르려는데 매번 화면이 튄다. `manipulation` 은 **더블 탭 확대만** 끈다. 손가락 둘로 벌리는 확대도, 화면 굴리기도 그대로다. ★ 달력 칸과 ‹ › 도 같이 건다. 달을 서너 번 넘기거나 날짜를 고쳐 누르는 것도 결국 '빠르게 두 번' 이라 같은 일이 난다. ★ 단추 전부에 걸지는 않는다 — 사진 격자(.gal-grid)는 가로 밀기를 우리가 받으려고 touch-action 을 따로 정해 뒀는데, 그 안의 단추에 manipulation 을 걸면 그게 덮여서 밀기가 브라우저에게 넘어간다. */ .dr-cell, .dr-head button, .cal-cell, .period-bar .round { touch-action: manipulation; } .dr-cell { aspect-ratio: 1 / 1; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; position: relative; } .dr-cell.blank { pointer-events: none; } .dr-cell.sun { color: var(--critical); } .dr-cell.out { color: var(--muted); opacity: .45; } /* 사이에 든 날 — 띠. 양 끝은 그 위에 동그라미가 얹힌다 */ .dr-cell.mid { background: color-mix(in srgb, var(--series-1) 15%, transparent); } .dr-cell.a, .dr-cell.b { background: color-mix(in srgb, var(--series-1) 15%, transparent); } .dr-cell.a { border-radius: 999px 0 0 999px; } .dr-cell.b { border-radius: 0 999px 999px 0; } .dr-cell.a.b { border-radius: 999px; } /* 하루만 고른 것 */ .dr-cell.a::after, .dr-cell.b::after { content: ""; position: absolute; inset: 2px; border-radius: 999px; background: var(--series-1); z-index: 0; } .dr-cell.a > span, .dr-cell.b > span { position: relative; z-index: 1; color: #fff; font-weight: 650; } .dr-cell.today > span { text-decoration: underline; text-underline-offset: 3px; } .dr-say { margin-top: 14px; font-size: 13px; color: var(--text-secondary); text-align: center; min-height: 20px; } .cal-legend { display: flex; align-items: center; gap: 5px; margin-top: 16px; justify-content: flex-end; } .cal-legend i { width: 20px; height: 11px; border-radius: 3px; display: block; } .cal-legend .sub { margin: 0 4px; } .day-list { display: flex; flex-direction: column; } .day-item { display: flex; align-items: baseline; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--grid); } .day-item:first-child { border-top: 0; } .day-item .t { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 46px; } .day-item .ttl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .day-item .amt { font-weight: 600; font-variant-numeric: tabular-nums; } .day-item .meta { font-size: 12px; color: var(--muted); margin-top: 2px; } /* ---------- 상태 · 메시지 ---------- */ /* 현재 데이터 — 큰 숫자는 격자로 크기·줄 수를 맞추고, 곁들이는 말은 아래에 한 줄씩. 섞으면 칸마다 높이가 달라 보인다. */ .status .st-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); } .status .st-tile { background: var(--fill); border-radius: 12px; padding: 12px 13px; min-width: 0; } .status .st-tile .k { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 5px; white-space: nowrap; } .status .st-tile .v { display: block; font-size: 18px; font-weight: 650; letter-spacing: -0.02em; overflow-wrap: anywhere; } .status .st-notes { margin-top: 12px; } .status .st-note { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 12.5px; } .status .st-note .k { color: var(--muted); min-width: 76px; flex: none; } .status .st-note .v { overflow-wrap: anywhere; } .msg { font-size: 13.5px; margin-top: 12px; } .msg.err { color: var(--critical); } .msg.ok { color: var(--good); } .danger-card { box-shadow: var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--critical) 28%, transparent); } /* ★ 높이는 `--vvh`(진짜 보이는 높이) 로 맞춘다. `100dvh` 는 자판을 셈에 안 넣어서, 폰에서 자판이 올라오면 창 아래 절반이 자판 밑으로 들어간다. `--vvh` 는 shell.js 의 wireViewportHeight 가 채운다. */ dialog { border: 0; border-radius: var(--radius); background: var(--surface-1); color: var(--text-primary); padding: 26px; max-width: 420px; width: calc(100% - 32px); box-shadow: 0 24px 64px -16px rgba(0,0,0,.45); max-height: calc(var(--vvh, 100dvh) - 24px); overflow: auto; } dialog::backdrop { background: rgba(0,0,0,.5); backdrop-filter: blur(2px); } dialog h3 { margin: 0 0 10px; font-size: 18px; letter-spacing: -0.02em; } dialog p { color: var(--text-secondary); font-size: 13.5px; margin: 0 0 16px; } /* 일정의 '+ 날짜' — 날짜 칩과 같은 줄에 있지만 **날을 고르는** 단추라 조금 다르게 둔다. 눌린 표시(aria-pressed)를 안 쓰는 유일한 칩이다. */ .seg .plan-day-add { color: var(--accent); font-weight: 600; } /* ---------- 지킴이 일지 (★ 임시) ---------- 통짜 텍스트를 그대로 보여준다. 폰에서 가로로 새지 않게 줄을 접고, 그래도 긴 줄(표 같은 것)은 이 상자 안에서만 밀리게 한다. */ /* ---------- 기록 ---------- */ .log-item { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; padding: 13px 2px; border-top: 1px solid var(--grid); } .log-item:first-child { border-top: 0; } .log-badge { grid-row: span 2; align-self: start; display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .log-badge.upload { background: color-mix(in srgb, var(--series-1) 15%, transparent); color: var(--series-1); } .log-badge.delete { background: color-mix(in srgb, var(--critical) 15%, transparent); color: var(--critical); } .log-badge.config { background: var(--fill); color: var(--text-secondary); } .log-badge.invest { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); } .log-badge.asset { background: color-mix(in srgb, var(--series-2) 15%, transparent); color: var(--series-2); } .log-badge.memo, .log-badge.info { background: var(--fill); color: var(--text-secondary); } .log-badge.trip { background: color-mix(in srgb, var(--series-1) 15%, transparent); color: var(--series-1); } .log-badge.cal { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); } /* ★ 색 규칙이 없으면 배지가 배경 없는 맨 글자로 뜬다 — 아래 넷이 그랬다. `LOG_LABEL`(ledger.js) 에 action 을 더할 때 여기도 같이 채운다. */ .log-badge.photo, .log-badge.albums { background: color-mix(in srgb, var(--series-2) 15%, transparent); color: var(--series-2); } .log-badge.keep, .log-badge.marks { background: var(--fill); color: var(--text-secondary); } .log-item .what { font-size: 14px; overflow-wrap: anywhere; } .log-item .meta { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; } /* ---------- 지출 목록 ---------- */ .day-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 2px 8px; border-bottom: 1px solid var(--grid); position: sticky; top: 0; background: var(--surface-1); z-index: 2; } .day-head:first-child { padding-top: 0; } .day-head .d { font-size: 13px; color: var(--text-secondary); font-weight: 600; } .day-head .s { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } /* 한 줄에: 아이콘 / 분류 / 사용처(넘치면 …) / 금액. 결제수단은 표면에서 뺐다 — 눌러서 상세로 들어가면 다 있다. */ /* ★ 세로 간격은 0 이다. `gap` 은 가로·세로에 다 걸려서, 메모 줄이 생기면 사용처와 메모 사이가 10px 벌어진다 — 딸린 한 줄이 아니라 딴 줄로 보인다. */ .item { display: grid; grid-template-columns: 44px auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 0; padding: 11px 2px; border-bottom: 1px solid var(--grid); cursor: pointer; align-items: center; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; color: var(--text-primary); border-radius: 0; } .item:hover { background: var(--fill); } .item .ic { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 25px; line-height: 1; background: var(--fill); flex: none; } /* ★★ 메모가 붙으면 아이콘이 **두 층에 걸친다.** 안 걸치면 44px 짜리 아이콘이 첫 층을 통째로 44px 로 부풀리고, 사용처가 그 안에 가운데 서면서 **밑에 빈 자리가 8px** 생긴다 — 메모가 뚝 떨어져 보이던 까닭이다. (실제로 줄 높이가 `40px 16px` 이었다) ★ `1 / -1` 은 못 쓴다. `-1` 은 **적어 둔 줄(explicit grid)** 의 끝을 가리키는데 여기 줄은 다 저절로 생긴 것이라, 아이콘을 놓는 시점엔 둘째 줄이 아직 없어서 결국 첫 줄에만 놓인다. `span 2` 로 못 박는다. ★ 메모가 없을 때는 걸치면 안 된다 — 빈 둘째 줄이 생겨 줄이 커진다. 그래서 `:has(.m)` 로 메모가 있는 줄에만 건다. */ .item:has(.m) .ic { grid-row: 1 / span 2; } /* 메모 — 사용처 밑에 작게, 회색으로. ★★ **사용처 칸(3번)에서 시작한다.** 분류 칸(2번)부터 깔면 메모가 '식비 › 배달' 밑에서 시작해서 분류에 딸린 말처럼 읽힌다. 메모는 그 가게에 딸린 말이니 `쿠팡이츠` 의 '쿠' 밑에서 시작해야 한다. ★ **줄바꿈하지 않는다.** 메모가 길다고 두 줄 세 줄로 흐르면 줄 키가 들쭉날쭉해져서 목록을 훑는 리듬이 깨진다. 넘치는 만큼은 … 로 자르고, 전문은 눌러서 상세에서 본다. ★ 금액 칸(4번) 앞에서 끝낸다 — 금액 밑까지 흐르면 두 값이 한 덩어리로 보인다. */ .item .m { grid-column: 3 / 4; min-width: 0; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 분류가 길어도 사용처 자리를 다 먹지 않게 상한을 둔다 */ .item .c { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; } .item .t { font-size: 15px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .item .a { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; } @media (max-width: 420px) { .item { grid-template-columns: 40px auto minmax(0, 1fr) auto; column-gap: 8px; row-gap: 0; } .item .ic { width: 40px; height: 40px; font-size: 22px; } .item .c { font-size: 11.5px; max-width: 34vw; } .item .t { font-size: 14px; } .item .a { font-size: 14px; } .item .m { font-size: 11px; } } .detail-line { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--grid); font-size: 13.5px; } .detail-line:first-child { border-top: 0; } .detail-line .lbl { color: var(--muted); min-width: 76px; flex: none; font-size: 12.5px; } .detail-line .val2 { overflow-wrap: anywhere; } /* ---------- 금액 숨기기 ---------- 모자이크가 아니라 흐리게 처리해서 읽을 수 없게 한다. 선택·복사도 막아야 가려도 값이 새지 않는다. */ .switch { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: none; border: 0; padding: 4px 2px; flex: none; } .switch .lb2 { font-size: 12px; color: var(--muted); font-weight: 550; white-space: nowrap; } .switch .track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--baseline); transition: background .18s; flex: none; } .switch .knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.35); } .switch[aria-pressed="true"] .track { background: var(--series-1); } .switch[aria-pressed="true"] .knob { transform: translateX(16px); } .switch[aria-pressed="true"] .lb2 { color: var(--series-1); } .switch:hover .lb2 { color: var(--text-primary); } body.money-hidden .money-blur { filter: blur(9px); user-select: none; -webkit-user-select: none; pointer-events: none; } /* ---------- 시세 갱신 줄 ---------- 계좌 칸 위에 조용히 얹는다. 카드가 아니라 한 줄이라 자리를 덜 먹는다. */ .price-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 0 2px; } .refresh-pill { padding: 6px 14px; border-radius: 999px; border: 0; cursor: pointer; background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); font-size: 12.5px; font-weight: 650; white-space: nowrap; flex: none; } .refresh-pill:hover { background: color-mix(in srgb, var(--good) 26%, transparent); } .refresh-pill:disabled { opacity: .5; cursor: not-allowed; } .price-bar .msg { margin-top: 0; font-size: 12px; color: var(--muted); min-width: 0; overflow-wrap: anywhere; } /* 작은 세그먼트 — 계좌 고르는 줄에 쓴다 */ .seg.sm button { padding: 6px 13px; font-size: 12.5px; } /* ---------- 메모 · 정보 ---------- */ textarea { font: inherit; letter-spacing: inherit; color: var(--text-primary); background: var(--fill); border: 1px solid transparent; border-radius: var(--radius-sm); padding: 10px 12px; width: 100%; resize: vertical; } textarea:focus-visible { outline: none; box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--series-1) 45%, transparent); } /* ---------- 메모 ---------- 붙임쪽지를 벽에 붙여둔 모양. 한 줄 목록은 가로를 거의 안 쓰는 데다 내용이 안 보여서 매번 열어봐야 했다. 카드로 바꾸면 내용이 그대로 보이고, 길이가 제각각이라 화면도 심심하지 않다. 칸 높이를 억지로 맞추지 않는 게 핵심이다. 짧은 메모는 짧게 둔다. */ /* ★ 카드는 **늘 같은 크기**다. 제목 한 줄, 본문 넉 줄로 잘라 높이를 맞춘다. 넘치는 것은 눌러서 팝업으로 읽는다. (예전에는 설정으로 고르게 했는데 골라도 안 먹었고, 다르게 둘 까닭도 없었다 — 갈래를 없앴다.) */ /* ★★ **`line-clamp` 만으로는 크기가 안 같아진다.** 그것은 "넉 줄까지" 이지 "넉 줄" 이 아니어서, 한 줄짜리 메모는 한 줄만 차지한다 — 그래서 '같게' 를 골라도 카드가 제각각이었다(128px 과 183px, 실측). 넉 줄 **높이를 못박아야** 비로소 같아진다. em 으로 두어 글자 크기를 바꿔도 따라온다 (1.6 은 아래 .mk-body 의 line-height). */ .memo-wall .memo-card .mk-body { -webkit-line-clamp: 4; height: calc(4 * 1.6em); } .memo-wall .memo-card .mk-title { -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .memo-wall .memo-card .mk-open { min-height: 128px; } .memo-wall { display: flex; gap: 10px; align-items: flex-start; } .memo-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; } /* 완료 버튼을 카드 안에 따로 두어야 해서 겉은 div, 안쪽 여는 부분만 button 이다. button 안에 button 은 넣을 수 없다. */ .memo-card { position: relative; background: var(--surface-1); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; } /* 아래 여백은 완료 버튼 자리다. 안 비워두면 글자가 버튼에 깔린다. */ .memo-card .mk-open { display: block; width: 100%; text-align: left; border: 0; background: none; border-radius: 0; padding: 13px 14px 40px; cursor: pointer; color: var(--text-primary); } .memo-card .mk-open:hover { background: var(--fill-hover); } /* 누구 메모인지 왼쪽 띠 색으로 먼저 읽힌다 */ .memo-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; } .memo-card.o1::before { background: var(--series-1); } .memo-card.o2::before { background: var(--series-2); } .memo-card.o3::before { background: var(--baseline); } .memo-card .mk-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .memo-card .mk-who { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; } .memo-card.o1 .mk-who { background: color-mix(in srgb, var(--series-1) 15%, transparent); color: var(--series-1); } .memo-card.o2 .mk-who { background: color-mix(in srgb, var(--series-2) 18%, transparent); color: var(--series-2); } .memo-card.o3 .mk-who { background: var(--fill); color: var(--text-secondary); } .memo-card .mk-date { font-size: 11px; color: var(--muted); margin-left: auto; } .memo-card .mk-title { font-size: 14px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; } /* 본문은 최대 8줄까지만. 더 길면 팝업에서 읽는다. */ .memo-card .mk-body { margin-top: 5px; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; } .memo-card .mk-more { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); } /* 마감 날짜. 지난 것은 눈에 띄어야 한다. */ .memo-card .mk-due { font-size: 11px; font-weight: 650; padding: 1px 7px; border-radius: 999px; background: var(--fill); color: var(--text-secondary); white-space: nowrap; } .memo-card .mk-due.today { background: color-mix(in srgb, var(--series-2) 18%, transparent); color: var(--series-2); } .memo-card .mk-due.over { background: color-mix(in srgb, var(--critical) 16%, transparent); color: var(--critical); } .memo-card .mk-labels { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; } /* 완료 표시 버튼. 카드 오른쪽 아래 구석에 둔다. */ .memo-card .mk-done { position: absolute; right: 6px; bottom: 6px; width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer; padding: 0; background: var(--fill); color: var(--muted); font-size: 15px; line-height: 1; } .memo-card .mk-done:hover { background: color-mix(in srgb, var(--good) 20%, transparent); color: var(--good); } .memo-card.done { opacity: .72; } .memo-card.done .mk-title { text-decoration: line-through; } .memo-card.done .mk-done { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); } /* ---------- 검색 ---------- */ .sr-group { margin-bottom: 10px; } .sr-head { display: flex; align-items: baseline; gap: 8px; padding: 0 2px 8px; } .sr-head .t { font-size: 13px; font-weight: 700; } .sr-head .n { font-size: 11.5px; color: var(--muted); } .sr-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--grid); border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; background: none; cursor: pointer; color: var(--text-primary); border-radius: 0; } .sr-item:last-child { border-bottom: 0; } .sr-item:hover { background: var(--fill); } .sr-item .t { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-item .r { font-size: 12px; color: var(--muted); white-space: nowrap; } .sr-item .s { grid-column: 1 / -1; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 찾은 글자에 표시 */ .sr-item mark { background: color-mix(in srgb, var(--series-2) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; } /* 날짜를 쳤을 때 그날 요약 */ .sr-day { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .sr-day .big { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; } /* ---------- 캘린더 ---------- 한 주가 [날짜 줄 + 일정 막대 줄] 두 겹이다. 막대는 7칸 격자 위에 grid-column 으로 걸쳐 놓아서 여러 날짜리가 실제로 이어져 보인다. */ /* 이름 앞에 mc- 를 붙인다. .cal-head 는 지출 탭 달력이 이미 쓰고 있어 그대로 두면 그쪽 머리줄 여백까지 같이 바뀐다. 크기는 전체적으로 작게 — 한 화면에 한 달이 들어오는 게 우선이다. */ .mc-head { display: flex; align-items: center; gap: 2px; margin-bottom: 10px; } /* 달 이름은 눌러서 다른 달로 뛰는 문이다 — 눌러도 되는 자리임이 보여야 해서 아래 꺾쇠를 붙였다. 글자만 있으면 아무도 안 누른다. */ .mc-title { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; font: inherit; color: inherit; font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; cursor: pointer; padding: 6px 8px; margin-left: -8px; border-radius: 9px; } .mc-title:hover { background: var(--fill); } .mc-title .cv { font-size: 11px; color: var(--muted); } /* ★ 화살표는 손가락으로 누르는 것이다. 44x44 는 눌러서 안 빗나가는 최소 크기고, 이보다 작으면 옆 달로 넘기려다 자꾸 헛손질하게 된다 (실제로 그랬다). */ .mc-nav { border: 0; background: none; cursor: pointer; border-radius: 11px; min-width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; color: var(--text-secondary); line-height: 1; flex: none; } .mc-nav:hover { background: var(--fill); color: var(--text-primary); } .mc-nav.add { color: var(--series-1); font-weight: 700; font-size: 25px; } /* 달 고르기 창 — 해를 넘기고, 열두 달을 격자로 */ .mj-year { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 14px; } .mj-year .y { font-size: 17px; font-weight: 700; min-width: 84px; text-align: center; } .mj-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .mj-grid button { border: 0; cursor: pointer; padding: 13px 0; border-radius: 11px; font-size: 14.5px; font-weight: 600; font-family: inherit; background: var(--fill); color: var(--text-primary); } .mj-grid button:hover { background: var(--fill-hover); } /* 지금 보고 있는 달, 그리고 오늘이 든 달 — 둘을 다르게 짚는다 */ .mj-grid button.on { background: var(--text-primary); color: var(--surface-1); } .mj-grid button.now { box-shadow: inset 0 0 0 2px var(--series-1); color: var(--series-1); } .mj-grid button.on.now { color: var(--surface-1); } .cal-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; font-size: 10.5px; color: var(--muted); text-align: center; padding-bottom: 4px; border-bottom: 1px solid var(--grid); } .cal-wd .sun { color: var(--critical); } .cal-wd .sat { color: var(--series-1); } /* 달력이 화면을 끝까지 쓴다. 아래에 다른 칸이 없으니 남길 이유가 없고, 주 높이가 넉넉해야 일정 막대가 여러 개 들어간다. 100dvh 는 폰 주소창이 접힐 때 높이가 튀는 걸 막아 준다. */ /* 화면을 거의 꽉 채운다. 114px 는 상단바·여백을 재서 맞춘 값으로, 이보다 작으면 세로 스크롤이 생긴다. .wrap 의 아래 여백 60px 도 캘린더에서만 걷어낸다 — 안 그러면 달력이 화면에 딱 맞아도 그 여백 때문에 스크롤이 남는다. 100dvh 는 폰 주소창이 접힐 때 높이가 튀는 걸 막아 준다. */ /* ★ `min-height` 가 아니라 `height` 다. min- 만 주면 카드가 **내용에 끌려** 늘어난다 — 막대를 다섯 층으로 늘리자마자 달력이 화면을 넘겨 스크롤이 생겼다. 높이를 못 박아야 안쪽 격자가 남은 자리에 맞춰 줄어든다(막대는 잘리고 "+N"). */ /* 148px = 카드 위쪽까지 84px(상단바·여백) + 아래 하단탭 자리 64px. ★ 예전 값 114px 로는 달력 아래 34px 이 하단탭에 가려 있었다 — 마지막 주가 잘려 보이던 까닭이다. 재서 맞춘 값이니 상단바를 건드리면 다시 잴 것. */ #view-cal > .card { display: flex; flex-direction: column; height: calc(100vh - 148px); height: calc(100dvh - 148px); } /* 캘린더는 꽉 차게 쓰되 하단 탭 높이만큼은 비킨다 */ body.cal-view .wrap { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } /* ★ 여섯 주가 **똑같은 높이**여야 한다. 예전에는 일정이 많은 주만 157px 로 부풀고 없는 주는 87px 로 쪼그라들어, 달력이 들쭉날쭉하면서도 정작 일정은 세 개밖에 안 들어갔다. `min-height:0` 이 있어야 flex 가 내용에 안 끌려간다. */ /* ★ 격자는 자리를 **정해서** 쓰고, 남는 자리는 아래 상세에 준다. 예전에는 격자가 `flex:1` 로 화면을 다 먹어서, 일정이 한둘인 칸 아래가 텅 비어 있었다. 한 주 76px 이면 막대 세 층이 들어간다. `minmax(0,1fr)` 이라야 칸이 내용에 안 끌린다. */ #mc-grid { flex: none; height: 456px; display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); min-height: 0; } .cal-week { border-bottom: 1px solid var(--grid); padding: 3px 0 4px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } .cal-week:last-child { border-bottom: 0; } .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; } /* 날짜 숫자는 작아도 읽힌다. 24px→20px 로 줄인 만큼 일정이 한 줄 더 들어간다. */ .cal-day { border: 0; background: none; cursor: pointer; padding: 0; border-radius: 999px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-primary); width: 20px; height: 20px; line-height: 20px; margin: 0 auto; } .cal-day.off { color: var(--muted); opacity: .4; } /* 다른 달 */ .cal-day.red { color: var(--critical); } .cal-day.blue { color: var(--series-1); } .cal-day.today { background: var(--text-primary); color: var(--surface-1); font-weight: 700; } .cal-day.picked { box-shadow: inset 0 0 0 1.5px var(--series-1); } /* 일정 막대 */ .cal-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.5px; margin-top: 2px; flex: 1; min-height: 0; align-content: start; grid-auto-rows: 14px; overflow: hidden; } .cal-bar { font-size: 10px; font-weight: 600; line-height: 14px; padding: 0 3px; border-radius: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 0; cursor: pointer; text-align: left; min-width: 0; letter-spacing: -0.03em; } /* 종일은 꽉 채워 진하게, 시간제는 연한 바탕에 글자만 색 */ .cal-bar.all { background: hsl(var(--h) 62% 52%); color: #fff; } .cal-bar.timed { background: hsl(var(--h) var(--lb-s) var(--lb-l)); color: hsl(var(--h) var(--lb-ts) var(--lb-tl)); } .cal-bar.memo { background: var(--fill); color: var(--text-secondary); } .cal-bar.done { text-decoration: line-through; opacity: .6; } /* 줄 높이를 막대와 똑같이 맞춘다(막아 두는 것이지, 이것 때문에 잘렸던 건 아니다 — 잘린 진짜 까닭은 이 줄을 다섯째 층에 뒀던 것이고 calendar.js 에서 고쳤다). */ .cal-more { font-size: 9.5px; line-height: 14px; color: var(--muted); padding-left: 4px; } /* ---------- 격자 아래 — 고른 날의 일정 ---------- 달력만 크게 띄워 놓으면 "그래서 그날 뭐가 있지" 를 또 눌러 봐야 한다. 아래에 바로 편다. 아무 날도 안 골랐으면 다가오는 일정을 대신 보여준다. */ #mc-day { flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--grid); margin-top: 6px; padding-top: 10px; } .mcd-head { display: flex; align-items: baseline; gap: 8px; flex: none; } .mcd-head .d { font-size: 13.5px; font-weight: 660; } .mcd-head .l { font-size: 11.5px; color: var(--muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mcd-open { border: 0; background: none; cursor: pointer; padding: 2px 0; color: var(--series-1); font-size: 12px; font-weight: 620; flex: none; } .mcd-rows { flex: 1; min-height: 0; overflow-y: auto; margin-top: 2px; } .mcd-none { font-size: 12px; color: var(--muted); padding: 5px 2px 0; flex: none; } /* ★ 빈 날에는 머리 둘(날짜 · N월 일정)과 줄 목록이 한 칸에 들어간다. 목록이 flex:1 로 남은 자리를 먹고 **제 안에서만 굴러야** 하는데, `.empty` 가 끼면 그것이 늘어나 목록을 칸 밖으로 밀어냈다 — "다가오는 일정이 칸을 벗어나 튀어나갔다" 가 그것이다. */ #mc-day > .empty { flex: none; } #mc-day { overflow: hidden; } .mcd-head.sub { flex: none; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--grid); } .mcd-head.sub .d { font-size: 12px; color: var(--muted); font-weight: 600; } .ev-row.sm { padding: 7px 2px; gap: 8px; } .ev-row.sm .bar { height: 24px; } .ev-row.sm .t { font-size: 13px; } .ev-row.sm .s, .ev-row.sm .when { font-size: 11px; } .empty.sm { padding: 18px 0; font-size: 12.5px; } /* 그날 일정 목록 */ .ev-row { display: grid; grid-template-columns: 4px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--grid); border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; background: none; cursor: pointer; color: var(--text-primary); border-radius: 0; } .ev-row:last-child { border-bottom: 0; } .ev-row:hover { background: var(--fill); } .ev-row .bar { width: 4px; height: 30px; border-radius: 999px; background: hsl(var(--h) 62% 52%); } .ev-row .t { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ev-row .s { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ev-row .when { font-size: 11.5px; color: var(--muted); white-space: nowrap; } /* 일정 등록. 모든 줄이 같은 높이, 같은 자리에서 시작한다. 그림 문자는 안 쓴다. 줄마다 높이가 다르고 두 줄로 넘어가던 게 번잡해 보이던 원인이었다. */ /* ★ 줄은 편하게 둔다(42px). 자판에 가리던 것은 줄 높이 탓이 아니라 창이 자판 밑으로 내려간 탓이었다 — 창 높이는 `--vvh` 가 잡는다. 그걸 모르고 줄까지 34px 로 조였더니 찌부러져 보였다. */ /* 줄 높이는 40 아래로 내리지 않는다 — 34 로 줄였다가 답답하다고 되돌렸다. 글자도 한 단 줄였다가 "좀 더 키워도 되겠다" 라고 해서 도로 키웠다 — 줄이는 건 창을 넓혀서 하고, 글자는 건드리지 않는다. */ .ev-line { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 42px; border-bottom: 1px solid var(--grid); } .ev-line:last-of-type { border-bottom: 0; } .ev-line .lb { font-size: 12.5px; color: var(--muted); } .ev-line .val { font-size: 14.5px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 눌러서 고르는 줄은 값이 오른쪽에 있고 끝에 > 가 붙는다 */ .ev-pick { display: flex; align-items: center; justify-content: flex-end; gap: 6px; grid-column: 2 / -1; border: 0; background: none; cursor: pointer; padding: 10px 0; color: var(--text-primary); font-size: 14.5px; min-width: 0; border-radius: 0; } .ev-pick .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ev-pick .cv { color: var(--muted); font-size: 15px; flex: none; } .ev-pick:hover { color: var(--series-1); } .ev-line select { border: 0; background: none; text-align: right; font-size: 14.5px; padding: 6px 0; direction: rtl; } .ev-line .two { display: flex; align-items: center; justify-content: flex-end; gap: 6px; } /* 제목 — 크게 지르지 않는다 */ /* 다른 줄과 같은 결로. 테두리 상자를 두르면 이 한 칸만 크게 튀어 보인다. */ #ev-f-title { font-size: 16.5px; font-weight: 650; background: none; padding: 9px 2px; border: 0; border-bottom: 1px solid var(--grid); border-radius: 0; } /* ★ 자판이 올라오면 창이 화면을 넘긴다. 세 가지를 같이 해야 답답함이 풀린다. ① 높이를 `--vvh`(진짜 보이는 높이)에 맞춘다 — 100dvh 는 자판을 모른다 ② **위에 붙인다**(margin-block). 가운데 두면 자판이 아래를 먹을 때 창이 통째로 아래로 밀려 제목만 남는다 ③ 안쪽을 굴리게 하고 저장 단추는 바닥에 붙인다 */ /* ★ `[open]` 을 꼭 붙인다. 브라우저는 닫힌 `` 를 `display:none` 으로 숨기는데, 그건 아주 약한 규칙이라 여기 `#ev-dlg { display: flex }` 를 조건 없이 쓰면 **이겨 버린다.** 그러면 닫혀 있는 창이 화면 아래에 그대로 남아, 캘린더를 내리면 '일정 등록' 찌꺼기가 보인다. */ /* 창은 화면에 거의 꽉 차게 — 글자를 줄이는 대신 자리를 넓힌다 */ #ev-dlg { padding: 16px; margin-block: 4px auto; width: calc(100% - 8px); max-width: 500px; max-height: calc(var(--vvh, 100dvh) - 8px); } #ev-dlg[open] { display: flex; flex-direction: column; } #ev-dlg h3 { font-size: 16px; margin: 0 0 5px; } #ev-dlg .dlg-foot { margin: 10px -16px -16px; padding: 10px 16px 16px; bottom: -16px; } /* 필터 창은 '확인' 을 넓게 쓰지만 여기는 삭제·취소·저장 셋이라 그대로 둔다 */ #ev-dlg .dlg-foot .primary { flex: 0 0 auto; padding: 11px 22px; font-size: 15px; } /* 아래 더 넣기 단추들 */ .ev-more { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--grid); } .ev-more button { border: 0; background: var(--fill); color: var(--text-secondary); cursor: pointer; padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 550; } .ev-more button:hover { background: var(--fill-hover); color: var(--text-primary); } /* 켜고 끄는 스위치 */ .tgl { position: relative; width: 44px; height: 26px; border-radius: 999px; border: 0; background: var(--baseline); cursor: pointer; flex: none; padding: 0; transition: background .16s; } .tgl::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .16s; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .tgl[aria-pressed="true"] { background: var(--series-1); } .tgl[aria-pressed="true"]::after { transform: translateX(18px); } /* 날짜 고르는 작은 달력 (시작~끝을 한 번에) */ .pick-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .pick-grid .h { font-size: 11px; color: var(--muted); text-align: center; padding-bottom: 4px; } .pick-d { border: 0; background: none; cursor: pointer; padding: 7px 0; border-radius: 8px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-primary); } .pick-d.off { opacity: .35; } .pick-d.red { color: var(--critical); } .pick-d:hover { background: var(--fill); } .pick-d.in { background: color-mix(in srgb, var(--series-1) 14%, transparent); border-radius: 0; } .pick-d.edge { background: var(--series-1); color: #fff; font-weight: 700; } .pick-d.edge.s { border-radius: 8px 0 0 8px; } .pick-d.edge.e { border-radius: 0 8px 8px 0; } .pick-d.edge.s.e { border-radius: 8px; } /* 그날 하나만 크게 보는 창 */ .day-dlg { max-width: 520px; min-height: 58vh; } /* 시간 고르기 — 시계 그림 대신 굴려서 고른다 (레퍼런스와 같은 방식) */ .wheel-wrap { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 10px; padding: 6px 0; background: var(--fill); border-radius: 12px; } .wheel { height: 132px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; text-align: center; width: 74px; } .wheel::-webkit-scrollbar { display: none; } .wheel button { display: block; width: 100%; height: 44px; border: 0; background: none; cursor: pointer; scroll-snap-align: center; font-size: 19px; color: var(--muted); font-variant-numeric: tabular-nums; border-radius: 0; } .wheel button.on { color: var(--text-primary); font-weight: 700; } .wheel-colon { font-size: 19px; font-weight: 700; } /* 가운데 줄 — 지금 고른 값이 어디인지 알려준다 */ .wheel-line { position: absolute; left: 10px; right: 10px; top: 50%; height: 44px; transform: translateY(-50%); border-radius: 9px; pointer-events: none; background: color-mix(in srgb, var(--series-1) 12%, transparent); } /* 댓글 */ .cmt-bar { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--grid); } .cmt-bar input { flex: 1; min-width: 0; } .cmt-ico { border: 0; background: none; cursor: pointer; font-size: 18px; padding: 6px; border-radius: 8px; flex: none; line-height: 1; } .cmt-ico:hover { background: var(--fill); } .cmt-ico.on { background: color-mix(in srgb, var(--critical) 14%, transparent); } .cmt-send { border: 0; background: var(--series-1); color: #fff; cursor: pointer; padding: 8px 13px; border-radius: 9px; font-size: 12.5px; font-weight: 650; flex: none; } .cmt-row { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 8px; align-items: start; padding: 9px 0; border-top: 1px solid var(--grid); } .cmt-row:first-child { border-top: 0; } .cmt-row .who { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--fill); color: var(--text-secondary); } .cmt-row .tx { font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; } .cmt-row .tx img { max-width: 100%; max-height: 200px; border-radius: 9px; display: block; margin-top: 4px; cursor: zoom-in; } .cmt-row .tm { font-size: 11px; color: var(--muted); white-space: nowrap; } .cmt-row .rm { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 11px; padding: 2px 5px; border-radius: 6px; } .likes { font-size: 12px; color: var(--muted); margin-top: 10px; } /* 할 일 목록 (일정 안에) */ .todo-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; } .todo-row input[type=text] { flex: 1; } .todo-chk { width: 22px; height: 22px; border-radius: 6px; border: 0; cursor: pointer; background: var(--fill); color: var(--muted); font-size: 13px; flex: none; padding: 0; } .todo-chk.on { background: color-mix(in srgb, var(--good) 20%, transparent); color: var(--good); } /* ---------- 라벨 ---------- 색은 hue 값 하나만 저장하고 밝기·채도는 테마에서 정한다. 그래서 색을 몇 개로 늘려도 CSS 를 안 건드려도 되고, 어두운 화면에서도 저절로 읽히는 색이 된다. */ /* ★ 칩은 줄어들 줄 알아야 한다 — 이름 긴 라벨이 옆 단추들을 창 밖으로 밀어냈다. 못 다 쓰면 말줄임표. */ .lbl-chip { display: inline-block; max-width: 100%; min-width: 0; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; background: hsl(var(--h) var(--lb-s) var(--lb-l)); color: hsl(var(--h) var(--lb-ts) var(--lb-tl)); } .lbl-bar { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; } .lbl-bar::-webkit-scrollbar { display: none; } .lbl-bar button { flex: none; border: 0; cursor: pointer; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--fill); color: var(--text-secondary); } .lbl-bar button.on { background: hsl(var(--h) var(--lb-s) var(--lb-l)); color: hsl(var(--h) var(--lb-ts) var(--lb-tl)); } .lbl-bar button.all { background: var(--fill); color: var(--text-secondary); } .lbl-bar button.all[aria-pressed="true"] { background: var(--text-primary); color: var(--surface-1); } .lbl-bar button.manage { background: none; color: var(--series-1); } /* ---------- 라벨 고르기 (일정 등록) ---------- ★ 한 줄로 밀게 두면 뒤엣것은 있어도 안 쓰게 된다. 격자로 편다. 라벨 이름이 대개 두세 글자라 작게 하면 네 칸이 들어간다. */ .ev-lbl { padding: 10px 0 12px; border-bottom: 1px solid var(--grid); } .ev-lbl-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .ev-lbl-head .lb { font-size: 12.5px; color: var(--muted); } .ev-lbl-more { border: 0; background: none; cursor: pointer; padding: 2px 0; color: var(--series-1); font-size: 12px; font-weight: 620; } /* 여백은 빠듯하게 — "주연약속" 같은 넉 자 이름이 좁은 폰(360px)에서도 네 칸 안에 온전히 들어가야 한다. 글자를 줄이는 대신 여백을 아꼈다. */ .lbl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } .lbl-grid button { border: 0; cursor: pointer; padding: 8px 5px; border-radius: 9px; font-size: 12.5px; font-weight: 600; min-width: 0; background: var(--fill); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 제 색 점 — 고르기 전에도 이 라벨이 무슨 색인지 보인다 */ .lbl-grid button::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 3px; background: hsl(var(--h) 65% 55%); } .lbl-grid button.on { background: hsl(var(--h) var(--lb-s) var(--lb-l)); color: hsl(var(--h) var(--lb-ts) var(--lb-tl)); box-shadow: inset 0 0 0 2px hsl(var(--h) 62% 52%); } .lbl-grid button.on::before { background: hsl(var(--h) var(--lb-ts) var(--lb-tl)); } /* 전체 창에서 바로 고를 때 */ .lbl-pick { border: 0; background: none; cursor: pointer; padding: 0; text-align: left; min-width: 0; overflow: hidden; } .lbl-row.on { background: color-mix(in srgb, var(--series-1) 10%, transparent); border-radius: 8px; } /* 색 고르기 — 동그라미를 늘어놓는다 */ /* 30색이 딱 세 줄로 떨어진다 */ /* ★ minmax(0, 1fr) 이지 그냥 1fr 이 아니다. 1fr 은 "칸이 제 내용보다 작아지진 않는다" 는 바닥값을 달고 있는데, 동그라미는 aspect-ratio 로 제 폭을 스스로 정해서 그 바닥이 28px 로 굳는다 — 10칸이면 343px 라 360px 폰에서 창 밖으로 15px 삐져나왔다. 0 을 바닥으로 주면 줄어든다. */ .hue-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 7px; margin-top: 6px; } .hue-dot { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer; background: hsl(var(--h) 65% 55%); } .hue-dot[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--surface-1), 0 0 0 5px hsl(var(--h) 65% 50%); } .lbl-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--grid); min-width: 0; } .lbl-row:first-child { border-top: 0; } .lbl-row .sp { flex: 1; } .lbl-row .sub { flex: none; } .lbl-row button { padding: 3px 9px; font-size: 11.5px; background: transparent; border: 0; cursor: pointer; border-radius: 6px; color: var(--muted); flex: none; } .lbl-row button:hover { background: var(--fill-hover); color: var(--text-primary); } /* 라벨이 늘어 줄마다 이름·건수·수정·삭제가 붙는다 — 넓게 쓴다 */ #cl-dlg { width: calc(100% - 12px); max-width: 480px; padding: 20px; } /* 팝업 — 여기서는 본문이 주인공이라 넉넉하게 준다 */ .mv-body { font-size: 14.5px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; padding: 14px 0; margin-bottom: 2px; border-top: 1px solid var(--grid); border-bottom: 1px solid var(--grid); max-height: 46vh; overflow-y: auto; } /* ---------- 정보 ---------- 지출·메모와 같은 방식이다. 목록은 한 줄로 찾기만 하고, 값은 팝업에서 본다. 값이 목록에 깔려 있지 않으니 어깨너머로 훑기도 어려워진다. 다만 '눌러서 바로 복사'가 이 탭의 핵심이라 복사 버튼만 줄에 남겼다. */ /* 지갑 속 카드를 늘어놓은 모양. 계좌·카드는 끝 4자리를 겉에 보여준다 — 은행 앱이 하는 그대로다. 국민은행 계좌가 둘이면 이게 없으면 못 고른다. 전체 값은 여전히 팝업에만 있고, 정보 숨김을 켜면 끝자리도 가린다. */ .info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (min-width: 560px) { .info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .info-card { position: relative; background: var(--surface-1); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; } .info-card .ic-main { flex: 1; display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; padding: 13px 13px 10px; color: var(--text-primary); border-radius: 0; } .info-card .ic-main:hover { background: var(--fill); } .info-card .ic-kind { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 650; color: var(--muted); margin-bottom: 7px; } .info-card .ic-label { font-size: 13.5px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .info-card .ic-tail { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .info-card .ic-copy { border: 0; border-top: 1px solid var(--grid); background: none; cursor: pointer; padding: 8px; font-size: 11.5px; font-weight: 650; color: var(--series-1); border-radius: 0; width: 100%; } .info-card .ic-copy:hover { background: var(--fill-hover); } .info-card .ic-copy.done { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); } /* 팝업에서 값은 통째로 하나의 큰 복사 버튼이다 */ .iv-copy { display: block; width: 100%; text-align: left; border: 0; cursor: pointer; background: var(--fill); border-radius: 11px; padding: 13px 14px; font-size: 15px; line-height: 1.5; color: var(--text-primary); font-family: inherit; white-space: pre-wrap; overflow-wrap: anywhere; } .iv-copy:hover { background: var(--fill-hover); } .iv-copy.done { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); } /* 정보 숨김. 가림용 점이므로 글자 간격을 벌려 읽기 어렵게 둔다. */ .iv-copy.masked { letter-spacing: 3px; color: var(--muted); } .iv-hint { font-size: 12px; color: var(--muted); margin-top: 7px; } /* ---------- 정보 탭 잠금 ---------- */ .lockcard { text-align: center; padding: 40px 22px; } .lockcard .lock-ico { font-size: 40px; line-height: 1; margin-bottom: 14px; } .lockcard h2 { margin: 0 0 8px; } .lockcard .note { margin: 0 auto 20px; max-width: 340px; } .lockcard .fine { margin: 18px auto 0; max-width: 360px; font-size: 12px; } .lockcard .msg { margin-top: 14px; } .linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--series-1); text-decoration: underline; } /* ---------- 설정 ---------- */ /* ★★ 구획 제목. 설정은 **탭이 아니라 한 줄 스크롤 + 구획**이다 (Android 지침: 15개 미만이면 하위 화면으로 가르지 말고 heading 으로 묶어라). ★ 첫 구획은 위 여백을 없앤다 — 화면 맨 위에 빈 칸이 뜨면 잘못 그린 것처럼 보인다. ★ 붙는 설명()은 **어느 구획인지 짐작하게 하는 몫**이다. 이름만으로 "지문이 어디 있지" 가 되는 것이 탭을 걷어낸 까닭이라, 여기서 되풀이하지 않는다. */ .set-sec { margin: 30px 0 10px; font-size: 13px; font-weight: 650; letter-spacing: .01em; color: var(--text-secondary); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .set-sec:first-child { margin-top: 2px; } .set-sec span { font-weight: 400; font-size: 12px; color: var(--muted); } .set-row { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--grid); } .set-row .sk { color: var(--muted); font-size: 12.5px; min-width: 88px; flex: none; } .set-row .sv { overflow-wrap: anywhere; font-size: 13.5px; } .set-row .sv.on { color: var(--good); font-weight: 600; } .set-row .sv.off { color: var(--muted); } /* ---------- 보관 (정보 탭 안) ---------- 메모·여행과 같은 한 줄짜리 목록. 제목이 크고 내용은 한 줄만 흘린다. */ .keep-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 13px 2px; background: none; border: 0; border-bottom: 1px solid var(--grid); border-radius: 0; color: var(--text-primary); cursor: pointer; } .keep-row:last-child { border-bottom: 0; } .keep-row:hover { background: var(--fill); } .keep-row .kc { min-width: 0; display: grid; gap: 3px; } .keep-row .kt { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .keep-row .kb { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .keep-row .kn { font-size: 12px; color: var(--muted); flex: none; } /* ---------- 저장 공간 ---------- 첨부가 커질 수 있게 풀어 준 대신, 얼마나 찼는지 눈에 보여야 한다. 여행별로 나눠 보여주는 건 "다녀오면 지운다"는 쓰임새 때문이다. */ .use-bar { height: 9px; border-radius: 99px; background: var(--fill); overflow: hidden; margin: 12px 0 8px; } .use-bar > span { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--series-1); transition: width .35s ease; } .use-bar > span.warn { background: var(--series-2); } .use-bar > span.full { background: var(--critical); } .use-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .use-now { font-size: 17px; font-weight: 700; letter-spacing: -.2px; } .use-line { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--grid); font-size: 13px; } .use-line .un { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .use-line .uv { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; } .use-line .ud { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--series-1); opacity: .75; } .use-head { font-size: 12px; color: var(--muted); margin: 14px 0 2px; } /* ---------- 여행 ---------- 메모와 같은 방식이다. 목록은 한 줄씩, 누르면 팝업에서 자세히 본다. */ .trip-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 11px; padding: 11px 2px; border-bottom: 1px solid var(--grid); cursor: pointer; align-items: center; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; color: var(--text-primary); border-radius: 0; } .trip-row:last-child { border-bottom: 0; } .trip-row:hover { background: var(--fill); } .trip-row .ic { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--fill); flex: none; } .trip-row .tc { min-width: 0; display: grid; gap: 1px; } .trip-row .tt { font-size: 14.5px; font-weight: 640; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .trip-row .tw { font-size: 12.5px; color: var(--muted); min-height: 19px; line-height: 1.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 지난 여행 / 지금 가는 중 / 남은 날짜 */ .trip-row .tb { font-size: 11.5px; font-weight: 650; white-space: nowrap; flex: none; padding: 3px 9px; border-radius: 999px; background: var(--fill); color: var(--muted); } .trip-row .tb.now { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); } .trip-row .tb.soon { background: color-mix(in srgb, var(--series-2) 18%, transparent); color: var(--series-2); } /* ── 지난 여행 서랍 ── 감추는 게 아니라 모아 두는 것이다. 그래서 개수가 늘 보이고, 여는 손잡이는 줄 전체다 (좁은 화면에서 화살표만 노리기 어렵다). */ .trip-past-head { margin: 18px 0 2px; font-size: 12px; font-weight: 650; color: var(--muted); letter-spacing: .2px; } .trip-fold { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; text-align: left; cursor: pointer; padding: 9px 2px; background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--grid); color: var(--text-primary); } .trip-fold:hover { background: var(--fill); } .trip-fold .caret2 { font-size: 10px; color: var(--muted); } .trip-fold .tf-y { font-size: 13.5px; font-weight: 640; } .trip-fold .tf-n { font-size: 11.5px; font-weight: 650; color: var(--muted); background: var(--fill); border-radius: 999px; padding: 3px 9px; } /* 접힌 것과 펼친 것을 한눈에 가르려고 살짝 들여 쓴다 */ .trip-fold-body { padding-left: 10px; } .trip-fold-body .trip-row:last-child { border-bottom: 1px solid var(--grid); } /* ── 하단 탭 고르기 창 ── */ .tab-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .tab-opt { display: grid; grid-template-rows: auto auto; gap: 3px; justify-items: center; padding: 11px 6px 9px; border-radius: 13px; cursor: pointer; background: var(--fill); border: 1.5px solid transparent; color: var(--text-primary); position: relative; } .tab-opt .ic { font-size: 21px; line-height: 1; } .tab-opt .lb { font-size: 12px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* 고른 것은 **몇 번째인지**까지 보여준다 — 누른 차례가 곧 왼쪽부터의 자리다 */ .tab-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .tab-opt .no { position: absolute; top: 4px; right: 6px; font-size: 10.5px; font-weight: 700; color: var(--accent); } .ti-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 2px; border-bottom: 1px solid var(--grid); cursor: pointer; align-items: center; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; color: var(--text-primary); border-radius: 0; } .ti-row:last-child { border-bottom: 0; } .ti-row:hover { background: var(--fill); } .ti-row .tit { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ti-row .tim { font-size: 12px; color: var(--muted); white-space: nowrap; flex: none; } .ti-row .tis { grid-column: 1 / -1; font-size: 12px; color: var(--muted); min-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ti-row .clip { font-size: 11px; color: var(--series-1); font-weight: 600; } /* 첨부 목록 — 편집 창과 보기 창에서 같이 쓴다 */ .file-chip { display: flex; align-items: center; gap: 8px; padding: 7px 9px; margin-top: 6px; background: var(--fill); border-radius: 9px; font-size: 12.5px; } .file-chip .fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-chip .fs { color: var(--muted); font-size: 11.5px; flex: none; } .file-chip button { padding: 2px 8px; font-size: 11.5px; background: transparent; border: 0; cursor: pointer; border-radius: 6px; color: var(--muted); flex: none; } .file-chip button:hover { background: var(--fill-hover); color: var(--text-primary); } .file-chip button.open { color: var(--series-1); font-weight: 600; } /* 첨부 미리보기 — 여기서는 '뭐가 붙어 있나' 만 보이면 된다. 화면 폭을 다 먹으면 창이 통째로 길어져서 아래 버튼이 밀려난다. 자세히 볼 때는 눌러서 크게 보기로 넘어간다. */ .file-view { margin-top: 8px; } .file-view img { max-width: 100%; max-height: 180px; width: auto; border-radius: 9px; display: block; background: var(--fill); cursor: zoom-in; } .file-view .zoom-hint { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); } /* 메일로 온 파일 한 줄. 자동으로 못 넣은 것만 여기 남으므로 '왜 남았는지'가 파일 이름만큼 중요하다 — 줄을 바꿔서 통째로 보여준다. */ .inbox-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 2px; border-bottom: 1px solid var(--grid); } .inbox-row:last-child { border-bottom: 0; } .ib-n { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ib-s { flex: none; font-size: 12px; color: var(--muted); } .ib-why { flex: 0 0 100%; font-size: 12px; } /* 메일 새로고침이 지금 뭘 하는지. 몇 초씩 걸리는 일이라 한 줄이 계속 바뀐다. 자리를 미리 잡아 둬야 글이 뜰 때 아래가 안 밀린다. */ .mailnow-step { margin-top: 8px; min-height: 17px; font-size: 12px; color: var(--muted); } .mailnow-step.ok { color: var(--good); font-weight: 600; } /* ★ --bad 는 없는 이름이다. 없는 변수는 조용히 무시돼서 글씨가 회색으로 남는다 — 오류인데 오류로 안 보인다. 이 앱의 빨강은 --critical 이다. */ .mailnow-step.err { color: var(--critical); } /* ---------- 사진 창고 ---------- 필터는 한 줄에 두고 넘치면 옆으로 민다. 줄을 접으면 화면 위쪽을 통째로 먹어서 정작 사진이 안 보인다. */ .ph-bar { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ph-bar::-webkit-scrollbar { display: none; } .ph-gap { flex: 1 0 8px; } .ph-chip { flex: none; white-space: nowrap; } /* 고른 게 있으면 눈에 띄어야 한다 — 왜 사진이 적은지 바로 알 수 있게 */ .ph-chip[aria-pressed="true"] { background: var(--series-1); color: #fff; border-color: transparent; } .ph-sort { font-variant-numeric: tabular-nums; } /* 격자 칸 아래에 찍은 날. 44,000장을 뒤질 때 언제 것인지가 제일 궁금하다 */ .gal-cell .ph-when { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 5px; font-size: 10px; color: #fff; text-align: right; background: linear-gradient(transparent, rgba(0,0,0,.55)); } /* 데이터 관리 › 사진 — 보내기 진행 */ .mkp-state { font-weight: 600; margin-top: 12px; } .mkp-row { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--grid); } .mkp-row:last-child { border-bottom: 0; } .mkp-row .n { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; } .mkp-row.dim, .mkp-row.dim .n { color: var(--muted); } .mkp-barbox { height: 10px; background: var(--grid); border-radius: 99px; overflow: hidden; margin: 9px 0 2px; } .mkp-barbox > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s; } /* 왜 못 갔나 — 여기가 비어 있으면 고칠 수가 없다 */ .mkp-why { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--fill); font-size: 13px; } .mkp-why > b { display: block; margin-bottom: 4px; color: var(--critical); } .mkp-why .mkp-row { border-bottom: 0; padding: 3px 0; } /* 어디서 시간이 갔는지 — 다음에 느릴 때 짚을 자리 */ .mkp-when { margin-top: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } /* 폰이 기억하는 양 */ .mkp-book { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--grid); } .mkp-book .link { background: none; border: 0; padding: 0 0 0 4px; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; } /* 하트가 달린 사진. 부부 중 누구든 눌렀으면 격자에서 보인다 */ .gal-cell .ph-fav { position: absolute; right: 4px; top: 4px; font-size: 12px; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.65); } /* ---------- 여러 장 고르기 ---------- ★ 고른 것은 **한눈에** 갈려야 한다 — 50장 중 몇을 골랐는지 훑어보는 자리라, 테두리만으로는 작은 칸에서 안 보인다. 그림을 살짝 줄이고 동그라미에 체크를 얹는다(갤러리 앱들이 그렇게 한다). */ .gal-cell .ph-tick { position: absolute; left: 5px; top: 5px; width: 19px; height: 19px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); background: rgba(0,0,0,.28); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; box-shadow: 0 0 4px rgba(0,0,0,.4); } .gal-cell.on .ph-tick { background: var(--accent); border-color: #fff; } .gal-cell.on img { transform: scale(.86); border-radius: 8px; } .gal-cell img { transition: transform .12s ease, filter .25s ease; } /* ★ 아직 진짜 미리보기가 안 온 칸. 서버가 목록에 실어 보낸 460바이트짜리 16px 그림을 세운 것이라 **부를 것이 없어 0ms** 다. 그대로 늘리면 모자이크로 보이니 뭉갠다. 진짜가 오면 이 class 가 빠지면서 `filter` 전환을 타고 또렷해진다 — 격자가 빈 채로 있는 순간이 없다. `scale` 은 흐리게 하면 가장자리가 비쳐서 살짝 키워 덮는 것이다. */ .gal-cell img.ph-blurry { filter: blur(7px); transform: scale(1.1); } .gal-cell.on { background: var(--accent); } /* 고르는 중에만 뜨는 아래 띠. **탭 바로 위**에 앉는다 — 격자를 굴려 내려가도 엄지가 닿는 자리여야 한다. */ /* ★ 탭 바(54px) 위에 넉넉히 앉힌다. 52px 로 뒀더니 2px 이 겹쳐 탭을 가렸다 — 기기마다 글자 크기가 달라 딱 맞추면 언젠가 또 겹친다. */ .ph-pick { position: fixed; left: 0; right: 0; z-index: 61; bottom: calc(env(safe-area-inset-bottom, 0px) + 58px); display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--surface-1); border-top: 1px solid var(--grid); box-shadow: 0 -6px 18px rgba(0,0,0,.10); } body.pinned .ph-pick { left: 216px; } .ph-pick .ph-pick-n { flex: 1; font-weight: 650; font-size: 13px; font-variant-numeric: tabular-nums; } .ph-pick button { flex: none; } .ph-pick button.danger { color: var(--critical); } .ph-pick button:disabled { opacity: .4; } /* 크게 보기의 하트 단추 — 내가 눌렀으면 붉게 */ #gv-fav[aria-pressed="true"] { color: var(--critical); } .ph-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } /* ---------- 홈 — 오늘·내일 / 다가오는 날 ---------- 둘 다 '한 줄에 하나' 다. 대문에서 훑고 눌러서 그 자리로 가는 게 전부라 칸을 잘게 나누지 않는다. */ .hm-nd { display: flex; gap: 10px; padding: 5px 0; } .hm-nd + .hm-nd { border-top: 1px solid var(--grid); margin-top: 4px; padding-top: 9px; } .hm-nd-l { flex: 0 0 34px; font-size: 12px; color: var(--muted); padding-top: 3px; } .hm-nd-items { flex: 1; min-width: 0; } .hm-nrow { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; cursor: pointer; } .hm-nrow.sub { cursor: default; font-size: 12px; color: var(--muted); } /* ---------- 홈 — 뉴스 탭 (모리 조간) ---------- ★ 헤드라인은 **이름표**(작게, muted), 모리가 다시 쓴 문단(teaser)이 **본문**(크게, 진한 글자)이다 — 순서가 뒤집히면 결국 헤드라인 나열로 도로 읽힌다 (2026-08-31, "포털 갈 거면 왜 여기서 보나"). */ .nw-sec { font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .06em; margin: 16px 0 4px; } .nw-item { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 10px 2px; border-bottom: 1px solid var(--grid); } .nw-item:last-child { border-bottom: 0; } .nw-t { font-size: 11.5px; color: var(--muted); line-height: 1.4; } .nw-teaser { font-size: 14.5px; line-height: 1.55; color: var(--text-primary); } .nw-item .s { font-size: 11.5px; color: var(--muted); } .nw-sum { margin: 0 0 6px; font-size: 15px; line-height: 1.7; } /* 간략/줄글 전환 — 카드 머리의 작은 알약 둘 */ .nw-mode { display: inline-flex; gap: 2px; background: var(--fill); border-radius: 999px; padding: 2px; margin-right: 8px; } .nw-mode button { border: 0; background: none; cursor: pointer; font: inherit; font-size: 11.5px; color: var(--muted); padding: 2px 9px; border-radius: 999px; } .nw-mode button[aria-pressed="true"] { background: var(--surface-1); color: var(--text-primary); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); } /* 섹션 줄글 — 뉴닉처럼 이어지는 본문. 읽는 글이니 행간을 넉넉히 */ .nw-prose { padding: 4px 0 2px; } .nw-prose p { margin: 0 0 13px; font-size: 15px; line-height: 1.75; } .nw-prose p:last-child { margin-bottom: 4px; } .nw-srcs { border-top: 1px dashed var(--grid); padding-top: 8px; margin-bottom: 4px; } .nw-srcs summary { cursor: pointer; font-size: 12px; color: var(--muted); } .nw-srcs .nw-item { padding: 8px 2px; } .nw-srcs .nw-t { font-size: 13px; color: var(--text-primary); } #nw-dlg .nw-sec:first-of-type { margin-top: 16px; } #nw-dlg .nw-item .nw-t { font-size: 13.5px; color: var(--text-primary); } #nw-dlg { width: min(480px, calc(100vw - 36px)); } .hm-ddrow { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; cursor: pointer; } .hm-ddrow + .hm-ddrow { border-top: 1px solid var(--grid); } /* 남은 날이 제일 먼저 읽혀야 한다 — 자리를 고정해 세로로 줄이 맞는다 */ .hm-dd-n2 { flex: 0 0 46px; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .hm-dd-n2.soon { color: var(--critical); } /* ---------- 다가오는 날 — 카드 ---------- ★ 매일 보는 자리라 '띡띡띡' 세 줄로 두면 눈에 안 들어온다. 남은 날을 크게 세우고 살짝 띄워(그림자) 손에 잡히는 물건처럼 만든다. ★ 옆으로 민다. 세로로 쌓으면 셋만 있어도 대문 절반을 먹는데, 대문은 훑는 자리지 일정표가 아니다. */ .hm-dd-cards { display: flex; gap: 9px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .hm-dd-cards::-webkit-scrollbar { display: none; } .hm-ddc { flex: none; width: 118px; display: grid; gap: 2px; text-align: left; border: 0; cursor: pointer; font: inherit; padding: 12px 13px 11px; border-radius: 15px; background: var(--surface-1); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 14px -8px rgba(0,0,0,.28); transition: transform .12s ease, box-shadow .12s ease; } .hm-ddc:active { transform: translateY(1px) scale(.985); box-shadow: 0 1px 2px rgba(0,0,0,.06); } .hm-ddc .n { font-size: 23px; font-weight: 760; letter-spacing: -.02em; color: var(--series-1); font-variant-numeric: tabular-nums; line-height: 1.1; } .hm-ddc .t { font-size: 13px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hm-ddc .w { font-size: 11.5px; color: var(--muted); } /* 가까울수록 진해진다 — 숫자를 읽기 전에 눈이 먼저 안다 */ .hm-ddc.near { background: color-mix(in srgb, var(--series-1) 8%, var(--surface-1)); } .hm-ddc.soon { background: color-mix(in srgb, var(--critical) 10%, var(--surface-1)); } .hm-ddc.soon .n { color: var(--critical); } /* ---------- 홈 ---------- 지금 이 순간 참인 것만 올린다. 빈 칸은 카드째 접히므로 한가한 날엔 짧아지고 바쁜 날엔 꽉 찬다. */ /* 제목 그림. 사진이 없어도 바탕색만 남고 글씨는 그대로 읽힌다 — 사진이 늦게 오거나 못 받아도 화면이 안 깨진다. */ .hm-hero { position: relative; border-radius: 14px; overflow: hidden; background: var(--series-1); min-height: 132px; margin-bottom: 16px; display: flex; align-items: flex-end; } .hm-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* 사진 위 글씨가 묻히지 않게 아래쪽만 어둡게 깐다 */ .hm-hero-in { position: relative; width: 100%; padding: 40px 18px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); } .hm-hero-t { font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -0.02em; } /* 날짜·음력·인사 한 줄. 그림 위라 전부 흰 계열 — 날짜만 살짝 진하게 */ .hm-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; font-size: 12.5px; color: rgba(255, 255, 255, .82); } .hm-hero-meta .hm-date { font-weight: 650; color: #fff; } /* "3년 전 오늘" — 그림 **위쪽**에 얹는다. 아래는 날짜·인사가 이미 살고 있어서 거기 끼면 무슨 말인지 섞인다. 알약 꼴로 띄워 두면 사진 어디에 걸려도 읽힌다. */ .hm-hero-day { position: absolute; top: 10px; left: 12px; z-index: 1; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font-size: 12px; font-weight: 650; letter-spacing: -0.01em; text-shadow: 0 1px 2px rgba(0,0,0,.3); } /* ---------- 날씨 ---------- ★ 바탕은 시각과 날씨를 따라 바뀐다(weather.js 의 wxSky). 여기서는 **글씨가 어떤 하늘에서도 읽히게** 하는 것만 맡는다 — 그래서 하늘은 늘 어두운 쪽으로 고르고, 글씨는 흰색에 옅은 그림자를 깐다. ★ 사진일 때 깔던 검은 그늘은 하늘일 때는 뺀다 — 하늘색을 흐린다. */ .hm-hero.sky { background-size: cover; transition: background-image .6s ease; } .hm-hero.sky .hm-hero-in { background: none; padding-top: 18px; } .hm-hero.sky .hm-hero-t, .hm-hero.sky .hm-hero-meta { text-shadow: 0 1px 3px rgba(0, 0, 0, .35); } .hm-wx { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 10px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); } .hm-wx .wx-ic { font-size: 22px; line-height: 1; } .hm-wx .wx-deg { font-size: 27px; font-weight: 720; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .hm-wx .wx-t { font-size: 13px; } .hm-wx .wx-hl { font-size: 12px; color: rgba(255, 255, 255, .8); } /* 어디 것을 보고 있나 — 한 줄 통째로 차지해 눈에 걸리게 둔다 */ .hm-wx .wx-at { flex-basis: 100%; font-size: 11.5px; color: rgba(255, 255, 255, .82); } /* 미세먼지는 색으로 먼저 읽힌다 — 숫자를 안 봐도 창문을 열지 말지 안다 */ .hm-wx .wx-dust { font-size: 11.5px; font-weight: 650; padding: 2px 8px; border-radius: 999px; text-shadow: none; } .wx-dust.good { background: #d8f3e0; color: #1b6b3a; } .wx-dust.ok { background: #dbe9fb; color: #1e4f8f; } .wx-dust.bad { background: #fde5cf; color: #8a4b12; } .wx-dust.worst { background: #fbd8d8; color: #8f1d1d; } .hm-inbox { cursor: pointer; display: flex; align-items: center; gap: 8px; } .hm-ib-t { flex: 1; font-size: 14.5px; font-weight: 600; color: var(--series-1); } /* 누르면 그 여행으로 간다 — 눌러도 되는 자리임을 꺾쇠로 알린다 */ .hm-dd-go { margin-left: auto; font-size: 21px; line-height: 1; color: var(--baseline); align-self: center; } .hm-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--grid); cursor: pointer; } .hm-row:last-child { border-bottom: 0; } .hm-box { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 19px; line-height: 1; color: var(--muted); } .hm-txt { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; } /* 어디서 온 할 일인지, 또는 언제까지인지. 지난 것은 눈에 띄어야 한다. */ .hm-tag { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); } .hm-tag.late { color: var(--critical); font-weight: 600; } .hm-more { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--grid); font-size: 12.5px; color: var(--muted); cursor: pointer; } .hm-empty { text-align: center; color: var(--muted); font-size: 14px; padding: 40px 20px; } /* 일정 — 번호가 곧 순서다. 끌어 옮기면 번호가 따라온다. 시간은 정해진 것만 적는 곁다리라 흐리게 둔다. */ .pn-row { display: flex; align-items: center; gap: 11px; padding: 11px 4px; border-bottom: 1px solid var(--grid); cursor: pointer; } .pn-row:last-child { border-bottom: 0; } .pn-no { flex: 0 0 18px; text-align: center; font-size: 12px; color: var(--muted); } .pn-time { flex: 0 0 40px; font-size: 13px; color: var(--text-primary); } .pn-time.none { color: var(--muted); } .pn-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pn-t { font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; } /* 메모는 한 줄만 흘려 보여준다. 여기서 다 읽으라는 게 아니라 "있다"는 표시다. */ .pn-memo { font-size: 12.5px; color: var(--muted); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pn-pics { flex: 0 0 auto; display: flex; align-items: center; gap: 3px; } .pn-pics img { width: 26px; height: 26px; object-fit: cover; border-radius: 5px; border: 1px solid var(--grid); } .pn-nopic, .pn-more { font-size: 11px; color: var(--muted); } /* 누르면 그 줄이 그대로 고치는 칸이 된다. 메모는 아랫줄로 내려간다. */ .pn-row.edit { cursor: default; gap: 6px; flex-wrap: wrap; } .pn-row.edit input { min-width: 0; } .pn-e-memo { flex: 1 0 100%; margin-top: 4px; resize: vertical; } .pn-e-time { flex: 0 0 62px; } .pn-e-txt { flex: 1; } .pn-pic, .pn-del { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 14px; color: var(--muted); } .pn-del:hover { color: var(--critical); } .pn-head { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 2px; font-size: 13px; font-weight: 600; } .pn-head:first-child { margin-top: 4px; } .pn-n { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muted); } /* 고른 사진에 표시 */ .gal-cell .gal-pick { position: absolute; right: 4px; bottom: 4px; font-size: 13px; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.7); } .gal-cell.picked { outline: 2px solid var(--accent); outline-offset: -2px; } /* 체크리스트 — 네모를 누르면 취소선이 그어진다. 끝낸 줄도 지우지 않고 남긴다. 뭘 했는지가 보여야 다시 안 묻는다. */ .tc-row { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--grid); } .tc-row:last-child { border-bottom: 0; } .tc-box { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 19px; line-height: 1; color: var(--muted); } .tc-row.done .tc-box { color: var(--good); } .tc-txt { flex: 1; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; } .tc-row.done .tc-txt { text-decoration: line-through; color: var(--muted); } .tc-del { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 13px; color: var(--muted); opacity: .45; } .tc-del:hover { opacity: 1; color: var(--critical); } /* 오프라인 저장 줄 */ .off-box { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--grid); } /* 안내는 제 줄을 통째로 쓴다. 짧을 때 단추 옆에 끼어들면 갤러리가 가운데로 딸려 들어와 오른쪽 끝에 안 붙는다. */ .off-box .ob-state { flex: 1 0 100%; font-size: 12.5px; color: var(--muted); } .off-box .ob-state.on { color: var(--good); font-weight: 600; } .off-box .ob-state.soon { color: var(--series-2); font-weight: 600; } /* 칸이 여럿이라 좁은 화면에서는 옆으로 민다. 스크롤 막대는 감춘다. */ .seg-scroll { overflow-x: auto; margin-bottom: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .seg-scroll::-webkit-scrollbar { display: none; } .seg-scroll .seg { flex-wrap: nowrap; } .seg-scroll .seg button { white-space: nowrap; } /* ---------- 앨범 (사진 탭) ---------- 삼성 갤러리를 따라간다: 큰 라운드 썸네일 + 이름 + 장수 한 줄. */ .alb-item { display: flex; align-items: center; gap: 4px; } .alb-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; border: 0; background: none; cursor: pointer; text-align: left; padding: 9px 2px; border-radius: 14px; } .alb-row:hover { background: var(--fill); } .alb-thumb { flex: none; width: 64px; height: 64px; border-radius: 18px; overflow: hidden; background: var(--fill); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--grid) 60%, transparent); } .alb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .alb-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .alb-body .t { font-size: 15.5px; font-weight: 640; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .alb-body .n { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .alb-menu { flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; font-size: 17px; } .alb-menu:hover { background: var(--fill-hover); color: var(--text-primary); } #alb-hidden-toggle { margin-top: 10px; padding-left: 2px; } #alb-hidden-list .alb-row { opacity: .55; } /* 집 PC 앨범 구획 머리 — 읽기 전용임을 말해 둔다 */ /* 대문 — 만난 지 · 결혼한 지. 그림 바로 밑 한 줄, 작게. */ /* ---------- 모리 한 줄 ---------- 작은 모리 + 말풍선. 매일 문장이 바뀌고 표정이 문장을 따라간다. */ .hm-mori { display: flex; align-items: center; gap: 10px; padding: 2px 4px; } .hm-mori img { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--fill); object-fit: cover; } .hm-mori-bub { position: relative; background: var(--fill); border-radius: 14px; padding: 9px 13px; font-size: 13.5px; line-height: 1.5; color: var(--text-primary); } /* 말풍선 꼬리 — 모리 쪽을 향한다 */ .hm-mori-bub::before { content: ""; position: absolute; left: -5px; top: 50%; width: 10px; height: 10px; transform: translateY(-50%) rotate(45deg); background: var(--fill); border-radius: 2px; } /* ---------- 빈 화면의 모리 ---------- ★ 돈 보는 화면(지출·자산·거래 목록)에는 안 쓴다 — 거기는 조용해야 한다. */ .mori-empty { display: grid; justify-items: center; gap: 8px; padding: 26px 12px; } .mori-empty img { width: 76px; height: 76px; border-radius: 50%; background: var(--fill); object-fit: cover; } .mori-empty .me-t { font-size: 14.5px; font-weight: 600; color: var(--text-secondary); } .mori-empty .me-s { font-size: 12.5px; color: var(--muted); } /* 일이 끝난 자리에 붙는 작은 모리 — 글 옆에 서서 같이 좋아한다 */ .mori-tag { float: left; width: 34px; height: 34px; border-radius: 50%; margin: 0 9px 4px 0; background: var(--fill); object-fit: cover; } /* ---------- 모리 기다림 창 ---------- 켜는 화면과 같은 인디고. 긴 일(엑셀 넣기) 동안만 뜬다. */ #mori-wait { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #fff; background: linear-gradient(155deg, #5B4AE0 0%, #6C45DC 45%, #8340C8 100%); opacity: 0; pointer-events: none; transition: opacity .18s ease; } #mori-wait.on { opacity: 1; pointer-events: auto; } #mori-wait img { width: 88px; height: 88px; border-radius: 50%; background: rgba(255, 255, 255, .92); animation: mw-bob 1.6s ease-in-out infinite; } #mori-wait .mw-t { font-size: 14.5px; font-weight: 600; letter-spacing: -.2px; } @keyframes mw-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* 대문 — 이번 달 지출 한 줄 */ .hm-sp-amt { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .hm-sp-cmp { font-size: 12.5px; color: var(--muted); margin-top: 3px; } .hm-sp-cmp.up { color: var(--critical); } .hm-sp-cmp.down { color: var(--good); } /* ---------- 오늘의 카드 ---------- ★ 질문은 **읽는 것이 아니라 답하는 것**이라, 물음표 줄을 크게 세워 "여기 뭘 적어야 하는구나" 가 한눈에 오게 한다. */ .today .td-k { font-size: 11.5px; color: var(--muted); font-weight: 650; letter-spacing: .02em; margin-bottom: 6px; } .today .td-q { font-size: 17px; font-weight: 650; line-height: 1.4; letter-spacing: -0.01em; } .today textarea { width: 100%; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--grid); border-radius: 11px; background: var(--fill); color: var(--text-primary); font: inherit; font-size: 14px; resize: none; } .today .td-mine { margin-top: 10px; padding: 10px 12px; border-radius: 11px; background: var(--fill); font-size: 14px; line-height: 1.5; } /* ★ 기다리는 줄은 **재촉이 아니라 안내**다. 작게, 조용히. */ .today .td-wait { margin-top: 8px; font-size: 12px; color: var(--muted); } .today .td-pair { display: grid; gap: 8px; margin-top: 11px; } .today .td-a { padding: 10px 12px; border-radius: 11px; background: var(--fill); font-size: 14px; line-height: 1.5; } .today .td-a .w { display: block; font-size: 11.5px; color: var(--muted); font-weight: 650; margin-bottom: 3px; } /* 오늘의 한 조각 — 질문 아래 덤이라 줄로 가르고 작게 */ .today .td-more { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--grid); font-size: 13px; color: var(--text-secondary); line-height: 1.5; } .today .td-more .k { display: inline-block; margin-right: 7px; padding: 1px 7px; border-radius: 999px; background: var(--fill); font-size: 11px; color: var(--muted); font-weight: 650; } /* ---------- 더 들여다보기 ---------- ★ 칸마다 성격이 달라 서로 붙어 있으면 한 덩이로 읽힌다. 줄로 가른다. */ .dig-b { padding: 14px 0; border-top: 1px solid var(--grid); } .dig-b:first-of-type { border-top: 0; padding-top: 4px; } .dig-t { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 7px; } .dig-t .sub { font-weight: 400; margin-left: 5px; } .dig-v { font-size: 25px; font-weight: 680; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .dig-p { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 8px; letter-spacing: 0; } .dig-s { font-size: 12.5px; color: var(--text-secondary); margin-top: 5px; } .dig-s.up { color: var(--critical); } .dig-s.down { color: var(--good); } /* 한 줄 = 이름 · 몇 번 · 얼마. 숫자는 오른쪽으로 맞춰야 눈이 훑는다. */ .dig-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; font-size: 13.5px; } .dig-row .c { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dig-row .k { font-size: 11.5px; color: var(--muted); white-space: nowrap; } .dig-row .n { font-variant-numeric: tabular-nums; font-weight: 620; white-space: nowrap; } /* 요일 막대 — 일곱 개라 글자보다 모양이 빠르다 */ .dig-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; margin: 4px 0 2px; } .dig-day { display: flex; flex-direction: column; align-items: center; gap: 4px; } .dig-day .bar { width: 100%; height: 46px; display: flex; align-items: flex-end; background: var(--fill); border-radius: 5px; overflow: hidden; } .dig-day .bar i { display: block; width: 100%; background: var(--grid); border-radius: 5px; min-height: 2px; } .dig-day.top .bar i { background: var(--series-1); } .dig-day .d { font-size: 11px; color: var(--muted); } .dig-day.top .d { color: var(--text-primary); font-weight: 650; } /* 빈 갤러리의 '이런 것도 찾아집니다'. 눌러 보게 만드는 것이 전부라, 설명처럼 안 보이고 **단추처럼** 보여야 한다. */ .ph-eg { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; align-items: center; margin: -6px auto 26px; max-width: 420px; } .ph-eg[hidden] { display: none; } .ph-eg .sub { width: 100%; text-align: center; margin-bottom: 2px; } /* 제안 줄 맨 위의 '사진 속에서 찾기'. 아래 태그 줄과 눈에 띄게 갈라 놓는다 — 그물이 넓은 쪽이라 같은 모양이면 또 지나친다. ★★ 이 한 줄은 오랫동안 **아무 일도 안 했다.** 두 가지가 겹쳤다. ① 클래스 하나(0,1,0)로 적어서, 뒤에 오는 `.ph-sug-row`(아래 '치면 제안한다' 칸)의 `border-bottom: … var(--grid)` 과 명시도가 같아 **뒤엣것이 이겼다.** 그래서 위아래 줄이 똑같은 선이 되어 갈라 놓질 못했다. ② `--line` 은 **어디에도 없는 변수**다. 없는 var() 는 그 선언을 통째로 무효로 만들어 border-bottom 이 `none` 이 된다 — 이겨도 선이 안 그려진다. 그래서 클래스를 겹쳐 명시도를 올리고, 있는 색(--baseline, --grid 보다 진하다) 으로 바꾼다. `:root` 에 --line 을 더하는 것만으로는 ①이 안 고쳐진다. */ .ph-sug-row.ph-sug-text { border-bottom: 1px solid var(--baseline); } .ph-sug-text .ph-sug-k { background: var(--series-1); color: #fff; } .ph-sug-text .ph-sug-c { color: var(--muted); font-variant-numeric: normal; } /* 대문 맨 밑 — '몇 년 전 오늘' 네 장을 한 덩이로. ★ 틈을 3px 만 준다. 넉넉히 벌리면 사진 넷이 아니라 **네 개의 칸**으로 보인다 — 붙여야 한 장면으로 읽힌다. ★ 장수에 따라 짜임이 바뀐다. 한 장을 2×2 자리에 덩그러니 넣으면 빈 칸 셋이 남는데, 그게 "못 받았나?" 로 읽힌다. */ .hm-day-grid { display: grid; gap: 3px; border-radius: 12px; overflow: hidden; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1 / 1; background: var(--grid); } .hm-day-grid.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 4 / 3; } .hm-day-grid.n2 { grid-template-rows: 1fr; aspect-ratio: 2 / 1; } /* 셋이면 왼쪽 하나를 크게 — 2×2 에 셋을 넣어 한 칸을 비우는 것보다 낫다 */ .hm-day-grid.n3 { grid-template-columns: 2fr 1fr; } .hm-day-grid.n3 > :first-child { grid-row: span 2; } .hm-day-grid img { width: 100%; height: 100%; object-fit: cover; display: block; min-width: 0; min-height: 0; cursor: pointer; } .hm-day-say { margin-top: 8px; font-size: 12.5px; color: var(--muted); } /* 대문 — 오늘의 지표. 넷을 두 줄로 */ .hm-idx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .hm-idx { display: grid; gap: 1px; min-width: 0; } .hm-idx .n { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hm-idx .v { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; } .hm-idx .p { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--muted); } .hm-idx .p.up { color: var(--critical); } .hm-idx .p.down { color: var(--series-1); } /* 설정 — 지금 걸려 있는 홈 사진 미리보기 */ .hh-now { margin-top: 10px; border-radius: 12px; overflow: hidden; } .hh-now.has { aspect-ratio: 16/7; background: var(--fill); } .hh-now img { width: 100%; height: 100%; object-fit: cover; display: block; } .alb-sec { margin: 20px 2px 6px; font-size: 13.5px; font-weight: 700; color: var(--text-primary); } .alb-sec .sub { margin-left: 6px; font-weight: 400; } /* ---------- 갤러리 ---------- 예약 캡쳐를 분류 없이 그냥 쌓아두는 곳. 훑어보는 게 목적이라 격자는 촘촘하게, 원본은 누를 때만 받아온다. */ /* 칸 수는 손가락으로 정한다 — 오므리면 많이, 펴면 크게. ★★ 칸 **개수**를 바꾸면 뚝뚝 끊긴다(3칸 → 4칸으로 한 번에 튄다). 대신 **칸 너비**를 이어서 바꾼다 — 손가락을 따라 사진이 조금씩 커지고 작아지다가, 한 줄에 하나가 더 들어갈 만해지면 그때 접힌다. 개수는 결과일 뿐 목표가 아니다. 고른 값은 이 기기에 남는다. */ .gal-grid { display: grid; gap: 6px; margin-top: 12px; touch-action: pan-y; grid-template-columns: repeat(auto-fill, minmax(var(--gal-cell, 108px), 1fr)); } .gal-cell { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--fill); border: 0; padding: 0; cursor: pointer; display: block; } .gal-cell img { width: 100%; height: 100%; object-fit: cover; display: block; } .gal-cell:hover { outline: 2px solid var(--series-1); outline-offset: -2px; } /* 항목에 붙어 있는 사진임을 표시 — 갤러리에서는 못 지운다 */ .gal-cell .gal-tag { position: absolute; right: 4px; bottom: 4px; font-size: 11px; background: rgba(0,0,0,.55); color: #fff; border-radius: 6px; padding: 1px 5px; line-height: 1.5; } .gal-up { display: grid; place-items: center; gap: 4px; aspect-ratio: 3 / 4; border-radius: 10px; border: 1.5px dashed var(--baseline); background: none; cursor: pointer; color: var(--muted); font-size: 12px; } .gal-up:hover { border-color: var(--series-1); color: var(--series-1); } .gal-up .plus { font-size: 22px; line-height: 1; } @media (min-width: 560px) { .gal-grid { grid-template-columns: repeat(4, 1fr); } } /* 사진 크게 보기 */ .photo-dlg { max-width: 700px; width: calc(100% - 24px); padding: 16px; } /* 단추가 대여섯이라 좁은 폰에서는 한 줄에 다 안 든다 — 줄을 바꾼다. ★ 위치 숫자(1 / 30)는 줄어들지도 잘리지도 않는다(flex:none). 실제로 "1/30 이 잘려 보인다" 고 해서 이렇게 못 박았다. */ /* ── 아래 사진 줄 (갤럭시 갤러리처럼) ── 지금 것이 가운데. 눌러서 멀리 있는 것도 한 번에 짚는다. */ .pv-strip { display: flex; gap: 5px; overflow-x: auto; padding: 8px 2px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .pv-strip::-webkit-scrollbar { display: none; } .pv-th { flex: none; width: 46px; height: 46px; border-radius: 8px; overflow: hidden; border: 0; padding: 0; background: var(--fill); cursor: pointer; opacity: .55; transition: opacity .12s ease, transform .12s ease; } .pv-th img { width: 100%; height: 100%; object-fit: cover; display: block; } .pv-th.on { opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 2px var(--series-1); } /* ── 아래 기능 줄 ── 자주 쓰는 것만 큼직하게. 글자를 같이 두면 무슨 단추인지 안 헷갈린다. */ .pv-acts { display: flex; gap: 4px; margin-top: 8px; } .pv-acts button { flex: 1; display: grid; justify-items: center; gap: 3px; border: 0; background: none; cursor: pointer; padding: 9px 2px; border-radius: 12px; color: var(--text-secondary); font: inherit; font-size: 11px; } .pv-acts button i { font-style: normal; font-size: 19px; line-height: 1; } .pv-acts button:hover { background: var(--fill); } .pv-acts button:disabled { opacity: .45; cursor: not-allowed; } .pv-acts button.danger { color: var(--critical); } .pv-acts button { min-width: 0; } #gal-export-dlg { width: calc(100% - 32px); max-width: 420px; box-sizing: border-box; padding: 20px; color: var(--text-primary); background: var(--surface-1); border-radius: 18px; } .gal-export-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .gal-export-head h3 { margin: 0; font-size: 16px; } .gal-export-head button { flex: none; min-height: 44px; padding: 8px 12px; } #gal-export-msg { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; } .gal-export-actions { display: grid; gap: 10px; } .gal-export-actions :is(a, button) { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px; font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; } #gal-export-download { background: var(--series-1); color: #fff; } #gal-export-share { background: var(--fill); color: var(--text-primary); border: 1px solid var(--grid); } .gal-export-hint { margin-bottom: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.6; } .pv-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .pv-top .pos { font-size: 13px; font-weight: 600; flex: none; font-variant-numeric: tabular-nums; } /* ★★ 여기를 **가운데 정렬로 두면 안 된다.** 세 칸 묶음은 화면 폭의 세 배라, 가운데로 맞추면 묶음이 왼쪽으로 한 칸만큼 밀려 나간 자리에서 시작한다. 거기서 다시 translateX(-33%) 를 하니 **보여야 할 가운데 칸이 화면 왼쪽 밖으로 나갔다** — 사진은 안 보이고 위쪽 '1 / 10' 만 남았다(실제로 그랬다). 묶음은 왼쪽에 딱 붙이고, 가운데 맞추기는 **칸 안에서** 한다. */ .pv-body { min-height: 200px; display: block; overflow: hidden; } /* ── 세 칸(이전·지금·다음) ── 밀면 다음 사진이 손가락을 따라 들어온다. 한 장만 두고 다 민 뒤에 갈아 끼우면 웹페이지처럼 툭 바뀐다. */ .pv-track { display: flex; width: 300%; transform: translateX(-33.3333%); will-change: transform; } .pv-slot { width: 33.3333%; flex: none; display: grid; place-items: center; } /* 그림 말고 다른 것(오류 알림)이 올 때도 가운데에 둔다 */ .pv-body > .msg { margin: 24px auto; max-width: 90%; text-align: center; } .pv-body img { max-width: 100%; max-height: 62vh; border-radius: 10px; display: block; } .pv-nav { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .pv-nav .nm { flex: 1; min-width: 0; text-align: center; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- 사진 전체화면 ---------- ★ 진짜 전체화면(requestFullscreen)은 iOS 가 안 받아준다. 그래서 화면을 가득 채우는 건 CSS 로 하고, 진짜 전체화면은 되면 얹는 정도로만 쓴다. 홈 화면에 깐 앱은 주소창이 없어서 이것만으로도 진짜 전체화면이다. */ .photo-dlg.full { max-width: 100vw; width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-radius: 0; background: #000; color: #fff; } .photo-dlg.full::backdrop { background: #000; } /* 사진만 남긴다. 단추는 위아래 끝에 옅게 얹는다 — 사진 위에 겹쳐도 가장자리라 가릴 것이 거의 없다. */ .photo-dlg.full .pv-top, .photo-dlg.full .pv-under { position: fixed; left: 0; right: 0; z-index: 2; margin: 0; padding: 10px 14px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .photo-dlg.full .pv-top { top: 0; padding-top: max(10px, env(safe-area-inset-top)); } /* 아래는 사진 줄 + 이름 + 기능 줄이 한 덩어리다 (index.html 의 .pv-under) */ .photo-dlg.full .pv-under { bottom: 0; padding-bottom: max(8px, env(safe-area-inset-bottom)); } .photo-dlg.full .pv-acts button { color: #fff; } .photo-dlg.full .pv-acts button:hover { background: rgba(255,255,255,.14); } .photo-dlg.full .pv-th { background: rgba(255,255,255,.15); } .photo-dlg.full .pv-body { height: 100dvh; min-height: 0; padding: 0; } .photo-dlg.full .pv-slot { height: 100dvh; } .photo-dlg.full .pv-body img { max-width: 100vw; max-height: 100dvh; border-radius: 0; } .photo-dlg.full .pos, .photo-dlg.full .nm { color: #fff; } /* ★★ 갤러리 앱처럼 — 열면 **사진만** 나온다. 한 번 누르면 단추가 얹히고, 다시 누르면 사라진다. 사진을 보러 들어왔는데 파일 이름·찍은 시각 같은 것이 먼저 눈에 들어오면 당황스럽다. ★ `.full` 안에서만 듣는다 — 작은 창으로 볼 때는 단추가 유일한 길이라 숨기면 갇힌다. */ .photo-dlg.full.bare .pv-top, .photo-dlg.full.bare .pv-under { opacity: 0; pointer-events: none; } .photo-dlg.full .pv-top, .photo-dlg.full .pv-under { transition: opacity .18s ease; } @media (prefers-reduced-motion: reduce) { .photo-dlg.full .pv-top, .photo-dlg.full .pv-under { transition: none; } } /* 누를 자리임을 손이 알게 — 사진 어디를 눌러도 된다 */ .photo-dlg.full .pv-body { cursor: pointer; } /* 미는 동안 브라우저가 좌우 스크롤이나 뒤로가기로 채가지 않게 한다. ★ 세로(pan-y)는 남겨 둔다 — 아예 none 으로 막으면 확대한 사진을 못 움직인다. */ /* ★★ `pinch-zoom` 을 주면 **브라우저가 페이지를 통째로** 확대한다. 사진을 벌려 본 뒤 나오면 목록도 단추도 커진 채였다 — 사진과 앱은 따로 커져야 한다. 그래서 브라우저에 맡기지 않고 우리가 그 사진에만 배율을 준다(trip.js 의 galZoom). 세로 굴리기(pan-y)는 남긴다. */ .pv-body { touch-action: pan-y; } /* 확대한 동안에는 손가락이 사진 안을 움직인다 — 화면 굴리기도 막는다 */ .photo-dlg.zoomed .pv-body { touch-action: none; } .pv-slot img { transition: transform .14s ease-out; } .photo-dlg.zoomed .pv-slot img { transition: none; } /* 넘어가는 모양은 이제 세 칸(pv-track)이 손가락을 따라 낸다 — 다 민 뒤에 애니메이션으로 흉내 내던 것(slid-l/r)은 걷어냈다. */ @media (prefers-reduced-motion: reduce) { .pv-track { transition: none !important; } } /* ---------- 꾹 눌러 순서 바꾸기 ---------- */ /* 길게 누를 때 글자 선택 손잡이나 복사 메뉴가 뜨면 드래그가 취소된다. 이 칸들은 눌러서 여는 카드지 글을 긁는 곳이 아니라 아예 꺼 둔다. (본문을 긁고 싶으면 눌러서 팝업에서 하면 된다.) */ /* position:relative 는 아래 표시선(::after)을 카드에 붙이는 데 필요하다 */ .sortable { position: relative; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } /* 원본은 자리에 빈칸으로 남는다 — 어디서 집었는지 보이게 */ .sortable.dragging { opacity: .25; } .sortable.dragging::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px dashed var(--baseline); } /* 넣을 자리 표시. 요소를 끼워 넣지 않고 선만 얹는다 — 격자에 끼우면 나머지 카드가 전부 밀려 어디 놓이는지 알 수 없다. */ .sortable.drop-before::after, .sortable.drop-after::after { content: ""; position: absolute; left: -2px; right: -2px; height: 3px; background: var(--series-1); border-radius: 999px; pointer-events: none; } .sortable.drop-before::after { top: -5px; } .sortable.drop-after::after { bottom: -5px; } body.sorting { cursor: grabbing; } /* 손끝을 따라다니는 복사본. 살짝 들어올린 것처럼 보이게 한다. body 바로 아래에 붙이므로 자식 선택자로 특이도를 한 단계 올린다 — .sortable·.memo-card 의 position:relative 를 순서에 기대지 않고 이긴다. */ body > .drag-ghost { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; margin: 0; opacity: .95; border-radius: 14px; border-bottom: 0; background: var(--surface-1); box-shadow: 0 14px 34px -8px rgba(0,0,0,.55); animation: lift .16s ease-out both; } @keyframes lift { from { scale: 1; } to { scale: 1.04; } } /* ---------- 오프라인 알림 ---------- 경고가 아니라 안내다. 빨갛게 띄우면 고장난 줄 안다. */ #offline-bar { padding: 10px 16px; font-size: 12.5px; line-height: 1.55; background: color-mix(in srgb, var(--series-2) 14%, transparent); color: var(--text-primary); border-bottom: 1px solid var(--grid); } /* ---------- 체크 한 줄 ---------- */ .chkline { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; font-weight: 600; } .chkline input { width: 17px; height: 17px; accent-color: var(--series-1); flex: none; cursor: pointer; } /* 잔액 맞추기 미리보기 */ .fitbox { margin-top: 10px; padding: 12px 14px; border-radius: 11px; background: var(--fill); display: grid; gap: 6px; } .fitbox .fl { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; align-items: baseline; } .fitbox .fl b { font-variant-numeric: tabular-nums; } .fitbox .fl.diff { border-top: 1px solid var(--grid); padding-top: 8px; margin-top: 2px; } .fitbox .fl.diff b { font-size: 15px; } /* ---------- 화면 위 조작 줄 ---------- ★ 목록·달력·차트는 한 번 고르면 잘 안 바꾼다. 그런데 손가락만 하게 커서 정작 봐야 할 숫자를 아래로 밀고 있었다. 여기서만 줄인다. */ .ctrl-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .ctrl-row #spend-sub button { padding: 6px 13px; font-size: 13px; } .ctrl-row .filter-pill { padding: 6px 12px; font-size: 13px; } .ctrl-row .icon-btn { width: 34px; height: 34px; } .ctrl-spacer { flex: 1; } .filter-pill { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--grid); font-size: 13.5px; font-weight: 600; white-space: nowrap; } .filter-pill:hover { background: var(--fill); } .filter-pill .chev { font-size: 11px; color: var(--muted); line-height: 1; } .filter-pill.on { border-color: color-mix(in srgb, var(--series-1) 55%, transparent); color: var(--series-1); background: color-mix(in srgb, var(--series-1) 10%, transparent); } .filter-pill.on .chev { color: var(--series-1); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-secondary); cursor: pointer; flex: none; } .icon-btn:hover { background: var(--fill-hover); color: var(--text-primary); } .icon-btn[aria-pressed="true"] { background: var(--fill); color: var(--series-1); } .search-row { margin-bottom: 12px; } .search-row input { width: 100%; } /* ---------- 분류 고르기 (여러 개) ---------- 대분류를 켜고 끄고, 펼치면 소분류를 하나씩 고른다. ★ 체크와 펼치기는 **다른 단추**다. 한 줄이 두 가지 일을 하면 소분류를 보려다 필터가 바뀌어 버린다. */ .cat-tree { max-height: 38vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; } /* 지금 몇 칸을 골랐고 몇 건인지 + 한 번에 푸는 단추. ★ '전체 해제' 는 창 맨 아래에 있어서 안 보였다. 고르는 자리 바로 위에 둔다. */ .ck-top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 3px 4px 9px; background: var(--surface-1); } .ck-top-t { flex: 1; font-size: 12.5px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ★ 여기에 를 쓰지 않는다. `.cat-tree b` 가 하나라도 있으면 "남의 글자가 태그가 됐다" 는 검사가 못 잡는다 — 규칙을 지키려고 내 마크업을 바꾼다. 검사를 느슨하게 하면 그 검사는 죽는다. */ .ck-top-t .n { color: var(--text-primary); font-weight: 660; font-variant-numeric: tabular-nums; } .ck-clear { border: 0; cursor: pointer; padding: 6px 12px; border-radius: 999px; background: var(--fill); color: var(--text-primary); font-size: 12.5px; font-weight: 600; } .ck-clear:hover { background: var(--fill-hover); } .ck-clear:disabled { opacity: .35; cursor: default; } .ck { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; font-weight: 800; line-height: 1; box-shadow: inset 0 0 0 1.6px var(--grid); color: transparent; } .ck[data-s="on"], .ck[data-s="some"] { background: var(--series-1); color: #fff; box-shadow: none; } .ck-row { display: flex; align-items: center; gap: 2px; } /* 줄 하나가 통째로 누를 자리다. 손가락이 닿을 만큼 키운다. */ .ck-hit { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; border: 0; background: none; cursor: pointer; padding: 11px 9px; border-radius: 10px; font-size: 15px; color: var(--text-primary); } .ck-hit:hover { background: var(--fill-hover); } .ck-hit .ic { flex: none; font-size: 15px; } .ck-hit .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 고른 줄은 바탕째 물들인다 — 체크 하나만으로는 훑을 때 눈에 안 들어온다. */ .ck-row.sel > .ck-hit { background: color-mix(in srgb, var(--series-1) 9%, transparent); } .ck-row.sel .nm { font-weight: 640; } .ck-sum { font-size: 12px; color: var(--series-1); white-space: nowrap; max-width: 38%; overflow: hidden; text-overflow: ellipsis; } .ck-row .n2 { margin-left: auto; color: var(--muted); font-size: 12px; flex: none; font-variant-numeric: tabular-nums; } /* 펼치기는 체크와 **다른 단추**다. 소분류를 보려다 필터가 바뀌면 안 된다. */ .ck-chev { border: 0; background: none; cursor: pointer; width: 42px; flex: none; padding: 13px 0; color: var(--muted); font-size: 14px; border-radius: 10px; transition: transform .15s; } .ck-chev:hover { background: var(--fill-hover); color: var(--text-primary); } .ck-row.open .ck-chev { transform: rotate(180deg); } /* 소분류는 두 칸으로. 세로로 늘어놓으면 폰에서 한참을 굴려야 한다. */ .ck-kids { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--fill); border-radius: 12px; padding: 6px; margin: 3px 4px 9px 42px; } .ck-kid { display: flex; align-items: center; gap: 7px; min-width: 0; border: 0; background: none; cursor: pointer; padding: 10px 8px; border-radius: 9px; font-size: 13.5px; color: var(--text-secondary); text-align: left; } .ck-kid:hover { background: var(--fill-hover); } .ck-kid .tick { flex: none; font-size: 12px; font-weight: 800; color: var(--grid); } .ck-kid .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ck-kid .n2 { font-size: 11.5px; color: var(--muted); flex: none; font-variant-numeric: tabular-nums; } .ck-kid.on { color: var(--text-primary); font-weight: 640; background: color-mix(in srgb, var(--series-1) 12%, transparent); } .ck-kid.on .tick { color: var(--series-1); } /* 창 바닥에 붙는 단추 줄. 창이 길어져도 '확인' 이 늘 손 닿는 곳에 있다. */ .dlg-foot { position: sticky; bottom: -26px; z-index: 2; display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin: 14px -26px -26px; padding: 12px 26px 26px; background: var(--surface-1); border-top: 1px solid var(--grid); } /* ★ 붙어 있는 단추 줄 위로 내용이 사라지는데, 아무 표시가 없으면 **끊긴 것처럼** 보인다. 옅게 흐려 "아래에 더 있다" 를 알린다. */ .dlg-foot::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; pointer-events: none; background: linear-gradient(transparent, var(--surface-1)); } .dlg-foot .primary { flex: 1; padding: 12px 20px; font-size: 15px; } .dlg-foot .ghost { white-space: nowrap; } /* 지출에서 뺀 줄 — 목록에는 남기되 합계에 안 들어간 것을 알린다. 지우면 되돌릴 길이 없어서, 흐리게만 한다. */ .item.skipped .a, .item.skipped .t, .item.skipped .m { opacity: .5; } .item.skipped .a { text-decoration: line-through; } .skip-k { margin-left: 6px; padding: 1px 6px; border-radius: 5px; font-size: 10.5px; font-weight: 600; vertical-align: 1px; opacity: 1; background: var(--fill); color: var(--muted); } /* ---------- 상세 창의 고정비 줄 ---------- */ /* 이름 왼쪽, 스위치 오른쪽, 가르는 줄 하나. 상세 창의 다른 줄과 같은 결이다. */ .dfx { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-top: 1px solid var(--grid); } .dfx-t { flex: 1; font-size: 14px; color: var(--text-secondary); } .dfx.on .dfx-t { color: var(--text-primary); font-weight: 600; } .dfx-k { margin-left: 6px; padding: 1px 7px; border-radius: 5px; font-size: 11px; font-weight: 600; vertical-align: 1px; background: color-mix(in srgb, var(--series-1) 14%, transparent); color: var(--series-1); } .dfx.on .dfx-t { color: var(--series-1); font-weight: 640; } /* 밀어서 켜는 스위치. 눌러야 할 자리가 어디인지 한눈에 보이고, 지금 켜져 있는지도 같은 자리에서 읽힌다. */ .sw { --w: 46px; --h: 27px; width: var(--w); height: var(--h); flex: none; padding: 0; border: 0; border-radius: 999px; cursor: pointer; position: relative; background: var(--grid); transition: background .18s; } .sw i { position: absolute; top: 3px; left: 3px; width: calc(var(--h) - 6px); height: calc(var(--h) - 6px); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28); transition: transform .18s; } .sw[aria-checked="true"] { background: var(--series-1); } .sw[aria-checked="true"] i { transform: translateX(calc(var(--w) - var(--h))); } .sw:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; } /* 묻는 창 — 두 단추가 길어져서(예, 5건 전부 / 아니오, 이 건만) 나란히 못 선다 */ #ask-body { white-space: pre-line; } #ask-dlg .row { flex-wrap: wrap; gap: 8px; } #ask-dlg .row button { flex: 1 1 auto; white-space: nowrap; } /* ---------- 필터 막대 ---------- 컨트롤을 늘어놓지 않고 '필터' 버튼 하나로 모은다. 지금 뭐가 걸려 있는지는 아래 한 줄로 알려준다. */ .filter-bar { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; } .chip-btn { padding: 7px 14px; border-radius: 999px; border: 0; cursor: pointer; background: var(--fill); color: var(--text-primary); font-size: 13px; font-weight: 600; white-space: nowrap; } .chip-btn:hover { background: var(--fill-hover); } .chip-btn.on { background: color-mix(in srgb, var(--series-1) 16%, transparent); color: var(--series-1); } .chip-btn.ghost-chip { background: transparent; color: var(--muted); font-weight: 550; } .chip-btn.ghost-chip:hover { background: var(--fill-hover); color: var(--text-primary); } .filter-bar input[type="search"] { flex: 1 1 150px; min-width: 0; padding: 7px 12px; font-size: 13px; } /* ---------- 고른 것이 몇 건·얼마 ---------- 필터를 거는 까닭이 대개 "이거 얼마나 썼지" 다. 그 답이 제일 커야 한다. ★ 이건 따로 뜬 칸이 아니라 **아래 카드의 머리**다. 처음엔 카드 위에 따로 띄웠더니, 카드에도 '지출 내역 9건 중 9건' 이라는 머리가 또 있어서 같은 말을 두 번 하면서 자리만 두 배로 먹었다. 하나로 합치니 글자를 키우고도 화면이 오히려 짧아졌다. */ .filter-sum { background: var(--surface-1); box-shadow: var(--shadow); border-radius: var(--radius); padding: 13px 18px 11px; margin: 8px 0 18px; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; } .filter-sum:empty { display: none; } /* 머리가 붙었으니 카드는 위쪽 모서리를 편다. 둘이 한 장으로 보인다. */ .filter-sum.joined { border-radius: var(--radius) var(--radius) 0 0; margin-bottom: 0; box-shadow: none; } /* 그림자를 둘 다 두면 사이에 이음매가 비쳐 '따로 놓인 두 장' 으로 보인다. 요약은 그림자를 빼고, 가르는 줄 하나만 또렷하게 긋는다. */ .filter-sum.joined + #pane-list > .card { margin-top: 0; padding-top: 14px; border-top: 1px solid var(--grid); border-radius: 0 0 var(--radius) var(--radius); } /* 요약이 아예 없을 때(기간을 못 정했을 때)는 카드가 혼자 서야 한다. */ .filter-sum:empty + #pane-list > .card { border-radius: var(--radius); padding-top: 22px; } /* 왼쪽으로 줄을 맞춰 쌓는다 — 작은 글씨는 왼쪽 끝, 큰 숫자는 오른쪽 끝에 두면 한 줄 안에서 눈이 양 끝을 오간다. 실제로 읽기 나빴다. */ .fs-head { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; color: var(--muted); } .fs-head .what { color: var(--text-secondary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fs-head .what::after { content: "·"; margin-left: 7px; color: var(--grid); } .fs-head .n { flex: none; } .fs-head .shown { margin-left: auto; flex: none; font-size: 11.5px; } .fs-amt { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.15; margin: 1px 0 3px; } .fs-gross { font-size: 11.5px; color: var(--muted); margin: -2px 0 3px; font-variant-numeric: tabular-nums; } .fs-sub { font-size: 12.5px; color: var(--muted); } /* 지난 주기보다 더 썼으면 눈에 띄게. 덜 썼으면 담백하게 — 아낀 것을 빨갛게 칠할 이유가 없다. */ /* ---------- 고정비 고르는 창 ---------- ★ 사람에게 목록을 훑게 하지 않는다. 앱이 찾아 놓고 사람은 누르기만 한다. 그래서 '후보' 쪽이 '고른 것' 쪽보다 눌러보고 싶게 생겨야 한다. */ .fx-head { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em; margin: 18px 0 7px; } .fx-head2 { display: flex; align-items: baseline; gap: 8px; } .fx-head2 > span:first-child { flex: 1; } .fx-row, .fx-cand { display: grid; align-items: center; gap: 2px 9px; width: 100%; grid-template-columns: auto 1fr auto; padding: 9px 10px; border-radius: 10px; border: 0; background: none; text-align: left; } .fx-row { grid-template-columns: 1fr auto auto; background: var(--fill); margin-bottom: 5px; } .fx-row .fx-n { grid-column: 1; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fx-row .fx-a { grid-column: 2; font-size: 14px; font-weight: 660; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; } .fx-row .fx-m { grid-column: 1; font-size: 11.5px; color: var(--muted); } .fx-x { grid-column: 3; grid-row: 1 / span 2; border: 0; background: none; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; color: var(--muted); font-size: 13px; } .fx-x:hover { background: var(--fill-hover); color: var(--critical); } .fx-k { font-size: 10.5px; font-weight: 600; color: var(--series-1); margin-left: 5px; padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--series-1) 14%, transparent); } /* 후보 — 누르면 그대로 고정비가 된다 */ .fx-cand { cursor: pointer; } .fx-cand:hover { background: var(--fill-hover); } .fx-cand .fx-box { grid-column: 1; grid-row: 1 / span 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; flex: none; background: color-mix(in srgb, var(--series-1) 14%, transparent); color: var(--series-1); font-size: 14px; font-weight: 700; } .fx-cand .fx-n { grid-column: 2; font-size: 14px; font-weight: 600; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fx-cand .fx-a { grid-column: 3; font-size: 14px; font-weight: 660; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; } .fx-cand .fx-m { grid-column: 2 / span 2; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #fx-cand, #fx-now { max-height: 34vh; overflow-y: auto; } /* 고정비 · 그 밖 — 눌러서 그쪽만 볼 수 있다 */ .fs-fix { display: flex; align-items: baseline; gap: 5px; font-size: 12.5px; white-space: nowrap; overflow: hidden; } .fs-fix button { border: 0; background: none; cursor: pointer; padding: 0; font-size: 12.5px; font-weight: 620; color: var(--series-1); font-variant-numeric: tabular-nums; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--series-1) 35%, transparent); } .fs-fix button:hover { text-decoration-color: var(--series-1); } .fs-fix .sep, .fs-fix .pct { color: var(--muted); } .fs-fix .pct { font-size: 11.5px; } .fs-cmp { font-size: 12.5px; margin-top: 1px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; } .fs-cmp b { font-variant-numeric: tabular-nums; font-weight: 660; } .fs-cmp .base { color: var(--muted); font-size: 11.5px; } .fs-cmp.up { color: var(--critical); } .fs-cmp.down { color: var(--good); } .primary.sm { padding: 6px 13px; font-size: 12.5px; border-radius: 999px; } /* ---------- 접었다 펴는 카드 머리 ---------- */ /* 필터 막대는 접기 밖에 두어 접어도 계속 보인다 */ .card h2.fold { cursor: pointer; user-select: none; margin-bottom: 0; padding: 2px 0; } .card h2.fold ~ .filter-bar { margin-top: 14px; } .card h2.fold ~ [data-body] { margin-top: 16px; } .card h2.fold[aria-expanded="false"] ~ [data-body] { display: none; } .caret2 { display: inline-block; width: 15px; font-size: 11px; color: var(--muted); flex: none; } .card h2.fold:hover .caret2 { color: var(--text-primary); } /* ---------- 대표 지수 ---------- */ .idx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; } .idx-cell { min-width: 0; } .idx-cell .nm3 { font-size: 12.5px; color: var(--muted); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .idx-cell .v3 { font-size: 19px; font-weight: 660; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .idx-cell .c3 { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 요약 타일 — 기본 타일보다 조금 작게 */ .tiles.compact { grid-template-columns: repeat(4, 1fr); gap: 10px; } .tiles.compact .tile { padding: 15px 14px; } .tiles.compact .k { font-size: 11.5px; margin-bottom: 6px; } .tiles.compact .v { font-size: 20px; } .tiles.compact .n { font-size: 11px; margin-top: 5px; } /* ---------- 자산 트리 ---------- */ .tree-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 12px 2px; border-top: 1px solid var(--grid); } .tree-row:first-child { border-top: 0; } .tree-row .lab { display: flex; align-items: center; gap: 7px; min-width: 0; } .tree-row .amt2 { font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.02em; } .tree-row.lv0 { padding: 14px 2px 12px; } .tree-row.lv0 .lab { font-size: 14px; font-weight: 620; } .tree-row.lv0 .amt2 { font-size: 26px; font-weight: 690; } .tree-row.lv1 { padding-left: 14px; } .tree-row.lv1 .lab { font-size: 14px; font-weight: 600; color: var(--text-secondary); } .tree-row.lv1 .amt2 { font-size: 18px; font-weight: 650; } .tree-row.lv2 { padding-left: 30px; border-top: 0; padding-top: 7px; padding-bottom: 7px; } .tree-row.lv2 .lab { font-size: 13.5px; color: var(--text-secondary); } .tree-row.lv2 .amt2 { font-size: 14px; font-weight: 600; } .tree-row.lv3 { padding-left: 44px; border-top: 0; padding-top: 5px; padding-bottom: 5px; } .tree-row.lv3 .lab { font-size: 12.5px; color: var(--muted); } .tree-row.lv3 .amt2 { font-size: 12.5px; color: var(--text-secondary); } .tree-row.tappable { cursor: pointer; border-radius: 8px; } .tree-row.tappable:hover { background: var(--fill); } .caret { border: 0; background: none; cursor: pointer; padding: 2px 5px; border-radius: 6px; font-size: 11px; color: var(--muted); flex: none; line-height: 1; } .caret:hover { background: var(--fill-hover); color: var(--text-primary); } .tree-more { padding: 6px 2px 6px 44px; } .tree-more button { background: none; border: 0; color: var(--series-1); cursor: pointer; font-size: 12.5px; padding: 4px 6px; border-radius: 6px; font-weight: 550; } .tree-more button:hover { background: var(--fill-hover); } .tree-gap { height: 6px; } /* ---------- 종목 자동완성 ---------- */ .suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; margin-top: 4px; background: var(--surface-1); border-radius: var(--radius-sm); max-height: 232px; overflow-y: auto; box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 14px 36px -12px rgba(0,0,0,.4); } .suggest button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 0; border-radius: 0; padding: 10px 12px; cursor: pointer; font-size: 14px; color: var(--text-primary); } .suggest button:hover, .suggest button.on { background: var(--fill-hover); } .suggest .mk { font-size: 10.5px; font-weight: 650; padding: 2px 6px; border-radius: 5px; background: var(--fill); color: var(--text-secondary); flex: none; } .suggest .cd { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; } .suggest .nm2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- 투자/저축 ---------- */ .pos-row { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 14px 2px; border-top: 1px solid var(--grid); } .pos-row:first-child { border-top: 0; } .pos-row .nm { font-weight: 620; font-size: 15px; overflow-wrap: anywhere; } .pos-row .val { font-weight: 640; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .pos-row .sub2 { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; } .pos-row .pl { font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; font-weight: 600; } .up { color: var(--critical); } /* 국내 관행: 상승 빨강 */ .down { color: var(--series-1); } /* 하락 파랑 */ .flat { color: var(--muted); } .kind-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--fill); font-size: 11px; color: var(--text-secondary); font-weight: 550; margin-right: 6px; } .ivtx { display: grid; grid-template-columns: auto 1fr auto auto; gap: 2px 10px; align-items: center; padding: 11px 2px; border-top: 1px solid var(--grid); } .ivtx:first-child { border-top: 0; } .ivtx .side { font-size: 11.5px; font-weight: 650; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .ivtx .side.buy { background: color-mix(in srgb, var(--critical) 14%, transparent); color: var(--critical); } .ivtx .side.sell { background: color-mix(in srgb, var(--series-1) 14%, transparent); color: var(--series-1); } .ivtx .t { font-size: 14px; overflow-wrap: anywhere; } .ivtx .amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .ivtx .del { padding: 4px 9px; font-size: 12px; cursor: pointer; background: transparent; color: var(--muted); border-radius: 8px; } .ivtx .del:hover { background: var(--fill-hover); color: var(--critical); } .ivtx .meta2 { grid-column: 2 / -1; font-size: 12px; color: var(--muted); } /* ---------- 월 마감 ---------- */ /* 상자로 감싼 버튼. 글자만 있으면 눌 수 있는 줄 모르고 지나친다. */ .boxbtn { font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 11px; background: var(--fill); color: var(--text-primary); border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px var(--grid); white-space: nowrap; } .boxbtn:hover { background: var(--fill-hover); } /* 월 마감 — 달력처럼 6열 2행. 한 해가 한눈에 들어와야 한다. */ .close-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 16px 0 12px; } .close-nav .yr { font-size: 15px; font-weight: 650; min-width: 74px; text-align: center; } .close-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } .close-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 2px; border-radius: 10px; cursor: pointer; background: var(--surface-1); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--grid); border: 0; min-width: 0; } .close-cell .m { font-size: 13px; font-weight: 620; } .close-cell .n { font-size: 10.5px; color: var(--muted); } .close-cell:hover:not(:disabled) { background: var(--fill); } /* 내역이 없는 달 — 마감할 게 없으니 아예 못 누른다 */ .close-cell.off { background: transparent; color: var(--muted); box-shadow: none; cursor: not-allowed; opacity: .5; } /* 마감한 달 */ .close-cell.done { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 42%, transparent); } .close-cell.done .n { color: color-mix(in srgb, var(--good) 75%, var(--muted)); } .close-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--muted); } .close-legend span { display: flex; align-items: center; gap: 5px; } .close-legend .sw { width: 11px; height: 11px; border-radius: 4px; display: inline-block; } .close-legend .sw.off { background: transparent; box-shadow: inset 0 0 0 1px var(--grid); opacity: .5; } .close-legend .sw.open { background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--grid); } .close-legend .sw.done { background: color-mix(in srgb, var(--good) 40%, transparent); box-shadow: inset 0 0 0 1px var(--good); } /* (옛 마감 '목록' UI 규칙은 걷어냈다 — 지금은 위의 6열 격자(.close-cell)다. .close-year 는 이름만 같은 함정이었다: index.html 쪽은 class 가 아니라 **id**(#close-year) 라 이 규칙들이 한 번도 안 붙었다. 2026-08-31) */ @media (max-width: 640px) { .wrap { padding: 0 11px calc(88px + env(safe-area-inset-bottom, 0px)); } .card { padding: 16px 13px; border-radius: 15px; } .cal-grid, .cal-grid-head { gap: 4px; } .cal-cell { padding: 6px 3px; border-radius: 9px; } .day-item .ttl { white-space: normal; } .scroll { display: none; } .tx-list { display: flex; } .row { gap: 10px; } .filters .field:has(#f-q) { flex: 1 1 100%; } #f-q { min-width: 0 !important; width: 100%; } .status { gap: 18px; } /* 상단 막대에 스위치와 돋보기까지 들어가 자리가 빠듯하다. 이메일과 로그아웃은 접는다 — 둘 다 설정 › 계정에 그대로 있고, 두면 로그아웃 버튼이 화면 밖으로 밀려 가로 스크롤이 생긴다. */ .who { display: none; } #logout { display: none; } /* ★ 돋보기는 **접지 않는다.** 한동안 접어 뒀는데(톱니가 들어오면서 가계부 화면이 넘쳤다), 그러면 폰에서 검색에 가려면 메뉴를 열어야 했다 — 자주 쓰는 길인데 제일 멀었다. 자리를 톱니 옆으로 옮기고, 넘치는 쪽 (#sync·제목)이 줄어들게 뒀다. 360px 에서 재 보고 정했다. */ .topbar { gap: 9px; padding-left: 13px; padding-right: 13px; } .switch { gap: 6px; } .switch .lb2 { font-size: 11.5px; } /* 요약 타일은 2×2 로. 한 줄에 4개는 글씨가 너무 작았다. */ .tiles.compact { grid-template-columns: repeat(2, 1fr); gap: 8px; } .tiles.compact .tile { padding: 12px 11px; border-radius: 13px; } .tiles.compact .k { font-size: 11px; margin-bottom: 4px; } .tiles.compact .v { font-size: 19px; letter-spacing: -0.035em; } .tiles.compact .n { font-size: 10.5px; margin-top: 3px; } .idx-grid { gap: 12px 7px; } .idx-cell .nm3 { font-size: 11.5px; } .idx-cell .v3 { font-size: 17px; letter-spacing: -0.03em; } .idx-cell .c3 { font-size: 11.5px; } /* 기간 막대: 좁은 화면에선 합계를 아래에 가로로 붙여 높이를 줄인다 */ .period-bar { padding: 12px 12px; gap: 8px; } .pb-range { min-width: 0; flex: 1; } .pb-range .r { font-size: 14px; } .pb-sums { margin-left: 0; width: 100%; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 10px; border-top: 1px solid var(--grid); } .pb-sums > div { justify-content: flex-start; gap: 7px; } .pb-sums .v-out, .pb-sums .v-in { min-width: 0; text-align: left; } .pb-sums .v-gross { text-align: left; } .pb-sums .v-out { font-size: 16px; } .pb-sums .v-in { font-size: 13px; } } /* ---------- 왼쪽 메뉴 ---------- */ .hamburger { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 34px; height: 34px; padding: 0 7px; border: 0; border-radius: 9px; background: none; cursor: pointer; flex: none; } .hamburger:hover { background: var(--fill-hover); } .hamburger span { display: block; height: 2px; border-radius: 2px; background: var(--text-primary); } /* ★ 하단 탭(z 60)보다 위여야 한다. 같은 값이면 나중에 그려지는 탭이 서랍 바닥의 검색·설정을 덮어 안 눌린다 — 실제로 그렇게 가려졌었다. */ #drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 216px; z-index: 70; background: var(--surface-1); box-shadow: 2px 0 16px rgba(0,0,0,.18); transform: translateX(-100%); transition: transform .2s ease; display: flex; flex-direction: column; padding-top: max(0px, env(safe-area-inset-top)); } #drawer.open, body.pinned #drawer { transform: none; } .drawer-head { display: flex; align-items: center; gap: 8px; padding: 15px 12px 12px 16px; border-bottom: 1px solid var(--grid); } .drawer-head .t2 { font-size: 15px; font-weight: 680; letter-spacing: -0.02em; flex: 1; } .pin-btn { border: 0; background: none; cursor: pointer; padding: 5px 7px; border-radius: 8px; font-size: 14px; line-height: 1; color: var(--muted); flex: none; } .pin-btn:hover { background: var(--fill-hover); } .pin-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--series-1) 15%, transparent); color: var(--series-1); } /* 검색·설정을 서랍 바닥으로 밀어 내린다 */ #drawer nav { padding: 10px 8px calc(12px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; flex: 1; display: flex; flex-direction: column; } .mgap { flex: 1; min-height: 14px; } .mgap + .mi { border-top: 1px solid var(--grid); border-radius: 0; padding-top: 14px; } .mi { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 550; color: var(--text-secondary); } .mi:hover { background: var(--fill-hover); color: var(--text-primary); } .mi[aria-pressed="true"] { background: color-mix(in srgb, var(--series-1) 13%, transparent); color: var(--series-1); font-weight: 650; } .mi.sub { padding-left: 24px; font-size: 13.5px; } #drawer-scrim { position: fixed; inset: 0; z-index: 65; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s; } #drawer-scrim.on { opacity: 1; pointer-events: auto; } /* 넓은 화면에서 고정하면 본문을 옆으로 밀어준다 */ @media (min-width: 900px) { body.pinned .topbar, body.pinned .wrap { margin-left: 216px; } body.pinned #drawer-scrim { display: none; } } @media (max-width: 899px) { .pin-btn { display: none; } /* 좁은 화면에선 고정이 의미가 없다 */ } @media (pointer: coarse) { .seg button { padding: 11px 18px; } .cyc-nav .round { width: 46px; height: 46px; font-size: 22px; } input, select, button { padding: 11px 14px; } .cal-cell { min-height: 46px; } .cal-grid, .cal-grid-head { gap: 5px; } .big { padding: 15px 30px; } } /* 사진 격자 바닥. 스크롤이 여기 닿기 전에 다음 판을 부른다. */ .ph-tail { display: block; width: 100%; margin-top: 14px; padding: 10px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; text-align: center; min-height: 20px; } /* ---------- 사진 — 치면 제안한다 ---------- 131명을 창 열어 훑게 하지 않는다. 치는 대로 좁혀 보여준다. */ .ph-search { position: relative; margin-bottom: 10px; } .ph-search input { width: 100%; } .ph-sug { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; background: var(--surface-1); border: 1px solid var(--grid); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; max-height: 46vh; overflow-y: auto; } .ph-sug-row { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--grid); background: none; color: inherit; font: inherit; cursor: pointer; } .ph-sug-row:last-child { border-bottom: 0; } .ph-sug-row:hover { background: var(--fill); } /* 축 이름을 앞에 둔다 — '주연' 이 사람인지 출처인지 한눈에 갈린다 */ .ph-sug-k { flex: none; font-size: 11px; color: var(--muted); min-width: 30px; } .ph-sug-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ph-sug-c { flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } /* 고른 조건 */ .ph-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .ph-tag { display: inline-flex; align-items: baseline; gap: 5px; border: 0; cursor: pointer; padding: 6px 10px; border-radius: 999px; font: inherit; font-size: 13px; background: var(--series-1); color: #fff; } .ph-tag-k { font-size: 10px; opacity: .75; } .ph-tag .x { font-size: 11px; opacity: .8; } /* 아직 안 붙은 것(제안). **붙은 것과 달라 보여야 한다** — 같은 모양이면 누르기 전에는 붙었는지 아닌지 알 수가 없다. */ .ph-tag.off { background: var(--fill); color: var(--text-primary); } .ph-tag.off:hover { background: var(--fill-hover); } /* ---------- 사진 — 기간 달력 ---------- */ .ph-cal { margin-top: 14px; } .ph-cal-top { display: flex; align-items: center; justify-content: center; gap: 14px; } .ph-cal-top .y { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .ph-cal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; } .ph-mon { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border: 1px solid var(--grid); border-radius: 10px; background: none; color: inherit; font: inherit; cursor: pointer; } .ph-mon .mm { font-size: 13px; } .ph-mon .mn { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; } /* 사진이 많은 달일수록 진하다. 어디에 사진이 몰려 있는지 한눈에 보인다. */ .ph-mon.lv1 { background: color-mix(in srgb, var(--series-1) 10%, transparent); } .ph-mon.lv2 { background: color-mix(in srgb, var(--series-1) 22%, transparent); } .ph-mon.lv3 { background: color-mix(in srgb, var(--series-1) 38%, transparent); } .ph-mon.lv4 { background: color-mix(in srgb, var(--series-1) 56%, transparent); } /* 없는 달은 흐리게 — 고르기 전에 알 수 있어야 한다 */ .ph-mon[disabled] { opacity: .35; cursor: default; } .ph-mon.on { border-color: var(--series-1); box-shadow: inset 0 0 0 1px var(--series-1); } /* ---------- 사람 달기 (크게 보기 아래 이름 줄) ---------- ★ 한 장에 한 번 누르는 것이 전부라, 단추가 **엄지에 크게** 잡혀야 한다. 옆으로 밀어 보게 두고, 이름이 길어도 안 접히게 한 줄로 세운다. */ .pv-who { display: flex; gap: 7px; overflow-x: auto; padding: 8px 10px 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .pv-who::-webkit-scrollbar { display: none; } .pv-who-b { flex: none; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--grid); background: var(--surface-1); color: var(--text-primary); font: inherit; font-size: 14px; font-weight: 620; cursor: pointer; white-space: nowrap; } .pv-who-b:active { background: var(--accent); color: #fff; border-color: var(--accent); } .pv-who-b.skip { color: var(--muted); font-weight: 500; } /* ★ 돈을 적는 창은 **위에 붙인다** — 가운데 창은 폰 키보드가 올라오는 순간 통째로 튀어 올라 "토할 것 같은" 화면이 된다 (2026-09-01 신고). */ #dp-dlg { margin-top: 3vh; margin-bottom: auto; } /* ---------- 집 컴퓨터가 한 일 (설정) ---------- */ .pc-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; font-size: 13.5px; } .pc-row + .pc-row { border-top: 1px solid var(--grid); } .pc-mark { flex: none; width: 18px; text-align: center; font-weight: 700; } .pc-mark.on { color: var(--good); } .pc-mark.warn, .pc-mark.bad { color: var(--critical); } .pc-mark.off { color: var(--muted); } .pc-name { flex: 1; min-width: 0; } .pc-name .sub { font-size: 12px; } .pc-when { font-size: 12.5px; color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; max-width: 55%; } .pc-when.warn, .pc-when.bad { color: var(--critical); } .pc-when.off { color: var(--muted); } /* ---------- 홈 투자 탭 (모리 투자 브리프) ---------- */ .ib-watch { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; font-size: 13px; color: var(--text-secondary); margin: 6px 0 10px; } .ib-k.hot { color: var(--critical); font-weight: 700; } .ib-deps { margin: 6px 0 10px; } .ib-dep { padding: 7px 0; font-size: 13.5px; } .ib-dep + .ib-dep { border-top: 1px solid var(--grid); } .ib-dep b { display: inline-block; min-width: 52px; font-variant-numeric: tabular-nums; } .ib-dep b.bad { color: var(--critical); } .ib-why { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; } .ib-chip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--fill); color: var(--text-secondary); } .ib-text p { margin: 0 0 12px; line-height: 1.75; font-size: 14.5px; } .ib-quiet { padding: 10px 0; color: var(--text-secondary); font-size: 13.5px; } /* ---------- 예치 사다리 (투자 › 예치 — 2026-09-08 새 모양, 결정대장 D-25) ---------- 숫자 셋 → 시간축(예금이 막대, 오늘이 선, 다음 장은 점선) → 예금 한 건이 카드 하나 → 다음 장 → 금리. 열두 칸 달 띠(.dp-strip)는 뺐다 — 무슨 뜻인지 배워야 읽혔다. */ .dp-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; } /* 셋째(다음 만기)는 한 줄 통째 — 375px 에서 셋이 한 줄이면 돈이 잘린다 */ .dp-sum .wide { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; } .dp-sum .wide .v { margin-top: 0; } .dp-sum .wide .k2 { margin-left: auto; margin-top: 0; } .dp-sum > div { background: var(--fill); border-radius: 10px; padding: 9px 10px; min-width: 0; } .dp-sum .k { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dp-sum .v { font-size: clamp(13px, 3.9vw, 15.5px); font-weight: 660; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dp-sum .k2 { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 1px; } /* 시간축 */ .dp-tl { position: relative; padding: 20px 0 14px; margin: 0 2px 12px; } /* 아래 여백은 '오늘' 딱지 자리 */ .dp-tl .axis { position: relative; height: 1px; background: var(--grid); } .dp-tl .tick { position: absolute; top: 0; font-size: 10.5px; color: var(--muted); transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; } .dp-tl .tick.first { transform: none; } .dp-tl .tick.last { transform: translateX(-100%); } .dp-tl .tick i { display: block; width: 1px; height: 6px; background: var(--grid); margin: 2px auto 0; } .dp-tl .tick.first i { margin-left: 0; } .dp-tl .tick.last i { margin-right: 0; } .dp-tl .rows { position: relative; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .dp-tl .r { position: relative; height: 24px; } .dp-tl .bar { position: absolute; top: 2px; height: 20px; border-radius: 5px; background: var(--series-3); color: #fff; font-size: 11.5px; font-weight: 650; display: flex; align-items: center; padding: 0 8px; white-space: nowrap; overflow: hidden; cursor: pointer; min-width: 6px; box-sizing: border-box; } .dp-tl .bar.past { background: var(--muted); } .dp-tl .bar.plan { background: transparent; border: 1.5px dashed var(--series-3); color: var(--text-secondary); cursor: default; } .dp-tl .today { position: absolute; top: -6px; bottom: 0; width: 2px; background: var(--text-primary); border-radius: 1px; pointer-events: none; } .dp-tl .today::after { content: "오늘"; position: absolute; bottom: -15px; left: 3px; font-size: 10.5px; font-weight: 650; color: var(--text-primary); white-space: nowrap; } /* 아래에 — 위에 두면 첫 눈금 글자와 겹친다. nowrap 이 없으면 2px 짜리 선 안에서 '오'·'늘' 이 두 줄로 꺾인다 (375px 실측) */ /* 예치 한 건 = 카드 하나 */ .dp-cards { display: flex; flex-direction: column; gap: 10px; } .dp-card { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: baseline; padding: 12px 14px; border-radius: 12px; background: var(--fill); cursor: pointer; } .dp-card .dp-nm { font-size: 15px; font-weight: 650; min-width: 0; overflow-wrap: anywhere; } .dp-chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--fill-hover); color: var(--text-secondary); margin-left: 6px; vertical-align: middle; } .dp-card .dp-amt { font-size: 16px; font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; } .dp-card .dp-sub { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); } .dp-prog { grid-column: 1 / -1; margin-top: 5px; } .dp-prog .tr { height: 6px; border-radius: 3px; background: var(--fill-hover); overflow: hidden; } .dp-prog .tr i { display: block; height: 100%; background: var(--series-3); border-radius: 3px; } .dp-prog .lab { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; } .dp-left.bad { color: var(--critical); font-weight: 650; } /* 만기 30일 안 — 날짜가 지나면 사라지는 표시다 */ .dp-due { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-size: 13px; } .dp-due .bad { color: var(--critical); font-weight: 650; } .dp-get { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--grid); font-size: 13px; } .dp-get b { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; } .dp-get .sub { font-size: 12px; } .dp-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .dp-h b { font-size: 14.5px; font-weight: 650; } .dp-h .sub { margin-left: auto; font-size: 12px; } /* 예금자보호 — 현재 예금의 은행·예금주별 보호 한도 */ .dp-nx { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 13.5px; } .dp-nx .k { color: var(--text-secondary); } .dp-nx .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .dp-guard-card { padding: 12px 16px; } .dp-safe { margin: 0; font-size: 12px; line-height: 1.55; } .dp-safe-title { display:flex; align-items:baseline; gap:7px; margin-bottom:6px; font-size:13px; font-weight:650; } .dp-safe-title span { color:var(--muted); font-size:10.5px; font-weight:500; } .dp-safe > div:not(.dp-safe-title) { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 7px; align-items:baseline; padding:3px 0; border-top:1px solid var(--grid); } .dp-safe > div:not(.dp-safe-title) span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dp-safe > div:not(.dp-safe-title) b { font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; } .dp-safe > div:not(.dp-safe-title) small { grid-column:1 / -1; color:var(--muted); font-size:11px; } .dp-safe .warn { font-weight:650; color:var(--text-primary); } .dp-rt { font-size: 13.5px; line-height: 1.6; } .dp-rt b { font-variant-numeric: tabular-nums; } .dp-terms { display: flex; gap: 6px; flex-wrap: wrap; } .dp-terms button { font: inherit; font-size: 13px; padding: 7px 12px; cursor: pointer; border: 1px solid var(--grid); border-radius: 999px; background: var(--surface-1); color: var(--text-primary); } .dp-terms button:active { background: var(--accent); color: #fff; border-color: var(--accent); } /* 예금은 계약 한 건을 빠르게 적는 창이다. 공통 dialog 여백·입력 높이를 그대로 쓰면 모바일에서 저장 버튼이 화면 아래로 밀린다. 설명은 자리표시자로 충분하므로 행 높이와 간격을 줄여 핵심 입력을 한 화면에 모은다. */ #dp-dlg { max-width: 370px; padding: 16px; } #dp-dlg h3 { margin: 0 0 4px; font-size: 16px; } #dp-dlg #dp-dlg-hint { display: none; } #dp-dlg .field { margin-bottom: 8px !important; } #dp-dlg .row { margin-bottom: 8px !important; } #dp-dlg label { margin-bottom: 4px; font-size: 11px; line-height: 1.2; } #dp-dlg .row > .field { min-width: 0; } #dp-dlg input, #dp-dlg select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 38px; height: 38px; padding: 7px 10px; font-size: 13px; } /* 소유자 선택칸(92px)을 뺀 나머지는 상품명 칸이 전부 쓴다. `nowrap` 행에서 input의 기본 최소 폭이 다시 커져 오른쪽을 밀어내지 않게 한다. */ #dp-dlg #dp-owner { min-width: 0; } #dp-dlg .dp-terms { gap: 4px; } #dp-dlg .dp-terms button { min-height: 30px; padding: 4px 9px; font-size: 11px; } #dp-dlg #dp-maturity { margin-top: 5px !important; } #dp-dlg #dp-live, #dp-dlg #dp-interest + .sub { margin-top: 3px !important; font-size: 10px; line-height: 1.3; } #dp-dlg > .row:last-child { margin-top: 8px !important; } /* ---------- 예금 금리 화면 (서랍, 2026-09-08) ---------- */ .rt-seg { margin: 4px 0 12px; } .rt-lead { padding: 8px 10px; border-radius: 9px; background: var(--fill); font-size: 11px; margin-bottom: 6px; line-height: 1.45; } .rt-lead b { font-variant-numeric: tabular-nums; } .rt-row { display: grid; grid-template-columns: 1fr auto; gap: 0 9px; align-items: center; padding: 7px 6px; margin: 0 -6px; border-top: 1px solid var(--grid); border-radius: 10px; } .rt-row:first-child { border-top-color: transparent; } .rt-row.mine { background: color-mix(in srgb, var(--series-1) 9%, transparent); border-top-color: transparent; } .rt-row.mine + .rt-row { border-top-color: transparent; } .rt-bank { font-size: 12px; font-weight: 650; min-width: 0; } .rt-prod { grid-column: 1; font-size: 10px; color: var(--muted); overflow-wrap: anywhere; } .rt-rate { grid-row: 1 / span 2; grid-column: 2; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-align: right; } .rt-rate small { font-size: 10px; font-weight: 600; color: var(--muted); margin-left: 1px; } .rt-rate .mx { display: block; font-size: 9px; font-weight: 550; color: var(--muted); letter-spacing: 0; } .rt-foot { margin-top: 8px; line-height: 1.45; font-size:10px; } #view-rates .card{padding:12px} #view-rates h2{font-size:14px} #view-rates .rt-seg{margin:4px 0 8px} #view-rates .rt-seg button{min-height:30px;padding:5px 7px;font-size:11px} /* ---------- 터치 목표 (2026-09-07) ---------- 작은 단추의 **보이는 크기는 그대로** 두고 누르는 영역만 넓힌다 — ::after 를 밖으로 내밀면 배치가 안 바뀌고 그 자리를 눌러도 단추가 받는다. 점검에서 44px 지침에 한참 못 미치던 자리들: 달력 날짜 20px · 자산 트리 캐럿 15×18 · 고정비/그 밖 글자 단추 · 고정비 창의 ✕ 30px · 뉴스 간략/줄글 알약 20px · 홈 할 일 체크 30px. */ .cal-day, .caret, .fs-fix button, .fx-x, .nw-mode button, .hm-box, .tree-more button { position: relative; } .cal-day::after { content: ""; position: absolute; inset: -9px; } .caret::after { content: ""; position: absolute; inset: -9px -8px; } .fs-fix button::after { content: ""; position: absolute; inset: -10px -4px; } .fx-x::after, .hm-box::after { content: ""; position: absolute; inset: -7px; } .nw-mode button::after { content: ""; position: absolute; inset: -8px -2px; } .tree-more button::after { content: ""; position: absolute; inset: -6px 0; } /* 지출현황 위 줄(목록·달력·차트 세그, 필터 알약, 돋보기)은 34px 안팎이었다 — 배치를 안 바꾸는 선에서 38px 로. 줄 높이는 그대로다 (세그 알약이 이미 그만큼 차지한다). */ .ctrl-row #spend-sub button, .ctrl-row .filter-pill { min-height: 36px; } .ctrl-row .icon-btn { width: 38px; height: 38px; } /* 오늘·내일 줄, 다가오는 날 줄 — 누를 수 있는 줄인데 27px 안팎이었다 */ .hm-nrow { padding: 6px 0; } .hm-more { padding-top: 12px; padding-bottom: 4px; } /* `ghost sm` 은 여기저기 쓰는데 규칙이 없어 작게 하려던 뜻이 안 먹고 있었다 */ .ghost.sm { padding: 6px 13px; font-size: 12.5px; border-radius: 999px; } /* 원칙 팝업 */ /* 투자 실행 체크 */ /* ---------- 월급 나눔 (spend.js renderSplit · 2026-09-07) ---------- 막대 한 줄 + 줄 넷 + 판정 한 줄 + 열두 주기 띠. 색은 자료 시각화 판(--series-1·2·3)이고 '남은' 은 회색(--baseline) — 돈이 아니라 여백이다. 붉은 것은 넘친 줄과 판정뿐. */ .split .split-head { display: flex; align-items: center; gap: 8px; } .split .split-head .t { flex: 1; min-width: 0; } .split .split-head .t b { display: block; font-size: 15.5px; font-weight: 650; } .split .split-head .t .sub { font-size: 12px; } .split .split-hero { margin: 12px 0 4px; } .split .split-hero .k { font-size: 12px; color: var(--muted); font-weight: 550; } .split .split-hero .v { font-size: 30px; font-weight: 680; letter-spacing: -.03em; line-height: 1.1; } .split .split-hero .n { font-size: 12.5px; color: var(--muted); margin-top: 4px; } .split .split-bar { display: flex; gap: 2px; height: 20px; margin: 14px 0 8px; } .split .split-bar i { display: block; height: 100%; min-width: 2px; } .split .split-bar i:first-child { border-radius: 4px 0 0 4px; } .split .split-bar i:last-child { border-radius: 0 4px 4px 0; } .split .sp-spend { background: var(--series-1); } .split .sp-invest { background: var(--series-2); } .split .sp-deposit { background: var(--series-3); } .split .sp-left { background: var(--baseline); } .split .split-row { display: grid; grid-template-columns: 10px 64px 1fr auto 14px; align-items: baseline; gap: 10px; padding: 9px 0; border: 0; border-top: 1px solid var(--grid); width: 100%; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 0; } .split .split-row:first-child { border-top: 0; } .split .split-row:hover { background: var(--fill); } .split .split-row .sw { width: 10px; height: 10px; border-radius: 3px; align-self: center; display: block; } .split .split-row .nm { font-weight: 600; font-size: 13.5px; white-space: nowrap; } .split .split-row .note { color: var(--text-secondary); font-size: 12.5px; overflow-wrap: anywhere; } .split .split-row .amt { font-variant-numeric: tabular-nums; font-size: 13.5px; text-align: right; white-space: nowrap; } .split .split-row .amt.bad { color: var(--critical); font-weight: 650; } .split .split-row .cv { color: var(--muted); font-size: 12px; text-align: right; } .split .split-verdict { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--grid); font-size: 13.5px; } .split .split-verdict .mark { flex: none; width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--good); } .split .split-verdict.bad .mark { background: var(--critical); } .split .split-verdict.quiet .mark { background: var(--baseline); } .split .split-verdict .t { font-weight: 650; } .split .split-verdict .d { color: var(--text-secondary); font-size: 12.5px; margin-top: 2px; } .split .split-strip-k { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--grid); font-size: 12px; color: var(--muted); font-weight: 550; } .split .split-strip-k span:last-child { margin-left: auto; font-weight: 400; } .split .split-strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; height: 84px; margin: 8px 0 0; } /* 기둥의 누르는 영역은 칸 전체(≥ 44px 높이), 보이는 기둥은 가운데 22px */ .split .split-strip button { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 6px; } .split .split-strip button:hover { background: var(--fill); } .split .split-strip .col { display: flex; flex-direction: column-reverse; gap: 2px; width: 22px; } .split .split-strip .col i { display: block; width: 100%; } .split .split-strip .col i:last-child { border-radius: 4px 4px 0 0; } .split .split-strip button.now .col { outline: 2px solid var(--text-primary); outline-offset: 1px; border-radius: 3px; } .split .split-x { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin: 6px 0 0; font-size: 11px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; } .split .split-x b { color: var(--text-primary); } .split .split-empty { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); } /* ---------- 이달 적립 (assets.js renderAccum) ---------- */ .ac-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-bottom: 10px; border-bottom: 1px solid var(--grid); margin-bottom: 4px; } .ac-top .k { font-size: 12px; color: var(--muted); font-weight: 550; } .ac-top .v { font-size: 20px; font-weight: 660; letter-spacing: -.02em; } .ac-top .n { flex-basis: 100%; font-size: 12px; color: var(--muted); } .ac-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 9px 0; border-top: 1px solid var(--grid); } .ac-row:first-of-type { border-top: 0; } .ac-row .nm { font-weight: 620; font-size: 14.5px; } .ac-row .nm .chip { margin-left: 4px; } .ac-row .nm .chip.on { color: var(--good); font-weight: 650; } .ac-row .val { font-weight: 640; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .ac-row .sub2 { grid-column: 1 / -1; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; } .ac-foot { margin-top: 10px; } /* (예치 '다음 단' 의 옛 한 줄 꼴은 2026-09-08 에 카드(.dp-nx)로 바뀌었다 — 위 예치 사다리 묶음에) */ /* ---------- 설정 › 월급 골격 ---------- */ .sal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 14px; margin-top: 12px; } .sal-grid input { font-variant-numeric: tabular-nums; } /* ---------- 투자 › 한눈에 (assets.js renderGlance · 2026-09-07 D-23) ---------- 카드 넷: 머리 숫자 · 배분 · 이 포트폴리오는 · 모리 한마디. 색은 월급 나눔과 같은 판(--series-*), 예금·현금은 회색(--baseline) — 돈이 아니라 바탕이다. 붉은색은 브리프의 단계 바뀐 날뿐. */ .gl-hero .k { font-size: 12px; color: var(--muted); font-weight: 550; } .gl-hero .v { font-size: 32px; font-weight: 680; letter-spacing: -.03em; line-height: 1.1; margin-top: 2px; } .gl-hero .d { font-size: 13px; color: var(--text-secondary); margin-top: 6px; } /* 손익 색은 앱 관행(.up 빨강 · .down 파랑)을 그대로 쓴다 — 여기만 초록/빨강이면 보유 현황과 어긋난다 */ .gl-hero .d .up, .gl-hero .d .down { font-weight: 650; } .gl-hero .n { font-size: 12px; color: var(--muted); margin-top: 6px; } .gl-lab { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 10px; } .gl-lab span:first-child { font-weight: 550; } .gl-bar { display: flex; gap: 2px; height: 16px; margin: 6px 0 2px; } .gl-bar i { display: block; height: 100%; min-width: 2px; } .gl-bar i:first-child { border-radius: 4px 0 0 4px; } .gl-bar i:last-child { border-radius: 0 4px 4px 0; } .gl-cash { background: var(--baseline); } .gl-other { background: var(--fill-hover); } .gl-alloc { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; } .gl-alloc th { font-size: 11px; color: var(--muted); font-weight: 600; text-align: left; padding: 0 4px 4px; } .gl-alloc td { padding: 7px 4px; border-top: 1px solid var(--grid); } .gl-alloc td:first-child { font-weight: 600; } .gl-alloc .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .gl-alloc .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: 0; } .gl-alloc .chip { font-size: 11px; } .gl-alloc .chip.on { color: var(--good); font-weight: 650; } .gl-prof { display: flex; gap: 12px; align-items: center; margin: 8px 0 10px; } .gl-prof .grade { font-size: 20px; font-weight: 700; letter-spacing: -.02em; } .gl-prof .scale { display: flex; gap: 3px; flex: 1; } .gl-prof .scale i { flex: 1; height: 8px; border-radius: 3px; background: var(--fill-hover); } .gl-prof .scale i.on { background: var(--series-2); } .gl-nums { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .gl-nums > div { flex: 1 1 96px; background: var(--plane); border-radius: 10px; padding: 9px 11px; } .gl-nums .k { font-size: 11px; color: var(--muted); } .gl-nums .v { font-size: 17px; font-weight: 660; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .gl-t { font-size: 13.5px; color: var(--text-secondary); margin: 0 0 8px; line-height: 1.65; } .ib-rule { margin-top: 12px; padding: 10px 12px; background: var(--plane); border-radius: 10px; font-size: 13px; } /* 설정 › 집 사진 서버 — 상태 한 줄 밑의 안내(.note 는 제목 밑에 붙으려고 위로 8px 당겨져 있다)가 상태 글과 겹쳐 있었다 (2026-09-07 눈으로 보기). 여기서는 당기지 않는다. */ #mkp-status + .note { margin-top: 8px; } /* 거래 내역 줄(투자·현금) — 폰에서 긴 계좌 이름이 세 줄로 꺾이고 금액이 밀렸다. 수정·삭제 단추를 둘째 줄(메타 옆)로 내려 이름에 자리를 준다 (2026-09-07). */ @media (max-width: 640px) { .ivtx { grid-template-columns: auto 1fr auto; } .ivtx > span:nth-child(4) { grid-column: 3; grid-row: 2; justify-self: end; } .ivtx .meta2 { grid-column: 2 / 3; grid-row: 2; align-self: center; } } /* 홈 — 모리 한마디 한 줄 (글이 있는 날만) */ .hm-brief { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; padding: 12px 16px; } .hm-brief .k { flex: none; font-size: 12px; color: var(--muted); font-weight: 600; } .hm-brief .t { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hm-brief .cv { flex: none; color: var(--muted); font-size: 13px; } /* 정보 > 경조사: 이름 검색을 우선하고 각 원본 기록을 한 줄로 보인다. */ .ceremony-actions{display:flex;gap:6px;margin:0 0 8px}.ceremony-actions button{min-height:30px;padding:5px 9px;font-size:11px} .ceremony-list{overflow:hidden;border:1px solid var(--grid);border-radius:12px;background:var(--surface-1)} .ceremony-column-head{display:grid;grid-template-columns:minmax(58px,1fr) minmax(70px,1.15fr) auto auto;gap:7px;padding:5px 10px;border-bottom:1px solid var(--grid);color:var(--text-secondary);font-size:10px} .ceremony-column-head span:last-child{text-align:right} .ceremony-row{display:grid;grid-template-columns:minmax(58px,1fr) minmax(70px,1.15fr) auto auto;gap:2px 7px;align-items:center;width:100%;min-height:48px;padding:8px 12px;border:0;border-bottom:1px solid var(--grid);background:transparent;color:var(--text-primary);text-align:left;font:inherit;cursor:pointer} .ceremony-row:last-child{border-bottom:0} .ceremony-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .ceremony-person{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ceremony-kind{font-size:11px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ceremony-manager{font-size:10px;color:var(--text-secondary);white-space:nowrap} .ceremony-amount{font-size:13px;font-weight:700;white-space:nowrap;text-align:right} .ceremony-memo{grid-column:1/-1;font-size:11px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ceremony-row{min-height:38px;padding:5px 10px} .ceremony-person,.ceremony-amount{font-size:11px} .ceremony-kind,.ceremony-memo{font-size:10px} #ceremony-list .ceremony-list{max-height:68vh;overflow:auto} .ceremony-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .ceremony-form-grid .field,.ceremony-form-grid input{min-width:0;width:100%} @media(max-width:350px){.ceremony-row,.ceremony-column-head{grid-template-columns:minmax(52px,1fr) minmax(56px,1fr) auto auto;gap:2px 4px;padding:8px}.ceremony-kind{font-size:10px}.ceremony-amount{font-size:12px}} @media(max-width:350px){.ceremony-head{flex-wrap:wrap}.ceremony-head h2{flex-basis:100%}} @media(max-width:350px){.ceremony-row{padding:5px 8px}.ceremony-amount{font-size:11px}} /* 정보 겉면: 복사를 별도 아랫줄로 두지 않고 카드 한 행에 넣는다. */ #info-pane-info .info-tools{padding:10px 12px;margin-bottom:10px} #info-pane-info .info-tools .row{display:flex;flex-wrap:nowrap;gap:7px;min-width:0} #info-kind-seg{display:flex;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none} #info-kind-seg::-webkit-scrollbar{display:none} #info-kind-seg button{flex:0 0 auto;padding:6px 8px;font-size:10px;min-height:30px} #info-add{flex:none;white-space:nowrap;padding:6px 9px;font-size:10px;min-height:30px} #info-list .info-grid{grid-template-columns:minmax(0,1fr);gap:6px} @media(min-width:620px){#info-list .info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:980px){#info-list .info-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} #info-list .info-card{display:flex;flex-direction:row;align-items:stretch;min-width:0;min-height:54px;border:1px solid var(--grid);border-radius:10px;box-shadow:none} #info-list .info-card .ic-main{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;column-gap:6px;min-width:0;padding:7px 10px} #info-list .info-card .ic-kind{grid-column:1/-1;margin:0 0 3px;font-size:9px;line-height:1.2} #info-list .info-card .ic-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;font-size:12px;line-height:1.3} #info-list .info-card .ic-tail{align-self:center;margin:0;font-size:10px;letter-spacing:0} #info-list .info-card .ic-copy{flex:0 0 44px;width:44px;border-top:0;border-left:1px solid var(--grid);padding:0 4px;font-size:10px} /* 잔여금 배분 확인 */ #mt-remaining-open{font:inherit;font-size:12px;padding:6px 10px;margin:0 0 8px} #mt-remaining-dialog{width:min(420px,calc(100vw - 24px));box-sizing:border-box;max-height:85dvh;overflow:auto;padding:14px;border:1px solid var(--grid);border-radius:14px} #mt-remaining-dialog,#mt-remaining-dialog button,#mt-remaining-dialog select{font-family:inherit;font-size:12px;line-height:1.5} #mt-remaining-dialog h3{font-size:14px;margin:8px 0} #mt-remaining-dialog header{display:flex;justify-content:flex-end} #mt-remaining-content label{display:flex;align-items:center;gap:10px;margin:8px 0} #mt-remaining-content select{flex:1;min-width:0;width:100%;padding:6px} #mt-rem-result{margin-top:10px;overflow-wrap:anywhere} #as-chart .as-flow-delta b{font-size:16px}