/* ── 네오브루탈리즘 토큰 ─────────────────────────────────────────────── * 스타일을 정의하는 숫자는 셋뿐이다: 테두리 두께 · 그림자 거리 · 모서리. * * ⚠️ 그림자 색을 검정으로 두면 안 된다. 어두운 배경에서 대비가 1.14:1 이라 * 물리적으로 안 보인다. 그래서 --line 에서 파생시켜 테마를 따라가게 한다. * ⚠️ Gumroad 는 테두리가 1px 이지만 그건 흰 배경이라 가능한 값이다. * 어두운 배경에서 1px 은 사라지므로 2px 이 최소선. * 근거: docs/design-neobrutalism.md */ :root{ --nb-bw:2px; /* 테두리 두께 */ --nb-off:4px; /* 그림자 거리 = 눌림 이동거리 */ --nb-r:6px; /* 모서리 (Gumroad 4px, 한글 UI 라 살짝 크게) */ --nb-shadow:var(--nb-off) var(--nb-off) 0 0 var(--line); --nb-shadow-sm:calc(var(--nb-off) / 2) calc(var(--nb-off) / 2) 0 0 var(--line); --bg:#12141a; --bg2:#171a22; --card:#1b1e26; --card2:#232733; --line:#7b8496; /* 4.43:1 — 예전 #2b3956 은 1.62:1 로 SC 1.4.11 미달이었다 */ --text:#eef1f6; /* 14.72:1 */ --muted:#9aa5b8; /* 6.70:1 */ --accent:#46d98a; --accent2:#2fbf72; --low:#46d98a; --mid:#f2c14e; --high:#ff7a6b; --danger:#ff7a6b; --ink:#0d0f14; /* 액센트 '면' 위에 올리는 글자색 — 테마마다 뒤집힌다 */ --barbg:rgba(18,20,26,.94); /* ⚠️ 점수 색(barColor)은 JS 가 만드는 **테마 무관 고정 hex** 다 (#22c55e·#eab308·#f97316·#ef4444). 그 위에 올리는 글자색까지 테마를 따라 뒤집으면(--ink) 라이트에서 흰 글자가 되어 1.92:1 까지 떨어진다. 고정 배경에는 고정 전경을 쓴다 — 이 값은 .light 에서 재정의하지 않는다. 네 색 전부에서 5.09~10.0 을 준다. */ --score-ink:#0d0f14; /* 네이티브 컨트롤(날짜 입력의 달력 팝업·스크롤바)은 CSS 변수를 안 따른다. color-scheme 을 안 주면 다크 화면에 흰 달력이 튀어나온다. */ color-scheme:dark; } /* 라이트 토큰은 여기 한 곳에만 둔다. "시스템 설정 따르기"는 CSS 미디어쿼리로 하지 않고 인라인 스크립트가 .light 를 미리 붙여서 해결한다 — 미디어쿼리로 하면 이 블록을 두 벌 유지해야 하고 (한 벌은 @media, 한 벌은 수동 선택용) 두 벌은 반드시 어긋난다. */ :root.light{ --bg:#f5f4ef; --bg2:#ffffff; --card:#ffffff; --card2:#eeece4; --line:#12141a; /* 라이트에서는 검정 테두리가 정석 */ --text:#12141a; --muted:#55585f; --accent:#0b7a43; /* 5.41:1 — 예전 #16a34a 는 3.51 로 AA 미달 */ --accent2:#0b7a43; --low:#0b7a43; --mid:#8a6100; --high:#c4321f; --danger:#c4321f; --ink:#ffffff; --barbg:rgba(245,244,239,.94); color-scheme:light; } /* 좁은 화면에서 그림자가 화면 끝에 잘리지 않도록 */ @media (max-width:420px){ :root{ --nb-off:3px; } } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;} html,body{margin:0;height:100%;} body{background:var(--bg);color:var(--text); font-family:-apple-system,"Malgun Gothic","Apple SD Gothic Neo","Segoe UI",system-ui,sans-serif; line-height:1.5;overscroll-behavior:none;} button{font-family:inherit;cursor:pointer;} .hidden{display:none !important;} .app{max-width:480px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;} /* 로그인 */ #auth{max-width:420px;margin:0 auto;padding:48px 22px;min-height:100%;display:flex;flex-direction:column;justify-content:center;} #auth .logo{font-size:40px;text-align:center;} #auth h1{font-size:22px;text-align:center;margin:8px 0 4px;} #auth .sub{color:var(--muted);text-align:center;font-size:13px;margin-bottom:26px;} .authtabs{display:flex;background:var(--card);border-radius:calc(var(--nb-r) * 2);padding:4px;margin-bottom:16px;} .authtabs button{flex:1;border:none;background:transparent;color:var(--muted);padding:10px;border-radius:var(--nb-r);font-weight:700;font-size:14px;} .authtabs button.on{background:var(--accent);color:var(--ink);} .field{margin-bottom:12px;} .field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;} .field input{width:100%;background:var(--card2);border:var(--nb-bw) solid var(--line);border-radius:var(--nb-r);padding:13px 14px;color:var(--text);font-size:15px;} .field input:focus{outline:none;border-color:var(--accent);} .btn-primary{width:100%;background:var(--accent);color:var(--ink);border:none;border-radius:calc(var(--nb-r) * 2);padding:15px;font-size:16px;font-weight:800;margin-top:6px;} .btn-primary:active{transform:scale(.99);} .auth-err{color:var(--danger);font-size:13px;min-height:18px;margin:8px 2px;text-align:center;} .auth-err.ok{color:var(--accent);} .auth-alt{text-align:center;margin-top:18px;color:var(--muted);font-size:12.5px;line-height:1.5;} /* 상단바 */ .topbar{position:sticky;top:0;z-index:20;background:var(--barbg);backdrop-filter:blur(8px); display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--line);} .topbar .title{font-size:18px;font-weight:800;} .topbar .user{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);} .topbar .user .who{background:var(--card2);border:var(--nb-bw) solid var(--line);border-radius:999px;padding:5px 10px;color:var(--text);} .topbar .user button{background:none;border:none;color:var(--muted);font-size:12px;} .content{flex:1;padding:14px 14px 96px;} .card{background:var(--card);border:var(--nb-bw) solid var(--line);border-radius:calc(var(--nb-r) * 2);padding:15px;margin-bottom:14px;} .card h2{font-size:15px;margin:0 0 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;} .card h2 .cnt{font-size:12px;color:var(--muted);font-weight:500;} .hint{color:var(--muted);font-size:12px;margin:-2px 0 12px;} /* 날짜 + 모드 */ .bar-row{display:flex;gap:10px;align-items:center;margin-bottom:14px;} .datepill{flex:1;background:var(--card);border:var(--nb-bw) solid var(--line);border-radius:calc(var(--nb-r) * 2);padding:11px 13px;color:var(--text);font-size:14px;} .datepill:focus{outline:none;border-color:var(--accent);} /* 세그먼트 / 칩 */ .seg{display:inline-flex;flex-wrap:wrap;gap:6px;} .seg button{background:var(--card2);border:var(--nb-bw) solid var(--line);color:var(--muted);border-radius:999px;height:36px;padding:0 15px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;} .seg button.on{background:var(--accent2);border-color:var(--accent2);color:var(--ink);} .seg.sm button{height:32px;padding:0 13px;font-size:12.5px;} .subtle{font-size:11.5px;color:var(--muted);margin:2px 0 8px;} /* 입력 아이템 */ .item{background:var(--card2);border:var(--nb-bw) solid var(--line);border-radius:calc(var(--nb-r) * 2);padding:14px 14px;margin-bottom:11px;} .item .ih{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;} .item .ih b{font-size:14px;} .item .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;row-gap:8px;} .x{background:transparent;border:none;color:var(--danger);font-size:20px;line-height:1;padding:0 2px;} .lbl{font-size:12px;color:var(--muted);width:100%;margin:0 0 8px;font-weight:600;} /* 스텝퍼 */ .stepper{display:inline-flex;align-items:center;background:var(--card);border:var(--nb-bw) solid var(--line);border-radius:var(--nb-r);overflow:hidden;} .stepper button{width:40px;height:40px;background:transparent;border:none;color:var(--accent2);font-size:20px;font-weight:700;} .stepper input{width:66px;height:40px;text-align:center;background:transparent;border:none;color:var(--text);font-size:16px;font-weight:700;} .stepper input:focus{outline:none;} .stepper .u{color:var(--muted);font-size:12px;padding:0 10px 0 2px;} /* 추가 버튼 */ .addbtn{width:100%;background:transparent;border:1.5px dashed var(--line);color:var(--accent);border-radius:calc(var(--nb-r) * 2);padding:13px;font-size:14px;font-weight:700;margin-top:2px;} .addbtn:active{background:var(--card2);} .addbtn.mini{padding:11px;font-size:13px;} .sheet .fpill{width:100%;} .sheet .pills{gap:8px;} /* 음식 pill */ .pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px;} .fpill{display:flex;align-items:center;gap:7px;background:var(--card2);border:var(--nb-bw) solid var(--line);border-left-width:4px;border-radius:var(--nb-r);padding:0 12px;min-height:40px;} .fpill .nm{font-size:13.5px;font-weight:600;} .fpill .mt{font-size:10.5px;color:var(--muted);} .fpill .x{font-size:18px;} .empty{color:var(--muted);font-size:13px;padding:6px 2px;} /* 계산 버튼 */ .calc{width:100%;background:var(--accent);color:var(--ink);border:none;border-radius:calc(var(--nb-r) * 2);padding:16px;font-size:17px;font-weight:800;margin:2px 0 8px;box-shadow:var(--nb-shadow);} .calc:active{transform:scale(.99);} /* 결과 */ .hero{text-align:center;padding:8px 0 6px;} .hero .num{font-size:62px;font-weight:900;line-height:1;} .hero .num small{font-size:20px;color:var(--muted);font-weight:600;} .grade{display:inline-block;margin-top:8px;padding:5px 16px;border-radius:999px;font-weight:800;font-size:14px;color:var(--ink);} .summary{font-size:13px;color:var(--muted);margin-top:8px;} .summary b{color:var(--text);} .cat{margin:14px 0;} .cat-h{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px;} .bar{height:10px;background:var(--card2);border-radius:999px;overflow:hidden;} .bar>span{display:block;height:100%;border-radius:999px;transition:width .6s cubic-bezier(.2,.8,.2,1);} .facts{list-style:none;padding:0;margin:9px 0 0;} .facts li{font-size:12.5px;padding:7px 11px;border-radius:var(--nb-r);margin-bottom:6px;background:var(--card2);border-left:3px solid var(--line);} .facts li.plus{border-left-color:var(--low);} .facts li.minus{border-left-color:var(--high);} .facts li.info{border-left-color:var(--mid);} /* 히스토리 */ .hrow{display:flex;align-items:center;gap:10px;font-size:13px;padding:8px 0;border-bottom:1px solid var(--line);} .hrow:last-child{border-bottom:none;} .hrow .d{width:88px;color:var(--muted);} .hrow .hb{flex:1;height:8px;background:var(--card2);border-radius:999px;overflow:hidden;} .hrow .hb>span{display:block;height:100%;} .hrow .t{width:32px;text-align:right;font-weight:800;} /* 가이드/정보 */ .gi-block{margin-bottom:16px;} .gi-h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;margin-bottom:3px;} .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;} .gi-tip{font-size:12px;color:var(--muted);margin-bottom:9px;} .food{padding:9px 0;border-bottom:1px solid var(--line);display:flex;gap:9px;} .food:last-child{border-bottom:none;} .food .fn{font-size:14px;font-weight:600;} .food .fg{font-size:11px;color:var(--muted);} .food .fe{font-size:12px;color:var(--muted);margin-top:2px;} .search{width:100%;background:var(--card2);border:var(--nb-bw) solid var(--line);border-radius:calc(var(--nb-r) * 2);padding:12px 14px;color:var(--text);font-size:15px;margin-bottom:12px;} .search:focus{outline:none;border-color:var(--accent2);} .answer{font-size:13.5px;padding:12px 13px;background:var(--card2);border-radius:var(--nb-r);border-left:3px solid var(--line);} .info-item{background:var(--card2);border-radius:calc(var(--nb-r) * 2);border-left:3px solid var(--accent2);padding:11px 13px;margin-bottom:9px;} .info-item .q{font-weight:800;font-size:14px;margin-bottom:4px;} .info-item .a{font-size:13px;} .disc{font-size:11.5px;color:var(--muted);background:var(--card2);border-radius:var(--nb-r);padding:11px 12px;margin-top:12px;border-left:3px solid var(--mid);} .topright{display:flex;align-items:center;gap:8px;} .themebtn{background:var(--card2);border:var(--nb-bw) solid var(--line);color:var(--text);border-radius:999px;width:34px;height:34px;font-size:15px;line-height:1;} /* 캘린더 */ .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;} .cal-head b{font-size:16px;} .cal-nav{background:var(--card2);border:var(--nb-bw) solid var(--line);color:var(--text);width:38px;height:38px;border-radius:var(--nb-r);font-size:18px;} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;} .cal-wd{text-align:center;font-size:11px;color:var(--muted);padding-bottom:2px;} .cal-cell{aspect-ratio:1/1;border:var(--nb-bw) solid var(--line);border-radius:var(--nb-r);background:var(--card2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;position:relative;} .cal-cell.empty{background:transparent;border:none;cursor:default;} .cal-cell.today{border-color:var(--accent);} .cal-cell.sel{outline:2px solid var(--accent);} .cal-cell .dnum{font-size:12px;font-weight:600;color:var(--text);} .cal-cell .cdot{min-width:20px;height:20px;padding:0 3px;border-radius:999px;font-size:10px;color:#04240f;display:flex;align-items:center;justify-content:center;font-weight:800;} .wd-sun{color:#f87171;} .wd-sat{color:#60a5fa;} /* 하단 탭바 */ .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--barbg);backdrop-filter:blur(10px); border-top:1px solid var(--line);display:flex;max-width:480px;margin:0 auto;} .tabbar button{flex:1;background:none;border:none;color:var(--muted);padding:9px 0 12px;font-size:11px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:3px;} .tabbar button .ic{font-size:20px;} .tabbar button.on{color:var(--accent);} /* 바텀시트 */ .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40;display:flex;align-items:flex-end;justify-content:center;} .sheet{width:100%;max-width:480px;background:var(--bg2);border-radius:calc(var(--nb-r) * 2) 20px 0 0;border-top:1px solid var(--line); max-height:82vh;display:flex;flex-direction:column;animation:up .22s ease;} @keyframes up{from{transform:translateY(100%);}to{transform:translateY(0);}} .sheet .sh{display:flex;align-items:center;justify-content:space-between;padding:15px 16px 10px;} .sheet .sh b{font-size:16px;} .sheet .sh button{background:none;border:none;color:var(--muted);font-size:14px;} .sheet .sbody{overflow-y:auto;padding:0 16px 22px;} /* ⚠️ pointer-events:none 이 없으면 안 된다. opacity:0 은 보이지만 않을 뿐 히트 테스트에는 그대로 잡혀서, bottom:80px 에 깔린 이 요소가 그 자리의 버튼 클릭을 통째로 가로챈다. 저장 바를 탭바 위로 올렸더니 정확히 이 자리라 저장이 다시 안 눌렸다. 토스트는 알림이지 조작 요소가 아니므로 클릭은 항상 통과시킨다. */ .toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);background:var(--card2);border:var(--nb-bw) solid var(--line); color:var(--text);padding:10px 16px;border-radius:999px;font-size:13px;z-index:60;opacity:0;transition:opacity .2s; pointer-events:none;} .toast.show{opacity:1;} /* 버전 배지 */ .ver{font-size:10.5px;color:var(--muted);font-weight:700;background:var(--card2);border:var(--nb-bw) solid var(--line); border-radius:999px;padding:2px 8px;margin-left:6px;cursor:pointer;vertical-align:2px;} /* 최근 기록 차트 */ .chart-wrap{width:100%;margin-top:10px;} .chart-wrap svg{width:100%;height:auto;display:block;} /* 업데이트 히스토리 */ .cl-block{border-left:2px solid var(--line);padding:0 0 4px 14px;margin:0 0 14px 4px;position:relative;} .cl-block::before{content:"";position:absolute;left:-6px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--accent);} .cl-v{font-weight:800;font-size:14px;} .cl-d{font-size:11.5px;color:var(--muted);margin-left:6px;} .cl-block ul{margin:6px 0 0;padding-left:18px;} .cl-block li{font-size:12.5px;margin-bottom:3px;} /* 검진·진료 기록 */ .hrec{background:var(--card2);border:var(--nb-bw) solid var(--line);border-radius:calc(var(--nb-r) * 2);padding:13px;margin-bottom:10px;} .hrec .hh{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;} .hrec .hh b{font-size:14px;} .hrec .htype{font-size:11px;color:var(--muted);background:var(--card);border:var(--nb-bw) solid var(--line);border-radius:999px;padding:2px 8px;margin-left:6px;font-weight:600;} .hrec .sum{font-size:12.5px;color:var(--muted);margin:4px 0 9px;} .hitem{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:7px 10px;border-radius:var(--nb-r);background:var(--card);margin-bottom:5px;border-left:3px solid var(--line);} .hitem .hn{flex:1;font-weight:600;} .hitem .hv{font-weight:700;} .hitem .hu{color:var(--muted);font-size:11px;} .hitem .hs{font-size:11px;font-weight:800;border-radius:999px;padding:2px 8px;color:#04240f;} .hitem .hd{font-size:11px;color:var(--muted);} .hitem .href{font-size:10.5px;color:var(--muted);} /* AI 사용 불가 안내 */ .aibanner{display:flex;align-items:flex-start;gap:10px;background:var(--card2); border:1px solid var(--mid);border-left-width:4px;border-radius:calc(var(--nb-r) * 2); padding:12px 13px;margin-bottom:14px;font-size:12.5px;line-height:1.55;} .aibanner .ic{font-size:18px;flex:0 0 auto;line-height:1.2;} .aibanner b{display:block;font-size:13.5px;margin-bottom:3px;} .aibanner .sub{color:var(--muted);} .aibanner button{background:none;border:none;color:var(--muted);font-size:11.5px; text-decoration:underline;padding:0;margin-top:6px;} /* 계정 관리 (관리자) */ .urow{background:var(--card2);border:var(--nb-bw) solid var(--line);border-radius:calc(var(--nb-r) * 2);padding:12px 13px;margin-bottom:9px;} .urow .uh{display:flex;align-items:center;gap:7px;margin-bottom:3px;flex-wrap:wrap;} .urow .un{font-size:14.5px;font-weight:800;} .ubadge{font-size:10px;font-weight:800;border-radius:999px;padding:2px 8px;} .urow .um{font-size:11.5px;color:var(--muted);} .uacts{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;} .uacts button{flex:1;min-width:76px;background:var(--card);border:var(--nb-bw) solid var(--line);color:var(--text); border-radius:var(--nb-r);padding:8px 10px;font-size:12px;font-weight:700;} .uacts button.ok{background:var(--accent2);border-color:var(--accent2);color:var(--ink);} .uacts button.no{color:var(--danger);border-color:var(--danger);} .uacts button:disabled{opacity:.45;} .pendbadge{background:var(--mid);color:var(--ink);font-size:10.5px;font-weight:800; border-radius:999px;padding:1px 7px;margin-left:5px;} .pwbox{background:var(--card2);border:1px dashed var(--accent);border-radius:var(--nb-r); padding:12px 13px;margin-top:10px;font-size:13px;} .pwbox code{display:block;font-size:16px;font-weight:800;color:var(--accent); margin-top:6px;word-break:break-all;letter-spacing:.5px;} /* 양 표시 · 영양 분석 */ .amtchip{font-size:10.5px;font-weight:700;color:var(--accent2);background:var(--card); border:var(--nb-bw) solid var(--line);border-radius:999px;padding:1px 7px;margin-left:4px;white-space:nowrap;} .nrow{display:flex;align-items:center;justify-content:space-between;font-size:13px; padding:8px 10px;border-radius:var(--nb-r);background:var(--card2);margin-bottom:5px;} .nrow .nn{color:var(--muted);} .nrow .nv{font-weight:800;} .nrow .nu{font-size:10.5px;color:var(--muted);font-weight:600;margin-left:2px;} .kcalhero{text-align:center;padding:4px 0 12px;} .kcalhero .kv{font-size:40px;font-weight:900;line-height:1.05;} .kcalhero .kv small{font-size:15px;color:var(--muted);font-weight:700;margin-left:3px;} .kcalhero .kt{font-size:12px;color:var(--muted);margin-top:3px;} .macrobar{display:flex;height:14px;border-radius:999px;overflow:hidden;margin:12px 0 8px;background:var(--card2);} .macrobar>span{display:block;height:100%;} .macrolegend{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;font-size:11.5px;color:var(--muted);} .macrolegend b{color:var(--text);} .macrolegend i{display:inline-block;width:9px;height:9px;border-radius:var(--nb-r);margin-right:4px;font-style:normal;} .ntarget{margin-bottom:9px;} .ntarget .nh{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:4px;} .ntarget .nh b{font-weight:700;} .ntarget .nh .nt2{color:var(--muted);font-size:11.5px;} .ntbar{height:7px;background:var(--card2);border-radius:999px;overflow:hidden;} .ntbar>span{display:block;height:100%;border-radius:999px;transition:width .5s;} .mealrow{display:flex;align-items:center;gap:9px;font-size:12.5px;padding:8px 0;border-bottom:1px solid var(--line);} .mealrow:last-child{border-bottom:none;} .mealrow .mm{width:44px;font-weight:700;flex:0 0 auto;} .mealrow .mi{flex:1;color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .mealrow .mk{font-weight:800;flex:0 0 auto;} .nmini{display:flex;align-items:center;gap:8px;background:var(--card2);border:var(--nb-bw) solid var(--line); border-radius:var(--nb-r);padding:9px 12px;margin:8px 0 2px;font-size:12.5px;} .nmini .nk{font-weight:800;} .nmini .nm2{color:var(--muted);font-size:11.5px;margin-left:auto;text-align:right;} /* 분석 진행 오버레이 — 수십 초 걸리므로 토스트로는 부족하다 */ .pbackdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px); z-index:70;display:flex;align-items:center;justify-content:center;padding:24px;animation:fadein .18s ease;} @keyframes fadein{from{opacity:0}to{opacity:1}} .pcard{background:var(--card);border:var(--nb-bw) solid var(--line);border-radius:calc(var(--nb-r) * 2); padding:28px 22px 22px;width:100%;max-width:330px;text-align:center;} .spinner{width:46px;height:46px;margin:0 auto 18px;border:3px solid var(--line); border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;} @keyframes spin{to{transform:rotate(360deg)}} .pcard .ptitle{font-size:17px;font-weight:800;margin-bottom:7px;} .pcard .psub{font-size:13px;color:var(--muted);line-height:1.55;min-height:40px;} .pbar{height:5px;background:var(--card2);border-radius:999px;overflow:hidden;margin-top:16px;} .pbar>span{display:block;height:100%;background:var(--accent); width:0;border-radius:999px;transition:width .5s ease;} .pcard .ptime{font-size:11.5px;color:var(--muted);margin-top:9px;} .pcard .pcancel{margin-top:14px;background:transparent;border:1px solid var(--line); color:var(--muted);border-radius:10px;padding:9px 16px;font-size:12.5px;font-weight:600;} .pcard .pcancel:disabled{opacity:.5;} .pcard .pthumb{width:74px;height:74px;object-fit:cover;border-radius:calc(var(--nb-r) * 2); border:var(--nb-bw) solid var(--line);margin:0 auto 14px;display:block;} /* 사진 소스 선택 */ .srcpick{display:flex;flex-direction:column;gap:10px;} .srcbtn{display:flex;align-items:center;gap:13px;width:100%;background:var(--card2); border:var(--nb-bw) solid var(--line);border-radius:calc(var(--nb-r) * 2);padding:15px 16px;color:var(--text);text-align:left;} .srcbtn:active{border-color:var(--accent);} .srcbtn .ic{font-size:26px;flex:0 0 auto;} .srcbtn .tx b{display:block;font-size:14.5px;font-weight:700;} .srcbtn .tx span{font-size:11.5px;color:var(--muted);} /* 결과 평가 (모델 선택 학습용) */ .rate{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px; padding-top:11px;border-top:1px solid var(--line);} .rate span{font-size:12px;color:var(--muted);flex:1 0 100%;} .rate button{background:var(--card2);border:var(--nb-bw) solid var(--line);color:var(--text); border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;} .rate button.picked{background:var(--accent2);border-color:var(--accent2);color:var(--ink);} .rate button:disabled{opacity:.55;} /* 캘린더 기록 유무 — 기본 셀 배경이 card2 라서, 없는 날을 비워 보이게 해 구분한다 */ .cal-cell.none{background:transparent;border-style:dashed;} .cal-cell.none .dnum{opacity:.45;} .cal-cell.future{background:transparent;border-color:transparent;cursor:default;} .cal-cell.future .dnum{opacity:.25;} .cal-cell .colds{position:absolute;bottom:3px;right:5px;font-size:15px;color:var(--muted);line-height:1;} /* 날짜 상태 · 끼니 칩 */ .daystat{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:10px 0 8px;} .daybadge{font-size:12px;font-weight:700;border-radius:999px;padding:4px 11px;} .daybadge.on{background:var(--low);color:var(--ink);} .daybadge.old{background:var(--card2);color:var(--muted);border:var(--nb-bw) solid var(--line);} .daybadge.draft{background:var(--mid);color:var(--ink);} .daybadge.off{background:var(--card2);color:var(--muted);border:var(--nb-bw) dashed var(--line);} .daystat .dsub{font-size:11.5px;color:var(--muted);} .mealchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px;} .mealchip{font-size:11px;color:var(--muted);background:var(--card2);border:var(--nb-bw) solid var(--line); border-radius:999px;padding:3px 9px;} .mealchip.on{color:var(--text);border-color:var(--accent2);} .mealchip b{color:var(--accent2);font-size:10.5px;margin-left:2px;} /* AI 연결 상태 */ .aist{background:var(--card2);border:var(--nb-bw) solid var(--line);border-radius:calc(var(--nb-r) * 2);padding:12px;margin-bottom:10px;} .aist .ah{display:flex;align-items:center;gap:8px;margin-bottom:6px;} .aist .ah b{font-size:14px;flex:1;} .aist .dot2{width:9px;height:9px;border-radius:50%;flex:0 0 auto;} .aist .why{font-size:11.5px;color:var(--muted);line-height:1.5;word-break:break-all;} .aist .use{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);} .aist .use div{font-size:11.5px;color:var(--muted);} .aist .use b{color:var(--text);font-size:13px;display:block;} .stbadge{font-size:10.5px;font-weight:800;border-radius:999px;padding:2px 8px;} /* 모델 성적표 */ .mtask{background:var(--card2);border:var(--nb-bw) solid var(--line);border-radius:calc(var(--nb-r) * 2);padding:12px;margin-bottom:10px;} .mtask .mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;} .mtask .mh b{font-size:14px;} .mmode{font-size:10.5px;font-weight:800;border-radius:999px;padding:2px 8px;} .mwhy{font-size:11.5px;color:var(--muted);margin:4px 0 8px;line-height:1.5;} .mrow{display:flex;align-items:center;gap:8px;font-size:12px;padding:6px 9px;border-radius:var(--nb-r); background:var(--card);margin-bottom:4px;} .mrow.top{border-left:3px solid var(--accent2);} .mrow .mn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .mrow .ms{font-weight:800;} .mrow .mmeta{color:var(--muted);font-size:10.5px;} /* 오늘 한 일 → 목표 영향 */ .tdrow{background:var(--card2);border-radius:var(--nb-r);padding:10px 12px;margin-bottom:7px; border-left:3px solid var(--line);} .tdrow.plus{border-left-color:var(--low);} .tdrow.minus{border-left-color:var(--high);} .tdrow.info{border-left-color:var(--mid);} .tdrow .tdh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;} .tdrow .tdh b{font-size:13.5px;} .tdrow .tds{font-size:11.5px;color:var(--muted);} .tdrow .tdw{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5;} /* 판단 기준·근거 */ .evrow{background:var(--card2);border:1px solid var(--line);border-radius:13px; padding:13px 14px;margin-bottom:10px;} .evrow .evh{display:flex;align-items:center;justify-content:space-between;gap:8px; flex-wrap:wrap;margin-bottom:7px;} .evrow .evh b{font-size:14.5px;} .evrow .evapp{font-size:13px;line-height:1.55;margin-bottom:8px;} .evrow .evb,.evrow .evc{font-size:12px;color:var(--muted);line-height:1.6; padding:8px 10px;border-radius:9px;background:var(--card);margin-top:5px;} .evrow .evb b,.evrow .evc b{color:var(--text);margin-right:4px;} .evrow .evc{border-left:3px solid var(--mid);} /* 회사 식당 */ .caf-meal{font-weight:800;font-size:14px;margin:14px 0 8px;display:flex;align-items:center;gap:7px;} .caf-rec-btn{width:100%;background:var(--accent2);border:none;color:var(--ink);border-radius:var(--nb-r);padding:12px;font-size:13.5px;font-weight:700;margin:8px 0 4px;} .caf-badge{font-size:10px;font-weight:800;border-radius:999px;padding:2px 7px;margin-left:auto;} /* ══ 네오브루탈리즘 레이어 ══════════════════════════════════════════════ * 앞의 정의를 덮어쓰는 마감 레이어. 토큰만 바꾸면 전체가 따라온다. * * 원칙 — 카드마다 그림자를 달면 화면이 시끄러워진다. Gumroad 도 카드에는 * 그림자를 쓰지 않는다. 그림자는 **누를 수 있는 것**과 **가장 중요한 정보**에만. */ /* ── 상호작용 요소: 그림자 + 눌림 ── * ⚠️ :hover 가 아니라 :active 다. 터치에서는 hover 가 안 풀려서 * 탭한 버튼이 눌린 채로 남는다(neobrutalism.dev 가 가진 실제 버그). * ⚠️ 이동거리 = 그림자 거리. 그래야 "자기가 비운 자리에 그림자"가 된다. */ .btn-primary, .calc, .addbtn, .caf-rec-btn{ box-shadow:var(--nb-shadow); transition:transform .12s, box-shadow .12s; } .btn-primary:active, .calc:active, .addbtn:active, .caf-rec-btn:active{ transform:translate(var(--nb-off), var(--nb-off)); box-shadow:none; } /* 기존 scale 눌림은 하드섀도우와 겹쳐 어색하다 */ .btn-primary:active, .calc:active{ transform:translate(var(--nb-off), var(--nb-off)); } .seg button, .addbtn{ transition:transform .12s, box-shadow .12s; } .seg button.on{ box-shadow:var(--nb-shadow-sm); } .seg button:active{ transform:translate(2px,2px); box-shadow:none; } /* ── 가장 중요한 정보에만 그림자로 무게를 준다 ── * 이 앱의 목적은 "목표를 향해 잘 하고 있는지" 알려주는 것이다. * 점수와 목표 카드가 화면에서 가장 무거워야 한다. */ /* .hero 는 #result 안에 있으므로 빼둔다 — 그림자가 이중으로 겹친다 */ #goal-card, #result{ box-shadow:var(--nb-shadow); } /* ── 진행 막대: 테두리를 줘서 0% 일 때도 트랙이 보이게 ── */ .bar, .ntbar, .pbar, .hb{ border:var(--nb-bw) solid var(--line); border-radius:999px; overflow:hidden; } /* ── 포커스 링은 그림자 바깥에 ── * WCAG 2.2 SC 2.4.11 (Focus Not Obscured). 그림자에 가리면 안 된다. */ :where(button, input, select, textarea, [tabindex]):focus-visible{ outline:var(--nb-bw) solid var(--accent); outline-offset:calc(var(--nb-off) + 2px); } /* ── 숫자 폭 고정 ── * 82→85, 99→100 으로 바뀔 때 글자폭이 흔들리는 걸 막는다. */ .num, .kv, .nv, .ms, .mk, .hist-total, .t, .cdot, .stepper input, .goal-now{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } /* ── 위계는 굵기가 아니라 크기로 ── * Gumroad 는 h1~h5 를 전부 font-weight:normal 로 둔다. * 다 굵게 하면 아무것도 강조되지 않는다. */ .card h2{ font-weight:700; letter-spacing:-.01em; } /* ── 차트 안쪽은 건드리지 않는다 ── * 82 vs 85 같은 미세 차이를 읽어야 하는 영역이다. * 2px 테두리가 3점 차이(≈6px)와 비슷한 크기라 오히려 방해가 된다. * 프레임에만 스타일을 주고 플롯 내부는 조용하게 둔다. */ .chart-wrap{ box-shadow:var(--nb-shadow-sm); } /* 움직임을 줄이도록 설정한 사용자 존중 */ @media (prefers-reduced-motion:reduce){ .btn-primary, .calc, .addbtn, .caf-rec-btn, .seg button{ transition:none; } } /* ══════════════════════════════════════════════════════════════ * 화면 재구성 — docs/design-screen.md * * 정보의 종류마다 형태가 다르다: * 목표 대비 위치 = 세 점 사이의 좌표 → 수평 레일 (진행 링 아님) * 오늘 완료 여부 = 이진값 5개 → 정사각 도장 (막대 아님) * 이어온 날 = 있음/없음 × 날짜 → 점 그리드 (꺾은선 아님) * 영역별 점수 = 만점이 다른 세 값 → 배점 폭 스택 (%막대 아님) * ══════════════════════════════════════════════════════════════ */ /* 히어로 카드 — 화면에서 한 단 위임을 크기로 표시한다. Gumroad 처럼 위계는 굵기가 아니라 크기·간격으로 만든다. */ .hero-card{ padding:17px 15px 15px; } /* ── ① 목표 레일 ────────────────────────────────────────── */ .rail-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;} .rail-title{font-size:15px;font-weight:800;letter-spacing:-.01em;} .rail-eta{font-size:13px;font-weight:700;color:var(--accent);} .rail{margin:0 0 15px;} /* 목표를 이미 이룬 지표는 트랙 없이 한 줄 — 갈 길 남은 지표가 묻히지 않게 */ .rail.done{margin-bottom:11px;opacity:.72;} .rail.done .rail-h{margin-bottom:0;} .rail-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px;} .rail-h b{font-size:14px;} .rail-r{font-size:13px;font-weight:700;color:var(--text);text-align:right; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;} /* 레일은 출발선과 목표선 사이의 '길'이다. 마커의 위치가 곧 정보다. */ .rail-track{position:relative;height:14px;background:var(--card2); border:var(--nb-bw) solid var(--line);border-radius:999px;} .rail-fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent); border-radius:999px;transition:width .5s;} .rail-mark{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px; background:var(--accent);border:var(--nb-bw) solid var(--line);border-radius:50%; box-shadow:2px 2px 0 0 var(--line);transition:left .5s;} /* 측정이 없으면 채움을 그리지 않는다 — 빈 막대는 "0% 진행"으로 읽혀 거짓이 된다 */ .rail.nodata .rail-track{border-style:dashed;} .rail.nodata .rail-fill{display:none;} .rail.nodata .rail-mark{background:transparent;border-style:dashed;box-shadow:none;} .rail-sub{font-size:11px;color:var(--muted);margin-top:5px;} .rail-cta{margin-top:7px;} .rail-plan{font-size:12.5px;color:var(--muted);margin-top:4px; padding-top:10px;border-top:1px solid var(--card2);} .rail-empty{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;} .rail-empty b{font-size:15px;} .rail-empty span{font-size:12.5px;color:var(--muted);} /* ── ② 오늘 도장판 ──────────────────────────────────────── */ .stamp-head{display:flex;align-items:center;gap:7px;margin-bottom:13px;} .stamp-head .datepill{flex:1;min-width:0;} .stamp-badge{font-size:11px;font-weight:700;border-radius:999px;padding:4px 9px;white-space:nowrap;} .stamp-badge.on{background:var(--accent);color:var(--ink);} .stamp-badge.draft{background:var(--mid);color:var(--ink);} .stamp-badge.old{background:var(--card2);color:var(--muted);border:1px solid var(--line);} .stamp-badge.off{background:transparent;color:var(--muted);border:1px dashed var(--line);} .stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;} /* 정사각 — 이진값(채웠나/안 채웠나)에는 채움 비율이 없으므로 막대가 아니라 칸이다. aspect-ratio 로 어느 폭에서도 '도장'으로 읽히게 한다. */ .stamp{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; background:var(--card2);color:var(--muted); border:var(--nb-bw) dashed var(--line);border-radius:var(--nb-r); padding:2px;cursor:pointer;transition:transform .06s,box-shadow .06s;} .stamp .st-l{font-size:11px;font-weight:700;} .stamp .st-v{font-size:12px;font-weight:800; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;} .stamp.on{background:var(--accent);color:var(--ink);border-style:solid; box-shadow:var(--nb-off) var(--nb-off) 0 0 var(--line);} /* 누름 이동거리 = 그림자 offset. 그래야 "자기가 비운 자리에 그림자"라는 착시가 된다. :hover 가 아니라 :active 인 이유 — 터치에서 hover 가 안 풀려 눌린 채로 남는다. */ .stamp.on:active{transform:translate(var(--nb-off),var(--nb-off));box-shadow:none;} .stamp:not(.on):active{transform:translate(2px,2px);} .stamp:focus-visible{outline:2px solid var(--accent); outline-offset:calc(var(--nb-off) + 2px);} .stamp-cnt{margin-top:9px;font-size:12.5px;color:var(--muted);font-weight:700; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;} /* ── ③ 이어온 날 ────────────────────────────────────────── */ /* 히어로 도장판과 같은 정사각을 작게 — 오늘 칸이 이 줄의 오른쪽 끝임을 잇는다 */ .streak{display:grid;grid-template-columns:repeat(14,1fr);gap:3px;} .sday{position:relative;aspect-ratio:1;display:flex;flex-direction:column; align-items:center;justify-content:center; background:transparent;color:var(--muted); border:1px dashed var(--line);border-radius:calc(var(--nb-r) / 2); padding:0;cursor:pointer;overflow:hidden;} .sday .sd-n{font-size:10px;font-weight:800;line-height:1.1; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;} .sday .sd-d{font-size:8px;line-height:1.1;opacity:.65;} /* 점수는 숫자(정확값)와 색(훑어보기)으로 이중 부호화 — 색만으로 구분하지 않는다. 배경이 테마 무관 고정색이므로 글자도 --ink 가 아니라 --score-ink 를 쓴다. */ .sday.on{background:var(--sc,var(--accent));color:var(--score-ink);border-style:solid;border-color:var(--line);} .sday.sel{outline:2px solid var(--accent);outline-offset:1px;} .sday.today{border-width:var(--nb-bw);} /* 결손 표시 — 33.6점과 89.9점을 같은 축에 그냥 올리면 안 된다. 앞은 혈당을 아예 안 적은 날이고 뒤는 다 적은 날이다. */ .sday .sd-miss{position:absolute;top:0;right:0;width:0;height:0; border-top:6px solid var(--high);border-left:6px solid transparent;} .streak-cap{margin-top:9px;font-size:12.5px;color:var(--text);} .streak-cap b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;} /* 캡션 안의 범례 조각 — 위 칸 모서리에 붙는 결손 삼각형과 같은 모양. 정의를 빠뜨리면 폭 0 의 빈 span 이 되어 문장이 "…있어요 표시" 로 끊긴다. */ .sd-miss-legend{display:inline-block;width:0;height:0;vertical-align:middle; border-top:7px solid var(--high);border-left:7px solid transparent;} /* ── ④ 오늘 한 줄 ───────────────────────────────────────── */ .oneline{padding:2px 0 0;} .oneline b{font-size:17px;font-weight:800;line-height:1.35;letter-spacing:-.01em;} .oneline .ol-s{display:block;font-size:13px;color:var(--muted);margin-top:3px;} .oneline .ol-w{font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.5;} .oneline.miss b{color:var(--high);} .oneline.minus b{color:var(--mid);} .olchips{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px;} .olchip{font-size:11px;font-weight:700;border-radius:999px;padding:4px 9px; border:1px solid var(--line);} .olchip.plus{color:var(--accent);} .olchip.minus{color:var(--muted);} .ol-more{margin-top:12px;padding-top:10px;border-top:1px solid var(--card2);} .ol-more>summary{font-size:12.5px;color:var(--muted);cursor:pointer;list-style:none;} .ol-more>summary::-webkit-details-marker{display:none;} .ol-more>summary::before{content:"▸ ";} .ol-more[open]>summary::before{content:"▾ ";} /* ── ⑦ 입력 아코디언 — '담기'가 아니라 '고치기' ──────────── */ .acc>summary{list-style:none;cursor:pointer;} .acc>summary::-webkit-details-marker{display:none;} .acc>summary h2{margin:0;display:flex;align-items:center;gap:7px;} .acc>summary h2::after{content:"▸";font-size:12px;color:var(--muted);margin-left:auto;} .acc[open]>summary h2::after{content:"▾";} .acc[open]>summary{margin-bottom:10px;} /* ── ⑥ 저장 바 ─────────────────────────────────────────── */ /* ⚠️ bottom:0 으로 두면 안 된다 — .tabbar 가 position:fixed·bottom:0·z-index:30 으로 같은 자리를 덮어서, 저장 버튼이 탭바 뒤에 완전히 숨고 탭이 탭바에 먹힌다. (실제로 그랬다: 저장을 누르면 '정보' 탭으로 이동했고, 문서 맨 끝까지 스크롤한 경우에만 눌렸다. 화면 재구성으로 이게 **유일한 저장 경로**가 된 터라 치명적이었다) 탭바 높이(약 69px)만큼 띄운다. --tabbar-h 는 .tabbar 실측에 맞춘 값이다. */ :root{ --tabbar-h:69px; } .savebar{position:sticky;bottom:var(--tabbar-h);z-index:20;padding:8px 0 4px; background:linear-gradient(to top,var(--bg) 62%,transparent);} .savebar .calc{margin:0;} /* ── ⑧ 결과: 배점 폭 스택 ──────────────────────────────── */ /* 폭을 40:30:30 으로 실제 배점대로 나눈다. %로 정규화하면 40점짜리 혈당과 30점짜리 운동이 같은 크기로 보여 어디가 크게 새는지 사라진다. */ .stack{display:flex;gap:3px;margin:4px 0 16px;} .stk{position:relative;height:46px;background:var(--card2); border:var(--nb-bw) solid var(--line);border-radius:var(--nb-r);overflow:hidden;} /* ⚠️ 채움을 칸 전체에 깔고 그 위에 라벨을 얹으면 안 된다. 채움색이 점수에 따라 바뀌는 고정 hex 라 어떤 글자색을 골라도 어느 한쪽에서 대비가 무너진다 (다크에서 --text on #eab308 = 1.69:1 이었다). 채움을 **아래 띠**로 내려서 라벨과 겹치지 않게 한다 — 라벨은 항상 --card2 위에 있으므로 대비가 고정된다. */ .stk-f{position:absolute;left:0;bottom:0;height:9px;transition:width .5s;} .stk-l{position:absolute;left:0;right:0;top:0;bottom:9px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px; font-size:10px;font-weight:700;color:var(--text);} .stk-l b{font-size:13px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;} /* 미측정은 값이 '없음'이다 — 0 도 24 도 거짓말이라 빗금으로 그린다. ⚠️ 빗금 색을 --card2 로 두면 칸 배경과 같은 색이라 대비 1.00:1 로 아무것도 안 보인다. 테두리 색(--line)을 써야 실제로 빗금으로 읽힌다. */ .stk.nm{border-style:dashed;} .stk.nm .stk-f{height:9px;background:repeating-linear-gradient(-45deg, var(--line) 0 4px, transparent 4px 9px);} .stk.nm .stk-l{color:var(--muted);text-shadow:none;} .cat.nm .cat-h span{color:var(--muted);font-style:italic;} .warn-measure{color:var(--high);font-weight:700;} @media (max-width:380px){ .stamp .st-l{font-size:10px;} .stamp .st-v{font-size:11px;} .sday .sd-d{display:none;} .stk-l{font-size:9px;} }