:root {
    /*
       Background Colors - Light Theme
       - 밝고 깨끗한 배경
       - 약간의 블루 언더톤으로 통일감
    */
    --color-bg-primary: #fafbfc;
    --color-bg-secondary: #f4f7fa;
    --color-bg-tertiary: #eef3f8;
    --color-bg-elevated: #ffffff;

    /* Glass 효과용 배경 */
    --color-glass-bg: rgba(255, 255, 255, 0.7);
    --color-glass-border: rgba(255, 255, 255, 0.5);
    --color-glass-shadow: rgba(0, 126, 255, 0.08);

    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-text-muted: #94a3b8;

    /*
       Accent Colors - Brand Blue Gradient
       시원하고 테크 느낌의 그라데이션
    */
    --color-accent-primary: #007eff;    /* Brand Blue - 신뢰, 전문성 */
    --color-accent-secondary: #00c2ff;  /* Light Blue - 시원함, 미래 */
    --color-accent-tertiary: #f59e0b;   /* Amber - CTA 강조 */

    /* Glow 효과용 색상 */
    --color-glow-primary: rgba(0, 126, 255, 0.4);
    --color-glow-secondary: rgba(0, 194, 255, 0.4);
    --color-glow-mixed: rgba(0, 160, 255, 0.3);

    --color-danger: #ef4444;
    --color-success: #10b981;

    /*
       Typography - Pretendard Only (한글 최적화)
       Weight Hierarchy:
       - 900 (Black): Hero titles, key numbers
       - 700 (Bold): Section titles
       - 600 (SemiBold): Card titles, buttons
       - 500 (Medium): Emphasized body
       - 400 (Regular): Body text
    */
    --font-display: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-body: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 10px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    /* Shadows - Light Theme with Blue Tint */
    --shadow-sm: 0 2px 8px rgba(0, 60, 130, 0.06);
    --shadow-card: 0 8px 32px rgba(0, 60, 130, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8);
    --shadow-elevated: 0 24px 64px rgba(0, 60, 130, 0.12), 0 0 40px rgba(0, 126, 255, 0.06);
    --shadow-glow: 0 0 40px var(--color-glow-primary), 0 0 80px var(--color-glow-secondary);
    --shadow-glow-btn: 0 8px 32px var(--color-glow-primary);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Motion */
    --motion-duration-base: 250ms;
    --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --motion-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --motion-lift-md: -8px;
}

.login_logout{ 
    display: flex; 
    align-items: center;
    justify-self: end;
    gap: var(--space-md);
}

/* ======= ai-editor ======= */
/* right */
/*공통*/
.gnb_inner_wrapper{ /* width: 50px; height: 40px; */ cursor: pointer; padding: 10px 10px 10px 10px;
    display: flex; align-items: center; justify-content: center; font-size: 15px; font-size: 1.5rem; line-height: 21px; line-height: 2.1rem; font-weight: 400;}
.gnb_inner_wrapper.is_login{ width: auto; height: auto; margin-left: 0; cursor: auto;}
.gnb_container_dropdown{ width: 336px; position: fixed; top: 101px; right: 17px; display: block; z-index: 1000; overflow: hidden;
    border: 1px solid #d8e4ee; background-color: #fff; border-radius: 10px; box-shadow: 5px 5px 10px rgba(0,0,0,0.06);
    transform: scale(0); opacity: 0; transition: transform .2s, opacity .4s, right .5s; transform-origin: top right; }
#aicreditDropdown{right: 27px; transform-origin: top left; transition: transform .2s, opacity .4s, left .5s; }
.gnb_inner_wrapper.active .gnb_container_dropdown{transform: scale(1); opacity: 1;}
.gnb_container_dropdown .gnb_inner_btn_wrap:last-child{ border-bottom: none; }
.gnb_container_dropdown .gnb_inner_btn_con{ padding: 29px 30px; border-bottom: 1px solid #e9eef5; cursor: default; }
.gnb_container_dropdown > ul > li{ border-bottom: 1px solid #e9eef5; }
.gnb_container_dropdown > ul > li:hover{ background-color: #f9fbff; }
.gnb_container_dropdown > ul > li:last-child{ border-bottom: none;}
.gnb_container_dropdown > ul > li a{ display: block; padding: 25px 21px 24px 25px;
    font-size: 15px; font-size: 1.5rem; line-height: 21px; line-height: 2.1rem; font-weight: 700; }
.gnb_container_dropdown > ul > li a span{ display: flex; justify-content: space-between; align-items: center;}
.gnb_container_dropdown > ul > li a span:after{content: ""; width: 15px; height: 11px; display: inline-block; position: relative; top: 0; right: -2px;
        background-image: url('/weven_service/asset/img/svg/icons8-arw_right.svg'); background-size: contain; background-repeat: no-repeat; background-position: center;}
/*헤더(h) 프로필 이미지 - 기본: 23*23*/
.login_logout .h_profile_img_con { display: none; }
.login_logout.is_login .h_profile_img_con { display: block; }
.h_profile_img_con{width: 23px; height: 23px; border-radius: 50%; background-color: transparent; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.h_profile_img_con .h_profile_img{width: 100%; height: 100%; border-radius: 50%; text-indent: -1000px;
    background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: var(--profile_border);}
.h_profile_img_con [membername] {font-size: 10px; line-height: 23px; font-weight: 700; color:transparent; text-align: center;}
/*헤더(h) 프로필 이미지 - type_2: 40*40*/
.h_profile_img_con.type_2{width: 40px; height: 40px;}
.h_profile_img_con.type_2 [membername] {font-size: 15px;}
.h_profile_img_con.type_2 [membername] { line-height: 40px; }
/*햄버거메뉴 버튼 (#siteMapOpenBtn, #fixedSiteMapOpenBtn 내부)*/
.gnb_icon{ display: flex; flex-direction: column; gap: 3px; }
.gnb_icon span{background-color: #000; /* height: 3px; width: 27px; */ width: 18px; height: 2px; transition: all 0.3s;}
#fixedSiteMapOpenBtn .gnb_icon span{background-color: var(--point_wv_01); }
.gnb_inner_wrapper:hover .gnb_icon span{background-color: var(--point_wv_01) !important;}

/*right 로그인*/
#gnbLoginWrap{ margin-right: 2px; }
#gnbCreditWrap{ margin-right: 5px; }
.login_logout .profile_wrap{ display: flex; align-items: center; font-size:0px; line-height:0px; cursor: pointer; margin-top: 3px; }
.login_logout.is_login .profile_wrap { margin-top: 0; }
.login_logout .profile_name{ position: relative; display: inline-block; font-size: 0; line-height: 0; color: #000; padding-left: 8px; padding-right: 21px; margin-top: -1px;}
.login_logout .profile_name span{ display: inline-block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-size: 1.3rem; line-height: 21px; line-height: 2.1rem; font-weight: 700; }
.login_logout .profile_name svg{ position: absolute; right: 5px; top: 0px; width: 11px; height: 100%; fill: #000; }
.login_logout.is_login .profile_name{padding-right: 23px;}
.login_logout.is_login .profile_name svg{top: 0; width: 17px;}
.login_logout:hover .profile_name {color: var(--point_wv_01) !important; transition: color 0.3s;}
.login_logout:hover .profile_name svg{fill: var(--point_wv_01) !important; transition: fill 0.3s;}
.login_logout.active .profile_name {color: var(--point_wv_01) !important;}
.login_logout.active .profile_name svg{fill: var(--point_wv_01) !important; transition: fill 0.3s;}
.login_logout.gnb_inner_wrapper { padding-right: 0; }
.header_member_list_con{}
.header_member_list_con .gnb_inner_btn_con{ transition: background-color 0.2s; }
.header_member_list_con .gnb_inner_btn_con:hover{ background-color: #f9fbff; }
.header_member_list_con .gnb_inner_btn_con.nickname_wrap { cursor: pointer; }
.header_member_list_con .gnb_inner_btn_con .credit_img{width: 40px; height: 40px; background-image: url("/weven_service/asset/img/svg/credit_icon.svg"); background-size: contain; background-position: center; background-repeat: no-repeat;}
.header_member_list_con .gnb_inner_btn_con .gnb_inner_btn_right{margin-left: 20px;}
.header_member_list_con .gnb_inner_btn_con .gnb_inner_btn_right div{font-size: 13px; font-size: 1.3rem; line-height: 21px; line-height: 2.1rem;}
.header_member_list_con .gnb_inner_btn_con .gnb_inner_btn_right div.nickname_email{font-weight : 700; max-width: 140px; overflow: hidden; text-overflow: ellipsis;}
.header_member_list_con .gnb_inner_btn_con .gnb_inner_btn_right div.nickname_name{font-weight: 300;}
.header_member_list_con .gnb_inner_btn_con .gnb_inner_btn_right div.credit_title{font-weight: 500;}
.header_member_list_con .gnb_inner_btn_con .gnb_inner_btn_right div.credit_amount{font-weight: 700;}
.header_member_list_con .logout_btn_wrap{background-color: #fff; border: 1px solid #a4abba; border-radius: 3px; overflow: hidden; box-sizing: border-box; transition: .2s; position: absolute; right: 30px; top: 38px;}
.header_member_list_con .logout_btn{display: inline-block; font-size: 10px; font-size: 1.0rem; line-height: 16px; line-height: 1.6rem; font-weight: 500; color: #2a2a2a; letter-spacing: 0.0em; padding: 2px 8px 3px 8px; transition: .2s;}
.header_member_list_con .logout_btn_wrap:hover{background-color: #2a2a2a; border-color: #2a2a2a;}
.header_member_list_con .logout_btn_wrap:hover .logout_btn{color: #fff;}
.header_member_list_con > ul > li a {padding-left: 29px;}
.header_member_list_con > ul > li a:after{right: 3px;}
/* (크레딧) */
#gnbCredit li a.credit_li { display: flex; justify-content: space-between; align-items: center; white-space: nowrap; position: relative;}
#gnbCredit a.credit_li.line {position: relative;}
#gnbCredit a.credit_li.line::after  { content: ""; position: absolute; bottom: 0; left: 37px; right: 37px; height: 1px; background-color: #e9eef5;}

.header_aicredit_list_con{}
.header_aicredit_list_con .gnb_inner_btn_con{ transition: background-color 0.2s; }
.header_aicredit_list_con .gnb_inner_btn_con:hover{ background-color: #f9fbff; }
.header_aicredit_list_con .gnb_inner_btn_con .gnb_inner_btn_right{margin-left: 20px;}
.header_aicredit_list_con .gnb_inner_btn_con .gnb_inner_btn_right div{font-size: 13px; font-size: 1.3rem; }
.header_aicredit_list_con .gnb_inner_btn_con .gnb_inner_btn_right div.log_btn{font-weight : 700; max-width: 140px; overflow: hidden; text-overflow: ellipsis; transition: .2s; }
.header_aicredit_list_con .gnb_inner_btn_con .gnb_inner_btn_right div.credit_title{font-weight: 500;}
.header_aicredit_list_con .gnb_inner_btn_con .gnb_inner_btn_right div.credit_amount{font-weight: 700;}
.header_aicredit_list_con .gnb_inner_btn_con .gnb_inner_btn_left div.credit_title{font-weight: 600;}
.header_aicredit_list_con .log_btn_wrap{ transition: .2s; display: flex; align-items: center; border: 1px solid #a4abba; border-radius: 4px; padding: 4px 19px 4px 10px; background-color: #fff; height: 20px; font-size: 12px; position: relative;}
.header_aicredit_list_con .log_btn {display: flex; align-items: center; height: 20px; transition: none !important; line-height: 20px;}
.header_aicredit_list_con .log_btn::after {content: ""; width: 9%; height: 9px; display: inline-block; position: absolute; top: 9px; right: 7px; background-image: url(/weven_service/asset/img/svg/icons8-arw_right.svg);
background-size: contain; background-repeat: no-repeat; background-position: center;}
/* .header_aicredit_list_con .log_btn_con { position: relative; font-size: 12px; font-weight: 700; line-height: 14px;} */
.header_aicredit_list_con .log_btn_icon { position: static; transform: none;}
.header_aicredit_list_con .log_btn_icon path { fill: var(--point_wv_21); transition: fill 0.2s ease;}
/* .header_aicredit_list_con .log_btn_wrap:hover .log_btn{ color: var(--point_wv_00);}
.header_aicredit_list_con .log_btn_wrap:hover { border-color: var(--point_wv_00);}
.header_aicredit_list_con .log_btn_wrap:hover .log_btn::after { filter: brightness(0) saturate(100%) invert(48%) sepia(87%) saturate(4852%) hue-rotate(214deg) brightness(99%) contrast(99%);} */
/* .header_aicredit_list_con .log_btn_wrap:hover .log_btn_icon path { fill: var(--point_wv_00);} */
.header_aicredit_list_con .paid_btn_con{padding: 12px 17px 18px 17px; }
.header_aicredit_list_con .paid_btn_wrap{background-color: var(--point_wv_00); border-radius: 7px; overflow: hidden; box-sizing: border-box; transition: .2s; justify-content: center; display: flex; font-weight: 700; color: #fff; font-size: 15px;}
.header_aicredit_list_con .paid_btn{display: inline-block; letter-spacing: 0.0em; padding: 10px 0 10px 0px; transition: .2s;}
.header_aicredit_list_con > ul > li a {padding-left: 29px;}
.header_aicredit_list_con > ul > li a:after{right: 3px;}


/* GNB */
.gnb_container_open{ color: #fff; }

/*1depth*/
.gnb_container_open > div > ul{ font-size: 14px; font-size: 1.4rem; line-height: 36px; line-height: 3.6rem; font-weight: 500; padding-bottom: 33px; margin-top: -6px; margin-left: 5px; /* border-bottom: 1px solid rgb(255, 255, 255, 0.2); */ }
.gnb_container_open > div > ul > li > a{ display: block; padding: 0 0 0 37px; background-repeat: no-repeat; background-position: left 0 top 49%; transition: all 0.2s; line-height: 55px; white-space: nowrap; 
    font-size: 19px; line-height: 55px;  opacity: 0.6; letter-spacing: 0; font-weight: 600; background-size: 25px; }
.gnb_container_open > div > ul > li > a:hover { opacity: 1; }
.gnb_container_open > div > ul > li > a[href*="introduction"]{ position: relative; }
.gnb_container_open > div > ul > li > a[href*="introduction"]::before{ content: "Z"; position: absolute; left: 7px; top: 54%; transform: translateY(-50%); font-family: "Fugaz One"; font-size: 23px; font-weight: 700; 
/* background-image: url('/weven_service/asset/img/svg/header-logo.svg'); background-repeat: no-repeat; background-position: center center;  opacity: 0.7; */
}

.gnb_container_open > div > ul > li > a[href*="sitedesign"]{background-image: url('/weven_service/asset/img/svg/satellite_24dp_FFF_FILL0_wght400_GRAD0_opsz24.svg');  }
.gnb_container_open > div > ul > li > a[href*="store"]{background-image: url('/weven_service/asset/img/svg/header-deployed_icon.svg');   background-size: 25px; }
.gnb_container_open > div > ul > li > a[href*="help-center"]{background-image: url('/weven_service/asset/img/svg/header-help_icon.svg');  }
.gnb_container_open > div > ul > li > a[href*="domain"]{background-image: url('/weven_service/asset/img/svg/header-domain_icon.svg');  }
.gnb_container_open > div > ul > li > a[href*="payment"]{background-image: url('/weven_service/asset/img/svg/header-confirmation_icon.svg'); }
.gnb_container_open > div > ul > li > a[href*="news"]{background-image: url('/weven_service/asset/img/svg/header-sms_icon.svg'); background-size: 25px; background-position: left 1% top 55%;  }
.gnb_container_open > div > ul > li > a[href*="event"]{background-image: url('/weven_service/asset/img/svg/celebration_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg'); background-size: 15px; background-position: left 0 top 55%;  }
/*hover*/
.gnb_container_open > div > ul > li > a:hover{ color: #fff; }
/* .gnb_container_open > div > ul > li > a[href*="introduction"]:hover{background-image: url('/weven_service/asset/img/svg/header-preliminary_icon_h.svg');} */

.gnb_container_open > div > ul > li > a:hover[href*="sitedesign"],
.gnb_container_open > div > ul > li > a:hover[href*="store"],
.gnb_container_open > div > ul > li > a:hover[href*="help-center"],
.gnb_container_open > div > ul > li > a:hover[href*="domain"],
.gnb_container_open > div > ul > li > a:hover[href*="payment"],
.gnb_container_open > div > ul > li > a:hover[href*="news"] { opacity: 1; }
/* .gnb_container_open > div > ul > li > a[href*="sitedesign"]:hover{background-image: url('/weven_service/asset/img/svg/satellite_24dp_0E63F0_FILL0_wght400_GRAD0_opsz24.svg');}
.gnb_container_open > div > ul > li > a[href*="store"]:hover{background-image: url('/weven_service/asset/img/svg/header-deployed_icon_h.svg');}
.gnb_container_open > div > ul > li > a[href*="help-center"]:hover{background-image: url('/weven_service/asset/img/svg/header-help_icon_h.svg');}
.gnb_container_open > div > ul > li > a[href*="domain"]:hover{background-image: url('/weven_service/asset/img/svg/header-domain_icon_h.svg');}
.gnb_container_open > div > ul > li > a[href*="payment"]:hover{background-image: url('/weven_service/asset/img/svg/header-confirmation_icon_h.svg');}
.gnb_container_open > div > ul > li > a[href*="news"]:hover{background-image: url('/weven_service/asset/img/svg/header-sms_icon_h.svg');} */
/*active*/
.gnb_container_open > div > ul > li.active > a{ opacity: 1; }
/* .gnb_container_open > div > ul > li.active > a[href*="introduction"]{background-image: url('/weven_service/asset/img/svg/header-preliminary_icon_h.svg');} */
/* .gnb_container_open > div > ul > li.active > a[href*="sitedesign"]{background-image: url('/weven_service/asset/img/svg/satellite_24dp_0E63F0_FILL0_wght400_GRAD0_opsz24.svg');}
.gnb_container_open > div > ul > li.active > a[href*="store"]{background-image: url('/weven_service/asset/img/svg/header-deployed_icon_h.svg');}
.gnb_container_open > div > ul > li.active > a[href*="help-center"]{background-image: url('/weven_service/asset/img/svg/header-help_icon_h.svg');}
.gnb_container_open > div > ul > li.active > a[href*="domain"]{background-image: url('/weven_service/asset/img/svg/header-domain_icon_h.svg');}
.gnb_container_open > div > ul > li.active > a[href*="payment"]{background-image: url('/weven_service/asset/img/svg/header-confirmation_icon_h.svg');}
.gnb_container_open > div > ul > li.active > a[href*="news"]{background-image: url('/weven_service/asset/img/svg/header-sms_icon_h.svg');} */

/*2depth*/
.gnb_container_open > div > ul > li > ul{}
.gnb_container_open > div > ul > li > ul > li{ }
.gnb_container_open > div > ul > li > ul > li:hover{ color: var(--point_wv_01); }
.gnb_container_open > div > ul > li > ul > li > a{display: block; padding: 8px 0 12px 37px; font-weight: 600;}
/*list_on*/
.gnb_container_open > div > ul > li.has_child > a:after{content: ''; width: 29px; height: 20px; position: absolute; right: 3px;
    background-image: url('/weven_service/asset/img/svg/icons8-arw_down.svg'); background-size: 17px; background-repeat: no-repeat; background-position: center;}
.gnb_container_open > div > ul > li.has_child > ul{height: 0; overflow: hidden; margin-bottom: 0; transition: .2s; transform: translateY(-10px); opacity: 0;}
.gnb_container_open > div > ul > li.has_child.list_on > a:after{ background-image: url('/weven_service/asset/img/svg/icons8-arw_up.svg');}
.gnb_container_open > div > ul > li.has_child.list_on > ul{height: auto; margin-bottom: 27px; transition: .2s; transform: translateY(0); opacity: 1;}
/*active*/
.gnb_container_open > div > ul > li.has_child > ul > li.active > a{color: var(--point_wv_01);}


@media all and (min-width: 700px){
    .login_logout .profile_name span{max-width: none;}

}

@media all and (min-width: 992px){
    /* .gnb_inner_wrapper{ margin-left: 10px; } */
    .gnb_container_dropdown{ right: 27px;}
    #aicreditDropdown{right: 27px;}
    .gnb_container_open > div > ul > li > ul > li > a{padding: 0 0 14px 37px;}
    .gnb_container_open > div > ul > li.has_child.list_on > ul{margin-bottom: 17px;}

    #siteMap .gnb_container_open{ position: fixed; top: 0; right: -313px; width: 176px; height: 100vh; background-color: #262626; z-index: 9999; padding: 70px 21px 30px 21px; cursor: auto; overflow: auto; box-sizing: border-box; }
    .header_menu_list_con .close_btn{width: 29px; height: 29px; padding: 10px; position: absolute; left: 10px; top: 0px; cursor: pointer;
    background-image: url('/weven_service/asset/img/svg/icons8-right_fold_white.svg'); background-size: 16px; background-repeat: no-repeat; background-position: center;}
    .site_lang{ display: flex; gap: 11px; position: absolute; top: 16px; right: 26px; }
    .site_lang li{ position: relative; display: inline-block; font-size: 11px; line-height: 20px; font-weight: 500; color: #fff; cursor: pointer; opacity: 0.5; }
    .gnb_container_open > div > ul > li > a{ display: block; padding: 0 0 0 28px; background-repeat: no-repeat; background-position: left 0 top 54%; transition: all 0.2s; line-height: 20px; white-space: nowrap; 
    font-size: 14px; line-height: 34px;  opacity: 0.6; letter-spacing: 0; font-weight: 600; background-size: 16px; }
    .gnb_container_open > div > ul > li > a[href*="introduction"]::before{ content: "Z"; position: absolute; left: 4px; top: 52%; transform: translateY(-50%); font-family: "Fugaz One"; font-size: 14px; font-weight: 700; 
    /* background-image: url('/weven_service/asset/img/svg/header-logo.svg'); background-repeat: no-repeat; background-position: center center;  opacity: 0.7; */}
    .gnb_container_open > div > ul > li > a[href*="store"]{ background-size: 17px; }
    .gnb_container_open > div > ul > li > a[href*="news"]{background-image: url('/weven_service/asset/img/svg/header-sms_icon.svg'); background-size: 15px; background-position: left 1% top 55%;  }
    .gnb_container_open > div > ul > li > a[href*="event"]{background-image: url('/weven_service/asset/img/svg/celebration_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg'); background-size: 15px; background-position: left 0 top 55%;  }

    .gnb_container_open > div > ul{ font-size: 14px; font-size: 1.4rem; line-height: 36px; line-height: 3.6rem; font-weight: 500; padding-bottom: 23px; margin-top: -6px; margin-left: 5px; /* border-bottom: 1px solid rgb(255, 255, 255, 0.2); */ }
    .gnb_studio{ display: flex; flex-direction: column; align-items: left;  cursor: pointer; padding: 11px 17px 13px 17px; background-color: #353739; border-radius: 5px; }
        .gnb_studio_logo{ padding-bottom: 4px; font-family: "Fugaz One"; font-size: 16px; line-height: 1; font-weight: 500; letter-spacing: -0.02em; background: linear-gradient(to right, #fbd0e4, var(--point_wv_01)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;  
    text-align: center;}
    .gnb_studio_desc{ font-size: 11px; line-height: 1; font-weight: 500; transition: all 0.2s; position: relative; text-align: center; letter-spacing: -0.02em; text-align: center; letter-spacing: -0.02em;
    /* background-image: url("/weven_service/asset/img/svg/keyboard_arrow_right_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg"); background-size: 15px; background-position: right 1px center; background-repeat: no-repeat; */ }
}
/* ======= ai-editor ======= */



/* ai ver */

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

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}



/* ==========================================================================
   Header - Strong Glassmorphism
   ========================================================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 1);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    overflow: visible;
}

.header-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 24px;
    height: 72px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    overflow: visible;
    box-sizing: border-box;
    gap: 20px;
}

.logo {
    display: flex;
    align-items: center;
    justify-self: start;
    transition: transform var(--transition-fast);
}

.logo-img {
    height: 26px;
    width: auto;
    object-fit: contain;
}

.logo:hover {
    transform: scale(1.02);
}

/* Navigation: Flexible spacing for different text lengths */
.nav {
    gap: clamp(12px, 2vw, 24px);
}

.nav-link {
    white-space: nowrap;
}

.nav, #gnbFlex {
    display: flex;
    gap: var(--space-lg);
    justify-self: center;
}

.nav-link, #gnbFlex > li a {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-secondary);
    opacity: 0.75;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.nav-link:hover, #gnbFlex > li a:hover {
    color: var(--color-accent-primary);
    opacity: 1;
}

.header-right {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 10px;
    width: max-content;
}

.credit-link {
    font-size: 14px;
    color: var(--color-text-muted);
    padding: var(--space-sm) 0;
    transition: color var(--transition-fast);
    word-break: keep-all;
}

.credit-link:hover {
    color: var(--color-accent-primary);
}

/* Primary Button with Glow */
a.btn-primary {
    background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
    color: white;
    padding: 10px 20px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 600;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 4px 16px var(--color-glow-primary);
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 10px 35px var(--color-glow-primary),
        0 5px 20px var(--color-glow-secondary),
        0 0 0 2px rgba(0, 126, 255, 0.1);
}

.btn-login {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    padding: 10px 16px;
    border-radius: var(--radius-full);
    transition: color var(--transition-fast);
    cursor: pointer;
}

.btn-login:hover {
    color: var(--color-accent-primary);
}

/* Header Language Selector */
.header-lang-selector {
    display: flex;
    gap: 1px;
    background: rgba(0, 0, 0, 0.04);
    padding: 2px;
    border-radius: var(--radius-full);
    flex: 1 0 auto;
}

.header-lang-option {
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    letter-spacing: 0.03em;
    background: transparent;
    border: none;
    cursor: pointer;
    flex: 1 0 auto;
}

.header-lang-option:hover {
    color: var(--color-text-primary);
}

.header-lang-option.active {
    background: var(--color-accent-primary);
    color: white;
    box-shadow: 0 1px 6px rgba(0, 126, 255, 0.25);
}

/* Header Theme Toggle */
.header-theme-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.header-theme-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-accent-primary);
    border-color: rgba(0, 126, 255, 0.2);
}

.header-theme-toggle .icon-sun,
.header-theme-toggle .icon-moon {
    display: none;
}

.header-theme-toggle .icon-moon {
    display: block;
}

[data-theme="dark"] .header-theme-toggle .icon-moon {
    display: none;
}

[data-theme="dark"] .header-theme-toggle .icon-sun {
    display: block;
}

[data-theme="dark"] .header-theme-toggle {
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .header-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.3);
}

/* Header Divider */
.header-divider {
    width: 1px;
    height: 20px;
    background: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .header-divider {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .header-lang-selector {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .header-lang-option {
    color: rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .header-lang-option:hover {
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .header-lang-option.active {
    background: #2563eb;
    box-shadow: 0 1px 6px rgba(37, 99, 235, 0.3);
}

.profile-btn,
.menu-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--color-glass-border);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
    flex: 1 0 auto;
    box-shadow: 0 1px 10px #ddd;
}

.profile-btn:hover,
.menu-btn:hover {
    background: var(--color-bg-elevated);
    color: var(--color-accent-primary);
}

.profile-btn svg,
.menu-btn svg {
    width: 18px;
    height: 18px;
}


/* Credit Dropdown */
.credit-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 10;
    margin-right: 4px;
}

.credit-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.credit-trigger:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.credit-trigger-icon {
    width: 18px;
    height: 18px;
    color: var(--color-accent-primary);
}

.credit-trigger-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.credit-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 280px;
    background: #fff;
    border-radius: 12px;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
    z-index: 9990;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.credit-dropdown.active .credit-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.credit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 10px;
}

.credit-header-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

a.credit-header-link {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all var(--transition-fast);
}

a.credit-header-link:hover {
    background: #f5f6f8;
    color: var(--color-text-primary);
}

.credit-header-link svg {
    width: 12px;
    height: 12px;
}

.credit-menu-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 4px 6px;
}

.credit-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-radius: 8px;
    transition: all var(--transition-fast);
}

.credit-item:hover {
    background: #f9fafb;
}

.credit-item-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.credit-item-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.credit-item-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Tooltip for info icon */
.credit-info-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: var(--color-accent-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    cursor: help;
    flex-shrink: 0;
}

.credit-info-icon::before {
    content: 'i';
}

.credit-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 220px;
    background: #fff;
    border-radius: 8px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.5;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: 10000;
    pointer-events: none;
}

.credit-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 2px;
    transform: translateX(-50%) rotate(45deg);
    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.05);
}

.credit-info-icon:hover .credit-tooltip {
    opacity: 1;
    visibility: visible;
}

.credit-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 12px);
    margin: 6px;
    padding: 12px 16px;
    background: var(--color-accent-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.credit-action-btn:hover {
    background-color: #0066d6;
}

.credit-action-btn svg {
    width: 16px;
    height: 16px;
}

/* Demo container */
.demo-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

.demo-label {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 8px;
    text-align: center;
}

.demo-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Always visible demo */
.demo-always-visible .credit-menu {
    position: relative;
    top: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
}


header.header .login_logout.gnb_inner_wrapper{ padding: 5px; }

/* Profile Dropdown */
.profile-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 10;
}

.profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    background: #fff;
    border-radius: 12px;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
    z-index: 9990;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-dropdown.active .profile-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 10px;
}

.profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-accent-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.profile-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.profile-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.2;
}

.profile-email {
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-plan-badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-accent-primary);
    background: rgba(37, 99, 235, 0.08);
    padding: 3px 8px;
    border-radius: 20px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.profile-menu-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 4px 6px;
}

a.profile-menu-item, button.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
}

a.profile-menu-item:hover, button.profile-menu-item:hover {
    background: #f5f6f8;
    color: var(--color-text-primary);
}

.profile-menu-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.6;
}

.profile-menu-item:hover svg {
    opacity: 1;
}

.profile-menu-item.profile-logout {
    color: #ef4444;
}
.panel-greeting-right .profile-logout{ flex: 1 0 auto; width: auto; gap: 5px; padding: 5px 7px; }

.profile-menu-item.profile-logout:hover {
    background: rgba(239, 68, 68, 0.06);
    color: #dc2626;
}

.profile-logout svg {
    opacity: 0.8;
}

/* ==========================================================================
   Right Slide Panel
   ========================================================================== */
/* ==========================================================================
   Slide Panel — 5-Zone Layout
   ========================================================================== */
.slide-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    visibility: hidden;
    pointer-events: none;
}

.slide-panel.active {
    visibility: visible;
    pointer-events: auto;
}

.panel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.slide-panel.active .panel-overlay {
    opacity: 1;
}

.panel-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 85vw;
    height: 100%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(24px) saturate(150%);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 253, 0.95) 100%);
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.08), -2px 0 8px rgba(0, 0, 0, 0.03);
}

.slide-panel.active .panel-content {
    transform: translateX(0);
}

/* --- Zone 1: Header (56px) --- */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 56px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.panel-logo-mark {
    height: 24px;
    width: auto;
    object-fit: contain;
}

.panel-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.panel-close-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    transition: all var(--transition-fast);
    background: transparent;
    border: none;
    cursor: pointer;
}

.panel-close-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text-primary);
    transform: rotate(90deg);
}

.panel-close-btn svg {
    width: 18px;
    height: 18px;
}

/* --- Theme Toggle --- */
.panel-theme-toggle {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.panel-theme-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-accent-primary);
    border-color: rgba(0, 126, 255, 0.2);
}

.panel-theme-toggle .icon-sun,
.panel-theme-toggle .icon-moon {
    display: none;
}

.panel-theme-toggle .icon-moon {
    display: block;
}

[data-theme="dark"] .panel-theme-toggle .icon-moon {
    display: none;
}

[data-theme="dark"] .panel-theme-toggle .icon-sun {
    display: block;
}

/* --- Zone 2: Greeting + Language --- */
.panel-greeting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    gap: 5px;
    box-sizing: border-box;
}

.panel-greeting-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    word-break: keep-all;
    width: 50%;
}

.panel_hello { display: block; }
.panel-greeting-right { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 3px; }

.panel-lang-selector {
    display: flex;
    gap: 1px;
    background: rgba(0, 0, 0, 0.04);
    padding: 3px;
    border-radius: var(--radius-full);
}

.lang-option {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    letter-spacing: 0.03em;
    background: transparent;
    border: none;
    cursor: pointer;
}

.lang-option:hover {
    color: var(--color-text-primary);
}

.lang-option.active {
    background: var(--color-accent-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 126, 255, 0.3);
}

/* --- Zone 3: Navigation --- */
.panel-nav {
    flex: 1;
    padding: 6px 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.panel-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    transition: all var(--transition-fast);
    margin-bottom: 1px;
    position: relative;
    text-decoration: none;
}

/* Left accent bar */
.panel-nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 18px;
    margin-top: -9px;
    background: var(--color-accent-primary);
    border-radius: 0 3px 3px 0;
    transform: scaleY(0);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.panel-nav-item:hover::before {
    transform: scaleY(1);
}

.panel-nav-item:hover {
    background: rgba(0, 126, 255, 0.05);
    color: var(--color-accent-primary);
}

/* Icon container */
.panel-nav-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.03);
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.panel-nav-icon svg {
    width: 17px;
    height: 17px;
    opacity: 0.5;
    transition: all var(--transition-fast);
}

.panel-nav-item:hover .panel-nav-icon {
    background: rgba(0, 126, 255, 0.1);
}

.panel-nav-item:hover .panel-nav-icon svg {
    opacity: 1;
    color: var(--color-accent-primary);
}

/* Label */
.panel-nav-label {
    flex: 1;
}

/* Divider between product & info menus */
.panel-nav-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 4px 10px;
}

/* Stagger animation */
@keyframes panelItemIn {
    from {
        opacity: 0;
        transform: translateX(16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-panel.active .panel-nav-item {
    animation: panelItemIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.slide-panel.active .panel-nav-item:nth-child(1) { animation-delay: 80ms; }
.slide-panel.active .panel-nav-item:nth-child(2) { animation-delay: 110ms; }
.slide-panel.active .panel-nav-item:nth-child(3) { animation-delay: 140ms; }
.slide-panel.active .panel-nav-item:nth-child(4) { animation-delay: 170ms; }
.slide-panel.active .panel-nav-item:nth-child(5) { animation-delay: 200ms; }
.slide-panel.active .panel-nav-item:nth-child(7) { animation-delay: 230ms; }
.slide-panel.active .panel-nav-item:nth-child(8) { animation-delay: 260ms; }
.slide-panel.active .panel-nav-item:nth-child(9) { animation-delay: 290ms; }

@media (prefers-reduced-motion: reduce) {
    .slide-panel.active .panel-nav-item {
        animation: none;
    }
}

/* --- Zone 4: Quick Actions --- */
.panel-quick-actions {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

.panel-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}

a.panel-action-primary {
    background: var(--color-accent-primary);
    color: white;
    box-shadow: 0 2px 12px rgba(0, 126, 255, 0.3);
}

a.panel-action-primary:hover {
    background: #0066d6;
    box-shadow: 0 4px 20px rgba(0, 126, 255, 0.4);
    transform: translateY(-1px);
}

.panel-action-secondary {
    background: rgba(0, 126, 255, 0.08);
    color: var(--color-accent-primary);
    border: 1px solid rgba(0, 126, 255, 0.15);
}

.panel-action-secondary:hover {
    background: rgba(0, 126, 255, 0.14);
    border-color: rgba(0, 126, 255, 0.3);
    transform: translateY(-1px);
}

.panel-action-logout {
    background: rgba(239, 68, 68, 0.06);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.12);
    font-family: inherit;
    cursor: pointer;
}

.panel-action-logout:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
    transform: translateY(-1px);
}

/* --- Zone 5: Footer / Z.studio Banner --- */
.panel-footer {
    padding: 8px 12px 14px;
    flex-shrink: 0;
}

.panel-studio-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(0, 126, 255, 0.05), rgba(0, 194, 255, 0.03));
    border: 1px solid rgba(0, 126, 255, 0.08);
    border-radius: 12px;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.panel-studio-banner:hover {
    background: linear-gradient(135deg, rgba(0, 126, 255, 0.12), rgba(0, 194, 255, 0.08));
    border-color: rgba(0, 126, 255, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 126, 255, 0.1);
}

.studio-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 126, 255, 0.25);
}

.studio-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.studio-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.studio-desc {
    font-size: 11px;
    color: var(--color-text-muted);
}

.panel-studio-banner > svg {
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.panel-studio-banner:hover > svg {
    color: var(--color-accent-primary);
    transform: translateX(2px);
}

.panel-username {
    color: var(--color-accent-primary);
    font-weight: 700;
    display: inline-block;
    vertical-align: middle;
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel_hello_suffix{ display: inline-block; vertical-align: middle; }


/* Buttons: Min-width to prevent shrinking */
.btn-primary {
    white-space: nowrap;
    min-width: max-content;
}

/* Responsive Utility Classes */
.mobile-only {
    display: none;
}

@media (max-width: 1024px) {
    .nav {
        display: none;
    }

    .header-container {
        padding: 0 var(--space-md);
        height: 56px;
        display: flex;
        justify-content: space-between;
    }

    .header-lang-selector {
        flex: unset;
    }
    
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: flex;
    }

    .credit-menu {
        right: unset;
        left: 0;
    }
}

@media (max-width: 768px) {
    .header-container {
        padding: 0 var(--space-md);
        height: 56px;
        display: flex;
        justify-content: space-between;
    }

    .logo-img {
        height: 22px;
    }

    .btn-primary {
        padding: 6px 12px;
        font-size: 12px;
        white-space: nowrap;
    }

    .header-right {
        gap: var(--space-xs);
        justify-self: auto;
    }

    .profile-btn,
    .menu-btn {
        width: 34px;
        height: 34px;
    }

    .profile-btn svg,
    .menu-btn svg {
        width: 16px;
        height: 16px;
    }

    .credit-dropdown,
    .credit-link,
    .btn-login,
    .profile-dropdown {
        display: none;
    }

    .panel-content {
        width: 100%;
        max-width: 100vw;
        border-left: none;
        border-radius: 0;
    }

    .panel-header {
        padding: 0 16px;
        padding-top: env(safe-area-inset-top, 0);
    }

    .panel-nav-item {
        min-height: 48px;
        padding: 10px 14px;
    }

    .panel-close-btn,
    .panel-theme-toggle {
        width: 40px;
        height: 40px;
    }

    .panel_hello { display: inline-block; }
    .panel-greeting-right { flex-direction: row; align-items: center; }

    .panel-action-btn {
        min-height: 30px;
    }

    .panel-quick-actions {
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
    }

    .panel-footer {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
    }

    @media (hover: none) {
        .panel-nav-item:active {
            transform: scale(0.98);
            transition-duration: 0.1s;
        }
        .panel-action-btn:active {
            transform: scale(0.97);
            transition-duration: 0.1s;
        }
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 22px;
    }

    .logo-img {
        height: 20px;
    }

    .btn-primary {
        padding: 5px 10px;
        font-size: 11px;
    }
}