@charset "UTF-8";

/* ══════════════════════════════════════
   무늬 연구회 — 나전칠기 (螺鈿漆器) 밝은 판
   자개 껍데기 안쪽의 진주빛 회백색 바탕 위에
   검은 옻칠 오브제 · 금박 실선
   ══════════════════════════════════════ */

:root{
  --paper:   #E8E6EC;   /* 진주빛 바탕 — PC/모바일 공통 */
  --paper-2: #F5F4F7;   /* 한 겹 올라온 면 */
  --paper-3: #FBFAFC;   /* 입력면 */
  --ink:     #17120F;   /* 옻칠 검정 */
  --ink-2:   #57504A;
  --ink-3:   #8A8279;
  --line:    rgba(23,18,15,.13);
  --gold:    #9A7328;
  --gold-dim:rgba(154,115,40,.34);

  /* 밝은 바탕에서도 읽히도록 채도를 올린 자개 */
  --nacre: linear-gradient(104deg,#79C7BD 0%,#8FD0C8 18%,#A9A0E2 46%,#C6A6D8 66%,#EBA78A 88%,#E6BB98 100%);
  --nacre-soft: linear-gradient(104deg,#C9E8E3,#D6D0F2 48%,#F6D8C6);

  --shell: 460px;
  --pad: 24px;

  --serif:'Gowun Batang',serif;
  --sans:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{
  background:var(--paper);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);              /* 본문 배경 = PC 배경 (동일) */
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.72;
  letter-spacing:-.01em;
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  padding-bottom:104px;                  /* 고정 CTA 자리 */
  overflow-x:hidden;
}

.shell{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  position:relative;
}

img{max-width:100%;height:auto;display:block}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ── 공통 버튼: 밝은 판 위에 놓인 옻칠 조각 ── */
.btn{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;
  min-height:56px;
  padding:0 20px;
  border-radius:3px;
  overflow:hidden;
  font-family:var(--sans);
  font-size:16px;font-weight:700;letter-spacing:-.02em;
  transition:transform .18s ease,box-shadow .18s ease;
}
.btn-nacre{
  color:#F6F4F1;
  background:var(--ink);
  box-shadow:0 10px 24px -14px rgba(23,18,15,.85),
             0 0 0 1px rgba(23,18,15,.9);
}
.btn-nacre::before{                       /* 자개 상감 하이라이트 */
  content:"";
  position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--nacre);
  opacity:.9;
}
.btn-nacre::after{                        /* 스치는 자개 광택 */
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(104deg,
     transparent 36%,
     rgba(145,210,202,.30) 45%,
     rgba(255,255,255,.34) 50%,
     rgba(169,160,226,.32) 56%,
     transparent 66%);
  background-size:240% 100%;
  background-position:150% 0;
  transition:background-position .7s cubic-bezier(.3,0,.2,1);
  pointer-events:none;
}
.btn-nacre:hover::after{background-position:-50% 0}
.btn-nacre .fa-chevron-right{font-size:11px;opacity:.5}
.btn-nacre:hover{transform:translateY(-1px);box-shadow:0 14px 28px -14px rgba(23,18,15,.9),0 0 0 1px rgba(23,18,15,.9)}
.btn-nacre:active{transform:translateY(0)}

/* ── 자개 마름모 구분선 ────────────── */
.inlay-rule{
  display:flex;align-items:center;gap:12px;
  padding:0 var(--pad);
  margin:0;
}
.inlay-rule span{
  flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-dim) 40%,var(--gold-dim) 60%,transparent);
}
.inlay-rule em{
  width:9px;height:9px;flex:none;
  transform:rotate(45deg);
  background:var(--nacre);
  box-shadow:0 0 0 1px rgba(154,115,40,.4);
}

/* ══════════ HERO ══════════ */
.hero{
  position:relative;
  padding:0 var(--pad) 40px;
}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  height:62px;
}
.brand{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--serif);font-weight:700;font-size:17px;
  letter-spacing:.06em;
}
.brand-inlay{
  width:11px;height:11px;transform:rotate(45deg);
  background:var(--nacre);
  box-shadow:0 0 0 1px rgba(154,115,40,.45);
}
.topbar-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;color:var(--ink-3);letter-spacing:0;
}
.topbar-tag .fa-circle-dot{font-size:8px;color:var(--gold)}

.eyebrow{
  display:flex;align-items:center;gap:10px;
  margin:18px 0 20px;
  font-size:12.5px;color:var(--ink-2);letter-spacing:.02em;
}
.eyebrow .rule{width:26px;height:1px;background:var(--gold);flex:none}

/* 제목 · 원반 · 떠 있는 안내표의 3겹 */
.hero-stack{position:relative}

.hero-title{
  position:relative;z-index:2;
  margin:0;
  font-family:var(--serif);
  font-weight:700;
  font-size:41px;
  line-height:1.26;
  letter-spacing:-.035em;
}
.hero-title-over{display:inline-block;padding-right:2px}
.hero-title-over::after{
  content:"";
  display:block;
  width:62px;height:3px;
  margin-top:14px;
  background:var(--nacre);
}

.stage{
  position:relative;z-index:1;
  width:404px;max-width:100%;
  aspect-ratio:1;
  margin:-4px auto 0;
}
.stage-glow{
  position:absolute;inset:2%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 54%,rgba(23,18,15,.20),rgba(23,18,15,.07) 52%,transparent 72%);
  filter:blur(16px);
}
.stage-ring{
  position:absolute;left:50%;top:50%;
  width:100%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:conic-gradient(from 0deg,
     transparent 0 6%,
     rgba(154,115,40,.75) 18%,
     transparent 34%,
     rgba(121,199,189,.62) 52%,
     transparent 66%,
     rgba(235,167,138,.58) 82%,
     transparent 96%);
  -webkit-mask:radial-gradient(closest-side,transparent 0 96%,#000 96.6%,#000 99%,transparent 99.6%);
          mask:radial-gradient(closest-side,transparent 0 96%,#000 96.6%,#000 99%,transparent 99.6%);
  animation:ring-spin 26s linear infinite;
}
.stage-tilt{
  position:absolute;inset:0;display:block;
  transform-style:preserve-3d;
  transition:transform .28s cubic-bezier(.22,1,.3,1);
  will-change:transform;
}
.stage-img{
  position:relative;
  width:100%;height:100%;
  object-fit:contain;
  filter:drop-shadow(0 22px 34px rgba(23,18,15,.34));
}
.stage-shimmer{
  position:absolute;inset:0;
  -webkit-mask-image:url(../images/hero-medallion.png);
          mask-image:url(../images/hero-medallion.png);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:linear-gradient(102deg,
     transparent 40%,
     rgba(121,199,189,.48) 46%,
     rgba(255,255,255,.66) 50%,
     rgba(169,160,226,.56) 54%,
     rgba(235,167,138,.40) 59%,
     transparent 65%);
  background-size:230% 100%;
  mix-blend-mode:screen;
  animation:nacre-sweep 6.4s cubic-bezier(.5,0,.2,1) infinite;
}

/* 원반 테두리에 걸쳐 뜨는 안내표 */
.stage-tag{
  position:absolute;z-index:3;
  left:0;bottom:8px;
  display:inline-flex;align-items:center;gap:8px;
  margin:0;
  padding:9px 15px 9px 13px;
  background:var(--paper-2);
  border-radius:100px;
  box-shadow:0 0 0 1px rgba(154,115,40,.38),
             0 12px 24px -14px rgba(23,18,15,.6);
  font-size:12.5px;font-weight:600;color:var(--ink);
  letter-spacing:-.02em;white-space:nowrap;
}
.tag-inlay{
  width:8px;height:8px;flex:none;
  transform:rotate(45deg);
  background:var(--nacre);
}

@keyframes ring-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes nacre-sweep{
  0%,8%   {background-position:165% 0}
  52%,100%{background-position:-70% 0}
}

.hero-sub{
  margin:22px 0 0;
  color:var(--ink-2);
  font-size:15px;line-height:1.85;
}

.facts{
  display:flex;
  margin:26px 0 0;padding:16px 0;
  list-style:none;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.facts li{
  flex:1;
  display:flex;flex-direction:column;gap:3px;
  text-align:center;
}
.facts li + li{border-left:1px solid var(--line)}
.facts b{font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:-.02em}
.facts span{font-size:11.5px;color:var(--ink-3)}

.hero-btn{margin-top:26px}
.hero-note{
  margin:12px 0 0;text-align:center;
  font-size:12px;color:var(--ink-3);
}

/* ══════════ 본문 블록 ══════════ */
.block{padding:52px var(--pad)}

.h-sec{
  margin:0 0 16px;
  font-family:var(--serif);font-weight:700;
  font-size:27px;line-height:1.38;letter-spacing:-.03em;
}
.p-lead{
  margin:0;
  color:var(--ink-2);
  font-size:14.5px;line-height:1.82;
}

/* 밝은 판 위에 선 인물 — 금박 바닥선 위에 세웁니다
   (이미지는 투명 여백을 잘라 두어 사진 아래끝 = 인물 발끝) */
.plate{
  position:relative;
  margin:28px 0 6px;
  padding-bottom:30px;
}
.plate-img{
  margin:0 auto;
  filter:drop-shadow(0 12px 20px rgba(23,18,15,.20));
}
.plate-group  .plate-img{width:92%}
.plate-pro    .plate-img{width:64%}
.plate-pro::before{display:none}      /* 허리에서 잘린 컷이라 발밑 그림자는 쓰지 않습니다 */

.plate::before{                      /* 발밑 그림자 */
  content:"";
  position:absolute;left:50%;bottom:18px;
  width:52%;height:26px;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 50%,rgba(23,18,15,.17),transparent 72%);
  filter:blur(7px);
}
.plate::after{                       /* 금박 바닥선 */
  content:"";
  position:absolute;left:50%;bottom:30px;
  width:76%;height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--gold-dim) 26%,var(--gold-dim) 74%,transparent);
}

/* 항목 나열 */
.lines{
  margin:26px 0 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:2px;
}
.lines li{
  display:flex;align-items:flex-start;gap:14px;
  padding:15px 0;
  border-top:1px solid var(--line);
}
.lines li:last-child{border-bottom:1px solid var(--line)}
.lines i{
  flex:none;width:17px;margin-top:5px;
  color:var(--gold);font-size:14px;text-align:center;
}
.lines b{
  display:block;
  font-family:var(--serif);font-size:16px;font-weight:700;
  letter-spacing:-.02em;
}
.lines div{font-size:13.5px;color:var(--ink-2);line-height:1.7}

/* 3단계 — 실제 순서이므로 번호를 씁니다 */
.steps{
  margin:28px 0 0;padding:0;list-style:none;
  position:relative;
}
.steps::before{
  content:"";
  position:absolute;left:15px;top:14px;bottom:20px;
  width:1px;
  background:linear-gradient(180deg,var(--gold-dim),rgba(169,160,226,.5),transparent);
}
.steps li{
  position:relative;
  padding:0 0 26px 48px;
}
.step-no{
  position:absolute;left:0;top:0;
  width:31px;height:31px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--paper);
  box-shadow:0 0 0 1px var(--gold-dim);
  font-family:var(--serif);font-size:14px;font-weight:700;
  color:var(--gold);
}
.steps h3{
  margin:3px 0 4px;
  font-family:var(--serif);font-size:18px;font-weight:700;letter-spacing:-.025em;
}
.steps p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.75}

/* 혜택 */
.perks{
  margin:26px 0 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:10px;
}
.perks li{
  position:relative;overflow:hidden;
  padding:18px 18px 18px 52px;
  background:var(--paper-2);
  border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(23,18,15,.07);
}
.perks li::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--nacre);
}
.perks i{
  position:absolute;left:20px;top:21px;
  color:var(--gold);font-size:15px;
}
.perks b{
  display:block;
  font-family:var(--serif);font-size:15.5px;font-weight:700;letter-spacing:-.02em;
}
.perks span{
  display:block;margin-top:2px;
  font-size:13px;color:var(--ink-3);line-height:1.66;
}

/* 멤버 한마디 */
.voice{
  margin-top:18px;
  padding:22px 20px;
  background:var(--paper-2);
  border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(23,18,15,.07);
}
.voice p{
  margin:0;
  font-family:var(--serif);font-size:16px;line-height:1.78;letter-spacing:-.02em;
}
.voice cite{
  display:flex;align-items:center;gap:9px;
  margin-top:14px;
  font-style:normal;font-size:12px;color:var(--ink-3);
}
.v-chip{
  width:24px;height:24px;flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--ink);
  color:#F6F4F1;
  font-family:var(--serif);font-style:normal;font-size:12px;font-weight:700;
}

/* 마무리 */
.closing{padding-bottom:44px}
.closing .btn{margin-top:26px}
.closing-note{
  margin:18px 0 0;
  font-size:11.5px;color:var(--ink-3);line-height:1.7;
}

/* 푸터 */
.foot{
  padding:28px var(--pad) 34px;
  border-top:1px solid var(--line);
  text-align:center;
}
.foot-note{margin:0;font-size:11.5px;color:var(--ink-3);line-height:1.7}
.foot-links{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:14px;
}
.foot-links button{
  font-size:12px;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--gold-dim);
}
.foot-links button:hover{color:var(--ink)}
.foot-links span{color:rgba(23,18,15,.2);font-size:11px}
.foot-copy{
  margin:16px 0 0;
  font-family:var(--serif);font-size:12.5px;color:var(--ink-3);letter-spacing:.02em;
}

/* ══════════ 고정 CTA ══════════ */
.cta-dock{
  position:fixed;z-index:60;
  left:0;right:0;bottom:0;
  display:flex;justify-content:center;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top,var(--paper) 58%,rgba(232,230,236,.92) 78%,rgba(232,230,236,0));
  pointer-events:none;
}
.btn-dock{
  pointer-events:auto;
  width:100%;max-width:424px;
}

/* ══════════ 합류 폼 시트 ══════════ */
.sheet{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(23,18,15,.42);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.sheet[hidden]{display:none}
.sheet-box{
  position:relative;
  width:100%;max-width:var(--shell);
  max-height:92vh;overflow-y:auto;
  padding:26px var(--pad) calc(24px + env(safe-area-inset-bottom,0px));
  background:var(--paper-2);
  border-radius:14px 14px 0 0;
  box-shadow:0 -30px 60px rgba(23,18,15,.28);
  animation:sheet-up .3s cubic-bezier(.22,1,.3,1);
}
.sheet-box::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:3px;
  border-radius:14px 14px 0 0;
  background:var(--nacre);
}
@keyframes sheet-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

.sheet-close{
  position:absolute;right:14px;top:14px;
  width:34px;height:34px;
  display:grid;place-items:center;
  color:var(--ink-3);font-size:16px;
}
.sheet-head{padding-right:40px}
.sheet-kicker{
  margin:0;
  font-family:var(--serif);font-size:17px;font-weight:700;letter-spacing:-.02em;
}
.rail{
  height:3px;margin:14px 0 8px;
  background:rgba(23,18,15,.12);
  border-radius:3px;overflow:hidden;
}
.rail i{
  display:block;height:100%;
  background:var(--nacre);
  transition:width .32s cubic-bezier(.22,1,.3,1);
}
.sheet-step{margin:0;font-size:11.5px;color:var(--ink-3)}
.sheet-step b{color:var(--gold);font-weight:700}

.q{margin:20px 0 0;padding:0;border:0}
.q[hidden]{display:none}
.q legend{
  padding:0;margin-bottom:16px;
  font-family:var(--serif);font-size:20px;font-weight:700;
  line-height:1.45;letter-spacing:-.03em;
}
.opts{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.q label{
  display:flex;align-items:center;justify-content:center;
  min-height:62px;padding:12px 10px;
  background:var(--paper-3);
  border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(23,18,15,.13);
  cursor:pointer;
  text-align:center;
  transition:box-shadow .16s ease,background .16s ease;
}
.q label:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(23,18,15,.3)}
.q input{position:absolute;opacity:0;width:0;height:0}
.q label span{font-size:15px;letter-spacing:-.02em}
.q label:has(input:checked){
  background:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink);
}
.q label:has(input:checked) span{color:#F6F4F1;font-weight:700}
/* :has 미지원 환경 대비 */
.q input:checked + span{font-weight:700;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--gold)}
.q label:has(input:checked) span{text-decoration:none}

.sheet-foot{
  display:flex;align-items:center;gap:14px;
  margin-top:18px;
}
.sheet-back{
  flex:none;
  font-size:13px;color:var(--ink-3);
}
.sheet-back[hidden]{display:none}
.sheet-go{flex:1}
.sheet-go:disabled{opacity:.3;cursor:not-allowed}
.sheet-privacy{
  margin:12px 0 0;text-align:center;
  font-size:11px;color:var(--ink-3);
}

/* ══════════ 약관 모달 ══════════ */
.modal{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(23,18,15,.46);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.modal[hidden]{display:none}
.modal-box{
  position:relative;
  width:100%;max-width:420px;
  max-height:80vh;overflow-y:auto;
  padding:28px 22px 26px;
  background:var(--paper-2);
  border-radius:4px;
  box-shadow:0 30px 60px rgba(23,18,15,.3);
  animation:sheet-up .26s cubic-bezier(.22,1,.3,1);
}
.modal-close{
  position:absolute;right:12px;top:12px;
  width:34px;height:34px;
  display:grid;place-items:center;
  color:var(--ink-3);font-size:16px;
}
.modal-box h3{
  margin:0 0 16px;
  font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:-.02em;
}
.modal-body h4{
  margin:18px 0 5px;
  font-size:13.5px;font-weight:700;color:var(--gold);
}
.modal-body p{
  margin:0;
  font-size:13px;line-height:1.78;color:var(--ink-2);
}

/* ══════════ 진입 연출 (1회) ══════════ */
.hero .eyebrow,
.hero .hero-title,
.hero .stage,
.hero .stage-tag,
.hero .hero-sub,
.hero .facts,
.hero .hero-btn,
.hero .hero-note{
  opacity:0;
  animation:enter .82s cubic-bezier(.22,1,.3,1) forwards;
}
.hero .eyebrow    {animation-delay:.05s}
.hero .hero-title {animation-delay:.14s}
.hero .stage      {animation-delay:.30s;animation-name:enter-stage}
.hero .stage-tag  {animation-delay:.62s}
.hero .hero-sub   {animation-delay:.46s}
.hero .facts      {animation-delay:.56s}
.hero .hero-btn   {animation-delay:.64s}
.hero .hero-note  {animation-delay:.72s}

@keyframes enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes enter-stage{
  from{opacity:0;transform:scale(.9)}
  to  {opacity:1;transform:none}
}

/* ══════════ 반응형 ══════════ */
@media (max-width:400px){
  :root{--pad:20px}
  .hero-title{font-size:35px}
  .stage{width:340px}
  .stage-tag{font-size:11.5px;padding:8px 13px 8px 11px}
  .h-sec{font-size:24px}
  .q legend{font-size:18px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero .eyebrow,.hero .hero-title,.hero .stage,.hero .stage-tag,
  .hero .hero-sub,.hero .facts,.hero .hero-btn,.hero .hero-note{opacity:1}
}