@charset "utf-8";

/* 기본(라이트 모드) 변수 */
:root {

	--color-base-border: #ccc;                   /* 기본 테두리 색상 */	
	--color-img-border: #e0e0e0;             /* 이미지 테두리 색상 */	
    --color-text-default: #333;                     /* 일반 텍스트 */
    --color-text-light: #555;                         /* 밝은 텍스트1 */
	--color-text-light2: #999;                      /* 밝은 텍스트2  */
    --color-text-darker: #111;                    /* 호버 등 진한 텍스트 */
    --color-text-placeholder: #999;         /* 플레이스홀더/정보 텍스트 */
	--color-text-lightgray-lm: #666;
    --color-background: #fff;                    /* 기본 배경색 */
    --color-background-secondary: #f4f1f6;   /* 카테고리/아이콘 배경 */
	--color-bg-secondary-over: #f0f6eb;
	--color-bg-input: #f6f5f7;                 /* input 배경 */
    --color-border: #e0e0e0;                /* 일반 테두리 (헤더, 메뉴 구분선) */
	--color-border-p2: #e6e3e9;
    --color-border-input: #ccc;             /* 입력 요소 테두리 */
	--color-light2-border: #eeeeee;     /* 밝은 선 */
    --color-primary: #672091;               /* 메인 브랜드 색상 */
    --color-primary-cta: #6849ad;           /* CTA 버튼 색상 */
    --color-secondary-cta: #6242a8;         /* 보조 CTA 텍스트 색상 */
    --color-success: #13b321;               /* 성공/호버 색상 */
    --color-icon-default-hex: 666;          /* SVG 아이콘 색상 (HEX 코드에서 # 제외) */
    --color-shadow: rgba(0, 0, 0, 0.06);    /* 스크롤 시 그림자 색상 */
	--color-overlay: rgba(0, 0, 0, 0.4);    /* 햄버거매뉴 패널 그림자 */
	--color-panel-divider :#f8f8f8;     /* 햄버거메뉴 패널 구분선 */
	--color-divider: #f8f8f8;               /* 디바이더/구분선 색상 */
	--color-cate-bg: #e5e5e5;         /* 카테고리 하단 네비 배경색 */
	--color-light: #f6f5f7;                   /* 밝은색 배경 */
	--color-btn-dark: #3a3d4b;      /* 버튼 배경색(다크) */
	--color-ccc: #cccccc;
	--color-light-p: #f6f5f7; 
	--color-light-p2: #f4f1f6;
	--color-board-top: #333;
	--color-bg-detail: #f9f8fa;
	--color-paging: #f8f4ff;
	--color-paging-text: #613d9d;
	--color-paging-border: #ccc;
	--color-icon-bg: #fff;
	--header-border: #e0e0e0;
	--color-menu-text: #13b321; 
	--color-p-bar:#333;
	--color-p-indi:#ccc;
	--color-p-btn:#555;
	--status-waiting-bg: #f9f9f9;          /* 밝은 회색 배경 */
	--status-waiting-text: #6c757d;        /* 중간 회색 텍스트 */
	--status-waiting-border: #ccc;         /* 연한 회색 보더 */
	--status-completed-bg: #fdf5f6;        /* 옅은 핑크 배경 */
	--status-completed-text: #cd0111;      /* 진한 레드 텍스트 */
	--status-completed-border: #cd0111;    /* 포인트 레드 보더 */

	--btn-basic-bg: #f9f8fa;         /* 옅은 그레이 톤 배경 */
	--btn-basic-border: #ccc;        /* 기본 회색 보더 */
	--btn-basic-text: #333;          /* 진한 회색 텍스트 */

	--tab-bg-default: #f6f5f7;                           /* 기본 배경 */
	--tab-bg-hover: #e9ecef;                             /* 호버 배경 */
	--tab-bg-active-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 활성 그라디언트 */
	--tab-text-active: #ffffff;                          /* 활성 텍스트 */
	--tab-ripple: rgba(103, 126, 234, 0.1); 
	--qty-bg: #ffffff;             /* 전체 배경 */
	--qty-border: #dadada;         /* 경계선 */
	--qty-text: #666666;           /* 버튼 및 텍스트 색상 */

	--input-bg: #f9f8fa;                 /* 입력창 배경 */
	--input-border: #ddd;            /* 입력창 외곽선 */

	--qtybtn-bg-light: #ffffff;      /* 수량조절 버튼 기본 배경색 */
	--qtybtn-bg-hover-light: #f7f7f7;/* 수량조절 버튼 오버시 배경색 */

	--btncart-bg-light: #f4f4f4;
	--btncart-border-light: #dedede;

	 --tab-bg-base-lm: #f4f4f4; /* 탭 배경 기본색 (라이트모드) */
	 --tab-bg-active-lm: #131c40;  /* 탭 활성 배경색 (라이트모드) */
	 --tab-bg-hover-lm: #e6e6e6; /* 탭 오버 배경색 (라이트모드) */

	 --wishbtn-bg-soft: #ffffff; 
	 --panel-bg-darksoft: #ffffff;
	 --panelbtn-bg-tone: #ffffff;
	
	--qtyinput-bg-tone: #fff;      /* 기본 배경 (다크모드) */
	--qtyinput-border-tone: #ddd;  /* 보더색 (다크모드) */
	--qtyinput-hover-tone: #f7f7f7;   /* 오버시 배경 (다크모드) */

	--btnorder-bottom-border: #cccccc;
	
	/* 모바일 (Small) 로고 */
    --url-logo-mobile-light: url('/theme/osakapick/img/logo_m.png');
    --url-logo-mobile-dark: url('/theme/osakapick/img/logo_m_dark.png');
    
    /* 데스크톱 (Large) 로고 */
    --url-logo-desktop-light: url('/theme/osakapick/img/logo.png');
    --url-logo-desktop-dark: url('/theme/osakapick/img/logo_dark.png');

    /* 최종 사용 변수: 기본값은 모바일 + 라이트 모드 */
    --url-logo: var(--url-logo-mobile-light);
    --url-icon-notification: var(--url-icon-notification-light);

}


/* 다크 모드 변수 설정 (시스템 설정 따르기) */
@media (prefers-color-scheme: dark) {
    :root {

		--color-base-border: #444; 
		--color-img-border: #444;
        --color-text-default: #f0f0f0;
        --color-text-light: #b0b0b0;
		--color-text-light2: #b0b0b0;              
        --color-text-darker: #ffffff;
        --color-text-placeholder: #666;
		--color-text-lightgray-lm: #888;
        --color-background: #1e1e1e;
        --color-background-secondary: #333;
		--color-bg-secondary-over: #fff;
		--color-bg-input: #2a2a2a;
        --color-border: #383838;
        --color-border-input: #444;
		--color-border-p2: #383838;
		--color-light2-border: #383838; 
        --color-primary: #ffffff;
        --color-primary-cta: #7b59bf;
        --color-secondary-cta: #a892c8;
        --color-success: #777777;
        --color-icon-default-hex: b0b0b0;
        --color-shadow: rgba(0, 0, 0, 0.5);
		--color-overlay: rgba(0, 0, 0, 0.5);
		--color-panel-divider :#2a2a2a; 
		--color-divider: #333333; 
		--color-cate-bg: #4b4b4b;
		--color-light: #2a2a2a; 
		--color-btn-dark: #3a3d4b;
		--color-ccc: #444;
		--color-light-p: #2a2a2a; 
		--color-light-p2: #2a2a2a;
		--color-board-top: #444;
		--color-bg-detail: #2a2a2a;
		--color-paging: #222;
		--color-paging-text: #999;
		--color-paging-border: #555;
		--color-icon-bg: #232225;
		--header-border: #444;
		--color-menu-text: #fff;
		--color-p-bar:#333;
		--color-p-indi:#2a2a2a;
		--color-p-btn:#666;
		--status-waiting-bg: #1f1f1f;        /* 거의 검은 회색 배경 */
		--status-waiting-text: #b5b5b5;      /* 은은한 밝은 회색 텍스트 */
		--status-waiting-border: #3a3a3a;    /* 약간 밝은 회색 보더 */
		--status-completed-bg: #341d1f;      /* 어두운 와인색 톤 배경 */
		--status-completed-text: #ff7b88;    /* 따뜻한 핑크빛 레드 텍스트 */
		--status-completed-border: #ff7b88;  /* 같은 포인트 컬러 */
		--btn-basic-bg: #2a2a2a;       /* 짙은 다크그레이 배경 */
		--btn-basic-border: #3d3d3d;   /* 중간톤 회색 보더 */
		--btn-basic-text: #e0e0e0;     /* 밝은 회색 텍스트 */
		--tab-bg-default: #2a2a2a;                         /* 기본 배경 */
		--tab-bg-hover: #3a3a3a;                           /* 호버 배경 */
		--tab-bg-active-gradient: linear-gradient(135deg, #7180f8 0%, #8b5edc 100%); /* 살짝 더 밝은 보라빛 그라디언트 */
		--tab-text-active: #ffffff;                        /* 활성 텍스트 */
		--tab-ripple: rgba(113, 128, 248, 0.15);           /* 다크모드 리플 */
		--qty-bg: #2b2b2b;           /* 어두운 배경 */
		--qty-border: #3d3d3d;       /* 중간 회색 경계선 */
		--qty-text: #dddddd;         /* 밝은 회색 텍스트 */

		--input-bg: #2a2a2a;                 /* 입력창 배경 */
		--input-border: #444;            /* 입력창 외곽선 */

		--qtybtn-bg-light: #2c2c2c;      
		--qtybtn-bg-hover-light: #3a3a3a;

		--btncart-bg-light: #3a3a3a;
		--btncart-border-light: #555;

		
  --tab-bg-base-lm: #2a2a2a;
  --tab-bg-active-lm: #1a224d;
  --tab-bg-hover-lm: #3a3a3a;

  --wishbtn-bg-soft: #555;
  --panel-bg-darksoft: #1e1e1e;
  --panelbtn-bg-tone: #e2e2e2;

  --qtyinput-bg-tone: #2c2c2c;      /* 기본 배경 (다크모드) */
  --qtyinput-border-tone: #444;  /* 보더색 (다크모드) */
  --qtyinput-hover-tone: #3a3a3a;   /* 오버시 배경 (다크모드) */

  --btnorder-bottom-border: #ffffff;

		--url-logo: var(--url-logo-mobile-dark);
        --url-icon-notification: var(--url-icon-notification-dark);

    }
}