/* 메뉴 페이지들이 함께 쓰는 모양이에요. 영상과 같은 종이 · 같은 먹 · 같은 글꼴. */
@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; gap: 12px;
       padding: 16px clamp(16px, 4vw, 40px); background: var(--paper); }
.top .home { flex: 0 1 auto; min-width: 0; }
.top .home img { height: clamp(34px, 4vw, 44px); width: auto; max-width: 100%; }
.top-right { flex: none; display: flex; align-items: center; gap: clamp(12px, 2.4vw, 24px); }
.menu-btn, .menu-close, .lang-switch a { font: 600 13px/1 "Nunito Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; letter-spacing: 0.14em;
       text-transform: uppercase; color: var(--gray); background: none; border: 0; padding: 10px 4px; cursor: pointer; text-decoration: none; }
.menu-btn:hover, .menu-btn:focus-visible, .menu-close:hover, .menu-close:focus-visible,
.lang-switch a:hover, .lang-switch a:focus-visible { color: var(--ink); }
/* 언어 고르기: MENU 왼쪽에 늘 보여요 (메뉴를 열면 "닫기" 왼쪽에). 지금 언어는 먹색 + 밑줄 */
.lang-switch { display: flex; align-items: center; white-space: nowrap; }
.lang-switch a + a::before { content: "·"; margin: 0 8px 0 4px; color: var(--soft); }
.lang-switch a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.lang-switch a + a[aria-current="true"]::before { display: inline-block; text-decoration: none; }
/* MENU와 CLOSE의 너비를 같게: 메뉴를 열어도 왼쪽의 언어 고르기가 움직이지 않아요 (메뉴 · 닫기는 본래 같은 너비) */
.menu-btn, .menu-close { min-width: 4.6em; text-align: right; }
.menu-btn:lang(ko), .menu-close:lang(ko) { min-width: 0; }
.lang-switch a:lang(ko), .menu-btn:lang(ko), .menu-close:lang(ko) { letter-spacing: 0.04em; }
@media (max-width: 480px) { .lang-switch .rest { display: none; } }

/* ── 메뉴: 종이 한 장이 화면을 덮어요 ───────────────── */
.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; align-items: center; gap: clamp(12px, 2.4vw, 24px);
             min-height: clamp(34px, 4vw, 44px); }   /* 위 줄(로고 높이)과 같은 높이: 메뉴를 열어도 언어 고르기 · 닫기가 제자리 */
.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; }

/* ── 본문 ─────────────────────────────────────────── */
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 .foot-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
footer.site a { text-decoration: none; }
footer.site a:hover { color: var(--ink); }