/* BASIC css start */
/* 5.30 업데이트 : 가정의달 행사 진행중, 메인 상품 하단 설명글 #sec3 .price-add-text{display:none;}  #sec3 .normal:first-child {display:;} 상태로 변경 << 소비자가 입력안될시 가격 노출이 안됨 첫번째 노드를 none 시켰음*/




#header{position:fixed !important; top:0; left:50%; transform:translateX(-50%); background:transparent !important;transition:background-color .2s}
#header.scroll{background-color:rgba(255,255,255,.88) !important; }



/* 섹션공통 */
.section{margin-bottom: 0px;}
.sec_inner{padding:0 5%}
.section h2{font-family: 'Montserrat', sans-serif; font-size: 17px; color: #000; font-weight: 700; margin-bottom: 30px; line-height: 1.3;}
.section h2:has(a){display: flex; justify-content: space-between; align-items: center;}
.section h2:has(a) a{text-decoration: underline; color: #000;font-family: 'Montserrat', sans-serif; font-size: 12px;font-weight: 600;}






/* sec1 */
#sec1{}
#sec1 .swiper{}
#sec1 .swiper ul{}
#sec1 .swiper ul li{position: relative;}

#sec1 .swiper ul li>a{display: block;width: 100%;}
#sec1 .swiper ul li>a>img{width: 100%;}
#sec1 .swiper ul li > a.slide-link{ position:relative; display:block; width:100%; }
#sec1 .swiper ul li > a.slide-link > img{ width:100%; display:block; }

#sec1 .swiper ul li .txt_area{
  position:absolute; left:0; right:0; bottom:0;
  padding:0 12.5px 90px 25px; /* 여백만 살짝 다듬음 */
  text-align:left !important;
}

#sec1 .swiper ul li .txt_area.left   { text-align:left !important;  }
#sec1 .swiper ul li .txt_area.center { text-align:left !important; }
#sec1 .swiper ul li .txt_area.right  { text-align:left !important;  }

#sec1 .txt_area.theme-light .big,
#sec1 .txt_area.theme-light .sub,
#sec1 .txt_area.theme-light .more-chip{ color:#fff; border-color:#fff; }

#sec1 .txt_area.theme-dark  .big,
#sec1 .txt_area.theme-dark  .sub,
#sec1 .txt_area.theme-dark  .more-chip{ color:#111; border-color:#3f3f3f; }


/* 가독성용 그라데이션(원하면 .dim 클래스만 붙이면 됨) */
#sec1 .txt_area.dim::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:40%;
  background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
  pointer-events:none;
}


/* 텍스트 크기(네 기존 big/sub 규칙과 호환) */
#sec1 .txt_area .big{ font-family:"Abril Fatface",serif; font-size:28px; font-weight:600; line-height:1.05; letter-spacing:-.5px; margin:0 0 8px; }
#sec1 .txt_area .sub{ font-family:"Noto Sans KR",sans-serif; font-size:16px; line-height:1.5; margin:0; }

/* 칩(버튼 느낌, 전체가 앵커라 클릭은 slide-link로) */
#sec1 .txt_area .more-chip{
  display:inline-block; margin-top:14px; padding:6px 14px; font-size:11px; font-weight:700;
  border:1px solid currentColor; border-radius:999px; background:transparent;
}

/* 활성 슬라이드 애니메이션(네 기존 로직과 연결) */
#sec1 .swiper ul li .txt_area p,
#sec1 .swiper ul li .txt_area .more-chip{ opacity:0; transform:translateY(8px); transition:all .45s ease; }
#sec1 .swiper ul li .txt_area.act p,
#sec1 .swiper ul li .txt_area.act .more-chip{ opacity:1; transform:none; }


#sec1 .swiper ul li .txt_area a.more{width:auto; font-family: 'Montserrat', sans-serif; transition: transform .4s, opacity .4s;display: inline-block;opacity: 0; transition-delay: .4s; border: 1px solid #000 ;padding:  5px 30px; color: #000; font-size: 10px; font-weight: 600; margin-top: 25px;}
#sec1 .swiper ul li .txt_area a.more:active{background-color: #000; color: #fff;}

#sec1 .swiper ul li .txt_area a.more-bl{width:auto; font-family: 'Montserrat', sans-serif; transition: transform .4s, opacity .4s;display: inline-block;opacity: 0; transition-delay: .4s; border: 2px solid #3bffaa ;padding:  5px 30px; color: #3bffaa; font-size: 10px; font-weight: 600; margin-top: 25px;}
#sec1 .swiper ul li .txt_area a.more-bl:active{background-color: #000; color: #6cceff;}


#sec1 .swiper-pagination{width: auto; top: 50%; right: 5%;transform:translateY(-50%); bottom: unset; left: unset; z-index: 19; }
#sec1 .swiper-pagination-bullet{background-color: #000; display: block;margin: 9px 0;transform:scale(.8); opacity:var(--swiper-pagination-bullet-inactive-opacity, .4)}
#sec1 .swiper-pagination-bullet-active{opacity:1}
#sec1 .swiper_btn_next{position: absolute; bottom: 25px; z-index: 10; left: 50%; transform: translateX(-50%); cursor: pointer; display:none;} /* 넘기기 화살표 none 상태*/
#sec1 .swiper-button-disabled{opacity: .3;}
#sec1 .swiper_btn_next img{transform:scale(.66); transform-origin:center center}







/* login& coupon sec: 로그인 회원가입 쿠폰 섹션 */




/* 공통 폭(내부 400px) */
#login_sec .text,
#login_sec .login_button,
#login_sec .coupon{
  width:calc(100vw - 25px);
  max-width:400px;
  margin:0 auto;
}

/* 텍스트 영역 */
#login_sec .text{ text-align:center; padding:60px 0 20px; }
#login_sec .text .lead{ margin:0 0 6px; font-size:13.5px; color:#666; }
#login_sec .text h3{ margin:0; font-size:20px; color:#333; font-weight:300; }
#login_sec .text h3 span{ color:000; font-weight: 600;}

/* 로그인 버튼 */
#login_sec .login_button{ padding:10px 0 30px; }
#login_sec .btn-login{
  display:block; text-align:center; text-decoration:none;
  background:#eee; color:#333; font-weight:700; font-size:14px;
  border-radius:12px; padding:12px 16px;
}

/* 쿠폰 카드 */
#login_sec .coupon-list{
  list-style:none; margin:0; padding:0; display:grid; gap:10px;
}
#login_sec .coupon-card{ }

#login_sec .coupon-link{
  display:flex; align-items:stretch;
  background:#a9c1e5; color:#fff; text-decoration:none;
  border-radius:10px; overflow:hidden; min-height:86px; position:relative;
}
/* 세로 점선(티켓 절취선) */
#login_sec .coupon-link::after{
  content:""; position:absolute; top:10px; bottom:10px; right:120px;
  width:0; border-right:2px dashed rgba(255,255,255,.55);
}

/* 왼쪽 텍스트 */
#login_sec .cp-left{ flex:1 1 auto; padding:12px 14px; }
#login_sec .cp-sub{ margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:-0.01em; }
#login_sec .cp-amt{ display:block; margin:0 0 4px; line-height:1.1; font-weight:600; }
#login_sec .cp-amt em{ font-style:normal; font-size:24px; letter-spacing:-0.02em; }
#login_sec .cp-desc{ margin:0; font-size:10px; line-height:1.35; opacity:.95; }

/* 오른쪽 다운로드 버튼 */
#login_sec .cp-right{
  width:120px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06);
}
#login_sec .cp-cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:78px; height:34px; padding:0 10px;
  border:1px solid rgba(255,255,255,.65); border-radius:8px;
  font-size:12px; font-weight:400; color:#fff;
}
#login_sec .coupon-link:active .cp-cta{ transform:translateY(1px); opacity:.9; }


/* 로그인&회원가입 섹션 종료 */








/* 원형 카테고리 섹션 */

.cat-grid {
  padding: 50px 10px;
  background:#fff;
  font-family: var(--font-base);
}

.cat-grid ul {
  display: flex !important;
  flex-wrap: wrap;
  gap: 20px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-grid li {
  width: 25% !important;      /* 2열 고정 */
  float: none !important;
  text-align: center;
}

.cat-grid li a {
  display: block;
  text-decoration: none;
  color: #222;
}

.cat-grid .thumb {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 50%;
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cat-grid .thumb img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
  display: block;
}

.cat-grid .label {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #333;
}


/* 원형 카테고리 섹션 종료*/






/* new arrival 신상품 스와이퍼 슬라이드 */

/* ===== New Arrival Slider (모바일 425px 기준 좌우 여백 12.5px) ===== */
.na-slider{ padding:16px 12.5px; background:#fff; }
.na-title{ font-size:20px; font-weight:600; margin:0 0 20px; color:#333; letter-spacing:0em; }

.na-swiper{ width:calc(100vw-25px); max-witdh:400px;  margin:0 auto; overflow:hidden; height:400px;}

.na-card{ display:block; text-decoration:none; color:inherit; }
.na-card img{
  width:100%; height:auto; display:block; border-radius:6px; object-fit:cover;
}

/* 캡션 */
.na-caption{ padding:12px 4px 0; }

.na-meta{
  display:grid;
  grid-template-columns: 100px 1fr; /* 썸네일 100px + 텍스트 */
  gap:10px;
  align-items:start;
}

.na-thumb{
  width:100px; height:auto;        /* 세로형 이미지라 width 기준 */
  object-fit:contain; display:block;
}


.na-text { margin-top:5px;}
.na-text .na-name{ display:block; font-size:16px; font-weight:700; margin-bottom:4px; }
.na-text .na-desc{ font-size:14px; color:#636363; margin:0 0 6px; }
.na-text .na-bullets{ margin:0;  font-size:12px; color:#333; }

/* 페이징 점 스타일 */
.swiper-pagination na-pagination {bottom:0px;}
.na-swiper .swiper-pagination-bullet{ width:6px; height:6px; opacity:.4; background:#bbb; }
.na-swiper .swiper-pagination-bullet-active{ background:#ff9800; opacity:1; }

/* new arrival 신상품 스와이퍼 슬라이드 종료 */






/* 브랜드 스와이프 섹션 */

/* 레이아웃 */
.br-slider{ padding:50px 12.5px; background:#fff; }
.br-header{
  width: calc(100vw - 25px);
  max-width: 400px;
  margin: 0 auto 20px;
  display: grid;
  grid-template-columns: auto 1fr;  /* 제목은 내용폭, 탭은 남는폭 */
  align-items: center;
  column-gap: 8px;
}
.br-title{ margin:0; font-size: 20px; font-weight:600; letter-spacing:0em; white-space:nowrap; color:#000; }

/* 상단 탭(텍스트 페이지네이션) */
.br-tabs{
  /* ▼ Swiper 기본 .swiper-pagination의 absolute/bottom 규칙 무력화 */
  
 
  
  position: static !important;
  bottom: auto !important; left: auto !important; right: auto !important;
  transform: none !important;
  width: auto;

  justify-self: end;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  max-width: none;          /* 고정폭 제거 */
  min-width: 0;             /* 1fr 수축 허용 */
  white-space: nowrap;
  overflow-x: auto; overflow-y: hidden;  /* 폭 부족하면 가로 스크롤 */
  scrollbar-width: none;                 /* Firefox 스크롤바 숨김 */
  -ms-overflow-style: none;              /* IE/Edge 레거시 */
  
  display : none;                        /* ㅇ */
}
.br-tabs::-webkit-scrollbar{ display: none; } /* WebKit 스크롤바 숨김 */

/* bullet(클릭 영역) */
.br-tabs .swiper-pagination-bullet{
  width:auto; height:auto;
  position: relative;
  flex: 0 0 auto;           /* 줄어들며 깨짐 방지 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;         /* 좁은 폭 대응 */
  margin: 0;
  background: transparent;
  border: 0; border-radius: 0;
  color: #888;
  font-size: 12px;
  line-height: 1 !important;
  letter-spacing: .02em;
  cursor: pointer;
  opacity: 1;               /* Swiper 기본 opacity 제거 */
}

/* 구분선 |  (마지막 제외) */
.br-tabs .swiper-pagination-bullet:not(:last-child){ padding-right:14px; }
.br-tabs .swiper-pagination-bullet:not(:last-child)::after{
  content: "";
  position: absolute;
  right: -2px; top: 50%;
  width: 1px; height: 12px;
  background: #e0e0e0;
  transform: translateY(-50%);
}

/* 언더라인은 '텍스트 라벨' 폭만 */
.br-tabs .swiper-pagination-bullet .label{
  position: relative;
  display: inline-block;
  padding-bottom: 0px; !important
}
.br-tabs .swiper-pagination-bullet-active{ color:#111; font-weight:700; }
.br-tabs .swiper-pagination-bullet-active .label::after{
  content:none; position:absolute; left:0; right:0; bottom:0; height:2px; background:#111;
}

/* 슬라이더 컨테이너 */
.br-swiper{
  position: relative;       /* 스택 생성 */
  width:calc(100vw - 25px);
  max-width:400px;
  margin:8px auto 0;
  overflow:hidden;
}

/* a링크(전면 오버레이) */
.br-hero-link{
  position:absolute; inset:0; z-index:5;
  display:block; text-decoration:none; color:inherit;
  background:transparent !important;
}

/* 히어로 + 오버레이 */
.br-hero{ position:relative; margin:0; border-radius:6px; overflow:hidden; }
.br-hero > img{ width:100%; height:auto; display:block; border-radius:6px; }
.br-hero a img{ max-width:100% !important; }

/* 흰박스 opacity 80% (요청) */
.br-hero-text{
  position:absolute; left:0; right:0; bottom:0;
  background: rgba(255,255,255,.9);   /* ← 100% 오퍼시티 */
  padding:20px 20px 15px;
  border-radius:0 0 6px 6px;
  z-index:4;
  pointer-events:none;                /* 텍스트 위 클릭도 링크로 전달 */
}

/* 로고/타이틀/설명 */
.br-hero-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.br-logo{ height:28px; width:auto; display:block; }

.br-hero-title{ margin:0 20px 10px 0; font-size:16px; font-weight:500; letter-spacing:-0.01em; }
.br-hero-sub  { margin:0 0 7px; font-size:16px; font-weight:700; letter-spacing:-0.01em; }
.br-hero-desc { margin:0; font-size:12.5px; line-height:1.2; color:#333; letter-spacing:-0.01em; }

/* 스크린리더 전용 */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}


/* 브랜드 상품 3열 그리드 */
.br-products{
  max-width:400px;               /* 슬라이더 폭에 맞춤 */
  margin:10px auto 0;
  padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.br-item{ display:block; text-decoration:none; color:#222; }

.br-item .thumb{
  width:100%; aspect-ratio:1/1;  /* 정사각 영역 */
  background:#f5f5f5; border-radius:4px;
  display:grid; place-items:center; overflow:hidden;
}
.br-item .thumb img{
  width:100%; height:auto; object-fit:contain; display:block;
}

.br-item .name{
  margin-top:8px; font-size:12px; line-height:1.35; color:#333;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.7em;               /* 두 줄 높이 확보 */
}
.br-item .price{ margin-top:4px; font-size:12px; font-weight:700; color:#111; }


/* 스와치 줄 */
.br-item .swatches{
  margin-top: 6px;
  display: flex; gap: 6px;
}

/* 스와치 사각형(비클릭) */
.br-item .swatches .sw{
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--sw, #ddd);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  border-radius : 50%;
  pointer-events: none;          /* 카드 전체 링크 유지 */
  
  
  /* 배지 줄 */
.br-item .badges{
  margin-top:6px;
  display:flex; align-items:center; gap:6px;
}

/* 비건 아이콘 크기 (높이 기준) */
.badge-vegan{ height:16px; width:auto; display:block; margin-top:6px;}

/* 필요 시 단색 톤다운 (선택) */
/* .badge-vegan{ filter: grayscale(1) brightness(.2); opacity:.85; } */
}


/* 브랜드 스와이프 섹션 종료 */



/* == Youtube 섹션 == */

/* 유튜브 임베드 (모바일 425) */

.yt-wrap{
  position:relative;

  max-width:425px;
  margin:0 auto;
  margin-top: 20px;
  aspect-ratio:16/9;      /* 반응형 16:9 */
  background:#000;
  border-radius:0px;
  overflow:hidden;
}
.yt-wrap iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

/* == Youtube 섹션 종료 == */


/* == 기초스킨 슬라이드 스와이프 == */

/* 레이아웃 */
.set-slider{ padding:0px 0px 20px 0px; background:#fff; }
.set-hero{
  position:relative; margin:0 auto 10px;
  max-width:425px;
  border-radius:0px; overflow:hidden;
}
.set-hero > img{ width:100%; height:auto; display:block; }
/* 어두운 그라데이션 */
.set-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.45) 100%);
}
.set-hero-text{
  position:absolute; left:16px; bottom:18px; right:16px;
  color:#fff; z-index:1;
}
.set-title{ margin:0 0 6px; font-size:16px; font-weight:500; line-height:1.25; letter-spacing:-0.01em; }
.set-pill{
  display:inline-block; margin:6px 0 6px; padding:2px 8px;
  font-size:11px; border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.15); border-radius:999px;
}
.set-sub{ margin:0; font-size:12px; opacity:.95; }

/* 슬라이더 (2.5개 보임) */
.set-swiper{ width:calc(100vw - 25px); max-width:400px; margin:10px auto 0; }
.set-card{ display:block; text-decoration:none; color:#222; }

/* 카드 썸네일 */
.set-card .thumb{
  width:100%; aspect-ratio:4/3.5;          /* 필요 시 1/1 로 바꿔도 OK */
  background:#f5f5f5; border:1px solid #eee .8;
  border-radius:6px; overflow:hidden;
}
.set-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 카드 텍스트 */
.set-card .name{
  margin-top:8px; font-size:12px; line-height:1.35; color:#333;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.7em;
}
.set-card .prices{ margin-top:6px; }
.set-card .prices .old{
  color:#9aa0a6; font-size:11px; text-decoration:line-through;
  display:block;
}
.set-card .prices .sale{
  font-size:12px; font-weight:700; color:#111;
}
.set-card .prices .sale em{
  font-style:normal; color:#d60000; margin-right:4px; font-weight:800;
}

/* == 기초스킨 슬라이드 스와이프 종료 == */





/* == 카테고리별 상품 진열 섹션 == */


/* 레이아웃 규격 (모바일 425, 내부 최대 400) */
.prod-grid{ padding:50px 12.5px; background:#fff; }
.pg-header, .pg-panels{ width:calc(100vw - 25px); max-width:400px; margin:0 auto; }

/* 제목 + 탭 */
.pg-title{ margin:0 0 20px; font-size:20px; font-weight:600; letter-spacing:0em; }
.pg-tabbar{ display:flex; gap:8px; margin-bottom:30px; width:250px; height:30px;}
.pg-tab{
  flex:1 1 0; height:30px; border-radius:999px; border:1px solid #e5e7eb;
  background:#fff; font-size:13px; color:#555;
}
.pg-tab.is-active{ background:#efefef; color:#000; border-color:#333333; font-weight:600; border:1.5px solid #333333; }

/* 패널 */
.pg-panel{ display:none; }
.pg-panel.is-active{ display:block; }

/* 3열 그리드 */
.pg-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
}
.pg-item{ display:block; }
.pg-card{ display:block; text-decoration:none; color:#222; }

/* 썸네일 */
.thumb{ background:#f6f6f6; border-radius:6px; overflow:hidden; }
.thumb img{ width:100%; height:auto; display:block; aspect-ratio:1/1; object-fit:cover; }

/* 텍스트 */
.name{
  margin:8px 0 4px; font-size:12px; line-height:1.35; color:#333;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.7em;
}

/* 가격 레이아웃: 위 소비자가(취소), 아래 [퍼센트 + 판매가] */
.pricebox{ text-align:left; }
.old-line{ color:#9aa0a6; font-size:11px; line-height:1.1; margin-bottom:2px; }
.now-line{ display:flex; align-items:baseline; gap:6px; }
.rate{ color:#d60000; font-weight:800; font-size:12px; }
.sell{ color:#111; font-weight:700; font-size:12px; }




/ == * 리뷰 슬라이드 섹션 레이아웃(내부 최대 425) * == /

.rv-slider{ padding:16px 12.5px; background:#fff; }
.rv-title{ width:calc(100vw - 25px); max-width:400px; margin:0 auto 20px; font-weight:600; font-size:20px; letter-spacing:0em; }
.rv-swiper{ width:calc(100vw - 25px); max-width:400px; margin:0 auto; }

/* 2열 카드 */
.rv-swiper .swiper-slide{ width:auto; }         /* Swiper 계산에 맡김 */
.rv-card{ display:block; color:inherit; text-decoration:none; background:#fff;
  border-radius:8px; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.05); }
.rv-figure{ margin:0; background:#f6f6f6; }
.rv-figure img{ display:block; width:100%; height:auto; object-fit:cover; }
.rv-body{ padding:10px; }

.rv-stars{ color:#ff5a00; font-size:12px; line-height:1; margin-bottom:6px; }
.rv-text{ font-size:12px; line-height:1.4; color:#333; margin:0 0 8px; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.rv-meta{ display:flex; gap:6px; font-size:11px; color:#777; margin-bottom:10px; }
.rv-meta .rv-author::after{ content:"·"; margin:0 4px; color:#ddd; }

.rv-product{ display:flex; align-items:center; gap:8px; padding-top:8px; border-top:1px solid #eee; }
.rv-thumb{ width:44px; height:44px; object-fit:cover; border-radius:4px; background:#f1f1f1; }
.rv-pinfo{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.rv-pname{ font-size:12px; color:#222; line-height:1.25; display:-webkit-box;
  -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.rv-price{ font-size:12px; font-weight:700; color:#111; }

/* 페이지네이션 점 */
.rv-pagination{ position:relative; margin-top:10px; display: none; } /* 페이지네이션 none 상태*/
.rv-pagination .swiper-pagination-bullet{ background:#aaa; opacity:.6; }
.rv-pagination .swiper-pagination-bullet-active{ background:#222; opacity:1; }






/* ===== Instagram Profile-style ===== */


/* 내부폭 400px 규격 */
.ig-sec{ padding:80px 12.5px 40px; background:#fff; }
.ig-card{
  display:block; width:calc(100vw - 25px); max-width:400px; margin:0 auto;
  color:inherit; text-decoration:none;
}

/* 헤더 */
.ig-head{ display:flex; gap:25px; align-items:center; }
.ig-avatar{
  width:74px; height:74px; border-radius:50%;
  padding:2px; background:linear-gradient(45deg, #c9c9c9, #e3e3e336);
}
.ig-avatar img{
  width:100%; height:100%; border-radius:50%;
  display:block; background:#fff; padding:2px; box-sizing:border-box;
}
.ig-info{ flex:1; min-width:0; }
.ig-username{ font-weight:800; font-size:16px; }
.ig-counts{ display:flex; gap:16px; margin:6px 0 0; padding:0; list-style:none; }
.ig-counts li{ display:flex; flex-direction:column; align-items:flex-start; }
.ig-counts strong{ font-size:14px; line-height:1; }
.ig-counts span{ font-size:11px; color:#777; }

/* 바이오 */
.ig-bio{ margin:10px 0 12px; }
.ig-text{ margin:0 0 4px; font-size:12px; color:#333; }
.ig-link{ margin:0; font-size:12px; color:#3897f0; }

/* 액션 버튼(전부 a의 일부, 터치 피드백만) */
.ig-actions{ display:flex; gap:8px; margin:8px 0 14px; }
.ig-btn{
  flex:1 1 0; display:inline-flex; justify-content:center; align-items:center;
  height:32px; border-radius:8px; font-size:12px; font-weight:700;
  border:1px solid #e5e7eb; background:#fff; color:#111;
}
.ig-btn.solid{ background:#111; color:#fff; border-color:#111; }
.ig-card:active .ig-btn{ opacity:.9; }

/* 하이라이트 */
.ig-highlights{ display:flex; gap:12px; overflow-x:auto; padding-bottom:20px; padding-top:10px; }
.ig-circle{ text-align:center; }
.ig-circle img{
  width:58px; height:58px; border-radius:50%; object-fit:cover;
  border:1px solid #eee; background:#f2f2f2;
}
.ig-circle em{ display:block; margin-top:6px; font-size:10px; color:#666; font-style:normal; }

/* 탭(느낌만) */
.ig-tabs{ display:flex; justify-content:space-around; margin:10px 0 8px; }
.ig-tabs span{ font-size:12px; color:#999; }
.ig-tabs .on{ color:#111; font-weight:700; }

/* 3x3 그리드 */
.ig-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
}
.ig-item{
  aspect-ratio:1/1; background:var(--img) center/cover no-repeat, #f2f2f2;
  border-radius:2px;
}

/* 하단 CTA */
.ig-more{ margin:10px 0 0; text-align:center; font-size:12px; color:#777; }

/* BASIC css end */