/*─────────────────────────────────────────────────────────
    Base
─────────────────────────────────────────────────────────*/
    #wrap{position:relative; overflow-x:clip;}
    .w_custom{position: relative; width: calc(100% - 60px); max-width: 1600px; margin-inline: auto;}
    main{padding-block: var(--row-gap140);}
    main:has(.full-sec){width: 100%; max-width: 100%;}
    main:has(.pt-dn){padding-top: 0;}
    main:has(.pd-dn){padding-bottom: 0;}

    .link{position: absolute; inset: 0; z-index: 3;}
    .container{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
    .section{padding-block:var(--section)}
    .section--dark{background:var(--ink);color:var(--white)}
    .section--gray{background:var(--gray-50)}

    /* ---------- type ---------- */
    .label{font-family:var(--font-en);font-size:20px;font-weight:500;letter-spacing:.04em;color:var(--accent);margin-bottom:20px}
    .label--white{color:rgba(255,255,255,.7)}
    .section__title{font-size:52px;font-weight:700;line-height:1.4;letter-spacing:-.03em;text-wrap:balance;color:#111}
    @media (min-width:768px){.nb{white-space:nowrap}}   /* keeps a phrase on one line so headlines never break mid-phrase (mobile wraps at spaces via keep-all) */
    .section--dark .section__title{color:var(--white)}
    .section__desc{font-size:18px;line-height:1.8;color:rgba(255,255,255,.7)}
    .section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:72px}
    @media (max-width:1023px){.section__title{font-size:38px}.section__desc{font-size:16px}}
    @media (max-width:767px){
    .label{font-size:16px;margin-bottom:12px}
    .section__title{font-size:30px}
    .section__title br,.cta__title br,.intro__about-title br,.panel__desc br,.cta__sub br{display:none}
    .section__desc{font-size:16px}
    .section__head{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:36px}
    }

    /* ---------- pill button (POSCO-style) ---------- */
    .pill{display:inline-flex;align-items:center;gap:12px;padding:20px 32px;border-radius:999px;border:1px solid var(--ink);font-size:18px;font-weight:600;line-height:1;color:var(--ink);white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
    /* paper-plane icon (from the logo) replaces the arrow */
    .pill__arrow{display:inline-block;width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M2 13.5 30 2 18.5 30 14.5 18.5Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M2 13.5 30 2 18.5 30 14.5 18.5Z'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .4s var(--ease)}
    .pill .pill__arrow{color:var(--accent);background:var(--accent)}
    .pill--accent .pill__arrow,.pill--white:hover .pill__arrow{background:currentColor}
    .pill:hover{background:var(--ink);color:var(--white)}
    /* hover: the plane flies out to the top-right and re-enters from the bottom-left (mask-position keeps it clipped to its own box) */
    .pill:hover .pill__arrow,.textlink:hover .pill__arrow,.ncard:hover .pill__arrow{animation:planeFly .7s cubic-bezier(.4,0,.2,1)}
    @keyframes planeFly{
    0%{-webkit-mask-position:0 0;mask-position:0 0}
    45%{-webkit-mask-position:22px -22px;mask-position:22px -22px}
    50%{-webkit-mask-position:-22px 22px;mask-position:-22px 22px}
    100%{-webkit-mask-position:0 0;mask-position:0 0}
    }
    .pill--white{border-color:rgba(255,255,255,.6);color:var(--white)}
    .pill--white:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
    .pill--accent{background:var(--accent);border-color:var(--accent);color:var(--white)}
    .pill--accent:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
    .textlink{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--accent)}


    @media (max-width:1600px) {
        br.for_pc{display:none;}
    }
    @media (max-width:1024px) {
        br.for_pct{display:none;}
    }
    @media (max-width:860px) {
        .w_custom{width: calc(100% - 40px);}
    }
    @media (max-width:479px) {
        br.for_pcm{display:none;}
    }
    @media (max-width:360px) {
        .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-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; }

        @media (hover:hover) and (pointer: fine){
            .pf-faq-toggle:hover { background: rgba(248, 250, 252, .6); }
        }

/*─────────────────────────────────────────────────────────
    Header
─────────────────────────────────────────────────────────*/
    #header{position:fixed;inset:0 0 auto 0;z-index:100;background:transparent;transition:all 0.4s}
        #header.scr{transform:translateY(-100%)}
        #header.on{background:var(--white);box-shadow:inset 0 -1px 0 var(--line);}
    #header .w_custom{position:relative;display:flex;align-items:center;justify-content:space-between;max-width: 1740px;height:var(--header-h);}

    #header .logo{height: 100%;display: flex;align-items: center;}
    #header .logo a{position: relative;display:flex;align-items: center;height: min(clamp(36px, 5vw, 50px), 100%);}
    #header .logo__svg{display:block;width:172px;height:23px;fill:currentColor}
    #header .logo__img{display:block;transition: all 0.4s;}
    #header .logo__img--dark{opacity: 0;position: absolute;top: 0;left: 0;}
    #header .logo__img--light{display:block}
        #header.on .logo__img--dark{opacity: 1;}
        #header.on .logo__img--light{opacity: 0;}
    #header .logo__svg .lg-plane{fill:var(--accent)}
    .db-lang{display:inline-flex;align-items:center;gap:12px;}
    .db-lang li{font-family:var(--font-en);font-size: 18px;font-weight:600;letter-spacing:.04em;color: var(--black-color01);display: inline-flex;align-items: center;gap: 12px;}
    .db-lang li::after{display: inline-flex;content:'';width: 1px;height: clamp(10px, 1.4vw, 12px);background:currentColor; opacity: 0.5; transition: all 0.4s;}
    .db-lang li:last-child::after{display: none;}
    .db-lang a{transition:all 0.4s;color: rgb(255 255 255 / 50%);}
    .db-lang li.on a{opacity:1;color:var(--accent)}

        #header:not(.on) .db-lang li::after{filter: var(--filter-white);}
        #header.on .db-lang a{color: var(--black-color09);}

        

    #header .gnb{position:absolute;left:50%;top:0;transform:translateX(-50%);display:flex;justify-content: center;gap: clamp(30px, 4.7vw, 90px);width: calc(100% - 480px);height:100%;text-align: center;}
    #header .gnb > li{position:relative}
    #header .gnb > li > a{display:flex;align-items:center;height:100%;font-family:var(--font-en);font-size: clamp(14px, 1vw, 19px);font-weight:600;color: var(--black-color01);letter-spacing:.02em;position:relative;transition:all 0.4s;}
    #header .gnb .dep02{position:absolute;top:calc(50% + 28px);left:50%;width: max-content;min-width: 170px;max-width: 300px;padding:14px 0;background:var(--white);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.08);opacity:0;visibility:hidden;transform:translate(-50%,-8px);transition:all 0.4s;}
    #header .gnb .dep02::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
    #header .gnb .dep02 > li > a{display:block;padding:7px 10px;font-size:16px;font-weight:600;line-height:24px;color:var(--ink-2);transition:color .25s}
    
    #header .header__util{display:flex;align-items:center;gap:28px}
    #header .burger{display:none;position:relative;width:28px;height:22px}
    #header .burger{&::before, &::after{position:absolute; content:'';top:4px; left:0;width:100%;height:2px;background:currentColor;transition:all 0.4s}}
    #header .burger::after{top:16px;width:70%}
    #header .burger.on::before{top:10px;transform:rotate(45deg)}
    #header .burger.on::after{top:10px;width:100%;transform:rotate(-45deg)}

        #header:not(.on) .gnb > li > a{filter: var(--filter-white);}
        #header:not(.on) .burger{filter: var(--filter-white);}

        @media (hover:hover) and (pointer: fine) {
            #header .gnb > li:hover .dep02{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
            #header .gnb .dep02 > li > a:hover{color:var(--navy);}
            #header .db-lang li:hover{opacity:1}
        }

    @media (max-width:1024px) {
        #header .gnb{display: none;}
        #header .db-lang{display: none;}
        #header .burger{display: block;}
    }

/*─────────────────────────────────────────────────────────
    Header
─────────────────────────────────────────────────────────*/
    #aside{position:fixed;inset:0;z-index:90;background:var(--ink);color:var(--white);transform:translateX(100%);transition:all 0.5s;overflow-y:auto;visibility:hidden}
        body:has(#burger.on) #aside{transform:none;visibility:visible}
        body:has(#burger.on){overflow: clip;}
    #aside .w_custom{max-width: 1740px; min-height:100%;display:flex;flex-direction:column;justify-content:space-between;padding-block: calc(var(--header-h) + 32px) 40px;}
    #aside .gnb > li > a{position: relative;display:flex;width:100%;align-items:center;justify-content:space-between;padding-block: 18px;padding-right: 40px;font-family:var(--font-en);font-size:26px;font-weight:700;letter-spacing:.02em;border-bottom:1px solid var(--line-dark);transition: all 0.4s;}
        #aside .gnb > li > a.on{color: var(--accent);}
        #aside .gnb > li:has(.dep02) > a{&::before, &::after{position: absolute;content:'';width: 14px;height: 2px;background:currentColor;top: 50%;right: 0;translate: 0 -50%;}}
        #aside .gnb > li:has(.dep02) > a::after{width: 2px;height:14px;right: 5px;translate: -50% -50%;}
        #aside .gnb > li:has(.dep02) > a.on::after{opacity: 0;}
    
    #aside .gnb .dep02{display: none;}
    #aside .gnb .dep02 > li > a{display:block;padding:10px 0;font-size:16px;color:rgba(255,255,255,.7)}
    #aside .gnb .dep02 > li:first-child > a{padding-top:16px}
    #aside .gnb .dep02 > li:last-child > a{padding-bottom:20px}
    #aside .btm-sec{margin-top:48px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
    #aside .cs{font-family:var(--font-en);font-size:16px;line-height:1.7;color:rgba(255,255,255,.6);text-align:right}
    #aside .db-lang li::after{filter: var(--filter-white);}