:root{
  --bg:#080706;
  --stone:#15110d;
  --stone2:#241b12;
  --gold:#d9a84f;
  --gold2:#ffe8a0;
  --cream:#fff6de;
  --ink:#261c11;
  --modern:#e5d5b9;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--cream);
  background:
    radial-gradient(circle at 50% 0%,rgba(151,101,35,.17),transparent 42rem),
    linear-gradient(180deg,#080706,#0d0a07 55%,#17110b);
  font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.site{width:min(100%,1220px);margin:0 auto;padding:14px 10px 90px}
.seal-gate{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;
  padding:18px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 46%,rgba(208,150,60,.22),transparent 22rem),
    linear-gradient(rgba(5,4,3,.86),rgba(5,4,3,.96)),
    repeating-linear-gradient(7deg,rgba(255,255,255,.02) 0 1px,transparent 1px 7px);
  transition:transform .9s cubic-bezier(.7,0,.25,1),opacity .45s ease,visibility .45s;
}
.seal-gate.unsealed{transform:translateY(-105%)}
.seal-gate.hidden{visibility:hidden;opacity:0;pointer-events:none}
.dust{position:absolute;inset:-40%;pointer-events:none;opacity:.45}
.dust::before,.dust::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle,rgba(255,220,143,.9) 0 1px,transparent 2px),
    radial-gradient(circle,rgba(255,220,143,.45) 0 1px,transparent 2px);
  background-size:97px 83px,163px 139px;
}
.dust-a{animation:drift 18s linear infinite}
.dust-b{animation:drift 29s linear infinite reverse;transform:rotate(20deg)}
.stone-panel{
  position:relative;
  width:min(94vw,650px);
  padding:clamp(26px,5vw,48px);
  text-align:center;
  border:1px solid rgba(241,199,111,.34);
  background:
    linear-gradient(rgba(30,23,16,.92),rgba(14,11,8,.96)),
    repeating-linear-gradient(93deg,rgba(255,255,255,.025) 0 1px,transparent 1px 6px);
  box-shadow:
    0 40px 120px rgba(0,0,0,.72),
    inset 0 0 0 6px rgba(217,168,79,.045),
    inset 0 0 80px rgba(0,0,0,.7);
  clip-path:polygon(4% 0,96% 0,100% 4%,100% 96%,96% 100%,4% 100%,0 96%,0 4%);
  transition:opacity .55s ease,transform .85s ease,filter .85s ease;
}
.stone-panel::before{
  content:"";position:absolute;inset:12px;
  border:1px solid rgba(236,189,96,.22);
  clip-path:inherit;pointer-events:none
}
.stone-panel.breaking{animation:stoneShake .18s linear 4}
.stone-panel.breaking .crack-lines i{opacity:1;transform:scaleY(1)}
.stone-panel.gone{opacity:0;transform:scale(1.12);filter:brightness(2.7) blur(10px);pointer-events:none}
.archive-label{
  margin:0 0 12px;color:#b88d46;font-size:11px;font-weight:900;letter-spacing:.22em
}
.stone-panel h1{
  margin:0;color:#ffe8a1;font-family:"NanumMyeongjo","Batang",serif;
  font-size:clamp(35px,7vw,66px);letter-spacing:-.04em;text-shadow:0 0 24px rgba(224,169,75,.3)
}
.seal-copy{margin:15px 0 24px;color:#d1c2a5;line-height:1.8;font-size:14px}
.eye-seal{
  --pulse:1;
  position:relative;display:grid;place-items:center;
  width:clamp(180px,44vw,260px);aspect-ratio:1;
  margin:0 auto;border:0;border-radius:50%;
  color:var(--gold);background:transparent;cursor:pointer;touch-action:none;
  transform:scale(var(--pulse));transition:filter .2s ease
}
.eye-seal::before,.eye-seal::after{
  content:"";position:absolute;border-radius:50%;
  border:1px solid rgba(228,183,87,.28);
  box-shadow:0 0 34px rgba(220,164,72,.12),inset 0 0 24px rgba(220,164,72,.08)
}
.eye-seal::before{inset:16px}
.eye-seal::after{inset:34px;border-style:dashed;animation:rotate 12s linear infinite}
.eye-seal svg{width:66%;overflow:visible;filter:drop-shadow(0 0 16px rgba(230,174,75,.45))}
.eye-outline{fill:none;stroke:#e2b45c;stroke-width:5}
.iris{fill:url(#irisGlow);stroke:#ffe5a0;stroke-width:3}
.pupil{fill:#120c06}
.eye-mark{fill:none;stroke:#b9873c;stroke-width:4;stroke-linecap:round}
.eye-seal.holding{filter:brightness(1.3)}
.eye-seal.awakened svg{animation:eyeAwaken .8s ease both}
.hold-ring{
  position:absolute;inset:2px;border-radius:50%;
  background:conic-gradient(#ffe9a2 var(--progress,0deg),rgba(217,168,79,.12) 0);
  -webkit-mask:radial-gradient(transparent 65%,#000 66%);
  mask:radial-gradient(transparent 65%,#000 66%);
  filter:drop-shadow(0 0 10px rgba(255,215,120,.7))
}
.hold-guide{margin:8px 0 0;color:#f6d992;font-size:14px;font-weight:900}
.fallback-open{
  margin-top:14px;padding:8px 12px;border:0;border-bottom:1px solid rgba(220,177,88,.35);
  color:#9e8967;background:transparent;font-size:11px;cursor:pointer
}
.crack-lines{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.crack-lines i{
  position:absolute;left:50%;top:50%;width:2px;height:52%;
  opacity:0;transform-origin:top;transform:scaleY(0);
  background:linear-gradient(#fff6c4,#d29030,transparent);
  box-shadow:0 0 12px #f0b55a;transition:.45s
}
.crack-lines i:nth-child(1){rotate:16deg}
.crack-lines i:nth-child(2){rotate:72deg;height:47%}
.crack-lines i:nth-child(3){rotate:133deg;height:58%}
.crack-lines i:nth-child(4){rotate:211deg;height:43%}
.crack-lines i:nth-child(5){rotate:288deg;height:55%}
.riddle-panel{
  position:absolute;
  width:min(92vw,650px);padding:clamp(26px,6vw,52px);
  text-align:center;opacity:0;transform:translateY(35px) scale(.96);pointer-events:none;
  border:1px solid rgba(231,190,100,.42);
  background:linear-gradient(145deg,rgba(29,21,13,.97),rgba(8,7,5,.98));
  box-shadow:0 35px 100px rgba(0,0,0,.75),inset 0 0 60px rgba(203,143,50,.08);
  transition:.7s ease
}
.riddle-panel.show{opacity:1;transform:none;pointer-events:auto}
.riddle-panel>span{color:#c99a4a;font-size:11px;font-weight:900;letter-spacing:.24em}
.riddle-panel h2{margin:13px 0;color:#ffebb2;font-family:"NanumMyeongjo","Batang",serif;font-size:clamp(26px,5vw,44px)}
.riddle-panel p{color:#cfc0a4}
.riddle-panel blockquote{
  margin:24px auto;padding:20px;border-block:1px solid rgba(226,179,83,.3);
  color:#f4e8cd;font-family:"NanumMyeongjo","Batang",serif;font-size:clamp(20px,4vw,31px);line-height:1.65
}
.riddle-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.riddle-options button,.dessert-options button{
  min-height:56px;border:1px solid rgba(223,180,90,.45);border-radius:4px;
  color:#f5deb0;background:rgba(90,61,27,.16);font-weight:900;cursor:pointer;transition:.25s
}
.riddle-options button:hover,.dessert-options button:hover{transform:translateY(-2px);background:rgba(167,111,41,.28)}
.riddle-options button.correct,.dessert-options button.correct{color:#181006;background:#f3d27f;border-color:#fff2b2}
.riddle-options button.wrong,.dessert-options button.wrong{color:#bba98e;background:#2b2118}
.riddle-result{min-height:28px;margin-bottom:0!important;opacity:0;color:#f6d782!important;font-weight:900;transition:.4s}
.riddle-result.show{opacity:1}
.hero{
  position:relative;overflow:hidden;border:1px solid rgba(224,181,91,.35);
  background:#17100a;box-shadow:0 26px 80px rgba(0,0,0,.52)
}
.hero img,.profile-card,.comic-cut{display:block;width:100%;height:auto}
.hero-shine{
  position:absolute;inset:-80% -20%;
  background:linear-gradient(115deg,transparent 44%,rgba(255,241,183,.18) 49%,transparent 54%);
  transform:translateX(-80%);animation:heroShine 7s ease-in-out infinite
}
.quick-nav{
  position:sticky;top:0;z-index:30;
  display:flex;justify-content:center;gap:8px;flex-wrap:wrap;
  margin:14px 0 28px;padding:10px;
  border:1px solid rgba(218,168,79,.28);
  background:rgba(13,10,7,.88);backdrop-filter:blur(12px);
  box-shadow:0 14px 40px rgba(0,0,0,.3)
}
.quick-nav a{
  padding:10px 14px;border:1px solid rgba(219,174,86,.25);
  color:#e9ca88;background:rgba(98,63,24,.13);font-size:13px;font-weight:900
}
.judgment-record,.chapter-card,.dessert-trial,.final-cta{
  border:1px solid rgba(224,181,91,.3);
  background:
    radial-gradient(circle at 90% 0%,rgba(210,151,58,.12),transparent 28rem),
    linear-gradient(145deg,rgba(31,23,15,.96),rgba(12,9,6,.98));
  box-shadow:0 24px 70px rgba(0,0,0,.42),inset 0 0 50px rgba(211,149,52,.05)
}
.judgment-record{position:relative;margin-bottom:32px;padding:clamp(22px,5vw,42px)}
.record-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.record-heading span,.chapter-card>span,.dessert-trial>span,.final-copy>span{
  color:#b98a42;font-size:11px;font-weight:900;letter-spacing:.19em
}
.record-heading h2,.section-title h2,.chapter-card h2,.dessert-trial h2,.final-copy h2{
  margin:5px 0 0;color:#ffe8aa;font-family:"NanumMyeongjo","Batang",serif;
  font-size:clamp(28px,5vw,50px);letter-spacing:-.04em
}
.record-eye{
  width:56px;height:56px;border:1px solid rgba(224,177,79,.45);border-radius:50%;
  color:#f5cb6d;background:rgba(102,66,24,.2);font-size:28px;cursor:pointer;
  box-shadow:0 0 20px rgba(223,169,75,.18)
}
.record-eye.blink{animation:blink .55s ease}
.record-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.record-grid div{padding:14px;border:1px solid rgba(222,178,89,.18);background:rgba(255,244,215,.035)}
.record-grid span{display:block;color:#9c8866;font-size:11px;font-weight:900}
.record-grid strong{display:block;margin-top:5px;color:#f4dfb5}
.record-quote{
  margin:18px 0 0;padding:16px;border-left:3px solid #c89443;
  color:#dfc699;background:rgba(190,130,43,.07);font-family:"NanumMyeongjo","Batang",serif
}
.section{margin-top:34px}
.section-title{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.section-title>span{
  display:grid;place-items:center;width:54px;height:54px;
  border:1px solid rgba(224,179,85,.5);color:#f2cf7d;background:#1e160e;
  font-family:"Times New Roman",serif;font-size:24px
}
.section-title p{margin:0;color:#a17d45;font-size:11px;font-weight:900;letter-spacing:.18em}
.profile-card{border:1px solid rgba(224,181,91,.32);box-shadow:0 28px 80px rgba(0,0,0,.44)}
.chapter-card{
  width:min(100%,900px);margin:0 auto 18px;padding:clamp(25px,5vw,46px);text-align:center
}
.chapter-card p{margin:13px 0 0;color:#b8a88e;line-height:1.7}
.judgment-state{
  position:sticky;top:74px;z-index:20;width:max-content;max-width:calc(100% - 20px);
  margin:0 10px 10px auto;padding:10px 14px;
  border:1px solid rgba(222,177,84,.38);color:#ad966f;background:rgba(14,10,7,.9);
  backdrop-filter:blur(9px);box-shadow:0 10px 28px rgba(0,0,0,.35);font-size:12px;font-weight:900
}
.judgment-state strong{color:#f3d480}
.judgment-state.modern{border-color:rgba(210,191,156,.4);background:rgba(41,34,26,.9)}
.comic-viewer{width:min(100%,1100px);margin:0 auto}
.comic-cut{margin:0 auto 8px;background:#080706;box-shadow:0 12px 34px rgba(0,0,0,.34)}
.modern-cut{box-shadow:0 12px 38px rgba(82,55,28,.34)}
.era-divider{
  margin:28px 0;padding:clamp(28px,6vw,60px);text-align:center;
  border-block:1px solid rgba(223,182,94,.3);
  background:
    radial-gradient(circle,rgba(209,157,68,.13),transparent 60%),
    linear-gradient(90deg,transparent,rgba(105,77,43,.14),transparent)
}
.era-divider span{color:#a98a59;font-size:10px;font-weight:900;letter-spacing:.2em}
.era-divider h3{margin:8px 0;color:#f0d69e;font-family:"NanumMyeongjo","Batang",serif;font-size:clamp(34px,7vw,64px)}
.era-divider p{margin:0;color:#baa98d}
.dessert-trial{
  position:relative;width:min(100%,900px);margin:38px auto 0;padding:clamp(28px,6vw,58px);text-align:center
}
.trial-emblem{margin:0 auto 10px;color:#ffd97f;font-size:30px;text-shadow:0 0 22px #b77727}
.dessert-trial p{color:#c8b89d}
.dessert-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.dessert-result{min-height:28px;margin:20px 0 0!important;color:#b9aa90!important;font-weight:900}
.dessert-result.success{color:#ffe39b!important}
.dessert-result.fail{color:#c7a987!important}
.final-cta{width:min(100%,980px);margin:38px auto 0;padding:clamp(28px,6vw,58px)}
.final-copy{text-align:center}
.final-copy p{color:#bbaa8e}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.cta-button{
  display:flex;flex-direction:column;justify-content:center;min-height:112px;padding:22px;
  border:1px solid rgba(233,195,111,.48);transition:.25s;box-shadow:0 16px 35px rgba(0,0,0,.22)
}
.cta-button:hover{transform:translateY(-4px);filter:brightness(1.08)}
.cta-button small{color:#c9a85f;font-size:10px;font-weight:900;letter-spacing:.16em}
.cta-button strong{margin-top:7px;color:#fff0c5;font-size:clamp(18px,3vw,28px)}
.cta-button.character{background:linear-gradient(135deg,#2c2116,#4d3318)}
.cta-button.unsafe{background:linear-gradient(135deg,#8a5b1e,#2f1c0b)}
footer{margin-top:34px;text-align:center;color:#76644c;font-size:10px;letter-spacing:.18em}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s ease}
.reveal.visible{opacity:1;transform:none}
@keyframes drift{to{transform:translate3d(18%,12%,0) rotate(8deg)}}
@keyframes rotate{to{transform:rotate(360deg)}}
@keyframes stoneShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes eyeAwaken{0%{transform:scaleY(.1);filter:brightness(1)}55%{transform:scaleY(1.2);filter:brightness(2.4)}100%{transform:scaleY(1);filter:brightness(1.5)}}
@keyframes heroShine{0%,65%{transform:translateX(-80%)}90%,100%{transform:translateX(80%)}}
@keyframes blink{0%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}
@media(max-width:760px){
  .site{padding:0 0 70px}
  .hero,.profile-card{border-left:0;border-right:0}
  .quick-nav{position:static;margin:10px 8px 22px}
  .judgment-record{margin:0 10px 28px}
  .record-grid{grid-template-columns:1fr 1fr}
  .section-title{padding:0 12px}
  .comic-cut{margin-bottom:0}
  .judgment-state{top:10px}
  .dessert-trial,.final-cta{border-left:0;border-right:0}
}
@media(max-width:560px){
  .stone-panel{padding:24px 18px}
  .riddle-options,.dessert-options,.cta-grid{grid-template-columns:1fr}
  .record-heading{align-items:center}
  .record-eye{width:48px;height:48px}
  .record-grid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}