@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

@layer base {
  h1 { @apply text-3xl font-semibold leading-tight; }
  h2 { @apply text-2xl font-semibold leading-tight; }
  h3 { @apply text-xl font-semibold leading-tight; }
  h4 { @apply text-lg font-semibold; }
  h5 { @apply text-base font-semibold; }
  h6 { @apply text-sm font-semibold; }
  p  { @apply text-base leading-7; }
}

/*
 * EN/KR Typography 공통 font-family
 * size / weight / line-height는 Tailwind text-* 유틸, family만 여기서 적용
 * (@layer utilities에 두면 JIT가 미사용 셀렉터를 제거할 수 있어 layer 밖 유지)
 */
.text-en-display-2xl,
.text-en-display-xl,
.text-en-display-l,
.text-en-display-m,
.text-en-display-s,
.text-en-display-xs,
.text-en-heading-l,
.text-en-heading-m,
.text-en-heading-s,
.text-en-label-l,
.text-en-label-m,
.text-en-label-s,
.text-kr-display-2xl,
.text-kr-display-xl,
.text-kr-display-l,
.text-kr-display-m,
.text-kr-display-s,
.text-kr-display-xs,
.text-kr-heading-l,
.text-kr-heading-m,
.text-kr-heading-s,
.text-kr-label-l,
.text-kr-label-m,
.text-kr-label-s {
  font-family: var(--font-family-typography);
}

:root {
  /* ========== Raw (Figma Raw / Light) ========== */
  --color-gray-50: #ffffff;
  --color-gray-100: #f5f6fa;
  --color-gray-200: #ebecef;
  --color-gray-300: #d4d5d9;
  --color-gray-400: #abacb0;
  --color-gray-500: #898a8f;
  --color-gray-600: #474747;
  --color-gray-700: #303030;
  --color-gray-800: #191919;
  --color-gray-900: #060606;
  --color-blue-100: #f2f8ff;
  --color-blue-200: #b3d5ff;
  --color-blue-300: #0070ff;
  --color-blue-400: #0068ec;
  --color-blue-500: #3890ff;
  --color-navy-100: #001f62;
  --color-navy-200: #001951;
  --color-orange-100: #fff7eb;
  --color-orange-200: #ff922f;
  --color-orange-300: #ffab52;
  --color-red-100: #fef4f3;
  --color-red-200: #f83015;
  --color-red-300: #ff482f;
  --color-red-400: #3d1a17;
  --color-green-100: #f4fbf7;
  --color-green-200: #27ae60;
  --color-green-300: #30b769;
  --color-green-400: #0f2d1a;
  --color-purple-100: #a200ff;
  --color-purple-200: #9d00f7;

  /* ========== Primitive (Figma Primitive / Light) ========== */
  --color-base-black: var(--color-gray-900);
  --color-base-white: var(--color-gray-50);
  --color-base-overlay-16: #06060629;
  --color-base-overlay-20: #06060633;
  --color-base-overlay-24: #0606063d;
  --color-base-overlay-28: #06060647;
  --color-brand-primary: var(--color-blue-300);
  /* TODO: Figma Primitive Brand.Primary Hover = Color.blue.100 — 원본 의도 확인 필요 */
  --color-brand-primary-hover: var(--color-blue-400);
  --color-brand-surface: var(--color-blue-100);
  --color-brand-disabled: var(--color-blue-200);
  --color-brand-secondary: var(--color-navy-100);
  --color-brand-secondary-hover: var(--color-navy-200);
  /* Primitive Warning → orange.100 / .200 / .300 */
  --color-warning-background: var(--color-orange-100);
  --color-warning-primary: var(--color-orange-200);
  --color-warning-hover: var(--color-orange-300);
  --color-error-background: var(--color-red-100);
  --color-error-default: var(--color-red-200);
  --color-error-hover: var(--color-red-300);
  --color-surface-canvas: var(--color-gray-100);
  --color-surface-panel: var(--color-gray-50);
  --color-surface-card: var(--color-gray-50);
  --color-surface-selected: var(--color-blue-300);
  --color-surface-disabled: var(--color-blue-100);
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-700);
  --color-text-tertiary: var(--color-gray-600);
  --color-text-disabled: var(--color-gray-400);
  --color-text-inverse: var(--color-gray-50);
  --color-text-brand: var(--color-blue-300);
  --color-text-error: var(--color-red-200);
  --color-text-success: var(--color-green-200);
  --color-icon-primary: var(--color-gray-900);
  --color-icon-secondary: var(--color-gray-700);
  --color-icon-disabled: var(--color-gray-400);
  --color-icon-inverse: var(--color-gray-50);
  --color-icon-brand: var(--color-blue-300);
  --color-icon-brand-secondary: var(--color-blue-500);
  --color-success-background: var(--color-green-100);
  --color-success-default: var(--color-green-200);
  --color-success-hover: var(--color-green-300);
  --color-gradient-start: var(--color-blue-300);
  --color-gradient-end: var(--color-purple-100);
  --color-gradient-hover-start: var(--color-blue-400);
  --color-gradient-hover-end: var(--color-purple-200);

  /* Primitive Number (= design-tokens/primitive-light.json Number) */
  --number-0: 0px;
  --number-2: 2px;
  --number-4: 4px;
  --number-6: 6px;
  --number-8: 8px;
  --number-10: 10px;
  --number-12: 12px;
  --number-16: 16px;
  --number-20: 20px;
  --number-24: 24px;
  --number-32: 32px;
  --number-40: 40px;
  --number-48: 48px;
  --number-64: 64px;
  --number-80: 80px;
  --number-9999: 9999px;

  /* ========== Spacing (Figma Spacing → Number 참조) ========== */
  --spacing-0: var(--number-0);
  --spacing-2: var(--number-2);
  --spacing-4: var(--number-4);
  --spacing-6: var(--number-6);
  --spacing-8: var(--number-8);
  --spacing-10: var(--number-10);
  --spacing-12: var(--number-12);
  --spacing-16: var(--number-16);
  --spacing-20: var(--number-20);
  --spacing-24: var(--number-24);
  --spacing-32: var(--number-32);
  --spacing-40: var(--number-40);
  --spacing-48: var(--number-48);
  --spacing-80: var(--number-80);

  /* ========== Semantic (Figma Semantic / Light) ========== */
  --button-primary-background: var(--color-brand-primary);
  --button-primary-background-hover: var(--color-brand-primary-hover);
  --button-primary-background-disabled: var(--color-brand-disabled);
  --button-primary-text: var(--color-base-white);
  --button-outline-background: var(--color-base-white);
  --button-primary-text-disabled: var(--color-text-disabled);
  --button-outline-border: var(--color-brand-primary);
  --button-outline-text-disabled: var(--color-text-disabled);
  --button-outline-border-hover: var(--color-brand-primary-hover);
  --button-outline-border-disabled: var(--color-brand-disabled);
  --button-outline-text: var(--color-brand-primary);
  --button-outline-text-hover: var(--color-brand-primary-hover);
  --button-cancel-background: var(--color-gray-200);
  --button-cancel-text: var(--color-text-tertiary);
  --button-cancel-border: var(--color-gray-200);
  --button-primary-text-hover: var(--color-base-white);
  --button-outline-background-hover: var(--color-brand-surface);
  --button-background: var(--color-base-white);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-tertiary: var(--color-text-tertiary);
  --text-disabled: var(--color-text-disabled);
  --text-inverse: var(--color-text-inverse);
  --text-brand: var(--color-text-brand);
  --text-error: var(--color-text-error);
  --text-success: var(--color-text-success);
  --icon-primary: var(--color-icon-primary);
  --icon-secondary: var(--color-icon-secondary);
  --icon-disabled: var(--color-icon-disabled);
  --icon-inverse: var(--color-icon-inverse);
  --icon-brand: var(--color-icon-brand);
  --icon-error: var(--color-error-default);
  --icon-success: var(--color-success-default);
  --icon-brand-1: var(--color-icon-brand-secondary);
  --icon-brand-2: var(--color-brand-disabled);
  --surface-canvas: var(--color-surface-canvas);
  --surface-panel: var(--color-surface-panel);
  --surface-card: var(--color-surface-card);
  --surface-modal: var(--color-surface-card);
  --surface-dropdown: var(--color-surface-card);
  --surface-selected: var(--color-brand-primary);
  --surface-disabled: var(--color-gray-100);
  --surface-inverse: var(--color-base-black);
  --border-default: var(--color-gray-200);
  --border-subtle: var(--color-gray-100);
  --border-strong: var(--color-gray-300);
  --border-brand: var(--color-brand-primary);
  --border-brand-hover: var(--color-brand-primary-hover);
  --border-disabled: var(--color-gray-200);
  --border-error: var(--color-error-default);
  --border-success: var(--color-success-default);
  --input-background: var(--color-base-white);
  --input-background-disabled: var(--color-surface-disabled);
  --input-border: var(--color-gray-300);
  --input-border-hover: var(--color-gray-400);
  --input-border-focus: var(--color-brand-primary);
  --input-text: var(--color-text-primary);
  --input-placeholder: var(--color-text-tertiary);
  --input-text-disabled: var(--color-text-disabled);
  --input-icon: var(--color-icon-secondary);
  --navigation-background: var(--color-surface-panel);
  --navigation-item-background: var(--color-surface-panel);
  --navigation-item-background-hover: var(--color-brand-surface);
  --navigation-item-background-selected: var(--color-brand-primary);
  --navigation-item-text: var(--color-text-primary);
  --navigation-item-text-selected: var(--color-base-white);
  --navigation-item-text-disabled: var(--color-text-disabled);
  --navigation-item-icon: var(--color-icon-secondary);
  --navigation-item-icon-selected: var(--color-base-white);
  --navigation-divider: var(--color-gray-200);
  --modal-background: var(--color-surface-card);
  --modal-overlay: var(--color-base-overlay-24);
  --modal-border: var(--color-gray-200);
  --modal-title: var(--color-text-primary);
  --modal-description: var(--color-text-secondary);
  --modal-close-icon: var(--color-icon-secondary);
  --dropdown-background: var(--color-surface-card);
  --dropdown-border: var(--color-gray-200);
  --dropdown-text-primary: var(--color-text-primary);
  --dropdown-text-secondary: var(--color-text-secondary);
  --dropdown-icon: var(--color-icon-secondary);
  --dropdown-avatar-background: var(--color-gray-300);
  --dropdown-divider: var(--color-gray-200);
  --error-background: var(--color-error-background);
  --error-text: var(--color-error-default);
  --error-border: var(--color-error-default);
  --error-icon: var(--color-error-default);
  --error-text-hover: var(--color-error-hover);
  --error-icon-hover: var(--color-error-hover);
  --error-border-hover: var(--color-error-hover);
  /* Semantic Warning → Primitive Warning */
  --warning-background: var(--color-warning-background);
  --warning-primary: var(--color-warning-primary);
  --warning-hover: var(--color-warning-hover);
  --success-background-light: var(--color-success-background);
  --success-text: var(--color-success-default);
  --success-text-hover: var(--color-success-hover);
  --success-icon: var(--color-success-default);
  --success-icon-hover: var(--color-success-hover);
  --success-border: var(--color-success-default);
  --success-border-hover: var(--color-success-hover);
  --gradient-primary-start: var(--color-gradient-start);
  --gradient-primary-end: var(--color-gradient-end);
  --gradient-primary-hover-start: var(--color-gradient-hover-start);
  --gradient-primary-hover-end: var(--color-gradient-hover-end);
  --tooltip-primary-background: var(--color-gray-700);
  --tooltip-primary-text: var(--color-base-white);

  /* ========== Legacy Spacing / Layout (Figma Spacing 토큰 아님) ========== */
  --spacing-64: var(--number-64);
  /* Number.96 없음 — 디자인 토큰 포함 여부 결정 전까지 Legacy 유지 */
  --spacing-96: 96px;

  --color-error-light: #FB7563;
  --color-info-main: #327FEF;
  --color-info-main-05: rgba(50, 127, 239, 0.05);
  --color-info-main-10: rgba(50, 127, 239, 0.1);
  --color-action-disabled: var(--color-gray-500);
  --color-action-disabled-text: var(--color-gray-400);
  --color-background-default: var(--color-surface-canvas);
  --color-background-paper: var(--color-surface-panel);
  --color-divider: var(--border-default);
  --color-white: var(--color-base-white);
  --color-black: var(--color-base-black);
  --color-overlay: var(--color-base-overlay-24);
  --color-overlay-soft: var(--color-base-overlay-16);

  /* ========== Typography (EN / KR — font-family는 Urbanist 공통) ========== */
  --font-family-typography: "Urbanist", sans-serif;

  /* ========== Typography - EN ========== */

  --font-en-display-2xl-size: 4.5rem;
  --font-en-display-2xl-weight: 700;
  --font-en-display-2xl-line-height: 5.625rem;

  --font-en-display-xl-size: 4rem;
  --font-en-display-xl-weight: 600;
  --font-en-display-xl-line-height: 5rem;

  --font-en-display-l-size: 3.5rem;
  --font-en-display-l-weight: 600;
  --font-en-display-l-line-height: 4.5rem;

  --font-en-display-m-size: 3rem;
  --font-en-display-m-weight: 500;
  --font-en-display-m-line-height: 4rem;

  --font-en-display-s-size: 2.5rem;
  --font-en-display-s-weight: 500;
  --font-en-display-s-line-height: 3.25rem;

  --font-en-display-xs-size: 2rem;
  --font-en-display-xs-weight: 500;
  --font-en-display-xs-line-height: 2.75rem;

  --font-en-heading-l-size: 1.75rem;
  --font-en-heading-l-weight: 700;
  --font-en-heading-l-line-height: 2.5rem;

  --font-en-heading-m-size: 1.5rem;
  --font-en-heading-m-weight: 600;
  --font-en-heading-m-line-height: 2.25rem;

  --font-en-heading-s-size: 1.25rem;
  --font-en-heading-s-weight: 500;
  --font-en-heading-s-line-height: 1.875rem;

  --font-en-label-l-size: 1rem;
  --font-en-label-l-weight: 600;
  --font-en-label-l-line-height: 1.5rem;

  --font-en-label-m-size: 0.875rem;
  --font-en-label-m-weight: 500;
  --font-en-label-m-line-height: 1.25rem;

  --font-en-label-s-size: 0.75rem;
  --font-en-label-s-weight: 500;
  --font-en-label-s-line-height: 1.125rem;

  /* ========== Typography - KR ========== */
  --font-kr-display-2xl-size: 4.5rem;
  --font-kr-display-2xl-weight: 700;
  --font-kr-display-2xl-line-height: 6.75rem;

  --font-kr-display-xl-size: 4rem;
  --font-kr-display-xl-weight: 600;
  --font-kr-display-xl-line-height: 6rem;

  --font-kr-display-l-size: 3.5rem;
  --font-kr-display-l-weight: 600;
  --font-kr-display-l-line-height: 5.5rem;

  --font-kr-display-m-size: 3rem;
  --font-kr-display-m-weight: 500;
  --font-kr-display-m-line-height: 4.5rem;

  --font-kr-display-s-size: 2.5rem;
  --font-kr-display-s-weight: 500;
  --font-kr-display-s-line-height: 3.75rem;

  --font-kr-display-xs-size: 2rem;
  --font-kr-display-xs-weight: 500;
  --font-kr-display-xs-line-height: 3rem;

  --font-kr-heading-l-size: 1.75rem;
  --font-kr-heading-l-weight: 700;
  --font-kr-heading-l-line-height: 2.75rem;

  --font-kr-heading-m-size: 1.5rem;
  --font-kr-heading-m-weight: 600;
  --font-kr-heading-m-line-height: 2.25rem;

  --font-kr-heading-s-size: 1.25rem;
  --font-kr-heading-s-weight: 500;
  --font-kr-heading-s-line-height: 2rem;

  --font-kr-label-l-size: 1.25rem;
  --font-kr-label-l-weight: 600;
  --font-kr-label-l-line-height: 1.75rem;

  --font-kr-label-m-size: 1rem;
  --font-kr-label-m-weight: 600;
  --font-kr-label-m-line-height: 1.75rem;

  --font-kr-label-s-size: 0.75rem;
  --font-kr-label-s-weight: 500;
  --font-kr-label-s-line-height: 1.25rem;

  /* ========== Legacy Typography ========== */
  --font-family-sans: Urbanist, sans-serif;
  --font-size-xxs: 0.75rem;
  --font-size-xs: 0.813rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.25rem;
  --font-size-4xl: 2.5rem;
  --line-height-normal: 1.5;
  --line-height-heading: 1.25;
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* ========== Border Radius (Figma → Number 참조) ========== */
  --border-radius-none: var(--number-0);
  --border-radius-xs: var(--number-2);
  --border-radius-s: var(--number-4);
  --border-radius-m: var(--number-8);
  --border-radius-l: var(--number-12);
  --border-radius-xl: var(--number-16);
  --border-radius-2xl: var(--number-20);
  --border-radius-full: var(--number-9999);

  /* Legacy radius — 기존 클래스/인라인 사용처 유지 */
  --radius-sm: var(--number-4); /* = Figma s */
  --radius-md: var(--number-8); /* = Figma m */
  --radius-lg: var(--number-16); /* = Figma xl */
  --radius-pill: 999px; /* Figma full(9999px)과 다름 — Legacy 유지 */

  /* 그림자 — Figma 미전달 */
  --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --shadow-md: 0px 4px 20px 0px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0px 0px 0px 1px rgba(152, 161, 178, 0.10), 0px 15px 35px -5px rgba(17, 24, 38, 0.15), 0px 5px 15px 0px rgba(0, 0, 0, 0.08);

  /* ========== Breakpoint (Figma dimension — @media에는 정적 screens 사용) ========== */
  --breakpoint-xs: 24px; /* screens 미등록 — 값/용도 검토 대기 */
  --breakpoint-s: 390px;
  --breakpoint-m: 768px;
  --breakpoint-l: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1440px;

  /* Legacy breakpoint */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;

  /* ========== Icon Size (Figma → Number 참조) ========== */
  --icon-size-xs: var(--number-12);
  --icon-size-s: var(--number-16);
  --icon-size-m: var(--number-24);
  --icon-size-l: var(--number-32);
  --icon-size-xl: var(--number-40);

  --default-font-family: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC",
    "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei",
    "Source Han Sans CN", sans-serif;
  --radio-accent: #152458;
  --radio-hover-ring: #4B7DBC22;
  --radio-focus-ring: #4B7DBC33;
  --radio-disabled: #C7CAD1;
  --radio-error: var(--color-error-default);
  --radio-checked-text: var(--color-text-primary);
  --radio-unchecked-text: var(--color-text-primary);
  --default-active-color: #BED0E7;
}

:root {
  --brand-navy: #0e1e4b;
  --brand-navy-press: #0b1638;
  --muted: #8a92a6;
  --danger: #f83015;
  --border: #e8e8e8;
}

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
  margin: 0;
}

button, input, select, textarea {
  outline: 0;
}

body, button, html {
  margin: 0;
  padding: 0;
}

button {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

* {
  box-sizing: border-box;
  line-height: normal;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: Urbanist;
}

body {
  display: block;
}

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

.disNone {
  display: none !important;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}

.scrollbar-none {
  -ms-overflow-style: none;  
  scrollbar-width: none;    
}

.e-con-inner {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.main-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  padding: 0;
}

.text-md {
  font-size: var(--font-size-md) !important;
}

.mt-8 {
  margin-top: 8px;
}

.mt-16 {
  margin-top: 16px;
}

.mt-1-5 {
  margin-top: 0.375rem;
}

.gap-4 {
  gap: 4px;
}

.flex {
  display: flex !important;
}

.flex-col {
  flex-direction: column !important;
}

.items-center {
  align-items: center !important;
}

.justify-center {
  justify-content: center !important;
}

.ta-center {
  text-align: center !important;
}

/* === 전체 레이아웃 === */
.loginContainer {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

/* === 좌측 이미지 (6:4) === */
.officePoster {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.loginCommonImgSlider {
  width: 100%;
  height: 100%;
}
.loginCommonImgSlider video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.loginCommonImgSlider .slick-list.draggable,
.loginCommonImgSlider .slick-track {
  height: 100%;
}

.posterImage {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.loginCommonImgItem1 {
  background-image: url('/wp-content/uploads/2026/01/loginPage1.png');
}
.loginCommonImgItem2 {
  background-image: url('/wp-content/uploads/2026/01/loginPage2.png');
}


.posterText {
  width: 100%;
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  color: #fff;
  font-family: Urbanist;
}
.posterText .PosterText-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 140%;
}
.posterText .PosterText-sub {
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  line-height: 130%;
}

/* === 우측 폼 === */
.loginRightArea {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  padding: 20px;
  position: relative;
  z-index: 1;
  max-width: 640px;
  width: 45%;
  height: 100vh;
  min-height: 660px;
}

.loginRightContents {
  width: 100%;
  max-width: 463px;
}

.headerLogo {
  position: absolute;
  top: 64px;
  left: 64px;
  width: 128px;
  height: auto;
  cursor: pointer;
}

.headerLogo-mo {
  display: none;
}

.commonIconBtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  padding: 0px;
  border-radius: 8px;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.08s;
  user-select: none;
  background: none;
  color: rgb(13, 27, 76);
  border: none;
}

.commonBtn {
  position: relative;
  align-items: center;
  justify-content: flex-start;
  height: 52px;
  padding: 0px 16px;
  min-width: 100px;
  width: 100%;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 8px;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
  white-space: normal;
  word-break: break-word;
  user-select: none;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
}
.commonBtn.IconWith {
  display: inline-flex;
}

.commonPrimaryBtn {
  background: #0070ff;
  color: #fff;
  border: none;
}
.commonPrimaryBtn:hover {
  background: #0068ec;
}
.commonPrimaryBtn:disabled {
  background: var(--button-cancel-background);
  color: var(--button-cancel-text);
  cursor: no-drop;
}

.commonMDbtn {
  height: 44px;
}

.commonOutlineBtn {
  background: #fff;
  color: #0070ff;
  border: 1px solid #0070ff;
  font-size: 1rem;
}
.commonOutlineBtn:hover {
  background: #f2f8ff;
}

.commonGrayBtn {
  background: rgb(233, 233, 233);
  color: rgb(78, 78, 78);
  border: none;
}
.commonGrayBtn:hover {
  background: rgb(209, 209, 209);
}

.commonBtnLeftIcon {
  margin-right: 8px;
  margin-top: 3px;
}

.inputWrap,
.inputWrapper {
  position: relative;
  width: 100%;
}
.inputLabelFrame {
  position: relative;
  width: 100%;
  display: flex;
  align-items: start;
  z-index: 10;
}
.inputLabel {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #4E4E4E !important;
  position: absolute !important;
  top: 7px !important;
  left: 12px !important;
}
.inputLabelRequired {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--button-primary-background);
  border-radius: 50%;
  margin-bottom: 7px;
  margin-left: -2px;
}
.labelInput {
  width: 100% !important;
  height: 56px !important;
  padding: 25px 12px 7px !important;
  border: 1px solid #d4d5d9 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
  color: #111 !important;
  line-height: unset !important;
  background-color: unset !important;
  margin: 0 !important;
}
.labelInputWithButton {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 25px 80px 7px 12px;
}
.labelInputButtonInside {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
  border: 1px solid var(--button-primary-background);
  background: #FFF;
  color: var(--button-primary-background);
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  z-index: 10;
  white-space: nowrap;
}
.btnPeNone {
  background-color: #f5f5f5 !important;
  color: #999999 !important;
  border-color: #ddd !important;
  cursor: not-allowed !important;
}
.btnPeNone {
  pointer-events: none;
}

input.labelInput:read-only,
.labelInput:disabled {
  background-color: var(--color-gray-100) !important;
  color: var(--color-gray-600) !important;
  border-color: var(--color-gray-200) !important;
}

.labelCustomSelect {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("/wp-content/themes/dt-the7-child/inc/img/iconline-down.svg");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
  border: 1px solid var(--Neutral-100, #E9E9E9);
  border-radius: 8px;
  height: 56px;
}

.customSelect option:first-child {
  display: none;
}

.customSelect:disabled {
  background-color: #f5f5f5;
  color: #999999;
  border-color: #ddd;
  cursor: not-allowed;
}

.labelInputSuccessMsg {
  font-size: 13px;
  font-weight: 500;
  color: #59c173;
  height: 15px;
  line-height: 15px;
  margin-top: 4px;
}
.labelInputError {
  border-color: #FB7563 !important;
  background-color: #fff;
}

.labelInputErrorMsg {
  color: #FA533C;
  font-size: 13px;
  line-height: 15px;
  font-weight: 500;
  text-align: center;
}

.commonModalH1 {
  text-align: center;
  font-size: 1.25rem;
  color: #1d1e1e;
  font-weight: 700;
}
.commonModalH2 {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #4e4e4e;
  white-space: pre-line;
}
.commonModalH2Pad {
  padding: 12px 0px 16px;
}
.commonModalBtnWrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 8px;
}

.c-modal__dialog {
  width: 100%;
  max-width: 480px;
}

.appContentsWrap {
  width: 100%;
  padding: 1.5rem;
  border: 1px solid #e9e9e9;
  border-radius: 16px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pcFormBtnWrap {
  display: block;
}

.moFormBtnWrap {
  display: none;
  margin-bottom: 90px;
}

.inputDuoWrapper {
  display: flex;
  align-items: flex-start;
  padding: 0;
  gap: 1rem;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
  width: 100%;
}

.signUpTooltipWrap {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.signUpTooltip {
  font-size: 14px;
  font-weight: 500;
  color: #686868;
}
.signUpTooltipBlue {
  color: #0070FF;
  cursor: pointer;
}
.signUpTooltipBlue:hover {
  color: #0070FF;
  text-decoration: underline;
}

.commCheckboxLabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #686868;
  cursor: pointer;
  user-select: none;
  margin: 0;
}

.commCheckboxInput {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.commCheckboxIcon {
  display: block;
  width: 20px;
  height: 20px;
  background-image: url('/wp-content/themes/dt-the7-child/inc/img/CheckBoxIcon.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  flex-shrink: 0;
}

.commCheckboxInput:checked + .commCheckboxIcon {
  background-image: url('/wp-content/themes/dt-the7-child/inc/img/CheckedBoxIcon.svg');
}

.commCheckboxInput:focus-visible + .commCheckboxIcon {
  outline: none;
  box-shadow: 0 0 0 4px #0e1e4b22;
  border-radius: 2px;
}

.commCheckboxText .commHighlight {
  color: var(--button-primary-background);
}

@media (max-width:1024px) {
  .officePoster {
    display: none;
  }
  .loginRightArea {
    width: 100%;
    max-width: 100%;
  } 
}

@media (max-width:767px) {
  .headerLogo {
    display: none;
  }

  .headerLogo-mo {
    display: block;
    width: 180px;
    height: auto;
  }

  .signUpTooltipWrap {
    align-items: center;
  }
  .signUpTooltip {
    text-align: center;
  }
}

@media (max-width:530px) {
  .headerLogo-mo {
    width: 129px;
  }
  .labelInput {
    padding: 23px 12px 6px;
  }
  .commonModalH1 {
    font-size: 1.125rem;
  }
  .commonModalH2 {
    font-size: 13px;
  }
  .appContentsWrap {
    border: 0;
    padding: 0;
  }
  .pcFormBtnWrap {
    display: none;
  }
  .moFormBtnWrap {
    display: block;
  }
  .signUpTooltip {
    font-size: 12px;
  }
  .commCheckboxLabel {
    font-size: 12px;
  }
  .c-modal__dialog {
    width: 90%;
  }
}