/* ===========================
   Header (Front/header.css) — clean & mobile-tuned
   =========================== */

/* ---- 1) 헤더: 최상단 ---- */
header{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:8px 20px 7px;           /* 슬림화 */
  padding-right:38px;         /* 우측 아이콘 여유 */
  background:#fff;
  color:rgba(0,0,0,.9);
  position:fixed; top:0; left:0;
  z-index:1400;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

/* ---- 2) 로고 ---- */
.logo{ display:flex; align-items:flex-end; gap:.3rem; }
.logo a{ text-decoration:none; color:inherit; }
.logo-brand{ font-size:1.5rem; font-weight:600; color:rgba(0,0,0,.75); line-height:1; }
.logo-roman{ font-size:.75rem; margin-left:.3rem; padding-bottom:7px; color:rgba(0,0,0,.6); line-height:1; }
.logo-korean{
  font-size:.75rem; font-weight:400; color:rgba(0,0,0,.55);
  margin-left:.25rem; padding:0; padding-bottom:7px; transform:translateY(1px); line-height:1;
}

/* ---- 3) 우측 액션(돋보기/쇼핑백) ---- */
/* 아이콘 사이즈 토큰 */
:root{
  --bag-size:20px;          /* 쇼핑백(데스크톱 기준) */
  --search-size:20px;       /* 돋보기(데스크톱 기준) */
}

.actions{ display:flex; align-items:center; gap:16px; color:inherit; } /* currentColor 상속 */
.search-icon,.shop-toggle{
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  width:40px; height:28px; padding:0; color:inherit;
}

/* SVG는 currentColor로 칠하기 */
.search-icon svg, .search-icon svg *,
.shop-toggle .ic-bag, .shop-toggle .ic-bag *{
  fill: none;
  stroke: currentColor;
  vector-effect: non-scaling-stroke;
}

/* 컨테이너 프레임 */
.search-icon{
  pointer-events:auto;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px;
  color:rgba(0,0,0,.77);
  -webkit-tap-highlight-color:transparent;
}

/* SVG 픽셀 고정 */
.search-icon svg{
  width: var(--search-size);
  height: var(--search-size);
  display:block;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transform: translateY(-1.4px);
}

/* ✅ 자식만 이벤트 차단 (svg 자체는 허용) */
.search-icon svg *{ pointer-events:none; }

/* 실제 아이콘 크기 */
.ic-bag{ width:var(--bag-size); height:var(--bag-size); display:block; }
/* (선택) 쇼핑백 가로비율 살짝 넓히기 */
.shop-toggle .ic-bag g{ transform:scaleX(1.25); transform-origin:45% 45%; }

.actions .shop-toggle { color: rgba(0,0,0,.8); } /* ← 여기를 원하는 진하기로 */

/* 기본 hover 톤 */
.search-icon:hover,
.shop-toggle:hover{ color:rgba(0,0,0,.95); }

/* ---- 4) Search (검색 바 = 1300) ---- */
#search-bar{
  position:fixed; 
  top:var(--header-h,56px); 
  left:0; 
  width:100%;
  background:#fff; 
  z-index:1395;
  padding:15px 20px 5px;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
  margin-bottom:36px;
}
#search-bar.hidden{ display:none; }

.search-input-wrapper{ position:relative; width:100%; display:flex; align-items:center; }
#search-input{
  width:100%; height:32px; box-sizing:border-box;
  padding:10px 44px 10px 10px; font-size:.8rem;
  background:#fff; color:#000; border:.8px solid #ccc; border-radius:2px; box-shadow:none; appearance:none;
}
#search-input:focus{ outline:1px solid #ccc; outline-offset:0; border-color:#ccc; background:#fff; box-shadow:none; }

/* Chrome 자동완성 배경 제거 */
#search-input:-webkit-autofill,
#search-input:-webkit-autofill:hover,
#search-input:-webkit-autofill:focus{
  -webkit-text-fill-color:#000;
  -webkit-box-shadow:0 0 0 1000px #fff inset;
          box-shadow:0 0 0 1000px #fff inset;
}

/* 인풋의 '지우기/닫기' X 버튼 */
.clear-btn{
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  font-size:1.05rem; color:#9c9b9b; cursor:pointer; line-height:1; background:none; border:0;
}

/* 검색 결과 */
#search-results{ width:100%; background:rgba(255,255,255,.95); padding:10px 5px 10px; margin-top:17px; margin-bottom:10px; }
.search-results-grid{ display:grid; grid-template-columns:repeat(1,130px); gap:8px; }
.search-results-images{ display:grid; grid-template-columns:repeat(5,1fr); gap:40px; max-height:410px; overflow-y:auto; padding:3px; }
.recommend-item{ padding:6px 8px; font-size:.6rem; line-height:.3; border-radius:4px; text-align:left; color:#999; font-weight:500; cursor:pointer; }
.recommend-item:hover{ background:transparent; color:#000; }
.recommend-item.highlighted{ background:#fff; color:#000; }
.search-card{ background:transparent; border-radius:0; text-align:left; cursor:pointer; transition:none; padding:16px 0 10px; }
.search-card:hover{ background:transparent; }
.search-image{ width:100%; height:auto; object-fit:cover; border-radius:0; }
.card-title{ text-align:left; font-size:.6rem; color:#999; margin-top:6px; }
.search-card:hover .card-title, .search-card.highlighted .card-title{ color:#000; }

/* 검색 백드롭: 서치/카트보다 낮게 */
.search-backdrop.hidden{ display:none; }
.search-backdrop{
  position:fixed; 
  left:0; 
  width:100%;
  top:var(--header-h,56px);
  height:calc(100vh - var(--header-h,56px));
  background:rgba(0,0,0,.3);
  z-index:1390;
}

/* ---- 5) Cart drawer (카트 = 1300) ---- */

/* keep utility if you use it elsewhere */
.hidden{ display:none !important; }


/* header+body styles (keep your look) */
.cart__head, .cart__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid rgba(0,0,0,.08);
}
.cart__title{ font-size:1rem; font-weight:600; margin:0; }
.cart__close{ border:none; background:transparent; font-size:1.4rem; line-height:1; cursor:pointer; color:rgba(0,0,0,.55); }
.cart__body{ padding:14px 16px; overflow:auto; flex:1 1 auto; }
.cart__empty{ font-size:.9rem; color:rgba(0,0,0,.5); }

/* optional: list container */
.cart__list{ display:block; }


/* ===== Mobile search tuning (iOS zoom fix) ===== */
@media (max-width:430px){
  header{
    /* 기존 padding-right: 38px → 더 타이트하게 */
    padding-right: 13px !important;
  }

  /* 토큰 업사이즈 */
  :root{
    --bag-size: 24px;        /* 쇼핑백 아이콘 크기 */
    --search-size: 22.5px;     /* 돋보기 아이콘 크기 */
  }

  /* 아이콘 사이 간격 살짝 줄이기 */
  .actions{ gap: 12px; }

  /* 바 자체 간격 살짝 컴팩트 */
  #search-bar{
    padding: 14px 14px 6px;
  }

  /* 터치 타겟 넉넉하게(모바일 전용) */
  .actions .search-icon{ width: 34px; height: 34px; }
  .actions .shop-toggle{ width: 34px; height: 34px; }

  /* 실제 아이콘 크기 덮어쓰기: 토큰 강제 적용 */
  .search-icon svg{
    width: var(--search-size) !important;
    height: var(--search-size) !important;
    stroke-width: 1.6;
    transform: translateY(-1.5px);
  }
  .shop-toggle .ic-bag{
    width: var(--bag-size) !important;
    height: var(--bag-size) !important;
  }

  /* iOS 확대 방지: font-size >= 16px */
  #search-input{
    height: 40px;
    font-size: 16px;
    line-height: 1.2;
    padding: 10px 34px 6px 12px;
    border-radius: 2px;
  }

  /* placeholder도 16px로 동기화 */
  #search-input::placeholder { font-size: inherit; }

  /* 높이 균형 */
  #search-input{
    height: 40px;
    padding: 8px 34px 8px 12px;
    border-radius: 2px;
  }

  /* X 버튼 크기/위치 */
  .clear-btn{
    right: 8px;
    font-size: 19px;
  }

  /* 결과영역 여백/그리드 */
  #search-results{
    padding: 8px 4px 10px;
    margin-top: 10px;
  }
  .search-results-grid{
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .recommend-item{
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }

  /* 이미지 카드 결과가 있다면 2열 */
  .search-results-images{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-height: 50vh;
  }
  .card-title{
    font-size: 12px;
  }

  /* 모바일에서 보조 로고 텍스트 숨김 */
  .logo-roman,
  .logo-korean{
    display: none !important;
  }
}