/* 1단계 공통 뼈대: 섹션 메뉴와 공통 토큰 (마지막에 읽힘). 기존 토큰(--ink, --line, --r 등)은 다시 정의하지 않는다 */

/* ---------- 앱 공통 의미 토큰 (새 이름만) ---------- */
:root{
  --who-s:#2F5BFF;--who-y:#FF6B5A;--who-j:#12B886;--who-a:#9AA1AD;
  --k-w:#7048E8;--k-s:#1C7ED6;--k-f:#F08C00;--k-l:#0CA678;
  --rule:2px solid var(--ink);--r-list:14px;--sec-tabs-h:44px}

/* ---------- PC 사이드: 섹션 머리 사이 선 ---------- */
.app .side .app-sec.sep{border-top:1px solid var(--line)!important;margin-top:12px!important}
@media (min-width:1280px){.app .side .app-sec.sep{padding-top:16px!important}}
@media (min-width:768px) and (max-width:1279px){.app .side .app-sec.sep{padding-top:12px!important}}
.side .app-sec.sec-head:not(.l-sec){cursor:default}

/* PC 사이드 메뉴가 스크롤될 때: 가려진 쪽 메뉴를 흐리게 지우면 꺼진 메뉴처럼 보이므로, 글자는 그대로 두고 가장자리에 얇은 선과 그림자만 둔다 */
.side-nav[data-ft],.side-nav[data-fb]{-webkit-mask-image:none!important;mask-image:none!important}
.side-navw::before,.side-navw::after{content:"";position:absolute;left:-6px;right:-6px;height:12px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:1}
.side-navw::before{top:0;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(21,23,28,.07),rgba(21,23,28,0))}
.side-navw::after{bottom:0;border-bottom:1px solid var(--line);background:linear-gradient(0deg,rgba(21,23,28,.07),rgba(21,23,28,0))}
.side-navw:has(>.side-nav[data-ft])::before,.side-navw:has(>.side-nav[data-fb])::after{opacity:1}
.side-navw .nav-more{z-index:2}

/* ---------- 휴대폰 맨 위: 섹션 로고와 이름, 오른쪽 설정 ---------- */
.sec-top .mtop-brand{cursor:pointer;min-width:0}
.sec-top .mtop-brand b{white-space:nowrap}
.mtop .sec-gear{width:32px;height:32px;flex:none;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;padding:0}
.mtop .sec-gear[aria-current="page"]{border-color:var(--ink);color:var(--ink)}
/* 본문 제목이 스크롤되면 얇은 막대가 나오는 화면: 맨 위 막대는 붙지 않고 같이 올라감 */
.mtop.sec-top.flow{position:relative!important;top:auto!important;box-shadow:none!important}

/* ---------- 휴대폰 섹션 상단 탭: 글자 탭과 2px 검은 밑줄 (끈적이지 않음) ---------- */
.sec-tabs{display:none}
@media (max-width:767px){
  .sec-tabs{display:block;position:relative;background:var(--surface);word-break:keep-all}
  .sec-tabs-in{display:flex;gap:22px;padding:0 var(--gut,20px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;box-shadow:inset 0 -1px 0 var(--line)}
  .sec-tabs-in::-webkit-scrollbar{display:none}
  .sec-tabs[data-sec="ledger"] .sec-tabs-in{gap:18px}
  .sec-tabs button{flex:none;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;margin:0;font:inherit;font-size:15px;font-weight:600;line-height:23px;letter-spacing:-.01em;color:var(--ink-3);padding:9px 0 10px;white-space:nowrap;cursor:pointer}
  .sec-tabs button[aria-current="page"]{color:var(--ink);font-weight:800;border-bottom-color:var(--ink)}
  .sec-tabs::before,.sec-tabs::after{content:"";position:absolute;top:0;bottom:1px;width:40px;pointer-events:none;opacity:0;transition:opacity .15s}
  .sec-tabs::after{right:0;background:linear-gradient(90deg,rgba(255,255,255,0),var(--surface) 75%)}
  .sec-tabs::before{left:0;background:linear-gradient(270deg,rgba(255,255,255,0),var(--surface) 75%);z-index:1}
  .sec-tabs.fr::after,.sec-tabs.fl::before{opacity:1}
  /* 탭 줄 아래 본문은 18 띄움 (장부 서브 화면과 같은 값) */
  .main:has(.sec-tabs) .content{padding-top:18px}
}

/* ---------- 휴대폰 아래 탭 (버틀러, 일정, +, 투자, 장부) ---------- */
.tabbar.sec-bar{grid-template-columns:repeat(5,1fr)}
.tabbar.sec-bar>span{display:block}
.tabbar.sec-bar button{white-space:nowrap;word-break:keep-all}

/* ---------- 장부 톤 목록 (공통 설정, 투자 홈, 버틀러 + 고르기) ---------- */
.as-sec{margin-top:6px;word-break:keep-all}
.as-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:var(--rule)}
.as-h h2{font-size:15px;font-weight:900;letter-spacing:-.02em;margin:0;color:var(--ink)}
.as-h .sub{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.as-note{margin:12px 0 4px;font-size:13px;line-height:1.6;color:var(--ink-3)}
.ap-list{display:flex;flex-direction:column}
.ap-row{display:flex;align-items:center;gap:14px;width:100%;min-height:62px;padding:10px 0;border:0;border-bottom:1px solid var(--surface-3);background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer;word-break:keep-all}
.ap-row .ap-ic{width:36px;height:36px;flex:none;border:1px solid var(--line);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);background:var(--surface)}
.ap-row .t{flex:1;min-width:0;display:flex;flex-direction:column}
.ap-row .t b{font-size:14px;font-weight:700;line-height:20px}
.ap-row .t small{font-size:12px;color:var(--ink-3);line-height:17px}
.ap-row>.ico:last-child{color:var(--ink-4);flex:none}
@media (hover:hover){.ap-row:hover .t b{text-decoration:underline;text-underline-offset:3px}}
@media (min-width:1100px){
  .as-sec{max-width:640px}
  .ap-row .t b{font-size:14.5px}
  .ap-row .t small{font-size:12.5px}
}
.addpick .ap-list{margin-top:-4px}
.addpick .ap-row:last-child{border-bottom:0}

/* 앱은 늘 밝은 화면: 바깥 화면이 어두운 테마여도 입력 칸, 스크롤바 같은 기본 부품이 어둡게 그려지지 않게 */
:root,:root[data-theme],body,.sheet,.app{color-scheme:light!important}

/* ================= v70: 알림, 설정 아이콘 (화면 오른쪽 위) ================= */
.ttools{display:flex;align-items:center;gap:8px;flex:none}
.ttools .sec-gear,.ttools .act-bell{position:relative;width:36px;height:36px;margin:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.ttools .sec-gear .ico,.ttools .act-bell .ico{width:18px;height:18px}
@media (hover:hover){.ttools .sec-gear:hover,.ttools .act-bell:hover{color:var(--ink);border-color:var(--ink-4)}}
.ttools [aria-current="page"]{border-color:var(--ink)!important;color:var(--ink)!important}
/* 새 알림: 빨간 동그라미 + 숫자 */
.ttools .act-badge,.mtop .act-badge{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#e5484d;color:#fff;font-size:11px;font-weight:800;line-height:19px;text-align:center;box-shadow:0 0 0 2px var(--surface);pointer-events:none}
.mtop .act-bell{margin-right:0}
.pc-tools{display:none}
/* 휴대폰 막대가 없는 넓이(768 이상, 태블릿 세로 막대 포함)에서는 본문 오른쪽 위에 둔다 */
@media (min-width:768px){
  main.content{position:relative}
  .pc-tools{display:flex;position:absolute;top:32px;right:44px;z-index:6;height:var(--t-row,40px);align-items:center}
  main.content :is(.phead,.bc-top){padding-right:96px}
}
@media (min-width:768px) and (max-width:1279px){.pc-tools{top:24px;right:24px}}
/* 태블릿: 제목 줄만 아이콘 자리를 비우고, 둘째 줄로 내려간 기간 선택, 사람 필터, 확인 필요 띠는 오른쪽 끝까지 */
@media (min-width:768px) and (max-width:1099px){
  main.content .phead .seg.full,main.content .bc-top>.bcx-ctl{margin-right:-96px;flex-basis:calc(100% + 96px);max-width:none}
  main.content .phead.bhm-head>.bhm-flag{margin-right:-96px;width:calc(100% + 96px)!important;max-width:none;align-self:flex-start}
}

/* ================= v70: 휴대폰 맨 위 막대와 탭은 항상 함께 고정 =================
   막대(54) + 탭(44)이 한 덩어리로 붙어 있어 사이가 비지 않아요. 본문 제목이 막대 아래로 들어가면
   막대 글자가 섹션 이름에서 화면 제목으로 바뀌고, 기간을 쓰는 화면은 기간 화살표가 나와요 */
@media (max-width:1099px){
  .mtop.sec-top{position:sticky!important;top:env(safe-area-inset-top,0px)!important;z-index:31;height:54px!important;gap:6px;padding:0 12px 0 16px!important;background:var(--surface)!important;box-shadow:none!important;border-bottom:0!important}
  .mtop.sec-top .mtop-brand{display:inline-flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto;border:0;background:none;padding:6px 0;font:inherit;color:var(--ink);text-align:left}
  .mtop.sec-top .mtop-brand .logo{flex:none}
  .mtop.sec-top .sp{display:none}
  .mt-tw{display:grid;min-width:0;flex:1 1 auto}
  .mt-tw>b{grid-area:1/1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:17px;line-height:24px;font-weight:900;letter-spacing:-.03em;transition:opacity .18s ease,transform .18s ease}
  .mt-tw>.mt-page{opacity:0;transform:translateY(8px)}
  .mtop.cmp .mt-tw>.mt-sec{opacity:0;transform:translateY(-8px)}
  .mtop.cmp .mt-tw>.mt-page{opacity:1;transform:none}
  .mt-back{width:36px;height:36px;margin-left:-8px;flex:none;color:var(--ink)}
  .mt-pp{display:flex;align-items:center;flex:none;font-size:13.5px;font-weight:700;color:var(--ink)}
  .mt-pp .ibtn{width:32px;height:36px;color:var(--ink-2)}
  .mt-pp span{white-space:nowrap}
  .mtop.sec-top::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:calc(env(safe-area-inset-top,0px) + 80px);background:var(--surface);pointer-events:none}
  .app:has(.sec-tabs){--hdr0:calc(54px + env(safe-area-inset-top,0px))}
  .app:has(.sec-tabs) .sec-tabs{top:var(--hdr0)!important}
  .mtop.cmp~.sec-tabs,.mtop.cmp:not(:has(~.sec-tabs)){box-shadow:0 10px 16px -14px rgba(21,23,28,.35)}
  .ctop{display:none!important}
}
@media (prefers-reduced-motion:reduce){.mt-tw>b{transition:none}}
@media (max-width:1099px){.b-scrolled .mtop.sec-top.b-mtop,.mtop.sec-top.b-mtop{box-shadow:none!important}}

/* v70: PC 제목 줄 높이 맞춤. 오른쪽 위 알림, 설정 아이콘(가운데 52px)과 제목, 제목 줄 버튼의 가운데를 같은 높이에 둔다.
   부제가 제목 아래에 붙는 화면(버틀러 요약, 투자 홈)은 버튼이 부제까지 포함한 높이의 가운데로 내려가지 않게 위에 붙인다 */
@media (min-width:1100px){
  main.content .phead[data-page="ihome"]{padding-top:2px;align-items:flex-start}
  main.content .phead[data-page="ihome"]>.acts{align-self:flex-start}
  main.content .bhm>.phead.bhm-head{padding-top:2px;align-items:flex-start}
  main.content .bhm>.phead.bhm-head>.bhm-flag{min-height:36px;padding-top:6px;padding-bottom:6px}
  main.content .phead[data-page="home"] .pp{min-height:40px}
}