/* p3c.css (v80): 3단계 공통 화면 v3 (설정 appset, settings / 알림 feed). v3.css 다음에 읽는다.
   색은 --v-* 토큰만. 휴대폰은 v3.css 규칙대로 .v3-sec가 끝까지 펼친 흰 구역(사이 회색 띠 12px). */

/* ---------- 제목 줄 (휴대폰): 뒤로 + 제목 22, 아래 2px 선 없음 ---------- */
.p3c{word-break:keep-all}
.p3c-top{display:flex;flex-direction:column;gap:12px;min-width:0}
.p3c-top .phead{display:flex!important;align-items:center;justify-content:space-between;gap:8px;min-height:44px!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;position:static!important;width:auto!important;height:auto!important;clip:auto!important;clip-path:none!important;overflow:visible!important}
.p3c-top .phead::after,.p3c-top .phead::before{display:none!important}
.p3c-top .phead .ttl{display:flex!important;flex-direction:row!important;justify-content:flex-start!important;align-items:center;gap:2px;min-width:0;margin-left:0}
main.content .p3c .p3c-top .phead h1:not(.mt-head h1){margin:0;font-size:22px!important;line-height:30px!important;font-weight:800!important;letter-spacing:-.03em!important;white-space:nowrap;color:var(--v-ink)}
main.content .p3c .p3c-top .phead h1:not(.mt-head h1)::before{display:none!important}
.p3c-top .phead .ttl>.ibtn{width:32px;height:40px;margin-left:-8px;padding:0;border:0;background:none;box-shadow:none;color:var(--v-ink);display:inline-flex;align-items:center;justify-content:center}
.p3c-top .phead .ttl>.ibtn .ico{width:22px;height:22px;stroke-width:2}
.p3c-top .phead>.acts{display:flex;gap:8px;flex:none}
@media (max-width:767px){.content:has(>.p3c){padding-top:8px}}

/* ---------- 우리집 카드 ---------- */
.p3c-house{flex-direction:row;align-items:center;gap:12px}
.p3c-hb{flex:1;min-width:0;display:flex;align-items:center;gap:12px;border:0;background:none;padding:0;font:inherit;color:var(--v-ink);text-align:left;cursor:pointer}
.p3c-avas{flex:none;display:flex}
.p3c-avas>.ava{width:40px;height:40px;font-size:16px;font-weight:800;border:0}
.p3c-avas>.ava+.ava{margin-left:-10px;box-shadow:0 0 0 2px var(--v-card)}
.p3c-hb .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.p3c-hb .t b{font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p3c-hb .t small{font-size:13px;color:var(--v-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p3c-house .v3-btn{flex:none}
@media (min-width:768px){.p3c-house{padding:16px}}

/* ---------- 묶음과 줄 ---------- */
.p3c-g{gap:0;padding-top:16px;padding-bottom:8px}
.p3c-g.fold{padding-top:6px;padding-bottom:6px}
.p3c-gl{margin:0;padding:6px 0 4px;font-size:13px;font-weight:600;line-height:18px;letter-spacing:-.01em;color:var(--v-ink3)}
.p3c-li{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:0;border:0;border-radius:0;background:none;font:inherit;color:var(--v-ink);text-align:left;cursor:pointer}
.p3c-li .p3c-ic{flex:none;width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--v-fill);color:var(--v-ink2)}
.p3c-li .p3c-ic .logo{flex:none}
.p3c-li .nm{flex:1;min-width:0;font-size:16px;font-weight:600;letter-spacing:-.02em;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p3c-li .nm2{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.p3c-li .nm2 b{font-size:16px;font-weight:600;letter-spacing:-.02em;line-height:22px}
.p3c-li .nm2 small{font-size:13px;color:var(--v-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p3c-li .v{flex:0 1 auto;min-width:0;max-width:52%;font-size:14px;color:var(--v-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p3c-li>.ico{flex:none;color:var(--v-icon3)}
.p3c-dots{flex:none;display:flex;gap:4px;align-items:center}
.p3c-dots>i{width:10px;height:10px;border-radius:999px}
/* 묶음마다 아이콘 칸 색 (면 색이라 뜻 색과 겹치지 않음) */
.p3c-li.tone-family .p3c-ic,.p3c-li.tone-ledger .p3c-ic{background:var(--v-blue-bg);color:var(--v-blue)}
.p3c-li.tone-invest .p3c-ic{background:color-mix(in srgb,var(--v-peri) 22%,var(--v-card));color:var(--v-c2)}
.p3c-li.tone-link .p3c-ic{background:color-mix(in srgb,var(--v-green) 14%,var(--v-card));color:var(--v-green)}
.p3c-li.tone-adv .p3c-ic{background:var(--v-fill);color:var(--v-ink2)}
@media (hover:hover){.p3c-li:hover .nm,.p3c-li:hover .nm2 b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}}
.p3c-li:focus-visible{outline:2px solid var(--v-ink);outline-offset:2px;border-radius:10px}
/* RoleNotice: 코랄 한 줄 */
.p3c .rl-note{margin:0;border:0;border-radius:16px;background:var(--v-coral-bg);color:var(--v-ink)}
.p3c .rl-note .t b{color:var(--v-coral-t)}

/* 텔레그램 사람 연결 (tgin_app.js TgPeopleSec): .v3-sec와 같은 흰 구역으로 */
.p3c .as-sec.tgp{background:var(--v-card);border-radius:24px;padding:22px;margin:0;max-width:none;display:flex;flex-direction:column;gap:0;color:var(--v-ink)}
.p3c .as-sec.tgp .as-h{border-bottom:0;padding-bottom:4px}
.p3c .as-sec.tgp .as-h h2{font-size:18px;font-weight:700;letter-spacing:-.025em}
.p3c .as-sec.tgp .as-h .sub{font-size:14px;color:var(--v-ink4)}
.p3c .tgp-list{border-top:0}
.p3c .tgp-r{border-bottom-color:var(--v-line)}
.p3c .tgp-pick .bw-c{border:0!important;background:var(--v-fill);border-radius:999px;height:32px;padding:0 12px;font-size:13px;font-weight:600;color:var(--v-ink)}
.p3c .tgp-pick .bw-c[aria-pressed="true"]{background:var(--v-ink);color:var(--v-card)}
@media (max-width:767px){
  .p3c .as-sec.tgp{margin-left:calc(-1 * var(--gut,20px));margin-right:calc(-1 * var(--gut,20px));border-radius:0;padding:24px var(--gut,20px) 18px;border-top:12px solid var(--v-ground)!important;box-shadow:none}
  .p3c .as-sec.tgp .as-h h2{font-size:20px;letter-spacing:-.03em}
}

/* ---------- PC: 왼쪽 목록 360 + 오른쪽 하위 화면 ---------- */
.p3c-wrap{display:grid;grid-template-columns:360px minmax(0,1fr);gap:20px;align-items:start}
.p3c-nav,.p3c-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.p3c-main{gap:16px}
.p3c-nav .v3-sec{border-radius:20px}
.p3c-nav .p3c-g{padding:12px 10px;gap:2px}
.p3c-nav .p3c-g.fold{padding:6px 10px}
.p3c-nav .p3c-gl{padding:4px 10px 2px}
.p3c-nav .p3c-li{min-height:44px;padding:0 10px;border-radius:12px;gap:12px}
.p3c-nav .p3c-li .p3c-ic{width:32px;height:32px}
.p3c-nav .p3c-li .nm,.p3c-nav .p3c-li .nm2 b{font-size:15px}
.p3c-nav .p3c-li[aria-current="page"]{background:var(--v-fill)}
.p3c-nav .p3c-li[aria-current="page"] .nm{font-weight:700}
@media (hover:hover){.p3c-nav .p3c-li:hover{background:var(--v-fill)}.p3c-nav .p3c-li:hover .nm{text-decoration:none}}
.p3c-nav .p3c-adv>.ico{color:var(--v-icon3)}

/* ---------- 예전 하위 화면(장부, 우리 집 정보, 반복 거래 등)을 v3 구역 모양으로 ---------- */
.p3c-old{display:flex;flex-direction:column;gap:12px;min-width:0}
.p3c-old>.card,.p3c-old>section.card{background:var(--v-card)!important;border:0!important;border-radius:24px!important;box-shadow:none!important;padding:22px!important;margin:0!important;color:var(--v-ink)}
.p3c-old>.card.pad0{padding:6px 0 10px!important}
.p3c-old>.card.pad0>.card-h{padding:16px var(--cp) 6px!important}
.p3c-old>.card .card-h{border-bottom:0!important}
/* 휴대폰 하위 화면: 첫 카드의 제목은 위 제목 줄과 같아서 숨김 (단추, 개수, 배지는 남김) */
.p3c-sub .p3c-old>.card:first-child>.card-h>h2{display:none}
.p3c-sub .p3c-old>.card:first-child>.card-h:not(:has(>:not(h2):not(.sp))){display:none!important}
.p3c-sub .p3c-old>.card:first-child>.card-h:has(>:not(h2)){justify-content:flex-end}
.p3c-old>.card .card-h h2{font-size:18px;font-weight:700;letter-spacing:-.025em}
.p3c-old .btn,.p3c .p3c-old .btn:not(.pri):not(.danger):not(.ghost):not(.soft){border:0;background:var(--v-fill);border-radius:12px;box-shadow:none;color:var(--v-ink)}
.p3c .p3c-old .btn.ghost{background:none}
.p3c-old .btn.pri{background:var(--v-ink);color:var(--v-card)}
.p3c-old .btn.danger{background:var(--v-coral-bg);color:var(--v-coral-t)}
.p3c-old input[type=text],.p3c-old input[type=search],.p3c-old input:not([type]),.p3c-old select,.p3c-old textarea{border:0!important;background:var(--v-fill)!important;border-radius:12px!important;box-shadow:none!important}
.p3c-old .searchbox{border:0;background:var(--v-fill);border-radius:14px}
@media (max-width:767px){
  .p3c-old>.card,.p3c-old>section.card{margin-left:calc(-1 * var(--gut,20px))!important;margin-right:calc(-1 * var(--gut,20px))!important;border-radius:0!important;box-shadow:none!important;border-top:12px solid var(--v-ground)!important}
  .p3c-old>.card{--cp:var(--gut,20px)}
  .p3c-old>.card:not(.pad0){padding:24px var(--gut,20px) 28px!important}
  .p3c-old>.card.pad0{padding:8px 0 16px!important}
  .p3c-old>.card .card-h h2{font-size:20px;letter-spacing:-.03em}
}

/* ---------- 켬/끔 스위치 ---------- */
.p3c-sw{flex:none;position:relative;width:44px;height:26px;padding:0;border:0;border-radius:999px;background:var(--v-track2);cursor:pointer;transition:background .15s}
.p3c-sw>i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(25,31,40,.25);transition:left .15s}
.p3c-sw[aria-checked="true"]{background:var(--v-ink)}
.p3c-sw[aria-checked="true"]>i{left:21px}
.p3c-sw[disabled]{cursor:default;opacity:.6}
.p3c-sw:focus-visible{outline:2px solid var(--v-blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.p3c-sw,.p3c-sw>i{transition:none}}

/* ---------- 항목 관리 ---------- */
.p3c-acc{gap:12px}
.p3c-ah{display:flex;align-items:center;gap:12px;min-height:32px}
.p3c-ah h2{margin:0;display:flex;align-items:center;gap:2px;font-size:18px;font-weight:700;letter-spacing:-.025em;white-space:nowrap}
.p3c-ah .sp{flex:1}
.p3c-ah2{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px}
.p3c-hint{display:inline-flex;align-items:center;gap:2px;font-size:14px;color:var(--v-ink2);white-space:nowrap}
.p3c-cl{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--v-ink2);white-space:nowrap;cursor:pointer}
.p3c-types{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.p3c-types button{height:38px;padding:0;border:0;border-radius:999px;background:var(--v-fill);font:inherit;font-size:14px;font-weight:600;color:var(--v-ink);white-space:nowrap;cursor:pointer}
.p3c-types button span{font-weight:600;color:var(--v-ink3)}
.p3c-types button[aria-selected="true"]{background:var(--v-ink);color:var(--v-card);font-weight:700}
.p3c-types button[aria-selected="true"] span{color:color-mix(in srgb,var(--v-card) 70%,transparent)}
.p3c-types.wide{display:flex;flex-wrap:wrap;gap:8px}
.p3c-types.wide button{height:36px;padding:0 14px}
.p3c-colh{display:flex;justify-content:flex-end;min-height:20px;padding-right:32px;font-size:12.5px;font-weight:600;color:var(--v-ink3);margin-bottom:-6px}
.p3c-alist{position:relative;display:flex;flex-direction:column}
.p3c-ar{display:flex;align-items:center;gap:6px;min-height:52px;min-width:0}
.p3c-ar.grp{min-height:52px}
.p3c-ar.grp:not(:first-child){border-top:1px solid var(--v-line)}
.p3c-ar.kid{padding-left:28px}
.p3c-ar.dragging{opacity:.35}
.p3c-ar.closed .p3c-ab{opacity:.55}
.p3c-grip{flex:none;width:28px;height:40px;margin:0;padding:0;border:0;background:none;color:var(--v-icon3);cursor:grab;touch-action:none;display:inline-flex;align-items:center;justify-content:center;border-radius:8px}
.p3c-ab{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:48px;padding:0;border:0;background:none;font:inherit;color:var(--v-ink);text-align:left;cursor:pointer}
.p3c-ab[disabled]{cursor:default;color:var(--v-ink)}
.p3c-gi{flex:none;width:32px;height:32px;border-radius:10px;background:var(--v-fill);color:var(--v-ink2);display:inline-flex;align-items:center;justify-content:center}
.p3c-ab .nm{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.p3c-ab .nm b{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.p3c-ab .nm small{flex:none;font-size:13px;color:var(--v-ink3)}
.p3c-dot{flex:none;width:10px;height:10px;border-radius:999px}
.p3c-ab .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.p3c-ab .t b{font-size:15px;font-weight:600;line-height:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p3c-ab .t small{font-size:13px;line-height:18px;color:var(--v-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p3c-chev{flex:none;width:28px;height:40px;padding:0;border:0;background:none;color:var(--v-icon3);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.p3c-ar>.p3c-sw{margin-left:4px}
.p3c-afoot{display:flex;gap:8px;padding-top:4px}
.p3c-afoot .v3-btn{flex:1;height:44px;border-radius:14px;font-size:15px;font-weight:700}
@media (hover:hover){.p3c-ab:not([disabled]):hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}}
@media (min-width:768px){.p3c-acc.wide{padding:20px 24px}.p3c-ar.kid{padding-left:36px}}

/* ---------- 알림 ---------- */
.p3c-ff{gap:8px}
.p3c-ff .v3-chip{padding:0 14px}
.p3c-day{display:flex;flex-direction:column;gap:12px;min-width:0}
.p3c-dl{margin:0;font-size:13px;font-weight:600;line-height:18px;color:var(--v-ink3);letter-spacing:-.01em}
.p3c-fcs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.p3c-fc{gap:8px}
.p3c-fh{display:flex;flex-direction:column;align-items:stretch;gap:3px;width:100%;padding:0;border:0;background:none;font:inherit;color:var(--v-ink);text-align:left;cursor:pointer}
.p3c-ftg{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.p3c-ftg .v3-pill{height:22px;padding:0 7px;border-radius:7px;font-size:12px;font-weight:600}
.p3c-ftg .v3-pill.warn{font-weight:700}
.p3c-ftt{display:flex;align-items:center;gap:8px;min-width:0}
.p3c-ftt b{flex:1;min-width:0;font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p3c-ftt .ico{flex:none;color:var(--v-icon3)}
.p3c-fh>small{font-size:13px;line-height:18px;color:var(--v-ink3)}
@media (hover:hover){.p3c-fh:hover .p3c-ftt b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}}
.p3c-fl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.p3c-fl>li{display:flex;align-items:flex-start;gap:10px;padding:10px 0}
.p3c-fl>li+li{border-top:1px solid var(--v-line)}
.p3c-fav{flex:none;width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:color-mix(in srgb,var(--av,var(--v-blue)) 14%,var(--v-card));color:var(--av,var(--v-blue))}
.p3c-fav.ai{background:var(--v-fill)}
.p3c-fl .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.p3c-fl .ch{font-size:15px;line-height:21px;color:var(--v-ink);word-break:keep-all;overflow-wrap:anywhere}
.p3c-fl .ch b{font-weight:700;margin-right:1px}
.p3c-fl .t small{font-size:13px;line-height:18px;color:var(--v-ink3)}
.p3c-new{flex:none;width:6px;height:6px;margin-top:8px;border-radius:999px;background:var(--v-coral)}
.p3c-fl>li.p3c-fmore{display:block;padding:10px 0 2px;font-size:13px;color:var(--v-ink3)}
.p3c-fmb{width:100%;height:44px;border-radius:14px}
.p3c-fnote{margin:0;font-size:13px;line-height:1.6;color:var(--v-ink3);text-align:center;word-break:keep-all}
.p3c-empty{align-items:center;text-align:center;gap:8px;padding:36px 22px 32px}
.p3c-ei{width:56px;height:56px;border-radius:16px;background:var(--v-fill);color:var(--v-ink2);display:inline-flex;align-items:center;justify-content:center;margin-bottom:6px}
.p3c-empty b{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--v-ink)}
.p3c-empty p{margin:0;max-width:300px;font-size:14px;line-height:1.6;color:var(--v-ink2);word-break:keep-all}
/* 휴대폰: 날짜 이름은 회색 띠 안에 (끝까지 펼침). 아래 카드의 회색 띠와 이어짐 */
@media (max-width:767px){
  .p3c-day{gap:12px}
  /* 아래 카드의 회색 띠(12px)가 이름 아래쪽을 덮으므로 그만큼 아래 여백을 둔다 */
  .p3c-dl{margin:0 calc(-1 * var(--gut,20px)) -12px;padding:16px var(--gut,20px) 14px;background:var(--v-ground)}
  .p3c-day+.p3c-day>.p3c-dl{box-shadow:0 -12px 0 var(--v-ground)}
  .p3c-fmb{margin-top:4px}
  .p3c-ffoot{margin-top:0}
}
/* PC: 날짜 묶음마다 카드 두 단 */
@media (min-width:768px){
  .p3c-feed.wide .phead .ttl-row{align-items:center}
  .p3c-feed.wide .p3c-ff{flex-wrap:wrap;margin-right:0;padding-right:0}
  /* 회색 바탕 위 칩은 흰색 */
  .p3c-feed.wide .p3c-ff .v3-chip:not([aria-pressed="true"]){background:var(--v-card)}
  .p3c-feed .p3c-day{gap:10px}
  .p3c-feed .p3c-dl{padding:2px 2px 0}
  .p3c-feed .p3c-fcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
  .p3c-feed .p3c-fc{padding:20px 22px}
  .p3c-feed .p3c-fmb{max-width:360px;align-self:center}
  .p3c-feed .p3c-fnote{text-align:left}
}

/* 가족 이름과 색, 보기 전용 (butler.js BPeopleSheet) */
.bpp-ro .bpp-nm{flex:1;min-width:0;font-size:16px;font-weight:700;color:var(--v-ink);word-break:keep-all}
.bpp-ro .bpp-r:last-of-type{border-bottom:0}