:root{
  --blue:#416bff; --blue-d:#365eef; --blue-bg:#eef3ff; --blue-bd:#c7d7fe;
  --ink:#1f2333; --ink-2:#3b3f4c; --mute:#6d7381; --line:#e8eaf0; --line-2:#d9dce4;
  --bg:#f7f8fc; --card:#fff; --green:#16a34a; --green-bg:#dcfce7; --orange:#ea580c; --orange-bg:#ffedd5;
  /* 묶음별 파스텔 (카드 배경) */
  --t-start:#ebe9ff; --t-class:#ffe9f1; --t-design:#fff4d6; --t-files:#dff7ea; --t-grading:#e2eeff; --t-record:#ffe9dc; --t-account:#dff5fb; --t-school:#e9edf3;
  --i-start:#6d5cf6; --i-class:#e0508c; --i-design:#d9960b; --i-files:#1f9d63; --i-grading:#416bff; --i-record:#ee7a3a; --i-account:#1a9bc0; --i-school:#52627a;
  --r:16px; --r-lg:22px; --max:1200px;
  --sh:0 1px 2px rgba(31,35,51,.04),0 8px 24px -12px rgba(31,35,51,.12);
  --sh-h:0 2px 4px rgba(31,35,51,.05),0 18px 40px -16px rgba(65,107,255,.28);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-y:scroll;scrollbar-gutter:stable} /* 스크롤바 유무로 좌우가 흔들리지 않게 */
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Pretendard GOV',-apple-system,sans-serif;font-size:16px;line-height:1.6;word-break:keep-all}
a{color:inherit;text-decoration:none}
img,svg{display:block}
h1,h2,h3{margin:0;line-height:1.3;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button,input{font-family:inherit;font-size:inherit}

/* 버튼 공통 5종 */
.btn,.btn-o,.tab,.chip,.pill{display:inline-flex;align-items:center;justify-content:center;line-height:1;vertical-align:middle;gap:6px;cursor:pointer;border-radius:999px;white-space:nowrap}
.btn{background:var(--blue);color:#fff;padding:12px 20px;font-size:15px;font-weight:600;border:1px solid var(--blue);box-shadow:0 6px 16px -8px rgba(65,107,255,.6)}
.btn:hover{background:var(--blue-d);transform:translateY(-1px)}
.btn-o{background:#fff;color:var(--blue);padding:12px 20px;font-size:15px;font-weight:600;border:1px solid var(--blue-bd)}
.btn-o:hover{background:var(--blue-bg);border-color:var(--blue);transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(65,107,255,.45)}
.btn.sm,.btn-o.sm{padding:9px 14px;font-size:14px}
.btn,.btn-o{transition:transform .12s,background .12s,border-color .12s}

/* 헤더 */
.hdr{background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.hdr-in{max-width:var(--max);margin:0 auto;padding:0 16px;height:68px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{height:20px}
.brand .site{font-size:17px;font-weight:700;color:var(--ink);padding-left:10px;border-left:1px solid var(--line-2);line-height:1;letter-spacing:-.01em}
.nav{display:flex;gap:2px;flex:1}
.tab{padding:10px 12px;font-size:16px;color:var(--ink-2);border:0;background:none;height:68px;border-radius:0;border-bottom:2px solid transparent}
.tab:hover{color:var(--blue)}
.tab.on{color:var(--blue);border-bottom-color:var(--blue)}
.hdr-r{display:flex;align-items:center;gap:18px;font-size:15px;color:var(--ink-2);font-weight:600}
.hdr-r a:hover{color:var(--blue)}
@media (max-width:820px){
  .hdr-in{height:auto;flex-wrap:wrap;padding:10px 16px;gap:8px 16px}
  .brand{order:1}.hdr-r{order:2;margin-left:auto}.hdr-r .hide-m{display:none}
  .nav{order:3;flex:0 0 100%;width:100%;overflow-x:auto}
  .tab{height:44px;padding:8px 8px;font-size:15px}
  .nav{gap:0}
}

/* 레이아웃 */
.wrap{max-width:var(--max);margin:0 auto;padding:36px 16px 72px}
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px}
.page-h h1{font-size:34px;font-weight:800}
.page-h p{color:var(--mute);margin-top:8px;font-size:17px}
.sec{margin-top:44px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.sec-h h2{font-size:22px;font-weight:700;display:flex;align-items:center;gap:10px}
.sec-h:has(.sub){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:baseline} /* 제목 | 링크, 설명은 아래 줄 전체 폭 */
.sec-h .sub{grid-column:1/-1;margin:4px 0 0;font-size:15px;color:var(--mute);line-height:1.5} /* 섹션 머리도 페이지 머리처럼 제목 + 한 줄 */
.sec-h h2 small{font-size:14px;font-weight:600;color:var(--mute);background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 9px;line-height:1}
.sec-h a{font-size:14px;color:var(--mute)}
.sec-h a:hover{color:var(--blue)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}
.empty{color:var(--mute);background:#fff;border:1px dashed var(--line-2);border-radius:var(--r);padding:28px;text-align:center;font-size:15px}

/* 홈 히어로 — 화면 폭 전체 띠 */
.band{background:linear-gradient(120deg,#e9efff 0%,#efe9ff 55%,#fff0f6 100%);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.band:before,.band:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.band:before{width:360px;height:360px;right:-100px;top:-160px;background:radial-gradient(circle at 30% 30%,#c7d7fe,transparent 70%)}
.band:after{width:260px;height:260px;right:300px;bottom:-170px;background:radial-gradient(circle at 50% 50%,#fbcfe8,transparent 70%)}
.hero{position:relative;max-width:var(--max);margin:0 auto;padding:56px 16px 52px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hero h1{font-size:38px;font-weight:800;line-height:1.2}
.hero p{color:var(--ink-2);margin-top:12px;font-size:18px}
.hero .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.btn-o.play{gap:9px;box-shadow:var(--sh)}
.btn-o.play .dur{font-size:13px;font-weight:600;color:var(--mute);margin-left:2px}
.hero .art{width:220px;height:165px;flex-shrink:0}
@media (max-width:700px){.hero{padding:36px 16px 32px}.hero h1{font-size:28px}.hero .art{display:none}}
.home-row{display:grid;grid-template-columns:1.35fr 1fr;gap:32px;align-items:start;margin-top:44px} /* 두 열은 각자 제 높이 */ /* 위 섹션과 같은 간격(.sec) */
.home-row>section{display:flex;flex-direction:column}
.home-row>section>div:last-child{flex:1;display:flex;flex-direction:column}
.home-row .tlist{flex:1}
.home-row .tlist .tcard{height:auto}
.home-row .timeline{flex:1}
@media (max-width:900px){.home-row{grid-template-columns:1fr}}
.home-row .newsbox{flex:1;background:#fff;border-radius:var(--r-lg);padding:20px 22px 16px;box-shadow:var(--sh);display:flex;flex-direction:column}
.home-row .nb-cap{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--mute);margin:0 0 10px} /* 소식 탭 왼쪽 목록의 이름 그대로 */
.home-row .newsbox .nb-cap + .nb-cap{margin-top:0}
.home-row .timeline{flex:1;padding:0 0 0 24px;margin:0 -12px 6px}
.home-row .newsbox > .nb-cap:nth-of-type(2){border-top:1px solid var(--line);padding-top:14px;margin-top:auto}
.home-row .srow{display:flex;gap:14px;align-items:center;color:var(--ink);padding:12px;margin:0 -12px;border-radius:14px;transition:background .12s}
.home-row .srow:hover{background:var(--blue-bg)}
.home-row .srow + .srow{margin-top:4px}
.home-row .srow .nb-cap{margin:0}
.home-row .newsbox .srow-cap{margin-top:14px}
.home-row .srow-th{width:96px;aspect-ratio:16/9;flex-shrink:0;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,var(--t-record),var(--t-class))}
.home-row .srow-th img{width:100%;height:100%;object-fit:cover;display:block}
.home-row .srow-in{display:flex;flex-direction:column;gap:6px;min-width:0}
.home-row .srow-in .meta{font-size:13px;color:var(--mute);display:flex;gap:8px;align-items:center}
.home-row .srow-t{font-size:16px;font-weight:700;line-height:1.4}
.home-row .srow:hover .srow-t{color:var(--blue)}
.home-row .timeline:before{display:none} /* 홈에서는 줄을 항목마다 그린다 — 마지막 점 아래로 선이 남지 않게 */
.home-row .rel:not(:last-child):after{content:"";position:absolute;left:-8px;top:28px;bottom:-27px;width:2px;background:linear-gradient(var(--blue-bd),var(--line))}
.home-row .rel{padding:0 0 22px;margin:0;background:none;box-shadow:none;border-radius:0}
.home-row .rel:hover{transform:none;box-shadow:none}
.home-row .rel:before{top:9px}
.home-row .rel:before{left:-26px;width:12px;height:12px}
.home-row .rel h3{font-size:16px;margin:6px 0 0}
.home-row .rel .sum{display:none} /* 홈에서는 제목과 날짜만 — 자세한 내용은 소식 탭에서 */
.home-row .rel{padding:12px 12px;margin:0 0 4px;border-radius:14px}
.home-row .rel:hover{background:var(--blue-bg);transform:none;box-shadow:none}
.home-row .rel h3 a:after{border-radius:14px}
.home-row .rel:before{left:-12px;top:18px;width:10px;height:10px;box-shadow:0 0 0 3px var(--blue-bg)} /* 점 가운데를 세로선 가운데에 */
.home-row .srow-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:600px){.home-row .srow-t{-webkit-line-clamp:3}}
.home-row .rel .sum{font-size:14px}

/* 2단: 왼쪽 갈래 + 오른쪽 내용 */
.learn{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:start}
@media (max-width:900px){.learn{grid-template-columns:1fr;gap:20px}}
.side{position:sticky;top:86px}
@media (max-width:900px){.side{position:static}}
.search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:0 14px;height:46px;margin-bottom:22px;box-shadow:var(--sh)}
.search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg)}
.search input{border:0;outline:0;background:none;width:100%;font-size:15px;color:var(--ink)}
.search input::placeholder{color:#9aa0ad}
.side .lbl{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--mute);margin:18px 0 6px 10px}
.side .cats{margin-top:4px}
.side a{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:12px;font-size:16px;color:var(--ink-2);transition:background .12s}
.side a:hover{background:#fff;color:var(--blue)}
.side a.on{background:#fff;color:var(--blue);box-shadow:var(--sh)}
.side a .n{margin-left:auto;font-size:13px;color:var(--mute)}
.side a .ico{width:20px;height:20px;flex-shrink:0;color:var(--mute);display:inline-flex}
.side a .ico svg{width:100%;height:100%}
.side a:hover .ico,.side a.on .ico{color:var(--blue)}
@media (max-width:900px){
  .side .cats{display:flex;flex-wrap:wrap;gap:8px}
  .side .cats a{border:1px solid var(--line-2);border-radius:999px;padding:8px 12px;font-size:14px;background:#fff}
  .side .cats a .n{display:none}
}

/* 추천 재생목록 */
.featured{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;align-items:start;background:var(--t-start);border-radius:var(--r-lg);padding:22px;margin-bottom:8px}
@media (max-width:900px){.featured{grid-template-columns:1fr}}
.player{aspect-ratio:16/9;background:linear-gradient(135deg,#2a2f47,#1a1d2c);border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:#cfd4e0;font-size:15px;overflow:hidden;position:relative;box-shadow:var(--sh)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .endcard{position:absolute;inset:0;z-index:2;background:rgba(15,20,40,.82);display:flex;align-items:center;justify-content:center;padding:16px}
.player .ec-in{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:#fff;max-width:420px;width:100%}
.player .ec-k{font-size:14px;font-weight:600;color:#b9c6ff}
.player .ec-img{width:min(280px,60%);aspect-ratio:16/9;object-fit:cover;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.player .ec-t{font-size:18px;font-weight:700;line-height:1.35;word-break:keep-all}
.player .ec-d{font-size:14px;color:#cfd4e0}
.player .ec-b{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap;justify-content:center}
@media (max-width:560px){.player .ec-img{display:none}.player .ec-t{font-size:16px}}
.player .ico{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center}
.playlist{display:flex;flex-direction:column;min-height:0}
.playlist h2{font-size:20px;font-weight:800;margin:2px 0 6px;flex-shrink:0}
.playlist h2 small{font-size:14px;font-weight:600;color:var(--i-start);margin-left:8px}
.playlist ul{overflow:auto;min-height:0;scrollbar-width:thin;padding-right:2px}
.playlist li a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-size:15px;color:var(--ink-2)}
.playlist li a:hover{background:rgba(255,255,255,.7);color:var(--i-start)}
.playlist li a.on{background:#fff;color:var(--i-start);box-shadow:var(--sh)}
.playlist .dur{margin-left:auto;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.playlist .pl-note{margin:10px 4px 0;font-size:14px;color:var(--mute);line-height:1.5;word-break:keep-all;flex-shrink:0}
.playlist .pl-note a{color:var(--blue);font-weight:600}
.playlist .tri{width:10px;height:12px;flex-shrink:0;color:var(--i-start)}

/* 영상 카드 — 묶음별 파스텔 + 스티커 그림 */
.vcard{--t:var(--blue-bg);--i:var(--blue);background:var(--t);border-radius:var(--r-lg);padding:20px 20px 18px;min-height:172px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.vcard:hover{transform:translateY(-3px);box-shadow:var(--sh-h)}
.vcard[data-cat=start]{--t:var(--t-start);--i:var(--i-start)}
.vcard[data-cat=class]{--t:var(--t-class);--i:var(--i-class)}
.vcard[data-cat=design]{--t:var(--t-design);--i:var(--i-design)}
.vcard[data-cat=files]{--t:var(--t-files);--i:var(--i-files)}
.vcard[data-cat=grading]{--t:var(--t-grading);--i:var(--i-grading)}
.vcard[data-cat=record]{--t:var(--t-record);--i:var(--i-record)}
.vcard[data-cat=account]{--t:var(--t-account);--i:var(--i-account)}
.vcard[data-cat=school]{--t:var(--t-school);--i:var(--i-school)}
.vcard .cat{font-size:13px;color:var(--i);font-weight:700;margin-bottom:6px}
.vcard .t{font-size:19px;font-weight:800;color:var(--ink);line-height:1.3;padding-right:96px}
.vcard .art{position:absolute;right:14px;top:14px;width:96px;height:96px;transform:rotate(6deg);transition:transform .2s;color:var(--i)}
/* 영상이 아직 없는 카드: 그림만 흐리게 */
.vcard.soon .art{opacity:.35}
.vcard:hover .art{transform:rotate(-2deg) scale(1.06)}
.vcard .foot{margin-top:auto;padding-top:20px;display:flex;align-items:center;justify-content:space-between}
.badge{display:inline-flex;align-items:center;justify-content:center;line-height:1;border-radius:999px;padding:7px 10px;font-size:13px;font-weight:700}
.badge.new{background:var(--green);color:#fff}
.badge.dur{background:rgba(31,36,48,.88);color:#fff;font-variant-numeric:tabular-nums}
.badge.soon{background:rgba(255,255,255,.75);color:var(--mute)}
.badge.upd{background:none;padding:7px 0;color:var(--i,var(--blue));font-weight:600;gap:6px} /* 흰 알약이 카드와 안 어울림 → 카드 위 탭 이름처럼 글자만(탭 색) + 점 */
.badge.upd::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.recent{margin-top:40px}
.vcard.hidden{display:none}

/* 릴리즈 노트 타임라인 */
.timeline{position:relative;padding-left:34px}
.timeline:before{content:"";position:absolute;left:11px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--blue-bd),var(--line))}
.rel{position:relative;margin:0 0 14px;background:#fff;border-radius:var(--r-lg);padding:20px 24px;box-shadow:var(--sh);transition:transform .15s,box-shadow .15s}
.rel:hover{transform:translateY(-2px);box-shadow:var(--sh-h)}
.rel:before{content:"";position:absolute;left:-30px;top:26px;width:16px;height:16px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--blue-bg)}
.rel .date{display:inline-flex;align-items:center;line-height:1;font-size:13px;font-weight:700;color:var(--blue);background:var(--blue-bg);border-radius:999px;padding:5px 9px;font-variant-numeric:tabular-nums}
.rel .date-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ver{font-size:13px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.soonlbl{display:inline-flex;align-items:center;line-height:1;font-size:13px;font-weight:700;color:var(--orange);background:var(--orange-bg);border-radius:999px;padding:4px 7px}
.rel h3{font-size:19px;font-weight:800;margin:10px 0 6px}
.rel h3 a{position:static}
/* 줄 전체가 누르는 자리 — 글자만 노리지 않게(특히 휴대폰). 안쪽 영상 링크는 그 위로 */
.rel h3 a:after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r-lg)}
.rel .tags,.rel .tags .chip{position:relative;z-index:2}
.rel:hover h3 a{color:var(--blue)}
.rel .sum{color:var(--ink-2)}
.rel .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.rel .sum{font-size:15px}
.chip{background:#fff;border:1px solid var(--line-2);padding:7px 11px;font-size:13px;color:var(--ink-2)}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip .tri{width:8px;height:10px}

/* 글 카드 (현장 이야기 = 사진 썸네일) */
.pcard{background:#fff;border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh);transition:transform .15s,box-shadow .15s}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--sh-h)}
.pcard .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--t-record),var(--t-class));overflow:hidden}
.pcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.pcard:hover .thumb img{transform:scale(1.04)}
.pcard .in{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px}
.pcard .meta{font-size:13px;color:var(--mute);display:flex;gap:8px;align-items:center}
.pcard .t{font-size:18px;font-weight:800;line-height:1.35}
.pcard .d{color:var(--ink-2);font-size:15px}
.kind{display:inline-flex;align-items:center;line-height:1;padding:5px 8px;border-radius:999px;font-size:13px;font-weight:700;background:var(--blue-bg);color:var(--blue)}
.kind.story{background:var(--orange-bg);color:var(--orange)}
[data-tag="현장"]{--tb:var(--orange-bg);--tc:var(--orange)}
[data-tag="교육 트렌드"]{--tb:var(--t-start);--tc:var(--i-start)}
[data-tag="평가 소식"]{--tb:var(--t-files);--tc:var(--i-files)}
[data-tag="평가 팁"]{--tb:var(--t-grading);--tc:var(--i-grading)}
[data-tag="활용 사례"]{--tb:var(--t-class);--tc:var(--i-class)}
.kind.story[data-tag]{background:var(--tb,var(--orange-bg));color:var(--tc,var(--orange))}
.filter .chip[data-tag]:not(.on){background:var(--tb);color:var(--tc);border-color:transparent}

/* 연수 카드 — 날짜 타일 + 내용 */
.tcard{background:#fff;border-radius:var(--r-lg);padding:22px 24px;display:grid;grid-template-columns:84px 1fr;gap:20px;box-shadow:var(--sh);transition:transform .15s,box-shadow .15s}
.tcard:hover{transform:translateY(-2px);box-shadow:var(--sh-h)}
.tcard .day{background:var(--blue-bg);color:var(--blue);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;padding:14px 6px;align-self:start}
.tcard .day b{font-size:30px;font-weight:800}
.tcard .day span{font-size:13px;font-weight:600;margin-top:6px}
.tcard.closed .day{background:#f1f3f5;color:var(--mute)}
.tcard .tc-badge{display:inline-flex;align-items:center;line-height:1;padding:6px 9px;border-radius:999px;font-size:13px;font-weight:700;background:var(--green-bg);color:var(--green)}
.tcard .tc-badge.closed{background:#f1f3f5;color:var(--mute)}
.tcard .tc-title{font-size:21px;font-weight:800;margin:10px 0 8px}
.tcard .tc-meta{color:var(--ink-2);font-size:15px;display:flex;flex-direction:column;gap:3px}
.tcard .tc-meta > div{display:flex;align-items:center;gap:8px}
.tcard .tc-meta .ico{width:16px;height:16px;flex-shrink:0;color:var(--mute);display:inline-flex}
.tcard .tc-meta .ico svg{width:100%;height:100%}
.tcard .tc-topic{margin-top:12px;font-size:16px;font-weight:700;color:var(--ink);display:flex;align-items:baseline;gap:8px}
.tcard .tc-topic:before{content:"주제";font-size:13px;font-weight:700;color:var(--i-start);background:var(--t-start);border-radius:6px;padding:4px 6px;line-height:1;flex-shrink:0;position:relative;top:-2px}
.tcard .tc-actions{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tcard .tc-hint{font-size:13px;color:var(--mute)}
.tlist{display:flex;flex-direction:column;gap:18px}
@media (max-width:600px){.tcard{grid-template-columns:1fr}.tcard .day{flex-direction:row;gap:8px;padding:10px 12px;width:max-content}.tcard .day span{margin-top:0}}

/* 연수: 혜택 배너·소개·특징·절차·FAQ·후기 */
.bene{background:linear-gradient(120deg,var(--t-files),#eefbf3);border-radius:var(--r-lg);padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bene-t{font-size:19px;font-weight:800}
.bene-d{color:var(--ink-2);font-size:15px;margin-top:4px}
.bene-tags{display:flex;gap:8px;flex-wrap:wrap}
.intro{background:linear-gradient(120deg,#e9efff,#efe9ff);border-radius:var(--r-lg);padding:28px 28px 24px}
.intro h2{font-size:24px;font-weight:800}
.intro p{color:var(--ink-2);margin:8px 0 14px;font-size:16px}
.feat{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:700px){.feat{grid-template-columns:1fr}}
.feat-i{background:#fff;border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh);display:grid;grid-template-columns:56px 1fr;column-gap:16px;row-gap:4px;align-items:start;transition:transform .15s,box-shadow .15s}
.feat-i:hover{transform:translateY(-2px);box-shadow:var(--sh-h)}
.feat-i .fi{grid-row:1/3}
.feat-i b{grid-column:2;font-size:17px;font-weight:800;margin-top:4px}
.feat-i span{grid-column:2;color:var(--ink-2);font-size:15px}
.inl{color:var(--blue);font-weight:600;white-space:nowrap}
.inl:hover{text-decoration:underline}
.note a{color:var(--blue);font-weight:600}
.fi{width:56px;height:56px;border-radius:16px;background:var(--t,var(--blue-bg));color:var(--i,var(--blue));padding:9px;flex-shrink:0;transform:rotate(-4deg)}
.fi.big{width:72px;height:72px;border-radius:20px;padding:12px;background:#fff}
.fi svg{width:100%;height:100%}
.bene{gap:20px}
.bene>div:nth-child(2){flex:1;min-width:240px}
.steps{counter-reset:st;display:flex;flex-direction:column;gap:12px;margin:0 0 18px;padding:0;list-style:none}
.steps li{counter-increment:st;display:grid;grid-template-columns:36px 1fr;column-gap:14px;row-gap:0;align-items:start;background:#fff;border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh)}
.steps li:before{content:counter(st);width:36px;height:36px;border-radius:50%;background:var(--blue-bg);color:var(--blue);font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.steps li:before{grid-row:1/3}
.steps li b{grid-column:2;display:block;font-size:16px;font-weight:800;margin-bottom:2px}
.steps li span{grid-column:2;color:var(--ink-2);font-size:15px}
.acts{display:flex;gap:10px;flex-wrap:wrap}
.faq details{background:#fff;border-radius:var(--r);box-shadow:var(--sh);margin-bottom:10px;padding:0 20px}
.faq summary{cursor:pointer;padding:16px 0;font-size:16px;font-weight:700;list-style:none;display:flex;align-items:center;justify-content:space-between}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--mute);font-weight:400;font-size:20px;line-height:1}
.faq details[open] summary:after{content:"\2013"}
.faq details>div{padding:0 0 16px;color:var(--ink-2);font-size:15px}
.cta-box{background:var(--blue-bg);border-radius:var(--r);padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cta-box b{display:block;font-size:16px;font-weight:800}
.cta-box span{font-size:14px;color:var(--ink-2)}
.stats{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:#fff;border-radius:var(--r);padding:20px 24px;box-shadow:var(--sh);margin-bottom:16px}
.stats .hd b{font-size:20px;font-weight:800;display:block}
.stats .hd span{font-size:13px;color:var(--mute)}
.stats .st{margin-left:auto;display:flex;gap:26px}
.stats .st div{text-align:center}
.stats .st b{font-size:26px;font-weight:800;color:var(--blue);display:block;line-height:1.1}
.stats .st span{font-size:13px;color:var(--mute)}
@media (max-width:700px){.stats .st{margin-left:0;gap:18px}}
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:700px){.quotes{grid-template-columns:1fr}}
.quotes li{background:#fff;border-radius:var(--r);padding:16px 18px 16px 34px;box-shadow:var(--sh);font-size:15px;color:var(--ink-2);position:relative}
.quotes li:before{content:"\201C";position:absolute;left:14px;top:8px;font-size:28px;color:var(--blue-bd);font-weight:800;line-height:1}
/* 지난 연수 카드 */
.acard{background:#fff;border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh);transition:transform .15s,box-shadow .15s}
.acard:hover{transform:translateY(-3px);box-shadow:var(--sh-h)}
.acard .thumb{aspect-ratio:16/9;background:var(--t-start);position:relative}
.acard .thumb img{width:100%;height:100%;object-fit:cover}
.acard .thumb .badge{position:absolute;right:10px;bottom:10px}
.acard .in{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px}
.acard .tag{display:inline-flex;align-items:center;line-height:1;padding:5px 8px;border-radius:999px;font-size:13px;font-weight:700;background:var(--blue-bg);color:var(--blue);width:max-content}
.acard .t{font-size:17px;font-weight:800}
.acard .m{font-size:13px;color:var(--mute)}
.acard .d{font-size:14px;color:var(--ink-2)}
.acard .a{margin-top:8px}

/* 연수 운영 지원: 훅 */
.intro.hook{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.intro.hook>div:first-child{flex:1;min-width:260px}
.intro .eyebrow{display:inline-flex;align-items:center;font-size:13px;font-weight:700;color:var(--i-start);background:#fff;border-radius:999px;padding:6px 10px;line-height:1;margin-bottom:12px}
.deck-stack{position:relative;width:250px;height:150px;flex-shrink:0}
.ds{position:absolute;inset:0;border-radius:14px;background:#fff;box-shadow:var(--sh)}
.ds2{transform:rotate(-5deg) translate(-8px,4px);background:#f4f2ff}
.ds3{transform:rotate(6deg) translate(10px,6px);background:#e9efff}
.ds1{background:linear-gradient(135deg,var(--blue),#6d5cf6);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:20px 22px}
.ds1 b{font-size:20px;font-weight:800;line-height:1.25}
.ds1 span{font-size:13px;opacity:.85;margin-top:10px}
@media (max-width:700px){.deck-stack{display:none}}
.where{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:700px){.where{grid-template-columns:1fr}}
.where-i{background:#fff;border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh);display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:center}
.where-i .fi{grid-row:1/3;width:44px;height:44px;border-radius:12px;padding:7px}
.where-i b{grid-column:2;font-size:15px;font-weight:800}
.where-i span{grid-column:2;font-size:13px;color:var(--mute)}
.deck{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.deck li{background:#fff;border-radius:var(--r);padding:14px 18px;box-shadow:var(--sh);display:grid;grid-template-columns:72px 1fr auto;column-gap:14px;row-gap:2px;align-items:center}
.deck .pt{grid-row:1/3;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:13px;font-weight:800;color:var(--blue);background:var(--blue-bg);border-radius:8px;padding:8px 6px}
.deck b{font-size:16px;font-weight:800}
.deck .mn{grid-column:3;grid-row:1/3;font-size:13px;font-weight:700;color:var(--mute);font-variant-numeric:tabular-nums}
.deck .ds-d{grid-column:2;font-size:14px;color:var(--ink-2)}
.proof{background:linear-gradient(120deg,var(--t-class),#fff0f6);border-radius:var(--r-lg);padding:22px 24px;display:flex;flex-direction:column;gap:6px}
.proof b{font-size:19px;font-weight:800}
.proof span{color:var(--ink-2);font-size:15px}
.proof a{font-size:14px;font-weight:700;color:var(--i-class);margin-top:4px}

/* 지난 연수: 과목 필터·과목별 태그 색 */
.filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.filter .chip{padding:8px 12px;font-size:14px}
.filter .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.filter .chip .n{font-size:13px;opacity:.7;margin-left:2px}
.acard.hidden{display:none}
.acard .tag[data-subj]{background:var(--sb,var(--blue-bg));color:var(--sc,var(--blue))}
[data-subj="국어"]{--sb:var(--t-class);--sc:var(--i-class)}
[data-subj="수학"]{--sb:var(--t-grading);--sc:var(--i-grading)}
[data-subj="과학"]{--sb:var(--t-files);--sc:var(--i-files)}
[data-subj="사회"]{--sb:var(--t-design);--sc:var(--i-design)}
[data-subj="영어"]{--sb:var(--t-start);--sc:var(--i-start)}
[data-subj="한문"]{--sb:var(--t-record);--sc:var(--i-record)}
[data-subj="초등"]{--sb:var(--t-account);--sc:var(--i-account)}
.filter .chip[data-subj]:not(.on){background:var(--sb);color:var(--sc);border-color:transparent}

/* 연수 공통 배너 (온라인·학교·운영 지원) */
.hb{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:34px 36px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.hb:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-80px;top:-120px;background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.9),transparent 70%);pointer-events:none}
.hb>*{position:relative}
.hb-body{flex:1;min-width:260px}
.hb .eyebrow{display:inline-flex;align-items:center;font-size:13px;font-weight:700;color:var(--hc);background:#fff;border-radius:999px;padding:6px 10px;line-height:1;margin-bottom:12px}
.hb h2{font-size:26px;font-weight:800;line-height:1.25}
.hb p{color:var(--ink-2);margin:10px 0 14px;font-size:16px}
.hb .tags{display:flex;gap:14px;flex-wrap:wrap}
.hb .tags span{font-size:14px;font-weight:700;color:var(--hc)}
.hb-art{width:250px;height:150px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
@media (max-width:700px){.hb{padding:26px 22px}.hb h2{font-size:22px}.hb-art{display:none}}
.hb-open{--hc:var(--i-files);background:linear-gradient(120deg,#dff7ea 0%,#eefbf3 55%,#e9efff 100%)}
.hb-school{--hc:var(--blue);background:linear-gradient(120deg,#e2eeff 0%,#e9efff 55%,#efe9ff 100%)}
.hb-adopt{--hc:var(--i-account);background:linear-gradient(120deg,#dff5fb 0%,#ecf9fd 55%,#e9efff 100%)}
.hb-instructor{--hc:var(--i-start);background:linear-gradient(120deg,#ebe9ff 0%,#efe9ff 55%,#fff0f6 100%)}
.fi.xl{width:132px;height:132px;border-radius:32px;padding:22px;background:var(--t,#fff);box-shadow:var(--sh);transform:rotate(-6deg)}

/* 상세 */
.detail{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
.detail:has(.aside[style*="none"]){grid-template-columns:minmax(0,760px);justify-content:center}
.single{max-width:760px;margin:0 auto}
.single h1{font-size:30px;font-weight:800;margin:18px 0 10px}
.single .meta{color:var(--mute);font-size:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.single .hero-img{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;box-shadow:var(--sh);margin:0 0 22px;background:#e8eaf0}
.single .hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.single .hero-img img.on{opacity:1}
.single .hero-img .dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px}
.single .hero-img .dots button{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:rgba(255,255,255,.55);cursor:pointer;transition:width .25s,background .25s}
.single .hero-img .dots button.on{width:22px;background:#fff}
@media (prefers-reduced-motion: reduce){.single .hero-img img{transition:none}}
.single .hero-img img{width:100%;height:100%;object-fit:cover}
.crumb-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.crumb-row .back{font-size:14px;color:var(--mute)}
.crumb-row .back:hover{color:var(--blue)}
.single .lead{font-size:18px;font-weight:600;color:var(--ink);margin:0 0 22px;padding-bottom:20px;border-bottom:1px solid var(--line);line-height:1.65}
.single .lead:empty{display:none}
.single .meta{margin-bottom:22px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.more{margin-top:40px}
.more-grid{grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:760px){.more-grid{grid-template-columns:1fr}}
.more .pcard .in{padding:14px 16px 16px;gap:6px}
.more .pcard .t{font-size:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.more .pcard .d{display:none}
.more .pcard:not(:has(.thumb img)) .thumb{display:none}
.more .vcard{min-height:150px}
.more .vcard .t{font-size:16px;padding-right:64px}
.more .vcard .art{width:64px;height:64px}
@media (max-width:600px){.grid.two{grid-template-columns:1fr}}
.article{background:#fff;border-radius:var(--r-lg);padding:32px 36px;box-shadow:var(--sh)}
@media (max-width:600px){.article{padding:22px 18px}}
.article .body{margin-top:0}
@media (max-width:900px){.detail{grid-template-columns:1fr}}
.detail h1{font-size:30px;font-weight:800;margin:18px 0 10px}
.detail .meta{color:var(--mute);font-size:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.detail .hero-img{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;box-shadow:var(--sh)}
.detail .hero-img img{width:100%;height:100%;object-fit:cover}
.detail .body,.single .body{margin-top:22px;font-size:17px;color:var(--ink-2)}
.detail .body p,.single .body p{margin-bottom:12px}
.detail .body ul,.single .body ul{list-style:disc;padding-left:22px;margin-bottom:12px}
.detail .body li,.single .body li{margin-bottom:4px}
.detail .body ol,.single .body ol{list-style:decimal;padding-left:22px;margin-bottom:12px}
.detail .body h3,.single .body h3{font-size:18px;font-weight:800;margin:24px 0 8px;color:var(--ink)}
.detail .body h3:first-child,.single .body h3:first-child{margin-top:0}
.detail .body a:not(.go-card),.single .body a:not(.go-card){color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.detail .body .muted,.single .body .muted{color:var(--mute);font-size:14px}
.aside .box{background:#fff;border-radius:var(--r);padding:18px 20px;margin-bottom:16px;box-shadow:var(--sh)}
.aside h3{font-size:13px;font-weight:700;letter-spacing:.04em;margin-bottom:10px;color:var(--mute)}
.aside li a{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.aside li:last-child a{border-bottom:0}
.aside li a:hover{color:var(--blue)}
.aside .dur{margin-left:auto;font-size:13px;color:var(--mute);flex-shrink:0}
.aside li a svg{width:10px;height:12px;flex-shrink:0} /* 그림이 칸을 밀지 않게 — 크기 없는 svg 방지 */
/* 같은 묶음의 영상: 작은 썸네일 + 제목 */
.aside .vthumb{--t:var(--t-grading);--i:var(--i-grading);width:72px;aspect-ratio:16/9;flex-shrink:0;border-radius:9px;background:var(--t);color:var(--i);display:flex;align-items:center;justify-content:center;overflow:hidden}
.aside .vthumb[data-cat=start]{--t:var(--t-start);--i:var(--i-start)}
.aside .vthumb[data-cat=class]{--t:var(--t-class);--i:var(--i-class)}
.aside .vthumb[data-cat=design]{--t:var(--t-design);--i:var(--i-design)}
.aside .vthumb[data-cat=files]{--t:var(--t-files);--i:var(--i-files)}
.aside .vthumb[data-cat=grading]{--t:var(--t-grading);--i:var(--i-grading)}
.aside .vthumb[data-cat=record]{--t:var(--t-record);--i:var(--i-record)}
.aside .vthumb[data-cat=account]{--t:var(--t-account);--i:var(--i-account)}
.aside .vthumb[data-cat=school]{--t:var(--t-school);--i:var(--i-school)}
.aside .vthumb svg{width:28px;height:28px;flex-shrink:0}
.aside .vt{flex:1;min-width:0;line-height:1.4}
.aside li a:hover .vt{color:var(--blue)}
/* 재생목록에서 지금 보는 영상 — 굵기는 그대로, 색·바탕으로만(폭이 들썩이지 않게) */
.aside li a.on{background:var(--blue-bg);margin:0 -10px;padding:9px 10px;border-radius:10px;border-bottom-color:transparent}
.aside li a.on .vt,.aside li a.on .dur{color:var(--blue)}
.note{background:var(--blue-bg);border-radius:14px;padding:14px 16px;font-size:15px;color:var(--ink-2);display:flex;gap:10px;align-items:flex-start}
.note .ic{color:var(--blue);flex-shrink:0;margin-top:2px}
.crumb{font-size:14px;color:var(--mute)}
.crumb a:hover{color:var(--blue)}

/* 푸터 */
.ftr{color:var(--mute);font-size:13px;text-align:center;padding:28px 16px 40px}
.ftr a{margin:0 8px}
.ftr a:hover{color:var(--blue)}

/* 글 본문 끝의 콘텐츠 연결 배너 (예: 이야기 → 가이드 연구 사례) */
.go-card{display:flex;align-items:center;gap:16px;margin:32px 0 0;padding:20px 22px;border-radius:var(--r);background:var(--blue-bg);color:var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.go-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(65,107,255,.55)}
.go-card .ico{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:#fff;color:var(--blue);display:inline-flex;align-items:center;justify-content:center;padding:11px}
.go-card .ico svg{width:100%;height:100%}
.go-card .go-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.go-card .go-t b{font-size:17px;font-weight:700}
.go-card .go-t span{font-size:15px;color:var(--ink-2)}
.go-card .go-more{flex-shrink:0;font-size:15px;font-weight:700;color:var(--blue);white-space:nowrap}
@media (max-width:600px){.go-card{flex-wrap:wrap}.go-card .go-more{width:100%;padding-left:60px}}

/* 홈 첫 줄: 자주 묻는 세 가지 → AI 채점 가이드 */
.sec-top{margin-top:0}
.qcard{--t:var(--blue-bg);--i:var(--blue);position:relative;background:#fff;border-radius:var(--r-lg);padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--sh);color:var(--ink);transition:transform .15s,box-shadow .15s}
.qcard[data-tint=grading]{--t:var(--t-grading);--i:var(--i-grading)} .qcard[data-tint=design]{--t:var(--t-design);--i:var(--i-design)} .qcard[data-tint=files]{--t:var(--t-files);--i:var(--i-files)}
/* 말풍선 꼬리: 클리포 심볼과 같은 모양이라 '물어보는 자리'로 읽힌다 */
.qcard:after{content:"";position:absolute;left:30px;bottom:-8px;width:18px;height:18px;background:#fff;border-radius:3px;transform:rotate(45deg);box-shadow:4px 4px 8px -6px rgba(31,35,51,.18)}
.qcard:hover{transform:translateY(-2px);box-shadow:var(--sh-h)}
.qcard .ico{width:44px;height:44px;margin-bottom:6px;border-radius:14px;background:var(--t);color:var(--i);display:inline-flex;align-items:center;justify-content:center;padding:11px}
.qcard .ico svg{width:100%;height:100%}
.qcard b{font-size:17px;font-weight:700}
.qcard > span:last-child{font-size:15px;color:var(--ink-2);line-height:1.6}
.qcard:hover b{color:var(--i)}
.qgrid{padding-bottom:8px} /* 꼬리 자리 */
@media (max-width:980px){.qgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.qgrid{grid-template-columns:1fr}}

/* 글·영상 상세: 공유 버튼, 글 끝 행동 안내, 토스트 */
.meta-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.meta-row .meta{flex:1 1 auto;min-width:0}
.share{flex:0 0 auto}
.share svg{flex:0 0 auto}
.detail .meta-row{margin-top:0}
.post-cta{margin-top:28px}
.cta-acts{display:flex;gap:8px;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,12px);background:rgba(31,35,51,.94);color:#fff;font-size:15px;line-height:1;padding:14px 20px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* 연수 · 실습 준비: 복사할 프롬프트 */
.hb-practice{--hc:var(--i-design);background:linear-gradient(120deg,#fff4d6 0%,#fff8e6 55%,#e9efff 100%)}
.prompt-box{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:16px 18px}
.prompt-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.prompt-h b{font-size:15px;font-weight:700;color:var(--mute)}
.prompt-h .btn-o{display:inline-flex;align-items:center;justify-content:center;line-height:1;vertical-align:middle}
.prompt{margin:0;background:var(--bg);border-radius:12px;padding:16px 18px;font-family:inherit;font-size:15px;line-height:1.7;color:var(--ink-2);white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;max-height:420px;overflow:auto}
.sec-note{margin-top:12px;font-size:15px;color:var(--mute)}