@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap');

/* ─── 원하타로 shared.css ─── */
/* 랜딩(index.html) + 리딩(reading/) 공통 */

/* ─── Color Tokens ─── */
:root{
  --navy:#07090f;
  --navy2:#0c0f1e;
  --navy3:#111628;
  --gold:#c9a55c;
  --gold-lt:#dfc07e;
  --gold-dk:#917540;
  --white:#e8e0d0;
  --body:#c4bba8;
  --muted:#8a8270;
  --font-en:'Outfit','Pretendard',sans-serif;
  --sp-4:4px;
  --sp-8:8px;
  --sp-16:16px;
  --sp-24:24px;
  --sp-32:32px;
  --sp-48:48px;
  --sp-64:64px;
  --sp-80:80px;
  --lh-tight:1.1;
  --lh-heading:1.35;
  --lh-body:1.7;
  --lh-loose:1.9;
  /* ─── Letter-spacing ─── */
  --ls-ko:-.035em;       /* 한글 기본 (리셋 기준) */
  --ls-ko-title:-.045em; /* 한글 제목 (세리프 대형) */
  --ls-en:.03em;         /* 영문 본문 · 버튼 */
  --ls-en-wide:.18em;    /* 영문 라벨 (소형) */
  --ls-en-wider:.4em;    /* 영문 섹션 제목 */
}

/* ─── Reset ─── */
*{ margin:0; padding:0; box-sizing:border-box; word-break:keep-all; overflow-wrap:break-word; letter-spacing:var(--ls-ko); }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; touch-action:manipulation; overflow-x:clip; }

/* ─── Body Base ─── */
body{
  opacity:0; transition:opacity .3s ease;
  overflow-x:clip; width:100%;
  color:var(--white);
  font-family:'Pretendard',sans-serif;
  font-weight:400;
  background-attachment:fixed;
  touch-action:manipulation;
  -webkit-touch-callout:none;
  animation:forceShow 0s 3s forwards;
}
body.fonts-ready{ opacity:1; }
@keyframes forceShow{ to{opacity:1;} }

/* ─── Noise Overlay (정적 PNG — SVG filter 대비 GPU 부하 95% 감소) ─── */
body::after{
  content:''; position:fixed; inset:0;
  background-image:url("noise.png");
  background-repeat:repeat;
  opacity:.4;
  pointer-events:none; z-index:50;
}

/* ─── Stars ─── */
#stars{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.star{
  position:absolute; background:var(--gold); border-radius:50%;
  animation:twinkle var(--d) ease-in-out infinite;
  will-change:transform, opacity;
  contain:strict;
}
@keyframes twinkle{
  0%,100%{opacity:.12;transform:scale(1);}
  50%{opacity:.85;transform:scale(1.5);}
}

/* ─── Page Common (index + reading 공용) ─── */
.hero{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
}
.hero-copy{
  position:relative; z-index:1; text-align:center;
}
.hero-copy p{
  font-weight:300; font-size:clamp(12px,1.7vw,14px);
  color:var(--body); letter-spacing:var(--ls-en); line-height:1.7;
}
.title-card{
  position:relative;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.label-upper{
  font-family:'Cormorant Garamond',serif;
  font-weight:500; text-transform:uppercase;
  color:var(--gold-dk);
}

/* ─── Title Card (공통 구조) ─── */
.title-card svg.arch{
  position:absolute; inset:0; width:100%; height:100%; overflow:visible;
}
.card-inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
}
.card-sub{
  font-weight:400; font-size:clamp(9px,2.6vw,13px);
  letter-spacing:var(--ls-en-wide); line-height:1;
  color:var(--gold);
}
.card-title-ko{
  font-family:'Noto Serif KR',serif; font-weight:600;
  font-size:clamp(24px,8vw,52px);
  color:var(--gold-lt); letter-spacing:var(--ls-ko-title);
  line-height:var(--lh-tight);
}
.card-title-en{
  font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(8px,2.2vw,12px);
  letter-spacing:.35em; line-height:1;
  color:var(--gold); opacity:.8;
}

/* ─── Gold Line ─── */
.gold-line{
  width:36px; height:1px;
  background:var(--gold); opacity:.55;
  margin:12px auto 0;
}

/* ─── Buttons — Gold ─── */
.btn-gold{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--gold); color:var(--gold-lt);
  padding:14px 44px;
  font-family:var(--font-en);
  font-weight:500; font-size:14px; letter-spacing:var(--ls-en);
  cursor:pointer; border-radius:999px;
  background:rgba(201,165,92,.06);
  transition:background .25s, color .25s, box-shadow .25s;
}
.btn-gold:hover{
  background:var(--gold); color:var(--navy);
  box-shadow:0 0 22px rgba(201,165,92,.28);
}
.btn-gold:active{ transform:scale(.96); }
.btn-gold:disabled{ opacity:.25; cursor:not-allowed; }
.btn-gold:disabled:hover{ background:rgba(201,165,92,.06); color:var(--gold-lt); box-shadow:none; }

/* ─── Buttons — Ghost ─── */
.btn-ghost{
  display:inline-flex; align-items:center;
  background:rgba(255,255,255,.042);
  border:1px solid rgba(255,255,255,.09);
  color:var(--body);
  font-family:var(--font-en);
  font-size:13px; font-weight:400;
  padding:11px 32px; border-radius:999px;
  cursor:pointer; transition:all .2s;
}
.btn-ghost:hover{
  border-color:rgba(201,165,92,.42);
  color:var(--gold-lt);
  background:rgba(255,255,255,.075);
}
.btn-ghost:active{ transform:scale(.96); }

/* ─── Sparkle Button System ─── */
.btn-sparkle-wrap{
  position:relative; display:flex;
  justify-content:center; padding:12px 0;
}
.btn-star-ring{
  position:absolute;
  width:calc(100% + 8px); height:calc(100% + 8px);
  top:50%; left:50%; pointer-events:none;
  animation:starWrap 4s cubic-bezier(.4,0,.2,1) infinite;
}
.btn-star-ring .dot{
  position:absolute; top:-3px; left:50%;
  border-radius:50%; background:var(--gold-lt);
  transform:translateX(-50%);
}
.btn-star-ring .dot:nth-child(1){
  width:4px; height:4px;
  box-shadow:0 0 6px rgba(201,165,92,.7), 0 0 14px rgba(201,165,92,.3);
}
.btn-star-ring .dot:nth-child(2){
  width:3px; height:3px; opacity:.7; margin-left:-8px;
  box-shadow:0 0 5px rgba(201,165,92,.5);
}
.btn-star-ring .dot:nth-child(3){
  width:2.5px; height:2.5px; opacity:.45; margin-left:-14px;
  box-shadow:0 0 4px rgba(201,165,92,.3);
}
.btn-star-ring .dot:nth-child(4){
  width:2px; height:2px; opacity:.25; margin-left:-19px;
  box-shadow:0 0 3px rgba(201,165,92,.2);
}
@keyframes starWrap{
  0%{   transform:translate(-50%,-50%) rotate(0deg);   opacity:0; }
  8%{   opacity:1; }
  85%{  opacity:1; transform:translate(-50%,-50%) rotate(340deg); }
  100%{ opacity:0; transform:translate(-50%,-50%) rotate(360deg); }
}
.btn-sparkle{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:18px 52px;
  font-family:var(--font-en);
  font-weight:600; font-size:14px; letter-spacing:var(--ls-en);
  color:var(--gold-lt);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(201,165,92,.14) 0%, rgba(201,165,92,.04) 55%, transparent 100%),
    rgba(201,165,92,.05);
  border:1px solid rgba(201,165,92,.5);
  border-radius:999px; cursor:pointer;
  text-decoration:none; transition:all .35s ease;
  box-shadow:0 0 20px rgba(201,165,92,.08), inset 0 1px 0 rgba(201,165,92,.12);
  text-shadow:0 0 12px rgba(201,165,92,.3);
  z-index:1; overflow:hidden;
}
.btn-sparkle:hover{
  color:var(--white);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(201,165,92,.24) 0%, rgba(201,165,92,.08) 55%, transparent 100%),
    rgba(201,165,92,.08);
  border-color:rgba(201,165,92,.75);
  box-shadow:0 0 40px rgba(201,165,92,.16), 0 0 80px rgba(201,165,92,.06), inset 0 1px 0 rgba(201,165,92,.18);
  text-shadow:0 0 16px rgba(201,165,92,.5);
  transform:translateY(-2px);
}
.btn-sparkle:active:not(:disabled){ transform:scale(.96); }
.btn-sparkle:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.btn-sparkle:disabled:hover{
  color:var(--gold-lt); transform:none;
  box-shadow:0 0 20px rgba(201,165,92,.08);
}
.btn-sparkle::before{
  content:''; position:absolute;
  top:0; left:-120%; width:40%; height:100%;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.12) 50%, transparent 65%);
  animation:gentleSweep 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes gentleSweep{
  0%,70%{ left:-120%; opacity:0; }
  80%{ opacity:1; }
  100%{ left:200%; opacity:0; }
}
.btn-glow{
  position:absolute; width:220%; height:220%;
  top:50%; left:50%; transform:translate(-50%,-50%);
  background:radial-gradient(ellipse, rgba(201,165,92,.08) 0%, rgba(201,165,92,.03) 35%, transparent 65%);
  pointer-events:none; z-index:0;
  animation:glowPulse 4.5s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{ opacity:.4; transform:translate(-50%,-50%) scale(.95); }
  50%{     opacity:1;  transform:translate(-50%,-50%) scale(1.05); }
}
.btn-sparkle .spark{
  display:inline-block; font-size:11px;
  color:var(--gold);
  animation:sparkFloat 2s ease-in-out infinite;
}
.btn-sparkle .spark:nth-child(2){ animation-delay:.7s; }
.btn-sparkle:hover .spark{ color:var(--white); }
@keyframes sparkFloat{
  0%,100%{ opacity:.35; transform:scale(.7); }
  50%{     opacity:1;   transform:scale(1.2); }
}
.btn-sparkle::after{
  content:''; position:absolute; inset:-6px;
  border-radius:999px;
  background:radial-gradient(ellipse,rgba(201,165,92,.12) 0%,transparent 70%);
  animation:btnPulse 2.2s ease-in-out infinite;
  pointer-events:none;
  will-change:opacity;
}
@keyframes btnPulse{
  0%,100%{ opacity:.3; }
  50%{     opacity:1; }
}

/* ─── Footer ─── */
footer{
  position:relative; z-index:1;
  text-align:center;
  border-top:1px solid rgba(201,165,92,.16);
  padding:40px 0 24px;
}
.footer-brand{
  font-family:'Cormorant Garamond',serif;
  font-weight:500; font-size:15px;
  letter-spacing:var(--ls-en-wide); color:var(--gold);
  text-transform:uppercase; margin-bottom:6px;
}
.footer-copy{
  font-family:var(--font-en);
  font-size:11px; font-weight:300;
  letter-spacing:var(--ls-en); color:var(--muted);
}
footer a{
  color:var(--muted); text-decoration:none;
  border-bottom:1px solid rgba(201,165,92,.28);
  padding-bottom:1px; transition:color .2s;
  font-family:var(--font-en);
  font-size:11px; letter-spacing:var(--ls-en);
}
footer a:hover{ color:var(--gold-lt); }

/* ─── Common Animations ─── */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{   opacity:1; transform:translateY(0); }
}
@keyframes spinOrbit{
  from{ transform:rotate(0deg); }
  to{   transform:rotate(360deg); }
}
@keyframes slideUp{
  from{ opacity:0; transform:translateY(28px); }
  to{   opacity:1; transform:translateY(0); }
}
@keyframes popIn{
  from{ transform:scale(.85); opacity:0; }
  to{   transform:scale(1);   opacity:1; }
}