@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap");

:root {
  --ink: #1b1b1b; /* 진한 외곽선/텍스트 */
  --canvas: #f6f1e7; /* 카드/섹션 배경톤 */
  --white: #ffffff;

  /* 포인트 파스텔 */
  --mint: #ecf9ec;
  --mint-dark: #73a942;
  --peach: #f7e3a3;
  --rose: #e9c0c4;
  --lilac: #e6e2fa;
  --lilac-dark: #b37ff0;
  --sky: #ddebff;
  --yellow: #f5f6c1;
  --orange: #ff8c42;

  --primary: #0063ff; /* 사이트 프라이머리 */
  --primaryColor: #0063ff; /* 사이트 프라이머리 */

  --outline: 2.5px; /* 외곽선 굵기 */
  --offset: 6px; /* 스티커 그림자 거리 */
  --radius: 18px; /* 기본 라운드 */
  --active: #f1f0ff; /* 활성/호버 약톤 */
}

@font-face {
  font-family: "Paperlogy";
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-1Thin.woff2")
      format("woff2"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-1Thin.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-1Thin.otf")
      format("opentype"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-1Thin.ttf")
      format("truetype");
}
@font-face {
  font-family: "Paperlogy";
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-2ExtraLight.woff2")
      format("woff2"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-2ExtraLight.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-2ExtraLight.otf")
      format("opentype"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-2ExtraLight.ttf")
      format("truetype");
}
@font-face {
  font-family: "Paperlogy";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-3Light.woff2")
      format("woff2"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-3Light.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-3Light.otf")
      format("opentype"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-3Light.ttf")
      format("truetype");
}
@font-face {
  font-family: "Paperlogy";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-4Regular.woff2")
      format("woff2"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-4Regular.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-4Regular.otf")
      format("opentype"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-4Regular.ttf")
      format("truetype");
}
@font-face {
  font-family: "Paperlogy";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-5Medium.woff2")
      format("woff2"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-5Medium.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-5Medium.otf")
      format("opentype"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-5Medium.ttf")
      format("truetype");
}
@font-face {
  font-family: "Paperlogy";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-6SemiBold.woff2")
      format("woff2"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-6SemiBold.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-6SemiBold.otf")
      format("opentype"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-6SemiBold.ttf")
      format("truetype");
}
@font-face {
  font-family: "Paperlogy";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-7Bold.woff2")
      format("woff2"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-7Bold.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-7Bold.otf")
      format("opentype"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-7Bold.ttf")
      format("truetype");
}
@font-face {
  font-family: "Paperlogy";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-8ExtraBold.woff2")
      format("woff2"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-8ExtraBold.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-8ExtraBold.otf")
      format("opentype"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-8ExtraBold.ttf")
      format("truetype");
}
@font-face {
  font-family: "Paperlogy";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-9Black.woff2")
      format("woff2"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-9Black.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-9Black.otf")
      format("opentype"),
    url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-9Black.ttf")
      format("truetype");
}

* {
  font-family: "Noto Sans KR", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

body {
  overflow-x: hidden !important;
  width: 100%;
}

.paperozi-bold {
  font-weight: 700 !important;
  font-family: "Paperlogy" !important;
}

.paperozi-semibold {
  font-weight: 500 !important;
  font-family: "Paperlogy" !important;
}

.paperozi-regular {
  font-weight: 400 !important;
  font-family: "Paperlogy" !important;
}

#header_main .headerarea {
  background: #fdeec3;
}

.headerarea__main__menu nav ul > li:hover > a {
  color: var(--orange);
}

.headerarea__main__menu nav ul > li > a {
  font-size: 17px;
}

/* 테마 스코프: .stk 내부만 적용 */
.stk .stk-card {
  background: var(--white);
  border: var(--outline) solid var(--ink) !important;
  border-radius: var(--radius);
  box-shadow: var(--offset) var(--offset) 0 var(--ink);
}

/* 컬러 배경 카드(섹션 강조용) */
.stk .stk-card.mint {
  background: var(--mint);
}
.stk .stk-card.peach {
  background: var(--peach);
}
.stk .stk-card.rose {
  background: var(--rose);
}
.stk .stk-card.lilac {
  background: var(--lilac);
}
.stk .stk-card.sky {
  background: var(--sky);
}
.stk .stk-card.yellow {
  background: var(--yellow);
}
.stk .stk-card.orange {
  background: var(--orange);
}

/* 섹션 타이틀 캡슐 */
.stk .stk-title {
  display: inline-block;
  margin: 0 auto;
  padding: 1.3rem 1rem;
  background: var(--white);
  border: var(--outline) solid var(--ink);
  font-weight: 800;
  color: var(--ink);
  box-shadow: var(--offset) var(--offset) 0 var(--ink);
  line-height: 1.1;
  text-align: center;
  font-size: 1.9rem;
}

/* 캡슐 버튼/필터/CTA */
.stk .stk-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1rem;
  border: var(--outline) solid var(--ink);
  border-radius: var(--radius);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  background: var(--white);
  box-shadow: var(--offset) var(--offset) 0 var(--ink);
  transition: transform 0.08s ease, box-shadow 0.08s ease,
    background-color 0.15s ease;
}
.stk .stk-pill:hover {
  transform: translateY(-2px);
  box-shadow: calc(var(--offset)+2px) calc(var(--offset)+2px) 0 var(--ink);
}
.stk .stk-pill.active {
  background: var(--active);
  transform: translateY(-3px);
  box-shadow: calc(var(--offset)+3px) calc(var(--offset)+3px) 0 var(--ink);
}

/* 색 변형이 필요한 경우 */
.stk .stk-pill.mint {
  background: var(--mint);
}
.stk .stk-pill.peach {
  background: var(--peach);
}
.stk .stk-pill.rose {
  background: var(--rose);
}
.stk .stk-pill.lilac {
  background: var(--lilac);
}
.stk .stk-pill.sky {
  background: var(--sky);
}

/* 스티커 배지(할인/개수) */
.stk .stk-badge {
  display: inline-block;
  min-width: 28px;
  padding: 0.25rem 0.6rem;
  text-align: center;
  font-weight: 800;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-weight: 400;
}

/* 페이지 여백/섹션 공통 */
.shop_title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
}

/* ===== Hero Slider (스티커화) ===== */
.herobanner__3 {
  position: relative;
  overflow: hidden;
  height: 500px !important;
  max-height: 500px !important;
}
.herobannerarea__slider {
  position: relative;
  height: 100%;
}
.herobannerarea__slider .slick-list,
.herobannerarea__slider .slick-track {
  height: 100%;
}
.herobannerarea__slider__single {
  position: relative;
  width: 100%;
  height: 500px !important;
}
.herobannerarea__slider__image {
  position: relative;
  width: 100%;
  height: 500px !important;
  overflow: hidden;
}
.herobannerarea__slider__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Slick Arrow Styles */
.herobannerarea__slider .prev_class,
.herobannerarea__slider .next_class {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ddd;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  border-radius: 50%;
}

.herobannerarea__slider .prev_class {
  left: 30px;
}

.herobannerarea__slider .next_class {
  right: 30px;
}

.herobannerarea__slider .prev_class:hover,
.herobannerarea__slider .next_class:hover {
  background: var(--primaryColor, #000);
  color: #fff;
  border-color: var(--primaryColor, #000);
}

/* Slick Dots Styles */
.herobannerarea__slider .slick-dots {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  z-index: 10;
  width: 100%;
  text-align: center;
}

.herobannerarea__slider .slick-dots li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.herobannerarea__slider .slick-dots li button {
  font-size: 0;
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid #fff;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.herobannerarea__slider .slick-dots li.slick-active button {
  background: #fff;
  width: 30px;
  border-radius: 20px;
}

.slick-slide img {
  object-fit: cover;
  width: 100%;
}

/* 반응형 */
@media (max-width: 768px) {
  .herobanner__3 {
    height: 320px !important;
    max-height: 320px !important;
  }
  .herobannerarea__slider__single,
  .herobannerarea__slider__image {
    height: 320px !important;
  }
}

/* ===== Product Cards ===== */
.stk .product-title {
  color: var(--ink);
  font-weight: 800;
}
.stk .price-strong {
  color: var(--primary);
  font-weight: 800;
}
.stk .price-dim {
  color: #8a8a8a;
}

/* ===== Review Slider ===== */
.review__slider__active {
  position: relative;
  padding: 0 50px;
}

.review__slider__active .slick-list {
  overflow: hidden !important;
  margin: 0 -12px;
  padding: 15px 0;
  box-sizing: border-box;
}

.review__slider__active .slick-track {
  display: block !important;
}

.review__slider__active .slick-slide {
  margin: 0 12px;
  height: auto !important;
}
.review__slider__active .slick-slide > div {
  height: 100%;
}
.review-slide-item {
  height: 100%;
}
.review-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.stk .review-card {
  overflow: hidden;
  /* border: var(--outline) solid var(--ink) !important;
  box-shadow: var(--offset) var(--offset) 0 var(--ink) !important; */
}
.stk .review-card:hover {
  transform: translateY(-3px);
  box-shadow: calc(var(--offset)+3px) calc(var(--offset)+3px) 0 var(--ink) !important;
}
.review-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.review-card .card-body {
  flex: 1;
}
.review__slider__active .slick-prev,
.review__slider__active .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  z-index: 1;
  cursor: pointer;
  background: var(--white);
  border: var(--outline) solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--offset) var(--offset) 0 var(--ink);
}
.review__slider__active .slick-prev {
  left: -6px;
}
.review__slider__active .slick-next {
  right: -6px;
}

.review__slider__active .slick-dots {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

.stk .review__slider__active .slick-dots li button {
  font-size: 0;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--white);
  border: var(--outline) solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.stk .review__slider__active .slick-dots li.slick-active button {
  width: 24px;
  border-radius: 10px;
  background: var(--active);
}

@media (max-width: 991px) {
  .review__slider__active {
    padding: 0 30px;
  }
  .stk .review__slider__active .slick-prev,
  .stk .review__slider__active .slick-next {
    width: 36px;
    height: 36px;
  }

  .stk .herobannerarea__slider .prev_class {
    left: 10px !important;
  }

  .stk .herobannerarea__slider .next_class {
    right: 10px !important;
  }
}
@media (max-width: 767px) {
  .review__slider__active {
    padding: 0;
    margin-bottom: 30px;
  }
  .review-slide-item {
    padding: 0 5px !important;
  }
  .review-img {
    height: 200px;
  }
  .stk .review__slider__active .slick-prev,
  .stk .review__slider__active .slick-next {
    display: none;
  }
}

/* ===== FAQ (스티커화) ===== */
.stk .faq-section .accordion-item {
  border: var(--outline) solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--offset) var(--offset) 0 var(--ink);
}
.faq-section .accordion-button {
  font-weight: 700;
  background: transparent;
}
.stk .faq-section .accordion-button:not(.collapsed) {
  background: var(--active);
  color: var(--ink);
}
.faq-section .accordion-body {
  line-height: 1.8;
  color: #555;
}

/* 다크 모드 톤 다운 */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #ede7d9;
  }
}

/* 상품 공통 스타일 */
/* 좌우 카드 레이아웃: 이미지 꽉 차게 */
.product-card .card-row {
  /* display: flex; */
  align-items: stretch; /* 좌-우 높이 동일 */
  text-align: center;
}

/* 이미지 래퍼: 고정폭, 카드 높이에 맞춰 자동 높이 */
.product-card .product-media {
  position: relative;
  /* flex: 0 0 250px; /* 데스크탑 폭 (원하면 280px 등으로) */
  /* max-width: 250px; */
  min-height: 250px; /* 내용이 적어도 너무 낮아지지 않게 */
  background: #f5f5f5; /* 로딩/무이미지 배경 */
  overflow: hidden;
  /* border-right: 1px solid var(--bs-border-color, #e5e7eb); */
}

@media (max-width: 576px) {
  .product-card .card-row {
    flex-direction: row;
  }
}

.product-card .product-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.product-card .product-media .stk-badge {
  position: relative;
}

.stk-button-1 {
  background-color: var(--white);
  padding: 0.7rem 1.2rem;
  border-radius: 5px;
  border: 1px solid #e5e7eb;
}

.modal-open .header__sticky {
  position: static !important; /* sticky 해제 */
  z-index: auto !important;
  pointer-events: none; /* 헤더 클릭 방지 (원하면 제거) */
}

.os-title-1 {
  line-height: 1;
  font-size: 40px;
}
.os-title-2 {
  line-height: 1;
  font-size: 28px;
}

.count,
.os-title-1 b,
.os-title-2 b,
.shop_title b {
  color: #0063ff;
  font-family: inherit;
}

@media (max-width: 540px) {
  .os-title-1-long {
    font-size: 26px;
  }
  .os-title-2-long {
    font-size: 22px;
  }

  .shop-subtitle {
    font-size: 18px;
  }

  .shop_title {
    font-size: 22px;
  }
}