@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Do+Hyeon');
/* font-family: 'Do Hyeon', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
/* font-family: 'Lobster', cursive;  */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* font-family: 'Poppins', sans-serif; */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean');
html {
    font-size: 16px;
    /* 1rem = 16px */
}

body {
    margin:0;
    padding:0;
    font-size:1rem;
    font-family:'Poppins', 'Noto Sans KR', sans-serif;
    font-weight:400;
    color:#333;
}

h1,h2,h3,h4,h5,h6 {
    margin:0;
    padding:0;
    border:0;
    font-size:1rem;
    font-family:'Poppins', 'Noto Sans KR', sans-serif;
}

input, button {
    margin:0;
    padding:0;
    font-family:'Poppins', 'Noto Sans KR', sans-serif;
    font-size:1rem;
}

textarea, select {
    font-family:'Poppins', 'Noto Sans KR', sans-serif;
    font-size:1rem;
}

/* =========================================================
   SPYBAND 비테마 공통 디자인 | 기존 폰트 선언 유지
   ========================================================= */
:root {
    --spy-navy:#0b1525;
    --spy-deep:#07101d;
    --spy-gold:#c9a76c;
    --spy-gold-light:#e3c895;
    --spy-muted:#657084;
    --spy-white:#fff;
    --spy-width:1240px;
}

*,*::before,*::after {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:90px;
}

body {
    overflow-x:hidden;
}

.spy-main {
    display:block;
    min-height:50vh;
}

.spy-main a,.spy-header a,.spy-footer a {
    text-decoration:none;
}

.spy-container {
    width:min(calc(100% - 64px),var(--spy-width));
    margin:0 auto;
}

.spy-skip {
    position:fixed;
    left:16px;
    top:-80px;
    z-index:99999;
    background:#fff;
    padding:12px 20px;
    color:#111;
}

.spy-skip:focus {
    top:10px;
}

/* HEADER */
.spy-header {
    height:90px;
    position:fixed;
    inset:0 0 auto;
    z-index:1000;
    transition:background .25s,box-shadow .25s;
    background:rgba(7,16,29,.94);
    color:#fff;
}

.spy-header.is-home:not(.is-scrolled) {
    background:linear-gradient(180deg,rgba(5,12,23,.85),rgba(5,12,23,0));
}

.spy-header.is-scrolled {
    background:rgba(7,16,29,.97);
    box-shadow:0 8px 32px rgba(0,0,0,.18);
}

.spy-header-inner {
    width:min(calc(100% - 64px),1240px);
    height:100%;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.spy-brand {
    color:#fff;
    display:inline-flex;
    align-items:center;
    gap:13px;
    min-width:220px;
}

.spy-brand-symbol {
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border:1px solid var(--spy-gold);
    color:var(--spy-gold);
    font-size:22px;
}

.spy-brand-text {
    display:flex;
    flex-direction:column;
    line-height:1.25;
}

.spy-brand-text strong {
    font-size:23px;
    letter-spacing:.11em;
}

.spy-brand-text small {
    font-size:11px;
    letter-spacing:.08em;
    color:#d7dce4;
    margin-top:5px;
}

.spy-nav {
    display:flex;
    align-items:center;
    gap:35px;
}

.spy-nav>a {
    color:#fff;
    font-size:15px;
    font-weight:500;
    transition:color .2s;
}

.spy-nav>a:hover,.spy-nav>a:focus-visible {
    color:var(--spy-gold-light);
}

.spy-nav .spy-nav-contact {
    border:1px solid var(--spy-gold);
    padding:13px 19px;
    color:var(--spy-gold-light);
}

.spy-nav-contact i {
    margin-left:10px;
}

.spy-menu-toggle {
    display:none;
    border:0;
    background:transparent;
    color:#fff;
    font-size:26px;
    cursor:pointer;
}

.spy-nav-backdrop {
    display:none;
}

/* SHARED */
.spy-section {
    padding:115px 0;
}

.spy-kicker {
    display:block;
    color:var(--spy-gold);
    font-size:13px;
    letter-spacing:.2em;
    font-weight:700;
    margin-bottom:22px;
}

.spy-section h2 {
    font-size:clamp(29px,3.2vw,47px);
    line-height:1.45;
    letter-spacing:-.045em;
    font-weight:400;
    word-break:keep-all;
}

.spy-section h2 strong {
    font-weight:750;
}

.spy-section p {
    font-size:16px;
    line-height:1.95;
    word-break:keep-all;
}

.spy-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:26px;
    min-height:54px;
    padding:15px 25px;
    font-size:14px;
    font-weight:700;
    transition:transform .2s,background .2s;
    border:1px solid transparent;
}

.spy-btn:hover {
    transform:translateY(-2px);
}

.spy-btn-gold {
    background:var(--spy-gold);
    color:#111b2b!important;
}

.spy-btn-gold:hover {
    background:var(--spy-gold-light);
}

.spy-btn-outline {
    border-color:rgba(255,255,255,.7);
    color:#fff!important;
}

.spy-btn-outline-light {
    border-color:rgba(255,255,255,.6);
    color:#fff!important;
}

.spy-btn-dark {
    background:var(--spy-navy);
    color:#fff!important;
}

.spy-actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

/* SECTION 01: VIDEO */
.spy-hero {
    height:100vh;
    min-height:620px;
    min-height:100svh;
    position:relative;
    display:flex;
    align-items:center;
    background:radial-gradient(circle at 75% 50%,#2a4056,#081323 65%);
    overflow:hidden;
    color:#fff;
}

.spy-hero-video {
    position:absolute;
    width:100%;
    height:100%;
    inset:0;
    object-fit:cover;
    opacity:.75;
}

.spy-hero-video.is-unavailable {
    display:none;
}

.spy-hero-shade {
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(5,13,26,.93) 0%,rgba(5,13,26,.69) 48%,rgba(5,13,26,.18) 100%);
}

.spy-hero-content {
    position:relative;
    z-index:1;
    padding-top:80px;
}

.spy-eyebrow {
    display:flex;
    align-items:center;
    gap:14px;
    font-size:13px;
    letter-spacing:.22em;
    color:var(--spy-gold-light);
    font-weight:600;
}

.spy-line {
    width:35px;
    height:1px;
    background:var(--spy-gold);
}

.spy-hero h1 {
    font-size:clamp(40px,5.1vw,76px);
    line-height:1.28;
    letter-spacing:-.06em;
    margin:30px 0;
    font-weight:750;
    word-break:keep-all;
}

.spy-hero h1 em {
    font-style:normal;
    color:var(--spy-gold-light);
}

.spy-hero-content>p {
    font-size:17px;
    line-height:1.9;
    color:#e3e6ea;
    max-width:640px;
    margin-bottom:35px;
    word-break:keep-all;
}

.spy-scroll-cue {
    position:absolute;
    bottom:36px;
    left:50%;
    transform:translateX(-50%);
    color:#fff!important;
    text-decoration:none;
    font-size:11px;
    letter-spacing:.18em;
    display:flex;
    align-items:center;
    gap:16px;
    z-index:1;
}

/* SECTION 02: ABOUT */
.spy-about {
    background:#fff;
}

.spy-split {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:clamp(40px,7vw,115px);
}

.spy-about-art {
    min-height:510px;
    background:linear-gradient(145deg,#1a3046,#07101c 75%);
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:var(--spy-gold);
    overflow:hidden;
}

.spy-about-art:before {
    content:'';
    position:absolute;
    width:330px;
    height:330px;
    border:1px solid rgba(201,167,108,.18);
    border-radius:50%;
}

.spy-about-art>span {
    font-size:38px;
    letter-spacing:.25em;
    font-weight:700;
    z-index:1;
}

.spy-about-art>i {
    font-size:120px;
    opacity:.18;
    margin:22px 0;
}

.spy-about-art>small {
    letter-spacing:.18em;
    font-size:10px;
    z-index:1;
}

.spy-copy p {
    color:#586477;
    margin:20px 0;
}

.spy-text-link {
    display:inline-flex;
    gap:20px;
    align-items:center;
    margin-top:16px;
    color:var(--spy-navy);
    border-bottom:1px solid var(--spy-gold);
    padding-bottom:10px;
    font-weight:700;
    font-size:14px;
}

/* SECTION 03: SERVICES */
.spy-services {
    background:#f3f5f7;
}

.spy-section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:42px;
}

.spy-section-heading>p {
    max-width:330px;
    color:var(--spy-muted);
    margin:0;
}

.spy-service-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.spy-service-card {
    background:#fff;
    color:#162337;
    min-height:310px;
    padding:33px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    transition:transform .25s,box-shadow .25s;
    border:1px solid #e8ebef;
}

.spy-service-card:hover {
    transform:translateY(-5px);
    box-shadow:0 15px 45px rgba(10,25,45,.1);
}

.spy-service-num {
    color:#9aa5b5;
    font-size:13px;
}

.spy-service-icon {
    font-size:36px;
    color:#b48e52;
    margin:28px 0 22px;
}

.spy-service-card h3 {
    font-size:21px;
    letter-spacing:-.03em;
}

.spy-service-card p {
    font-size:14px;
    color:#697386;
    line-height:1.7;
    margin:12px 0 25px;
}

.spy-service-more {
    margin-top:auto;
    font-size:13px;
    color:#a27d44;
    font-weight:700;
}

.spy-service-more i {
    margin-left:10px;
}

.spy-section-bottom {
    text-align:center;
    margin-top:38px;
}

/* SECTION 04: PRINCIPLES */
.spy-principles {
    background:#0c192b;
    color:#fff;
}

.spy-principles h2 {
    margin-bottom:50px;
}

.spy-principle-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.spy-principle-grid article {
    border-top:1px solid rgba(201,167,108,.7);
    padding-top:32px;
}

.spy-principle-grid i {
    font-size:31px;
    color:var(--spy-gold);
    margin-bottom:26px;
}

.spy-principle-grid h3 {
    font-size:20px;
}

.spy-principle-grid p {
    font-size:14px;
    color:#bac4d1;
    line-height:1.8;
}

/* SECTION 05: PROCESS */
.spy-process {
    background:#fff;
}

.spy-center {
    text-align:center;
}

.spy-center>p {
    color:var(--spy-muted);
    margin:16px 0 0;
}

.spy-step-list {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
    padding:0;
    margin:70px 0 0;
    list-style:none;
}

.spy-step-list li {
    position:relative;
    text-align:center;
    padding:30px 10px;
    background:#f7f8fa;
}

.spy-step-list li>span {
    display:block;
    font-size:13px;
    color:#ad8c59;
    letter-spacing:.1em;
}

.spy-step-list li>i {
    font-size:32px;
    color:#253a52;
    margin:25px 0;
}

.spy-step-list h3 {
    font-size:18px;
}

.spy-step-list p {
    font-size:13px;
    color:#667287;
    margin:10px 0 0;
    line-height:1.6;
}

/* SECTION 06: INSIGHT */
.spy-insight {
    background:linear-gradient(110deg,#182c44,#0a1524);
    color:#fff;
}

.spy-insight-inner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
}

.spy-insight p {
    color:#bec9d8;
    margin-bottom:0;
}

/* SECTION 07: CONTACT */
.spy-contact {
    background:#e9e1d5;
    text-align:center;
}

.spy-contact .spy-kicker {
    color:#97703a;
}

.spy-contact p {
    color:#4e5a68;
    max-width:690px;
    margin:20px auto 30px;
}

.spy-contact .spy-actions {
    justify-content:center;
}

.spy-contact .spy-btn-outline-light {
    border-color:#33475b;
    color:#26374a!important;
}

.spy-contact small {
    display:block;
    margin-top:28px;
    color:#647081;
}

/* FOOTER */
.spy-footer {
    background:#060d17;
    color:#fff;
    padding:65px 0 25px;
}

.spy-footer-top {
    display:flex;
    justify-content:space-between;
    gap:40px;
    padding-bottom:55px;
}

.spy-footer-brand {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.spy-footer-brand strong {
    font-size:29px;
    letter-spacing:.14em;
    color:var(--spy-gold);
}

.spy-footer-brand span {
    font-size:13px;
}

.spy-footer-brand p {
    font-size:13px;
    color:#a5b1c1;
}

.spy-footer-links {
    display:flex;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:25px;
}

.spy-footer-links a {
    font-size:14px;
    color:#d9e0e8;
}

.spy-footer-bottom {
    border-top:1px solid #253142;
    padding-top:22px;
    color:#8e9cad;
    font-size:12px;
    display:flex;
    justify-content:space-between;
    gap:15px;
    flex-wrap:wrap;
}

.spy-footer-bottom p {
    margin:0;
}

.spy-to-top {
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:900;
    width:44px;
    height:44px;
    background:var(--spy-gold);
    border:0;
    color:#101b2a;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s;
}

.spy-to-top.is-visible {
    opacity:1;
    pointer-events:auto;
}

/* RESPONSIVE */
@media(max-width:1100px) {
    .spy-nav {
        gap:20px;
    }

    .spy-nav>a {
        font-size:14px;
    }

    .spy-brand {
        min-width:auto;
    }

}

@media(max-width:960px) {
    .spy-header,.spy-header.is-home {
        height:72px;
    }

    .spy-header-inner {
        width:calc(100% - 40px);
    }

    .spy-menu-toggle {
        display:block;
    }

    .spy-nav {
        position:fixed;
        right:0;
        top:72px;
        bottom:0;
        width:min(340px,85vw);
        background:#0b1727;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:0;
        padding:22px;
        transform:translateX(105%);
        transition:transform .25s;
        z-index:1002;
        overflow-y:auto;
    }

    .spy-nav.is-open {
        transform:translateX(0);
    }

    .spy-nav>a {
        font-size:16px;
        padding:18px 10px;
        border-bottom:1px solid #28374b;
    }

    .spy-nav .spy-nav-contact {
        margin-top:18px;
        text-align:center;
    }

    .spy-nav-backdrop {
        position:fixed;
        inset:72px 0 0;
        background:rgba(0,0,0,.55);
        z-index:999;
    }

    .spy-menu-open .spy-nav-backdrop {
        display:block;
    }

    .spy-menu-open {
        overflow:hidden;
    }

    .spy-split {
        grid-template-columns:1fr;
    }

    .spy-about-art {
        min-height:360px;
    }

    .spy-service-grid {
        grid-template-columns:repeat(2,1fr);
    }

    .spy-principle-grid {
        grid-template-columns:repeat(2,1fr);
    }

    .spy-step-list {
        grid-template-columns:repeat(3,1fr);
    }

    .spy-insight-inner {
        align-items:flex-start;
        flex-direction:column;
    }

}

@media(max-width:640px) {
    .spy-container {
        width:calc(100% - 36px);
    }

    .spy-section {
        padding:72px 0;
    }

    .spy-brand-symbol {
        width:38px;
        height:38px;
        font-size:19px;
    }

    .spy-brand-text strong {
        font-size:19px;
    }

    .spy-brand-text small {
        font-size:10px;
    }

    .spy-hero {
        min-height:580px;
    }

    .spy-hero-content {
        padding-top:60px;
    }

    .spy-hero h1 {
        font-size:clamp(33px,8.6vw,47px);
        margin:23px 0;
    }

    .spy-hero-content>p {
        font-size:15px;
    }

    .spy-eyebrow {
        font-size:10px;
        letter-spacing:.12em;
    }

    .spy-scroll-cue {
        bottom:22px;
        font-size:10px;
    }

    .spy-btn {
        min-height:50px;
        padding:13px 18px;
        gap:12px;
    }

    .spy-section h2 {
        font-size:30px;
    }

    .spy-about-art {
        min-height:300px;
    }

    .spy-about-art>span {
        font-size:28px;
    }

    .spy-section-heading {
        align-items:flex-start;
        flex-direction:column;
    }

    .spy-service-grid {
        grid-template-columns:1fr;
        gap:12px;
    }

    .spy-service-card {
        min-height:240px;
        padding:26px;
    }

    .spy-service-icon {
        margin:20px 0;
    }

    .spy-principle-grid {
        gap:26px;
    }

    .spy-principle-grid h3 {
        font-size:17px;
    }

    .spy-step-list {
        grid-template-columns:1fr;
        margin-top:38px;
        gap:10px;
    }

    .spy-step-list li {
        display:grid;
        grid-template-columns:38px 42px 1fr;
        grid-template-rows:auto auto;
        text-align:left;
        align-items:center;
        column-gap:12px;
        padding:16px;
    }

    .spy-step-list li>span {
        grid-row:1/3;
    }

    .spy-step-list li>i {
        font-size:23px;
        margin:0;
        grid-row:1/3;
    }

    .spy-step-list h3 {
        font-size:16px;
    }

    .spy-step-list p {
        grid-column:3;
        margin:4px 0 0;
    }

    .spy-footer-top {
        flex-direction:column;
        padding-bottom:30px;
    }

    .spy-footer-links {
        gap:15px;
    }

    .spy-footer-links a {
        font-size:12px;
    }

}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }

    .spy-btn,.spy-service-card,.spy-nav {
        transition:none;
    }

}

/* 소개 섹션: CSS 배경 대신 독립 이미지 요소 사용 */
.spy-about-art {
    min-height: 0;
    background: none;
}
.spy-about-art::before {
    display: none;
}
.spy-about-art img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* =========================================================
   SECTION 07: 협력 파트너 - 법무법인 강현
   이미지 배경 없이 텍스트 및 Font Awesome 아이콘 사용
   ========================================================= */
.spy-partner {
    background-color: #f7f8fa;
    border-top: 1px solid #e7e9ed;
    border-bottom: 1px solid #e7e9ed;
}

.spy-partner-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: center;
    gap: 48px;
}

.spy-partner-copy h2 {
    margin: 16px 0 20px;
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.35;
    color: var(--spy-navy);
}

.spy-partner-copy h2 strong {
    display: block;
    color: #9b773b;
}

.spy-partner-copy p {
    max-width: 650px;
    margin: 0 0 28px;
    line-height: 1.85;
    color: #4c5563;
}

.spy-partner-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 250px;
    padding: 28px 20px;
    border: 1px solid #d9dce2;
    background-color: #fff;
    color: var(--spy-navy);
}

.spy-partner-logo {
    display: block;
    width: 128px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.spy-partner-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.spy-partner-brand strong {
    font-size: 22px;
    font-weight: 700;
    color: var(--spy-navy);
}

.spy-partner-brand span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #657084;
}

@media (max-width: 768px) {
    .spy-partner-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .spy-partner-mark {
        min-height: 160px;
    }
}


/* =========================================================
   SECTION 03-1: 업로드 자료 기반 주요업무 세부 안내
   ========================================================= */
.spy-business-details {
    margin-top: 72px;
}

.spy-business-group {
    margin-top: 42px;
}

.spy-business-group > h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 24px;
    color: var(--spy-navy);
}

.spy-business-group > h3 i {
    color: var(--spy-gold);
}

.spy-business-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.spy-business-item {
    padding: 24px;
    border: 1px solid #e1e4e8;
    background-color: #fff;
}

.spy-business-item h4 {
    padding-bottom: 14px;
    border-bottom: 1px solid #e1e4e8;
    font-size: 18px;
    color: var(--spy-navy);
}

.spy-business-item ul {
    margin: 16px 0 0;
    padding: 0 0 0 20px;
}

.spy-business-item li {
    margin: 8px 0;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.spy-business-notice {
    margin: 36px 0 0;
    font-size: 14px;
    line-height: 1.8;
    color: #59616b;
}

@media (max-width: 1100px) {
    .spy-business-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .spy-business-details {
        margin-top: 48px;
    }

    .spy-business-grid {
        grid-template-columns: 1fr;
    }

    .spy-business-group > h3 {
        font-size: 21px;
    }
}