:root {
  --black: #000; --white: #fff; --bg: #f5f5f5;
  --gray-200: #e5e5e5; --gray-400: #999; --gray-500: #777; --gray-600: #555;
  --text: #111; --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;
  /* Layout spacing guide */
  --pad-x: 48px;          /* default side padding */
  --pad-x-safe: var(--pad-x); /* safe-area-aware side padding */

  /* ======== SPACING SCALE ========
     Hierarchical scale used throughout the site so visual rhythm stays
     consistent across every section. Values double in influence at each
     level: card → row → block → section. */
  --space-card:    8px;   /* gap between cards in a row */
  --space-row:    24px;   /* gap between rows in the same section */
  --space-block:  48px;   /* gap between content blocks within a section */
  --space-section: 96px;  /* gap above + below every top-level section */
  --pad-section:  var(--space-section); /* legacy alias kept for compat */

  /* ======== CARD HOVER TOKENS ========
     Shared transition timing for every list card (editorial, article,
     fashion, film, shorts, creator). Card div never transforms — only
     the inner image scales inside its overflow:hidden mask, so hover
     never causes layout shift or overflow clipping. */
  --card-hover-scale: 1.05;
  --card-hover-duration: .5s;
  --card-hover-easing: cubic-bezier(.4, 0, .2, 1);
}
/* Hide search overlay from document flow */
.search-overlay{display:none}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit}

/* LOADER */
.loader{position:fixed;inset:0;background:var(--black);z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .6s,visibility .6s;overflow:hidden}
.loader.hidden{opacity:0;;pointer-events:none}
.loader-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .8s ease}
.loader-bg.loaded{opacity:1}
.loader-bg::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.45)}
.loader-logo{position:relative;z-index:2}
.loader-logo img{height:clamp(40px,8vw,67px);width:auto}

/* HEADER */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(0,0,0,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:0 40px;display:flex;align-items:center;justify-content:space-between;height:72px;cursor:default!important}
.header-left{display:flex;align-items:center;gap:24px}
.header-left-item{background:none;border:none;padding:4px;display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);text-decoration:none;transition:color .2s}
.header-left-item:hover{color:#fff}
.header-left-item svg{width:20px;height:20px}
.hamburger{background:none;border:none;display:flex;align-items:center;justify-content:center;padding:12px;cursor:pointer;position:relative;z-index:2000;width:48px;height:48px}
.hamburger span{display:block;width:24px;height:2px;background:#fff;border-radius:1px;position:absolute;transform-origin:center center;transition:transform .4s cubic-bezier(.23,1,.32,1),opacity .25s ease,background .4s ease}
.hamburger span:nth-child(1){transform:translateY(-8px)}
.hamburger span:nth-child(2){transform:translateY(0)}
.hamburger span:nth-child(3){transform:translateY(8px)}
.hamburger.is-active span{background:#000}
.hamburger.is-active span:nth-child(1){transform:translateY(0) rotate(45deg)}
.hamburger.is-active span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.is-active span:nth-child(3){transform:translateY(0) rotate(-45deg)}
.logo-wrap{position:absolute;left:50%;transform:translateX(-50%)}
.logo-wrap img{height:32px;width:auto}

/* FLOATING CURSOR LOGO */
.floating-logo{position:fixed;z-index:1100;pointer-events:none;transition:none;will-change:transform,left,top}
.floating-logo a{pointer-events:auto;display:block;cursor:pointer}
.floating-logo img{height:32px;width:auto}
.floating-logo.in-header{transition:left .4s cubic-bezier(.25,.46,.45,.94),top .4s cubic-bezier(.25,.46,.45,.94),transform .4s cubic-bezier(.25,.46,.45,.94)}
.floating-logo.on-cursor{cursor:none}
.floating-logo.on-cursor a{pointer-events:none}
.floating-logo.on-cursor img{height:96px}

/* BOUNCE SCORE (below header logo, appears then fades) */
#symbolScoreWrap{position:absolute;bottom:48px;right:48px;z-index:2;width:clamp(40px,5.3vw,67px);height:auto;pointer-events:none}
#symbolScoreWrap .hero-symbol{position:static;bottom:auto;right:auto;width:100%;height:auto;opacity:.85;display:block}
#bounceScore{position:absolute;top:calc(50% - 8px);left:50%;z-index:3;color:#FFD700;font-size:12px;font-weight:900;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;pointer-events:none;text-shadow:0 0 4px rgba(255,215,0,0.5);white-space:nowrap;opacity:0;transform:translate(-50%,-50%) scale(0.5);animation:none;line-height:1}
#bounceScore.show{animation:scoreAppear 1.2s cubic-bezier(.25,.46,.45,.94) forwards}

@keyframes scoreAppear{0%{opacity:0;transform:translate(-50%,-50%) scale(0.5)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.4)}30%{opacity:1;transform:translate(-50%,-50%) scale(1)}70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(0.8)}}

/* Floating +1 */
.bounce-plus-one{position:fixed;z-index:1300;color:#FFD700;font-size:24px;font-weight:900;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;pointer-events:none;text-shadow:0 0 10px rgba(255,215,0,0.6),0 2px 4px rgba(0,0,0,0.5);animation:plusOneFloat .8s cubic-bezier(.25,.46,.45,.94) forwards;transform:translate(-50%,0)}
@keyframes plusOneFloat{0%{opacity:1;transform:translate(-50%,0) scale(0.5)}20%{opacity:1;transform:translate(-50%,-20px) scale(1.3)}100%{opacity:0;transform:translate(-50%,-70px) scale(0.8)}}

/* Combo text */
.bounce-combo{position:fixed;z-index:1300;color:#fff;font-size:32px;font-weight:900;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;pointer-events:none;text-shadow:0 0 20px rgba(255,215,0,0.8),0 0 40px rgba(255,165,0,0.4);letter-spacing:2px;transform:translate(-50%,-50%) scale(0);animation:comboFlash 1.2s cubic-bezier(.17,.67,.21,1.27) forwards}
@keyframes comboFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.4)}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(0.6)}}

/* LOGO TRAIL / AFTERIMAGE */
.logo-trail{position:fixed;z-index:1099;pointer-events:none;opacity:0;will-change:transform,opacity}
.logo-trail img{height:96px;width:auto}
@keyframes trailFade{0%{opacity:.35;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.6)}}

.header-right{display:flex;align-items:center;gap:6px}
.lang-btn{display:flex;align-items:center;gap:4px;background:none;border:none;border-radius:0;padding:4px 2px;font-size:11px;font-weight:500;color:#fff}
.header-right-item{display:inline-flex;align-items:center;justify-content:center;padding:4px;color:rgba(255,255,255,.4);text-decoration:none;transition:color .2s;background:none;border:none;cursor:pointer;font-family:inherit}
.header-right-item:hover{color:#fff}
.header-right-item svg{width:20px;height:20px}
.lang-btn svg{width:16px;height:16px;opacity:.6}
.lang-btn select{border:none;background:transparent;font-size:11px;font-weight:500;font-family:var(--sans);color:#fff;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.lang-btn select option{color:#111;background:#fff}
.search-btn{background:none;border:none;padding:4px;display:flex;color:#fff}
.search-btn svg{width:22px;height:22px}

/* ACCOUNT DROPDOWN */
.auth-btn-wrap{position:relative;display:inline-flex}
.account-dropdown{position:absolute;top:calc(100% + 12px);right:0;min-width:180px;background:#111;border:1px solid rgba(255,255,255,.1);border-radius:4px;padding:8px 0;opacity:0;;transform:translateY(-8px);transition:all .25s cubic-bezier(.25,.46,.45,.94);z-index:2000;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.account-dropdown.active{opacity:1;visibility:visible;transform:translateY(0)}
.account-dropdown a,.account-dropdown button{display:block;width:100%;padding:10px 20px;font-size:11px;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.7);text-decoration:none;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;transition:color .2s,background .2s}
.account-dropdown a:hover,.account-dropdown button:hover{color:#fff;background:rgba(255,255,255,.05)}
.account-dropdown .dropdown-divider{height:1px;background:rgba(255,255,255,.08);margin:6px 0}

/* TERMS & PRIVACY OVERLAY PAGES */
.page-overlay{position:fixed;inset:0;z-index:3000;background:var(--bg);overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.page-overlay.active{opacity:1;visibility:visible}
.page-overlay .page-header{position:sticky;top:0;background:rgba(0,0,0,.97);backdrop-filter:blur(12px);padding:0 40px;display:flex;align-items:center;justify-content:center;height:64px;z-index:10}
.page-overlay .page-header a{color:#fff;font-size:13px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.page-overlay .page-back{position:absolute;left:40px;color:rgba(255,255,255,.6);font-size:12px;font-weight:500;letter-spacing:.1em;cursor:pointer;background:none;border:none;font-family:inherit;transition:color .2s}
.page-overlay .page-back:hover{color:#fff}
.page-overlay .page-container{max-width:740px;margin:0 auto;padding:40px var(--pad-x) 80px}
.page-overlay h1{font-size:28px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px}
.page-overlay .page-date{font-size:12px;color:var(--gray-400);margin-bottom:48px}
.page-overlay h2{font-size:15px;font-weight:700;letter-spacing:.03em;margin:40px 0 12px;padding-top:20px;border-top:1px solid var(--gray-200)}
.page-overlay h2:first-of-type{border-top:none;padding-top:0}
.page-overlay h3{font-size:14px;font-weight:600;margin:20px 0 8px}
.page-overlay p,.page-overlay li{font-size:14px;color:#444;line-height:2;margin-bottom:8px}
.page-overlay ol,.page-overlay ul{padding-left:20px;margin-bottom:16px}
.page-overlay li{margin-bottom:4px}
.page-overlay table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13px}
.page-overlay th,.page-overlay td{border:1px solid var(--gray-200);padding:10px 12px;text-align:left;vertical-align:top}
.page-overlay th{background:#fff;font-weight:600;font-size:12px;color:var(--gray-500)}
.page-overlay td{color:#444;line-height:1.7}
.page-overlay .info-box{margin-top:32px;padding:20px;background:#fff;border:1px solid var(--gray-200);font-size:13px;line-height:2}
@media(max-width:768px){.page-overlay .page-header{padding:0 20px}.page-overlay .page-back{left:20px}.page-overlay .page-container{padding:24px 20px 60px}.page-overlay h1{font-size:22px}}

/* SEARCH BAR (top strip) */
.search-bar{position:fixed;top:0;left:0;right:0;z-index:2000;background:var(--black);padding:0 40px;height:0;overflow:hidden;transition:height .3s cubic-bezier(.25,.46,.45,.94);display:flex;align-items:center}
.search-bar.active{height:56px;overflow:visible}
.search-bar-inner{display:flex;align-items:center;width:100%;max-width:600px;margin:0 auto;background:#fff;border-radius:28px;padding:0 16px;height:40px;gap:8px}
.search-bar-icon{width:18px;height:18px;flex-shrink:0;color:var(--gray-500)}
.search-bar-input{flex:1;border:none;outline:none;background:transparent;font-size:13px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--text);font-family:inherit}
.search-bar-input::placeholder{color:var(--gray-400);font-weight:500;letter-spacing:.15em;text-transform:uppercase}
.search-bar-close{background:none;border:none;font-size:22px;color:var(--text);padding:0 4px;line-height:1;cursor:pointer;flex-shrink:0;font-weight:700}
.search-dropdown{display:none;position:absolute;top:56px;left:0;right:0;background:var(--black);max-height:60vh;overflow-y:auto;padding:16px 40px 24px}
.search-dropdown.active{display:block}
.search-dropdown-label{color:rgba(255,255,255,.5);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;margin-bottom:12px}
.search-dropdown-grid{display:flex;flex-direction:column;gap:8px}
.search-dropdown-item{display:flex;align-items:center;gap:14px;padding:8px 0;cursor:pointer;transition:opacity .2s}
.search-dropdown-item:hover{opacity:.6}
.search-dropdown-item img{width:56px;height:56px;object-fit:cover;border-radius:4px;flex-shrink:0}
.search-dropdown-item-info{display:flex;flex-direction:column;gap:2px}
.search-dropdown-item-cat{font-size:10px;color:rgba(255,255,255,.4);letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.search-dropdown-item-title{font-size:14px;color:#fff;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.search-no-result{color:rgba(255,255,255,.5);font-size:13px;letter-spacing:.05em;padding:12px 0}

/* MOBILE NAV OVERLAY */
.nav-overlay{position:fixed;inset:0;z-index:1500;background:#fff;opacity:0;visibility:hidden;transition:opacity .4s cubic-bezier(.23,1,.32,1),visibility .4s}
.nav-overlay.active{opacity:1;visibility:visible}
.nav-overlay-inner{display:flex;width:100%;height:100%;padding:80px 60px 60px}
.nav-left-col{display:flex;flex-direction:column;justify-content:space-between;width:280px;flex-shrink:0;transform:translateX(-40px);opacity:0;transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1)}
.nav-overlay.active .nav-left-col{transform:translateX(0);opacity:1;transition:transform .5s cubic-bezier(.23,1,.32,1) .15s,opacity .5s cubic-bezier(.23,1,.32,1) .15s}
.nav-left-top{margin-bottom:auto}
.nav-left-top a{font-family:'Montserrat',var(--sans);font-size:clamp(18px,2.5vw,24px);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#000;transition:opacity .2s}
.nav-left-top a:hover{opacity:.4}
.nav-left-links{display:flex;flex-direction:column;gap:4px;margin-bottom:32px}
.nav-left-links a{font-family:'Montserrat',var(--sans);font-size:clamp(18px,2.5vw,24px);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#000;transition:opacity .2s}
.nav-left-links a:hover{opacity:.4}
.nav-left-links.nav-extra-links{margin-bottom:32px!important}
.nav-left-links.nav-extra-links a{font-size:clamp(10px,1.25vw,13px)!important;font-weight:700}
.nav-left-links.nav-extra-links a:hover{opacity:.4}
.nav-bottom-row{display:flex;align-items:center;gap:16px}
.nav-left-dots{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .4s cubic-bezier(.4,0,.2,1);flex-shrink:0}
.nav-left-dots.open{transform:rotate(90deg)}
.nav-left-dots span{font-size:26px;font-weight:900;color:rgba(0,0,0,.8);line-height:1}
.nav-socials{display:flex;flex-direction:row;gap:12px;align-items:center}
.nav-social-icon{display:block;transition:opacity .2s}
.nav-social-icon:hover{opacity:.5}
.nav-right-col{flex:1;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:0;transform:translateX(40px);opacity:0;transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1)}
.nav-overlay.active .nav-right-col{transform:translateX(0);opacity:1;transition:transform .5s cubic-bezier(.23,1,.32,1) .25s,opacity .5s cubic-bezier(.23,1,.32,1) .25s}
.nav-right-col a{font-family:'Montserrat',var(--sans);font-size:clamp(40px,7vw,90px);font-weight:900;letter-spacing:.03em;text-transform:uppercase;color:#000;line-height:1.1;transition:opacity .2s}
.nav-right-col a:hover{opacity:.4}
.nav-close{position:absolute;top:20px;left:24px;z-index:1600;background:none;border:none;font-size:0;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;padding:0}
.nav-close::before,.nav-close::after{content:'';position:absolute;width:22px;height:2px;background:#000;border-radius:1px}
.nav-close::before{transform:rotate(45deg)}
.nav-close::after{transform:rotate(-45deg)}

/* HERO */
.hero{margin-top:72px;position:relative;height:calc(100vh - 72px);min-height:500px;overflow:hidden;background:var(--bg)}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.hero-slide.active{opacity:1}
.hero-slide-img{width:100%;height:100%;object-fit:cover}
.hero-slide-gradient{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.3) 0%,transparent 40%)}
.hero-content{position:absolute;bottom:48px;left:48px;z-index:2}
.hero-issue{font-size:11px;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:8px}
.hero-title{font-size:clamp(2rem,5vw,4rem);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;line-height:1.05}

.hero-symbol{position:absolute;bottom:40px;right:48px;z-index:2;width:clamp(40px,5.3vw,67px);height:auto;opacity:.85;pointer-events:none}
.hero-watermark{position:absolute;bottom:40px;right:48px;z-index:2;width:48px;height:48px;border:1.5px solid rgba(255,255,255,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;display:none}
.hero-watermark span{font-family:var(--serif);font-size:11px;color:rgba(255,255,255,.5);font-weight:700;letter-spacing:.05em}

/* FASHION CAROUSEL */
/* ======== TOP-LEVEL SECTIONS — unified rhythm ========
   Every major content section uses symmetric vertical padding from the
   spacing scale, so the visual gap between any two consecutive sections
   is consistent regardless of which section types sit next to each other.
   A near-invisible top border on every section after the first creates a
   subtle rhythmic divider that helps the eye parse the layout into
   distinct content blocks (per QA report — "섹션 간 명확한 구분"). */
.fashion-section,
.editorial-section,
.film-section,
.shorts-section{
  padding: var(--space-section) 0;
  background: #000;
  /* Default: every content section carries a subtle top divider so the
     rhythm doesn't depend on direct sibling adjacency (popups or other
     overlay divs sometimes get inserted between sections by JS). */
  border-top: 1px solid rgba(255,255,255,0.05);
}
.editorial-section{color:#fff}
.film-section{color:#fff}
/* Hero sits above the first content section without a divider line —
   the gradient at the bottom of hero already creates the visual break. */
section.hero + .fashion-section,
section.hero + .editorial-section,
section.hero + .film-section,
section.hero + .shorts-section{
  border-top: none;
}

.fashion-section{padding:var(--space-section) 0;background:#000}
.fashion-heading{font-size:15px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;text-align:left;margin-bottom:12px;color:#e5e5e5;padding:0 var(--pad-x)}
.fashion-section h2{font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;text-align:center;margin-bottom:32px;color:var(--gray-500)}
.carousel-wrap{position:relative;overflow:hidden;padding:0}
.carousel-track{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;padding:0 48px;-ms-overflow-style:none;scrollbar-width:none}
.carousel-track::-webkit-scrollbar{display:none}
.fashion-card{min-width:calc(27% - 12px);max-width:267px;flex-shrink:0}
.fashion-card-img{width:100%;aspect-ratio:16/9;overflow:hidden;background:transparent}
.fashion-card-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--card-hover-duration) var(--card-hover-easing)}
.fashion-card:hover .fashion-card-img img,
.fashion-card:focus-visible .fashion-card-img img{transform:scale(var(--card-hover-scale))}
.fashion-card-info{padding:12px 0}
.fashion-card-cat{font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.fashion-card-title{font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:4px;line-height:1.3;color:#fff}
.fashion-card-desc{font-size:12px;color:var(--gray-500);margin-top:4px;font-weight:400}
.carousel-arrow{position:absolute;top:50%;transform:translateY(-70%);width:36px;height:36px;background:rgba(255,255,255,.15);border:none;font-size:22px;color:#fff;z-index:5;display:flex;align-items:center;justify-content:center;border-radius:50%}
.carousel-arrow.left{left:12px}
.carousel-arrow.right{right:12px}
.carousel-arrow:hover{opacity:.5}

/* FILM SECTION */

.film-titles{position:relative}
.film-label{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:900;letter-spacing:.1em;text-transform:uppercase;margin-bottom:24px}
.film-list{display:flex;flex-direction:column;gap:4px}
.film-list a{font-size:clamp(.9rem,1.5vw,1.2rem);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.35);transform:rotate(-15deg);transform-origin:left center;display:inline-block;transition:color .2s;white-space:nowrap}
.film-list a:hover{color:#fff}
.film-video{position:relative;aspect-ratio:16/9;overflow:hidden;background:#111;border-radius:2px}
.film-video img{width:100%;height:100%;object-fit:cover}
.film-video .play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:transparent;display:flex;align-items:center;justify-content:center}
.film-video .play-btn::after{content:'';border-left:16px solid rgba(255,255,255,.8);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}

/* EDITORIAL SECTION */
/* .editorial-section base styles handled by the unified rules above */
/* EDITORIAL ROWS */
.ed-row{margin-bottom:32px}
.ed-row-label{font-family:'Montserrat',var(--sans);font-size:15px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#e5e5e5;padding:0 48px;margin-bottom:12px}
.ed-row-wrap{position:relative}
.ed-row-arrow{position:absolute;top:0;width:44px;height:100%;z-index:10;background:rgba(0,0,0,.6);border:none;color:#fff;font-size:28px;cursor:pointer;opacity:0;transition:opacity .3s;display:flex;align-items:center;justify-content:center}
.ed-row-wrap:hover .ed-row-arrow{opacity:1}
.ed-row-arrow:hover{background:rgba(0,0,0,.8)}
.ed-row-left{left:0}
.ed-row-right{right:0}
.ed-row-track{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:0 48px;scroll-behavior:smooth;overscroll-behavior-x:contain;-ms-overflow-style:none;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ed-row-track::-webkit-scrollbar{display:none}
.ed-row-card{min-width:calc((100vw - 96px - 56px) / 7);max-width:calc((100vw - 96px - 56px) / 7);flex-shrink:0;cursor:pointer;position:relative}
@media(max-width:1200px){.ed-row-card{min-width:calc((100vw - 96px - 40px) / 5);max-width:calc((100vw - 96px - 40px) / 5)}}
@media(max-width:768px){.ed-row-card{min-width:calc((100vw - 96px - 24px) / 3);max-width:calc((100vw - 96px - 24px) / 3)}}
@media(max-width:480px){.ed-row-card{min-width:calc((100vw - 96px - 16px) / 2.3);max-width:calc((100vw - 96px - 16px) / 2.3)}}
/* Unified card hover: card div stays fixed (no layout shift / overflow);
   only the inner image scales inside the overflow:hidden mask. Same
   easing + duration token (--card-hover-easing / --card-hover-duration)
   shared across every card type so the interaction feels consistent. */
.ed-row-card-img{width:100%;aspect-ratio:3/4;overflow:hidden;border-radius:4px;background:#1a1a1a}
.ed-row-card-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--card-hover-duration,.5s) var(--card-hover-easing,cubic-bezier(.4,0,.2,1))}
.ed-row-card:hover .ed-row-card-img img,
.ed-row-card:focus-visible .ed-row-card-img img{transform:scale(1.05)}
.ed-row-card-info{padding:8px 0}
.ed-row-card-cat{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.ed-row-card-title{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-top:2px;line-height:1.3}

/* EDITORIAL SEARCH RESULTS */
.ed-search-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;padding:0 48px}
.ed-search-grid .ed-row-card{min-width:unset;max-width:unset}

.editorial-heading{font-size:clamp(2rem,4vw,3.5rem);font-weight:900;letter-spacing:.08em;text-transform:uppercase;text-align:center;margin-bottom:40px;color:#fff}






.ed-card-cat{font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--gray-400)}
.ed-card-title{font-size:18px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-top:4px}

/* EDITORIAL CAROUSEL */


.ed-carousel-card{min-width:calc(20% - 16px);max-width:200px;flex-shrink:0;cursor:pointer}
.ed-carousel-card .ed-c-img{width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--bg)}
.ed-carousel-card .ed-c-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ed-carousel-card:hover .ed-c-img img{transform:scale(1.03)}
.ed-carousel-card .ed-c-info{padding:10px 0}
.ed-carousel-card .ed-c-cat{font-size:9px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ed-carousel-card .ed-c-title{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:3px;line-height:1.3;color:#fff}
.ed-carousel-arrows{display:flex;justify-content:space-between;position:absolute;top:50%;transform:translateY(-60%);left:0;right:0;pointer-events:none;padding:0 4px}
.ed-carousel-arrows button{pointer-events:all;width:36px;height:36px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);font-size:20px;color:#fff;display:flex;align-items:center;justify-content:center}
.ed-carousel-arrows button:hover{background:rgba(255,255,255,.3)}

/* BRAND BANNER */
.brand-banner{width:100%;overflow:hidden;position:relative;background:#000;padding:20px 0}
.brand-video-wrap{width:100%;aspect-ratio:16/9;min-height:300px;max-height:70vh;position:relative;overflow:hidden}
.brand-video-wrap iframe{width:100%;height:100%;border:none}
.brand-video-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:linear-gradient(135deg,#0a0a0a,#1a1a2e,#0a0a0a);cursor:pointer}
.brand-video-text{font-family:'Montserrat',var(--sans);font-size:13px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.brand-video-sub{font-size:11px;color:rgba(255,255,255,.25);letter-spacing:.1em}
.brand-video-play{width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;transition:all .3s}
.brand-video-placeholder:hover .brand-video-play{border-color:#fff;background:rgba(255,255,255,.1)}
.brand-banner img{width:100%;height:100%;object-fit:cover}



/* FILM */
/* .film-section base styles handled by the unified rules above */
/* FILM section heading — aligned with .ed-row-label so the left edge of
   "FILM" sits on the same vertical line as "최신 에디토리얼" / "최신 기사".
   Per QA: section H titles must share padding / font size / letter-spacing
   so the left baseline reads as a single column down the page. */
.nf-top{padding:0 48px;margin-bottom:12px}
.nf-top h2{font-family:'Montserrat',var(--sans);font-size:15px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#e5e5e5;margin:0}
.nf-wrap{position:relative}
.nf-nav{position:absolute;top:0;width:48px;height:100%;z-index:20;background:rgba(20,20,20,.7);border:none;color:#fff;font-size:32px;cursor:pointer;opacity:0;transition:opacity .3s;display:flex;align-items:center;justify-content:center}
.nf-wrap:hover .nf-nav{opacity:1}
.nf-nav:hover{background:rgba(20,20,20,.9)}
.nf-nav-left{left:0}
.nf-nav-right{right:0}
.nf-track{display:flex;gap:6px;overflow-x:auto;padding:0 48px;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none}
.nf-track::-webkit-scrollbar{display:none}
.nf-card{min-width:300px;max-width:300px;flex-shrink:0;cursor:pointer;border-radius:4px;transition:transform .2s;position:relative}
.nf-card:hover{transform:scale(1.05)}
.nf-card.active{opacity:1}
.nf-card-img{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:#1a1a1a;position:relative}
.nf-card-img img{width:100%;height:100%;object-fit:cover}
.nf-card-img::after{content:attr(data-title);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-size:15px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.7);background:rgba(0,0,0,.25);pointer-events:none}

/* Netflix Popup */
.nf-popup{position:fixed;z-index:9999;opacity:0;pointer-events:none;transform:translateY(12px) scale(.97);transition:opacity .35s cubic-bezier(.4,0,.2,1),transform .35s cubic-bezier(.4,0,.2,1);border-radius:6px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.9);width:320px;backdrop-filter:blur(2px)}
.nf-popup.active{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);box-shadow:0 20px 60px rgba(0,0,0,.9)}
.nf-popup-visual{width:100%;aspect-ratio:16/9;position:relative;background:#1a1a1a;overflow:hidden}
.nf-popup-visual img{width:100%;height:100%;object-fit:cover}
#nfPopupSlot{position:absolute;inset:0;z-index:2}
#nfPopupSlot iframe{width:100%;height:100%;border:none}
.nf-popup-body{background:#181818;padding:14px 16px 18px}
.nf-popup-btns{display:flex;gap:8px;margin-bottom:10px}
.nf-popup-play{width:32px;height:32px;border-radius:50%;background:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
.nf-popup-play:hover{background:#e0e0e0}
.nf-popup-info{width:32px;height:32px;border-radius:50%;background:transparent;border:2px solid rgba(255,255,255,.5);color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.nf-popup-info:hover{border-color:#fff}
.nf-popup-meta{display:flex;gap:6px;align-items:center;margin-bottom:4px}
.nf-popup-meta span{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.nf-popup-title{font-family:'Montserrat',var(--sans);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;line-height:1.4}

/* YOUTUBE SHORTS ROW */
.shorts-section{overflow:hidden;position:relative}
/* .shorts-section base padding/background handled by unified rules above */
.shorts-title{text-align:center;font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:32px}
.shorts-carousel{position:relative;display:flex;align-items:center;justify-content:center;height:520px;perspective:1000px}
.shorts-track{display:flex;align-items:center;justify-content:center;gap:0;transition:transform .5s cubic-bezier(.25,.46,.45,.94);position:relative;width:100%}
.shorts-item{flex-shrink:0;width:240px;height:426px;border-radius:12px;overflow:hidden;background:#111;position:absolute;transition:all .5s cubic-bezier(.25,.46,.45,.94);cursor:pointer;opacity:.4;transform:scale(.75)}
.shorts-item.center{opacity:1;transform:scale(1);z-index:10;box-shadow:0 20px 60px rgba(0,0,0,.8)}
.shorts-item.left1{opacity:.7;transform:scale(.85) translateX(-20px);z-index:5}
.shorts-item.right1{opacity:.7;transform:scale(.85) translateX(20px);z-index:5}
.shorts-item.left2{opacity:.5;transform:scale(.72) translateX(-10px);z-index:2}
.shorts-item.right2{opacity:.5;transform:scale(.72) translateX(10px);z-index:2}
.shorts-item.left3{opacity:.35;transform:scale(.62) translateX(-5px);z-index:1}
.shorts-item.right3{opacity:.35;transform:scale(.62) translateX(5px);z-index:1}
.shorts-item.left4{opacity:.2;transform:scale(.55);z-index:0}
.shorts-item.right4{opacity:.2;transform:scale(.55);z-index:0}
.shorts-item.hidden{opacity:0;transform:scale(.5);pointer-events:none;z-index:0}
.shorts-item iframe{width:100%;height:100%;border:none;border-radius:12px;pointer-events:none}
.shorts-item.center iframe{pointer-events:auto}
.shorts-item-title{position:absolute;bottom:0;left:0;right:0;padding:16px 12px 14px;background:linear-gradient(transparent,rgba(0,0,0,.85));font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-align:center;pointer-events:none;opacity:0;transition:opacity .3s}
.shorts-item.center .shorts-item-title{opacity:1}
.shorts-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:20;transition:all .2s;backdrop-filter:blur(4px)}
.shorts-nav:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)}
.shorts-nav.prev{left:max(16px,calc(50% - 45vw))}
.shorts-nav.next{right:max(16px,calc(50% - 45vw))}
.shorts-dots{display:flex;justify-content:center;gap:6px;margin-top:20px}
.shorts-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2);transition:all .3s;cursor:pointer}
.shorts-dot.on{background:#fff;width:20px;border-radius:3px}
@media(max-width:600px){.shorts-carousel{height:420px}.shorts-item{width:200px;height:355px}.shorts-nav.prev{left:8px}.shorts-nav.next{right:8px}}
.shorts-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;z-index:2;background:linear-gradient(135deg,#1a1a2e,#16213e)}
.shorts-placeholder span{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.shorts-placeholder:hover svg{transform:scale(1.1)}
.shorts-placeholder svg{transition:transform .2s}
.shorts-info{padding:8px 0}
.shorts-cat{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-400)}
.shorts-title{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-top:3px;line-height:1.3}

/* FOOTER */
.footer{background:var(--black);color:#fff;padding:48px 48px 24px}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:48px}
.footer-links-left{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.footer-links-left a{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:.7;transition:opacity .2s;text-decoration:none}
.footer-links-left a:hover{opacity:1}
.footer-search{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;opacity:.7;transition:opacity .2s}
.footer-search:hover{opacity:1}
.footer-social{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.footer-social a{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:.7;transition:opacity .2s}
.footer-social a:hover{opacity:1}
.footer-marquee{overflow:hidden;margin-bottom:48px;margin-top:80px;padding:16px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#fff 4%,#fff 96%,transparent);mask-image:linear-gradient(90deg,transparent,#fff 4%,#fff 96%,transparent)}
.footer-marquee-track{display:flex;white-space:nowrap;will-change:transform;transform:translateZ(0)}
.footer-marquee-track.mq-anim{animation:papMarquee 30s linear infinite}
.footer-marquee-track.mq-anim:hover{animation-play-state:paused}
.footer-marquee-track span{font-size:clamp(1.5rem,3.5vw,3rem);font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#fff;padding:0 20px;flex-shrink:0}
.footer-marquee-track a{color:#fff;text-decoration:none;transition:opacity .2s}
.footer-marquee-track a:hover{opacity:.5}
@keyframes papMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.footer-marquee-track.mq-anim{animation:none}}
.footer-legal{text-align:center;font-size:8px;color:rgba(255,255,255,.2);line-height:1.7;margin-top:200px}
.footer-legal strong{font-weight:500;color:rgba(255,255,255,.35)}
.footer-legal a{color:rgba(255,255,255,.25)}
.footer-bottom-nav{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}
.footer-bottom-nav-links{display:flex;gap:16px}
.footer-bottom-nav-links a,.footer-bottom-nav-social a{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.35);text-decoration:none;transition:color .2s}
.footer-bottom-nav-links a:hover,.footer-bottom-nav-social a:hover{color:#fff}
.footer-bottom-nav-center{display:flex;gap:16px}
.footer-bottom-nav-center a{font-size:8px;font-weight:500;letter-spacing:.08em;color:rgba(255,255,255,.2);text-decoration:none;transition:color .2s}
.footer-bottom-nav-center a:hover{color:#fff}
.footer-bottom-nav-social{display:flex;gap:16px}


/* CREATOR SEARCH RESULTS */
.creator-results{padding:0 48px;margin-bottom:24px}
.creator-results-label{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:12px}
.creator-cards{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;-ms-overflow-style:none;scrollbar-width:none}
.creator-cards::-webkit-scrollbar{display:none}
.creator-card{min-width:200px;max-width:200px;flex-shrink:0;border:1px solid rgba(255,255,255,.1);padding:16px;cursor:pointer;transition:all .3s}
.creator-card:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.03)}
.creator-card-name{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
.creator-card-role{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:6px}
.creator-card-count{font-size:10px;color:rgba(255,255,255,.3)}


/* CREATOR PROFILE LEVEL SYSTEM */
.creator-popup-level{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 14px;border:1px solid rgba(255,255,255,.15);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.creator-popup-level .lvl-icon{font-size:14px}
.creator-popup-level.lvl-bronze{color:#cd7f32;border-color:rgba(205,127,50,.3)}
.creator-popup-level.lvl-silver{color:#c0c0c0;border-color:rgba(192,192,192,.3)}
.creator-popup-level.lvl-gold{color:#ffd700;border-color:rgba(255,215,0,.3)}
.creator-popup-level.lvl-platinum{color:#e5e4e2;border-color:rgba(229,228,226,.4)}
.creator-popup-level.lvl-diamond{color:#b9f2ff;border-color:rgba(185,242,255,.4)}
.creator-popup-ig{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;text-decoration:none;transition:opacity .2s;margin-top:12px;border-radius:2px}
.creator-popup-ig:hover{opacity:.85;color:#fff}
.ed-cred-val a{cursor:pointer}
.ed-cred-val a:hover{text-decoration:underline}

/* CREATOR PROFILE POPUP */
.creator-popup-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.creator-popup-overlay.active{opacity:1;visibility:visible}
.creator-popup{background:#0a0a0a;border:1px solid rgba(255,255,255,.12);max-width:680px;width:92%;max-height:85vh;overflow-y:auto;position:relative}
.creator-popup-close{position:absolute;top:16px;right:20px;background:none;border:none;color:rgba(255,255,255,.4);font-size:24px;cursor:pointer;z-index:2;transition:color .2s}
.creator-popup-close:hover{color:#fff}
.creator-popup-header{padding:40px 32px 24px;border-bottom:1px solid rgba(255,255,255,.08)}
.creator-popup-name{font-size:clamp(20px,3vw,28px);font-weight:900;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.creator-popup-role{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:16px}
.creator-popup-links{display:flex;gap:16px;flex-wrap:wrap}
.creator-popup-link{font-size:11px;color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.creator-popup-link:hover{color:#fff}
.creator-popup-stats{display:flex;gap:32px;padding:20px 32px;border-bottom:1px solid rgba(255,255,255,.08)}
.creator-stat{text-align:center}
.creator-stat-num{font-size:20px;font-weight:900;margin-bottom:2px}
.creator-stat-label{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.creator-popup-works{padding:24px 32px 32px}
.creator-popup-works-title{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:16px}
.creator-works-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.creator-work-card{cursor:pointer;transition:transform .3s}
.creator-work-card:hover{transform:scale(1.03)}
.creator-work-img{width:100%;aspect-ratio:3/4;overflow:hidden;background:#1a1a1a;margin-bottom:6px}
.creator-work-img img{width:100%;height:100%;object-fit:cover}
.creator-work-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.creator-work-date{font-size:9px;color:rgba(255,255,255,.65);margin-top:2px}

/* EDITORIAL DETAIL OVERLAY */
.ed-overlay{position:fixed;inset:0;z-index:3000;background:#000;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.ed-overlay.active{opacity:1;visibility:visible}
.ed-overlay-close{position:fixed;top:20px;left:20px;z-index:3001;width:36px;height:36px;background:none;border:none;color:#fff;font-size:28px;cursor:pointer;z-index:3002;display:flex;align-items:center;justify-content:center}
.ed-overlay-close:hover{opacity:.6}

/* HERO: 50/50 split */
.ed-hero-split{display:flex;width:100%;min-height:100vh}
.ed-hero-img{width:50%;position:relative;overflow:hidden}
.ed-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.ed-hero-info{width:50%;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px}
.ed-hero-title{font-family:'Montserrat',sans-serif;font-size:clamp(28px,4vw,52px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-align:center;margin-bottom:12px}
.ed-hero-issue{font-size:13px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* GALLERY: 2-column grid on white bg */
.ed-gallery{background:#000;padding:40px var(--pad-x)}
.ed-gallery-grid{max-width:700px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* QA #95 — frontend display layer holds the 4:5 shape, but uploads are
   no longer constrained to 4:5. We use object-fit:contain (NOT cover)
   so any source ratio is shown in full without cropping; non-4:5
   uploads simply letterbox into the gallery box. The container's
   background fills the unused area so portrait and landscape uploads
   sit on a clean dark surface rather than showing the page through. */
.ed-gallery-item{position:relative;overflow:hidden;aspect-ratio:4/5;background:#1a1a1a}
.ed-gallery-item img{width:100%;height:100%;display:block;object-fit:contain;object-position:center}
.ed-gallery-item .ed-img-credits{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.7));padding:16px 12px 12px;opacity:0;transition:opacity .3s;display:flex;flex-wrap:wrap;gap:4px 8px}
.ed-gallery-item:hover .ed-img-credits{opacity:1}
.ed-img-credits a{font-size:11px;color:#fff;text-decoration:none;opacity:.85}
.ed-img-credits a:hover{text-decoration:underline;opacity:1}

/* EDITORIAL DESCRIPTION */
.ed-desc{max-width:600px;width:100%;text-align:center;margin-bottom:48px;font-size:15px;line-height:1.9;color:rgba(255,255,255,.7);letter-spacing:.01em}
.ed-desc:empty{display:none;margin:0}

/* CREDITS: centered two-column grid
   Layout-level alignment via CSS Grid: roles right-aligned in a fixed-width
   column, values left-aligned in a flexible column. All rows share the same
   grid context (via display:contents on .ed-cred-row), so the role column
   width is determined once by the longest role and applies uniformly across
   every row — independent of individual text lengths. */
.ed-credits-wrap{background:#000;padding:60px var(--pad-x);display:flex;flex-direction:column;align-items:center}
.ed-credits-table{
  display:grid;
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  column-gap: 28px;
  row-gap: 8px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}
.ed-cred-row{display:contents}
.ed-cred-role{
  text-align:right;
  white-space:nowrap;
  color:rgba(255,255,255,.5);
  font-size:13px;
  letter-spacing:.03em;
  text-transform:uppercase;
  align-self:start;
  line-height:1.7;
}
.ed-cred-val{
  color:#fff;
  font-size:14px;
  line-height:1.7;
  align-self:start;
  word-break: break-word;
}
.ed-cred-val a{color:#fff;text-decoration:none;cursor:pointer}
.ed-cred-val a:hover{text-decoration:underline}
.ed-cred-handle{font-size:12px;color:rgba(255,255,255,.45);margin-left:4px}

/* MORE CONTENT: 4-col carousel */
.ed-more-wrap{background:#000;padding:60px 0 80px}
.ed-more-title{font-family:'Montserrat',sans-serif;font-size:clamp(20px,3vw,32px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-align:center;color:#fff;margin-bottom:32px}
.ed-more-carousel{position:relative;overflow:hidden;padding:0 32px}
.ed-more-track{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none}
.ed-more-track::-webkit-scrollbar{display:none}
.ed-more-card{flex:1 1 0;min-width:0;cursor:pointer}
.ed-more-card img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.ed-more-card-cat{font-size:8px;color:rgba(255,255,255,.4);letter-spacing:.03em;margin-top:6px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-more-card-title{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#fff;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-more-arrow{position:absolute;top:50%;transform:translateY(-60%);width:32px;height:32px;background:none;border:none;font-size:28px;color:#fff;cursor:pointer;z-index:2}
.ed-more-arrow:hover{opacity:.5}
.ed-more-arrow.l{left:8px}
.ed-more-arrow.r{right:8px}

/* ALL EDITORIALS OVERLAY */
.ed-all-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:8000;overflow-y:auto;display:none;opacity:0;transition:opacity .3s}
.ed-all-overlay.active{display:block;opacity:1}
.ed-all-header{position:sticky;top:0;z-index:2;background:linear-gradient(#000 60%,transparent);padding:40px 48px 24px;display:flex;align-items:center;justify-content:space-between}
.ed-all-title{font-family:'Montserrat',sans-serif;font-size:clamp(18px,2.5vw,28px);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.ed-all-count{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.35);margin-left:16px}
/* QA #84: legacy .ed-all-close kept hidden in case markup persists. */
.ed-all-close{display:none!important}
.ed-all-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;padding:16px 48px 80px;transition:opacity .25s ease,transform .25s ease}
.ed-all-grid.is-fading{opacity:0;transform:translateY(8px)}
.ed-all-grid .ed-row-card{min-width:unset;max-width:unset}

/* QA #84: Category filter pills */
.ed-cat-filter{display:flex;flex-wrap:wrap;gap:8px;padding:0 48px 24px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:8px}
.ed-cat-pill{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);background:transparent;border:1px solid rgba(255,255,255,.12);padding:8px 18px;cursor:pointer;transition:all .2s ease;border-radius:999px;line-height:1}
.ed-cat-pill:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.ed-cat-pill:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}
.ed-cat-pill.active{color:#000;background:#fff;border-color:#fff}
@media(max-width:900px){.ed-cat-filter{padding:0 var(--pad-x) 16px;gap:6px}.ed-cat-pill{font-size:10px;padding:7px 14px}}
@media(max-width:600px){.ed-cat-filter{padding:0 var(--pad-x) 12px}.ed-cat-pill{font-size:9px;padding:6px 12px;letter-spacing:.12em}}

/* OVERLAY MINI HEADER — sticky top-bar inside *AllOverlay (editorial/film/article grids) */
.overlay-mini-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:72px;background:rgba(0,0,0,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.04)}
.overlay-mini-header .overlay-mini-left{display:flex;align-items:center;gap:12px}
.overlay-mini-header .overlay-mini-right{display:flex;align-items:center;gap:12px;position:relative}
.overlay-mini-header .overlay-mini-logo{display:flex;align-items:center;font-family:'Montserrat',sans-serif;font-weight:800;font-size:14px;letter-spacing:.18em;color:#fff;text-decoration:none;text-transform:uppercase;white-space:nowrap}
.overlay-mini-header .overlay-mini-logo img{height:32px;width:auto;display:block}
.overlay-mini-header + .ed-all-header{position:static;background:#000;padding-top:24px}
@media(max-width:900px){.overlay-mini-header{padding:0 20px;height:60px}.overlay-mini-header .overlay-mini-logo{font-size:12px}.overlay-mini-header .overlay-mini-logo img{height:26px}}
@media(max-width:600px){.overlay-mini-header{padding:0 16px;height:56px}.overlay-mini-header .overlay-mini-logo{font-size:11px;letter-spacing:.14em}.overlay-mini-header .overlay-mini-logo img{height:22px}}
@media(max-width:420px){.overlay-mini-header{padding:0 12px;height:54px}.overlay-mini-header .overlay-mini-logo{font-size:10px}.overlay-mini-header .overlay-mini-logo img{height:19px}}

/* FILM ALL GRID */
.film-all-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.film-all-card{cursor:pointer;border-radius:4px;overflow:hidden;background:#111}
.film-all-thumb{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#222}
.film-all-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--card-hover-duration) var(--card-hover-easing)}
.film-all-card:hover .film-all-thumb img,
.film-all-card:focus-visible .film-all-thumb img{transform:scale(var(--card-hover-scale))}
.film-play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;background:rgba(0,0,0,.6);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.film-all-card:hover .film-play-icon{opacity:1}
.film-all-info{padding:10px 12px}
.film-all-cat{font-size:9px;color:#888;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.film-all-title{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;color:#fff;letter-spacing:.04em;line-height:1.4}
.film-filter-btn,.art-filter-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#aaa;font-size:10px;font-weight:600;letter-spacing:.1em;padding:5px 14px;border-radius:16px;cursor:pointer;transition:all .2s}
.film-filter-btn:hover,.art-filter-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.film-filter-btn.active,.art-filter-btn.active{background:#fff;color:#000;border-color:#fff}

/* FILM DETAIL OVERLAY */
.film-detail-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.95);z-index:8500;overflow-y:auto;display:none;opacity:0;transition:opacity .3s}
.film-detail-overlay.active{display:block;opacity:1}

/* ARTICLE ALL GRID */
.art-all-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.art-all-card{cursor:pointer;border-radius:4px;overflow:hidden;background:#111}
.art-all-thumb{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:#222}
.art-all-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--card-hover-duration) var(--card-hover-easing)}
.art-all-card:hover .art-all-thumb img,
.art-all-card:focus-visible .art-all-thumb img{transform:scale(var(--card-hover-scale))}
.art-all-info{padding:10px 12px}
.art-all-cat{font-size:9px;color:#888;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.art-all-title{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;color:#fff;letter-spacing:.04em;line-height:1.4}
.art-all-sub{font-size:11px;color:#777;margin-top:3px}

/* ARTICLE DETAIL OVERLAY */
.art-detail-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.95);z-index:8500;overflow-y:auto;display:none;opacity:0;transition:opacity .3s}
.art-detail-overlay.active{display:block;opacity:1}
#artDetailDesc,#artDetailDesc *{color:#ccc !important}
#artDetailDesc a{color:#7eaaed !important;text-decoration:underline}

/* ed-hero responsive now in main responsive block below */


/* AI RECOMMENDED THEMES */
.ai-rec-badge{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.25);padding:0 48px;margin-bottom:8px}
/* PLACEHOLDER GRADIENTS */
.ph{width:100%;height:100%}

/* ============================================
   RESPONSIVE — iPhone & Galaxy optimized
   ============================================ */

/* --- TOUCH DEVICE SUPPORT --- */
@media(hover:none) and (pointer:coarse){
  /* Disable floating cursor logo, trail & game on touch — fix logo in header center */
  .floating-logo.on-cursor{display:none}
  .logo-trail{display:none!important}
  .floating-logo{position:fixed!important;left:50%!important;top:0!important;transform:translateX(-50%)!important;transition:none!important;pointer-events:none;height:60px;display:flex!important;align-items:center}
  .floating-logo.in-header{position:fixed!important;left:50%!important;top:0!important;transform:translateX(-50%)!important;transition:none!important}
  .floating-logo img{height:26px!important}
  #bounceScore,.bounce-plus-one,.bounce-combo{display:none!important}

  /* Always show nav arrows on touch (no hover) */
  .ed-row-arrow{opacity:.7}
  .nf-nav{opacity:.7}
  .carousel-arrow{opacity:.8}

  /* Disable hover scale on cards */
  .ed-row-card:hover{transform:none}
  .nf-card:hover{transform:none}
  .fashion-card:hover .fashion-card-img img{transform:none}
  .ed-row-card:hover .ed-row-card-img img{transform:none}
  .creator-work-card:hover{transform:none}

  /* Show editorial image credits always (no hover on touch) */
  .ed-gallery-item .ed-img-credits{opacity:.85}

  /* Ensure minimum 44px tap targets */
  .hamburger{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .search-btn{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .lang-btn{min-height:44px}
  .carousel-arrow{width:44px;height:44px}
  .ed-row-arrow{min-width:44px}
  .nf-nav{width:44px;height:44px}
  .shorts-nav{width:48px;height:48px}
  .ed-overlay-close{width:44px;height:44px}
  /* .nav-close hidden — hamburger morphs to X */
  .footer-bottom-nav-center a{padding:8px 4px}
}

/* --- SAFE AREA INSETS for notched iPhones --- */
@supports(padding:env(safe-area-inset-top)){
  .header{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
  .footer{padding-bottom:max(24px,env(safe-area-inset-bottom))}
  .nav-overlay-inner{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));padding-bottom:max(40px,env(safe-area-inset-bottom))}
  .ed-overlay-close{left:max(20px,env(safe-area-inset-left))}
}

/* --- 1024px: Tablet --- */
@media(max-width:1024px){
  .editorial-grid{grid-template-columns:repeat(2,1fr)}
  .fashion-card{min-width:calc(50% - 12px)}
  .ed-carousel-card{min-width:calc(33.333% - 14px)}
}

/* --- 768px: Small tablet / Large phone landscape --- */
@media(max-width:768px){
  :root{--pad-x:20px;--space-section:72px;--space-block:36px;--space-row:20px;--pad-section:72px}
  /* Earlier these were `display:none` — that hid ABOUT/BUSINESS/CONTACT
     and the social icons row on every mobile screen. Now we keep them
     visible; pap-header.js re-styles the mobile overlay so the extra
     items fit cleanly under the main column. */
  .nav-extra-links{display:flex}
  .nav-bottom-row{display:flex}
  .header{padding:0 16px;height:60px}
  .header-left{gap:4px}
  .header-left-item svg{width:18px;height:18px}
  .hero{margin-top:60px;height:60vh}
  .hero-content{left:20px;bottom:28px}
  .hero-title{font-size:clamp(1.6rem,6vw,2.5rem)}
  .hero-symbol{right:20px;bottom:28px}
  .hero-watermark{right:20px;bottom:28px;width:40px;height:40px}

  /* Reduce all 48px track/section paddings — use CSS var */
  .fashion-heading{padding:0 var(--pad-x)}
  .carousel-track{padding:0 var(--pad-x)}
  .ed-row-label{padding:0 var(--pad-x)}
  .ed-row-track{padding:0 var(--pad-x)}
  .ed-search-grid{padding:0 var(--pad-x)}
  .ed-all-header{padding:32px var(--pad-x) 16px}
  .ed-all-grid{padding:12px var(--pad-x) 60px}
  .nf-top{padding:0 var(--pad-x)}
  .nf-track{padding:0 var(--pad-x)}
  .ai-rec-badge{padding:0 var(--pad-x)}
  .creator-results{padding:0 var(--pad-x)}

  /* Cards */
  .fashion-card{min-width:calc(75% - 12px)}
  .carousel-arrow{top:50%;transform:translateY(-50%)}
  .ed-carousel-card{min-width:calc(50% - 14px)}
  .ed-row-card{min-width:180px;max-width:180px}
  .fashion-card-img{aspect-ratio:1/1}
  .nf-card{min-width:260px;max-width:260px}
  .nf-card-img{aspect-ratio:1/1}
  .editorial-grid{grid-template-columns:repeat(2,1fr)}
  /* Editorial hero title — render at headline scale on mobile (≈3× the
     prior compact size) so the editorial name dominates the hero card
     the way it does on desktop. */
  .ed-hero-title{font-size:clamp(72px,18vw,108px);line-height:1.05}
  .ed-hero-issue{font-size:11px;letter-spacing:.18em}
  .fashion-card-title{font-size:12px}
  .ed-card-title{font-size:14px}

  /* Nav overlay — single column on mobile.
     The left column uses CSS Grid so the BOTTOM area splits into
     two cells: socials on the LEFT, ABOUT/BUSINESS/CONTACT on the RIGHT. */
  .nav-overlay-inner{flex-direction:column;padding:70px 24px 40px}
  .nav-left-col{
    width:100%;order:2;margin-top:32px;
    display:grid!important;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "top top"
      "links links"
      "bottom extra";
    column-gap:20px;
    row-gap:0;
    transform:none!important;
    opacity:1!important;
  }
  .nav-left-top{grid-area:top;margin-bottom:16px}
  .nav-left-links:not(.nav-extra-links){grid-area:links;margin-bottom:0}
  .nav-bottom-row{
    grid-area:bottom;
    margin-top:32px;
    padding-top:20px;
    border-top:1px solid rgba(0,0,0,.08);
    align-self:start;
  }
  .nav-extra-links{
    grid-area:extra;
    margin:32px 0 0 0!important;
    padding-top:20px;
    border-top:1px solid rgba(0,0,0,.08);
    display:flex!important;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
    align-self:start;
    text-align:right;
  }
  .nav-extra-links a{text-align:right}
  .nav-right-col{width:100%;align-items:flex-start;order:1}
  .nav-right-col a{font-size:clamp(28px,8vw,48px)}
  /* .nav-close hidden */
  /* SUBSCRIBE / SUBMISSION / PULL-LETTER / LOGIN-JOIN — keep all
     primary nav items the same size for visual consistency. */
  .nav-left-top a{font-size:clamp(14px,3vw,18px)}
  .nav-left-links a{font-size:clamp(14px,3vw,18px)}

  /* Search bar */
  .search-bar{padding:0 16px}
  .search-dropdown{padding:12px 16px 20px}
  .search-dropdown-item img{width:44px;height:44px}

  /* Footer */
  .footer{padding:32px 20px 16px}
  .footer-top{display:none}
  .footer-marquee{border-top:none;border-bottom:none;margin-bottom:0;margin-top:70px;padding:0}
  .footer-marquee-track span{font-size:1.5rem;padding:0 12px}
  .footer-bottom-nav{flex-direction:column;align-items:center;gap:12px}
  .footer-bottom-nav-links,.footer-bottom-nav-social,.footer-bottom-nav-center{gap:12px}

  /* Page overlay */
  .page-overlay .page-header{padding:0 16px}
  .page-overlay .page-back{left:16px}
  .page-overlay .page-container{padding:24px var(--pad-x) 60px}
  .page-overlay h1{font-size:22px}

  /* Editorial detail */
  .ed-hero-split{flex-direction:column}
  .ed-hero-img,.ed-hero-info{width:100%}
  .ed-hero-info{min-height:40vh;padding:32px var(--pad-x)}
  .ed-gallery-grid{grid-template-columns:1fr}
  .ed-credits-wrap{padding:40px var(--pad-x)}
  .ed-credits-table{column-gap:20px;row-gap:6px}
  .ed-cred-role{font-size:11px}
  .ed-cred-val{font-size:13px}
  .ed-more-card{flex:1 1 0;min-width:0}

  /* Creator popup */
  .creator-popup{width:95%;max-width:none}
  .creator-popup-header{padding:32px 20px 20px}
  .creator-popup-stats{padding:16px 20px;gap:20px}
  .creator-popup-works{padding:20px}

  /* Film section */
  .film-label{font-size:clamp(1.4rem,4vw,2rem)}

  /* Shorts */
  .shorts-carousel{height:440px}
  .shorts-item{width:210px;height:373px}

  /* Signup popup */
  .signup-popup{padding:36px 24px}
}

/* --- 480px: Large phones (iPhone Plus/Max 428px, Galaxy A 384px) --- */
@media(max-width:480px){
  :root{--pad-x:16px;--space-section:56px;--space-block:32px;--space-row:18px;--pad-section:56px}
  .header{padding:0 12px;height:56px}
  .hero{margin-top:56px;height:60vh}
  .hero-content{left:16px;bottom:24px}
  .hero-title{font-size:clamp(1.4rem,7vw,2rem)}
  .hero-issue{font-size:10px;letter-spacing:.2em}
  .hero-symbol{right:16px;bottom:26px}
  .hero-watermark{right:16px;bottom:16px;width:36px;height:36px}
  .hero-watermark span{font-size:10px}

  /* Track paddings — tighter, use CSS var */
  .fashion-heading{padding:0 var(--pad-x)}
  .carousel-track{padding:0 var(--pad-x)}
  .ed-row-label{padding:0 var(--pad-x)}
  .ed-row-track{padding:0 var(--pad-x)}
  .ed-search-grid{padding:0 var(--pad-x);grid-template-columns:repeat(2,1fr);gap:10px}
  .ed-all-header{padding:24px var(--pad-x) 12px}
  .ed-all-grid{padding:8px var(--pad-x) 60px;grid-template-columns:repeat(2,1fr);gap:10px}
  .film-all-grid{grid-template-columns:repeat(2,1fr)}
  .art-all-grid{grid-template-columns:repeat(2,1fr)}
  #filmFilterWrap,#artFilterWrap{padding:0 var(--pad-x) 12px!important}
  .nf-top{padding:0 var(--pad-x)}
  .nf-track{padding:0 var(--pad-x)}
  .ai-rec-badge{padding:0 var(--pad-x)}
  .creator-results{padding:0 var(--pad-x)}

  /* Cards — smaller for phone screens */
  .fashion-card{min-width:calc(85% - 8px)}
  .ed-row-card{min-width:155px;max-width:155px}
  .nf-card{min-width:240px;max-width:240px}
  .creator-card{min-width:160px;max-width:160px;padding:12px}
  .fashion-card-title{font-size:11px}
  .ed-card-title{font-size:13px}

  /* Nav overlay */
  .nav-overlay-inner{padding:60px 20px 32px}
  .nav-right-col a{font-size:clamp(24px,9vw,36px)}
  .nav-left-top a{font-size:15px}
  .nav-left-links a{font-size:15px}
  /* .nav-close hidden */

  /* Footer */
  .footer{padding:24px 16px 12px}
  .footer-marquee{margin-bottom:0;padding:0}
  .footer-top{margin-bottom:16px}
  .footer-bottom-nav-center{gap:12px}
  .footer-bottom-nav-center a{font-size:10px}

  /* Editorial detail */
  .ed-hero-info{min-height:35vh;padding:24px var(--pad-x)}
  .ed-hero-title{font-size:clamp(64px,20vw,96px);line-height:1.05}
  .ed-gallery{padding:24px var(--pad-x)}
  .ed-credits-wrap{padding:32px var(--pad-x)}
  .ed-credits-table{
    grid-template-columns: minmax(80px, max-content) minmax(0, 1fr);
    column-gap:14px;
    row-gap:4px;
  }
  .ed-cred-role{font-size:10px;letter-spacing:.05em}
  .ed-cred-val{font-size:12px}
  .ed-more-wrap{padding:40px 0 60px}

  /* Shorts carousel */
  .shorts-section{padding:4px 0}
  .shorts-section>.shorts-title{display:none}
  .shorts-carousel{height:400px}
  .shorts-item{width:190px;height:337px}
  .shorts-nav.prev{left:8px}
  .shorts-nav.next{right:8px}

  /* Film */
  .nf-popup{width:280px}
  .film-list a{font-size:clamp(.8rem,3vw,1rem)}

  /* Search bar */
  .search-bar{padding:0 12px}
  .search-bar-inner{height:38px;padding:0 12px}

  /* Signup popup */
  .signup-popup{padding:32px 20px;width:92%}
  .signup-popup h2{font-size:16px}
}

/* --- 390px: iPhone 12/13/14 (390px), Galaxy S21-S24 (360-384px) --- */
@media(max-width:390px){
  :root{--pad-x:12px;--space-section:44px;--space-block:28px;--space-row:16px;--pad-section:44px}
  .header{padding:0 10px;height:54px}
  .header-left{gap:2px}
  .header-left-item svg{width:16px;height:16px}
  .header-right{gap:4px}
  .lang-btn{padding:2px 2px;font-size:9px}
  .lang-btn svg{width:12px;height:12px}
  .lang-btn select{font-size:9px}
  .header-right-item svg{width:16px;height:16px}
  .logo-wrap img,.floating-logo.in-header img{height:19px}
  .hero{margin-top:54px;height:60vh}
  .hero-content{left:14px;bottom:20px}
  .hero-symbol{right:14px;bottom:24px}
  .hero-title{font-size:1.4rem}

  /* Track paddings — minimal, via CSS var */
  .fashion-heading,.carousel-track,.ed-row-label,.ed-row-track,.nf-top,.nf-track,.ai-rec-badge,.creator-results,.ed-search-grid{padding-left:var(--pad-x);padding-right:var(--pad-x)}

  /* Cards */
  .ed-row-card{min-width:140px;max-width:140px}
  .nf-card{min-width:220px;max-width:220px}
  .fashion-card{min-width:calc(90% - 8px)}
  .creator-card{min-width:150px;max-width:150px}

  /* Nav */
  .nav-right-col a{font-size:clamp(22px,8vw,32px);line-height:1.15}

  /* Shorts */
  .shorts-carousel{height:380px}
  .shorts-item{width:175px;height:311px}
  .shorts-title{font-size:10px;letter-spacing:.2em;margin-bottom:24px}

  /* Footer */
  .footer-legal{font-size:10px}
  .footer-marquee-track span{font-size:1.275rem}

  /* Editorial detail */
  .ed-hero-title{font-size:clamp(60px,22vw,84px);line-height:1.05}
  .ed-gallery-grid{gap:8px}
  .creator-works-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
}

/* --- 360px: iPhone SE (375px), Galaxy A series (360px), small devices --- */
@media(max-width:375px){
  .header{height:52px}
  .hero{margin-top:52px;height:60vh}
  .hero-title{font-size:1.25rem}
  .hero-issue{font-size:9px}

  .ed-row-card{min-width:130px;max-width:130px}
  .nf-card{min-width:200px;max-width:200px}
  .ed-row-track{gap:6px}
  .nf-track{gap:4px}
  .carousel-track{gap:10px}

  .nav-overlay-inner{padding:52px 16px 24px}
  .nav-right-col a{font-size:22px}
  .nav-left-top a{font-size:14px}
  .nav-left-links a{font-size:14px}

  .shorts-carousel{height:360px}
  .shorts-item{width:160px;height:284px}
  .shorts-nav{width:40px;height:40px;font-size:18px}

  .fashion-section{padding:40px 0 16px}
  .editorial-section{padding:16px 0}
  .ed-row{margin-bottom:24px}

  .signup-popup{padding:28px 16px;width:95%}
  .signup-popup h2{font-size:14px;letter-spacing:.06em}
  .signup-popup .popup-cta{padding:12px 28px;font-size:10px}

  .nf-popup{width:260px}
  .nf-popup-body{padding:10px 12px 14px}
}

/* --- 320px: Galaxy Z Fold (folded 280px), very small screens --- */
@media(max-width:320px){
  :root{--pad-x:8px;--space-section:36px;--space-block:24px;--space-row:14px;--pad-section:36px}
  .header{height:48px;padding:0 8px}
  .hamburger span{width:20px}
  .hamburger span:nth-child(1){transform:translateY(-6px)}
  .hamburger span:nth-child(3){transform:translateY(6px)}
  .hamburger.is-active span:nth-child(1){transform:translateY(0) rotate(45deg)}
  .hamburger.is-active span:nth-child(3){transform:translateY(0) rotate(-45deg)}
  .hero{margin-top:48px;height:60vh}
  .hero-title{font-size:1.1rem}
  .hero-content{left:10px;bottom:16px}
  .hero-symbol{right:10px;bottom:22px}

  .fashion-heading,.carousel-track,.ed-row-label,.ed-row-track,.nf-top,.nf-track,.ai-rec-badge,.creator-results,.ed-search-grid{padding-left:var(--pad-x);padding-right:var(--pad-x)}

  .ed-row-card{min-width:115px;max-width:115px}
  .nf-card{min-width:180px;max-width:180px}
  .fashion-card{min-width:95%}

  .nav-right-col a{font-size:18px}
  .nav-left-top a{font-size:13px}
  .nav-left-links a{font-size:13px}

  .shorts-carousel{height:320px}
  .shorts-item{width:140px;height:248px}
  .shorts-nav{width:36px;height:36px;font-size:16px}
  .shorts-nav.prev{left:4px}
  .shorts-nav.next{right:4px}

  .footer{padding:20px 8px 12px}
  .footer-bottom-nav-center{gap:8px}
  .footer-bottom-nav-center a{font-size:9px}
  .footer-legal{font-size:9px}

  .creator-popup-header{padding:24px 12px 16px}
  .creator-popup-works{padding:16px 12px}
  .creator-popup-stats{padding:12px;gap:12px}
  .creator-stat-num{font-size:16px}

  .signup-popup{padding:24px 12px;width:96%}
}

/* --- Landscape phones: limit hero height --- */
@media(max-height:500px) and (orientation:landscape){
  .hero{min-height:320px;height:70vh}
  .shorts-carousel{height:300px}
  .shorts-item{width:140px;height:248px}
  .ed-hero-split{flex-direction:row}
  .ed-hero-img,.ed-hero-info{width:50%}
}

/* Scroll reveal */
.sr{opacity:0;transform:translateY(20px);transition:opacity .5s,transform .5s}
.sr.v{opacity:1;transform:translateY(0)}

/* SIGNUP POPUP */
.signup-popup-overlay{position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.signup-popup-overlay.active{opacity:1;visibility:visible}
.signup-popup{background:#000;border:1px solid rgba(255,255,255,.15);padding:48px 40px;max-width:440px;width:90%;text-align:center;position:relative;animation:popIn .4s ease both}
@keyframes popIn{from{opacity:0;transform:scale(.95) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.signup-popup-close{position:absolute;top:16px;right:20px;background:none;border:none;color:rgba(255,255,255,.4);font-size:24px;cursor:pointer;transition:color .2s;font-family:'Montserrat',sans-serif}
.signup-popup-close:hover{color:#fff}
.signup-popup h2{font-size:18px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;color:#fff}
.signup-popup .popup-sub{font-size:12px;color:rgba(255,255,255,.4);line-height:1.8;margin-bottom:28px}
.signup-popup .popup-cta{display:inline-block;padding:13px 36px;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;background:#fff;color:#000;border:1.5px solid #fff;cursor:pointer;font-family:'Montserrat',sans-serif;transition:all .3s;margin-bottom:12px}
.signup-popup .popup-cta:hover{background:transparent;color:#fff}
.signup-popup .popup-skip{display:block;font-size:11px;color:rgba(255,255,255,.3);cursor:pointer;background:none;border:none;font-family:'Montserrat',sans-serif;letter-spacing:.1em;transition:color .2s;margin:0 auto}
.signup-popup .popup-skip:hover{color:rgba(255,255,255,.6)}

/* ── COOKIE CONSENT BANNER ───────────────────────── */
#cookieConsent{position:fixed;bottom:0;left:0;right:0;z-index:10000;background:rgba(0,0,0,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:20px 24px;border-top:1px solid rgba(255,255,255,.1);animation:ccSlideUp .4s ease;font-family:var(--sans)}
#cookieConsent.cc-hide{animation:ccSlideDown .4s ease forwards}
.cc-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cc-text{color:rgba(255,255,255,.85);font-size:13px;line-height:1.6;flex:1;min-width:240px}
.cc-text-ko{color:rgba(255,255,255,.5);font-size:11px;line-height:1.5;margin-top:4px;flex-basis:100%}
.cc-actions{display:flex;gap:12px;flex-shrink:0}
.cc-btn{padding:10px 24px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:1.5px solid rgba(255,255,255,.3);cursor:pointer;font-family:'Montserrat',var(--sans);transition:all .25s}
.cc-reject{background:transparent;color:rgba(255,255,255,.6)}
.cc-reject:hover{border-color:rgba(255,255,255,.6);color:#fff}
.cc-accept{background:#fff;color:#000;border-color:#fff}
.cc-accept:hover{background:transparent;color:#fff}
@keyframes ccSlideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes ccSlideDown{from{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}
@media(max-width:600px){
  .cc-inner{flex-direction:column;text-align:center}
  .cc-actions{width:100%;justify-content:center}
  .cc-text-ko{text-align:center}
}

/* Auth Button in Header — now inside header-right as .header-right-item */
/* Article detail mobile title fix */
@media(max-width:768px){
  #artDetailDesc p{font-size:13px !important}
}

/* Creator popup text color fix */
.creator-popup{color:rgba(255,255,255,.9)}
.creator-popup-name{color:#fff}
.creator-stat-num{color:#fff}
.creator-popup-works-title{color:rgba(255,255,255,.7)}

/* Creator popup stat num size — match work-title (11px) */
.creator-stat-num{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}


/* Footer marquee mobile fixes */
@media(max-width:768px){
    .footer-legal{margin-top:133px !important}
}

/* ======== PAGINATION ======== */
.pap-pagination{display:flex;justify-content:center;align-items:center;gap:6px;padding:32px 48px 48px;flex-wrap:wrap;}
.pap-pagination button{
  width:40px;height:40px;border:none;border-radius:10px;background:#e8e8ec;color:#666;
  font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.pap-pagination button:hover{background:#d0d0d6;color:#333;}
.pap-pagination button.active{background:#3b6cff;color:#fff;}
.pap-pagination button.active:hover{background:#2b5ce6;}
.pap-pagination button:disabled{opacity:.4;cursor:default;pointer-events:none;}
/* Legacy static dots — kept for non-interactive contexts */
.pap-pagination .pag-dots{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:#999;font-weight:700;letter-spacing:2px;font-size:14px;}
/* Hover-interactive ellipsis: shows ··· by default, morphs into «/» on hover/focus
   — clicking jumps ±5 pages. On touch devices, the same single tap fires the jump
   and the :active state provides the visual hint. */
.pap-pagination .pag-jump{
  position:relative;width:40px;height:40px;border:none;border-radius:10px;
  background:transparent;color:#999;cursor:pointer;padding:0;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;font-weight:700;
  transition:background-color .25s cubic-bezier(.65,.05,.36,1),color .25s ease;
}
.pap-pagination .pag-jump .pag-jump-dots,
.pap-pagination .pag-jump .pag-jump-arrow{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transition:opacity .28s cubic-bezier(.65,.05,.36,1),transform .28s cubic-bezier(.65,.05,.36,1);
  pointer-events:none;
}
.pap-pagination .pag-jump .pag-jump-dots{
  font-size:14px;letter-spacing:2px;opacity:1;transform:translateX(0);
}
.pap-pagination .pag-jump .pag-jump-arrow{
  font-size:18px;letter-spacing:0;opacity:0;
}
.pap-pagination .pag-jump.pag-jump-prev .pag-jump-arrow{transform:translateX(-8px);}
.pap-pagination .pag-jump.pag-jump-next .pag-jump-arrow{transform:translateX(8px);}
/* Hover / focus / revealed (mobile tap) state — cross-fade with slide */
.pap-pagination .pag-jump:hover,
.pap-pagination .pag-jump:focus-visible,
.pap-pagination .pag-jump.is-revealed{
  background:#d0d0d6;color:#333;outline:none;
}
.pap-pagination .pag-jump:hover .pag-jump-dots,
.pap-pagination .pag-jump:focus-visible .pag-jump-dots,
.pap-pagination .pag-jump.is-revealed .pag-jump-dots{opacity:0;}
.pap-pagination .pag-jump.pag-jump-prev:hover .pag-jump-dots,
.pap-pagination .pag-jump.pag-jump-prev:focus-visible .pag-jump-dots,
.pap-pagination .pag-jump.pag-jump-prev.is-revealed .pag-jump-dots{transform:translateX(6px);}
.pap-pagination .pag-jump.pag-jump-next:hover .pag-jump-dots,
.pap-pagination .pag-jump.pag-jump-next:focus-visible .pag-jump-dots,
.pap-pagination .pag-jump.pag-jump-next.is-revealed .pag-jump-dots{transform:translateX(-6px);}
.pap-pagination .pag-jump:hover .pag-jump-arrow,
.pap-pagination .pag-jump:focus-visible .pag-jump-arrow,
.pap-pagination .pag-jump.is-revealed .pag-jump-arrow{opacity:1;transform:translateX(0);}
/* dark theme pagination (for articles/films dark pages) */
.pap-pagination.dark button{background:rgba(255,255,255,.08);color:#888;}
.pap-pagination.dark button:hover{background:rgba(255,255,255,.15);color:#fff;}
.pap-pagination.dark button.active{background:#3b6cff;color:#fff;}
.pap-pagination.dark .pag-dots{color:#555;}
.pap-pagination.dark .pag-jump{background:transparent;color:#666;}
.pap-pagination.dark .pag-jump:hover,
.pap-pagination.dark .pag-jump:focus-visible,
.pap-pagination.dark .pag-jump.is-revealed{background:rgba(255,255,255,.15);color:#fff;}
@media(max-width:600px){
  .pap-pagination{gap:4px;padding:24px 16px 36px;}
  .pap-pagination button{width:34px;height:34px;font-size:11px;border-radius:8px;}
  .pap-pagination .pag-dots,
  .pap-pagination .pag-jump{width:34px;height:34px;border-radius:8px;}
  .pap-pagination .pag-jump .pag-jump-dots{font-size:12px;}
  .pap-pagination .pag-jump .pag-jump-arrow{font-size:16px;}
}

/* ======== IMAGE LIGHTBOX (pap-lightbox.js) ========
   Full-screen image viewer for editorial/article galleries.
   Locked to z-index above all other overlays (10500). */
.pap-lightbox{
  position:fixed;inset:0;z-index:10500;
  background:rgba(0,0,0,.95);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .28s ease,visibility .28s ease;
}
.pap-lightbox.is-open{opacity:1;visibility:visible}
.pap-lb-close{
  position:fixed;top:24px;left:24px;z-index:2;
  width:44px;height:44px;
  background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.15);
  border-radius:50%;
  color:#fff;font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:.85;transition:opacity .2s,background .2s,transform .2s;
}
.pap-lb-close:hover,.pap-lb-close:focus-visible{
  opacity:1;background:rgba(255,255,255,.12);transform:scale(1.05);outline:none;
}
.pap-lb-prev,.pap-lb-next{
  position:fixed;top:50%;transform:translateY(-50%);z-index:2;
  width:56px;height:56px;
  background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.1);
  border-radius:50%;
  color:#fff;font-size:32px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:.7;transition:opacity .2s,background .2s;
  font-family:inherit;
}
.pap-lb-prev{left:24px}
.pap-lb-next{right:24px}
.pap-lb-prev:hover,.pap-lb-next:hover,
.pap-lb-prev:focus-visible,.pap-lb-next:focus-visible{
  opacity:1;background:rgba(255,255,255,.12);outline:none;
}
.pap-lb-stage{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  padding:80px 80px;
  /* allow native pinch-zoom on mobile */
  touch-action:pinch-zoom;
}
.pap-lb-img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
  /* The stage already takes pinch-zoom gestures; the image inherits.
     Keep cursor as default (not zoom-in) since we're already in viewer. */
  cursor:default;
}
.pap-lb-counter{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:2;
  color:rgba(255,255,255,.55);
  font-family:'Montserrat',var(--sans);
  font-size:12px;letter-spacing:.15em;
  padding:6px 14px;
  background:rgba(0,0,0,.4);border-radius:20px;
  pointer-events:none;
}
@media(max-width:768px){
  .pap-lb-close{top:16px;left:16px;width:40px;height:40px;font-size:20px}
  .pap-lb-prev,.pap-lb-next{width:44px;height:44px;font-size:26px}
  .pap-lb-prev{left:8px}
  .pap-lb-next{right:8px}
  .pap-lb-stage{padding:60px 56px}
  .pap-lb-counter{bottom:16px;font-size:11px}
}
@media(max-width:480px){
  .pap-lb-close{top:10px;left:10px;width:36px;height:36px;font-size:18px}
  .pap-lb-prev,.pap-lb-next{width:36px;height:36px;font-size:22px}
  .pap-lb-prev{left:4px}
  .pap-lb-next{right:4px}
  .pap-lb-stage{padding:50px 44px}
}

/* ======== UNIFIED OVERLAY CLOSE BUTTON ========
   Per QA spec: every overlay (detail + list) gets the close X at top-LEFT
   of its mini-header for consistent placement. The button is the first
   item inside .overlay-mini-left, sitting just before the hamburger. */
/* QA #99 — overlay-mini-close X buttons removed in favour of the
   full-page metaphor (back via browser history / hamburger / logo).
   Keeping the rule as display:none catches any stale X that lingers
   in cached HTML or older inline pages until they get rebuilt. */
.overlay-mini-close{display:none!important}

/* Detail overlays now use the mini-header's close button — hide the
   legacy fixed top-left X that used to live on each detail overlay
   directly so we don't show two close buttons. */
.ed-overlay > .ed-overlay-close,
.film-detail-overlay > .ed-overlay-close,
.art-detail-overlay > .ed-overlay-close{
  display:none;
}
/* Same for list overlays — the X used to live inside .ed-all-header.
   With mini-header close present, hide the old one. */
.ed-all-overlay .ed-all-header .ed-all-close{
  display:none;
}

/* ======== ARTICLE HASHTAG CHIPS ======== */
.art-tag-chip{
  display:inline-block;
  padding:5px 12px;
  margin:3px 5px 3px 0;
  background:rgba(255,255,255,.08);
  color:#aaa;
  font-size:10px;
  font-weight:500;
  letter-spacing:.05em;
  border-radius:14px;
  text-decoration:none;
  transition:background .2s ease, color .2s ease, transform .2s ease;
  cursor:pointer;
}
.art-tag-chip:hover,
.art-tag-chip:focus-visible{
  background:rgba(255,255,255,.18);
  color:#fff;
  transform:translateY(-1px);
  outline:none;
}

/* Active-tag chip — shown at the top of articles.html when ?tag= is set */
.art-active-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  background:#fff;
  color:#000;
  font-family:'Montserrat',var(--sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  border-radius:20px;
  margin-bottom:16px;
}
.art-active-tag-clear{
  background:none;
  border:none;
  color:#000;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  padding:0 0 0 4px;
  opacity:.5;
  transition:opacity .2s;
}
.art-active-tag-clear:hover,
.art-active-tag-clear:focus-visible{outline:none;opacity:1}

/* ======== UNIFIED CAROUSEL ARROW STATE ========
   Triggered by _papUpdateArrows in pap-app.js. .is-disabled means
   "there's nothing further to scroll in this direction" — we hide the
   arrow rather than greying it out so the user doesn't see a button
   that does nothing. */
.carousel-arrow.is-disabled,
.ed-row-arrow.is-disabled,
.nf-nav.is-disabled{
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}