/* demo/demo.css — 앱 theme.ts를 CSS 변수로 */
#munote-demo { --bg:#FAFAFA; --card:#FFFFFF; --text:#111111; --sub:#666666; --faint:#9A9A9A; --border:#E5E5E5; --grayFill:#ECECEC; --overlay:rgba(0,0,0,.28); --grab:#D9D9D9; --danger:#8B0000; font-family: Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif; -webkit-font-smoothing:antialiased; }
.md-phone { position:relative; width:320px; margin:0 auto; border:3px solid var(--text); border-radius:46px; background:#fff; padding:10px; box-shadow:0 30px 60px rgba(17,17,17,.12); }
.md-screen { position:relative; width:100%; aspect-ratio: 9 / 19.5; border-radius:36px; overflow:hidden; background:var(--bg); color:var(--text); display:flex; flex-direction:column; container-type: inline-size; --pt: calc(100cqw / 390); /* 390pt 폭 기준 앱 좌표를 프레임 폭에 맞춰 그대로 축소 */ }
.md-mount { height:100%; display:flex; flex-direction:column; }
.screen { flex:1; min-height:0; display:flex; flex-direction:column; }
/* 화면 안쪽 여백은 각 화면이 정한다(앱과 동일) — 프레임은 여백을 주지 않는다 */
.screen-ph { padding: 24px 20px; color: var(--sub); font-size: 13px; }
.md-body { flex:1; min-height:0; overflow:hidden; }
.md-body.scroll { overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch; }
.md-tabbar { display:flex; border-top:1px solid var(--border); background:var(--card); }
.md-tabbar button { flex:1; background:none; border:0; font:inherit; padding:calc(12 * var(--pt)) 0; font-size:calc(14.5 * var(--pt)); color:var(--faint); cursor:pointer; }
.md-tabbar button[aria-current="page"] { color:var(--text); font-weight:600; }
.md-ribbon { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--text); color:#fff; font-size:11px; letter-spacing:.06em; padding:5px 12px; border-radius:999px; white-space:nowrap; z-index:2; }
.md-hint { text-align:center; font-size:12px; color:var(--faint); margin-top:14px; } .md-hint b { color:var(--text); font-weight:600; }
.md-toast { position:absolute; left:50%; bottom:72px; transform:translateX(-50%); background:var(--text); color:#fff; font-size:12px; padding:8px 14px; border-radius:999px; white-space:nowrap; opacity:0; transition:opacity .2s; pointer-events:none; z-index:4; }
.md-toast.on { opacity:1; pointer-events:auto; } .md-toast a { color:#fff; text-decoration:underline; margin-left:8px; }
.md-sheet-overlay { position:absolute; inset:0; background:var(--overlay); display:flex; align-items:flex-end; z-index:3; }
.md-sheet { width:100%; background:var(--card); border-radius:22px 22px 0 0; padding:10px 20px 24px; max-height:85%; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; }
.md-grab { width:40px; height:4px; border-radius:2px; background:var(--grab); margin:0 auto 14px; }
.md-pill { display:inline-flex; align-items:center; height:32px; padding:0 14px; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--text); font:inherit; font-size:13px; cursor:pointer; }
.md-pill.has { border-width:2px; border-color:var(--text); } .md-pill.selected { background:var(--text); color:#fff; border-color:var(--text); }
.md-btn-primary { display:block; width:100%; height:52px; border-radius:14px; background:var(--text); color:#fff; border:0; font:inherit; font-size:16px; font-weight:600; cursor:pointer; }
.md-btn-secondary { display:block; width:100%; height:44px; border-radius:12px; background:var(--grayFill); color:var(--text); border:0; font:inherit; font-size:15px; cursor:pointer; }
/* 홈 화면 — HomeScreen.tsx 좌표(390pt 기준)를 --pt로 그대로 옮긴다. 탭바는 앱처럼 풀블리드(화면 padding 밖) */
.md-home { background:var(--bg); }
.md-home-content { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; padding: 0 calc(24 * var(--pt)); }
.md-home-header { position:relative; align-self:stretch; flex:0 0 auto; margin-top:calc(24 * var(--pt)); height:calc(24 * var(--pt)); display:flex; align-items:center; justify-content:center; }
.md-wordmark { width:calc(116 * var(--pt)); height:calc(24 * var(--pt)); }
.md-gear { position:absolute; right:0; top:calc(-2 * var(--pt)); width:calc(28 * var(--pt)); height:calc(28 * var(--pt)); padding:0; border:0; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.md-gear img { width:100%; height:100%; }
.md-home-summary-area { flex:1; min-height:0; width:100%; display:flex; flex-direction:column; align-items:center; padding-top:calc(150 * var(--pt)); }
.md-home-summary { display:flex; flex-direction:column; align-items:center; gap:calc(10 * var(--pt)); }
.md-today-label { margin:0; font-size:calc(17 * var(--pt)); color:var(--sub); }
.md-today-value { margin:0; font-size:calc(54 * var(--pt)); font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
.md-goal-row { display:flex; align-items:center; gap:calc(8 * var(--pt)); margin-top:calc(4 * var(--pt)); }
.md-goal-track { width:calc(150 * var(--pt)); height:calc(6 * var(--pt)); border-radius:calc(3 * var(--pt)); background:var(--border); overflow:hidden; }
.md-goal-fill { height:100%; border-radius:calc(3 * var(--pt)); background:var(--text); }
.md-goal-text { margin:0; font-size:calc(14 * var(--pt)); color:var(--sub); }
.md-home-badge { margin-top:calc(10 * var(--pt)); padding:calc(6 * var(--pt)) calc(14 * var(--pt)); border-radius:999px; border:1px solid var(--border); background:var(--card); }
.md-home-badge p { margin:0; font-size:calc(15 * var(--pt)); color:var(--text); }
.md-btn-start { flex:0 0 auto; margin-bottom:calc(12 * var(--pt)); width:100%; padding:calc(22 * var(--pt)) 0; border-radius:calc(16 * var(--pt)); background:var(--text); color:#fff; border:0; font:inherit; font-size:calc(20 * var(--pt)); font-weight:600; cursor:pointer; }
.md-no-mic { flex:0 0 auto; margin:0 0 calc(28 * var(--pt)); font-size:calc(12 * var(--pt)); color:var(--faint); text-align:center; }
@keyframes md-nudge-pulse { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.04); } }
.md-nudge { animation: md-nudge-pulse .6s ease-in-out; }
@media (prefers-reduced-motion: reduce) { #munote-demo * { animation:none !important; transition:none !important; } }
@media (max-width:720px) { .md-phone { width:min(320px, 84vw); } }
/* 집중모드 화면 — FocusScreen.tsx 좌표(390pt 기준)를 --pt로 그대로 옮긴다. 탭바 없음(세션 중 앱과 동일) */
.md-focus { background:var(--bg); }
.md-focus-content { flex:1; min-height:0; width:100%; box-sizing:border-box; overflow-y:auto; touch-action:pan-y; display:flex; flex-direction:column; align-items:center; padding:calc(24 * var(--pt)); }
.md-focus-state { margin:0; margin-top:calc(32 * var(--pt)); font-size:calc(19 * var(--pt)); font-weight:600; color:var(--text); }
.md-focus-instrument { margin:0; margin-top:calc(5 * var(--pt)); font-size:calc(13 * var(--pt)); color:var(--faint); }
.md-focus-timer { margin:0; margin-top:calc(68 * var(--pt)); font-size:calc(72 * var(--pt)); font-weight:200; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:calc(2 * var(--pt)); }
.md-focus-sub { margin:0; margin-top:calc(8 * var(--pt)); font-size:calc(14 * var(--pt)); color:var(--sub); font-variant-numeric:tabular-nums; }
.md-focus-mic { margin:0; margin-top:calc(8 * var(--pt)); font-size:calc(12 * var(--pt)); color:var(--danger); }
.md-skip { margin-top:calc(28 * var(--pt)); background:none; border:0; font:inherit; font-size:calc(13 * var(--pt)); color:var(--faint); cursor:pointer; padding:0; }
.md-focus-controls { margin-top:auto; margin-bottom:calc(32 * var(--pt)); display:flex; gap:calc(14 * var(--pt)); width:100%; }
.md-stop-btn { flex:1; padding:calc(18 * var(--pt)) 0; border-radius:calc(14 * var(--pt)); border:calc(1.5 * var(--pt)) solid var(--text); background:var(--card); font:inherit; font-size:calc(18 * var(--pt)); font-weight:600; color:var(--text); cursor:pointer; }
.md-end-btn { flex:1; padding:calc(18 * var(--pt)) 0; border-radius:calc(14 * var(--pt)); border:0; background:var(--text); font:inherit; font-size:calc(18 * var(--pt)); font-weight:600; color:#fff; cursor:pointer; }
/* 회고 화면 — ReflectionScreen.tsx 좌표(390pt 기준)를 --pt로 그대로 옮긴다. 탭바 없음(회고 중 앱과 동일), 스크롤 */
.md-reflection { background:var(--bg); }
.md-reflection-content { flex:1; min-height:0; width:100%; box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; padding:calc(20 * var(--pt)); padding-bottom:calc(28 * var(--pt)); }
.md-reflection-h1 { margin:0; margin-top:calc(18 * var(--pt)); font-size:calc(15 * var(--pt)); color:var(--sub); }
.md-reflection-head { display:flex; flex-direction:row; align-items:center; gap:calc(12 * var(--pt)); margin-top:calc(8 * var(--pt)); }
.md-reflection-big { margin:0; font-size:calc(42 * var(--pt)); font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
.md-reflection-metacol { display:flex; flex-direction:column; gap:calc(3 * var(--pt)); justify-content:center; flex-shrink:1; min-width:0; }
.md-reflection-meta { margin:0; font-size:calc(14 * var(--pt)); color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.md-coach-card { margin-top:calc(20 * var(--pt)); border-radius:calc(14 * var(--pt)); border:1px solid var(--border); background:var(--card); padding:calc(14 * var(--pt)) calc(16 * var(--pt)); opacity:0; transition:opacity .4s ease; }
.md-coach-card.md-fade-in { opacity:1; }
.md-coach-label { margin:0; margin-bottom:calc(6 * var(--pt)); font-size:calc(12 * var(--pt)); font-weight:600; color:var(--faint); letter-spacing:calc(1 * var(--pt)); }
.md-coach-text { margin:0; font-size:calc(16 * var(--pt)); line-height:calc(24 * var(--pt)); color:var(--text); }
.md-reflection-shortnote { margin:0; margin-top:calc(14 * var(--pt)); font-size:calc(14 * var(--pt)); color:var(--faint); }
.md-reflection-section { margin:0; margin-top:calc(40 * var(--pt)); margin-bottom:calc(12 * var(--pt)); font-size:calc(16 * var(--pt)); font-weight:600; color:var(--text); }
.md-reflection-section.after-coach { margin-top:calc(24 * var(--pt)); }
.md-reflection-chipwrap { display:flex; flex-wrap:wrap; gap:calc(8 * var(--pt)); }
.md-piece-chip { padding:calc(9 * var(--pt)) calc(14 * var(--pt)); border-radius:999px; border:1px solid var(--border); background:var(--card); font:inherit; font-size:calc(14 * var(--pt)); color:var(--text); cursor:pointer; }
.md-piece-chip.selected { background:var(--text); color:#fff; border-color:var(--text); }
.md-type-row { display:flex; gap:calc(6 * var(--pt)); margin-bottom:calc(6 * var(--pt)); }
.md-type-chip { flex:1; padding:calc(10 * var(--pt)) calc(6 * var(--pt)); border-radius:999px; border:1px solid var(--border); background:var(--card); text-align:center; font:inherit; font-size:calc(13 * var(--pt)); color:var(--text); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.md-type-chip.selected { background:var(--text); color:#fff; border-color:var(--text); }
.md-memo-toggle { margin-top:calc(40 * var(--pt)); align-self:flex-start; display:block; padding:calc(7 * var(--pt)) calc(14 * var(--pt)); border-radius:999px; border:1px solid var(--border); background:var(--bg); font:inherit; font-size:calc(14 * var(--pt)); color:var(--text); cursor:pointer; }
.md-reflection-textarea { margin-top:calc(10 * var(--pt)); width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:calc(10 * var(--pt)); padding:calc(9 * var(--pt)) calc(12 * var(--pt)); font-size:calc(15 * var(--pt)); color:var(--text); background:var(--card); font-family:inherit; resize:vertical; min-height:calc(60 * var(--pt)); }
.md-reflection-done { margin-top:calc(40 * var(--pt)); width:100%; padding:calc(16 * var(--pt)) 0; border-radius:calc(14 * var(--pt)); border:0; background:var(--text); color:#fff; font:inherit; font-size:calc(17 * var(--pt)); font-weight:600; cursor:pointer; }
.md-piece-chip:disabled, .md-type-chip:disabled, .md-memo-toggle:disabled, .md-reflection-done:disabled { opacity:.5; cursor:default; }
/* 기록 화면 — CalendarScreen.tsx 좌표(390pt 기준)를 --pt로 그대로 옮긴다. 스크롤 영역은 공용 .md-body.scroll */
.md-records { background:var(--bg); }
.md-cal-content { width:100%; box-sizing:border-box; padding:calc(20 * var(--pt)) calc(20 * var(--pt)) calc(48 * var(--pt)); }
.md-cal-title-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:calc(16 * var(--pt)); }
.md-cal-title { margin:0; font-size:calc(20 * var(--pt)); font-weight:600; color:var(--text); }
.md-cal-nav { padding:calc(4 * var(--pt)) calc(14 * var(--pt)); font-size:calc(24 * var(--pt)); color:var(--text); background:none; border:0; font:inherit; cursor:pointer; }
.md-cal-week-row { display:flex; }
.md-cal-weekday { flex:1; margin:0 0 calc(6 * var(--pt)); text-align:center; font-size:calc(12 * var(--pt)); color:var(--faint); }
.md-cal-grid-row { display:flex; }
.md-cal-cell { flex:1; aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0; font:inherit; cursor:pointer; }
.md-cal-cell.blank { cursor:default; }
.md-cal-ring { box-sizing:border-box; width:calc(42 * var(--pt)); height:calc(42 * var(--pt)); border-radius:50%; display:flex; align-items:center; justify-content:center; border:calc(1.5 * var(--pt)) solid transparent; }
.md-cal-ring.on { border-color:var(--text); }
.md-cal-dot { width:calc(34 * var(--pt)); height:calc(34 * var(--pt)); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.md-cal-daytext { font-size:calc(14 * var(--pt)); color:var(--text); }
.md-cal-daytext.on-dark { color:#fff; }
.md-cal-legend-row { display:flex; align-items:center; justify-content:space-between; margin-top:calc(14 * var(--pt)); }
.md-cal-legend { display:flex; align-items:center; gap:calc(8 * var(--pt)); flex-wrap:wrap; flex:1; }
.md-cal-legend-item { display:inline-flex; align-items:center; gap:calc(4 * var(--pt)); }
.md-cal-swatch { display:inline-block; width:calc(10 * var(--pt)); height:calc(10 * var(--pt)); border-radius:50%; }
.md-cal-legend-text { font-size:calc(11 * var(--pt)); color:var(--sub); }
.md-cal-empty { margin:calc(24 * var(--pt)) 0 0; font-size:calc(13 * var(--pt)); color:var(--faint); text-align:center; }
.md-cal-total { box-sizing:border-box; margin-top:calc(18 * var(--pt)); border-radius:calc(12 * var(--pt)); background:var(--text); padding:calc(14 * var(--pt)); display:flex; flex-direction:column; gap:calc(4 * var(--pt)); }
.md-cal-total-label { margin:0; font-size:calc(12 * var(--pt)); color:#9A9A9A; }
.md-cal-total-text { margin:0; font-size:calc(15 * var(--pt)); font-weight:600; color:#fff; }
.md-cal-bar-track { margin-top:calc(10 * var(--pt)); height:calc(6 * var(--pt)); border-radius:calc(3 * var(--pt)); background:#3A3A3A; overflow:hidden; }
.md-cal-bar-fill { height:100%; border-radius:calc(3 * var(--pt)); background:#fff; }
.md-cal-bar-legend { margin:calc(6 * var(--pt)) 0 0; text-align:right; font-size:calc(11 * var(--pt)); color:#9A9A9A; font-variant-numeric:tabular-nums; }
.md-cal-panels { display:flex; justify-content:center; flex-wrap:wrap; gap:calc(8 * var(--pt)); margin-top:calc(16 * var(--pt)); }
.md-cal-panel-pill { box-sizing:border-box; border:1px solid var(--border); background:var(--card); border-radius:999px; padding:calc(9 * var(--pt)) calc(12 * var(--pt)); font:inherit; font-size:calc(14 * var(--pt)); color:var(--text); cursor:pointer; }
.md-cal-panel-pill.has { border-width:calc(2.5 * var(--pt)); border-color:var(--text); padding:calc(7.5 * var(--pt)) calc(10.5 * var(--pt)); }
.md-cal-panel-pill.on { background:var(--text); border-color:var(--text); color:#fff; font-weight:700; }
.md-cal-session { box-sizing:border-box; margin-top:calc(14 * var(--pt)); border-radius:calc(12 * var(--pt)); border:1px solid var(--border); background:var(--card); padding:calc(14 * var(--pt)); display:flex; flex-direction:column; gap:calc(6 * var(--pt)); }
.md-cal-session-row { display:flex; align-items:center; justify-content:space-between; gap:calc(10 * var(--pt)); }
.md-cal-session-line { margin:0; flex-shrink:1; font-size:calc(14 * var(--pt)); color:var(--text); font-variant-numeric:tabular-nums; }
.md-cal-session-inst { font-size:calc(18 * var(--pt)); }
.md-cal-session-pieces { margin:0; font-size:calc(14 * var(--pt)); color:var(--text); }
.md-cal-session-types { margin:0; font-size:calc(13 * var(--pt)); color:var(--sub); }
.md-cal-session-memo { margin:0; font-size:calc(14 * var(--pt)); color:var(--sub); }
.md-cal-coach { box-sizing:border-box; border-radius:calc(14 * var(--pt)); border:1px solid var(--border); background:var(--bg); padding:calc(14 * var(--pt)) calc(16 * var(--pt)); }
.md-cal-coach-label { margin:0 0 calc(6 * var(--pt)); font-size:calc(12 * var(--pt)); font-weight:600; color:var(--faint); letter-spacing:calc(1 * var(--pt)); }
.md-cal-coach-text { margin:0; font-size:calc(16 * var(--pt)); line-height:calc(24 * var(--pt)); color:var(--text); }
.md-cal-session-foot { display:flex; justify-content:flex-end; }
.md-cal-edit-all { box-sizing:border-box; padding:calc(6 * var(--pt)) calc(12 * var(--pt)); border-radius:999px; border:1px solid var(--border); background:var(--bg); font:inherit; font-size:calc(12 * var(--pt)); color:var(--text); cursor:pointer; }
.md-cal-delete { margin-top:calc(4 * var(--pt)); align-self:center; padding:calc(8 * var(--pt)) 0; background:none; border:0; font:inherit; font-size:calc(13 * var(--pt)); color:var(--faint); cursor:pointer; }
/* 친구 화면 — FriendsScreen.tsx·PracticeRoom.tsx 좌표(390pt 기준)를 --pt로 그대로 옮긴다. */
.md-friends { background:var(--bg); }
.md-friends-header { display:flex; align-items:center; justify-content:space-between; height:calc(26 * var(--pt)); margin:calc(20 * var(--pt)) calc(24 * var(--pt)) calc(14 * var(--pt)); flex:0 0 auto; }
.md-friends-slot { width:calc(26 * var(--pt)); height:calc(26 * var(--pt)); }
.md-friends-title { margin:0; font-size:calc(17 * var(--pt)); font-weight:700; color:var(--text); letter-spacing:-0.2px; }
.md-add-friend { width:calc(26 * var(--pt)); height:calc(26 * var(--pt)); display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0; cursor:pointer; }
.md-add-friend img { width:100%; height:100%; }
.md-room { position:relative; flex:0 0 auto; width:100%; aspect-ratio:1; background-size:cover; background-position:center; background-repeat:no-repeat; overflow:hidden; }
.md-muni { position:absolute; left:0; top:0; margin:0; padding:0; border:0; background:none; display:flex; flex-direction:column; align-items:center; cursor:pointer; }
.md-muni-walk { width:calc(60 * var(--pt)); }
.md-muni-walk img { width:calc(60 * var(--pt)); height:calc(80 * var(--pt)); object-fit:contain; display:block; }
.md-muni-posed img { object-fit:contain; display:block; }
.md-muni-name { margin-top:2px; font-size:calc(11 * var(--pt)); color:var(--sub); text-align:center; max-width:calc(84 * var(--pt)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.md-muni.me .md-muni-name { color:var(--text); font-weight:700; }
.md-muni-mark { width:0; height:0; border-left:calc(4 * var(--pt)) solid transparent; border-right:calc(4 * var(--pt)) solid transparent; border-top:calc(5 * var(--pt)) solid var(--text); margin-bottom:2px; }
.md-friends-feed { padding:calc(14 * var(--pt)) calc(24 * var(--pt)) calc(24 * var(--pt)); }
.md-feed-label { margin:0 0 calc(4 * var(--pt)); font-size:calc(11 * var(--pt)); color:var(--faint); letter-spacing:0.5px; }
.md-friends-quiet { margin:calc(24 * var(--pt)) 0 0; font-size:calc(13 * var(--pt)); color:var(--faint); text-align:center; line-height:calc(20 * var(--pt)); }
.md-friend-card { display:flex; align-items:center; gap:calc(12 * var(--pt)); padding:calc(12 * var(--pt)) 0; border-bottom:1px solid var(--border); }
.md-friend-card-main { flex:1; min-width:0; display:flex; align-items:center; gap:calc(12 * var(--pt)); background:none; border:0; padding:0; font:inherit; text-align:left; cursor:pointer; }
.md-friend-card-muni { width:calc(22 * var(--pt)); height:calc(36 * var(--pt)); object-fit:contain; flex-shrink:0; }
.md-friend-card-tx { flex:1; min-width:0; }
.md-friend-card-name-row { display:flex; align-items:center; gap:calc(4 * var(--pt)); }
.md-friend-card-name { font-size:calc(14 * var(--pt)); font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.md-friend-card-emoji { font-size:calc(12 * var(--pt)); }
.md-friend-card-sum { margin:calc(3 * var(--pt)) 0 0; font-size:calc(12 * var(--pt)); color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.md-friend-card-react { display:flex; gap:4px; flex-shrink:0; }
.md-react-pill { display:inline-flex; align-items:center; border:1px solid var(--border); background:var(--card); border-radius:999px; padding:calc(5 * var(--pt)) calc(8 * var(--pt)); font:inherit; font-size:calc(11 * var(--pt)); color:var(--sub); cursor:pointer; font-variant-numeric:tabular-nums; }
.md-react-pill.labelled { padding:calc(9 * var(--pt)) calc(14 * var(--pt)); font-size:calc(13 * var(--pt)); }
.md-react-pill.on { background:var(--text); border-color:var(--text); color:#fff; }
.md-sheet-friend { display:flex; flex-direction:column; align-items:center; }
.md-sheet-muni { width:calc(84 * var(--pt)); height:calc(112 * var(--pt)); object-fit:contain; margin-top:calc(4 * var(--pt)); }
.md-sheet-name { margin:calc(8 * var(--pt)) 0 0; font-size:calc(20 * var(--pt)); font-weight:700; color:var(--text); display:flex; align-items:baseline; gap:calc(6 * var(--pt)); }
.md-sheet-inst { font-size:calc(14 * var(--pt)); color:var(--sub); font-weight:400; }
.md-sum-grid { display:flex; align-self:stretch; margin-top:calc(22 * var(--pt)); padding:0 calc(12 * var(--pt)); }
.md-sum-cell { flex:1; text-align:center; }
.md-sum-v { margin:0 0 calc(3 * var(--pt)); font-size:calc(17 * var(--pt)); font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
.md-sum-l { margin:0; font-size:calc(12 * var(--pt)); color:var(--sub); }
.md-sheet-react { display:flex; justify-content:center; gap:calc(8 * var(--pt)); margin-top:calc(20 * var(--pt)); align-self:stretch; }
.md-sheet-links { margin-top:calc(26 * var(--pt)); display:flex; align-items:center; justify-content:center; }
.md-sheet-link { background:none; border:0; font:inherit; font-size:calc(13 * var(--pt)); color:var(--faint); text-decoration:underline; cursor:pointer; padding:0; }
.md-sheet-dot { font-size:calc(13 * var(--pt)); color:var(--faint); }
/* 설정 화면 — SettingsScreen.tsx(A안 목록형)·SettingSheet.tsx 좌표(390pt 기준)를 --pt로 그대로 옮긴다. 탭바 없음(홈 톱니로 덮어 열림, 앱과 동일). */
.md-settings { background:var(--bg); }
.md-set-content { box-sizing:border-box; padding:calc(24 * var(--pt)) calc(24 * var(--pt)) calc(48 * var(--pt)); }
.md-set-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:calc(18 * var(--pt)); }
.md-set-back { width:calc(40 * var(--pt)); background:none; border:0; padding:0; font:inherit; font-size:calc(28 * var(--pt)); line-height:calc(30 * var(--pt)); color:var(--text); text-align:left; cursor:pointer; }
.md-set-back-spacer { width:calc(40 * var(--pt)); }
.md-set-title { margin:0; font-size:calc(16 * var(--pt)); font-weight:600; color:var(--text); }
.md-set-section { margin:calc(22 * var(--pt)) 0 calc(10 * var(--pt)); font-size:calc(13 * var(--pt)); font-weight:600; color:var(--faint); letter-spacing:1px; }
.md-set-group { background:var(--card); border:1px solid var(--border); border-radius:calc(14 * var(--pt)); overflow:hidden; }
.md-set-account { display:flex; align-items:center; gap:calc(12 * var(--pt)); padding:calc(16 * var(--pt)); }
.md-set-avatar { flex-shrink:0; width:calc(40 * var(--pt)); height:calc(40 * var(--pt)); border-radius:50%; background:var(--grayFill); overflow:hidden; display:flex; align-items:flex-start; justify-content:center; }
.md-set-avatar img { width:calc(54 * var(--pt)); height:calc(72 * var(--pt)); margin-top:calc(4 * var(--pt)); object-fit:contain; }
.md-set-account-text { flex:1; min-width:0; display:flex; flex-direction:column; }
.md-set-account-name { font-size:calc(15 * var(--pt)); color:var(--text); }
.md-set-account-sub { margin-top:calc(2 * var(--pt)); font-size:calc(12 * var(--pt)); color:var(--faint); }
.md-set-row { display:flex; align-items:center; justify-content:space-between; width:100%; box-sizing:border-box; min-height:calc(48 * var(--pt)); padding:0 calc(16 * var(--pt)); border:0; border-bottom:1px solid var(--grayFill); border-radius:0; background:none; font:inherit; text-align:left; color:inherit; text-decoration:none; cursor:pointer; }
.md-set-row.last { border-bottom:0; }
.md-set-row.md-set-static, .md-set-row.md-set-goal { cursor:default; }
.md-set-label { font-size:calc(15 * var(--pt)); color:var(--text); }
.md-set-right { display:flex; align-items:center; gap:calc(8 * var(--pt)); }
.md-set-value { font-size:calc(14 * var(--pt)); color:var(--sub); }
.md-set-chev { font-size:calc(17 * var(--pt)); color:var(--faint); }
.md-set-stepper { display:flex; align-items:center; gap:calc(4 * var(--pt)); padding:calc(7 * var(--pt)) 0; }
.md-set-stepbtn { width:calc(32 * var(--pt)); height:calc(32 * var(--pt)); border-radius:50%; border:1px solid var(--border); background:var(--card); font:inherit; font-size:calc(17 * var(--pt)); color:var(--text); cursor:pointer; }
.md-set-goalvalue { font-size:calc(14 * var(--pt)); color:var(--sub); min-width:calc(56 * var(--pt)); text-align:center; }
.md-sheet-title { margin:0 0 calc(18 * var(--pt)); font-size:calc(17 * var(--pt)); font-weight:700; color:var(--text); }
.md-sheet-section { margin:calc(18 * var(--pt)) 0 calc(10 * var(--pt)); font-size:calc(13 * var(--pt)); font-weight:600; color:var(--faint); letter-spacing:1px; }
.md-pill-wrap { display:flex; flex-wrap:wrap; gap:calc(8 * var(--pt)); }
.md-set-note { margin-top:calc(12 * var(--pt)); font-size:calc(12 * var(--pt)); color:var(--faint); line-height:calc(18 * var(--pt)); white-space:pre-line; }