@charset "utf-8";
/* ============================================================
   RESPONSIVE  (FASEECOM main) — 수정본
   - 가로 스크롤 차단(overflow-x, word-break, 고정폭 카드 대응)
   - 컨테이너 max-width 일관화
   - hero 긴 영문/강제 br 대응
   - about blob / history 타임라인 겹침 보정
   Breakpoints: 1760 / 1440 / 1200 / 1024 / 768 / 480
   ============================================================ */

/* ---------- 0. 전역 안전장치 (가로 스크롤·넘침 방지) ---------- */
html, body { overflow-x:hidden; }
*, *::before, *::after { box-sizing:border-box; }
/* PC에서 모바일 전용 메뉴 숨김 */
.gnb-m { display:none; }
/* 앵커 이동 시 고정 헤더 높이만큼 여백 (PC 기준 ~80px) */
section[id] { scroll-margin-top: 80px; }
/* 부드러운 스크롤 전역 적용 */
html { scroll-behavior: smooth; }
img, video, svg { max-width:100%; }
/* 긴 영문/주소가 컨테이너를 밀어내지 않도록 */
.hero-text h2, .sec-title, .about-left h3,
.service-card h4, .tech-text h4,
.news-body h4, .pf-tit, .mz-tit,
.contact-info dd { overflow-wrap:anywhere; word-break:keep-all; }

/* ---------- 1760px : container starts shrinking ---------- */
@media (max-width:1760px){
    .inner,
    .header-inner,
    .hero-inner { width:auto; max-width:92%; }
}

/* ---------- 1440px ---------- */
@media (max-width:1440px){
    .sec-title { font-size:64px; }
    .about-left h3 { font-size:62px; }
    .hero-text h2 { font-size:46px; }
    .service-card h4 { font-size:36px; }
    .gnb ul { gap:1.8em; }
}

/* ---------- 1200px ---------- */
@media (max-width:1200px){
    .sec-title { font-size:56px; }
    .about-left h3 { font-size:52px; margin-bottom:36px; }
    .hero-text h2 { font-size:40px; }

    .tech-text h4 { font-size:28px; }
    .history-timeline .year,
    .history-timeline .desc { font-size:20px; }
    .history-timeline li { gap:36px; }
    /* 타임라인 세로선/진행선: dot 중심(year 60 + gap 36 + dot반지름 7 = 103)에 맞춤 */
    #history .history-timeline ul{ --tl-line:103px; }

    .news-body h4 { font-size:22px; }
    .news-body { padding:36px 24px; }
    .service-list { gap:1.6em; }

    .gnb ul { gap:1.4em; }
    .gnb a { font-size:.92em; }
}

/* ---------- 1024px : tablet ---------- */
@media (max-width:1024px){
    body { font-size:15px; }
    .inner, .header-inner, .hero-inner { max-width:92%; }

    .sec-title { font-size:48px; }
    .sec-title span { font-size:.3em; padding-bottom:8px; }

    /* hero */
    .hero { padding-bottom:12vh; }
    .hero-text h2 { font-size:36px; }

    /* about : stack — blob 비주얼이 텍스트와 겹치지 않도록 순서/폭 정리 */
    .about { padding:6em 0 5em; }
    .about-content { flex-direction:column; gap:3em; }
    .about-left { width:100%; }
    .about-left h3 { font-size:46px; }
    .about-img { width:70%; max-width:520px; margin:0 auto; }
    .about-visual { aspect-ratio:850/710; }

    /* services */
    .service-list { grid-template-columns:repeat(3,1fr); gap:1.5em; }
    .service-card h4 { font-size:28px; }
    .service-card p { font-size:15px; }

    /* technology */
    .tech-item { padding:2.2em 1.8em; min-height:180px; }
    .tech-text h4 { font-size:24px; margin-bottom:1.8em; }

    /* history */
    .history-content { flex-direction:column; gap:3em; }
    .history-imgs, .history-timeline { width:100%; }
    .history-timeline { padding-top:0; }

    /* customer */
    .logo-row { grid-template-columns:repeat(4,1fr); gap:1.8em; }
    .logo-row.row-center { max-width:100%; }

    /* portfolio / news (구 .pf-list + 신 .mz-list 모두 대응) */
    .pf-list { grid-template-columns:repeat(2,1fr); }
    .news-list { grid-template-columns:repeat(2,1fr); }

    /* contact */
    .contact-content { flex-direction:column; gap:3em; }
    .contact-info, .contact-form { width:100%; }
    .contact-form textarea { min-height:200px; }

    /* footer */
    .footer-top { flex-wrap:wrap; gap:2.5em 4%; }
    .footer-logo { width:100%; }
    .footer-addr { width:60%; }
    .footer-addr2 { width:36%; }
}

/* ---------- 768px : mobile ---------- */
@media (max-width:768px){
    body { font-size:14px; }

    /* header + mobile menu */
    #header { padding:1.1em 0; }
    /* PC 메뉴 숨기고 모바일 전용 메뉴 활성화 */
    .gnb { display:none !important; }
    .gnb-m {
        display:block;
        position:fixed; top:0; right:-100%;
        width:72%; max-width:320px; height:100vh;
        background:rgba(10,8,16,.97); backdrop-filter:blur(12px);
        padding:6em 2em 2em; transition:right .4s ease; z-index:1001;
        overflow-y:auto;
    }
    .gnb-m.open { right:0; }
    .gnb-m ul { display:flex; flex-direction:column; gap:1.6em; list-style:none; padding:0; margin:0; }
    .gnb-m a { font-size:1.15em; color:#fff; text-decoration:none; display:block; }
    .gnb-m a:hover { color:#6633ee; }
    .btn-contact {
        display:inline-block;
        font-size:.8em;
        padding:.55em 1.1em;
        margin-left:auto;
        margin-right:.8em;
    }
    .m-menu-btn { display:flex; z-index:1002; }
    .m-menu-btn.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
    .m-menu-btn.active span:nth-child(2){ opacity:0; }
    .m-menu-btn.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
    /* 딤 배경 */
    .gnb-dim {
        position:fixed; inset:0; background:rgba(0,0,0,.5);
        opacity:0; visibility:hidden; transition:opacity .35s ease; z-index:999;
    }
    .gnb-dim.show { opacity:1; visibility:visible; }
    /* 모바일 헤더 높이에 맞게 재정의 (~65px) */
    section[id] { scroll-margin-top: 65px; }

    .sec-title { font-size:40px; }

    /* hero — 강제 br 무시하고 자연 줄바꿈, 긴 영문 분리 */
    .hero { min-height:560px; padding-bottom:18vh; }
    .hero-text h2 { font-size:28px; line-height:1.3; }
    .hero-text h2 br { display:none; }
    .hero-text p { font-size:1em; }

    /* about */
    .about-left h3 { font-size:38px; margin-bottom:28px; }
    .about-desc p { font-size:1em; }
    .about-img { width:90%; max-width:420px; }

    /* services : 1 column */
    .service-list { grid-template-columns:1fr; gap:1.6em; }
    .service-card { padding-bottom:36px; }
    .service-card h4 { font-size:26px; margin:0 28px .7em; }
    .service-card p { margin:0 28px; }
    .service-thumb { margin-bottom:24px; }

    /* technology : 1 column */
    .tech-grid { grid-template-columns:1fr; }
    .tech-item { padding:2em 1.4em; min-height:auto; }
    .tech-text h4 { font-size:22px; }
    .tech-text h4 br { display:none; }
	.tech-item .tech-icon img { width: 70px; }

    /* history */
    .history-timeline li { gap:24px; padding:18px 0; align-items:flex-start; }
    .history-timeline .year { width:48px; font-size:18px; line-height:1.4; }
    .history-timeline .dot { margin-top:.35em; }
    .history-timeline .desc { font-size:18px; word-break:keep-all; overflow-wrap:anywhere; min-width:0; }
    /* 세로선/진행선: dot 중심(year 48 + gap 24 + dot반지름 7 = 79)에 맞춤 */
    #history .history-timeline ul{ --tl-line:79px; }

    /* customer */
    .logo-row { grid-template-columns:repeat(3,1fr); gap:1.5em; }
	.logo-row.row-center { grid-template-columns: repeat(3, 1fr); }

    /* portfolio */
    .portfolio .sec-head { align-items:flex-start; gap:1.2em; }
    .portfolio-download {
        font-size:.92em;
        padding:.45em .5em .45em 1.4em; gap:.7em;
    }
    .portfolio-download .pd-ico { width:38px; height:38px; }
    .portfolio-tabs { gap:.6em; }
    .tab-btn { font-size:.84em; padding:.7em 1.1em; }
    .pf-list { grid-template-columns:repeat(2,1fr); gap:.9em; }

    /* news : 1 column */
    .news-list { grid-template-columns:1fr; }
    .news-body { padding:32px 24px; }
    .news-body h4 { font-size:20px; }

    /* contact */
    .contact-info dt, .contact-info dd { font-size:17px; }
    .contact-info dl { gap:1em; }
    .contact-form input,
    .contact-form textarea { font-size:16px; }
    .btn-submit { width:100%; font-size:17px; }

    /* footer */
    .footer-addr, .footer-addr2 { width:100%; }
    .footer-copy { text-align:left; }

    /* top btn */
    #topBtn { right:18px; bottom:18px; width:48px; height:48px; font-size:1em; }
}

/* ---------- 480px : small mobile ---------- */
@media (max-width:480px){
    .sec-title { font-size:32px; }
    .about-left h3 { font-size:30px; }
    .hero-text h2 { font-size:24px; }

    .service-card h4 { font-size:24px; }

    .logo-row { grid-template-columns:repeat(2,1fr); }
	.logo-row.row-center { grid-template-columns: repeat(2, 1fr); }

    .pf-list { grid-template-columns:1fr; }

    .history-timeline .desc { font-size:16px; }
    .history-timeline .year { font-size:16px; }

    /* portfolio 다운로드 버튼 풀 width */
    .portfolio-download { width:100%; justify-content:space-between; }
}