@charset "utf-8";

/* =========================================================
   RESET / BASE
========================================================= */
@import url("https://unpkg.com/sanitize.css");

:root{
    --panel-bg: rgba(255,255,255,0.18);
    --panel-border: rgba(255,255,255,0.28);
    --text-main: #f8fafc;
    --text-sub: #dbe4f0;
    --card-text: #0f172a;
    --card-border: rgba(148,163,184,0.55);
    --shadow-lg: 0 18px 40px rgba(0,0,0,0.30);
    --shadow-md: 0 10px 24px rgba(15,23,42,0.22);
}

html,
body{
    height:100%;
    margin:0;
    padding:0;
    font-size:16px;
}

body{
    font-family:'Roboto', sans-serif;
    color:var(--text-main);
    line-height:1.6;
    -webkit-text-size-adjust:none;
    background:
        linear-gradient(rgba(7, 16, 28, 0.52), rgba(7, 16, 28, 0.72)),
        url('../images/bkscreen/POS-image1.jpg') no-repeat center center fixed;
    background-size:cover;
    overflow-x:hidden;
}

a{
    text-decoration:none;
    transition:all .22s ease;
}

img{
    max-width:100%;
    height:auto;
    border:none;
}

/* =========================================================
   LAYOUT
========================================================= */
#container{
    min-height:100vh;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:28px 18px 40px;
    box-sizing:border-box;
}

#contents{
    width:100%;
    max-width:1200px;
    margin:0 auto;
}

main{
    width:100%;
}

.blur{
    width:100%;
}

/* =========================================================
   TOP BUTTON
========================================================= */
.site-top-btn{
    position:fixed;
    top:16px;
    left:50%;
    transform:translateX(-50%);
    z-index:1000;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:132px;
    padding:8px 18px;
    border-radius:999px;
    color:#f8fafc;
    font-size:12px;
    font-weight:900;
    letter-spacing:.12em;
    background:linear-gradient(135deg, rgba(15,23,42,.86), rgba(30,41,59,.78));
    border:1px solid rgba(255,255,255,.22);
    box-shadow:0 8px 20px rgba(0,0,0,.28);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.site-top-btn:hover{
    transform:translateX(-50%) translateY(-1px);
    background:linear-gradient(135deg, rgba(30,41,59,.95), rgba(51,65,85,.86));
    box-shadow:0 12px 24px rgba(0,0,0,.34);
}

/* =========================================================
   HERO TITLE
========================================================= */
.hero-title-wrap{
    text-align:center;
    margin:26px auto 28px;
    padding:0 12px;
}

.hero-subtitle{
    margin:0 0 8px;
    color:#dbeafe;
    font-size:13px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    text-shadow:0 2px 8px rgba(0,0,0,.35);
}

.hero-title{
    margin:0;
    font-size:clamp(2rem, 5vw, 3.7rem);
    line-height:1.08;
    font-weight:900;
    letter-spacing:.04em;
    color:#ffffff;
    text-shadow:0 4px 20px rgba(0,0,0,.34);
}

.hero-description{
    margin:14px auto 0;
    max-width:760px;
    color:var(--text-sub);
    font-size:15px;
    font-weight:500;
    text-shadow:0 2px 10px rgba(0,0,0,.32);
}

/* =========================================================
   NAV PANEL
========================================================= */
.center-nav{
    width:min(460px, 92vw);
    background:var(--panel-bg);
    border:1px solid var(--panel-border);
    border-radius:24px;
    box-shadow:var(--shadow-lg);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    padding:18px 16px;
}

.center-nav ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.center-nav li{
    margin:0;
    padding:0;
}

.center-nav a{
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    box-sizing:border-box;
    padding:12px 14px;
    border-radius:18px;
    color:var(--card-text);
    background:linear-gradient(135deg, rgba(255,255,255,0.96), rgba(226,232,240,0.94));
    border:1px solid var(--card-border);
    box-shadow:var(--shadow-md), inset 0 0 0 1px rgba(255,255,255,0.72);
}

.center-nav a:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg, rgba(255,255,255,1), rgba(241,245,249,0.98));
    box-shadow:0 14px 28px rgba(15,23,42,.24), inset 0 0 0 1px rgba(255,255,255,.88);
}

/* =========================================================
   ICONS
========================================================= */
.nav-icon{
    width:52px;
    height:52px;
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    box-shadow:
        0 6px 14px rgba(15,23,42,.28),
        inset 0 0 0 1px rgba(255,255,255,.72);
}

.icon-emoji{
    font-size:1.5rem;
    line-height:1;
}

.nav-icon-home{
    background:radial-gradient(circle at 30% 0%, #ffffff 0, #dbeafe 38%, #2563eb 100%);
}

.nav-icon-conv{
    background:radial-gradient(circle at 30% 0%, #ffffff 0, #bbf7d0 38%, #16a34a 100%);
}

.nav-icon-franchise{
    background:radial-gradient(circle at 30% 0%, #ffffff 0, #fde68a 38%, #f59e0b 100%);
}

.nav-icon-pos{
    background:radial-gradient(circle at 30% 0%, #ffffff 0, #ddd6fe 38%, #7c3aed 100%);
}

/* =========================================================
   TEXTS
========================================================= */
.nav-text-group{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.nav-label-en{
    display:block;
    margin-bottom:2px;
    color:#64748b;
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
    line-height:1.1;
}

.nav-label{
    display:block;
    color:#0f172a;
    font-size:18px;
    font-weight:800;
    line-height:1.35;
    word-break:break-word;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media screen and (max-width: 768px){

    #container{
        padding:22px 14px 28px;
        justify-content:center;
    }

    .site-top-btn{
        top:12px;
        min-width:118px;
        padding:7px 14px;
        font-size:11px;
    }

    .hero-title-wrap{
        margin:40px auto 22px;
    }

    .hero-subtitle{
        font-size:11px;
        letter-spacing:.14em;
    }

    .hero-description{
        font-size:13px;
        max-width:92%;
    }

    .center-nav{
        width:min(94vw, 460px);
        padding:14px 12px;
        border-radius:20px;
    }

    .center-nav ul{
        gap:10px;
    }

    .center-nav a{
        gap:12px;
        padding:10px 12px;
        border-radius:16px;
    }

    .nav-icon{
        width:46px;
        height:46px;
    }

    .icon-emoji{
        font-size:1.3rem;
    }

    .nav-label-en{
        font-size:10px;
    }

    .nav-label{
        font-size:16px;
    }
}

@media screen and (max-width: 430px){

    .hero-title{
        font-size:1.85rem;
    }

    .hero-description{
        font-size:12px;
    }

    .nav-label{
        font-size:15px;
    }

    .nav-icon{
        width:42px;
        height:42px;
    }

    .icon-emoji{
        font-size:1.18rem;
    }
}