/* cosmos.css — SHUNI OFFICIAL common theme
   Geometry: every box has border-radius 0. Circles are the avatar and star marks only.
   Borders are 1px hairlines over glass panels.
   Modes: default DAY (clear sky) / body.dark = NIGHT (deep space)
   Mode value is stored in localStorage('theme') — same key as every other page. */

:root{
  color-scheme:light dark;
  --main:#BFD5EB;
  --point:#3370A8;
  --accent-txt:#1F5285;
  --deep:#7FB4E8;
  --ink:#070B18;
  --bg:#E9F2FB;
  --tx:#14273A;
  --tx-soft:rgba(20,39,58,.78);
  --tx-dim:rgba(20,39,58,.62);
  --line:rgba(31,82,133,.28);
  --line-soft:rgba(31,82,133,.13);
  --glass:rgba(255,255,255,.60);
  --glass-deep:rgba(255,255,255,.86);
  --cover-a:#dceaf8;
  --cover-b:#b9d3ec;
  --font-body:"Noto Sans KR","Pretendard","Apple SD Gothic Neo","Segoe UI",sans-serif;
  --font-serif:"Cormorant Garamond",Georgia,"Noto Serif KR",serif;
  /* size scale — admin theme tab drives these four */
  --fs-display:1;
  --fs-title:1;
  --fs-body:1;
  --fs-label:1;
}
body.dark{
  color-scheme:dark;
  --accent-txt:#BFD5EB;
  --point:#7FB4E8;
  --bg:#070B18;
  --tx:#EAF2FB;
  --tx-soft:rgba(234,242,251,.82);
  --tx-dim:rgba(234,242,251,.60);
  --line:rgba(191,213,235,.34);
  --line-soft:rgba(191,213,235,.15);
  --glass:rgba(17,26,48,.58);
  --glass-deep:rgba(9,14,30,.88);
  --cover-a:#101a33;
  --cover-b:#04060f;
}

*{box-sizing:border-box}
html{
  min-width:320px;min-height:100%;scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
body{
  margin:0;min-width:320px;min-height:100%;
  background:var(--bg);color:var(--tx);
  font-family:var(--font-body);font-size:calc(16px * var(--fs-body));
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent;font-family:inherit}
img{max-width:100%}
.input{width:100%;box-sizing:border-box}

/* Sub page ground: body background layer + fixed. The photo is pre-blurred,
   no CSS filter — a filtered pseudo element hides behind the body background. */
body.sn-sub{
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 78% 8%, rgba(126,180,232,.20), transparent 38%),
    linear-gradient(158deg, rgba(233,242,251,.90), rgba(206,228,247,.94)),
    url("../assets/sky-blur.webp");
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-size:cover,cover,cover;
  background-position:center,center,center 38%;
  background-attachment:fixed,fixed,fixed;
}
body.sn-sub.dark{
  background-color:var(--ink);
  background-image:
    radial-gradient(circle at 22% 78%, rgba(126,180,232,.16), transparent 42%),
    radial-gradient(circle at 76% 10%, rgba(191,213,235,.13), transparent 36%),
    linear-gradient(158deg, rgba(11,18,38,.93), rgba(4,6,15,.98)),
    url("../assets/sky-blur.webp");
  background-size:cover,cover,cover,cover;
  background-position:center,center,center,center 38%;
  background-attachment:fixed,fixed,fixed,fixed;
}

/* Header — identical markup on every page */
.site-header{
  position:fixed;z-index:30;top:0;left:0;width:100%;
  display:grid;grid-template-columns:clamp(96px,8vw,150px) 1fr minmax(232px,auto);
  align-items:stretch;height:clamp(74px,9.5vh,104px);
  border-bottom:1px solid var(--line);
  background:rgba(240,247,253,.82);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
body.dark .site-header{background:rgba(9,15,32,.78)}
/* Inside an iframe a fixed header is positioned against the whole embed box,
   so it cannot follow the reader. Pin it to the document instead. */
body.embed .site-header{position:absolute}
body.embed .chapter{min-height:0}
.monogram{
  display:flex;align-items:center;justify-content:center;height:100%;
  border-right:1px solid var(--line);
  font-family:var(--font-serif);font-size:calc(23px * var(--fs-title));
  font-style:italic;letter-spacing:-.02em;line-height:1;
}
.main-navigation{display:flex;justify-content:center;align-items:center;gap:clamp(13px,2.1vw,38px)}
.main-navigation a{position:relative;padding:12px 0;font-size:calc(15px * var(--fs-label));font-weight:800;letter-spacing:.04em;white-space:nowrap}
.main-navigation a::after{
  content:"";position:absolute;right:100%;bottom:6px;left:0;height:1px;
  background:var(--accent-txt);transition:right 180ms ease;
}
.main-navigation a:hover::after,.main-navigation a:focus-visible::after,
.main-navigation a.on::after{right:0}
.main-navigation a span{
  margin-right:6px;color:var(--tx-dim);
  font-family:var(--font-serif);font-size:calc(12.5px * var(--fs-label));font-style:italic;font-weight:400;
}
.main-navigation a.on span{color:var(--accent-txt)}
.header-side{display:flex;justify-content:center;align-items:center;gap:11px;padding:0 16px;border-left:1px solid var(--line)}
.live-link{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:calc(13px * var(--fs-label));font-weight:900;letter-spacing:.12em}
.live-link i{
  width:6px;height:6px;border-radius:50%;background:var(--point);
  box-shadow:0 0 0 5px rgba(51,112,168,.18);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(51,112,168,0)}}
.mode-toggle{
  display:grid;place-items:center;width:34px;height:34px;
  border:1px solid var(--line);border-radius:50%;
  background:transparent;color:var(--tx);cursor:pointer;font-size:13px;line-height:1;
  transition:background 160ms ease;
}
.mode-toggle:hover{background:rgba(126,180,232,.16)}
.menu-toggle{display:none}

/* the inquiry button belongs on every page, so it lives in the shared header */
.ask-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 12px;border:1px solid var(--line);
  background:transparent;color:var(--tx);cursor:pointer;
  font-family:var(--font-body);font-size:calc(13px * var(--fs-label));
  font-weight:900;letter-spacing:.14em;line-height:1;
  transition:background 160ms ease;
}
.ask-btn{white-space:nowrap}
.ask-btn:hover{background:rgba(126,180,232,.16)}

/* Embed only — opens the page at desktop width in the in-app browser */
.open-full{
  display:none;align-items:center;gap:6px;
  padding:6px 11px;border:1px solid var(--line);
  font-size:calc(13px * var(--fs-label));font-weight:900;letter-spacing:.1em;
}
body.embed .open-full{display:inline-flex}

/* Chapter head — magazine plate */
/* Transparent layout boxes would swallow clicks over the whole column, so the
   characters drifting behind the cards stay reachable in the gaps and margins.
   Only boxes that actually paint something take the click back. */
.chapter,
.chapter > .pf-grid, .chapter > .mn-grid, .chapter .pf-col, .chapter .mn-col,
.chapter > #notice-list, .chapter > #diary-list, .chapter > #dress-body,
.chapter > .vw-grid, .chapter .poster-grid, .chapter .item-grid{pointer-events:none}
.chapter .sn-card, .chapter .chapter-head, .chapter .sn-footer, .chapter .mn-hero,
.chapter .seg, .chapter .sn-tabs, .chapter .sn-toolbar, .chapter .sn-pager,
.chapter .nt-item, .chapter .dy-item, .chapter .viewer-card, .chapter .poster,
.chapter .item-card, .chapter a, .chapter button, .chapter input, .chapter textarea,
.chapter select, .chapter label, .chapter canvas{pointer-events:auto}
.chapter{position:relative;z-index:1;width:100%;max-width:1360px;margin:0 auto;padding:calc(clamp(74px,9.5vh,104px) + 54px) clamp(24px,4vw,56px) 90px}
body:not(.embed) .chapter{min-height:100vh}
.chapter-head{position:relative;max-width:920px;margin-bottom:56px}
.chapter-head .kicker{
  display:flex;align-items:center;gap:13px;margin:0;
  color:var(--accent-txt);font-family:var(--font-serif);
  font-size:calc(14px * var(--fs-label));font-style:italic;letter-spacing:.14em;
}
.chapter-head .kicker::after{content:"";width:42px;height:1px;background:var(--line)}
.chapter-head h1{
  margin:12px 0 0;
  font-family:var(--font-serif);font-weight:400;
  font-size:calc(clamp(52px,7vw,112px) * var(--fs-display));line-height:.88;letter-spacing:-.05em;
}
.chapter-head h1 em{display:block;font-size:.4em;letter-spacing:-.01em;margin-bottom:.35em}
.chapter-head .desc{margin:22px 0 0;max-width:640px;color:var(--tx-soft);font-size:calc(16px * var(--fs-body));line-height:1.75}
.chapter-ghost{
  position:absolute;z-index:-1;top:-.34em;right:-2vw;
  color:transparent;-webkit-text-stroke:1px rgba(31,82,133,.16);
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:calc(clamp(120px,17vw,260px) * var(--fs-display));letter-spacing:-.06em;
  user-select:none;pointer-events:none;white-space:nowrap;
}
body.dark .chapter-ghost{-webkit-text-stroke-color:rgba(191,213,235,.17)}

/* Card system — glass panel + numbered kicker */
.sn-card{
  position:relative;
  border:1px solid var(--line);
  background:var(--glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:28px 30px;
}
body:not(.dark) .sn-card{box-shadow:0 10px 34px rgba(31,82,133,.08)}
.sn-kicker{
  display:flex;align-items:center;gap:10px;margin:0 0 18px;
  color:var(--accent-txt);font-family:var(--font-serif);
  font-size:calc(13.5px * var(--fs-label));font-style:italic;letter-spacing:.12em;
}
.sn-kicker::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.sn-card h2{margin:0 0 16px;font-family:var(--font-serif);font-weight:400;font-size:calc(28px * var(--fs-title));letter-spacing:-.02em}
.sn-label{
  display:block;margin:0 0 6px;
  color:var(--tx-dim);font-size:calc(13px * var(--fs-label));font-weight:800;letter-spacing:.2em;text-transform:uppercase;
}

/* thin info rows */
.sn-rows{display:grid;gap:0}
.sn-row{
  display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:baseline;
  padding:11px 2px;border-bottom:1px solid var(--line-soft);
}
.sn-row:last-child{border-bottom:0}
.sn-row b{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:calc(13.5px * var(--fs-label));letter-spacing:.1em;color:var(--tx-dim)}
.sn-row span{font-size:calc(15px * var(--fs-body));font-weight:600;line-height:1.55}
.sn-row .dd{color:var(--accent-txt);font-style:normal;font-size:calc(13.5px * var(--fs-label));font-family:var(--font-body);font-weight:800}

/* chips */
.sn-chips{display:flex;flex-wrap:wrap;gap:8px}
.sn-chip{
  padding:7px 13px;border:1px solid var(--line);
  color:var(--tx);background:rgba(255,255,255,.42);
  font-size:calc(13.5px * var(--fs-body));font-weight:650;letter-spacing:.02em;
}
body.dark .sn-chip{background:rgba(191,213,235,.07)}
.sn-chip.no{opacity:.7;text-decoration:line-through;text-decoration-color:var(--point);text-decoration-thickness:1px}

/* ability gauge */
.stat-item{display:grid;grid-template-columns:1fr 44px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.stat-item:last-child{border-bottom:0}
.stat-item .sl{font-size:calc(14px * var(--fs-body));font-weight:700;letter-spacing:.02em}
.stat-item .sv{font-family:var(--font-serif);font-style:italic;font-size:calc(15px * var(--fs-body));text-align:right;color:var(--accent-txt)}
.stat-item .bar{grid-column:1/-1;height:3px;background:var(--line-soft);overflow:hidden}
.stat-item .fl{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--main),var(--point));transition:width 900ms cubic-bezier(.2,.75,.25,1)}

/* buttons */
.sn-btn{
  display:inline-flex;align-items:center;gap:26px;
  padding:12px 0;border:0;border-bottom:1px solid var(--line);
  background:none;color:var(--tx);cursor:pointer;
  font-size:calc(13.5px * var(--fs-label));font-weight:900;letter-spacing:.16em;
  transition:gap 180ms ease,opacity 180ms ease;
}
.sn-btn:hover{gap:34px;opacity:.82}
.sn-btn-line{
  display:inline-flex;justify-content:center;align-items:center;gap:8px;
  padding:11px 18px;border:1px solid var(--line);
  background:transparent;color:var(--tx);cursor:pointer;
  font-family:var(--font-body);font-size:calc(13.5px * var(--fs-label));font-weight:800;letter-spacing:.06em;
  transition:background 160ms ease;
}
.sn-btn-line:hover{background:rgba(126,180,232,.14)}
.sn-btn-solid{
  display:inline-flex;justify-content:center;align-items:center;gap:10px;
  padding:13px 26px;border:1px solid var(--point);
  background:var(--point);color:#fff;cursor:pointer;
  font-size:calc(13.5px * var(--fs-label));font-weight:800;letter-spacing:.12em;
  transition:filter 160ms ease;
}
.sn-btn-solid:hover{filter:brightness(1.1)}

/* empty state */
.sn-empty{
  padding:52px 20px;text-align:center;color:var(--tx-dim);
  font-family:var(--font-serif);font-style:italic;font-size:calc(16px * var(--fs-body));letter-spacing:.06em;
}
.sn-empty::before{content:"✦";display:block;margin-bottom:12px;color:var(--accent-txt);font-style:normal;font-size:18px;opacity:.8}

.sn-link{color:var(--accent-txt);text-decoration:underline;text-underline-offset:3px;word-break:break-all}

/* Signal (inquiry) modal */
#snMask{position:fixed;inset:0;z-index:80;background:rgba(6,12,26,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity 220ms ease}
#snMask.on{opacity:1;pointer-events:auto}
#snLetter{
  position:fixed;z-index:81;top:50%;left:50%;transform:translate(-50%,-46%);
  width:min(92vw,460px);padding:34px 34px 30px;
  border:1px solid var(--line);background:var(--glass-deep);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  opacity:0;pointer-events:none;transition:opacity 220ms ease,transform 220ms ease;
}
#snLetter.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
#snLetter .lk{margin:0 0 4px;color:var(--accent-txt);font-family:var(--font-serif);font-style:italic;font-size:calc(13.5px * var(--fs-label));letter-spacing:.14em}
#snLetter h3{margin:0 0 18px;font-family:var(--font-serif);font-weight:400;font-size:calc(28px * var(--fs-title));letter-spacing:-.02em}
#snLetter textarea{
  width:100%;min-height:130px;padding:14px;resize:vertical;
  border:1px solid var(--line);background:rgba(255,255,255,.7);
  color:var(--tx);font-family:var(--font-body);font-size:calc(14.5px * var(--fs-body));line-height:1.7;
}
body.dark #snLetter textarea{background:rgba(191,213,235,.06)}
#snLetter textarea:focus{outline:1px solid var(--point)}
#snLetter .acts{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
#snLetter .ok-msg{display:none;margin:10px 0 0;color:var(--accent-txt);font-family:var(--font-serif);font-style:italic;font-size:calc(15px * var(--fs-body))}
#snLetter.ok .ok-msg{display:block}
#snClose{border:0;background:none;color:var(--tx-dim);cursor:pointer;font-size:calc(13.5px * var(--fs-label));font-weight:800;letter-spacing:.14em}
#snClose:hover{color:var(--tx)}

/* Embedded in a SOOP post the iframe box is thousands of px tall, so a fixed
   modal lands at its centre, far below what the reader can see. Anchor it to
   the click instead. */
body.embed #snMask,body.embed #snLetter{position:absolute}
body.embed #snLetter{top:0;left:50%;transform:translate(-50%,0)}
body.embed #snLetter.on{transform:translate(-50%,0)}

/* Star field · click sparkle · drifting fan characters · cover */
#snStars{position:fixed;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
body.embed #snStars{position:absolute}
#snStars i{
  position:absolute;display:block;
  color:var(--accent-txt);font-style:normal;
  font-size:11px;opacity:0;
  animation:twinkle ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:.72;transform:scale(1)}}
#snStars i.fall{animation:drift linear infinite}
/* vh inside an iframe measures the whole embed box, which the SOOP app makes
   thousands of px tall. Drop the falling stars there and keep the twinkling ones. */
body.embed #snStars i.fall{display:none}
@keyframes drift{
  0%{transform:translate3d(0,-6vh,0) rotate(0);opacity:0}
  9%{opacity:.85}
  100%{transform:translate3d(3vw,108vh,0) rotate(220deg);opacity:.12}
}

/* fan characters drifting across the sky */
/* the fan characters drift behind the glass cards: over them they would sit on
   top of the text and make it unreadable mid-flight */
#snMongs{position:fixed;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
body.embed #snMongs{position:absolute}
.sn-mong{
  position:absolute;width:var(--mw,58px);height:var(--mw,58px);
  pointer-events:auto;cursor:pointer;
  background:center/contain no-repeat;
  /* they pass behind headings that sit on no card, so keep them soft */
  opacity:.62;
  filter:drop-shadow(0 4px 14px rgba(31,82,133,.28));
  animation:mongFloat linear infinite;
  transition:transform 180ms ease;
}
body.dark .sn-mong{filter:drop-shadow(0 0 12px rgba(191,213,235,.4))}
.sn-mong:hover{scale:1.12;opacity:1}
.sn-mong.bump{animation:mongFloat linear infinite,mongBump 560ms cubic-bezier(.2,.75,.25,1)}
@keyframes mongFloat{
  0%{transform:translate3d(-14vw,0,0)}
  50%{transform:translate3d(44vw,var(--my,-26px),0)}
  100%{transform:translate3d(112vw,0,0)}
}
@keyframes mongBump{30%{scale:1.22}60%{scale:.94}100%{scale:1}}
.sn-bubble{
  position:absolute;z-index:3;padding:8px 13px;
  border:1px solid var(--line);background:var(--glass-deep);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--tx);font-size:calc(13.5px * var(--fs-body));font-weight:700;white-space:nowrap;
  transform:translate(-50%,-100%);pointer-events:none;
  animation:bubble 1700ms ease forwards;
}
@keyframes bubble{
  0%{opacity:0;translate:0 8px}
  12%{opacity:1;translate:0 0}
  76%{opacity:1;translate:0 0}
  100%{opacity:0;translate:0 -8px}
}

#snFx{position:fixed;inset:0;z-index:90;pointer-events:none}
body.embed #snFx{position:absolute}
.sn-pop{position:absolute;color:var(--accent-txt);font-size:14px;animation:snpop 850ms ease-out forwards}
@keyframes snpop{
  0%{transform:translate(-50%,-50%) scale(.4);opacity:1}
  100%{transform:translate(-50%,-140%) scale(1.25);opacity:0}
}

#snCover{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--cover-a),var(--cover-b));
  opacity:0;pointer-events:none;transition:opacity 260ms ease;
}
#snCover.on{opacity:1;pointer-events:auto}
body.embed #snCover{position:absolute}
#snCover .in{display:grid;justify-items:center;gap:14px;color:var(--tx)}
#snCover .in .mono{font-family:var(--font-serif);font-style:italic;font-size:46px;letter-spacing:-.05em}
#snCover .in .mono b{color:var(--point);font-weight:400}
#snCover .in .cap{font-size:12px;font-weight:800;letter-spacing:.3em;color:var(--tx-dim)}
#snCover .in i{position:relative;width:56px;height:1px;background:var(--line);overflow:hidden}
#snCover .in i::after{content:"";position:absolute;inset:0;background:var(--point);transform:translateX(-100%);animation:snload 1s ease infinite}
@keyframes snload{to{transform:translateX(100%)}}

/* FOUC gate: hold the page until the DB value lands, so the default text does
   not flash and get replaced. ready is set in the loader finally + 1600ms fallback. */
.chapter{transition:opacity 260ms ease}
body:not(.dataready) .chapter{opacity:0}

.rv{opacity:0;transform:translateY(16px);transition:opacity 640ms ease,transform 640ms cubic-bezier(.2,.75,.25,1)}
body.ready .rv.in{opacity:1;transform:none}
body:not(.ready) .rv{transition-delay:9999s}

/* footer strip */
.sn-footer{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-top:70px;padding-top:20px;border-top:1px solid var(--line-soft);
  color:var(--tx-dim);font-size:calc(12px * var(--fs-label));letter-spacing:.14em;
}
.sn-footer b{color:var(--tx);font-size:calc(12px * var(--fs-label))}

a:focus-visible,button:focus-visible{outline:2px solid var(--point);outline-offset:4px}

/* Responsive — breakpoints stay under the SOOP embed width (~1000-1100px) */
/* 960~1140px is the SOOP embed band: the nav must not touch the buttons there */
@media (max-width:1140px){
  .main-navigation{gap:clamp(11px,1.5vw,22px)}
  .main-navigation a{letter-spacing:.02em}
}
@media (max-width:1100px){
  .site-header{grid-template-columns:clamp(84px,12vw,120px) 1fr auto}
  .header-side{padding:0 14px;gap:10px}
  .monogram{font-size:calc(20px * var(--fs-title))}
}
/* Nine links no longer fit with their numbers inside a 1000px embed. The
   numbers are decorative, so they go first and the labels keep their gap. */
@media (max-width:1040px){
  .main-navigation{gap:clamp(10px,1.4vw,18px)}
  .main-navigation a span{display:none}
}
@media (max-width:959px){
  .site-header{grid-template-columns:76px 1fr auto}
  .monogram{font-size:calc(17px * var(--fs-title))}
  /* Drop-down anchored to the nav. A full screen sheet collapses to 56px in
     Chrome (the header's backdrop-filter becomes the containing block) and
     spills across the whole iframe in the SOOP app. */
  .main-navigation{
    position:absolute;z-index:40;top:100%;right:0;left:0;bottom:auto;
    display:grid;gap:0;padding:15px 6vw 24px;
    border-bottom:1px solid var(--line);
    background:rgba(240,247,253,.98);
    visibility:hidden;opacity:0;pointer-events:none;
    transition:opacity 200ms ease,visibility 200ms ease;
  }
  body.dark .main-navigation{background:rgba(8,13,28,.98)}
  .main-navigation.is-open{visibility:visible;opacity:1;pointer-events:auto}
  .main-navigation a{padding:15px 0;border-bottom:1px solid var(--line-soft);font-size:calc(14px * var(--fs-body))}
  .main-navigation a span{display:inline}
  .header-side{gap:8px;padding:0 10px;border-left:0}
  .ask-btn{padding:7px 9px}
  .ask-btn span{display:none}
  .live-link{font-size:calc(12px * var(--fs-label))}
  .menu-toggle{
    align-self:center;display:grid;gap:6px;width:44px;height:44px;margin-right:14px;
    padding:15px 11px;border:1px solid var(--line);border-radius:50%;
    background:transparent;color:var(--tx);cursor:pointer;
  }
  .menu-toggle span{display:block;width:100%;height:1px;background:currentColor;transition:transform 180ms ease}
  .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .chapter{padding:calc(clamp(74px,9.5vh,104px) + 40px) 6vw 70px}
  .sn-card{padding:22px 20px}
  .sn-row{grid-template-columns:96px 1fr;gap:10px}
  .chapter-ghost{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:.01ms !important}
  .rv{opacity:1 !important;transform:none !important}
}

/* Shared category furniture — notice, schedule, song, dress, work, diary
   Layout language stays the profile's: hairline borders, glass panels,
   radius 0, serif italic micro labels. */
.sn-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 18px}
.sn-toolbar .grow{flex:1;min-width:120px}
.sn-count{color:var(--tx-dim);font-family:var(--font-serif);font-style:italic;font-size:calc(14px * var(--fs-label));letter-spacing:.06em}

.input{
  width:100%;box-sizing:border-box;padding:11px 13px;
  border:1px solid var(--line);background:rgba(255,255,255,.62);
  color:var(--tx);font-family:var(--font-body);font-size:calc(14.5px * var(--fs-body));
}
body.dark .input{background:rgba(191,213,235,.06)}
.input:focus{outline:1px solid var(--point)}
.input-label{display:block;margin:0 0 6px;color:var(--tx-dim);font-size:calc(13px * var(--fs-label));font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.form-field{margin:0 0 14px}
.hint{margin:6px 0 0;color:var(--tx-dim);font-size:calc(13.5px * var(--fs-label));line-height:1.6}

/* tab / segment rails */
.sn-tabs{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);margin:0 0 18px}
.sn-tab{
  flex:1;min-width:84px;padding:12px 10px;border:0;border-right:1px solid var(--line-soft);
  background:transparent;color:var(--tx-dim);cursor:pointer;
  font-family:var(--font-body);font-size:calc(13px * var(--fs-label));font-weight:800;letter-spacing:.1em;
  transition:background 160ms ease,color 160ms ease;
}
.sn-tab:last-child{border-right:0}
.sn-tab:hover{background:rgba(126,180,232,.12);color:var(--tx)}
/* the mode segment above is the solid one; category tabs stay quiet so the two
   axes do not read as the same control */
.sn-tab.active{background:rgba(126,180,232,.16);color:var(--accent-txt);box-shadow:inset 0 -2px 0 var(--point)}
.sn-tab .cnt{margin-left:6px;font-family:var(--font-serif);font-style:italic;font-weight:400;opacity:.8}

/* pagination */
.sn-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:26px}
.sn-pager button{
  min-width:34px;padding:8px 10px;border:1px solid var(--line);
  background:transparent;color:var(--tx-dim);cursor:pointer;
  font-family:var(--font-serif);font-style:italic;font-size:calc(14px * var(--fs-body));
}
.sn-pager button:hover{background:rgba(126,180,232,.14);color:var(--tx)}
.sn-pager button.active{background:var(--point);border-color:var(--point);color:#fff}

/* click-anchored overlay (never fixed — an embed box is thousands of px tall) */
.ov{
  position:absolute;left:0;right:0;z-index:500;display:none;
  justify-content:center;align-items:flex-start;padding:16px;
}
.ov.show{display:flex}
.ov-back{position:absolute;inset:0;background:rgba(6,12,26,.42)}
.ov-box{
  position:relative;width:min(92vw,470px);padding:26px 26px 22px;
  border:1px solid var(--line);background:var(--glass-deep);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.ov-x{
  position:absolute;right:12px;top:12px;width:30px;height:30px;
  border:1px solid var(--line);background:transparent;color:var(--tx);
  cursor:pointer;font-size:13px;line-height:1;
}
.ov-x:hover{background:rgba(126,180,232,.16)}

/* full-bleed lightbox */
.lb{position:fixed;inset:0;z-index:520;display:none;place-items:center;padding:24px;background:rgba(6,12,26,.78)}
.lb.open{display:grid}
body.embed .lb{position:absolute;height:100%}
.lb figure{margin:0;display:grid;gap:12px;justify-items:center;max-width:min(88vw,720px)}
.lb img{max-height:72vh;border:1px solid var(--line)}
body.embed .lb img{max-height:560px}
.lb .cap{text-align:center;color:#EAF2FB}
.lb .cap b{display:block;font-family:var(--font-serif);font-size:calc(21px * var(--fs-title));font-weight:400}
.lb .cap span{display:block;margin-top:5px;font-size:calc(14px * var(--fs-body));opacity:.78}

/* toast */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:600;
  padding:12px 20px;border:1px solid var(--line);background:var(--glass-deep);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--tx);font-size:calc(14px * var(--fs-body));font-weight:700;
  opacity:0;pointer-events:none;transition:opacity 250ms ease;
}
.toast.show{opacity:1}
body.embed .toast{position:absolute;bottom:auto}

/* hot-linked post images */
.post-img{display:block;width:100%;margin:0 0 12px;border:1px solid var(--line-soft)}

/* 8 schedule colours — keys are fixed, values follow the sky palette */
.c-green {--ec:#2f8f6e;--eb:rgba(47,143,110,.16)}
.c-pink  {--ec:#b8557f;--eb:rgba(184,85,127,.16)}
.c-yellow{--ec:#9a7a17;--eb:rgba(154,122,23,.18)}
.c-orange{--ec:#b06526;--eb:rgba(176,101,38,.16)}
.c-blue  {--ec:#2f6ea8;--eb:rgba(47,110,168,.16)}
.c-purple{--ec:#6b57ad;--eb:rgba(107,87,173,.16)}
.c-red   {--ec:#b34141;--eb:rgba(179,65,65,.16)}
.c-gray  {--ec:#5c6b7a;--eb:rgba(92,107,122,.16)}
body.dark .c-green {--ec:#7fd8b6;--eb:rgba(127,216,182,.16)}
body.dark .c-pink  {--ec:#f0a3c2;--eb:rgba(240,163,194,.16)}
body.dark .c-yellow{--ec:#e8cf7a;--eb:rgba(232,207,122,.16)}
body.dark .c-orange{--ec:#f0b183;--eb:rgba(240,177,131,.16)}
body.dark .c-blue  {--ec:#9cc6ee;--eb:rgba(156,198,238,.18)}
body.dark .c-purple{--ec:#bcaef0;--eb:rgba(188,174,240,.16)}
body.dark .c-red   {--ec:#f09999;--eb:rgba(240,153,153,.16)}
body.dark .c-gray  {--ec:#b0bcc8;--eb:rgba(176,188,200,.16)}