/* =========================================================
   모션 + 반응형 보강 (style.css 다음에 불러옴)
   움직임을 줄이도록 설정한 기기에서는 맨 끝에서 모두 꺼짐
   ========================================================= */
:root{--ease:cubic-bezier(.2,.7,.2,1);--ease-back:cubic-bezier(.34,1.56,.64,1)}
/* hidden 속성은 버튼 등의 display 스타일보다 항상 우선 */
[hidden]{display:none!important}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes popIn{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:none}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes shine{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
@keyframes confetti{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes bump{30%{transform:scale(1.22)}60%{transform:scale(.95)}}

/* 스크롤하면 하나씩 떠오르는 요소 (app.js가 자동으로 .rv를 붙임) */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

/* 첫 화면 */
.hero .eyebrow,.hero h1,.hero .lead,.hero .perk{animation:fadeUp .8s var(--ease) both}
.hero h1{animation-delay:.08s}
.hero .lead{animation-delay:.2s}
.hero .perk:nth-child(1){animation-delay:.3s}
.hero .perk:nth-child(2){animation-delay:.38s}
.hero .perk:nth-child(3){animation-delay:.46s}
.hero .perk:nth-child(4){animation-delay:.54s}
.hero .diag{animation:popIn .8s .25s var(--ease) both}
.perk .n{transition:transform .3s var(--ease-back)}
.perk:hover .n{transform:scale(1.15) rotate(-6deg)}

/* 버튼·카드 손맛 */
.btn,.pill,.opt,.sns-btn,.wallet,.filters button{transition:transform .18s var(--ease),box-shadow .25s var(--ease),background-color .2s,border-color .2s,color .2s,filter .2s}
.btn:active,.pill:active,.opt:active,.sns-btn:active,.filters button:active{transform:scale(.97)}
.btn-accent{position:relative;overflow:hidden}
.btn-accent::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);background-size:200% 100%;background-position:200% 0;pointer-events:none}
.btn-accent:hover::after{animation:shine .9s var(--ease)}
.ccard,.box.program,.box.case,.lp,.prog-mini,.step-c{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s}
.thumb{transition:box-shadow .35s var(--ease)}
.thumb span:last-child{transition:transform .5s var(--ease)}
@media (hover:hover){
  .ccard:hover{transform:translateY(-6px)}
  .ccard:hover .thumb{box-shadow:0 18px 40px -18px rgba(0,0,0,.35)}
  .ccard:hover .thumb span:last-child{transform:translateY(-4px)}
  .box.program:hover,.box.case:hover,.lp:hover{transform:translateY(-4px);box-shadow:0 16px 36px -20px rgba(0,0,0,.28)}
  .prog-mini:hover{border-color:var(--ink)}
  .opt:hover{transform:translateY(-2px)}
}

/* 진단: 질문이 바뀔 때마다 보기가 순서대로 등장 */
.diag h3,.diag .sub{animation:fadeUp .45s var(--ease) both}
.diag .opt{animation:fadeUp .45s var(--ease) both}
.diag .opt:nth-child(1){animation-delay:.04s}
.diag .opt:nth-child(2){animation-delay:.09s}
.diag .opt:nth-child(3){animation-delay:.14s}
.diag .opt:nth-child(4){animation-delay:.19s}
.diag .opt:nth-child(5){animation-delay:.24s}
.diag .opt:nth-child(6){animation-delay:.29s}
.diag .prog i{transition:width .5s var(--ease)}
.diag .chip.gold{animation:popIn .4s var(--ease-back) both}
.done-c{animation:popIn .55s var(--ease-back) both;position:relative}
.done-c .big{display:inline-block;animation:floatY 2.4s ease-in-out infinite}
.done-c .amt{animation:popIn .6s .25s var(--ease-back) both}
.confetti{position:absolute;left:50%;top:30%;width:8px;height:12px;border-radius:2px;pointer-events:none;animation:confetti 1.2s var(--ease) forwards}

/* 맞춤 배너·목차 강조 */
.welcome{animation:slideDown .6s var(--ease) both}
.welcome .pill.acc{animation:ring 1.8s 1s ease-out 2}
.curr li{transition:background-color .2s}
.curr li:hover{background:var(--bg-soft)}
.curr li.hit:hover{background:var(--accent-soft)}
.curr li.hit{position:relative}
.curr li.hit::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--accent)}

/* 지갑·토스트·모달·메뉴 */
.wallet.bump{animation:bump .6s var(--ease-back)}
.toast{transition:opacity .35s var(--ease),transform .35s var(--ease-back)}
.modal{display:grid;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility 0s .25s}
.modal.open{opacity:1;visibility:visible;transition:opacity .25s var(--ease)}
.modal .box{transform:translateY(16px) scale(.97);transition:transform .35s var(--ease)}
.modal.open .box{transform:none}
.menu{transform-origin:top right}
.menu.open{animation:popIn .2s var(--ease) both}
.bar i{transition:width .8s var(--ease)}

/* =========================================================
   모바일 메뉴 (햄버거)
   ========================================================= */
.menu-btn{display:none;width:40px;height:40px;border-radius:10px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.menu-btn i{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.menu-btn.open i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.open i:nth-child(2){opacity:0}
.menu-btn.open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{position:fixed;top:64px;left:0;right:0;bottom:0;background:var(--bg);z-index:49;padding:12px 20px 32px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s .3s;overflow:auto}
.mnav.open{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .3s var(--ease)}
.mnav a{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;font-size:18px;font-weight:700;border-bottom:1px solid var(--line)}
.mnav a::after{content:"→";color:var(--muted);font-weight:400}
.mnav.open a{animation:fadeUp .4s var(--ease) both}
.mnav.open a:nth-child(2){animation-delay:.04s}
.mnav.open a:nth-child(3){animation-delay:.08s}
.mnav.open a:nth-child(4){animation-delay:.12s}
.mnav.open a:nth-child(5){animation-delay:.16s}
.mnav.open a:nth-child(6){animation-delay:.2s}
.mnav-auth{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
body.nav-open{overflow:hidden}

/* 전체 강의 페이지 */
.course-tools{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.course-tools .filters{flex:1;min-width:0}
.course-tools-r{display:flex;gap:8px}
.course-tools-r .input{width:auto}
.course-tools-r #q{width:240px}
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 20px}
.more-row{display:flex;justify-content:center;margin-top:28px}
@media (max-width:960px){ .course-grid{grid-template-columns:repeat(2,1fr)} .course-tools-r{width:100%} .course-tools-r #q{flex:1;width:auto} }
@media (max-width:560px){ .course-grid{grid-template-columns:1fr;gap:24px} .course-grid .thumb{aspect-ratio:16/9} }

/* 휴대폰 인증·비밀번호 찾기 입력줄 */
.pv-row{display:flex;gap:6px;align-items:stretch}
.pv-row input{flex:1;min-width:0}
.pv-row .btn{flex:0 0 auto;white-space:nowrap}
.pv-row+.pv-row{margin-top:6px}
.pv-msg{min-height:18px;margin-top:2px}
.pv-msg .chip{margin-left:4px}

/* 강의 상세: 모바일 하단 고정 결제 바 */
.buybar{display:none}

/* =========================================================
   반응형 보강
   ========================================================= */
@media (max-width:960px){
  .menu-btn{display:flex}
  .hd{gap:12px}
  .hd-right .link,.hd-right [data-auth="signup"],.hide-sm{display:none}
  .hero{padding:32px 0 56px}
  .hero-grid{gap:32px}
  .welcome .wrap{flex-direction:column;align-items:flex-start}
  .welcome .actions{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  /* 강의 카드는 옆으로 넘겨보기 */
  .catalog{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -24px;padding:4px 24px 12px;scrollbar-width:none}
  .catalog::-webkit-scrollbar{display:none}
  .catalog>*{flex:0 0 min(78%,340px);scroll-snap-align:start}
  .detail{padding:24px 0 120px;gap:8px}
  .detail .hero-thumb{aspect-ratio:16/10}
  /* 강의 이름·설명·가격·포함 내용 상자를 표지 바로 아래에 (예전엔 숨겨서 휴대폰에서 강의 이름·가격이 안 보였음) */
  .detail>div:first-child{display:contents}
  .detail>div:first-child>*{order:2}
  .detail>div:first-child>p:first-child,.detail>div:first-child>.hero-thumb{order:0}
  .buybox{order:1;margin:8px 0 4px}
  .buybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:12px;align-items:center;justify-content:space-between;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);
    animation:fadeUp .5s .3s var(--ease) both}
  .buybar .p{font-size:12px;color:var(--muted);line-height:1.3}
  .buybar .p b{display:block;font-size:18px;color:var(--ink)}
  .buybar .btn{flex:0 0 auto}
}
@media (max-width:560px){
  .catalog{margin:0 -16px;padding:4px 16px 12px}
  .catalog>*{flex-basis:82%}
  h1{font-size:clamp(32px,9vw,40px)}
  h2{font-size:clamp(23px,6.4vw,28px)}
  section{padding:56px 0}
  .loop{grid-template-columns:1fr 1fr;gap:8px}
  .lp{padding:14px 12px}
  .lp h6{font-size:15px}
  .rules table{font-size:13px}
  .diag{min-height:0;border-radius:18px}
  .opt{padding:14px}
  .res-grid{gap:20px}
  .cases{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 8px;gap:12px;scrollbar-width:none}
  .cases::-webkit-scrollbar{display:none}
  .cases>*{flex:0 0 80%;scroll-snap-align:start}
  .outs{grid-template-columns:1fr 1fr}
  .story p{font-size:16px}
  /* 모달은 아래에서 올라오는 시트로 */
  .modal{align-items:end;padding:0}
  .modal .box,.modal .box.wide{max-width:none;width:100%;border-radius:20px 20px 0 0;max-height:90vh;padding:22px 18px calc(22px + env(safe-area-inset-bottom));transform:translateY(40px)}
  .modal.open .box{transform:none}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom));max-width:calc(100% - 32px);white-space:normal;text-align:center}
  .ep-row{flex-wrap:wrap}
  .ep-row .st{margin-left:0;width:100%;justify-content:flex-end}
  .kpi b{font-size:20px}
}
@media (min-width:1400px){ .wrap{max-width:1200px} }

/* 움직임 줄이기 설정 존중 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* 분류 관리에서 정한 색으로 썸네일 칠하기 */
.thumb[style*="--th"]{background:color-mix(in srgb,var(--th) 12%,#fff);color:var(--th)}
/* 홈 편성에서 끈 블록 */
[data-block][data-off]{display:none!important}
.preview-bar{position:sticky;top:0;z-index:60;background:#1b1b1b;color:#fff;font-size:13px;padding:8px 16px;text-align:center}
.preview-bar a{color:#ffd28a;text-decoration:underline;margin-left:8px}
.subfilters{display:flex;gap:6px;flex-wrap:wrap;margin:-6px 0 18px}
.subfilters button{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:5px 12px;font-size:13px;color:var(--ink-2);cursor:pointer}
.subfilters button.act{border-color:var(--ink);color:var(--ink);font-weight:700}

/* 관리자 편성 화면 */
.admin aside .aside-g{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.04em;padding:14px 12px 4px}
.ed-list{display:flex;flex-direction:column;gap:6px}
.ed-group{display:flex;flex-direction:column;gap:6px;padding-bottom:8px;border-bottom:1px dashed var(--line);margin-bottom:4px}
.ed-row,.ed-head{display:grid;gap:8px;align-items:center}
.ed-row{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 10px;transition:opacity .15s,box-shadow .15s}
.ed-row .input{padding:7px 9px;font-size:13px}
.ed-row .small{display:block;margin-top:2px;font-size:11px}
.ed-row.off{opacity:.55}
.ed-row.dragging{opacity:.35}
.ed-row.drop-over{box-shadow:0 -3px 0 var(--accent)}
.ed-head{font-size:11px;font-weight:700;color:var(--muted);padding:0 11px 4px}
.ed-row.cat,.ed-head.cat{grid-template-columns:22px 56px 1.2fr 1.2fr 1fr 40px 52px 44px 92px}
.ed-row.cat.sub{margin-left:34px;background:var(--bg-soft)}
.ed-row.blk{grid-template-columns:22px 30px 1fr auto 44px;padding:12px 14px}
.ed-row.blk .no{font-weight:800;color:var(--muted);font-size:13px}
.ed-row.mrow,.ed-head.mrow{grid-template-columns:22px 1fr 1.4fr 110px 36px 44px 40px 44px 92px}
.ed-row.mrow input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent);justify-self:center}
.ed-row input[type=color]{width:36px;height:30px;border:1px solid var(--line);border-radius:8px;padding:2px;background:var(--card)}
.ed-row .ic{text-align:center}
.mono{font-family:ui-monospace,Consolas,monospace}
.handle{cursor:grab;color:var(--muted);user-select:none;text-align:center;font-size:16px}
.acts{display:flex;gap:2px;justify-content:flex-end}
.mv{display:flex;gap:2px}
.acts button{width:28px;height:28px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink-2);font-size:12px;cursor:pointer}
.acts button:disabled{opacity:.3;cursor:default}
.acts .del:hover{color:var(--accent);border-color:var(--accent)}
.add-sub{align-self:flex-start;margin-left:34px}
.sw{position:relative;display:inline-block;width:40px;height:22px;flex:0 0 auto}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw i{position:absolute;inset:0;background:#c9c9c9;border-radius:99px;transition:background .2s;cursor:pointer}
.sw i::after{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.sw input:checked+i{background:var(--ok)}
.sw input:checked+i::after{transform:translateX(18px)}
.sw input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
.seg{display:inline-flex;background:var(--bg-soft);border-radius:10px;padding:3px}
.seg button{padding:6px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink-2)}
.seg button.act{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.warn{color:var(--accent);font-weight:600}
.menu-prev{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:10px 14px;border:1px solid var(--line);border-radius:10px;margin-top:6px;font-size:14px}
.menu-prev span{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.menu-prev a{color:var(--ink-2);font-weight:600}
@media (max-width:860px){
  .ed-head{display:none}
  .ed-row.cat,.ed-row.mrow{grid-template-columns:22px 1fr 1fr}
  .ed-row.cat.sub{margin-left:14px}
  .add-sub{margin-left:14px}
  .ed-row.cat .acts,.ed-row.mrow .acts{grid-column:1/-1}
  .admin aside .aside-g{display:none}
}

/* 관리자 운영 목록: 기간·필터·합계·페이지 */
.lv{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px}
.pbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pbar .lbl{font-size:12px;font-weight:700;color:var(--muted);min-width:64px}
.pbar .seg{flex-wrap:wrap}
.pdates{display:flex;align-items:center;gap:6px}
.pdates .input{padding:6px 8px;font-size:13px;width:auto}
.lv-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lv-row .input{padding:7px 10px;font-size:13px;width:auto;max-width:220px}
.sums{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.sum{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-width:120px}
.sum small{display:block;font-size:11px;color:var(--muted);font-weight:600}
.sum b{font-size:17px;color:var(--ink)}
.sum.b b{color:var(--accent)}.sum.m b{color:var(--ink-2)}
.pager{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:14px}
.note-box{background:var(--gold-soft);border-radius:12px;padding:12px 16px;font-size:13px;color:var(--ink-2);margin-bottom:12px;line-height:1.6}
.kpi .dl{font-weight:700;color:var(--muted)}
.kpi .dl.up{color:var(--ok)}.kpi .dl.down{color:var(--accent)}
.kpi.warn-k b{color:var(--accent)}
.todo{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.todo button{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 14px;font-size:13px;color:var(--muted);cursor:pointer}
.todo button b{margin-left:4px}
.todo button.on{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}
.todo button.on b{color:var(--accent)}
.chart{width:100%;min-width:560px;height:220px;display:block}
.chart rect{fill:var(--accent);opacity:.85}.chart rect:hover{opacity:1}.chart rect.neg{fill:var(--ink-2)}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart text{font-size:10px;fill:var(--muted)}
.fn{display:grid;grid-template-columns:70px 1fr 60px 120px;gap:10px;align-items:center;margin-bottom:8px;font-size:13px}
.fn i{display:block;height:22px;background:var(--accent);border-radius:6px;min-width:2px;opacity:.8}
.mini-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini-kpis div{background:var(--bg-soft);border-radius:10px;padding:10px 12px}
.mini-kpis small{display:block;font-size:11px;color:var(--muted)}
.mini-kpis b{font-size:16px}
.pbar-mini{display:inline-block;width:70px;height:6px;background:var(--bg-soft);border-radius:9px;overflow:hidden;vertical-align:middle}
.pbar-mini i{display:block;height:100%}
.ed-row.rw{grid-template-columns:22px 1.6fr 1.4fr 90px 110px 44px 92px;padding:12px 14px}
@media (max-width:860px){
  .ed-row.rw{grid-template-columns:22px 1fr 1fr}
  .ed-row.rw .acts{grid-column:1/-1}
  .fn{grid-template-columns:60px 1fr 50px}
  .fn span:last-child{display:none}
  .pbar .lbl{min-width:0;width:100%}
}

/* 내 강의실: 참여·리워드 */
.rw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.rw-card{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.rw-card p{margin-top:2px}
.rw-amt{font-weight:800;color:var(--gold);font-size:17px;text-align:right}
.rw-amt small{font-size:11px;font-weight:600;color:var(--muted)}
.rw-st{grid-column:1/-1}

/* 회원 상세: 수강 기간 조정 */
.enr{padding:8px 0;border-bottom:1px solid var(--line)}
.enr-ctl{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-top:6px}
.enr-ctl .input{padding:5px 8px;font-size:12px;width:auto;max-width:180px}
.enr-ctl .btn{padding:4px 8px;font-size:12px}

/* 수강 기간 */
.expired-box{background:var(--bg-soft);border-radius:12px;padding:12px 14px;margin-bottom:10px;display:flex;flex-direction:column;gap:2px;text-align:center}
.expired-c{opacity:.85}
.expired-c .bar i{background:var(--muted)}

/* 관리자 계정·작업 기록 */
.whoami{display:flex;flex-direction:column;gap:2px;padding:0 12px 14px;margin-bottom:6px;border-bottom:1px solid var(--line);font-size:13px}
.whoami span{font-size:11px;color:var(--muted)}
.whoami button{align-self:flex-start;margin-top:6px;font-size:12px;color:var(--ink-2);text-decoration:underline;padding:0;width:auto!important}
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px}
.perm-tbl td,.perm-tbl th{font-size:12px}
.temp-pw{display:flex;gap:8px;align-items:center;background:var(--bg-soft);border-radius:10px;padding:12px 14px}
.temp-pw code{font-size:18px;font-weight:700;letter-spacing:.04em;flex:1;word-break:break-all}
.log-fail td{background:var(--accent-soft)}
.log-detail pre{white-space:pre-wrap;word-break:break-all;max-width:420px;max-height:220px;overflow:auto;font-size:11px;background:var(--bg-soft);padding:8px;border-radius:8px;margin-top:4px}
@media (max-width:860px){ .perm-grid{grid-template-columns:1fr} .whoami{display:none} }

/* 고객센터·공지 */
.notice-bar{background:var(--ink);color:var(--bg)}
.notice-bar a{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:14px;overflow:hidden}
.notice-bar b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notice-bar .chip{background:rgba(255,255,255,.15);color:inherit;flex:0 0 auto}
.notice-bar .muted{margin-left:auto;white-space:nowrap;color:inherit;opacity:.7}
.popup-body{max-height:50vh;overflow:auto;font-size:14px;line-height:1.7;color:var(--ink-2);margin-top:10px}
.popup-body a,.notice-body a,.bubble a{text-decoration:underline;word-break:break-all}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:24px}
.quick a{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:4px;transition:border-color .2s,transform .2s}
.quick a:hover{border-color:var(--ink);transform:translateY(-2px)}
.quick span{font-size:12px;color:var(--muted)}
.sup-tabs{margin-bottom:18px}
.sup-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.nlist{list-style:none;border-top:1px solid var(--line)}
.nlist li{border-bottom:1px solid var(--line)}
.nlist a{display:flex;align-items:center;gap:8px;padding:16px 4px;flex-wrap:wrap}
.nlist a:hover b{text-decoration:underline}
.new{display:inline-block;background:var(--accent);color:#fff;font-size:10px;font-weight:800;border-radius:99px;padding:1px 6px;vertical-align:middle}
.notice-art{padding:28px}
.notice-art h3{font-size:22px;margin:12px 0 4px}
.notice-body{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);font-size:15px;line-height:1.8;color:var(--ink-2)}
.notice-nav{display:flex;justify-content:space-between;gap:10px;margin:16px 0;font-size:13px;color:var(--ink-2);flex-wrap:wrap}
.thread{display:flex;flex-direction:column;gap:12px;margin:20px 0}
.msg{max-width:80%}
.msg.me{align-self:flex-end;text-align:right}
.msg .who{font-size:11px;color:var(--muted);margin-bottom:4px}
.msg .bubble{display:inline-block;text-align:left;padding:12px 14px;border-radius:14px;font-size:14px;line-height:1.7;background:var(--bg-soft)}
.msg.me .bubble{background:var(--ink);color:var(--bg)}
.msg.me .bubble a{color:inherit}
.msg.internal .bubble{background:var(--gold-soft);border:1px dashed var(--gold)}
#rpF textarea,.reply textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;background:var(--card);color:var(--ink)}
.avatar{position:relative}
.avatar .dot{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid var(--bg)}
@media (max-width:760px){ .quick{grid-template-columns:1fr 1fr} .msg{max-width:92%} }

/* 관리자 1:1 문의 */
.iq-detail{display:grid;grid-template-columns:1fr 220px;gap:20px}
.iq-detail .thread{max-height:42vh;overflow:auto;padding-right:4px}
.iq-ctl{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.iq-ctl .input{padding:6px 8px;font-size:13px;width:auto}
.iq-side{border-left:1px solid var(--line);padding-left:16px}
.iq-side p{margin-top:4px}
tr.unread td{background:var(--accent-soft)}
@media (max-width:760px){ .iq-detail{grid-template-columns:1fr} .iq-side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:12px} }

/* 약관·정책 */
.policy-wrap{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:start}
.policy-nav{position:sticky;top:84px;display:flex;flex-direction:column;gap:2px}
.policy-nav a{padding:9px 12px;border-radius:10px;font-size:14px;color:var(--ink-2)}
.policy-nav a.act{background:var(--bg-soft);color:var(--ink);font-weight:700}
.policy-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.policy-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.policy-meta .input{padding:6px 8px;font-size:13px;width:auto}
.policy-body{font-size:15px;line-height:1.85;color:var(--ink-2)}
.policy-body h3{font-size:17px;color:var(--ink);margin:26px 0 8px}
.policy-body p{margin:0 0 12px}
.policy-body ul{margin:0 0 12px 1.2em}
.policy-body a{text-decoration:underline;word-break:break-all}
footer .biz{font-size:12px;color:var(--muted);line-height:1.8;margin-top:10px}
footer .biz .sep{margin:0 8px;opacity:.5}
footer .u{text-decoration:underline}
.agree{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0;display:flex;flex-direction:column;gap:2px}
.agree .chk{margin:4px 0}
.agree-all{padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:4px!important}
.agree a{color:inherit}
.acc-links{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:16px;font-size:13px}
.acc-links .link,.acc-links a{color:var(--muted);text-decoration:underline;font-size:13px}
.acc-links .danger{color:var(--accent)}
.out-list{margin:10px 0 14px 1.1em;font-size:14px;line-height:1.8;color:var(--ink-2)}
@media print{ header,.mnav,.policy-nav,.policy-meta select,.policy-meta button,footer{display:none!important} .policy-wrap{display:block} }
@media (max-width:760px){ .policy-wrap{grid-template-columns:1fr;gap:16px} .policy-nav{position:static;flex-direction:row;overflow-x:auto;white-space:nowrap} }

/* 관리자 약관 편집 */
.pv-tabs{display:flex;gap:4px;align-items:center;margin:6px 0}
.pv-tabs button{padding:6px 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted)}
.pv-tabs button.act{background:var(--bg-soft);color:var(--ink)}
.tok-list{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.tok-list button{border:1px solid var(--line);border-radius:8px;padding:3px 8px;font-size:11px;background:var(--card);cursor:pointer}

/* 강의 편집: 진단 답 고르기 */
.tg-pick{border:1px solid var(--line);border-radius:12px;padding:6px 12px;max-height:340px;overflow:auto}
.tg-row{display:grid;grid-template-columns:170px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);align-items:start}
.tg-row:last-child{border-bottom:0}
.tg-q{font-size:12px;font-weight:700;color:var(--ink-2);padding-top:5px}
.tg-opts{display:flex;flex-wrap:wrap;gap:6px}
.tg-chip{display:inline-flex;cursor:pointer}
.tg-chip input{position:absolute;opacity:0;width:0;height:0}
.tg-chip span{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--ink-2);background:var(--card)}
.tg-chip input:checked+span{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);font-weight:700}
.tg-chip input:focus-visible+span{outline:2px solid var(--accent)}
@media (max-width:760px){ .tg-row{grid-template-columns:1fr;gap:4px} }

/* 관리자 필터 막대: 모든 칸 높이 36px로 통일, 줄마다 오른쪽 끝을 같은 선에 맞춤 */
.lv,.toolbar{--ctl:36px}
.lv .seg,.toolbar .seg{min-height:var(--ctl);box-sizing:border-box;align-items:center}
.lv .seg button,.toolbar .seg button{height:calc(var(--ctl) - 6px);display:inline-flex;align-items:center;padding:0 14px}
.lv .input,.lv select,.lv .btn,.toolbar .input,.toolbar select,.toolbar .btn,.pdates .input{height:var(--ctl);box-sizing:border-box;padding-top:0;padding-bottom:0;font-size:13px;border-radius:10px;line-height:1}
.lv .btn,.toolbar .btn{padding-left:14px;padding-right:14px}
.lv .pbar,.lv .lv-row{min-height:var(--ctl)}
.lv .pbar .pdates{margin-left:auto}
.lv .lv-row>span[style*="margin-left:auto"]{display:flex;gap:6px;align-items:center}
.pbar .lbl{align-self:center}
@media (max-width:760px){ .lv .pbar .pdates{margin-left:0} }
/* 검색·필터 칸: 같은 폭 칸으로 한 줄을 꽉 채워 오른쪽 끝을 맞춤. 버튼은 아래 줄 오른쪽 */
.lv-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.lv-fields .input{width:100%;max-width:none}
.lv-actions{padding-top:10px;border-top:1px solid var(--line)}

/* 강의 썸네일 이미지 */
.thumb.img{position:relative;padding:0;overflow:hidden;background:var(--bg-soft)}
.thumb.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.thumb.img .t-tag{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.55);color:#fff;padding:3px 9px;border-radius:99px;opacity:1;font-size:11px}

/* 관리자 강의 목록: 썸네일 중심 */
.clist{display:flex;flex-direction:column;gap:8px}
.cl-row{display:grid;grid-template-columns:132px 1fr 130px 280px;gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.cl-row:hover,.cl-row:focus-visible{border-color:var(--ink);box-shadow:0 4px 14px -8px rgba(0,0,0,.25);outline:none}
.cl-thumb .thumb{border-radius:10px}
.thumb.mini{font-size:12px;padding:10px;line-height:1.3}
.thumb.mini .t-tag{font-size:10px}
.cl-title{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:2px}
.cl-title b{font-size:15px}
.cl-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin-top:8px}
.cl-meta .warn{font-weight:600}
.cl-inc{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.cl-price{display:flex;flex-direction:column;gap:2px;white-space:nowrap;text-align:right}
.cl-price b{font-size:16px}
.cl-rec{display:flex;flex-direction:column;gap:4px}
.cl-rec>div{display:flex;gap:4px;flex-wrap:wrap}
.thumb-edit{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:14px}
@media (max-width:980px){ .cl-row{grid-template-columns:110px 1fr;gap:12px} .cl-price{text-align:left;grid-column:2} .cl-rec{grid-column:1/-1} }
@media (max-width:560px){ .thumb-edit{grid-template-columns:1fr} }

/* 분류 관리: 블로그 카테고리처럼 */
.cat-ed{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:14px;align-items:start}
.cat-tree,.cat-form{padding:16px}
.cat-tb{display:flex;gap:6px;flex-wrap:wrap;--ctl:36px}
.cat-tb .btn{height:36px;padding:0 12px;font-size:13px}
.cat-tb.bottom{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.cat-tb .danger{color:var(--accent)}
.tree,.tree-kids{list-style:none;margin:0;padding:0}
.tree{margin-top:12px;display:flex;flex-direction:column;gap:2px}
.tree-kids{display:flex;flex-direction:column;gap:2px}
.tn{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px;border-radius:10px;cursor:pointer;font-size:14px;border:1px solid transparent}
.tn:hover{background:var(--bg-soft)}
.tn.sel{background:var(--accent-soft);border-color:var(--accent);font-weight:700}
.tn.off .nm{color:var(--muted)}
.tn.kid{padding-left:26px;font-size:13px}
.tn .branch{color:var(--muted)}
.tn .ic{width:20px;text-align:center}
.tn .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tn .cnt{min-width:24px;height:20px;border-radius:99px;background:var(--bg-soft);font-size:11px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);font-weight:600}
.tn.dragging{opacity:.4}.tn.drop-over{box-shadow:0 -2px 0 var(--accent)}
.cat-form-head{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.pick-ic{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.pick-ic button{width:36px;height:36px;border:1px solid var(--line);border-radius:10px;font-size:18px;background:var(--card);cursor:pointer}
.pick-ic button.act{border-color:var(--accent);background:var(--accent-soft)}
.pick-ic .input{height:36px}
.pick-color{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pick-color button{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;box-shadow:0 0 0 1px var(--line)}
.pick-color button.act{border-color:var(--card);box-shadow:0 0 0 2px var(--ink)}
.pick-color input[type=color]{width:36px;height:30px;border:1px solid var(--line);border-radius:8px;padding:2px;background:var(--card)}
.sw-row{display:flex;gap:12px;align-items:flex-start;font-size:14px;cursor:pointer;margin-top:6px}
.cat-courses{list-style:none;margin:0 0 6px;padding:0;font-size:13px;max-height:180px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.cat-courses li{padding:8px 12px;border-bottom:1px solid var(--line)}.cat-courses li:last-child{border-bottom:0}
.adv{margin-top:10px}.adv summary{cursor:pointer;color:var(--muted)}
.cat-preview{margin-top:14px;padding:14px 16px}
.savebar{position:sticky;bottom:0;display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:14px;padding:12px 16px;background:var(--card);border:1px solid var(--line);border-radius:14px;font-size:13px;color:var(--muted)}
.savebar span{margin-right:auto}
.savebar.show{border-color:var(--accent);box-shadow:0 -6px 20px -12px rgba(0,0,0,.25)}
.savebar.show span{color:var(--accent);font-weight:600}
.savebar .btn{height:36px;padding:0 14px;font-size:13px}
@media (max-width:860px){ .cat-ed{grid-template-columns:1fr} }
/* 강의 편집: 목차마다 영상 */
.mod{border:1px solid var(--line);border-radius:12px;padding:8px;margin-bottom:6px;background:var(--card)}
.mod .row{margin:0}
.mod-vid{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 0 34px;font-size:13px}
.mod-vid .vname{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mod-vid .vbtns{display:flex;gap:4px;margin-left:auto}
.mod-vid .btn{height:30px;padding:0 10px;font-size:12px}
.mod-url{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0 0 34px}
.mod-url .input{height:34px;padding:0 10px;font-size:13px;flex:1;min-width:200px}
.mod-url .btn{height:34px;padding:0 12px;font-size:12px}
/* 강의 편집 폼 정리: 체크 항목이 글자 단위로 꺾이지 않게, 버튼 모양의 label은 버튼 색 유지 */
#cf .chk{flex:0 0 auto;white-space:nowrap}
.field label.btn{font-size:12px;font-weight:700}
.field label.btn-dark,.mod-vid label.btn-dark{color:var(--bg)}
.field label.btn-line,.mod-vid label.btn-line{color:var(--ink)}

/* 관리자 강의 목록: 스토어 상품처럼 한 줄 3개 */
.cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.cc{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s;text-align:left}
.cc:hover,.cc:focus-visible{border-color:var(--ink);box-shadow:0 10px 24px -14px rgba(0,0,0,.3);transform:translateY(-2px);outline:none}
.cc-thumb{position:relative}
.cc-thumb .thumb{border-radius:0}
.cc-badges{position:absolute;top:10px;left:10px;display:flex;gap:4px}
.cc-badges .chip{box-shadow:0 1px 3px rgba(0,0,0,.12)}
.cc-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.cc-title{font-size:15px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.cc-price{display:flex;align-items:baseline;gap:8px}
.cc-price b{font-size:18px}
.cc-meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--ink-2);padding-top:8px;border-top:1px solid var(--line)}
.cc-meta .warn{font-weight:700}.cc-meta .okc{color:var(--ok);font-weight:700}
.cc-inc{display:flex;flex-wrap:wrap;gap:4px;min-height:24px}
.cc-rec{margin-top:auto;display:flex;flex-direction:column;gap:4px}
.cc-rec>div{display:flex;flex-wrap:wrap;gap:4px}
.cc-new{align-items:center;justify-content:center;gap:8px;min-height:320px;border:2px dashed var(--line);background:var(--bg-soft);color:var(--ink-2);font-size:15px;font-weight:700}
.cc-new span{font-size:34px;font-weight:300;line-height:1}
@media (max-width:1100px){ .cgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .cgrid{grid-template-columns:1fr} }
.cc-cat{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-rec{margin-top:4px}
/* 포함 프로그램 줄 높이 고정 → 아래 '추천 대상'이 카드끼리 같은 높이에서 시작 */
.cc-inc{min-height:26px;align-content:flex-start}
.cc-inc .chip{height:26px;box-sizing:border-box;display:inline-flex;align-items:center}
.cc-new{min-height:0}

/* 프로그램 상세 */
.plink{color:inherit}.plink:hover{text-decoration:underline}
.prog-hero{padding:40px 0 48px}
.prog-hero-grid{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start}
.prog-ic{font-size:48px;line-height:1}
.prog-name{font-size:34px;margin-top:12px;line-height:1.25}
.prog-alias{display:block;font-size:16px;font-weight:600;color:var(--muted);margin-top:6px}
.prog-buy{padding:22px;position:sticky;top:84px}
.prog-buy .big{font-size:28px;font-weight:800}
.prog-buy .btn{width:100%}
.prog-body{padding-bottom:60px}
.prog-intro{font-size:15px;line-height:1.85;color:var(--ink-2)}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.feat{padding:16px;display:flex;flex-direction:column;gap:6px}
.feat .no{font-size:12px;font-weight:800;color:var(--accent)}
.steps-list{margin:0 0 0 1.2em;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.7;color:var(--ink-2)}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.shot{border:1px solid var(--line);border-radius:12px;overflow:hidden;padding:0;cursor:zoom-in;background:var(--bg-soft);aspect-ratio:16/10}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.video-box{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.video-box iframe,.video-box video{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:860px){ .prog-hero-grid{grid-template-columns:1fr} .prog-buy{position:static} .prog-name{font-size:28px} }

/* 관리자 프로그램 편집: 상세 페이지 내용 */
.pd-box{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:14px}
.pd-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.pd-shot{position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.pd-shot img{width:100%;height:100%;object-fit:cover;display:block}
.pd-shot button{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:12px;cursor:pointer}
.pd-add{aspect-ratio:16/10;border:2px dashed var(--line);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:22px;color:var(--muted);cursor:pointer;background:var(--bg-soft)}
.pd-add span{font-size:12px;font-weight:600}
/* 프로그램 화면 이미지: 휴대폰 세로 화면도 잘리지 않게 (같은 크기 칸에 전체가 보이도록) */
.shots{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.shot{aspect-ratio:9/16;background:#0d1117}
.shot img{object-fit:contain}
.program ul li.more{color:var(--muted);list-style:none}

/* 결제 후 환불 불가 안내 (시스템 솔루션 포함 강의) */
.no-refund.auto-pay{background:var(--bg-soft);border-color:var(--line)}
.no-refund{border:1.5px solid #e0a32e;background:#fff8ea;border-radius:12px;padding:12px 14px;margin:0 0 14px}
.no-refund b{color:#8a5a00}
.no-refund p{margin:6px 0 8px;line-height:1.6}
.no-refund .chk{font-weight:600}
.chip.no-ref{background:#fff2d6;color:#8a5a00;border-color:#f0cf8a}

/* 프로그램 상세: 설명 / 장점 탭 */
.prog-tabs{position:sticky;top:64px;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.prog-tabs .wrap{display:flex;gap:4px;overflow-x:auto}
.prog-tabs button{background:none;border:0;padding:16px 14px 14px;font:inherit;font-size:15px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.prog-tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.pain-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.pain{background:var(--bg-soft);border-radius:14px;padding:16px 18px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.pain::before{content:'“';display:block;font-size:28px;line-height:1;color:var(--accent);font-weight:800}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.flow li{border:1px solid var(--line);border-radius:14px;padding:16px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.flow .no{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--bg);font-weight:700;font-size:13px;margin-bottom:8px}
.ben-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.ben{border:1px solid var(--line);border-radius:16px;padding:22px}
.ben .no{display:block;font-size:13px;font-weight:700;color:var(--accent);margin-bottom:8px}
.ben b{display:block;font-size:18px;letter-spacing:-.02em;margin-bottom:8px}
.ben p{font-size:14px;line-height:1.7;color:var(--ink-2)}
.cmp{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.cmp th,.cmp td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp thead th{font-size:13px;color:var(--muted);font-weight:600}
.cmp tbody th{font-weight:600;white-space:nowrap}
.cmp td{color:var(--ink-2)}
.cmp .me{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--ink);font-weight:600}
.cmp thead .me{color:var(--accent)}
.for-list{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:15px;line-height:1.6}
.for-list li{padding:12px 16px;background:var(--bg-soft);border-radius:12px}
.next-tab{padding:8px 0 32px;text-align:center}
.slogan{margin:24px 0 8px;padding:40px 24px;border-radius:20px;background:var(--ink);color:var(--bg);text-align:center}
.slogan p{font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.45;margin-bottom:18px;white-space:pre-line}
@media (max-width:640px){ .prog-tabs{top:56px} .slogan p{font-size:19px} .ben b{font-size:16px} }