@charset "utf-8";
/* =====================================================================
   components.css
   여러 페이지에서 공유하는 컴포넌트 · 테마 변수 · 유틸리티
   - 기존 naver-* 변수 → jh-* 로 통합 (진흥 브랜딩)
   - 각 페이지 CSS에서 중복 정의하던 것들을 한곳으로
   ===================================================================== */


/* ==========  1. 확장 테마 변수 (진흥 브랜드)  ========== */
:root{
  /* 브랜드 그린 */
  --jh-green:        #03a94d;
  --jh-green-weak:   rgba(3,199,90,.10);

  /* 배경 · 라인 · 서피스 */
  --jh-bg:           #f5f6f7;
  --jh-line:         #e5e7eb;
  --jh-soft:         #f2f4f6;

  /* 포인트 컬러 */
  --jh-blue:         #1f6fff;
  --jh-red:          #ef4444;
}


/* ==========  2. 폼 필드 시스템 (.c-field)  ========== */

.c-field{
  display: grid;
  gap: 8px;
}
.c-field__label{
  font-size: 13px;
  font-weight: 700;
  color: #374151;
}
.c-field__label small{ font-weight: 500; }
.c-field__label b{ color: red; }

.c-field__input,
.c-field__textarea,
.c-field__select{
  width: 100%;
  min-height: 54px;
  padding: 15px 16px;
  border: 1px solid #d7dde5;
  border-radius: 14px;
  background: #fff;
  color: #111827;
  font-size: 15px;
  font-weight: 500;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.c-field__input::placeholder,
.c-field__textarea::placeholder{
  color: #9ca3af;
  font-size: 13px;
  font-style: italic;
}
.c-field__input:focus,
.c-field__textarea:focus,
.c-field__select:focus{
  border-color: #111827;
  box-shadow: 0 0 0 3px rgba(17,24,39,.08);
}
.c-field__input:disabled{
  background: #f3f4f6;
  color: #9ca3af;
}
.c-field__input.is-readonly{
  background: #f8fafc;
  color: #111827;
}
.c-field__input.is-readonly:focus{
  border-color: #d7dde5;
  box-shadow: none;
}
.c-field__textarea{
  resize: vertical;
  min-height: 92px;
}
.c-field__select{
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%),
                    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px),
                       calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

/* 에러 상태 */
.c-field.is-error .c-field__input,
.c-field__input.is-invalid,
.c-field__textarea.is-invalid,
.c-field__select.is-invalid{
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,.08);
}
.c-field__error{
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: #dc2626;
  padding-left: 5px;
}
.c-field__feedback{
  min-height: 18px;
  font-size: 12px;
  line-height: 1.5;
  color: #dc2626;
}
.c-field__feedback--block{
  margin-top: -8px;
  min-height: 18px;
}
.c-field__help{
  display: flex;
  justify-content: flex-end;
  font-size: 12px;
  color: #6b7280;
}
.c-field__help--start{
  justify-content: flex-start;
}

/* 우편번호/검색 버튼 안쪽에 넣는 패턴 */
.c-field__zipsearch{ position: relative; }
.c-field__input--action{ padding-right: 52px; cursor: pointer; }
.c-field__iconbtn{
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border: 0; border-radius: 10px;
  background: #f3f4f6; color: #374151;
  display: inline-flex; align-items: center; justify-content: center;
}
.c-field__iconbtn .material-symbols-outlined{ font-size: 20px; }

/* 인라인 필드 (입력 + 버튼 나란히) */
.c-inline-field{
  display: grid;
  grid-template-columns: minmax(0,1fr) 118px;
  gap: 10px;
  align-items: center;
}
.c-inline-field__btn{
  min-height: 54px;
  border-radius: 14px;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  flex: 0 0 auto;
}

@media (max-width: 420px){
  .c-inline-field{ grid-template-columns: minmax(0,1fr) 104px; }
}

/* 체크라인 (동의 등) */
.c-inline-check{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}
.c-inline-check input{ accent-color: #111827; }

/* 동의 박스 */
.c-agree{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fafafa;
}
.c-agree__check{ margin-top: 2px; accent-color: #111827; }
.c-agree__text{
  font-size: 14px;
  line-height: 1.55;
  color: #374151;
  font-weight: 600;
  word-break: keep-all;
}
.c-agree.is-error{
  border-color: #dc2626;
  background: #fff7f7;
}

/* 체크라인 (주문서 동의) */
.c-checkline{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: #111827;
}
.c-checkline input{ margin-top: 2px; accent-color: #111827; }

/* ==========  4. 페이지 쉘 + 카드 (회원 계열 공통)  ========== */
/* login / join / join-verify / member-recovery 에서 공유 */

.c-page-shell{
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
}
.c-page-shell--wide{ max-width: 720px; }

.c-page-card{
  width: 100%;
  display: grid;
  gap: 16px;
  padding: 16px 20px 22px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  box-shadow: 0 6px 22px rgba(15,23,42,.06);
}
.c-page-card.is-no-border-top{
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.c-page-card__head{ display: grid; gap: 8px; }
.c-page-card__ttl{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #111827;
}
.c-page-card__desc{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
  word-break: keep-all;
}
.c-page-card__submit{
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 14px;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
}
.c-page-card__submit:disabled{ opacity: .65; }

.c-page-card__note{
  margin: 2px 0 0;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
  font-size: 12px;
  line-height: 1.65;
  color: #6b7280;
  text-align: center;
  word-break: keep-all;
}

@media (min-width: 768px){
  .c-page-card{ padding: 34px 30px 26px; }
}

/* ==========  5. 알림 박스 (에러 / 상태 / 정보)  ========== */

.c-alert{
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
}
.c-alert--error{ background: #fef2f2; color: #b91c1c; }
.c-alert--info{  background: #eff6ff; color: #1d4ed8; }
.c-alert--success{ background: #ecfdf5; color: #047857; }
.c-alert--warn{ background: #fff8e8; border: 1px solid #f4d9a6; color: #7c4a03; }
.c-alert.is-info{  background: #eff6ff; color: #1d4ed8; }
.c-alert.is-success{ background: #ecfdf5; color: #047857; }

/* ==========  6. 버튼 확장  ========== */

.c-btn--dark{  background: #111827; color: #fff; }
.c-btn--line{  border: 1px solid #d1d5db; background: #fff; color: #111827; }
.c-btn--green{ background: var(--jh-green); color: #fff; border: 1px solid var(--jh-green); }
.c-btn--ghost-green{
  border: 1px solid rgba(3,169,77,.55);
  background: #fff;
  color: #111;
}

/* ==========  7. 스켈레톤 로딩  ========== */

.c-skel{
  border-radius: 12px;
  border: 1px solid var(--jh-line);
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.55) 50%,
      rgba(255,255,255,0) 100%
    ),
    #e9edf1;
  background-size: 200% 100%;
  animation: c-skel-shimmer 1.1s linear infinite;
}
.c-skel--sm{ height: 140px; }
.c-skel--md{ height: 180px; }
.c-skel--round{ border-radius: 14px; }

@keyframes c-skel-shimmer{
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ==========  8. 빈 상태  ========== */

.c-empty{
  padding: 48px 20px 40px;
  text-align: center;
}
.c-empty__title{
  margin: 0;
  color: #111;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.c-empty__desc{
  margin: 10px 0 0;
  color: rgba(0,0,0,.58);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.02em;
}
.c-empty__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 144px;
  height: 44px;
  margin-top: 20px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--jh-line);
  background: #fff;
  color: #111;
  font-weight: 700;
  text-decoration: none;
}
.c-empty__btn:active{ background: rgba(0,0,0,.04); }

/* ==========  9. 하단 고정 액션 바  ========== */

.c-fixedbar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: calc(var(--z-nav) + 1);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  letter-spacing: -.02em;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -5px 20px rgba(0,0,0,.04);
}
.c-fixedbar__summary{
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 8px var(--space-3) 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: transparent;
}
.c-fixedbar__summary-key{
  color: #121212;
  font-weight: 700;
  font-size: 15px;
}
.c-fixedbar__summary-val{
  color: #111;
  font-weight: 700;
  font-size: 20px;
}
.c-fixedbar__btns{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px var(--space-3) calc(10px + env(safe-area-inset-bottom));
  display: grid;
  gap: 10px;
  font-size: 17px;
}
.c-fixedbar__btns--split{
  grid-template-columns: 1fr 1.4fr;
}
.c-fixedbar__btns--full{
  grid-template-columns: 1fr;
}
.c-fixedbar__btn{
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
}
.c-fixedbar__btn--ghost{
  border: 1px solid rgba(3,169,77,.55);
  background: #fff;
  color: #111;
}
.c-fixedbar__btn--primary{
  border: 1px solid var(--jh-green);
  background: var(--jh-green);
  color: #fff;
}
.c-fixedbar__btn:active{ transform: translateY(1px); }
.c-fixedbar__btn:disabled{ opacity: .55; }
.c-fixedbar__btn:not(:disabled):active{ transform: translateY(1px); }

.c-fixedbar__summary-row{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  color: #111827;
}
.c-fixedbar__summary-row b{
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}
.c-fixedbar__chev{
  color: rgba(0,0,0,.55);
  font-size: 22px;
}
.c-fixedbar__btntxt{
  display: inline-block;
  vertical-align: middle;
  padding: 0 15px 0 5px;
}

.c-fixedbar__count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: #fff;
  color: var(--jh-green);
  border: 1px solid rgba(255,255,255,.35);
  font-size: 13px;
}

/* ==========  10. 상품 썸네일 (공통)  ========== */
/* 장바구니 · 주문서 · 찜 목록 등에서 공유 */

.c-thumb{
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #f3f4f6;
}
.c-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.c-thumb--74{ width: 74px; height: 74px; }
.c-thumb--88{ width: 88px; height: 88px; }

/* ==========  11. 가격 행 (공통)  ========== */

.c-price-row{
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  letter-spacing: -.02em;
}
.c-price-row__rate{
  font-weight: 700;
  color: var(--jh-red);
}
.c-price-row__now{
  font-weight: 700;
  color: #111;
}
.c-price-row__was{
  font-size: 12px;
  color: rgba(0,0,0,.42);
  text-decoration: line-through;
}

/* ==========  12. 진행바 (동기화 로딩)  ========== */

.c-syncbar{
  position: fixed;
  left: 50%;
  top: calc(var(--header-h) + env(safe-area-inset-top));
  transform: translateX(-50%);
  z-index: calc(var(--z-header) + 1);
  width: min(100%, var(--maxw));
  height: 2px;
  overflow: hidden;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.c-syncbar__fill{
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: var(--jh-green);
  transform: translateX(-120%);
  will-change: transform;
}
.is-syncing .c-syncbar{ opacity: 1; }
.is-syncing .c-syncbar__fill{
  animation: c-syncbar-slide 1s ease-in-out infinite;
}
@keyframes c-syncbar-slide{
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}