/* 리포트 화면(학생, 학부모, 원장님) | 공유 링크로 열려요 */
.rp-body { background: #FFE9DF; }
.rp-top { position: sticky; top: 0; z-index: 20; background: rgba(255, 233, 223, .94); backdrop-filter: blur(8px); padding: 12px 16px; }
.rp-top-in { max-width: 860px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rp-logo { height: 30px; width: auto; }
.rp-kind { font-size: 14px; font-weight: 700; color: #104B3A; background: #E4F2EC; padding: 4px 10px; border-radius: 999px; }
.rp-top .sp { flex: 1; }
.rp-back { display: inline-flex; align-items: center; gap: 4px; padding-left: 10px; }
.rp-back .icon { width: 18px; height: 18px; }
.rp-wrap { max-width: 860px; margin: 0 auto; padding: 6px 16px 60px; }
.rp-page { background: #fff; border-radius: 26px; padding: 36px 36px 30px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; color: #1F2A26; font-family: 'A2Z', system-ui, sans-serif; line-height: 1.55; }
.rp-page > *, .rp-sec > *, .rp-grid2 > *, .rp-grid3 > *, .rp-grid4 > * { min-width: 0; }
.rp-page h2 { margin: 4px 0 0; font-size: 30px; line-height: 1.3; color: #104B3A; letter-spacing: -.02em; }
.rp-page h3 { margin: 0; font-size: 20px; color: #104B3A; }
.rp-kicker { font-size: 13px; letter-spacing: .14em; font-weight: 700; color: #FF6334; }
.rp-kicker.light { color: #FFE3D6; }
.rp-lead { margin: 6px 0 0; color: #56645E; font-size: 16px; }
.rp-sec { display: grid; gap: 14px; }
.rp-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rp-src { font-size: 12px; color: #8A9692; background: #F7F9F8; padding: 3px 9px; border-radius: 999px; }
.rp-p { margin: 0; font-size: 15px; }
.rp-muted { color: #8A9692; }
.rp-brand { color: #104B3A; }
.rp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rp-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rp-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rp-box { background: #F7F9F8; border-radius: 18px; padding: 16px 18px; display: grid; gap: 6px; align-content: start; }
.rp-box.warm { background: #FFF4EE; }
.rp-box b { font-size: 18px; }
.rp-k { font-size: 13px; font-weight: 700; color: #FF6334; }
.rp-tile { background: #F7F9F8; border-radius: 18px; padding: 16px 18px; display: grid; gap: 2px; align-content: start; }
.rp-tile .k { font-size: 13px; color: #56645E; }
.rp-tile .v { font-size: 30px; font-weight: 700; line-height: 1.2; }
.rp-tile .v.sm { font-size: 22px; }
.rp-tile .v small { font-size: 15px; color: #56645E; font-weight: 500; }
.rp-tile .d { font-size: 12.5px; color: #8A9692; }
.rp-tile.hero { background: #ff6334; color: #fff; }
.rp-tile.hero .k, .rp-tile.hero .d, .rp-tile.hero .v small { color: rgba(255, 255, 255, .78); }
.rp-tag { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #EEF4F1; color: #104B3A; white-space: nowrap; justify-self: start; }
.rp-tag.ok { background: #E3F4EA; color: #1D7A4A; }
.rp-tag.mid { background: #FFF1D6; color: #B7791F; }
.rp-tag.no { background: #F1F3F2; color: #8A9692; }
.rp-tag.hot { background: #FFE9DF; color: #C2410C; }
.rp-quote { background: #F7F9F8; border-radius: 18px; padding: 16px 18px; font-size: 16px; line-height: 1.6; }
.rp-quote.warm { background: #FFF4EE; }
.rp-quote.big { font-size: 17px; }
.rp-quote small { display: block; font-size: 12px; font-weight: 700; color: #FF6334; margin-bottom: 4px; letter-spacing: .06em; }
.rp-who { display: block; font-size: 12.5px; color: #8A9692; margin-top: 6px; }
.rp-empty { background: #F7F9F8; border-radius: 16px; padding: 16px; color: #8A9692; font-size: 14.5px; }
.rp-foot { font-size: 12.5px; color: #8A9692; text-align: center; margin: 0; }
.rp-foot.left { text-align: left; }
.rp-hero { display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: center; background: linear-gradient(135deg, #ff6334, #ff8a4c); color: #fff; border-radius: 22px; padding: 22px 24px; }
.rp-hero img { width: 110px; height: auto; }
.rp-hero h2 { color: #fff; }
.rp-hero .rp-lead { color: rgba(255, 255, 255, .82); }
.rp-logs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rp-log { border-radius: 18px; padding: 16px; display: grid; gap: 6px; justify-items: start; align-content: start; }
.rp-log.pre { background: #EDF1FF; } .rp-log.field { background: #FFF1EA; } .rp-log.post { background: #E7F4EE; }
.rp-log .t { font-size: 12px; letter-spacing: .12em; font-weight: 700; color: #56645E; }
.rp-log b { font-size: 17px; }
.rp-log span:not(.t):not(.rp-tag) { font-size: 13.5px; color: #56645E; }
.rp-stamps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.rp-stamps > div { display: grid; justify-items: center; gap: 4px; font-size: 12px; color: #56645E; text-align: center; }
.rp-rows { display: grid; gap: 8px; }
.rp-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; background: #F7F9F8; border-radius: 14px; padding: 12px 16px; font-size: 15px; }
.rp-sum { display: flex; align-items: center; justify-content: space-between; background: #FF6334; color: #fff; border-radius: 16px; padding: 14px 18px; font-size: 16px; }
.rp-sum b { font-size: 26px; }
.rp-ba { display: grid; grid-template-columns: 1fr 34px 1fr; gap: 10px; align-items: center; }
.rp-arrow { display: grid; place-items: center; color: #FF6334; }
.rp-bars { display: grid; gap: 10px; }
.rp-bar { display: grid; grid-template-columns: 130px 1fr 64px; align-items: center; gap: 10px; font-size: 14.5px; }
.rp-bar .lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-bar .trk { position: relative; height: 18px; background: #EDF1EF; border-radius: 4px; }
.rp-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: #104B3A; }
.rp-bar.hi .fill { background: #FF6334; }
.rp-bar .val { font-weight: 700; text-align: right; }
.rp-hist { display: flex; align-items: flex-end; gap: 8px; height: 160px; }
.rp-hist .col { flex: 1; display: grid; justify-items: center; gap: 6px; height: 100%; align-content: end; }
.rp-hist .col .b { width: 100%; background: #104B3A; border-radius: 4px 4px 0 0; min-height: 3px; }
.rp-hist .col.hi .b { background: #FF6334; }
.rp-hist .col .n { font-size: 13px; font-weight: 700; }
.rp-hist .col .x { font-size: 12px; color: #8A9692; white-space: nowrap; }
.rp-tl { display: grid; }
.rp-tl-row { display: grid; grid-template-columns: 80px 18px 1fr; gap: 12px; }
.rp-tl-row .when { font-size: 13px; font-weight: 700; color: #56645E; padding-top: 2px; text-align: right; }
.rp-tl-row .dot { position: relative; }
.rp-tl-row .dot::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: #E6EBE8; }
.rp-tl-row .dot::after { content: ''; position: absolute; left: 2px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #104B3A; box-shadow: 0 0 0 3px #fff; }
.rp-tl-row.acc .dot::after { background: #FF6334; }
.rp-tl-row .what { padding-bottom: 18px; display: grid; }
.rp-tl-row .what span { font-size: 14px; color: #56645E; }
.rp-talk { display: grid; gap: 10px; }
.rp-talk > div { background: #FFF4EE; border-radius: 16px; padding: 14px 16px; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
.rp-talk i { width: 30px; height: 30px; border-radius: 50%; background: #FF6334; color: #fff; font-style: normal; font-weight: 700; display: grid; place-items: center; }
.rp-talk p { margin: 0; font-size: 15.5px; }
.rp-talk p span { display: block; font-size: 13px; color: #56645E; margin-top: 3px; }
.rp-agree { display: flex; gap: 16px; align-items: center; background: #E4F2EC; border-radius: 18px; padding: 14px 18px; }
.rp-agree .n { font-size: 44px; font-weight: 700; color: #104B3A; line-height: 1; }
.rp-agree .n small { font-size: 22px; }
.rp-agree > div:last-child { display: grid; gap: 2px; }
.rp-agree span { font-size: 14px; color: #3f544d; }
.rp-tbl { overflow-x: auto; border-radius: 14px; }
.rp-tbl table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rp-tbl th { text-align: left; font-size: 12.5px; color: #8A9692; font-weight: 600; padding: 8px 10px; background: #F7F9F8; white-space: nowrap; }
.rp-tbl td { padding: 10px; border-bottom: 1px solid #E6EBE8; vertical-align: middle; }
.rp-tbl .num { text-align: right; font-weight: 700; white-space: nowrap; }
.rp-page .apt-result .apt-field { background: #F7F9F8; }
@media (max-width: 720px) {
  .rp-page { padding: 22px 18px; border-radius: 20px; }
  .rp-page h2 { font-size: 24px; }
  .rp-grid2, .rp-grid3, .rp-logs, .rp-ba { grid-template-columns: 1fr; }
  .rp-grid4 { grid-template-columns: 1fr 1fr; }
  .rp-stamps { grid-template-columns: repeat(4, 1fr); }
  .rp-arrow { rotate: 90deg; }
  .rp-bar { grid-template-columns: 96px 1fr 52px; font-size: 13.5px; }
  .rp-hero { grid-template-columns: 76px 1fr; }
  .rp-hero img { width: 76px; }
}
/* 첫머리 두 육각형: 왼쪽 역량(잘하는 것), 오른쪽 적성(좋아하는 것) */
.rp-hexa { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rp-hx { background: #F2F7F4; border-radius: 22px; padding: 20px 20px 16px; display: grid; gap: 8px; align-content: start; justify-items: center; text-align: center; }
.rp-hx.warm { background: #FFF4EE; }
.rp-hx-h { display: grid; gap: 2px; justify-items: center; }
.rp-hx-h b { font-size: 22px; color: #104B3A; }
.rp-hx:not(.warm) .rp-k { color: #104B3A; }
.rp-hx .apt-chart { width: 100%; max-width: 300px; }
.rp-hx .apt-radar { width: 100%; height: auto; display: block; }
.rp-hx .apt-legend { justify-content: center; }
.rp-hx-top { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: #56645E; }
.rp-hx-top b { color: #1F2A26; font-size: 17px; }
.rp-hx-top .apt-ic { width: 28px; height: 28px; }
.rp-hx-src { font-size: 12.5px; color: #8A9792; }
.rp-hx .rp-empty { width: 100%; }
.rp-notes { display: grid; gap: 10px; }
.rp-notes > div { background: #F7F9F8; border-radius: 16px; padding: 14px 18px; display: grid; gap: 4px; }
.rp-notes p { margin: 0; font-size: 16px; line-height: 1.6; }
.rp-notes + .rp-quote, .rp-notes + .rp-more { margin-top: 12px; }
.rp-quote.mea .rp-mea { margin-right: 8px; }
/* 캠프 전후 비교 막대 */
.rp-ba2 { display: grid; gap: 10px; }
.rp-ba2-r { display: grid; grid-template-columns: 70px 1fr 92px; align-items: center; gap: 12px; font-size: 15px; }
.rp-ba2-r .lab { font-weight: 600; }
.rp-ba2-r.hi .lab { color: #FF6334; }
.rp-ba2-r .trk { display: grid; gap: 4px; }
.rp-ba2-r .trk i { display: block; height: 9px; border-radius: 99px; min-width: 4px; }
.rp-ba2-r .trk i.b { background: #9AA7A2; opacity: .55; }
.rp-ba2-r .trk i.a { background: #FF6334; }
.rp-ba2-r .val { text-align: right; font-weight: 700; white-space: nowrap; }
.rp-ba2-r .val em { font-style: normal; font-size: 12.5px; margin-left: 6px; padding: 2px 6px; border-radius: 99px; }
.rp-ba2-r .val em.up { background: #FFE8E0; color: #C2441A; }
.rp-ba2-r .val em.dn { background: #EEF1F0; color: #6B7A74; }
.rp-ba2 + .apt-legend { margin-top: 12px; }
.rp-ul { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 16px; line-height: 1.6; }
@media (max-width: 720px) {
  .rp-hexa { grid-template-columns: 1fr; }
  .rp-ba2-r { grid-template-columns: 58px 1fr 84px; gap: 8px; font-size: 14px; }
}
@media print { .rp-top { display: none; } .rp-body { background: #fff; } .rp-page { border-radius: 0; padding: 0; } }
/* 리포트 들어가는 버튼(학생 포스트로그, 학부모 화면) */
.rp-entry { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 0; cursor: pointer; background: #104B3A !important; color: #fff; }
.rp-entry img { width: 58px; height: auto; flex: none; }
.rp-entry span { flex: 1; display: grid; gap: 2px; }
.rp-entry b { font-size: 19px; }
.rp-entry small { font-size: 14px; opacity: .82; }
.rp-entry svg { flex: none; }
.rp-entry-pa { width: 100%; border: 0; text-align: left; cursor: pointer; font: inherit; margin-bottom: 10px; }
.rp-page .rp-tile, .rp-page .rp-tile.hero { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; }
.rp-box.rp-tp { display: flex; align-items: center; gap: 14px; }
.rp-box.rp-tp > div { display: grid; gap: 4px; }
/* 몰입캠프 리포트 */
.rp-sum3 .rp-tile .v.sm { font-size: 21px; }
.rp-did { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rp-did > div { background: #EEF4F1; border-radius: 16px; padding: 14px 16px; display: grid; gap: 4px; }
.rp-did b { font-size: 14px; color: #FF6334; }
.rp-did span { font-size: 15.5px; line-height: 1.5; }
.rp-story { margin: 0; font-size: 16px; line-height: 1.75; color: #3a4642; background: #F7F9F8; border-radius: 16px; padding: 16px 18px; }
.rp-write { display: grid; gap: 10px; }
.rp-write h4 { margin: 0; font-size: 17px; color: #1F2A26; }
.rp-pages { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rp-pages.n1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.rp-page-ph { margin: 0; display: grid; gap: 6px; }
.rp-page-ph img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; background: #F7F9F8; cursor: zoom-in; }
.rp-page-ph figcaption { font-size: 12.5px; color: #8A9692; }
.rp-page-ph.none { aspect-ratio: 3 / 4; background: #F7F9F8; border-radius: 14px; place-content: center; justify-items: center; text-align: center; }
.rp-page-ph.none span { font-weight: 700; color: #56645E; }
.rp-page-ph.none small { font-size: 12.5px; color: #8A9692; }
.rp-mea { display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; background: #16167A; color: #fff; border-radius: 999px; padding: 3px 10px; margin-right: 8px; vertical-align: 3px; }
.rp-quote.mea { background: #EEF2FB; }
.rp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rp-two .rp-box b { font-size: 20px; }
.rp-two .rp-box span:last-child { font-size: 14px; color: #56645E; }
.rp-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rp-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; cursor: zoom-in; }
.rp-more { background: #F7F9F8; border-radius: 16px; padding: 12px 16px; }
.rp-more summary { cursor: pointer; font-weight: 700; color: #104B3A; font-size: 15px; }
.rp-more[open] summary { margin-bottom: 10px; }
.rp-more .rp-story, .rp-more .rp-quote { background: #fff; }
/* 학생 화면: 큼직하게, 그림 위주 */
.rp-page.kid { gap: 34px; }
.rp-page.kid h3 { font-size: 24px; }
.rp-page.kid .rp-tile .v { font-size: 36px; }
.rp-page.kid .rp-did span { font-size: 18px; }
.rp-page.kid .rp-write h4 { font-size: 20px; }
.rp-page.kid .rp-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rp-page.kid .rp-pages.n1 { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.rp-page.kid .rp-quote.big { font-size: 20px; }
.rp-page.kid .rp-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .rp-did, .rp-two { grid-template-columns: 1fr; }
  .rp-pages, .rp-pages.n1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.rp-page.kid .rp-pages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rp-page.kid .rp-pages.n1 { grid-template-columns: minmax(0, 1fr); max-width: 300px; }
.rp-page.kid .rp-sum3 .rp-tile .v.sm { font-size: 26px; }
.rp-pvc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.rp-pvc-side { display: grid; gap: 10px; }
.rp-diff { display: grid; gap: 8px; }
@media (max-width: 720px) { .rp-pvc { grid-template-columns: 1fr; } }
/* 에듀사파리 요약: 도형 없이 줄 목록으로 깔끔하게 */
.rp-kv { margin: 0; display: grid; border-top: 1px solid #ECEFEE; }
.rp-kv > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 12px 2px; border-bottom: 1px solid #ECEFEE; align-items: baseline; }
.rp-kv dt { font-size: 14px; color: #8A9692; font-weight: 600; }
.rp-kv dd { margin: 0; font-size: 16px; color: #1F2A26; }
.rp-won { font-size: 22px; color: #ff6334; }
.rp-change { margin: 0; font-size: 17px; line-height: 1.65; color: #1F2A26; }
.rp-change b { color: #ff6334; }
/* 학생, 학부모 리포트: 바깥 여백 없이 화면을 꽉 채워요 */
.rp-wrap.bleed { max-width: 900px; padding: 0 0 40px; }
.rp-wrap.bleed .rp-page { border-radius: 0; padding: 0 0 28px; gap: 26px; }
.rp-wrap.bleed .rp-hero { border-radius: 0; }
.rp-wrap.bleed .rp-page > :not(.rp-hero):not(.rp-hexa) { padding-left: 18px; padding-right: 18px; }
.rp-wrap.bleed .rp-hexa { gap: 0; }
.rp-wrap.bleed .rp-hx { border-radius: 0; padding: 22px 12px 18px; }
.rp-wrap.kid .rp-change { font-size: 19px; }
.rp-wrap.kid .rp-kv dd { font-size: 18px; }