:root {
    --bg-color: #050505;
    --text-color: #ffffff;
    --accent-color: #8a2be2;
    /* BlueViolet */
    --accent-secondary: #00ffff;
    /* Cyan */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --main-color:#8a2be2;
}

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

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-color);
    background-color: var(--bg-color);
    /* Fallback */
    overflow-x: hidden;
    line-height: 1.6;
}

/* 3D Canvas */
#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    /* Let clicks pass through */
}

html,*,body {margin:0;padding:0; box-sizing: border-box;}
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

body {font-family: 'Paperozi', sans-serif;}
a,button {cursor: pointer;}
.sdonly {display: none}
.inner {width: 1200px; margin:0 auto;}
ul {list-style:none;}

.pcol {color:var(--main-color) !important;}
.bgw{background: #fff;}

.section {position: relative; }
/*#myVideo {  position: absolute; top:0;left:0; right: 0;  bottom: 0;  width: 100%;  z-index:-1;}*/
.fxvideo {position: relative;    background-size: cover;    background-position: 50% 50%;    height: 100vh;    z-index: 0; overflow: hidden;}
#header {position: fixed; top:0;left:0;right: 0; border-bottom: 1px solid #555; border-bottom: 1px solid rgba(256,256,256,0.3); text-align: right; z-index: 990;transition: all 0.3s ease}
#logo {position: absolute; top:20px; left: 30px; transition: all 0.3s ease}
#mnb { padding-right: 30px; }
#mnb ul { font-size: 0 }
#mnb ul li {display: inline-block; vertical-align: middle;}
#mnb ul li a {color:#fff; font-size: 18px; font-weight: bold; display: block; padding:40px 20px; cursor: pointer; text-decoration: none;transition: all 0.3s ease}
#mnb ul li a:hover {}
#mnb ul li.pbtn a {padding:12px 44px; background: var(--main-color); font-size: 16px; border-radius: 30px; margin-left: 30px;}

body.fx #header {background:rgba(0,0,0,0.8); backdrop-filter:blur(10px); border-bottom:1px solid #444;}
body.fx #mnb ul li a { padding:30px 20px;}
body.fx #mnb ul li.pbtn a {color:#fff;padding:12px 44px; }
body.fx #logo {top:10px;}


.pos.vc {position: absolute; top:50%; margin-top: -140px; left:0; right: 0;}
#main_bg {text-align: center;color:#fff; height: 860px; position: relative;}
#main_bg h2 {font-size: 60px;  text-shadow: 2px 2px 2px rgba(0,0,0,0.2);}
#main_bg p {font-size: 30px; display: inline-block; position: relative; font-weight: bold; text-shadow: 2px 2px 2px rgba(0,0,0,0.2)}
#main_bg p:before {position: absolute; content: ''; display: block; left:0px; right: 0px; top:18px;  background: var(--main-color); width: 100%; height: 20px; z-index: -1}

.gray {background: #f8fafa; padding:150px 0}
.cardlist {font-size: 0; padding:80px 0 50px;position: relative;}
.cardlist .card {font-size: 16px; display: inline-block;background: #8964d7 no-repeat 50% 86%; background-size: 62px;margin:0 10px; padding:30px; color:#fff; text-align: left; min-height: 350px;vertical-align: top; border-radius:10px}
.cardlist .card.odd {background: #565f7b no-repeat 50% 86%; background-size: 62px}
.cardlist .card h3 {padding:20px 0;}
.cardlist .card p {word-break: keep-all;}

.cardlist .card.tcon1 {background-image: url(../images/tcon1.png); }
.cardlist .card.tcon2 {background-image: url(../images/tcon2.png); }
.cardlist .card.tcon3 {background-image: url(../images/tcon3.png); }
.cardlist .card.tcon4 {background-image: url(../images/tcon4.png); }
.cardlist .card.tcon5 {background-image: url(../images/tcon5.png); }

.fxintro {padding:180px 0;}
.fxintro .inner .imgtitle {/*display: inline-block;*/ /*vertical-align: middle;*/ font-size: 70px; /*padding-right: 140px*/}
.fxintro .inner .imgtitle {
    color: #fff;
}

.fxintro .inner .imgtitle span {display: block; line-height: 1.2;font-weight: bold;}
.fxintro .inner .txt {display: inline-block; font-size: 16px;vertical-align: middle;}
.fxintro .inner .txt p {padding-bottom: 24px;}

.reading {padding:150px 0;}
.iconlist {font-size: 0;padding:80px 0;}
.iconlist .iconcon {display: inline-block; font-size: 1rem; width: 380px; margin:0 10px;}
.iconlist .iconcon .icon {display: inline-block; padding-bottom: 20px; border-bottom: 5px solid var(--main-color); margin-bottom: 20px;}
.iconlist .iconcon h3 {padding-bottom: 20px}

#footer { text-align: center; padding:50px 0; border-top:1px solid #444}
#footer p {color:#aeaeae; padding-top: 30px; font-size: 14px;}

.bg1w {background:#fff;}
.tlc {text-align: center;}
.fzt {font-size: 48px;}
.fzb {font-size: 24px;}
.fzn {font-size: 18px;}
.fzs {font-size: 16px;}

.row {font-size: 0;}
.row > * {font-size: 1rem}
.col {display: inline-block; vertical-align: middle;}
.w50 {width: 50%;}

.proj {color:#fff; padding: 180px}
.proj h3 {font-size: 54px; letter-spacing: -0.03em; font-weight: normal; line-height: 1.2}
.proj h3 span {font-size: 32px;}
.proj p { padding: 40px 0}
.proj a {}

.btn {padding:12px 50px; display: inline-block; background: var(--main-color);color:#fff; font-size: 18px; border-radius: 30px; text-decoration: none; min-width: 180px; text-align: center;}

.slick-arrow {width:48px; height: 48px; border-radius: 50% ;background: #fff;  text-align: left; border:0; overflow: hidden;
color:transparent; text-indent: -9999px; cursor: pointer; outline: none; box-shadow: 2px 2px 3px rgba(0,0,0,0.1); position: absolute; top:48%; z-index: 50}
.slick-prev {left:-20px; background: rgba(256,256,256,0.8) url(../images/prev.png) no-repeat 50% 50%;}
.slick-next {right: -20px; background: rgba(256,256,256,0.8) url(../images/next.png) no-repeat 50% 50%;}


.rent {padding:120px 0 60px; color:#fff; text-align: center;}
.rent p {}
.rent img {max-width:140px}
.guide {padding-top:70px;}
.gbox {width:50%;display: inline-block; vertical-align: top; margin-bottom: 60px;}
.gbox h3 {padding: 15px 0}
.gbox ul {list-style: none;display: inline-block; text-align: left;}
.gbox ul li {margin-bottom: 12px; position: relative; padding-left: 32px}
.gbox ul li b {color:#ff77ba; }
.gbox ul li i {font-size:14px;display: inline-block; width:24px; height: 24px;line-height: 24px; border-radius: 50%; background:#5e8df8; color:#fff; font-style: normal;
    text-align: center; margin-right: 8px; position: absolute; top:0; left: 0}

.add_desc { padding:120px 20px; text-align:center;}
.add_desc h2 {font-size:48px}
.add_desc p,
.add_desc ul {padding:20px 0; font-size:18px; line-height:1.4}
.add_desc h3 {font-size:24px}
.add_desc_in {display:flex; gap:40px;justify-content: center; padding-top:50px}
.add_desc_in > div {background:rgba(255,255,255,0.1);width:520px; height:300px; padding:60px 30px 0;  color:#fff; text-shadow: 2px 2px 0 rgba(0,0,0,0.4); border-radius:10px;}
.add_desc_in .img {padding-bottom:20px}

.foot-nav {padding:20px 20px 40px;}
.foot-nav a {color:#fff; text-decoration: none}


.mo-nav  {display: none}



@media screen and (max-width: 1590px){
    #myVideo {width: auto; min-width: auto; height: 100%; min-height: 100%;}
}
@media screen and (max-width: 1199px){
    .mo-nav {position: fixed; top:10px; right: 20px; z-index: 9991; width: 40px; height: 40px; background: url(../images/nav_w.png) no-repeat 50% 50%; background-size: 50px;
        text-align: left; text-indent: -9999px; display: block; overflow: hidden;color:transparent;}
    body.fx .mo-nav {background-image:url(../images/nav_w.png) }
    .fxvideo {position: relative;    background-size: cover;    background-position: 50% 50%;    height: 100vh;    z-index: 0;}
    #main_bg {height: auto;}
    .inner {width:auto;}
    #header {height: 58px;}
    img {max-width: 100%}
    body.fx #logo,#logo {top:7px; left:20px;}
    #logo img {width: 160px}
    #mnb {position: fixed; top:58px;right: -100%; width: 100%; bottom:0; z-index: 9990; background: rgba(0,0,0,0.95); padding:0; height:100vh}
    #mnb ul {text-align: left; padding:0 20px;}
    body.fx #mnb ul li, #mnb ul li {display: block; padding:0;}
    body.fx #mnb ul li a, #mnb ul li a {display: block; padding:15px 20px;border-bottom: 1px solid #333; color:#fff;}
    /*body.fx #mnb {background: rgba(0,0,0,0.8);}*/
    #mnb ul li.pbtn {margin-top: 40px;}
    body.fx #mnb ul li.pbtn a,#mnb ul li.pbtn a {text-align: center;color:#fff; padding:16px 0; margin-left: 0}
    #main_bg p {font-size: 18px; letter-spacing: -0.03em; word-break: keep-all;}
    #main_bg p:before {top:10px; height: 15px}
    #main_bg h2 {font-size: 32px; letter-spacing: -0.03em}
    #main_bg h2 b {font-size: 24px; letter-spacing: -0.03em}

    p,h2,h3 {word-break: keep-all; letter-spacing: -0.03em}
    .gray {padding:80px 20px 60px;}
    .pos.vc {margin-top: -80px}
    .cardlist {padding:40px 0 20px;}
    .cardlist .card {min-height:270px}
    .fxintro {padding:120px 20px;}
    .fxintro .inner {padding:0; font-size: 1rem}
    .fxintro .inner .imgtitle {margin:0 auto;padding-right: 0;}
    .fxintro .inner .imgtitle img {width: 120px;margin-right: 10px}
    .fxintro .inner .imgtitle span {display: inline-block; font-size: 46px;}
    .fxintro .inner .txt br {display: none;}

    .bg1 {background-size: auto; height: auto; text-align:center}
    .reading {padding:60px 20px 0px;}
    .iconlist {padding:30px 0;}
    .iconlist .iconcon {display: block; width: auto; margin-bottom: 60px;}

    .proj {padding:60px 20px; text-align: center;}
    .proj img {width: 240px;}
    .bg2 { height: auto;}
    .mw-a {width: auto; display: block;}
    .proj h3 {font-size: 42px}
    .proj h3 span {font-size: 18px;}
    .proj p {padding:24px 0;}

    .rent {padding:60px 20px;}
    .gbox {display: block; width: auto;}
    .gbox img {width: 250px}
    .gbox li {word-break: keep-all;}

    .fzt {font-size: 32px;}
    .fzb {font-size: 18px;}
    .fzn {font-size: 16px;}
    .fzs {font-size: 14px;}

    .add_desc_in {flex-direction: column;}
    .add_desc_in > div {width:100%}
    .add_desc h2 {font-size:32px;}
    .add_desc h2 b {display:block}
    .add_desc br {display:none}
}


/* ?? 플로팅 툴바 (모든 모바일 대응 최종 안정판) */
    .floating-toolbar.compact {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        z-index: 99999;
        width: calc(100% - 24px);   /* ?? 화면 기준 */
        max-width: 420px;           /* ?? 너무 커지지 않게 */

        background: rgba(20, 20, 20, 0.55);   /* ?? 추가 */
        backdrop-filter: blur(10px);          /* ?? 추가 */
        -webkit-backdrop-filter: blur(10px);  /* ?? 추가 */

        padding: 10px;                        /* ?? 추가 */
        border-radius: 22px;                  /* ?? 추가 */
    }

    /* 버튼 공통 */
    .floating-toolbar.compact .tool {
        flex: 1;                    /* ?? 자동 분배 핵심 */
        min-width: 64px;            /* ?? 최소 폭 */
        max-width: 96px;            /* ?? 최대 폭 */
        height: 90px;
        border-radius: 18px;
        background: rgba(0,0,0,0.6);
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-decoration: none;
        box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    }

    /* 아이콘 */
    .floating-toolbar.compact .icon {
        font-size: 24px;
        line-height: 1;
    }

    /* 텍스트 */
    .floating-toolbar.compact .txt {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: -0.03em;
        margin-top: 2px;
    }

    /* 카톡 강조 */
    .floating-toolbar.compact .tool.kakao {
        background: var(--main-color);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
    }

    /* 카톡 아이콘만 은은한 애니메이션 */
    .floating-toolbar.compact .kakao .blink {
        animation: kakaoPulse 1.6s infinite;
    }

    @keyframes kakaoPulse {
        0%   { opacity: 1; transform: scale(1); }
        50%  { opacity: 0.6; transform: scale(1.25); }
        100% { opacity: 1; transform: scale(1); }
    }

    @media screen and (max-width: 1199px) {
        .gbox ul li {
            padding-left: 0;          /* 왼쪽 여백 제거 */
            text-align: center;       /* 글자 가운데 */
        }

        .gbox ul li i {
            position: relative;       /* absolute 해제 */
            left: auto;
            top: auto;
            margin-right: 6px;        /* 숫자와 글자 붙이기 */
            display: inline-block;
            vertical-align: middle;
        }
    }
    /* ?? 모바일에서 하단 플로팅 버튼 살짝 축소 */
    @media screen and (max-width: 768px) {
        .floating-toolbar.compact .tool {
            height: 80px;          /* 기존 90px → 80px */
            min-width: 58px;       /* 기존 64px → 58px */
            max-width: 88px;       /* 기존 96px → 88px */
            gap: 4px;              /* 아이콘-글자 간격 줄임 */
        }

        .floating-toolbar.compact .icon {
            font-size: 22px;       /* 기존 24px → 22px */
        }

        .floating-toolbar.compact .txt {
            font-size: 11px;       /* 기존 12px → 11px */
        }
    }

    /* ?? 하단 플로팅 버튼만 살짝 축소 (반응형 유지) */
    @media screen and (max-width: 768px) {
        .floating-toolbar.compact .tool {
            transform: scale(0.95);      /* ?? 버튼만 20% 축소 */
            transform-origin: center;
        }
    }


.store-hero {padding:220px 0 110px; color:#fff; text-align:center;}
        .store-hero h2 {font-size:52px; letter-spacing:-0.02em;}
        .store-hero p {font-size:20px; margin-top:16px;}
        .store-badge {display:inline-block; margin-top:18px; padding:8px 18px; border-radius:999px; background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.4); font-weight:700;}

        .store-section {padding:120px 0;}
        .store-section h3 {font-size:36px; margin-bottom:18px;}
        .store-section p {font-size:18px; line-height:1.6;}

        .store-grid {display:grid; gap:24px; grid-template-columns:repeat(2, minmax(0,1fr)); }
        .store-card {background:rgba(255,255,255,0.1); border-radius:16px; padding:26px; box-shadow:0 6px 18px rgba(0,0,0,0.08);border:1px solid #333}
        .store-card h4 {font-size:22px; margin-bottom:14px; background-color: var(--main-color); color:#fff; padding:8px 10px;}
        .store-card ul {padding-left:18px;}
        .store-card li {margin:6px 0; line-height:1.5;}

        .store-kv {display:grid; grid-template-columns:140px minmax(0,1fr); gap:10px 16px; font-size:17px;}
        .store-kv .k {color:#aaa; font-weight:700;}
        .store-kv .v {color:#fff;}

        .store-steps {counter-reset:step; margin:0; padding:0;}
        .store-steps li {list-style:none; margin:22px 0; background:rgba(255,255,255,0.1); border-radius:18px; padding:24px; box-shadow:0 8px 20px rgba(0,0,0,0.08);}
        .store-steps li::before {counter-increment:step; content:counter(step); display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:var(--main-color); color:#fff; font-weight:700; margin-right:10px;}
        .store-steps strong {font-size:20px;}
        .store-steps .sub {margin:10px 0 0; padding-left:24px;}
        .store-steps .sub li {margin:4px 0;}
        .store-figure {margin-top:16px; border-radius:14px; overflow:hidden; background:#f6f6f6;}
        .store-figure img {display:block; width:100%; height:auto;}
        .store-figure figcaption {padding:10px 14px; font-size:14px; color:#666; background:#fff;}

        .store-note {background:rgba(255,255,255,0.1); border-radius:16px; padding:24px; box-shadow:0 6px 18px rgba(0,0,0,0.08);}
        .store-note p {margin:0;}

        .store-timeline {background:rgba(255,255,255,0.1); border-radius:16px; padding:26px; box-shadow:0 8px 20px rgba(0,0,0,0.08); max-width: 640px; margin:0 auto}
        .section.add_desc h2 {font-size:32px; margin-bottom:18px;}
        .store-timeline .store-kv {grid-template-columns:180px minmax(0,1fr); font-size:17px;}
        .store-timeline .k {color:#aaa; font-weight:700;}
        .store-timeline .v {color:#fff;}

        @media screen and (max-width: 1199px){
            .store-hero {padding:110px 20px 80px;}
            .store-hero h2 {font-size:32px;}
            .store-hero p {font-size:16px;}
            .store-section {padding:70px 20px;}
            .store-section h3 {font-size:26px;}
            .store-grid {grid-template-columns:1fr;}
            .store-kv {grid-template-columns:110px minmax(0,1fr); font-size:15px;}
            .store-steps li {padding:18px;}
            .store-steps strong {font-size:18px;}
        }