/* Dev.M 테마 03 디자인 토큰. 편집형(B안) 색·활자·여백의 기준값입니다.
   테마 설정 > 색상에서 선택하신 값이 화면을 그릴 때 이 값을 덮습니다. */

:root{

	--c-bg:            #FFFFFF;
	--c-surface:       #FFFFFF;
	--c-surface-2:     #F6F7F8;
	--c-surface-3:     #EDEFF1;
	--c-fg:            #16181A;
	--c-fg-2:          #4A4F55;
	--c-fg-3:          #6B7177;
	--c-fg-4:          #6B7177;
	--c-line:          #DEE1E4;
	--c-line-soft:     #EDEFF1;

	--c-primary:       #16181A;
	--c-primary-deep:  #000000;
	--c-primary-soft:  #EDEFF1;
	--c-primary-tint:  #F6F7F8;
	--c-on-primary:    #FFFFFF;

	--c-accent:        #3A4E6B;
	--c-accent-deep:   #2B3B52;
	--c-accent-soft:   #ECEFF3;
	--c-on-accent:     #FFFFFF;

	--c-deep:          #16181A;
	--c-deep-2:        #24272A;
	--c-on-deep:       #F2F3F4;
	--c-on-deep-2:     #A9AEB3;
	--c-on-deep-3:     #8C9298;
	--c-deep-line:     #3B3F43;
	--c-deep-line-soft:#2A2D30;
	--c-deep-surface-2:#24272A;
	--c-deep-surface-3:#31353A;
	--c-deep-accent:   #A8BBD6;
	--c-deep-accent-soft:rgba(168,187,214,.18);

	--glass-bg:        rgba(255,255,255,.86);
	--glass-solid:     #FFFFFF;
	--glass-line:      rgba(22,24,26,.12);
	--glass-hi:        rgba(255,255,255,.75);
	--glass-hover:     rgba(58,78,107,.08);
	--glass-nav-bg:    rgba(255,255,255,.06);
	--glass-nav-line:  rgba(255,255,255,.14);
	--glass-nav-edge:  rgba(255,255,255,.78);
	--glass-nav-text:  #FFFFFF;
	--glass-nav-sub:   rgba(255,255,255,.88);
	--glass-nav-hover: rgba(255,255,255,.16);

	--glass-nav-top:   rgba(22,24,26,.72);
	--glass-nav-mid:   rgba(19,21,23,.90);
	--glass-nav-btm:   rgba(16,18,20,.97);

	--glass-nav-solid: #141618;

	--glass-deep:      rgba(22,24,26,.94);
	--glass-deep-line: rgba(255,255,255,.14);
	--glass-deep-hi:   rgba(255,255,255,.08);

	--ft-line:         rgba(255,255,255,.13);
	--ft-soft:         rgba(255,255,255,.08);

	--scrim-1:         rgba(18,20,22,.72);
	--scrim-2:         rgba(18,20,22,.28);
	--scrim-3:         rgba(16,18,20,.86);
	--scrim-0:         rgba(16,18,20,0);

	--sh-1: 0 0 0 1px #EDEFF1;
	--sh-2: 0 0 0 1px #DEE1E4;
	--sh-3: 0 0 0 1px #DEE1E4, 0 24px 48px -32px rgba(22,24,26,.22);
	--sh-accent: 0 0 0 1px #3A4E6B;

	/* 모서리 반경입니다. 이 테마는 전 화면을 각지게 표시하므로 0 을 유지하십시오. */
	--r-card:  0;
	--r-input: 0;
	--r-pill:  0;

	--sp-1: .5rem;  --sp-2: .75rem; --sp-3: 1rem;   --sp-4: 1.5rem;
	--sp-5: 2.5rem; --sp-6: 3.5rem; --sp-7: 5rem;   --sp-8: 8rem;

	--ff: "Pretendard", "Pretendard Variable", system-ui, sans-serif;
	--fs-hero: clamp(2.5rem, 6.2vw, 4.75rem);
	--fs-h2:   clamp(1.9rem, 3.6vw, 3rem);
	--fs-h3:   clamp(1.15rem, 1.6vw, 1.5rem);
	--fs-body: 1rem;
	--fs-md:   clamp(1rem, 1.3vw, 1.1875rem);
	--fs-sm:   .9375rem;
	--fs-xs:   .8125rem;

	--lh-tight: 1.18;
	--lh-body:  1.75;

	--ez:      cubic-bezier(.22,.68,0,1);
	--ez-out:  cubic-bezier(.16,1,.3,1);
	--ez-soft: cubic-bezier(.34,.8,.28,1);

	/* 빠른 메뉴 버튼의 색입니다. 기본은 흰 바탕이며, 카카오톡과 채널톡은
	   각 서비스의 고유색을 사용합니다. 색을 바꾸실 때 이 값을 변경하십시오. */
	--qm-bg:   #FFFFFF;
	--qm-fg:   #16181A;
	--qm-line: #DEE1E4;

	--qm-kakao-bg:     #FEE500;
	--qm-kakao-deep:   #EFD800;
	--qm-kakao-fg:     #191919;

	--qm-channel-bg:   #3C5AF5;
	--qm-channel-deep: #2E48D6;
	--qm-channel-fg:   #FFFFFF;

	--hdr-h: 72px;
	--wrap: 1280px;

	/* 카드 계열 스킨(bdc·ltc·mbc 등)이 사용하는 값입니다. 이 테마의 편집형 기준에
	   맞추어 모서리를 없애고 색과 활자를 위의 기준값과 같게 지정합니다. */
	--devm01-gray-100: #F6F7F8;
	--devm01-gray-200: #DEE1E4;
	--devm01-gray-300: #DEE1E4;
	--devm01-gray-400: #8C9298;
	--devm01-gray-500: #6B7177;
	--devm01-gray-600: #6B7177;
	--devm01-gray-700: #4A4F55;
	--devm01-gray-800: #24272A;
	--devm01-gray-900: #16181A;
	--devm01-dark:     #16181A;
	--devm01-primary:  var(--c-accent);
	--devm01-red:      #E5484D;

	--devm01-radius-btn:  0;
	--devm01-radius-card: 0;
	--devm01-radius-lg:   0;
	--devm01-radius-xl:   0;
	--devm01-shadow-card:     var(--sh-1);
	--devm01-shadow-floating: var(--sh-3);

	--devm01-font-kr: var(--ff);
	--devm01-font-en: var(--ff);
	--devm01-ease:    var(--ez);
	--devm01-duration: 260ms;

	--devm01-main-width: var(--wrap);
	--devm01-sub-width:  var(--wrap);
	--devm01-inner:      var(--wrap);
	--devm01-header-height: var(--hdr-h);
	--devm01-mobile-header-height: 64px;

	--devm01-wz-navy:  var(--c-fg);
	--devm01-wz-text:  var(--c-fg);
	--devm01-wz-muted: var(--c-fg-3);
	--devm01-wz-line:  var(--c-line);
	--devm01-wz-blue:  var(--c-accent);
	--devm01-wz-sky:   var(--c-accent);
	--devm01-wz-font:  var(--ff);
	--devm01-wz-ease:  var(--ez);
	--devm01-wz-radius-lg: 0;
	--devm01-wz-shadow: none;
}