/* 초이장부 27판, set stream: the app shell (side menu, phone bars), 설정, 전체, 부동자산, 금융자산 as on the boards.
   Loaded last. Black and white through the tokens; hover only under (hover:hover). */

/* ===== PC side menu (common.py sidebar): 232px column, mark and name, 36px rows 2px apart, small grey section labels,
   거래 입력 across the column with a quiet N, 설정 under it ===== */
.side-brand{display:flex;align-items:center;gap:9px;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;border-radius:8px;min-width:0}
.side-brand:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.side-bt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.side-bt small{font-size:11.5px;font-weight:500;color:var(--ink-3);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
@media (hover:hover){.side-brand:hover .side-bt>span{text-decoration:underline;text-underline-offset:3px}}
@media (min-width:1280px){
  .app .side{padding:24px 16px 24px;gap:0}
  .app .side .side-brand{padding:0 10px;margin:0 0 22px;min-height:26px;font-size:17px;font-weight:900;letter-spacing:-.03em}
  .app .side .side-nav{display:flex;flex-direction:column;gap:2px}
  .app .side .nav{display:flex;flex-direction:column;gap:2px}
  .app .side-nav .nav+.nav{margin-top:0}
  .app .side .nav-sec{padding:16px 12px 4px;margin:0;font-size:11px;line-height:16px;font-weight:700;color:var(--ph);letter-spacing:.08em}
  .app .side .nav button{height:36px;padding:0 12px;gap:10px;border-radius:8px;font-size:14px;font-weight:500;letter-spacing:0;color:var(--ink-2)}
  .app .side .nav button[aria-current="page"]{font-weight:700;color:var(--brand-ink)}
  .app .side .nav button.dev{color:var(--ink-4)}
  .app .side .nav button.dev[aria-current="page"]{color:var(--brand-ink)}
  .app .side .nav button.dev .dev-tag{font-size:11px;font-weight:500;margin-left:0}
  .app .side-cta{display:block!important;margin-top:16px}
  .app .side-cta .side-add{display:flex;width:100%;height:44px;border-radius:10px;justify-content:center;gap:0;font-size:14px;font-weight:700;padding:0 12px}
  .app .side-cta .side-add>.ico{display:none}
  .app .side-cta .side-add kbd{background:none;border:0;padding:0;margin-left:6px;font:inherit;font-weight:500;color:inherit;opacity:.55;box-shadow:none;min-width:0;height:auto}
  .app .side-foot{margin-top:6px;padding-top:0;gap:6px}
  .app .side-set{display:block!important}
  .app .side-set>button{width:100%}
}
/* the icon rail (768 to 1279px): the mark alone, centred */
@media (min-width:768px) and (max-width:1279px){
  .app .side .side-brand{justify-content:center;padding:2px 0 4px;width:100%}
  .app .side-cta{margin-top:4px}
  .app .side-cta .side-add{width:100%}
  .app .side .nav button{height:38px;border-radius:8px}
  .app .side-set>button{flex:none;width:100%;height:38px}
}
@media (hover:hover){.app .side .nav button:not([aria-current="page"]):hover{background:var(--surface-2);color:var(--ink)}}

/* ===== 부동자산, 금융자산 (D_desk_real, D_desk_fin, M_real, M_fin; p_dev.py, p_m2.py devpage) ===== */
.cm-note{padding:14px 18px;gap:14px;font-size:14px;line-height:20px}
.cm-go{flex:none;border:0;background:none;padding:0;font:inherit;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;white-space:nowrap;min-height:20px}
.cm-go:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
@media (hover:hover){.cm-go:hover{text-decoration:underline;text-underline-offset:3px}}
.cm-h{padding-bottom:10px}
.cm-row{line-height:19px}
.cm-row.cm-head{padding:8px 0 4px;line-height:16px}
.cm-row.cm-tot{padding:10px 0;font-size:14px;line-height:20px}
.cm-row.cm-tot>span,.cm-row.cm-tot .cm-v0,.cm-row.cm-tot .cm-v1{font-weight:900;color:var(--ink)}
.cm-row .badge{height:20px;padding:0 7px;font-size:11px;font-weight:700;border-radius:4px}
.cm-grid{gap:16px;padding-top:16px}
.cm-tile{border:1.5px dashed var(--s5);padding:16px 18px;gap:12px;min-height:180px}
.cm-tile b{font-size:14px;font-weight:700;line-height:20px}
.cm-tile p{font-size:12px;line-height:18px}
.cm-viz{display:flex;flex-direction:column;gap:12px}
.cm-line{width:100%;height:80px}
.cm-line polyline{stroke:var(--s5);stroke-width:3}
.cm-line line{stroke:var(--line);stroke-width:1}
.cm-stack{height:22px}
.cm-legend{gap:14px}
/* the page keeps the boards' 22px rhythm between the head, the note and the two sections */
@media (min-width:1100px){
  .content:has(>.cm-sec)>.cm-note{margin-top:0}
  .content:has(>.cm-sec)>.cm-sec{margin-top:0}
}
@media (max-width:700px){
  .cm-note{padding:12px 14px;gap:10px;font-size:12px;line-height:18px;align-items:center}
  .cm-go{font-size:12px}
  .cm-h{padding-bottom:9px}
  .cm-h .sub{font-size:11px}
  .cm-row{padding:10px 0;font-size:13px;column-gap:10px;row-gap:0;line-height:18px}
  .cm-row .cm-v1{font-size:13px;font-weight:700;line-height:18px}
  .cm-row .cm-d{font-size:11px;line-height:15px}
  .cm-row.cm-tot{padding:10px 0;font-size:16px;line-height:22px}
  .cm-row.cm-tot .cm-v1{font-size:16px;font-weight:900}
  .cm-row .badge{height:18px;padding:0 6px;font-size:10px}
  .cm-grid{gap:10px;padding-top:10px}
  .cm-tile{padding:12px 14px;gap:6px;border-radius:12px}
  .cm-tile b{font-size:13px;line-height:18px}
  .cm-tile p{font-size:11px;line-height:16px}
  .cm-tile .cm-ph{gap:6px}
  .cm-tile .cm-ph i{height:10px;border-radius:3px;background:var(--surface-3)}
  .cm-tile .cm-ph i:first-child{width:70%}
  .cm-tile .cm-ph i:last-child{width:45%}
}
@media (max-width:700px){.cm-tile{min-height:0}}
@media (max-width:1099px){
  .phead:has(.cm-tag)>.ttl>.ttl-row>h1{flex:0 1 auto}
  .phead .cm-tag{order:0;margin-right:auto;height:20px;padding:0 6px;font-size:11px;border-radius:4px;align-self:center}
}

/* ===== 설정 PC (D_desk_settings, p_settings.py) ===== */
.set-main>.set-sec{gap:0}
.set-main>.set-sec:first-child>.card-h{padding:6px 0 14px!important;min-height:0}
.set-main>.set-sec>.card-h .badge{height:20px;padding:0 7px;font-size:11px;font-weight:700;border-radius:4px;background:var(--surface-2);color:var(--ink-2)}
.set-fl .set-l{padding-top:9px}
.set-p{gap:10px;min-height:28px}
.set-p .ava{width:28px;height:28px;font-size:12px;font-weight:900}
.set-p .badge{height:20px;padding:0 7px;font-size:11px;font-weight:700;border-radius:4px;background:var(--surface-2);color:var(--ink-2)}
.set-ppl{gap:8px;padding-top:6px}
.set-ppl .set-inv{font-size:13px;font-weight:700;color:var(--ink);padding:2px 0;margin-top:2px;min-height:28px}
.set-pc{display:flex;flex-wrap:wrap;gap:8px 18px;padding-top:8px;font-size:13px;color:var(--ink)}
.set-pc>span{display:inline-flex;align-items:center;gap:8px}
.set-pc i{display:inline-block;width:18px;height:18px;border-radius:999px;flex:none}
.set-val{min-height:0;padding-top:8px;font-size:14px}
.set-val .set-link{padding:0;font-size:13px;color:var(--ink-3)}
.set-foot{justify-content:flex-end}
.set-foot .sp{flex:1}
.set-foot .btn{height:38px;padding:0 14px;border-radius:8px;font-size:14px}
.set-foot .btn.danger{background:var(--surface);border:1px solid var(--line);color:var(--ink);font-weight:500}
.set-foot .btn.pri:disabled{background:var(--ink);color:var(--brand-ink);opacity:.35}
.set-chk{display:flex;align-items:flex-start;gap:10px;padding-top:9px;cursor:pointer}
.set-chk input{margin-top:3px;flex:none}
.set-chk>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.set-chk b{font-size:14px;font-weight:700}
.set-chk small{font-size:12px;line-height:1.5}
.set-sec>p.sub{margin-top:16px}
.set-main #pf-pay{width:100%;max-width:420px}

/* ===== 설정 phone (M_settings, p_m2.py) ===== */
@media (max-width:1099px){
  .subhead .ttl{gap:2px;align-items:center}
  .subhead .ttl>.ibtn{position:relative;width:26px;height:36px;margin-left:-6px;padding:0;border:0;background:none;box-shadow:none;color:var(--ink)}
  .subhead .ttl>.ibtn::after{content:"";position:absolute;inset:0 -6px}
  .set-phone{border-top:2px solid var(--ink);gap:18px}
  .set-top{gap:12px;padding:14px 0 0;border-bottom:0}
  .set-avas .ava{width:36px;height:36px;font-size:12px;font-weight:900;box-shadow:0 0 0 2px var(--surface)}
  .set-avas .ava+.ava{margin-left:-10px}
  .set-top .t,.set-li .t{gap:0}
  .set-top b{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:24px}
  .set-top small,.set-li small{font-size:12px;line-height:18px}
  .set-li{padding:12px 0;border-bottom:0;border-top:1px solid var(--line-2);gap:10px}
  .set-li b{font-size:14px;font-weight:700;line-height:20px}
  .set-li>.ico{width:16px;height:16px}
  .set-del{margin:0;padding:10px 12px;font-size:13px;min-height:40px}
}
.set-p{height:28px;min-height:28px}
.set-p b{line-height:20px}
.set-ppl .set-inv{min-height:0;padding:0;line-height:20px}
.set-main textarea#lg-memo{min-height:96px;height:96px}
.set-val{padding-top:9px;line-height:20px}
.set-cols{padding-top:7px}
.set-cols button{width:24px;height:24px}

/* ===== 전체 (M_more): 20px title with the mark, quiet person card, 12px group labels, light tiles; 개발 예정 tiles stay white with grey text ===== */
.mt-head h1{font-size:20px!important;font-weight:900;letter-spacing:-.03em;gap:8px}
.mt-gear{width:36px;height:36px;border-radius:9px}
.mt-me{gap:12px;padding:12px 14px;border-radius:12px}
.mt-me .ava{width:34px;height:34px;font-size:12px;font-weight:900}
.mt-me .t{gap:0}
.mt-me .t b{font-size:14px;font-weight:700;line-height:20px}
.mt-me .t small{font-size:12px;line-height:18px}
.mt-g h2{font-size:12px;font-weight:700;color:var(--ink-3);margin:0 0 10px;line-height:16px}
.mt-grid{gap:8px}
.mt-tile{gap:6px;min-height:74px;padding:14px 4px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface)}
.mt-tile .ico{width:22px;height:22px}
.mt-tile b{font-size:12px;font-weight:700;line-height:18px}
.mt-tile.dev{background:var(--surface);border-color:var(--line-2);color:var(--ink-4)}
.mt-tile.dev b{color:var(--ink-4);font-weight:700}
.mt-tile small{font-size:10px;font-weight:500;color:var(--ink-4);margin-top:-2px;line-height:14px}
@media (hover:hover){.mt-tile:hover{border-color:var(--line)}}

/* ===== shell layout: the boards' main column keeps 22px between its sections (common.py page: padding 32px 44px, gap 22px) ===== */
@media (min-width:1280px){.content{gap:22px}}
.set-sub .set-chk,.set-sub .set-val,.set-sub .set-pc,.set-sub .set-cols{padding-top:0}
.set-sub .set-sec>p.sub{margin-top:4px}
.set-sub #pf-pay{width:100%}
/* the old glass rule gave the column a faint frame in dark mode: only the right hairline stays */
.app .side{border:0;border-right:1px solid var(--line);box-shadow:none}

/* ===== phone top bar on 홈 (M_home, p_m1.py): 22px mark, 16px name, 26px avatars overlapping 8px ===== */
@media (max-width:767px){
  .mtop-brand{gap:8px}
  .mtop-brand b{font-size:16px;font-weight:900;letter-spacing:-.03em}
  .mtop-ava>*+*{margin-left:-8px}
  .mtop-ava .ava{width:26px;height:26px;font-size:11px;font-weight:900;box-shadow:0 0 0 2px var(--surface)}
}

/* ===== phone tab bar (mcommon.py tabbar): 24px icons 10px under the hairline, grey labels, the current tab ink and heavier, the + square raised 6px ===== */
@media (max-width:767px){
  .tabbar{padding-top:6px!important}
  .tabbar button{color:var(--ph)}
  .tabbar button>svg{width:24px;height:24px}
  .tabbar button[aria-current="page"]{font-weight:900!important}
  .tabbar button[aria-current="page"]>svg{stroke-width:2.2}
  .tabbar .add{margin-top:-3px!important;align-self:flex-start}
}

/* ===== phone touch targets (36px) for the small text links on these screens, without changing the drawn layout ===== */
@media (max-width:1099px){
  .cm-go,.set-sub .set-link{position:relative}
  .cm-go::after,.set-sub .set-link::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:36px;transform:translateY(-50%)}
  .ph-back{position:relative}
  .ph-back::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:36px;transform:translateY(-50%)}
}
@media (hover:none){.app .side .nav button:not([aria-current="page"]):hover{background:none;color:var(--ink-2)}.app .side .nav button.dev:not([aria-current="page"]):hover{color:var(--ink-4)}}
.set-nav button[aria-current="page"] span{color:var(--s5)}
@media (min-width:1100px){.content:has(>.set-wrap)>.phead{min-height:43px}}
@media (max-width:1099px){.set-li small{line-height:17px}}
@media (max-width:767px){.mtop{padding:0 var(--gut,20px)!important}}
@media (max-width:767px){.mtop-ava{margin-right:0}}