/* 전체 메뉴 · 오른쪽 스크롤 눈금 — 값은 metic 실측 */
:root{--mn-ease:cubic-bezier(.77,0,.175,1);--mn-dim:#f4f4f2b3;--mn-line:#f4f4f226;--mn-pill:#ffffff24}

/* 메뉴 — 삼선 단추 자리에서 원이 커지며 먹색 판이 덮는다(620ms), 닫을 땐 480ms */
.mn{position:fixed;inset:0;z-index:99;overflow-y:auto;background:var(--ink);color:var(--paper);visibility:hidden;pointer-events:none;clip-path:circle(0px at 100% 0%)}
.mn.is-vis{visibility:visible}
.mn.is-open{pointer-events:auto}
.mn__in{display:flex;flex-direction:column;justify-content:space-between;min-height:100dvh;padding:calc(var(--nav) + 1.5rem) var(--shell) 2rem;max-width:var(--frame);margin-inline:auto}
.mn__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px;align-items:center}
.mn__nav{grid-column:span 7}
.mn__nav ul{display:grid;gap:8px;list-style:none}
.mn__nav li{overflow:hidden}
.mn__nav a{display:flex;align-items:baseline;gap:24px;padding:4px 0;translate:0 110%;transition:translate .7s var(--ease)}
.mn.is-open .mn__nav a{translate:0 0;transition-delay:calc(120ms + var(--i) * 60ms)}
.mn__dot{flex:none;align-self:flex-end;width:10px;height:10px;margin-bottom:.18em;border-radius:50%;background:var(--pt);scale:0;transition:scale .5s var(--ease)}
.mn__nav a:hover .mn__dot{scale:1}
.mn__t{font-size:clamp(2.75rem,6.6vw,6.25rem);font-weight:600;line-height:1;letter-spacing:-.045em;color:var(--mn-dim);transition:color .3s var(--ease)}
.mn__nav a.is-on .mn__t{color:var(--paper)}
.mn__m{font:.75rem var(--mono);letter-spacing:.02em;color:var(--mn-dim)}
/* 글자 — 커서 160px 안에서 끌려오고 굵어진다(히어로 제목과 같은 장치) */
.mn__t .kc{display:inline-block;font-weight:calc(600 + var(--k,0) * 250);transform:translate(calc(var(--dx,0) * 1px),calc(var(--dy,0) * 1px));transition:transform .35s var(--ease),font-weight .35s var(--ease)}

/* 오른쪽 미리보기 — 올린 칸의 그림으로 바뀐다 */
.mn__pv{grid-column:span 5;position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid #f4f4f21a;border-radius:var(--r);background:#f4f4f20d;opacity:0;translate:0 24px;transition:opacity .7s var(--ease),translate .7s var(--ease)}
.mn.is-open .mn__pv{opacity:1;translate:0 0;transition-delay:260ms}
.mn__pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.04;transition:opacity .7s var(--ease),scale .7s var(--ease)}
.mn__pv img.is-on{opacity:1;scale:1}
.mn__chip{position:absolute;left:16px;bottom:16px;padding:4px 12px;border-radius:var(--pill);background:#121214b3;backdrop-filter:blur(8px);font:11px var(--mono);color:var(--paper)}

/* 아래 줄 — 의뢰 · 연락처 · 상담 창구 */
.mn__foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:48px;padding-top:24px;border-top:1px solid var(--mn-line);opacity:0;transition:opacity .7s var(--ease)}
.mn.is-open .mn__foot{opacity:1;transition-delay:420ms}
.mn__cta{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:1.125rem;font-weight:500}
.mn__cta i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--pt);color:#fff;transition:rotate .5s var(--ease)}
.mn__cta:hover i{rotate:45deg}
.mn__cta svg,.mn__pills svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.1}
.mn__ct{font-size:.875rem;color:var(--mn-dim)}
.mn__ct a{display:inline-block;padding:8px 0}
.mn__ct p{margin-top:4px}
.mn__fd{display:flex;align-items:baseline;gap:8px;margin-top:12px;font:11px var(--mono);color:#f4f4f2bf}
.mn__fd i{display:inline-block;width:8px;height:8px;border:1.5px solid var(--pt);border-radius:50%;translate:0 1px}
.mn__fd em{font-style:normal;color:#f4f4f28c}
.mn__side{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:16px}
.mn__pills{display:flex;gap:4px;padding:4px;border:1px solid #f4f4f233;border-radius:var(--pill)}
.mn__pills a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--pill);font-size:.75rem;font-weight:500;color:var(--mn-dim);transition:color .3s,background-color .3s}
.mn__pills a:first-child,.mn__pills a:hover{background:var(--paper);color:var(--ink)}
.mn__pills:hover a:first-child:not(:hover){background:none;color:var(--mn-dim)}

/* 메뉴가 열리면 위 칸은 먹색 위에 흰 글자, 돋보기·눈금·안내는 숨긴다 */
html.menu-open .nv{z-index:100}
html.menu-open .nv .ni,html.menu-open .nv__wm{color:var(--paper)}
html.menu-open .nv .nv__brand,html.menu-open .nv .nv__right{background:transparent;border-color:var(--mn-pill);box-shadow:none;backdrop-filter:none}
html.menu-open .nv__read{opacity:0}
html.menu-open .nv__menu{background:#f4f4f229}
html.menu-open .lp,html.menu-open .hint,html.menu-open .fd,html.menu-open .sc{opacity:0;pointer-events:none}

/* 오른쪽 스크롤 눈금 — 8px 잔눈금 · 64px 큰 눈금, 빨간 점이 읽은 만큼 내려온다. 끌거나 누르면 그 자리로 */
.sc{position:fixed;right:6px;top:calc(var(--nav) + 8px);bottom:16px;z-index:38;width:22px;cursor:grab;touch-action:none;transition:opacity .3s var(--ease);
  background:repeating-linear-gradient(to bottom,var(--line2) 0 1px,transparent 1px 8px) right top/5px 100% no-repeat,repeating-linear-gradient(to bottom,var(--line2) 0 1px,transparent 1px 64px) right top/12px 100% no-repeat}
.sc.is-drag{cursor:grabbing}
.sc__thumb{position:absolute;top:0;right:4px;width:8px;height:8px;border-radius:50%;background:var(--pt);box-shadow:0 0 0 3px var(--paper);will-change:transform}
.sc__label{position:absolute;top:0;right:20px;padding:5px 8px;border:1px solid var(--line2);border-radius:4px;background:var(--paper);font:11px/1 var(--mono);color:var(--ink);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.sc.is-scrolling .sc__label,.sc:hover .sc__label{opacity:1}

@media (max-width:900px){
  .nv__lens{width:44px;padding:0;justify-content:center}.nv__lt{display:none}   /* metic — 폰에선 돋보기 아이콘만 */
  .mn__grid{grid-template-columns:1fr;gap:40px}
  .mn__nav,.mn__pv{grid-column:auto}
  .mn__nav ul{gap:4px}
  .mn__nav a{gap:16px}
  .mn__m,.mn__pv{display:none}
  .mn__foot{grid-template-columns:1fr}
  .mn__side{justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){
  .mn__nav a,.mn__pv,.mn__foot{transition:none}
}
.mn__nav a[aria-current] .mn__dot{scale:1}