/* =========================================================
   FUJIFILM x UNSELF 2026 리퍼비시 판매
   wrapper: .unself-2026
   hero 구성 = gfx-challenge-2026 (우측 상단 FUJIFILM 로고 +
   사진 줌인 후 중앙 로고 순차 등장, 순수 CSS 자동재생)
   playwith 게시판 규약 = docs/content-maintenance/playwith-wide-page.md
   (§4 breakout / §5 cross-origin !important / §12-B-4 폰트 @import)
   ========================================================= */

/* 폰트 — post-body 는 <head> 접근 불가 → @import (첫 룰보다 앞) */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* 풀폭 breakout — 본문 컬럼(col-xl-6 push-3, 가운데 50%)을 뚫고 .l-wrap(최대 1360px) 사용.
   sticky/fixed 자식이 없으므로 transform 공식 사용. cross-origin 캐스케이드 손실 대비 !important */
.unself-2026{
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
}
@media (min-width: 60em){
  .unself-2026{
    width: 100vw !important;
    max-width: 1360px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}
/* 100vw 는 세로 스크롤바 폭을 포함 → 오른쪽으로 ~8px 넘쳐 가로 스크롤 발생.
   현재 사이트 .post 는 overflow:visible 이라 잘라 주지 않음(2026-10-15 실측) →
   이 페이지가 있을 때만 main 에서 가로 클립. clip 은 스크롤 컨테이너를 만들지 않아 sticky 영향 없음 */
main:has(.unself-2026){ overflow-x: clip; }
/* 45em 미만에서 사이트 .post__body 가 좌우 padding 20px → 상쇄해 hero 풀블리드 + 내용폭 확보
   (안 하면 375px 화면에서 내용폭 295px < Instagram embed 최소폭 326px 로 넘침) */
@media (max-width: 44.99em){
  .unself-2026{
    width: calc(100% + 40px) !important;
    margin: 0 -20px !important;
  }
}
.unself-2026 em{ color: inherit; }

.unself-2026{
  --bg: #ffffff;
  --cream: #faf6ef;
  --cream-2: #f2ece1;
  --ink: #231815;
  --ink-2: #4d4440;
  --muted: #8f8580;
  --line: #ddd5ca;
  --line-soft: #ece6dc;
  --red: #e60027;
  --max: 1040px;

  background: var(--bg);
  color: var(--ink);
  font-family: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.01em;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.unself-2026 *{ box-sizing: border-box; }
.unself-2026 img{ display: block; max-width: 100%; }
.unself-2026 p{ margin: 0; }
.unself-2026 h1,
.unself-2026 h2,
.unself-2026 h3{ margin: 0; font-family: inherit; color: var(--ink); }
.unself-2026 a{ color: inherit; }

/* ---------- hero (gfx-challenge-2026 구성 그대로) ---------- */
.unself-2026 .us-hero{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
}
.unself-2026 .us-hero-logo{
  position: absolute;
  top: 48px;
  right: 54px;
  z-index: 2;
  width: 110px;
  opacity: 0.95;
}
.unself-2026 .us-hero picture{ display: block; }
/* 로고 picture 는 레이아웃에서 빠지게 → img 가 flex item 으로 % 폭 유지 */
.unself-2026 .us-hero-center picture{ display: contents; }
.unself-2026 .us-hero-img{
  width: 100%;
  height: auto;
  display: block;
}
.unself-2026 .us-hero-center{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}
.unself-2026 .us-hero-center img{
  width: 34%;
  max-width: 440px;
  min-width: 200px;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.35));
}

/* 기본 상태 = 보임(opacity:1). 모션 허용 시에만 순차 등장.
   fill-mode both 로 delay 동안 시작(숨김) 상태 유지 → 사진 뒤에 로고 등장 */
@keyframes usHeroImgReveal{
  from{ opacity: 0; transform: scale(1.06); }
  to{ opacity: 1; transform: scale(1); }
}
@keyframes usHeroLogoReveal{
  0%{ opacity: 0; transform: translateY(18px) scale(0.94); }
  100%{ opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: no-preference){
  .unself-2026 .us-hero-img{
    animation: usHeroImgReveal 1.2s cubic-bezier(0.22,0.61,0.36,1) 0.15s both;
  }
  .unself-2026 .us-hero-center img{
    animation: usHeroLogoReveal 0.9s cubic-bezier(0.22,0.61,0.36,1) 1s both;
  }
}

/* ---------- shared ---------- */
.unself-2026 .us-wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}
.unself-2026 .us-section{ padding: 88px 0; }
.unself-2026 .us-section--cream{ background: var(--cream); }

.unself-2026 .us-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Jost", sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}
.unself-2026 .us-eyebrow::before{
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--muted);
}
.unself-2026 .us-head{ margin-bottom: 40px; }
.unself-2026 .us-head h2{
  margin-top: 14px;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.unself-2026 .us-sub{
  margin: 56px 0 18px;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.unself-2026 .us-sub:first-of-type{ margin-top: 0; }
.unself-2026 .us-sub .num{
  font-family: "Jost", sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: var(--muted);
  letter-spacing: 0.08em;
}

/* ---------- intro ---------- */
.unself-2026 .us-intro{ padding: 96px 0 88px; }
.unself-2026 .us-intro-grid{
  margin-top: 28px;
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.unself-2026 .us-intro-media img{
  width: 100%;
  height: auto;
}
.unself-2026 .us-intro h1{
  margin-top: 0;
  font-weight: 600;
  font-size: 38px;
  line-height: 1.3;
  letter-spacing: -0.025em;
}
.unself-2026 .us-intro h1 .x{
  font-family: "Jost", sans-serif;
  font-weight: 300;
  margin: 0 0.15em;
}
.unself-2026 .us-intro-body{
  margin-top: 36px;
  max-width: 760px;
}
.unself-2026 .us-intro-body p{
  font-size: 17px;
  line-height: 1.9;
  color: var(--ink-2);
  margin-bottom: 16px;
}
.unself-2026 .us-intro-body p:last-child{ margin-bottom: 0; }
.unself-2026 .us-intro-body strong{ color: var(--ink); font-weight: 600; }

/* ---------- event info ---------- */
.unself-2026 .us-info{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.unself-2026 .us-info-cell{
  background: #fff;
  padding: 28px 28px 30px;
}
.unself-2026 .us-info-cell .label{
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.unself-2026 .us-info-cell .value{
  display: block;
  margin-top: 8px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.45;
}
.unself-2026 .us-info-cell .addr{
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.unself-2026 .us-event-note{
  margin-top: 28px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-2);
}
.unself-2026 .us-event-note a{
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* 2단: 왼쪽 Instagram / 오른쪽 행사 정보 (DOM 은 정보가 먼저 → 모바일에서 정보가 위) */
.unself-2026 .us-event-grid{
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr); /* = .us-intro-grid 이미지 폭 */
  gap: 64px;
  align-items: start;
}
.unself-2026 .us-event-grid .us-insta{ grid-column: 1; grid-row: 1; }
.unself-2026 .us-event-grid .us-event-info{ grid-column: 2; grid-row: 1; }
.unself-2026 .us-event-info .us-info{ grid-template-columns: 1fr; }

/* Instagram embed */
.unself-2026 .us-insta{
  display: flex;
  justify-content: center;
  min-width: 0;
}
.unself-2026 .us-insta .instagram-media{
  margin: 0 auto !important;
  max-width: 400px !important;
  width: 100% !important;
}
.unself-2026 .us-insta iframe.instagram-media{
  max-width: 400px !important;
  width: 100% !important;
}

/* ---------- models (chips) ---------- */
.unself-2026 .us-models{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.unself-2026 .us-models li{
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  font-weight: 500;
}

/* ---------- table ---------- */
.unself-2026 .us-table-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.unself-2026 .us-table{
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 15px;
  background: #fff;
}
.unself-2026 .us-table th,
.unself-2026 .us-table td{
  padding: 14px 12px;
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
  vertical-align: middle;
  line-height: 1.45;
}
.unself-2026 .us-table thead th{
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  background: var(--cream-2);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.unself-2026 .us-table tbody th{
  text-align: left;
  font-weight: 600;
}
.unself-2026 .us-table .price{
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.unself-2026 .us-table .price-orig{ color: var(--muted); }
.unself-2026 .us-table .price-sale{ font-weight: 700; color: var(--red); }
.unself-2026 .us-table td.qty{ font-variant-numeric: tabular-nums; }
.unself-2026 .us-table td.qty.empty{ color: var(--muted); }
.unself-2026 .us-table tfoot th,
.unself-2026 .us-table tfoot td{
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-weight: 700;
  background: var(--cream);
}
.unself-2026 .us-table-note{
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--muted);
}

/* ---------- steps ---------- */
.unself-2026 .us-lead{
  margin-bottom: 22px;
  font-size: 16px;
  color: var(--ink-2);
}
.unself-2026 .us-steps{
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}
.unself-2026 .us-step{
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.unself-2026 .us-step .step-num{
  font-family: "Jost", sans-serif;
  font-weight: 300;
  font-size: 30px;
  line-height: 1;
  color: var(--muted);
}
.unself-2026 .us-step .step-title{
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
}
.unself-2026 .us-step .step-desc{
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-2);
}
.unself-2026 .us-step .step-desc + .step-desc{ margin-top: 4px; }
.unself-2026 .us-step .em{ color: var(--red); font-weight: 600; }
.unself-2026 .us-step .note{
  display: block;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- caution box ---------- */
.unself-2026 .us-caution{
  margin-top: 40px;
  padding: 28px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
}
.unself-2026 .us-caution h3{
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 12px;
}
.unself-2026 .us-caution p{
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-2);
}
.unself-2026 .us-caution ul{
  margin: 14px 0 0;
  padding-left: 20px;
}
.unself-2026 .us-caution li{
  font-size: 15.5px;
  line-height: 1.75;
  margin-bottom: 6px;
  color: var(--ink);
  font-weight: 500;
}
.unself-2026 .us-caution li:last-child{ margin-bottom: 0; }
.unself-2026 .us-caution li .sub{ color: var(--ink-2); font-weight: 400; }

/* ---------- FAQ (details/summary, JS 불필요) ---------- */
.unself-2026 .us-faq{ border-top: 1px solid var(--ink); }
.unself-2026 .us-faq details{ border-bottom: 1px solid var(--line); }
.unself-2026 .us-faq summary{
  position: relative;
  display: block;
  padding: 22px 48px 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}
.unself-2026 .us-faq summary::-webkit-details-marker{ display: none; }
.unself-2026 .us-faq summary .q{
  font-family: "Jost", sans-serif;
  font-weight: 400;
  color: var(--muted);
  margin-right: 10px;
}
.unself-2026 .us-faq summary::after{
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.unself-2026 .us-faq details[open] summary::after{
  transform: rotate(-135deg);
  margin-top: -2px;
}
.unself-2026 .us-faq .a{
  padding: 0 0 24px 30px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink-2);
}
.unself-2026 .us-faq .a p + p{ margin-top: 8px; }
.unself-2026 .us-faq .sched{
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 20px;
}
.unself-2026 .us-faq .sched dt{ font-weight: 600; color: var(--ink); }
.unself-2026 .us-faq .sched dd{ margin: 0; }

/* ---------- closing ---------- */
.unself-2026 .us-closing{
  padding: 80px 0 96px;
  background: var(--ink);
  color: #fff;
}
.unself-2026 .us-closing .us-eyebrow{ color: rgba(255,255,255,0.6); }
.unself-2026 .us-closing .us-eyebrow::before{ background: rgba(255,255,255,0.6); }
.unself-2026 .us-closing p{
  margin-top: 22px;
  max-width: 760px;
  font-size: 17px;
  line-height: 1.9;
  color: rgba(255,255,255,0.86);
}
.unself-2026 .us-closing strong{ color: #fff; font-weight: 600; }

/* ---------- tablet = breakout 꺼지는 구간 (60em 미만) ----------
   본문이 사이트 컬럼(약 500px) 안에 갇히므로 intro 1단 + 표 카드형을 여기서부터 적용 */
@media (max-width: 959.98px){
  .unself-2026 .us-wrap{ padding: 0 20px; }
  .unself-2026 .us-intro-grid{ grid-template-columns: 1fr; gap: 32px; margin-top: 24px; }
  .unself-2026 .us-intro-media img{ max-width: 400px; }
  .unself-2026 .us-event-grid{ grid-template-columns: 1fr; gap: 40px; }
  .unself-2026 .us-event-grid .us-insta,
  .unself-2026 .us-event-grid .us-event-info{ grid-column: 1; grid-row: auto; }

  /* 표 → 기종별 카드 (같은 table 마크업, data-label 사용) */
  .unself-2026 .us-table-scroll{ overflow: visible; }
  .unself-2026 .us-table{ min-width: 0; background: transparent; font-size: 14.5px; }
  .unself-2026 .us-table colgroup,
  .unself-2026 .us-table thead{ display: none; }
  .unself-2026 .us-table,
  .unself-2026 .us-table tbody,
  .unself-2026 .us-table tfoot{ display: block; }
  .unself-2026 .us-table tr{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 2px solid var(--ink);
  }
  .unself-2026 .us-table th,
  .unself-2026 .us-table td{ border: 0; padding: 0; }
  .unself-2026 .us-table tbody th,
  .unself-2026 .us-table tfoot th{
    grid-column: 1 / -1;
    padding: 14px 16px 10px;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    background: transparent;
  }
  .unself-2026 .us-table td.price{
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 16px;
  }
  .unself-2026 .us-table td.price-sale{ padding-bottom: 14px; font-size: 16px; }
  .unself-2026 .us-table td.price::before{
    content: attr(data-label);
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
  }
  .unself-2026 .us-table td.price-orig{ text-decoration: none; }
  .unself-2026 .us-table td.qty{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 4px 12px;
    background: var(--cream);
    border-top: 1px solid var(--line-soft);
    font-weight: 600;
  }
  .unself-2026 .us-table td.qty + td.qty{ border-left: 1px solid var(--line-soft); }
  .unself-2026 .us-table td.qty::before{
    content: attr(data-label);
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
  }
  .unself-2026 .us-table td.blank{ display: none; }
  /* 합계 카드 */
  .unself-2026 .us-table tfoot tr{ background: var(--cream-2); border-color: var(--ink); }
  .unself-2026 .us-table tfoot th,
  .unself-2026 .us-table tfoot td{ border-bottom: 0; }
  .unself-2026 .us-table tfoot th{ border-top: 0; }
  .unself-2026 .us-table tfoot td.qty{ background: transparent; border-top: 1px solid var(--line); }
}

/* ---------- mobile ---------- */
@media (max-width: 760px){
  .unself-2026{ font-size: 15px; }
  .unself-2026 .us-hero-logo{ width: 80px; top: 20px; right: 20px; }
  /* 모바일 = hero-mobile.jpg(정사각) + logo-unself-mobile.png */
  .unself-2026 .us-hero-center img{ width: 58%; min-width: 0; max-width: 300px; }

  .unself-2026 .us-wrap{ padding: 0 20px; }
  .unself-2026 .us-section{ padding: 64px 0; }
  .unself-2026 .us-intro{ padding: 64px 0 56px; }
  .unself-2026 .us-intro-grid{ grid-template-columns: 1fr; gap: 32px; margin-top: 24px; }
  .unself-2026 .us-intro h1{ font-size: 27px; }
  .unself-2026 .us-intro-body{ margin-top: 26px; }
  .unself-2026 .us-intro-body p{ font-size: 15.5px; }
  .unself-2026 .us-head{ margin-bottom: 28px; }
  .unself-2026 .us-head h2{ font-size: 23px; }
  .unself-2026 .us-sub{ margin-top: 44px; font-size: 18px; }

  .unself-2026 .us-info{ grid-template-columns: 1fr; }
  .unself-2026 .us-info-cell{ padding: 20px 20px 22px; }
  .unself-2026 .us-info-cell .value{ font-size: 18px; }
  .unself-2026 .us-event-note{ font-size: 15px; }

  .unself-2026 .us-models li{ font-size: 14px; padding: 8px 14px; }

  .unself-2026 .us-step{ grid-template-columns: 44px 1fr; gap: 12px; padding: 20px 0; }
  .unself-2026 .us-step .step-num{ font-size: 24px; }
  .unself-2026 .us-step .step-title{ font-size: 16.5px; }
  .unself-2026 .us-step .step-desc{ font-size: 14.5px; }

  .unself-2026 .us-caution{ padding: 22px 20px; }
  .unself-2026 .us-caution p,
  .unself-2026 .us-caution li{ font-size: 14.5px; }

  .unself-2026 .us-faq summary{ font-size: 15.5px; padding: 18px 36px 18px 0; }
  .unself-2026 .us-faq .a{ padding-left: 0; font-size: 14.5px; }
  .unself-2026 .us-faq .sched{ grid-template-columns: 1fr; gap: 0; }
  .unself-2026 .us-faq .sched dd{ margin-bottom: 8px; }

  .unself-2026 .us-closing{ padding: 60px 0 72px; }
  .unself-2026 .us-closing p{ font-size: 15.5px; }
}