@charset "utf-8";



.sunday-wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: 50px 20px;
  text-align: center;
}

.sunday-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 80px;
  font-weight: 500;
  color: #1f1f1c;
  letter-spacing: 4px;
  text-align: center;
  margin-bottom: 60px;
}

.sunday-title3 {
  font-size: 54px;
  font-weight: 800;
  background: linear-gradient(
    90deg,
    #f9d976 0%,
    #fbc46d 20%,
    #fcd7b6 40%,
    #f6e2a7 60%,
    #fff2c2 80%,
    #f9d976 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  letter-spacing: 4px;
  text-align: center;
  margin-bottom: 60px;
  animation: shineText 6s ease-in-out infinite;
}

/* 부드럽게 피어나는 듯한 텍스트 애니메이션 */
@keyframes shineText {
  0% {
    opacity: 0.2;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0.2;
    transform: scale(0.95);
  }
}



.sunday-slider {
  position: relative;
  max-width: 360px;
  margin: 2rem auto;
  text-align: center;
}

.sunday-slider-track {
  position: relative;
  width: 100%;
}

.sunday-slide {
  width: 100%;
  height: auto;
  display: none;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.sunday-slide.active {
  display: block;
}

.sunday-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle at center, #aaa 50%, #ccc 100%);
  box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  color: #444;
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.3s ease;
  z-index: 10;
}

/* 화살표 위치 */
.sunday-prev {
  left: -35px;
}
.sunday-next {
  right: -35px;
}

/* 호버 시 황금빛 Glow */
.sunday-nav:hover {
  background: radial-gradient(circle at center, #ffe992 20%, #f5d742 100%);
  box-shadow: 0 0 8px 4px rgba(255, 220, 90, 0.5);
  color: #fff;
  opacity: 1;
  transform: translateY(-50%);
}

.sunday-dots {
  margin-top: 10px;
}

.sunday-dot {
  width: 8px;
  height: 8px;
  margin: 0 1px;
  background-color: #ddd;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}

.sunday-dot.active{
  background-color: #707475;	
}	
.sunday-dot:hover {
  background-color: #ffd86a;
}


@keyframes sundayArtSlideIn {
  0% {
    opacity: 0;
    transform: scale(1.02);
    filter: blur(6px);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.01);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.sunday-art-transition {
  animation: sundayArtSlideIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}




.item-gallery {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

.item-image {
  width: 50%;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.item-image:hover {
  transform: scale(1.02);
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 9999;
}

.modal.show {
  display: flex;
}

.modal-content {
  background: #fff;
  padding: 30px 40px;
  border-radius: 16px;
  font-size: 18px;
  color: #333;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-content button {
  margin-top: 20px;
  padding: 8px 16px;
  background-color: #e8c47c;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.modal-content button:hover {
  background-color: #d4ac5a;
}
/* 이미지에 부드러운 등장 애니메이션 */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1.5s ease-out forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-btn {
  display: block;
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  font-size: 16px;
  border: none;
  background-color: #111;
  color: #fff;
  cursor: pointer;
  border-radius: 6px;
}

.modal-btn:hover {
  background-color: #333;
}

  #goStoreBtn {
    background-color: #AFE2D5;
    color: #00332B;
  }

  #goStoreBtn:hover {
    background-color: #98D8C7;
  }
  .modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .modal.show { display: flex; justify-content: center; align-items: center; }

  .modal-content {
    background-color: #fff;
    padding: 2em;
    border-radius: 12px;
    position: relative;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  }

  .close-btn {
    position: absolute;
    top: 10px; right: 15px;
    font-size: 1.5rem;
    color: #333;
    cursor: pointer;
  }

  .modal-btn {
    margin: 1em 0.5em 0 0.5em;
    padding: 0.6em 1.5em;
    font-size: 1rem;
    border: none;
    border-radius: 6px;
    background: #222;
    color: white;
    cursor: pointer;
  }

.modal-btn:hover {
    background: #444;
}
.page-section {
  display: flex;
  width: 100%;
  gap: 2%;
  font-family: 'Noto Sans KR', sans-serif;
  margin-bottom: 40px;
}

.left-widget {
  width: 70%;
  height: 350px;
}

.right-info {
  width: 28%;
  height: 350px;
  background: #f9f9f9;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.7;
  font-size: 15px;
  color: #111;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

.right-info strong {
  font-size: 19px;
  margin-bottom: 4px;
  font-weight: 500;
}

.right-info a {
 color: #111
}

.flip-clock {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

.flip-unit {
  width: 30px;
  height: 36px;
  perspective: 1000px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  background: #111;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 50%;
  line-height: 18px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  backface-visibility: hidden;
  transform-origin: bottom;
}

.card-face.top {
  top: 0;
  border-bottom: 1px solid #333;
  z-index: 2;
  background: #222;
}

.card-face.bottom {
  bottom: 0;
  transform: none; /* ✅ 회전 제거 */
  background: #000;
  border-top: 1px solid #444;
  opacity: 0; /* 초기 상태 감춤 */
  z-index: 1;
}

.flip-unit.flip .card-face.top {
  animation: flipTopAnim 0.5s forwards;
  animation-delay: 0.25s;
  animation-timing-function: ease-in-out;
}

.flip-unit.flip .card-face.bottom {
  animation: revealUp 0.5s ease-in-out forwards;
}

@keyframes revealUp {
  0% {
    clip-path: inset(100% 0% 0% 0%); /* 아래에서 위로 감춰짐 */
    opacity: 0;
  }
  100% {
    clip-path: inset(0% 0% 0% 0%); /* 완전 노출 */
    opacity: 1;
  }
}
@keyframes flipTopAnim {
  0%   { transform: rotateX(0deg); opacity: 1; }
  10%  { transform: rotateX(-9deg); opacity: 0.95; }
  20%  { transform: rotateX(-18deg); opacity: 0.9; }
  30%  { transform: rotateX(-27deg); opacity: 0.85; }
  40%  { transform: rotateX(-36deg); opacity: 0.8; }
  50%  { transform: rotateX(-45deg); opacity: 0.7; }
  60%  { transform: rotateX(-54deg); opacity: 0.5; }
  70%  { transform: rotateX(-63deg); opacity: 0.3; }
  80%  { transform: rotateX(-72deg); opacity: 0.2; }
  90%  { transform: rotateX(-81deg); opacity: 0.1; }
  100% { transform: rotateX(-90deg); opacity: 0; }
}






.separator {
  font-size: 30px;
  color: #000;
  margin-top: -4px;
}

.card {
  box-shadow: 0 8px 20px rgba(253,220,73, 0.6);
}

.card-face.top {
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.1);
}

.card-face.bottom {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}




@media (max-width: 767px) {
  .sunday-title {
    font-size: 40px;
    line-height: 36px;
    margin-bottom: 24px;
  }

  .item-gallery {
    flex-direction: column;
    gap: 10px;
    padding: 0 10px;
  }

  .item-image {
    width: 100%;
    max-width: 100%;
  }

  .modal-content {
    width: 80%;
    font-size: 14px;
  }

  .modal-content button {
    font-size: 14px;
    padding: 6px 12px;
  }

}

.right-info2 {
    display: none;
}
/* 모바일 전용 표시, PC 전용 숨김 */
@media all and (max-width: 768px) {
    .right-info {
        display: none;
    }
	.right-info2 {
	  width: 100%;
	  height: 350px;
	  background: #f9f9f9;
	  padding: 20px;
	  box-sizing: border-box;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  line-height: 1.7;
	  font-size: 15px;
	  color: #111;
	  font-family: 'Inter', sans-serif;
  font-weight: 700;
	}

	.right-info2 strong {
	  font-size: 19px;
	  margin-bottom: 4px;
	  font-weight: 500;
	}

	.right-info2 a {
	 color: #000
	}
}


  
/* =========================================================
   SUNDAY RECORDS - MAIN (Hero/Store/Archives/Review/Community)
   - 요구사항 반영:
     1) 각 섹션 내부 위·아래 패딩 충분히 부여
     2) 좌/우 화살표 더 바깥쪽으로 (히어로/다른 섹션 분리)
     3) 히어로(섹션1) 우측 화살표 항상 보이도록 강제
     4) 섹션3/4/5 회색 배경 서로 다른 톤
     5) 중복·충돌 CSS 제거
   ========================================================= */

/* 공통 래퍼 */
.sr-wrap { background:#fff; overflow:hidden; }

/* 섹션 기본 레이아웃 */
.sr-section {
  max-width:1200px;
  margin:0 auto;                /* 밴드 사이 외부 여백은 0 (섹션끼리 붙게) */
  padding:74px 60px;            /* 내부 위·아래 여백은 충분히 */
}
.sr-section.tight { padding:44px 40px; }

/* 섹션 헤더 : 가운데 제목 + 우측 +SEE MORE(굵게) */
.sr-head{ position:relative; margin-bottom:14px; }
.sr-head .sr-title{ margin:0; text-align:center; font-size:36px; }
.sr-head .sr-more{
  position:absolute; top:0; right:0;
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration:none;
  transition: transform 0.2s ease;
}
.sr-head .sr-more svg {
  fill: #1f1f1c;
  width: 28px;  /* 이미지와 비슷하게 약간 키움 */
  height: 28px;
}
.sr-head .sr-more:hover {
  opacity: 0.7;
}
.sunday-title{ font-weight:900; letter-spacing:1px; }

/* -----------------------------
   [섹션 1] HERO (풀폭 슬라이드)
   ----------------------------- */
.sr-hero{ width:100%; padding:0px 0; }
/* 우측 화살표가 다른 상단 요소/투명 레이어에 가려지는 경우를 차단 */
.sr-hero-viewport{
  position:relative; isolation:isolate;
  width:100%; height:auto; overflow:hidden;
}

.sr-hero-track{ display:flex; height:100%; transition:transform .6s ease; }
.sr-hero-slide{ flex:0 0 100%; height:100%; }
.sr-hero-slide img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 섹션1: figure 기본 여백 완전 제거 */
#sec-hero .sr-hero-slide{ margin:0 !important; padding:0 !important; border:0 !important; }

/* 혹시 flex gap이 잡혀 있으면 함께 0으로 고정 (이미 선언돼 있어도 안전) */
#sec-hero .sr-hero-track{ gap:0 !important; }

/* 뷰포트 내부 여백도 0 보장 */
#sec-hero .sr-hero-viewport{ padding-left:0 !important; }

.sr-edge{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0 !important; background:none !important; box-shadow:none !important;
  padding:0 4px; cursor:pointer; z-index:9999;
}
.sr-edge svg{ width:54px; height:54px; display:block; filter:drop-shadow(0 3px 12px rgba(0,0,0,.55)); }

/* 섹션1 화살표에만 적용하려면 .sr-hero .sr-edge svg path { ... } 로 범위를 좁히세요 */
.sr-edge-prev svg path{
  /* 채움 유지 + 외곽선 추가 */
  fill: #fff !important;
  stroke: #fff !important;

  /* 두께(숫자 키우면 더 굵어짐) */
  stroke-width: 2;       /* 예: 4~8 사이에서 취향대로 */

  /* 둥글둥글한 모서리 */
  stroke-linejoin: round; /* 꼭짓점 둥글게 */

  /* 스트로크를 먼저 그린 뒤 채움으로 덮어 가장자리 부드럽게 */
  paint-order: stroke fill;
}
.sr-edge-next svg path{
  /* 채움 유지 + 외곽선 추가 */
  fill: #fff !important;
  stroke: #fff !important;

  /* 두께(숫자 키우면 더 굵어짐) */
  stroke-width: 2;       /* 예: 4~8 사이에서 취향대로 */

  /* 둥글둥글한 모서리 */
  stroke-linejoin: round; /* 꼭짓점 둥글게 */

  /* 스트로크를 먼저 그린 뒤 채움으로 덮어 가장자리 부드럽게 */
  paint-order: stroke fill;
}

.sr-edge.is-disabled{ opacity:.35; }

/* 히어로의 화살표(항상 보임 & 화면 안쪽 18px) */
.sr-hero .sr-edge{ z-index:10050; } /* 헤더 등에 가려지지 않도록 최상단 */
/* 더 크게(아이콘만, 원형 배경 없음) */
.sr-hero .sr-edge svg{ width:104px; height:104px; fill:#fff; }

/* 좌/우 위치 확정 + 강제 노출(테마/위젯의 display:none, opacity 0 등 무시) */
.sr-hero .sr-edge-prev{ left:28px !important; }
.sr-hero .sr-edge-next{
  right:28px !important;
}


/* 점 네비(좌하단) */
.sr-dots{ position:absolute; left:60px; bottom:16px; z-index:10060; display:flex; gap:8px; }
.sr-dot{ width:10px; height:10px; border-radius:50%; border:0; background:#2e2e2e; opacity:.95; cursor:pointer; }
.sr-dot.is-active{ background:#e11d2e; }

/* -----------------------------
   [공통] 캐러셀 (스토어/아카이브/리뷰)
   ----------------------------- */
.sr-carousel{ position:relative; }
.sr-c-viewport{ overflow:hidden; }
.sr-c-track{ display:flex; gap:18px; transition:transform .45s ease; }

/* 아이템 카드(스토어/리뷰) */
.sr-item{
  flex:0 0 calc(25% - 13.5px);
  display:flex; flex-direction:column;
  border-radius:0; overflow:hidden; background:#fff;
}
.sr-thumb{ position:relative; padding-top:100%; background:#f6f7fb; }
.sr-thumb.is-soldout::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6); /* 필터 농도 약간 강화 */
  z-index: 2;
}
.sr-thumb>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* 리뷰 카드 보조 */
.ratio-4-3{ padding-top:75%; }
.sr-item.sr-review .sr-caption{ padding:10px; }
.sr-tt{ display:block; font-weight:800; margin-bottom:6px; }
.sr-ex{ display:block; font-size:14px; opacity:.85; line-height:1.5; }
.sr-empty{ padding:24px; border:1px dashed #ddd; border-radius:10px; text-align:center; }

/* 캐러셀 화살표(스토어/아카이브/리뷰) : 더 바깥으로 */
.sr-carousel > .sr-edge{ position:absolute; top:50%; transform:translateY(-50%); z-index:9999; }
.sr-carousel > .sr-c-prev{ left:-72px !important; }   /* << 더 왼쪽으로 밀기 */
.sr-carousel > .sr-c-next{ right:-72px !important; }  /* >> 더 오른쪽으로 밀기 */
.sr-carousel .sr-edge svg{ fill:#8a8a8a; }

/* 반응형에서 너무 바깥으로 나가면 조금만 안쪽으로 */
@media (max-width:1280px){
  .sr-carousel > .sr-c-prev{ left:-36px !important; }
  .sr-carousel > .sr-c-next{ right:-36px !important; }
}
@media (max-width:1024px){
  .sr-item{ flex-basis:calc(33.333% - 12px); }
  .sr-carousel > .sr-c-prev{ left:8px !important; }
  .sr-carousel > .sr-c-next{ right:8px !important; }
}
@media (max-width:768px){
  .sr-item{ flex-basis:calc(50% - 9px); }
  .sr-hero-viewport{ height:min(54vh,560px); }
}
@media (max-width:480px){ .sr-item{ flex-basis:100%; } }

/* -----------------------------
   [섹션 3] ARCHIVES (영상 슬라이드)
   - 한 번에 1개, 가운데 16:9, 가로 최대 560px
   ----------------------------- */
.sr-video{ flex:0 0 100%; }
.sr-video-inner{ max-width:560px; margin:0 auto; }
.sr-video-frame{ position:relative; width:100%; padding-top:56.25%; }
.sr-video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; }

/* -----------------------------
   [섹션 3/4/5] 회색 밴드 (서로 다른 톤)
   ----------------------------- */
.sr-band-arch{ background:#fff; } /* ARCHIVES : 가장 밝음 */
.sr-band-rev { background:#fff; } /* REVIEW   : 중간 톤 */
.sr-band-com { background:#fff; } /* COMMUNITY: 가장 진함 */

/* -----------------------------
   [섹션 5] COMMUNITY (3열 + 검은 라인)
   ----------------------------- */
.sr-comm-rows{
  display:grid; grid-template-columns:1fr 2.4fr 1.2fr;
  gap:0; padding:10px 0;
  border-top:1px solid #000; 
  text-align:center; background:transparent; /* 배경은 sr-band-com이 담당 */
}
.sr-col{ padding:0 16px; }
.sr-col-1, .sr-col-2{ border-right:1px solid #000; }
.sr-comm-h{ margin:0 0 10px; font-size:18px; }
.sr-bank-strong{ font-size:24px; line-height:1.35; font-weight:800; }

/* CONTACT 칸(가운데) : 좌/우 2열 + 이메일은 맨 아래 중앙 */
.sr-contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
  justify-items:center; align-items:end;
}
.sr-contact-grid .sr-ct{ margin:0; text-align:center; }
.sr-comm-email{ grid-column:1 / -1; margin-top:6px; font-weight:700; }


/* 컨테이너 & 제목 */
.archives-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 37px 60px;
}
.archives-title{
  margin: 0 0 36px;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2px;
}

/* 3열 그리드 */
.arch-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 56px; /* 세로, 가로 간격 */
}

/* 카드 및 16:9 비율 박스 */
.arch-card{ margin:0; }
.arch-video{ position: relative; width: 100%; }
.arch-frame{
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.arch-frame iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* 캡션(이탤릭) */
.arch-caption{
  margin-top: 14px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .1px;
}

/* 반응형 */
@media (max-width: 1024px){
  .arch-grid{ grid-template-columns: repeat(2, 1fr); gap: 40px 28px; }
}
@media (max-width: 640px){
  .archives-wrap{ padding: 44px 20px; }
  .arch-grid{ grid-template-columns: 1fr; gap: 28px; }
  .arch-caption{ font-size: 20px; }
}

/* ===== STORE (장르 네비 + 4열 카드) ===== */


.store-wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
}

.store-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 100px 80px;           /* 더 넓고 여유로운 간격 */
}

.store-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 240px;           /* 상품 크기를 더 줄여서 아주 여유 있게 */
  margin: 0 auto;
  border: 0 none !important;  /* 카드 자체 테두리 제거 */
  border-radius: 0 !important;
  box-shadow: none !important;
}

.store-thumb,
.store-wrap .store-grid .store-card .store-thumb {
  position: relative;
  width: 100%;
  display: block;
  border: 0px none transparent !important; /* 모든 종류의 테두리 제거 */
  border-radius: 0px !important;           /* 모든 종류의 모서리 곡률 제거 */
  box-shadow: none !important;             /* 모든 종류의 그림자 제거 */
  outline: none !important;                /* 외곽선 제거 */
  overflow: hidden;
  background-color: transparent !important;
}
.store-thumb .thumb-ratio{ display:block; padding-top:100%; } /* 1:1 */
.store-thumb img,
.store-wrap .store-grid .store-card .store-thumb img {
  position:absolute; inset:0;
  width:100% !important; 
  height:100% !important; 
  object-fit:cover !important; 
  display:block !important;
  transition: transform .25s ease;
  border: 0px none transparent !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  outline: none !important;
}
.store-thumb:hover img{ transform: scale(1.02); }
.store-thumb.is-soldout::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6); /* 필터 농도 약간 강화 */
  z-index: 2;
}
.sold-out-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #000;
  color: #fff;
  padding: 5px 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.5px;
  border-radius: 0;
  z-index: 10;
  pointer-events: none;
  text-transform: lowercase;
}

.brand-mark{
  margin-top: 16px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 16px;
}
.store-title{
  margin: 15px 0 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400; /* BOLD 제거 */
  font-size: 12px;  /* 제목 크기 추가 축소 */
  line-height: 1.4;
  color: #111;
}
.store-price{
  margin: 5px 0 0;   /* 제목과의 간격 소폭 축소 */
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;    /* 가격 크기를 제목 크기(12px)와 동일하게 축소 */
  color: #111;
}

/* 페이지네이션 */
.store-pagination {
  margin-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.store-pagination a, .store-pagination strong {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #111;
  text-decoration: none;
  transition: opacity 0.2s;
}
.store-pagination a:hover {
  opacity: 0.5;
}
.store-pagination strong {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}


.store-nav {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 35px !important; /* 요청하신 사진처럼 아주 넓은 간격 */
  margin: 40px 0 60px !important; /* 상/하단 여백 충분히 확보 */
  text-align: center;
}

.store-nav button, .store-nav a {
  background: none !important;
  border: none !important;
  padding: 5px 0 !important;
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important; /* Inter Bold 700 고합 */
  font-size: 15px !important;
  color: #111 !important;      /* 깔끔한 블랙 */
  cursor: pointer;
  transition: opacity 0.2s ease;
  text-decoration: none !important;
}

.store-nav button:hover, .store-nav a:hover {
  opacity: 0.6;
}

.store-nav button.is-active, .store-nav a.is-active {
  color: #000 !important;
  border-bottom: 2px solid #000 !important; /* 활성화 시 깔끔한 언더라인 */
}


/* 반응형 */
@media (max-width: 1200px){
  .store-grid{ gap: 48px 28px; }
}
@media (max-width: 1024px){
  .store-nav button{ font-size: 20px; }
  .store-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px){
  .store-grid{ grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
}
@media (max-width: 520px){
  .store-grid{ grid-template-columns: 1fr; }
}
.sr-band{
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px; /* 좌우 여백 */
  box-sizing: border-box;
}

/* ===== 공통 컨테이너 ===== */
.about-container {
  width: 100%;
  max-width: 1500px;   /* 이미지가 더 커지도록 전체 폭 확장 */
  margin: 0 auto;
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  gap: 40px;           /* 위아래 섹션 간격 */
  font-weight: 500;    /* 전체 글꼴 두께를 살짝 줄임 */
}

/* ===== 제목 (ABOUT) ===== */
.about-container h2 {
  font-size: 34px;     /* 글씨 크기 줄임 */
  font-weight: 600;    /* 두께는 중간 */
  margin-bottom: 10px;
  text-align: center;    /* 좌측 정렬 (가운데 원하시면 center로 변경) */
  color: #000;
}

/* ===== 행 레이아웃 (한글/영어 동일) ===== */
.about-row {

  flex-direction: row;
  align-items: stretch;
  gap: 0!important;      
  text-align: center;          /* 글·이미지 사이 여백 완전 제거 */
}

/* 좌/우 영역 비율 */
.about-left {
  flex: 0 0 52%!important;        /* 텍스트 영역 축소 */
  margin: 0!important;
  padding: 0!important;
  justify-content: center!important; 
}
.about-right {
  flex: 0 0 48%!important;        /* 이미지 영역 확대 */
  margin: 0!important;
  padding: 0!important;
}

/* ===== 텍스트 ===== */
.about-left p {
  font-size: 15px;      /* 크기 줄임 */
  line-height: 1.7;
  color: #222;
  margin: 0;
  font-weight: 600;     /* 너무 굵지 않게 */
}

/* ===== 이미지 ===== */
.about-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* 칸 전체를 채움 */
  display: block;
  border-radius: 0;
}

/* ===== 영어 영역 (배경만 다름, 구조 동일) ===== */
.about-en {
  background-color: #FCFCFD; /* 요청한 옅은 회색 */
}

.about-en p {
  color: #333;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.7;
  margin: 0;
}

/* ===== 반응형 ===== */
@media (max-width: 768px) {
  .about-row {
    flex-direction: column;
  }
  .about-left,
  .about-right {
    flex: 1 1 100%;
  }
  .about-right img {
    width: 100%;
    height: auto;
    margin-top: 20px;
  }
}

/* ===== REVIEW 썸네일: 고정 높이/비율 완전 해제 + no-upscale ===== */

/* 갤러리 UL과 LI는 가로 3열 유지 (이미 쓰고 있으면 생략 가능) */
/* 캐러셀 트랙을 가로로 */
.sr-band-rev #sec-review .sr-c-viewport{ overflow: visible;  }
.sr-band-rev #sec-review .sr-c-track{ display:flex !important; gap:18px !important; }

/* 위젯이 끼우는 wrapper/UL들을 가로 플렉스로 일원화 */
.sr-band-rev #sec-review .sr-c-track{ display:flex !important; gap:18px !important; }
.sr-band-rev #sec-review .sr-c-track > .widgetContainer,
.sr-band-rev #sec-review .sr-c-track > .widgetContainer > ul.widgetGalleryA,
.sr-band-rev #sec-review .sr-c-track > ul.widgetGalleryA{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:flex-start !important;
  gap:18px !important;
  width:100% !important;
  margin:0 !important; padding:0 !important; list-style:none;
}

/* 3열: 동일 칸폭(컨테이너 기반) — 원하면 고정 300px로 바꿔도 됨 */
.sr-band-rev #sec-review ul.widgetGalleryA > li{
  flex:0 0 300px !important;     /* ← 300px 고정 폭 */
  max-width:300px !important;
  width:300px !important;
  float:none !important; clear:none !important; padding:0 !important;
}

/* 썸네일 박스: 높이/패딩/비율 고정 전부 해제 */
.sr-band-rev #sec-review ul.widgetGalleryA > li .thumb{
  display:block !important;
  width:300px !important;          /* 데스크톱 기준 300px */
  padding:0 !important;
  background:none !important;
  line-height:0 !important;
  overflow:visible !important;
  height:auto !important;           /* 높이 고정/패딩트릭 방지 */
  position:static !important;       /* absolute 크롭 방지 */
}
.sr-band-rev #sec-review ul.widgetGalleryA > li .thumb img{
  display:block !important;
  width:100% !important;            /* 컨테이너(.thumb) 폭을 100%로 채움 */
  height:auto !important;           /* 세로 자동(원본비율) */
  object-fit:contain !important;    /* 혹시 모를 크롭 방지 */
  margin:0 !important; border:0 !important;
  vertical-align:top !important;
  max-width:none !important; max-height:none !important; /* 상위 제한 무력화 */
}

/* (옵션) 제목/요약 */
.sr-band-rev #sec-review ul.widgetGalleryA > li .title{
  display:block; margin:12px 0 6px;
  font-size:18px; font-weight:800; line-height:1.35; color:#111; text-decoration:none;
}
.sr-band-rev #sec-review ul.widgetGalleryA > li .sr-ex{
  white-space: normal !important; word-break: keep-all; overflow-wrap: anywhere;
  margin:0; font-size:14px; color:#444; line-height:1.55;
}


/* 반응형 */
@media (max-width:1024px){
  .sr-band-rev #sec-review ul.widgetGalleryA > li,
  .sr-band-rev #sec-review ul.widgetGalleryA > li .thumb,
  .sr-band-rev #sec-review ul.widgetGalleryA > li .thumb img{
    width:calc((100vw - 18px - 120px)/2) !important; /* 좌우 여백 고려해 대충 절반 */
  }
}
@media (max-width:640px){
  .sr-band-rev #sec-review ul.widgetGalleryA > li,
  .sr-band-rev #sec-review ul.widgetGalleryA > li .thumb,
  .sr-band-rev #sec-review ul.widgetGalleryA > li .thumb img{
    width:calc(100vw - 120px) !important; /* 좌우 패딩 감안한 1열 */
  }
}

/* 위젯 기본 CSS의 float/고정폭이 끼어들 경우 안전망 */
.sr-band-rev #sec-review .widgetGalleryA *{
  float:none !important;
}

.sr-band-rev #sec-review ul.widgetGalleryA > li .thumb *,
.sr-band-rev #sec-review ul.widgetGalleryA > li .thumb::before,
.sr-band-rev #sec-review ul.widgetGalleryA > li .thumb::after{
  background:none !important;
  background-image:none !important;
  position:static !important;      /* absolute로 덮어씌운 크롭 방지 */
  inset:auto !important;
  padding:0 !important;
  margin:0 !important;
  max-height:none !important;
}

/* 인라인 style로 background 걸어둔 경우까지 차단 */
.sr-band-rev #sec-review ul.widgetGalleryA > li .thumb [style*="background"]{
  background:none !important;
}

/* REVIEW 영역: 썸네일 강제 초기화 */
#sec-review .widgetGalleryA > li .thumb{
  display:block !important;
  width:300px !important;     /* 카드 폭 고정 */
  height:auto !important;     /* 높이 예약 금지 */
  padding:0 !important;       /* 패딩 비율 박스 제거 */
  background:none !important;
  line-height:0 !important;
  position:static !important; /* absolute 크롭 방지 */
  overflow:visible !important;
}
#sec-review .widgetGalleryA > li .thumb img{
  width:100% !important;
  height:auto !important;     /* 원본 비율로만 */
  object-fit:contain !important;
  display:block !important;
  margin:0 !important; border:0 !important; vertical-align:top !important;
}
/* 목록 가로 정렬(캐러셀에 맞춤) */
#sec-review .widgetGalleryA{
  display:flex !important; flex-wrap:nowrap !important; gap:18px !important;
  list-style:none; margin:0 !important; padding:0 !important;
}
#sec-review .widgetGalleryA > li{
  flex:0 0 300px !important; max-width:300px !important; width:300px !important;
  float:none !important; clear:none !important; padding:0 !important;
}
/* 본문 줄바꿈 정상화(공백/개행 보존) */
#sec-review .widgetGalleryA > li .sr-ex,
#sec-review .widgetGalleryA > li .explain,
#sec-review .widgetGalleryA > li .summary,
#sec-review .widgetGalleryA > li .content,
#sec-review .widgetGalleryA > li .desc{
  white-space:normal !important;
  word-break:keep-all !important;
  overflow-wrap:anywhere !important;
}
/* 썸네일 컨테이너가 높이를 예약하지 않도록 */
/* 썸네일 컨테이너가 높이를 미리 예약하지 않도록 */
.review_carousel .thumb{
  height:auto !important; padding:0 !important;
  position:static !important; overflow:visible !important;
  background:none !important; line-height:0 !important;
  display:block !important; width:300px !important;
}

/* 이미지: 가로만 맞추고 세로는 자동 */
.review_carousel .thumb img{
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  display:block !important;
  margin:0 !important; border:0 !important; vertical-align:top !important;
}
/* REVIEW 캐러셀 뷰포트/트랙은 자동 높이 */
/* 뷰포트/트랙은 높이 자동 + 잘라내지 않음 */
#sec-review .sr-c-viewport,
#sec-review .sr-c-track{
  height:auto !important;
  overflow:visible !important;
}

/* li / 썸네일 컨테이너의 고정 높이/비율박스/마스크 제거 */
#sec-review ul.widgetGalleryA > li{
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}
#sec-review ul.widgetGalleryA > li .thumb{
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;             /* padding-top:100% 같은 비율박스 제거 */
  overflow:visible !important;
  position:static !important;
  background:none !important;
  line-height:0 !important;
}
#sec-review ul.widgetGalleryA > li .thumb::before,
#sec-review ul.widgetGalleryA > li .thumb::after{ content:none !important; display:none !important; }

/* 이미지: 크롭 금지, 세로 자동 */
#sec-review ul.widgetGalleryA > li .thumb img{
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;    /* cover로 덮어쓴 규칙 무효화 */
  display:block !important;
  margin:0 !important; border:0 !important; vertical-align:top !important;
}
#sec-review .widgetNavigator{display:none !important;}
#sec-review .sr-c-track .widgetNavigator{display:none !important;}

#sec-review .sr-c-track ul.widgetGalleryA > li{ margin-right:0 !important; }
#sec-review .sr-c-track ul.widgetGalleryA{ flex-direction: row !important; }


/* ========== SUNDAY RECORDS : 모바일 전용 패치 (<=768px) ========== */
@media (max-width: 768px){

  /* 공통 헤더(제목 + +SEE MORE) : SEE MORE를 작고 우측 끝에 */
  .sr-head { padding-right: 8px; }
  .sr-head .sr-title { font-size: 22px; line-height: 1.1; }
  .sr-head .sr-more{
    right: 8px; top: 2px;
    font-size: 12px; font-weight: 900; letter-spacing: 0.5px;
    line-height: 1; padding: 2px 0;
  }

  /* 섹션 1 : 풀폭 메인 슬라이드(가로 100% / 세로 자동) */
  .sr-hero-viewport{ height: auto !important; }
  .sr-hero-track{ height: auto; }
  .sr-hero-slide{ height: auto; }
  .sr-hero-slide img{
    width: 100%; height: auto;        /* 세로 자동 */
    object-fit: contain;               /* 크롭 방지 */
    display: block;
  }
  /* 히어로 좌우 화살표 : 모바일 크기/간격 축소, 화면 양끝 */
  .sr-hero .sr-edge svg{ width: 44px; height: 44px; }
  .sr-hero .sr-edge-prev{ left: 8px !important; }
  .sr-hero .sr-edge-next{ right: 8px !important; }

  /* 히어로 점 네비 : 좌하단 살짝 안쪽으로 */
  .sr-dots{ left: 12px; bottom: 12px; gap: 6px; }
  .sr-dot{ width: 8px; height: 8px; }

  /* 공통 캐러셀(STORE/ARCHIVES/REVIEW) : 좌우 버튼을 양끝에 고정 */
  .sr-carousel > .sr-c-prev{ left: 8px !important; }
  .sr-carousel > .sr-c-next{ right: 8px !important; }
  .sr-carousel .sr-edge svg{ width: 36px; height: 36px; }

  /* STORE 카드 칼럼 개수는 pages.css 기본 반응형을 존중(2→1열 전환) */

  /* ARCHIVES : 영상 슬라이드(보이는 1개) 상한폭 제어는 유지, 버튼만 양끝 */
  /* 별도 수정 불필요. 위 공통 캐러셀 규칙으로 정리됨 */

  /* REVIEW : +SEE MORE 작게 & 버튼 양끝 → 공통 규칙으로 해결 */

  /* COMMUNITY : 모바일 단일 컬럼 + 보더 정리 + 간격 정돈 */
  .sr-comm-rows{
    display: block;
    border-top: 0;
    padding: 8px 0;
  }
  .sr-col{
    padding: 0;
    margin: 0 0 16px;
    border-right: 0 !important;
  }
  .sr-col-1, .sr-col-2{ border-right: 0; }
  .sr-contact-grid{
    grid-template-columns: 1fr; gap: 8px;
    justify-items: center; align-items: stretch;
  }
  .sr-bank-strong{ font-size: 18px; }
}

/* 초소형(<=480px) 보완: 스토어/리뷰 1열 및 버튼 터치영역 유지 */
@media (max-width: 480px){
  .sr-carousel .sr-edge svg{ width: 32px; height: 32px; }
  .sr-item{ flex-basis: 100%; } /* pages.css 기본 규칙과 동일, 명시 강화 */
}
/* ===== 모바일: 하위 섹션 좌우 버튼을 화면 완전 양끝로 ===== */
@media (max-width:768px){
  .sr-carousel .sr-edge-prev,
  .sr-carousel .sr-c-prev{
    left: calc(20px - var(--sr-xpad, 60px)) !important;
  }
  .sr-carousel .sr-edge-next,
  .sr-carousel .sr-c-next{
    right: calc(20px - var(--sr-xpad, 60px)) !important;
  }
}
  
/* ===== ABOUT : 모바일(≤768px) 전용 풀 패치 ===== */
@media (max-width: 768px){

  /* 컨테이너 간격 축소 */
  .about-container{
    padding: 16px 16px 8px 8px!important;
    gap: 24px !important;
  }

  /* 제목: 정확히 가운데 + 조금 작게 */
  .about-container h2{
    text-align: center !important;
    font-size: 28px !important;       /* '조금' 축소 */
    line-height: 1.2 !important;
    margin: 16px auto 12px !important;
    width: fit-content !important;
    letter-spacing: .2px;
  }

  /* 1열로 쌓기(PC 순서 유지: 글 → 이미지) */
  .about-row{
    display: flex !important;
    flex-direction: column !important;   /* 한 줄로 쌓기 */
    align-items: stretch !important;
    gap: 14px !important;
    padding: 0 8px !important;
  }
  .about-left{
    order: 0 !important;
    flex: 1 1 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .about-right{
    order: 1 !important;
    flex: 1 1 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 이미지: 가로 100% ‘정말’ 꽉 차게 */
  .about-right img{
    display: block !important;
    width: 100% !important;       /* 부모 폭에 딱 맞춤 */
    max-width: 100% !important;
    height: auto !important;      /* 세로 자동 */
    margin: 0 auto !important;    /* 중앙 정렬(안전) */
    border-radius: 8px !important;
    object-fit: contain !important;/* 크롭 방지 */
  }

  /* 혹시 안쪽에 썸네일 래퍼가 있으면 중앙정렬 */
  .about-right .thumbs,
  .about-right .gallery{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }

  /* 본문: <br> 유지, 글자만 줄이기 */
  .about-left p{
    font-size: 12px !important;   /* 필요시 13.5~15로 조절 */
    line-height: 1.8 !important;
    letter-spacing: 0 !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    margin: 0 0 10px !important;
  }
  .about-left br{ display: inline !important; }

  /* 영문 섹션 배경/여백 미세 조정(있을 경우) */
  .about-en{ padding: 8px 0 !important; }
}


/* 극소 화면(≤360px)에서도 2열 유지 + 칩 더 컴팩트 */
@media (max-width: 360px){
  .store-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 10px !important;
  }
  .store-nav button,
  .store-nav a{ font-size: 13px !important; padding: 7px 12px !important; }
}

/* ===== COMMUNITY: 모바일(≤768px) 정리 ===== */
@media (max-width: 768px){

  /* 1) 레이아웃: 세로 스택 + 좌우 동일 여백 */
  .page-section{
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 16px !important;          /* ← 좌우 여백 통일 */
    box-sizing: border-box;
    margin-bottom: 28px !important;
  }

  /* 2) 위젯(왼쪽) : 폭 100% + 이미지/표도 폭 100% */
  .left-widget{ width: 100% !important; height: auto !important; }
  .left-widget img,
  .left-widget .zbxe_widget_output{      /* XE 위젯이 img로 출력될 때 */
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  /* 위젯이 리스트/테이블로 나올 경우 대비 */
  .left-widget .widgetA,
  .left-widget .widgetTableA{
    width: 100% !important;
    margin: 0 !important;
  }
  .left-widget .widgetTableA{ border-collapse: collapse; font-size: 14px; }

  /* 3) 오른쪽 정보 박스: 데스크톱용은 숨기고, 모바일용(.right-info2)만 사용 */
  .right-info{ display: none !important; }   /* 기존 PC 박스 숨김 */
  .right-info2{
    display: flex !important;
    width: 100% !important;
    padding: 16px !important;                /* ← 왼쪽과 동일 여백 */
    box-sizing: border-box;
    background: #f9f9f9;
    border-radius: 10px;
    flex-direction: column;
    gap: 8px;
    text-align: left;                         /* ← 왼쪽 정렬 */
  }
  .right-info2 a, .right-info2 strong{ color:#111; text-decoration:none; }
  .right-info2 .flip-clock{ justify-content:flex-start; }  /* 시계도 왼쪽 정렬 */

  /* 4) 타이포 / 간격 미세 보정 */
  .right-info2 strong{ font-size: 16px; font-weight: 700; }
  .separator{ margin: -2px 6px 0; } /* 시계 구분자 살짝 정렬 */
}

/* Renewal Main Banner Styles */
.sr-renewal-wrap { width: 100%; }
.sr-renewal-wrap.full { width: 100%; }
.sr-renewal-wrap.w1600 { max-width: 1600px; margin: 0 auto; }
.sr-renewal-wrap.w1200 { max-width: 1200px; margin: 0 auto; }
.sr-renewal-wrap.w1600, .sr-renewal-wrap.w1200 { padding: 0 15px; box-sizing: border-box; }
.sr-renewal-banner { width: 100%; margin-bottom: 0; }
.sr-renewal-item { display: block; width: 100%; overflow: hidden; line-height: 0; }
.sr-renewal-item img { width: 100%; height: auto; transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); }
.sr-renewal-item:hover img { transform: scale(1.02); }
@media screen and (max-width: 1024px) {
    .sr-renewal-wrap.w1600, .sr-renewal-wrap.w1200 { padding: 0; }
}