/* 로고스 강의 리포트 — 시안 B(h.css) 위에 얹는 추가 스타일 */

/* 페이지 제목: 로고 + 서비스명 */
.phead h1.brand a{display:inline-flex;align-items:center;gap:22px;flex-wrap:wrap;color:inherit}
.phead h1.brand a:hover{text-decoration:none}
.phead h1.brand img{height:40px;width:auto;display:block}
.phead h1.brand span{padding-left:22px;border-left:2px solid var(--line2);line-height:1.1}
.single{padding-top:48px}

/* 위치표시줄 오른쪽 강의 선택 */
.hcrumb .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hcrumb ol{min-width:0}
.hcrumb ol li[aria-current]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lsel{display:flex;align-items:center;gap:10px;flex:none}
.lsel label{font-size:15px;font-weight:600;color:var(--t2);white-space:nowrap}
.lsel .sel{height:40px;font-size:15px;width:min(340px,40vw);padding-right:40px}

/* 목록 검색: 교육분야 / 제목 / 내용 */
.search.s-lr{grid-template-columns:200px minmax(0,1fr) auto}
.nlist .pd{line-height:1.7}

/* 빈 상태 */
.empty{text-align:center;padding:64px 16px;border-top:2px solid var(--navy);border-bottom:1px solid var(--line);color:var(--t2)}
.empty .ic{color:var(--t3)}
.empty p{margin:10px 0 18px;font-size:17px}

/* 상세: 목록과 같은 폭, 본문 + 강의정보 사이드 */
.vwrap{max-width:1000px;margin:0}
.vhd .bdgs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.vhd h2{font-size:30px}
.vlayout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:start}
.vmain{min-width:0}
.vmain .vbd{padding:36px 4px;max-width:960px}
.vsum{font-size:19px;font-weight:600;color:var(--ink)}
.vbd.cont h2{font-size:22px}
.vmain .flist{max-width:960px}
.vside{position:sticky;top:24px;padding-top:36px}
.vcard{background:var(--sec);border-top:2px solid var(--navy);padding:6px 24px 24px}
.vdl{display:grid;grid-template-columns:84px minmax(0,1fr);margin:0;font-size:16px}
.vdl dt,.vdl dd{padding:13px 0;border-bottom:1px solid var(--line);margin:0}
.vdl dt{font-weight:700;color:var(--t2)}
.vdl dd{color:var(--ink);overflow-wrap:anywhere}
.vcta{padding-top:20px}
.vcta .btn{width:100%}
.vcta .hint{margin-top:10px;font-size:14px}
.vtask{background:#fff;border-left:4px solid var(--navy);padding:14px 16px;font-size:15px;line-height:1.7;margin-bottom:16px;color:var(--t1)}
.vtask strong{display:block;margin-bottom:4px;color:var(--ink)}
.vclosed{display:flex;align-items:center;gap:8px;margin:0;color:var(--t2);font-weight:600}
.rlist .h2row{flex-wrap:wrap}
.rlist .h2row .btn{flex:none}
.empty .btn{margin-top:4px}
.mcta{display:none}

/* 리포트 제출 모달 */
.dlg.rdlg{width:min(880px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:0;overflow:hidden}
.rdlg[open]{display:flex;flex-direction:column}
.rdlg .dlg-hd{padding:22px 28px 16px;margin:0;border-bottom:1px solid var(--line);flex:none}
.rdlg-bd{overflow-y:auto;padding:20px 28px 0;flex:1;overscroll-behavior:contain}
.dlg.rdlg form{padding:0}
.rdlg .hgrid{gap:22px 24px}
.rdlg .hf .lb{font-size:16px;margin-bottom:8px}
.rdlg .inp{height:52px}
.rdlg .frm-note{margin:0 0 12px}
.rdlg-task{background:var(--sec);border-left:4px solid var(--navy);padding:12px 16px;margin-bottom:16px;font-size:15px;line-height:1.7}
.rdlg-ft{position:sticky;bottom:0;background:#fff;margin:24px 0 0;padding:16px 0 22px;border-top:1px solid var(--line);justify-content:flex-end}

/* 리포트 수정 폼 */
.hfrm.rform{margin-bottom:24px;padding:32px;background:var(--sec);border-top:2px solid var(--navy)}
.hfrm.rform .frm-note{margin-top:-8px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;list-style:none;margin:6px 0 0;padding:0;width:100%}
.thumbs:empty{display:none}
.thumbs li{position:relative;background:#fff;border:1px solid var(--line2);display:flex;flex-direction:column}
.thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--sec)}
.thumbs .fn{font-size:13px;color:var(--t2);padding:6px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumbs .x{position:absolute;top:6px;right:6px;width:30px;height:30px;border:0;background:rgba(20,33,55,.8);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.thumbs .no{position:absolute;top:6px;left:6px;min-width:26px;height:26px;padding:0 6px;background:var(--navy);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.thumbs .mv{display:flex;border-top:1px solid var(--line)}
.thumbs .mv button{flex:1;height:34px;border:0;background:#fff;color:var(--t1);display:flex;align-items:center;justify-content:center;cursor:pointer}
.thumbs .mv button+button{border-left:1px solid var(--line)}
.thumbs .mv button:hover:not(:disabled){background:var(--sec)}
.thumbs .mv button:disabled{color:var(--line2);cursor:default}
.thumbs li[draggable=true]{cursor:grab}
.thumbs li.drag{opacity:.4}
.thumbs li.over{outline:2px dashed var(--navy);outline-offset:2px}
.thumbs .rm{margin:0;padding:6px 8px;font-size:14px;border-top:1px solid var(--line)}
.thumbs li.off img{opacity:.35}
.thumbs li.off .fn{text-decoration:line-through}
.rform .file .nm.has{color:var(--ink)}

/* 제출된 리포트 */
.h2 .rcnt{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:32px;padding:0 10px;background:var(--navy);color:#fff;font-size:17px;font-weight:700}
.rcards{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy)}
.rcard{padding:28px 4px;border-bottom:1px solid var(--line);scroll-margin-top:24px}
.rcard:target{background:linear-gradient(var(--tint),transparent 160px)}
.rhd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.rwho{display:flex;gap:14px;align-items:center;min-width:0}
.rwho .av{flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:var(--panel);color:var(--navy);font-weight:700;font-size:19px}
.rwho strong{font-size:18px;color:var(--ink)}
.rwho .rorg{margin-left:8px;font-size:15px;color:var(--t2)}
.rwho .dt{display:block;font-size:14px;color:var(--t3)}
.ract{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ract form{margin:0}
.ract .no{font-size:14px;color:var(--t3);margin-right:6px;font-variant-numeric:tabular-nums}
.rbd{margin:16px 0 0;padding-left:60px;font-size:17px;line-height:1.8;overflow-wrap:anywhere;color:var(--t1)}
.rbd a,.vlink a,.cont a{color:var(--pri-d);text-decoration:underline;text-underline-offset:3px}
.rcard{--tile:128px;--gap:6px}
.yt,.rgal,.vlink{margin:16px 0 0 60px}
.ytbtn{position:relative;display:block;width:calc(var(--tile)*3 + var(--gap)*2);max-width:100%;aspect-ratio:16/9;padding:0;border:0;background:#000;cursor:pointer;overflow:hidden}
.ytbtn img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transition:opacity .15s}
.ytbtn:hover img{opacity:1}
.ytbtn .play{position:absolute;left:50%;top:50%;width:72px;height:52px;margin:-26px 0 0 -36px;background:#E62117;color:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center}
.ytbtn .play svg{fill:#fff}
.yt iframe{display:block;width:calc(var(--tile)*3 + var(--gap)*2);max-width:100%;aspect-ratio:16/9;border:0}
.ytlink{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:15px;color:var(--t2)}
.vlink{display:flex;align-items:center;gap:6px;font-size:16px;overflow-wrap:anywhere}
.rgal{display:grid;grid-template-columns:repeat(auto-fill,var(--tile));gap:var(--gap);list-style:none;padding:0}
.rgal a{display:block;border:1px solid var(--line);background:var(--sec)}
.rgal img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;transition:opacity .15s}
.rgal a:hover img{opacity:.85}
.rgal li[hidden]{display:none}
.rgal li.more a{position:relative}
.rgal li.more a::after{content:attr(data-more);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,25,45,.55);color:#fff;font-size:24px;font-weight:700}
.rgal li.more a:hover::after{background:rgba(15,25,45,.68)}

/* 비밀번호 확인 대화상자 */
.dlg{border:0;padding:0;width:min(440px,calc(100vw - 32px));box-shadow:0 20px 60px rgba(20,33,55,.25);color:var(--t1)}
.dlg::backdrop{background:rgba(20,33,55,.55)}
.dlg form{padding:28px}
.dlg-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.dlg-hd h2{margin:0;font-size:22px}
.dlg-msg{margin:0 0 18px;color:var(--t2);font-size:16px}
.dlg .btns{margin-top:22px;justify-content:flex-end}

/* 이미지 확대 보기 */
.lbx{position:fixed;inset:0;z-index:200;background:rgba(10,16,28,.94);display:flex;align-items:center;justify-content:center;gap:12px;padding:56px 12px 24px}
.lbx[hidden]{display:none}
.lbx figure{margin:0;flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.lbx img{max-width:100%;max-height:calc(100% - 36px);object-fit:contain}
.lbx figcaption{color:#C9D1DD;font-size:14px;margin-top:10px;text-align:center}
.lbx .iconbtn{background:rgba(255,255,255,.1);border-color:transparent;color:#fff;width:48px;height:48px;flex:none}
.lbx .iconbtn:hover{background:rgba(255,255,255,.22)}
.lbx-x{position:absolute;top:12px;right:12px}
.lbx-cnt{position:absolute;top:24px;left:50%;transform:translateX(-50%);color:#fff;font-size:15px;font-weight:700;letter-spacing:.06em}
.lbx[data-single] .lbx-p,.lbx[data-single] .lbx-n{visibility:hidden}

/* 푸터 */
.lr .ft-b{grid-template-columns:420px 1fr}
.lr .ft-brand strong{font-size:32px}
.lr .ft{padding-bottom:44px}
.lr .ft-b{padding-top:44px}

/* 관리자 */
.adm .phead{display:none}
.atop .alogo img{height:24px;width:auto;box-sizing:content-box;padding:8px 12px;background:#fff;border-radius:4px}
.adm .acts{display:flex;gap:8px;flex-wrap:wrap}
.adm .url-cell{display:flex;align-items:center;gap:6px;justify-content:center}
.adm .url-cell code{font-size:13px;color:var(--t2);background:var(--sec);padding:2px 6px}
.adm .tbl td .btns{margin:0;gap:4px;justify-content:center;flex-wrap:nowrap}
.adm .tbl td form{display:inline}
.adm .hfrm{background:#fff;padding:28px;border:1px solid var(--line)}
.adm .flist{background:#fff}
.adm .rthumbs{display:flex;gap:4px;justify-content:center}
.adm .rthumbs img{width:44px;height:44px;object-fit:cover;border:1px solid var(--line)}
.qr-box{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 0}
.qr-box #qr{padding:12px;background:#fff;border:1px solid var(--line)}
.qr-box code{font-size:15px;word-break:break-all;text-align:center}
.cat-row{display:flex;gap:8px;align-items:center}
.cat-row .inp{height:44px;max-width:280px}
.cat-row .num{width:90px}

@media (max-width:1024px){
  .vlayout{grid-template-columns:1fr;gap:0}
  .vside{position:static;order:-1;padding-top:24px}
  .vdl{grid-template-columns:84px minmax(0,1fr) 84px minmax(0,1fr)}
  .hcrumb .wrap{flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .hcrumb ol{height:auto;min-height:40px}
  .lr .ft-b{grid-template-columns:1fr}
}
@media (max-width:640px){
  .search.s-lr{grid-template-columns:1fr}
  .phead h1.brand{font-size:30px}
  .phead h1.brand a{gap:12px}
  .phead h1.brand img{height:26px}
  .phead h1.brand span{padding-left:0;border-left:0;flex-basis:100%}
  .single{padding-top:32px}
  .lsel{width:100%}
  .lsel{min-width:0}
  .lsel .sel{flex:1 1 0;width:0;min-width:0;text-overflow:ellipsis}
  .dtbl.c2 tr{display:grid;grid-template-columns:100px 1fr}
  .dtbl.c2 th{width:auto}
  .hfrm.rform{padding:20px 16px}
  .vhd h2{font-size:24px}
  .vdl{grid-template-columns:84px minmax(0,1fr)}
  .vcard{padding:4px 16px 16px}
  .vcta .hint{display:none}
  .mcta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(20,33,55,.08)}
  .mcta .btn{width:100%}
  .lr:has(.mcta) .ft{padding-bottom:120px}
  .dlg.rdlg{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0}
  .rdlg .dlg-hd{padding:14px 16px}
  .rdlg-bd{padding:16px 16px 0}
  .rdlg .hgrid{grid-template-columns:1fr;gap:18px}
  .rdlg-ft{padding:12px 0 calc(12px + env(safe-area-inset-bottom))}
  .rdlg-ft .btn{flex:1;min-width:0}
  .rdlg-ft .btn.has-arr{gap:8px;justify-content:center;padding:0 12px}
  .rbd,.yt,.rgal,.vlink{padding-left:0;margin-left:0}
  .rgal{grid-template-columns:repeat(4,1fr)}
  .ytbtn,.yt iframe{width:100%}
  .lbx-p,.lbx-n{position:absolute;bottom:16px}
  .lbx-p{left:calc(50% - 60px)}.lbx-n{right:calc(50% - 60px)}
  .lbx{padding-bottom:80px}
}

/* 수정 모드 전용 칸, 비밀번호 오류, 알림 토스트 */
[data-only][hidden],.thumbs[hidden]{display:none!important}
.thumbs.cur{margin:0 0 4px}
.dlg-err{margin:10px 0 0;padding:10px 12px;background:#FDEFF0;border-left:4px solid var(--danger);color:var(--danger-t);font-size:15px;font-weight:600}
.dlg-err[hidden]{display:none}
.inp[aria-invalid=true]{border-color:var(--danger);outline:2px solid var(--danger);outline-offset:-2px}
.toast{position:fixed;left:50%;top:20px;z-index:300;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:14px 12px 14px 18px;background:#142137;color:#fff;font-size:16px;font-weight:600;box-shadow:0 10px 30px rgba(20,33,55,.3);animation:toast-in .25s ease-out;transition:opacity .3s,transform .3s}
.toast .ic{flex:none;color:#7BE08E}
.toast-err{background:#B4232F}
.toast-err .ic{color:#fff}
.toast span{min-width:0}
.toast-x{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:inherit;opacity:.75;cursor:pointer}
.toast-x:hover{opacity:1}
.toast.out{opacity:0;transform:translate(-50%,-10px)}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.toast{animation:none;transition:none}}