:root{
      --bg:#f5fbff;
      --primary:#2b9af3;
      --primary-700:#1b7ed8;
      --muted:#7a8ba3;
      --card-bg:#ffffff;
      --radius:12px;
      --max-width:1200px;
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;background:var(--bg);color:#0f1724;}
    body{
      background-image:url(sample1_bg.png);
      background-repeat: round repeat;
    }
    /* wrapper */
    .wrap{max-width:var(--max-width);margin:0 auto;padding-top:0px;padding-left:28px;padding-right:28px;padding-bottom:28px;}
	.loginMsg{max-width:var(--max-width);margin:0 auto;min-height:28px;text-align:right;padding-top:5px;}
    /* header */
    /*header{display:flex;align-items:center;justify-content:space-between;padding:18px 0}*/
    /* 헤더 */
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:18px 0;/*padding: 20px 40px;*/
        /*background: rgba(255,255,255,0.85);*/
        backdrop-filter: blur(5px);
        position: sticky;
        top:0;
        z-index: 1000;
        /*box-shadow: 0 2px 10px rgba(0,0,0,0.2);*/
    }
    .logo{display:flex;align-items:center;gap:12px}
    .logo .mark{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--primary-700));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}

    /* 메뉴 스타일 */
    nav {position: relative;}
    nav ul {
        list-style: none;
        display: flex;
        row-gap: 0px;
        column-gap:7px;
    }
    nav ul li {
        position: relative;
        cursor: pointer;
        font-weight: 700;
        font-size: 18px;
    }
    nav ul li.nextmenu{
        padding-left:5px;
        border-left:solid #ababab;
    }
    nav ul li > ul {
        position: absolute;
        top: 100%;
        left:0;
        display: none;
        flex-direction: column;
        background: rgba(255,255,255,0.95);
        padding: 10px 0;
        border-radius: 8px;
        min-width: 140px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        z-index: 999;
    }
    nav ul li > ul li {
        padding: 10px 20px;
        transition: background 0.3s;
        font-size: 15px;
    }
    nav ul li > ul li:hover {background:#fff3e0;}

    /* 데스크톱 호버 */
    @media (min-width: 769px) {
        nav ul li:hover > ul {display:flex; flex-direction: column;}
    }

    /* 모바일 메뉴 */
    .menu-toggle {
        display: none;
        cursor: pointer;
        font-size: 1.6rem;
        color:#333;
    }
    @media (max-width: 768px) {
        nav ul {
            flex-direction: column;
            position: absolute;
            top: 70px;
            right: 40px;
            background: rgba(255,255,255,0.95);
            border-radius:8px;
            display: none;
            width: 180px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.25);
        }
        nav ul.show {display:flex;}
        .menu-toggle {display:block;}
        nav ul li > ul {
            position: static;
            box-shadow:none;
            padding-left: 10px;
            display: none;
        }
        nav ul li.open > ul {display:flex; flex-direction: column;}
        nav ul li.nextmenu{
        border-left:none;
    }
    }
        
    /* 로그인 버튼 */
    .login-btn {
        background: linear-gradient(145deg, #42a5f5, #1e88e5);
        color:white;
        padding:10px 20px;
        border:none;
        border-radius:8px;
        cursor:pointer;
        font-weight:bold;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .login-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    }
    .cta{background:var(--primary);color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600}

    /* hero */
    .hero{position:relative;border-radius:18px;overflow:hidden;margin-top:8px}
    .hero .pattern{position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.2));}
    .hero-bg{background:linear-gradient(180deg,#e6f5ff,#dff2ff);padding:64px 28px;display:flex;flex-direction:column;gap:28px}
    .hero-inner{max-width:var(--max-width);margin:0 auto}
    .hero h1{font-size:48px;line-height:1.05;margin:0;color:var(--primary-700);font-weight:700}
    .hero p{margin:6px 0 0;color:var(--muted);font-weight:500}

    /* geometric decorations */
    .geo{position:absolute;opacity:0.16}
    .geo.g1{left:-8%;top:-6%;width:520px;height:520px;border-radius:50%;background:rgba(43,154,243,0.25)}
    .geo.g2{right:-6%;top:10%;width:320px;height:320px;background:repeating-linear-gradient(45deg, rgba(43,154,243,0.12) 0 12px, transparent 12px 24px);transform:rotate(0)}
    .geo.g3{left:4%;bottom:-12%;width:360px;height:360px;border-radius:50%;background:rgba(43,154,243,0.12)}

    /* quick actions */
    .actions{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:var(--max-width);margin:0 auto}
    .action{background:var(--card-bg);padding:22px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 6px 18px rgba(13,30,40,0.06);text-align:center}
    .action svg{width:46px;height:46px;fill:var(--primary)}
    .action b{display:block;color:#0f1724;font-size: 26px;}

    /* content area */
    .content{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:28px}
    .card{background:var(--card-bg);padding:20px;border-radius:12px;box-shadow:0 6px 18px rgba(13,30,40,0.04)}
    .card h3{margin:0 0 12px;font-size:18px;color:#0f1724}
    .list{list-style:none;padding:0;margin:0}
    .list li{padding:10px 0;border-bottom:1px solid #f1f5f9;color:var(--muted);display:flex;justify-content:space-between}
    .list li strong{color:#0f1724}

    /* footer */
    footer{margin-top:36px;padding:22px 0;color:var(--muted);/* display:flex; */justify-content:space-between;align-items:center}