/* 2단계 — 소개·링크 / 팬페이지 / 굿즈·이벤트 / 특별한 날 테마 / 대표 영상·대문(주변광 — 유튜브·치지직·SOOP·직접 올린 영상·그림·GIF·팬아트, 여러 개면 돌아가며)
   원본 토큰(--ink·--purple·--soft·--line·#faf9fd·#736985)만 쓴다. 눈에 띄는 건 대표 영상 주변광 하나. */
:root{--ex-tint:129 43 187}

/* ── 공통 ── */
.ex-card{background:white;border:1px solid var(--line);border-radius:22px;padding:clamp(20px,3vw,30px)}
.ex-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:0 0 16px}
.ex-section-title h2{font-size:21px;margin:0}
.ex-body-text{margin:0;font-family:"Malgun Gothic",sans-serif;line-height:1.8;color:#463c56;white-space:pre-wrap;overflow-wrap:anywhere}
.ex-muted{margin:2px 0 0;color:#736985;font-size:14px}
.ex-status:empty{display:none}.ex-status{color:#a1234d;font-size:14px;margin:0 0 12px}
.ex-empty{color:#736985;text-align:center;padding:48px 16px}
.ex-empty-box{text-align:center;padding:52px 20px;background:white;border:1px dashed #d9cdea;border-radius:22px;color:#736985}
.ex-empty-box strong{display:block;font-size:20px;color:#665078;margin:8px 0}
.ex-empty-box p{margin:0}.ex-empty-box button{margin-top:16px}
.ex-empty-star{font-size:30px;color:#b397d6}
.ex-fail{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.ex-fail p{margin:0;color:#736985}

/* ── 대표 영상 무대 + 주변광 (이 사이트의 시그니처) ── */
#home-featured{margin:14px 0 0}
/* 번지는 주변광이 배너·PC 오른쪽 칸 카드 위에 얹히지 않게 (모양은 그대로, 쌓이는 순서만) */
#home .banner{z-index:1}
.home-rail{position:relative;z-index:1}
.ex-stage{position:relative;isolation:isolate;padding:clamp(18px,3.4vw,44px) clamp(0px,calc((100% - 640px) * .2),64px) clamp(12px,2vw,24px)}
/* 구역 바탕: 영상에서 뽑은 색이 가장자리로 갈수록 페이지 바탕에 녹아든다 */
.ex-haze{position:absolute;inset:0;z-index:-2;pointer-events:none;background-color:rgb(var(--ex-tint) / .26);-webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent);mask-image:radial-gradient(closest-side,#000 30%,transparent);transition:background-color 1.2s ease}
.ex-frame{position:relative;max-width:860px;margin:0 auto;aspect-ratio:16/9}
/* 영상 뒤로 번지는 빛: 같은 그림(장면)을 크게 흐려 깐다 */
.ex-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;filter:blur(clamp(28px,5vw,72px)) saturate(2) brightness(1.7) contrast(.6)}
.ex-glow img,.ex-glow canvas{display:block;width:100%;height:100%;object-fit:cover}
.ex-screen{position:relative;width:100%;height:100%;border-radius:20px;overflow:hidden;background:#1d1830;box-shadow:0 0 70px -8px rgb(var(--ex-tint) / .45),0 22px 50px -26px rgb(var(--ex-tint) / .9)}
.ex-screen iframe,.ex-screen video{display:block;width:100%;height:100%;border:0;background:#000}
.ex-poster{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:#1d1830}
.ex-poster img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.ex-poster:hover img{transform:scale(1.015)}
/* 재생 버튼 포커스 — 화면(.ex-screen)이 모서리를 잘라 내므로 테두리는 화면 바깥에 */
.ex-poster:focus-visible{outline:none}
.ex-screen:has(.ex-poster:focus-visible){outline:3px solid var(--purple);outline-offset:3px}
.ex-play{position:absolute;left:50%;top:50%;width:clamp(56px,7vw,76px);height:clamp(56px,7vw,76px);transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:#ffffffeb;color:var(--purple);box-shadow:0 10px 30px -8px #1d103a99;transition:transform .18s}
.ex-play svg{margin-left:4px}
.ex-poster:hover .ex-play,.ex-poster:focus-visible .ex-play{transform:translate(-50%,-50%) scale(1.07)}
.ex-feature-meta{box-sizing:content-box;max-width:860px;margin:6px auto 0;padding-inline:clamp(0px,calc((100% - 640px) * .2),64px);display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px 24px}
.ex-feature-cap{min-width:0;flex:1 1 300px}
.ex-feature-title{margin:2px 0 4px;font-size:clamp(17px,1.7vw,20px);line-height:1.45;overflow-wrap:anywhere}
/* 어느 플랫폼 영상인지(예: 치지직 다시보기) + 그 플랫폼에서 보기 */
.ex-feature-src{margin:0;font-size:14px;color:#736985}
.ex-feature-src>span:first-child{color:var(--purple);font-weight:700}
.ex-src-link{display:inline-block;padding:11px 0;color:#736985}
.ex-src-link:hover{color:var(--purple);text-decoration:underline}
/* 다른 사이트 안에서 재생할 수 없는 영상(치지직 다시보기) — 누르면 새 창이라는 걸 썸네일 위에 */
.ex-poster-note{position:absolute;left:50%;bottom:clamp(10px,5%,22px);transform:translateX(-50%);max-width:calc(100% - 24px);padding:6px 14px;border-radius:999px;background:#ffffffeb;color:var(--ink);font-size:14px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 10px 24px -14px #1d103a99}
/* 대문(그림·GIF·게시판 팬아트) — 자르지 않고 틀 안에 맞추고, 같은 그림을 흐리게 깔아 빈 곳을 채움. GIF 멈춤 때는 같은 클래스의 canvas로 바뀜 */
.ex-pic{position:relative;width:100%;height:100%;overflow:hidden}
.ex-pic-back{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;filter:blur(26px) saturate(1.15) brightness(.82)}
.ex-pic-main{position:relative;display:block;width:100%;height:100%;object-fit:contain}
.ex-screen video.ex-loop{background:#1d1830}
/* 움직이는 것(GIF·자동 반복 영상)의 멈춤/재생 — 화면 오른쪽 아래 작은 흰 동그라미 */
.ex-motion{position:absolute;right:12px;bottom:12px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#ffffffe6;color:var(--ink);box-shadow:0 8px 20px -10px #1d103a99}
.ex-motion:hover{background:white;color:var(--purple)}
.ex-motion:focus-visible{outline:3px solid white;outline-offset:2px;box-shadow:0 0 0 7px var(--purple)}
/* 여러 항목 — 같은 칸에 겹쳐 두고 보이는 것만 또렷하게(높이는 가장 큰 항목 기준이라 넘겨도 흔들리지 않음) */
.ex-slides,.ex-caps{display:grid}
.ex-slide,.ex-caps>.ex-feature-cap{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.ex-slide.is-on,.ex-caps>.ex-feature-cap.is-on{opacity:1;visibility:visible;transition:opacity .5s ease}
.ex-caps{flex:1 1 300px;min-width:0}
.ex-credit{overflow-wrap:anywhere}
/* 돌아가며 보이기 — 이전·점·다음·자동 넘김 멈추기 (누르는 곳 44px) */
.ex-rotator{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px}
.ex-rot-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:white;color:var(--purple)}
.ex-rot-btn:hover,.ex-rot-toggle:hover{border-color:#aa83de}
.ex-dots{display:flex;align-items:center}
.ex-dot{display:grid;place-items:center;width:28px;height:44px;padding:0;border:0;background:transparent}
.ex-dot span{display:block;width:8px;height:8px;border-radius:999px;background:#d9cdea;transition:width .3s,background-color .3s}
.ex-dot:hover span{background:#aa83de}
.ex-dot[aria-current=true] span{width:22px;background:var(--purple)}
.ex-rot-toggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-left:4px;padding:0 15px 0 11px;border:1px solid var(--line);border-radius:999px;background:white;color:var(--ink);font-size:14px;line-height:1.3}
.ex-rot-ico{display:grid;color:var(--purple)}
/* 휴대폰 — 자동 넘김 버튼은 아이콘만(이름은 화면 읽기 프로그램에 그대로) */
@media(max-width:640px){
.ex-rot-toggle{width:44px;justify-content:center;padding:0}
.ex-rot-text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ex-rotator.is-many .ex-dots{order:-1;flex-basis:100%}
}

/* 링크 아이콘 — 유튜브·치지직은 공식 아이콘 파일 그대로(늘이기·테두리·그림자 없음) */
.ex-ico{display:inline-grid;place-items:center;width:26px;height:24px;flex-shrink:0;color:var(--purple)}
.ex-ico img{display:block;height:20px;width:auto}
.ex-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ex-ico-letter{font:700 17px/1 "Malgun Gothic",sans-serif;color:var(--ink)}

/* ── 홈: 진행 중인 굿즈·이벤트 ── */
/* 오른쪽 칸 상자 겉모양은 반응형 화면의 .home-box — 여기선 안쪽만 */
#home-ongoing,#home-links{min-width:0}
#home-links .ex-link-list,.ex-about-right .ex-link-list{grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))}
.ex-ongoing-list{list-style:none;width:0;min-width:calc(100% + 12px);margin:0 -6px;padding:4px 6px 8px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;overscroll-behavior-x:contain}
.ex-ongoing-list>li{flex:0 0 min(240px,76%);scroll-snap-align:start}
.ex-ongoing-item{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;height:100%;padding:10px 10px 14px;border:1px solid transparent;border-radius:16px;background:#f7f3fd;color:var(--ink);text-align:left;font-family:inherit;line-height:1.45;transition:border-color .18s,transform .18s}
.ex-ongoing-item:hover{border-color:#aa83de;transform:translateY(-2px)}
.ex-thumb{width:100%;height:auto;aspect-ratio:4/3;border-radius:12px;object-fit:cover;flex-shrink:0;background:white}
.ex-thumb-mark{display:grid;place-items:center;color:var(--purple);font-size:26px}
.ex-ongoing-text{padding:0 4px}
@media(min-width:1200px){
.home-rail .ex-ongoing-list{display:grid;gap:8px;min-width:100%;margin:0;padding:0;overflow:visible}
.home-rail .ex-ongoing-item{flex-direction:row;align-items:center;gap:12px;padding:10px}
.home-rail .ex-thumb{width:52px;height:52px;aspect-ratio:auto;border-radius:10px}
.home-rail .ex-ongoing-text{padding:0}
}
.ex-ongoing-text{display:flex;flex-direction:column;min-width:0}
.ex-ongoing-text strong{font-weight:600;overflow-wrap:anywhere}
.ex-kind{font-size:12px;color:var(--purple);letter-spacing:1px}
.ex-period{font-size:13px;color:#736985}

/* ── 소개·링크 ── */
.ex-about-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
.ex-about-left{position:relative;z-index:1}
.ex-about-right{display:grid;gap:30px;min-width:0}
@media(min-width:1200px){.ex-about-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px}.ex-about-grid.is-single{grid-template-columns:minmax(0,1fr)}.ex-about-right .ex-link-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ex-headline{margin:0 0 14px;font-size:clamp(22px,2.4vw,28px);line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.ex-link-card .ex-section-title h2{font-size:19px}
.ex-link-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ex-link-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:white;transition:border-color .18s,background-color .18s}
.ex-link-row:hover{border-color:#aa83de;background:#fbf9fe}
.ex-link-text{display:flex;flex-direction:column;min-width:0;line-height:1.4}
.ex-link-text strong{font-weight:600}
.ex-link-host{font-size:13px;color:#736985;overflow-wrap:anywhere;font-family:"Malgun Gothic",sans-serif}
.ex-go{margin-left:auto;color:var(--purple);font-size:18px}
.ex-about-feature{margin:0}
.ex-about-feature .ex-section-title{margin-bottom:0}

/* ── 팬페이지 ── */
.ex-fan-hero{display:grid;grid-template-columns:minmax(150px,260px) minmax(0,1fr);gap:clamp(18px,4vw,44px);align-items:center;background:#f2edfa;border-radius:24px;padding:clamp(22px,4vw,40px)}
.ex-fan-hero.no-image{grid-template-columns:1fr}
.ex-fan-figure{background:white;border-radius:20px;padding:14px}
.ex-fan-figure img{display:block;width:100%;max-height:260px;object-fit:contain;margin:auto}
.ex-fan-label{margin:0;font-size:13px;letter-spacing:2px;color:var(--purple);font-weight:700}
.ex-fan-name{margin:2px 0 14px;font-size:clamp(36px,5vw,52px);line-height:1.2;letter-spacing:2px;color:#654498}
.ex-gallery-section{margin-top:40px}
.ex-gallery{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:641px){.ex-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
@media(min-width:1200px){.ex-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1600px){.ex-gallery{grid-template-columns:repeat(5,minmax(0,1fr))}}
.ex-art{position:relative;display:block;width:100%;aspect-ratio:1;padding:0;border:0;border-radius:16px;overflow:hidden;background:#ece6f6}
.ex-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.ex-art:hover img{transform:scale(1.04)}
.ex-art:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.ex-art-cap{position:absolute;inset:auto 0 0;padding:22px 12px 9px;background:linear-gradient(transparent,#1d1430a6);color:white;font-size:13px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-more-art{display:block;margin:22px auto 0}
@media(max-width:640px){.ex-fan-hero{grid-template-columns:1fr;text-align:center}.ex-fan-figure img{max-height:190px}}

/* ── 굿즈·이벤트 ── */
.view-switch.ex-tabs{width:max-content;max-width:100%;margin:0 0 22px}
.ex-items{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@media(min-width:641px){.ex-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media(min-width:1200px){.ex-items{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ex-item{display:flex;flex-direction:column;background:white;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.ex-item-media{aspect-ratio:4/3;background:#f2edfa}
.ex-item-media img{display:block;width:100%;height:100%;object-fit:contain}
.ex-item-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:20px 22px 22px}
.ex-item h3{margin:0;font-size:20px;line-height:1.4;overflow-wrap:anywhere}
.ex-item-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:#736985}
.ex-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.5px}
.ex-badge.ongoing{background:var(--purple);color:white}
.ex-badge.upcoming{background:var(--soft);color:var(--purple);box-shadow:inset 0 0 0 1px #d9c9f2}
.ex-badge.ended{background:#efedf2;color:#5d546c}
.ex-item-desc{font-size:15px;line-height:1.7}
.ex-item-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:6px}
.ex-item-link{display:inline-block}
.ex-item.is-ended{background:#fcfbfd}
.ex-item.is-ended .ex-item-media img{filter:grayscale(.6);opacity:.75}
.ex-item.is-ended h3{color:#5d546c}

/* ── 공개 페이지 창(팬아트 크게 보기·로그인 안내) — 원본 dialog.editor 모양 위에 필요한 것만. 관리자 편집 창 모양은 admin.css ── */
dialog.editor.ex-dialog{height:fit-content}
@media(min-width:641px){dialog.editor.ex-lightbox{width:min(980px,calc(100vw - 32px))}}
.ex-dialog .form-actions{flex-wrap:wrap}
.ex-lightbox img{display:block;max-width:100%;max-height:68dvh;margin:0 auto 14px;border-radius:12px;object-fit:contain}
.ex-lightbox h2{margin:0 0 4px;overflow-wrap:anywhere}

/* ── 특별한 날 테마 (data-theme이 있을 때만 원본 위에 덮음) ── */
:root[data-theme]{--purple:var(--ex-accent-text);--soft:var(--ex-soft)}
:root[data-theme] body{background:var(--ex-page-bg)}
:root[data-theme] .banner{background:radial-gradient(ellipse at 85% 20%,var(--ex-banner-glow) 0,transparent 55%),linear-gradient(125deg,var(--ex-banner-from),var(--ex-banner-to))}
:root[data-theme][data-theme-banner=light] .banner{color:var(--ink)}
:root[data-theme][data-theme-banner=light] .banner .eyebrow{color:#4f3f6b}
:root[data-theme][data-theme-banner=light] .banner p{color:#3d3352}
:root[data-theme][data-theme-banner=light] .stars{color:#ffffffd9}
.ex-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;background:center/cover no-repeat;opacity:.4}
.ex-fx{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.ex-preview-bar{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:45;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 12px;width:max-content;max-width:calc(100vw - 32px);padding:10px 12px 10px 18px;border-radius:16px;background:#29223ef2;color:white;font-size:14px;line-height:1.5;box-shadow:0 12px 30px -10px #1d103a99}
.ex-preview-bar button{border:0;border-radius:10px;padding:8px 14px;background:white;color:#29223e;font-size:14px}
.ex-preview-bar button:focus-visible{outline-color:white} /* 어두운 띠 위 — 보라 테두리는 안 보여서 */

/* ── 방송 중 표시 (배너 안 #live-badge) — 어떤 테마 배너(밝거나 어두워도) 위에서 읽히게 흰 알약 ── */
#live-badge{position:relative;z-index:1;margin-top:16px} /* 배너의 큰 별(.stars) 위에 */
.ex-live{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 8px;max-width:100%;min-height:38px;padding:6px 16px 6px 13px;border-radius:999px;background:white;color:var(--ink);font-size:14px;line-height:1.45;box-shadow:0 10px 24px -14px #1d103a99}
.ex-live:hover .ex-live-go{text-decoration:underline}
.ex-live:focus-visible{outline:3px solid white;outline-offset:3px;box-shadow:0 0 0 6px var(--purple)}
.ex-live-dot{width:9px;height:9px;flex-shrink:0;border-radius:50%;background:#a1234d;animation:ex-live-blink 1.8s ease-in-out infinite}
.ex-live-on{font-weight:700;white-space:nowrap}
.ex-live-title{min-width:0;max-width:26em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex-live-title::before,.ex-live-go::before{content:"·";margin-right:8px;color:#736985;font-weight:400}
.ex-live-go{display:inline-flex;align-items:center;gap:5px;color:var(--purple);font-weight:700;white-space:nowrap}
.ex-live-go img{display:block;width:18px;height:18px}
@keyframes ex-live-blink{50%{opacity:.3}}
@media(max-width:1199px){.ex-live{min-height:44px}}
/* 휴대폰 — 제목은 아랫줄로(길어도 끝이 잘려 보이게) */
@media(max-width:640px){.ex-live{border-radius:18px;padding:8px 14px 8px 12px}.ex-live-title{order:3;flex:1 0 100%;max-width:100%;padding-left:17px}.ex-live-title::before{content:none}}

/* ── 다음 방송·기념일 카운트다운 (#home-countdown, 배너 바로 아래) — 원본 '이번 주' 표시 같은 작은 칩 줄 ── */
#home-countdown{margin-top:16px}
.ex-countdown{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ex-chip{display:inline-flex;align-items:baseline;gap:8px;padding:8px 14px;border-radius:10px;background:#eee5fa;color:#654498;font-size:15px;line-height:1.45}
.ex-chip-label{font-size:13px}
.ex-chip strong{font-weight:700;overflow-wrap:anywhere}
.ex-chip.is-today{background:var(--purple);color:white}
@media(max-width:640px){
.ex-countdown{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;margin:0 -16px;padding:2px 16px}
.ex-countdown::-webkit-scrollbar{display:none}
.ex-chip{flex-shrink:0;white-space:nowrap}
}

@media(max-width:640px){.ex-period,.ex-link-host,.ex-muted{font-size:14px}}
@media(prefers-reduced-motion:reduce){.ex-haze,.ex-poster img,.ex-art img,.ex-slide,.ex-caps>.ex-feature-cap,.ex-dot span{transition:none}.ex-poster:hover img,.ex-art:hover img{transform:none}.ex-live-dot{animation:none}}