/* reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  font-family: 'Pretendard';
  color: #1a1a1a;
  width: 100%;
  font-size: 16px;
}
body {
  font-size: 16px;
  letter-spacing: -0.03em;
  overflow-x: hidden;
  /* max-width:100vw; */
}

@media (prefers-reduced-motion: reduce) {
  #wrap, body { transition: none; }
}
@media print {
  @page {
    margin: 0; /* 기본 인쇄 여백 제거 */
  }
  body {
    margin: 0;
    padding: 0;    
  }
  body * {
    visibility: hidden;    
    padding:0;
    margin:0;
  }
  #print, #print * {
    visibility: visible;      
  }
  #print {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;   
   
  }
  .sub-wrapper {
    background: #fff;    
  }
}
ul,
ol,
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
  font-size: inherit;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: inherit;
  cursor: pointer;
}
img {
  display: block;
  width: 100%;
  height: auto;
}
body::-webkit-scrollbar {
  width: 0px;
}
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
  border-radius: var(--radius-xs);
}

::-webkit-scrollbar-thumb:hover {
  background-color: #bfbfbf;
}

:root {
  --main-bg-gradient: linear-gradient(
    90deg,
    var(--gray-50) 0%,
    #e1d8cd 63.5%,
    var(--gray-100) 100%
  );
  --header-high: 80px;
  --header-high-mobile: 64px;
  --header-high-expanded: 108px;
  --header-bg: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%),
    rgba(255, 255, 255, 0.5);
  --header-blur: blur(40px);
  --input-high: 72px;
  --input-high-mobile: 64px;
  --form-input-high: 48px;

  /* Color */
  --primary-color: var(--violet-500); /* 주요 컬러 */
  --secondary-color: var(--earth-500); /* 보조 컬러 */

  /* Trust Violet */
  --violet-900: #252536;
  --violet-800: #313046;
  --violet-700: #3f3e5b;
  --violet-600: #515074;
  --violet-500: #595880;
  --violet-400: #7a7999;
  --violet-300: #908faa;
  --violet-200: #b3b2c5;
  --violet-100: #cccbd8;
  --violet-50: #eeeef2;

  /* Warm Earth */
  --earth-900: #453218;
  --earth-800: #5b411f;
  --earth-700: #755428;
  --earth-600: #966b33;
  --earth-500: #a57638;
  --earth-400: #b79160;
  --earth-300: #c3a37a;
  --earth-200: #d6c0a3;
  --earth-100: #e3d5c1;
  --earth-50: #f6f1eb;

  /* Grayscale */
  --gray-900: #1b1d1f;
  --gray-800: #26282b;
  --gray-600: #454c53;
  --gray-500: #72787f;
  --gray-400: #9ea4aa;
  --gray-200: #c9cdd2;
  --gray-100: #e8ebed;
  --gray-50: #f7f8f9;

  /* Political Party */
  --pp-red: #b34b28;
  --pp-blue: #4f67b1;
  --pp-yellow: #e69b27;

  /* Neutral */
  --black: #000000;
  --white: #ffffff;
  --mint: #20d0ac;
  --tangerine: #fb8d3e;
  --fern: #258346;
  --lake: #244f58;
  --civic-gold: #bf9f17;
  --peach: #ffd8b9;
  --olive: #9aaf4e;
  --orange: #f86c41;

  /* Statistics */
  --stat-pp-red: #f96a6a;
  --stat-pp-blue: #72a2fc;
  --stat-pp-yellow: #ffd755;
  --stat-man: #50beef;
  --stat-women: #fb8d3e;
  --stat-elected: #1bff72;
  --stat-elected-bg: #161d30;
  --stat-age: #f135a6;
  --stat-age-bg: #3f4966;
  --stat-point: #7bff4b;
  --stat-title-bg: #d7dce9;
  --stat-card-bg: #252c40;
  --stat-percent-bg: #091420;
  --stat-content-bg: #151a26;

  /* Semantic */
  --success: #3e7bfd;
  --warning: #ff8539;
  --error: #f6503b;

  /* Committee Types */
  --committee-main: #61acf6;
  --committee-operate: #5d3fd3;
  --committee-plan: #f28c28;
  --committee-culture: #008080;
  --committee-economy: #ff2bca;
  --committee-budget: #c77654;

  /* sns */
  --naver_color: #00c300;
  --youtube_color: #ed2123;
  --instargram_color: #5b43e1;
  --kakao_color: #fae100;

  /* Opinion */
  --opinion-reviewing: #f96a6a;
  --opinion-completed: #41b75b;

  /* Activity */
  --absent: #f65c5c;
  --attend: #3fbf70;
  --sick: #ffa526;

  /* Text size (1rem e¸°i¤€) */
  --H1: 96px; /* 6rem */
  --H2: 64px; /* 4rem */
  --H3: 48px; /* 3rem */
  --H4: 32px; /* 2rem */
  --H5: 24px; /* 1.5rem */
  --H6: 20px; /* 1.25rem */
  --Subtitle-1: 18px; /* 1.125rem */
  --Subtitle-2: 16px; /* 1rem */
  --body-1: 16px; /* 1rem */
  --body-2: 14px; /* .875rem */
  --Caption: 12px; /* .75rem */
  --Button: 16px; /* 1rem */

  --font-size-xxxl: 24px; /* 1.5rem */
  --font-size-xxl: 22px; /* 1.375rem */
  --font-size-xl: 20px; /* 1.25rem */
  --font-size-l: 18px; /* 1.125rem */
  --font-size-m: 16px; /* 1rem */
  --font-size-s: 14px; /* .875rem */
  --font-size-xs: 12px; /* .75rem */
  --font-size-xxs: 11px; /* .6875rem */
  --font-size-xxxs: 10px; /* .625rem */

  /* Text weight */
  --T-black: 900;
  --bold: 700;
  --semi-bold: 600;
  --medium: 500;
  --regular: 400;
  --light: 300;

  /* Font families */
  --font-primary: 'Pretendard';
  --font-secondary: 'TTHakgyoansimRikodeoR';

  /* Line Heights */
  --line-height-tight: 120%; /* H1~H6, subtitle, button */
  --line-height-relaxed: 140%; /* 기본 문장 */
  --line-height-loose: 160%; /* 3줄 이상 문단 */

  /* Radius */
  --radius-2xl: 64px;
  --radius-xl: 48px;
  --radius-l: 40px;
  --radius-m: 24px;
  --radius-ms: 20px;
  --radius-s: 16px;
  --radius-xs: 8px;
  --radius-2xs: 4px;

  /* Spacing */
  --spacing-6xl: 140px;
  --spacing-5xl: 120px;
  --spacing-4xl: 96px;
  --spacing-3xl: 80px;
  --spacing-2xl: 64px;
  --spacing-xl: 56px;
  --spacing-l: 48px;
  --spacing-lm: 40px;
  --spacing-ml: 32px;
  --spacing-m: 24px;
  --spacing-ms: 20px;
  --spacing-s: 16px;
  --spacing-xs: 8px;
  --spacing-2xs: 4px;

  --basic-transition: 0.3s ease-out;
  --spring-transition: 0.5s cubic-bezier(0.25, 1.5, 0.5, 1);
  --spring-transition-soft: 0.2s cubic-bezier(0.74, 0.01, 0.26, 0.99);
  --refresh: refresh 0.6s forwards cubic-bezier(0.25, 0.99, 0.24, 1);
  --refresh-r: refresh-r 0.6s forwards cubic-bezier(0.25, 0.99, 0.24, 1);
  --refresh-l: refresh-l 0.6s forwards cubic-bezier(0.25, 0.99, 0.24, 1);
  --refresh-scale: refresh-scale 0.6s forwards cubic-bezier(0.25, 0.99, 0.24, 1);

  --box-shadow-100: inset 0 0 0 1px var(--white);

  --basic-pattern: repeating-linear-gradient(
    to right,
    rgba(244, 242, 240, 0.1) 0px,
    rgba(244, 242, 240, 0.1) 1px,
    transparent 1px,
    transparent 8px
  );
}

@keyframes refresh {
  0% {transform: translateY(-8px); opacity: 0;}
  100% {transform: translateY(0px); opacity: 1;}
}

@keyframes refresh-r {
  0% {transform: translateX(8px); opacity: 0;}
  100% {transform: translateX(0px); opacity: 1;}
}
@keyframes refresh-l {
  0% {transform: translateX(-16px); opacity: 0;}
  100% {transform: translateX(0px); opacity: 1;}
}

@keyframes refresh-bt {
  0% {transform: translateY(8px); opacity: 0;}
  100% {transform: translateY(0px); opacity: 1;}
}
@keyframes refresh-scale {
  0% {transform: translateY(8px) scale(1.1); opacity: 0;}
  100% {transform: translateY(0px) scale(1); opacity: 1;}
}


@keyframes text-spacing {
  0% {letter-spacing: 0.1em; opacity: 0;}
  100% {letter-spacing: 0px; opacity: 1;}
}
@keyframes text-spacing-sub-tit {
  0% {letter-spacing: 0.7em; opacity: 0; filter: blur(5px);}
  100% {letter-spacing: 0.5em; opacity: 1; filter: blur(0px);}
}
@keyframes filter-show {
  0% {max-height: 0px; opacity: 0;}
  100% {max-height: 2000px; opacity: 1;}
}
@keyframes bg-img-scale {
  0% {background-size: 110%; }
  100% {background-size: 100%;}
}

.refresh-animation {
  opacity: 0;
  animation: var(--refresh);
}
.refresh .refresh-item {
  opacity: 0;
  animation: var(--refresh);
}
.refresh .refresh-item-r {
  opacity: 0;
  animation: var(--refresh-r);
}
.refresh .refresh-item-l {
  opacity: 0;
  animation: var(--refresh-l);
}
.refresh .refresh-item-scale {
  opacity: 0;
  animation: var(--refresh-scale);
}


@keyframes login-show {
  0% {transform: translate(-50%, -50%) scale(0.7); opacity: 0;}
  70% {transform: translate(-50%, -50%) scale(1.05);}
  100% {transform: translate(-50%, -50%) scale(1); opacity: 1;}
}
@keyframes login-hide {
  0% {transform: translate(-50%, -50%) scale(1); opacity: 1;}
  30% {transform: translate(-50%, -50%) scale(1.05); opacity: 1;}
  100% {transform: translate(-50%, -50%) scale(0.7); opacity: 0;}
}
@keyframes profile-show {
  0% {top:55%; filter: blur(5px); opacity: 0;}
  100% {top:50%; filter: blur(0px); opacity: 1;}
}
@keyframes profile-hide {
  0% {top:50%; filter: blur(0px); opacity: 1;}
  100% {top:55%; filter: blur(5px); opacity: 0;}
}

@media (max-width:440px) {
  @keyframes text-spacing {
    0% {letter-spacing: 0.05em; opacity: 0;}
    100% {letter-spacing: 0px; opacity: 1;}
  }
  @keyframes bg-img-scale {
    0% {background-size: 110%;}
    100% {background-size: 100%;}
  }
  @keyframes text-spacing-sub-tit {
    0% {letter-spacing: 0.5em; opacity: 0; filter: blur(5px);}
    100% {letter-spacing: 0.3em; opacity: 1; filter: blur(0px);}
  }
}

/* scroll_dim */
.scroll_position {}
.scroll_dim {
    position: relative;
}
.scroll_dim:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 64px;
    backdrop-filter: blur(20px);
    background: linear-gradient(to top, rgb(255 255 255 / 45%) 50%, transparent 100%);
    mask-image: linear-gradient(to top, rgb(255 255 255) 30%, transparent 100%);
    pointer-events: none;
    transition: 0.3s var(--ease1);
}
.scroll_dim.end:after {
    height: 0px;    
}