/* ===== AI-Men 교사용 PC · 앱과 동일한 밤하늘 디자인 ===== */
:root{
  --navy:#0A1024; --navy-2:#0E1834; --panel:rgba(255,255,255,0.05); --panel-2:rgba(255,255,255,0.08);
  --gold:#FFC529; --gold-2:#E0B84E; --gold-ink:#FFE6A8;
  --ink:#EAEFFA; --ink-2:#AEB7D4; --ink-3:#7E89AE; --line:rgba(255,255,255,0.12); --line-2:rgba(255,255,255,0.07);
  --blue:#6FA8DC; --green:#7CCB8E; --pink:#E89BC0; --purple:#B79BE8;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{ font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif; background:var(--navy); color:var(--ink); -webkit-font-smoothing:antialiased; letter-spacing:-0.3px; overflow:hidden; }
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;letter-spacing:-0.3px;}
img{display:block;}
::selection{background:var(--gold);color:var(--navy);}

.sky{ position:fixed; inset:0; z-index:0; background:
  radial-gradient(ellipse 70% 50% at 50% -8%, #1A2750, transparent 60%),
  radial-gradient(circle at 18% 28%, rgba(255,255,255,0.07) 0 1px, transparent 2px) 0 0/130px 130px,
  radial-gradient(circle at 72% 62%, rgba(255,255,255,0.05) 0 1px, transparent 2px) 0 0/100px 100px,
  linear-gradient(180deg,#0C1430,#0A1024 72%); }

/* shell */
.shell{ position:relative; z-index:1; display:flex; height:100vh; }

/* sidebar (앱의 하단탭을 PC 사이드바로) */
.sidebar{ width:230px; flex:0 0 auto; display:flex; flex-direction:column; padding:24px 16px; border-right:1px solid var(--line-2); background:rgba(8,12,28,0.4); }
.sb-brand{ display:flex; align-items:center; gap:12px; padding:4px 8px 24px; }
.sb-brand .logo{ width:40px; height:40px; border-radius:12px; background:linear-gradient(160deg,#1B2A5A,#0E1838); border:1px solid rgba(255,197,41,0.35); display:grid; place-items:center; }
.cross{ position:relative; width:18px; height:18px; }
.cross::before,.cross::after{ content:''; position:absolute; background:var(--gold); border-radius:2px; }
.cross::before{ width:22%; height:100%; left:39%; } .cross::after{ height:22%; width:74%; top:33%; left:13%; }
.sb-brand b{ font-size:17px; font-weight:900; color:#fff; display:block; line-height:1; }
.sb-brand span{ font-size:11px; color:var(--ink-3); font-weight:700; }
.sb-nav{ display:flex; flex-direction:column; gap:4px; }
.sb-item{ display:flex; align-items:center; gap:13px; padding:13px 14px; border-radius:13px; color:var(--ink-2); font-size:15px; font-weight:700; text-align:left; transition:all .14s; }
.sb-item .ic{ font-size:20px; width:24px; text-align:center; }
.sb-item:hover{ background:var(--panel); color:#fff; }
.sb-item.on{ background:linear-gradient(100deg,rgba(255,197,41,0.18),rgba(255,197,41,0.06)); color:#fff; }
.sb-start{ margin-top:18px; display:flex; align-items:center; justify-content:center; gap:9px; height:52px; border-radius:15px; background:linear-gradient(160deg,#FFD24D,#E0A82E); color:#2A2208; font-size:16px; font-weight:900; box-shadow:0 4px 0 #C2901F; transition:transform .08s; }
.sb-start:active{ transform:translateY(3px); box-shadow:0 1px 0 #C2901F; }
.sb-foot{ margin-top:auto; display:flex; align-items:center; gap:11px; padding:12px; border-radius:13px; background:var(--panel); border:1px solid var(--line-2); }
.sb-foot .av{ width:38px; height:38px; border-radius:50%; background:linear-gradient(150deg,#FFD873,#E0A82E); display:grid; place-items:center; font-weight:800; color:#3A2D07; }
.sb-foot .nm{ font-size:13.5px; font-weight:800; color:#fff; } .sb-foot .rl{ font-size:11px; color:var(--ink-3); }

/* main */
.main{ flex:1; min-width:0; overflow-y:auto; padding:34px 40px 60px; }
.main::-webkit-scrollbar{ width:10px; } .main::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.12); border-radius:6px; }
.page-head{ margin-bottom:26px; }
.page-head .ey{ font-size:13px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--gold-ink); }
.page-head h1{ font-size:30px; font-weight:900; letter-spacing:-0.8px; margin-top:6px; color:#fff; }
.page-head p{ font-size:15px; color:var(--ink-2); margin-top:5px; }

.fade{ animation:fade .35s ease; } @keyframes fade{ from{ transform:translateY(10px);} to{ transform:none;} }

/* cards */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:20px; }
.grid-2{ display:grid; grid-template-columns:1.5fr 1fr; gap:20px; }

/* verse hero */
.verse-hero{ padding:38px 40px; border-radius:24px; background:linear-gradient(150deg, rgba(255,197,41,0.16), rgba(123,91,214,0.12)); border:1px solid rgba(255,197,41,0.28); position:relative; overflow:hidden; }
.verse-hero .eyebrow{ font-size:13px; font-weight:800; color:var(--gold-ink); letter-spacing:0.5px; }
.verse-hero .v{ font-size:30px; font-weight:800; color:#fff; line-height:1.5; margin-top:16px; word-break:keep-all; }
.verse-hero .r{ font-size:16px; font-weight:800; color:var(--gold-ink); margin-top:18px; }

/* coach card */
.coach{ padding:26px 28px; }
.coach .t{ display:flex; align-items:center; gap:9px; font-size:17px; font-weight:900; color:#fff; }
.coach .t .orb{ width:30px; height:30px; border-radius:9px; background:rgba(183,155,232,0.22); display:grid; place-items:center; font-size:16px; }
.coach .b{ font-size:14px; color:var(--ink-2); line-height:1.65; margin-top:14px; word-break:keep-all; }
.coach ul{ list-style:none; margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.coach li{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--ink); }
.coach li::before{ content:'✓'; width:22px; height:22px; flex:0 0 auto; border-radius:50%; background:rgba(124,203,142,0.18); color:var(--green); display:grid; place-items:center; font-size:12px; font-weight:900; }

/* section title */
.sec{ display:flex; align-items:center; justify-content:space-between; margin:34px 0 16px; }
.sec h2{ font-size:21px; font-weight:900; color:#fff; letter-spacing:-0.5px; }
.sec .more{ font-size:14px; font-weight:700; color:var(--gold-ink); }

/* growth tree strip */
.growth-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.lvl{ padding:18px 14px; border-radius:18px; background:var(--panel); border:1px solid var(--line); text-align:center; transition:transform .14s, border-color .14s; cursor:pointer; }
.lvl:hover{ transform:translateY(-4px); border-color:rgba(255,197,41,0.4); }
.lvl .fig{ aspect-ratio:1; border-radius:14px; display:grid; place-items:center; margin-bottom:12px; overflow:hidden; }
.lvl .fig img{ width:84%; height:84%; object-fit:contain; }
.lvl .lv{ font-size:13px; font-weight:900; color:var(--gold-ink); }
.lvl .nm{ font-size:15px; font-weight:800; color:#fff; margin-top:3px; }
.lvl .xp{ font-size:12px; color:var(--ink-3); margin-top:4px; }

/* mentor grid */
.mentor-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.m-card{ border-radius:18px; background:var(--panel); border:1px solid var(--line); overflow:hidden; cursor:pointer; transition:transform .14s, border-color .14s, box-shadow .14s; }
.m-card:hover{ transform:translateY(-4px); border-color:rgba(255,197,41,0.4); box-shadow:0 14px 34px rgba(0,0,0,0.4); }
.m-card .fig{ aspect-ratio:1; background:radial-gradient(ellipse 80% 70% at 50% 96%, rgba(255,255,255,0.08), transparent 70%); display:flex; align-items:flex-end; justify-content:center; }
.m-card .fig img{ width:86%; height:94%; object-fit:contain; filter:drop-shadow(0 10px 14px rgba(0,0,0,0.45)); }
.m-card .meta{ padding:12px 14px 15px; border-top:1px solid var(--line-2); }
.m-card .nm{ font-size:16px; font-weight:800; color:#fff; }
.m-card .nm span{ font-size:11px; color:var(--ink-3); font-weight:600; margin-left:5px; }
.m-card .rl{ font-size:12.5px; color:var(--ink-2); margin-top:3px; }

/* mentor detail panel */
.scrim{ position:fixed; inset:0; z-index:50; background:rgba(8,12,28,0.66); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; padding:40px; }
.detail{ width:100%; max-width:760px; background:#101A36; border:1px solid var(--line); border-radius:24px; overflow:hidden; display:flex; box-shadow:0 30px 70px rgba(0,0,0,0.5); animation:pop .28s cubic-bezier(.2,1.1,.4,1); }
@keyframes pop{ from{ transform:scale(.96);} to{ transform:none;} }
.detail .left{ width:38%; flex:0 0 auto; background:radial-gradient(ellipse 80% 70% at 50% 95%, rgba(255,197,41,0.16), transparent 68%); display:flex; align-items:flex-end; justify-content:center; padding-top:24px; }
.detail .left img{ width:92%; object-fit:contain; filter:drop-shadow(0 18px 24px rgba(0,0,0,0.5)); }
.detail .right{ flex:1; padding:30px 32px; }
.detail .nm{ font-size:28px; font-weight:900; color:#fff; }
.detail .nm span{ font-size:14px; color:var(--ink-3); font-weight:600; margin-left:8px; }
.detail .rl{ font-size:15px; font-weight:800; color:var(--gold-ink); margin-top:5px; }
.detail .verse{ font-size:15px; color:var(--ink); line-height:1.6; margin-top:18px; padding:16px; border-radius:14px; background:rgba(255,255,255,0.05); border:1px solid var(--line-2); word-break:keep-all; }
.detail .verse b{ display:block; color:var(--gold-ink); font-size:12.5px; margin-top:8px; }
.detail .qh{ font-size:13px; font-weight:800; color:var(--ink-2); margin:20px 0 10px; }
.detail .q{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink); margin-bottom:9px; }
.detail .q i{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--gold); color:#2A2208; font-style:normal; font-weight:900; font-size:12px; display:grid; place-items:center; }
.detail .acts{ display:flex; gap:10px; margin-top:24px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 20px; border-radius:14px; font-size:15px; font-weight:800; }
.btn.gold{ background:linear-gradient(160deg,#FFD24D,#E0A82E); color:#2A2208; box-shadow:0 3px 0 #C2901F; flex:1; }
.btn.gold:active{ transform:translateY(3px); box-shadow:none; }
.btn.ghost{ background:var(--panel); border:1px solid var(--line); color:var(--ink); }
.x-close{ position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.1); display:grid; place-items:center; color:#fff; font-size:20px; }

/* ===== 수업 모드 오버레이 (풀스크린 프레젠터) ===== */
.class{ position:fixed; inset:0; z-index:60; background:var(--navy); display:none; flex-direction:column; }
.class.show{ display:flex; }
.class .sky2{ position:absolute; inset:0; z-index:0; background:
  radial-gradient(ellipse 70% 50% at 50% -8%, #1A2750, transparent 60%),
  radial-gradient(circle at 80% 16%, rgba(255,197,41,0.14), transparent 40%),
  linear-gradient(180deg,#0C1430,#0A1024 72%); }
.class .ctop{ position:relative; z-index:2; display:flex; align-items:center; gap:18px; padding:22px 40px 0; }
.class .ctag{ font-size:15px; font-weight:800; color:var(--gold-ink); background:rgba(255,197,41,0.12); border:1px solid rgba(255,197,41,0.28); padding:8px 16px; border-radius:999px; }
.class .cprog{ display:flex; gap:8px; }
.class .cprog .d{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.18); } .class .cprog .d.on{ background:var(--gold); transform:scale(1.2);} .class .cprog .d.done{ background:rgba(255,197,41,0.45);}
.class .cexit{ margin-left:auto; font-size:14px; font-weight:700; color:var(--ink-2); background:var(--panel); border:1px solid var(--line); padding:9px 16px; border-radius:11px; }
.cslides{ position:relative; z-index:1; flex:1; display:flex; align-items:center; justify-content:center; padding:2vh 6vw; }
.cslide{ position:absolute; inset:2vh 6vw; display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.cslide.active{ display:flex; animation:fade .4s ease; }
.c-eyebrow{ font-size:1.5vw; font-weight:800; letter-spacing:0.4vw; text-transform:uppercase; color:var(--gold-ink); margin-bottom:2.4vh; }
.c-big{ font-size:4.6vw; font-weight:900; color:#fff; line-height:1.18; word-break:keep-all; }
.c-sub{ font-size:1.7vw; color:var(--ink-2); margin-top:2.6vh; font-weight:600; }
.c-verse{ font-size:3.4vw; font-weight:800; color:#fff; line-height:1.5; max-width:80vw; word-break:keep-all; }
.c-verse .hl{ color:var(--gold); }
.c-ref{ font-size:1.7vw; font-weight:800; color:var(--gold-ink); margin-top:3.5vh; }
.c-mentor{ display:flex; align-items:center; gap:5vw; max-width:88vw; }
.c-mfig{ width:24vw; flex:0 0 auto; } .c-mfig img{ width:100%; filter:drop-shadow(0 2vh 3vh rgba(0,0,0,0.5)); }
.c-minfo{ text-align:left; }
.c-mname{ font-size:3vw; font-weight:900; color:#fff; } .c-mname span{ font-size:1.3vw; color:var(--ink-3); margin-left:0.8vw; }
.c-mrole{ font-size:1.5vw; font-weight:700; color:var(--gold-ink); margin-top:0.5vh; }
.c-qlist{ margin-top:3vh; display:flex; flex-direction:column; gap:1.6vh; }
.c-q{ display:flex; align-items:flex-start; gap:1.2vw; font-size:1.9vw; font-weight:700; background:rgba(255,255,255,0.05); border:1px solid var(--line); border-radius:1.4vw; padding:1.6vh 1.6vw; max-width:52vw; }
.c-qn{ flex:0 0 auto; width:2.6vw; height:2.6vw; min-width:36px; min-height:36px; border-radius:50%; background:var(--gold); color:#2A2208; font-weight:900; font-size:1.4vw; display:grid; place-items:center; }
.c-quiz{ font-size:3vw; font-weight:900; color:#fff; max-width:80vw; line-height:1.4; word-break:keep-all; }
.c-ox{ display:flex; gap:5vw; margin-top:5vh; }
.ox{ width:15vw; height:15vw; min-width:150px; min-height:150px; border-radius:3vw; display:grid; place-items:center; font-size:7.5vw; font-weight:900; border:0.4vw solid; cursor:pointer; transition:transform .15s; }
.ox.o{ color:var(--green); border-color:var(--green); } .ox.x{ color:var(--pink); border-color:var(--pink); }
.ox:hover{ transform:translateY(-1vh);} .ox.picked{ box-shadow:0 0 0 0.6vw rgba(255,197,41,0.4); }
.c-ans{ margin-top:4vh; font-size:1.7vw; font-weight:800; color:var(--gold-ink); opacity:0; transition:opacity .3s; } .c-ans.show{ opacity:1; }
.qr-box{ width:22vw; height:22vw; min-width:200px; min-height:200px; background:#fff; border-radius:2vw; padding:1.6vw; flex:0 0 auto; }
.qr-grid{ width:100%; height:100%; background-image:
  linear-gradient(90deg,#0A1024 25%,transparent 25% 50%,#0A1024 50% 75%,transparent 75%),
  linear-gradient(0deg,#0A1024 25%,transparent 25% 50%,#0A1024 50% 75%,transparent 75%);
  background-size:13% 13%; border:0.5vw solid #0A1024; border-radius:0.5vw; }
.c-join{ display:flex; align-items:center; gap:5vw; max-width:86vw; }
.c-jt{ text-align:left; } .c-jt .jt{ font-size:2.6vw; font-weight:900; color:#fff; line-height:1.3; } .c-jt .jd{ font-size:1.4vw; color:var(--ink-2); margin-top:1.5vh; }
.pfeed{ margin-top:2.6vh; display:flex; flex-direction:column; gap:1vh; width:38vw; }
.pitem{ display:flex; gap:1vw; font-size:1.4vw; background:rgba(255,255,255,0.05); border:1px solid var(--line); border-radius:1vw; padding:1.1vh 1.3vw; text-align:left; opacity:0; transform:translateY(1vh); } .pitem.in{ opacity:1; transform:none; transition:all .4s; } .pitem .who{ color:var(--gold-ink); font-weight:800; }
.att-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.4vw; max-width:74vw; }
.att{ display:flex; flex-direction:column; align-items:center; gap:1vh; padding:1.8vh 1vw; border-radius:1.4vw; background:rgba(255,255,255,0.05); border:1px solid var(--line); cursor:pointer; transition:all .15s; }
.att .av{ width:4.6vw; height:4.6vw; min-width:52px; min-height:52px; border-radius:50%; background:linear-gradient(150deg,#243056,#161F3E); display:grid; place-items:center; font-size:1.8vw; font-weight:800; color:var(--ink-2); position:relative; }
.att .nm{ font-size:1.3vw; font-weight:700; }
.att.here{ background:rgba(124,203,142,0.12); border-color:var(--green); } .att.here .av{ background:linear-gradient(150deg,#2E7D4F,#1F8A5B); color:#fff; }
.att.here .av::after{ content:'✓'; position:absolute; bottom:-0.3vh; right:-0.3vh; width:1.8vw; height:1.8vw; min-width:22px; min-height:22px; border-radius:50%; background:var(--green); color:#0A1024; font-size:1.1vw; display:grid; place-items:center; }
.att-count{ margin-top:3.5vh; font-size:1.9vw; font-weight:800; color:var(--gold-ink); }
.c-bless{ font-size:3.6vw; font-weight:900; color:#fff; line-height:1.4; max-width:78vw; word-break:keep-all; } .c-bless .hl{ color:var(--gold); }
.cnav{ position:absolute; bottom:3.5vh; z-index:3; width:4.4vw; height:4.4vw; min-width:54px; min-height:54px; border-radius:50%; background:rgba(255,255,255,0.08); border:1px solid var(--line); display:grid; place-items:center; font-size:2vw; color:#fff; }
.cnav.prev{ left:3vw; } .cnav.next{ right:3vw; }
.chint{ position:absolute; bottom:4.8vh; left:50%; transform:translateX(-50%); z-index:3; font-size:1.1vw; color:var(--ink-3); font-weight:600; }
.cnav-zone{ position:absolute; top:0; bottom:0; width:14vw; z-index:1; } .cnav-zone.l{ left:0;} .cnav-zone.r{ right:0;}