/* =========================================================
   ENJO 레이아웃 — 공통 (토큰, 헤더, 모바일 메뉴, 푸터)
   ========================================================= */
:root{
  --bg:#fafaf8;
  --bg-alt:#f3f3f1;
  --ph:#ececea;
  --ink:#1a1a1a;
  --sub:#6e6e6c;
  --line:#d8d8d5;
  --dark:#151514;
  --dark-sub:#8a8986;
  --dark-ink:#f1f0ec;
  --serif:'Cormorant Garamond','Times New Roman',serif;
  --sans:'Jost','Noto Sans KR','Helvetica Neue',Arial,sans-serif;
  --wrap:1440px;
  --sec:110px;
  --hd-h:72px;
  --fs-display:clamp(40px,4.6vw,64px);
  --fs-quote:clamp(28px,2.8vw,40px);
  --fs-title:30px;
  --fs-label:14px;
  --fs-body:13px;
  --fs-small:11px;
  --ease:cubic-bezier(.7,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased}
.wrapper a,.hd a,.ft a,.m-menu a{color:inherit;text-decoration:none}
:is(.hd,.ft,.m-menu,.ej-main) :is(h1,h2,h3,h4,p,ul,ol,li,blockquote,figure){margin:0;padding:0;list-style:none}
:is(.hd,.ft,.m-menu,.ej-main) img{display:block;max-width:100%}
:is(.hd,.ft,.m-menu,.ej-main) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0}
@media (max-width:1519px){.wrap{padding:0 40px}}

.article_mover{position:absolute;left:-9999px;top:0}
.article_mover:focus{left:16px;top:16px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;font-size:13px}

/* 공통 요소 */
.sec-title{font-family:var(--sans);font-size:var(--fs-label);font-weight:400;letter-spacing:.32em}
.link{display:inline-flex;align-items:center;gap:12px;font-size:var(--fs-small);font-weight:500;letter-spacing:.2em}
.link .arr{display:inline-block;width:14px;height:1px;background:currentColor;position:relative;transition:width .2s}
.link .arr::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.link:hover .arr{width:20px}
.wrapper a:focus-visible,.hd a:focus-visible,.ej-main button:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* 헤더 */
.hd{position:sticky;top:0;z-index:10;background:rgba(250,250,248,.95);backdrop-filter:blur(6px);color:var(--ink);transition:background .5s,color .5s}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--hd-h)}
.admin-bar .hd,body.rx-admin-bar .hd{top:0}
.menu-open .hd{background:transparent;backdrop-filter:none;color:var(--dark-ink)}
.hd .logo{font-family:var(--serif);font-size:28px;font-weight:400;letter-spacing:.14em;line-height:1}
.hd .logo img{height:28px;width:auto}
.hd-nav ul{display:flex;gap:16px;font-size:var(--fs-small);font-weight:400;letter-spacing:.14em;text-transform:uppercase}
.hd-nav li{display:flex;align-items:center;position:relative}
.hd-nav li+li::before{content:"/";margin-right:16px;color:var(--sub)}
.hd-nav a{position:relative;display:inline-block;padding:6px 0}
.hd-nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.hd-nav a:hover::after,.hd-nav a:focus-visible::after,.hd-nav li.on>a::after{transform:scaleX(1);transform-origin:left}
.hd-nav .d2{position:absolute;left:50%;top:100%;display:block;min-width:160px;padding:14px 0;background:var(--bg);box-shadow:0 18px 30px -20px rgba(0,0,0,.25);transform:translateX(-50%);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s;text-transform:none;letter-spacing:.08em}
.hd-nav .d2 li{display:block}.hd-nav .d2 li::before{display:none}
.hd-nav .d2 a{display:block;padding:8px 22px;white-space:nowrap}
.hd-nav .d2 a::after{display:none}
.hd-nav .d2 a:hover{color:var(--sub)}
.hd-nav li:hover>.d2,.hd-nav li:focus-within>.d2{opacity:1;visibility:visible;transition:opacity .4s}

/* 모바일 메뉴 — 짧아지는 세 줄 버튼 + 버튼에서 원형으로 퍼지는 화면 */
.menu-btn{display:none;position:relative;width:40px;height:40px;margin-right:-8px;color:inherit}
.menu-btn i{position:absolute;left:50%;height:1px;background:currentColor;transition:transform .6s var(--ease),width .5s var(--ease),margin .5s var(--ease),opacity .3s,top .5s var(--ease)}
.menu-btn i:nth-child(1){top:14px;width:22px;margin-left:-11px}
.menu-btn i:nth-child(2){top:20px;width:16px;margin-left:-5px}
.menu-btn i:nth-child(3){top:26px;width:10px;margin-left:1px}
.menu-open .menu-btn i:nth-child(1){top:20px;transform:rotate(45deg)}
.menu-open .menu-btn i:nth-child(2){opacity:0}
.menu-open .menu-btn i:nth-child(3){top:20px;width:22px;margin-left:-11px;transform:rotate(-45deg)}
.m-menu{display:none;position:fixed;inset:0;z-index:9;background:var(--dark);color:var(--dark-ink);padding:calc(var(--hd-h) + 48px) 24px 40px;flex-direction:column;justify-content:space-between;overflow-y:auto;clip-path:circle(0 at var(--mx,100%) var(--my,0));visibility:hidden;transition:clip-path .9s var(--ease),visibility 0s .9s}
.menu-open .m-menu{clip-path:circle(150% at var(--mx,100%) var(--my,0));visibility:visible;transition:clip-path .9s var(--ease)}
.m-menu nav a{display:block;font-family:var(--serif);font-weight:300;font-size:44px;line-height:1.25;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .7s cubic-bezier(.2,.6,.2,1)}
.menu-open .m-menu nav a{opacity:1;transform:none}
.menu-open .m-menu nav li:nth-child(1) a{transition-delay:.25s}
.menu-open .m-menu nav li:nth-child(2) a{transition-delay:.31s}
.menu-open .m-menu nav li:nth-child(3) a{transition-delay:.37s}
.menu-open .m-menu nav li:nth-child(4) a{transition-delay:.43s}
.menu-open .m-menu nav li:nth-child(5) a{transition-delay:.49s}
.menu-open .m-menu nav li:nth-child(n+6) a{transition-delay:.55s}
.m-menu nav a{text-transform:lowercase}
.m-menu nav a::first-letter{text-transform:uppercase}
.m-menu .m-info{font-size:var(--fs-small);line-height:1.9;letter-spacing:.06em;color:var(--dark-sub)}
.m-menu .m-info a:hover{color:var(--dark-ink)}

/* 푸터 — 사선 분할 다크 */
.ft{position:relative;padding:calc(var(--sec) + 40px) 0 var(--sec);background:var(--bg);color:var(--dark-ink);overflow:hidden}
.ft.ft-gray{background:var(--bg-alt)}
.ft::before{content:"";position:absolute;inset:0;background:var(--dark);clip-path:polygon(0 22%,100% 0,100% 100%,0 100%)}
.ft .wrap{position:relative}
.ft-top{display:grid;grid-template-columns:5fr 3fr 4fr;align-items:start}
.ft-top .lead{font-size:var(--fs-body);color:var(--dark-sub);margin-top:10px}
.ft-info{font-size:var(--fs-body);line-height:1.8}
.ft-info a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s}
.ft-info a:hover{background-size:100% 1px}
.ft .sns{display:flex;justify-content:flex-end;gap:12px;font-size:var(--fs-small);color:var(--dark-sub)}
.ft .sns a{transition:color .4s}
.ft .sns a:hover{color:#fff}
.ft .sns a+a::before{content:"/";margin-right:12px;color:var(--dark-sub)}
.ft-bottom{display:flex;justify-content:space-between;margin-top:90px;padding-top:24px;border-top:1px solid #2c2c2a;font-size:var(--fs-small);letter-spacing:.14em;color:var(--dark-sub)}
.ft-bottom em{font-style:normal;color:var(--dark-ink)}
.ft a:focus-visible{outline:1px solid var(--dark-ink);outline-offset:4px}

/* Lenis 부드러운 스크롤 */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

@media (max-width:900px){
  :root{--sec:72px;--fs-title:26px}
  .wrap{padding:0 24px}
  .hd-nav{display:none}
  .menu-btn{display:block}
  .m-menu{display:flex}
  .ft{padding-top:170px}
  .ft::before{clip-path:polygon(0 90px,100% 0,100% 100%,0 100%)}
  .ft-top{grid-template-columns:1fr;gap:32px}
  .ft .sns{justify-content:flex-start}
}
@media (max-width:560px){
  .ft-bottom{flex-direction:column;gap:8px}
}