@font-face {
  font-family: "Heukwol Myeongjo";
  src: url("/shadowsaju/vendor/fonts/nanum-myeongjo-ui.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --hw-black: #09090f;
  --hw-surface: #11101a;
  --hw-paper: #e2def1;
  --hw-soft: #b8b3cc;
  --hw-dim: #89839f;
  --hw-rule: rgba(151, 135, 198, .24);
  --hw-seal: #7863a6;
  --hw-accent: #9283bd;
  --hw-serif: "Heukwol Myeongjo", "Noto Serif KR", Batang, serif;
  --hw-sans: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
}


/* Homepage-only subsets of the existing Noto Serif KR files; see OFL-NotoSerifKR.txt. */
@font-face { font-family:"Heukwol Editorial"; font-style:normal; font-weight:300; font-display:swap; src:url("/shadowsaju/vendor/fonts/home-serif-300.woff2") format("woff2"); }
@font-face { font-family:"Heukwol Editorial"; font-style:normal; font-weight:400; font-display:swap; src:url("/shadowsaju/vendor/fonts/home-serif-400.woff2") format("woff2"); }
:root { color-scheme: dark; --bg:#0a0a0b; --ivory:#f3efe6; --text:#e6e1d6; --muted:#b9bcc6; --silver-dim:#9b9da7; --line:rgba(185,188,198,.18); --serif:"Heukwol Editorial","Noto Serif KR",Batang,serif; --ui-serif:"Noto Serif KR",Batang,serif; --wordmark:"Solmoe KimDaeGeon","Heukwol Editorial","Noto Serif KR",Batang,serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin:0; min-height:100vh; background:#000; color:var(--text); font-family:var(--hw-sans); font-synthesis:none; }
.skip-link { position: fixed; z-index: 20; top: -100px; left: 16px; padding: 12px; background: var(--text); color: var(--bg); }
.skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.selector-shell { width: min(100%, 450px); margin-inline: auto; overflow-x: clip; }

/* 261009_ 원컬럼 바깥 배경 */
html[data-release-profile="extra-home"] { background: #18191a; }

/* 261008_ 메인 헤더 히어로 겹침 */
.hw-header.hw-header--main { position: fixed; top: 0; left: 0; right: 0; }


/* 261006_ 히어로 배너 */
.selector-shell { background: #000; }
.selector-hero { position: relative; width: 100%; aspect-ratio: 450 / 711; overflow: hidden; background: #0a0a0b url('/site-home/img/hero-main-close.webp') center top / cover no-repeat; box-shadow: 0 10px 28px rgba(0,0,0,.55); }
.selector-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.selector-hero-video { object-fit: contain; background: #0a0a0b; }
/* 261012_ 영상 상단 검은 여백 가리기 */
.selector-hero-video { top: -5%; height: 105%; }
.selector-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 49.13%, #000 71.54%, #050507 100%); }
.selector-hero-content { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 24px; padding: 0 clamp(20px,min(6.2vw,27.9px),28px) clamp(28px,min(8.9vw,40.05px),40px); }
.selector-hero h1 { margin: 0; color: #fff; font: 700 clamp(34px,min(9.78vw,44.01px),44px)/1.3 var(--serif); }
/* 261015_ 화면에서는 숨기고 검색·스크린리더용 서비스명으로만 유지 */
.selector-service-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.selector-service-intro { margin: 0 20px 24px; color: var(--muted); font: 400 14px/1.8 var(--hw-sans); word-break: keep-all; }
.selector-hero-stack { display: flex; flex-direction: column; gap: 14px; }
.selector-hero-origin, .selector-hero-limit, .selector-hero-line, .selector-hero-after { margin: 0; font: 500 16px/1.4 var(--serif); letter-spacing: -0.03em; word-break: keep-all; }
.selector-hero-origin { color: #d9d9de; font-weight: 600; }
.selector-hero-limit { color: #b7b7b7; }
.selector-hero-line { color: #b7b7b7; }
.selector-hero-premise { color: #b7b7b7; }
.selector-hero-accent { display: block; margin-top: 6px; color: #e7e7e7; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; }
.selector-hero-after { color: #9a9a9a; }

/* 261006_ 카테고리 칩 탭 */
.selector-services { padding: 40px 0 160px; background: #000; }
.chip-tabs { display: flex; gap: 8px; padding: 0 20px 20px; overflow-x: auto; scrollbar-width: none; }
.chip-tabs::-webkit-scrollbar { display: none; }
.chip-tab { flex-shrink: 0; padding: 8px 24px; border: 1px solid #272732; border-radius: 24px; background: #000; color: #b2b8cf; font: 600 14px/1.3 "Pretendard Variable", var(--hw-sans); white-space: nowrap; cursor: pointer; }
.chip-tab.is-active { border-color: #b2b8cf; background: #f7f7f7; color: #070707; font-weight: 700; }
.s-card[hidden], [data-filter-group][hidden] { display: none; }

/* 261006_ 상품 카드 공통 */
.product-row { padding: 40px 20px 0; }
.product-row-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.product-row-eyebrow { margin: 0; color: #b2b8cf; font: 600 12px/1.3 "Pretendard Variable", var(--hw-sans); letter-spacing: .1em; }
.product-row-title { margin: 0; color: #ececef; font: 700 20px/1.3 var(--ui-serif); }
.card-scroll { display: flex; gap: 10px; overflow-x: hidden; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
/* 261007_ 카드 단위 스냅 */
.card-scroll.is-sliding { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; }
.card-scroll.is-sliding > * { scroll-snap-align: start; scroll-snap-stop: always; }
.card-scroll.is-dragging { scroll-snap-type: none; }
.card-scroll::-webkit-scrollbar { display: none; }
.s-card { position: relative; flex-shrink: 0; display: block; width: 158px; height: 237px; border-radius: 16px; overflow: hidden; color: inherit; text-decoration: none; }
.s-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-card-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,7,0) 0%, rgba(5,5,7,.15) 40%, rgba(5,5,7,.8) 90%); }
.s-card-body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 4px; padding: 0 12px 12px; }
.s-card-tag { color: #b2b8cf; font: 700 10px/1.2 "Pretendard Variable", var(--hw-sans); letter-spacing: .02em; }
.s-card-title { color: #fff; font: 700 16px/1.2 "Pretendard Variable", var(--hw-sans); }
.s-card-title--lg { font-size: 20px; }
.s-card-desc { color: #d1d1d9; font: 400 12px/1.3 "Pretendard Variable", var(--hw-sans); letter-spacing: -0.02em; }
.product-row--love { padding-top: 60px; }
.product-row--love .card-scroll { gap: 12px; }
.product-row--love .s-card { width: calc((100% - 12px) / 2); height: 299px; }
/* 261007_ 궁합 선택 시 썸네일 크기 통일 */
#services[data-filter="match"] .product-row--love .s-card { width: 158px; height: 237px; }

/* 261006_ 준비중 카드 */
.soon-card { position: relative; flex-shrink: 0; width: 158px; height: 237px; border-radius: 16px; overflow: hidden; }
.soon-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.soon-card-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.3) 10%, rgba(0,0,0,.8) 90%); }
.soon-card-body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 4px; padding: 0 12px 12px; }
.soon-card-tag { color: #e8e8e8; font: 500 10px/1.2 "Pretendard Variable", var(--hw-sans); letter-spacing: .02em; }
.soon-card-title { color: #fff; font: 700 20px/1.2 "Pretendard Variable", var(--hw-sans); letter-spacing: -0.01em; }
.product-row--soon { padding-top: 60px; padding-bottom: 60px; }

/* 261009_ 카카오 채널 CTA: 화면 하단 30px 위에 떠 있는 플로팅, 450px 컬럼 안. 뒤 영역은 헤더처럼 검정→투명 그라데이션 */
.kakao-cta-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; box-sizing: border-box; max-width: 450px; margin: 0 auto; padding: 20px 20px calc(30px + env(safe-area-inset-bottom)); background: linear-gradient(0deg, #000 0%, rgba(0,0,0,.95) 45%, rgba(0,0,0,.6) 75%, rgba(0,0,0,0) 100%); }
.kakao-cta-wrap:has(.kakao-cta[hidden]):not(:has(.kakao-cta-notice:not([hidden]))) { display: none; }
/* 261012_ 히어로 스크롤 완료 후 카카오 채널 CTA 등장 */
.kakao-cta-wrap { transition: opacity .6s ease, transform .6s ease; }
.kakao-cta-pending:not(.hero-passed) .kakao-cta-wrap { opacity: 0; visibility: hidden; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s; }
@media (prefers-reduced-motion: reduce) { .kakao-cta-wrap, .kakao-cta-pending:not(.hero-passed) .kakao-cta-wrap { transition: none; } }
body .hw-public-footer { padding-bottom: calc(118px + env(safe-area-inset-bottom)); }

/* 261007_ 가장자리 카드 음영 */
.s-card::after, .soon-card::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.82); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.s-card.is-edge::after, .soon-card.is-edge::after { opacity: 1; }

/* 261007_ 카드 문구 한 줄 말줄임 */
.s-card-tag, .s-card-title, .s-card-desc, .soon-card-tag, .soon-card-title { display: block; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 261006_ 무료 컨텐츠 배너 */
.editorial-banner { position: relative; display: block; margin: 60px 0 0; width: 100%; aspect-ratio: 450 / 292; overflow: hidden; color: inherit; text-decoration: none; background: #fff; }
.editorial-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.editorial-banner-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(5,5,7,.85) 100%); }
.editorial-banner-body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 0 28px; }
.editorial-banner-kicker { color: #b2b8cf; font: 600 12px/1.3 "Pretendard Variable", var(--hw-sans); letter-spacing: -0.02em; }
.editorial-banner-title { margin-top: 6px; color: #ececef; font: 700 24px/1.3 var(--ui-serif); letter-spacing: -0.02em; }

/* 261011_ 모바일 히어로·상품 카드·터치 영역 */
@media (max-width: 449px) {
  body { min-height: 100svh; }
  .selector-hero { min-height: 600px; }
  .selector-hero-video { object-fit: cover; }
  .selector-hero-content { gap: 20px; }
  .selector-hero-stack { gap: 12px; }
  .chip-tab { min-height: 44px; padding-inline: 20px; }
  .chip-tabs { scroll-padding-inline: 20px; }
  .card-scroll { overflow-x: auto; }
  .product-row--love .s-card { height: auto; aspect-ratio: 199 / 299; min-height: 237px; }
  .s-card-desc { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .s-card-title--lg { font-size: clamp(17px, 5vw, 20px); }
  .editorial-banner-body { padding-inline: 20px; }
  .editorial-banner-title { font-size: clamp(20px, 5.4vw, 24px); }
}
/* 261012_ 모바일 첫 화면 고정 + 스크롤 연동
   - 높이는 주소창이 접힌 최대 화면(lvh)으로 고정: 주소창이 접히고 펴질 때 배너가 다시 계산되며 확대·축소되거나 흔들리지 않게 함
   - 문구는 주소창이 펴진 최소 화면(svh) 안에 오도록 그 차이만큼 띄움
   - 배경 이미지는 영상 첫 장면과 같은 그림이라 영상이 뜨기 전후 크기가 같음 */
@media (max-width: 449px) {
  .selector-hero-scrub { height: 190vh; height: calc(100lvh + 90svh); }
  .selector-hero { position: sticky; top: 0; height: 100vh; height: 100lvh; min-height: 0; aspect-ratio: auto; background-image: url('/site-home/img/hero-main-mobile-first.webp'); }
  .selector-hero { background-size: auto 105%; background-position: center bottom; }
  .selector-hero-content { padding-bottom: calc(clamp(28px, min(8.9vw, 40.05px), 40px) + 100lvh - 100svh); }
}
.editorial-banner-cta { margin-top: 16px; padding-bottom: 8px; color: #ececef; font: 500 14px/1.3 "Pretendard Variable", var(--hw-sans); letter-spacing: -0.02em; }

.hero-sequence .selector-hero-image,
.hero-sequence .selector-hero h1,
.hero-sequence .selector-hero-origin,
.hero-sequence .selector-hero-limit,
.hero-sequence .selector-hero-premise,
.hero-sequence .selector-hero-accent,
.hero-sequence .selector-hero-after { opacity: 0; }
.hero-sequence.hero-ready .selector-hero-image { animation: hero-image-enter 1.55s ease-out both; }
.hero-sequence.hero-ready .selector-hero h1 { animation: hero-copy-enter .78s ease-out 1.55s both; }
.hero-sequence.hero-ready .selector-hero-origin { animation: hero-copy-enter .78s ease-out 1.9s both; }
.hero-sequence.hero-ready .selector-hero-limit { animation: hero-copy-enter .78s ease-out 2.25s both; }
.hero-sequence.hero-ready .selector-hero-premise { animation: hero-copy-enter .72s ease-out 2.6s both; }
.hero-sequence.hero-ready .selector-hero-accent { animation: hero-copy-enter .72s ease-out 2.9s both; }
.hero-sequence.hero-ready .selector-hero-after { animation: hero-copy-enter .72s ease-out 3.2s both; }
@keyframes hero-image-enter { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: scale(1); } }
@keyframes hero-copy-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.hero-sequence.hero-skipped .selector-hero-image,
.hero-sequence.hero-skipped .selector-hero h1,
.hero-sequence.hero-skipped .selector-hero-origin,
.hero-sequence.hero-skipped .selector-hero-limit,
.hero-sequence.hero-skipped .selector-hero-premise,
.hero-sequence.hero-skipped .selector-hero-accent,
.hero-sequence.hero-skipped .selector-hero-after { opacity:1; visibility:visible; animation:none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-sequence.hero-ready .selector-hero-image,
  .hero-sequence.hero-ready .selector-hero h1,
  .hero-sequence.hero-ready .selector-hero-origin,
  .hero-sequence.hero-ready .selector-hero-limit,
  .hero-sequence.hero-ready .selector-hero-premise,
  .hero-sequence.hero-ready .selector-hero-accent,
  .hero-sequence.hero-ready .selector-hero-after,
  .hero-sequence .selector-hero-image,
  .hero-sequence .selector-hero h1, .hero-sequence .selector-hero-origin,
  .hero-sequence .selector-hero-limit, .hero-sequence .selector-hero-premise,
  .hero-sequence .selector-hero-accent, .hero-sequence .selector-hero-after { opacity: 1; visibility: visible; animation: none; }
}
/* Loading video and native hidden controls must override reveal/layout rules. */
.selector-hero .selector-hero-video:not(.is-frame-ready) { visibility: hidden; }
[hidden]{display:none!important}

/* 261012_ 준비중 카드: 어두운 썸네일 + 자물쇠 배지, 운영 판매 범위(body data-sale-profile)는 main.js가 카드 hidden으로 반영 */
.soon-card[hidden] { display: none; }
.soon-card-shade { background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.88) 100%); }
.soon-card .soon-card-tag { display: none; }
/* 상품명만 한 줄: 카드 폭 158px 기준 8~9글자 뒤 말줄임, 제목 기준선 통일 */
.soon-card-body { min-height: 19px; padding: 0 12px 14px; }
.soon-card-title { font-size: 16px; line-height: 1.2; }
.soon-card-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font: 600 13px/1 "Pretendard Variable", var(--hw-sans); letter-spacing: -0.01em; white-space: nowrap; }
.soon-card-lock { flex-shrink: 0; }

/* 261015_ 첫 화면 스크롤 안내: 문틈 빛(옅은 청백) 톤의 아주 얇은 화살표와 작은 글씨. 스크롤하면 사라진다. */
.selector-scroll-hint { position: absolute; right: 18px; bottom: 96px; bottom: calc(100lvh - 100svh + 40px); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #cfe0f4; pointer-events: none; opacity: .78; transition: opacity .6s ease; }
.selector-scroll-hint-text { writing-mode: vertical-rl; white-space: nowrap; font: 300 10px/1 var(--hw-sans); letter-spacing: .16em; color: rgba(207, 224, 244, .72); text-shadow: 0 0 10px rgba(169, 196, 230, .35); }
.selector-scroll-hint-arrow { display: block; filter: drop-shadow(0 0 4px rgba(169, 196, 230, .55)); animation: selector-scroll-float 2.6s ease-in-out infinite; }
.selector-scroll-hint.is-hidden { opacity: 0; }
@keyframes selector-scroll-float { 0%, 100% { transform: translateY(-3px); opacity: .55; } 50% { transform: translateY(5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .selector-scroll-hint-arrow { animation: none; } }
/* 261015_ 문단 묶음 사이 여백: '비밀 문파 흑월문.' ↔ '그들은…', '다른 선택.' ↔ '흑월문은 그 다른 선택에…' */
.selector-hero-limit, .selector-hero-after { margin-top: 10px; }

/* 261016_ 첫 화면 스크롤 연출: 처음엔 문만, 문이 열리는 만큼 문구가 한 줄씩 흐림이 걷히며 떠오른다(main.js initializeHeroScrollCopy).
   시간 순서 등장(hero-sequence)과 중간 스킵(hero-skipped)보다 우선하고, 연출을 못 하는 환경은 hero-copy-all 로 모두 보인다. */
html.hero-scroll-copy .selector-hero .selector-hero-content [data-hero-step] { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(6px); animation: none; transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform 1.1s cubic-bezier(.22, 1, .36, 1), filter .9s cubic-bezier(.22, 1, .36, 1); will-change: opacity, transform; }
html.hero-scroll-copy .selector-hero .selector-hero-content .selector-hero-accent[data-hero-step] { transform: translate3d(0, 14px, 0) scale(.96); transform-origin: left center; }
html.hero-scroll-copy .selector-hero .selector-hero-content [data-hero-step].is-in,
html.hero-scroll-copy.hero-copy-all .selector-hero .selector-hero-content [data-hero-step] { opacity: 1; transform: none; filter: none; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  html.hero-scroll-copy .selector-hero .selector-hero-content [data-hero-step] { transform: none; filter: none; transition: opacity .4s linear; }
}