/* ════════════════════════════════════════════════════════════════
   shell.css — 신내림 "외피" 공통 스타일 (메인·회원·내역확인·법적페이지 공유)
   봉인/완성 4화면(landing·teaser·report)은 건드리지 않음. 이 파일은 외피 전용.
   토큰·폰트는 기존 화면과 1:1 동일. 레이아웃은 "단일 컬럼 1규칙"으로 통일.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* ── 색 토큰 (기존 화면과 동일) ── */
  --ink:#15131C; --ink-2:#1A1724; --ink-3:#221E2E;
  --line:#2C2740;
  --gold:#CBA45A; --gold-hi:#E8CE8A;
  --ju:#B4413A;
  --text:#E9E4F2; --cream:#E9E4F2;          /* report는 --cream, teaser/landing은 --text → 둘 다 제공 */
  --muted:#C2BBD0; --muted-2:#9A93AC;

  /* ── 레이아웃 토큰 (단일 컬럼 1규칙) ── */
  --col-max:760px;        /* landing·teaser 본문 max-width와 동일. (report=720은 이상치 → 다수 채택) */
  --col-pad:24px;         /* 데스크탑 좌우 여백 */
  --col-pad-sm:18px;      /* 모바일(≤520) 좌우 여백 */
}

*{box-sizing:border-box}

html,body{margin:0}
body{
  background:var(--ink);
  color:var(--text);
  font-family:"Noto Sans KR","Apple SD Gothic Neo",sans-serif;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;          /* 헤더 / 본문 / 푸터 세로 스택 → 푸터 하단 고정 */
}
.myeong{font-family:"Noto Serif KR",serif}

/* ── 단일 컬럼 1규칙 ──
   모든 외피 콘텐츠는 .shell-col 안에 들어간다. 화면을 아무리 넓혀도
   컬럼 폭은 var(--col-max)에서 멈추고 중앙 고정 — 양옆은 배경(--ink). */
.shell-col{
  width:100%;
  max-width:var(--col-max);
  margin:0 auto;
  padding:0 var(--col-pad);
}
@media(max-width:520px){
  .shell-col{padding:0 var(--col-pad-sm)}
}

/* 본문 영역은 남는 세로 공간을 차지 → 짧은 페이지에서도 푸터가 바닥에 */
.shell-main{flex:1 0 auto;width:100%;padding:34px 0 64px}

/* ════ 공통 헤더 ════ */
.shell-hd{
  width:100%;
  border-bottom:1px solid var(--line);
  background:rgba(21,19,28,.86);
  backdrop-filter:blur(8px);
}
.shell-hd-in{
  display:flex;align-items:center;justify-content:space-between;
  height:58px;
}
.shell-logo{
  display:inline-flex;align-items:center;text-decoration:none;
  height:34px;
}
.shell-logo-txt{
  font-family:"Noto Serif KR",serif;
  font-size:21px;font-weight:600;letter-spacing:0.08em;   /* "서리사주" — 자간 넓혀 깔끔하게 */
  color:var(--gold);
}
.shell-logo:hover .shell-logo-txt{color:var(--gold-hi)}
.shell-nav{display:flex;align-items:center;gap:10px}
.shell-nav-link{
  display:inline-flex;align-items:center;
  height:34px;padding:0 14px;
  font-size:13.5px;color:var(--gold);
  border:1px solid var(--line);border-radius:8px;
  text-decoration:none;
  transition:border-color .18s,color .18s,background .18s;
}
.shell-nav-link:hover{border-color:var(--gold);color:var(--gold-hi);background:rgba(201,162,75,.06)}
.shell-nav-link.is-active{border-color:var(--gold);color:var(--gold-hi);background:rgba(201,162,75,.08)}

/* ════ 공통 푸터 ════ */
.shell-ft{
  width:100%;
  border-top:1px solid var(--line);
  background:var(--ink);
}
.shell-ft-in{padding-top:26px;padding-bottom:32px}   /* 좌우 패딩은 .shell-col(24/18px)이 담당 → 위 콘텐츠와 정렬 */
/* 사업자정보(법적 고지) */
.shell-legal{font-size:11.5px;line-height:1.85;color:var(--muted-2)}
.shell-legal-row{margin:0}
.shell-legal b{color:var(--muted);font-weight:600}
.shell-ft-links{margin:14px 0 0;font-size:12px}
.shell-ft-links a{color:var(--muted);text-decoration:none}
.shell-ft-links a:hover{color:var(--gold)}

/* ════ 폼 공통 (내역확인 등) ════ */
.shell-card{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:16px;
  padding:30px 26px;
  margin:18px auto 0;
}
@media(max-width:520px){.shell-card{padding:24px 18px}}

.shell-card-ttl{
  font-family:"Noto Serif KR",serif;
  font-size:22px;font-weight:600;color:var(--gold-hi);
  margin:0 0 6px;text-align:center;
}
.shell-card-sub{
  font-size:13.5px;color:var(--muted);
  text-align:center;margin:0 0 22px;line-height:1.7;
}

.shell-field{display:block;margin:0 0 14px}
.shell-label{
  display:block;font-size:12.5px;color:var(--muted);margin:0 0 7px;
}
.shell-input{
  width:100%;height:48px;
  padding:0 15px;
  font-family:inherit;font-size:15px;color:var(--text);
  background:var(--ink-3);
  border:1px solid var(--line);border-radius:10px;
  outline:none;
  transition:border-color .18s,box-shadow .18s;
}
.shell-input::placeholder{color:var(--muted-2)}
.shell-input:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,162,75,.16)}

.shell-btn{
  width:100%;height:50px;margin:8px 0 0;
  font-family:inherit;font-size:15.5px;font-weight:500;
  color:var(--ink);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));
  border:0;border-radius:11px;cursor:pointer;
  transition:filter .18s,transform .06s;
}
.shell-btn:hover{filter:brightness(1.05)}
.shell-btn:active{transform:translateY(1px)}

/* 보조 안내문 */
.shell-note{
  font-size:12px;color:var(--muted-2);
  text-align:center;margin:16px 0 0;line-height:1.7;
}

/* ════ 햄버거 버튼 + 드롭다운 메뉴 ════ */
.shell-burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:34px;padding:0 8px;
  background:transparent;border:1px solid var(--line);border-radius:8px;
  cursor:pointer;
  transition:border-color .18s;
}
.shell-burger:hover{border-color:var(--gold)}
.shell-burger span{
  display:block;height:2px;width:100%;
  background:var(--gold);border-radius:2px;
  transition:transform .2s,opacity .2s;
}
.shell-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.shell-burger.is-open span:nth-child(2){opacity:0}
.shell-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ════ 우측 슬라이드 패널(off-canvas) + 배경 딤 ════ */
.shell-dim{
  position:fixed;inset:0;z-index:80;
  background:rgba(6,5,11,.6);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease,visibility 0s linear .28s;
}
.shell-dim.show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .28s ease}
.shell-panel{
  position:fixed;top:0;right:0;z-index:81;
  width:78%;max-width:300px;height:100%;
  background:var(--ink-2);border-left:1px solid var(--line);
  box-shadow:-14px 0 44px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
  padding:64px 0 20px;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
  -webkit-overflow-scrolling:touch;overflow-y:auto;
}
.shell-panel.open{transform:none}
.shell-panel-x{
  position:absolute;top:14px;right:14px;
  width:38px;height:38px;line-height:1;
  background:transparent;border:0;border-radius:9px;
  color:var(--muted);font-size:26px;cursor:pointer;
}
.shell-panel-x:hover{color:var(--gold-hi)}
.shell-panel-link{
  display:block;padding:15px 24px;
  font-size:16px;color:var(--text);text-decoration:none;
  border-bottom:1px solid var(--line);
}
.shell-panel-link:hover{color:var(--gold-hi);background:rgba(201,162,75,.05)}
.shell-panel-link.is-active{color:var(--gold-hi)}
.shell-panel-link[hidden]{display:none}

/* ════ 빈 카피 슬롯 (확정 텍스트 미수신 자리 — 임의 카피 금지) ════ */
.slot{
  display:block;
  border:1px dashed var(--line);border-radius:8px;
  background:rgba(201,162,75,.03);
}
.slot-line{height:18px;margin:0 0 8px}
.slot-line.w-70{max-width:70%}
.slot-line.w-50{max-width:50%}
.slot-line.w-40{max-width:40%}
.slot-title{height:30px;max-width:60%;margin:0 0 12px}
.slot-block{min-height:64px}
.slot-img{width:100%;aspect-ratio:16/9;border-radius:12px}
.slot-btn{
  display:inline-block;min-width:140px;height:48px;border-radius:11px;
  border-style:dashed;
}

/* ════ 메인(허브) 화면 ════ */
/* 히어로 배너 — 큰 비주얼 1개 + 메인 카피 슬롯 + CTA */
.main-hero{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:18px;
  margin:6px 0 8px;
  min-height:580px;                              /* 세로로 더 길게 — 이미지가 크게 보이게 */
  display:flex;align-items:flex-end;             /* 글자는 하단 영역에 */
  background:#0f0d15 center top/cover no-repeat; /* 상단 기준(얼굴/상단 보존). 인라인 style 로 이미지 주입 */
}
.main-hero::after{        /* 하단만 어둡게 — 상단(얼굴)은 안 가리고 하단 글자 가독 확보 */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,19,28,0) 42%,rgba(21,19,28,.5) 66%,rgba(21,19,28,.94) 100%);
}
.main-hero-in{position:relative;z-index:2;width:100%;padding:26px 24px 30px}
@media(max-width:520px){.main-hero{min-height:520px}.main-hero-in{padding:22px 18px 26px}}
.main-hero-copy{margin:0 0 18px}
.main-hero-ttl{
  font-family:"Noto Serif KR",serif;
  font-size:27px;font-weight:600;line-height:1.4;color:var(--text);
  margin:0 0 12px;text-shadow:0 2px 14px rgba(0,0,0,.6);
}
.main-hero-sub{
  font-size:15px;line-height:1.75;color:var(--cream);
  margin:0;max-width:520px;text-shadow:0 1px 10px rgba(0,0,0,.55);
}
@media(max-width:520px){.main-hero-ttl{font-size:23px}.main-hero-sub{font-size:14px}}
.main-cta{
  display:inline-flex;align-items:center;justify-content:center;
  height:50px;padding:0 24px;margin:0;
  font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));border-radius:11px;
}
.main-cta:hover{filter:brightness(1.05)}

/* 섹션 공통 */
.main-sec{margin:34px 0 0}
.main-sec-ttl{
  font-family:"Noto Serif KR",serif;
  font-size:20px;font-weight:600;color:var(--gold-hi);
  margin:0 0 14px;
}

/* 상품 카드 그리드 — 배열 렌더(카드 추가 시 구조 변경 없이 늘어남) */
.main-cards{
  display:grid;grid-template-columns:1fr;gap:14px;
}
@media(min-width:560px){.main-cards{grid-template-columns:1fr 1fr}}
.prod-card{
  display:flex;flex-direction:column;
  background:var(--ink-2);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;
  transition:border-color .18s,transform .06s;
}
.prod-card:hover{border-color:rgba(201,162,75,.45)}
.prod-thumb{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  background:#0f0d15;display:block;
}
.prod-body{display:flex;flex-direction:column;gap:8px;padding:16px 16px 18px;flex:1}
.prod-tag{
  align-self:flex-start;
  font-size:11px;font-weight:500;color:var(--gold);
  padding:3px 9px;border:1px solid rgba(201,162,75,.4);border-radius:99px;
  background:rgba(201,162,75,.06);
}
.prod-title{
  font-family:"Noto Serif KR",serif;
  font-size:18px;font-weight:600;color:var(--text);margin:0;
}
.prod-desc{font-size:13.5px;color:var(--muted);margin:0;line-height:1.65;flex:1}
.prod-cta{
  display:inline-flex;align-items:center;justify-content:center;
  height:42px;margin-top:6px;
  font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));border-radius:10px;
}
.prod-cta:hover{filter:brightness(1.05)}

/* 상세 소개 섹션 — 카피 슬롯 + 보조 이미지 슬롯 */
.main-intro{
  background:var(--ink-2);border:1px solid var(--line);border-radius:14px;
  padding:22px 20px;
}
@media(max-width:520px){.main-intro{padding:20px 16px}}
.main-intro + .main-intro{margin-top:14px}
.intro-ttl{
  font-family:"Noto Serif KR",serif;
  font-size:18px;font-weight:600;color:var(--gold-hi);margin:0 0 12px;
}
.intro-body{font-size:14.5px;line-height:1.85;color:var(--muted);margin:0}
.intro-steps{margin:0;padding:0;list-style:none;counter-reset:step}
.intro-steps li{
  position:relative;padding:0 0 0 32px;margin:0 0 14px;
  font-size:14.5px;line-height:1.7;color:var(--muted);
  counter-increment:step;
}
.intro-steps li:last-child{margin-bottom:0}
.intro-steps li::before{
  content:counter(step);
  position:absolute;left:0;top:1px;
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:var(--ink);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));
}

/* ── 욕망 띠(가로 스크롤 카드) — 다크(:root), 카드 규격 통일 ── */
.band-scroll{
  display:flex;gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px 2px 4px;margin:0 -2px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;             /* Firefox: 스크롤바 숨김(스와이프는 유지) */
  -ms-overflow-style:none;          /* 구 Edge/IE */
}
.band-scroll::-webkit-scrollbar{display:none}   /* Chrome/Safari */
/* 오버레이형 카드 — 이미지가 카드 전체(3:4)를 채우고, 글자는 이미지 위 하단에 얹힌다 */
.dcard{
  flex:0 0 240px;width:240px;max-width:280px;scroll-snap-align:start;   /* 상시 고정폭 — 창 폭과 무관(이미지 안 늘어남) */
  position:relative;aspect-ratio:3/4;          /* 카드 전체가 이미지 비율 */
  display:block;text-decoration:none;color:inherit;
  background:#34313F;                            /* 이미지 로드 전 폴백 */
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:border-color .18s,transform .06s;
}
.dcard:hover{border-color:rgba(201,162,75,.45)}
.dcard:active{transform:translateY(1px)}
/* 이미지가 카드 전체를 cover */
.dcard-thumb{position:absolute;inset:0;background:#34313F center/cover no-repeat}
/* 하단 그라데이션 — 아래로 갈수록 진하게(투명 → #15131C), 글자 가독 확보 */
.dcard-thumb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,19,28,0) 34%,rgba(21,19,28,.45) 62%,rgba(21,19,28,.92) 100%)}
/* 글자: 이미지 위 하단 오버레이 */
.dcard-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 14px 15px}
.dcard-title{font-family:"Noto Serif KR",serif;font-size:16px;font-weight:600;color:var(--cream);margin:0 0 4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 6px rgba(0,0,0,.7)}   /* 제목 1줄 */
.dcard-sub{font-size:13px;color:var(--muted);margin:0;line-height:1.5;text-shadow:0 1px 6px rgba(0,0,0,.7);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* 설명 2줄 */
/* 카드 띠 — 전 화면 가로 스와이프(스크롤바 숨김). 화살표 없음. */

/* ── 신뢰 띠 ── */
.trust{
  border:1px solid var(--line);border-radius:14px;
  padding:22px 22px;text-align:center;
  font-size:15px;line-height:1.85;color:var(--text);
  background:rgba(201,162,75,.06);
}
@media(max-width:520px){.trust{padding:20px 18px;font-size:14.5px}}

/* ── 신뢰의 근거 카드(가짜 후기 대신) ── */
.why-cards{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:720px){.why-cards{grid-template-columns:repeat(3,1fr)}}
.why-card{
  background:var(--ink-2);border:1px solid var(--line);border-radius:14px;
  padding:18px 18px;
}
.why-h{font-family:"Noto Serif KR",serif;font-size:16px;font-weight:600;color:var(--gold-hi);margin:0 0 9px}
.why-b{font-size:14px;color:var(--muted);line-height:1.72;margin:0}
.why-note{font-size:12.5px;color:var(--muted-2);text-align:center;margin:16px 0 0;line-height:1.7}

/* ════ 법적 페이지(약관·개인정보·환불·청소년·사업자) ════ */
.legal-ttl{font-family:"Noto Serif KR",serif;font-size:24px;font-weight:600;color:var(--gold-hi);
  margin:0 0 6px;text-align:center}
.legal-note{font-size:12px;color:var(--muted-2);text-align:center;margin:0 0 20px;line-height:1.6}
.legal-body{font-size:14.5px;color:var(--muted);line-height:1.85}
.legal-body h2{font-family:"Noto Serif KR",serif;font-size:17px;font-weight:600;color:var(--gold);
  margin:26px 0 8px}
.legal-body h2:first-child{margin-top:0}
.legal-body p{margin:0 0 12px;color:var(--text)}
.legal-body ol{margin:0 0 12px;padding-left:20px}
.legal-body ul{margin:0 0 12px;padding-left:18px;list-style:none}
.legal-body li{margin:0 0 7px}
.legal-body ul li{position:relative;padding-left:14px}
.legal-body ul li::before{content:"·";position:absolute;left:2px;color:var(--gold)}
.legal-body b{color:var(--text);font-weight:600}
.legal-eff{margin:22px 0 0;font-size:13px;color:var(--muted-2)}
.legal-intro{margin:0 0 18px;color:var(--text);line-height:1.85}
/* 사업자정보 정의 목록 */
.legal-info{list-style:none;margin:0;padding:0}
.legal-info li{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.legal-info li:last-child{border-bottom:0}
.legal-info .k{flex:0 0 130px;color:var(--muted-2)}
.legal-info .v{flex:1;color:var(--text)}
@media(max-width:520px){.legal-info li{flex-direction:column;gap:2px}.legal-info .k{flex:none}}