@charset "utf-8";

/* 색 설정 */
:root {
    --main-color: #c9a96a;
    --black-color: #222;
    --white-color: #fff;
    --gold: #c9a96a;
    --navy: #10203a;
    --navy2: #162a4b;
    --navy-btn: #1c3157;
    --dark: #080808;
    --display: 'Outfit', 'Pretendard', sans-serif;
    --fs-display: 160px;
    --fs-tit: 34px;
    --fs-tit-sub: 24px;
    --fs-lg: 20px;
    --fs-base: 16px;
    --fs-sm: 14px;
    --fs-xs: 14px;
    --sp-sec: 100px;
    --sp-tit: 50px;
}
@media screen and (max-width: 1250px) {
    :root { --fs-display: 120px; --fs-tit: 30px; --fs-tit-sub: 21px; --sp-sec: 100px; --sp-tit: 48px; }
} /* tablet */
@media screen and (max-width: 960px) {
    :root { --fs-display: 96px; --fs-tit: 26px; --fs-lg: 18px; --sp-sec: 80px; }
}
@media screen and (max-width: 650px) {
    :root { --fs-display: 52px; --fs-tit: 22px; --fs-base: 15px; --fs-sm: 15px; --fs-xs: 15px; }
} /* mobile */

/* 스크롤 커스텀 */
html::-webkit-scrollbar {width: 8px;}
html::-webkit-scrollbar-thumb {background-color: var(--main-color); border-radius: 10px;}

/* 드래그 블록 커스텀 */
::selection { background-color:var(--main-color); color:#fff; }


/* default */
*{
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color : inherit;
    box-sizing: border-box;
    letter-spacing: inherit;
    line-height: 140%;
}

html{ scroll-padding-top: 80px; }
body{ font-family: 'Pretendard', sans-serif; font-weight:500; font-size: 16px; letter-spacing: -0.04em; color:#fff; background:#0a0a0a; }
section{ display:block; }
a{ color:inherit; }
a:hover{ text-decoration: none; color: inherit;  }
em{ font-style: normal; }
img{ max-width: 100%; vertical-align: top; }
button{ font-family: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea{ font-family: inherit; letter-spacing: inherit; }

.inner{ width:1200px; margin:0 auto;  }

.paging_box{ margin-top: 20px; padding:10px 0; display:flex; align-items: center; justify-content: center; }
.paging_box .pg_page{ background-color:#FFF; border:1px solid #e6e6e6; }
.paging_box .pg_current{ background-color: #0F1C2E; color:#fff; border:1px solid #0F1C2E; }

select{
    -webkit-appearance: none; -moz-appearance: none;  appearance: none;
    background: url('../../img/warrant/common/select-icon.png') no-repeat 98% 50% #fff;
}
select::-ms-expand{ display:none; }
p{ word-break: keep-all; }
@media screen and (max-width: 1250px) {
    .inner{ width:100%; padding:0 10px; }
} /* tablet */
@media screen and (max-width: 650px) {
    .paging_box{ font-size: 14px; }
} /* mobile */

/* ===== 스크롤 등장 (.ani → common_jp.js가 .on 토글) ===== */
.ani { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.ani.on { opacity: 1; transform: translateY(0); }

/* ===== header ===== */
#header { position: fixed; top: 0; left: 0; width: 100%; z-index: 300; background: rgba(4, 6, 10, 0.6); backdrop-filter: blur(6px); transition: background 0.3s; }
#header.on { background: rgba(4, 6, 10, 0.95); }
#header .inner { display: flex; align-items: center; width: 1520px; max-width: 100%; height: 80px; }
#header .logo { margin-right: auto; }
#header .logo img { height: 48px; width: auto; }
#header .gnb ul { display: flex; gap: 56px; }
#header .gnb a { display: block; padding: 10px 0; font-size: 17px; font-weight: 600; transition: color 0.3s; }
#header .gnb a:hover, #header .gnb li.on a { color: var(--gold); }
#header .btn_consult { display: flex; align-items: center; justify-content: center; width: 173px; height: 40px; margin-left: 64px; background: #222; border: 2px solid var(--gold); border-radius: 4px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1); font-size: 18px; font-weight: 800; color: var(--gold); transition: background 0.3s; }
#header .btn_consult:hover { background: var(--gold); color: #222; }
#header .btn_menu { display: none; position: relative; z-index: 280; flex-direction: column; justify-content: center; gap: 6px; width: 40px; height: 40px; margin-left: 20px; }
#header .btn_menu span { display: block; width: 24px; height: 2px; margin: 0 auto; background: #fff; transition: transform 0.3s, opacity 0.3s; }
body.mm_open #header .btn_menu span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.mm_open #header .btn_menu span:nth-child(2) { opacity: 0; }
body.mm_open #header .btn_menu span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* mobile drawer */
.mobile_menu { position: fixed; top: 0; right: -300px; width: 280px; height: 100%; z-index: 290; background: var(--navy); padding: 80px 30px; transition: right 0.4s; }
body.mm_open .mobile_menu { right: 0; }
.mobile_menu a { display: block; padding: 16px 0; font-size: 18px; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
/* 드로어 내 퀵메뉴 */
.mobile_menu .mm_quick { display: flex; flex-wrap: wrap; gap: 16px 8px; margin-top: 28px; }
.mobile_menu .mm_quick li { flex: 0 0 calc((100% - 16px) / 3); }
.mobile_menu .mm_quick a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border-bottom: 0; }
.mobile_menu .mm_quick .circle { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%; }
.mobile_menu .mm_quick .circle img { width: 20px; }
.mobile_menu .mm_quick .label { font-size: 14px; text-align: center; word-break: keep-all; }
.mobile_menu .mm_tel { display: none; margin-top: 28px; padding: 16px 14px; background: rgba(0, 0, 0, 0.25); border-radius: 10px; }
.mobile_menu .mm_tel .tit { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.mobile_menu .mm_tel .tit img { width: 18px; }
.mobile_menu .mm_tel .num { display: block; padding: 2px 0; border-bottom: 0; font-size: 16px; font-weight: 800; font-family: var(--display); letter-spacing: 0; }
.mobile_menu .mm_tel .num span { font-family: 'Pretendard', sans-serif; font-weight: 500; color: var(--gold); margin-right: 4px; }
.dim { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
body.mm_open .dim { opacity: 1; pointer-events: auto; }
@media screen and (max-width: 1520px) {
    #header .inner { width: 100%; padding: 0 30px; }
}
@media screen and (max-width: 1250px) {
    #header .gnb ul { gap: 32px; }
    #header .btn_consult { margin-left: 32px; width: 150px; }
    #header .logo img { height: 42px; }
} /* tablet */
@media screen and (max-width: 960px) {
    html{ scroll-padding-top: 60px; }
    #header .inner { height: 60px; }
    #header .logo img { height: 36px; }
    #header .gnb, #header .btn_consult { display: none; }
    #header .btn_menu { display: flex; }
    .mobile_menu { padding-top: 70px; }
}
@media screen and (max-width: 650px) {
    #header .logo img { height: 32px; }
}

/* ===== quick menu ===== */
.quick_menu { position: fixed; right: 30px; bottom: 30px; z-index: 90; display: flex; flex-direction: column; width: 128px; }
.quick_menu .quick_tel { display: flex; flex-direction: column; align-items: center; padding: 16px 8px; background: #10203b; border-radius: 20px 20px 0 0; text-align: center; }
.quick_menu .quick_tel .ico { width: 26px; margin-bottom: 8px; }
.quick_menu .quick_tel .tit { font-size: var(--fs-xs); margin-bottom: 4px; }
.quick_menu .quick_tel .num { font-size: 14px; font-weight: 800; font-family: var(--display); letter-spacing: 0; white-space: nowrap; }
.quick_menu .quick_tel .num span { font-family: 'Pretendard', sans-serif; font-weight: 500; color: var(--gold); margin-right: 2px; }
.quick_menu .quick_link { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 22px 8px 24px; background: rgba(0, 0, 0, 0.6); border-radius: 0 0 20px 20px; }
.quick_menu .quick_link a { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.quick_menu .quick_link .circle { display: flex; align-items: center; justify-content: center; width: 66px; height: 66px; border: 1px solid #fff; border-radius: 50%; transition: background 0.3s, border-color 0.3s; }
.quick_menu .quick_link a:hover .circle { background: var(--gold); border-color: var(--gold); }
.quick_menu .quick_link .circle img { width: 28px; }
.quick_menu .quick_link .label { font-size: var(--fs-xs); }
@media screen and (max-width: 1520px) {
    .quick_menu { right: 12px; }
}
@media screen and (max-width: 1250px) {
    .quick_menu { display: none; }
} /* tablet */

/* ===== hero ===== */
#hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; height: 100vh; min-height: 900px; }
.hero_bg { position: absolute; inset: 0; background: url('../../img/warrant/main/hero_bg.jpg') center / cover no-repeat; }
.hero_bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35) 50%, #0a0e18 100%); }
.hero_inner {padding: 0 20px; position: relative;  display: flex; flex-direction: column; align-items: center; width: 100%; }
.hero_tit { display: flex; flex-direction: column; align-items: center; text-align: center; font-family: var(--display); text-transform: uppercase; }
/* 타이틀 컬러 체인지: 페이지 진입 시 1회 — 실버(시안 white 11%→#999 84%) → 골드(#f2e3c0→#c9a96a)로 마무리 */
.hero_tit strong { display: block; font-size: var(--fs-display); line-height: 1.01; letter-spacing: -0.02em; background: linear-gradient(180deg, #fff 3.7%, #999 28%, #f2e3c0 70.3%, #c9a96a 94.6%); background-size: 100% 300%; background-position: 0 0%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: heroTitColor 3.5s ease-in-out forwards; }
.hero_tit .golden { font-weight: 500; }
.hero_tit .hour { font-weight: 600; animation-delay: 0.5s; }
@keyframes heroTitColor {
    0%, 30% { background-position: 0 0%; }
    100% { background-position: 0 100%; }
}
.hero_tit .by { margin: 0px 0 6px; font-family: 'Pretendard', sans-serif; font-size: 27px; font-weight: 500; letter-spacing: 1.45em; text-indent: 1.45em; color: #fff; }
.hero_tit .tf { font-family: 'Pretendard', sans-serif; font-size: 27px; font-weight: 500; letter-spacing: 0.48em; text-indent: 0.48em; color: #fff; }
.hero_card { display: flex; flex-direction: column; align-items: center; width: 1200px; max-width: 100%; margin-top: 30px; padding: 48px 40px 0; border: 2px solid #182d4f; border-radius: 10px; background: rgba(0, 0, 0, 0.6); text-align: center; }
.hero_card .card_tit { font-size: 32px; color: var(--gold); }
.hero_card .card_tit strong { font-weight: 800; }
.hero_card .bar { width: 60px; height: 2px; margin: 22px 0 24px; background: var(--gold); }
.hero_card .card_txt { font-size: var(--fs-base); line-height: 25px; text-shadow: 0 0 20px rgba(0, 0, 0, 0.3); }
.hero_card .card_txt strong { font-weight: 800; }
.hero_card .btn_box { display: flex; gap: 20px; margin-top: 28px; margin-bottom: -32px; }
.hero_card .btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 380px; max-width: 42vw; height: 64px; border-radius: 100px; box-shadow: 4px 8px 9px rgba(0, 0, 0, 0.25); font-size: var(--fs-lg); font-weight: 800; }
.hero_card .btn img { width: 20px; }
.hero_card .btn_navy { background: #182d4f; }
.hero_card .btn_navy:hover { background: #234070; }
.hero_card .btn_line { background: #000; border: 2px solid #182d4f; }
.hero_card .btn_line:hover { background: #182d4f; }
.scroll_down { position: absolute; bottom: 30px; display: flex; align-items: center; gap: 8px; margin-top: 70px; font-size: var(--fs-base); color: #fff; }
.scroll_down .arrow { width: 8px; height: 16px; animation: scrollDownAni 1.4s ease-in-out infinite; }
@keyframes scrollDownAni { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
@media screen and (max-width: 1250px) {
    .hero_card .btn { height: 62px; }
} /* tablet */
@media screen and (max-width: 960px) {
    .hero_tit .by, .hero_tit .tf { font-size: 18px; }
    .hero_card { padding: 40px 24px 0; }
    .hero_card .card_tit { font-size: 26px; }
    .hero_card .btn_box { flex-direction: column; width: 100%; gap: 12px; }
    .hero_card .btn { width: 100%; max-width: none; height: 50px;}
}
@media screen and (max-width: 650px) {
    #hero{min-height: 600px;}
    .hero_tit .by { letter-spacing: 0.6em; text-indent: 0.6em; font-size: 15px; }
    .hero_tit .tf { letter-spacing: 0.3em; text-indent: 0.3em; font-size: 15px; }
    .hero_card{padding: 20px 10px 0px 10px;}
    .hero_card .card_tit { font-size: 21px; }
    .hero_card .card_txt br { display: none; }
    .hero_card .card_txt strong { display: block; margin-top: 8px; }
    .scroll_down{display: none;}
} /* mobile */

/* ===== common section ===== */
.sec { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: max(900px, 100vh); padding: var(--sp-sec) 0; background-position: center; background-size: cover; background-repeat: no-repeat; }
@media screen and (max-width: 1250px) {
    .sec { display: block; min-height: 0; }
}
.sec > .inner { position: relative; }
.emblem { display: flex; flex-direction: column; align-items: center; margin-bottom: 18px; }
.emblem .ico { width: 64px; margin-bottom: 10px; }
.emblem .txt { display: flex; align-items: center; gap: 24px; font-family: var(--display); font-size: 30px; letter-spacing: 0.02em; color: var(--gold); font-weight: 300; }
.emblem .txt strong { font-weight: 700; margin-left: -14px; }
.emblem .txt .line { width: 210px; max-width: 22vw; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.emblem .txt .line:last-child { background: linear-gradient(270deg, transparent, var(--gold)); }
.sec_tit { margin-bottom: var(--sp-tit); font-size: var(--fs-tit); font-weight: 500; text-align: center; }
.sec_tit strong { font-weight: 800; }
.mo_br { display: none; }
@media screen and (max-width: 650px) {
    .mo_br { display: inline; }
}
@media screen and (max-width: 650px) {
    .emblem .txt { font-size: 22px; gap: 14px; }
    .emblem .txt strong { margin-left: -6px; }
} /* mobile */

/* ===== section 01 service ===== */
.sec_service {position: relative; background-image: linear-gradient(180deg, rgba(16, 32, 58, 0.86), rgba(16, 32, 58, 0.86)), url('../../img/warrant/main/sec1_bg.jpg'); }
.sec_service::before{content: ' '; position: absolute; height: 20px; width: 100%; background-color: #10203B; top: 0; left: 0;}
.service_grid { display: flex; gap: 48px; align-items: stretch; }
.map_card { position: relative; flex: 0 0 43%; aspect-ratio: 534 / 573; border-radius: 4px; overflow: hidden; background: #fff; }
.map_card .badge { position: absolute; top: 30px; z-index: 3; padding: 14px 52px; left: 50%; transform: translateX(-50%); background: var(--navy2); border-radius: 6px; font-size: 26px; font-weight: 800; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3); }
.map_card .map_area {background-color: #10203B; position: absolute; inset: 0; }
.map_card .map_area .map { width: 100%; height: 100%; object-fit: cover; }
/* 핀 → spot 점선 연결 애니메이션 */
.map_card .map_lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.map_card .map_lines line { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 6 5; opacity: 0; animation: mapLineIn 0.6s ease forwards, mapDashMove 1.2s linear infinite; }
.map_card .map_lines .line1 { animation-delay: 0.4s, 0.4s; }
.map_card .map_lines .line2 { animation-delay: 0.7s, 0.7s; }
.map_card .map_lines .line3 { animation-delay: 1s, 1s; }
@keyframes mapLineIn { to { opacity: 1; } }
@keyframes mapDashMove { to { stroke-dashoffset: -22; } }
/* spot 강조 펄스 */
.map_card .spot { position: absolute; display: flex; align-items: center; justify-content: center; width: 12.73%; aspect-ratio: 1; background: var(--navy2); border-radius: 50%; text-align: center; animation: spotPulse 2.4s ease-out infinite; }
.map_card .spot i { font-style: normal; font-size: var(--fs-sm); font-weight: 600; line-height: 1.25; }
.map_card .spot1 { left: 38.9%; top: 42.4%; animation-delay: 0.4s; }
.map_card .spot2 { left: 61.4%; top: 44%; animation-delay: 0.7s; }
.map_card .spot3 { left: 18.9%; top: 48.9%; animation-delay: 1s; }
@keyframes spotPulse {
    0% { box-shadow: 0 0 0 0 rgba(22, 42, 75, 0.5); }
    70% { box-shadow: 0 0 0 14px rgba(22, 42, 75, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 42, 75, 0); }
}
/* 핀 + 후광 */
.map_card .pin { position: absolute; left: 50%; top: 53.9%; width: 12.73%; aspect-ratio: 1; }
.map_card .pin::before, .map_card .pin::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(190, 150, 75, 0.85); animation: pinGlow 3.2s ease-out infinite; }
.map_card .pin::after { animation-delay: 1.6s; }
.map_card .pin img { position: relative; z-index: 1; width: 100%; border-radius: 50%; }
@keyframes pinGlow {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}
.map_card .addr { position: absolute; left: 4.3%; right: 4.3%; bottom: 8.7%; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 10px; background: #1b1a19; border-radius: 8px; font-size: var(--fs-base); }
.map_card .addr strong { color: var(--gold); font-weight: 800; }
.service_txt { flex: 1; display: flex; flex-direction: column; }
.service_txt h3 { font-size: var(--fs-tit-sub); font-weight: 500; line-height: 1.45; margin-bottom: 24px; }
.service_txt h3 strong { font-weight: 800; }
.service_txt .desc { display: flex; align-items: center; gap: 24px; margin-bottom: 44px; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.9); }
.service_txt .desc .line { flex: 0 0 90px; height: 1px; background: rgba(255, 255, 255, 0.4); }
.service_txt .desc .gold { color: var(--gold); font-weight: 600; }
.service_cards { display: flex; gap: 20px; flex: 1; }
.service_cards li { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 16px; background: var(--dark); border: 1px solid var(--gold); text-align: center; transition: background 0.3s; }
.service_cards li em { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--gold); letter-spacing: 0.02em; }
.service_cards li strong { margin-top: 10px; font-size: var(--fs-lg); font-weight: 800; }
.service_cards li p { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.4s ease, max-height 0.4s ease, margin-top 0.4s ease; }
/* 호버 인터랙션은 PC(961px~)에서만 동작 */
@media screen and (min-width: 961px) {
    .service_cards li:hover { background: #10203b; }
    .service_cards li:hover p { opacity: 1; max-height: 200px; margin-top: 34px; }
}
@media screen and (max-width: 1250px) {
    .service_grid { flex-direction: column; align-items: center; gap: 40px; }
    .map_card { flex: none; width: 100%; max-width: 400px; }
    .map_card .badge { top: 20px; padding: 10px 30px; font-size: 18px; }
    .map_card .addr { font-size: 14px; gap: 8px; padding: 12px 8px; }
    .service_txt { width: 100%; }
    .service_txt h3 { text-align: center; }
    .service_txt .desc { justify-content: center; }
} /* tablet */
@media screen and (max-width: 960px){
    /* 960 이하: 호버 상태가 기본 (텍스트 항상 표시) */
    .service_cards li{padding: 30px 5px; background: #10203b;}
    .service_cards li p{opacity: 1; max-height: none; margin-top: 24px;}
}
@media screen and (max-width: 650px){
    .service_txt .desc p br{display: none;}
    .service_cards{gap: 10px;}
    .service_txt .desc .line{flex: 0 0 50px;}
    .service_cards li p{margin-top: 18px;}
}
@media screen and (max-width: 520px) {
    .service_txt .desc{flex-direction: column; gap: 0;}
    .service_txt .desc .line{flex: 0 0 1px; margin: 10px 0; width: 100%;}
    .service_cards li p{margin-top: 14px;}
    .service_cards { flex-direction: column; }
    .service_cards li{padding: 20px 5px;}
    .service_cards li p br{ display: none;}
} /* mobile */

/* ===== section 02 system ===== */
.sec_system { background-image: linear-gradient(180deg, rgba(20, 22, 26, 0.88), rgba(20, 22, 26, 0.88)), url('../../img/warrant/main/sec2_bg.jpg'); }
.step_list { display: flex; gap: 24px; }
.step_list li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; min-height: 250px; padding: 20px 14px; background: rgba(8, 8, 8, 0.85); border: 1px solid transparent; overflow: hidden; text-align: center; transition: border-color 0.3s; cursor: pointer; }
.step_list li .num { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); font-family: var(--display); font-size: 110px; font-weight: 700; line-height: 1; color: rgba(52, 74, 116, 0.45); }
.step_list li em { position: relative; font-size: var(--fs-sm); font-weight: 600; color: #8fa5c8; }
.step_list li strong { position: relative; margin-top: 6px; font-size: var(--fs-lg); font-weight: 800; }
.step_list li .bar { position: relative; width: 56px; height: 1px; margin: 22px 0; background: var(--gold); opacity: 0; transition: opacity 0.3s; }
.step_list li p { position: relative; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.9); opacity: 0; max-height: 0; transition: opacity 0.4s, max-height 0.4s; }
.step_list li p b { font-weight: 800; }
.step_list li.on { border-color: var(--gold); }
.step_list li.on em { color: var(--gold); }
.step_list li.on .bar { opacity: 1; }
.step_list li.on p { opacity: 1; max-height: 200px; }
.step_list li:not(.on) em, .step_list li:not(.on) strong { top: 50%; transform: translateY(120%); transition: transform 0.4s; }
.step_list li.on em, .step_list li.on strong { transform: none; transition: transform 0.4s; }
.step_txt { margin-top: 64px; font-size: var(--fs-lg); line-height: 1.55; text-align: center; }
.step_txt strong { font-weight: 800; }
@media screen and (max-width: 1250px) {
    .step_list { flex-wrap: wrap; }
    .step_list li { flex: 1 1 calc((100% - 48px) / 3); border-color: var(--gold); cursor: default; }
    .step_list li em { color: var(--gold); }
    .step_list li .bar { opacity: 1; }
    .step_list li p { opacity: 1; max-height: none; }
    .step_list li:not(.on) em, .step_list li:not(.on) strong { top: auto; transform: none; }
} /* tablet */
@media screen and (max-width: 650px) {
    .step_list li { flex: 1 1 100%; min-height: 0; min-height: none; padding: 20px; }
    .step_list li p br{display: none;}
} /* mobile */

/* ===== section 03 situation ===== */
.sec_situation { background:  url('../../img/warrant/main/sec3_bg.png') center center / cover;  }
.chip_list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; margin-bottom: 30px; }
.chip_list button { width: 100%; padding: 24px 10px; background: rgba(8, 8, 8, 0.9); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; font-size: 17px; font-weight: 400; color: #fff; transition: background 0.3s, border-color 0.3s; }
.chip_list button b{font-weight: 700;}
.chip_list li.on button { background: var(--navy2); border-color: rgba(255, 255, 255, 0.2); }
.chip_list li{font-weight: 500;}
.chip_list button:hover { border-color: var(--gold); }
.situation_body { display: flex; gap: 44px; }
.situation_body .photo { flex: 0 0 40%; aspect-ratio: 12 / 13; align-self: flex-start; background: url('../../img/warrant/main/sec3_photo.jpg') center / cover no-repeat; border-radius: 4px; }
.situation_body .v_line { flex: 0 0 1px; background: rgba(255, 255, 255, 0.25); }
.situation_body .timeline { flex: 1; display: flex; flex-direction: column; transition: opacity 0.25s ease; }
.situation_body .timeline.changing { opacity: 0; }
.timeline .tl_item { display: none; padding: 30px 34px; background: rgba(13, 20, 34, 0.9); border: 1px solid rgba(201, 169, 106, 0.35); border-radius: 8px; }
.timeline .tl_item.on { display: block; }
.timeline .tl_item p { font-size: 20px; line-height: 1.7; color: rgba(255, 255, 255, 0.92); }
@media screen and (max-width: 960px) {
    .chip_list { grid-template-columns: repeat(2, 1fr); }
    .situation_body { flex-direction: column; }
    .situation_body .photo { display: none; }
    .situation_body .v_line { display: none; }
}
@media screen and (max-width: 650px) {
    .chip_list { grid-template-columns: 1fr; gap: 10px; }
    .chip_list button { padding: 16px 10px; font-size: 15px; }
    .timeline .tl_item { padding: 20px; }
} /* mobile */

/* ===== section 04 difference ===== */
.sec_difference { background-image: linear-gradient(180deg, rgba(13, 20, 38, 0.85), rgba(13, 20, 38, 0.85)), url('../../img/warrant/main/sec4_bg.jpg'); }
.diff_table { position: relative; display: flex; flex-direction: column; border-radius: 4px; overflow: hidden; font-size: var(--fs-base); }
/* SLB 로고 워터마크 (시안 0:470 — Golden Hour 열 위 opacity 0.04) */
.diff_table::after { content: ''; position: absolute; left: 63.5%; top: 50%; transform: translateY(-50%); width: 24.2%; aspect-ratio: 290 / 349; background: url('../../img/warrant/main/slb_mark.png') center / contain no-repeat; filter: brightness(0) invert(1); opacity: 0.1; pointer-events: none; }
.diff_table .row { display: flex; }
.diff_table .row + .row { border-top: 1px solid #393b3e; }
.diff_table .th { flex: 0 0 14.17%; display: flex; align-items: center; justify-content: center; padding: 24px 8px; background: #5e5e5e; font-weight: 600; }
.diff_table .td { flex: 0 0 37.25%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 12px; background: #5e5e5e; text-align: center; line-height: 1.5; border-left: 1px solid #393b3e; }
.diff_table .row .td:last-child { flex: 1; background: #4f5051; }
.diff_table .head .th, .diff_table .head .td { background: #393b3e; font-weight: 600; }
.diff_table .head .td { border-left-color: var(--gold); }
.diff_table .head .td.gold { color: #F9CF7D; font-weight: 800; background: #393b3e;}
.diff_table .td b { font-weight: 800; color: #F9CF7D; }
.diff_table .head .td { font-size: 17px; }
.diff_table .foot { display: flex; align-items: center; justify-content: center; padding: 26px 10px; background: #393b3e; }
.diff_table .foot p { font-size: 18px; }
.diff_table .foot b { color: #F9CF7D; font-weight: 800; }
.diff_pills { display: flex; align-items: center; gap: 16px; margin-top: 36px; }
.diff_pills li { flex: 1; display: flex; align-items: center; justify-content: center; padding: 26px 10px; border: 1px solid var(--gold); border-radius: 4px; background: #4f5051; color: #F9CF7D;  font-size: 18px; font-weight: 600; }
.diff_pills li.plus { flex: 0 0 auto; padding: 0; border: 0; background: none; font-size: 26px; font-weight: 300; }
@media screen and (max-width: 960px) {
    .diff_table { font-size: var(--fs-sm); }
    .diff_table .th { flex-basis: 20%; }
}
@media screen and (max-width: 650px) {
    .diff_table .row { flex-wrap: wrap; }
    .diff_table .th { flex-basis: 100%; padding: 12px 8px; }
    .diff_table .td { flex-basis: 50%; border-left: 0; }
    .diff_table .td + .td { border-left: 1px solid #393b3e; }
    .diff_pills {width: 100%;  gap: 10px; }
    .diff_pills li.plus{flex: 0 0 5px;}
    .diff_pills li { width: 100%; padding:10px; font-size: 16px; text-align: center;}
} /* mobile */

/* ===== section 05 lawyers ===== */
.sec_lawyers { background-image: linear-gradient(180deg, rgba(24, 24, 26, 0.88), rgba(24, 24, 26, 0.88)), url('../../img/warrant/main/sec5_bg.jpg'); }
.lawyer_list { display: flex; flex-wrap: wrap; justify-content: center; gap: 27px 18px; }
.lawyer_list li { flex: 0 0 calc((100% - 36px) / 3); max-width: 388px; }
.lawyer_list .card { position: relative; display: flex; flex-direction: column; }
/* 시안: 카드 388x296, 사진 팝 85px(22%), 네임 바 48px는 카드 하단 오버레이 */
.lawyer_list .photo { position: relative; aspect-ratio: 388 / 296; background: linear-gradient(180deg, #162a4b, #10203b); margin-top: 22%; }
.lawyer_list .photo::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52%; aspect-ratio: 47 / 57; background: url('../../img/warrant/main/slb_mark.png') center / contain no-repeat; opacity: 0.18; }
.lawyer_list .photo img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: auto; height: 128.8%; max-width: none; }
.lawyer_list .name { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; background: #1b1a19; font-size: 20px; font-weight: 800; color: #E5CF87; }
.lawyer_list .name span { font-size: var(--fs-sm); font-weight: 500; color: var(--gold); }
@media screen and (max-width: 1250px) {
    .lawyer_list li { flex: 1 1 calc((100% - 36px) / 3); }
} /* tablet */
@media screen and (max-width: 960px) {
    .lawyer_list { gap: 24px 16px; }
    .lawyer_list li { flex: 1 1 calc((100% - 16px) / 2); }
}
@media screen and (max-width: 650px) {
    .lawyer_list { gap: 20px 12px; }
    .lawyer_list li { flex: 0 1 calc((100% - 12px) / 2); max-width: none; }
    .lawyer_list .photo{aspect-ratio: 200 / 250; overflow: hidden; margin-top: 0;}
    .lawyer_list .photo img {height: 100%;}
    .lawyer_list .name { gap: 6px; height: 40px; font-size: 16px; }
} /* mobile */

/* ===== section 06 faq ===== */
.sec_faq { background-color: #222; background-image: linear-gradient(rgba(24, 45, 79, 0.6), rgba(24, 45, 79, 0.6)), url('../../img/warrant/main/faq_bg.jpg'); }
.faq_box { padding: 40px 56px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; background: rgba(10, 18, 32, 0.35); }
.faq_list li { border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.faq_list li:last-child { border-bottom: 0; }
.faq_list .q { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 26px 4px; font-size: 18px; font-weight: 600; text-align: left; }
.faq_list .q .ico { position: relative; flex-shrink: 0; width: 18px; height: 18px; margin-left: 16px; }
.faq_list .q .ico::before, .faq_list .q .ico::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--gold); transition: transform 0.3s; }
.faq_list .q .ico::before { width: 100%; height: 1px; }
.faq_list .q .ico::after { width: 1px; height: 100%; }
.faq_list li.open .q .ico::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq_list .a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; }
.faq_list .a > p { overflow: hidden; font-size: var(--fs-base); line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.faq_list li.open .a { grid-template-rows: 1fr; }
.faq_list li.open .a > p { padding: 0 4px 26px; }
@media screen and (max-width: 960px) {
    .faq_box { padding: 10px 24px; }
    .faq_list .q{font-size: 16px;}
}

/* ---------------- sec_location 상담 & 오시는 길 ---------------- */
.sec_location{ padding:100px 0 120px;  background: url('../../img/warrant/main/cta_desk.jpg') center / cover no-repeat; }
.sec_location .loc_flex{ display:flex; gap:20px; justify-content:space-between; align-items:flex-start; }
.sec_location .loc_info{ width:590px; }
.sec_location .office_tab{ display:flex; gap:50px; margin-bottom:35px; }
.sec_location .office_tab button{ position:relative; padding-bottom:14px; font-weight:500; font-size:28px; color:#ddd; transition:color .2s; }
.sec_location .office_tab button.on{ font-weight:700; color:var(--gold); }
.sec_location .office_tab button.on::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:5px; background:var(--gold); }
.sec_location .office_info{ display:none; }
.sec_location .office_info.on{ display:block; }
.sec_location .map{ height:339px; border-radius:10px; overflow:hidden; }
.sec_location .map img{ width:100%; height:100%; object-fit:cover; }
.sec_location .info_box{ margin-top:50px; }
.sec_location .info_box strong{ display:block; font-weight:600; font-size:20px; color:#fff; padding-bottom:20px; border-bottom:2px solid #555; }
.sec_location .contact_row{ display:flex; gap:60px; padding:22px 0 36px; }
.sec_location .contact_row li{ display:flex; align-items:center; gap:16px; }
.sec_location .contact_row img{ width:28px; height:28px; object-fit:contain; }
.sec_location .contact_row span{ font-weight:400; font-size:20px; color:#fff; }
.sec_location .consult_form{ position:relative; width:590px; background:#fff; border-radius:10px; box-shadow:8px 10px 24px rgba(0,0,0,0.15); padding:56px 30px 40px; }
.sec_location .consult_form .pager{ position:absolute; right:30px; top:20px; font-weight:500; font-size:18px; color:#999; }
.sec_location .consult_form .pager em{ font-style:normal; color:var(--black-color); }
.sec_location .field{ margin-bottom:24px; }
.sec_location .field label{ display:block; font-weight:400; font-size:16px; color:#222; margin-bottom:10px; }
.sec_location .field label i{ font-style:normal; color:#eb5757; }
.sec_location .field input[type="text"], .sec_location .field textarea{ width:100%; background:#fbfbfb; border:1px solid #e1e1e1; border-radius:2px; padding:12px 10px; font-weight:400; font-size:14px; color:#333; outline:none; }
.sec_location .field input[type="text"]::placeholder, .sec_location .field textarea::placeholder{ color:rgba(127,127,127,0.2); }
.sec_location .field input[type="text"]:focus, .sec_location .field textarea:focus{ border-color:var(--main-color); }
.sec_location .field textarea{ height:124px; resize:none; }
.sec_location .radio_row{ display:flex; gap:35px; }
.sec_location .radio_row .radio{ display:flex; align-items:center; gap:10px; font-weight:400; font-size:16px; color:#999; cursor:pointer; margin-bottom:0; }
.sec_location .radio_row .radio input{ display:none; }
.sec_location .radio_row .radio span{ width:18px; height:18px; border:1.5px solid #c4c4c4; border-radius:50%; background:#fff; flex-shrink:0; transition:border-color .2s, background .2s, box-shadow .2s; }
.sec_location .radio_row .radio input:checked + span{ border-color:var(--gold); background:var(--gold); box-shadow:inset 0 0 0 3px #fff; }
.sec_location .radio_row .radio:has(input:checked){ color:#000; }
.sec_location .btn_next{ display:block; width:285px; height:43px; margin:36px auto 0; border-radius:26px; background:#182d4f; font-weight:700; font-size:14px; color:#fff; transition:background .2s, color .2s; }
.sec_location .btn_next:hover{ background:var(--gold); color:#222; }

/* 상담폼 STEP 2 (자가 진단) */
.sec_location .form_step.step2{ display:none; }
.sec_location .consult_form.on_step2 .step1{ display:none; }
.sec_location .consult_form.on_step2 .step2{ display:block; }
.sec_location .diag_tit{ font-weight:500; font-size:18px; color:#222; margin-bottom:21px; }
.sec_location .diag_tit i{ font-style:normal; color:#eb5757; }
.sec_location .step2 .field{ margin-bottom:20px; }
.sec_location .step2 .field label{ margin-bottom:12px; }
.sec_location .opt_row{ display:flex; flex-wrap:wrap; gap:8px 10px; max-width:410px; }
.sec_location .opt{ width:120px; height:35px; background:#fbfbfb; border:1px solid #e1e1e1; border-radius:3px; font-weight:500; font-size:16px; color:#999; transition:all .2s; }
.sec_location .opt.on{ border-color:#182D4F; color: #182D4F; }
.sec_location .check_list{ display:flex; flex-wrap:wrap; gap:17px 24px; }
.sec_location .chk{ display:flex; align-items:center; gap:10px; font-weight:400; font-size:16px; color:#999; transition:color .2s; }
.sec_location .chk::before{ content:''; width:18px; height:18px; border:1.5px solid #c4c4c4; border-radius:3px; background:#fff; flex-shrink:0; transition:border-color .2s, background .2s; }
.sec_location .chk.on{ color:#000; }
.sec_location .chk.on::before{ border-color:var(--gold); background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 10px; }
.sec_location .agree{ display:flex; align-items:center; gap:10px; margin-top:31px; font-weight:400; font-size:12px; color:#7f7f7f; cursor:pointer; }
.sec_location .agree input{ display:none; }
.sec_location .agree span{ width:16px; height:16px; border:1px solid #c4c4c4; border-radius:2px; background:#fff; flex-shrink:0; transition:border-color .2s, background .2s; }
.sec_location .agree input:checked + span{ border-color:var(--gold); background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 9px; }
.sec_location .btn_row{ display:flex; justify-content:center; align-items:center; gap:10px; margin-top:36px; }
.sec_location .btn_row .btn_next{ margin:0; }
.sec_location .btn_prev{ width:120px; height:43px; border-radius:26px; border:1px solid #c4c4c4; background:#fff; font-weight:500; font-size:14px; color:#777; transition:all .2s; }
.sec_location .btn_prev:hover{ border-color:#182d4f; color:#182d4f; }

@media screen and (max-width: 1250px) {
    .sec_location{ padding:80px 0 100px; }
    .sec_location .office_tab button{ font-size:26px; }
    .sec_location .loc_flex{ flex-direction:column; gap:60px; }
    .sec_location .loc_info, .sec_location .consult_form{ width:100%; }
}
@media screen and (max-width: 960px) {
    .sec_location{ padding:60px 0 80px; }
    .sec_location .office_tab button{ font-size:23px; }
    .sec_location .contact_row span{ font-size:18px; }
    .sec_location .diag_tit{ font-size:18px; }
}
@media screen and (max-width: 650px) {
    .sec_location{ padding:40px 0 60px; }
    .sec_location .loc_flex{ gap:20px; }
    .sec_location .office_tab{ gap:30px; margin-bottom:24px; }
    .sec_location .office_tab button{ font-size:19px; }
    .sec_location .map{ height:240px; }
    .sec_location .info_box{ margin-top:36px; }
    .sec_location .contact_row{ flex-direction:column; align-items:flex-start; gap:14px; padding:18px 0 28px; }
    .sec_location .contact_row img{ width:20px; height:20px; }
    .sec_location .contact_row span{ font-size:15px; }
    .sec_location .consult_form{ padding:48px 16px 30px; }
    .sec_location .consult_form .pager{ font-size:15px; }
    .sec_location .diag_tit{ font-size:16px; }
    .sec_location .field label,
    .sec_location .field input[type="text"],
    .sec_location .field textarea,
    .sec_location .radio_row .radio,
    .sec_location .opt,
    .sec_location .chk,
    .sec_location .agree,
    .sec_location .btn_next,
    .sec_location .btn_prev{ font-size:15px; }
    .sec_location .opt{ width:calc(50% - 5px); }
    .sec_location .btn_row{ gap:8px; }
    .sec_location .btn_prev{ width:100px; }
}
/* ===== footer ===== */
#footer { padding: 70px 0 80px; background: #222; }
#footer .inner { display: flex; align-items: center; gap: 80px; }
#footer .f_logo { flex: 0 0 30%; display: flex; flex-direction: column; align-items: center; gap: 24px; }
#footer .f_logo img { width: 130px; opacity: 0.55; }
#footer .f_logo .copy { font-size: var(--fs-xs); color: #777; }
#footer .f_info { flex: 1; }
#footer .f_row { display: flex; flex-wrap: wrap; gap: 12px 40px; padding: 18px 0; margin: 0; }
#footer .f_row + .f_row { border-top: 1px solid rgba(255, 255, 255, 0.15); }
#footer .f_row .col { display: flex; align-items: baseline; gap: 16px; }
#footer .f_row.top .col:first-child dt { font-size: 17px; font-weight: 800; color: #fff; }
#footer dt { font-size: var(--fs-sm); color: #999; }
#footer dd { font-size: 15px; color: #eee; margin: 0; }
#footer dd.b { font-weight: 700; }
#footer dd.num { font-family: var(--display); letter-spacing: 0.02em; }
@media screen and (max-width: 960px) {
    #footer .inner { flex-direction: column; gap: 40px; }
}
@media screen and (max-width: 650px) {
    #footer .f_row { flex-direction: column; gap: 8px; }
} /* mobile */


/* ===== 상담폼: 그누보드 연동(라디오 라벨형) 덮어쓰기 ===== */
.sec_location .field label.opt{ display:block; width:auto; height:auto; background:none; border:none; border-radius:0; padding:0; margin:0; cursor:pointer; font-size:0; }
.sec_location .opt input{ display:none; }
.sec_location .opt .text{ display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:120px; height:35px; background:#fbfbfb; border:1px solid #e1e1e1; border-radius:3px; font-weight:500; font-size:16px; color:#999; text-align:center; transition:border-color .2s, color .2s; }
.sec_location .opt.on .text,
.sec_location .opt input:checked + .text{ border-color:#182D4F; color:#182D4F; }
.sec_location .field label.chk{ display:flex; align-items:center; gap:10px; margin:0; cursor:pointer; font-weight:400; font-size:16px; color:#999; }
.sec_location .chk::before{ display:none; content:none; }
.sec_location .chk input{ display:none; }
.sec_location .chk .mark{ display:block; width:18px; height:18px; border:1.5px solid #c4c4c4; border-radius:3px; background:#fff; flex-shrink:0; transition:border-color .2s, background .2s; }
.sec_location .chk .text{ font-weight:400; font-size:16px; color:#999; transition:color .2s; white-space:nowrap; }
.sec_location .chk input:checked + .mark,
.sec_location .chk.on .mark{ border-color:var(--gold); background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 10px; }
.sec_location .chk input:checked ~ .text,
.sec_location .chk.on .text{ color:#000; }
.sec_location .agree .privacyPopupBtn{ font-weight:600; color:#555; cursor:pointer; text-decoration:underline; }
@media (max-width:1024px){
    .sec_location .field label.opt{ width:calc(50% - 5px); }
    .sec_location .opt .text{ width:100%; font-size:15px; }
}

/* 개인정보 팝업: 다크 테마 글자색 상속 방지 */
.privacyPopup .contentWrap{ color:#222; }
.privacyPopup .contentWrap .titleBox span{ color:#111; }
.privacyPopup .contentWrap .contentBox{ color:#555; font-size:15px; line-height:1.7; overflow-y:auto; }