/* ============================================================
   ELAN 엘랑 — 모델 에이전시 인터랙티브 웹사이트 + CMS (제안용 데모)
   도메인 레퍼런스: bnbindustry.com 실측(#111 다크·Albert Sans·24px 700 대문자 카테고리 탭)
                  · 모델 에이전시 사이트 관행(풀블리드 화보·흑백→컬러 호버·모달 북)
   디자인 레퍼런스: im-fine(경량 대형 타이포) · Linear(이징) [기존 실측 재사용]
   ※ 에이전시 ELAN·모델·기사·연락처는 전부 가상. 이미지는 AI 생성(실존 인물 아님).
   ============================================================ */

:root{
  --bg:#0E0E0F; --bg-2:#151517; --panel:#1A1A1D; --line:#26262A; --line-2:#333338;
  --ink:#F2F0EA; --ink-2:#C6C3BA; --mut:#84817A; --mut-2:#55534E;
  --acc:#E33F2B; --acc-wash:rgba(227,63,43,.12);
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI","Malgun Gothic",sans-serif;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shell:1280px;
}

*{box-sizing:border-box}
html{overflow-x:clip; scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; font-family:var(--font); background:var(--bg); color:var(--ink);
  line-height:1.6; letter-spacing:-0.011em; -webkit-font-smoothing:antialiased}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important; scroll-behavior:auto!important} }
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; padding:0}
img{max-width:100%; display:block}
.mono{font-family:var(--mono); font-feature-settings:"tnum" 1; letter-spacing:0}
::selection{background:var(--acc); color:#fff}
.shell{max-width:var(--shell); margin:0 auto; padding:0 28px}

/* 리빌 (스크롤 페이드인) */
.rv{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv[data-d="1"]{transition-delay:.07s} .rv[data-d="2"]{transition-delay:.14s}
.rv[data-d="3"]{transition-delay:.21s} .rv[data-d="4"]{transition-delay:.28s}

/* ============ 내비 ============ */
.nav{position:fixed; top:0; left:0; right:0; z-index:80; mix-blend-mode:difference}
.nav-in{display:flex; align-items:center; justify-content:space-between; padding:22px 28px}
.brand{font-size:22px; font-weight:800; letter-spacing:.34em; color:#fff}
.brand small{font-size:10px; font-weight:500; letter-spacing:.1em; color:rgba(255,255,255,.6); margin-left:8px}
.nav-links{display:flex; gap:26px; font-size:12.5px; font-weight:700; letter-spacing:.14em; color:#fff}
.nav-links a{opacity:.75; transition:opacity .16s; position:relative; padding-bottom:3px}
.nav-links a:hover{opacity:1}
.nav-links a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:#fff; transition:width .24s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-cms{border:1px solid rgba(255,255,255,.4); border-radius:999px; height:32px; padding:0 14px; display:inline-flex; align-items:center; font-size:11px; letter-spacing:.1em; color:#fff; transition:background .16s, color .16s}
.nav-cms:hover{background:#fff; color:#000}
@media(max-width:760px){ .nav-links{display:none} }

/* 페이지 전환 커튼 (동적 라우팅 효과) */
.wipe{position:fixed; inset:0; z-index:200; background:var(--acc); transform:scaleY(0); transform-origin:bottom; pointer-events:none}
.wipe.run{animation:wipeUp .8s var(--ease)}
@keyframes wipeUp{0%{transform:scaleY(0); transform-origin:bottom} 48%{transform:scaleY(1); transform-origin:bottom} 52%{transform:scaleY(1); transform-origin:top} 100%{transform:scaleY(0); transform-origin:top}}

/* ============ 히어로 (풀스크린 배경 영상) ============ */
.hero{position:relative; height:100vh; height:100svh; overflow:hidden; display:flex; align-items:flex-end}
.hero-media{position:absolute; inset:0}
.hero-media video,.hero-media img{width:100%; height:100%; object-fit:cover; filter:grayscale(.15)}
.hero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,14,15,.25), transparent 40%, rgba(14,14,15,.88) 92%)}
.hero-txt{position:relative; z-index:2; width:100%; padding:0 28px 64px; max-width:var(--shell); margin:0 auto}
.hero-k{font-size:12px; font-weight:700; letter-spacing:.3em; color:var(--ink-2); margin-bottom:18px}
.hero-h{font-size:clamp(52px,9.5vw,132px); font-weight:190; letter-spacing:-0.01em; line-height:.98; text-transform:uppercase}
.hero-h b{font-weight:790}
.hero-h .ln{display:block; overflow:hidden}
.hero-h .ln span{display:inline-block; transform:translateY(108%); transition:transform 1s var(--ease)}
.hero-h.in .ln span{transform:none}
.hero-h .ln:nth-child(2) span{transition-delay:.12s}
.hero-sub{margin-top:22px; font-size:15px; color:var(--ink-2); max-width:46ch; line-height:1.65}
.hero-scroll{position:absolute; right:34px; bottom:34px; z-index:2; font-size:10.5px; letter-spacing:.26em; color:var(--mut); writing-mode:vertical-rl; display:flex; align-items:center; gap:10px}
.hero-scroll::after{content:""; width:1px; height:52px; background:linear-gradient(180deg, var(--mut), transparent); animation:scrollPulse 1.8s var(--ease) infinite}
@keyframes scrollPulse{0%{transform:scaleY(.3); transform-origin:top; opacity:.3} 50%{transform:scaleY(1); opacity:1} 100%{transform:scaleY(.3); transform-origin:top; opacity:.3}}

/* ============ 섹션 공통 ============ */
.sec{padding:110px 0}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:44px; flex-wrap:wrap}
.sec-head h2{font-size:clamp(34px,5vw,64px); font-weight:190; letter-spacing:.02em; line-height:1; text-transform:uppercase; margin:0}
.sec-head h2 b{font-weight:780}
.sec-head .cnt{font-family:var(--mono); font-size:13px; color:var(--mut)}

/* ============ 필터 탭 (bnbindustry 문법 이식) ============ */
.filters{display:flex; gap:22px; margin-bottom:34px; flex-wrap:wrap}
.ftab{font-size:17px; font-weight:700; letter-spacing:.06em; color:var(--mut-2); text-transform:uppercase; transition:color .18s; position:relative; padding-bottom:5px}
.ftab:hover{color:var(--ink-2)}
.ftab.on{color:var(--ink)}
.ftab.on::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--acc)}
.ftab .n{font-size:10.5px; vertical-align:super; color:var(--mut); font-family:var(--mono); margin-left:3px}

/* ============ 모델 그리드 (호버 확대·흑백→컬러) ============ */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:900px){ .grid{grid-template-columns:repeat(2,1fr); gap:14px} }
@media(max-width:520px){ .grid{grid-template-columns:1fr} }
.mcard{position:relative; border-radius:4px; overflow:hidden; cursor:pointer; aspect-ratio:3/4; background:var(--panel);
  transition:opacity .5s var(--ease), transform .5s var(--ease)}
.mcard img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); transform:scale(1.001);
  transition:filter .55s var(--ease), transform .55s var(--ease)}
.mcard:hover img{filter:grayscale(0); transform:scale(1.07)}
.mcard::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.72)); opacity:.9; transition:opacity .3s}
.mcard .mc-txt{position:absolute; left:18px; right:18px; bottom:15px; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:8px}
.mcard .mc-name{font-size:20px; font-weight:750; letter-spacing:.04em; text-transform:uppercase}
.mcard .mc-cat{font-size:10px; letter-spacing:.2em; color:var(--ink-2); text-transform:uppercase}
.mcard .mc-num{font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.55)}
.mcard.hide{opacity:0; transform:scale(.96); pointer-events:none; position:absolute; visibility:hidden}
.mcard.wide{grid-column:span 2; aspect-ratio:16/9}
@media(max-width:520px){ .mcard.wide{grid-column:span 1; aspect-ratio:3/4} }

/* ============ 모달 (상세) ============ */
.modal-bg{position:fixed; inset:0; z-index:120; background:rgba(8,8,9,.9); backdrop-filter:blur(10px); display:grid; place-items:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .3s}
.modal-bg.on{opacity:1; pointer-events:auto}
.mmodal{width:100%; max-width:900px; max-height:92vh; overflow:auto; background:var(--bg-2); border:1px solid var(--line); border-radius:8px;
  display:grid; grid-template-columns:1fr 320px; transform:translateY(20px); transition:transform .35s var(--ease)}
.modal-bg.on .mmodal{transform:none}
@media(max-width:760px){ .mmodal{grid-template-columns:1fr} }
.mmodal .mm-img{aspect-ratio:3/4; overflow:hidden; background:#000}
.mmodal .mm-img img{width:100%; height:100%; object-fit:cover}
.mmodal .mm-body{padding:30px 26px; display:flex; flex-direction:column}
.mmodal .mm-name{font-size:34px; font-weight:200; letter-spacing:.04em; text-transform:uppercase; line-height:1}
.mmodal .mm-name b{font-weight:780}
.mmodal .mm-cat{font-size:11px; letter-spacing:.22em; color:var(--acc); text-transform:uppercase; margin-top:10px; font-weight:700}
.mm-specs{margin-top:24px; border-top:1px solid var(--line)}
.mm-specs .row{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); font-size:13px}
.mm-specs .row .k{color:var(--mut)} .mm-specs .row .v{font-family:var(--mono); font-size:12.5px}
.mm-video{margin-top:auto; padding-top:24px}
.mm-video button{display:flex; align-items:center; gap:10px; font-size:13px; font-weight:650; letter-spacing:.06em}
.mm-video .play{width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; transition:all .2s}
.mm-video button:hover .play{background:var(--acc); border-color:var(--acc)}
.mclose{position:absolute; top:26px; right:26px; z-index:130; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:#fff; font-size:19px; display:grid; place-items:center; backdrop-filter:blur(6px)}
.mclose:hover{background:var(--acc); border-color:var(--acc)}

/* ============ 캠페인 (풀블리드 영상 + 모션) ============ */
.campaign{position:relative; width:100vw; margin-left:calc(50% - 50vw); height:72vh; min-height:420px; overflow:hidden}
.campaign video, .campaign img{width:100%; height:118%; object-fit:cover; position:absolute; top:-9%; left:0; will-change:transform}
.campaign::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,14,15,.5), transparent 35%, rgba(14,14,15,.62))}
/* 마퀴 — 영상 위를 흐르는 대형 타이포 */
.cp-marquee{position:absolute; top:38px; left:0; right:0; z-index:2; overflow:hidden; pointer-events:none; mix-blend-mode:overlay}
.cp-track{display:flex; white-space:nowrap; will-change:transform; animation:cpMarquee 26s linear infinite}
.cp-track span{font-size:clamp(44px,7vw,88px); font-weight:190; letter-spacing:.06em; color:rgba(255,255,255,.5); text-transform:uppercase; flex:none}
@keyframes cpMarquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .cp-track{animation:none} }
.campaign .cp-txt{position:absolute; left:0; right:0; bottom:52px; z-index:2}
.campaign .cp-txt .shell{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap}
.campaign h3{font-size:clamp(30px,4.6vw,58px); font-weight:190; text-transform:uppercase; letter-spacing:.02em; line-height:1.02; margin:0}
.campaign h3 b{font-weight:780}
.campaign p{font-size:13.5px; color:var(--ink-2); max-width:40ch}

/* ============ 필름 (실제 영상 파트) ============ */
.films{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:860px){ .films{grid-template-columns:1fr} }
.fcard{position:relative; aspect-ratio:16/10; border-radius:6px; overflow:hidden; cursor:pointer; background:var(--panel)}
.fcard video{width:100%; height:100%; object-fit:cover; filter:grayscale(.25); transition:filter .4s var(--ease), transform .6s var(--ease)}
.fcard:hover video{filter:grayscale(0); transform:scale(1.04)}
.fcard::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.75))}
.fcard .fc-txt{position:absolute; left:16px; right:52px; bottom:13px; z-index:2; display:flex; flex-direction:column; gap:2px}
.fcard .fc-k{font-size:10px; letter-spacing:.2em; color:var(--acc); font-weight:700; text-transform:uppercase}
.fcard .fc-t{font-size:17px; font-weight:720; letter-spacing:-0.01em}
.fcard .fc-play{position:absolute; right:14px; bottom:12px; z-index:2; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.4); display:grid; place-items:center; font-size:11px; color:#fff; background:rgba(0,0,0,.3); backdrop-filter:blur(4px); transition:all .2s}
.fcard:hover .fc-play{background:var(--acc); border-color:var(--acc)}
/* 비디오 모달 */
.vmodal-bg{position:fixed; inset:0; z-index:150; background:rgba(5,5,6,.94); display:grid; place-items:center; padding:26px; opacity:0; pointer-events:none; transition:opacity .3s}
.vmodal-bg.on{opacity:1; pointer-events:auto}
.vmodal-bg video{max-width:min(1100px,94vw); max-height:82vh; border-radius:8px; box-shadow:0 40px 120px -30px rgba(0,0,0,.9)}
.vmodal-cap{position:absolute; bottom:30px; left:0; right:0; text-align:center; font-size:12px; letter-spacing:.16em; color:var(--mut); text-transform:uppercase}

/* ============ 뉴스 (CMS 연동) ============ */
.news-list{border-top:1px solid var(--line)}
.nrow{display:grid; grid-template-columns:110px 1fr auto; gap:24px; align-items:baseline; padding:26px 6px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .18s, padding-left .25s var(--ease)}
.nrow:hover{background:var(--bg-2); padding-left:18px}
.nrow .nd{font-family:var(--mono); font-size:12px; color:var(--mut)}
.nrow .nt{font-size:clamp(17px,2.2vw,24px); font-weight:640; letter-spacing:-0.015em; line-height:1.35}
.nrow .nc{font-size:10.5px; letter-spacing:.18em; color:var(--acc); font-weight:700; text-transform:uppercase; white-space:nowrap}
.nrow:hover .nt{color:#fff}
@media(max-width:640px){ .nrow{grid-template-columns:1fr; gap:6px} }
.news-empty{padding:40px 0; color:var(--mut); font-size:14px; text-align:center}

/* ============ 어바웃 스트립 ============ */
.about-strip{background:var(--ink); color:var(--bg); padding:96px 0}
.about-strip .big{font-size:clamp(26px,3.6vw,46px); font-weight:300; letter-spacing:-0.02em; line-height:1.3; max-width:26ch}
.about-strip .big b{font-weight:760}
.about-stats{display:flex; gap:60px; margin-top:44px; flex-wrap:wrap}
.astat .v{font-size:44px; font-weight:200; letter-spacing:-0.02em; font-variant-numeric:tabular-nums}
.astat .v em{font-style:normal; color:var(--acc)}
.astat .k{font-size:12px; color:#6b6962; margin-top:4px; letter-spacing:.06em}

/* ============ 푸터 ============ */
.foot{padding:80px 0 46px}
.foot .f-big{font-size:clamp(40px,7vw,96px); font-weight:190; text-transform:uppercase; letter-spacing:.02em; line-height:1; margin-bottom:40px}
.foot .f-big b{font-weight:780}
.foot .f-big a{position:relative; display:inline-block}
.foot .f-big a::after{content:""; position:absolute; left:0; bottom:8px; width:100%; height:2px; background:var(--acc); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
.foot .f-big a:hover::after{transform:scaleX(1)}
.foot-meta{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--mut); font-size:12.5px; border-top:1px solid var(--line); padding-top:26px}

/* ============ CMS (admin.html) ============ */
.cms{min-height:100vh; display:flex; flex-direction:column}
.cms-top{display:flex; align-items:center; justify-content:space-between; height:58px; padding:0 20px; border-bottom:1px solid var(--line); background:var(--bg-2); position:sticky; top:0; z-index:50}
.cms-top .tt{font-weight:750; letter-spacing:.2em; font-size:14px}
.cms-top .tt small{color:var(--mut); letter-spacing:.04em; margin-left:8px; font-weight:500}
.cms-wrap{display:grid; grid-template-columns:220px 1fr; flex:1}
@media(max-width:860px){ .cms-wrap{grid-template-columns:1fr} }
.cms-side{border-right:1px solid var(--line); padding:18px 12px; display:flex; flex-direction:column; gap:4px; background:var(--bg-2)}
@media(max-width:860px){ .cms-side{flex-direction:row; overflow-x:auto; border-right:none; border-bottom:1px solid var(--line)} }
.cms-nav{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; font-size:13.5px; font-weight:560; color:var(--ink-2); white-space:nowrap; transition:background .14s}
.cms-nav:hover{background:var(--panel)}
.cms-nav.on{background:var(--ink); color:var(--bg); font-weight:700}
.cms-main{padding:26px; overflow:auto}
@media(max-width:560px){ .cms-main{padding:16px} }

.panel{background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:22px; margin-bottom:18px}
.panel-h{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.panel-h h3{font-size:16px; margin:0; letter-spacing:-0.01em}
.panel-h .sub{font-size:12px; color:var(--mut)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 18px; border-radius:10px; font-size:14px; font-weight:650; transition:all .15s var(--ease); white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-pri{background:var(--ink); color:var(--bg)} .btn-pri:hover{background:#fff}
.btn-acc{background:var(--acc); color:#fff} .btn-acc:hover{filter:brightness(1.12)}
.btn-gho{border:1px solid var(--line-2); color:var(--ink)} .btn-gho:hover{border-color:var(--ink)}
.btn-sm{height:34px; padding:0 13px; font-size:12.5px; border-radius:8px}
.btn-danger{color:#FF6B57; border:1px solid rgba(227,63,43,.4)} .btn-danger:hover{background:var(--acc-wash)}

.input, textarea.input, select.input{width:100%; background:var(--panel); border:1px solid var(--line-2); border-radius:9px; color:var(--ink); padding:11px 13px; font-size:14px; font-family:inherit; outline:none; transition:border-color .15s}
.input:focus{border-color:var(--ink)}
textarea.input{min-height:130px; resize:vertical; line-height:1.6}
.field{margin-bottom:14px}
.field label{display:block; font-size:11.5px; color:var(--mut); font-weight:650; margin-bottom:6px; letter-spacing:.04em}

.cms-row{display:flex; align-items:center; gap:14px; padding:14px 4px; border-bottom:1px solid var(--line)}
.cms-row:last-child{border-bottom:none}
.cms-row .cr-t{font-weight:640; font-size:14.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cms-row .cr-d{font-family:var(--mono); font-size:11.5px; color:var(--mut); flex:none}
.cms-row .cr-cat{font-size:10px; letter-spacing:.14em; color:var(--acc); font-weight:700; text-transform:uppercase; flex:none}
.cms-row.off .cr-t{color:var(--mut-2); text-decoration:line-through}

.toggle{width:44px; height:25px; border-radius:999px; background:var(--line-2); position:relative; transition:background .18s; flex:none; cursor:pointer}
.toggle::after{content:""; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; transition:transform .18s var(--ease)}
.toggle.on{background:var(--acc)}
.toggle.on::after{transform:translateX(19px)}

.upload-zone{border:1.5px dashed var(--line-2); border-radius:12px; padding:30px 20px; text-align:center; color:var(--mut); font-size:13.5px; transition:border-color .2s, background .2s; cursor:pointer}
.upload-zone:hover{border-color:var(--ink); background:var(--panel)}
.upload-zone.err{border-color:var(--acc); background:var(--acc-wash); color:#FF8A78}
.upload-zone b{color:var(--ink-2)}
.cap-bar{height:6px; border-radius:6px; background:var(--panel); overflow:hidden; margin-top:12px}
.cap-bar i{display:block; height:100%; background:var(--ink-2); width:0; transition:width .6s var(--ease)}
.cap-bar i.over{background:var(--acc)}

.notice{background:var(--panel); border:1px solid var(--line-2); border-radius:10px; padding:12px 14px; font-size:13px; color:var(--ink-2); line-height:1.6}
.notice.warn{border-color:rgba(227,63,43,.45); background:var(--acc-wash); color:#FFB3A6}
.notice.ok{border-color:rgba(80,180,120,.4); background:rgba(80,180,120,.1); color:#8FD8AE}

.toast-wrap{position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:300; display:flex; flex-direction:column; gap:8px; align-items:center}
.toast{background:var(--ink); color:var(--bg); padding:11px 19px; border-radius:999px; font-size:13.5px; font-weight:650; box-shadow:0 16px 44px -14px rgba(0,0,0,.8); animation:toastIn .3s var(--ease)}
.toast.acc{background:var(--acc); color:#fff}
@keyframes toastIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

.tag{display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:6px; font-size:11px; font-weight:700}
.tag.on{background:rgba(80,180,120,.14); color:#7ED0A0} .tag.off{background:var(--panel); color:var(--mut)}
.disclaimer{font-size:11px; color:var(--mut-2); text-align:center; padding:18px}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px}
@media(max-width:640px){ .kpis{grid-template-columns:1fr} }
.kpi{background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:16px 18px}
.kpi .v{font-size:26px; font-weight:760; font-variant-numeric:tabular-nums}
.kpi .k{font-size:11.5px; color:var(--mut); margin-top:3px}