/* 클라우드러닝 학원 목록 — 포털 리뉴얼 (2026.11.03)
   지금 사이트 list.js 가 그리는 카드 · 미리보기 · 지역 목록의 모양. list.js · 서버(/api/organizations/portal)는 그대로 둔다.
   list.js 가 만드는 구조 · 클래스(.cl-pt-org* · .cl-pt-preview* · .cl-menu-select*)를 바꾸지 않고 모양만 리뉴얼에 맞췄다.
   페이지 틀(머리 · 검색 · 지역 칩 · 더 보기 · 결과 없음 · 아래 안내)은 org-page.css.
   색은 site.css 토큰. 이 파일만 따로 쓸 때를 위해 :where(:root) 에 같은 값을 둔다(우선순위 0 — site.css 가 이김).
   누르는 것의 상태는 DESIGN.md 7-2 규칙 그대로(채운 버튼 = 바탕색, 흰 버튼 = 검정 선, 누름 0.97, 0.2초).
   예외: 학원 타일의 마우스 올림 = 보라 선 + 그림자(사용자 2026.11.04, 7-2 예외 표). */

:where(:root) { --pri: #904ae8; --pri-d: #7a35d0; --tint: #f3ecfd; --lav: #e2d3fb; --sky-tint: #e0f4ff; --ink: #1d1d1f; --ink-2: #3a3a3f; --mut: #5e5e63; --soft: #f5f5f7; --gray: #eef0f2;
    --err: #c5221f; --err-bg: #fce8e6; --line: #e6e6e9; --line-2: #f0f0f2; --track: #ececef; --ease: cubic-bezier(.2,.8,.2,1); }

@keyframes clOrgIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes clOrgPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes clSheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 목록 칸: 4칸 → 3칸(1080) → 2칸(760) → 휴대폰 목록 줄(640) ---------- */
/* grid-auto-rows: 1fr — 모든 줄의 높이를 가장 큰 카드에 맞춰 카드 높이를 모두 같게(더 보기로 붙은 줄도) */
[data-org-grid] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; align-items: stretch; }
@media (max-width: 1080px) { [data-org-grid] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { [data-org-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { [data-org-grid] { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* ---------- 카드 = 로고 타일 (사용자 2026.11.04) ----------
   카드마다 갈 곳이 사실상 하나다(지점 학원 → 지점 목록 /portal/org/group, 단독 학원 → 학원 사이트 /user/main.
   [강좌목록] /user/course/search 는 같은 사이트의 메뉴 하나). 버튼이 2~3개씩 반복돼 학원보다 버튼이 먼저 보여서
   카드 전체를 누르면 들어가는 타일 하나로 바꿨다. list.js 구조 · 데이터는 그대로, CSS 로만:
   - [둘러보기] 링크의 ::after 를 카드 전체에 덮는다 → 카드 어디를 눌러도 들어간다. [강좌목록]은 숨김.
   - [i] 학원 정보만 카드 위에 따로 남긴다(z-index 2). 긴 설명 · 전화 · 주소는 카드에서 빼고 [i] 미리보기에서.
   - 로고를 크게(학원마다 다른 것은 로고뿐 — 홍보), 글은 이름 + 소개 한 줄, 아래 한 줄로 갈 곳을 구분
     (단독 "학원 사이트 ↗" 밖으로 나감 · 지점 "지점 둘러보기 →" 포털 안 다음 화면).
   - 흰 카드 + 1px 선. 마우스 올림 = 지금 사이트와 같은 보라 선 + 그림자(위로 뜨는 움직임은 뺌).
     DESIGN.md 7-2 "빛 그림자 없음"의 예외(사용자 2026.11.04) — 카드 전체가 링크 하나인 학원 타일에만 쓴다. */
.cl-pt-org { position: relative; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 28px; background: #ffffff; overflow: hidden;
    color: var(--ink); font-family: 'Pretendard Variable','Pretendard', sans-serif; transition: border-color .2s ease, box-shadow .2s ease;
    animation: clOrgIn .7s var(--ease) both; }
/* 한 줄 4장씩 차례로 올라온다(더 보기로 붙은 카드도 같은 순서) */
.cl-pt-org:nth-child(4n+2) { animation-delay: .06s; }
.cl-pt-org:nth-child(4n+3) { animation-delay: .12s; }
.cl-pt-org:nth-child(4n) { animation-delay: .18s; }
.cl-pt-org *, .cl-pt-preview *, .cl-menu-select * { box-sizing: border-box; }

/* 로고 부분: 흰 카드 위 그대로 + 아래 구분선(안쪽 칸 없음). list.js 의 색 차례(cl-pt-tint-0/1/2)는 쓰지 않는다. 미리보기 로고 판은 회백 */
.cl-pt-preview__logo, .cl-pt-tint-0, .cl-pt-tint-1, .cl-pt-tint-2 { background: var(--soft); }
.cl-pt-org .cl-pt-org__logo { height: 152px; border-bottom: 1px solid var(--line); background: transparent; display: grid; place-items: center; overflow: hidden; }
/* 높이는 px 로(그리드 칸 안에서는 % 높이가 안 먹어 세로로 긴 로고가 잘렸다). multiply 는 로고 그림의 흰 바탕을 지우는 용도 */
.cl-pt-org__logo img { display: block; max-width: 64%; max-height: 68px; object-fit: contain; mix-blend-mode: multiply; }
/* 로고가 없거나 못 불러오면 학원 이름 글자 */
.cl-pt-logo-text { padding: 0 28px; font-size: 22px; line-height: 1.35; font-weight: 800; letter-spacing: -0.02em; color: var(--ink-2); text-align: center; word-break: keep-all;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-pt-org .cl-pt-logo-text { padding: 0 24px; font-size: 20px; }
/* 지점 수: 왼쪽 위 연보라 알약 */
.cl-pt-org__badge { position: absolute; left: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--tint); font-size: 12px; font-weight: 700; color: var(--pri-d); white-space: nowrap; }
/* NEW: 새로 함께한 학원(서버 isNew — 등록 30일 이내, 사용자 2026.11.04). 로고 왼쪽 위 연보라 알약 + 대표 보라 글자(사용자), 지점 학원이면 지점 수 뱃지 앞 */
.cl-pt-org__new { position: absolute; left: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--pri); color: #ffffff;
    font-family: 'Outfit', 'Pretendard Variable','Pretendard', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.cl-pt-org__new + .cl-pt-org__badge { left: 74px; }
/* 학원 정보 [i]: 오른쪽 위 회백 동그라미 — 카드 링크 위에 있어 따로 눌린다 */
.cl-pt-org__info { position: absolute; right: 12px; top: 12px; z-index: 2; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 99px; background: var(--soft); color: var(--ink-2); display: grid; place-items: center; cursor: pointer;
    transition: box-shadow .2s ease, color .2s ease, transform .2s var(--ease); }
.cl-pt-org__info:hover { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.cl-pt-org__info:active { transform: scale(.97); }
.cl-pt-org__info:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.cl-pt-org__info svg { display: block; flex: none; }

.cl-pt-org__body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 18px 22px 20px; }
.cl-pt-org__slogan { display: block; margin-bottom: 6px; font-size: 14px; line-height: 1.5; font-weight: 700; color: var(--pri-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-pt-org__name { margin: 0; font-size: 22px; line-height: 1.35; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); word-break: keep-all;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 카드: 이름(2줄까지) → 소개 한 줄(회색) */
.cl-pt-org .cl-pt-org__name { order: 0; font-size: 18px; line-height: 1.4; }
.cl-pt-org .cl-pt-org__slogan { order: 1; margin: 4px 0 0; font-size: 13px; font-weight: 500; color: var(--mut); }
.cl-pt-org__desc, .cl-pt-org__meta, .cl-pt-org__actions .cl-pt-btn--soft { display: none; }

/* 갈 곳 한 줄 — [둘러보기] 링크 하나가 카드 전체를 덮는다 */
.cl-pt-org__actions { order: 2; display: flex; margin-top: auto; padding-top: 16px; }
.cl-pt-org .cl-pt-org__actions .cl-pt-btn--dark { display: inline-flex; align-items: center; gap: 4px; padding: 0; background: none; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--ink-2); text-decoration: none; white-space: nowrap;
    transition: color .2s ease; }
.cl-pt-org__actions .cl-pt-btn--dark::before { content: "→"; order: 1; }
.cl-pt-org__actions .cl-pt-btn--dark::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
/* 단독 학원: "둘러보기" 대신 "학원 사이트 ↗". 개발은 list.js 글자를 "학원 사이트"로 바꾸고 이 두 줄을 지우는 편이 낫다(화면 읽기 프로그램도 같은 글자를 읽게) */
.cl-pt-org__actions .cl-pt-btn--dark:not([href*="/portal/org/group"]) { font-size: 0; }
.cl-pt-org__actions .cl-pt-btn--dark:not([href*="/portal/org/group"])::before { content: "학원 사이트 ↗"; order: 0; font-size: 14px; }

/* 상태(7-2 예외): 올림 = 보라 선 + 그림자(지금 사이트 --pt-shadow-card-hover 와 같은 값, 위로 뜨는 움직임은 뺌) · 아래 글자 진보라
   누름 = 진한 보라 선 + 그림자 작게 · 키보드 = 카드 둘레 보라 테두리 */
/* 카드 위 어디든(오른쪽 위 [i] 위에서도) 카드 올림이 보인다(사용자 2026.11.04) */
.cl-pt-org:hover { border-color: rgba(144, 74, 232, .35); box-shadow: 0 20px 40px rgba(80, 40, 160, .12); }
.cl-pt-org:hover .cl-pt-org__actions .cl-pt-btn--dark { color: var(--pri-d); }
.cl-pt-org--skeleton:hover { border-color: var(--line); box-shadow: none; }
.cl-pt-org:has(.cl-pt-btn--dark:active) { border-color: var(--pri); box-shadow: 0 8px 20px rgba(80, 40, 160, .10); }
.cl-pt-org .cl-pt-org__actions .cl-pt-btn--dark:focus-visible { outline: 0; }
.cl-pt-org:has(.cl-pt-btn--dark:focus-visible) { outline: 2px solid var(--pri); outline-offset: 2px; }

/* 미리보기 안 버튼 (list.js 가 붙이는 이름 그대로) — 리뉴얼 버튼과 같은 모양 */
.cl-pt-preview .cl-pt-btn { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; border: 0; border-radius: 99px;
    font-family: 'Pretendard Variable','Pretendard', sans-serif; font-size: 15px; line-height: 1; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease, color .2s ease, transform .2s var(--ease); }
.cl-pt-preview .cl-pt-btn--dark { background: var(--ink); color: #ffffff; }
.cl-pt-preview .cl-pt-btn--dark:hover { background: var(--pri); color: #ffffff; }
.cl-pt-preview .cl-pt-btn--primary { background: var(--pri); color: #ffffff; }
.cl-pt-preview .cl-pt-btn--primary:hover { background: var(--pri-d); color: #ffffff; }
/* [강좌목록]: 연한 칸 버튼(지금 사이트 미리보기처럼 회백 바탕) → 올리면 바탕 한 단계(7-2) */
.cl-pt-preview .cl-pt-btn--soft { background: var(--soft); color: var(--ink); box-shadow: none; }
.cl-pt-preview .cl-pt-btn--soft:hover { background: var(--gray); }
.cl-pt-preview .cl-pt-btn--lg { height: 52px; font-size: 16px; }
.cl-pt-preview .cl-pt-btn:active { transform: scale(.97); }
.cl-pt-preview .cl-pt-btn:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }

/* 불러오는 중 */
.cl-pt-org--skeleton { min-height: 260px; animation: none; }
.cl-pt-org--skeleton .cl-pt-org__logo { background: var(--track); border-bottom: 0; animation: clOrgPulse 1.4s ease-in-out infinite; }
.cl-pt-org--skeleton .cl-pt-org__body { gap: 10px; }
.cl-pt-org--skeleton .cl-pt-org__body span { display: block; height: 14px; border-radius: 99px; background: var(--track); animation: clOrgPulse 1.4s ease-in-out infinite; }
.cl-pt-org--skeleton .cl-pt-org__body span:nth-child(1) { width: 40%; }
.cl-pt-org--skeleton .cl-pt-org__body span:nth-child(2) { width: 72%; height: 22px; animation-delay: .15s; }
.cl-pt-org--skeleton .cl-pt-org__body span:nth-child(3) { width: 90%; animation-delay: .3s; }

/* ---------- 휴대폰: 목록 줄 [로고] [이름 / 아래 한 줄] [i] — 줄 전체를 누르면 들어간다 ----------
   줄 높이는 모두 88px 로 같게(이름 1줄 + 아래 1줄까지만, 아래 줄이 없으면 이름이 가운데).
   아래 한 줄: 지점 학원 = "지점 N곳"(누르면 지점 목록으로 가니 이것이 더 쓸모 있다) · 단독 학원 = 소개 한 줄 */
@media (max-width: 640px) {
    .cl-pt-org { display: grid; grid-template-columns: 80px minmax(0, 1fr) 40px; grid-template-rows: auto auto; align-content: center; min-height: 88px; padding: 0 14px 0 18px; border-radius: 24px; }
    /* 로고 칸을 풀어 로고 · 지점 수 · [i] 를 줄 칸에 바로 놓는다 */
    .cl-pt-org .cl-pt-org__logo { display: contents; }
    .cl-pt-org__logo img, .cl-pt-org .cl-pt-logo-text { grid-column: 1; grid-row: 1 / -1; justify-self: start; align-self: center; }
    .cl-pt-org__logo img { max-width: 64px; max-height: 36px; }
    .cl-pt-org .cl-pt-logo-text { width: 64px; padding: 0; font-size: 11px; }
    .cl-pt-org__body { display: contents; }
    .cl-pt-org .cl-pt-org__name { grid-column: 2; grid-row: 1; align-self: end; padding-right: 8px; font-size: 16px; -webkit-line-clamp: 1; }
    .cl-pt-org .cl-pt-org__slogan { grid-column: 2; grid-row: 2; align-self: start; margin-top: 3px; padding-right: 8px; }
    .cl-pt-org:has(.cl-pt-org__badge) .cl-pt-org__slogan { display: none; }
    /* NEW: 줄 왼쪽 위 모서리에 작게 */
    .cl-pt-org__new { left: 10px; top: 8px; height: 18px; padding: 0 6px; font-size: 10px; }
    .cl-pt-org__badge { position: static; grid-column: 2; grid-row: 2; justify-self: start; align-self: start; height: 22px; margin-top: 5px; padding: 0 8px; font-size: 11px; }
    /* 아래 줄이 없으면 이름을 줄 가운데에 */
    .cl-pt-org:not(:has(.cl-pt-org__slogan)):not(:has(.cl-pt-org__badge)) .cl-pt-org__name { grid-row: 1 / -1; align-self: center; }
    .cl-pt-org__info { grid-column: 3; grid-row: 1 / -1; justify-self: end; right: auto; top: auto; }
    .cl-pt-org__actions { grid-column: 2; grid-row: 1; height: 0; padding: 0; }
    .cl-pt-org .cl-pt-org__actions .cl-pt-btn--dark { font-size: 0; }
    .cl-pt-org__actions .cl-pt-btn--dark::before, .cl-pt-org__actions .cl-pt-btn--dark:not([href*="/portal/org/group"])::before { content: none; }
    /* 휴대폰(사용자 2026.11.05): 줄을 누르면 바로 들어가지 않고 미리보기(아래 시트)가 열린다 — 들어가는 버튼은 시트 안에.
       [둘러보기] 링크는 줄에서 빼고, [i] 버튼의 ::after 를 줄 전체에 덮는다(list.js 그대로, CSS 만) */
    .cl-pt-org__actions { display: none; }
    .cl-pt-org__info { position: static; }
    .cl-pt-org__info::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
    .cl-pt-org__info svg { position: relative; z-index: 2; }
    .cl-pt-org:has(.cl-pt-org__info:active) { border-color: var(--pri); box-shadow: 0 8px 20px rgba(80, 40, 160, .10); }
    /* 누를 때 [i] 를 작게(scale) 하면 transform 이 덮개(::after)의 기준이 되어 덮개가 버튼 크기로 줄고, 뗀 곳이 버튼 밖이 되어 눌림이 사라진다 → 줄에서는 크기 변화 없이 줄 테두리로만 */
    .cl-pt-org__info:active { transform: none; }
    .cl-pt-org--skeleton { min-height: 88px; }
    .cl-pt-org--skeleton .cl-pt-org__logo { display: block; grid-column: 1; grid-row: 1 / -1; width: 64px; height: 40px; border-radius: 10px; }
    .cl-pt-org--skeleton .cl-pt-org__body { display: flex; grid-column: 2; grid-row: 1 / -1; padding: 0; }
}

/* 불러오기 실패 */
.cl-pt-list__error { grid-column: 1 / -1; margin: 0; padding: 48px 24px; border-radius: 32px; background: var(--err-bg); color: var(--err); font-size: 16px; font-weight: 700; text-align: center; }

/* ---------- 미리보기: 데스크톱 가운데 창 · 휴대폰 아래 시트 ---------- */
.cl-pt-preview { width: min(560px, calc(100vw - 32px)); max-height: min(780px, calc(100vh - 48px)); margin: auto; padding: 0; border: 0; border-radius: 32px; background: #ffffff; color: var(--ink); overflow: auto; overscroll-behavior: contain;
    font-family: 'Pretendard Variable','Pretendard', sans-serif; box-shadow: 0 0 0 1px #ececf0, 0 18px 40px rgba(29, 29, 31, .10); }
.cl-pt-preview[open] { animation: clOrgIn .3s var(--ease) both; }
.cl-pt-preview::backdrop { background: rgba(29, 29, 31, .45); }
.cl-pt-preview__handle { display: none; }
.cl-pt-preview__logo { position: relative; height: 200px; border-bottom: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.cl-pt-preview__logo img { display: block; max-width: 56%; max-height: 112px; object-fit: contain; }
.cl-pt-preview__close { position: absolute; right: 16px; top: 16px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 99px; background: #ffffff; color: var(--ink-2); display: grid; place-items: center; cursor: pointer;
    transition: box-shadow .2s ease, color .2s ease, transform .2s var(--ease); }
.cl-pt-preview__close:hover { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.cl-pt-preview__close:active { transform: scale(.97); }
.cl-pt-preview__close:focus-visible, .cl-pt-preview .cl-pt-btn:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
/* 구성 · 순서는 지금 사이트 미리보기와 같다(사용자 2026.11.04): 소개 한 줄 · 이름 → 키워드 → 학원 소개(5줄까지 …) → 연락처 칸 → 버튼. list.js 순서 그대로 */
.cl-pt-preview__body { display: flex; flex-direction: column; padding: 24px 32px 0; }
.cl-pt-preview__title .cl-pt-org__slogan { white-space: normal; }
.cl-pt-preview__title h2 { margin: 0; font-size: 28px; line-height: 1.3; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); word-break: keep-all; }
.cl-pt-preview__keywords { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.cl-pt-preview__keywords span { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 99px; background: var(--soft); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.cl-pt-preview__desc { margin: 18px 0 0; font-size: 15px; line-height: 1.75; color: var(--ink-2); white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.cl-pt-preview__info { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px 16px; margin: 18px 0 0; padding: 18px 20px; border-radius: 20px; background: var(--soft); }
.cl-pt-preview__info dt { font-size: 14px; line-height: 1.6; color: var(--mut); }
.cl-pt-preview__info dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); font-variant-numeric: tabular-nums; word-break: keep-all; overflow-wrap: anywhere; }
.cl-pt-preview__actions { display: flex; gap: 8px; margin-top: 24px; padding: 0 0 28px; }

@media (max-width: 640px) {
    .cl-pt-preview { width: 100%; max-width: none; max-height: 88vh; margin: auto 0 0; border-radius: 28px 28px 0 0; }
    .cl-pt-preview[open] { animation: clSheetUp .3s var(--ease) both; }
    .cl-pt-preview__handle { display: block; width: 40px; height: 5px; margin: 10px auto 0; border-radius: 99px; background: var(--track); }
    .cl-pt-preview__logo { height: 160px; margin-top: 10px; border-top: 1px solid var(--line); }
    .cl-pt-preview__logo img { max-height: 88px; }
    .cl-pt-preview__body { padding: 20px 20px 0; }
    .cl-pt-preview__actions { padding: 14px 0 20px; }
    .cl-pt-preview__title h2 { font-size: 24px; }
    .cl-pt-preview__actions { flex-direction: column; }
    .cl-pt-preview__actions .cl-pt-btn { flex: none; width: 100%; }
}

/* ---------- 지역 고르기 (list.js 가 select 를 menu-select.js 목록으로 바꾼다) ----------
   학원 목록 화면은 목록 머리 오른쪽에 둔다(org-page.css .ac-region 이 자리 · 선 모양을 덧씌움) */
.cl-pt-region-select { position: relative; flex: none; }
.cl-pt-region-select .cl-menu-select__button { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 14px 0 18px; border: 0; border-radius: 99px; background: var(--soft);
    font-family: 'Pretendard Variable','Pretendard', sans-serif; font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; cursor: pointer;
    transition: background-color .2s ease, transform .2s var(--ease); }
.cl-pt-region-select .cl-menu-select__button:hover { background: var(--gray); }
.cl-pt-region-select .cl-menu-select__button:active { transform: scale(.97); }
.cl-pt-region-select .cl-menu-select__button:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.cl-pt-region-select .cl-menu-select__button[aria-expanded="true"] svg { transform: rotate(180deg); }
.cl-pt-region-select .cl-menu-select__button svg { color: var(--mut); transition: transform .2s var(--ease); }
.cl-pt-region-select .cl-menu-select__list { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; width: 200px; max-height: 320px; margin: 0; padding: 6px; list-style: none; overflow: auto; overscroll-behavior: contain;
    border-radius: 20px; background: #ffffff; box-shadow: 0 0 0 1px #ececf0, 0 18px 40px rgba(29, 29, 31, .10); text-align: left; }
.cl-pt-region-select .cl-menu-select__list[hidden] { display: none; }
.cl-pt-region-select .cl-menu-select__option { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 12px;
    font-size: 15px; color: var(--ink-2); cursor: pointer; transition: background-color .2s ease; }
.cl-pt-region-select .cl-menu-select__option:hover, .cl-pt-region-select .cl-menu-select__option.is-focused { background: var(--soft); }
.cl-pt-region-select .cl-menu-select__option[aria-selected="true"] { font-weight: 700; color: var(--pri-d); }
.cl-pt-region-select .cl-menu-select__option svg { color: var(--pri); }

@media (prefers-reduced-motion: reduce) {
    .cl-pt-org, .cl-pt-preview[open], .cl-pt-org--skeleton *, .cl-pt-org--skeleton .cl-pt-org__logo { animation: none !important; }
    .cl-pt-org *, .cl-pt-preview *, .cl-menu-select * { transition: none !important; }
    .cl-pt-preview .cl-pt-btn:active, .cl-pt-org__info:active { transform: none; }
}