/* ===============================================
 ////  ★ 공통 영역 레이아웃, 요소, 스타일 정의  ////
 ============================================== */


 @import url('https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap');
 

/* ──────────────────────────────────────────
     기본 리셋 및 폰트 설정 
 ────────────────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    border: 0;
	vertical-align: baseline;
    box-sizing: border-box;
    letter-spacing:-0.05em;
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #ffffff;
    color: var(--text-dark);
    /*display: flex;
    justify-content: center;*/
    min-height: 100vh;
    scrollbar-gutter: stable; /* PC에서 스크롤바 사라질 때 화면 덜컥거림 방지 */
}


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    outline: none;
}

a:hover,
a:focus,
a:active,
a:visited {
    /*color: inherit;*/
    text-decoration: none;
}

/* ──────────────────────────────────────────
    ★ 디자인 시스템 글로벌 변수 정의 (:root)
────────────────────────────────────────── */
:root {
    /* 색상 정의 */
    --primary-color: #5f4ae4/*#6a4bff*/;
    --primary-dark: #5f3dc4;       
    --primary-light-purple: #9775fa; 
    --primary-blue: #5c7cfa;        
    --border-color: #e6e6e6;
    --text-main :#333333;
    --text-sub:#666666;       
    --text-dark: #222222; 
    --text-normal: #666666;            
    --text-muted: #888888; 
    --text-red:#f81700;
    --text-blue:#4c62c1;
    --overlay-dark:rgba(0,0,0,0.6);


    /* padding */
    --base-padding:25px;
    
    
    /* 모바일 기본 변수 */
    --banner-gap: 24px;            
    --banner-padding: 10%;         
    --cat-bg: #eff1f5;             

    /* 시안 맞춤형 태그별 배경색 정의 */
    --tag-sinjeom-bg: #ffeef0;
    --tag-sinjeom-color: #ff5a60;
    --tag-taro-bg: #eef2ff;
    --tag-taro-color: #5c7cfa;
    --tag-saju-bg: #e3fafc;
    --tag-saju-color: #1098ad;

    /*section base title size*/
    --base-tit-sz:20px;
    --stit-sz:18px;
    --label-sz:16px;

    /* 버튼 상태 색상 */
    --btn-active-bg:  #5f4ae4;  /*primary-color와 동일*/
    --btn-busy-bg: #878799;

    /* [일괄 제어 변수] 섹션 구분선 회색 바의 두께와 색상 */
    --divider-height: 10px;
    --divider-color: #f1f3f5;

    
    /* 썸네일 크기가 각각 달라도 곡률은 12px로 고정 */
    --base-radius: 16px;

    /* button 곡률은 12px로 고정 */
    --btn-base-radius: 12px;

    /*float btn-wrap shadow*/
    --box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
}

.link-arrow {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url('//im.allido.co.kr/image/arrow_right.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity:0.6;
    margin-left:3px;
}

.arrow-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 1px solid #999999;
    border-right: 1px solid #999999;
    transform: rotate(45deg);
    margin-left: 8px;
}

.divi::after {
    content: "|";
    position: relative;
    top: -2px;
    margin: 0 7px;
    color: #919191;
    font-size: 8px;    
}

.tag-badge {
    position:relative;
    font-size: 13px;
    font-weight: bold;
    padding: 2px 7px;
    height: auto;
    border-radius: 4px;
    letter-spacing: -0.2px;
}

.tag-badge::after{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(0, 0, 0, 0.06);
    content: "";
    border-radius: inherit;
    z-index:0;
}

.tag-badge.saju {
    background-color: var(--tag-saju-bg);
    color: var(--tag-saju-color);
}

.tag-badge.sinjeom {
    background-color: var(--tag-sinjeom-bg);
    color: var(--tag-sinjeom-color); 
}

.tag-badge.taro {
    background-color: var(--tag-taro-bg);
    color: var(--tag-taro-color); 
}

.cst-pricing-row {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 17px;
    font-weight: bold;
    color: #222;
    margin-bottom: 4px;
}

.cst-coin {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.cst-coin::before {
  content: "C";
  width: 16px;
  height: 16px;
  background-color: #fcc419;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  position:relative;
  top:1px;
}

.cst-price::before {
  content: "￦";
}

.price-unit-text {
    font-size: 15px;
    font-weight: normal;
    color: #777;
    margin-left: 2px;
}

.toggle-available-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: normal;
    color: #444;
    cursor: pointer;
}

.dropdown-trigger {
    font-size: 16px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    user-select: none;
    font-weight: normal;
    padding: 4px 0;
}

.dropdown-trigger::after {
    content: "";
    display: flex;
    width: 8px;
    height: 8px;
    border-right: 2px solid #aaa;
    border-bottom: 2px solid #aaa;
    transform: rotate(45deg);
    border-radius: 1px;
    position:relative;
    top:-1px;
}

/* [동적 효과] 드롭다운이 열렸을 때 (active 클래스가 활성화될 때) */
.dropdown-trigger.active::after {
    transform: rotate(225deg);
    top:2px;
}

.dropdown-menu {
    position: absolute;
    right: 24px;
    top: 20px;
    padding:3px 0px;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: var(--base-radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: fit-content;
    overflow: hidden;
    text-align:left;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.2s ease, opacity 0.2s ease; 
}


.dropdown-menu.show {
    max-height: 200px;
    opacity: 1;
    pointer-events: auto;
}

.dropdown-option {
    border: none;
    background: none;
    padding: 10px 20px;
    font-size: 16px;
    color: #444;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s;
    font-weight: normal;
}

.dropdown-option:hover {
    background-color: #f1f3f9;
    color: var(--primary-color);
}

.dropdown-option:not(:last-child) {
    border-bottom: 1px solid #f1f3f5;
}


/* 가로 스크롤바 완전 숨김 가이드 */
.no-scrollbar, nav, .banner-slider, .categories, .recent-scroll, .top-csl-viewport, .filter-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar, nav::-webkit-scrollbar, .banner-slider::-webkit-scrollbar, .categories::-webkit-scrollbar, .recent-scroll::-webkit-scrollbar, .top-csl-viewport::-webkit-scrollbar, .filter-scroll::-webkit-scrollbar {
    display: none !important;
}

/* [일괄 제어 클래스] 섹션 구분선 스타일 */
.section-divider {
    width: 100%;
    height: var(--divider-height);
    background-color: var(--divider-color);
    border: none;
}

/* ──────────────────────────────────────────
    ★ 헤더(Header) 및 네비게이션(Nav) 고정 영역
────────────────────────────────────────── */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px var(--base-padding); 
    background-color: #fff;
    border-bottom: 1px solid var(--border-color);
    
    position: fixed;
    top: 0;
    width: 100%;
    max-width: inherit; 
    height: 62px; 
    z-index: 3;
}

.logo {
    width:74px;
    height:auto
}

.logo a{
    width:100%;
}

.logo a img{
    width:100%;
    height:auto
}

.header-menu {
    display: flex;
    align-items: center;
    gap: 12px; 
}

.coin-point {
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-light-purple)); 
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 8px;
    border: none;
    position: relative;
    display: flex;
    align-items: center;
    letter-spacing: -0.5px;
}

.coin-point::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--primary-light-purple);
}

.circle-c-btn {
    width: 26px;
    height: 26px;
    border: 2px solid #444; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    color: #444;
    cursor: pointer;
    user-select: none;
    text-decoration:none
}

.hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 23px;
    height: 18px;
    cursor: pointer;
    margin-left: 4px;
    text-decoration:none
}

.hamburger-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
    border-radius: 2px;
}

/* 네비게이션 고정 기능 최적화 */
nav {
    display: flex;
    gap: 24px; 
    padding: 0 var(--base-padding); 
    overflow-x: auto;
    white-space: nowrap;
    background-color: #fff;
    
    position: relative;
    width: 100%;
    max-width: inherit;
    
    opacity: 0;
    visibility: hidden;
    height: 0;
    border-bottom: 0px solid var(--border-color);
    transition: opacity 0.2s ease, height 0.2s ease, padding 0.2s ease;
    z-index: 2;
}

nav.sticky-active {
    position: fixed;
    top: 61px; 
    opacity: 1;
    visibility: visible;
    height: 52px; 
    padding: 14px var(--base-padding) 18px;
    border-bottom: 1px solid var(--border-color);
}

nav.sub-fix {
    position: fixed;
    top: 61px; 
    opacity: 1;
    visibility: visible;
    height: 52px; 
    padding: 14px var(--base-padding) 18px;
    border-bottom: 1px solid var(--border-color);
}

nav a {
    font-size: 17px; 
    font-weight: normal;
    color: var(--text-dark);
    cursor: pointer;
    letter-spacing: -0.5px;
    transition: color 0.05s ease;
    line-height:1.5;
    text-decoration: none;
}

nav a:hover, nav a.active {
    color: var(--primary-color);
    font-weight: bold;
}

/* page header */
.pg-header {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    background-color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 2;
}

.header-left {
    display:flex;
    align-items: center;
    gap: 2px;
}

.btn-back, .btn-home {
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
    display: flex;
    align-items: center;
}

.btn-back{
    display: inline-block;
    width:28px;
    height:28px;
    background-repeat: no-repeat;
    background-image: url('//im.allido.co.kr/image/arrow_back.png');
    background-size: 22px;
    background-position: center center;
}

.btn-home {
    display: inline-block;
    width:32px;
    height:28px;
}

.icon-home{
    width:28px;
    height:auto;
}

.header-title {
    display: inline-block;
    font-size: 20px;
    /*font-weight: bold;*/
    color: #222;
}

.header-title .number {
    font-size: 19px;
    color: #999;
    font-weight: normal;
}

.page-content {
    padding: 50px 2em;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 100px;
}

.sec-base {
    padding:var(--base-padding) 0px
}

.sec-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--base-padding) 20px; 
}

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    position:relative;
}

.list-count {
    font-size: 16px;
    color:#666;
}

.list-count .count-num {
    font-size: 16px;
    color:#222;
}

.list-head-bar {    
    display: flex;
    width:100%;
    padding: 15px var(--base-padding);
    font-weight: bold;
    color: #333;
    border-bottom: 1px solid var(--border-color);
    justify-content: space-between;
    position:relative;
}

.list-head-bar .title{
    font-size:var(--base-tit-sz);
} 

.list-head-bar .count-num em {
    color: var(--primary-color);
    font-style: normal;
}

.list-control-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding-top:calc(var(--base-padding)*0.7);
}

/*
@media (min-width: 768px) {
    .list-control-bar { padding: 16px 40px; }
}
*/

.sec-tabs-area {
    padding: 0; /* 탭 메뉴가 화면 끝까지 차도록 패딩 제거 */
    background-color: transparent;
    overflow: visible !important;
}

.sec-conts {
    padding:0 var(--base-padding)
}

.sec-conts p{
    padding:0px;
    color:#666;
    font-size: 15px;
    line-height: 160%;
}

.ico-coin {
    width: 16px;
    height: 16px;
    background-color: #fcc419;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* 푸터 영역 스타일 */
footer {
    background-color: #4b4e57;
    padding: 30px var(--base-padding) 40px;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    footer { 
        padding: 30px; 
    }
}

.footer-link-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid #5a5d67;
    margin-bottom: 16px; 
}

.footer-link-bar a {
    font-size: 16px;
    font-weight: normal;
    color: #d1d4dc;
    text-decoration: none;
    letter-spacing: -0.3px; 
}

.footer-link-bar a.highlight-policy {
    color: #ff765b;
    font-weight: normal; 
}

.footer-middle-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px; 
}

.footer-brand-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center; 
}

.footer-brand-title .footer-logo .fs-logo {
    width:120px;
}

.footer-brand-title .sub-kosdaq .kosdaq-logo{
    width:74px;
}

.footer-brand-title .sub-slogan {
    font-size: 13px;
    color: #b2b6c1;
    font-weight: normal;
    letter-spacing: -0.2px; 
}

.footer-brand-title .main-title-text {
    font-family: "East Sea Dokdo", sans-serif;
    font-size: 36px;
    font-weight: normal;
    color: #ffffff;
    letter-spacing: -0.5px; 
}

.footer-sns-group {
    display: flex;
    gap: 10px;
    align-items: center; 
}

.sns-round-icon {
    position:relative;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    background-position: center center;
    background-size:100%;
    background-repeat: no-repeat;
}


.sns-round-icon.instagram {
    background-image: url('//im.allido.co.kr/image/Instagram_ico_logo.png');
}

.sns-round-icon.youtube {
    background-image: url('//im.allido.co.kr/image/youtube_ico_logo.png');
    background-color: #ff0000;
    background-size:130%;
}

.sns-round-icon.blog {
    background-image: url('//im.allido.co.kr/image/naver_ico_logo.png');
}

.footer-company {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    text-align: left; 
}

@media (min-width: 768px) {
    .footer-company {
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 20px;
        row-gap: 4px;
    }
}

.footer-company span, .footer-company p {
    font-size: 14px;
    color: #b2b6c1;
    line-height: 1.6;
    letter-spacing: -0.3px; 
}

.footer-disclaimer {
    margin-top: 20px;
    font-size: 12px;
    color: #8e93a2;
    line-height: 1.6;
    letter-spacing: -0.3px;
    word-break: keep-all;
    text-align: left; 
}



/* ----------------------------------------------------
   나의 메뉴 열기 
------------------------------------------------------ */

body.scroll-lock {
    overflow: hidden; /* 메뉴 열릴 때 배경 스크롤 차단 */
}

/* 전체 메뉴 오버레이 (반투명 배경)*/
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--overlay-dark);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 5;
}

.drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 오른쪽 슬라이드 메뉴 패널 */
.drawer-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 85%;
    max-width: 380px;
    height: 100%;
    background-color: #ffffff;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.drawer-overlay.active .drawer-panel {
    transform: translateX(0);
}

/* 상단 헤더 & 닫기 버튼 */
.btn-menu-close {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0px;
    right: 0px;
    background: none;
    border: none;
    font-size: 40px;
    padding:10px; 
    font-weight:lighter;
    color: #333333;
    cursor: pointer;
    line-height: 1;
    z-index: 2;
}

/* 본문 컨텐츠 (프로모션 & 배너) */
.drawer-content {
    position: relative;
    padding: 24px;
    flex: 1;
    overflow-y: auto;   /* 패널 내부의 메뉴 내용만 독립적으로 스크롤되도록 설정 */
    -webkit-overflow-scrolling: touch; /* 모바일 부드러운 스크롤 */
    /* (핵심) 브라우저별 스크롤바 숨기기 */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
	/*
    min-width: 360px;
	*/
    min-width: 320px;
}

/* Chrome, Safari, Opera 등 웹킷 기반 브라우저 스크롤바 숨기기 */
.drawer-content::-webkit-scrollbar {
    display: none;
} 

.promo-banner {
    text-align: center;
    margin-bottom: 34px;
}

.promo-title {
    font-size: 22px;
    font-weight: bold;
    color: #111;
    line-height: 1.4;
    margin-bottom: 8px;
}

.promo-highlight {
    font-size: 22px;
    font-weight: bold;
    color: var(--primary-color);
}

.promo-sub {
    font-size: 16px;
    color: #777;
    margin-bottom: 13px;
}

.btn-login {
    width: 50%;
    padding: 10px;
    background-color: var(--primary-color);
    color: #fff5d0;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

/* 이벤트 배너 */
.event-banner {
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
}

.event-banner a {
    display:block;
}

.event-banimg {
    width: 100%;
    height: auto;
    display: block;
}

/* 메뉴 리스트 & 링크*/
.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-item {
    font-size: 17px;
}

/* 링크 전체를 클릭 가능 영역(Block)으로 지정 */
.menu-link {
    display: block;
    padding: 12px 0;
    color: #333;
    text-decoration: none;
    font-weight: normal;
    transition: color 0.2s ease;
}

.menu-link:hover,
.menu-link:focus {
    color: var(--primary-color);
}

/* 강조 메인 컬러 (.highlight가 링크에 직접 있거나 부모 li에 있을 때 모두 대응) */
.menu-link.highlight,
.menu-item.highlight > .menu-link {
    color: var(--primary-color);
}

/* 구분선 */
.menu-divider {
    height: 1px;
    background-color: #eee;
    margin: 8px 0;
}

/* 하단 푸터 */
.drawer-footer {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    padding: 18px 24px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    border-top: 1px solid #eee;
}


/* -------------------------------------
    로그인 후 개인화 영역 디자인 
--------------------------------------*/

/* 전체 감싸는 박스 여백 */
.user-profile-box {
    margin-bottom: 24px;
}

/* 1. 상단 유저 정보 영역 */
.user-info-area {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0 20px 0;
}

/* 프로필 이미지 원형 처리 */
.user-zodiac {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #9eb5ff;
    background-position: center;
    background-repeat: no-repeat;
}

.zodiac-img01 {background-image: url('//im.allido.co.kr/image/zodiac_01.png'); background-size:70%; background-color: #99f3f7;}
.zodiac-img02 {background-image: url('//im.allido.co.kr/image/zodiac_02.png'); background-size:70%}
.zodiac-img03 {background-image: url('//im.allido.co.kr/image/zodiac_03.png'); background-size:60%}
.zodiac-img04 {background-image: url('//im.allido.co.kr/image/zodiac_04.png'); background-size:50%}
.zodiac-img05 {background-image: url('//im.allido.co.kr/image/zodiac_05.png'); background-size:71%; background-color: #ffa9b2;}
.zodiac-img06 {background-image: url('//im.allido.co.kr/image/zodiac_06.png'); background-size:60%; background-color: #ffa9b2;}
.zodiac-img07 {background-image: url('//im.allido.co.kr/image/zodiac_07.png'); background-size:53%}
.zodiac-img08 {background-image: url('//im.allido.co.kr/image/zodiac_08.png'); background-size:72%}
.zodiac-img09 {background-image: url('//im.allido.co.kr/image/zodiac_09.png'); background-size:73%}
.zodiac-img10 {background-image: url('//im.allido.co.kr/image/zodiac_10.png'); background-size:55%}
.zodiac-img11 {background-image: url('//im.allido.co.kr/image/zodiac_11.png'); background-size:59%}
.zodiac-img12 {background-image: url('//im.allido.co.kr/image/zodiac_12.png'); background-size:62%; background-color:#7de4ed}


/* 유저 텍스트 정보 */
.user-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-name {
    font-size: 20px;
    font-weight: bold;
    color: #111;
    margin: 0;
}

.user-meta {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #777;
}

.meta-bar {
    display: inline-block;
    width: 1px;
    height: 12px;
    background-color: #ddd;
    margin: 0 8px;
}

/* 하단 회색 지갑/메뉴 카드 박스 */
.user-wallet-card {
    background-color: #f1f2f6;
    border-radius: 16px;
    padding: 27px 27px 30px;
}

/* 코인 행 레이아웃 */
.coin-balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.coin-balance-row .cst-coin {
    font-size: 20px;
}


/* 충전하기 버튼 */
.btn-coin-charge {
    display: inline-block;
    padding: 6px 15px;
    background-color: var(--primary-color);
    color: #fffe8a !important; /* 기존 상속 색상 방지 */
    text-decoration: none;
    border-radius: 20px;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}

.btn-coin-charge:hover {
    background-color: var(--primary-blue);
}

/* 그리드(Grid) 메뉴 레이아웃 */
.quick-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3열 고정 격자 */
    gap: 15px 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.quick-item {
  text-align: center;
  min-width: 0; /* 추가: Grid 자식 요소가 텍스트 폭 때문에 늘어나는 것 방지 */
}

.quick-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  width: 100%;
  min-width: 0; /* 추가: Flex 자식 요소 최소 너비 제한 해제 */
}

/* 아이콘 박스 */
.quick-icon-box {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;/* 정사각형 유지 */  
  max-width: 76px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 아이콘 내부에 들어갈 실제 아이콘 이미지 처리용 예시 */
/* 
.quick-icon-box {
    background-image: url('아이콘경로.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px;
}
*/

.quick-link:hover .quick-icon-box,
.quick-link:focus .quick-icon-box {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

.quick-name {
    font-size: 13px;
    color: #444;
    font-weight: normal;
    white-space: nowrap; /* 글자 줄바꿈 방지 */
}


/*----------------------------------------------
    탭 메뉴 기본 스타일
-----------------------------------------------*/
.tab-menu {
    display: flex;
    background-color: #ffffff;
    border-bottom: 1px solid var(--border-color);
    position: -webkit-sticky; /* 사파리 지원 */
    position: sticky;
    top: 58px;
    margin-bottom: 15px;
    z-index: 1;   
}

.tab-item {
    flex: 1;
    text-align: center;
    position: relative;
}

.tab-item button {
    display: inline-block;
    padding: 16px 20px;
    border: none;
    background-color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #111111;
    position: relative;
    letter-spacing: -0.5px;
    cursor: pointer;
}

/* 괄호 안의 숫자 스타일 */
.tab-item button .count {
    font-weight: normal;
    color: #868e96;
    margin-left: 2px;
}

/*활성화(Active) 상태*/
.tab-item.active button {
    color: var(--primary-color); 
}

.tab-item.active button .count {
    color: var(--primary-color);
}

@media (max-width: 440px) {
    .tab-item .count {
        display: none !important;
    }
}

.tab-item.active button::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 100%;
    background-color: var(--primary-color);
}

/* ---------------------------------------------------
    공통 폼 배치: 이메일 분할, 입력+버튼, 라벨 및 스위치
----------------------------------------------------- */
.form-box {
    width: 100%;
}

.nor-noti {
    font-size: 12px;
    color: var(--text-normal);
    margin-top: -8px;
    line-height: 180%;
}

.err-noti {
    color: var(--text-red);
}

.ok-noti {
    color: var(--text-blue);
}

.mfr-input-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.mfr-input-wrapper .form-control {
    width: 100%;
    padding-right: 52px; /* 우측 변경 버튼과 텍스트가 겹치지 않도록 여백 확보 */
}

.email-group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.email-prefix {
    flex: 1;
    min-width: 0;
}

.domain-field {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.email-at {
    position: absolute;
    left: 12px;
    color: #868e96;
    font-size: 14px;
    pointer-events: none;
}

.email-domain {
    width: 100%;
    padding-left: 24px ;
}

.email-select-wrap {
    position: relative;
    width: 100px;
    flex-shrink: 0;
}

.full-field {
    width: 100%;
}

.checkbox-group {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    margin-bottom: 30px;
}

.form-row {
    width: 100%;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 10px;
}

.signup-field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.signup-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.signup-input-row .signup-input {
    flex: 1;
}

.signup-terms-box {
    background-color: #F8F9FA;
    border: 1px solid #E9ECEF;
    border-radius: 12px;
    padding: 16px;
    margin-top: 8px;
    margin-bottom: 20px;
}

.signup-check-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.signup-check-item:last-child {
    margin-bottom: 0;
}

.signup-check-all .signup-check-text {
    color: #666666;
    font-weight: normal;
}

.signup-required {
    color: var(--primary-color);
}

.signup-optional {
    color: #555555;
}

.signup-terms-divider {
    height: 1px;
    background-color: #E2E8F0;
    margin: 12px 0 16px;
}

.signup-sub-options {
    display: flex;
    gap: 16px;
    padding-left: 28px;
    margin-top: 8px;
}

.mfr-form-group {
    margin-bottom: 16px;
}

.mfr-input-row {
    display: flex;
    gap: 8px;
}

.gender-row {
    display: flex;
    gap: 6px;
}

.label-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 8px;
}

.label-row .form-label {
    margin-bottom: 0;
}

.unknown-time-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-row.card-number-row {
    display: flex;
    gap: 8px;
}

.form-row.card-number-row .card-num {
    flex: 1;
    text-align: center;
    padding: 0 4px;
}

.terms-row .unknown-time-wrap {
    flex: 1;
}

.inquiry-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.select-box-wrap {
    position: relative;
    width: 100%;
}

/* 이메일 자동완성 기준 영역 */
.email-autocomplete {
    position: relative;
    overflow: visible;
    min-width: 0;
}

/* 추천 목록 */
.email-autocomplete .email-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;

    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: var(--btn-base-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    max-height: 240px;
    overflow-y: auto;

    /* 스크롤 기능은 유지하고 스크롤바만 숨김 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.email-autocomplete .email-suggestions::-webkit-scrollbar {
    display: none;
}

.email-autocomplete .email-suggestions[hidden] {
    display: none;
}

.email-autocomplete .email-suggestions li {
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
    color: #777;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.email-autocomplete .email-suggestions li:last-child {
    border-bottom: none;
}

.email-autocomplete .email-suggestions li:hover,
.email-autocomplete .email-suggestions li[aria-selected="true"] {
    background: #f7f7f7;
    color:#222;
}

/* ======================================================================
    공통 폼 컴포넌트
    모든 입력/선택/체크 UI는 이곳에서 관리합니다.
    기존 클래스와 id는 스크립트 연결 및 페이지 배치용으로 유지합니다.
   ====================================================================== */

:root {
    --form-height: 52px;
    --form-radius: 8px;
    --form-border: #dfe3e8;
    --form-bg: #f8f9fa;
    --form-text: #333;
    --form-muted: #888;
    --form-accent: var(--primary-color, var(--primary-color));
    --form-disabled-bg: #eceef1;
}

.form-control {
    display: block;
    flex: 1;
    width: 100%;
    min-width: 0;
    height: var(--form-height);
    box-sizing: border-box;
    padding: 0 16px;
    border: 1px solid var(--form-border);
    border-radius: var(--form-radius);
    background-color: var(--form-bg);
    color: var(--form-text);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    outline: none;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.form-control::placeholder {
    color: var(--form-muted);
    opacity: 1;
}

.form-control:focus {
    border-color: var(--form-accent);
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(108, 92, 231, .15);
}

.form-control:disabled {
    background-color: var(--form-disabled-bg);
    color: var(--form-muted);
    cursor: not-allowed;
}

.form-control[readonly] {
    background-color: var(--form-disabled-bg);
}

.form-control[aria-invalid="true"] {
    border-color: #d83c3c;
}

select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding: 0 32px 0 12px;
    background-image: url('//im.allido.co.kr/image/arrow_drop.png');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px;
    cursor: pointer;
}

select.form-control:disabled {
    cursor: not-allowed;
}

textarea.form-control {
    flex: none;
    height: 220px;
    min-height: 120px;
    padding: 16px;
    resize: vertical;
}

textarea.form-long {
    height: 325px;
}

.form-control.form-auto {
    width: auto;
    flex: 0 1 auto;
}

.form-label {
    display: block;
    margin: 20px 0 8px;
    font-size: var(--label-sz);
    font-weight: 700;
    color: var(--form-text);
}

.form-check-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--form-text);
    font-size: 15px;
    line-height: 1.5;
    cursor: pointer;
}

.form-check,
.form-radio {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid var(--form-border);
    border-radius: 4px;
    background-color: #fff;
    vertical-align: middle;
    cursor: pointer;
}

.form-check:checked {
    border-color: var(--form-accent);
    background: var(--form-accent) url('//im.allido.co.kr/image/ico_check_wh.png') center / 18px no-repeat;
}

.form-check:indeterminate {
    border-color: var(--form-accent);
    background: linear-gradient(#fff, #fff) center / 10px 2px no-repeat var(--form-accent);
}

.form-radio {
    border-radius: 50%;
}

.form-radio:checked {
    border: 6px solid var(--form-accent);
}

.form-check:focus-visible,
.form-radio:focus-visible,
.form-btn:focus-visible {
    outline: 2px solid var(--form-accent);
    outline-offset: 3px;
}

.form-check:disabled,
.form-radio:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* 이전 체크 장식은 숨기고 실제 input을 표시해 키보드 접근성을 유지합니다. */
.form-mark {
    display: none;
}

.form-choice-input,
.form-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.form-choice {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: var(--form-height);
    border: 1px solid var(--form-border);
    border-radius: var(--form-radius);
    background-color: var(--form-bg);
    color: var(--form-text);
    font-size: 16px;
    cursor: pointer;
}

.form-choice-input:checked + .form-choice {
    border-color: var(--form-accent);
    background-color: var(--form-accent);
    color: #fff;
}

.form-choice-input:focus-visible + .form-choice,
.form-switch input:focus-visible + .toggle-slider {
    outline: 2px solid var(--form-accent);
    outline-offset: 3px;
}

.form-choice-input:disabled + .form-choice {
    opacity: .5;
    cursor: not-allowed;
}

.form-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
}

.form-switch .toggle-slider {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background-color: #dfe3e8;
    cursor: pointer;
    transition: background-color .2s;
}

.form-switch .toggle-slider::before {
    position: absolute;
    content: '';
    width: 22px;
    height: 22px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
    transition: transform .2s;
}

.form-switch input:checked + .toggle-slider {
    background-color: var(--form-accent);
}

.form-switch input:checked + .toggle-slider::before {
    transform: translateX(22px);
}

.form-switch input:disabled + .toggle-slider {
    opacity: .5;
    cursor: not-allowed;
}

.form-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--form-height);
    padding: 0 16px;
    border: 0;
    border-radius: var(--form-radius);
    background-color: var(--form-accent);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    transition: filter .2s;
}

.form-btn:hover:not(:disabled) {
    filter: brightness(.95);
}

.form-btn:disabled,
.form-btn[aria-disabled="true"] {
    background-color: var(--form-disabled-bg);
    color: var(--form-muted);
    cursor: not-allowed;
}

.form-btn-side {
    width: 120px;
    min-width: 0;
    flex: 0 0 120px;
    padding: 0 8px;
    font-size: 15px;
    white-space: nowrap;
}

.form-box > .form-btn {
    margin-bottom: 20px;
}

/* 분할 입력의 자리 확보: 장식의 위치만 다르며 기본 디자인은 동일합니다. */
.form-control.email-domain {
    padding-left: 24px;
}

@media (prefers-reduced-motion: reduce) {
    .form-control,
    .form-btn,
    .form-switch .toggle-slider,
    .form-switch .toggle-slider::before {
        transition: none;
    }
}

/* 제출 버튼은 같은 디자인을 사용하고 배치와 기존 활성 클래스만 유지합니다. */
.form-btn.btn-flt {
    text-decoration: none;
    border-radius: 0px;
}

.form-btn.btn-flt:not(.btn-flt-act),
.form-btn.disabled {
    background-color: var(--form-disabled-bg);
    color: var(--form-muted);
    cursor: not-allowed;
}

.form-btn.disabled {
    pointer-events: none;
}

.form-btn.btn-step {
    width: 120px;
    gap: 4px;
    white-space: nowrap;
    text-decoration: none;
}

.form-btn.btn-complete {
    flex: 1;
}

.form-btn.btn-prev {
    background-color: #707780;
}

.terms-row .form-check-label {
    align-items: flex-start;
    gap: 8px;
}