/* Brand tokens are shared with the showroom; social provider colors stay intact. */
:root{--ink:#172c42;--muted:#637c91;--paper:#f3faff;--lime:#e1f3fc;--line:#dceaf3;--brand-surface:#fff;--brand-accent:#176fca;--brand-accent2:#1497a9;--brand-soft:#e1f3fc;--brand-hero:#123451;--brand-hero-text:#fff;--brand-radius:28px;--brand-shadow:0 16px 42px #4147a414}
body{background:var(--paper);color:var(--ink)}
.brand-logo{content:url('/assets/brand/byeollab-logo.png');object-fit:contain;max-height:78px;width:180px;height:auto}
.header .logo{padding:4px 0}.header{height:104px}.header .brand-logo{width:180px;max-height:88px}.footer .brand-logo{width:180px}.modal .brand-logo{width:195px;max-height:100px}.header-measure .brand-logo{width:180px!important}.compact-header .brand-logo{max-height:65px}
[data-brand-logo=wordmark] .brand-logo{content:url('/assets/brand/byeollab-wordmark.png');max-height:44px}
[data-brand-logo=symbol] .brand-logo{content:url('/assets/brand/byeollab-symbol.png');max-height:65px}
.topbar{background:var(--brand-hero);color:#e3e8ff}.topbar b{color:#b9c8ff}.header nav a.active,.section-kicker,.course-category{color:var(--brand-accent)}
.btn.dark{background:var(--brand-accent);color:var(--paper)}.btn.lime{background:var(--brand-soft);color:var(--brand-accent)}.btn.outline{border-color:var(--line)}.pill{background:var(--brand-soft);color:var(--ink)}.search{background:var(--brand-soft)}
.hero{background:radial-gradient(ellipse at 85% 30%,color-mix(in srgb,var(--brand-accent2) 45%,transparent),transparent 65%),var(--brand-hero);border-radius:var(--brand-radius);color:var(--brand-hero-text)}.hero h1 em{color:#bdcaff}.hero p,.eyebrow{color:#d0d7f7}.hero .dot{background:#98c8ff}.hero .btn.lime{background:#fff;color:#273476}.hero-art{background:url('/assets/brand/byeollab-symbol.png') center/90% auto no-repeat}.hero-art>.orbit,.hero-art>.sculpture,.hero-art>.star{display:none}.hero .floating{background:#ffffff10;border:1px solid #ffffff25;color:#e6eaff;backdrop-filter:blur(16px)}.hero .floating strong{color:#fff}.hero-bottom{color:#bec7ef}
.panel,.buybox,.my-card,.stat,.classroom-page .empty{background:var(--brand-surface);border-color:var(--line);border-radius:var(--brand-radius);box-shadow:var(--brand-shadow)}.banner,.live-panel,.live-info{background:var(--brand-soft);color:var(--ink)}.live-visual{background:linear-gradient(140deg,var(--brand-hero),var(--brand-accent2));color:#fff}.live-visual .section-kicker{color:#e5ddff}.benefits{border-color:var(--line)}.tabs button.active{border-color:var(--brand-accent);color:var(--brand-accent)}.progress-track{background:var(--brand-soft)}.progress-track span{background:linear-gradient(90deg,var(--brand-accent),var(--brand-accent2))}.field input,.field select,.field textarea{background:var(--brand-surface);color:var(--ink);border-color:var(--line)}
.profile-wallet{background:var(--brand-soft);border-color:var(--line);border-radius:var(--brand-radius)}.wallet-label,.wallet-note,.wallet-history small,.wallet-empty,.wallet-history summary>span{color:var(--muted)}.wallet-history,.wallet-history li{border-color:var(--line)}.wallet-amount .positive{color:var(--brand-accent)}.profile-image-placeholder{background:var(--brand-soft)}.profile-account-actions .account-delete-link{color:#a04c63}.profile-showroom-link{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;margin:22px 0;border:1px solid var(--line);border-radius:16px;background:var(--brand-surface)}.profile-showroom-link strong{font-size:15px}.profile-showroom-link small{display:block;color:var(--muted);margin-top:3px}
.modal{background:var(--brand-surface);color:var(--ink)}.modal .btn.dark{color:var(--paper)}.demo-note{background:var(--brand-soft);border-color:var(--line);color:var(--ink)}.footer,.business-info{color:var(--muted)}.credit-warning{background:var(--brand-soft);border-color:var(--line)}.auth-notice,.verification-resend{color:var(--muted)}
[data-brand-style=editorial]{--brand-radius:6px;--brand-shadow:none}[data-brand-style=editorial] .course .art,[data-brand-style=editorial] .btn,[data-brand-style=editorial] .profile-fold{border-radius:6px}[data-brand-style=editorial] .hero h1{font-weight:600;letter-spacing:-.055em}[data-brand-style=editorial] .section-kicker{letter-spacing:.18em}
[data-brand-style=glass]{--brand-radius:28px;--brand-shadow:0 16px 42px #4147a414}[data-brand-style=glass] body{background:radial-gradient(ellipse at 10% 0,var(--brand-soft),transparent 60%),var(--paper)}[data-brand-style=glass] .panel,[data-brand-style=glass] .my-card{background:color-mix(in srgb,var(--brand-surface) 85%,transparent);backdrop-filter:blur(18px)}
[data-brand-density=compact] .panel{padding:20px}[data-brand-density=compact] .grid{gap:18px}[data-brand-density=compact] .hero{min-height:400px}[data-brand-density=compact] .hero-copy{padding-top:34px;padding-bottom:34px}[data-brand-density=compact] .page-title{padding-top:26px;padding-bottom:22px}
[data-brand-palette=midnight] .logo,[data-brand-palette=midnight] .modal>.logo{background:#fff;border-radius:12px;padding:5px 10px}[data-brand-palette=midnight] .modal>.logo{width:max-content}[data-brand-palette=midnight] .lesson-row,[data-brand-palette=midnight] .faq details{border-color:var(--line)}[data-brand-palette=midnight] .course-category{color:#b5bdff}[data-brand-palette=midnight] .btn.dark{color:#141a32}[data-brand-palette=midnight] .reader-login>.panel .logo{background:white}
@media(max-width:720px){.header{height:auto;min-height:90px}.header .brand-logo{max-height:68px}.compact-header .brand-logo{width:145px;max-height:65px}.hero-art{min-height:240px}.hero .floating{font-size:10px}.profile-showroom-link{padding:16px}.hero h1 em{color:#bdcaff}}
@media(max-width:390px){.compact-header .brand-logo{width:116px;max-height:56px}}

.live-class-title{margin-top:15px}

@media(max-width:360px){.compact-header .brand-logo{width:92px}.compact-header .header-profile{max-width:95px}}

/* The gradient remains unchanged; only lettering switches for dark surfaces. */
[data-brand-palette=midnight] .logo,[data-brand-palette=midnight] .modal>.logo,[data-brand-palette=midnight] .reader-login>.panel .logo{background:transparent;padding:4px 0;border-radius:0}
[data-brand-palette=midnight] .brand-logo{content:url('/assets/brand/byeollab-white.svg')}
[data-brand-palette=midnight][data-brand-logo=wordmark] .brand-logo{content:url('/assets/brand/byeollab-wordmark-white.svg')}
[data-brand-palette=midnight][data-brand-logo=symbol] .brand-logo{content:url('/assets/brand/byeollab-symbol.png')}

/* Use paired foreground/background tokens instead of inherited light text on white. */
.filter{background:var(--brand-surface);color:var(--ink);border-color:var(--line)}
.filter.active{background:var(--brand-accent);color:var(--paper);border-color:var(--brand-accent)}
.filter:not(.active):hover{background:var(--brand-soft);border-color:var(--brand-accent)}
.payment-method{background:var(--brand-surface);color:var(--ink)}
.payment-method.selected{background:var(--brand-soft);border-color:var(--brand-accent);color:var(--ink)}
.player-side{background:var(--brand-surface);color:var(--ink);border-color:var(--line)}
.lesson-num,.status,.demo-login button{background:var(--brand-soft);color:var(--ink)}
.art .badge{background:#eef1fff0;color:#1b2041}
.benefits,.banner p,.detail-copy p,.buybox ul,.check-label,.auth-divider{color:var(--muted)}
.check-label input,progress{accent-color:var(--brand-accent)}
.player-side .lesson-row.active{color:var(--brand-accent)}
[data-brand-palette=midnight] .payment-method .payment-icon{background:var(--brand-soft);color:var(--ink)}
[data-brand-palette=midnight] .payment-method[data-method=kakao] .payment-icon{background:#fee500;color:#191919}
[data-brand-palette=midnight] .payment-method[data-method=naver] .payment-icon{background:#03a94d;color:#fff}
[data-brand-palette=midnight] .payment-method[data-method=toss] .payment-icon{background:#3182f6;color:#fff}
[data-brand-palette=midnight] .payment-method[data-method=payco] .payment-icon{background:#ed2224;color:#fff}
[data-brand-palette=midnight] .status.pending{background:#443620;color:#ffe3a0}
[data-brand-palette=midnight] .status.refunded{background:#442a36;color:#ffc5d5}
[data-brand-palette=midnight] .error,[data-brand-palette=midnight] .material-note.warn,[data-brand-palette=midnight] .profile-account-actions .account-delete-link{color:#ffb4c5}

/* Midnight category pills stay dark in both selected and unselected states. */
[data-brand-palette=midnight] .filters .filter{background:#1c2034;color:#f0f2ff;border-color:#434d6b}
[data-brand-palette=midnight] .filters .filter.active{background:#303956;color:#fff;border-color:#a4afff;box-shadow:inset 0 0 0 1px #a4afff;font-weight:700}
[data-brand-palette=midnight] .filters .filter:not(.active):hover{background:#2a3251;color:#fff;border-color:#8997d9}

/* Approved logo board: horizontal header lockup, full lockups and monochrome. */
.brand-logo{content:url('/assets/brand/byeollab-horizontal-light.svg')}
[data-brand-palette=midnight] .brand-logo{content:url('/assets/brand/byeollab-horizontal-dark.svg')}
[data-brand-logo=horizontal] .brand-logo{content:url('/assets/brand/byeollab-horizontal-light.svg')}
[data-brand-palette=midnight][data-brand-logo=horizontal] .brand-logo{content:url('/assets/brand/byeollab-horizontal-dark.svg')}
[data-brand-logo=full] .brand-logo{content:url('/assets/brand/byeollab-logo.png')}
[data-brand-palette=midnight][data-brand-logo=full] .brand-logo{content:url('/assets/brand/byeollab-dark-logo.png')}
[data-brand-logo=wordmark] .brand-logo{content:url('/assets/brand/byeollab-wordmark.png')}
[data-brand-palette=midnight][data-brand-logo=wordmark] .brand-logo{content:url('/assets/brand/byeollab-wordmark-white.svg')}
[data-brand-logo=symbol] .brand-logo{content:url('/assets/brand/byeollab-symbol.png')}
[data-brand-palette=midnight][data-brand-logo=symbol] .brand-logo{content:url('/assets/brand/byeollab-symbol-dark.png')}
[data-brand-logo=mono] .brand-logo{content:url('/assets/brand/byeollab-mono.svg')}
[data-brand-palette=midnight][data-brand-logo=mono] .brand-logo{content:url('/assets/brand/byeollab-mono-white.svg')}
.header{height:94px}.header .brand-logo{width:210px;max-height:64px}.header-measure .brand-logo{width:210px!important}
[data-brand-logo=full] .header .brand-logo,[data-brand-logo=mono] .header .brand-logo{max-height:84px;width:180px}
[data-brand-palette=midnight] .hero-art{background-image:url('/assets/brand/byeollab-symbol-dark.png')}
@media(max-width:720px){.header.compact-header{min-height:78px}.header.compact-header .brand-logo{width:145px;max-height:62px}}
@media(max-width:390px){.header.compact-header .brand-logo{width:116px}}
@media(max-width:360px){.header.compact-header .brand-logo{width:92px}.compact-header .header-profile{max-width:95px}}

[data-brand-logo=horizontal] .modal .brand-logo,[data-brand-logo=horizontal] .reader-login .brand-logo{content:url('/assets/brand/byeollab-logo.png');max-height:105px}
[data-brand-palette=midnight][data-brand-logo=horizontal] .modal .brand-logo,[data-brand-palette=midnight][data-brand-logo=horizontal] .reader-login .brand-logo{content:url('/assets/brand/byeollab-dark-logo.png')}

@media(min-width:361px) and (max-width:390px){.header.compact-header .brand-logo{width:140px}}
/* Attendance progress follows the active palette, including midnight. */
.wallet-streak{margin-top:20px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--brand-surface)}
.streak-stats{display:flex;align-items:center;justify-content:space-between;gap:12px}.streak-current{display:flex;align-items:center;gap:10px}.streak-emblem{display:grid;place-items:center;width:40px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand-accent)}.streak-emblem svg{width:25px;height:25px}.streak-stats small{display:block;font-size:11px;color:var(--muted);line-height:1.5}.streak-stats strong{display:block;font-size:24px;line-height:1.4;color:var(--ink);font-variant-numeric:tabular-nums}.streak-stats strong span{font-size:12px;font-weight:500;margin-left:4px}.streak-next{text-align:right}.streak-next strong{color:var(--brand-accent)}
.streak-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;list-style:none;margin:20px 0 0;padding:0}.streak-days li{position:relative;text-align:center;min-width:0}.streak-days li:not(:last-child):after{content:'';position:absolute;top:17px;left:calc(50% + 19px);width:calc(100% - 32px);height:2px;background:var(--line)}.streak-day-icon{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;margin:auto;border:1px solid var(--line);border-radius:50%;background:var(--brand-surface);color:var(--muted)}.streak-day-icon svg{width:19px;height:19px}.streak-day-dot{width:5px;height:5px;border-radius:50%;background:var(--line)}.streak-days small{display:block;font-size:10px;color:var(--muted);margin-top:7px;line-height:1.4}.streak-days .is-done .streak-day-icon{background:var(--brand-accent);border-color:var(--brand-accent);color:var(--paper)}.streak-days .is-done small{color:var(--brand-accent);font-weight:700}.streak-days .is-reward .streak-day-icon{background:var(--brand-soft);border-color:var(--brand-accent)}.streak-day-icon img{display:block;width:26px;height:26px;object-fit:contain}.streak-caption{font-size:12px;line-height:1.6;color:var(--muted);margin:15px 0 0}.streak-caption.is-earned{color:var(--brand-accent);font-weight:600}
@media(max-width:390px){.wallet-streak{padding:14px 12px}.streak-stats strong{font-size:22px}.streak-emblem{width:32px;height:38px}.streak-current{gap:7px}.streak-stats small{font-size:10px}.streak-days{gap:2px}.streak-day-icon{width:29px;height:29px}.streak-days li:not(:last-child):after{top:14px;left:calc(50% + 16px);width:calc(100% - 26px)}.streak-day-icon img{width:23px;height:23px}}

.streak-days .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Reward effects are decorative; the server balance remains authoritative. */
.profile-wallet-top{position:relative}.credit-reward-float{position:absolute;left:16px;top:42px;z-index:3;color:var(--brand-accent);font-size:25px;font-weight:800;pointer-events:none;animation:credit-rise 1.5s ease-out both}.reward-daily .wallet-streak{animation:reward-ring 1s ease-out}.reward-special .wallet-streak{animation:reward-ring 1.5s ease-out 2}.just-checked .streak-day-icon{animation:check-fill .65s cubic-bezier(.2,.8,.2,1) both}.just-checked .streak-day-icon svg path{stroke-dasharray:25;stroke-dashoffset:25;animation:check-draw .45s .15s ease-out forwards}
.credit-reward{position:fixed;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:1200;display:flex;align-items:center;gap:15px;max-width:calc(100vw - 32px);width:440px;padding:22px 42px 22px 22px;border:1px solid var(--brand-accent);border-radius:24px;background:var(--brand-surface);color:var(--ink);box-shadow:0 18px 65px #14244335;animation:reward-arrive .5s ease-out both;isolation:isolate}.credit-reward>img{width:56px;height:56px;flex-shrink:0;object-fit:contain;animation:reward-coin .8s ease-out}.credit-reward>div{min-width:0}.credit-reward strong{display:block;font-size:14px;line-height:1.6}.credit-reward span{display:block;margin:3px 0;color:var(--brand-accent);font-size:26px;font-weight:800;line-height:1.4}.credit-reward small{display:block;color:var(--muted);font-size:11px;line-height:1.6}.credit-reward-close{position:absolute;right:8px;top:7px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:23px;cursor:pointer}.credit-reward--weekly,.credit-reward--signup{border-width:2px;background:linear-gradient(135deg,var(--brand-surface),var(--brand-soft))}.credit-reward--weekly>img,.credit-reward--signup>img{animation:reward-coin 1s ease-out,reward-coin-glow 1.3s 1s ease-in-out 2}.reward-spark{position:absolute;z-index:-1;width:6px;height:10px;border-radius:2px;background:var(--brand-accent);pointer-events:none;animation:reward-spark 1.5s .1s ease-out both}.reward-spark:nth-of-type(even){background:var(--brand-accent2)}.reward-spark-0{left:8%;top:20%}.reward-spark-1{left:16%;top:75%}.reward-spark-2{left:25%;top:10%}.reward-spark-3{left:36%;top:85%}.reward-spark-4{left:46%;top:15%}.reward-spark-5{left:55%;top:80%}.reward-spark-6{left:65%;top:10%}.reward-spark-7{left:75%;top:80%}.reward-spark-8{left:85%;top:20%}.reward-spark-9{left:92%;top:70%}.reward-spark-10{left:4%;top:50%}.reward-spark-11{left:96%;top:45%}
@keyframes check-fill{0%{transform:scale(.55);opacity:.3}65%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}@keyframes check-draw{to{stroke-dashoffset:0}}@keyframes credit-rise{0%{opacity:0;transform:translateY(8px) scale(.85)}20%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translateY(-65px) scale(1.05)}}@keyframes reward-arrive{from{opacity:0;transform:translate(-50%,20px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}@keyframes reward-coin{0%{transform:scale(.4) rotate(-25deg)}65%{transform:scale(1.15) rotate(8deg)}100%{transform:scale(1) rotate(0)}}@keyframes reward-coin-glow{50%{filter:drop-shadow(0 0 9px var(--brand-accent2));transform:translateY(-3px)}}@keyframes reward-ring{0%,100%{box-shadow:0 0 0 0 transparent}35%{box-shadow:0 0 0 5px var(--brand-soft);border-color:var(--brand-accent)}}@keyframes reward-spark{0%{opacity:0;transform:translateY(14px) scale(.4) rotate(0)}25%{opacity:.85}100%{opacity:0;transform:translateY(-46px) scale(1) rotate(160deg)}}
@media(max-width:390px){.credit-reward{padding:18px 34px 18px 16px;gap:11px;border-radius:20px;bottom:20px}.credit-reward>img{width:44px;height:44px}.credit-reward strong{font-size:12px}.credit-reward span{font-size:23px}.credit-reward small{font-size:10px}}
@media(prefers-reduced-motion:reduce){.credit-reward,.credit-reward>img,.credit-reward-float,.just-checked .streak-day-icon,.just-checked .streak-day-icon svg path,.reward-daily .wallet-streak,.reward-special .wallet-streak{animation:none}.credit-reward-float,.reward-spark{display:none}.just-checked .streak-day-icon svg path{stroke-dashoffset:0}}
.attendance-action{display:flex;flex-direction:column;align-items:center;gap:7px;flex-shrink:0}.attendance-reward{display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;color:var(--brand-accent);font-size:13px;line-height:1.3}.attendance-reward img{display:block;object-fit:contain;width:22px;height:22px}.attendance-reward strong{font-size:14px;font-variant-numeric:tabular-nums}.attendance-reward>span{font-weight:700}
@media(max-width:390px){.attendance-reward{font-size:12px;gap:4px}.attendance-reward img{width:19px;height:19px}.attendance-reward strong{font-size:13px}}