/* 별자리 이야기(/stars, /stars/<slug>) — 2026-09-28 캔버스 시안 Story*. 휴대폰 먼저.
 * 밤하늘 바탕(글자 대비 4.5:1 이상), 제목은 자체 호스팅 마루 부리(Sangcheon Buri — site.css). */
.sy {
  --sy-bg: #0a1224; --sy-card: rgba(10, 18, 36, 0.72); --sy-gold: #ebcb99; --sy-ink: #1b2744;
  --sy-txt: #fffdf8; --sy-body: #d9e0ea; --sy-muted: #b4c0d2; --sy-line: rgba(235, 203, 153, 0.35);
  background: linear-gradient(180deg, #070d1c 0%, #0d1830 55%, #14223f 100%); color: var(--sy-txt); min-height: 70vh;
}
.sy-buri { font-family: "Sangcheon Buri", var(--font-buri), serif; font-weight: 300; letter-spacing: -0.01em; }
.sy-wrap { max-width: 1180px; margin: 0 auto; padding: 32px 20px 72px; box-sizing: border-box; }
.sy a { color: inherit; }
.sy a:focus-visible { outline: 2px solid var(--sy-gold); outline-offset: 3px; border-radius: 8px; }
.sy-eyebrow { font-size: 12px; letter-spacing: 0.26em; color: var(--sy-gold); }
.sy-h1 { margin: 0; font-size: 34px; line-height: 1.3; }
.sy-h2 { margin: 0; font-size: 22px; color: var(--sy-gold); }
.sy-lede { margin: 0; font-size: 16px; line-height: 1.75; color: var(--sy-body); }
.sy-p, .sy-steps, .sy-myth p { font-size: 15px; line-height: 1.8; color: var(--sy-body); }
.sy-small { margin: 0; font-size: 13px; color: var(--sy-muted); }
.sy-btn, .sy-btn-line { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 20px; border-radius: 999px; font-size: 15px; text-decoration: none; }
.sy-btn { background: var(--sy-gold); color: var(--sy-ink) !important; font-weight: 700; }
.sy-btn-line { align-self: flex-start; border: 1px solid rgba(235, 203, 153, 0.5); color: var(--sy-gold) !important; }

/* 목록 */
.sy-head { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.sy-tabs { display: flex; gap: 6px; margin: 24px 0 8px; overflow-x: auto; padding-bottom: 4px; }
.sy-tabs a { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--sy-line); border-radius: 999px; font-size: 14px; color: var(--sy-body); text-decoration: none; }
.sy-tabs a.is-now { background: var(--sy-gold); border-color: var(--sy-gold); color: var(--sy-ink); font-weight: 700; }
.sy-group { margin-top: 28px; scroll-margin-top: 90px; }
.sy-group-h { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.sy-group-h span { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--sy-muted); }
.sy-group-h b { color: var(--sy-gold); }
.sy-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sy-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid rgba(180, 192, 210, 0.25); border-radius: 14px; background: var(--sy-card); text-decoration: none; transition: border-color 0.2s; }
.sy-card:hover { border-color: var(--sy-gold); }
.sy-card.is-now { border-color: var(--sy-line); }
.sy-mini { display: block; width: 100%; aspect-ratio: 3 / 2; }
/* 별자리 그림(partials/star_drawing.html · story_sky.drawing) — 위 = 머리 위, 아래 = 지평선 */
.sy-sky { background: radial-gradient(ellipse 120% 110% at 50% 0%, #081021 0%, #0f1c38 70%, #1a2a4a 100%); }
.sy-l-l { stroke: rgba(235, 203, 153, 0.8); stroke-width: 1.3; stroke-linecap: round; }
.sy-l-f { stroke: rgba(180, 192, 210, 0.4); stroke-width: 1; stroke-dasharray: 3 4; stroke-linecap: round; }
.sy-l-g { stroke: rgba(200, 155, 60, 0.7); stroke-width: 1; stroke-dasharray: 2 5; stroke-linecap: round; }
.sy-mini .sy-l-l { stroke-width: 1.2; }
.sy-ground { fill: #050a14; fill-opacity: 0.82; }
.sy-horizon { stroke: rgba(180, 192, 210, 0.35); stroke-width: 1; }
.sy-sky text { font-family: var(--font-sans, "Pretendard"), "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
.sy-t-name { fill: #c9d2e0; font-size: 12.5px; }
.sy-t-glow { fill: #a9b6ca; font-size: 11px; }
.sy-t-cap { fill: #a9b6ca; font-size: 12px; }
.sy-t-fist { fill: #c89b3c; font-size: 12px; }
.sy-fist { stroke: #c89b3c; stroke-width: 1.2; fill: none; }
@keyframes sy-tw { 0%, 100% { opacity: 1; } 45% { opacity: 0.55; } 70% { opacity: 0.9; } }
.sy-tw { animation: sy-tw 3.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .sy-tw { animation: none; } }
.sy-card-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.sy-card-name { font-size: 18px; color: var(--sy-gold); }
.sy-card-title { font-size: 13.5px; line-height: 1.5; color: var(--sy-body); }
.sy-badge { align-self: flex-start; margin-top: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(47, 111, 98, 0.35); color: #a9e0cf; font-size: 12px; }
.sy-badge.is-off { background: rgba(180, 192, 210, 0.12); color: var(--sy-muted); }
.sy-cards.is-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.sy-cards.is-list .sy-card { flex-direction: row; align-items: center; gap: 12px; padding: 10px; }
.sy-cards.is-list .sy-mini { width: 96px; flex-shrink: 0; border-radius: 8px; }
.sy-cards.is-list .sy-card-body { padding: 0; }

/* 한 편 */
.sy-crumb { margin-bottom: 14px; font-size: 14px; }
.sy-crumb a { color: var(--sy-muted); text-decoration: none; }
.sy-story { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 48px; align-items: start; }
.sy-story-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; }
.sy-hero { display: block; width: 100%; height: auto; border-radius: 18px; }
.sy-tonight { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid rgba(235, 203, 153, 0.45); border-radius: 16px; background: rgba(235, 203, 153, 0.08); }
.sy-tonight p { margin: 0; }
.sy-tonight-k { font-size: 12px; letter-spacing: 0.08em; color: var(--sy-gold); }
.sy-tonight-sky { font-size: 18px; font-weight: 700; }
.sy-tonight-where { font-size: 14px; color: var(--sy-body); }
.sy-tonight .sy-btn { margin-top: 8px; }
.sy-story-main { display: flex; flex-direction: column; gap: 32px; }
.sy-title { display: flex; flex-direction: column; gap: 8px; }
.sy-chip { align-self: flex-start; padding: 3px 12px; border: 1px solid rgba(235, 203, 153, 0.55); border-radius: 999px; font-size: 13px; color: var(--sy-gold); }
.sy-latin { margin: 0; font-size: 14px; color: var(--sy-muted); }
.sy-title .sy-h1 { font-size: 42px; }
.sy-sec { display: flex; flex-direction: column; gap: 12px; }
.sy-find { display: none; }
.sy-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.sy-myths { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.sy-myth { padding: 16px 18px; border-radius: 14px; background: rgba(255, 253, 248, 0.05); }
.sy-myth p { margin: 0; }
.sy-myth-k { margin-bottom: 6px !important; font-size: 13px !important; font-weight: 700; color: var(--sy-gold) !important; }
.sy-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sy-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; align-items: end; height: 76px; }
.sy-month { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; color: #8f9cb0; }
.sy-month span { width: 100%; border-radius: 4px 4px 0 0; }
.sy-month.lv0 span { height: 6px; background: rgba(180, 192, 210, 0.18); }
.sy-month.lv1 span { height: 20px; background: rgba(235, 203, 153, 0.35); }
.sy-month.lv2 span { height: 38px; background: rgba(235, 203, 153, 0.6); }
.sy-month.lv3 span { height: 54px; background: var(--sy-gold); }
.sy-next { margin-top: 44px; }

@media (max-width: 900px) {
  /* 한 줄로: 선 그림 → 이름 → 오늘 밤 → 찾는 법 → … (두 칸의 상자를 풀어 순서를 다시 정한다) */
  .sy-story { display: flex; flex-direction: column; gap: 24px; }
  .sy-story-side, .sy-story-main { display: contents; }
  .sy-hero { order: 1; }
  .sy-title { order: 2; }
  .sy-tonight { order: 3; }
  .sy-story-main > .sy-sec { order: 4; }
  .sy-two { order: 5; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .sy-wrap { padding: 24px 16px 56px; }
  .sy-h1 { font-size: 30px; }
  .sy-title .sy-h1 { font-size: 34px; }
  .sy-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sy-cards.is-list { grid-template-columns: minmax(0, 1fr); }
  .sy-card-name { font-size: 16px; }
  .sy-card-title { font-size: 12.5px; }
  .sy-hero { margin: 0 -16px; width: calc(100% + 32px); border-radius: 0; }
  .sy-find { display: block; width: 100%; height: auto; border-radius: 14px; }
}