@charset "utf-8";

.sub-wrap { padding-bottom: 159px; }
.tit-sub {
  font-family: var(--ff-serif);
  font-size: 28px;
  line-height: 40px;
  font-weight: 500;
}

/* ==========================================================================
   Breadcrumb / Title
   ========================================================================== */
.breadcrumb { display: flex; align-items: center; gap: 8px; padding-top: 80px; font-size: 16px; line-height: 24px; color: var(--c-base4); }
.breadcrumb img { width: 20px; height: 20px; transform: rotate(-90deg); }
.breadcrumb [aria-current] { color: var(--c-black); }

.sub-title { max-width: 500px; margin: 20px auto 0; text-align: center; }
.sub-title h2 { font-family: var(--ff-serif); font-size: 40px; line-height: 48px; font-weight: 400; }
.sub-title p { margin-top: 12px; font-size: 18px; line-height: 26px; }

/* ==========================================================================
   Tab
   ========================================================================== */
.gift-tab { margin-top: 60px; }
.gift-tab__list { display: flex; justify-content: center; gap: 16px; padding: 4px 0; }
.gift-tab__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 25px;
  border: 1px solid var(--c-primary);
  border-radius: 100px;
  font-size: 18px;
  line-height: 26px;
  color: var(--c-primary);
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.gift-tab__btn:hover { background: rgba(58, 46, 36, .06); }
.gift-tab__btn.is-active { background: var(--c-primary); color: var(--c-white); }
.gift-tab__ic { position: relative; width: 40px; height: 40px; flex-shrink: 0; overflow: hidden; }
.gift-tab__ic img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.gift-tab__ic--family img { left: -7.61%; top: -2.65%; width: 115.22%; height: 105.29%; object-fit: fill; }
.gift-tab__ic--friend img { left: -4.55%; top: -4.55%; width: 109.09%; height: 109.09%; object-fit: fill; }
.gift-tab__ic--memorial img { left: -4%; top: -4.35%; width: 108%; height: 108.7%; object-fit: fill; }

/* ==========================================================================
   Content
   ========================================================================== */
.sub-cont { display: flex; flex-direction: column; gap: 80px; margin-top: 60px; }

/* 추천 */
/* 대상 탭 패널: 선택되지 않은 탭의 reco·case는 숨김 */
[data-tab-panel][hidden] { display: none; }
.reco { display: flex; gap: 24px; }
.reco__visual { position: relative; flex: 1; min-width: 0; height: 648px; overflow: hidden; background: #f4ede8; }
.reco__visual::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 737px;
  max-width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #e3d0c2);
}
.reco__img { position: absolute; left: 50%; bottom: 58px; width: 621px; max-width: 90%; aspect-ratio: 621 / 334; overflow: hidden; transform: translateX(-50%); }
.reco__img img { position: absolute; left: -5.62%; top: 0; width: 107.52%; height: 100.28%; max-width: none; }
.reco__txt { position: relative; padding: 60px 0 0 60px; }
.reco__txt h3 { font-size: 36px; line-height: 44px; font-weight: 500; }
.reco__txt p { margin-top: 12px; font-size: 18px; line-height: 26px; }

.reco__products { display: flex; flex-direction: column; gap: 24px; width: 519px; flex-shrink: 0; }
.product { display: flex; gap: 12px; }
.product__thumb { position: relative; width: 200px; height: 200px; flex-shrink: 0; overflow: hidden; background: var(--c-base9); }
.product__thumb span { position: absolute; left: 50%; top: 50%; height: 80%; overflow: hidden; transform: translate(-50%, -50%); }
.product__thumb img { position: absolute; max-width: none; }
.product__thumb--full span { width: 72.5%; margin-left: .5px; }
.product__thumb--full img { left: -11.75%; top: -8.67%; width: 120.18%; height: 111.9%; }
.product__thumb--keyring span { width: 27.5%; margin-left: .17px; }
.product__thumb--keyring img { left: -38.85%; top: -3.53%; width: 170.7%; height: 108.17%; }
.product__thumb--cube span { width: 72%; margin-left: .33px; }
.product__thumb--cube img { left: -4.07%; top: -3.17%; width: 106.78%; height: 107.56%; }
.product__info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 198px; padding: 16px 0; }
.product__name { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 14px; line-height: 20px; font-weight: 500; }
.btn-like { width: 20px; height: 20px; }
.btn-like img { width: 100%; height: 100%; }
.product__desc { font-size: 15px; line-height: 22px; }
.product__price { display: flex; gap: 2px; font-size: 15px; line-height: 22px; }
.product__price strong { font-weight: 700; }
.badge { display: inline-block; padding: 0 8px; border-radius: 4px; background: var(--c-primary); font-size: 14px; line-height: 20px; color: var(--c-white); }

/* 포인트 */
.point { display: flex; gap: 24px; }
.point__item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; text-align: center; }
.point__item img { width: 120px; height: 120px; object-fit: cover; }
.point__item strong { display: block; font-size: 20px; line-height: 28px; font-weight: 500; }
.point__item p { margin-top: 4px; font-size: 16px; line-height: 24px; }

/* 섹션 공통 헤드 */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.sec-head p { margin-top: 4px; font-size: 16px; line-height: 24px; }

/* 제작 사례 */
.case { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.case .sec-head { width: 100%; }
.case__list {
  display: flex;
  gap: 24px;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.case__list::-webkit-scrollbar { display: none; }
.case__item { position: relative; flex: 0 0 calc((100% - 72px) / 4); aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-base9); scroll-snap-align: start; }
.case__item span { position: absolute; top: 8.33%; bottom: 8.33%; left: 50%; overflow: hidden; transform: translateX(-50%); }
.case__item img { position: absolute; max-width: none; }
.case__item--01 span { aspect-ratio: 173 / 200; margin-left: -.75px; }
.case__item--01 img { left: -9.7%; top: -4.35%; width: 119.4%; height: 104.78%; }
.case__item--02 span { aspect-ratio: 237 / 490; margin-left: .25px; }
.case__item--02 img { left: -74.26%; top: -4.29%; width: 190.72%; height: 106.73%; }
.case__item--03 span { aspect-ratio: 157 / 453; margin-left: -.75px; }
.case__item--03 img { left: -38.85%; top: -3.53%; width: 170.7%; height: 108.17%; }
.case__item--04 span { aspect-ratio: 369 / 410; margin-left: -.25px; }
.case__item--04 img { left: -4.07%; top: -3.17%; width: 106.78%; height: 107.56%; }

/* 썸네일 hover: 상품 이미지가 가운데 기준으로 천천히 확대 (회색 박스 안에서 잘림)
   가운데 정렬용 translate와 같은 transform 안에서 scale해야 중심이 유지됨 */
.product__thumb span, .case__item span { transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.product__thumb:hover span, .product__thumb:focus-visible span { transform: translate(-50%, -50%) scale(1.15); }
.case__item:hover span { transform: translateX(-50%) scale(1.15); }

/* 제작 과정 */
.process { display: flex; flex-direction: column; gap: 32px; }
.process__list { display: flex; gap: 30px; }
.process__item { position: relative; flex: 1; min-width: 0; }
.process__item + .process__item::before {
  content: '';
  position: absolute;
  top: 106px;
  left: -25px;
  width: 20px;
  height: 20px;
  background: url('../images/common/ic_next.svg') no-repeat center / contain;
}
.process__img { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.process__img > * { position: absolute; max-width: none; }
.process__img img { object-fit: cover; }
.process__img--01 img { top: 0; left: calc(50% + 1.5px); height: 101.29%; aspect-ratio: 1 / 1; transform: translateX(-50%); }
.process__img--02 img { top: -1.29%; left: 50%; height: 102.58%; aspect-ratio: 1 / 1; transform: translateX(-50%); }
.process__img--03 img { top: -2.16%; left: 50%; height: 102.59%; aspect-ratio: 1 / 1; transform: translateX(-50%); }
.process__img--04 .bg { top: 0; bottom: 0; left: 50%; aspect-ratio: 1 / 1; overflow: hidden; transform: translateX(-50%); }
.process__img--04 .bg img { position: absolute; left: -1.12%; top: -.08%; width: 102.07%; height: 99.92%; object-fit: fill; }
.process__img--04 > img { top: -17.67%; bottom: -7.33%; left: calc(50% - 3.5px); height: 125%; aspect-ratio: 617 / 734; transform: translateX(-50%); }
.process__img--05 .crop { left: -1.29%; top: -.43%; width: 102.59%; height: 102.59%; overflow: hidden; }
.process__img--05 .crop img { position: absolute; left: -.34%; top: -8.87%; width: 100.94%; height: 117.04%; object-fit: fill; }
.process__txt { display: flex; flex-direction: column; gap: 8px; padding-top: 32px; }
.process__txt em { font-style: normal; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--c-primary); }
.process__txt strong { font-size: 20px; line-height: 28px; font-weight: 400; }
.process__txt p { margin-top: -4px; font-size: 16px; line-height: 24px; }

/* ==========================================================================
   Info bar
   ========================================================================== */
.info-bar { border-top: 1px solid var(--c-base8); }
.info-bar__list { display: flex; max-width: 1440px; margin: 0 auto; }
.info-bar__item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 60px 0;
  border-right: 1px solid var(--c-base8);
  text-align: center;
}
.info-bar__item:nth-child(3) { flex: 0 0 422px; }
.info-bar__item:nth-child(4) { flex: 0 0 254px; border-right: 0; }
.info-bar__ic { position: relative; width: 40px; height: 40px; overflow: hidden; }
.info-bar__ic img { width: 100%; height: 100%; }
.info-bar__ic--time span { position: absolute; inset: 16.67% 12.5%; }
.info-bar__ic--time img { position: absolute; top: -4.69%; bottom: -4.69%; left: -4.17%; right: -4.17%; width: auto; height: auto; max-width: none; }
.info-bar__item strong { font-size: 16px; line-height: 24px; font-weight: 400; }
.info-bar__item p { font-size: 14px; line-height: 20px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1279px) {
  .gift-tab__list { flex-wrap: wrap; }
  .reco__products { width: 440px; }
  .product__info { flex: 1; width: auto; }
  .info-bar__item:nth-child(3), .info-bar__item:nth-child(4) { flex: 1; }
  .info-bar__item { padding: 48px 16px; }
}

@media (max-width: 1023px) {
  .sub-wrap { padding-bottom: 100px; }
  .gift-tab__list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter); }
  .gift-tab__list::-webkit-scrollbar { display: none; }

  .reco { flex-direction: column; }
  .reco__visual { flex: none; height: auto; aspect-ratio: 737 / 648; }
  .reco__products { width: 100%; flex-direction: row; }
  .product { flex: 1; flex-direction: column; }
  .product__thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .product__thumb span { height: 80%; }
  .product__info { padding: 0; }

  .point { flex-wrap: wrap; gap: 0 24px; }
  .point__item { flex: 0 0 calc(50% - 12px); }

  .case__item { flex-basis: calc((100% - 24px) / 2.3); }

  .process__list { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .process__list::-webkit-scrollbar { display: none; }
  .process__item { flex: 0 0 232px; scroll-snap-align: start; }

  .info-bar__list { flex-wrap: wrap; }
  .info-bar__item, .info-bar__item:nth-child(3), .info-bar__item:nth-child(4) { flex: 0 0 50%; border-bottom: 1px solid var(--c-base8); }
  .info-bar__item:nth-child(2n) { border-right: 0; }
}

@media (max-width: 767px) {
  .tit-sub { font-size: 22px; line-height: 30px; }
  .breadcrumb { padding-top: 24px; font-size: 14px; line-height: 20px; }
  .sub-title h2 { font-size: 26px; line-height: 34px; }
  .sub-title p { font-size: 15px; line-height: 22px; }
  .gift-tab { margin-top: 32px; }
  .gift-tab__list { gap: 8px; }
  .gift-tab__btn { gap: 6px; padding: 7px 16px; font-size: 15px; line-height: 22px; }
  .gift-tab__ic { width: 32px; height: 32px; }
  .sub-cont { gap: 56px; margin-top: 32px; }

  .reco__visual { aspect-ratio: auto; height: 420px; }
  .reco__txt { padding: 28px 0 0 24px; }
  .reco__txt h3 { font-size: 24px; line-height: 32px; }
  .reco__txt p { font-size: 15px; line-height: 22px; }
  .reco__img { bottom: 32px; }
  .reco__products { flex-direction: column; gap: 16px; }
  .product { flex-direction: row; }
  .product__thumb { width: 120px; height: 120px; }
  .product__info { padding: 4px 0; }

  .point__item { padding: 16px 0; }
  .point__item img { width: 88px; height: 88px; }
  .point__item strong { font-size: 16px; line-height: 24px; }
  .point__item p { font-size: 13px; line-height: 20px; }

  .sec-head p { font-size: 14px; line-height: 20px; }
  .case__item { flex-basis: 70%; }
  .process__item { flex-basis: 200px; }
  .process__item + .process__item::before { top: 90px; }
  .process__txt { padding-top: 20px; }
  .process__txt strong { font-size: 17px; line-height: 24px; }
  .process__txt em, .process__txt p { font-size: 14px; line-height: 20px; }

  .info-bar__item, .info-bar__item:nth-child(3), .info-bar__item:nth-child(4) { flex-basis: 100%; border-right: 0; padding: 32px 0; }
}

/* ==========================================================================
   피규어 제작 (상품 목록) - sub_figure.html
   ========================================================================== */
.sub-wrap--list { padding-bottom: 115px; }

/* 상품 종류 */
.type-tab { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 60px; padding: 4px 0; }
.type-tab__btn { display: block; padding: 12px 26px; border: 1px solid var(--c-primary); border-radius: 100px; font-size: 18px; line-height: 26px; color: var(--c-primary); transition: background-color .2s, color .2s; }
.type-tab__btn:hover, .type-tab__btn.is-active { background: var(--c-primary); color: var(--c-white); }

/* 피규어 세부 분류 */
.cate-tab { margin-top: 22px; border-bottom: 1px solid var(--c-base8); }
.cate-tab__list { display: flex; gap: 20px; }
.cate-tab__btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 23px 20px 14px; border-bottom: 1px solid transparent; font-size: 16px; line-height: 24px; color: var(--c-base4); white-space: nowrap; transition: color .2s; }
.cate-tab__btn:hover { color: var(--c-black); }
.cate-tab__btn.is-active { border-bottom-color: var(--c-black); color: var(--c-black); }
.cate-tab__ic { position: relative; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.cate-tab__ic--all { display: flex; align-items: center; justify-content: center; background: var(--c-base9); font-size: 20px; line-height: 28px; font-weight: 700; color: var(--c-primary); }
.cate-tab__ic > span { position: absolute; left: 50%; top: 50%; overflow: hidden; transform: translate(-50%, -50%); }
.cate-tab__ic img { position: absolute; max-width: none; }
.cate-tab__ic--full > span { width: 52px; height: 50px; margin-left: -.5px; }
.cate-tab__ic--full img { left: -10.64%; top: -15.78%; width: 119.15%; height: 129.34%; }
.cate-tab__ic--pet > span { width: 39px; height: 49px; margin-top: .5px; }
.cate-tab__ic--pet img { left: -29.03%; top: -24.49%; width: 155.5%; height: 142.86%; }
.cate-tab__ic--bust > span { width: 42px; height: 52px; margin-left: -.5px; }
.cate-tab__ic--bust img { left: -43.09%; top: -28.85%; width: 181.42%; height: 153.85%; }

/* 상품 수 + 정렬 */
.list-head { display: flex; align-items: center; justify-content: space-between; margin-top: 40px; font-size: 16px; line-height: 24px; }
.list-head__count { color: var(--c-base1); }
.list-head__count strong { font-weight: 500; }
.sort { position: relative; }
.sort__btn { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; color: var(--c-base2); }
.sort__btn img { width: 20px; height: 20px; transition: transform .2s; }
.sort.is-open .sort__btn img { transform: rotate(180deg); }
.sort__list { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 5; min-width: 140px; padding: 8px 0; border: 1px solid var(--c-base8); border-radius: 4px; background: var(--c-white); box-shadow: 0 8px 20px rgba(0, 0, 0, .08); }
.sort.is-open .sort__list { display: block; }
.sort__list button { display: block; width: 100%; padding: 8px 16px; font-size: 15px; line-height: 22px; text-align: left; color: var(--c-base2); white-space: nowrap; }
.sort__list button:hover { background: var(--c-base9); }
.sort__list button[aria-selected="true"] { font-weight: 500; color: var(--c-black); }

/* 상품 카드 (시안 240px 카드 기준, 이미지 영역 200px = 83.33%) */
.prd-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 60px 20px; margin-top: 20px; }
.prd-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.prd-card__thumb { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-base9); }
.prd-card__thumb > span { position: absolute; left: 50%; top: 50%; height: 83.33%; overflow: hidden; transform: translate(-50%, -50%); transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.prd-card__thumb:hover > span, .prd-card__thumb:focus-visible > span { transform: translate(-50%, -50%) scale(1.15); }
.prd-card__thumb img { position: absolute; max-width: none; }
.prd-card__thumb .badge { position: absolute; top: 8px; right: 8px; font-style: normal; }
.prd-card__thumb--full > span { aspect-ratio: 182 / 200; }
.prd-card__thumb--full img { left: -11.75%; top: -8.67%; width: 120.18%; height: 111.9%; }
.prd-card__thumb--pet > span { aspect-ratio: 173 / 200; margin-left: -.5px; }
.prd-card__thumb--pet img { left: -9.7%; top: -4.35%; width: 119.4%; height: 104.78%; }
.prd-card__thumb--bust > span { aspect-ratio: 97 / 200; margin-left: .5px; }
.prd-card__thumb--bust img { left: -74.26%; top: -4.29%; width: 190.72%; height: 106.73%; }
.prd-card__thumb--keyring > span { aspect-ratio: 69 / 200; margin-left: -.5px; }
.prd-card__thumb--keyring img { left: -38.85%; top: -3.53%; width: 170.7%; height: 108.17%; }
.prd-card__thumb--cube > span { aspect-ratio: 180 / 200; }
.prd-card__thumb--cube img { left: -4.07%; top: -3.17%; width: 106.78%; height: 107.56%; }
.prd-card__info { display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 1279px) {
  .prd-list { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1023px) {
  .prd-list { grid-template-columns: repeat(3, 1fr); gap: 48px 16px; }
}

@media (max-width: 767px) {
  .sub-wrap--list { padding-bottom: 80px; }
  .type-tab { gap: 8px; margin-top: 32px; }
  .type-tab__btn { padding: 8px 18px; font-size: 15px; line-height: 22px; }
  .cate-tab { margin-top: 16px; }
  .cate-tab__list { gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .cate-tab__list::-webkit-scrollbar { display: none; }
  .cate-tab__btn { padding: 16px 12px 12px; font-size: 14px; line-height: 20px; }
  .list-head { margin-top: 24px; font-size: 14px; line-height: 20px; }
  .sort__btn { font-size: 14px; line-height: 20px; }
  .prd-list { grid-template-columns: repeat(2, 1fr); gap: 32px 12px; margin-top: 16px; }
  .prd-card .product__desc, .prd-card .product__price { font-size: 14px; line-height: 20px; }
}

/* ==========================================================================
   기업 · 단체 - sub_corp.html
   ========================================================================== */
.sub-wrap--corp { padding-bottom: 81px; }
.breadcrumb--white { padding-top: 0; color: var(--c-white); }
.breadcrumb--white [aria-current] { color: var(--c-white); }

/* 비주얼: 1920x720 시안 영역을 그대로 유지하며 가운데 기준으로 잘림 */
.corp-visual { position: relative; min-height: 720px; overflow: hidden; background: #f4f0eb; color: var(--c-white); }
.corp-visual__bg { position: absolute; inset: 0; }
.corp-visual__img { position: absolute; top: 50%; left: 50%; width: max(100%, 1920px); aspect-ratio: 1920 / 720; transform: translate(-50%, -50%); }
.corp-visual__img > img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* 좌측 · 상단 딤 (시안 합성 결과 기준) */
.corp-visual__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 33.33%),
    linear-gradient(to right, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0) 68%);
}
/* 선물 상자 위 로고 각인 */
.corp-visual__logo { position: absolute; left: 63.28%; top: 70%; width: 13.75%; height: 17.23%; display: flex; align-items: center; justify-content: center; }
.corp-visual__logo-in { position: relative; flex: none; width: 102.63%; height: 50.35%; overflow: hidden; opacity: .4; transform: rotate(13.13deg) scale(1, .97) skewX(13deg); }
.corp-visual__logo-symbol { position: absolute; inset: 2.85% 67.62% 3.56% .25%; }
.corp-visual__logo-text { position: absolute; inset: 28.15% 1.06% 23.91% 36.11%; }
.corp-visual__logo img { width: 100%; height: 100%; max-width: none; }

.corp-visual__inner { position: relative; z-index: 1; padding-top: 161px; padding-bottom: 40px; }
.corp-visual__txt { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.corp-visual__txt h2 { font-family: var(--ff-serif); font-size: 44px; line-height: 56px; font-weight: 400; }
.corp-visual__txt p { font-size: 16px; line-height: 24px; }
.corp-visual__btn { margin-top: 40px; background: rgba(0, 0, 0, .15); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); }
.corp-tag { display: flex; flex-wrap: wrap; gap: 12px; max-width: 824px; margin-top: 79px; padding: 4px 0; }
.corp-tag li { padding: 12px 26px; border-radius: 100px; background: rgba(0, 0, 0, .15); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-size: 20px; line-height: 28px; white-space: nowrap; }

/* 제작 분야 */
.corp-type { margin-top: 100px; }
.corp-type__head { display: flex; flex-direction: column; gap: 20px; }
.corp-type__tit { font-family: var(--ff-serif); font-size: 44px; line-height: 56px; font-weight: 400; }
.corp-type__head p { font-size: 16px; line-height: 24px; }
.corp-type__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; }
.corp-card { display: flex; gap: 20px; height: 100%; }
.corp-card__thumb { position: relative; width: 294px; aspect-ratio: 1 / 1; flex-shrink: 0; overflow: hidden; background: var(--c-base9); }
.corp-card__thumb > span { position: absolute; left: 50%; top: 50%; height: 61.22%; overflow: hidden; transform: translate(-50%, -50%); transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.corp-card:hover .corp-card__thumb > span, .corp-card:focus-visible .corp-card__thumb > span { transform: translate(-50%, -50%) scale(1.15); }
.corp-card__thumb img { position: absolute; max-width: none; }
.corp-card__thumb--01 > span { aspect-ratio: 96.873 / 180; }
.corp-card__thumb--01 img { left: -56.81%; top: -13.09%; width: 218.34%; height: 122.91%; }
.corp-card__thumb--02 > span { aspect-ratio: 211 / 180; margin-left: .5px; }
.corp-card__thumb--02 img { left: -7.54%; top: -25.4%; width: 117.7%; height: 144.29%; }
.corp-card__thumb--03 > span { aspect-ratio: 203 / 180; margin-left: .5px; }
.corp-card__thumb--03 img { left: 0; top: -25.3%; width: 145.6%; height: 144.3%; }
.corp-card__thumb--04 > span { aspect-ratio: 150 / 180; }
.corp-card__thumb--04 img { left: -15.26%; top: -19.62%; width: 148.25%; height: 133.77%; }
.corp-card__body { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; flex: 1; min-width: 0; padding: 40px 0; }
.corp-card__txt { display: flex; flex-direction: column; gap: 8px; }
.corp-card__txt em { font-style: normal; font-size: 16px; line-height: 24px; font-weight: 700; }
.corp-card__txt strong { font-size: 24px; line-height: 32px; font-weight: 500; }
.corp-card__desc { margin-top: -4px; font-size: 16px; line-height: 24px; }
.corp-card__more { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; color: var(--c-base2); }
.corp-card__more img { width: 20px; height: 20px; transition: translate .4s cubic-bezier(.22, .61, .36, 1); }
.corp-card:hover .corp-card__more img { translate: 4px 0; }

/* 문의 */
.corp-cta { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 40px; padding: 80px 0; text-align: center; }
.corp-cta__tit { display: flex; align-items: center; gap: 20px; width: 100%; }
.corp-cta__tit::before, .corp-cta__tit::after { content: ''; flex: 1; min-width: 20px; height: 1px; background: var(--c-black); }
.corp-cta__tit span { font-family: var(--ff-serif); font-size: 30px; line-height: 38px; font-weight: 400; }
.corp-cta p { font-size: 18px; line-height: 26px; }
.corp-cta .btn-more { margin-top: 20px; }

@media (max-width: 1279px) {
  .corp-card__thumb { width: 44%; }
  .corp-card__body { padding: 24px 0; }
  .corp-card__desc br { display: none; }
}

@media (max-width: 1023px) {
  .corp-visual__img { left: 40%; }
  .corp-type__list { grid-template-columns: 1fr; }
  .corp-card__thumb { width: 294px; }
}

@media (max-width: 767px) {
  .sub-wrap--corp { padding-bottom: 40px; }
  .corp-visual { min-height: 0; }
  .corp-visual__img { left: 30%; width: max(100%, 1600px); }
  .corp-visual__inner { padding-top: 96px; padding-bottom: 32px; }
  .corp-visual__txt h2 { font-size: 30px; line-height: 40px; }
  .corp-visual__txt p { font-size: 15px; line-height: 22px; }
  .corp-visual__btn { margin-top: 28px; }
  .corp-tag { gap: 8px; margin-top: 48px; }
  .corp-tag li { padding: 7px 16px; font-size: 15px; line-height: 22px; }

  .corp-type { margin-top: 56px; }
  .corp-type__head { gap: 8px; }
  .corp-type__tit { font-size: 26px; line-height: 34px; }
  .corp-type__head p { font-size: 14px; line-height: 20px; }
  .corp-type__list { gap: 16px; margin-top: 24px; }
  .corp-card { gap: 16px; }
  .corp-card__thumb { width: 140px; }
  .corp-card__body { justify-content: center; gap: 12px; padding: 0; }
  .corp-card__txt { gap: 4px; }
  .corp-card__txt em { font-size: 14px; line-height: 20px; }
  .corp-card__txt strong { font-size: 18px; line-height: 26px; }
  .corp-card__desc { margin-top: 0; font-size: 14px; line-height: 20px; }
  .corp-card__more { font-size: 14px; line-height: 20px; }

  .corp-cta { gap: 12px; margin-top: 16px; padding: 56px 0; }
  .corp-cta__tit { gap: 12px; }
  .corp-cta__tit span { font-size: 22px; line-height: 30px; }
  .corp-cta p { font-size: 15px; line-height: 22px; }
  .corp-cta .btn-more { margin-top: 16px; }
}

/* ==========================================================================
   제작사례 - sub_case.html (썸네일은 .case__item 재사용)
   ========================================================================== */
.type-tab--lg .type-tab__btn { font-size: 20px; line-height: 28px; }
[data-work-view][hidden] { display: none; }

/* 전체: 종류별 묶음 */
.work-all { padding: 60px 0 21px; }
.work-sec + .work-sec { margin-top: 60px; padding-top: 60px; border-top: 1px solid var(--c-black); }
.work-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.work-sec__tit { font-family: var(--ff-serif); font-size: 26px; line-height: 38px; font-weight: 400; }
.work-sec__head p { margin-top: 4px; font-size: 16px; line-height: 24px; }
.work-sec__more { display: flex; flex-shrink: 0; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; color: var(--c-base2); white-space: nowrap; }
.work-sec__more img { width: 20px; height: 20px; transform: rotate(-90deg); transition: translate .3s; }
.work-sec__more:hover img { translate: 4px 0; }

/* 공통 그리드 (시안 302px x 4, 간격 24px) */
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 20px; }
.work-grid .case__item { flex: none; }

/* 전체: 종류별 가로 슬라이드 (.case__list 재사용, 화살표는 목록 아래 오른쪽) */
.work-slide { margin-top: 20px; }
.work-sec__nav { justify-content: flex-end; margin-top: 20px; }

/* 종류 선택: 목록 */
.work-list { padding-top: 60px; }
.work-list .list-head { margin-top: 0; }

/* 썸네일 버튼 (span 위치는 기존 .case__item 기준 그대로) */
.case__btn { position: absolute; inset: 0; width: 100%; padding: 0; }
.case__btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }

/* 상세 팝업: 좌측 큰 이미지 / 우측 타이틀 · 옵션 · 설명 */
.case-pop {
  width: min(1080px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100% - 64px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--c-white);
  color: var(--c-black);
  overflow: hidden;
}
.case-pop::backdrop { background: rgba(0, 0, 0, .6); }
.case-pop__opt[hidden] { display: none; }
html.is-pop-open { overflow: hidden; }
.case-pop[open] { animation: casePopIn .25s ease-out; }
@keyframes casePopIn { from { opacity: 0; transform: translateY(16px); } }
.case-pop__inner { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; max-height: calc(100vh - 64px); }
.case-pop__img { position: relative; aspect-ratio: 1 / 1; max-height: calc(100vh - 64px); background: var(--c-base9); }
.case-pop__img img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.case-pop__info { display: flex; flex-direction: column; min-height: 0; padding: 72px 48px 48px; overflow-y: auto; }
.case-pop__tit { font-family: var(--ff-serif); font-size: 28px; line-height: 38px; font-weight: 400; }
.case-pop__opt { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; margin-top: 28px; padding: 24px 0; border-top: 1px solid var(--c-black); border-bottom: 1px solid var(--c-base8); font-size: 15px; line-height: 22px; }
.case-pop__opt dt { color: var(--c-base4); }
.case-pop__opt dd { color: var(--c-base1); }
.case-pop__desc { margin-top: 24px; font-size: 16px; line-height: 26px; color: var(--c-base2); }
.case-pop__close { position: absolute; top: 24px; right: 24px; width: 32px; height: 32px; padding: 0; }
.case-pop__close img { display: block; width: 100%; height: 100%; }
@supports (height: 100dvh) {
  .case-pop__inner, .case-pop__img { max-height: calc(100dvh - 64px); }
}

@media (max-width: 1023px) {
  .work-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .case-pop__info { padding: 64px 32px 32px; }
  .case-pop__tit { font-size: 24px; line-height: 32px; }
}

@media (max-width: 767px) {
  .type-tab--lg .type-tab__btn { font-size: 15px; line-height: 22px; }
  .work-all { padding: 40px 0 0; }
  .work-sec + .work-sec { margin-top: 40px; padding-top: 40px; }
  .work-sec__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .work-sec__tit { font-size: 22px; line-height: 30px; }
  .work-sec__head p, .work-sec__more { font-size: 14px; line-height: 20px; }
  .work-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
  .work-list { padding-top: 40px; }
  /* 팝업: 이미지 위 / 정보 아래로 쌓고 전체 스크롤 */
  .case-pop { border-radius: 16px; }
  .case-pop__inner { display: block; overflow-y: auto; }
  .case-pop__img { max-height: none; }
  .case-pop__info { padding: 24px 20px 32px; overflow: visible; }
  .case-pop__tit { font-size: 22px; line-height: 30px; }
  .case-pop__opt { gap: 8px 20px; margin-top: 20px; padding: 16px 0; font-size: 14px; line-height: 20px; }
  .case-pop__desc { margin-top: 16px; font-size: 14px; line-height: 22px; }
  .case-pop__close { top: 12px; right: 12px; width: 36px; height: 36px; padding: 6px; border-radius: 50%; background: rgba(255, 255, 255, .8); }
}

/* ==========================================================================
   기업 · 단체 상세 - sub_corp_employee / event / job / hero.html
   ========================================================================== */
.sub-wrap--corp-dt { padding-bottom: 59px; }
.sub-wrap--corp-hero { padding-bottom: 81px; }
.btn-more--line-black { border-color: var(--c-black); color: var(--c-black); }
.btn-more--w280 { width: 280px; }

.corp-dt__head { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; }
.corp-dt__tit { font-family: var(--ff-serif); font-size: 44px; line-height: 56px; font-weight: 400; }
.corp-dt__head p { font-size: 16px; line-height: 24px; }
.corp-dt__lead { display: flex; flex-direction: column; gap: 4px; }
.corp-dt__lead strong { font-size: 20px; line-height: 28px; font-weight: 400; }

/* 분야 카드 (시안 410.67 x 410.67 썸네일 기준 퍼센트 크롭) */
.corp-dt__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; }
.corp-item { display: flex; flex-direction: column; gap: 20px; }
.corp-item__thumb { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-base9); }
.corp-item__thumb img { position: absolute; max-width: none; object-fit: cover; transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.corp-item:hover .corp-item__thumb img { transform: scale(1.05); }
.corp-item__thumb--emp1 img { left: -22.22%; top: -4.17%; width: 144.27%; height: 108.33%; }
.corp-item__thumb--emp2 img { left: -18.67%; top: -1.56%; width: 137.42%; height: 103.12%; }
.corp-item__thumb--emp3 img { left: -37.75%; top: -1.04%; width: 145.38%; height: 102.08%; }
.corp-item__thumb--evt1 img { left: -6.57%; top: 0; width: 146.1%; height: 101.3%; }
.corp-item__thumb--evt2 img { left: -19.16%; top: -1.22%; width: 135.88%; height: 102.52%; }
.corp-item__thumb--evt3 img { left: -46.83%; top: -1.46%; width: 150.24%; height: 102.76%; }
.corp-item__thumb--job1 img { left: -19.24%; top: 0; width: 137.82%; height: 100.08%; }
.corp-item__thumb--job2 img { left: -18.43%; top: -1.95%; width: 140.02%; height: 103.73%; }
.corp-item__thumb--job3 img { left: -12.99%; top: -.49%; width: 144.89%; height: 100.81%; }
.corp-item__txt { display: flex; flex-direction: column; gap: 4px; }
.corp-item__txt strong { font-size: 24px; line-height: 32px; font-weight: 500; }
.corp-item__txt p { font-size: 16px; line-height: 24px; }

/* 특징 */
.corp-point { display: flex; gap: 24px; margin-top: 80px; }
.corp-point__item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; text-align: center; }
.corp-point__ic { position: relative; height: 120px; overflow: hidden; }
.corp-point__ic img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.corp-point__ic--thanks { width: 107px; }
.corp-point__ic--custom { width: 114px; }
.corp-point__ic--value { width: 143px; }
.corp-point__ic--value img { left: -6.78%; width: 113.56%; object-fit: fill; }
.corp-point__ic--amount, .corp-point__ic--job, .corp-point__ic--detail { width: 120px; }
.corp-point__ic--amount img { left: -200%; width: 300%; object-fit: fill; }
.corp-point__txt { display: flex; flex-direction: column; gap: 4px; }
.corp-point__txt strong { font-size: 20px; line-height: 28px; font-weight: 500; }
.corp-point__txt p { font-size: 16px; line-height: 24px; }

/* 문의 (상세: 본문 바로 아래, 버튼 2개) */
.corp-cta--flush { margin-top: 0; }
.corp-cta__btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.corp-cta__btns .btn-more { margin-top: 0; }
.corp-cta .btn-more--black { background: var(--c-primary); }
.corp-cta .btn-more--line-black { border-color: var(--c-primary); color: var(--c-primary); }

/* 히어로 피규어 */
.hero-body { display: flex; flex-direction: column; gap: 16px; margin-top: 60px; }
.hero-body__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hero-body__thumb { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #272727; }
.hero-body__thumb img { position: absolute; left: 50%; top: 50%; max-width: none; transform: translate(-50%, -50%); }
.hero-body__thumb--01 img { width: 67.59%; height: 87.03%; }
.hero-body__thumb--02 img { width: 70.01%; height: 89.95%; }
.hero-body__thumb--03 img { width: 68.07%; height: 87.76%; }
.hero-body__note { font-size: 15px; line-height: 22px; }

.hero-step { margin-top: 80px; }
.hero-step__tit { font-family: var(--ff-serif); font-size: 24px; line-height: 36px; font-weight: 400; }
.hero-step__list { display: flex; gap: 40px; margin-top: 32px; }
.hero-step__item { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 36px 30px; background: #f4f0eb; }
.hero-step__item + .hero-step__item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -30px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: url(../images/common/ic_next.svg) no-repeat center / 100% 100%;
}
.hero-step__txt { display: flex; flex-direction: column; gap: 8px; }
.hero-step__txt em { font-style: normal; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--c-primary); }
.hero-step__txt strong { font-size: 20px; line-height: 28px; font-weight: 400; }
.hero-step__txt p { margin-top: -4px; font-size: 16px; line-height: 24px; }
.hero-step__img { position: relative; flex-shrink: 0; height: 208px; overflow: hidden; }
.hero-step__img img { position: absolute; max-width: none; }
.hero-step__img--01 { width: 132px; }
.hero-step__img--01 img { left: 0; top: -4.33%; width: 115.91%; height: 108.65%; }
.hero-step__img--02 { width: 91px; }
.hero-step__img--02 img { left: -40.43%; top: -5.12%; width: 162.77%; height: 108.37%; }
.hero-step__img--03 { width: 180px; height: 180px; border-radius: 50%; }
.hero-step__img--03 img { left: -155.26%; top: -96.2%; width: 376.62%; height: 377.36%; }
.hero-step__img--04 { width: 128px; }
.hero-step__img--04 img { left: -16.81%; top: -3.84%; width: 133.63%; height: 106.59%; }

@media (max-width: 1279px) {
  .corp-item__txt br, .corp-point__txt br { display: none; }
  .hero-step__item { padding: 28px 20px; }
}

@media (max-width: 1023px) {
  .corp-dt__list, .hero-body__list { gap: 16px; }
  .corp-item__txt strong { font-size: 20px; line-height: 28px; }
  .corp-point { gap: 16px; }
  .corp-point__item { padding: 24px 0; }

  .hero-step__list { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 32px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); }
  .hero-step__list::-webkit-scrollbar { display: none; }
  .hero-step__item { flex: 0 0 240px; scroll-snap-align: start; }
}

@media (max-width: 767px) {
  .sub-wrap--corp-dt, .sub-wrap--corp-hero { padding-bottom: 40px; }
  .corp-dt__head { gap: 8px; margin-top: 24px; }
  .corp-dt__tit { font-size: 26px; line-height: 34px; }
  .corp-dt__head p { font-size: 14px; line-height: 20px; }
  .corp-dt__lead strong { font-size: 16px; line-height: 24px; }
  .corp-dt__lead br { display: none; }

  .corp-dt__list { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
  .corp-item { gap: 12px; }
  .corp-item__txt strong { font-size: 18px; line-height: 26px; }
  .corp-item__txt p { font-size: 14px; line-height: 20px; }

  .corp-point { flex-direction: column; gap: 8px; margin-top: 48px; }
  .corp-point__item { gap: 12px; padding: 16px 0; }
  .corp-point__txt strong { font-size: 17px; line-height: 24px; }
  .corp-point__txt p { font-size: 14px; line-height: 20px; }

  .corp-cta__btns { flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; }

  .hero-body { gap: 12px; margin-top: 32px; }
  .hero-body__list { gap: 8px; }
  .hero-body__note { font-size: 13px; line-height: 20px; }
  .hero-step { margin-top: 56px; }
  .hero-step__tit { font-size: 20px; line-height: 30px; }
  .hero-step__list { gap: 32px; margin-top: 20px; }
  .hero-step__item { flex-basis: 220px; padding: 24px 20px; }
  .hero-step__item + .hero-step__item::before { left: -26px; }
  .hero-step__txt strong { font-size: 17px; line-height: 24px; }
  .hero-step__txt em, .hero-step__txt p { font-size: 14px; line-height: 20px; }
}

/* ==========================================================================
   로그인 (login.html, node 9645:12912)
   ========================================================================== */
.sub-wrap--member { padding-bottom: 160px; }
.member-title { margin-top: 60px; }
.member-title--wide { max-width: 590px; }

.login { display: flex; flex-direction: column; gap: 40px; width: 414px; max-width: 100%; margin: 60px auto 0; }
.login__form { display: flex; flex-direction: column; gap: 24px; }
.login__fields { display: flex; flex-direction: column; gap: 20px; }

/* 밑줄형 입력 */
.form-line { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--c-base8); transition: border-color .2s; }
.form-line:focus-within { border-color: var(--c-black); }
.form-line label { font-size: 15px; line-height: 22px; }
.form-line label em { margin-left: 2px; font-style: normal; color: var(--c-red); }
.form-line input { width: 100%; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; font-size: 16px; line-height: 24px; color: var(--c-black); outline: 0; }
.form-line input::placeholder { color: var(--c-base8); }
.form-line__row { display: flex; align-items: center; gap: 12px; }
.form-line__row input { flex: 1; min-width: 0; }
.form-line--btn { gap: 8px; padding-bottom: 8px; }
.form-line__btn { flex-shrink: 0; padding: 5px 11px; border: 1px solid var(--c-black); border-radius: 4px; background: var(--c-white); font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s; }
.form-line__btn:hover { background: var(--c-base9); }
.form-line__btn:disabled { border-color: var(--c-base9); background: var(--c-base9); color: var(--c-base7); cursor: default; }
.form-line__eye { flex-shrink: 0; width: 24px; height: 24px; padding: 0; }
.form-line__eye img { width: 24px; height: 24px; }

.login__btn { height: 56px; border-radius: 4px; background: var(--c-primary); font-size: 16px; line-height: 24px; font-weight: 500; color: var(--c-white); transition: opacity .2s; }
.login__btn:hover { opacity: .85; }
.login__btn:disabled { background: var(--c-base9); color: var(--c-base7); opacity: 1; cursor: default; }
.login__form--guest .login__btn:disabled { background: #f4f4f4; } /* 비회원 주문조회: 조회하기 비활성 */
.login__btn--line { display: flex; align-items: center; justify-content: center; border: 1px solid var(--c-base8); background: var(--c-white); color: var(--c-black); transition: border-color .2s; }
.login__btn--line:hover { opacity: 1; border-color: var(--c-black); }

/* 회원가입 · 회원정보 수정: 중복확인 · 주소검색 등 버튼 컬러 통일 (비활성도 같은 색) */
.login__form--join .form-line__btn, .my-form .form-line__btn { border-color: #ece3d6; background: #ece3d6; color: var(--c-primary); transition: opacity .2s, background-color .1s, transform .1s; }
.login__form--join .form-line__btn:hover, .my-form .form-line__btn:hover { opacity: .8; }
/* press: 살짝 진해지며 눌림 (hover · press 모두 비활성 버튼도 동일하게) */
.login__form--join .form-line__btn:active, .my-form .form-line__btn:active { background-color: #ddd0bd; transform: scale(.97); }
/* 가입하기: 로그인 버튼과 동일 (필수 입력 전 비활성 상태도 같은 색) */
.login__form--join .login__btn, .login__form--join .login__btn:disabled { background: var(--c-primary); color: var(--c-white); }
.login__form--join .login__btn:disabled:hover { opacity: .85; }

.login__links { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; line-height: 22px; }
.login__msg { margin-top: -16px; font-size: 14px; line-height: 20px; color: var(--c-red); }
.login__find { display: flex; align-items: center; gap: 15px; color: var(--c-base2); }
.login__find a + a { position: relative; }
.login__find a + a::before { content: ''; position: absolute; left: -8px; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: var(--c-base8); }
.login__links a:hover { text-decoration: underline; text-underline-position: from-font; }
.login__back { align-self: center; font-size: 15px; line-height: 22px; }
.login__back:hover { text-decoration: underline; text-underline-position: from-font; }
.login__foot { font-size: 15px; line-height: 22px; text-align: center; }
.login__foot a { margin-left: 4px; text-decoration: underline; text-underline-position: from-font; }

.login__sns { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.login__sns-tit { display: flex; align-items: center; gap: 16px; width: 100%; font-size: 14px; line-height: 20px; color: var(--c-base1); white-space: nowrap; }
.login__sns-tit::before, .login__sns-tit::after { content: ''; flex: 1; height: 1px; background: var(--c-base8); }
.login__sns-list { display: flex; gap: 12px; }
.sns-btn { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; }
.sns-btn--kakao { background: #fee500; }
.sns-btn--kakao img { width: 36px; height: auto; }
.sns-btn--naver { background: #03c75a; }
.sns-btn--naver img { width: 26.18px; height: 23.27px; }

@media (max-width: 1023px) {
  .sub-wrap--member { padding-bottom: 100px; }
}

@media (max-width: 767px) {
  .sub-wrap--member { padding-bottom: 80px; }
  .member-title { margin-top: 40px; }
  .login { gap: 32px; margin-top: 40px; }
  .form-line label, .login__links, .login__back, .login__foot { font-size: 14px; line-height: 20px; }
}

/* ==========================================================================
   검색 결과 (search.html) — 목록은 피규어 제작의 list-head / prd-list 공유, 입력창은 common.css의 search__form
   ========================================================================== */
.search-page__form { max-width: 640px; margin: 40px auto 0; }
.search-page__tags { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 20px; }
.search-page__tags strong { font-size: 14px; line-height: 20px; font-weight: 500; }
.search-page__tags ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.search-page__tags a { display: block; padding: 5px 14px; border: 1px solid var(--c-base8); border-radius: 999px; font-size: 14px; line-height: 20px; color: var(--c-base2); transition: border-color .2s, color .2s; }
.search-page__tags a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.sub-title [data-search-summary] b { font-weight: 700; }
.sub-wrap--search [data-search-result][hidden] { display: none; }

.search-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 40px; padding: 80px 20px; border-top: 1px solid var(--c-base8); border-bottom: 1px solid var(--c-base8); text-align: center; }
.search-empty[hidden] { display: none; }
.search-empty strong { font-size: 20px; line-height: 28px; font-weight: 500; }
.search-empty strong b { color: var(--c-primary); }
.search-empty__tips { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 22px; color: var(--c-base4); }
.search-empty .btn-more { margin-top: 16px; }

@media (max-width: 767px) {
  .search-page__form { margin-top: 28px; }
  .search-page__tags strong { width: 100%; text-align: center; }
  .search-empty { padding: 56px 0; }
  .search-empty strong { font-size: 17px; line-height: 24px; }
  .search-empty__tips { font-size: 14px; line-height: 20px; }
}