/* 연습 실력 막대·별 막대·실력 팝업 + 친구들 모습 설정 메뉴 (2026-10-29, js/ui/progress.js · parent.js renderMenu) */

/* ── 층 색(막대 채움만, 글자는 늘 잉크) ── */
[data-layer="read"]{ --pg-c:#E8789A; --pg-soft:#FFE3EA; }
[data-layer="prag"]{ --pg-c:#5B9BE0; --pg-soft:#E2EEFF; }
[data-layer="body"]{ --pg-c:#F0A23C; --pg-soft:#FFEBD0; }
[data-layer="regulate"]{ --pg-c:#62B658; --pg-soft:#E1F3DC; }
[data-layer="flex"]{ --pg-c:#9C7FE0; --pg-soft:#ECE5FF; }
[data-layer="rules"]{ --pg-c:#2AAE9E; --pg-soft:#DBF4F0; }

/* ── 카드 ── */
.pg-card{ background:var(--kid-bg); border:2px solid var(--kid-border); border-radius:var(--radius-card); padding:var(--sp-4);
  box-shadow:var(--shadow-card); color:var(--color-ink); display:flex; flex-direction:column; gap:var(--sp-3); }
.pg-card__head{ display:flex; align-items:center; gap:var(--sp-3); }
.pg-card__head > img, .pg-card__head > .ch-img{ width:64px; height:64px; object-fit:contain; flex:none; }
.pg-card__title{ font-family:var(--font-heading); font-size:var(--fs-section); font-weight:800; margin:0; }
.pg-card__sub{ margin:2px 0 0; font-size:var(--fs-small); color:var(--kid-guide); line-height:1.45; }
.pg-empty{ margin:0; color:var(--kid-guide); }

/* ── 막대 한 줄: 이름 Lv [막대] % (변화) ── */
.pg-bar{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name lv" "track pct" "trend trend";
  column-gap:var(--sp-2); row-gap:4px; align-items:center; width:100%; }
.pg-bar__name{ grid-area:name; font-weight:700; font-size:var(--fs-body); min-width:0; overflow-wrap:anywhere; }
.pg-bar__lv{ grid-area:lv; justify-self:end; font-size:var(--fs-small); font-weight:800; background:var(--pg-soft, #F3E9DD);
  border:1.5px solid var(--pg-c, #C9B39C); border-radius:var(--radius-pill); padding:1px 10px; white-space:nowrap; }
.pg-bar__track{ grid-area:track; position:relative; height:16px; border-radius:var(--radius-pill); background:var(--pg-soft, #F3E9DD);
  overflow:hidden; box-shadow:inset 0 1px 2px rgba(90,62,43,.12); }
.pg-bar__fill{ position:absolute; left:0; top:0; bottom:0; width:var(--to); border-radius:inherit; background:var(--pg-c, #C9A27E);
  background-image:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%); }
.pg-bar.is-anim .pg-bar__fill{ animation:pg-grow 1.1s var(--ease-gentle, ease-out) .25s both; }
@keyframes pg-grow{ from{ width:var(--from); } to{ width:var(--to); } }
.pg-bar__pct{ grid-area:pct; font-weight:800; font-variant-numeric:tabular-nums; min-width:3.2em; text-align:right; }
.pg-bar__stars{ grid-area:pct; color:#E0A21B; letter-spacing:1px; font-size:18px; white-space:nowrap; }
.pg-trends{ grid-area:trend; display:flex; flex-wrap:wrap; gap:4px 10px; font-size:var(--fs-small); }
.pg-trend{ font-weight:700; }
.pg-trend--up{ color:#2F7A3A; }
.pg-trend--down{ color:#9A4A2A; }
.pg-trend--same, .pg-trend--first{ color:var(--kid-guide); }
.pg-bar--small .pg-bar__track{ height:10px; }
.pg-bar--small .pg-bar__name{ font-weight:600; font-size:var(--fs-small); }

/* ── 층 접힘 ── */
.pg-layer{ background:var(--kid-surface); border-radius:var(--radius-task); border:1.5px solid var(--kid-border); }
.pg-layer[data-layer]{ border-left:6px solid var(--pg-c); }
.pg-layer__sum{ list-style:none; cursor:pointer; padding:var(--sp-3); }
.pg-layer__sum::-webkit-details-marker{ display:none; }
.pg-layer__body{ padding:0 var(--sp-3) var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2); }
.pg-facts{ margin:-2px 0 4px; font-size:var(--fs-caption); color:var(--kid-guide); line-height:1.5; }
.pg-next{ margin:0; font-size:var(--fs-small); line-height:1.5; background:var(--pg-soft, #FFF0D6); border-radius:var(--radius-sm); padding:6px 10px; }
.pg-next--line{ margin-top:-6px; background:transparent; padding:0 4px; color:var(--color-ink); }
.pg-next--sub{ background:transparent; padding:0; color:var(--kid-guide); }
.pg-how{ font-size:var(--fs-small); color:var(--kid-guide); }
.pg-how summary{ cursor:pointer; font-weight:700; }
.pg-card--kid .pg-bar__name{ font-size:var(--fs-child-body); }

/* ── 팝업 ── */
.pg-pop{ display:flex; flex-direction:column; gap:var(--sp-3); color:var(--color-ink); text-align:center; }
.pg-pop__ch{ display:flex; justify-content:center; }
.pg-pop__ch > *{ width:120px; height:120px; object-fit:contain; animation:pg-hop 2.4s var(--ease-gentle, ease-in-out) infinite; }
@keyframes pg-hop{ 0%,100%{ transform:translateY(0); } 40%{ transform:translateY(-10px) rotate(-3deg); } }
.pg-pop__lead{ margin:0; font-size:var(--fs-child-body); font-weight:700; }
.pg-pop__row{ background:var(--kid-bg); border-radius:var(--radius-task); padding:var(--sp-3); text-align:left; }
.pg-pop__delta{ margin:6px 0 0; font-weight:800; font-variant-numeric:tabular-nums; }
.pg-pop__foot{ margin:0; font-size:var(--fs-small); color:var(--kid-guide); text-align:left; }
.pg-pop__ok{ width:100%; min-height:var(--touch-child, 56px); font-size:var(--fs-child-body); }
.pg-pop--kid .pg-pop__lead{ font-size:var(--fs-section); }
@media (prefers-reduced-motion: reduce){
  .pg-bar.is-anim .pg-bar__fill, .pg-pop__ch > *{ animation:none; }
}

/* ── 설정 메뉴(친구들 모습) ── */
.p-friends-menu{ background:var(--kid-bg); border-radius:var(--radius-card); padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-4);
  box-shadow:var(--shadow-card); color:var(--color-ink); }
.p-friends-menu__hero{ display:flex; align-items:flex-end; gap:var(--sp-3); background:linear-gradient(160deg, #FFE7B8, #FFD9CC);
  border-radius:var(--radius-card); padding:var(--sp-4) var(--sp-4) 0; overflow:hidden; }
.p-friends-menu__hero > img, .p-friends-menu__hero > .ch-img{ width:104px; height:104px; object-fit:contain; flex:none; }
.p-friends-menu__hi{ padding-bottom:var(--sp-4); min-width:0; }
.p-friends-menu__hi h2{ margin:0; font-size:var(--fs-section); font-weight:800; }
.p-friends-menu__hi p{ margin:4px 0 0; font-size:var(--fs-small); color:#6A4E3C; line-height:1.45; }
.p-friends-menu .p-menu{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:var(--sp-2); }
@media (min-width:560px){ .p-friends-menu .p-menu{ grid-template-columns:1fr 1fr; } }
.p-friends-menu .p-menu > li{ min-width:0; }
.p-friends-menu .p-menu__row, .p-friends-menu .p-menu__row.secondary-button{ width:100%; height:100%; display:grid; grid-template-columns:44px minmax(0,1fr); grid-template-rows:auto auto; column-gap:var(--sp-3);
  align-items:center; text-align:left; background:var(--kid-surface); border:2px solid var(--kid-border); border-radius:var(--radius-task);
  padding:var(--sp-3); min-height:72px; color:var(--color-ink); white-space:normal; box-shadow:0 2px 0 var(--kid-border); }
.p-friends-menu .p-menu__row > svg, .p-screen .p-friends-menu .p-menu__row > svg{ grid-row:1 / span 2; width:44px; height:44px; max-width:none; padding:10px; border-radius:14px; background:var(--m-soft, #FFF0D6); box-sizing:border-box; justify-self:center; }
.p-friends-menu .p-menu__row .btn-label{ font-weight:800; font-size:var(--fs-body); }
.p-friends-menu .p-menu__sub{ grid-column:2; font-size:var(--fs-small); color:var(--kid-guide); font-weight:400; line-height:1.4; overflow-wrap:anywhere; }
.p-friends-menu .p-menu__row:active{ transform:translateY(1px); box-shadow:none; }
.p-friends-menu li:nth-child(6n+1) .p-menu__row{ --m-soft:#FFE3EA; }
.p-friends-menu li:nth-child(6n+2) .p-menu__row{ --m-soft:#E2EEFF; }
.p-friends-menu li:nth-child(6n+3) .p-menu__row{ --m-soft:#E1F3DC; }
.p-friends-menu li:nth-child(6n+4) .p-menu__row{ --m-soft:#FFEBD0; }
.p-friends-menu li:nth-child(6n+5) .p-menu__row{ --m-soft:#ECE5FF; }
.p-friends-menu li:nth-child(6n+6) .p-menu__row{ --m-soft:#DBF4F0; }
.p-friends-menu .p-menu--danger .p-menu__row, .p-friends-menu .p-menu__row.p-menu--danger{ --m-soft:#F6E1DA; border-style:dashed; box-shadow:none; }
.p-account-card{ background:var(--kid-surface); border:2px solid var(--kid-border); border-radius:var(--radius-task); padding:var(--sp-3) var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-2); }
.p-account-card__who{ display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.p-account-card__pic{ width:44px; height:44px; border-radius:50%; background:var(--color-primary); display:grid; place-items:center; font-weight:800; font-size:20px; flex:none; }
.p-account-card__name{ font-weight:800; overflow-wrap:anywhere; }
.p-account-card__mail{ font-size:var(--fs-small); color:var(--kid-guide); overflow-wrap:anywhere; }
.p-account-card__row{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.p-account-card__row > button{ flex:1 1 140px; }

/* ── 지도 띠·성장 지도 안 작은 연습 막대 ── */
.p-band__bar{ display:flex; align-items:center; gap:var(--sp-2); width:100%; flex-basis:100%; margin-top:4px; }
.p-band__bar .pg-bar__track{ flex:1; height:10px; }
.p-band__pct{ font-size:var(--fs-small); font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.p-band__next{ font-size:var(--fs-small); }

/* 홈 레벨 칩 → '내 실력' 시트(2026-10-29) */
.lvs{ display:flex; flex-direction:column; gap:12px; color:var(--color-ink); }
.lvs-head{ display:flex; align-items:center; gap:12px; }
.lvs-head img, .lvs-head svg{ width:64px; height:64px; object-fit:contain; }
.lvs-title{ margin:0; font-size:20px; font-weight:800; }
.lvs-xp{ background:#FFF6E8; border:2px solid var(--kid-border); border-radius:20px; padding:12px 14px; }
.lvs-xp__row{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.lvs-xp__lv{ font-size:22px; }
.lvs-xp__num{ font-size:15px; font-weight:700; color:var(--kid-guide); }
.lvs-xp__track{ height:18px; border-radius:999px; background:#F1E3CF; overflow:hidden; margin-top:8px; }
.lvs-xp__fill{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#F6C85F,#F3A85A); transition:width .6s var(--ease-gentle); }
.lvs-xp__left{ margin:8px 0 0; font-size:15px; font-weight:700; }
.lvs-h{ margin:8px 0 0; font-size:18px; }
.lvs-need{ display:flex; flex-direction:column; gap:10px; }
.lvs-need__item{ background:#fff; border:2px solid var(--kid-border); border-radius:18px; padding:10px 12px; }
.lvs-need__head{ display:flex; justify-content:space-between; gap:8px; font-size:16px; }
.lvs-need__pct{ font-weight:800; }
.lvs-need__tip{ margin:6px 0 0; font-size:14px; color:var(--kid-guide); }
.lvs-hidden{ background:#F3EEFA; border-radius:16px; padding:12px; font-weight:700; }
/* 하던 연습으로 돌아가기(js/ui/resume.js) */
.resume{ display:flex; flex-direction:column; align-items:stretch; gap:12px; text-align:center; color:var(--color-ink); }
.resume__ch{ display:flex; justify-content:center; }
.resume__ch img, .resume__ch svg{ width:96px; height:96px; object-fit:contain; }
.resume__t{ margin:0; font-size:20px; font-weight:800; }