/* ============================================================
   추모 속의 쿠로네코 — 공통 스타일
   톤: 다크 판타지 / 자색 기본 / 조건부 마룬·적색 전환
   모바일 퍼스트
   ============================================================ */

/* ---------- 폰트 ---------- */
/* 마루 부리 — 중간(Regular) / 조금굵은(SemiBold) 두 굵기 */
@font-face{
  font-family:"MaruBuri";
  src:url("../fonts/maruburi-regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"MaruBuri";
  src:url("../fonts/maruburi-semibold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Mona12";
  src:url("../fonts/mona12.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ---------- 팔레트 ---------- */
:root{
  --bg-0:#08060d;
  --bg-1:#100b18;
  --bg-2:#181022;
  --bg-3:#22182f;
  --line:#3a2a52;
  --line-2:#2a1d3d;

  --ink:#ece4f5;
  --ink-2:#a998c2;
  --ink-3:#6f5f8c;

  --acc:#a96ede;            /* 자색 포인트 */
  --acc-2:#cfa6f7;
  --acc-d:#5c3189;
  --acc-glow:rgba(169,110,222,.28);

  --maroon:#6e1e2e;
  --crimson:#cf3a52;
  --gold:#d9b45f;
  --blood:#8d1b26;

  --radius:14px;
  --wrap:44rem;
  --shadow:0 10px 40px rgba(0,0,0,.55);
  --t:.35s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg-0);
  color:var(--ink);
  font-family:"MaruBuri","Mona12","Apple SD Gothic Neo","Malgun Gothic",serif;
  font-weight:400;
  font-size:17px;
  line-height:1.92;
  letter-spacing:.005em;
  overflow-x:hidden;
  transition:background-color var(--t),color var(--t);
}
b,strong{font-weight:600;}

/* 배경 분위기 — 안개 + 비네트 + 노이즈 */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--acc-glow) 0%, transparent 55%),
    radial-gradient(90% 60% at 10% 100%, rgba(110,30,46,.16) 0%, transparent 60%),
    linear-gradient(180deg,var(--bg-1) 0%,var(--bg-0) 45%,#000 100%);
  transition:background-color var(--t);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:radial-gradient(circle at 25% 25%, rgba(255,255,255,.7) .5px, transparent .6px),
                   radial-gradient(circle at 75% 75%, rgba(255,255,255,.5) .5px, transparent .6px);
  background-size:3px 3px, 5px 5px;
}

img{max-width:100%;height:auto;display:block;}
a{color:var(--acc-2);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- 레이아웃 ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 1.15rem;}

/* ---------- 상단 바 ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(8,6,13,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-2);
}
.topbar .wrap{display:flex;align-items:center;gap:.6rem;min-height:54px;}
.brand{
  font-size:1rem;letter-spacing:.06em;color:var(--ink);
  white-space:nowrap;flex:0 0 auto;
}
.brand b{color:var(--acc-2);font-weight:600;}
@media(max-width:520px){
  .brand-long{display:none;}
  .nav a{padding:.35rem .45rem;font-size:.86rem;}
}
.nav{
  margin-left:auto;display:flex;gap:.1rem;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.nav::-webkit-scrollbar{display:none;}
.nav a{
  padding:.35rem .6rem;border-radius:9px;color:var(--ink-2);
  font-size:.9rem;white-space:nowrap;transition:var(--t);
}
.nav a:hover{color:var(--ink);background:var(--bg-2);text-decoration:none;}
.nav a[aria-current="page"]{color:var(--acc-2);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);}

/* ---------- 히어로 ---------- */
.hero{padding:3.2rem 0 2.2rem;text-align:center;position:relative;}
.hero .eyebrow{
  font-size:.78rem;letter-spacing:.3em;color:var(--ink-3);
  margin:0 0 1rem;
}
.hero h1{
  margin:0;font-size:clamp(1.9rem,8.5vw,3.1rem);font-weight:600;
  line-height:1.35;letter-spacing:.02em;
  text-shadow:0 0 34px var(--acc-glow);
}
.hero h1 .k{color:var(--acc-2);}
.hero .tagline{
  margin:1.1rem auto 0;max-width:30rem;color:var(--ink-2);font-size:1rem;
}
.rule{
  width:90px;height:1px;margin:1.6rem auto;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);
}

/* ---------- 섹션 ---------- */
section{padding:2.2rem 0;}
h2{
  margin:0 0 1.1rem;font-size:1.32rem;font-weight:600;letter-spacing:.04em;
  display:flex;align-items:center;gap:.6rem;
}
h2::before{
  content:"";width:5px;height:1.05em;border-radius:2px;flex:0 0 auto;
  background:linear-gradient(180deg,var(--acc),var(--acc-d));
}
h3{margin:1.8rem 0 .7rem;font-size:1.05rem;font-weight:600;color:var(--acc-2);letter-spacing:.03em;}
p{margin:0 0 1rem;}
.lead{color:var(--ink-2);}
.muted{color:var(--ink-3);font-size:.9rem;}

/* ---------- 카드 ---------- */
.card{
  background:linear-gradient(160deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--line-2);border-radius:var(--radius);
  padding:1.15rem;margin:0 0 .9rem;
  transition:var(--t);
}
.card:hover{border-color:var(--line);}
.cards{display:grid;gap:.9rem;}
@media(min-width:640px){.cards.two{grid-template-columns:1fr 1fr;}}

a.card{display:block;color:inherit;position:relative;overflow:hidden;}
a.card:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow);}
a.card .t{font-size:1.08rem;color:var(--ink);margin-bottom:.25rem;}
a.card .d{font-size:.9rem;color:var(--ink-3);line-height:1.7;}
a.card .go{position:absolute;right:1.1rem;top:1.15rem;color:var(--acc);opacity:.6;}

/* ---------- 태그 ---------- */
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 1rem;padding:0;list-style:none;}
.tags.has-cat{margin-top:2.4rem;}   /* 고양이가 앉을 자리 */
.tag{
  font-size:.8rem;padding:.18rem .6rem;border-radius:999px;
  background:var(--bg-3);color:var(--ink-2);border:1px solid var(--line-2);
}
.tag.acc{color:var(--acc-2);border-color:var(--acc-d);background:rgba(92,49,137,.22);}
.tag.red{color:#f2a1ac;border-color:var(--maroon);background:rgba(110,30,46,.28);}

/* ---------- 정의 리스트 ---------- */
.dl{margin:0;display:grid;gap:.1rem;}
.dl > div{
  display:grid;grid-template-columns:5.6rem 1fr;gap:.7rem;
  padding:.5rem 0;border-bottom:1px dashed var(--line-2);
}
.dl > div:last-child{border-bottom:0;}
.dl dt{color:var(--ink-3);font-size:.86rem;padding-top:.15rem;}
.dl dd{margin:0;color:var(--ink);font-size:.95rem;line-height:1.75;}

/* 속마음 — 대사와 같은 방향에 두되 점선으로 구분한다 */
.inner-voice{
  font-style:italic;color:var(--ink-3);
  padding-left:.9rem;border-left:2px dashed var(--line-2);
}

/* ---------- 인용/대사 ---------- */
.quote{
  margin:1.1rem 0;padding:.8rem 0 .8rem 1rem;
  border-left:2px solid var(--acc-d);color:var(--ink-2);font-size:.97rem;
}
.quote .who{display:block;color:var(--ink-3);font-size:.82rem;margin-top:.4rem;}

/* ---------- 스포일러 토글 ---------- */
details.spoil{
  border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--bg-1);margin:0 0 .9rem;overflow:hidden;
  transition:var(--t);
}
details.spoil[open]{border-color:var(--line);background:var(--bg-2);}
details.spoil > summary{
  list-style:none;cursor:pointer;padding:.9rem 1.1rem;
  display:flex;align-items:center;gap:.6rem;
  color:var(--ink-2);font-size:.95rem;user-select:none;
  transition:var(--t);
}
details.spoil > summary::-webkit-details-marker{display:none;}
details.spoil > summary:hover{color:var(--ink);background:var(--bg-2);}
details.spoil > summary .lock{
  flex:0 0 auto;width:1.5rem;height:1.5rem;border-radius:50%;
  display:grid;place-items:center;font-size:.78rem;
  background:var(--bg-3);border:1px solid var(--line);color:var(--acc);
  transition:var(--t);
}
details.spoil[open] > summary .lock{background:var(--acc-d);color:#fff;border-color:var(--acc);}
details.spoil > summary .hint{margin-left:auto;font-size:.76rem;color:var(--ink-3);white-space:nowrap;}
details.spoil[open] > summary .hint{opacity:.5;}
.spoil-body{padding:0 1.1rem 1.1rem;border-top:1px solid var(--line-2);}
.spoil-body > :first-child{margin-top:1rem;}
details.spoil.deep{border-color:var(--maroon);}
details.spoil.deep > summary .lock{color:var(--crimson);border-color:var(--maroon);}
details.spoil.deep[open]{border-color:var(--crimson);}
details.spoil.deep[open] > summary .lock{background:var(--maroon);border-color:var(--crimson);color:#fff;}

/* ---------- 단축어 목록 ---------- */
.cmds{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;}
.cmds li{
  position:relative;
  background:linear-gradient(160deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--line-2);border-left:3px solid var(--acc-d);
  border-radius:10px;padding:.9rem 1rem;
  transition:var(--t);
}
.cmds li:hover{border-color:var(--line);border-left-color:var(--acc);}
.cmd{
  display:inline-block;font-family:"Mona12",monospace;font-size:13px;
  padding:.15rem .55rem;border-radius:4px;
  background:var(--bg-0);border:1px solid var(--line);color:var(--acc-2);
  margin:0 0 .45rem;
}
.cmds .cd{font-size:.92rem;color:var(--ink-2);line-height:1.75;word-break:keep-all;}
.cmds .ex{
  position:absolute;top:.7rem;right:.8rem;
  font-size:.68rem;letter-spacing:.1em;color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:3px;padding:0 .35rem;
}

/* ---------- 주의 배너 ---------- */
.notice{
  border:1px solid var(--line);border-left:3px solid var(--acc);
  background:var(--bg-1);border-radius:10px;padding:.85rem 1rem;
  font-size:.9rem;color:var(--ink-2);margin:0 0 1rem;
}
.notice.red{border-left-color:var(--crimson);}
.notice b{color:var(--ink);font-weight:400;}

/* ---------- 연표 ---------- */
.time{list-style:none;margin:0;padding:0 0 0 1.1rem;border-left:1px solid var(--line-2);}
.time li{position:relative;padding:0 0 1.4rem .6rem;}
.time li::before{
  content:"";position:absolute;left:-1.45rem;top:.62rem;
  width:9px;height:9px;border-radius:50%;
  background:var(--bg-0);border:2px solid var(--acc-d);
}
.time li.hot::before{border-color:var(--crimson);background:var(--maroon);}
.time .when{display:block;font-size:.8rem;color:var(--acc);letter-spacing:.08em;}
.time .what{font-size:.95rem;color:var(--ink-2);}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.7rem 1.3rem;border-radius:999px;
  background:linear-gradient(180deg,var(--acc-d),#2b1741);
  color:#fff;border:1px solid var(--acc);
  font-family:inherit;font-size:.95rem;cursor:pointer;
  transition:var(--t);text-decoration:none;
}
.btn:hover{text-decoration:none;box-shadow:0 0 22px var(--acc-glow);transform:translateY(-1px);}
.btn.ghost{background:transparent;color:var(--ink-2);border-color:var(--line);}
.btn.ghost:hover{color:var(--ink);border-color:var(--acc);}

/* ---------- 푸터 ---------- */
footer{
  margin-top:2.5rem;padding:2rem 0 3rem;
  border-top:1px solid var(--line-2);
  color:var(--ink-3);font-size:.82rem;line-height:1.8;text-align:center;
}
footer a{color:var(--ink-2);}

/* ---------- 접근성 ---------- */
:focus-visible{outline:2px solid var(--acc-2);outline-offset:2px;border-radius:6px;}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* ---------- 단축어 예시 출력 블록 ---------- */
.out{
  font-family:"Mona12",monospace;
  font-size:13px;line-height:1.95;letter-spacing:0;
  background:#07050b;border:1px solid var(--line);border-radius:8px;
  padding:.9rem 1rem;margin:.6rem 0 1rem;
  color:var(--ink);white-space:pre-wrap;word-break:keep-all;
  overflow-x:auto;
}
.out .k{color:var(--acc-2);}
.out .g{color:var(--ink-3);}
.out .r{color:#f2a1ac;}
.out .y{color:var(--gold);}
@media(max-width:430px){
  .out{font-size:11.5px;padding:.8rem .7rem;line-height:1.85;}
}
.out-cap{
  font-family:"Mona12",monospace;font-size:11px;letter-spacing:.1em;
  color:var(--ink-3);margin:.9rem 0 0;
}
.cmds li.big{border-left-color:var(--acc);}
.when{
  display:inline-block;font-size:.78rem;padding:.15rem .55rem;border-radius:999px;
  background:rgba(92,49,137,.22);border:1px solid var(--acc-d);color:var(--acc-2);
  margin:0 0 .6rem;
}
.when.red{background:rgba(110,30,46,.28);border-color:var(--maroon);color:#f2a1ac;}
.scene{
  border:1px solid var(--line-2);border-left:3px solid var(--gold);
  background:var(--bg-1);border-radius:10px;padding:.9rem 1rem;
  font-size:.92rem;color:var(--ink-2);margin:0 0 1.4rem;
}
.scene b{color:var(--ink);}

/* ============================================================
   배경 연출 — 비 / 그녀의 물건
   ============================================================ */
.amb{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}

/* 숲속 은신처 — 가을비 */
.rain::before,.rain::after{
  content:"";position:absolute;inset:-10% -10% -10% -10%;
  background-repeat:repeat;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect x='4' y='2' width='1' height='5' fill='%23a9b6d8' opacity='.55'/%3E%3Crect x='17' y='14' width='1' height='6' fill='%23a9b6d8' opacity='.40'/%3E%3Crect x='29' y='6' width='1' height='5' fill='%23a9b6d8' opacity='.50'/%3E%3Crect x='9' y='27' width='1' height='6' fill='%23a9b6d8' opacity='.35'/%3E%3Crect x='34' y='31' width='1' height='5' fill='%23a9b6d8' opacity='.45'/%3E%3Crect x='22' y='35' width='1' height='4' fill='%23a9b6d8' opacity='.30'/%3E%3C/svg%3E");
  will-change:transform;
}
.rain::before{opacity:.5;animation:fall 1.1s linear infinite;}
.rain::after{opacity:.26;transform:scale(1.7);animation:fall 2.3s linear infinite;}
@keyframes fall{from{background-position:0 0;}to{background-position:-24px 40px;}}

/* 동거 후 — 그녀의 물건이 「놓여」 있다 */
/* 화면 아래쪽에 옅은 바닥을 깔아 물건이 떠 있지 않게 보이도록 한다 */
.amb-floor{
  position:absolute;left:0;right:0;bottom:0;height:110px;
}
.amb-floor::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:130px;
  background:linear-gradient(180deg,transparent 0%,rgba(10,6,16,.55) 45%,rgba(6,4,10,.92) 100%);
}
.amb-item{
  position:absolute;bottom:14px;width:40px;height:auto;
  image-rendering:pixelated;
  opacity:.62;
  transform-origin:50% 100%;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.45)) drop-shadow(0 8px 12px rgba(0,0,0,.55));
  animation:settle 7s ease-in-out infinite;
}
/* 놓여 있는 느낌 — 크게 움직이지 않고 아주 살짝만 기운다 */
@keyframes settle{
  0%,100%{transform:translateY(0) rotate(-1deg);}
  50%    {transform:translateY(-2px) rotate(1.5deg);}
}

/* 발바닥 — 하나만 크게, 한가운데.
   줄에 끼우지 않고 물건들 뒤에 깔아 두어 좌우 균형을 잡아준다.
   transform 은 여기서만 쓴다 — .amb-item 은 settle 이 transform 을 쓰므로 겹치면 안 된다 */
.amb-paw{
  position:absolute;left:50%;bottom:-22px;
  width:min(64vw,340px);height:auto;
  transform:translateX(-50%);
  image-rendering:pixelated;pointer-events:none;
  opacity:.14;
}

/* 카드 위에 얹어둔 것 */
.deco-shelf{
  position:absolute;bottom:100%;width:30px;height:auto;
  image-rendering:pixelated;pointer-events:none;
  opacity:.9;margin-bottom:-2px;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.5));
}

/* ---------- 서식 장식 ---------- */
/* 태그 위에 앉은 고양이 */
.deco-cat{
  position:absolute;bottom:100%;left:50%;
  width:34px;height:auto;margin:0 0 -3px -17px;
  image-rendering:pixelated;pointer-events:none;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));
  animation:catSit 5s ease-in-out infinite;
}
@keyframes catSit{
  0%,92%,100%{transform:translateY(0);}
  95%        {transform:translateY(-2px);}
}

/* 빈 곳에 찍힌 발자국 */
.deco-paw{
  position:absolute;right:.9rem;bottom:.6rem;
  width:22px;height:auto;
  image-rendering:pixelated;pointer-events:none;
  opacity:.28;
}
.deco-paw.alt{right:auto;left:.9rem;bottom:.5rem;width:18px;opacity:.22;}

@media(prefers-reduced-motion:reduce){
  .rain::before,.rain::after{animation:none;}
  .amb-item,.deco-cat{animation:none;}
}

/* ============================================================
   이스터에그 — 애정도 131 이상 (site.js 의 WHISPER_AFF)
   ============================================================ */
.whisper{
  margin:1.6rem 0 0;padding:.7rem 0 .7rem 1rem;
  border-left:2px solid var(--maroon);
  color:#e0b9c2;font-size:.95rem;line-height:1.85;
  animation:whisperIn 1.2s ease both;
}
.whisper .w-who{
  display:block;font-size:.72rem;letter-spacing:.16em;
  color:var(--crimson);margin-bottom:.2rem;
}
@keyframes whisperIn{from{opacity:0;transform:translateX(-6px);}to{opacity:1;transform:none;}}

/* ============================================================
   입장 — 닉네임
   ============================================================ */
.gate{
  position:fixed;inset:0;z-index:300;display:none;
  align-items:center;justify-content:center;padding:1.2rem;
  background:#05030a;
}
.gate.open{display:flex;animation:gateIn .5s ease;}
@keyframes gateIn{from{opacity:0;}to{opacity:1;}}
.gate::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 55% at 50% 30%, var(--acc-glow), transparent 65%);
}
.gate-box{position:relative;width:100%;max-width:22rem;text-align:center;}
.gate-eyebrow{
  font-size:.74rem;letter-spacing:.28em;color:var(--ink-3);margin:0 0 1.6rem;
}
.gate-q{font-size:1.12rem;color:var(--ink);margin:0 0 1.3rem;word-break:keep-all;}
.gate-in{
  width:100%;font-family:inherit;font-size:1.05rem;text-align:center;
  padding:.75rem .8rem;margin:0 0 1rem;
  color:var(--ink);background:var(--bg-1);
  border:1px solid var(--line);border-radius:10px;
}
.gate-in::placeholder{color:var(--ink-3);font-size:.92rem;}
.gate-in:focus{outline:none;border-color:var(--acc);box-shadow:0 0 18px var(--acc-glow);}
.gate-go{width:100%;justify-content:center;}
.gate-note{font-size:.76rem;color:var(--ink-3);margin:1.2rem 0 0;line-height:1.7;}

/* 배색이 갈릴 때만 잠깐 걸어두는 긴 전환.
   평소에도 걸어두면 마우스를 올릴 때마다 반응이 굼떠진다. */
html.skin-fade *,
html.skin-fade *::before,
html.skin-fade *::after{
  transition:background-color 1.9s ease,
             color 1.9s ease,
             border-color 1.9s ease,
             box-shadow 1.9s ease,
             opacity 1.9s ease !important;
}
@media(prefers-reduced-motion:reduce){
  html.skin-fade *,html.skin-fade *::before,html.skin-fade *::after{transition:none!important;}
}

/* ============================================================
   동거 후 — 자색에서 등불빛으로
   ============================================================ */
:root[data-warm="1"]{
  --bg-0:#0d0906; --bg-1:#17110a; --bg-2:#211810; --bg-3:#2c2116;
  --line:#4d3b23; --line-2:#35281a;

  --ink:#f6eddd; --ink-2:#cbb693; --ink-3:#8e795b;

  --acc:#e0a83c; --acc-2:#f6cf7e; --acc-d:#7d5719;
  --acc-glow:rgba(224,168,60,.26);

  --maroon:#7c3c1f; --crimson:#d9733c; --gold:#f2d179;
}
:root[data-warm="1"] body{
  background:#0d0906; color:#f6eddd;
  transition:background-color 1.4s ease,color 1.4s ease;
}
:root[data-warm="1"] body::before{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(224,168,60,.22) 0%, transparent 55%),
    radial-gradient(90% 60% at 15% 100%, rgba(180,96,36,.16) 0%, transparent 60%),
    linear-gradient(180deg,#17110a 0%,#0d0906 45%,#050302 100%);
}
:root[data-warm="1"] .topbar{background:rgba(13,9,6,.88);}
:root[data-warm="1"] .tag.acc{background:rgba(125,87,25,.24);}
:root[data-warm="1"] .tag.red{background:rgba(124,60,31,.28);color:#f0b48c;}
:root[data-warm="1"] .btn{background:linear-gradient(180deg,var(--acc-d),#3a2409);}
/* 비가 그친 뒤이므로 빗줄기는 이미 꺼져 있다 */

/* ============================================================
   공황 — 사이트 전체가 가라앉는다
   ============================================================ */
:root[data-panic="1"]{
  --bg-0:#020103; --bg-1:#060409; --bg-2:#0a070f; --bg-3:#0e0a15;
  --line:#1d1627; --line-2:#150f1e;
  --ink:#958ca6; --ink-2:#6d6483; --ink-3:#4b4462;
  --acc:#5c4c74; --acc-2:#80709b; --acc-d:#312744;
  --acc-glow:rgba(38,28,52,.4);
}
:root[data-panic="1"] body{
  /* background 단축 속성에 트랜지션이 걸려 있으면 변수 변경이 늦게 반영된다.
     공황일 때는 색을 직접 지정해 확실히 갈아끼운다. */
  background:#020103;
  color:#958ca6;
  transition:background-color 1.2s ease,color 1.2s ease;
}
:root[data-panic="1"] body::before{
  background:radial-gradient(120% 80% at 50% -10%, rgba(30,22,42,.5) 0%, transparent 55%),
             linear-gradient(180deg,#060409 0%,#020103 50%,#000 100%);
}
/* 시야가 좁아지는 느낌 */
:root[data-panic="1"] body::after{
  opacity:1;
  background:radial-gradient(closest-side at 50% 45%, transparent 42%, rgba(0,0,0,.72) 100%);
  background-size:auto;
  animation:panicBreath 5.5s ease-in-out infinite;
}
@keyframes panicBreath{0%,100%{opacity:.85;}50%{opacity:1;}}
:root[data-panic="1"] .amb{opacity:.25;}
:root[data-panic="1"] .deco-cat,:root[data-panic="1"] .deco-paw,:root[data-panic="1"] .deco-shelf{opacity:.2;}

/* ============================================================
   브금 토글 — 제목 바로 아래
   ============================================================ */
.brand-col{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;flex:0 0 auto;}
.bgm-row{display:flex;align-items:center;gap:.35rem;}
.bgm{
  font-family:inherit;font-size:.7rem;letter-spacing:.06em;line-height:1.5;
  padding:.05rem .45rem;cursor:pointer;
  color:var(--ink-3);background:transparent;
  border:1px solid var(--line-2);border-radius:999px;
  transition:var(--t);white-space:nowrap;flex:0 0 auto;
}

/* 음량 슬라이더 */
.bgm-vol{
  -webkit-appearance:none;appearance:none;
  width:64px;height:14px;margin:0;padding:0;
  background:transparent;cursor:pointer;flex:0 0 auto;
}
.bgm-vol::-webkit-slider-runnable-track{
  height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--acc-d),var(--line));
}
.bgm-vol::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:10px;height:10px;margin-top:-3.5px;border-radius:50%;
  background:var(--acc-2);border:1px solid var(--acc-d);
  transition:box-shadow .2s;
}
.bgm-vol:hover::-webkit-slider-thumb,
.bgm-vol:focus-visible::-webkit-slider-thumb{box-shadow:0 0 8px var(--acc-glow);}
.bgm-vol::-moz-range-track{
  height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--acc-d),var(--line));
}
.bgm-vol::-moz-range-thumb{
  width:10px;height:10px;border-radius:50%;
  background:var(--acc-2);border:1px solid var(--acc-d);
}
.bgm-vol:focus-visible{outline:2px solid var(--acc-2);outline-offset:3px;border-radius:4px;}
@media(max-width:520px){
  /* 상단 바가 좁으므로 ♪ 만 남기고 글자는 감춘다 */
  .bgm-txt{display:none;}
  .bgm{font-size:.72rem;padding:.05rem .38rem;}
  .bgm-vol{width:46px;}
  .bgm-row{gap:.28rem;}
}
.bgm:hover{color:var(--ink-2);border-color:var(--line);}
.bgm[aria-pressed="true"]{color:var(--acc-2);border-color:var(--acc-d);background:rgba(92,49,137,.18);}
.bgm.none{opacity:.45;cursor:default;}
.bgm.none:hover{color:var(--ink-3);border-color:var(--line-2);}

/* ============================================================
   입장 — 암전 후 서서히 밝아짐
   ============================================================ */
.fadeout{
  position:fixed;inset:0;z-index:400;background:#000;
  opacity:0;pointer-events:none;
}
.fadeout.on{opacity:1;pointer-events:all;transition:opacity .7s ease;}
.fadeout.off{opacity:0;transition:opacity 1.6s ease;}
@media(prefers-reduced-motion:reduce){
  .fadeout.on,.fadeout.off{transition:none;}
  :root[data-panic="1"] body::after{animation:none;}
}

/* ---------- 단계 목록 (트라우마 발현 순서) ---------- */
.steps{
  counter-reset:st;list-style:none;margin:.6rem 0 1.2rem;padding:0;
  display:grid;gap:.5rem;
}
.steps li{
  counter-increment:st;position:relative;
  padding:.55rem .9rem .55rem 2.6rem;
  background:var(--bg-1);border:1px solid var(--line-2);
  border-left:3px solid var(--maroon);border-radius:8px;
  font-size:.93rem;color:var(--ink-2);line-height:1.7;word-break:keep-all;
}
.steps li::before{
  content:counter(st);
  position:absolute;left:.85rem;top:.62rem;
  width:1.25rem;height:1.25rem;border-radius:50%;
  display:grid;place-items:center;
  font-size:.72rem;color:#f2a1ac;
  background:rgba(110,30,46,.35);border:1px solid var(--maroon);
}

/* ============================================================
   사선으로 가른 두 장
   왼쪽 위 삼각형 / 오른쪽 아래 삼각형
   ============================================================ */
.split{
  position:relative;margin:0 auto 1.4rem;padding:0;
  aspect-ratio:3/2;width:100%;max-width:36rem;
  border-radius:var(--radius);overflow:hidden;
  background:var(--bg-0);
  border:1px solid var(--line-2);
  box-shadow:var(--shadow);
}
.split-a,.split-b{position:absolute;inset:0;}
/* 오른쪽 사선(/) 으로 가른다.
   코너-코너로 그으면 양끝이 쐐기라 얼굴도 대거도 잘려나간다.
   위 56% - 아래 36% 를 잇는 기울어진 직선으로 갈라 사다리꼴 둘로 둔다.
   양쪽 다 위아래로 넓어서 머리끝까지 들어온다. */
.split-a{clip-path:polygon(0 0, 56% 0, 36% 100%, 0 100%);}
.split-b{clip-path:polygon(56% 0, 100% 0, 100% 100%, 36% 100%);}
.split img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* 두 원본을 미리 3:2 로 잘라 두었으므로 cover 로는 잘리지 않는다.
   scale 은 가장자리 이음매를 가리는 용도다. 구도는 잘라낸 좌표로 잡는다. */
.split-a img{transform:scale(1.02);}   /* 얼굴 + 오른손 대거 */
.split-b img{transform:scale(1.02);}   /* 얼굴 + 머리 주변 아우라 */

/* 가르는 선. 자르는 면과 똑같은 좌표를 쓰므로 화면 비율이 바뀌어도 어긋나지 않는다. */
.split-seam{
  position:absolute;inset:0;pointer-events:none;
  background:var(--acc);
  clip-path:polygon(55.7% 0, 56.3% 0, 36.3% 100%, 35.7% 100%);
  filter:drop-shadow(0 0 2px rgba(0,0,0,.9));
  opacity:.92;
}
/* 설명은 그림 밖에 둔다. 안에 두면 앉은 자세를 가린다. */
.split-cap{
  max-width:36rem;margin:-.6rem auto 1.6rem;
  font-size:.8rem;color:var(--ink-3);text-align:center;
}
@media(max-width:430px){
  .split{max-width:100%;}
  .split-cap{max-width:100%;font-size:.75rem;}
}

/* ============================================================
   고장 — 서약을 거절한 뒤
   미니게임 안에서 벌어진 일이지만, 사이트 전체가 그 여파를 받는다.
   진행 상태에 남으므로 다른 탭으로 가도, 새로고침해도 이어진다.

   글리치에서 제외하는 것:
     · 도구 버튼 — 「처음부터」로 되돌리는 길까지 흔들리면 갇힌다.
     · 속내 · 안내문 · 모달 — 지금 무슨 일이 났는지는 읽을 수 있어야 한다.
   ============================================================ */
:root[data-broken="1"]{
  --bg-0:#050406; --bg-1:#08070a; --bg-2:#0a090c; --bg-3:#0d0c10;
  --ink:#8b8790; --ink-2:#5a575f; --ink-3:#3c3a40;
  --acc:#6a5f74; --acc-2:#857a90; --acc-d:#3d3646;
  --acc-glow:rgba(106,95,116,.14);
  --line:#2e2b33; --line-2:#211f26;
  --crimson:#a34452; --maroon:#4e2530; --gold:#9c8a5e;
}
/* filter 는 쓰지 않는다.
   filter 가 걸린 요소는 그 안의 position:fixed 요소의 기준이 되어버려서,
   모달·프롤로그·이별 화면이 뷰포트가 아니라 문서 높이 기준으로 가운데 정렬된다.
   같은 결과는 팔레트를 죽이는 것으로 낸다. */

:root[data-broken="1"] h1,
:root[data-broken="1"] h2,
:root[data-broken="1"] h3,
:root[data-broken="1"] summary,
:root[data-broken="1"] .brand,
:root[data-broken="1"] nav a,
:root[data-broken="1"] .act,
:root[data-broken="1"] dt,
:root[data-broken="1"] .chip,
:root[data-broken="1"] .lab,
:root[data-broken="1"] .num,
:root[data-broken="1"] .card h2,
:root[data-broken="1"] .whisper{
  animation:broke 5.7s steps(2) infinite;
}
:root[data-broken="1"] p,
:root[data-broken="1"] li,
:root[data-broken="1"] dd,
:root[data-broken="1"] td{
  animation:broke 7.3s steps(2) infinite;
}

:root[data-broken="1"] .tools,
:root[data-broken="1"] .tools *,
:root[data-broken="1"] .inner,
:root[data-broken="1"] .inner *,
:root[data-broken="1"] .notice,
:root[data-broken="1"] .notice *,
:root[data-broken="1"] .modal,
:root[data-broken="1"] .modal *,
:root[data-broken="1"] .tip{
  animation:none !important;
  text-shadow:none !important;
  transform:none !important;
}

@keyframes broke{
  0%,88%,100%{transform:none;text-shadow:none;}
  90%{transform:translateX(-1.5px);text-shadow:1.5px 0 var(--crimson),-1.5px 0 #2b6f8f;}
  94%{transform:translateX(1.5px); text-shadow:-1.5px 0 var(--crimson),1.5px 0 #2b6f8f;}
}
@media (prefers-reduced-motion:reduce){
  :root[data-broken="1"] *{animation:none !important;}
}

/* 이 사이트에 있는 것 · 미니게임 뒤의 달걀
   이스터에그가 있다는 것만 알리는 표식. 누르는 것이 아니다. */
.tag .egg{
  display:inline-block;vertical-align:-.16em;
  width:1.02em;height:1.10em;margin-left:.42em;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  image-rendering:pixelated;
  animation:egg-tilt 5.2s ease-in-out infinite;
}
@keyframes egg-tilt{
  0%,84%,100%{transform:rotate(0) translateY(0);}
  88%{transform:rotate(-7deg) translateY(-1px);}
  92%{transform:rotate(7deg)  translateY(-1px);}
  96%{transform:rotate(-3deg) translateY(0);}
}
@media (prefers-reduced-motion:reduce){ .tag .egg{animation:none;} }