@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
/* ============================================
   메인 리뉴얼 전용 스타일 (Figma: dongseo-renewal-main)
   기존 main.css/sub.css 와 충돌하지 않도록 .dsp_re 아래로만 스코프
   ============================================ */

.dsp_re{ --re-primary:#1b5e9e; --re-navy:#0b111e; --re-text:#111111; --re-slate:#64748b; --re-slate-2:#475569; --re-slate-3:#94a3b8; --re-border:#e2e8f0; --re-bg-soft:#f8fafc;
    font-family:'Pretendard Variable', 'Pretendard-Regular', sans-serif; width:100%; overflow:hidden; }
.dsp_re *{ box-sizing:border-box; }
.dsp_re a{ text-decoration:none; color:inherit; }
.dsp_re ul{ list-style:none; margin:0; padding:0; }
.dsp_re img{ display:block; max-width:100%; }
.dsp_re .re-eyebrow{ display:flex; align-items:center; gap:10px; }
.dsp_re .re-eyebrow i{ display:block; width:20px; height:3px; background:var(--re-primary); }
.dsp_re .re-eyebrow span{ font-family:'Pretendard Variable', 'Pretendard-Regular', sans-serif; font-weight:700; font-size:13px; letter-spacing:0.39px; text-transform:uppercase; color:var(--re-primary); }

/* 공통 버튼 */
.dsp_re .re-btn{ display:inline-flex; align-items:center; justify-content:center; padding:16px 36px; border-radius:4px; font-weight:700; font-size:15px; white-space:nowrap; transition:opacity 0.25s ease; }
.dsp_re .re-btn:hover{ opacity:0.85; }
.dsp_re .re-btn .re-arrow{ display:inline-flex; align-items:center; padding-left:10px; }
.dsp_re .re-btn .re-arrow img{ width:16px; height:16px; }
.dsp_re .re-btn-primary{ background:var(--re-primary); color:#fff; }
.dsp_re .re-btn-dark{ background:var(--re-navy); color:#fff; }
.dsp_re .re-btn-outline{ border:1px solid rgba(255,255,255,0.38); color:#fff; padding:15px 32px; }
.dsp_re .re-btn-outline-dark{ border:1px solid var(--re-navy); color:var(--re-navy); padding:15px 32px; }

/* ---------- 1. 슬로건 섹션 ---------- */
.dsp_re .re-slogan{ position:relative; padding:160px 240px 100px; background:#fff; }
.dsp_re .re-slogan-content{ position:relative; z-index:1; font-family:'Pretendard Variable', 'Pretendard-Regular', sans-serif; font-weight:800; font-size:108px; line-height:1; color:var(--re-text); }
.dsp_re .re-slogan-content p{ margin:0 0 8px; }
.dsp_re .re-slogan-content .re-brand{ color:var(--re-primary); white-space:nowrap; }
.dsp_re .re-slogan-content .re-char{
    display:inline-block;
    opacity:0;
    animation-name:reCharIn;
    animation-timing-function:ease-out;
    animation-fill-mode:forwards;
}
@keyframes reCharIn{
    to{ opacity:1; }
}
.dsp_re .re-slogan-desc{ position:relative; z-index:1; margin-top:50px; font-size:24px; line-height:1.75; color:var(--re-slate); max-width:747px; }
.dsp_re .re-slogan-desc .re-mobile-br{ display:none; }
.dsp_re .re-slogan-dot{ position:absolute; z-index:0; right:0; top:40px; width:678px; height:550px; max-width:35%;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-size:250% 100%; mask-size:250% 100%;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, transparent 30%, #000 60%, #000 100%);
            mask-image:linear-gradient(to right, transparent 0%, transparent 30%, #000 60%, #000 100%);
    -webkit-mask-position:-20% 0; mask-position:-20% 0;
    animation:reDotReveal 2.4s ease-out 0.3s forwards; }
@keyframes reDotReveal{
    to{ -webkit-mask-position:100% 0; mask-position:100% 0; }
}
.dsp_re .re-slogan-dot circle{
    animation-name:reDotTwinkle;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
}
@keyframes reDotTwinkle{
    0%, 100%{ opacity:1; }
    50%{ opacity:0.15; }
}

/* ---------- 2. 히어로 배너 ---------- */
.dsp_re .re-hero{ position:relative; width:100%; height:680px; background-size:cover; background-position:center; background-attachment:fixed; }
.dsp_re .re-hero::before{ content:''; position:absolute; inset:0; background:rgba(11,17,30,0.62); }
.dsp_re .re-hero-inner{ position:relative; z-index:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; padding:100px 240px; }
.dsp_re .re-hero-content{ max-width:820px; display:flex; flex-direction:column; gap:28px; }
.dsp_re .re-badge{ display:inline-flex; align-self:flex-start; padding:8px 16px; border-radius:4px; background:rgba(27,94,158,0.16); border:1px solid rgba(27,94,158,0.38); }
.dsp_re .re-badge span{ font-weight:700; font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--re-primary); }
.dsp_re .re-hero-title{ font-weight:900; font-size:52px; line-height:1.15; color:#fff; margin:0 0 16px; }
.dsp_re .re-hero-title p{ margin:0; }
.dsp_re .re-hero-desc{ font-size:17px; line-height:1.7; color:#94a3b8; margin:0; }
.dsp_re .re-hero-buttons{ display:flex; gap:16px; align-items:center; }

/* ---------- 3. 제품 카테고리 ---------- */
.dsp_re .re-category{ padding:140px 240px; background:#fff; }
.dsp_re .re-section-header{ display:flex; flex-direction:column; gap:20px; margin-bottom:72px; }
.dsp_re .re-section-header .re-header-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }
.dsp_re .re-section-header h2{ font-weight:900; font-size:48px; line-height:1.15; color:var(--re-navy); margin:0; max-width:765px; }
.dsp_re .re-section-header p.re-header-desc{ font-size:16px; line-height:1.7; color:var(--re-slate); margin:0; max-width:480px; }
.dsp_re .re-card-grid{ display:flex; gap:2px; width:100%; }
.dsp_re .re-card{ position:relative; flex:1 1 0; min-width:0; height:360px; overflow:hidden; display:block; }
.dsp_re .re-card-image{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 0.5s ease; }
.dsp_re .re-card-image::before{ content:''; position:absolute; inset:0; background:rgba(11,17,30,0.35); transition:background 0.35s ease; }
.dsp_re .re-card-image span{ position:absolute; z-index:1; left:28px; bottom:28px; font-family:'Pretendard Variable', 'Pretendard-Regular', sans-serif; font-weight:700; font-size:11px; letter-spacing:0.33px; text-transform:uppercase; color:var(--re-primary); }
.dsp_re .re-card-content{ position:absolute; inset:0; padding:44px; display:flex; flex-direction:column; justify-content:center; gap:22px; background:var(--re-bg-soft); transform:translateY(100%); transition:transform 0.4s ease; }
.dsp_re .re-card:hover .re-card-content{ transform:translateY(0); }
.dsp_re .re-card:hover .re-card-image{ transform:scale(1.06); }
.dsp_re .re-card:hover .re-card-image::before{ background:rgba(11,17,30,0.55); }
.dsp_re .re-card-header{ display:flex; align-items:center; justify-content:space-between; }
.dsp_re .re-card-header strong{ font-family:'Pretendard Variable', 'Pretendard-Regular', sans-serif; font-weight:800; font-size:30px; color:var(--re-navy); }
.dsp_re .re-card-icon{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:24px; background:rgba(27,94,158,0.08); }
.dsp_re .re-card-icon img{ width:24px; height:24px; }
.dsp_re .re-card-content p{ font-size:17px; line-height:1.7; color:var(--re-slate); margin:0; }
.dsp_re .re-card-more{ display:flex; align-items:center; gap:6px; }
.dsp_re .re-card-more span{ font-weight:700; font-size:16px; color:var(--re-primary); }
.dsp_re .re-card-more img{ width:16px; height:16px; }

/* ---------- 4. 회사소개 + 카다로그 ---------- */
.dsp_re .re-about-wrap{ display:flex; width:100%; }
.dsp_re .re-about-col, .dsp_re .re-catalog-col{ flex:1 1 50%; min-width:0; padding:80px 80px 80px 240px; display:flex; flex-direction:column; gap:40px; }
.dsp_re .re-about-col{ background:#fff; border-top:1px solid var(--re-border); border-right:1px solid var(--re-border); }
.dsp_re .re-catalog-col{ background:var(--re-navy); padding:80px 240px 80px 80px; }
.dsp_re .re-about-eyebrow, .dsp_re .re-catalog-eyebrow{ display:block; font-weight:800; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--re-primary); margin:0 0 20px; }
.dsp_re .re-about-header h3, .dsp_re .re-catalog-header h3{ font-weight:900; font-size:40px; line-height:1.2; margin:0; }
.dsp_re .re-about-header h3{ color:var(--re-navy); }
.dsp_re .re-catalog-header h3{ color:#fff; }
.dsp_re .re-about-col > p{ font-size:16px; line-height:1.8; color:var(--re-slate-2); margin:0; }
.dsp_re .re-catalog-col > p{ font-size:16px; line-height:1.8; color:#94a3b8; margin:0; }
.dsp_re .re-catalog-actions{ display:flex; flex-direction:column; gap:16px; }

/* ---------- 5. 제작사례 ---------- */
.dsp_re .re-cases{ padding:140px 240px; background:#fff; }
.dsp_re .re-case-header-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:72px; }
.dsp_re .re-case-header-row .re-section-header{ margin-bottom:0; max-width:700px; }
.dsp_re .re-case-grid{ display:flex; gap:16px; width:100%; }
.dsp_re .re-case-card{ flex:1 1 0; min-width:0; border:1px solid var(--re-border); border-radius:6px; overflow:hidden; display:block; transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.dsp_re .re-case-card:hover{ transform:translateY(-6px); box-shadow:0 16px 32px rgba(11,17,30,0.14); border-color:transparent; }
.dsp_re .re-case-image{ position:relative; height:300px; background-size:cover; background-position:center; transition:transform 0.5s ease; transform-origin:center bottom; }
.dsp_re .re-case-image::before{ content:''; position:absolute; inset:0; background:rgba(11,17,30,0.2); transition:background 0.3s ease; }
.dsp_re .re-case-card:hover .re-case-image::before{ background:rgba(11,17,30,0.05); }
.dsp_re .re-case-card:hover .re-case-image{ transform:scale(1.06); }
.dsp_re .re-case-info{ padding:20px; background:#fff; }
.dsp_re .re-case-info strong{ display:block; font-weight:800; font-size:16px; color:var(--re-navy); margin-bottom:6px; transition:color 0.2s ease; }
.dsp_re .re-case-info span{ display:block; font-size:13px; color:var(--re-slate); }
.dsp_re .re-case-card:hover .re-case-info strong{ color:var(--re-primary); }

/* ---------- 6. FAQ ---------- */
.dsp_re .re-faq{ padding:140px 240px 160px; background:#fff; }
.dsp_re .re-faq .re-section-header{ margin-bottom:48px; }
.dsp_re .re-faq-list{ border:1px solid var(--re-border); border-radius:6px; overflow:hidden; }
.dsp_re .re-faq-item{ border-bottom:1px solid var(--re-border); }
.dsp_re .re-faq-item:last-child{ border-bottom:none; }
.dsp_re .re-faq-q{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:24px; background:none; border:0; cursor:pointer; text-align:left; font-family:inherit; }
.dsp_re .re-faq-q span{ flex:1 1 0; font-weight:700; font-size:18px; color:var(--re-navy); }
.dsp_re .re-faq-q img{ width:20px; height:20px; flex-shrink:0; transition:transform 0.25s ease; }
.dsp_re .re-faq-item.active .re-faq-q img{ transform:rotate(90deg); }
.dsp_re .re-faq-a{ display:none; }
.dsp_re .re-faq-a p{ margin:0; padding:0 24px 24px; font-size:16px; line-height:1.7; color:var(--re-slate); }

/* ---------- 반응형 ---------- */
@media (max-width:1600px){
    .dsp_re .re-slogan{ padding:120px 80px 50px; }
    .dsp_re .re-slogan-content{ font-size:72px;}
    .dsp_re .re-hero-inner{ padding:80px; }
    .dsp_re .re-category, .dsp_re .re-cases, .dsp_re .re-faq{ padding-left:80px; padding-right:80px; }
    .dsp_re .re-about-col{ padding-left:80px; }
    .dsp_re .re-catalog-col{ padding-right:80px; }
}
@media (max-width:1200px){
    .dsp_re .re-slogan-dot{ width:340px; height:280px; max-width:45%; top:10px; opacity:0.6; }
    .dsp_re .re-slogan-content{ font-size:60px; }
    .dsp_re .re-slogan-desc{ font-size:18px; }
    .dsp_re .re-hero{ height:auto; }
    .dsp_re .re-hero-inner{ padding:60px 40px; }
    .dsp_re .re-hero-title{ font-size:36px; }
    .dsp_re .re-category, .dsp_re .re-cases, .dsp_re .re-faq{ padding:80px 40px; }
    .dsp_re .re-section-header h2{ font-size:34px; }
    .dsp_re .re-card-grid, .dsp_re .re-case-grid{ flex-wrap:wrap; }
    .dsp_re .re-card, .dsp_re .re-case-card{ flex:1 1 calc(50% - 8px); }
    .dsp_re .re-about-wrap{ flex-direction:column; }
    .dsp_re .re-about-col, .dsp_re .re-catalog-col{ padding:60px 40px; border-right:none; }
}
@media (max-width:640px){
    .dsp_re .re-slogan{ padding:60px 20px 30px; }
    .dsp_re .re-slogan-dot{ width:340px; height:280px; max-width:82%; top:-10px; opacity:0.9; }
    .dsp_re .re-slogan-content{ font-size:44px; }
    .dsp_re .re-slogan-desc{ font-size:16px; }
    .dsp_re .re-slogan-desc .re-mobile-br{ display:inline; }
    .dsp_re .re-hero-buttons{ flex-wrap:wrap; }
    .dsp_re .re-category, .dsp_re .re-cases, .dsp_re .re-faq{ padding:60px 20px; }
    .dsp_re .re-header-row, .dsp_re .re-case-header-row{ flex-direction:column; align-items:flex-start; }
    .dsp_re .re-case-card{ flex:1 1 100%; }
    .dsp_re .re-about-col, .dsp_re .re-catalog-col{ padding:40px 20px; }

    .dsp_re .re-card-grid{ flex-wrap:wrap; gap:12px; }
    .dsp_re .re-card{ flex:1 1 calc(50% - 6px); height:auto; }
    .dsp_re .re-card-image{ position:relative; height:160px; }
    .dsp_re .re-card-content{ position:static; transform:none; padding:20px; gap:10px; }
    .dsp_re .re-card-header strong{ font-size:18px; }
    .dsp_re .re-card-icon{ width:32px; height:32px; }
    .dsp_re .re-card-icon img{ width:16px; height:16px; }
    .dsp_re .re-card-content p{ font-size:13px; }
    .dsp_re .re-card-more span, .dsp_re .re-card-more img{ font-size:13px; width:13px; height:13px; }
    .dsp_re .re-card-more{display: none;}
}