/* 달스튜디오 홈 전용. 위에서 아래로 하루가 지나간다. 공통 토큰은 site.css. 외부 요청 없음. */

:root {
  --night: #17203A;
  --night-ink: #EEF1F8;
  --night-soft: #B7C0D6;
  --night-shade: #2B3555;
  --gold: #F1D68C;
  --morning: #E7EEF7;
  --noon: #F4F1E8;
  --dusk: #4A4A78;
  --win: #FFFFFF;
  --win-ink: #222A3C;
  --win-soft: #667085;
  --win-line: #E3E6EC;
}

/* ---------- 머리 ---------- */

.night { background: var(--night); color: var(--night-ink); overflow: hidden; }
.night .mark { color: var(--night-ink); }
.night .top nav a { color: var(--night-soft); }
.night .top nav a:hover { color: var(--night-ink); }
.night a:focus-visible, .hub-night a:focus-visible { outline-color: var(--gold); }

.hero-home { padding-top: clamp(2rem, 6vw, 4.5rem); text-align: center; }
.hero-copy h1 { font-size: clamp(2.4rem, 1.2rem + 5.4vw, 5.25rem); line-height: 1.12; letter-spacing: -0.045em; font-weight: 800; }
.hero-copy .line { display: block; }
.hero-copy .lede { margin: 1.2rem auto 0; max-width: none; color: var(--night-soft); }
.cta { margin-top: 1.75rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem 1.5rem; }
.pill { display: inline-block; padding: 0.75rem 1.4rem; border-radius: 999px; background: var(--gold); color: #2A2410; font-weight: 700; text-decoration: none; }
.pill:hover { background: #F7E3A9; }
.plain { color: var(--night-ink); font-weight: 600; text-underline-offset: 0.25em; }

/* 창 */
.win {
  margin: 0; background: var(--win); color: var(--win-ink); border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 0 rgb(0 0 0 / 0.04), 0 28px 60px -28px rgb(15 20 40 / 0.55);
}
.win figcaption, .win .bar {
  margin: 0; padding: 0.5rem 0.85rem; font-size: 0.8rem; font-weight: 600; line-height: 1.3;
  color: var(--win-soft); border-bottom: 1px solid var(--win-line);
}
.win figcaption::before, .win .bar::before {
  content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.45rem; border-radius: 50%; background: var(--gold); box-shadow: inset -0.14rem 0 0 #C9A94F;
}
.win img { width: 100%; }

/* 무대: 달 앞에 앱들 */
.stage { position: relative; margin-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: 0; }
.big-moon { position: absolute; right: -4%; top: -11%; width: min(34%, 22rem); overflow: visible; }
.big-moon .shade { fill: var(--night-shade); }
.big-moon .lit { fill: var(--gold); }
.main-win { position: relative; width: min(86%, 56rem); margin: 0 auto -2.5rem; background: #1B2233; }
.main-win figcaption { color: var(--night-soft); border-bottom-color: #2E3750; }
.float { position: absolute; width: clamp(11rem, 21%, 14.5rem); text-align: left; }
.float ul { list-style: none; margin: 0; padding: 0.3rem 0.85rem 0.6rem; }
.float li { padding: 0.4rem 0; font-size: 0.74rem; line-height: 1.4; color: var(--win-soft); }
.float li + li { border-top: 1px solid var(--win-line); }
.float b { display: block; color: var(--win-ink); font-size: 0.82rem; }
.float.clip { left: 0; bottom: 14%; }
.float.note { right: 0; bottom: 34%; }
.float .memo { padding: 0.65rem 0.85rem 0.8rem; font-size: 0.82rem; line-height: 1.55; }
.float u, .page u { text-decoration-color: #B6A25F; text-underline-offset: 0.2em; }

/* ---------- 하루 ---------- */

.day { background: linear-gradient(180deg, var(--morning) 0%, var(--noon) 48%, var(--dusk) 56%, var(--night) 100%); padding-top: 5rem; }

.scene {
  padding-top: clamp(4rem, 9vw, 7rem); padding-bottom: clamp(1rem, 3vw, 2rem);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 6vw, 5rem); align-items: center;
  color: var(--ink);
}
.scene.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.scene.flip .say { order: 2; }
.scene.dusk, .scene.late { color: var(--night-ink); }
.scene.dusk .say > p:not(.clock):not(.tag), .scene.late .say > p:not(.clock):not(.tag) { color: var(--night-soft); }

.clock { font-size: var(--s0); font-weight: 700; color: var(--accent); }
.scene.dusk .clock, .scene.late .clock, .hub-night .clock { color: var(--gold); }
.say h2, .hub-night h2, .rising h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); line-height: 1.16; letter-spacing: -0.04em; font-weight: 800; }
.say h2 { margin-top: 0.4rem; }
.say > p:not(.clock):not(.tag) { margin-top: 1rem; font-size: var(--s1); line-height: 1.55; color: var(--ink-soft); max-width: 20em; }
.tag { margin-top: 1.1rem; font-size: var(--s-1); opacity: 0.85; }
.tag strong { margin-right: 0.35rem; }
.say .more { display: inline-block; margin-top: 0.5rem; font-weight: 700; }

/* 앱 모습 */
.mock { font-size: 0.95rem; }
.clips { list-style: none; margin: 0; padding: 0.25rem 1.1rem 0.5rem; }
.clips li { padding: 0.8rem 0; line-height: 1.4; }
.clips li + li { border-top: 1px solid var(--win-line); }
.clips b { display: block; font-size: 1.02rem; }
.clips span { font-size: 0.82rem; color: var(--win-soft); }

.paper { background: #FCFAF4; }
.page { padding: 1.25rem 1.5rem 1.5rem; line-height: 1.75; }
.page h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.page .quote { margin: 0.9rem 0; padding-left: 0.9rem; border-left: 3px solid var(--gold); font-weight: 600; }
.page small { display: block; font-size: 0.8rem; font-weight: 400; color: var(--win-soft); }
.page .links { font-size: 0.85rem; color: var(--win-soft); }
.page .links u { margin-left: 0.5rem; color: var(--win-ink); }

.chart { padding: 1.1rem 1.25rem 1.4rem; }
.song { font-size: 1.15rem; font-weight: 700; }
.song small { display: block; font-size: 0.82rem; font-weight: 400; color: var(--win-soft); }
.chart ol { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 2px solid var(--win-ink); }
.chart li { padding: 1rem 0.5rem; text-align: center; font-weight: 700; border-right: 2px solid var(--win-ink); border-bottom: 1px solid var(--win-line); }

/* ---------- 달 허브 ---------- */

.hub-night { padding-top: clamp(5rem, 11vw, 8rem); padding-bottom: clamp(4rem, 9vw, 6.5rem); background: var(--night); color: var(--night-ink); }
.hub-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2.5rem clamp(2rem, 6vw, 5rem); align-items: center; }
.hub-night h2 { margin-top: 0.4rem; }
.hub-lede { margin-top: 1rem; font-size: var(--s1); line-height: 1.55; color: var(--night-soft); max-width: 22em; }
.ties { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.ties li { padding: 0.25rem 0; font-size: var(--s1); }
.ties li::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.7em; vertical-align: 0.12em; border-radius: 50%; background: var(--gold); }
.ties b { font-weight: 600; }

.switch ul { list-style: none; margin: 0; padding: 0.35rem; }
.switch li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.75rem; border-radius: 8px; font-weight: 600; }
.switch li span { font-size: 0.8rem; font-weight: 400; color: var(--win-soft); }
.switch li.on { background: #EEF0F7; }

/* ---------- 달력 ---------- */

.rising { padding-top: clamp(4rem, 9vw, 6rem); text-align: center; }
.phases { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem 1rem; }
.phases svg { width: clamp(44px, 7vw, 68px); height: auto; margin: 0 auto 0.75rem; overflow: visible; display: block; }
.phases .shade { fill: var(--moon-dark); stroke: var(--moon-edge); stroke-width: 1; }
.phases .lit { fill: var(--moon-lit); }
.phases b { display: block; }
.phases span { font-size: var(--s-1); color: var(--muted); }

/* ---------- 좁은 화면 ---------- */

@media (max-width: 820px) {
  .scene, .scene.flip, .hub-grid { grid-template-columns: minmax(0, 1fr); }
  .scene.flip .say { order: 0; }
  .say > p:not(.clock):not(.tag) { font-size: var(--s0); }
  .main-win { width: 100%; }
  .float.clip { bottom: -1rem; left: -0.25rem; width: 10.5rem; }
  .float.note { display: none; }
  .big-moon { width: 42%; top: -2.5rem; right: -3rem; }
  .day { padding-top: 4rem; }
  .phases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}