@charset "utf-8";
/* ============================================
   COMMON
   - 웹폰트
   - 문서 기본 타이포/컬러
   - 공통 폼 UI 시스템
   - util.css 와 겹치는 유틸 클래스는 만들지 않음
============================================ */

/* 웹폰트 */
/*@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: local('Pretendard Variable'), url('../font/PretendardVariable.woff2') format('woff2-variations');
}*/

@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Thin.woff') format('woff');
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Light.woff') format('woff');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Medium.woff') format('woff');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-SemiBold.woff') format('woff');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Black.woff') format('woff');
  font-weight: 900;
  font-display: swap;
}
:root {
  --font_sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;

  --_noise-texture: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'><defs><filter id='n' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='3' stitchTiles='stitch' result='t'/><feColorMatrix type='saturate' values='0' in='t' result='g'/><feComponentTransfer in='g' result='a'><feFuncA type='linear' slope='0.5'/></feComponentTransfer></filter></defs><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --_noise-size: 2.2%;

  --selection_bg: rgba(var(--point_rgb), 0.16);
  --selection_text: var(--gray_1);

  --form_height: var(--h58);
  --form_height_sm: var(--h48);
  --form_padding_x: var(--p20);
  --form_padding_y: var(--p14);
  --form_radius: var(--br_15);
  --form_radius_sm: var(--br_10);

  --form_shadow_focus: 0 0 0 var(--w4) rgba(var(--point_rgb), 0.14);
  --form_shadow_error: 0 0 0 var(--w4) rgba(var(--point4_rgb), 0.12);
  --form_transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

html,
body {
  font-size: 16px;
}

body {
  color: var(--gray_2);
  background-color: var(--gray_f);
  font-family: var(--font_sans);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.025em;
  overflow-wrap: break-word;
}

body,
input,
button,
select,
textarea {
  font-family: var(--font_sans);
}

::selection {
  background: var(--selection_bg);
  color: var(--selection_text);
}

p {
  line-height: 1.6;
}

img,
svg {
  vertical-align: top;
}

a,
button {
  color: inherit;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

button {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
}

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

/* =========================
   FORM BASE
========================= */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--gray_2);
  -webkit-box-shadow: 0 0 0 var(--w1000) var(--gray_f) inset;
  transition: background-color 9999s ease-out 0s;
}

::placeholder {
  color: var(--gray_8);
  opacity: 1;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="image"]):not([type="submit"]):not([type="reset"]):not([type="button"]),
select,
textarea {
  width: 100%;
  min-width: 0;
  border: var(--w1) solid var(--gray_e1);
  background-color: var(--gray_f);
  color: var(--gray_2);
  border-radius: var(--form_radius_sm);
  transition: var(--form_transition);
  box-shadow: none;
  outline: none;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="image"]):not([type="submit"]):not([type="reset"]):not([type="button"]),
select {
  height: var(--form_height);
  padding: 0 var(--form_padding_x);
}

textarea {
  min-height: var(--mnh140);
  padding: var(--form_padding_y) var(--form_padding_x);
  line-height: 1.6;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="image"]):not([type="submit"]):not([type="reset"]):not([type="button"]):hover,
select:hover,
textarea:hover {
  border-color: var(--gray_c);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="image"]):not([type="submit"]):not([type="reset"]):not([type="button"]):focus,
select:focus,
textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="image"]):not([type="submit"]):not([type="reset"]):not([type="button"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--point);
  box-shadow: var(--form_shadow_focus);
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
.is_invalid {
  border-color: var(--point4) !important;
  box-shadow: var(--form_shadow_error) !important;
}

input[disabled],
select[disabled],
textarea[disabled] {
  border-color: var(--gray_e5);
  background-color: var(--gray_f4);
  color: var(--gray_8);
  opacity: 1;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: calc(var(--form_padding_x) + var(--w24));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23777' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--w16) center;
  background-size: var(--w18);
}

select::-ms-expand {
  display: none;
}

/* =========================
   CHECKBOX / RADIO
========================= */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  background: var(--gray_f);
  border: var(--w1) solid var(--gray_c);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: var(--form_transition);
  position: relative;
}

input[type="checkbox"] {
  width: var(--w22);
  height: var(--h22);
  border-radius: var(--br_5);
}

input[type="checkbox"]::after {
  content: "";
  width: var(--w6);
  height: var(--h13);
  border-right: var(--w2) solid var(--gray_f);
  border-bottom: var(--w2) solid var(--gray_f);
  transform: rotate(45deg) scale(0.7);
  opacity: 0;
  transition: transform 0.16s ease, opacity 0.16s ease;
  position: relative;
  top: calc(var(--h2) * -1);
}

input[type="checkbox"]:checked {
  background: var(--point);
  border-color: var(--point);
}

input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

input[type="radio"] {
  width: var(--w22);
  height: var(--h22);
  border-radius: 50%;
}

input[type="radio"]::after {
  content: "";
  width: var(--w10);
  height: var(--h10);
  border-radius: 50%;
  background: var(--point);
  transform: scale(0.35);
  opacity: 0;
  transition: transform 0.16s ease, opacity 0.16s ease;
}

input[type="radio"]:checked {
  border-color: var(--point);
}

input[type="radio"]:checked::after {
  opacity: 1;
  transform: scale(1);
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
  border-color: var(--point);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  box-shadow: var(--form_shadow_focus);
}

/* =========================
   FORM LAYOUT HELPERS
========================= */
.ui_form {
  display: grid;
  gap: var(--gap24);
}

.ui_field {
  display: grid;
  gap: var(--gap10);
}

.ui_field_inline {
  display: flex;
  align-items: center;
  gap: var(--gap12);
  flex-wrap: wrap;
}

.ui_field_group {
  display: grid;
  gap: var(--gap18);
}

.ui_field_row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap16);
}

.ui_label {
  display: inline-flex;
  align-items: center;
  gap: var(--gap6);
  color: var(--gray_2);
  font-size: var(--fs_16);
  font-weight: 600;
  line-height: 1.4;
}

.ui_req {
  /* color: var(--point5); */
  display: flex;
  align-items: center;
  gap: var(--gap2);
  font-size: var(--fs_13);
}

.ui_help {
  color: var(--gray_6);
  font-size: var(--fs_14);
  line-height: 1.5;
}

.ui_error {
  color: var(--point4);
  font-size: var(--fs_14);
  line-height: 1.5;
}

.ui_counter {
  color: var(--gray_8);
  font-size: var(--fs_13);
  text-align: right;
}

.ui_note_box {
  padding: var(--p18);
  border: var(--w1) solid rgba(var(--point_rgb), 0.15);
  border-radius: var(--form_radius);
  background: rgba(var(--point_rgb), 0.05);
}

/* =========================
   LABEL + CHECK / RADIO WRAPPERS
========================= */
.ui_check,
.ui_radio,
.ui_switch {
  display: inline-flex;
  align-items: center;
  gap: var(--gap10);
  cursor: pointer;
  user-select: none;
}

.ui_check_txt,
.ui_radio_txt,
.ui_switch_txt {
  color: var(--gray_2);
  line-height: 1.45;
	font-size: var(--fs_16);
}

.ui_check input[disabled] + .ui_check_txt,
.ui_radio input[disabled] + .ui_radio_txt,
.ui_switch input[disabled] + .ui_switch_txt {
  color: var(--gray_8);
}

/* =========================
   TOGGLE CHOICE GROUP
========================= */
.ui_toggle_group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap10);
}

.ui_toggle {
  position: relative;
  display: inline-flex;
}

.ui_toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.ui_toggle span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--form_height_sm);
  padding: 0 var(--p18);
  border: var(--w1) solid var(--gray_e1);
  border-radius: var(--br_pill);
  background: var(--gray_f);
  color: var(--gray_6);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: var(--form_transition);
}

.ui_toggle:hover span {
  border-color: var(--gray_c);
}

.ui_toggle input:checked + span {
  border-color: var(--point);
  background: rgba(var(--point_rgb), 0.10);
  color: var(--point_dark);
  box-shadow: 0 var(--h8) var(--w18) rgba(var(--point_rgb), 0.10);
}

.ui_toggle input:focus-visible + span {
  box-shadow: var(--form_shadow_focus);
}

/* =========================
   SWITCH
========================= */
.ui_switch input {
  width: var(--w54);
  height: var(--h32);
  border: 0;
  border-radius: var(--br_pill);
  background: var(--gray_d);
  box-shadow: inset 0 0 0 var(--w1) rgba(var(--gray_0_rgb), 0.04);
}

.ui_switch input::after {
  content: "";
  position: absolute;
  top: var(--h3);
  left: var(--w3);
  width: var(--w26);
  height: var(--h26);
  border-radius: 50%;
  background: var(--gray_f);
  box-shadow: 0 var(--h4) var(--w10) rgba(var(--gray_0_rgb), 0.16);
}

.ui_switch input:checked {
  background: var(--point);
}

.ui_switch input:checked::after {
  transform: translateX(var(--w22));
}
/* =========================
   SMALL / LARGE VARIANTS
========================= */
.ui_sm input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="image"]):not([type="submit"]):not([type="reset"]):not([type="button"]),
.ui_sm select {
  height: var(--form_height_sm);
}

.ui_lg input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="image"]):not([type="submit"]):not([type="reset"]):not([type="button"]),
.ui_lg select {
  height: var(--h64);
}

.ui_lg textarea {
  min-height: var(--mnh180);
}

.marker {
  background-image: linear-gradient(0deg, rgba(var(--point_rgb), .10) 0.5em, transparent 0.5em);
}
.marker_red {box-shadow: inset 0px -.3em 0 #b20a0a; padding: .1rem 0.3rem;}
/*폰트두께*/
.thin { font-weight: 100}
.light { font-weight: 200}
.extralight { font-weight: 300}
.regular { font-weight: 400}
.medium { font-weight: 500}
.semibold { font-weight: 600}
.bold { font-weight: 700}
.extrabold { font-weight: 800}
.black { font-weight: 900}
/* PC, 모바일 표시 */
.p_ver { display: inline-block!important; }
.m_ver { display: none!important; }

@media (max-width: 991px) {
  .ui_field_row {
    grid-template-columns: 1fr;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="image"]):not([type="submit"]):not([type="reset"]):not([type="button"]),
  select {
    height: var(--h45);
  }

  textarea {
    min-height: var(--mnh120);
  }

  .p_ver {
    display: none !important;
  }

  .m_ver {
    display: inline-block !important;
  }
}