/* 메뉴 페이지들이 함께 쓰는 모양이에요. 영상과 같은 종이 · 같은 먹 · 같은 글꼴. */
@font-face { font-family: "Nunito Sans"; src: url("/fonts/NunitoSans-Variable.ttf") format("truetype");
             font-weight: 200 1000; font-stretch: 75% 125%; font-display: swap; }
:root { --paper: #f4f0e6; --ink: #1b1a18; --gray: #6f695f; --soft: #a39d92; --rule: #d9d2c2; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { font-family: "Nunito Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
       -webkit-font-smoothing: antialiased; line-height: 1.6; word-break: keep-all; }
a { color: inherit; }
img, svg { display: block; }

/* ── 위: 회사 로고와 MENU ─────────────────────────── */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
       padding: 16px clamp(16px, 4vw, 40px); background: var(--paper); }
.top .home img { height: clamp(34px, 4vw, 44px); width: auto; }
.menu-btn, .menu-close { font: 600 13px/1 "Nunito Sans", sans-serif; letter-spacing: 0.14em; text-transform: uppercase;
       color: var(--gray); background: none; border: 0; padding: 10px 4px; cursor: pointer; }
.menu-btn:hover, .menu-btn:focus-visible, .menu-close:hover, .menu-close:focus-visible { color: var(--ink); }

/* ── 메뉴: 종이 한 장이 화면을 덮어요 ───────────────── */
.menu { position: fixed; inset: 0; z-index: 20; background: var(--paper); display: flex; flex-direction: column;
        padding: 16px clamp(16px, 4vw, 40px) 32px; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.menu.open { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.menu-head { display: flex; justify-content: flex-end; }
.menu nav { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(6px, 1.2vh, 14px);
            padding-left: clamp(0px, 8vw, 120px); }
.menu nav a { font-size: clamp(34px, 6vw, 72px); font-weight: 500; letter-spacing: -0.02em; text-decoration: none; line-height: 1.15; }
.menu nav a:hover, .menu nav a:focus-visible, .menu nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.menu .langs { display: flex; gap: 22px; padding-left: clamp(0px, 8vw, 120px); font-size: 14px; color: var(--gray); }
.menu .langs a { text-decoration: none; }
.menu .langs a[aria-current="true"] { color: var(--ink); font-weight: 600; }

/* ── 본문 ─────────────────────────────────────────── */
main { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.hero { padding: clamp(56px, 12vh, 140px) 0 clamp(40px, 8vh, 90px); text-align: center; }
.hero h1 { font-size: clamp(32px, 5vw, 60px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.hero p { margin-top: 18px; color: var(--gray); font-size: clamp(17px, 2vw, 22px); }
.hero .stroke { width: min(420px, 70vw); height: 40px; margin: 34px auto 0; }
.hero .stroke path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s ease-out .3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .hero .stroke path { animation: none; stroke-dashoffset: 0; } .menu { transition: none; } }

/* ── 아래 ─────────────────────────────────────────── */
footer.site { margin-top: clamp(60px, 12vh, 140px); padding: 34px clamp(16px, 4vw, 40px) 36px; border-top: 1px solid var(--rule); }
footer.site .foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px clamp(18px, 3vw, 34px);
              font-weight: 600; font-size: clamp(15px, 1.6vw, 18px); }
footer.site .foot-nav a { color: var(--ink); }
footer.site .foot-nav a:hover, footer.site .foot-nav a:focus-visible, footer.site .foot-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
footer.site .foot-line { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; color: var(--gray); font-size: 14px; }
footer.site a { text-decoration: none; }
footer.site a:hover { color: var(--ink); }