/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    font-size:16px;
}

body{
    margin:0;
    padding:0;

    font-family:
        "Pretendard",
        "Noto Sans KR",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:#e9edf3;
    color:#172033;

    font-size:16px;
    line-height:1.7;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

button,
input,
textarea{
    font-family:inherit;
}

button{
    border:0;
    cursor:pointer;
}

a{
    text-decoration:none;
    color:inherit;
}

img{
    max-width:100%;
}


/* =========================================================
   VARIABLES
========================================================= */

:root{

    --navy:#0a1f3d;
    --navy2:#123a6b;

    --blue:#2864df;
    --blue-soft:#edf4ff;

    --text:#172033;
    --text2:#536176;
    --text3:#8994a6;

    --bg:#f7f9fc;
    --white:#ffffff;

    --line:#e5eaf1;

    --radius:24px;

    --shadow:
        0 18px 50px rgba(13,31,57,.08);
}


/* =========================================================
   PAGE
========================================================= */

.page{

    width:100%;
    max-width:520px;

    min-height:100vh;

    margin:0 auto;

    background:var(--bg);

    overflow:hidden;

    position:relative;
}


/* =========================================================
   SCROLL PROGRESS
========================================================= */

.progress{

    position:fixed;

    top:0;
    left:0;

    width:0;
    height:4px;

    background:#4b83ff;

    z-index:9999;
}


/* =========================================================
   HERO
========================================================= */

.hero{

    position:relative;

    padding:
        72px 25px
        125px;

    color:#fff;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(81,142,255,.30),
            transparent 33%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(44,108,220,.18),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #07172d,
            #0a1f3d 55%,
            #123a6b
        );
}

.hero::before{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    right:-170px;
    top:-170px;

    border-radius:50%;

    border:
        1px solid rgba(255,255,255,.08);
}

.hero::after{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    left:-140px;
    bottom:-160px;

    border-radius:50%;

    background:
        rgba(255,255,255,.035);
}

.hero-content{

    position:relative;

    z-index:2;

    text-align:center;
}


/* =========================================================
   PROFILE
========================================================= */

.profile-photo{

    width:128px;
    height:128px;

    margin:0 auto 24px;

    padding:5px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #fff,
            rgba(255,255,255,.35)
        );

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);
}

.profile-photo img{

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:50%;
}


.profile-badge{

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:8px 15px;

    margin-bottom:16px;

    border:
        1px solid
        rgba(255,255,255,.15);

    border-radius:30px;

    background:
        rgba(255,255,255,.09);

    color:
        rgba(255,255,255,.9);

    font-size:12px;

    font-weight:700;

    letter-spacing:1.4px;
}


.profile-name{

    font-size:42px;

    line-height:1.2;

    font-weight:800;

    letter-spacing:-2px;

    margin-bottom:5px;
}


.profile-job{

    font-size:17px;

    color:
        rgba(255,255,255,.72);

    font-weight:500;
}


.profile-intro{

    margin:20px auto 0;

    max-width:360px;

    color:
        rgba(255,255,255,.76);

    font-size:16px;

    line-height:1.9;

    word-break:keep-all;
}


/* =========================================================
   HERO BUTTON
========================================================= */

.hero-buttons{

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:10px;

    margin-top:30px;
}


.hero-button{

    min-height:57px;

    padding:0 10px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    border-radius:16px;

    font-size:16px;

    font-weight:700;

    transition:.2s;
}


.hero-button:active{
    transform:scale(.97);
}


.hero-button.white{

    background:#fff;

    color:var(--navy);
}


.hero-button.glass{

    color:#fff;

    background:
        rgba(255,255,255,.09);

    border:
        1px solid
        rgba(255,255,255,.17);
}


/* =========================================================
   SOCIAL
========================================================= */

.social-list{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:25px;
}


.social-button{

    width:42px;
    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;

    background:
        rgba(255,255,255,.09);

    border:
        1px solid
        rgba(255,255,255,.12);

    color:#fff;

    font-size:17px;

    transition:.2s;
}


.social-button:active{
    transform:scale(.92);
}


/* =========================================================
   QUICK ACTION
========================================================= */

.quick-card{

    position:relative;

    z-index:10;

    margin:-72px 18px 0;

    padding:10px;

    background:#fff;

    border-radius:23px;

    box-shadow:
        0 18px 45px rgba(8,29,57,.12);

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:4px;
}


.quick-button{

    min-height:78px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:6px;

    background:transparent;

    border-radius:17px;

    color:#526076;

    font-size:13px;

    font-weight:600;
}


.quick-icon{

    width:38px;
    height:38px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:var(--blue-soft);

    color:var(--blue);

    font-size:18px;
}


/* =========================================================
   SECTION
========================================================= */

.section{

    padding:
        78px 23px 0;
}


.section-bottom{

    padding-bottom:0px;
}


.section-label{

    display:block;

    margin-bottom:9px;

    color:var(--blue);

    font-size:12px;

    font-weight:800;

    letter-spacing:2px;
}


.section-title{

    font-size:32px;

    line-height:1.3;

    font-weight:800;

    letter-spacing:-1.5px;

    word-break:keep-all;
}


.section-description{

    margin-top:11px;

    color:var(--text2);

    font-size:16px;

    line-height:1.8;

    word-break:keep-all;
}


/* =========================================================
   ABOUT
========================================================= */

.about-box{

    margin-top:27px;

    padding:27px 24px;

    background:#fff;

    border:
        1px solid var(--line);

    border-radius:24px;

    box-shadow:
        0 10px 30px rgba(12,31,58,.035);
}


.about-text{

    color:#536176;

    font-size:16px;

    line-height:2;

    word-break:keep-all;
}


.about-quote{

    margin-top:24px;

    padding:19px;

    border-radius:17px;

    background:#f3f7fc;

    border-bottom:
        4px solid var(--blue);

    color:#26364f;

    font-size:15px;

    font-weight:600;

    line-height:1.8;

    word-break:keep-all;
}


/* =========================================================
   SERVICE
========================================================= */

.service-grid{

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:12px;

    margin-top:27px;
}


.service-card{

    min-height:190px;

    padding:23px 20px;

    text-align:left;

    background:#fff;

    border:
        1px solid var(--line);

    border-radius:21px;

    transition:.25s;

    box-shadow:
        0 8px 25px rgba(12,31,58,.025);
}


.service-card:active{
    transform:scale(.98);
}


.service-icon{

    width:48px;
    height:48px;

    display:flex;

    align-items:center;
    justify-content:center;

    margin-bottom:18px;

    border-radius:14px;

    background:var(--blue-soft);

    color:var(--blue);

    font-size:21px;
}


.service-title{

    margin-bottom:7px;

    font-size:18px;

    line-height:1.4;

    font-weight:800;

    color:var(--text);
}


.service-description{

    color:var(--text2);

    font-size:14px;

    line-height:1.75;

    word-break:keep-all;
}


/* =========================================================
   PORTFOLIO
========================================================= */

.portfolio-list{

    display:flex;

    flex-direction:column;

    gap:13px;

    margin-top:27px;
}


.portfolio-card{

    display:flex;

    align-items:center;

    gap:16px;

    padding:13px;

    background:#fff;

    border:
        1px solid var(--line);

    border-radius:21px;

    cursor:pointer;

    transition:.2s;
}


.portfolio-card:active{
    transform:scale(.985);
}


.portfolio-image{

    width:92px;
    height:92px;

    flex-shrink:0;

    overflow:hidden;

    border-radius:16px;

    background:#edf1f6;
}


.portfolio-image img{

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}


.portfolio-content{

    flex:1;

    min-width:0;
}


.portfolio-category{

    display:block;

    margin-bottom:4px;

    color:var(--blue);

    font-size:11px;

    font-weight:800;

    letter-spacing:.7px;
}


.portfolio-title{

    margin-bottom:3px;

    font-size:18px;

    line-height:1.4;

    font-weight:800;

    color:var(--text);
}


.portfolio-description{

    color:var(--text2);

    font-size:14px;

    line-height:1.6;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}


.portfolio-arrow{

    color:#9aa5b6;

    font-size:24px;

    padding-right:4px;
}


/* =========================================================
   TIMELINE
========================================================= */

.timeline{

    position:relative;

    margin-top:30px;

    padding-left:27px;
}


.timeline::before{

    content:"";

    position:absolute;

    left:6px;
    top:4px;
    bottom:4px;

    width:2px;

    background:#dfe5ee;
}


.timeline-item{

    position:relative;

    padding-bottom:31px;
}


.timeline-item:last-child{
    padding-bottom:0;
}


.timeline-dot{

    position:absolute;

    left:-27px;
    top:4px;

    width:14px;
    height:14px;

    border-radius:50%;

    background:var(--blue);

    border:
        3px solid var(--bg);
}


.timeline-date{

    margin-bottom:4px;

    color:var(--blue);

    font-size:13px;

    font-weight:800;
}


.timeline-title{

    margin-bottom:4px;

    font-size:18px;

    line-height:1.45;

    font-weight:800;
}


.timeline-description{

    color:var(--text2);

    font-size:14px;

    line-height:1.75;
}


/* =========================================================
   GALLERY
========================================================= */

.gallery{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:8px;

    margin-top:27px;
}


.gallery-item{

    aspect-ratio:1;

    overflow:hidden;

    border-radius:15px;

    background:#e8edf3;

    cursor:pointer;
}


.gallery-item img{

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.35s;
}


.gallery-item:active img{
    transform:scale(1.05);
}


/* =========================================================
   FAQ
========================================================= */

.faq-list{

    display:flex;

    flex-direction:column;

    gap:9px;

    margin-top:27px;
}


.faq-item{

    background:#fff;

    border:
        1px solid var(--line);

    border-radius:18px;

    overflow:hidden;
}


.faq-question{

    width:100%;

    min-height:63px;

    padding:17px 18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    text-align:left;

    background:#fff;

    color:var(--text);

    font-size:16px;

    line-height:1.5;

    font-weight:700;
}


.faq-plus{

    flex-shrink:0;

    color:#8d98aa;

    font-size:23px;

    font-weight:300;

    transition:.3s;
}


.faq-answer{

    max-height:0;

    overflow:hidden;

    padding:0 18px;

    color:var(--text2);

    font-size:15px;

    line-height:1.9;

    transition:
        max-height .3s ease,
        padding .3s ease;
}


.faq-item.active .faq-answer{

    max-height:250px;

    padding:
        0 18px 20px;
}


.faq-item.active .faq-plus{

    transform:rotate(45deg);
}


/* =========================================================
   CONTACT
========================================================= */

.contact-card{

    position:relative;

    margin-top:27px;

    padding:24px;

    overflow:hidden;

    border-radius:25px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #081c38,
            #123b6c
        );

    box-shadow:
        0 18px 40px rgba(8,29,57,.15);
}


.contact-card::after{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    right:-120px;
    top:-120px;

    border-radius:50%;

    background:
        rgba(255,255,255,.055);
}


.contact-row{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    gap:14px;

    padding:17px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);
}


.contact-row:last-child{
    border-bottom:0;
}


.contact-icon{

    width:43px;
    height:43px;

    flex-shrink:0;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:13px;

    background:
        rgba(255,255,255,.09);

    font-size:18px;
}


.contact-label{

    margin-bottom:2px;

    color:
        rgba(255,255,255,.55);

    font-size:11px;

    font-weight:700;

    letter-spacing:.7px;
}


.contact-value{

    color:#fff;

    font-size:16px;

    font-weight:600;
}


/* =========================================================
   CTA
========================================================= */

.cta-box{

    margin-top:16px;

    padding:28px 22px;

    text-align:center;

    background:#fff;

    border:
        1px solid var(--line);

    border-radius:24px;
}


.cta-title{

    font-size:24px;

    line-height:1.45;

    font-weight:800;

    letter-spacing:-1px;
}


.cta-description{

    margin-top:9px;

    color:var(--text2);

    font-size:15px;

    line-height:1.8;
}


.cta-button{

    width:100%;

    height:58px;

    margin-top:21px;

    border-radius:16px;

    background:var(--navy);

    color:#fff;

    font-size:16px;

    font-weight:800;
}


/* =========================================================
   FOOTER
========================================================= */

.footer{

    padding:
        40px 20px
        145px;

    text-align:center;

    color:#9aa5b6;

    font-size:12px;

    line-height:1.8;
}


/* =========================================================
   BOTTOM NAVIGATION
========================================================= */

.bottom-nav{

    position:fixed;

    left:50%;
    bottom:12px;

    transform:translateX(-50%);

    width:
        min(
            calc(100% - 24px),
            496px
        );

    height:70px;

    padding:6px;

    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:3px;

    border-radius:23px;

    background:
        rgba(8,27,52,.96);

    backdrop-filter:blur(15px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.22);

    z-index:2000;
}


.bottom-button{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:3px;

    border-radius:17px;

    background:transparent;

    color:
        rgba(255,255,255,.55);

    font-size:10px;

    font-weight:700;
}


.bottom-icon{

    font-size:19px;

    line-height:1;
}


.bottom-button.active{

    background:#fff;

    color:var(--navy);
}


/* =========================================================
   TOP BUTTON
========================================================= */

.top-button{

    position:fixed;

    right:
        max(
            17px,
            calc((100vw - 520px)/2 + 17px)
        );

    bottom:93px;

    width:44px;
    height:44px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#fff;

    color:var(--navy);

    box-shadow:
        0 8px 25px rgba(0,0,0,.15);

    font-size:20px;

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:.25s;

    z-index:1500;
}


.top-button.show{

    opacity:1;

    visibility:visible;

    transform:none;
}


/* =========================================================
   MODAL
========================================================= */

.modal{

    position:fixed;

    inset:0;

    display:flex;

    align-items:flex-end;

    justify-content:center;

    background:
        rgba(3,12,25,.72);

    backdrop-filter:blur(8px);

    opacity:0;

    visibility:hidden;

    transition:.25s;

    z-index:5000;
}


.modal.show{

    opacity:1;

    visibility:visible;
}


.modal-box{

    position:relative;

    width:
        min(
            100%,
            520px
        );

    max-height:90vh;

    overflow-y:auto;

    padding:
        30px 23px
        35px;

    background:#fff;

    border-radius:
        28px 28px 0 0;

    transform:translateY(100%);

    transition:
        transform .35s
        cubic-bezier(.22,.61,.36,1);
}


.modal.show .modal-box{
    transform:translateY(0);
}


.modal-close{

    position:absolute;

    top:15px;
    right:18px;

    width:40px;
    height:40px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#f1f4f8;

    color:#5c687a;

    font-size:25px;

    z-index:3;
}


.modal-image{

    width:100%;

    margin-bottom:23px;

    overflow:hidden;

    border-radius:20px;
}


.modal-image img{

    display:block;

    width:100%;

    max-height:340px;

    object-fit:cover;
}


.modal-label{

    margin-bottom:7px;

    color:var(--blue);

    font-size:12px;

    font-weight:800;

    letter-spacing:1.2px;
}


.modal-title{

    margin-bottom:12px;

    color:var(--text);

    font-size:30px;

    line-height:1.35;

    font-weight:800;

    letter-spacing:-1px;
}


.modal-description{

    color:var(--text2);

    font-size:16px;

    line-height:1.95;

    word-break:keep-all;
}


.modal-actions{

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:9px;

    margin-top:24px;
}


.modal-action{

    height:55px;

    border-radius:15px;

    background:#f1f4f8;

    color:#455268;

    font-size:15px;

    font-weight:700;
}


.modal-action.primary{

    background:var(--navy);

    color:#fff;
}


/* =========================================================
   IMAGE MODAL
========================================================= */

.image-modal{

    align-items:center;
}


.image-modal .modal-box{

    padding:20px;

    background:transparent;

    overflow:visible;

    transform:scale(.9);
}


.image-modal.show .modal-box{
    transform:scale(1);
}


.image-modal img{

    display:block;

    width:100%;

    border-radius:18px;
}


/* =========================================================
   TOAST
========================================================= */

.toast{

    position:fixed;

    left:50%;
    bottom:92px;

    transform:
        translate(-50%,20px);

    padding:
        14px 20px;

    border-radius:30px;

    background:#101927;

    color:#fff;

    font-size:14px;

    font-weight:600;

    white-space:nowrap;

    opacity:0;

    visibility:hidden;

    transition:.25s;

    z-index:9000;
}


.toast.show{

    opacity:1;

    visibility:visible;

    transform:
        translate(-50%,0);
}


/* =========================================================
   REVEAL
========================================================= */

.reveal{

    opacity:0;

    transform:translateY(24px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}


.reveal.visible{

    opacity:1;

    transform:translateY(0);
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark{

    background:#070f1d;

    --bg:#0b1422;

    --white:#111d2e;

    --text:#f1f5fb;

    --text2:#a7b2c3;

    --text3:#8995a8;

    --line:#1f2c40;
}


body.dark .page{
    background:#0b1422;
}


body.dark .about-box,
body.dark .service-card,
body.dark .portfolio-card,
body.dark .faq-item,
body.dark .faq-question,
body.dark .cta-box,
body.dark .quick-card{

    background:#111d2e;

    border-color:#1f2c40;
}


body.dark .service-title,
body.dark .portfolio-title,
body.dark .timeline-title,
body.dark .section-title,
body.dark .cta-title{

    color:#f1f5fb;
}


body.dark .faq-answer{
    color:#a7b2c3;
}


body.dark .top-button{

    background:#162338;

    color:#fff;
}


/* =========================================================
   DESKTOP
========================================================= */

@media(min-width:700px){

    body{
        padding:25px 0;
    }

    .page{

        border-radius:30px;

        box-shadow:
            0 20px 80px rgba(0,0,0,.10);
    }

    .hero{
        border-radius:
            30px 30px 0 0;
    }
}


/* =========================================================
   SMALL SCREEN
========================================================= */

@media(max-width:370px){

    .hero{
        padding-left:19px;
        padding-right:19px;
    }

    .profile-name{
        font-size:37px;
    }

    .profile-intro{
        font-size:15px;
    }

    .section{
        padding-left:18px;
        padding-right:18px;
    }

    .section-title{
        font-size:29px;
    }

    .service-grid{
        gap:9px;
    }

    .service-card{
        padding:19px 16px;
    }

    .service-title{
        font-size:16px;
    }

    .service-description{
        font-size:13px;
    }
}


/* Profile Modal */
/* 프로필 사진 클릭 */
.profile-photo{
    cursor:pointer;
}


/* 프로필 이미지 모달 */
.profile-image-modal{

    position:fixed;

    inset:0;

    z-index:9999;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:25px;

    background:rgba(0,0,0,.82);

    backdrop-filter:blur(8px);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.profile-image-modal.show{

    opacity:1;
    visibility:visible;

}


/* 큰 이미지 */
.profile-image-modal img{

    display:block;

    width:auto;
    max-width:100%;
    max-height:80vh;

    object-fit:contain;

    border-radius:20px;

    box-shadow:
        0 20px 70px rgba(0,0,0,.35);

    transform:scale(.9);

    transition:
        transform .3s ease;
}


.profile-image-modal.show img{

    transform:scale(1);

}


/* 닫기 버튼 */
.profile-image-close{

    position:absolute;

    top:20px;
    right:20px;

    width:46px;
    height:46px;

    display:flex;

    align-items:center;
    justify-content:center;

    border:0;

    border-radius:50%;

    background:
        rgba(255,255,255,.15);

    color:#fff;

    font-size:30px;

    line-height:1;

    cursor:pointer;

    z-index:2;
}