/* Mori 2026: a mobile application shell, shared by every existing feature. */
@font-face {
  font-family:"Mori Pretendard";
  src:url("vendor/pretendard-variable.woff2") format("woff2");
  font-style:normal;
  font-weight:45 920;
  font-display:swap
}
:root {
  --mr-bg:#e9edf0;
  --mr-card:#fcfdfd;
  --mr-ink:#17263c;
  --mr-muted:#52616d;
  --mr-accent:#356cf5;
  --mr-line:#cbd3da;
  --mr-radius:14px;
  --mr-soft:#edf2ff;
  --mr-success:#138871;
  --mr-warning:#b97822;
  --mr-top:66px;
  --mr-bottom:78px;
  --mr-shadow:none;
  --surface-1:var(--mr-card);
  --plane:var(--mr-bg);
  --text-primary:var(--mr-ink);
  --text-secondary:#5b6b82;
  --muted:var(--mr-muted);
  --grid:var(--mr-line);
  --baseline:#bdc8d7;
  --series-1:var(--mr-accent);
  --series-2:#b68e62;
  --series-3:#66988d;
  --series-4:#8f9bc0;
  --series-5:#bac4d4;
  --accent:var(--mr-accent);
  --critical:#dc5c65;
  --good:#178b77;
  --fill:#edf1f7;
  --fill-hover:#e7edf7;
  --radius:var(--mr-radius);
  --radius-sm:14px;
  --shadow:var(--mr-shadow);
  color-scheme:light
}
:root[data-theme="dark"] {
  --mr-bg:#0e1623;
  --mr-card:#182334;
  --mr-ink:#eef3fc;
  --mr-muted:#b6c3d3;
  --mr-accent:#81a6ff;
  --mr-line:#43546a;
  --mr-soft:#233754;
  --mr-success:#7acbb3;
  --mr-warning:#dbb37c;
  --surface-1:var(--mr-card);
  --plane:var(--mr-bg);
  --text-primary:var(--mr-ink);
  --text-secondary:#b9c5d6;
  --muted:var(--mr-muted);
  --grid:var(--mr-line);
  --baseline:#52647e;
  --series-1:var(--mr-accent);
  --series-2:#c8a77e;
  --series-3:#75b3a3;
  --series-4:#a9b8e4;
  --series-5:#778caf;
  --fill:#223045;
  --fill-hover:#293a51;
  --critical:#f58b94;
  --good:#7acbb3;
  color-scheme:dark
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --mr-bg:#0e1623;
    --mr-card:#182334;
    --mr-ink:#eef3fc;
    --mr-muted:#b6c3d3;
    --mr-accent:#81a6ff;
    --mr-line:#43546a;
    --mr-soft:#233754;
    --mr-success:#7acbb3;
    --mr-warning:#dbb37c;
    --surface-1:var(--mr-card);
    --plane:var(--mr-bg);
    --text-primary:var(--mr-ink);
    --text-secondary:#b9c5d6;
    --muted:var(--mr-muted);
    --grid:var(--mr-line);
    --baseline:#52647e;
    --series-1:var(--mr-accent);
    --series-2:#c8a77e;
    --series-3:#75b3a3;
    --series-4:#a9b8e4;
    --series-5:#778caf;
    --fill:#223045;
    --fill-hover:#293a51;
    --critical:#f58b94;
    --good:#7acbb3;
    color-scheme:dark
  }
}
html {
  scroll-padding-top:80px;
  background:var(--mr-bg)
}
body {
  font-family:"Mori Pretendard",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.55;
  letter-spacing:-.015em;
  font-weight:500;
  background:var(--mr-bg);
  color:var(--mr-ink);
  -webkit-tap-highlight-color:transparent
}
button,input,select,textarea {
  font-family:inherit;
  letter-spacing:inherit
}
button {
  touch-action:manipulation
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid color-mix(in srgb,var(--mr-accent) 65%,transparent);
  outline-offset:3px
}
button:disabled {
  cursor:not-allowed
}
h1,h2,h3 {
  letter-spacing:-.045em
}
h1 {
  font-size:30px
}
h2 {
  font-size:18px;
  font-weight:720
}
h3 {
  font-weight:650
}
.sub {
  font-size:12px;
  line-height:1.65;
  color:var(--mr-muted)
}
.num,.amount,.v {
  font-variant-numeric:tabular-nums
}
.card {
  border:1px solid var(--mr-line);
  border-radius:var(--mr-radius);
  padding:23px 24px;
  box-shadow:var(--mr-shadow);
  margin-bottom:16px;
  background:var(--mr-card);
  color:var(--mr-ink)
}
.card>h2 {
  margin-bottom:18px
}
.wrap {
  max-width:1160px;
  padding:16px 28px calc(var(--mr-bottom) + 30px + env(safe-area-inset-bottom,0px));
  margin:0 auto
}
.wrap>div:first-child[style="height:20px"] {
  display:none
}
.narrow {
  max-width:760px;
  margin-inline:auto
}
.topbar {
  height:calc(var(--mr-top) + env(safe-area-inset-top,0px));
  min-height:var(--mr-top);
  padding:env(safe-area-inset-top,0px) 28px 0;
  gap:10px;
  box-shadow:none;
  border-bottom:1px solid color-mix(in srgb,var(--mr-line) 70%,transparent);
  background:var(--mr-bg);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  z-index:40
}
.view-title {
  font-size:21px;
  font-weight:800;
  letter-spacing:-.06em;
  padding:8px 2px;
  border-radius:9px;
  gap:0
}
.view-title:before {
  display:none
}
.topbar .hamburger {
  width:33px;
  height:36px;
  flex-shrink:0;
  padding:8px 6px;
  border-radius:10px
}
.hamburger span {
  height:1.7px;
  border-radius:3px
}
.topbar .who,.topbar #logout {
  display:none
}
.topbar .spacer {
  display:none
}
.topbar #top-search {
  margin-left:auto
}
.topbar #top-search,.topbar #top-settings {
  width:38px;
  height:38px;
  border:0;
  background:none;
  border-radius:12px;
  color:var(--mr-ink);
  display:grid;
  place-items:center
}
.topbar #top-settings svg {
  width:21px;
  height:21px;
  stroke-width:1.65
}
.topbar #top-search svg {
  width:21px;
  height:21px;
  stroke-width:1.7
}
.topbar #top-settings:after,.topbar #top-search:after {
  width:44px;
  height:44px
}
.topbar #top-settings[aria-pressed="true"] {
  background:var(--mr-soft);
  color:var(--mr-accent)
}
.topbar .switch {
  margin-left:9px;
  gap:6px;
  padding:5px 4px;
  font-size:10px
}
.switch .track {
  width:27px;
  height:17px;
  border-radius:20px
}
.switch .knob {
  width:11px;
  height:11px;
  top:3px;
  left:3px
}
.switch[aria-pressed="true"] .knob {
  transform:translateX(10px)
}
#app > #sync {
  position:fixed;
  bottom:calc(var(--mr-bottom) + 16px + env(safe-area-inset-bottom,0px));
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:min(85vw,460px);
  white-space:normal;
  pointer-events:none;
  background:#233047;
  color:#fff;
  border-radius:14px;
  padding:12px 18px;
  line-height:1.6;
  box-shadow:0 8px 32px #12203825;
  z-index:180;
  font-size:12px
}
#app > #sync:empty {
  display:none
}
#app > #sync.bad {
  background:#843f49
}
#app > #sync.ok {
  color:#fff
}
.tabbar {
  position:fixed;
  left:50%;
  right:auto;
  transform:translateX(-50%);
  bottom:12px;
  width:min(620px,calc(100% - 36px));
  height:var(--mr-bottom);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px));
  height:calc(var(--mr-bottom) + env(safe-area-inset-bottom,0px));
  gap:4px;
  background:var(--mr-card);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid color-mix(in srgb,var(--mr-line) 80%,transparent);
  border-radius:25px;
  box-shadow:none;
  z-index:60
}
.tabbar .mi {
  position:relative;
  min-width:0;
  padding:5px 1px 3px;
  gap:7px;
  font-size:10px;
  line-height:1.2;
  border:0;
  border-radius:16px;
  color:var(--mr-muted);
  font-weight:550;
  transition:background .18s,color .18s
}
.tabbar .mi .ic {
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  line-height:1;
  font-size:22px
}
.mr-nav-svg {
  width:23px;
  height:23px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round
}
.tabbar .mi[aria-pressed="true"] {
  color:var(--mr-accent);
  font-weight:750;
  background:var(--mr-soft)
}
.tabbar .mi[aria-pressed="true"] .mr-nav-svg {
  stroke-width:2
}
.tabbar .mi:active {
  transform:scale(.96)
}
body.pinned .tabbar {
  left:calc(50% + 108px)
}
.tabbar .tab-label {
  line-height:1.1;
  white-space:nowrap
}
#drawer {
  border-right:1px solid var(--mr-line);
  box-shadow:14px 0 50px #172b441a;
  background:var(--mr-card);
  padding:22px 15px
}
.drawer-head {
  padding:12px 12px 22px
}
.drawer-head .t2 {
  font-weight:850;
  font-size:24px;
  color:var(--mr-ink)
}
#drawer .mi {
  padding:14px;
  border-radius:14px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  font-weight:550;
  color:var(--text-secondary)
}
#drawer .mi[aria-pressed="true"] {
  background:var(--mr-soft);
  color:var(--mr-accent)
}
#drawer .ic {
  width:23px;
  height:23px;
  display:grid;
  place-items:center
}
/* A separator must not inherit the old expanding spacer. */
#drawer .mgap {
  flex:0 0 1px;
  min-height:1px;
  height:1px;
  background:var(--mr-line);
  margin:16px 10px
}
#drawer .mgap + .mi {
  border-top:0
}
/* 서랍은 보조 이동 메뉴다. 본문 제목처럼 큰 글자와 넓은 행을 쓰면
   몇 개 없는 메뉴도 한 화면을 다 차지한다. 아이콘·행·구분선 간격을 한 단계 줄인다. */
.drawer-head {
  padding:10px 10px 16px
}
.drawer-head .t2 {
  font-size:20px
}
#drawer .mi {
  padding:10px 11px;
  gap:9px;
  border-radius:11px;
  font-size:13px;
  min-height:40px
}
#drawer .ic {
  width:19px;
  height:19px
}
#drawer .mgap {
  margin:10px 8px
}
.seg {
  display:inline-flex;
  gap:3px;
  background:var(--fill);
  padding:4px;
  border-radius:13px
}
.seg button {
  padding:10px 15px;
  font-size:13px;
  min-height:39px;
  color:var(--mr-muted);
  border-radius:10px;
  font-weight:600
}
.seg button[aria-pressed="true"] {
  background:var(--mr-card);
  color:var(--mr-ink);
  box-shadow:0 2px 8px #24334d0a
}
.seg.sm button {
  padding:6px 11px;
  min-height:32px;
  font-size:11px
}
#ledger-sub {
  background:none;
  border-radius:0;
  padding:0;
  gap:27px;
  width:100%;
  border-bottom:1px solid var(--mr-line)
}
#ledger-sub button {
  position:relative;
  background:none;
  box-shadow:none;
  border-radius:0;
  padding:11px 0 15px;
  min-height:45px;
  font-size:17px;
  font-weight:650;
  letter-spacing:-.05em
}
#ledger-sub button[aria-pressed="true"] {
  font-weight:800;
  color:var(--mr-ink)
}
#ledger-sub button[aria-pressed="true"]:after {
  content:"";
  height:3px;
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  background:var(--mr-ink);
  border-radius:2px
}
#ledger-sub+* {
  margin-top:0
}
#iv-sub {
  background:none;
  gap:6px;
  padding:0
}
#iv-sub button {
  min-height:35px;
  border-radius:11px;
  background:none;
  padding:8px 16px;
  font-size:12px
}
#iv-sub button[aria-pressed="true"] {
  background:var(--mr-ink);
  color:var(--mr-card);
  box-shadow:none
}
.primary {
  border-radius:13px;
  background:var(--mr-accent);
  color:#fff;
  box-shadow:none;
  min-height:43px;
  font-size:13px;
  font-weight:650;
  padding:11px 17px
}
.primary.sm {
  min-height:36px;
  font-size:12px;
  padding:8px 13px
}
.ghost,.boxbtn,.chip-btn {
  border-radius:12px;
  min-height:36px;
  font-weight:550
}
.ghost {
  color:var(--text-secondary)
}
.boxbtn {
  border:1px solid var(--mr-line);
  background:var(--mr-card);
  box-shadow:none
}
.ghost.round {
  border-radius:50%
}
.chip-btn {
  background:var(--fill);
  border-color:transparent;
  font-size:12px;
  padding:8px 13px
}
.ghost-chip {
  background:none;
  color:var(--text-secondary)
}
.icon-btn {
  border-radius:11px
}
.field input,.field select,input[type="search"],textarea {
  border-radius:13px;
  border:1px solid var(--mr-line);
  background:var(--mr-bg);
  padding:12px 14px
}
.field label {
  font-size:12px;
  font-weight:650;
  color:var(--text-secondary);
  margin-bottom:8px
}
.filter-bar {
  gap:9px
}
.filter-sum {
  font-size:11px;
  line-height:1.8;
  color:var(--mr-muted)
}
.filter-pill {
  background:var(--mr-card);
  border-color:var(--mr-line);
  border-radius:12px
}
.empty {
  font-size:13px;
  padding:32px 20px;
  line-height:1.9;
  color:var(--mr-muted)
}
.empty.sm {
  padding:18px 12px
}
.t2 {
  font-size:21px;
  font-weight:750
}
.data-range {
  font-size:10px;
  margin-bottom:10px;
  align-items:center
}
.data-range .chip-btn {
  font-size:10px;
  padding:6px 10px;
  min-height:32px
}
.ctrl-row {
  margin:18px 0 12px;
  gap:8px
}
#spend-sub {
  background:none;
  border-radius:0;
  padding:0;
  gap:16px
}
#spend-sub button {
  padding:7px 1px;
  font-size:13px;
  min-height:34px;
  box-shadow:none;
  background:none;
  border-radius:0
}
#spend-sub button[aria-pressed="true"] {
  color:var(--mr-ink);
  font-weight:800
}
.capped {
  padding:0!important;
  overflow:hidden
}
#day-groups .day-head {
  background:var(--mr-bg);
  padding:14px 20px;
  font-size:11px;
  border-bottom:0
}
.tx-row {
  padding:17px 20px;
  border-bottom:1px solid var(--mr-line)
}
.tx-row .title {
  font-size:15px;
  font-weight:650
}
.tx-row .amt {
  font-size:15px;
  font-weight:700
}
.tiles {
  gap:10px
}
.tile {
  padding:17px 19px;
  border-radius:18px;
  box-shadow:none;
  background:var(--mr-card);
  border:0
}
.tile .v {
  font-size:27px;
  letter-spacing:-.05em
}
.tile .k {
  font-size:11px;
  color:var(--mr-muted)
}
table {
  font-variant-numeric:tabular-nums
}
th {
  font-weight:550;
  color:var(--mr-muted);
  font-size:11px;
  border-bottom-color:var(--mr-line)
}
td {
  border-bottom-color:var(--mr-line)
}
.note.tip {
  border-radius:14px;
  font-size:12px;
  padding:14px 17px;
  background:var(--mr-soft);
  color:var(--text-secondary)
}
.fold {
  font-size:16px;
  font-weight:700
}
.caret2 {
  font-size:10px;
  color:var(--mr-muted)
}
dialog {
  border:1px solid var(--mr-line);
  border-radius:26px;
  box-shadow:0 24px 100px #10284640;
  padding:26px;
  max-width:calc(100% - 28px);
  background:var(--mr-card);
  color:var(--mr-ink)
}
dialog::backdrop {
  background:#10203570;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px)
}
dialog .row {
  gap:12px
}
dialog h2 {
  font-size:21px
}
dialog .field {
  margin-bottom:16px
}
dialog button {
  min-height:40px
}
dialog input,dialog select,dialog textarea {
  font-size:15px
}
dialog .actions {
  gap:10px
}
dialog .actions .primary {
  min-width:100px
}
.set-section {
  margin:25px 0 14px;
  font-size:13px;
  font-weight:750;
  color:var(--mr-muted);
  letter-spacing:.015em
}
#view-settings .card {
  padding:22px 23px
}
#view-settings .row {
  gap:12px
}
#view-settings .card h2 {
  font-size:16px
}
#view-settings .sub {
  font-size:12px
}
.memo-wall {
  gap:13px
}
.memo-col {
  gap:13px
}
.memo-card {
  border:1px solid color-mix(in srgb,var(--mr-line) 70%,transparent);
  border-radius:20px;
  box-shadow:none;
  overflow:hidden
}
.memo-card:before {
  display:none
}
.memo-card.o1 {
  background:color-mix(in srgb,var(--mr-card) 90%,#b8d4fc)
}
.memo-card.o2 {
  background:color-mix(in srgb,var(--mr-card) 90%,#ecd0a5)
}
.memo-card.o3 {
  background:color-mix(in srgb,var(--mr-card) 90%,#beddd0)
}
.memo-card .mk-open {
  padding:18px 17px 24px
}
.memo-card .mk-title {
  font-size:16px;
  font-weight:750;
  margin-top:12px;
  line-height:1.55
}
.memo-card .mk-body {
  font-size:13px;
  color:var(--text-secondary);
  line-height:1.9
}
.memo-wall .memo-card .mk-body {
  height:calc(4 * 1.9em)
}
.memo-card .mk-who {
  font-size:10px;
  background:none!important;
  padding:0;
  color:var(--mr-muted)!important
}
.memo-card .mk-date {
  font-size:9px
}
.memo-card .mk-done {
  width:34px;
  height:34px;
  background:color-mix(in srgb,var(--mr-card) 85%,transparent);
  right:9px;
  bottom:9px;
  border-radius:50%
}
.memo-card .mk-labels {
  gap:5px;
  margin-top:12px
}
.memo-card .mk-labels .label {
  font-size:10px
}
.memo-card .mk-due {
  font-size:10px
}
.memo-card.done {
  opacity:.6
}
.memo-search,input#memo-q {
  background:var(--mr-card);
  border-color:transparent
}
#view-memo .seg {
  padding:4px
}
#view-memo .narrow {
  max-width:100%
}
.mc-head {
  gap:7px;
  margin-bottom:18px
}
.mc-title {
  font-size:25px;
  font-weight:800;
  letter-spacing:-.05em
}
.mc-nav {
  width:36px;
  height:36px;
  min-height:36px;
  border-radius:50%;
  background:var(--mr-bg)
}
.mc-nav.add {
  font-size:23px;
  color:var(--mr-accent);
  background:var(--mr-soft)
}
.mc-grid-head {
  font-size:11px;
  color:var(--mr-muted)
}
.mc-grid {
  border-color:var(--mr-line)
}
.mc-cell {
  border-color:var(--mr-line);
  padding-top:6px
}
.mc-cell .dn {
  font-size:12px
}
.cal-bar {
  border-radius:5px;
  font-size:10px;
  line-height:1.5;
  padding:2px 4px;
  margin-top:3px
}
.cal-bar.memo {
  background:var(--mr-soft);
  color:var(--mr-accent)
}
.mc-cell.today .dn {
  background:var(--mr-accent);
  color:#fff;
  border-radius:50%
}
.mc-legend {
  font-size:10px
}
#view-cal .card {
  box-shadow:none
}
.trip-card,.tr-card {
  border-radius:22px;
  border:0;
  overflow:hidden
}
.trip-card h3,.tr-card h3 {
  font-size:19px
}
.photo-grid img,.ph-grid img {
  border-radius:12px
}
.album-card {
  border-radius:20px;
  overflow:hidden
}
.price-bar {
  font-size:11px
}
.refresh-pill {
  background:var(--mr-soft);
  color:var(--mr-accent);
  border:0;
  border-radius:10px;
  min-height:34px;
  padding:8px 12px;
  font-size:11px
}
.nw-mode {
  padding:3px;
  border-radius:10px;
  background:var(--fill)
}
.nw-mode button {
  font-size:11px;
  border-radius:8px;
  padding:7px 10px
}
.nw-mode button[aria-pressed="true"] {
  background:var(--mr-card)
}
.nw-sec {
  border-bottom-color:var(--mr-line)
}
#home-news .card {
  padding:25px
}
.login-card {
  border:0;
  border-radius:28px;
  box-shadow:0 16px 65px #1733540a;
  padding:34px
}
.login-card h1 {
  font-size:33px;
  font-weight:850
}
.login-card .lead {
  font-size:13px;
  line-height:1.9;
  color:var(--mr-muted)
}
.login-card .primary {
  width:100%;
  min-height:49px
}
#offline-bar {
  font-size:11px;
  padding:9px 22px;
  background:var(--mr-soft);
  color:var(--mr-accent)
}
@media(min-width:1000px) {
  .topbar {
    padding-inline:max(28px,calc((100vw - 1104px)/2))
  }
  .wrap>section#view-home {
    padding-top:4px
  }
  .tabbar {
    bottom:18px
  }
  .card {
    padding:26px 28px
  }
  #view-spend #pane-chart {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
  }
  #pane-chart>#split,#pane-chart>#look,#pane-chart>#dig,#pane-chart>.tiles {
    grid-column:1/-1
  }
  #pane-chart>div[style="height:18px"] {
    display:none
  }
  #pane-chart>.card {
    margin:0
  }
  #pane-chart>.card:has(#tx-table) {
    grid-column:1/-1
  }
  #view-memo .memo-card .mk-open {
    padding:22px
  }
  body.pinned .topbar {
    padding-inline:25px
  }
}
@media(max-width:700px) {
  :root {
    --mr-top:62px;
    --mr-bottom:75px
  }
  .wrap {
    padding:10px 18px calc(var(--mr-bottom) + 33px + env(safe-area-inset-bottom,0px))
  }
  .topbar {
    padding-inline:18px;
    gap:7px
  }
  .topbar .hamburger {
    width:27px;
    padding-inline:4px;
    margin-right:1px
  }
  .view-title {
    font-size:21px
  }
  .topbar .switch {
    margin-left:3px
  }
  .topbar .switch .lb2 {
    font-size:9px
  }
  .topbar #top-search,.topbar #top-settings {
    width:35px
  }
  .tabbar {
    width:calc(100% - 24px);
    bottom:9px;
    border-radius:24px;
    padding-inline:8px;
    gap:1px
  }
  .tabbar .mi {
    font-size:9px;
    padding-top:5px;
    gap:6px;
    border-radius:14px
  }
  .tabbar .mi .ic {
    width:23px;
    height:23px
  }
  .mr-nav-svg {
    width:22px;
    height:22px
  }
  .card {
    padding:22px 21px;
    margin-bottom:14px;
    border-radius:23px
  }
  h2 {
    font-size:17px
  }
  .card>h2 {
    margin-bottom:17px
  }
  .narrow {
    max-width:100%
  }
  .seg button {
    font-size:12px;
    padding:9px 13px;
    min-height:37px
  }
  #ledger-sub {
    gap:25px;
    margin-bottom:1px
  }
  #ledger-sub button {
    font-size:17px;
    padding-bottom:13px
  }
  #view-ledger>.seg-scroll {
    margin-bottom:16px!important
  }
  #iv-sub {
    margin-bottom:18px!important
  }
  #iv-sub button {
    padding:7px 15px;
    min-height:34px
  }
  .data-range {
    font-size:9px;
    gap:9px
  }
  .ctrl-row {
    margin:18px 0 9px
  }
  #spend-sub {
    gap:16px
  }
  #spend-sub button {
    font-size:12px
  }
  .filter-pill {
    font-size:10px;
    padding:7px 10px;
    min-height:32px
  }
  .filter-sum {
    font-size:10px
  }
  .tiles {
    grid-template-columns:1fr 1fr;
    gap:10px
  }
  .tile {
    padding:16px 18px
  }
  .tile .v {
    font-size:24px
  }
  #app > #sync {
    bottom:calc(var(--mr-bottom) + 19px + env(safe-area-inset-bottom,0px));
    max-width:85vw;
    font-size:11px
  }
  .memo-wall {
    gap:11px
  }
  .memo-col {
    gap:11px
  }
  .memo-card {
    border-radius:18px
  }
  .memo-card .mk-open {
    padding:16px 15px 30px
  }
  .memo-card .mk-title {
    font-size:15px
  }
  .memo-card .mk-body {
    font-size:12px
  }
  .memo-card .mk-labels {
    gap:3px
  }
  .memo-card .mk-due {
    font-size:9px
  }
  .memo-card .mk-done {
    width:31px;
    height:31px
  }
  .mc-title {
    font-size:23px
  }
  .mc-head {
    margin-bottom:14px;
    gap:4px
  }
  .mc-nav {
    width:32px;
    height:32px;
    min-height:32px
  }
  .mc-cell .dn {
    font-size:11px
  }
  .cal-bar {
    font-size:9px;
    padding-inline:3px
  }
  .login-card {
    padding:29px 26px
  }
  #view-settings .card {
    padding:21px
  }
  .set-section {
    font-size:12px;
    margin-top:28px
  }
  dialog {
    border-radius:25px;
    padding:25px 22px
  }
  dialog .field {
    margin-bottom:13px
  }
  dialog input,dialog textarea,dialog select {
    font-size:16px
  }
  .card.capped {
    border-radius:21px
  }
  .tx-row {
    padding:16px 18px
  }
  .tx-row .title,.tx-row .amt {
    font-size:14px
  }
  #view-photo .card,#view-trip .card {
    padding:20px
  }
}
@media(max-width:380px) {
  .wrap {
    padding-inline:14px
  }
  .topbar {
    padding-inline:14px
  }
  .card {
    padding:20px 19px
  }
  .tabbar {
    width:calc(100% - 20px)
  }
  .view-title {
    font-size:20px
  }
  .topbar .switch .track {
    display:none
  }
  .topbar .switch[aria-pressed="true"] .lb2 {
    color:var(--mr-accent)
  }
  .seg button {
    padding-inline:10px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important
  }
}
/* Controls support the content hierarchy and retain existing handlers. */
#meta-row {
  margin:6px 0 2px;
  min-height:28px
}
#meta-row #meta-line {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px
}
#meta-line .sub {
  font-size:10px
}
#meta-row #go-make {
  background:none;
  border:0;
  box-shadow:none;
  color:var(--mr-muted);
  min-height:32px;
  padding:5px 0 5px 8px;
  font-size:10px
}
#period-bar {
  padding:8px 2px 12px;
  margin-bottom:8px;
  gap:10px
}
#period-bar .ghost.round {
  width:35px;
  height:35px;
  min-height:35px;
  background:var(--fill);
  color:var(--text-secondary)
}
#cyc-range {
  font-size:14px;
  letter-spacing:-.02em
}
#cyc-title {
  font-size:10px;
  margin-top:2px
}
#view-ledger>.seg-scroll {
  margin-bottom:10px!important
}
/* 캘린더는 새 상단 62px와 떠 있는 탭 99px를 비킨다. */
#view-cal > .card {
  height:calc(100dvh - 194px - env(safe-area-inset-bottom,0px));
  min-height:440px
}
body.cal-view .wrap {
  padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))
}
.mr-preview-badge {
  position:fixed;
  z-index:450;
  left:50%;
  transform:translateX(-50%);
  top:70px;
  font-size:10px;
  line-height:20px;
  padding:0 9px;
  border-radius:10px;
  color:#506174;
  background:#edf1f6;
  border:1px solid #dce3eb;
  pointer-events:none
}
@media(max-width:640px) {
  #view-cal > .card {
    height:calc(100dvh - 181px - env(safe-area-inset-bottom,0px));
    min-height:380px
  }
  .mr-preview-badge {
    top:66px
  }
}
#mc-grid {
  height:calc(var(--mr-cal-weeks,6) * 72px);
  grid-template-rows:repeat(var(--mr-cal-weeks,6),minmax(0,1fr))
}
.cal-bars {
  grid-auto-rows:14px;
  gap:2px;
  margin-top:3px
}
.cal-bar {
  margin:0;
  padding:0 3px;
  line-height:14px;
  font-size:10px;
  border-radius:4px
}
.cal-day {
  width:24px;
  height:24px;
  line-height:24px;
  font-size:12px
}
.cal-day.today {
  background:var(--mr-accent);
  color:var(--mr-card)
}
.cal-wd {
  font-size:11px;
  padding-bottom:9px
}
.cal-week {
  padding-top:6px
}
.cal-week:last-child {
  border-bottom:0
}
#view-cal>.card {
  min-height:637px;
  height:auto;
  max-height:none;
  padding:24px 20px
}
#mc-day {
  min-height:140px;
  max-height:220px;
  margin-top:12px;
  padding-top:17px
}
.mcd-head .d {
  font-size:14px
}
.mcd-rows {
  padding-top:10px
}
.ev-row.sm {
  min-height:49px
}
.mc-head {
  flex:none
}
@media(min-height:800px) {
  #view-cal>.card {
    height:calc(100dvh - 181px);
    min-height:0
  }
  #mc-grid {
    height:calc(var(--mr-cal-weeks,6) * 69px)
  }
  #mc-day {
    min-height:110px
  }
}
/* Three event rows (including +N) stay readable; six-week months may scroll. */
#mc-grid {
  height:calc(var(--mr-cal-weeks,6)*76px)
}
.cal-week {
  padding:4px 0 3px
}
.cal-bars {
  grid-auto-rows:13px;
  gap:2px;
  margin-top:2px
}
.cal-bar {
  font-size:9.5px;
  line-height:13px
}
.cal-more {
  line-height:13px
}
.cal-day {
  font-size:13px
}
.cal-wd {
  font-size:11px
}
#view-cal>.card {
  min-height:calc(var(--mr-cal-weeks,6)*76px + 230px)
}

/* Visible controls retain at least a 44px effective touch target. */
.topbar .hamburger{width:38px;height:38px;min-width:38px;padding:8px;position:relative}.topbar .hamburger::after{content:"";position:absolute;inset:-3px}.mc-nav{width:38px;height:38px;min-width:38px;min-height:38px;position:relative}.mc-nav::after{content:"";position:absolute;inset:-3px}.mc-head{gap:4px}.mc-title{min-width:0}.mc-title-t{white-space:nowrap}

.topbar #top-search,.topbar #top-settings{width:38px;height:38px;min-width:38px}.mc-nav{width:44px;height:44px;min-width:44px;min-height:44px}.mc-nav::after{inset:0}.mc-title{font-size:22px}.mc-head{margin-bottom:12px;gap:3px}#view-cal>.card{padding:18px}#mc-grid{height:calc(var(--mr-cal-weeks,6)*70px)}.cal-week{padding:0}.cal-bars{margin-top:2px;gap:2px;grid-auto-rows:13px}#mc-day{min-height:90px}#view-cal>.card{min-height:calc(var(--mr-cal-weeks,6)*70px + 218px)}@media(min-height:800px){#view-cal>.card{min-height:0;height:calc(100dvh - 181px);padding:18px}#mc-day{min-height:80px}}

#app > #sync{bottom:calc(var(--mr-bottom) + 36px + env(safe-area-inset-bottom,0px))}

/* Shared type roles across home, calendar, ledger, gallery, notes and travel. */
:root{--mori-type-body:14px;--mori-type-label:13px;--mori-type-note:12px;--mori-type-title:16px}
body,button,input,select,textarea{font-family:"Mori Pretendard",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#app :where(label,button,input,select,textarea),dialog :where(label,button,input,select,textarea){font-family:inherit}
#app .view-title,dialog h3{font-size:var(--mori-type-title)}
#app :where(.hint,.note,.sub,.muted),dialog :where(.hint,.note){font-size:var(--mori-type-note)}
#app :where(input,select,textarea){font-size:var(--mori-type-body)}

#app label{font-size:var(--mori-type-label);line-height:1.5}
#app :where(.card>h2,.card>h3,.section-title){font-size:var(--mori-type-title)}

/* Fixed six-week calendar; one event per line. */
#mc-grid{height:384px;grid-template-rows:repeat(6,minmax(0,1fr))}
.cal-bars{grid-auto-rows:12px;gap:1px}
.cal-bar{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;line-height:12px;padding:0 2px}
.cal-more{line-height:12px}
.cal-day{height:17px;line-height:17px}
#mc-grid .cal-day{font-size:8px;font-weight:600;height:15px;line-height:15px}
#mc-grid .cal-bars{margin-top:1px;gap:1px;grid-auto-rows:12px}
#mc-grid .cal-bar{font-size:7.5px;line-height:12px;padding:0 1px;letter-spacing:-.035em}
#mc-grid .cal-more{font-size:8px;line-height:11px}
#view-cal .cal-wd{font-size:8px}
#view-cal .mc-title{font-size:16px}
#view-cal .mcd-head .d{font-size:11px}
#mc-day .hm-txt,#mc-day .ttl{white-space:normal;overflow-wrap:anywhere}

/* ───────────── 설정: 목록 → 하위 화면 (2026-09-27, 결정대장 D-62) ─────────────
   첫 화면은 iOS 설정·토스처럼 한 줄에 아이콘 · 이름 · 지금 값 요약 · ›. 항목이 늘어도 아래로 한 줄씩. */
#view-settings .set-menu { margin:6px 0 0; border:1px solid var(--mr-line); border-radius:var(--mr-radius); background:var(--mr-card); overflow:hidden; }
#view-settings .set-menu[hidden] { display:none; }
#view-settings .set-menu-row { position:relative; display:grid; grid-template-columns:32px auto minmax(0,1fr) 12px; align-items:center; column-gap:12px; width:100%; min-height:56px; padding:10px 16px; border:0; border-radius:0; background:transparent; color:var(--mr-ink); font:inherit; text-align:left; }
#view-settings .set-menu-row + .set-menu-row::before { content:""; position:absolute; left:60px; right:0; top:0; border-top:1px solid var(--mr-line); }
#view-settings .set-menu-row::after { content:"›"; grid-column:4; color:var(--mr-muted); font-size:20px; line-height:1; }
#view-settings .set-menu-row .ic { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--fill); font-size:17px; }
#view-settings .set-menu-row b { font-size:15px; font-weight:650; white-space:nowrap; }
#view-settings .set-menu-row small { min-width:0; color:var(--mr-muted); font-size:12px; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#view-settings .set-menu-row:active { background:var(--fill); }
#view-settings .set-pane > .set-sec:first-child { margin-top:6px; }
/* 2026-09-27 일반 설정은 첫 화면에 바로 펼침 — 그 아래 '탭별 설정' 제목 + 목록 */
#view-settings .set-general > .set-sec:first-child { margin-top:6px; }
#view-settings .set-general[hidden] { display:none; }
#view-settings .set-general > .set-sec:last-child { margin-top:22px; }
/* '›' 줄 — 다른 화면·창을 여는 설정 */
#view-settings .set-link { display:flex; align-items:center; gap:8px; width:100%; min-height:48px; padding:10px 22px 10px 0; border:0; border-radius:0; background:transparent; color:var(--mr-ink); font:inherit; font-size:14px; font-weight:650; text-align:left; position:relative; }
#view-settings .set-link::after { content:"›"; position:absolute; right:2px; top:50%; transform:translateY(-52%); color:var(--mr-muted); font-size:20px; font-weight:400; }
#view-settings .set-link span { margin-left:auto; color:var(--mr-muted); font-size:12px; font-weight:500; text-align:right; }
#view-settings .set-links .set-link + .set-link { border-top:1px solid var(--mr-line); }
#view-settings .card > .set-link { margin-top:10px; border-top:1px solid var(--mr-line); }
/* 지출 카테고리 격자 (뱅크샐러드 '카테고리 관리'와 같은 모양) */
#view-settings .set-cat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:10px; }
#view-settings .set-cat { display:flex; flex-direction:column; align-items:center; gap:2px; min-height:78px; padding:8px 2px; border:1px solid transparent; border-radius:12px; background:var(--fill); color:var(--mr-ink); font:inherit; }
#view-settings .set-cat .ic { font-size:21px; line-height:1.2; }
#view-settings .set-cat b { font-size:12px; font-weight:650; line-height:1.3; text-align:center; overflow-wrap:anywhere; }
#view-settings .set-cat small { color:var(--mr-muted); font-size:10.5px; }
#view-settings .set-cat[aria-expanded="true"] { border-color:var(--mr-accent); background:color-mix(in srgb,var(--mr-accent) 10%,var(--fill)); }
#view-settings .set-cat-add { border:1px dashed var(--mr-line); background:transparent; color:var(--mr-muted); }
#view-settings .set-cat-subs { margin-top:10px; padding:10px 12px; border-radius:12px; background:var(--fill); }
#view-settings .set-cat-subs b { font-size:13px; }
#view-settings .set-cat-subs div { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
#view-settings .set-cat-subs span, #view-settings .set-chips span { padding:5px 10px; border-radius:999px; background:var(--mr-card); font-size:12px; font-weight:600; }
#view-settings .set-cat-subs em { color:var(--mr-muted); font-size:12px; font-style:normal; align-self:center; }
#view-settings .set-cat-subs .ml-cat-add { padding:5px 10px; border:1px dashed var(--mr-line); border-radius:999px; background:transparent; color:var(--mr-muted); font:inherit; font-size:12px; }
#view-settings .set-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
#view-settings .set-chips span { background:var(--fill); }
#view-settings .set-inline-add { display:flex; gap:6px; margin-top:10px; }
#view-settings .set-inline-add input { flex:1 1 auto; min-width:0; min-height:36px; padding:0 12px; border:1px solid var(--mr-line); border-radius:10px; background:var(--mr-card); font:inherit; font-size:13px; }
#view-settings .msg:empty { display:none; }
@media (max-width:360px) { #view-settings .set-cat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* 월급 배분 칸: 폰에서도 두 칸씩, 입력 높이는 설정 화면 알약·칩과 맞춘다 */
#view-settings .sal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 10px; }
#view-settings .sal-grid input, #view-settings #cyc-start { min-height:40px; height:40px; font-size:14px; }
/* ───── 메모 한 줄 목록 (2026-09-28 사용자 “들쭉날쭉 … 동일하게 뭐 이모지 색만 다르게”, 시안 B) ─────
   흰 판 하나에 같은 높이 줄: 이모지 동그라미 | 제목 한 줄 + 사람 · 날짜 · 마감 · 라벨 · 본문 한 줄 | ✓.
   옛 .memo-card 규칙(사람별 바탕 · 둥근 카드 · 완료 버튼 절대 위치)은 이 안에서 끈다. */
#view-memo .memo-rows { background:var(--mr-card,var(--surface-1)); border:1px solid color-mix(in srgb,var(--mr-line) 70%,transparent); border-radius:16px; overflow:hidden; }
#view-memo .memo-rows .memo-card { display:flex; align-items:center; gap:4px; padding:0 10px 0 0; margin:0; border:0; border-radius:0; background:transparent; box-shadow:inset 0 1px 0 color-mix(in srgb,var(--mr-line) 60%,transparent); opacity:1; }
#view-memo .memo-rows .memo-card:first-child { box-shadow:none; }   /* 구분선은 테두리 대신 그림자 — 첫 줄만 1px 낮아지지 않게 */
#view-memo .memo-rows .memo-card::before { display:none; }
#view-memo .memo-rows .memo-card .mk-open { flex:1; min-width:0; min-height:0; display:flex; align-items:center; gap:11px; padding:10px 4px 10px 12px; border:0; background:none; text-align:left; }
#view-memo .memo-rows .mk-emo { flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:hsl(var(--h) 75% 92%); font-size:17px; line-height:1; }
#view-memo .memo-rows .mk-tx { flex:1; min-width:0; display:block; }
#view-memo .memo-rows .mk-title { display:block; margin:0; font-size:14px; font-weight:650; line-height:1.4; color:var(--mr-ink,var(--text-primary)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:unset; }
#view-memo .memo-rows .mk-meta { display:block; margin-top:1px; font-size:11.5px; line-height:1.4; color:var(--mr-muted,var(--muted)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#view-memo .memo-rows .mk-due { padding:0; background:none; font-size:inherit; font-weight:700; color:var(--mr-muted,var(--muted)); }
#view-memo .memo-rows .mk-due.today { color:var(--series-2); }
#view-memo .memo-rows .mk-due.over { color:var(--critical); }
#view-memo .memo-rows .mk-lbl { color:hsl(var(--h) 55% 42%); font-weight:600; }
#view-memo .memo-rows .memo-card .mk-done { position:static; flex:none; width:28px; height:28px; min-height:0; padding:0; display:grid; place-items:center; border:1.5px solid color-mix(in srgb,var(--mr-line) 100%,#c9d0d8); border-radius:50%; background:transparent; color:transparent; font-size:13px; font-weight:800; }
#view-memo .memo-rows .memo-card .mk-done:hover { color:var(--good); border-color:var(--good); }
#view-memo .memo-rows .memo-card.done .mk-done { border-color:transparent; background:color-mix(in srgb,var(--good) 16%,transparent); color:var(--good); }
#view-memo .memo-rows .memo-card.done .mk-title { text-decoration:line-through; color:var(--mr-muted,var(--muted)); }
#view-memo .memo-rows .memo-card.done .mk-emo { opacity:.75; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #view-memo .memo-rows .mk-emo { background:hsl(var(--h) 35% 24%); } :root:not([data-theme="light"]) #view-memo .memo-rows .mk-lbl { color:hsl(var(--h) 60% 70%); } }
:root[data-theme="dark"] #view-memo .memo-rows .mk-emo { background:hsl(var(--h) 35% 24%); }
:root[data-theme="dark"] #view-memo .memo-rows .mk-lbl { color:hsl(var(--h) 60% 70%); }
/* 쓰기 창 — 이모지 고르기 */
.memo-emoji-pick { display:flex; flex-wrap:wrap; gap:6px; }
.memo-emoji-pick button { min-width:36px; height:34px; min-height:34px; padding:0 8px; border:1px solid color-mix(in srgb,var(--mr-line) 80%,transparent); border-radius:99px; background:hsl(var(--h, 210) 75% 95%); font-size:16px; line-height:1; }
.memo-emoji-pick button[data-e=""] { font-size:12px; font-weight:600; color:var(--text-secondary); background:var(--mr-card,var(--surface-1)); }
.memo-emoji-pick button.on { border-color:var(--mr-accent,#356cf5); box-shadow:0 0 0 2px color-mix(in srgb,var(--mr-accent,#356cf5) 30%,transparent); }
/* ───── 앱 어디서나 같은 날짜 고르기 (datepick.js, 2026-09-28 D-75) ─────
   사용자 “좋은 캘린더 같은 형태 내비두고 왜 이상한 엄청 아날로그틱한 달력을 보여주는거야?”.
   칸 = 읽히는 날짜 단추, 누르면 아래에서 올라오는 달력 창(PC 는 가운데). 일정 창 달력(#dt-dlg)과 같은 모양. */
input.md-src { display:none !important; }
.md-field { display:flex; align-items:center; gap:8px; width:100%; min-width:0; height:auto; min-height:0; padding:8px 12px 8px 14px; border:1px solid var(--mr-line); border-radius:13px; background:var(--mr-bg); color:var(--mr-ink,var(--text-primary)); font:inherit; font-size:14.5px; line-height:20px; text-align:left; cursor:pointer; box-shadow:none; }   /* 옆 입력칸(38px)과 같은 높이 */
.md-field:disabled { opacity:.55; cursor:default; }
.md-field .md-v { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:600; }
.md-field .md-rel { flex:none; font-size:12px; color:var(--mr-muted,var(--muted)); }
.md-field .md-ph { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--muted); }
.md-field .md-ic { flex:none; margin-left:auto; font-size:13px; line-height:1; opacity:.7; }
.row > .md-field { flex:1 1 0; }
#md-dlg { box-sizing:border-box; width:min(440px,100vw); max-width:100vw; margin:auto auto 0; padding:10px 16px calc(16px + env(safe-area-inset-bottom,0px)); border:0; border-radius:20px 20px 0 0; background:var(--mr-card,var(--surface-1)); color:var(--mr-ink,var(--text-primary)); }
#md-dlg::backdrop { background:#10181f80; }
@media (min-width:700px) { #md-dlg { margin:auto; border-radius:20px; padding-bottom:16px; } #md-dlg .md-grab { display:none; } }
#md-dlg .md-grab { width:36px; height:4px; margin:0 auto 10px; border-radius:2px; background:color-mix(in srgb,var(--mr-line) 100%,#aab3bd); }
#md-dlg .md-h { display:flex; align-items:baseline; gap:8px; }
#md-dlg .md-h b { font-size:16px; font-weight:750; }
#md-dlg .md-note { margin-left:auto; font-size:12px; color:var(--mr-muted,var(--muted)); text-align:right; }
#md-dlg .md-big { margin:4px 0 10px; font-size:21px; font-weight:800; letter-spacing:-.02em; }
#md-dlg .md-big small { margin-left:8px; font-size:12.5px; font-weight:650; color:var(--mr-accent,#356cf5); }
#md-dlg .md-big .md-none { font-size:15px; font-weight:600; color:var(--mr-muted,var(--muted)); }
#md-dlg .md-quick { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
#md-dlg .md-quick[hidden] { display:none; }
#md-dlg .md-quick button { min-height:32px; padding:4px 12px; border:0; border-radius:99px; background:var(--fill,#f1f3f6); color:var(--text-secondary); font-size:12.5px; font-weight:650; }
#md-dlg .md-quick button.on { background:color-mix(in srgb,var(--mr-accent,#356cf5) 14%,transparent); color:var(--mr-accent,#356cf5); }
#md-dlg .md-nav { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
#md-dlg .md-mv { width:34px; height:34px; min-width:34px; min-height:34px; padding:0; border:0; border-radius:50%; background:var(--fill,#f1f3f6); color:var(--text-secondary); font-size:17px; }
#md-dlg .md-ym { min-height:34px; padding:4px 8px; border:0; background:none; box-shadow:none; font-size:15px; font-weight:750; color:var(--mr-ink,var(--text-primary)); }
#md-dlg .md-sp { flex:1; }
#md-dlg .md-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px 0; align-content:start; min-height:276px; text-align:center; }   /* 날짜 판 · 달 판을 오가도 창 높이가 같게 */
#md-dlg .md-grid .md-wd { padding:4px 0; font-size:11px; color:var(--mr-muted,var(--muted)); }
#md-dlg .md-grid .md-wd.red { color:var(--critical); }
#md-dlg .md-grid button { min-height:40px; height:40px; padding:0; border:0; border-radius:10px; background:none; box-shadow:none; color:var(--mr-ink,var(--text-primary)); font-size:15px; font-variant-numeric:tabular-nums; }
#md-dlg .md-grid button.off { opacity:.35; }
#md-dlg .md-grid button.red { color:var(--critical); }
#md-dlg .md-grid button.today { font-weight:800; color:var(--mr-accent,#356cf5); }
#md-dlg .md-grid button.in { border-radius:0; background:color-mix(in srgb,var(--mr-accent,#356cf5) 12%,transparent); }
#md-dlg .md-grid button.from { background:color-mix(in srgb,var(--mr-accent,#356cf5) 25%,transparent); }
#md-dlg .md-grid button.sel { background:var(--mr-accent,#356cf5); color:#fff; font-weight:800; }
#md-dlg .md-grid button:disabled { opacity:.2; }
#md-dlg .md-grid.md-months { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:6px 0; }
#md-dlg .md-grid.md-months button { height:46px; border-radius:12px; background:var(--fill,#f1f3f6); font-size:14px; font-weight:650; }
#md-dlg .md-grid.md-months button.now { color:var(--mr-accent,#356cf5); }
#md-dlg .md-grid.md-months button.sel { background:var(--mr-accent,#356cf5); color:#fff; }
#md-dlg .md-foot { display:flex; gap:8px; margin-top:12px; }
#md-dlg .md-foot button { flex:1; min-height:46px; border-radius:12px; font-size:15px; font-weight:700; }
#md-dlg .md-cancel { border:0; background:var(--fill,#f1f3f6); color:var(--text-secondary); }