/* artists.html · artist.html 공통 — 메인(index.html)과 같은 색·글꼴 + 슬레이트(화면 전환) */
:root{
  --bg:#050505; --bg2:#0b0b0c; --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.22);
  --text:#e9e9ea; --muted:#9a9a9f; --dim:#6d6d72;
  --silver:linear-gradient(115deg,#fafafa 0%,#bdbdbf 28%,#f4f4f5 46%,#8d8d92 70%,#e2e2e4 100%);
  --display:"Marcellus","Cormorant Garamond",serif;
  --serif:"Cormorant Garamond",serif;
  --sans:"Pretendard",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --hand:"Caveat","Nanum Pen Script",cursive;
  --gutter:clamp(16px,5vw,72px);
  --strong:#fff; --hdr:rgba(5,5,5,.78); --veil:rgba(5,5,5,.72); --stage1:#121214;
  /* 필름 색 — 배우 = 검은 필름 */
  --film:#0b0b0c; --film-edge:#2c2c2f; --film-line:#26262a; --coil:#101011; --coil-ring:#1d1d20;
  --hole:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Crect x='2.2' y='2.7' width='5.6' height='4.6' rx='1.1' fill='%23e6e6e8'/%3E%3C/svg%3E");
}
/* 인플루언서 = 배경은 그대로 검정, 필름만 흰색 (구멍은 검정) */
:root.film-white{
  --film:#f1f0eb; --film-edge:#d7d5cd; --film-line:#cdcbc3; --coil:#e8e6e0; --coil-ring:#cfccc4;
  --hole:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Crect x='2.2' y='2.7' width='5.6' height='4.6' rx='1.1' fill='%23101011'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;word-break:keep-all;font-weight:500}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.silver{background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-family:var(--display);font-size:12px;letter-spacing:.42em;color:var(--muted);text-transform:uppercase;font-weight:700}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* header */
header.sub{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--hdr);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand svg{width:30px;height:28px}
.brand b{font-family:var(--display);letter-spacing:.32em;font-size:15px;font-weight:700}
.tabs{display:flex;gap:6px}
.tabs a{font-family:var(--display);font-size:12px;letter-spacing:.28em;color:var(--muted);padding:9px 14px;border:1px solid transparent;transition:color .3s,border-color .3s;font-weight:700}
.tabs a:hover{color:var(--strong)}
.tabs a[aria-current="page"]{color:var(--strong);border-color:var(--line2)}
@media (max-width:560px){
  .brand b{display:none}
  .tabs a{padding:8px 10px;letter-spacing:.2em;font-size:11px}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:52px;padding:0 28px;border:1px solid var(--line2);font-family:var(--display);font-size:12px;letter-spacing:.3em;transition:background .35s,color .35s,border-color .35s;font-weight:700}
.btn:hover{background:#fff;color:#000;border-color:#fff}
.btn.solid{background:#f1f1f2;color:#050505;border-color:#f1f1f2}
.btn.solid:hover{background:transparent;color:#fff;border-color:var(--line2)}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}

/* ── 슬레이트(클래퍼보드) 화면 전환 ───────────────────────── */
.slate-cover{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(ellipse 60% 55% at 50% 46%,#1d1d1f,#050505 70%)}
.slate-cover.gone{display:none}
.slate-cover.boot{animation:slateFailsafe .4s 4s forwards}
@keyframes slateFailsafe{to{opacity:0;visibility:hidden}}
.slate-cover.blank .slate{display:none}
.slate-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.slate{position:relative;width:34em;font-size:min(16px,2.55vw);opacity:0;filter:drop-shadow(0 30px 60px rgba(0,0,0,.7))}
.sticks{position:relative;height:5.2em}
.stick{position:absolute;left:0;right:0;height:2.5em;border-radius:.35em;border:1px solid #2a2a2c;
  background:repeating-linear-gradient(118deg,#f2f2f2 0 1.7em,#0b0b0c 1.7em 3.4em)}
.stick.base{bottom:0;background:repeating-linear-gradient(62deg,#f2f2f2 0 1.7em,#0b0b0c 1.7em 3.4em)}
.stick.arm{bottom:2.7em;transform-origin:1.3em 100%;transform:rotate(-34deg)}
.bolt{position:absolute;left:.55em;top:50%;width:.7em;height:.7em;margin-top:-.35em;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#9a9a9e 60%,#4a4a4e)}
.board{background:#0d0d0e;border:1px solid #2a2a2c;border-radius:.2em .2em .5em .5em;padding:.7em 1.1em 1em;color:#f1f1f1;
  box-shadow:inset 0 0 0 .18em #0d0d0e,inset 0 0 3em rgba(255,255,255,.04)}
.board .r{display:flex;align-items:baseline;gap:.8em;min-height:3.4em;border-bottom:.14em solid rgba(240,240,240,.88);padding:.35em .2em}
.board .r:last-child{border-bottom:0}
.board span{font-weight:800;font-style:italic;font-size:1.05em;letter-spacing:.02em;white-space:nowrap}
.board .hand{font-family:var(--hand);font-weight:700;font-size:1.85em;line-height:1;color:#f6f6f6;letter-spacing:.02em;
  text-shadow:0 0 .06em rgba(255,255,255,.7),0 0 .5em rgba(255,255,255,.12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board .r-3{display:grid;grid-template-columns:1fr 1.5fr .8fr;gap:0;min-height:8.2em;padding:0}
.board .r-3>div{display:flex;flex-direction:column;align-items:center;padding:.4em .4em .5em;border-right:.14em solid rgba(240,240,240,.88);min-width:0}
.board .r-3>div:last-child{border-right:0}
.board .r-3 .hand{margin:auto 0;font-size:2.5em;max-width:100%}
.board .r-date small{margin-left:auto;font-style:italic;font-weight:700;font-size:.82em;line-height:1.35;text-align:right;color:#e8e8e8}
.board .r-date .hand{font-size:1.6em}
/* 인플루언서(흰 필름): 흰 아크릴 슬레이트 */
.film-white .board{background:#f8f8f6;border-color:#cfcfca;color:#151515;box-shadow:inset 0 0 0 .18em #f8f8f6,inset 0 0 3em rgba(0,0,0,.03)}
.film-white .board .r{border-bottom-color:rgba(20,20,20,.85)}
.film-white .board .r-3>div{border-right-color:rgba(20,20,20,.85)}
.film-white .board .hand{color:#171717;text-shadow:none}
.film-white .board .r-date small{color:#222}

footer{border-top:1px solid var(--line);padding:38px 0 48px}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--dim)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .slate-cover.boot{display:none}
}