/* Adapted from teenharmony report.html H-1022-04 spend dashboard. */
.wb-sp-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:48px;margin-top:48px;border-top:1px solid #688570;padding-top:32px}
.wb-sp-total small,.wb-sp-detail small{display:block;color:#bdcdbf;letter-spacing:.1em}.wb-sp-total strong{display:block;font:clamp(32px,4.5vw,64px)/1.3 Archivo,sans-serif;letter-spacing:-.04em;margin:18px 0;color:#a6e6ff;font-variant-numeric:tabular-nums}.wb-sp-total strong span{font:16px 'Noto Sans KR',sans-serif;margin-left:8px}.wb-sp-track{display:flex;height:8px;gap:3px;margin:28px 0}.wb-sp-track i{background:var(--tone);width:var(--share)}
.wb-sp-rows{display:grid;gap:12px}.wb-sp-row{display:grid;grid-template-columns:1fr auto;gap:8px;width:100%;text-align:left;color:#edf3e8;background:transparent;border:1px solid #526959;border-radius:4px;padding:16px;cursor:pointer;font:inherit;transition:background .2s,border-color .2s}.wb-sp-row:hover,.wb-sp-row[aria-pressed=true],.wb-sp-row:focus-visible{background:#123e53;border-color:#7ad7ff;outline-offset:3px}.wb-sp-row b{font-variant-numeric:tabular-nums}.wb-sp-row small{color:#b9cbbb}.wb-sp-meter{grid-column:1/-1;height:4px;background:#314538}.wb-sp-meter i{display:block;height:100%;width:var(--share);background:var(--tone);transform-origin:left;transition:transform 1s}.wb-sp-detail{margin-top:30px;padding:22px 0;border-top:1px solid #688570;min-height:150px}.wb-sp-detail b{font-size:22px;display:block;margin:8px 0}.wb-sp-detail p{color:#c5d3c6;margin:0}.wb-sp-check{color:#d6efb7;border-top:1px solid #688570;padding-top:16px;font-size:14px}

@media(max-width:700px){.wb-sp-board{grid-template-columns:minmax(0,1fr);gap:12px}.wb-sp-row{padding:14px;font-size:14px}.wb-sp-total strong{font-size:38px}.wb-sp-row b{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.wb-sp-board *{transition:none!important;animation:none!important}}

/* Copied and namespaced from teenharmony site.css matrix component. */
.wb-mx-sec { background: #071b29; color: #dfe5cf; }
.wb-mx-sec .lead, .wb-mx-sec .src { color: #bed7e5; }
.wb-mx-sec .eyebrow { color: #6cc4ff; }
.wb-mx { border: 1px solid #345566; background: linear-gradient(#0b2636, #071b29); padding: clamp(12px, 2vw, 24px); margin-top: 28px; position: relative; }
.wb-mx::before, .wb-mx::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid #6cc4ff; }
.wb-mx::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.wb-mx::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.wb-mx-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wb-mx-months { display: flex; flex-wrap: wrap; gap: 4px; }
.wb-mx-months button, .wb-mx-play, .wb-mx-reset { font: 500 13px/1 'Noto Sans KR',sans-serif; color: #dfe5cf; background: #111b0b; border: 1px solid #2f4019; padding: 8px 9px; min-height: 34px; cursor: pointer; border-radius: 2px; }
.wb-mx-months button[aria-pressed="true"] { background: #6cc4ff; color: #0b1207; border-color: #6cc4ff; font-weight: 700; }
.wb-mx-play { margin-left: auto; color: #ffcf73; border-color: #5a4a1e; }
.wb-mx-sum { font: 500 13.5px/1.5 'Noto Sans KR',sans-serif; color: #ffcf73; margin: 12px 0 0; font-variant-numeric: tabular-nums; }
.wb-mx-svg { width: 100%; margin-top: 8px; }
.wb-mx-svg svg { display: block; width: 100%; height: auto; }
.wb-mx-grid line { stroke: #16220e; stroke-width: 1; }
.wb-mx-h { fill: #b6d2e3; font: 800 10.5px 'Noto Sans KR',sans-serif; letter-spacing: .12em; }
.wb-mx-l { fill: none; stroke-width: 0.8; opacity: .55; transition: opacity .4s, stroke-width .3s; }
.wb-mx-l.in { stroke: #76c7ed; }
.wb-mx-l.or { stroke: #ffcf73; opacity: .8; }
.wb-mx-l.run { stroke: #8fa0b8; }
.wb-mx-l.chk { stroke: #7d8277; stroke-dasharray: 3 3; opacity: .45; }
.wb-mx-l.err { stroke: #d9775a; stroke-dasharray: 6 4; }
.wb-mx-l.agg { opacity: .35; }
.wb-mx-l.agg.or { opacity: .55; }
.wb-mx-l.dim { opacity: .05; }
.wb-mx-l.hl { opacity: 1; stroke-width: 2; }
.wb-mx-l.agg.hl { opacity: .9; }
.wb-mx-l.off, .wb-mx-t.off { opacity: .04; }
.drawn .wb-mx-l { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: wb-mxdraw 2.6s cubic-bezier(.2,.7,.2,1) forwards; }
.drawn .wb-mx-l.chk { stroke-dasharray: 3 3; animation: none; stroke-dashoffset: 0; }
.drawn .wb-mx-l.err { stroke-dasharray: 6 4; animation: none; stroke-dashoffset: 0; }
@keyframes wb-mxdraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .drawn .wb-mx-l { animation: none; stroke-dashoffset: 0; stroke-dasharray: none; } }
.wb-mx-t { cursor: pointer; }
.wb-mx-t.in { fill: #76c7ed; } .wb-mx-t.or { fill: #ffcf73; } .wb-mx-t.run { fill: #8fa0b8; } .wb-mx-t.chk { fill: #6d7266; } .wb-mx-t.err { fill: #d9775a; }
.wb-mx-n { cursor: pointer; }
.wb-mx-n rect { fill: #76c7ed; }
.wb-mx-n.or rect { fill: #ffcf73; } .wb-mx-n.run rect { fill: #8fa0b8; } .wb-mx-n.chk rect { fill: #6d7266; } .wb-mx-n.err rect { fill: #d9775a; }
.wb-mx-n:focus { outline: none; } .wb-mx-n:focus rect { stroke: #fff; stroke-width: 2; }
.wb-mx-lab { fill: #eef1e2; font: 700 12px 'Noto Sans KR',sans-serif; }
.wb-mx-n.chk .wb-mx-lab { fill: #a6ab9c; font-size: 11px; }
.wb-mx-num { fill: #bed7e5; font: 500 11px 'Noto Sans KR',sans-serif; font-variant-numeric: tabular-nums; }
.wb-mx-bank circle { fill: #10180a; stroke: #6cc4ff; stroke-width: 2; }
.wb-mx-arrive circle { fill: #ffcf73; }
.wb-mx-arrive circle.ring { fill: none; stroke: #ffcf73; stroke-width: 1.5; opacity: .6; transform-box: fill-box; transform-origin: center; animation: ring 2.4s ease-out infinite; }
@keyframes ring { from { transform: scale(.6); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wb-mx-arrive circle.ring { animation: none; } }
.wb-mx-info { min-height: 3.2em; font-size: 14px; color: #dfe5cf; margin: 10px 0 0; border-top: 1px solid #345566; padding-top: 10px; line-height: 1.6; }
.wb-mx-info strong { color: #ffcf73; }
.wb-mx-key { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: #c4cbb2; }
.wb-mx-key li::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 6px; vertical-align: middle; }
.wb-mx-key li.k-in::before { background: #76c7ed; } .wb-mx-key li.k-or::before { background: #ffcf73; } .wb-mx-key li.k-run::before { background: #8fa0b8; }
.wb-mx-key li.k-chk::before { background: repeating-linear-gradient(90deg, #8b9083 0 3px, transparent 3px 6px); }
.wb-mx-key li.k-err::before { background: repeating-linear-gradient(90deg, #d9775a 0 6px, transparent 6px 10px); }

.wb-mx-list { display: grid; gap: 12px; margin-top: 8px; font-size: 13px; }
.wb-mx-list:empty { display: none; }
.wb-mx-list b { display: block; color: #6cc4ff; font-size: 12px; margin-bottom: 4px; }
.wb-mx-list ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.wb-mx-list li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0 5px 12px; border-left: 3px solid; border-bottom: 1px solid #1c2814; color: #dfe5cf; }
.wb-mx-list li.k-in { border-left-color: #76c7ed; } .wb-mx-list li.k-or { border-left-color: #ffcf73; } .wb-mx-list li.k-run { border-left-color: #8fa0b8; } .wb-mx-list li.k-chk { border-left-color: #6d7266; color: #a6ab9c; } .wb-mx-list li.k-err { border-left-color: #d9775a; }
.wb-mx-list em { font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb-mx{margin-top:28px;--sans:'Noto Sans KR',sans-serif;color:#e6f2f9;overflow:hidden}.wb-mx h2{font-size:clamp(24px,3vw,36px);color:#fff}.wb-mx>p{max-width:78ch;color:#c4dce9}.wb-mx-flow{fill:none;stroke:#a6e6ff;stroke-width:2;stroke-dasharray:3 97;stroke-linecap:round;opacity:.9;pointer-events:none;animation:wb-money-flow 4s linear infinite;animation-delay:var(--delay)}.wb-mx-flow.hidden{display:none}.wb-mx:not(.in-view) .wb-mx-flow{animation-play-state:paused}@keyframes wb-money-flow{to{stroke-dashoffset:-100}}.wb-mx-check{font-size:13px;border-top:1px solid #345566;padding-top:16px}.wb-mx-list li{flex-wrap:wrap}.wb-mx-list em{white-space:normal}.wb-mx-months button,.wb-mx-reset{min-height:44px}.wb-mx .src{color:#c4dce9}.wb-mx-svg{min-width:0}@media(prefers-reduced-motion:reduce){.wb-mx *, .wb-mx *:before,.wb-mx *:after{animation:none!important;transition:none!important}.wb-mx-flow{display:none}}