/* 신당 긴 착지(롱스크롤 랜딩) — public/js/shrine-landing.js?v=7c01e950 와 한 쌍. 가운데 480 컬럼, 어두운 전면 화면.
   2026-10-22 다시 디자인(운영자: "폰트랑 디자인 너무 별로"): 지하 전당포의 옻칠·놋쇠·붉은 등 — 제목은 Hahmlet(굵은 명조),
   본문은 Pretendard, 숫자는 명조 굵은 글자. 놋쇠 테두리 판(plaque)·감정 의뢰서 쪽지·인장을 겹쳐 '감정소' 물건처럼 보이게 하고,
   예전의 빈 검은 칸(92vh)과 공사장 경고 띠는 걷었다. */
html.sl-open, html.sl-open body { overflow: hidden; }
.sl {
  --sl-gold: #f0cf86; --sl-gold-2: #b9873a; --sl-brass: #8a6326; --sl-red: #d9483b; --sl-lacquer: #120d0a; --sl-ink: #0b0806;
  --sl-paper: #efe2c4; --sl-paper-ink: #2b1d10; --sl-txt: rgba(255, 246, 228, 0.94); --sl-dim: rgba(255, 240, 214, 0.64);
  --sl-serif: "Hahmlet", "Noto Serif KR", "Gowun Batang", serif;
  position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin-inline: auto; width: 100%; max-width: 480px;
  z-index: 9995; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(160, 60, 30, 0.10), transparent 60%),
    linear-gradient(180deg, #0e0a08, var(--sl-ink));
  color: var(--sl-txt);
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  text-align: center; word-break: keep-all; transition: opacity .4s ease, transform .4s ease;
}
.sl.sl-out { opacity: 0; transform: scale(1.02); pointer-events: none; }
.sl *, .sl *::before, .sl *::after { box-sizing: border-box; }
.sl img { display: block; width: 100%; height: auto; }
.sl em { font-style: normal; color: var(--sl-gold); }
.sl-serif { font-family: var(--sl-serif); }

/* 금박 글씨 — 그라디언트를 글자에 칠한다 */
.sl-foil { background: linear-gradient(180deg, #fff6d8 0%, #f2d38c 38%, #c8953f 72%, #f6dc9a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 상단 소리 단추 — float 을 쓰면 바로 뒤 첫 화면(flex 칸)이 단추 폭만큼 비켜 좁아진다(2026-10-25 375px 에서 327px).
   흐름 안에서 오른쪽에 붙이고(margin-left: auto), 아래 바깥 여백을 단추 높이+위 여백만큼 빼서 첫 화면이 맨 위·전체 폭에서 시작하게 한다. */
.sl-sound {
  position: sticky; top: 12px; margin: 12px 12px -48px auto; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(240, 207, 134, 0.35);
  background: rgba(12, 8, 6, 0.55); color: var(--sl-gold); display: flex; align-items: center; justify-content: center; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sl-sound svg { width: 16px; height: 16px; }
.sl-sound .ic-on { display: none; }
.sl-sound[aria-pressed="true"] .ic-on { display: block; }
.sl-sound[aria-pressed="true"] .ic-off { display: none; }

/* 칸 공통 */
.sl-sec { position: relative; padding: 64px 24px; overflow: hidden; }
.sl-sec.tall { min-height: 68vh; display: flex; flex-direction: column; justify-content: center; }
.sl-h { margin: 0; font-family: var(--sl-serif); font-size: 27px; line-height: 1.45; font-weight: 700; letter-spacing: -0.6px; color: #fff7e6; }
.sl-h.xl { font-size: 35px; font-weight: 900; line-height: 1.3; }
.sl-p { margin: 16px 0 0; font-size: 15.5px; line-height: 1.75; color: var(--sl-dim); }
.sl-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 4px; color: var(--sl-gold); }
.sl-eyebrow::before, .sl-eyebrow::after { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--sl-gold)); }
.sl-eyebrow::after { transform: scaleX(-1); }
.sl-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.sl-reveal.sl-in { opacity: 1; transform: none; }
.sl-art { position: relative; margin: 26px -24px 0; }
.sl-art::after { content: ""; position: absolute; inset: auto 0 0 0; height: 42%; background: linear-gradient(transparent, var(--sl-ink)); pointer-events: none; }
.sl-art.top::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 30%; background: linear-gradient(var(--sl-ink), transparent); z-index: 1; pointer-events: none; }

/* 놋쇠 테두리 판 — 겉테 금선 + 안테 가는 선 + 네 귀 장식 */
.sl-plaque { position: relative; margin: 0 auto; padding: 14px 18px 12px; max-width: 300px; border-radius: 6px;
  background: linear-gradient(180deg, rgba(30, 20, 12, 0.86), rgba(14, 9, 6, 0.9));
  border: 1px solid rgba(240, 207, 134, 0.75);
  box-shadow: inset 0 0 0 4px rgba(14, 9, 6, 0.9), inset 0 0 0 5px rgba(240, 207, 134, 0.35), 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 40px rgba(240, 180, 80, 0.12);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sl-plaque::before, .sl-plaque::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--sl-gold); }
.sl-plaque::before { top: -5px; left: -5px; border-right: 0; border-bottom: 0; }
.sl-plaque::after { bottom: -5px; right: -5px; border-left: 0; border-top: 0; }

/* 1. 첫 화면 — 감정 지수 판 */
.sl-hero { position: relative; min-height: 100vh; min-height: 100svh; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.sl-hero-media { position: absolute; inset: 0; }
.sl-hero-media img, .sl-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 8%; }
.sl-hero-media video { opacity: 0; transition: opacity .6s ease; }
.sl-hero-media video.sl-playing { opacity: 1; }
.sl-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 8, 6, 0.35) 0%, rgba(11, 8, 6, 0) 18%, rgba(11, 8, 6, 0.1) 42%, rgba(11, 8, 6, 0.88) 62%, rgba(11, 8, 6, 0.97) 100%); }
/* 첫 화면 그림은 화면 꼭대기에 폭 기준으로 붙인다(전체 높이로 키우면 얼굴이 화면 가운데까지 내려와 판·설명에 덮인다 — 2026-10-26 운영자).
   페이지가 그림 칸에 두 값을 적는다: --sl-hero-ar(그림 폭/높이), --sl-face(그림 높이에서 이마~턱·금화 쥔 손이 끝나는 비율).
   그림 폭은 "남는 높이(화면 − 판·설명·고정 단추 자리 --sl-stack) 안에 얼굴이 다 들어가는" 폭을 넘지 않는다 — 키 작은 화면(인앱 브라우저 등)에선
   그림이 좁아지고 양옆을 어둠으로 흐린다(.sl-hero-narrow, shrine-landing.js 가 판·설명 높이를 재서 --sl-stack 과 함께 붙인다).
   어둠(scrim)은 얼굴 칸 아래에서만 시작한다. */
.sl-hero > .sl-hero-media { inset: 0 0 auto 0; margin-inline: auto; aspect-ratio: var(--sl-hero-ar, 0.75);
  width: min(100%, calc((100vh - var(--sl-stack, 400px) - 12px) * var(--sl-hero-ar, 0.75) / var(--sl-face, 0.66)));
  width: min(100%, calc((100svh - var(--sl-stack, 400px) - 12px) * var(--sl-hero-ar, 0.75) / var(--sl-face, 0.66))); }
.sl-hero > .sl-hero-media img, .sl-hero > .sl-hero-media video { object-position: center top; }
.sl-hero > .sl-hero-media::after { background: linear-gradient(180deg, rgba(11, 8, 6, 0.32) 0%, rgba(11, 8, 6, 0) 10%,
  rgba(11, 8, 6, 0) calc(var(--sl-face, 0.66) * 100% + 2%), rgba(11, 8, 6, 0.7) 86%, var(--sl-ink) 100%); }
.sl-hero.sl-hero-narrow > .sl-hero-media { -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
/* 판과 설명은 화면 아래쪽, 얼굴 칸 아래에 촘촘히 쌓는다(2026-10-22·26 운영자: 얼굴을 가리지 말 것). */
.sl-hero-top { position: relative; z-index: 2; padding: 0 24px 10px; }
.sl-hero-copy { position: relative; z-index: 2; padding: 0 24px 146px; }
/* 판 위 이름표 — 판 윗선에 걸쳐 따로 줄을 차지하지 않는다 */
.sl-plaque > .sl-eyebrow { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 2px 10px; white-space: nowrap;
  font-size: 11px; letter-spacing: 3.5px; border-radius: 3px; background: #140d08; box-shadow: 0 0 0 1px rgba(240, 207, 134, 0.35); }
.sl-hero .sl-plaque { padding: 17px 16px 10px; }
.sl-kicker { margin: 0 0 4px; font-family: var(--sl-serif); font-size: 17px; font-weight: 500; letter-spacing: 0.5px; color: rgba(255, 244, 222, 0.9); }
.sl-hero .sl-kicker { margin-bottom: 0; font-size: 15.5px; }
/* 금빛 글씨는 글자마다 칠한다 — 부모에 background-clip:text 를 걸면 굴러가는 칸(transform) 안의 숫자가 사라진다. */
.sl-money { margin: 2px 0 0; font-family: var(--sl-serif); font-size: 54px; font-weight: 900; line-height: 1.05; letter-spacing: -1px;
  display: inline-flex; align-items: baseline; justify-content: center; gap: 2px; color: var(--sl-gold); font-variant-numeric: tabular-nums; }
.sl-money .sl-unit, .sl-strip span { background: linear-gradient(180deg, #fff6d8 0%, #f2d38c 40%, #c8953f 78%, #f6dc9a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sl-money .sl-unit { margin-left: 6px; font-size: 30px; font-weight: 700; background: linear-gradient(180deg, #f6dc9a 0%, #e2b45c 55%, #a8772c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sl-reel { filter: drop-shadow(0 2px 14px rgba(242, 190, 90, 0.35)); }
.sl-slot { display: inline-flex; gap: 4px; }
.sl-reel { display: inline-block; height: 1.05em; overflow: hidden; vertical-align: bottom; }
.sl-strip { display: flex; flex-direction: column; transform: translateY(0); }
.sl-strip span { display: block; height: 1.05em; line-height: 1.05em; }
.sl-roll .sl-strip { transform: translateY(calc(var(--sl-n) * -1.05em)); transition: transform var(--sl-d) cubic-bezier(.16, .84, .3, 1); }
.sl-done .sl-strip { transform: translateY(calc(var(--sl-n) * -1.05em)); }
.sl-plaque-foot { margin: 8px 0 0; padding-top: 9px; border-top: 1px solid rgba(240, 207, 134, 0.22); font-size: 11.5px; letter-spacing: 1.5px; color: var(--sl-dim); }
.sl-hero .sl-money { font-size: 46px; }
.sl-hero .sl-money .sl-unit { font-size: 26px; }
.sl-hero .sl-plaque-foot { margin-top: 6px; padding-top: 7px; font-size: 11px; }
.sl-hero-note { margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(12, 8, 6, 0.62); border: 1px solid rgba(240, 207, 134, 0.16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transform: translateY(10px); transition: opacity .8s ease 2.4s, transform .8s ease 2.4s; }
.sl-hero.sl-ready .sl-hero-note { opacity: 1; transform: none; }
.sl-hero-sub { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255, 244, 222, 0.82); }
.sl-hero-sub b { display: block; margin-top: 4px; font-family: var(--sl-serif); font-size: 15.5px; line-height: 1.45; font-weight: 700; color: #fff7e6; }
.sl-scroll-cue { margin: 6px auto 0; width: 20px; height: 26px; opacity: .55; animation: slCue 1.6s ease-in-out infinite; }
@keyframes slCue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
/* 키 작은 화면: 스크롤 표시(장식)를 빼서 얼굴 칸을 지킨다 — 아래로 내릴 수 있다는 건 고정 단추 위 띠와 판 아래 글로도 보인다 */
@media (max-height: 780px) { .sl-hero .sl-scroll-cue { display: none; } }

/* 2. 상호 + 감정서에 적히는 것 */
.sl-brand { padding-top: 0; }
.sl-logo { position: relative; z-index: 2; margin: -160px 0 0; }
.sl-logo small { display: block; font-size: 11.5px; letter-spacing: 5px; color: var(--sl-gold); }
.sl-logo b { display: block; margin-top: 8px; font-family: var(--sl-serif); font-size: 46px; font-weight: 900; letter-spacing: -0.5px; line-height: 1.15;
  background: linear-gradient(180deg, #fff6d8, #f2d38c 45%, #a8772c 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 18px rgba(242, 207, 125, 0.32)); }
.sl-logo b + small { margin-top: 10px; letter-spacing: 1px; color: var(--sl-dim); font-size: 13px; }
.sl-list { list-style: none; margin: 30px 0 0; padding: 20px 20px 8px; text-align: left; border-radius: 6px; position: relative;
  background: linear-gradient(180deg, rgba(34, 23, 13, 0.92), rgba(18, 12, 7, 0.94));
  border: 1px solid rgba(240, 207, 134, 0.55); box-shadow: inset 0 0 0 4px rgba(18, 12, 7, 0.9), inset 0 0 0 5px rgba(240, 207, 134, 0.2); }
.sl-list li { display: flex; gap: 14px; margin-bottom: 16px; font-size: 15.5px; font-weight: 600; line-height: 1.5; color: #fff4dc; }
.sl-list li b { flex: none; width: 26px; height: 26px; margin-top: -1px; border-radius: 50%; border: 1px solid rgba(240, 207, 134, 0.7);
  color: var(--sl-gold); font-family: var(--sl-serif); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sl-list li small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--sl-dim); }
.sl-list-cap { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(240, 207, 134, 0.2); font-family: var(--sl-serif); font-size: 14px; font-weight: 700; letter-spacing: 2px; color: var(--sl-gold); text-align: center; }

/* 3. 게으름 ✕ */
.sl-strike { position: relative; display: inline-block; margin: 22px 0; font-family: var(--sl-serif); font-size: 58px; font-weight: 900; color: #fff7e6; }
.sl-strike::before, .sl-strike::after { content: ""; position: absolute; left: -8%; right: -8%; top: 52%; height: 6px; border-radius: 3px; background: var(--sl-red);
  box-shadow: 0 0 16px rgba(217, 72, 59, 0.55); transform: rotate(-20deg) scaleX(0); transition: transform .45s ease .5s; }
.sl-strike::after { transform: rotate(20deg) scaleX(0); transition-delay: .8s; }
.sl-in .sl-strike::before { transform: rotate(-20deg) scaleX(1); }
.sl-in .sl-strike::after { transform: rotate(20deg) scaleX(1); }

/* 4. 타고난 그릇 — 금박 글씨와 엽전 */
.sl-glow { margin: 0; font-family: var(--sl-serif); font-size: 60px; line-height: 1.15; font-weight: 900; letter-spacing: -1px;
  background: linear-gradient(180deg, #fff8df 0%, #f6d991 40%, #c8953f 80%, #f6dc9a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 190, 80, 0.45)); }
.sl-coins { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sl-coins i { position: absolute; top: -40px; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe7a3, #c8973f 60%, #7a5418); box-shadow: inset 0 0 0 3px rgba(122, 84, 24, 0.55);
  opacity: .4; animation: slFall linear infinite; }
.sl-coins i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; background: rgba(60, 40, 10, 0.75); }
@keyframes slFall { to { transform: translateY(115vh) rotate(540deg); } }

/* 5. "끝까지 봐" — 금선 사이에 가둔 한 줄 */
.sl-mark { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; }
.sl-mark::before, .sl-mark::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 207, 134, 0.8)); }
.sl-mark::after { transform: scaleX(-1); }
.sl-mark span { font-family: var(--sl-serif); font-size: 34px; font-weight: 900; color: var(--sl-gold); letter-spacing: -0.5px; }

/* 6. 공감 칸 — 그림 아래 겹친 '감정 의뢰서' 쪽지 */
.sl-quote { padding-top: 24px; padding-bottom: 28px; }
.sl-quote .sl-art { margin-top: 0; margin-bottom: 0; }
.sl-quote .sl-art::after { height: 55%; }
.sl-slip { position: relative; z-index: 2; margin: -96px 6px 0; padding: 20px 18px 18px; text-align: left; border-radius: 4px;
  background: linear-gradient(180deg, #f3e7cb, #e6d4ae); color: var(--sl-paper-ink); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); transform: rotate(-1.2deg); }
.sl-quote:nth-of-type(even) .sl-slip { transform: rotate(1.1deg); }
.sl-slip-no { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: 3px; color: rgba(43, 29, 16, 0.55); }
.sl-slip .sl-h { color: var(--sl-paper-ink); font-size: 23px; line-height: 1.45; }
.sl-slip .sl-h em { color: #a3271c; }
.sl-slip::after { content: "鑑"; position: absolute; right: 14px; bottom: 12px; width: 38px; height: 38px; border-radius: 4px; border: 2px solid rgba(178, 38, 28, 0.75);
  color: rgba(178, 38, 28, 0.8); font-family: var(--sl-serif); font-size: 20px; font-weight: 900; display: flex; align-items: center; justify-content: center; transform: rotate(-8deg); }

/* 8. 사장 소개 — 이름패 */
.sl-intro .sl-art { margin-top: 0; }
.sl-intro .sl-h { margin-top: -50px; position: relative; z-index: 2; }
.sl-name { display: inline-block; margin-top: 2px; font-family: var(--sl-serif); font-size: 24px; font-weight: 900;
  background: linear-gradient(180deg, #fff6d8, #f2d38c 45%, #b9873a 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 9. 문 */
.sl-door { position: relative; overflow: hidden; min-height: 100vh; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.sl-door .sl-hero-media::after { background: linear-gradient(180deg, rgba(11, 8, 6, 0.75), rgba(11, 8, 6, 0.1) 40%, rgba(11, 8, 6, 0.94) 90%); }
.sl-door .sl-hero-copy { padding-bottom: 170px; }

/* 10. 정직하게 */
.sl-honest { padding-bottom: 170px; }
.sl-fine { margin: 16px 0 0; font-size: 11.5px; line-height: 1.6; color: rgba(255, 240, 214, 0.4); }

/* 고정 단추 — 놋쇠 단추 + 인장, 빛이 한 번씩 훑고 지나간다 */
.sl-sticky { position: sticky; bottom: 0; z-index: 6; margin-top: -150px; padding: 28px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(11, 8, 6, 0.92) 40%); pointer-events: none; }
.sl-pill { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 6px 14px; border-radius: 999px;
  background: rgba(18, 12, 7, 0.88); border: 1px solid rgba(240, 207, 134, 0.3); font-size: 12.5px; color: rgba(255, 244, 222, 0.86); }
.sl-pill em { font-weight: 700; }
.sl-cta { pointer-events: auto; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 17px 12px; border: 0; border-radius: 10px; cursor: pointer;
  font-family: var(--sl-serif); font-size: 20px; font-weight: 900; color: #2a1806; letter-spacing: 0.5px;
  background: linear-gradient(180deg, #fbe3a2 0%, #e9bf62 48%, #b9863a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 250, 230, 0.8), inset 0 -2px 0 rgba(90, 58, 18, 0.5), 0 0 0 1px #6b4914, 0 10px 30px rgba(220, 160, 60, 0.32); }
.sl-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); animation: slShine 3.2s ease-in-out infinite; }
@keyframes slShine { 0%, 55% { left: -40%; } 100% { left: 130%; } }
.sl-cta-seal { flex: none; width: 30px; height: 30px; border-radius: 4px; background: #a3271c; color: #fff1d6; font-size: 16px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px rgba(255, 220, 180, 0.35); transform: rotate(-6deg); }
.sl-cta:active { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .sl-reveal { opacity: 1; transform: none; transition: none; }
  .sl-coins, .sl-scroll-cue { display: none; }
  .sl-cta::after { animation: none; display: none; }
  .sl-hero-note { transition: none; opacity: 1; transform: none; }
}