@layer swiper, reset, print, atom, molecules, organisms, template, page, utillity;

/* @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"); */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@import url(./vendor/swiper.css) layer(swiper);

/* 기초정의 */
@import url(./components/reset.css) layer(reset);
@import url(./components/print.css) layer(print);
@import url(./components/debug.css);

/* 원자 */
@import url(./components/variable.css) layer(atom.variable);
@import url(./components/align.css) layer(utillity.align);
@import url(./components/spacing.css) layer(utillity.spacing);
@import url(./components/rounded.css) layer(utillity.rounded);
@import url(./components/typography.css) layer(atom.typography);
@import url(./components/layout.css) layer(utillity.layout);
@import url(./components/icons.css) layer(atom.icons);

/* 분자 */
@import url(./components/button.css) layer(atom.button);
@import url(./components/badge.css) layer(atom.badge);
@import url(./components/textfield.css) layer(molecules.textfield);
@import url(./components/radio.css) layer(molecules.radio);
@import url(./components/checkbox.css) layer(molecules.checkbox);
@import url(./components/select.css) layer(molecules.select);
@import url(./components/switch.css) layer(molecules.switch);
@import url(./components/chip.css) layer(molecules.chip);
@import url(./components/floatingLabel.css) layer(molecules.floatingLabel);
@import url(./components/icontext.css) layer(molecules.icontext);
@import url(./components/date.css) layer(molecules.date);
@import url(./components/pipe.css) layer(molecules.pipe);
@import url(./components/dialog.css) layer(molecules.dialog);
@import url(./components/tab.css) layer(molecules.tab);
@import url(./components/navigation.css) layer(molecules.navigation);
@import url(./components/scroll.css) layer(molecules.scroll);
@import url(./components/textlist.css) layer(molecules.textlist);
@import url(./components/pagination.css) layer(molecules.pagination);
@import url(./components/metalist.css) layer(molecules.metalist);
@import url(./components/heading.css) layer(molecules.heading);
@import url(./components/breadcrumb.css) layer(molecules.breadcrumb);
@import url(./components/quick.css) layer(molecules.quick);
@import url(./components/block.css) layer(molecules.block);

/* 유기체 */
@import url(./components/table.css) layer(organisms.table);
@import url(./components/carousel.css) layer(organisms.carousel);
@import url(./components/accordion.css) layer(organisms.accordion);
@import url(./components/hero.css) layer(organisms.hero);
@import url(./components/header.css) layer(organisms.header);
@import url(./components/footer.css) layer(organisms.footer);
@import url(./components/search.css) layer(organisms.search);
@import url(./components/card.css) layer(organisms.card);
@import url(./components/state.css) layer(organisms.state);
@import url(./components/formgroup.css) layer(organisms.formgroup);
@import url(./components/diagram.css) layer(organisms.diagram);

/* 템플릿 */
@import url(./template/post.css) layer(template.post);

/* 페이지 */
@import url(./pages/customer.css) layer(page.customer);
@import url(./pages/consulting.css) layer(page.consulting);
@import url(./pages/test.css) layer(page.test);
@import url(./pages/introduce.css) layer(page.introduce);
@import url(./pages/main.css) layer(page.main);
@import url(./pages/etc.css) layer(page.etc);

/* Popup overlay (public main page) */
body.popup-overlay-lock {
  overflow: hidden;
}

body {
  /* antialiased */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  background: rgba(0, 0, 0, 0.2);
}

.popup-overlay__modal {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 125px);
  margin: 85px 0 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.popup-overlay__list {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  overflow-x: auto;
}

.popup-card {
  display: flex;
  flex-direction: column;
  background: #222222;
  border: 1px solid rgba(148, 163, 184, 0.25);
  overflow: hidden;
  color: #f8fafc;
  height: fit-content;
  max-width: 360px;
  width: 100%;
}

.popup-card__image {
  display: block;
  background: #0f172a;
}

.popup-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popup-card__footer {
  display: flex;
  align-items: center;
  justify-content: end;
  height: 40px;
  gap: 12px;
  padding: 0 12px;
  background: #222222;
  font-size: 14px;
}

.popup-card__snooze {
  padding: 0;
  border: none;
  background: transparent;
  color: #ffffff;
  opacity: 0.4;
  line-height: 1.4;
  cursor: pointer;
}

.popup-card__snooze:hover,
.popup-card__snooze:focus {
  opacity: 1;
  outline: none;
  text-decoration: underline;
}

.popup-card__dismiss {
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.1);
  color: #e0f2fe;
  font-weight: 600;
  cursor: pointer;
}

.popup-card__dismiss:hover {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.85);
  color: #fff;
}