@charset "utf-8";
/* ============================================================
   SEMIWON FOOD — components.css
   제품카드 / 뉴스카드 / 폼 메시지 등 페이지 공용 컴포넌트
   ============================================================ */

/* ------------------------------------------------------------
   [1] 제품 카드
------------------------------------------------------------ */
.p-card {
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.p-card:hover { transform: translateY(-0.25rem); box-shadow: var(--sh-md); }

.p-card__thumb { display: block; position: relative; }
.p-card__thumb .ph { aspect-ratio: 4/3; }
.p-card__thumb .badge { position: absolute; left: 0.9rem; top: 0.9rem; z-index: 2; }

.p-card__body { padding: 0.8rem 0.15rem 0; display: flex; flex-direction: column; flex: 1; }
.p-card__name {
  font-size: calc(var(--u) * 12.5071); font-weight: 700; letter-spacing: -0.03em;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.p-card__tags { margin-top: 0.45rem; }
.p-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; margin-top: auto; padding-top: 0.8rem;
}
.p-card__spec { font-size: calc(var(--u) * 9.5643); color: var(--gray-500); white-space: nowrap; }

/* 목록형(그리드) 카드 — 흰 카드 배경 + 테두리 */
.p-card--boxed {
  border: 1px solid var(--line-soft);
  padding: 0.7rem 0.7rem 0.9rem;
}
.p-card--boxed .p-card__thumb .ph { border-radius: var(--r-img); }
.p-card--boxed .p-card__body { padding-inline: 0.1rem; }
.p-card--boxed .p-card__foot {
  border-top: 1px solid var(--line-soft);
  margin-top: 0.8rem; padding-top: 0.7rem;
}

/* 플랫 카드 (메인 추천제품) — 카드 배경 없이 섹션 바탕 위에 바로 얹는다.
   배지가 이미지 위가 아니라 이미지 아래·제품명 위로 내려간다. */
.p-card--flat {
  background: none;
  border-radius: 0;
  overflow: visible;
}
.p-card--flat:hover { transform: translateY(-0.25rem); box-shadow: none; }
.p-card--flat .p-card__thumb .ph { aspect-ratio: 1/1; border-radius: var(--r-img); }
.p-card--flat .p-card__body { padding: 1.05rem 0 0; }

.p-card--flat .badge {
  align-self: flex-start;
  height: 1.2rem; padding-inline: 0.6rem;
  border-radius: var(--r-full);     /* 999px */
  font-size: calc(var(--u) * 8.0929);               /* 11px */
  font-weight: 600;
}
.p-card--flat .badge--rec { background: #1E5040; color: #fff; }
.p-card--flat .badge--hit { background: #B4CB68; color: #fff; }

.p-card--flat .p-card__name {
  margin-top: 0.55rem;
  font-size: calc(var(--u) * 13.5371);               /* 18.39px */
  font-weight: 600; color: #18211E;
}
.p-card--flat .p-card__tags { margin-top: 0.5rem; }
.p-card--flat .tag {
  height: 1.35rem; padding-inline: 0.62rem;
  background: #F2F2F2;
  font-size: calc(var(--u) * 9.9321);              /* 13.49px */
  font-weight: 500; color: #959595;
}
.p-card--flat .p-card__foot {
  margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1.23px solid #F1F5F2;
}
.p-card--flat .p-card__spec {
  font-size: calc(var(--u) * 10.815);              /* 14.71px */
  font-weight: 500; color: #A0A8A2;
}
.p-card--flat .link-arrow {
  font-size: calc(var(--u) * 10.815);              /* 14.71px */
  font-weight: 500; color: #1E5040;
}

/* 가로형 카드 (관련 제품) */
.p-card--row {
  flex-direction: row; align-items: stretch; gap: 1rem;
  border: 1px solid var(--line-soft);
  padding: 0.7rem;
  background: #fff;
}
.p-card--row .p-card__thumb { flex: none; width: 9rem; }
.p-card--row .p-card__thumb .ph { aspect-ratio: 4/3; height: 100%; }
.p-card--row .p-card__body { padding: 0.3rem 0.4rem 0.3rem 0; }
.p-card--row .p-card__foot { border-top: 1px solid var(--line-soft); padding-top: 0.6rem; }

@media (max-width: 990px) {
  /* 시안 실측 : 이미지밑 13 → 배지 → 22 → 제품명 → 22 → 태그 → 36 → 스펙 */
  .p-card__name { font-size: calc(var(--u) * 12.1); }
  .p-card__spec { font-size: calc(var(--u) * 9); }
  .p-card--flat .p-card__body { padding-top: calc(var(--u) * 9); }
  .p-card--flat .p-card__name { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 12.1); }
  .p-card--flat .p-card__tags { margin-top: calc(var(--u) * 6); }
  .p-card--flat .p-card__foot { margin-top: calc(var(--u) * 12); padding-top: calc(var(--u) * 10); }
  .p-card__foot .link-arrow { font-size: calc(var(--u) * 9); }
  /* --flat 규칙이 더 구체적이라 함께 낮춘다 */
  .p-card--flat .p-card__spec,
  .p-card--flat .link-arrow { font-size: calc(var(--u) * 9); }
  /* 관련 제품 카드는 모바일에서도 가로 배치 유지 (이미지 좌 / 정보 우) */
  .p-card--row { flex-direction: row; align-items: stretch; gap: calc(var(--u) * 24); padding: calc(var(--u) * 20); }
  .p-card--row .p-card__thumb { flex: none; width: calc(var(--u) * 122); }
  .p-card--row .p-card__thumb .ph { aspect-ratio: 1 / 1; height: auto; }
  .p-card--row .p-card__body { padding: 0; }
}

/* ------------------------------------------------------------
   [2] 뉴스 카드
------------------------------------------------------------ */
.n-card { display: flex; flex-direction: column; }
.n-card__thumb { display: block; }
.n-card__thumb .ph { aspect-ratio: 16/10; border-radius: 12.77px; }
.n-card__cat {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  height: 1.25rem; padding-inline: 0.55rem;
  margin-top: 1.35rem;
  border-radius: var(--r-full);     /* 999px */
  font-size: calc(var(--u) * 7.3571);                /* 10px */
  font-weight: 600;
}
.n-card__cat[data-cat="new"]     { background: #E8F5EC; color: #1E5040; }
.n-card__cat[data-cat="event"]   { background: #FEF3EE; color: #E06235; }
.n-card__cat[data-cat="company"] { background: #F1F5F2; color: #6A7370; }
.n-card__cat[data-cat="notice"]  { background: #F1EEF7; color: #5C4E7B; }
.n-card__title {
  margin-top: 0.8rem;
  font-size: calc(var(--u) * 13.2429);                /* 18px */
  font-weight: 700; line-height: 1.4; letter-spacing: -0.03em;
  color: #18211E;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .2s var(--ease);
}
.n-card:hover .n-card__title { color: var(--brand); }
.n-card__summary {
  margin-top: 0.6rem;
  font-size: calc(var(--u) * 10.3);                /* 14px */
  line-height: 1.65; color: #6A7370;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.n-card__date {
  display: block; margin-top: 0.55rem;
  font-size: calc(var(--u) * 8.0929);               /* 11px */
  color: #A0A8A2;
}

@media (max-width: 990px) {
  .n-card__title { font-size: calc(var(--u) * 13.9786); }
  .n-card__summary {
    margin-top: calc(var(--u) * 4);                 /* 제목과의 간격 축소 */
    font-size: calc(var(--u) * 11.4771);
    line-height: calc(var(--u) * 15.65);            /* 지정값 15.65px */
  }
  .n-card__date { font-size: calc(var(--u) * 8.4); }
  .n-card__cat { font-size: calc(var(--u) * 9.1229); height: 1.4rem; margin-top: 1rem; }
}

/* ------------------------------------------------------------
   [3] 결과 없음
------------------------------------------------------------ */
.empty {
  grid-column: 1 / -1;
  padding: 4rem 1rem;
  text-align: center;
  color: var(--gray-500);
  font-size: calc(var(--u) * 11.7714);
}
.empty strong { display: block; margin-bottom: 0.4rem; font-size: calc(var(--u) * 13.2429); color: var(--ink-80); font-weight: 700; }

/* ------------------------------------------------------------
   [4] 폼 안내 메시지
------------------------------------------------------------ */
.form-msg {
  display: none;
  margin-top: 0.9rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--r-sm);
  background: var(--green-050);
  border: 1px solid var(--green-100);
  font-size: calc(var(--u) * 10.0057); line-height: 1.6; color: var(--green-700);
}
.form-msg.is-show { display: block; }
/* 어두운 배경 폼(메인 제휴문의) 위에서 */
.inquiry__card .form-msg,
.quickbar .form-msg {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.9);
}
@media (max-width: 990px) { .form-msg { font-size: calc(var(--u) * 11.0357); } }

/* ------------------------------------------------------------
   [5] 페이지 상단 타이틀 (비주얼 없는 페이지)
------------------------------------------------------------ */
.page-head { margin-bottom: 2rem; }
.page-head--center { text-align: center; }
.page-head__title {
  margin-top: 0.4rem;
  font-size: calc(var(--u) * 30.9);               /* 42px : 페이지 최대 */
  font-weight: 800; letter-spacing: -0.04em;
  color: #000;
}
.page-head__title .accent { color: #1E5040; }
.page-head__desc { margin-top: 0.7rem; font-size: calc(var(--u) * 11.7714); color: #6A7370; line-height: 1.8; }
/* 설명문이 큰 페이지(위치안내 등) */
.page-head--lg .page-head__desc { font-size: calc(var(--u) * 17.6571); }   /* 24px */

@media (max-width: 990px) {
  .page-head { margin-bottom: 1.4rem; }
  /* 시안 실측 : 타이틀 잉크 높이 23px · "세미원 제품" 폭 107px → 25px, 강조색 없음 */
  .page-head__title { font-size: calc(var(--u) * 25); color: #222A27; letter-spacing: -0.02em; }
  .page-head__title .accent { color: inherit; }
  .page-head__desc { font-size: calc(var(--u) * 11.7714); }
  .page-head--lg .page-head__desc { font-size: calc(var(--u) * 12.7); }   /* 시안 실측 */
}

/* ------------------------------------------------------------
   [6] 거래처 로고 마퀴 — 메인 TRUSTED BY / 브랜드 주요 거래처 공용
------------------------------------------------------------ */
.trusted__track-wrap { margin-top: 1.9rem; position: relative; overflow: hidden; }

/* 오른쪽으로 흐르는 무한 반복 */
.trusted__track {
  display: flex;
  width: max-content;
  animation: marquee-right 40s linear infinite;
}
.trusted__track:hover { animation-play-state: paused; }
@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.trusted__item {
  flex: none;
  width: 14.15rem; height: 4.7rem;   /* 283 × 94 @1920 */
  margin-inline: 0.35rem;            /* 좌우 합쳐 gap 14px */
  display: flex; align-items: center; justify-content: center;
  padding: 0.8rem 1.4rem;
  background: #fff;
  border: 1px solid #EFEFEB;
  border-radius: 4px;
}
.trusted__item img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.trusted__item .txt {
  font-size: calc(var(--u) * 10.5943); font-weight: 700; color: var(--gray-500); letter-spacing: -0.01em;
}

@media (max-width: 990px) {
  /* 한 화면에 2.4장이 보이도록 카드 폭을 화면 폭에서 역산한다.
     카드 하나가 차지하는 폭 = width + 좌우 margin(5) → (width + 5) * 2.4 = 100vw */
  .trusted__item {
    width: calc(100vw / 2.4 - var(--u) * 5);
    height: calc(var(--u) * 56);
    margin-inline: calc(var(--u) * 2.5);
    padding: calc(var(--u) * 4) calc(var(--u) * 8);
  }
  .trusted__item .txt { font-size: calc(var(--u) * 10.5943); }
}
@media (prefers-reduced-motion: reduce) {
  .trusted__track { animation: none; }
}

/* ------------------------------------------------------------
   [7] 대표번호 안내 — 연락처 페이지 / 문의 폼 자리 공용
------------------------------------------------------------ */
/* 문의 폼을 걷어낸 자리의 전화 안내 패널 */
.tel-panel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  padding: 2.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-img);
  background: #FAFAFA;
}
.tel-panel .tel-box { padding: 1.1rem 1.8rem; }
.tel-panel__sub { font-size: calc(var(--u) * 10.3); line-height: 1.7; color: var(--gray-700); }

/* 문의 페이지에서는 패널 내용을 가운데로 */
.contact .tel-panel { align-items: center; text-align: center; }
@media (max-width: 990px) {
  .tel-panel { padding: 1.4rem; align-items: stretch; }
  .tel-panel .tel-box { justify-content: center; }
}
.tel-box {
  flex: none;
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1rem 1.6rem;
  border-radius: 6.96px;
  background: linear-gradient(270deg, #37796D 0%, #0E5D4E 100%);
  color: #fff;
}
.tel-box__label {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  font-size: calc(var(--u) * 11.845);             /* 16.1px */
  font-weight: 800; color: #FFFFFF;
}
.tel-box__label svg { width: 1.1rem; height: 1.1rem; }
.tel-box__label img { width: 2rem; height: auto; }
.tel-box__num {
  font-size: calc(var(--u) * 28.325);             /* 38.49px */
  font-weight: 800; letter-spacing: -0.03em; color: #FFFFFF;
}

@media (max-width: 990px) {
  .tel-box { width: 100%; justify-content: center; padding: 0.9rem 1rem; }
  .tel-box__num { font-size: calc(var(--u) * 20.6); }
}

/* ------------------------------------------------------------
   [8] 유통 채널 4분할 — 메인 제휴문의 / 브랜드 주요 거래처 공용
------------------------------------------------------------ */
.channels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.channel { text-align: center; }
.channel__ico {
  height: 2.6rem;
  display: flex; align-items: center; justify-content: center;
}
.channel__ico img { max-height: 100%; width: auto; object-fit: contain; }
.channel__name {
  margin-top: 0.7rem;
  font-size: calc(var(--u) * 13.2429);                /* 18px */
  font-weight: 600; color: #000;
}
.channel__sub {
  margin-top: 0.25rem;
  font-size: calc(var(--u) * 10.3);                /* 14px */
  color: rgba(0, 0, 0, .5);                        /* PC·모바일 공통 */
}

@media (max-width: 990px) {
  /* 시안 실측 : 2열 · 아이콘 60px · 이름 잉크 53px · 셀 중심 x109 / x300 */
  .channels {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--u) * 74) 0;
    margin-inline: calc(var(--u) * -14);
  }
  .channel { position: relative; }
  .channel:nth-child(odd)::after {           /* 열 사이 세로 구분선 */
    content: ""; position: absolute; right: 0; top: calc(var(--u) * -10); bottom: calc(var(--u) * -10);
    border-right: 1px solid rgba(0, 0, 0, .09);
  }
  .channel:nth-child(n+3)::before {          /* 행 사이 가로 구분선 */
    content: ""; position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12);
    top: calc(var(--u) * -37);
    border-top: 1px solid rgba(0, 0, 0, .09);
  }
  .channel__ico { height: calc(var(--u) * 60); }
  /* 로켓프레시 로고는 다른 것보다 커 보여 조금 줄인다 */
  .channel__ico img[alt="로켓프레시"],
  .channel__ico img[alt="Rocket Fresh"] { max-height: 74%; }
  .channel__name { font-size: calc(var(--u) * 16.4); margin-top: calc(var(--u) * 26); }
  .channel__sub { font-size: calc(var(--u) * 12.4); margin-top: calc(var(--u) * 7); line-height: 1.35; }
}
@media (max-width: 500px) {
  /* 접은 모바일도 동일 2열 구성을 그대로 쓴다 */
}