@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

* {
  font-family: 'Pretendard', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}

.pointer {
  cursor: pointer;
}

/* 기본 스타일 (Mobile: 800px 미만) */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0.75rem 1.5rem;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  background-color: #060807;
  z-index: 1000;
  box-sizing: border-box;
}

.mobilecon-logo {
  display: block;
  width: 8.125rem;
  height: 2rem;
  background: url('../assets/Mobilecon_Logo_Horizontal.svg') center / cover no-repeat;
}

.page-container {
  display: flex;
  width: 100%;
}

/* 인트로 섹션 */

.page-container.first { padding: 8.75rem 1.5rem 5rem 1.5rem; }

#first-section {
  display: flex;
  flex-flow: column wrap;
  align-content: center;
  background: linear-gradient(180deg, #060807 30%, #0A101E 42%, #0A101E 60%, #4C212F 94%);
}

.hero-image {
  display: block;
  width: 375px;
  height: 248px;
  margin: 0 -1.5rem;
  aspect-ratio: 62/41;
  background: url('../assets/hero-image.jpg') center / cover no-repeat;
}

.hero-contents {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.hero-texts {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.hero-texts h1 {
  color: #FFF;
  text-align: center;
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  letter-spacing: -0.05rem;
}

.hero-texts p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 145%;
  letter-spacing: -0.00563rem;
}

.hero-buttons {
  width: 100%;
  display: flex;
  flex-flow: column wrap;
  gap: 1rem;
}

.hero-buttons button { 
  padding: 0.75rem 1rem;
  color: #EEE;
  font-family: Inter;
  font-size: 1rem;
  border-radius: 0.75rem;
  font-weight: 500;
  line-height: 145%;
  letter-spacing: -0.005rem;
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(6px);
}

.btn-sell, #btn-sell { background: #FA3874; }


/* 인터렉션 바 */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.interaction-bar-area {
  display: flex;
  width: 100%;
  background-color: #1E2026;
  overflow: hidden;
}

.interaction-bar {
  display: flex;
  flex-flow: row nowrap;
  gap: 2.5rem;
  width: max-content;
  animation: marquee 20s linear infinite;
}

.interaction-bar li {
  display: flex;
  align-items: center;
  padding: 0.76188rem;
  gap: 0.375rem;
  flex-shrink: 0;
}

.ico-inter { 
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}

.interaction-bar p {
  color: #FFF;
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.00469rem;
}

/* 취급 상품 및 가격 섹션 */
#second-section {
  display: flex;
  padding: 5rem 1.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  align-self: stretch;
}

.second-texts {
  display: flex;
  width: 100%;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
}

.second-texts h1 {
  color: #1E2026;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.035rem;
}

.second-texts b {
  color: #FA3874;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.035rem;
}

.second-texts p {
  color: rgba(30, 32, 38, 0.55);
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.00469rem;
  word-break: keep-all;
}

.second-contents {
  width: 100%;
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}

.second-cards {
  display: flex;
  width: 100%;
  position: relative;
  flex-flow: column wrap;
  box-sizing: border-box;
}

.second-cards.best {
  border-radius: 1rem;
  border: 2px solid #FA3874;
  overflow: hidden;
}

.second-cards.best::before {
  content: "오늘기준 최고 비율!";
  height: 2.5rem;
  background: linear-gradient(125deg, #FA3874 21.35%, #FF8432 45.52%, #FA3874 61.08%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 1.08988rem;
  font-style: normal;
  font-weight: 700;
  line-height: 142.9%;
  border-radius: 0.85rem 0.85rem 0 0; 
  flex-shrink: 0;
}

.card-thumbnail {
  width: 100%;
  height: 17.25rem;
  box-sizing: border-box;
  overflow: hidden;
}

.second-cards.best .card-thumbnail {
  border-radius: 1rem 1rem 0 0;
  border-radius: 0;
}

.second-cards:not(.best) .card-thumbnail {
  border-radius: 1rem 1rem 0 0;
}

[data-brand] .card-thumbnail { 
  border-radius: 1rem 1rem 0 0;
  background-position: center;
  background-size: contain; 
  background-repeat: no-repeat;
}

[data-brand="lotte"] .card-thumbnail {
  background-color: #694A1E;
  background-image: url('../assets/card-thumb-lotte.jpg');
}

[data-brand="culture"] .card-thumbnail {
  background-color: #C11F1F;
  background-image: url('../assets/card-thumb-culture.jpg');
}

[data-brand="starbucks"] .card-thumbnail {
  background-color: #046244;
  background-image: url('../assets/card-thumb-starbucks.jpg');
}

[data-brand="cu"] .card-thumbnail {
  background-color: #552999;
  background-image: url('../assets/card-thumb-cu.jpg');
}

.card-description {
  display: flex;
  width: 100%;
  padding: 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  align-self: stretch;
  background: #FFF;
  border: 1px solid rgba(30, 32, 38, 0.10);
  border-radius: 0 0 1rem 1rem;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.02), 0 6px 12px 0 rgba(0, 0, 0, 0.03);
}

.best .card-description {border: none;box-shadow: none;}

.desc-percent {
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
  letter-spacing: -0.05rem;
}

[data-brand="lotte"] .desc-percent { color: #694A1E; }
[data-brand="culture"] .desc-percent { color: #FF3434; }
[data-brand="starbucks"] .desc-percent { color: #046244; }
[data-brand="cu"] .desc-percent { color: #552999; }

.description-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  align-self: stretch;
}

.desc-title {
  color: #1E2026;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 145%;
}

.desc-list li {
  color: #1E2026;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.005rem;
  position: relative;
  padding-left: 1rem;
}

.desc-list li::before {
  content: '✓'; /* 혹은 이미지: url('check.svg') */
  position: absolute;
  left: 0;
  color: #FA3874;
}

.desc-list b{ font-weight: 700; }

/* 방법 안내 섹션 */
#third-section {
  display: flex;
  padding: 5rem 1.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  align-self: stretch;
  background: rgba(30, 32, 38, 0.05);
}

.section-top {
  width: 100%;
  display: flex;
  flex-flow: column wrap;
  gap: 2rem;
}

.top-texts h2 {
  color: #1E2026;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.035rem;
}

h2.accent { color: #FA3874; }

.section-top button {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  color: #FFF;
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 145%;
  letter-spacing: -0.005rem;
}

.section-bottom { width: 100%; }

.process-list {
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
  gap: 0.5rem;
  align-self: stretch;
}

.process-list li {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
  border-radius: 1rem;
  background: #FFF;
}

.process-list li .ico {
  width: 1.625rem;
  height: 1.625rem;
  flex-shrink: 0;
}

.ico.one { background: url(../assets/ico-one.svg) center / cover no-repeat;}
.ico.two { background: url(../assets/ico-two.svg) center / cover no-repeat;}
.ico.three { background: url(../assets/ico-three.svg) center / cover no-repeat;}

.process-list li p {
  color: #1E2026;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.015rem;
}

/* 취급 브랜드 안내바 */
.brand-interaction-bar-area {
  display: flex;
  padding: 2.5rem 1.5rem;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  align-self: stretch;
  width: 100%;
  overflow: hidden;
}

.brand-interaction-bar-area h5 {
  color: #8E8E8E;
  text-align: center;
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.01406rem;
}

.brand-interaction-bar {
  width: max-content;
  display: flex;
  flex-flow: row nowrap;
  gap: 0.5rem;
  animation: marquee 20s linear infinite;
}

.brand-logo {
  width: auto;
  height: 4rem;
  flex-shrink: 0;
}
/* 유의 사항 섹션 */
#fourth-section {
  display: flex;
  padding: 2.5rem 1.5rem;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  align-self: stretch;
  background: rgba(30, 32, 38, 0.05);
}

.title-wrap {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
  align-self: stretch;
}

.ico-warn { 
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  background: url(../assets/ico-warn.svg) center / cover no-repeat;
}
.title-wrap h1 {
  color: #1E2026;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 2.275rem */
  letter-spacing: -0.035rem;
}

.notice-wrap {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  align-self: stretch;
}

.notice-wrap dl {
  display: flex;
  padding-top: 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  align-self: stretch;
  border-top: 1px solid rgba(30, 32, 38, 0.15);
}


.notice-wrap dt {
  color: #1E2026;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.03rem;
}

.notice-wrap dd {
  color: rgba(30, 32, 38, 0.55);
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 1.40625rem */
  letter-spacing: -0.00469rem;
}

.notice-wrap dd ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin: 1rem 0;
}
/* 푸터 영역 */
.footer-area {
  display: flex;
  padding: 0 1.5rem 5rem 1.5rem;
  flex-flow: column wrap;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  background: #1E2026;
  gap: 1.5rem;
}

.footer-contents-top {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  padding-top: 5rem;
}

.mobilecon-logo-dark {
  width: 10.1875rem;
  height: 2.5rem;
  background: url(../assets/logo-mobilecon-dark.svg) center / contain no-repeat;
}

.footer-contents-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  align-self: stretch;
}

.footer-upper-contents {
  width: 100%;
}
.footer-under-contents {
  width: 100%;
  display: flex;
  flex-flow: column wrap;
  gap: 2.5rem;
}

.footer-contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.5rem;
  align-self: stretch;
}

.footer-contents h4 {
  color: #FFF;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 145%;
  letter-spacing: -0.005rem;
  padding-bottom: 1rem;
}

.footer-contents p {
  color: rgba(255, 255, 255, 0.60);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 145%; /* 1.45rem */
  letter-spacing: -0.005rem;
}

/* Tablet (800px ~ 1279px) */
@media screen and (min-width: 800px) {
  /* 헤더 영역 */
  header { padding: 0.75rem 2rem; }
  .mobilecon-logo { width: 8.125rem; height: 2rem; }
  .hero-image {width: 580px;height: 395px;}
  /* 인트로 섹션 */
  .page-container.first { padding: 8.75rem 2rem; }
  .hero-image { width: 36.25rem; height: 24.6875rem; margin: 0 auto; }
  .hero-texts h1 { font-size: 3.5rem; letter-spacing: -0.0875rem; }
  .hero-texts p { font-size: 1.25rem; letter-spacing: -0.00625rem; }
  .hero-buttons { flex-flow: row wrap; justify-content: center;}
  .hero-buttons button { font-size: 1.125rem; letter-spacing: -0.00563rem; }
  /* 인터렉션 바  */
  .interaction-bar { gap: 3.5rem; }
  .interaction-bar li { padding: 0.85669rem; }
  .interaction-bar p { font-size: 1rem; letter-spacing: -0.005rem; }
  /* 취급 상품 및 가격 섹션 */
  #second-section { padding: 6rem 4rem; gap: 5rem;}
  .second-texts h1 { font-size: 2.5rem; letter-spacing: -0.05rem; }
  .second-texts b { font-size: 2.5rem; letter-spacing: -0.05rem; }
  .second-texts p { font-size: 1.25rem; }
  .second-contents {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 1:1 비율로 2열 배치 */
    align-items: end;
    gap: 1rem;
  }
  .second-cards.best::before { font-weight: 600; }
  .card-description { gap: 1rem; }
  .desc-percent { font-size: 3rem; letter-spacing: -0.06rem;}
  .desc-list li { font-size: 1.0625rem; letter-spacing: -0.00531rem; padding-left: 1.2rem;}
  /* 방법 안내 섹션 */
  #third-section { padding: 6rem 2rem; }
  .top-texts h2 { font-size: 2rem; line-height: 120%; letter-spacing: -0.04rem; }
  .section-top button { 
    width: fit-content;
    font-size: 1.125rem;
    letter-spacing: -0.00563rem;
  }
  .process-list { gap: 1rem; }
  .process-list li p { font-size: 1.25rem; letter-spacing: -0.01875rem; }
  /* 취급 브랜드 안내바 */
  .brand-interaction-bar-area { padding: 4rem 2rem; gap: 1rem;}
  .brand-interaction-bar-area h5 { font-size: 1.125rem; letter-spacing: -0.01688rem;}
  .brand-interaction-bar { gap: 0.75rem; }
  .brand-logo {height: 4.49763rem;}
  /* 유의 사항 섹션 */
  #fourth-section { padding: 6rem 2rem; gap: 2rem;}
  .title-wrap { gap: 1rem; }
  .ico-warn { width: 2rem; height: 2rem;}
  .title-wrap h1 { font-size: 2rem; line-height: 120%; letter-spacing: -0.04rem;}
  .notice-wrap dl { gap: 1rem }
  .notice-wrap dt { font-size: 1.0625rem; letter-spacing: -0.03188rem; }
  .notice-wrap dd { font-size: 1rem; letter-spacing: -0.03rem; }
  /* 푸터 영역 */
  .footer-area { padding: 0 7.5rem 5rem 7.5rem; }
  .footer-contents-wrap { gap: 3.5rem; padding-bottom: 5rem; }
  .footer-under-contents {
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3.5rem;
  }
  .footer-contents { justify-content: flex-start; }
  .footer-contents h4 {}
  .footer-contents p {}
}

/* Desktop (1280px 이상) */
@media screen and (min-width: 1280px) {
  /* 헤더 영역 */
  header { padding: 0.75rem 4rem; }
  .mobilecon-logo { width: 8.125rem; height: 2rem; }
  /* 인트로 섹션 */
  .page-container.first { padding: 8.75rem 4rem; }
  .hero-image {width: 960px;height: 445px; background-size: contain;}
  .hero-texts h1 { font-size: 4rem; letter-spacing: -0.1rem; }
  .hero-texts p { font-size: 1.5rem; letter-spacing: -0.0075rem; }
  .hero-buttons { flex-flow: row wrap; justify-content: center;}
  .hero-buttons button { font-size: 1.125rem; letter-spacing: -0.00563rem; }
  /* 인터렉션 바  */
  .interaction-bar { gap: 4rem; }
  .interaction-bar li { padding: 0.75rem 1rem; }
  .interaction-bar p { font-size: 1.125rem; letter-spacing: -0.00563rem; }
  /* 취급 상품 및 가격 섹션 */
  #second-section { padding: 7.5rem 4rem; gap: 5rem;}
  .second-texts h1 { font-size: 2.5rem; letter-spacing: -0.05rem; }
  .second-texts b { font-size: 2.5rem; letter-spacing: -0.05rem; }
  .second-texts p { font-size: 1.25rem; }
  .second-contents {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 1:1 비율로 2열 배치 */
    align-items: end;
    gap: 1rem;
  }
  .second-cards.best::before { font-weight: 600; }
  .card-description { min-height: 15.25rem; gap: 1rem; }
  .desc-percent { font-size: 3.5rem; letter-spacing: -0.07rem;}
  .desc-list li { font-size: 1.0625rem; letter-spacing: -0.00531rem; padding-left: 1.2rem;}
  /* 방법 안내 섹션 */
  #third-section { padding: 7.5rem 4rem; gap: 5rem; }
  .section-top, .section-bottom { max-width: 50.75rem; }
  .top-texts h2 { font-size: 2.5rem; line-height: 120%; letter-spacing: -0.04rem; }
  .section-top button { 
    width: fit-content;
    font-size: 1.125rem;
    letter-spacing: -0.00563rem;
  }
  .process-list { gap: 0.75rem; }
  .process-list li p { font-size: 1.375rem; letter-spacing: -0.02063rem; }
  /* 취급 브랜드 안내바 */
  .brand-interaction-bar-area { padding: 5rem 2rem; gap: 2rem;}
  .brand-interaction-bar-area h5 { font-size: 1.125rem; letter-spacing: -0.01688rem;}
  .brand-interaction-bar { gap: 1.5rem; }
  .brand-logo { height: 5.25rem;}
  /* 유의 사항 섹션 */
  #fourth-section { padding: 7.5rem 4rem; gap: 2rem; }
  .title-wrap { gap: 1rem; }
  .ico-warn { width: 2.5rem; height: 2.5rem;}
  .title-wrap, .notice-wrap { max-width: 50.75rem; margin: 0 auto;}
  .title-wrap h1 { font-size: 2.5rem; line-height: 120%; letter-spacing: -0.05rem;}
  .notice-wrap dl { gap: 1rem }
  .notice-wrap dt { font-size: 1.0625rem; letter-spacing: -0.03188rem; }
  .notice-wrap dd { font-size: 1rem; letter-spacing: -0.03rem; }
  /* 푸터 영역 */
  .footer-area { padding: 0 7.5rem 5rem 7.5rem; }
  .footer-contents-wrap {
    flex-flow: row wrap;
    gap: 3.5rem;
    padding-bottom: 5rem; 
  }
  .footer-upper-contents, .footer-under-contents { width: auto; }
  .footer-under-contents { flex-flow: row wrap; justify-content: space-between; align-items: flex-start; gap: 3.5rem;}
  .footer-contents { justify-content: flex-start; }
}