/* 포털 리뉴얼을 사이트에 옮기며 더한 것 (시안 portal/site 밖 — site.css 는 시안 그대로 두고 여기에만 더한다)
   - 로그인한 사람의 계정 메뉴: 지금 사이트 모양 그대로(전달 문서 4-5 "계정 동그라미의 메뉴는 지금 사이트 그대로"), 색은 site.css 변수로
   - 부드러운 스크롤(Lenis)이 켜지면 브라우저 smooth 스크롤은 끈다(둘이 겹치면 앵커 이동이 늦게 따라간다) */
html.lenis { scroll-behavior: auto; }
.hd-acc { position: relative; display: flex; }
.hd-acc .cl-pt-pop__panel { position: absolute; top: calc(100% + 16px); right: 0; z-index: 60; }
.hd-acc .cl-pt-menu__item { color: var(--ink); text-decoration: none; }
.hd-my-empty { margin: 0; padding: 12px 8px 16px; font-size: 14px; line-height: 1.6; color: var(--mut); }
.cl-pt-consult__noscript { margin: 0; padding: 32px; color: var(--mut); }
@media (max-width: 640px) { .hd-acc { display: none; } }
.cl-pt-avatar { width: 40px; height: 40px; flex: none; border: 0; border-radius: 999px; background: var(--tint); color: var(--pri-d); display: grid; place-items: center; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
button.cl-pt-avatar[aria-expanded="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pri); }

.cl-pt-pop { position: relative; }
.cl-pt-pop__panel { position: absolute; top: calc(100% - 8px); right: 0; z-index: 60; }
.cl-pt-menu { width: 280px; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .12), 0 0 0 1px var(--line); display: flex; flex-direction: column; }
.cl-pt-menu--account { top: calc(100% + 16px); }
.cl-pt-menu__head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.cl-pt-menu__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-pt-menu__who strong { font-size: 15px; font-weight: 600; }
.cl-pt-menu__who span { font-size: 13px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-pt-menu__item { height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; display: flex; align-items: center; justify-content: space-between; gap: 10px; font: inherit; font-size: 15px; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.cl-pt-menu__item:hover { background: var(--soft); }
.cl-pt-menu__item .cl-icon { color: #86868b; }
.cl-pt-menu__item--muted { color: var(--mut); border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 6px; }

/* 로그인 · 가입: 사이트 base.css 의 비밀번호 보기 버튼 translateY(-50%) 가 auth.css 의 margin-top:-20px 과 겹쳐 20px 위로 뜨던 것 */
.au .cl-input-group__btn { transform: none; }

/* 반복 모션은 화면에 보일 때 처음부터 (사용자 2026.11.05 — 스크롤해 내려가면 이미 이야기 중간이던 것)
   섹션(.sec[data-sec])은 .is-in 이 붙기 전, 카드(.bc · .wc — portal.js 가 [data-play] 를 붙임)는 .is-play 가 붙기 전까지
   CSS 애니메이션을 첫 장면에서 멈춰 둔다. 멈춘 동안 시간이 흐르지 않으므로 풀리면 처음부터 돈다. 스크립트가 없으면 .js 가 없어 그냥 돈다 */
.js .sec[data-sec]:not(.is-in) *, .js .sec[data-sec]:not(.is-in) *::before, .js .sec[data-sec]:not(.is-in) *::after,
.js [data-play]:not(.is-play) *, .js [data-play]:not(.is-play) *::before, .js [data-play]:not(.is-play) *::after { animation-play-state: paused !important; }