@font-face {
    font-family: 'NanumSquareNeoBold';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.ttf) format("truetype");
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.ttf) format("truetype");
}

body,td,table,input,div,form,a,p,span,textarea,center {font-family:'NanumSquareNeo' !important;}
        
.map-section {
    width: 100%;
    max-width: 1320px; /* À̹ÌÁö°¡ ÁÙ¾îµéÁö ¾Êµµ·Ï ÃÖ´ë Æø È®Àå */
    margin: 50px auto;
    padding: 0 20px;
    box-sizing: border-box;
}


        /* 1. ŸÀÌƲ ¿µ¿ª (½Ç¼± Á¦°Å) */
        .title-area {
            text-align: center;
            margin-bottom: 25px; /* Áöµµ¿Í ¹Ù·Î À̾îÁöµµ·Ï °£°Ý Ãà¼Ò */
        }
        .title-area .sub-title {
            font-size: 13px;
            font-weight: bold;
            color: #333;
            letter-spacing: 2px;
            margin-bottom: 10px;
            text-transform: uppercase;
        }
        .title-area .main-title {
            font-size: 36px;
            font-weight: 900;
            color: #000;
            margin: 0;
			font-family:'NanumSquareNeo' !important;
        }

        /* 2. Áöµµ ¿µ¿ª */
.map-container {
    position: relative;
    width: 1312px; /* ³»ºÎ 1300px + ¾çÂÊ Å׵θ®/Æеù 12px */
    max-width: 100%;
    height: 612px; /* ³»ºÎ 600px + ¾çÂÊ Å׵θ®/Æеù 12px */
    margin: 0 auto 30px auto;
    background-color: #fff;
    padding: 5px; 
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0);
    border: 1px solid #f0f0f0;
    box-sizing: border-box;
    overflow: hidden;
}
        #real-kakao-map {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            background-color: #f9f9f9; 
        }

        /* Ctrl ½ºÅ©·Ñ ¾È³» ¿À¹ö·¹ÀÌ */
        .zoom-overlay {
            position: absolute;
            top: 5px;
            left: 5px;
            width: calc(100% - 10px);
            height: calc(100% - 10px);
            background-color: rgba(0, 0, 0, 0);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            opacity: 0;
            pointer-events: none; /* ¸¶¿ì½º À̺¥Æ® Åë°ú */
            transition: opacity 0.3s ease;
            z-index: 10;
        }
        .zoom-overlay span {
            color: #ffffff;
            font-size: 14px;
            font-weight: 500;
            background: rgba(0, 0, 0, 0.8);
            padding: 15px 30px;
            border-radius: 30px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            text-align: center;
        }
        .zoom-overlay.show {
            opacity: 1;
        }

        /* 3. ¹öÆ° ¿µ¿ª */
        .button-area {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 50px;
        }
        .button-area a {
            display: inline-block;
            background-color: #111;
            color: #fff;
            text-decoration: none;
            padding: 15px 40px;
            border-radius: 30px;
            font-size: 15px;
            transition: all 0.3s ease;
        }
        .button-area a:hover {
           background-color: #333333;
           transform: translateY(-3px);
           box-shadow: none;
        }

        /* 4. ÁÖ¼Ò Á¤º¸ ¿µ¿ª */
        .address-box {
            background-color: #fafafa;
            border: 1px solid #f0f0f0;
            border-radius: 15px;
            padding: 40px;
            display: flex;
            align-items: center;
            gap: 20px;
            max-width: 800px;
            margin: 0 auto;
            box-sizing: border-box;
        }
        .icon-circle {
            width: 50px;
            height: 50px;
            background-color: #111;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
        }
        .icon-circle svg {
            width: 20px;
            height: 20px;
            fill: #fff;
        }
        .address-text h4 {
            margin: 0 0 5px 0;
            font-size: 14px;
            color: #333;
        }
        .address-text .addr-kr {
            margin: 0 0 5px 0;
            font-size: 20px;
            color: #111;
        }
        .address-text .addr-en {
            margin: 0;
            font-size: 14px;
            color: #888;
        }

        /* ¸ð¹ÙÀÏ ¹ÝÀÀÇü */
        @media screen and (max-width: 768px) {
            .map-container { height: auto }
            .button-area { flex-direction: column; padding: 0 10px; }
            .button-area a { text-align: center; width: 100%; box-sizing: border-box; }
            .address-box { flex-direction: column; align-items: flex-start; padding: 25px; }
            .zoom-overlay span { font-size: 12px; padding: 12px 20px; }
        .address-text .addr-kr {
            font-size: 16px;
        }
        .address-text .addr-en {
            font-size: 12px;
        }		
        .title-area .sub-title {
            font-size: 12px;
        }
        .title-area .main-title {
            font-size: 24px;
        }		
        .title-area {
            margin-top: 10px;
        }
        }


/* ¾Æ·¡¿¡¼­ À§·Î ¿Ã¶ó¿À´Â ¾Ö´Ï¸ÞÀÌ¼Ç Å°ÇÁ·¹ÀÓ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* °¢ ¿ä¼Ò¿¡ ¾Ö´Ï¸ÞÀÌ¼Ç Àû¿ë (±âº» ¼û±è ó¸® ÈÄ ÁøÇà) */
.title-area,
.map-container,
.button-area,
.address-box {
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* À§¿¡¼­ºÎÅÍ ¼øÂ÷Àû µô·¹ÀÌ(Áö¿¬½Ã°£) ºÎ¿© */
.title-area   { animation-delay: 0.1s; }
.map-container { animation-delay: 0.25s; }
.button-area   { animation-delay: 0.4s; }
.address-box   { animation-delay: 0.55s; }


/* À̹ÌÁö °¨½Î´Â ÄÁÅ×ÀÌ³Ê */
#image-map-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

#zoom-image {
    width: 1300px !important;  /* PC¿¡¼­ 1300px °íÁ¤ */
    height: 600px !important;  /* PC¿¡¼­ 600px °íÁ¤ */
    max-width: none !important;
    transform-origin: center center;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.1s ease-out;

    /* °íÇØ»óµµ ¶Ç·ÇÇÔ À¯Áö ¼Ó¼º */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
}

/* 4. ¹ÝÀÀÇü (È­¸é ÆøÀÌ 1312px ¹Ì¸¸ÀÎ ÅÂºí¸´/¸ð¹ÙÀÏ¿¡¼­¸¸ Ãà¼Ò Çã¿ë) */
@media screen and (max-width: 1312px) {
    .map-container {
        width: 100%;
        height: auto;
        aspect-ratio: 1312 / 612;
    }
    #zoom-image {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: contain;
    }
}