/* moogm_common.css — 버튼 · 링크 · 제목 등 공통 (tokens 다음에 불러오기) */
/* ==========================================================
   2. 공통
   ========================================================== */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 14px;background:var(--c-ink);color:#fff;font-size:1.3rem}
.skip:focus{left:8px}

.sec-sub{font:400 1.3rem/1 var(--f-serif);letter-spacing:.24em;color:var(--c-brass-dk);margin-bottom:22px}
.sec-title{font:400 clamp(2.6rem,3.2vw,4rem)/1.45 var(--f-serif);letter-spacing:-.01em}
.sec-title--lg{font-size:clamp(3rem,4vw,4.8rem)}
.lead{font-weight:300;font-size:1.7rem;line-height:2;color:var(--c-ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 24px;border:1px solid currentColor;font:500 1.3rem/1 var(--f-sans);letter-spacing:.1em;white-space:nowrap;transition:background .25s,color .25s,border-color .25s,transform .35s var(--ease-out)}
.btn:hover{background:var(--c-brass-dk);border-color:var(--c-brass-dk);color:#fff}
.btn--fill{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.btn--fill:hover{background:var(--c-brass-dk);border-color:var(--c-brass-dk)}
.btn--sm{height:38px;padding:0 18px;font-size:1.2rem}
.btn__narrow{display:none}
.btn:disabled{opacity:.35;cursor:not-allowed;background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.tlink{display:inline-block;padding-bottom:5px;border-bottom:1px solid var(--c-line);font:400 1.4rem/1 var(--f-sans);transition:border-color .25s}
.tlink:hover{border-color:var(--c-brass)}

.ph{position:relative;overflow:hidden;background:var(--c-line)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* 로고 : 간판의 창살 마크 + 워드마크 */
/* 로고 : SVG 를 코드 안에 직접 넣어 currentColor 로 색이 따라오게 한다
   헤더는 글자형(가로로 넓음), 푸터는 마크형(세로로 김) */
.logo{display:inline-flex;align-items:center;line-height:1}
.logo__svg{display:block}
.logo__svg svg{display:block;width:auto}
.logo__svg--text svg{height:30px}   /* 헤더 : 옛 로고와 같은 높이 */
.logo__svg--full svg{height:64px}   /* 푸터 */

/* 스크롤 리빌 : 한 번만, 한 종류로 */
[data-reveal]{transition-delay:var(--d,0s)}
[data-reveal="up"]{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
[data-reveal="up"].is-in{opacity:1;transform:none}
[data-reveal="wipe"]{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--ease-out)}
[data-reveal="wipe"].is-in{clip-path:inset(0 0 0 0)}
[data-reveal="wipe"] img{transform:scale(1.08);transition:transform 1.6s var(--ease-out)}
[data-reveal="wipe"].is-in img{transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}[data-reveal] img{transform:none!important}}

/* 한지 결 : 화면 전체에 아주 옅게 */
.grain{position:fixed;inset:-50%;z-index:5;width:200%;height:200%;pointer-events:none;background:url("../images/common/bg_grain.png") repeat;background-size:96px 96px;opacity:.028;mix-blend-mode:multiply;animation:grain 14s linear infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-1.5%,1%)}50%{transform:translate(1%,-1.5%)}75%{transform:translate(-.5%,-.5%)}100%{transform:translate(0,0)}}

/* 커스텀 커서 : BI의 창살 마크. 점은 즉시 따라오고, 틀은 한 박자 늦게 따라온다 */
.cur,.cur-f{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;opacity:0;transition:opacity .3s;will-change:transform}
body.has-cursor .cur,body.has-cursor .cur-f{opacity:1}
body.cur-out .cur,body.cur-out .cur-f{opacity:0}
.cur__dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;background:var(--c-brass);transition:opacity .25s,transform .35s var(--ease-out)}
.cur__frame{position:absolute;left:-16px;top:-16px;width:32px;height:32px;border:1px solid var(--c-brass);opacity:.75;transition:transform .55s var(--ease-out),background .35s,border-color .35s,opacity .35s}
.cur__mark{position:absolute;left:-6px;top:-8px;width:12px;height:auto;color:var(--c-brass);opacity:0;transform:scale(.4);transition:opacity .3s,transform .55s var(--ease-out),color .3s}
.cur__label{position:absolute;left:-44px;top:13px;width:88px;text-align:center;font:500 0.9rem/1 var(--f-sans);letter-spacing:.26em;text-indent:.26em;color:#fff;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .45s var(--ease-out)}
body.cur-link .cur__frame{transform:scale(1.5);opacity:1}
body.cur-link .cur__dot{opacity:0}
body.cur-link .cur__mark{opacity:1;transform:none}
body.cur-label .cur__frame{transform:scale(2.6);background:rgba(38,38,38,.94);border-color:rgba(158,138,114,.9);opacity:1}
body.cur-label .cur__dot{opacity:0}
body.cur-label .cur__mark{opacity:1;transform:translateY(-12px) scale(1.1);color:#fff}
body.cur-label .cur__label{opacity:1;transform:none}
body.cur-down .cur__frame{transform:scale(.8)}
body.cur-down.cur-link .cur__frame{transform:scale(1.25)}
body.cur-down.cur-label .cur__frame{transform:scale(2.3)}
body.has-cursor,body.has-cursor a,body.has-cursor button,body.has-cursor label,body.has-cursor [role="button"],body.has-cursor figure{cursor:none}

/* 인트로 : 첫 진입 한 번, 창살이 세워지고 막이 걷힌다 */
.intro{position:fixed;inset:0;z-index:900;display:grid;place-items:center;background:var(--c-ink);color:#fff;transition:transform 1.1s var(--ease-out);will-change:transform}
.intro.is-out{transform:translateY(-100%)}
.intro__mark{width:46px;height:auto}
.intro__mark rect{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);animation:bar .7s var(--ease-out) forwards}
.intro__mark rect:nth-child(6n+1){animation-delay:.05s}.intro__mark rect:nth-child(6n+2){animation-delay:.12s}.intro__mark rect:nth-child(6n+3){animation-delay:.19s}
.intro__mark rect:nth-child(6n+4){animation-delay:.26s}.intro__mark rect:nth-child(6n+5){animation-delay:.33s}.intro__mark rect:nth-child(6n){animation-delay:.4s}
@keyframes bar{to{transform:scaleY(1)}}
.intro__text{margin-top:26px;font:300 1.3rem/1 var(--f-serif);letter-spacing:.5em;text-indent:.5em;opacity:0;animation:fadein .8s .7s var(--ease-out) forwards}
@keyframes fadein{to{opacity:.85}}