/*─────────────────────────────────────────────────────────
    Base
─────────────────────────────────────────────────────────*/
    #wrap{position:relative; overflow-x:clip;}
    .w_custom{position: relative; width: calc(100% - 60px); max-width: var(--container); margin-inline: auto;}
    .svg-sprite{position:absolute; width:0; height:0; overflow:hidden;}
    .ico{width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; vertical-align:-0.125em;}
    /* 로고형 채움 아이콘(링크드인·유튜브 등) — .ico의 스트로크가 얇은 로고 획을 뭉개므로 별도 클래스로 분리 */
    .ico-fill{width:1em; height:1em; fill:currentColor; stroke:none; flex-shrink:0; vertical-align:-0.125em;}

    .inner{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,3.33vw,60px);}

    .blind{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;}

    .skip-nav a{position:fixed; left:50%; top:0; z-index:9999; display:inline-block; padding:12px 24px; background:var(--brand); color:var(--on-brand); font-weight:700; transform:translate(-50%,-150%); transition:transform .2s;}
    .skip-nav a:focus{transform:translate(-50%,0);}

    .reveal{opacity:0; transform:translateY(34px);}
    .reveal.in-view{opacity:1; transform:none; animation:revealUp 1s cubic-bezier(.22,.9,.3,1) backwards;}
    .reveal.in-view[data-delay="1"]{animation-delay:.12s;}
    .reveal.in-view[data-delay="2"]{animation-delay:.24s;}
    .reveal.in-view[data-delay="3"]{animation-delay:.36s;}
    .reveal.in-view[data-delay="4"]{animation-delay:.48s;}
    .reveal.in-view[data-delay="5"]{animation-delay:.6s;}
    .reveal.in-view[data-delay="6"]{animation-delay:.72s;}
    @keyframes revealUp{from{opacity:0; transform:translateY(34px);} to{opacity:1; transform:none;}}

    @media (max-width:860px) {
        .w_custom{width: calc(100% - 30px);}
    }
/*─────────────────────────────────────────────────────────
    FAQ
─────────────────────────────────────────────────────────*/
    .pf-faq-wrap { padding-bottom: 3rem; }
    .pf-faq { margin-top: 2.5rem; }
    .pf-faq-title { font-size: 1.125rem; font-weight: 700; color: #0f172a; margin-bottom: 1rem; }
    .pf-faq-title-sub { color: #94a3b8; font-size: .875rem; font-weight: 400; }
    .pf-faq-list { display: flex; flex-direction: column; gap: .5rem; }
    .pf-faq-item { border: 1px solid #e2e8f0; overflow: hidden; background: #fff; }
    .pf-faq-toggle { width: 100%; text-align: left; padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: transparent; border: 0; cursor: pointer; transition: background-color .15s; }
    .pf-faq-toggle:hover { background: rgba(248, 250, 252, .6); }
    .pf-faq-q { display: flex; align-items: center; gap: .75rem; min-width: 0; }
    .pf-faq-badge { flex-shrink: 0; width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: #fff; }
    .pf-faq-badge--q { background: #1b1b1b; }
    .pf-faq-badge--a { background: #707070; }
    .pf-faq-question { font-weight: 500; font-size: .875rem; color: #0f172a; }
    .pf-faq-arrow { width: 1.25rem; height: 1.25rem; color: #94a3b8; flex-shrink: 0; transition: transform .2s; }
    .pf-faq-item.is-open .pf-faq-arrow { transform: rotate(180deg); }
    .pf-faq-answer { display: none; }
    .pf-faq-a { display: flex; gap: .75rem; border-top: 1px solid #e2e8f0; padding: 1rem 1.25rem; background: rgba(248, 250, 252, .6); }
    .pf-faq-answer-text { flex: 1; font-size: .875rem; color: #0f172a; line-height: 1.625; white-space: pre-line; }
    .pf-faq-answer-text.db-user-content { white-space: normal; } 
    .pf-faq-prefix { font-size: .75rem; background: #e2e8f0; color: #334155; padding: .125rem .375rem; border-radius: .25rem; margin-right: .25rem; }


/*─────────────────────────────────────────────────────────
    Buttons
─────────────────────────────────────────────────────────*/
    .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:56px; padding:16px 34px; border-radius:var(--r-md); font-family:var(--font-body); font-size:18px; font-weight:600; line-height:1.4; transition:background-color .2s, color .2s, box-shadow .2s;}
    .btn .ico{font-size:1.1em; stroke-width:2.2;}
    .btn-hero{background:#EA5514; color:#fff;}
    .btn-hero:hover{background:#EA5514;}

    .btn-calc{background:var(--brand-2); color:#fff; box-shadow:none; min-height:50px; padding:13px 30px;}
    .btn-calc:hover{background:var(--brand-2);}
    .header.scrolled .btn-calc{color:#fff;}

    .btn-outline-ink{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink);}
    .btn-outline-ink:hover{background:var(--ink); color:#fff;}

    .btn-banner-link{background:#EA5514; color:#fff; width:fit-content;}
    .btn-banner-link:hover{background:#EA5514;}

    .link-more{display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:600; color:var(--ink); transition:color .2s;}
    .link-more::after{content:'→'; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--cloud-2); color:var(--ink); font-size:15px; transition:background-color .25s, color .25s, transform .25s;}
    .link-more:hover{color:var(--brand);}
    .link-more:hover::after{background:var(--brand); color:#fff; transform:translateX(3px);}

/*─────────────────────────────────────────────────────────
    Section 공통 — 좌측정렬 헤더 (Hanwha)
─────────────────────────────────────────────────────────*/
    .section{padding:var(--row-gap140) 0;}
    .section-cloud{background:var(--cloud);}

    .sec-head{text-align:left; margin-bottom:60px; max-width:var(--container);}
    .industry-section{background:#fafafa;}
    .industry-section .sec-head{text-align:center;}
    .sec-head-left{text-align:left; margin-bottom:var(--row-gap25);}
    .sec-eyebrow{display:block; font-family:var(--font-en); font-weight:400; font-size:20px; line-height:1.4; letter-spacing:0; color:var(--brand); margin-bottom:16px;}
    .sec-title{font-family:var(--font-head); font-size:var(--text-50); font-weight:800; line-height:1.4; color:var(--ink); letter-spacing:-0.03em;}
    .sec-desc{margin-top:16px; font-size:var(--text-20); font-weight:400; line-height:1.7; color:#555; max-width:760px; word-break:keep-all;}
    #indTitle{font-size:var(--text-46);}



/*─────────────────────────────────────────────────────────
    Header / GNB — 히어로 위 투명(화이트) → 스크롤 시 화이트 슬라브
─────────────────────────────────────────────────────────*/
    #header{position:fixed; top:0; left:0; width:100%; z-index:1000; background:rgba(0,0,0,.3); border-bottom:1px solid transparent; transition:background-color .35s, box-shadow .3s, border-color .35s;}
    #header.scrolled,
    #header:has(.gnb > li.is-open),
    #header:has(.gnb-nav.open),
    #header:has(.gnb > li:focus-within){background:#fff; border-bottom-color:var(--hairline); box-shadow:0 4px 24px rgba(0,0,0,.05);}
    /* 헤더는 컨테이너 폭에 묶지 않고 100% 풀폭 — 로고 좌측 끝, 유틸(문의하기) 우측 끝 */
    #header .w_custom{max-width: 1800px;display:grid;grid-template-columns:auto auto 1fr;align-items:center;height:var(--header-h);}

    #header .logo{position:relative;height: 100%;display: flex;align-items: center;}
    #header .logo a{display: flex;height: 100%;max-height: 60px;}

    #header .gnb-nav{justify-self:start; margin-left:clamp(40px,4.5vw,88px);}
    #header .gnb{display:flex; gap:clamp(36px,4vw,66px);}
    #header .gnb > li{position:relative;}
    #header .gnb > li > a{position:relative; display:flex; align-items:center; height:var(--header-h); font-size:20px; font-weight:600; color:#fff; transition:all 0.4s;}
    #header .header-utill{position:relative; display:flex; align-items:center; gap:16px; justify-self:end;}
    #header .header-search{display:flex; align-items:center; width:260px; height:50px; padding:0 6px 0 16px; border-radius:var(--r-md); background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); transition:all 0.4s;}
    #header .header-search input{flex:1; min-width:0; background:none; border:0; outline:none; color:#fff; font-family:var(--font-body); font-size:14px;}
    #header .header-search-submit{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex:none; font-size:18px; color:rgba(255,255,255,.85); transition:color .2s; -webkit-tap-highlight-color:transparent;}
    #header .menu-toggle{display:none; position:relative; width:44px; height:44px;}
    #header .menu-toggle .bar{display:block; position:absolute; left:50%; top:21px; width:24px; height:2px; background:#fff; transform:translateX(-50%); transition:all 0.4s;}
    #header .menu-toggle .bar:nth-child(2){top:13px;} 
    #header .menu-toggle .bar:nth-child(4){top:29px;}