/* RookissLibrary crates/server/assets/static/css/app.css 를 옮겼다(2026-10-26, 랜딩 시안 5 용): {{asset:}} → 상대 경로, data: 그림 → ../img/ui/ 파일 */
/* 시안 1(design/home)을 차례로 옮기는 중이다(페이지에 인라인된다). 지금은 상단바(bar.css — 로고 · 메뉴 · 검색 · 로그인 · 내 메뉴 · 모바일 시트)까지.
   꼬리말과 강의(/courses) 본문(c-page)도 옮겼다. 옮기지 않은 본문은 아직 읽기 편한 최소 기본값이다. 시안의 컨테이너 질의(@container page)는 화면 폭(@media)으로 옮겼다. */
/* 글꼴 Pretendard 1.3.9(OFL) 부분 집합 둘 — scripts/font-subset.mjs 가 만든다(사이트 글자가 바뀌면 다시 돌린다, 2026-10-16).
   core: 사이트 글(템플릿 · 약관 · CSS · JS · 시드)에 쓰는 글자 + 라틴 · 기호(« » − ① ㈜ 등) — 모든 페이지가 미리 받는다(layout.rs preload).
   ext: KS X 1001 한글 중 core 에 없는 글자(강의 제목 · 이름 같은 바뀌는 글) — 그런 글자가 화면에 있을 때만 받는다.
   뒤에 쓴 core 를 먼저 찾고 core 에 없는 한글만 ext 로 간다(헤드리스 Chrome 에서 core 만 받는 것 · 없는 글자일 때만 ext 를 받는 것을 확인했다) */
@font-face{font-family:Pretendard;src:url(../../fonts/pretendard-ext.woff2) format('woff2');font-weight:45 920;font-display:swap;unicode-range:U+AC00-D7A3}
@font-face{font-family:Pretendard;src:url(../../fonts/pretendard-core.woff2) format('woff2');font-weight:45 920;font-display:swap}
:root{--bk:#0F0F0F;--red:#FF4155;--t1:#FFFFFF;--t2:#A1A1AA;--t3:#71717A;--s1:#1A1A1D;--s2:#232327;--ln:#26262A;
--crown:url(../img/ui/ui-1.svg)}
/* 스크롤 막대를 숨긴다(스크롤은 그대로, 2026-10-12 사용자). 막대가 없어야 짧은 페이지(로그인)와 긴 페이지(홈)를 오갈 때 상단바가 옆으로 움직이지 않는다 */
/* 첫 그림부터 어두운 바탕(2026-10-20 사용자 "페이지를 이동하거나 로그인할 때 화면이 하얀색으로 한번 깜빡"): 바탕을 body:has(.p-ink) 같은
   뒤에 읽히는 요소에 기대면, 그 요소를 읽기 전에 그린 첫 장면(페이지 전환의 새 화면 사진)이 기본 흰 바탕이다. html 에 바로 바탕과 어두운 색 체계를 */
html{scrollbar-width:none;background:#0F0F0F;color-scheme:dark}
html::-webkit-scrollbar{display:none}
/* 사이트 글꼴은 Pretendard 하나(2026-10-16 사용자 "폰트도 통일시키시고") — 시안을 옮기지 않은 화면 · 폼 칸도 같은 글꼴 */
body{margin:0;font:16px/1.6 Pretendard,system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased}
:where(button,input,select,textarea){font-family:inherit}
/* 본문 · 꼬리말도 상단바와 같은 내용 폭 1120(왼쪽 선을 맞춘다, 2026-10-13 사용자 "간격 선이 다 안 맞아, 맞춰") */
#main{box-sizing:border-box;width:100%;max-width:1168px;margin-left:auto;margin-right:auto;padding:0 24px}
img,video{max-width:100%;height:auto}
/* 밑줄은 어디에도 쓰지 않는다(2026-10-13 사용자 "밑줄 그어지는 거 모든 것들이 절대 없게") */
a{text-decoration:none}

/* ── 상단바 · 내 메뉴 · 모바일 시트: 시안 바탕(home.css)의 초기화와 글꼴(Pretendard 14px/1.5)을 이 부품 안에만 ──
   초기화는 :where로 시안의 * · a 처럼 우선순위 0(부품 규칙이 이긴다) */
:where(.t-bar,.t-me,.t-sheet),:where(.t-bar,.t-me,.t-sheet) *{box-sizing:border-box;margin:0;padding:0}
:where(.t-bar,.t-me,.t-sheet){font:14px/1.5 Pretendard,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
:where(.t-bar,.t-me,.t-sheet) a{color:inherit}

/* 상단바: 바탕 #0F0F0F, 64px 한 줄, 내용 폭 1120(양옆 24). 강조는 레드 하나 — 제목 왕관 · 현재 위치 · 포커스에만 */
.t-bar{position:sticky;top:0;z-index:40;background:var(--bk);color:var(--t1);font-size:14px}
.t-row{display:flex;align-items:center;gap:28px;width:100%;max-width:1168px;height:64px;margin:0 auto;padding:0 24px}
.t-sp{flex:1}
/* 제목(왕관 R) — 마우스를 올리면 왕관이 내려앉는다. 760 미만은 룩 아이콘 */
.t-logo{display:flex;align-items:center;flex:none;border-radius:6px}
.t-logo svg{display:block;height:22px;width:auto;overflow:visible}
.t-logo .t-rook{display:none;height:22px}
.t-logo:focus-visible{outline:2px solid var(--red);outline-offset:6px}
/* 메뉴 */
.t-nav{display:flex;gap:4px}
.t-nav a{position:relative;display:grid;place-items:center;height:40px;padding:0 12px;border-radius:10px;color:var(--t2);font-size:15px;font-weight:600;letter-spacing:-.01em;transition:color .15s,background-color .15s}
.t-nav a:hover{color:var(--t1)}
.t-nav a[aria-current]{color:var(--t1)}
.t-nav a:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
/* 검색 알약(시안은 label — 아이콘은 누르면 검색하는 단추, 760~999에서는 알약 전체가 그 단추) */
.t-search{position:relative;display:flex;align-items:center;gap:10px;width:300px;height:40px;padding:0 10px 0 14px;border-radius:20px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--ln);color:var(--t3);cursor:default;transition:background-color .15s,box-shadow .15s}
.t-search button{display:grid;place-items:center;flex:none;border:0;background:none;color:inherit;font:inherit;text-align:inherit;cursor:inherit}
.t-search svg{flex:none;width:17px;height:17px}
.t-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:var(--t1);font:inherit;font-size:14px}
.t-search input::placeholder{color:var(--t3)}
.t-search:hover{background:var(--s2)}
.t-search:focus-within{background:var(--s2);box-shadow:inset 0 0 0 1px var(--red),0 0 0 3px rgba(255,65,85,.22);color:var(--t2)}
/* 계정: 로그인 전 로그인 글자(맨 끝 글자를 내용 오른쪽 끝에 맞춘다), 로그인 뒤 아바타 */
.t-acc{display:flex;align-items:center;gap:6px;flex:none}
.t-link{position:relative;display:grid;place-items:center;height:40px;padding:0 12px;border-radius:10px;color:#E4E4E7;font-size:14px;font-weight:600;white-space:nowrap;transition:color .15s}
.t-link:hover,.t-link[aria-current]{color:var(--t1)}
.t-acc .t-link:last-child{margin-right:-12px}
.t-link:focus-visible,.t-av:focus-visible,.t-menu:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.t-av{display:grid;place-items:center;width:36px;height:36px;margin-left:4px;border:0;border-radius:50%;background:#3F3F46;color:var(--t1);font:700 14px/1 Pretendard,system-ui,sans-serif;cursor:pointer;box-shadow:0 0 0 2px var(--bk),0 0 0 3px transparent;transition:box-shadow .15s}
.t-av svg{width:18px;height:18px}
.t-av:hover,body:has(#t-me:popover-open) .t-av{box-shadow:0 0 0 2px var(--bk),0 0 0 3.5px #52525B}
.t-menu{display:none;place-items:center;width:40px;height:40px;flex:none;border:0;border-radius:10px;background:none;color:var(--t1);cursor:pointer}
.t-menu svg{width:22px;height:22px}

/* 내 메뉴(로그인 뒤 아바타): 오른쪽 끝 = 아바타 오른쪽 끝(내용 오른쪽 끝) */
.t-me{width:260px;padding:6px;border:1px solid var(--ln);border-radius:14px;background:#161618;color:#E4E4E7;box-shadow:0 16px 40px rgba(0,0,0,.45);font-size:14px}
.t-me[popover]{inset:68px max(24px,calc((100% - 1120px) / 2)) auto auto;margin:0}
.t-me header{display:grid;padding:10px 12px 12px;border-bottom:1px solid var(--ln);margin-bottom:6px}
.t-me header b{color:var(--t1);font-size:15px}
.t-me header small{color:var(--t3);font-size:12.5px}
.t-me :is(a,button){display:flex;justify-content:space-between;width:100%;padding:9px 12px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.t-me :is(a,button):hover{background:var(--s2);color:var(--t1)}
.t-me hr{border:0;border-top:1px solid var(--ln);margin:6px 0}
.t-me .t-out{color:var(--t2)}

/* 모바일 메뉴 시트(760 미만, ≡) */
.t-sheet{width:min(340px,88vw);height:100%;max-height:none;padding:0;border:0;background:var(--bk);color:var(--t1)}
.t-sheet[popover]{inset:0 0 0 auto;margin:0}
.t-sheet::backdrop{background:rgba(0,0,0,.55)}
.t-sheet-top{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 8px 0 20px;border-bottom:1px solid var(--ln)}
.t-sheet-top .t-menu{display:grid}
.t-sheet nav{display:grid;padding:12px 8px}
.t-sheet nav a{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 12px;border-radius:10px;font-size:17px;font-weight:700}
.t-sheet nav a[aria-current]{color:var(--t1)}
.t-sheet nav a[aria-current]::after{content:'';width:16px;height:6px;background:var(--crown) center/contain no-repeat}
.t-sheet nav a:not([aria-current]){color:#D4D4D8}
.t-sheet .t-sub{display:grid;padding:8px;border-top:1px solid var(--ln)}
.t-sheet .t-sub :is(a,button){padding:12px;border:0;background:none;color:var(--t2);font:inherit;font-size:15px;text-align:start;cursor:pointer}
.t-sheet .t-sub form{display:grid}
.t-sheet .t-btns{display:grid;gap:8px;padding:16px 20px}
.t-sheet .t-btns a{display:grid;place-items:center;height:48px;border-radius:24px;font-weight:700}
.t-sheet .t-btns a:first-child{background:var(--t1);color:var(--bk)}
.t-sheet .t-who{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--ln)}
.t-sheet .t-who div{display:grid}
.t-sheet .t-who small{color:var(--t3)}

/* ── 메뉴 · 글자 링크 위에 작은 레드 왕관(제목 R 위 왕관처럼, 틈 2px) ──
   마우스를 올린(또는 키보드로 고른) 것에 왕관이 내려앉고, 그동안 현재 위치의 왕관은 내려놓는다 — 바 전체에서 하나만 앉는다.
   메뉴 사이 틈을 지날 때 왕관이 현재 메뉴로 튀지 않게 메뉴 사이 간격을 0으로, 대신 좌우 여백을 2px 늘렸다 */
.t-a .t-nav{gap:0}
.t-a .t-nav a{padding:0 14px}
.t-a :is(.t-nav a,.t-link):is([aria-current],:hover,:focus-visible)::after{content:'';position:absolute;left:50%;top:5px;width:16px;height:6px;margin-left:-8px;background:var(--crown) center/contain no-repeat}
.t-a:has(:is(.t-nav a,.t-link):is(:hover,:focus-visible)) :is(.t-nav a,.t-link)[aria-current]:not(:hover,:focus-visible)::after{content:none}
@media (prefers-reduced-motion:no-preference){
.t-a :is(.t-nav a,.t-link)::after{animation:t-sit .4s cubic-bezier(.3,1.5,.5,1) both}
@keyframes t-sit{from{transform:translateY(-10px);opacity:0}}
}
/* 스크롤하면 바 아래에 경계(스크롤 연동 애니메이션을 아는 브라우저만) */
@supports (animation-timeline:scroll()){
.t-a{animation:t-edge linear both;animation-timeline:scroll();animation-range:0 80px}
@keyframes t-edge{from{box-shadow:0 1px 0 transparent}to{box-shadow:0 1px 0 #26262A,0 8px 24px rgba(0,0,0,.12)}}
}
@media (prefers-reduced-motion:no-preference){
.t-logo .r-crown{transform-box:fill-box;transition:transform .25s}
.t-logo:hover .r-crown{animation:t-drop .42s cubic-bezier(.3,1.5,.5,1) both}
@keyframes t-drop{from{transform:translateY(-34px);opacity:0}}
}
/* 페이지 전환: 본문은 .3s 겹쳐 바뀌고, 제목(rl-logo)은 자리가 다른 페이지 사이에서 미끄러진다(아는 브라우저만) */
@media (prefers-reduced-motion:no-preference){
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
::view-transition-group(rl-logo){animation-duration:.55s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
}
.t-bar .t-logo{view-transition-name:rl-logo}

/* 760~999: 검색은 아이콘 단추로 */
@media (max-width:999px){
.t-a .t-search{width:40px;padding:0;justify-content:center}
.t-a .t-search input{display:none}
.t-a .t-search button{position:absolute;inset:0;border-radius:inherit;cursor:pointer}
.t-row{gap:20px}
}
/* 모바일 ~759: 룩 · 검색 · ≡ */
@media (max-width:759px){
.t-row{height:56px;gap:10px;padding:0 8px 0 16px}
.t-logo svg.t-word{display:none}
.t-logo .t-rook{display:block}
.t-nav,.t-acc,.t-sp{display:none}
.t-menu{display:grid}
.t-row>.t-menu{margin-left:auto}
.t-a .t-search{flex:1;width:auto;max-width:none;height:38px;margin:0;padding:0 12px;justify-content:flex-start}
.t-a .t-search input{display:block}
.t-a .t-search button{position:static;cursor:inherit}
}

/* ── 페이지 틀 · 시안 본문(c-page) · 꼬리말(f-) ──
   시안 1의 home.css(.g-main · .g-in) · theme.css(p-ink) · courses.css(c-) · foot.css(f-)를 옮겼다. 컨테이너 질의(@container page)와 cqw는 화면 폭(@media · vw)으로.
   시안을 옮긴 페이지는 #main(= .g-in, 내용 폭 1120) 안에 <div class="c-page p-ink …">(= .g-main)를 둔다.
   p-ink: 바탕 #0F0F0F(상단바 · 꼬리말과 같은 색, 꼬리말 위에만 옅은 1px 선), 판 #17171B → #121215, 글 #F4F4F5 · #A1A1AA · #71717A, 강조 레드 */
/* 꼬리말은 내용이 짧아도 화면 바닥에(2026-10-14 사용자 "푸터 바닥으로 붙여주시고") — body를 세로 flex로, 꼬리말은 margin-top:auto */
body{display:flex;flex-direction:column;min-height:100vh}
body>.f-foot{margin-top:auto}
body:has(.p-ink){--p-bg:#0F0F0F;--p-card:#17171B;--p-card2:#121215;--p-box:#1C1C20;--p-box2:#232328;--p-t1:#F4F4F5;--p-t2:#A1A1AA;--p-t3:#71717A;--p-ph:#52525B;--p-line:#2A2A30;--p-line2:#3A3A42;--p-ac:#FF4155;background:var(--p-bg)}
body:has(.p-ink,.au) .f-foot{box-shadow:inset 0 1px #1F1F23}
/* 시안 바탕(home.css)의 초기화와 글꼴(Pretendard 14px/1.5)을 이 부품 안에만(우선순위 0) */
:where(.c-page,.f-foot),:where(.c-page,.f-foot) *{box-sizing:border-box;margin:0;padding:0}
:where(.c-page,.f-foot) a{color:inherit}
.c-page{padding:28px 0 80px;font:14px/1.5 Pretendard,system-ui,sans-serif;-webkit-font-smoothing:antialiased;word-break:keep-all}
.p-ink{color:var(--p-t2)}
.c-title{margin:8px 0 0;font-size:32px;font-weight:800;line-height:1.25;letter-spacing:-.025em;color:var(--p-t1)}
.c-sec{margin-top:48px}
.c-h{margin:0 0 16px;font-size:20px;font-weight:750;line-height:1.3;letter-spacing:-.01em;color:var(--p-t1)}
/* 강의(/courses): 모집 중인 챌린지 판 — 판 전체가 상세로 가는 링크. 왼쪽 이름 · 가격 + 자세히 보기, 오른쪽 표지 위 홍보 영상(8:3, 아래 끝 빨간 선 · 빛) */
.c-feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);min-height:340px;overflow:hidden;border-radius:8px;box-shadow:inset 0 0 0 1px var(--p-line);background:linear-gradient(180deg,var(--p-card),var(--p-card2));color:var(--p-t2);transition:box-shadow .2s ease}
.c-feat+.c-feat{margin-top:24px}
.c-feat-tx{display:grid;align-content:center;gap:14px;padding:40px}
.c-feat-t{font-size:clamp(26px,2.8vw,40px);font-weight:800;line-height:1.22;letter-spacing:-.03em;color:#FFFFFF;text-wrap:balance}
.c-feat-ft{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:10px;padding-top:20px;border-top:1px solid var(--p-line)}
.c-feat-ft em{font-size:22px;font-style:normal;font-weight:750;letter-spacing:-.02em;color:var(--p-t1);font-variant-numeric:tabular-nums}
.c-feat-ft em small{margin-left:10px;font-size:14px;font-weight:600;letter-spacing:0;color:var(--p-t3)}
/* 회차 일정이 확정되지 않은 과정이 있을 때 판마다 다는 상태 글(상세 신청 카드의 .c-st와 같은 글 · 모양), 신청을 받지 않으면 가격을 흐리게(상세 is-off) */
.c-feat .c-st{font-size:13px;font-weight:700;color:var(--p-ac)}
.c-feat-ft em.is-off{color:var(--p-ph)}
.c-feat-go{display:inline-grid;place-items:center;height:44px;padding:0 22px;border-radius:6px;background:var(--p-ac);color:#FFFFFF;font-size:14.5px;font-weight:700;box-shadow:0 10px 28px -12px rgba(255,65,85,.6);transition:background-color .15s}
.c-feat-art{position:relative;overflow:hidden;border-left:1px solid var(--p-line);background:#0F0F0F}
.c-feat-art::before{content:'';display:block;aspect-ratio:8/3}
.c-feat-art :is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c-feat-art::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--p-ac);box-shadow:0 0 48px 12px rgba(255,65,85,.22)}
.c-feat:hover{box-shadow:inset 0 0 0 1px var(--p-line2)}
.c-feat:hover .c-feat-go{background:#FF5C6E}
.c-feat:focus-visible{outline:2px solid var(--red);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.c-feat-art video{display:none}}
/* 모집 중인 챌린지가 없을 때 */
.c-empty{padding:40px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--p-line);color:var(--p-t2);font-size:15px;text-align:center}
/* 꼬리말: 상단바와 같은 검정 판, 내용 폭 1120. 정책 글(개인정보 처리방침은 굵은 흰 글자) · 사업자 정보 · 저작권. 레드는 포커스만 */
.f-foot{background:var(--bk);color:var(--t3);font:12.5px/1.5 Pretendard,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.f-in{width:100%;max-width:1168px;margin:0 auto;padding:48px 24px 40px}
.f-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.f-logo{display:flex;flex:none;border-radius:4px}
.f-logo img{display:block;height:18px;opacity:.7}
.f-links{display:flex;flex-wrap:wrap;gap:6px 24px}
.f-links a{color:var(--t2);font-size:13.5px}
.f-links a:hover{color:var(--t1)}
.f-links .f-pi{color:#E4E4E7;font-weight:700}
/* 사업자 정보: 이름 · 값 표(2026-10-15 사용자 "푸터를 잘 정리해주세요 지금 가로로 너무 남발했습니다" — 한 줄 나열을 바꿈).
   넓은 화면은 두 칸 네 줄(세로로 채운다: 왼쪽 회사 · 오른쪽 연락처), 이름은 흐린 회색 · 값은 밝은 회색, 사업자정보 확인은 사업자등록번호 옆 */
.f-biz{margin-top:28px;font-style:normal;line-height:1.7}
.f-biz dl{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));grid-template-rows:repeat(4,auto);grid-auto-flow:column;gap:4px 72px}
.f-biz dl>div{display:grid;grid-template-columns:96px minmax(0,auto);gap:12px}
.f-biz dt{color:var(--t3)}
.f-biz dd{color:var(--t2)}
.f-biz a{margin-left:10px;color:#E4E4E7;font-weight:600}
.f-biz a:hover{color:var(--t1)}
.f-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--ln)}
.f-foot a:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}
/* 760~999: 판은 한 칸(그림이 위) */
@media (max-width:999px){
.c-feat{grid-template-columns:minmax(0,1fr)}
.c-feat-art{order:-1;border-left:0}
.c-feat-t{font-size:clamp(26px,4vw,36px)}
.c-feat-tx{padding:28px 28px 30px}
}
/* 모바일 ~759 */
@media (max-width:759px){
#main{padding:0 16px}
.c-page{padding:18px 0 64px}
.c-title{font-size:26px}
.c-sec{margin-top:36px}
.c-feat-tx{gap:12px;padding:22px 20px 24px}
.c-feat-ft{flex-direction:column;align-items:stretch}
.c-feat-go{height:48px}
.f-in{padding:36px 16px 32px}
.f-top{flex-direction:column;align-items:flex-start}
.f-links{gap:10px 20px}
.f-biz{margin-top:22px}
.f-biz dl{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
.f-biz dl>div{grid-template-columns:96px minmax(0,1fr)}
}

/* ── 로그인 화면(au-, view/account.rs login_body) ──
   시안 1에 로그인 화면 시안이 없어 기능 세션이 시안 1 부품으로 지었다(2026-10-15 사용자 "로그인 페이지 먼저 구현"):
   바탕은 강의 목록 · 상세와 같은 #0F0F0F 한 색(p-ink), 입력 칸은 검색 알약(s1 바탕 · ln 테 · 포커스 레드 테 + 옅은 레드 빛), 단추는 모바일 시트의 흰 알약.
   카카오 단추는 카카오 로그인 디자인 가이드 색(#FEE500 · 검정 심볼 · 글자 85%). 레드는 포커스에만 */
body:has(.au){background:var(--bk);color:#F4F4F5}
.au{box-sizing:border-box;width:100%;max-width:400px;margin:0 auto;padding:72px 0 96px;font:14px/1.5 Pretendard,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.au *{box-sizing:border-box;margin:0}
.au h1{margin-bottom:32px;font-size:28px;font-weight:800;letter-spacing:-.02em;text-align:center}
.au-kakao{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:24px;background:#FEE500;color:rgba(0,0,0,.85);font-size:15px;font-weight:700;transition:filter .15s}
.au-kakao:hover{filter:brightness(.95)}
.au-kakao svg{width:18px;height:18px;color:#000}
.au-or{display:flex;align-items:center;gap:12px;margin:24px 0;color:var(--t3);font-size:12.5px}
.au-or::before,.au-or::after{content:'';flex:1;height:1px;background:var(--ln)}
.au-form{display:grid;gap:8px}
.au-f{color:var(--t2);font-size:13px;font-weight:600}
.au-pw{margin-top:12px}
/* 오류: 칸은 붉은 테, 글은 칸 아래 빨간 글씨(2026-10-15 사용자 — 기본 말풍선 · 위 알림 판 대신). 비밀번호 칸 아래는 왼쪽 글 | 오른쪽 비밀번호 찾기 */
.au-msg{color:var(--red);font-size:13px}
.au-msg:empty{display:none}
.au-under{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.au-under .au-msg{flex:1}
.au-find{flex:none;margin-left:auto}
.au-find a{color:var(--t3);font-size:13px;transition:color .15s}
.au-find a:hover{color:var(--t1)}
.au-in{width:100%;height:48px;padding:0 16px;border:0;border-radius:12px;outline:0;background:var(--s1);box-shadow:inset 0 0 0 1px var(--ln);color:var(--t1);font:inherit;font-size:15px;transition:background-color .15s,box-shadow .15s}
.au-in:hover{background:var(--s2)}
.au-in:focus{background:var(--s2);box-shadow:inset 0 0 0 1px var(--red),0 0 0 3px rgba(255,65,85,.22)}
.au-in[aria-invalid=true]{box-shadow:inset 0 0 0 1px var(--red)}
.au-in[aria-invalid=true]:focus{box-shadow:inset 0 0 0 1px var(--red),0 0 0 3px rgba(255,65,85,.22)}
/* 브라우저 자동 완성의 밝은 바탕을 칸 색으로 덮는다 */
.au-in:autofill{-webkit-text-fill-color:var(--t1);caret-color:var(--t1);box-shadow:inset 0 0 0 1px var(--ln),inset 0 0 0 100px var(--s1)}
.au-in[aria-invalid=true]:autofill{box-shadow:inset 0 0 0 1px var(--red),inset 0 0 0 100px var(--s1)}
.au-in:autofill:focus{box-shadow:inset 0 0 0 1px var(--red),inset 0 0 0 100px var(--s2),0 0 0 3px rgba(255,65,85,.22)}
.au-go{height:48px;margin-top:12px;border:0;border-radius:24px;background:var(--t1);color:var(--bk);font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:background-color .15s}
.au-go:hover{background:#E4E4E7}
.au :is(.au-kakao,.au-go,a):focus-visible{outline:2px solid var(--red);outline-offset:2px}
.au-alt{margin-top:28px;color:var(--t3);text-align:center}
.au-alt a{margin-left:8px;color:var(--t1);font-weight:600}
.au-back a{margin-left:0}
/* 가입 · 비밀번호 찾기 · 비밀번호 설정 · 카카오 가입 · 안내 화면도 같은 단 · 부품(2026-10-16 비평 — 옛 기본 모양이었다).
   제목 아래 설명(au-lead), 라벨 옆 도움말(small), 칸 + 옆 단추 줄(au-row · au-side — 칸과 같은 높이 · 반경의 줄 단추),
   처리 안내(au-ok, 회색), 읽기 전용 값(au-val, 테만), 동의 체크박스(au-check — 흰 칸에 검은 체크, 오류는 붉은 테) */
.au{word-break:keep-all}
.au-lead{margin:-20px 0 28px;color:var(--t2);font-size:14px;line-height:1.6;text-align:center;text-wrap:pretty}
.au-lead b{color:var(--t1);font-weight:600;overflow-wrap:anywhere}
.au-f~.au-f{margin-top:12px}
.au-f small{margin-left:6px;color:var(--t3);font-size:12.5px;font-weight:500}
.au-in::placeholder{color:var(--t3)}
.au-row{display:flex;gap:8px}
.au-row .au-in{flex:1;min-width:0}
.au-side{flex:none;height:48px;padding:0 16px;border:0;border-radius:12px;background:transparent;box-shadow:inset 0 0 0 1px #3A3A42;color:var(--t1);font:inherit;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .15s,box-shadow .15s}
.au-side:hover{background:var(--s1);box-shadow:inset 0 0 0 1px #52525B}
.au-ok{color:var(--t2);font-size:13px}
.au-ok:empty{display:none}
.au-val{display:flex;align-items:center;min-height:48px;padding:12px 16px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--ln);color:var(--t2);font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.au-agree{min-width:0;margin:12px 0 0;padding:0;border:0}
.au-agree legend{padding:0}
.au-checks{display:grid;margin-top:8px;padding:2px 16px;border-radius:12px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--ln)}
.au-check{display:flex;align-items:flex-start;gap:10px;padding:12px 0;color:#E4E4E7;font-size:14px;line-height:1.45;cursor:pointer}
.au-checks>*+*{box-shadow:inset 0 1px var(--ln)}
.au-check em{font-style:normal;color:var(--t3)}
.au-check a{color:var(--t1);font-weight:600}
.au-check input{appearance:none;flex:none;font:inherit;display:grid;place-items:center;width:20px;height:20px;margin:0;border-radius:6px;background:var(--bk);box-shadow:inset 0 0 0 1.5px #52525B;cursor:pointer;transition:background-color .15s,box-shadow .15s}
.au-check input::before{content:'';width:9px;height:5px;margin-top:-2px;border:solid var(--bk);border-width:0 0 2px 2px;rotate:-45deg;opacity:0}
.au-check:hover input:not(:checked){box-shadow:inset 0 0 0 1.5px #71717A}
.au-check input:checked{background:var(--t1);box-shadow:none}
.au-check input:checked::before{opacity:1}
.au-check input[aria-invalid=true]{box-shadow:inset 0 0 0 1.5px var(--red)}
/* 전체 동의: 묶음 맨 위 굵은 흰 글(login.js 가 보이기 전에는 hidden — .au-check 의 display 가 hidden 을 이기지 않게) */
.au-check[hidden]{display:none}
.au-checks>[hidden]+*{box-shadow:none}
.au-all{color:var(--t1);font-size:15px;font-weight:700}
.au-agree>.au-msg{margin-top:8px}
/* 개인정보 수집·이용 안내(2026-10-16 사용자, 기능구현): 체크 줄 오른쪽 끝의 "보기"가 아래에 목적 · 항목 · 보유 기간 · 근거를 편다 */
.au-pi{position:relative}
.au-pi .au-check{padding-right:44px}
.au-more>summary{position:absolute;top:12px;right:0;list-style:none;border-radius:4px;color:var(--t3);font-size:13px;line-height:1.45;cursor:pointer;transition:color .15s}
.au-more>summary::-webkit-details-marker{display:none}
.au-more>summary:hover,.au-more[open]>summary{color:var(--t1)}
.au-more-box{display:grid;gap:2px;margin:-4px 0 12px 30px;padding:12px 14px;border-radius:10px;background:var(--bk);color:var(--t2);font-size:12.5px;line-height:1.6}
.au-more-box dt{color:var(--t1);font-weight:600}
.au-more-box dt:not(:first-child){margin-top:6px}
.au-more-box dd{margin:0}
.au-more-box a{color:var(--t1);font-weight:600}
/* 인증 완료: 누를 수 없는 줄 단추 + 체크, 읽기 전용 칸은 글을 한 단 흐리게 */
.au-side--done,.au-side--done:hover{display:inline-flex;align-items:center;gap:6px;background:transparent;box-shadow:inset 0 0 0 1px var(--ln);color:var(--t2);cursor:default}
.au-side--done svg{width:16px;height:16px}
.au-in[readonly],.au-in[readonly]:focus{background:var(--s1);box-shadow:inset 0 0 0 1px var(--ln);color:var(--t2)}
.au-fine{color:var(--t3);font-size:12.5px}
.au-fine a{color:var(--t2);font-weight:600;transition:color .15s}
.au-fine a:hover{color:var(--t1)}
/* 탈퇴 뒤 분리 보관 안내(0036, 「개인정보」): 개인정보 안내 확인 칸 바로 아래, 보기 상자와 같은 들여쓰기 */
.au-keep{margin:-4px 0 10px 30px;line-height:1.6}
a.au-go{display:grid;place-items:center}
.au-hide{position:absolute;width:1px;height:1px;padding:0;border:0;font:inherit;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.au-note{text-align:center}
.au-note .au-go{margin-top:0}
:is(.au-side,.au-check input,.au-check a,.au-fine a,.au-more>summary,.au-more-box a):focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media (max-width:759px){.au{padding:40px 0 64px}}

/* ── 내 정보(ac-, view/account.rs settings_body) ──
   내 강의실과 같은 틀(c-page · c-title)에 구역마다 왼쪽 이름 · 설명 | 오른쪽 폼(999 이하는 쌓는다). 칸 · 오류 글 · 체크박스는 로그인 부품(au-).
   단추는 흰 알약(ac-btn) — 둘째 행동은 줄 단추, 카카오는 노랑, 탈퇴만 빨간 줄 */
.ac-done{display:flex;align-items:flex-start;gap:10px;max-width:808px;margin-top:24px;padding:14px 16px;border-radius:12px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--ln);color:var(--p-t1);font-size:14px}
.ac-done svg{flex:none;width:16px;height:16px;margin-top:2px}
.ac-lost{max-width:808px;margin-top:16px}
.ac-sec{display:grid;grid-template-columns:minmax(0,264px) minmax(0,480px);gap:16px 64px;padding:32px 0;border-top:1px solid var(--p-line)}
.ac-sec:first-of-type{margin-top:32px}
.ac-h h2{font-size:17px;font-weight:750;line-height:1.4;letter-spacing:-.01em;color:var(--p-t1)}
.ac-h p{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--p-t3);text-wrap:pretty}
.ac-h p b,.ac-st b{color:var(--p-t2);font-weight:600;overflow-wrap:anywhere}
.ac-h p a{color:var(--p-t2);font-weight:600;transition:color .15s}
.ac-h p a:hover{color:var(--p-t1)}
.ac-body{display:grid;gap:24px;align-content:start}
.ac-form{display:grid;gap:8px;align-content:start}
.ac-st{font-size:14px;line-height:1.6;color:var(--p-t2)}
.ac-acts{display:flex;flex-wrap:wrap;gap:8px}
.ac-btn{justify-self:start;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;margin-top:8px;padding:0 22px;border:0;border-radius:22px;background:var(--t1);color:var(--bk);font:inherit;font-size:14.5px;font-weight:700;white-space:nowrap;cursor:pointer;transition:background-color .15s,box-shadow .15s,filter .15s}
.ac-acts .ac-btn{margin-top:8px}
.ac-btn:hover{background:#E4E4E7}
.ac-btn--line{background:transparent;box-shadow:inset 0 0 0 1px #3A3A42;color:var(--t1)}
.ac-btn--line:hover{background:var(--s1);box-shadow:inset 0 0 0 1px #52525B}
.ac-btn--kakao{background:#FEE500;color:rgba(0,0,0,.85)}
.ac-btn--kakao:hover{background:#FEE500;filter:brightness(.95)}
.ac-btn--kakao svg{width:16px;height:16px;color:#000}
.ac-btn--danger{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,65,85,.55);color:var(--red)}
.ac-btn--danger:hover{background:rgba(255,65,85,.08);box-shadow:inset 0 0 0 1px var(--red)}
.ac-page :is(a,.ac-btn):focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media (max-width:999px){.ac-sec{grid-template-columns:minmax(0,1fr);max-width:560px}}
@media (max-width:759px){.ac-sec{padding:28px 0}.ac-sec:first-of-type{margin-top:24px}.ac-btn,.ac-acts{justify-self:stretch}.ac-btn{height:48px;border-radius:24px}.ac-acts .ac-btn{flex:1}}

/* ── 내 강의실(my-, view/account.rs my_body) ──
   시안 1 my.css를 옮겼다(틀 c-page · c-title · c-sec · c-h · p-ink 변수는 위 「페이지 틀」). 컨테이너 질의(@container page)는 화면 폭(@media)으로.
   진도 막대는 흰색, 영상 위 진도 · 주 행동 단추만 레드. 빈 상태(c-empty에 얹음)와 내 강의 카드(my-card)는 시안에 없어 같은 토큰으로 더했다 */
.my-pg{display:flex;align-items:center;gap:10px}
.my-pb{flex:1;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--p-t1) var(--p),var(--p-line) var(--p))}
.my-pg em{min-width:4ch;font-size:13px;font-style:normal;font-weight:700;color:var(--p-t1);text-align:right;font-variant-numeric:tabular-nums}
/* 이어서 보기: 판 전체가 그 차시로 가는 링크. 왼쪽 표지(가운데 재생 단추 · 아래 빨간 진도, 폭 560까지), 오른쪽 이름 · 진도 · 단추 모양 글 */
.my-cont{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);overflow:hidden;border-radius:8px;box-shadow:inset 0 0 0 1px var(--p-line);background:linear-gradient(180deg,var(--p-card),var(--p-card2));color:var(--p-t2);transition:box-shadow .2s ease}
.my-cont-th{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;background:var(--p-box)}
.my-cont-th img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.62);transition:filter .35s ease,scale .45s cubic-bezier(.2,.8,.2,1)}
/* 표지가 없는 강의는 내 강의 카드의 빈 표지(my-ph)와 같은 빛 */
.my-cont-th:not(:has(img)){background:radial-gradient(ellipse 80% 90% at 50% 100%,#2A2A31 0%,#1A1A1F 60%,#141418 100%)}
.my-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:rgba(15,15,15,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);color:#FFFFFF;transition:background-color .2s ease,box-shadow .2s ease,scale .25s cubic-bezier(.3,1.5,.5,1)}
.my-play svg{width:26px;height:26px;margin-left:3px}
.my-cont-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--p-ac) var(--p),rgba(255,255,255,.18) var(--p))}
.my-cont-tx{display:grid;align-content:center;gap:12px;padding:32px 40px}
.my-cont-tx>small{font-size:13.5px;color:var(--p-t2)}
.my-cont-tx>b{font-size:clamp(20px,1.6vw,26px);font-weight:800;line-height:1.3;letter-spacing:-.02em;color:#FFFFFF;text-wrap:balance}
.my-cont-tx .my-pg{max-width:560px;margin-top:6px}
.my-meta{font-size:13px;color:var(--p-t3)}
.my-btn{justify-self:start;display:inline-grid;place-items:center;height:46px;margin-top:8px;padding:0 24px;border-radius:6px;background:var(--p-ac);color:#FFFFFF;font-size:15px;font-weight:700;box-shadow:0 10px 28px -12px rgba(255,65,85,.6);transition:background-color .15s}
.my-cont:hover{box-shadow:inset 0 0 0 1px var(--p-line2)}
.my-cont:hover .my-cont-th img{filter:brightness(.8);scale:1.03}
.my-cont:hover .my-play{background:var(--p-ac);box-shadow:none;scale:1.06}
.my-cont:hover .my-btn{background:#FF5C6E}
.my-cont:focus-visible{outline:2px solid var(--red);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
.my-cont-th img,.my-play{transition:none}
.my-cont:hover .my-cont-th img{scale:1}
.my-cont:hover .my-play{scale:1}
}
/* 결제 내역 링크: 제목 줄 오른쪽 끝의 테 단추(제목 40px 줄 가운데, 모바일 32px 줄) */
.my-page{position:relative}
.my-orders{position:absolute;top:38px;right:0;display:inline-grid;place-items:center;height:36px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--p-line2);color:var(--p-t2);font-size:14px;font-weight:600;transition:background-color .15s,color .15s}
.my-orders:hover{background:var(--p-box);color:var(--p-t1)}
.my-orders:focus-visible{outline:2px solid var(--red);outline-offset:2px}
/* 수강 중인 강의가 없을 때: 안내 + 강의 목록으로(테만 있는 작은 단추) */
.my-empty a{display:inline-grid;place-items:center;height:40px;margin-top:16px;padding:0 18px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--p-line2);color:var(--p-t1);font-size:14px;font-weight:700;transition:background-color .15s}
.my-empty a:hover{background:var(--p-box)}
/* 내 강의(수강 중인 강의마다 카드, 시안에 없는 구역 — 첫 시안 git show 8da58f2:design/home/my.css .my-card · courses.css .c-th를 옮겼다):
   세 칸(760~999 두 칸, 모바일 한 칸에 표지 · 이름 가로). 표지 · 이름 링크(강의 상세)가 ::after로 카드 전체를 덮고, 이어서 학습하기 단추만 그 위에 */
.my-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 16px;list-style:none}
.my-card{position:relative;display:grid;align-content:start;gap:10px}
.my-card-a{display:grid;gap:10px}
.my-card-a::after{content:'';position:absolute;inset:0;z-index:1}
.my-th{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;background:var(--p-box);transition:box-shadow .3s ease}
.my-th img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.9);transition:filter .35s ease,scale .45s cubic-bezier(.2,.8,.2,1)}
.my-ph{display:grid;place-items:center;width:100%;height:100%;box-shadow:inset 0 -2px var(--p-ac);background:radial-gradient(ellipse 80% 90% at 50% 100%,#2A2A31 0%,#1A1A1F 60%,#141418 100%);color:rgba(255,255,255,.4);font-size:13px;font-weight:650;letter-spacing:.06em}
.my-done{position:absolute;left:10px;top:10px;padding:3px 8px;border-radius:4px;background:rgba(15,15,15,.78);color:#FFFFFF;font-size:12px;font-style:normal;font-weight:700}
.my-card-a b{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:15px;font-weight:650;line-height:1.45;color:var(--p-t1);transition:color .15s}
/* 여러 칸일 때 이름이 한 줄인 카드도 두 줄 자리를 잡아 같은 줄의 진도 · 단추 높이를 맞춘다 */
@media (min-width:760px){.my-card-a b{min-height:2.9em}}
.my-card>small{font-size:12.5px;color:var(--p-t3)}
.my-card.is-done .my-pb{background:var(--p-t3)}
.my-card.is-done .my-pg em{color:var(--p-t2)}
/* 단추는 줄 단추(courses.css .c-go--line) — 레드 주 행동은 위 이어서 보기 하나만 */
.my-go{position:relative;z-index:2;display:grid;place-items:center;height:42px;margin-top:4px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--p-line2);color:var(--p-t1);font-size:14.5px;font-weight:700;transition:background-color .15s,box-shadow .15s}
.my-go:hover{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px #52525B}
@media (hover:hover){
.my-card:has(.my-card-a:hover) .my-th{box-shadow:0 18px 32px -16px rgba(0,0,0,.9)}
.my-card:has(.my-card-a:hover) .my-th img{filter:brightness(1);scale:1.03}
.my-card:has(.my-card-a:hover) .my-card-a b{color:#FFFFFF}
}
.my-card-a:focus-visible{outline:none}
.my-card-a:focus-visible .my-th{outline:2px solid var(--red);outline-offset:2px}
.my-go:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.my-empty a:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.my-th img{transition:none}.my-card:has(.my-card-a:hover) .my-th img{scale:1}}
/* 태블릿은 표지 · 글 반반, 휴대폰에서만 쌓는다 */
@media (max-width:999px){
.my-cont{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.my-cont-tx{padding:24px 28px}
.my-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:759px){
.my-cont{grid-template-columns:minmax(0,1fr)}
.my-cont-tx{padding:20px 20px 22px}
.my-btn{justify-self:stretch;height:48px}
.my-grid{grid-template-columns:minmax(0,1fr);gap:0}
.my-card{padding:20px 0;border-top:1px solid var(--p-line)}
.my-card:first-child{padding-top:4px;border-top:0}
.my-card-a{grid-template-columns:128px minmax(0,1fr);align-items:center;gap:14px}
.my-go{height:46px}
.my-orders{top:26px;height:32px;padding:0 13px;font-size:13px}
}