/* ==========================================================================
   DAMDA 2026 리뉴얼 — 공통 베이스
   디자인 토큰 출처: XD 스펙 (PC_0709 / MO)
   ========================================================================== */

/* ---------- 디자인 토큰 ---------- */
:root {
    /* 컬러 */
    --green: #1F8E56;             /* 메인 그린 (GNB 활성, 버튼) */
    --footer-green: #458C5B;      /* 푸터 배경 그린 */
    --pastel-green: #E6FDE7;      /* GNB DAMDA NOTE 박스 (PC) */
    --pastel-green-deep: #D4EFD2; /* DAMDA NOTE 강조 (모바일) */
    --bg: #EEF0EF;                /* 페이지 배경 (ultra light gray) */
    --white-gray: #F9F9F9;        /* 밝은 텍스트 (그린 위) */
    --ink: #262A28;               /* 기본 텍스트 (다크 차콜) */
    --dark-gray: #505554;         /* 보조 텍스트 */

    /* 폰트 */
    --font-kr: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, "Malgun Gothic", sans-serif;
    --font-en: "Poppins", "Pretendard", sans-serif;

    /* 레이아웃 */
    --hd-gap: 16px;               /* 헤더 박스 간격 (PC) */
    --hd-box-h: 80px;             /* 헤더 박스 높이 (PC) */
    --max-w: 1920px;
    --wide-zoom: 1;              /* 1920 초과 화면 확대 배율(아래 와이드 미디어쿼리에서 재정의).
                                    zoom은 vh에도 곱해지므로, 화면에 맞아야 하는 높이는
                                    calc(100vh / var(--wide-zoom)) 형태로 쓴다 */
}

/* ---------- 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: #fff; /* 최대 폭(1920) 밖 영역은 흰색 */
    color: var(--ink);
    font-family: var(--font-kr);
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: -0.02em; /* 국문 자간 -2% (XD 스펙) */
    word-break: keep-all;
}

img, svg { max-width: 100%; vertical-align: middle; }

a { color: inherit; text-decoration: none; }

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* 전체 레이아웃 래퍼: 콘텐츠 영역(최대 1920)만 회색 배경, 그 밖은 흰색 */
#body-wrapper {
    max-width: var(--max-w);
    margin: 0 auto;
    background: var(--bg);
    /* 푸터 하단 간격은 여기 padding이 담당 — footer margin-bottom으로 주면
       마진 겹침으로 래퍼 밖(흰 배경)에 그려져 하단만 회색이 안 보임 */
    padding-bottom: 16px;
}

/* 영문 전용 텍스트 */
.font-en { font-family: var(--font-en); letter-spacing: 0; }

/* 스크린리더 전용 */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ==========================================================================
   헤더 (GNB) — XD: 1920 기준 높이 112, 박스 높이 80, 간격 16
   ========================================================================== */
#header2026 {
    background: var(--bg);
    position: relative;
    z-index: 100;
}

#header2026 .hd-inner {
    display: flex;
    gap: var(--hd-gap);
    align-items: stretch;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 16px;
}

#header2026 .hd-box {
    background: #fff;
    height: var(--hd-box-h);
    display: flex;
    align-items: center;
}

/* 로고 */
#header2026 .hd-logo {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 24px;
}

#header2026 .hd-logo img {
    width: 214px; /* XD 스펙: 214×44 */
    height: auto;
}

/* 로고 호버: 그린 로고로 전환 (XD: nav_mouse over event(home button)) */
#header2026 .hd-logo .hd-logo-hover { display: none; }

#header2026 .hd-logo:hover .hd-logo-default { display: none; }

#header2026 .hd-logo:hover .hd-logo-hover { display: block; }

/* GNB */
#header2026 .hd-gnb {
    display: flex;
    gap: var(--hd-gap);
    flex: 0 1 auto;
}

#header2026 .hd-menu {
    justify-content: flex-start;
    align-items: flex-end;      /* 텍스트는 항상 flex-end + padding-bottom으로 위치 제어 (애니메이션용) */
    width: 222px;
    padding: 0 16px 16px;       /* 비활성: 좌측/하단 16px (XD 스펙) */
    font-family: var(--font-en); /* Poppins Medium */
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;           /* XD 스펙 18/27 */
    letter-spacing: 0;
    color: var(--ink);
    white-space: nowrap;
    /* XD 인터랙션 기본값: 0.3초, 서서히 끝내기(ease-out) */
    transition: background-color .3s ease-out, color .3s ease-out, padding-bottom .3s ease-out;
}

#header2026 .hd-menu strong { font-weight: 600; }

/* DAMDA NOTE — 상시 파스텔 그린 강조 */
#header2026 .hd-menu.is-note {
    width: 341px;
    background: var(--pastel-green);
    color: var(--green);
}

/* 마우스 오버: 그린 배경 + 흰 글자, 텍스트가 0.3초에 걸쳐 세로 중앙으로 이동 */
#header2026 .hd-menu:hover {
    background: var(--green);
    color: var(--white-gray);
    padding-bottom: 26.5px; /* (박스 80 - 행간 27) / 2 = 세로 중앙 */
}

/* DAMDA NOTE도 호버 시 동일하게 그린 배경 (XD 프로토타입 영상 기준) */

/* 현재 페이지: 그린 배경 + 세로 중앙 정렬 (XD 스펙) */
#header2026 .hd-menu.is-active {
    background: var(--green);
    color: var(--white-gray);
    padding-bottom: 26.5px;
}

/* 모바일 토글 (기본 숨김) */
#header2026 .hd-toggle {
    display: none;
    width: 88px;
    align-items: center;
    justify-content: center;
    color: var(--footer-green, #458C5B); /* nav_mobile 시안 아이콘 색 실측 #458C5B */
}

/* 메뉴 아이콘: 위가 열린 박스(∪) — 열리면 90° 회전해 오른쪽이 열림(⊏) (시안) */
#header2026 .hd-toggle-ico {
    display: block;
    transition: transform .25s ease;
}

#header2026 .hd-toggle[aria-expanded="true"] .hd-toggle-ico {
    transform: rotate(90deg);
}

/* --- 중간 사이즈: 메뉴 박스 폭 축소 --- */
@media (max-width: 1500px) {
    #header2026 .hd-menu { width: auto; flex: 0 0 auto; }
    #header2026 .hd-menu.is-note { width: auto; }
}

/* --- 모바일 --- */
@media (max-width: 900px) {
    /* nav_mobile 시안 실측: 박스 높이 78, 로고 폭 196, 거터 16 */
    :root { --hd-box-h: 78px; }

    #header2026 .hd-inner {
        flex-wrap: wrap;
        gap: 16px;
        padding: 16px; /* 하단도 16px — 아래 콘텐츠와 균일 간격 */
    }

    #header2026 .hd-logo { padding: 0 16px; }

    /* 작은 화면에서 메뉴 버튼이 다음 줄로 밀리지 않도록 로고가 남는 폭에 맞춰 줄어듦
       (거터 32 + 로고 패딩 32 + 간격 16 + 버튼 88 = 168 + 여유 4) */
    #header2026 .hd-logo img { width: min(196px, calc(100vw - 172px)); }

    #header2026 .hd-toggle { display: flex; }

    #header2026 .hd-gnb {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    #header2026.is-open .hd-gnb { display: flex; }

    /* 메뉴 열림: 메뉴 블록 아래 남는 영역을 흰 반투명 레이어(#fff, 0.9)로 덮어
       페이지 콘텐츠 터치/클릭 차단 (레이어는 헤더 스태킹 컨텍스트 안 z:-1 →
       메뉴 블록보다는 아래, 본문보다는 위) */
    #header2026.is-open::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background: rgba(255, 255, 255, .95);
    }

    /* 메뉴 열림: 위 오버레이(::after, 음수 z-index)가 헤더 자신의 회색 배경(--bg)까지
       덮어 메뉴 박스 사이 간격(회색 테두리)이 흰색으로 씻겨 보이는 문제 방지 —
       in-flow 자식인 .hd-inner는 오버레이보다 위에 그려지므로 여기에 배경을 다시 칠해
       헤더 영역만 회색을 유지한다 (시안: nav_mobile) */
    #header2026.is-open .hd-inner {
        background: var(--bg);
    }

    /* 메뉴 열림: 배경 페이지 스크롤 잠금 —
       오버레이(::after)는 클릭/터치 '탭'만 가로챌 뿐 스크롤 제스처는 문서로 전달되므로,
       base.js가 html에 부여하는 .nav-lock 클래스로 문서 스크롤 자체를 잠근다 */
    html.nav-lock,
    html.nav-lock body {
        overflow: hidden;
    }

    /* 열린 헤더(오버레이 포함) 위에서 시작하는 팬 제스처도 차단 (iOS 사파리 보강)
       — 탭/클릭에는 영향 없음. 메뉴가 화면보다 길어질 일이 생기면 이 규칙은 재검토할 것 */
    #header2026.is-open {
        touch-action: none;
    }

    #header2026 .hd-menu,
    #header2026 .hd-menu.is-note {
        width: 100%;
        height: 88px;
        align-items: flex-end;
        padding: 0 24px 16px;
        font-size: 20px;
        color: var(--dark-gray);
    }

    #header2026 .hd-menu.is-note {
        background: var(--pastel-green-deep);
        color: var(--green);
    }

    #header2026 .hd-menu.is-active {
        background: var(--green);
        color: var(--white-gray);
    }
}

/* ==========================================================================
   푸터 — XD: 그린 배경, 3단 정보 + 하단 약관/카피/SNS
   ========================================================================== */
#footer2026 {
    background: var(--footer-green); /* 시안 실측 #458C5B (기존 #1F8E56 → 시안과 불일치) */
    color: var(--ink);
    margin: 16px 16px 0; /* 래퍼 안쪽으로 16px (하단 여백은 #body-wrapper padding-bottom) */
}

#footer2026 .ft-inner {
    padding: 40px 40px 40px 50px; /* 시안 실측: 상하우 40, 좌 50 */
}

#footer2026 .ft-cols {
    display: flex;
    gap: 48px;
    justify-content: space-between;
    flex-wrap: wrap;
}

#footer2026 .ft-col { min-width: 240px; }

#footer2026 .ft-title {
    display: block;
    /* 시안 실측: 제목 줄 피치 = 본문 줄 피치(29px)와 동일 */
    font-family: var(--font-kr);
    font-size: 18px;
    font-weight: 550;
    line-height: 21px;
    letter-spacing: -0.36px;
    color: #252A28;
    opacity: 1;
    margin-bottom: 8px;
}

#footer2026 .ft-title-en {
    font-family: var(--font-en);
    letter-spacing: 0.02em;
}

#footer2026 .ft-col p {
    /* 시안 실측: 본문 16px, 줄 피치 29px (lh 21 + 간격 8) */
    font-family: var(--font-kr);
    font-size: 16px;
    font-weight: 450;
    line-height: 21px;
    letter-spacing: -0.32px;
    color: #252A28;
    opacity: 1;
}

#footer2026 .ft-col p + p { margin-top: 8px; }

#footer2026 .ft-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px; /* 시안 실측: 영업시간 ↔ 약관 잉크 간격 ~37px */
}

#footer2026 .ft-terms {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

#footer2026 .ft-terms a:hover { text-decoration: underline; }

#footer2026 .ft-copy {
    font-family: var(--font-en);
    font-size: 14px;
    letter-spacing: 0;
}

#footer2026 .ft-sns {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* 아이콘은 SVG 원본 크기 그대로 (시안 실측: 자연 크기 = 시안 크기) */
#footer2026 .ft-sns img { display: block; }

/* PC(메뉴 폭 고정 구간): 푸터 컬럼을 GNB 박스 라인에 정렬
   col2 좌측 = ABOUT US 좌측, col3 좌측 = DAMDA NOTE 좌측 */
@media (min-width: 1501px) {
    #footer2026 .ft-cols,
    #footer2026 .ft-bottom {
        display: grid;
        grid-template-columns: 1fr 476px 777px;
        gap: 0;
    }

    #footer2026 .ft-cols { align-items: start; }

    #footer2026 .ft-bottom { align-items: center; }

    #footer2026 .ft-col { min-width: 0; }

    #footer2026 .ft-sns { justify-content: flex-start; }
}

@media (max-width: 900px) {
    /* 시안(footer_mobile ver) 실측: 좌 24 / 우 14 / 상 36 / 하 88(챗봇 여백 포함)
       — 우측이 좁은 건 시안 기준(긴 주소 한 줄 유지용) */
    #footer2026 .ft-inner { padding: 36px 14px 88px 24px; }
    #footer2026 { margin: 8px 16px 0; } /* 좌우 16px (XD), 하단 여백은 #body-wrapper padding-bottom */
    #body-wrapper { padding-bottom: 8px; } /* 모바일 상하 8px 유지 */

    #footer2026 .ft-cols {
        flex-direction: column;
        gap: 28px;
    }

    /* 시안 실측: 모바일 폰트 = 데스크톱의 0.8배 (제목 14, 본문 13) */
    #footer2026 .ft-title {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -0.28px;
        margin-bottom: 4px;
    }

    #footer2026 .ft-col p {
        font-size: 12px; /* 주소 한 줄 유지 기준 (시안 실측 12.6, 13px이면 줄바꿈) */
        line-height: 20px;
        letter-spacing: -0.25px;
        word-break: keep-all; /* 긴 주소가 줄바꿈될 경우 어절 단위로 */
    }

    #footer2026 .ft-col p + p { margin-top: 6px; }

    #footer2026 .ft-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-top: 48px;
    }

    #footer2026 .ft-terms { font-size: 12px; gap: 15px; }

    #footer2026 .ft-copy { font-size: 12px; }

    #footer2026 .ft-sns { margin-top: 40px; gap: 16px; }

    /* 시안 실측: 모바일 아이콘 = 데스크톱의 0.8배 */
    #footer2026 .ft-sns a:nth-child(1) img { height: 9.6px; }  /* 유튜브 */
    #footer2026 .ft-sns a:nth-child(2) img { height: 11.2px; } /* 인스타그램 */
    #footer2026 .ft-sns a:nth-child(3) img { height: 10.3px; } /* 핀터레스트 */
    #footer2026 .ft-sns a:nth-child(4) img { height: 8px; }    /* 비핸스 */
    #footer2026 .ft-sns a:nth-child(5) img { height: 8.8px; }  /* 네이버블로그 */

    #footer2026 .ft-sns img { width: auto; }
}

/* ==========================================================================
   와이드 스크린(QHD·4K) — 1920 시안 비례 확대
   4K 시안(Figma 0710_PC)이 1920 레이아웃의 등비 확대이므로, 1920 초과 화면에서
   화면 폭 ÷ 1920 배율로 전체를 확대한다 (피그마 프로토타입 scale-down-width와 동일).
   vh 기반 높이(메인 히어로 등)는 화면 비율이 16:9면 배율과 자연히 일치한다.
   ========================================================================== */
@media (min-width: 1921px) {
    :root { --wide-zoom: tan(atan2(100vw, 1920px)); }

    #body-wrapper {
        zoom: 1.3333;                    /* tan/atan2 미지원 구형 브라우저용 근사치(QHD 기준) */
        zoom: tan(atan2(100vw, 1920px)); /* = 100vw ÷ 1920 (연속 배율) */
    }

    /* 100vw에 세로 스크롤바 폭이 포함되는 환경(Windows)의 미세 가로 스크롤 방지 */
    html { overflow-x: hidden; }
}

/* ==========================================================================
   와이드(>1920) — Figma 0710_PC(4K) 시안 반영
   기준: 4K 시안을 화면 폭에 맞춰 그대로 축소/확대 (프로토타입 scale-down-width와 동일).
   zoom(= 화면폭/1920)이 전체를 비례 확대하므로, 4K 시안값의 "절반"을 CSS값으로
   지정하면 모든 폭에서 시안 비율 그대로 보인다.
   ※ 4K 시안값이 기존 1920 XD값의 정확히 2배인 요소는 재정의가 필요 없다.
   ========================================================================== */
@media (min-width: 1921px) {
    :root {
        --hd-box-h: 65px;   /* 4K 실측 130 */
        --hd-gap: 8px;      /* 4K 실측 16 (거터 고정) */
    }

    /* --- GNB --- */
    #header2026 .hd-inner { padding: 8px; }

    #header2026 .hd-logo { padding: 0 12px; }
    #header2026 .hd-logo img { width: 177px; } /* 4K 로고 ~355×73 */

    #header2026 .hd-menu {
        width: 231px;                 /* 4K 462 */
        padding: 0 20px 8px;          /* 4K: 텍스트 좌 40, 하 16 */
        font-size: 16px;              /* 4K 32 */
        font-weight: 600;             /* 4K SemiBold */
        line-height: 32px;            /* 4K 64 */
    }

    #header2026 .hd-menu.is-note { width: 350px; } /* 4K 701 */

    #header2026 .hd-menu:hover,
    #header2026 .hd-menu.is-active { padding-bottom: 16.5px; } /* (65-32)/2 세로 중앙 */

    /* --- 푸터 (4K 실측: 전체 높이 244, 캡션 21px — 절반 스케일) --- */
    #footer2026 { margin: 8px 8px 0; }

    #body-wrapper { padding-bottom: 8px; }

    #footer2026 .ft-inner { padding: 20px 20px 20px 32px; } /* 4K: 상 48, 좌 64 — 총높이 244 맞춤 */

    #footer2026 .ft-title { font-size: 10.5px; line-height: 12.5px; margin-bottom: 4px; }

    #footer2026 .ft-col p { font-size: 10.5px; line-height: 12.5px; }

    #footer2026 .ft-col p + p { margin-top: 3px; }

    #footer2026 .ft-bottom { margin-top: 12px; }

    #footer2026 .ft-terms { font-size: 9px; gap: 6px; }

    #footer2026 .ft-copy { font-size: 9px; }

    #footer2026 .ft-sns { gap: 10px; }
    /* SNS 아이콘은 원본(자연) 크기 그대로 zoom 확대 = 4K 시안 크기와 일치 → 재정의 불필요 */
}