:root{
  --bg0:#0B1020;
  --bg1:#1A1440;
  --bg2:#2A0F5A;

  --text:#E6E8EF;
  --muted: rgba(230,232,239,.70);

  --gold:#D6A23A;
  --gold2:#FFD24A;
  --teal:#28B7A6;
  --tealLine: rgba(80,210,210,.55);

  --glass: rgba(120,150,175,.22);
  --banner:#2A1A33;

  --shadow: 0 14px 40px rgba(0,0,0,.35);
  --shadow2: 0 22px 70px rgba(0,0,0,.45);

  --r: 18px;
  --rp: 999px;

  --sans: "Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, Apple SD Gothic Neo, sans-serif;
  --serif: "Noto Serif KR", serif;

  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: var(--sans);
  color: var(--text);
  min-height: 100svh;
  background:
    radial-gradient(900px 600px at 50% 15%, rgba(126,134,232,.18), transparent 58%),
    radial-gradient(900px 620px at 50% 55%, rgba(255,210,74,.07), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 45%, var(--bg2));
  padding-bottom: calc(36px + var(--safe-bottom));
}

.skip{position:absolute;left:-9999px;top:10px;background:#000;color:#fff;padding:10px 12px;border-radius:12px;z-index:999}
.skip:focus{left:12px;outline:3px solid var(--gold2)}

.topbar{
  position:sticky;top:0;z-index:50;
  height: 58px;
  padding-top: var(--safe-top);
  display:flex;align-items:center;gap:12px;
  padding-left: 12px;
  padding-right: 12px;
  background: rgba(10,12,24,.55);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.icon-btn{
  width:42px;height:42px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(18,23,66,.45);
  color: var(--text);
  font-weight: 900;
  cursor:pointer;
}

.topbar-title{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-title .hanja{font-weight:900;letter-spacing:-.02em}
.topbar-title .sep{opacity:.55}
.topbar-title .korean{color: var(--muted);font-weight:800;font-size:12px}

.lang{
  border-radius: var(--rp);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(18,23,66,.45);
  color: var(--text);
  font-weight: 900;
  padding: 10px 12px;
}

.main{position:relative}

.bg-motif{
  position: absolute;
  inset: 0;
  pointer-events:none;
  opacity: .65;
  background-image: url('assets/bg-motif.svg');
  background-size: 1200px auto;
  background-repeat:no-repeat;
  background-position: 50% 0%;
  mix-blend-mode: screen;
}

.wrap{max-width: 980px; margin: 22px auto; padding: 0 14px; position:relative}

.banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding: 16px 16px;
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(42,26,51,.95), rgba(42,26,51,.75));
  border: 1px solid rgba(214,162,58,.85);
  box-shadow: var(--shadow);
}

.wheel{width:44px;height:44px;opacity:.95}
.banner-text{flex:1;text-align:center}
.banner-title{color: var(--gold2);font-weight:900;letter-spacing:-.02em}
.banner-sub{margin-top:6px;color: var(--teal);font-weight:800;font-size:13px}

.glass{
  margin-top: 14px;
  border-radius: calc(var(--r) + 4px);
  background: linear-gradient(180deg, rgba(120,150,175,.22), rgba(120,150,175,.14));
  border: 1px solid var(--tealLine);
  box-shadow: var(--shadow2);
  padding: 18px;
  position: relative;
}

.ornament{display:flex;align-items:center;justify-content:center;gap:10px;margin: 2px 0 14px}
.ornament img{width:26px;height:26px;opacity:.95}
.orn-line{width:76px;height:1px;background: rgba(255,255,255,.25)}

.hero{display:grid;grid-template-columns: 1.2fr .8fr;gap:14px;align-items:start}

.h1{
  margin:0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing:-.03em;
}

.p{margin:10px 0 0;color: var(--muted);line-height:1.7}
.p b{color: var(--gold2)}

.portrait{margin:0;border-radius: var(--r);overflow:hidden;border:1px solid rgba(214,162,58,.55);background: rgba(0,0,0,.18)}
.portrait img{display:block;width:100%;height:auto;aspect-ratio: 4/5;object-fit:cover;transform: scale(1.02)}
.portrait figcaption{padding:10px 12px;color: rgba(230,232,239,.78);font-size:12px;border-top:1px solid rgba(255,255,255,.10)}

.stanza{margin-top: 16px;text-align:center}
.line{margin:0}
.line + .line{margin-top:8px}
.line.gold{color: var(--gold2);font-weight:900;letter-spacing:-.02em}
.line.ko{color: var(--muted);line-height:1.7}

.mini{margin-top: 14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}

.mini-box{
  border-radius: var(--r);
  background: rgba(10,12,24,.26);
  border: 1px solid rgba(255,255,255,.12);
  padding: 14px;
}

.label{color: rgba(230,232,239,.82);font-weight:900;font-size:12px}

.mantra{margin-top:10px;font-family:var(--serif);font-weight:700;color: var(--gold2);line-height:1.6}
.roman{margin-top:8px;color: var(--muted);font-size:12px;line-height:1.6}

.counter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.count{font-weight:900;letter-spacing:-.02em}

.btn{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(18,23,66,.40);
  color: var(--text);
  font-weight: 900;
  padding: 10px 12px;
  cursor:pointer;
}
.btn.primary{border-color: rgba(214,162,58,.55);color: var(--gold2)}
.btn:active{transform: translateY(1px)}

.bar{margin-top: 10px;height:10px;border-radius: var(--rp);background: rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.fill{height:100%;width:0%;background: linear-gradient(90deg, rgba(214,162,58,.95), rgba(40,183,166,.90));transition: width .25s ease}

.actions{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}

.dedication{margin-top:10px;font-family:var(--serif);font-weight:700;line-height:1.6;color: rgba(230,232,239,.92);white-space:pre-line}

.hint{margin-top:10px;color: var(--muted);font-size:12px;line-height:1.6}

.divider{height:1px;background: rgba(255,255,255,.12);margin: 14px 0}

.footer{margin-top: 14px}
.footer-card{
  border-radius: calc(var(--r) + 4px);
  background: rgba(10,12,24,.34);
  border: 1px solid rgba(255,255,255,.12);
  padding: 16px;
  box-shadow: var(--shadow);
}
.footer-title{color: var(--gold2);font-weight:900;letter-spacing:-.02em}
.footer-sub{margin-top:8px;color: var(--teal);font-weight:800;font-size:13px}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.k{font-weight:900;color: rgba(230,232,239,.92)}
.txt{margin-top:8px;color: var(--muted);white-space:pre-line;line-height:1.7}
.small{margin-top:10px;color: rgba(230,232,239,.72);font-size:12px;line-height:1.6}
.copyright{margin-top:14px;color: rgba(230,232,239,.62);font-size:12px;border-top:1px solid rgba(255,255,255,.10);padding-top:10px}

.toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(18px + var(--safe-bottom));
  background: rgba(18,23,66,.92);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  padding: 10px 12px;
  border-radius: var(--rp);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  max-width: min(720px, calc(100vw - 24px));
  text-align:center;
}
.toast.show{opacity:1;transform: translateX(-50%) translateY(-2px)}

[data-reveal]{opacity:0;transform: translateY(10px);transition: opacity .55s ease, transform .55s ease}
[data-reveal].in{opacity:1;transform:none}

@media (max-width: 860px){
  .hero{grid-template-columns:1fr;}
  .portrait img{aspect-ratio: 16/10}
  .mini{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-reveal]{transition:none}
  .fill{transition:none}
}